/**
 * 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);
}

/*
 * #8066: Recent-tab layout collapse fix.
 * `.tab-group--sheet-host` (tab_group/_base.css) neutralises floating-panel
 * chrome for the TabMergeService drop-zone with `display: block !important;
 * overflow: visible !important`. That clobbers the flex column above, so the
 * tab content area has no internal scroll viewport: short tabs (Stats) fit in
 * block auto-height, but the tall server-rendered Recent activity timeline
 * overflows the slot and is clipped out of view (renders "blank" despite ~5KB
 * of content). Restore the column + a clipped host here (higher specificity +
 * !important beats the single-class sheet-host rule) so `.side-panel-content`'s
 * `flex:1; overflow-y:auto` scrolls tall tabs inside the panel. Position/z-index
 * neutralisation from sheet-host is untouched, so the merge drop-zone is intact.
 */
.character-sheet.tab-group--sheet-host {
  display: flex !important;
  flex-direction: column;
  overflow: hidden !important;
}

/* Reduce padding layering inside character sheet panel (#238) */
.character-sheet .side-panel-content {
  padding: var(--space-2);
  /* Allow the flex-1 content wrapper to shrink below content size so its
     own overflow-y:auto engages instead of the tab spilling past the slot. */
  min-height: 0;
}

.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-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);
}

/* ========================================
 * 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);
}

/* 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-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);
}

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

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

.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;
}

/* 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: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);
}

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

/* ========================================
 * 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__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);
}

/* ========================================
 * 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);
}


/* ========================================
 * 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 {
    min-width: calc(50% - var(--space-1));
  }

  .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;
  }
}

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

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

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


.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__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-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-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.
 */


/* ========================================
 * 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);
}

/* ========================================
 * 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);
}

/* ========================================
 * 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);
}

/* cs-stats-hexagon-row, cs-stat-column, cs-stat-item, cs-stat-label, cs-stat-value removed — classes never applied in HTML (#6031) */

/* ========================================
 * 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
 * ======================================== */

.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.
 */

/* ========================================
 * 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);
}

/* cs-xp-progress__label removed — class never applied in HTML (#6031) */

/* ========================================
 * 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__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__pips, cs-spell-slot__pip--filled, cs-spell-slot__pip--used removed — classes never applied in HTML (#6031) */

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

@media (hover: none) {
  /* 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;
  }

  /* 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);
  }

  /* 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 {
  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;
}

/* ========================================
 * 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;
  }

}

/* ========================================
 * 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-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__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,
.cs-hit-dice-card__rest {
  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 {
  margin-left: auto;
}

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

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


.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] {
  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-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);
}

/**
 * Character Sheet Inline — Responsive
 * =====================================
 * Responsive adjustments for compact view.
 */

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

@media (max-width: 600px) {
  .character-sheet-inline {
    padding: var(--spacing-sm);
  }

  .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 {
    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
 * ========================================== */


/* ==========================================
 * 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;
}


/* ==========================================
 * 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%);
  }

}

@media (max-width: 768px) {
  /* On mobile, sidebars take full width */
  .zone--left,
  .zone--right {
    width: 100%;
    max-width: 100%;
  }

  /* The desktop min-width:300px makes .zone--main unshrinkable below 300px, so
     at a 320px viewport it forces horizontal overflow. Release it on mobile —
     the flex child should shrink to the viewport. (mobile UX audit) */
  .zone--main {
    min-width: 0;
  }

  /* 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);
}

/* Trade button on member cards (Player Trading PT8, #7691).
 * Sits just left of the whisper button; same affordance, gold-coin accent. */
.btn-trade {
  position: absolute;
  top: 4px;
  right: 32px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.party-member-card:hover .btn-trade {
  opacity: 1;
}

.btn-trade:hover:not(:disabled) {
  background: rgba(234, 179, 8, 0.4);
}

.btn-trade:active:not(:disabled) {
  background: rgba(234, 179, 8, 0.6);
}

.btn-trade:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Keep a disabled (offline) trade button discoverable on hover so players
 * understand why they can't trade, rather than the button vanishing. */
.party-member-card:hover .btn-trade:disabled {
  opacity: 0.45;
}

.btn-trade:focus-visible {
  outline: 2px solid #eab308;
  outline-offset: 1px;
  opacity: 1;
}

/* ========================================
 * 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,
.btn-trade 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);
}

/* Keyboard focus indicator — WCAG 2.4.7 (#7576). The faint box-shadow above is
   not a sufficient focus ring on its own for keyboard users. */
.form-input:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
}

.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 Button + Badge (status bar)
   ===================================
   The status-bar affordance that OPENS the friends modal, split out of
   _friends_modal.css in #10544 when that file crossed the 500-LOC cap. It is a
   genuinely separate component: a toolbar button rendered by
   terminal/organisms/status_bar/_toolbar.html.erb, whereas _friends_modal.css
   styles the <dialog> itself. The controller is mounted on BOTH — see the
   two-instance note in friends_modal_controller.js. */

/* 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 pending friend-request count */
.friends-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background-color: var(--color-success, #22c55e);
  color: var(--color-bg-primary, #1a1a1a);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--font-weight-bold, 700);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-bg-primary, #1a1a1a);
}

/* `display: inline-flex` above is an AUTHOR rule and so beats the UA sheet's
   `[hidden] { display: none }`. Without this line the badge stayed painted for
   every user with zero pending requests — an empty green pill with no number in
   it, which is exactly the "flashing green dot, can't see the number" report
   behind #10544. The ERB and friends_listener_controller both hide via the
   attribute, so the attribute has to win. */
.friends-badge[hidden] {
  display: none;
}

/* Pulse the ring to draw the eye — never the text, which has to stay readable
   at a glance. Only applies when the badge actually carries a count. */
.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, #1a1a1a), 0 0 0 2px var(--color-success, #22c55e);
  }
  50% {
    box-shadow: 0 0 0 2px var(--color-bg-primary, #1a1a1a), 0 0 8px 4px rgba(34, 197, 94, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .friends-badge:not(:empty) {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-bg-primary, #1a1a1a), 0 0 0 2px var(--color-success, #22c55e);
  }
}
/* Friends Modal Styles (the <dialog>; the status-bar button lives in
   _friends_badge.css) */

/* 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;
  /* Stacking is load-bearing here (#10544). The close button is the FIRST
     child of .friends-modal__content and .friends-modal__header is the second;
     both are positioned with an auto stack level, so painting fell back to DOM
     order and the header — opaque, full width, flush to the top — painted
     straight over this button. Playwright's actionability check named it:
     "<h2 class="friends-modal__title"> … intercepts pointer events". The X was
     unclickable, not merely unwired.
     --z-raised is the token for "just above siblings", which is exactly the
     relationship being asserted.
     Prove it: drop the declaration below, re-run
     `RAILS_ENV=e2e rails assets:precompile`, then
     `npx playwright test e2e/tests/friend-system.spec.js -g "X closes"` —
     it fails with "intercepts pointer events" rather than "Received: visible",
     which is the signature of the separate close()-handler defect. */
  z-index: var(--z-raised);
  background: transparent;
  border: none;
  color: var(--text-muted, #71717a);
  cursor: pointer;
  /* A 16px icon needs a finger-sized target; 4px of padding was not one. */
  padding: 8px;
  line-height: 0;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.friends-modal__close:hover {
  color: var(--text-primary, #e4e4e7);
}

.friends-modal__close:focus-visible {
  outline: 2px solid var(--color-accent-primary, #a855f7);
  outline-offset: 2px;
  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);
}

/* Keyboard focus indicator — WCAG 2.4.7 (#7576). */
.friends-modal__input:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
}

.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-mode message list (.chat-messages / .chat-message*) lives in
   turn_queue/_chat_messages.css — extracted in #10348 for the 500-LOC cap. */

.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 .action-form-section {
  display: none;
}

/**
 * Turn Queue — Chat Mode message list
 * ===================================
 * Extracted from turn_queue/_modes.css in #10348, which crossed the 500-LOC
 * CSS cap when the pending/failed delivery states were added. Loaded via the
 * turn_queue import hub (organisms/_turn_queue.css) alongside its siblings.
 *
 * The --pending / --failed states exist because the turn-queue Chat control
 * renders OPTIMISTICALLY: the bubble is drawn before the server has confirmed
 * anything. Rendering an unconfirmed message identically to a delivered one is
 * what let a rejected send look successful, so these states are load-bearing,
 * not decoration.
 */

.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);
}

/* (#10348) Optimistically-rendered message awaiting the server's verdict.
   Held visually distinct from a delivered message so "it appeared" never
   silently means "it sent". */
.chat-message--pending {
  opacity: 0.6;
}

.chat-message--pending .chat-message__text::after {
  content: " \2026";
  color: var(--text-tertiary, var(--text-secondary));
}

/* (#10348) The relay was refused or never acknowledged. */
.chat-message--failed {
  opacity: 1;
  border-left: 2px solid var(--color-danger, #b3261e);
  padding-left: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.chat-message--failed .chat-message__text {
  text-decoration: line-through;
  color: var(--text-secondary);
}

.chat-message__error {
  color: var(--color-danger, #b3261e);
  font-size: var(--font-size-xs);
  align-self: center;
}
/**
 * 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;
}

/* Draft-world signal (#7627) — creator-only badge for unpublished worlds. */
.campaign-discovery-panel .campaign-draft-badge {
  margin-left: auto;
  margin-right: 0.375rem;
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--warning-color, #f59e0b);
  color: #000;
  white-space: nowrap;
}

.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); }
}


.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;
}


/* ========================================
 * Personality
 * ======================================== */

/* Inline-editable personality fields (traits/ideals/bonds/flaws).
 * The click affordance mirrors .cs-hp-block__current / .cs-gold-value so the
 * editPersonality trigger reads as editable (#10655). */
.cs-personality-item {
  margin-bottom: var(--space-sm, 8px);
}

.cs-personality-value.cs-editable {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.cs-personality-value.cs-editable:hover {
  background: rgba(97, 175, 239, 0.1);
}

.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);
}


/* ========================================
 * 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; }

/* cs-tdd-divider, cs-tdd-divider__text, cs-tdd-sections removed — classes never applied in HTML (#6031) */

/* 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-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-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, cs-tdd-divider__text removed — classes never applied in HTML (#6031) */
}

/* ========================================
 * 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-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 {
  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 {
  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 {
  color: var(--color-danger-text, #dc3545);
}


dm-correction ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}


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);
}

/* At a 320px viewport the min-width above plus any container padding forces
   horizontal overflow. Release it on mobile. (mobile UX audit) */
@media (max-width: 767px) {
  .dressing-room {
    min-width: 0;
  }
}

.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 — Starter Gold Shop Panel
 * ========================================
 * Styles for the gold_shop panel shown to players who chose "Starting Gold"
 * during character creation. Terminal aesthetic: --bio-* tokens, monospace,
 * no gradients. Closes known gap #3 in subsystems/dressing_room.md (#5501).
 */

/* Panel root */
.gold-shop {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-surface);
  font-family: var(--font-mono, monospace);
}

/* Header: title + gold balance */
.gold-shop__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, var(--color-surface));
}

.gold-shop__title {
  margin: 0;
  font-size: var(--font-size-md, 0.95rem);
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Gold balance display */
.gold-shop__balance {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: 2px var(--spacing-sm, 8px);
  border: 1px solid var(--color-gold, #c8a951);
  border-radius: var(--radius-sm, 4px);
  font-weight: 700;
  color: var(--color-gold, #c8a951);
  font-size: var(--font-size-sm, 0.85rem);
}

.gold-shop__gold-icon {
  font-size: 0.75rem;
  opacity: 0.9;
}

.gold-shop__gold-label {
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Category filter bar */
.gold-shop__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.gold-shop__category-btn {
  padding: 2px var(--spacing-sm, 8px);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.1s, color 0.1s;
}

.gold-shop__category-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.gold-shop__category-btn--active {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle, rgba(99, 179, 237, 0.1));
}

/* Search row */
.gold-shop__search-row {
  padding: var(--spacing-sm) var(--spacing-md) 0;
}

.gold-shop__search {
  width: 100%;
  box-sizing: border-box;
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
}

.gold-shop__search::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.gold-shop__search:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Item list */
.gold-shop__item-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.gold-shop__loading,
.gold-shop__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm, 0.85rem);
  text-align: center;
  padding: var(--spacing-lg, 24px) 0;
}

/* Individual item card */
.gold-shop__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface);
  transition: border-color 0.1s;
}

.gold-shop__item:hover {
  border-color: var(--color-border-hover, var(--color-accent));
}

.gold-shop__item--unaffordable {
  opacity: 0.55;
}

.gold-shop__item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 2px;
}

.gold-shop__item-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm, 0.85rem);
}

/* Rarity badges */
.gold-shop__item-rarity {
  font-size: var(--font-size-xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 4px;
  border-radius: 2px;
}

.gold-shop__item-rarity--common   { color: var(--color-text-muted); }
.gold-shop__item-rarity--uncommon { color: #4ade80; }
.gold-shop__item-rarity--rare     { color: #60a5fa; }
.gold-shop__item-rarity--very_rare,
.gold-shop__item-rarity--very\ rare { color: #c084fc; }
.gold-shop__item-rarity--legendary { color: #fb923c; }

.gold-shop__item-details {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs, 4px);
}

.gold-shop__item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gold-shop__item-cost {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-gold, #c8a951);
  font-weight: 600;
}

.gold-shop__item-cost--over {
  color: var(--color-danger, #f87171);
}

/* Buttons */
.gold-shop__btn {
  padding: 3px var(--spacing-sm, 8px);
  border-radius: var(--radius-sm, 4px);
  border: 1px solid currentColor;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.1s;
}

.gold-shop__btn--buy {
  color: var(--color-accent);
  background: transparent;
}

.gold-shop__btn--buy:hover:not(:disabled) {
  background: var(--color-accent-subtle, rgba(99, 179, 237, 0.15));
}

.gold-shop__btn--disabled,
.gold-shop__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.gold-shop__btn--confirm {
  color: var(--color-success, #4ade80);
  background: transparent;
}

.gold-shop__btn--confirm:hover {
  background: rgba(74, 222, 128, 0.1);
}

.gold-shop__btn--cancel {
  color: var(--color-text-secondary);
  background: transparent;
}

.gold-shop__btn--cancel:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Leave-for-game footer button */
.gold-shop__footer {
  padding: var(--spacing-sm) var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.gold-shop__btn--leave {
  width: 100%;
  padding: var(--spacing-sm);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.1s;
}

.gold-shop__btn--leave:hover:not(:disabled) {
  background: var(--color-accent-subtle, rgba(99, 179, 237, 0.1));
}

.gold-shop__btn--leave:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Status messages */
.gold-shop__status {
  margin: 0 var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-sm, 0.85rem);
}

.gold-shop__status--success {
  color: var(--color-success, #4ade80);
  border: 1px solid var(--color-success, #4ade80);
  background: rgba(74, 222, 128, 0.08);
}

.gold-shop__status--error {
  color: var(--color-danger, #f87171);
  border: 1px solid var(--color-danger, #f87171);
  background: rgba(248, 113, 113, 0.08);
}

.gold-shop__status--info {
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

/* Purchase confirmation overlay */
.gold-shop__confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-panel); /* design token: panel layer (100) per terminal/_tokens.css #1891 */
  border-radius: var(--radius-md, 6px);
}

.gold-shop__confirm-dialog {
  background: var(--color-surface-elevated, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  padding: var(--spacing-lg, 24px);
  max-width: 280px;
  width: 90%;
  font-family: var(--font-mono, monospace);
}

.gold-shop__confirm-name {
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-md, 0.95rem);
}

.gold-shop__confirm-cost,
.gold-shop__confirm-balance {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-xs);
}

.gold-shop__confirm-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

/* Ensure relative positioning for confirm overlay */
.gold-shop {
  position: relative;
}
/**
 * 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__inline-edit, __input, __btn, __level-control, __level-btn, __level-display removed — classes never applied in HTML (#6031) */

.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 — Captured Scenes Gallery
 * =======================================
 * Posed scene images captured from in-voice character chat. Each entry shows a
 * thumbnail, the readable prompt/scene text, and a "Set as Picture" action.
 * (#dressing-room pose)
 */

.dressing-room__section-hint {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #9aa0a6);
  line-height: 1.4;
}

.dressing-room__scene-generate {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.dressing-room__scene-input {
  width: 100%;
  resize: vertical;
  padding: var(--space-2, 0.5rem);
  font: inherit;
  color: var(--color-text, #e8e8e8);
  background: var(--color-surface, #1a1a1a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 4px);
}

.dressing-room__scenes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.dressing-room__scenes-empty {
  grid-column: 1 / -1;
  padding: var(--space-3, 0.75rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #9aa0a6);
  text-align: center;
}

.dressing-room__scene {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem);
  background: var(--color-surface-raised, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 4px);
}

.dressing-room__scene-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface, #1a1a1a);
}

.dressing-room__scene-prompt {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #9aa0a6);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/**
 * Dressing Room Panel — Import Hub
 * ===================================
 * Character management: edit, level, equip, manage variants, and starter-gold shop.
 *
 * 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;
}

/* ============================================
 * JS-GENERATED MARKUP CLASSES
 * location_list_controller.js renders the current-location block and
 * adjacent/known lists with these (un-prefixed) class names, distinct from
 * the server-rendered `__location-*` / `__list` variants above.
 * ============================================ */

/* Current location heading + description */
.location-list__current-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--terminal-text-primary);
  margin-top: var(--terminal-spacing-xs);
}

.location-list__current-desc {
  font-size: 0.8rem;
  color: var(--terminal-text-muted);
  margin-top: var(--terminal-spacing-xs);
  line-height: 1.4;
}

/* List container for adjacent / known locations */
.location-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
}

/* Location name within a list item */
.location-list__name {
  font-weight: 500;
  color: var(--terminal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Distance/travel-time label on an adjacent location */
.location-list__distance {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
  margin-left: auto;
}
/**
 * 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
   ============================================================================= */

/* silhouette-body removed — class never applied in HTML (#6031) */

/* 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); }
}

@keyframes pulse-pending {
  0%, 100% { fill: var(--ragdoll-slot-pending); }
  50% { fill: rgba(251, 191, 36, 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 {
  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;
}

/* ─────────────────────────────────────────────────────────────────────────────
   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;
}

/* Transient cast-confirmation toast (#7709) */
.spell-selector__cast-feedback {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  text-align: center;
}

/* ========================================
 * 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;
}

/* Pending state: button was clicked and we're waiting for the server to
   advance the turn. Shown via setEndTurnPending(true) in the controller. */
.end-turn-btn.pending {
  background: var(--color-bg-tertiary, #444);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
  opacity: 0.8;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
  .end-turn-btn.pending::after {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    animation: spin 0.7s linear infinite;
  }
}

.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 — 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.
 * _base removed — token-card/token-grid old UI dead; current uses BEM token-spawner__ classes (#5556)


 */
/**
 * 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 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;
}

.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--injured { 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/--pro/--dm removed as dead (#5683) */

/* ==========================================
   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/--past_due/--trialing removed as dead (#5683) */

/* ==========================================
   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;
}

/* Locked state (#8629) — a confirm was sent via the deterministic
   `panel_selection` contract and we are awaiting the server's step_seq
   broadcast. The panel is LOCKED rather than destroyed so the player's picks
   are never lost mid-flight (#7863). Mirrors `.creation-options--locked`. */
.spell-selection-panel--locked,
.spell-tray--locked {
  pointer-events: none;
}

.spell-selection-panel--locked .spell-chip:not(.selected) {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.spell-selection-panel--locked .spell-confirm-btn,
.spell-tray--locked .send-spell-btn {
  opacity: 0.5;
}

.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;
  /* #6243 — #888 dips below 4.5:1 on the composited card bg at this size;
   * the canonical secondary token (#aaa) clears AA. */
  color: var(--color-text-secondary, #aaa);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* #6336 — inline prose description. Hidden by default so hover-capable
 * (desktop) pointers keep the compact card + the richer hover tooltip with no
 * regression. Revealed only on coarse/touch pointers, which never fire the
 * hover tooltip and where a tap commits instantly — without this, touch
 * players pick race/class/background blind (feeds the #6128 abandonment funnel). */
.creation-card__description {
  display: none;
  font-size: 12px;
  color: var(--color-text-secondary, #aaa);
  margin: 6px 0 0;
  line-height: 1.45;
}

@media (hover: none) and (pointer: coarse) {
  .creation-card__description {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* #7829 — gear-picking revamp: structured item rows on equipment cards.
   Each row is name (+ quantity) and an optional stat line, so a pack shows its
   contents with stats instead of a bare comma-joined tagline. */
.creation-card__items {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.creation-card__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 11px;
  line-height: 1.35;
}

.creation-card__item-name {
  color: var(--color-text-primary, #ddd);
}

.creation-card__item-stats {
  /* Canonical secondary token clears AA at this size on the composited bg. */
  color: var(--color-text-secondary, #aaa);
  font-size: 10px;
}

/* "Any martial weapon"-style open slot — muted + italic so it reads as a choice
   the player still resolves, not a fixed item. */
.creation-card__item--any .creation-card__item-name {
  color: var(--color-text-secondary, #aaa);
  font-style: italic;
}

.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);
  /* #6243 — 10px chip text over the translucent chip bg needs the higher-contrast
   * canonical token (#aaa) to clear 4.5:1 against the composited color. */
  color: var(--color-text-secondary, #aaa);
}
/**
 * Creation Cards — Responsive Layout
 * ====================================
 * Desktop flex grid, tablet breakpoints, and mobile full-width list layout.
 * Extracted from _base.css (#8247) to keep each partial under the 500-LOC cap.
 * Loaded AFTER _base.css so these media-query rules override the base grid.
 */

/* ============================================
   MULTI-SELECT FOOTER, CONFIRM, COUNT, LIMIT-REACHED
   Moved to `_selection_panel.css` (#4168) — see top-of-file note in _base.css.
   ============================================ */

/* ============================================
   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.
   * #6346 — this is a load-bearing control (the default filter HIDES expanded
   * races, so tapping it is required to see all options); 36px was under the
   * 44px touch floor on phones. */
  .creation-filter__btn {
    min-height: 44px;
    padding: 10px 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;
  }
}

/* Equipment per-slot drill-in (#10414). The wrapper is the grid item; the card
   and its drill affordances stack inside it. */
.creation-card-eq {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.creation-card-eq > .creation-card {
  width: 100%;
}

.creation-card__drills {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creation-card__drill-slot {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creation-card__drill {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--terminal-accent, #6cf);
  background: rgba(102, 204, 255, 0.08);
  border: 1px dashed rgba(102, 204, 255, 0.4);
  border-radius: 4px;
  text-align: left;
}

.creation-card__drill:hover,
.creation-card__drill:focus-visible {
  background: rgba(102, 204, 255, 0.16);
  border-style: solid;
}

.creation-card__drill-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}

.creation-card__drill-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  padding: 5px 8px;
  font-size: 0.8rem;
  color: var(--terminal-text, #cde);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  text-align: left;
}

.creation-card__drill-item:hover,
.creation-card__drill-item:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(102, 204, 255, 0.4);
}

.creation-card__drill-stats {
  color: var(--terminal-muted, #89a);
  white-space: nowrap;
}

.creation-card__drill-empty {
  padding: 6px 8px;
  font-size: 0.8rem;
  color: var(--terminal-muted, #89a);
}

/* Quick-build chips (#10427) — one-click class loadout presets on the equipment
   step, rendered above the pack cards. A chip applies a per-slot loadout in a
   single action. Only the equipment step supplies archetypes, so the chip row
   never appears on other steps. */
.creation-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.creation-chips__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terminal-muted, #89a);
}

.creation-chips__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.creation-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--terminal-accent, #6cf);
  background: rgba(102, 204, 255, 0.08);
  border: 1px solid rgba(102, 204, 255, 0.4);
  border-radius: 6px;
  text-align: left;
  max-width: 220px;
}

.creation-chip:hover,
.creation-chip:focus-visible {
  background: rgba(102, 204, 255, 0.18);
  border-color: rgba(102, 204, 255, 0.7);
}

.creation-chip--selected {
  background: rgba(102, 204, 255, 0.28);
  border-color: var(--terminal-accent, #6cf);
}

.creation-chip__name {
  font-weight: 600;
}

.creation-chip__summary {
  font-size: 0.75rem;
  color: var(--terminal-muted, #89a);
  white-space: normal;
}
/**
 * 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
   ==========================================================================
   NOTE (#7703): the .character-goals / .goal-item* rule blocks were removed
   here because they were confirmed-dead — defined only in this file and
   referenced in no ERB/HAML view, JS/TS, or Ruby source. They were flagging
   dead_class_count and were genuinely unused (the goals UI never shipped a
   consumer). Re-add with a live consumer if the goals panel is built out.
   ========================================================================== */

/* ==========================================================================
   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;
}

/* Keyboard focus indicator — WCAG 2.4.7 (#7576). */
.panel-palette-search:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: -2px;
}

.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;
}

/* Release the min-width on mobile so the panel can shrink to a 320px viewport
   instead of forcing horizontal overflow. (mobile UX audit) */
@media (max-width: 767px) {
  .panel-party-chat {
    min-width: 0;
  }
}

.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
 * ==================================================================
 * Extracted from _party_chat.css (#7814 — keep CSS partials under the
 * 500-LOC ratchet). Inline vote cards, option buttons, results bars, and
 * the in-chat vote-form accordion. Required after _party_chat.
 */

/* ========================================
 * 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;
}

/* Movement proposal card (#8410) */
.vote-card--movement {
  border-left: 2px solid var(--color-accent-primary, #3b82f6);
}

.vote-card__split-warning {
  font-size: 0.7rem;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: var(--spacing-xs);
}

.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;
  }
}
/**
 * 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);
}

/* ========================================
 * 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;
}

/* Touch press feedback — without this, taps on this frequently-used control
   feel dead and the default iOS blue tap flash shows. (mobile UX audit) */
.mode-selector__btn {
  -webkit-tap-highlight-color: transparent;
}

.mode-selector__btn:active {
  transform: scale(0.96);
}

/* 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-queue__summary {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.action-queue__summary:empty { display: none; }

/* Mount reveal contract (#10384) — matches .turn-rhythm / .telegraph-panel:
 * out of the layout until the controller receives queued actions for this player. */
.action-queue.initially-hidden,
.action-queue.hidden,
.action-queue__empty.hidden { display: none; }

/* 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
 */

/* Telegraph Panel — the mount container (#10384). Mirrors .action-queue's
 * container/header/list/empty structure so the two turn-rhythm side panels read
 * as one system. `.initially-hidden` matches the .turn-rhythm contract: out of
 * the layout until the controller receives real telegraph data. */
.telegraph-panel {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.telegraph-panel.initially-hidden,
.telegraph-panel.hidden { display: none; }

.telegraph-panel__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);
}

.telegraph-panel__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.telegraph-panel__list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.telegraph-panel__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

.telegraph-panel__empty.hidden { display: none; }

/* 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; }
}

/* ========================================
 * Reduced Motion — disable looping pulse
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  .turn-rhythm-panel.resolution-pending .phase-indicator {
    animation: none;
  }
}

.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;
}

/* ========================================
 * Annotation Detail Popover (#10662)
 * List of an entry's annotations, opened by clicking the margin indicator.
 * Each row exposes a Delete button (deleteAnnotationViaChannel).
 * ======================================== */

.annotation-detail-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-2);
  min-width: 200px;
  max-width: 340px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.annotation-detail-popover__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.annotation-detail-popover__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.annotation-detail-popover__row:hover {
  background: var(--color-bg-tertiary);
}

.annotation-detail-popover__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.annotation-detail-popover__author {
  color: var(--color-accent-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.annotation-detail-popover__content {
  color: var(--color-text-primary);
  word-break: break-word;
}

.annotation-detail-popover__delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  background: transparent;
  border: 1px solid transparent;
  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);
}

.annotation-detail-popover__delete:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-danger, #e5534b);
  border-color: var(--color-border-subtle);
}

/* ========================================
 * 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 — Live Draft Preview (#8644)
 * ==================================================
 * Floating preview of the entity being authored (NPC / item / location),
 * rendered exactly as the table will see it and updating as fields change from
 * either the structured form or the conversational path.
 *
 * The DM-only agenda block (.cs-draft__dm) is deliberately styled distinctly
 * from player-visible copy so a creator never confuses the two.
 * Uses design tokens from terminal/_tokens.css.
 */

.panel-cs-draft {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-cs-draft__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* Authoring-target chip (#10164) — "where does this save?" ----------------- */
.cs-target-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised, transparent);
  font-size: var(--font-size-xs);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.cs-target-chip__scope {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.cs-target-chip__sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.cs-target-chip__owner {
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-target-chip--error {
  border-color: var(--color-warning, var(--color-border-strong));
  background: color-mix(in srgb, var(--color-warning, var(--color-surface-raised)) 8%, transparent);
}

.cs-target-chip--error .cs-target-chip__scope {
  color: var(--color-warning, var(--color-text-secondary));
}

.panel-cs-draft .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-cs-draft .panel-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

/* Empty state ------------------------------------------------------------- */
.panel-cs-draft__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.panel-cs-draft__empty-text {
  margin: 0;
  max-width: 24ch;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Card -------------------------------------------------------------------- */
.panel-cs-draft__card {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

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

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

.cs-draft__icon {
  display: flex;
  align-items: center;
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.cs-draft__titles {
  min-width: 0;
}

.cs-draft__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.cs-draft__role {
  margin: 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

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

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

.cs-draft__field-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.cs-draft__field-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

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

/* DM-only section --------------------------------------------------------- */
.cs-draft__dm {
  border: 1px dashed var(--color-warning, var(--color-border-strong));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-warning, var(--color-surface-raised)) 8%, transparent);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-draft__dm-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-warning, var(--color-text-secondary));
}

.cs-draft__dm-value {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/**
 * Creator Studio Panels — Staged Drafts (#10166)
 * ================================================
 * First reader for CreatorStudioStagingItem (#9967's durable staging buffer):
 * a list of every item still awaiting "that's everything" (or discard), each
 * rendered via the shared draft-card body (.cs-draft__* — see
 * _draft_preview.css) plus a Discard action.
 *
 * Uses design tokens from terminal/_tokens.css.
 */

.panel-cs-staged {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-cs-staged__header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.panel-cs-staged .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-cs-staged .panel-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

/* Empty state ------------------------------------------------------------- */
.panel-cs-staged__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.panel-cs-staged__empty-text {
  margin: 0;
  max-width: 26ch;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* List ---------------------------------------------------------------------- */
.panel-cs-staged__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-staged__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
}

.cs-staged__discard-btn {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.cs-staged__discard-btn:hover {
  color: var(--color-danger, var(--color-text-primary));
  border-color: var(--color-danger, var(--color-border-strong));
}

.cs-staged__discard-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/**
 * 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.





 */
/* ============================================================
   Room Node Detail Panel (#7709)
   Layout for the node-inspector panel rendered alongside the
   room graph. Shows the selected node's properties, powers,
   simulation state, and node actions. XSS sink fixed by #7584;
   this file supplies the previously-missing layout styles.
   ============================================================ */

.room-node-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.room-node-detail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.room-node-detail__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.room-node-detail__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.room-node-detail__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.room-node-detail__empty p {
  margin: 0 0 var(--space-2);
}

.room-node-detail__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.room-node-detail__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.room-node-detail__section h4 {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.room-node-detail__field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.room-node-detail__field label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.room-node-detail__field span {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.room-node-detail__powers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.room-node-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.room-node-detail__btn {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  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: border-color 0.15s ease, background 0.15s ease;
}

.room-node-detail__btn:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg-secondary);
}

.room-node-detail__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.room-node-detail .hidden {
  display: none;
}
/* ============================================================
   Lore Relationship Graph Panel (#7709)
   Layout for the world entity relationship panel rendered from
   GET /api/v1/lore/relationships. Supplies the previously-missing
   styles for the panel container, node list, and edge list.
   ============================================================ */

.panel-lore-relationship-graph {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.lore-relationship-graph__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.lore-relationship-graph__controls {
  display: flex;
  gap: var(--space-2);
}

.lore-relationship-graph__filter {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.lore-relationship-graph__filter:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

.lore-relationship-graph__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

.lore-relationship-graph__loading,
.lore-relationship-graph__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.lore-relationship-graph__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lore-relationship-graph__summary {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
}

.lore-relationship-graph__nodes,
.lore-relationship-graph__edges {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lore-relationship-graph .section-label {
  margin: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

/* Node list */
.rel-node-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.rel-node-group__label {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rel-node-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rel-node {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.rel-node__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.rel-node__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Edge list */
.rel-edge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-bottom: 1px solid var(--color-border-subtle);
}

.rel-edge__source,
.rel-edge__target {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.rel-edge__connector {
  color: var(--color-accent-secondary);
}

.rel-edge__label {
  color: var(--color-text-muted);
}

.rel-edge__dm-badge {
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-accent-error);
  border: 1px solid var(--color-accent-error);
  border-radius: var(--radius-sm);
}

.rel-edge--dm-only {
  opacity: 0.85;
}

.lore-relationship-graph .empty-state {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  padding: var(--space-2);
}
/**
 * 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);
}
/* Voice Chat Panel — WebRTC party voice channel (#5541) */

.panel-voice-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  gap: var(--space-sm);
  padding: var(--space-sm);
}

.voice-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.voice-chat-header .panel-title {
  margin: 0;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.voice-chat__status {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* Peer speaking indicators */
.voice-chat__peer-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.voice-chat__peer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-raised, transparent);
}

.voice-chat__peer-id {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.voice-chat__peer-active {
  color: var(--accent-primary);
}

.voice-chat__peer-muted {
  color: var(--text-muted);
}

/* Controls */
.voice-chat__controls {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}

.voice-chat__mute-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.voice-chat__mute-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.voice-chat__mute-btn--active {
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}
/**
 * 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);
}

/* Close Lobby (DM-only, pre-game only). Deliberately shaped like btn-leave
   rather than Start Game: it is a consequential action sitting next to the
   primary one, so it must not read as the thing to click. It stays quiet until
   hover, then borrows the same error colour as Leave. */
.lobby-actions .btn-close-lobby {
  flex: 0 0 auto;
  color: var(--text-secondary, #9aa0a6);
}

.lobby-actions .btn-close-lobby:hover:not(:disabled) {
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
  background: var(--surface-primary);
}

/* 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);
}
/**
 * Campaign Lobby — Player Settings and Plans
 * ============================================
 * Player settings view, pulse animations, and party plans log.
 */

.settings-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.06);
  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 — Party Panel
 * ============================
 * Party roster with per-member ready states for campaign-lobby coordination.
 * Markup: app/views/terminal/panels/_campaign_lobby_party.html.erb
 */

.campaign-lobby-party {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
}

/* Header */
.campaign-lobby-party__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
}

.campaign-lobby-party__title {
  margin: 0;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-primary);
}

.campaign-lobby-party__count {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
}

/* Roster */
.campaign-lobby-party__roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.campaign-lobby-party__member {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--radius-sm, 4px);
}

/* Member status variants (border-left accent) */
.campaign-lobby-party__member--ready {
  border-left-color: var(--color-success, #4ade80);
}

.campaign-lobby-party__member--creating {
  border-left-color: var(--color-warning, #f59e0b);
}

.campaign-lobby-party__member--selecting,
.campaign-lobby-party__member--waiting {
  border-left-color: var(--color-border);
}

.campaign-lobby-party__member-name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary);
}

.campaign-lobby-party__member-character {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
}

.campaign-lobby-party__member-status {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
}

.campaign-lobby-party__member-status--creating {
  color: var(--color-warning, #f59e0b);
}

.campaign-lobby-party__ready-indicator {
  margin-left: auto;
}

.campaign-lobby-party__ready-badge {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-success, #4ade80);
}

.campaign-lobby-party__waiting-badge {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
}

/* Ready affordance (#9909) — terminal/panels/_lobby_ready_toggle.html.erb,
   rendered inside this panel because the campaign_lobby layout has no free
   slot for it and a tab would hide it behind a click. */
.campaign-lobby-party__actions {
  display: flex;
}

.lobby-ready-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  width: 100%;
  justify-content: center;
  padding: 0.4rem 0.75rem;
  font-family: inherit;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.lobby-ready-toggle:hover:not(:disabled) {
  border-color: var(--color-success, #4ade80);
  color: var(--color-success, #4ade80);
}

.lobby-ready-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #4ade80) 40%, transparent);
}

.lobby-ready-toggle--ready {
  color: var(--color-bg-primary, #0a0a0a);
  background: var(--color-success, #4ade80);
  border-color: var(--color-success, #4ade80);
}

.lobby-ready-toggle:disabled,
.lobby-ready-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lobby-ready-toggle__icon {
  display: inline-flex;
  align-items: center;
}

/* Footer */
.campaign-lobby-party__footer {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
}

.campaign-lobby-party__all-ready {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  color: var(--color-success, #4ade80);
  font-weight: 600;
}

.campaign-lobby-party__waiting {
  color: var(--color-text-muted);
}

.campaign-lobby-party__start-btn {
  padding: 0.35rem 0.75rem;
  font-family: inherit;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-bg-primary, #0a0a0a);
  background: var(--color-success, #4ade80);
  border: 1px solid var(--color-success, #4ade80);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: filter 0.15s ease;
}

.campaign-lobby-party__start-btn:hover {
  filter: brightness(1.1);
}

.campaign-lobby-party__start-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-success, #4ade80) 40%, transparent);
}
/**
 * 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-browser__* mirrors creation-reference-panel__* — the
   creation_browser_controller.js emits the creation-browser__ namespace (#7758) */
.creation-reference-panel__tabs,
.creation-browser__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,
.creation-browser__tabs:empty {
  display: none;
}

.creation-reference-panel__tab,
.creation-browser__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,
.creation-browser__tab:hover {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-tertiary, #2a2a4e);
}

.creation-reference-panel__tab--active,
.creation-browser__tab--active {
  color: var(--accent-color, #00d4ff);
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

.creation-browser__tab:focus-visible {
  outline: 2px solid var(--accent-color, #00d4ff);
  outline-offset: 2px;
}

/* 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;
}

/*
 * #8573: internal title header removed (grid-panel chrome supplies the title —
 * a second header was the double-header bug). Zoom controls now float as a
 * corner overlay over the map, mirroring _vtt.css's headerless control toolbar.
 */
.dungeon-map-controls {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: var(--z-sticky); /* above the map canvas, matching _vtt 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 {
  position: relative; /* anchor for the .dungeon-map-controls overlay (#8573) */
  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, urgency-time_sensitive, urgency-background removed — classes never applied in HTML (#6031) */
.urgency-low { color: var(--color-text-muted); }

.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, promise-player_to_npc, promise-mutual removed — classes never applied in HTML (#6031) */

.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;
}
/* ============================================
 * Module Progress Panel (#7963)
 * ============================================
 * Player- and admin-facing readout of the campaign module in play:
 * current act, story beats completed, and overall completion percentage.
 * Live-updated by terminal--module-progress-panel from the existing
 * terminal:module-state-update DOM event (#7941).
 */

.module-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

.module-progress__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-shrink: 0;
}

.module-progress__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);
}

.module-progress__icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-accent-primary);
}

.module-progress__module-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-progress__stats {
  display: flex;
  gap: var(--space-4);
  margin: 0;
}

.module-progress__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.module-progress__stat-label {
  margin: 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.module-progress__stat-value {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.module-progress__stat-total {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

.module-progress__bar {
  height: 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle, var(--color-border));
  overflow: hidden;
}

.module-progress__bar-fill {
  height: 100%;
  width: var(--mp-bar-fill, 0%);
  background: var(--color-accent-primary);
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.module-progress__latest {
  margin: 0;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
}

.module-progress__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
/* 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--injured {
  background: #eab308;
}

.party-roster__hp-fill--bloodied {
  background: #f97316;
}

.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;
  }
}
/* Player Trade Panel — two-player item/gold trade negotiation (PT7, #7690) */

.trade-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--space-sm);
  padding: var(--space-sm);
  overflow: hidden;
}

.trade-panel__empty {
  margin: auto;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.trade-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.trade-panel__title {
  margin: 0;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.trade-panel__status {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.trade-panel__target-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.trade-panel__target-row--hidden {
  display: none;
}

.trade-panel__label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.trade-panel__select,
.trade-panel__gold-input {
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.trade-panel__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.trade-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xs);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.trade-column__heading {
  margin: 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.trade-column__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  min-height: 2rem;
}

.trade-column__empty {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.trade-item {
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--surface-panel);
}

.trade-item--selected {
  border-color: var(--accent-primary);
  box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.trade-item--theirs {
  cursor: default;
}

.trade-panel__gold-error {
  margin: var(--space-2xs) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-danger, #d66);
}

.trade-panel__gold-error--hidden {
  display: none;
}

.trade-column__confirm-state {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-success, #6c6);
  min-height: 1em;
}

.trade-panel__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-subtle);
}

.trade-panel__btn {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--surface-panel);
  color: var(--text-primary);
}

.trade-panel__btn--confirm {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-accent, #fff);
}

.trade-panel__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/**
 * 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;
}

/* Horizontal bar charts (tool usage + intent distribution) */
.horizontal-bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.horizontal-bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 96px) 1fr auto;
  align-items: center;
  gap: var(--space-2);
}

.horizontal-bar-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-bar-track {
  height: 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.horizontal-bar {
  height: 100%;
  min-width: 2px;
  border-radius: var(--radius-xs);
  transition: width 0.3s ease;
}

.horizontal-bar--tool {
  background: var(--color-accent-primary);
}

.horizontal-bar--intent {
  background: var(--color-accent-cyan);
}

.horizontal-bar-value {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 2ch;
  text-align: right;
}
/**
 * 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;
  }
}
/**
 * User Settings Panel
 * ===================
 * Lobby-context settings panel: appearance, sound, gameplay toggles, and an
 * account section. Renders inside the shared `.panel` chrome — `.panel-header`,
 * `.panel-title`, `.section-header`, and `.setting-label` come from base/atoms;
 * the layout + toggle-switch classes below are panel-specific.
 *
 * Partial: app/views/terminal/panels/_user_settings.html.erb
 */

.user-settings-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 16px);
  padding: var(--spacing-md, 16px);
  overflow-y: auto;
}

.user-settings-panel .panel-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 24px);
}

/* ─────────────────────────────────────────────────────────────────────────
   Sections
   ───────────────────────────────────────────────────────────────────────── */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding-bottom: var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.settings-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Setting rows
   ───────────────────────────────────────────────────────────────────────── */
.setting-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.setting-row--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 8px);
}

.setting-select {
  width: 100%;
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-surface, #252540);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

.setting-select:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Language: Tier-1 button group (#7695)
   ───────────────────────────────────────────────────────────────────────── */
.setting-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 4px);
}

.setting-btn {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-surface, #252540);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
}

.setting-btn:hover {
  border-color: var(--accent-primary, #60a5fa);
}

.setting-btn.active {
  color: var(--bg-base, #1a1a2e);
  background: var(--accent-primary, #60a5fa);
  border-color: var(--accent-primary, #60a5fa);
  font-weight: 600;
}

.setting-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 1px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Toggle switch
   ───────────────────────────────────────────────────────────────────────── */
.toggle-switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 40px;
  height: 22px;
}

.toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-surface, #252540);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.18));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted, #888);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-primary, #60a5fa);
  border-color: var(--accent-primary, #60a5fa);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--bg-base, #0a0a0f);
}

.toggle-switch input:focus-visible + .toggle-slider {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Account section
   ───────────────────────────────────────────────────────────────────────── */
.account-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 8px);
  font-size: var(--font-size-sm, 0.85rem);
}

.account-label {
  color: var(--text-muted, #888);
}

.account-value {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
}

.account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 8px);
  margin-top: var(--spacing-sm, 8px);
}

/* ─────────────────────────────────────────────────────────────────────────
   Guest notice
   ───────────────────────────────────────────────────────────────────────── */
.guest-notice {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-secondary, #aaa);
}

.guest-actions {
  display: flex;
  gap: var(--spacing-sm, 8px);
}
/**
 * Quests Panel (Unified)
 * ======================
 * Tabbed wrapper combining the Active quest log and the Journal view. The
 * inner `.quest-log__*` and `.quest-journal__*` content classes are already
 * styled elsewhere (organisms/quest_log, organisms/quest_interfaces); the
 * `.quests-panel__*` wrapper/tab chrome below was previously undefined.
 *
 * Partial: app/views/terminal/panels/_quests.html.erb
 */

.quests-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────
   Header (tabs + search)
   ───────────────────────────────────────────────────────────────────────── */
.quests-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 8px);
  flex-wrap: wrap;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
}

.quests-panel__tabs {
  display: flex;
  gap: var(--spacing-xs, 4px);
}

.quests-panel__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-secondary, #aaa);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.quests-panel__tab:hover {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-surface, rgba(255, 255, 255, 0.05));
}

.quests-panel__tab:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 1px;
}

.quests-panel__tab--active {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-surface, rgba(255, 255, 255, 0.08));
  border-color: var(--border-color, rgba(255, 255, 255, 0.18));
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────
   Tab content
   ───────────────────────────────────────────────────────────────────────── */
.quests-panel__tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
}
/**
 * Stream Combat Events Panel
 * ==========================
 * Lightweight embedded log container for the combat event stream. Distinct
 * from the draggable/resizable `.floating-stream-panel*` chrome (header,
 * controls, resize handles) — this partial is a bare scrollable log mounted
 * inline, so it defines its own minimal container styling.
 *
 * Partial: app/views/terminal/panels/_stream_combat_events.html.erb
 */

.stream-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 6px);
}

.stream-panel__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-sm, 8px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
}

.stream-panel__messages:empty::before {
  content: "Waiting for combat events…";
  color: var(--text-muted, #888);
  font-style: italic;
}

/* Combat-events variant: subtle danger-tinted left accent to distinguish it
   from other stream channels. */
.stream-panel--combat-events {
  border-left: 3px solid var(--accent-danger, #ef4444);
}
/**
 * Creation Preview — Section Blocks
 * =================================
 * Styles the `.preview-section*` block tree that
 * creation_preview_controller.js renders into its per-section targets
 * (race / class / traits / features / abilities / skills / equipment /
 * summary). Distinct from the `.creation-preview*` container block in
 * organisms/_creation_preview.css — these are the dynamically-injected
 * inner sections.
 *
 * Source markup: app/javascript/controllers/terminal/creation_preview_controller.js
 */

/* ─────────────────────────────────────────────────────────────────────────
   Section container
   ───────────────────────────────────────────────────────────────────────── */
.preview-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px);
  background: var(--bg-surface, #252540);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
}

/* Race / class sections lead with an icon beside the name block. */
.preview-section--race,
.preview-section--class {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm, 8px);
}

.preview-section__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--accent-primary, #60a5fa);
}

.preview-section__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.preview-section__title {
  font-size: var(--font-size-md, 1rem);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.preview-section__subtitle {
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-secondary, #aaa);
}

.preview-section__header {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
}

/* ─────────────────────────────────────────────────────────────────────────
   Abilities
   ───────────────────────────────────────────────────────────────────────── */
.preview-abilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs, 4px);
}

.preview-ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--spacing-xs, 4px);
  background: var(--bg-base, #0a0a0f);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
}

.preview-ability--boosted {
  border-color: var(--accent-success, #34d399);
}

.preview-ability__abbrev {
  font-size: var(--font-size-2xs, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888);
}

.preview-ability__value {
  font-size: var(--font-size-md, 1rem);
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
}

.preview-ability__bonus {
  font-size: var(--font-size-2xs, 0.7rem);
  color: var(--accent-success, #34d399);
}

/* ─────────────────────────────────────────────────────────────────────────
   Skills
   ───────────────────────────────────────────────────────────────────────── */
.preview-skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 4px);
}

.preview-skill-chip {
  padding: 2px var(--spacing-sm, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary, #aaa);
  background: var(--bg-base, #0a0a0f);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Equipment
   ───────────────────────────────────────────────────────────────────────── */
.preview-equipment-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 4px);
  align-items: center;
}

.preview-equipment-chip {
  padding: 2px var(--spacing-sm, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary, #aaa);
  background: var(--bg-base, #0a0a0f);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 4px);
}

.preview-equipment-more {
  font-size: var(--font-size-xs, 0.75rem);
  font-style: italic;
  color: var(--text-muted, #888);
}

/* ─────────────────────────────────────────────────────────────────────────
   Summary (inline · separated parts)
   ───────────────────────────────────────────────────────────────────────── */
.preview-section--summary {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--text-secondary, #aaa);
}

.preview-summary__name {
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.preview-summary__alignment,
.preview-summary__background {
  color: var(--text-secondary, #aaa);
}
/**
 * Quick Start Panel
 * =================
 * Archetype-based instant play + custom creation entry points.
 * Markup: app/views/terminal/panels/_quick_start.html.erb
 */

/* Section grouping */
.quick-start-section {
  margin-bottom: var(--space-4, 1rem);
}

.quick-start-section .section-header {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1, 0.25rem);
}

.quick-start-section .section-description {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2, 0.5rem);
}

/* ============================================
 * ARCHETYPE GRID (instant-play heroes)
 * ============================================ */
.archetype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2, 0.5rem);
}

.archetype-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  text-align: left;
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.archetype-card:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.archetype-card:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
}

.archetype-card:active {
  transform: scale(0.99);
}

.archetype-card .archetype-icon {
  flex-shrink: 0;
  color: var(--color-accent-primary);
}

.archetype-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.archetype-name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
}

.archetype-class {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent-primary);
}

.archetype-desc {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
}

.archetype-onboarding {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.35;
  margin-top: 0.15rem;
}

/* ============================================
 * CUSTOM CREATION OPTIONS
 * ============================================ */
.creation-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.creation-option-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  text-align: left;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.creation-option-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.creation-option-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
}

.creation-option-btn .option-icon {
  flex-shrink: 0;
  color: var(--color-accent-primary);
}

.creation-option-btn .option-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.creation-option-btn .option-name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
}

.creation-option-btn .option-desc {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
}
/**
 * Lobby Mode Indicator Panel
 * ==========================
 * Clickable message-mode chips for main + campaign lobbies.
 * Markup: app/views/terminal/panels/_lobby_mode_indicator.html.erb
 */

.lobby-mode-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
}

.lobby-mode-indicator__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
}

.lobby-mode-indicator__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.6rem;
  font-family: var(--font-mono, inherit);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lobby-mode-indicator__chip:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.lobby-mode-indicator__chip:focus-visible {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
}

.lobby-mode-indicator__chip--active {
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
}

.lobby-mode-indicator__prefix {
  font-weight: 600;
}

.lobby-mode-indicator__hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  line-height: 1.4;
}
/**
 * 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;
  }
}

/* ── Pinned slot state (#3486) ────────────────────────────────── */

/*
 * A slot with data-pinned="true" has been explicitly "pinned into"
 * the HUD from a floating panel. Visual cue: accent border + faint
 * glow so the admin can see at a glance which panels they've anchored.
 */

.admin-hud__slot[data-pinned="true"] {
  border-color: var(--color-accent-primary, #4a9eff);
  box-shadow: 0 0 0 1px var(--color-accent-primary, #4a9eff),
              inset 0 0 12px rgba(74, 158, 255, 0.06);
}

/* Pin indicator badge in the slot header area */
.admin-hud__slot[data-pinned="true"]::before {
  content: "📌";
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.7rem;
  opacity: 0.7;
  pointer-events: none;
}

/* Slots need relative positioning for the ::before badge */
.admin-hud__slot {
  position: relative;
}

/* ── "Pin to HUD" floating panel button (#3486) ───────────────── */

/*
 * The .floating-panel__btn--pin-to-hud button appears in floating panel
 * headers when show_pin_to_hud: true is passed to _floating_wrapper.
 * Uses a slightly distinct accent vs the drag-pin button.
 */

.floating-panel__btn--pin-to-hud {
  color: var(--color-text-secondary, #888);
  transition: color 120ms ease;
}

.floating-panel__btn--pin-to-hud:hover,
.floating-panel__btn--pin-to-hud:focus-visible {
  color: var(--color-accent-primary, #4a9eff);
  outline: none;
}

/* Button reflects active/pinned state when admin-hud:panel-pinned fires */
.floating-panel__btn--pin-to-hud[aria-pressed="true"] {
  color: var(--color-accent-primary, #4a9eff);
}

/* ── Admin Log Tail panel (#7683 / T6.4) ──────────────────────── */

.admin-log-tail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-size: 0.8rem;
}

.admin-log-tail__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.admin-log-tail__title {
  font-weight: 600;
}

.admin-log-tail__count {
  color: var(--color-text-secondary, #888);
  font-variant-numeric: tabular-nums;
}

.admin-log-tail__pause,
.admin-log-tail__clear {
  margin-left: auto;
}

.admin-log-tail__clear {
  margin-left: 0.25rem;
}

.admin-log-tail__filters {
  margin: 0.35rem 0;
}

.admin-log-tail__filter {
  width: 100%;
  font-family: var(--font-mono, monospace);
}

.admin-log-tail__meta {
  color: var(--color-text-secondary, #888);
  font-size: 0.7rem;
  min-height: 1em;
}

.admin-log-tail__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 16rem;
  font-family: var(--font-mono, monospace);
}

.admin-log-tail__row {
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.1rem 0.25rem;
  border-left: 2px solid transparent;
}

.admin-log-tail__row--error { border-left-color: var(--color-danger, #e5484d); }
.admin-log-tail__row--warn { border-left-color: var(--color-warning, #f5a623); }
.admin-log-tail__row--debug { color: var(--color-text-secondary, #888); }
.admin-log-tail__row--placeholder { color: var(--color-text-secondary, #888); }

.admin-log-tail__ws--connected { color: var(--color-success, #30a46c); }
.admin-log-tail__ws--rejected,
.admin-log-tail__ws--error { color: var(--color-danger, #e5484d); }
/* ── Pinned-panel host (T7.1, #7675) ──────────────────────────────
 *
 * Region inside the HUD slot grid that adopts popped-out floating
 * game panels when they're pinned. Empty (and hidden) until the
 * controller re-parents a floating-panel node into it on HUD open.
 * Adopted nodes drop their fixed positioning so they flow as HUD
 * tiles; on unpin/close the controller returns them to floating.
 */
.admin-hud__pinned-host {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 12px);
  grid-column: 1 / -1;
}

.admin-hud__pinned-host[hidden] {
  display: none;
}

/* Floating panels adopted into the HUD flow inline instead of
 * floating fixed over the viewport. */
.admin-hud__pinned-host .floating-panel[data-hud-adopted="true"] {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 1 1 320px;
}
/*
 * Admin Pinned Report Panel (T7.2, #7803)
 * =======================================
 * Extracted from _admin_hud.css (#7814 — keep admin HUD CSS files under the
 * 500-LOC ratchet). Styles the auto-refreshing admin report/query panel that
 * is pinned into the HUD: the panel chrome, repivot toolbar, scrollable
 * content region, metric tables, rendered report HTML, and the "Pin to HUD"
 * button shown in admin chat. Imported alongside _admin_hud.css.
 */

/* ── Admin Pinned Report Panel (T7.2f, #7803) ──────────────────────
 *
 * A HUD panel that renders an auto-refreshing admin report/query result.
 * Panel is a flex container with header, collapsible toolbar, content
 * region, and footer. Reports are fetched on connect and then on a
 * configurable interval (default 60s). Repivot controls (sort/filter/group)
 * are toggled hidden by default.
 */

.admin-pinned-report {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allows flex items to shrink below content height */
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 8px);
  font-size: 0.85rem;
  color: var(--color-text-primary, #fff);
}

/* ── Header: title + action buttons ─────────────────────────────── */

.admin-pinned-report__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-default, #333);
  background: rgba(74, 158, 255, 0.06);
  flex-wrap: wrap;
}

.admin-pinned-report__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 1 1 auto;
  min-width: 80px;
}

.admin-pinned-report__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

/* ── Header buttons: repivot, refresh, unpin ───────────────────── */

.admin-pinned-report__repivot-toggle,
.admin-pinned-report__refresh,
.admin-pinned-report__unpin {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-pinned-report__repivot-toggle:hover,
.admin-pinned-report__repivot-toggle:focus-visible,
.admin-pinned-report__refresh:hover,
.admin-pinned-report__refresh:focus-visible,
.admin-pinned-report__unpin:hover,
.admin-pinned-report__unpin:focus-visible {
  color: var(--color-accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
  border-color: var(--color-accent-primary, #4a9eff);
  outline: none;
}

/* ── Repivot toolbar (hidden by default) ──────────────────────── */

.admin-pinned-report__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-default, #333);
  background: rgba(0, 0, 0, 0.2);
  flex-wrap: wrap;
  overflow-y: auto;
  max-height: 120px;
}

.admin-pinned-report__toolbar[hidden] {
  display: none;
}

.admin-pinned-report__control {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.7rem;
  color: var(--color-text-secondary, #888);
}

.admin-pinned-report__control span {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-pinned-report__control select,
.admin-pinned-report__control input {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  padding: 4px 6px;
  background: var(--color-bg-primary, #0d0d1a);
  color: var(--color-text-primary, #fff);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  transition: border-color 120ms ease;
}

.admin-pinned-report__control select:focus,
.admin-pinned-report__control input:focus {
  border-color: var(--color-accent-primary, #4a9eff);
  outline: none;
}

.admin-pinned-report__undo {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 4px);
  transition: color 120ms ease, background 120ms ease;
}

.admin-pinned-report__undo:hover,
.admin-pinned-report__undo:focus-visible {
  color: var(--color-accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
  outline: none;
}

/* ── Content area (scrollable) ──────────────────────────────────── */

.admin-pinned-report__content {
  flex: 1 1 auto;
  min-height: 60px;
  overflow-y: auto;
  overflow-x: auto;
  padding: 10px 12px;
  scrollbar-gutter: stable;
}

.admin-pinned-report__placeholder {
  color: var(--color-text-secondary, #888);
  font-style: italic;
  padding: 20px 10px;
  text-align: center;
}

.admin-pinned-report__empty {
  color: var(--color-text-secondary, #888);
  padding: 20px 10px;
  text-align: center;
}

.admin-pinned-report__error {
  color: var(--color-danger, #e5484d);
  padding: 10px;
  border: 1px solid var(--color-danger, #e5484d);
  border-radius: var(--radius-sm, 4px);
  background: rgba(229, 72, 77, 0.1);
}

/* ── Footer: status + last updated ─────────────────────────────── */

.admin-pinned-report__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--color-border-default, #333);
  background: rgba(0, 0, 0, 0.1);
  font-size: 0.7rem;
  color: var(--color-text-secondary, #888);
}

.admin-pinned-report__status {
  flex: 1 1 auto;
}

.admin-pinned-report__updated {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Segment wrapper classes for segments rendered inside content ─ */

.segment-metric-table,
.segment-report-html {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}

/* ── Metric table styling (admin-metric-table) ──────────────────── */

.admin-metric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  border: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-primary, #0d0d1a);
}

.admin-metric-table__title {
  font-weight: 600;
  color: var(--color-text-primary, #fff);
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.admin-metric-table__source {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #888);
  margin-top: 6px;
  font-style: italic;
}

.admin-metric-table thead {
  background: rgba(74, 158, 255, 0.08);
  border-bottom: 2px solid var(--color-accent-primary, #4a9eff);
}

.admin-metric-table thead th {
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--color-accent-primary, #4a9eff);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-right: 1px solid var(--color-border-default, #333);
}

.admin-metric-table thead th:last-child {
  border-right: none;
}

.admin-metric-table tbody tr {
  border-bottom: 1px solid var(--color-border-default, #333);
  transition: background 120ms ease;
}

/* Zebra striping for readability */
.admin-metric-table tbody tr:nth-child(even) {
  background: rgba(74, 158, 255, 0.03);
}

.admin-metric-table tbody tr:hover {
  background: rgba(74, 158, 255, 0.08);
}

.admin-metric-table tbody td {
  padding: 6px 10px;
  border-right: 1px solid var(--color-border-default, #333);
  color: var(--color-text-primary, #fff);
  font-family: var(--font-mono, monospace);
}

.admin-metric-table tbody td:last-child {
  border-right: none;
}

/* Right-align numeric columns (heuristic: all-numeric content) */
.admin-metric-table tbody td:not(:first-child) {
  text-align: right;
}

/* ── Report HTML body (admin-report__body) ──────────────────────── */

.admin-report__body {
  padding: 10px;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary, #fff);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  word-break: break-word;
}

.admin-report__body h3,
.admin-report__body h4,
.admin-report__body h5 {
  margin: 8px 0 6px;
  font-weight: 600;
  color: var(--color-accent-primary, #4a9eff);
}

.admin-report__body p {
  margin: 6px 0;
}

.admin-report__body pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 8px;
  border-radius: var(--radius-sm, 4px);
  border-left: 2px solid var(--color-accent-primary, #4a9eff);
  overflow-x: auto;
  font-size: 0.75rem;
  line-height: 1.4;
}

.admin-report__body code {
  font-family: var(--font-mono, monospace);
  color: var(--color-text-secondary, #888);
}

.admin-report__body a {
  color: var(--color-accent-primary, #4a9eff);
  text-decoration: none;
  transition: color 120ms ease;
}

.admin-report__body a:hover,
.admin-report__body a:focus-visible {
  color: #5aafff;
  text-decoration: underline;
  outline: none;
}

.admin-report__title {
  font-weight: 600;
  color: var(--color-text-primary, #fff);
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.admin-report__source {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #888);
  margin-top: 8px;
  font-style: italic;
}

/* ── Pin to HUD button in admin chat ────────────────────────────── */

.admin-chat__pin-hud-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 8px;
  margin-top: 8px;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-chat__pin-hud-btn:hover,
.admin-chat__pin-hud-btn:focus-visible {
  color: var(--color-accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
  border-color: var(--color-accent-primary, #4a9eff);
  outline: none;
}

.admin-chat__pin-hud-btn[aria-pressed="true"] {
  color: var(--color-success, #30a46c);
  background: rgba(48, 164, 108, 0.1);
  border-color: var(--color-success, #30a46c);
}
/**
 * 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);
  }
}
/* Action Dock (#8635) — renders the per-turn AiDm::ActionScope.
 * The mechanical/narrative type split is the hybrid model made visible:
 * mechanical actions read as monospace command chips (the deterministic machine),
 * DM-suggested narrative actions read as a warm serif (the human voice). */

/* Containment (#10530).
 *
 * `.input-area` is `display:flex; flex-direction:column` with `max-height` (see
 * organisms/narrative/_input.css). Its children default to `flex-shrink:1` and have
 * no overflow of their own, so once the dock's content exceeded the cap EVERY child
 * was squeezed below its content height and each one's content painted straight over
 * the sibling below it: the dock over the TRY chips, the input line over the dock's
 * last group. That is why the DM's offers read as "clipped by the panel overlaying
 * them" — nothing was clipped, the boxes simply overlapped.
 *
 * The fix is a single shrinkable child that owns its own overflow. The host absorbs
 * whatever space is left after the fixed rows and scrolls internally; every other row
 * is pinned at its natural height in _input.css. */
.action-dock-host {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.action-dock {
  display: flex;
  flex-direction: column;
  /* Tightened from 10px/12px (#10530) — the dock competes with the TRY chips and
     the input row for a capped input area, and vertical padding was the cheapest
     ~14px to give back without removing anything the player can act on. */
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Scene label + freeform hint on one line (#10530) — see the controller's render(). */
.action-dock__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.action-dock__scene {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #8a7d63);
}

.action-dock__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.action-dock__label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8a7d63);
}

.action-dock__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* mechanical + always-available: the deterministic machine */
.action-dock__chip {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  color: var(--parchment, #ece0c8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.action-dock__chip:hover {
  border-color: var(--brass, #d6a548);
  background: rgba(255, 255, 255, 0.07);
}

/* narrative: the DM's voice */
.action-dock__suggest {
  font-family: var(--font-serif, "Iowan Old Style", Palatino, Georgia, serif);
  font-style: italic;
  font-size: 14px;
  color: var(--parchment, #ece0c8);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.action-dock__suggest:hover {
  border-color: var(--brass, #d6a548);
  background: rgba(214, 165, 72, 0.08);
}

/* Constant-verb disclosure (#10530). Collapsed by default so the DM's momentary
 * offers above it are not buried under ~25 always-present verbs. The count is part
 * of the affordance: it says what is behind the fold rather than hiding that
 * anything is. */
.action-dock__more {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.action-dock__more-summary {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted, #8a7d63);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Touch target — the summary is the only way in to the constant set. */
  min-height: 28px;
}

.action-dock__more-summary::-webkit-details-marker {
  display: none;
}

.action-dock__more-summary::before {
  content: "\25B8"; /* ▸ */
  display: inline-block;
  transition: transform 140ms ease;
}

.action-dock__more[open] > .action-dock__more-summary::before {
  transform: rotate(90deg);
}

.action-dock__more-summary:hover {
  color: var(--parchment, #ece0c8);
}

.action-dock__more-summary:focus-visible {
  outline: 2px solid var(--focus, #f0c974);
  outline-offset: 2px;
}

.action-dock__more-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.action-dock__custom {
  font-size: 11px;
  font-style: italic;
  color: var(--muted, #8a7d63);
}

/* Parameter-collecting control (#10550) — the Skill Check picker.
 * Reads as machinery (mono, like the mechanical chips) because that is what it is:
 * a deterministic, classifier-bypassing call. One compact row, so it can sit above
 * the #10530 disclosure without re-inflating the dock. */
.action-dock__picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.action-dock__picker-label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  color: var(--parchment, #ece0c8);
}

.action-dock__picker-select {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  color: var(--parchment, #ece0c8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  /* Matches the chips' 7px/12px box so the row sits on one baseline. */
  padding: 7px 10px;
  cursor: pointer;
  /* Touch target parity with .action-dock__chip. */
  min-height: 34px;
}

.action-dock__picker-go {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 13px;
  color: var(--parchment, #ece0c8);
  background: rgba(214, 165, 72, 0.10);
  border: 1px solid rgba(214, 165, 72, 0.45);
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  min-height: 34px;
  transition: border-color 140ms ease, background 140ms ease;
}

.action-dock__picker-go:hover,
.action-dock__picker-select:hover {
  border-color: var(--brass, #d6a548);
  background: rgba(214, 165, 72, 0.18);
}

.action-dock__chip:focus-visible,
.action-dock__suggest:focus-visible,
.action-dock__picker-select:focus-visible,
.action-dock__picker-go:focus-visible {
  outline: 2px solid var(--focus, #f0c974);
  outline-offset: 2px;
}
/*
 * 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;
}

/* 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;
  }
}
/**
 * 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);
  }
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .cs-roll-action-menu {
    min-width: 180px;
    max-width: calc(100vw - 20px);
  }
}

/* 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);
}


/* ==========================================================================
 * 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);
  }
}

/* Disabled action state (stunned, paralyzed, etc.) */
.rollable.action-disabled,
.cs-skill-item.action-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(50%);
}

/* No spell slots available */
.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;
  }
}

/* ==========================================================================
 * Atmosphere Effects — Game-state reactive visual feedback (coord #6972)
 * All animations gated behind prefers-reduced-motion: no-preference so the
 * effects are completely absent for users who prefer reduced motion.
 * ========================================================================== */

/* ---- Combat hue shift -------------------------------------------------- */

/*
 * .terminal--combat-active is toggled by AtmosphereController on the
 * .terminal-container element when combat starts/ends.
 * A subtle ≤5° hue rotation toward red is applied to the terminal container.
 * Scoped inside the motion-OK media query so reduced-motion users see nothing.
 */
@media (prefers-reduced-motion: no-preference) {
  .terminal--combat-active {
    filter: hue-rotate(5deg);
    transition: filter 0.8s ease;
  }

  /* Smooth transition back when combat ends */
  .terminal-container:not(.terminal--combat-active) {
    transition: filter 1.2s ease;
  }
}

/* ---- Dice roll spin ----------------------------------------------------- */

/*
 * .dice-result--spinning is added by AtmosphereController to the most recent
 * .dice-check-roll element when a dice-result event fires.
 */
@keyframes atmosphereDiceFlip {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: no-preference) {
  .dice-result--spinning {
    display: inline-block;
    animation: atmosphereDiceFlip 150ms ease-out forwards;
  }
}

/* ---- Damage type flash -------------------------------------------------- */

/*
 * .atmosphere-damage-flash is the base flash class; the companion
 * .atmosphere-damage-flash--<type> class sets the color variable used by the
 * keyframe. Added temporarily (400ms) by AtmosphereController to .damage-taken
 * elements after a damage-taken event fires.
 *
 * Damage type colors sourced from --dmg-* tokens in _colors.css.
 */
@keyframes atmosphereDamageFlash {
  0%   { color: var(--atmosphere-dmg-color, var(--color-text-primary)); }
  30%  { color: var(--atmosphere-dmg-color, var(--color-text-primary)); font-weight: 700; }
  100% { color: inherit; font-weight: inherit; }
}

/* Damage type → CSS custom property mappings */
.atmosphere-damage-flash--fire       { --atmosphere-dmg-color: var(--dmg-fire,        #FF4500); }
.atmosphere-damage-flash--cold       { --atmosphere-dmg-color: var(--dmg-cold,        #87CEEB); }
.atmosphere-damage-flash--lightning  { --atmosphere-dmg-color: var(--dmg-lightning,   #FFD700); }
.atmosphere-damage-flash--acid       { --atmosphere-dmg-color: var(--dmg-acid,        #9ACD32); }
.atmosphere-damage-flash--poison     { --atmosphere-dmg-color: var(--dmg-poison,      #9370DB); }
.atmosphere-damage-flash--necrotic   { --atmosphere-dmg-color: var(--dmg-necrotic,    #5a8a5a); }
.atmosphere-damage-flash--radiant    { --atmosphere-dmg-color: var(--dmg-radiant,     #FFFACD); }
.atmosphere-damage-flash--force      { --atmosphere-dmg-color: var(--dmg-force,       #DA70D6); }
.atmosphere-damage-flash--psychic    { --atmosphere-dmg-color: var(--dmg-psychic,     #FF00FF); }
.atmosphere-damage-flash--thunder    { --atmosphere-dmg-color: var(--dmg-thunder,     #4682B4); }
.atmosphere-damage-flash--bludgeoning { --atmosphere-dmg-color: var(--dmg-bludgeoning, #8B4513); }
.atmosphere-damage-flash--piercing   { --atmosphere-dmg-color: var(--dmg-piercing,    #C0C0C0); }
.atmosphere-damage-flash--slashing   { --atmosphere-dmg-color: var(--dmg-slashing,    #DC143C); }
/* Generic fallback for unknown damage types */
.atmosphere-damage-flash--physical   { --atmosphere-dmg-color: var(--color-accent-error, #cf6068); }

@media (prefers-reduced-motion: no-preference) {
  .atmosphere-damage-flash {
    animation: atmosphereDamageFlash 200ms ease-out forwards;
  }
}
/**
 * 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);
}


/* ========================================
 * 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;
}

.gl-skill-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.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;
  }
}

/* gl-roll-for-more removed — class never applied in HTML (#6031) */
/**
 * 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;
}

/* 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 {
  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;
}

/* ========================================
 * RESPONSIVE ADJUSTMENTS
 * ======================================== */

@media (max-width: 480px) {
  .gl-roll-breakdown {
    flex-wrap: wrap;
  }
}

/* ========================================
 * 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);
  }
}
/**
 * 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,
  .skeleton-initiative-name {
    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);
}

/* ---------------------------------------------------------------------------
   Structured entity detail (badges + stat grids)
   Rendered by entity_tooltip_details.ts for non-roll entity hover tooltips.
   --------------------------------------------------------------------------- */

.unified-tooltip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
}

.unified-tooltip__meta {
  margin-top: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
}

.tooltip-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5, 2px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  line-height: 1.5;
  background: var(--surface-sunken, #15171c);
  border: 1px solid var(--border-color, #3a3f4b);
  color: var(--text-secondary, #abb2bf);
}

.tooltip-badge--faction {
  border-color: var(--accent-primary, #6c8cff);
  color: var(--accent-primary, #6c8cff);
}

.tooltip-badge--magic,
.tooltip-badge--concentration,
.tooltip-badge--ritual {
  border-color: var(--rarity-very-rare, #9b59d0);
  /* Lightened from --rarity-very-rare (#9b59d0 = 4.04:1, fails AA) to ~5.2:1
     on the sunken badge bg. Border keeps the canonical token color. */
  color: #b07ee0;
}

.tooltip-badge--attunement {
  border-color: var(--rarity-legendary, #ff8c00);
  color: var(--rarity-legendary, #ff8c00);
}

/* Item rarity badges reuse the shared D&D rarity tokens (tokens/_colors.css). */
.tooltip-badge--rarity-common { color: var(--rarity-common); }
.tooltip-badge--rarity-uncommon { color: var(--rarity-uncommon); border-color: var(--rarity-uncommon); }
.tooltip-badge--rarity-rare { color: var(--rarity-rare); border-color: var(--rarity-rare); }
.tooltip-badge--rarity-very-rare { color: #b07ee0; border-color: var(--rarity-very-rare); }
.tooltip-badge--rarity-legendary { color: var(--rarity-legendary); border-color: var(--rarity-legendary); }
.tooltip-badge--rarity-artifact { color: var(--rarity-artifact); border-color: var(--rarity-artifact); }

.unified-tooltip__stats {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-0-5, 2px) var(--space-3, 12px);
  margin-top: var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
}

.tooltip-stat {
  display: contents;
}

.tooltip-stat__label {
  color: var(--text-muted, #888);
  white-space: nowrap;
}

.tooltip-stat__value {
  color: var(--text-secondary, #abb2bf);
}

.unified-tooltip__effects {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5, 2px);
  margin-top: var(--space-2, 8px);
}

.unified-tooltip__effects-label {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  color: var(--text-muted, #888);
}

.unified-tooltip__effects-text {
  color: var(--text-secondary, #abb2bf);
}

/* ---------------------------------------------------------------------------
   Interactive tooltip footer (primary action + "⋯ more")
   Rendered when the hover path threads callbacks (see unified_controller.js).
   --------------------------------------------------------------------------- */

/* Interactive tooltips must accept pointer events so their buttons are
   clickable; the controller keeps them open while the pointer is over them. */
.unified-tooltip--interactive {
  pointer-events: auto;
}

.unified-tooltip__footer {
  display: flex;
  align-items: stretch;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--border-color, #3a3f4b);
}

/* Filled accent button so the primary verb clearly dominates the ghost
   "⋯ more" control. Dark text on the accent fill measures ~6:1 (AA pass). */
.unified-tooltip__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  flex: 1 1 auto;
  min-height: 24px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border: 1px solid var(--accent-primary, #6c8cff);
  border-radius: var(--radius-sm, 4px);
  background: var(--accent-primary, #6c8cff);
  color: var(--surface-elevated, #1e2127);
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--timing-fast, 120ms) var(--ease-out, ease);
}

.unified-tooltip__action:hover {
  background: color-mix(in srgb, var(--accent-primary, #6c8cff) 85%, #000);
}

.unified-tooltip__action:active {
  background: color-mix(in srgb, var(--accent-primary, #6c8cff) 72%, #000);
}

.unified-tooltip__action:focus-visible {
  outline: 2px solid var(--accent-primary, #6c8cff);
  outline-offset: 1px;
}

.unified-tooltip__action-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.unified-tooltip__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 24px;
  min-height: 24px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-secondary, #abb2bf);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--timing-fast, 120ms) var(--ease-out, ease);
}

.unified-tooltip__more:hover {
  background: var(--surface-sunken, #15171c);
  color: var(--text-primary, #e5e5e5);
}

.unified-tooltip__more:active {
  background: var(--surface-sunken, #15171c);
  transform: translateY(1px);
}

.unified-tooltip__more:focus-visible {
  outline: 2px solid var(--accent-primary, #6c8cff);
  outline-offset: 1px;
}

/* ===========================================================================
   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);
  /* VIS-1 (#5441): cap prose line-length at ~72 chars for comfortable reading.
   * Matches the max-width already applied to .narrative-entry p elements.
   * Full-width narration blocks run >100ch on wide panels which strains
   * horizontal eye tracking. */
  max-width: 72ch;
}

.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;
  /* #7103: explicit reset — the wrapper carries role="dialog" (#6148), and
   * the generic a11y dialog fallback applies translate(-50%, -50%). Without
   * this reset the full-viewport flex wrapper shifts up-left by half the
   * viewport, clipping the modal off the left/top screen edges. Entry
   * animations still run (animations override static transform values). */
  transform: none;
  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;
}


/* 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;
}


/* ===========================================================================
   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);
  }

}
/**
 * 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(--color-bg-tertiary, #3d3d3d);
  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(--color-accent-primary, #5a9fd8);
  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(--color-accent-primary, #5a9fd8);
  background: transparent;
  color: var(--color-accent-primary, #5a9fd8);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.empty-state__action:hover {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-bg-primary, #1a1a1a);
}

.empty-state__action:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  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(--color-accent-primary, #5a9fd8);
}

.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(--color-bg-secondary, #2d2d2d);
  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(--color-bg-secondary, #2d2d2d);
  border-radius: 6px;
  border-left: 3px solid var(--color-accent-primary, #5a9fd8);
}

.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;
}

/* ========================================
 * 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.
 */

/* ===========================================
 * 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);
}
/* ========================================
 * 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;
}

/* 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);
}

/* ========================================
 * 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 (>50%): Calm green gradient
 * - Injured (25-50%): 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 (>50%)
 * ======================================== */

.cs-hp-bar__fill--healthy,
.cs-hp-fill--healthy {
  background: #2ECC71;
}

/* ========================================
 * HP State Classes - Injured (25-50%)
 * ======================================== */

.cs-hp-bar__fill--injured,
.cs-hp-fill--injured {
  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);
  }
}

/* ========================================
 * 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-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 {
  animation: hpFlashDamage 0.4s ease-out;
}

.hp-bar--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 Bar Container Enhancements
 * ======================================== */

.hp-bar-container,
.cs-hp-bar {
  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 {
    animation: none;
  }
}
/*
 * 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
 */

/* ========================================
 * 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) {
  .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);
  }
}
/**
 * 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;
  /* --floater-left/--floater-top are set from the anchor element's computed
     rect in xp_animation_controller.js#showFloatingXp; the defaults here
     reproduce the old inline fallback (center-top) when no anchor is found. */
  left: var(--floater-left, 50%);
  top: var(--floater-top, 100px);
  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;
}

/* Progress fill — width driven by --xp-progress-width, set from
   xp_animation_controller.js#animateProgressBar */
.xp-progress-fill {
  height: 100%;
  width: var(--xp-progress-width, 0%);
}

.xp-progress-fill--animating {
  transition: width 0.8s ease-out;
}

/* 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 */

/* 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;
  }

}
/**
 * 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;
}

/*
 * Fade-out before removal (level_up_celebration_controller.js#cleanup).
 * Applies unconditionally — previously an inline style that always won
 * regardless of prefers-reduced-motion; the compound selector's higher
 * specificity (0,2,0) guarantees it still wins over the reduced-motion-only
 * `.level-up-celebration { transition: ...2s; }` rule in _subtle.css, which
 * targets the same `transition` property via the bare class alone.
 */
.level-up-celebration.level-up-celebration--fading {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

@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. --delay is set per-particle
   (Math.random() * 0.3s) in
   level_up_celebration_controller.js#addParticles. */
.level-up-particle--animating {
  animation: particle-burst 2s ease-out var(--delay, 0s) 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);
}

/* --delay is set per-ring (i * 0.15s) in
   level_up_celebration_controller.js#addGlowRings — replaces the old
   :nth-child(2)/:nth-child(3) hardcoded overrides below, which only worked
   for the default 3-ring count. */
.level-up-glow-ring--animating {
  animation: ring-expand 1.5s ease-out var(--delay, 0s) 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;
  }
}

/* ========================================
 * 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;
  /* --left/--particle-scale are set per-confetto in
     level_up_celebration_controller.js#addConfetti. --particle-scale only
     has a visible effect before --animating is toggled (opacity:0 either
     way) since confetti-fall's own keyframes fully own `transform` once
     the animation starts, matching the prior inline-style behavior. */
  left: var(--left, 0);
  transform: var(--particle-scale, scale(1));
}

.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 var(--delay, 0s) 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's opacity/transition now live
     unconditionally in _base.css (compound selector, always wins over the
     rule above) — see the note there for why it moved. */
}

/* ========================================
 * 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;
}

/**
 * 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;
  }
}

/* ========================================
 * 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,
  .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);
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .combatant--bloodied::before,
  .combatant--critical::before {
    border-width: 3px;
  }
}
/**
 * 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: 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);
}

.play-mode-badge.turn_based {
  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);
}

.play-mode-badge.async {
  background: color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
  color: var(--color-accent-purple);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

.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: color-mix(in srgb, var(--color-accent-purple) 10%, transparent);
  color: var(--color-accent-purple);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 20%, transparent);
}

/* Turn-based current turn styling */
.play-mode-turn {
  background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
  color: var(--color-accent-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

/* 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: 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);
}

.scene-type-badge.exploration {
  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);
}

.scene-type-badge.social {
  background: color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
  color: var(--color-accent-purple);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

.scene-type-badge.puzzle {
  background: color-mix(in srgb, var(--color-accent-warning) 15%, transparent);
  color: var(--color-accent-warning);
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

.scene-type-badge.cutscene {
  background: color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
  color: var(--color-accent-purple);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

.scene-type-badge.rest {
  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);
}

.scene-type-badge.travel {
  background: color-mix(in srgb, var(--color-accent-warning) 15%, transparent);
  color: var(--color-accent-warning);
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* 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: var(--color-accent-warning);
  animation: pulse-warning 1s ease-in-out infinite;
}

.timer-display.timer-critical {
  color: var(--color-accent-error);
  animation: pulse-critical 0.5s ease-in-out infinite;
}

.timer-display.timer-expired {
  color: var(--color-accent-error);
  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); }
}

@media (prefers-reduced-motion: reduce) {
  .timer-display.timer-warning,
  .timer-display.timer-critical {
    animation: none;
  }
}

/* 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: color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
  color: var(--color-accent-purple);
}

.preset-badge.intense_combat {
  background: color-mix(in srgb, var(--color-accent-error) 15%, transparent);
  color: var(--color-accent-error);
}

.preset-badge.relaxed_exploration {
  background: color-mix(in srgb, var(--color-accent-secondary) 15%, transparent);
  color: var(--color-accent-secondary);
}

.preset-badge.balanced {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  color: var(--color-accent-primary);
}

/* Your Turn Indicator */
.your-turn-indicator {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--color-accent-secondary), color-mix(in srgb, var(--color-accent-secondary) 70%, #000));
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-secondary) 50%, transparent);
  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 color-mix(in srgb, var(--color-accent-secondary) 50%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent-secondary) 70%, transparent);
    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: color-mix(in srgb, var(--color-accent-warning) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-accent-warning);
  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: var(--color-accent-warning);
  font-weight: var(--font-weight-bold);
}

@keyframes waiting-pulse {
  0%, 100% {
    background: color-mix(in srgb, var(--color-accent-warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
  }
  50% {
    background: color-mix(in srgb, var(--color-accent-warning) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-accent-warning) 60%, transparent);
  }
}

@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);
  }
}

@media (prefers-reduced-motion: reduce) {
  .turn-banner--your-turn {
    animation: none;
  }

  .turn-banner--your-turn .turn-banner__icon {
    animation: none;
  }

  .turn-banner--flash {
    animation-duration: 0ms;
  }

  .turn-banner--waiting .turn-banner__icon {
    animation: none;
  }

  .turn-banner--critical {
    animation: none;
  }

  .input-blocked-overlay__text {
    animation: none;
  }
}

/* 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);
}

/* #9862 dropped every `.narrative-panel` member from this file — nothing emits
   that class. The `data-context` producer landed in #10300:
   `controllers/terminal/context_theme_controller.js` sets this attribute on the
   `.terminal-container` from the `terminal:scene-changed` scene activity, so
   `.panel` (a descendant of the container) themes with the scene. */
[data-context="combat"] .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 {
  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 {
  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);
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  [data-context] .combat-indicator,
  [data-context="tavern"] .narrative-entry--dm::before {
    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;
  /* --left/--color/--delay/--duration are set per-particle from
     Math.random() in achievement_celebration_controller.js#triggerConfetti */
  left: var(--left, 50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color, #FFD700);
  animation: confettiFall var(--duration, 3s) ease-out var(--delay, 0s) 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--injured .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-section__title .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);
}

/* ========================================
 * Touch Device Adjustments
 * ======================================== */

@media (hover: none) {
  .proficiency-chip {
    min-width: 48px;
    min-height: 44px;
    padding: var(--space-2);
  }
}

/* ========================================
 * 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;
  }
}
/**
 * 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-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1, 4px);
  min-width: 0;
}

.lobby-scene__action-text {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
}

.lobby-scene__action-sub {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.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 color-mix(in srgb, var(--color-accent-purple) 40%, transparent),
    0 0 60px 16px color-mix(in srgb, var(--color-accent-purple) 20%, transparent),
    inset 0 0 20px 4px color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
  border: 2px solid color-mix(in srgb, var(--color-accent-purple) 60%, transparent);
  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%,
    color-mix(in srgb, var(--color-accent-purple) 40%, transparent) 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);
  }
}

/* --- 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 and creation-cards.
 * ======================================== */
@keyframes cyberShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.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;
}

/* Sections 7-9 (cyber-data-stream, cyber-scan-reveal, cyber-fade-glow) removed — classes never applied in HTML (#6031) */

/* ========================================
 * 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 */
  .detail-card:hover,
  .creation-card:hover {
    animation: none;
    background-image: none;
  }

  /* 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;
  }
}
/**
 * Studio Guide - "Clippy-style" DM helper for Creator Studio
 *
 * Floating suggestion panel that appears when narrative coherence
 * is detected in creator studio content.
 */

.studio-guide {
  --guide-bg: var(--surface-elevated, #1a1a2e);
  --guide-border: var(--border-color, rgba(255, 255, 255, 0.1));
  --guide-accent: var(--accent-magic, #a855f7);
  --guide-text: var(--text-primary, #e0e0e0);
  --guide-text-muted: var(--text-muted, #888);
  --guide-radius: 8px;
  --guide-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: calc(100vw - 40px);
  max-height: 80vh;
  overflow: hidden;
  background: var(--guide-bg);
  border: 1px solid var(--guide-border);
  border-radius: var(--guide-radius);
  box-shadow: var(--guide-shadow);
  z-index: var(--z-floating);

  /* Animation */
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.studio-guide--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header */
.studio-guide__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--guide-accent) 0%, rgba(168, 85, 247, 0.3) 100%);
  border-bottom: 1px solid var(--guide-border);
}

.studio-guide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: white;
}

.studio-guide__icon svg {
  width: 20px;
  height: 20px;
}

.studio-guide__title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.studio-guide__title strong {
  color: white;
  font-size: 14px;
  font-weight: 600;
}

.studio-guide__confidence {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.studio-guide__minimize,
.studio-guide__dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.studio-guide__minimize:hover,
.studio-guide__dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.studio-guide__minimize svg,
.studio-guide__dismiss svg {
  width: 16px;
  height: 16px;
}

/* Body */
.studio-guide__body {
  padding: 16px;
  overflow-y: auto;
  max-height: 400px;
}

/* Quest Prompt */
.studio-guide__quest-prompt {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(168, 85, 247, 0.1);
  border-radius: 6px;
  border-left: 3px solid var(--guide-accent);
}

.studio-guide__quest-prompt p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--guide-text);
}

.studio-guide__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--guide-accent);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.studio-guide__action:hover {
  background: #9333ea;
}

.studio-guide__action svg {
  width: 14px;
  height: 14px;
}

/* Section headers */
.studio-guide__suggestions h4,
.studio-guide__lore-hints h4,
.studio-guide__missing h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--guide-text-muted);
}

/* Lists */
.studio-guide__suggestions ul,
.studio-guide__lore-hints ul,
.studio-guide__missing ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.studio-guide__suggestion,
.studio-guide__hint,
.studio-guide__missing-piece {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--guide-border);
  font-size: 13px;
  color: var(--guide-text);
}

.studio-guide__suggestion:last-child,
.studio-guide__hint:last-child,
.studio-guide__missing-piece:last-child {
  border-bottom: none;
}

.studio-guide__suggestion svg,
.studio-guide__hint svg,
.studio-guide__missing-piece svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  color: var(--guide-accent);
}

.studio-guide__suggestion span,
.studio-guide__hint span,
.studio-guide__missing-piece span {
  line-height: 1.4;
}

/* Sections spacing */
.studio-guide__suggestions,
.studio-guide__lore-hints,
.studio-guide__missing {
  margin-bottom: 16px;
}

.studio-guide__suggestions:last-child,
.studio-guide__lore-hints:last-child,
.studio-guide__missing:last-child {
  margin-bottom: 0;
}

/* Footer */
.studio-guide__footer {
  padding-top: 12px;
  border-top: 1px solid var(--guide-border);
}

.studio-guide__meta {
  font-size: 11px;
  color: var(--guide-text-muted);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .studio-guide {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .studio-guide__body {
    max-height: 300px;
  }
}

/* Animation for appearing suggestions */
@keyframes studio-guide-pulse {
  0%, 100% {
    box-shadow: var(--guide-shadow);
  }
  50% {
    box-shadow: var(--guide-shadow), 0 0 20px rgba(168, 85, 247, 0.3);
  }
}

.studio-guide--visible {
  animation: studio-guide-pulse 2s ease-in-out;
}
/*
 * 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);
}

/* ========================================
 * 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; }
  }
}
/*
 * Fracture Glass Effect
 * =====================
 * Canvas-based tessellated triangle cellular automata overlay.
 * Simulates fracturing monitor glass -- subtle, transparent,
 * and interactive via mouse "scratching".
 *
 * Activation:
 *   html[data-fracture-glass="on"]  (toggled via Settings)
 *
 * The canvas is created by JS (lib/effects/fracture_glass.js)
 * and positioned as a fixed overlay identical to CRT scanlines.
 */

/* ========================================
 * CANVAS OVERLAY POSITIONING
 * Fixed fullscreen, above content but
 * below CRT scanlines. pointer-events:none
 * so it never blocks interaction.
 * ======================================== */
.fracture-glass-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fx-glass);
  pointer-events: none;
  /* Canvas dimensions set by JS to match viewport */
}

/* ========================================
 * REDUCED MOTION
 * Hide the canvas entirely when the user
 * prefers reduced motion.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  .fracture-glass-canvas {
    display: none;
  }
}
/*
 * Plane Theme — CSS custom property overrides per planar environment.
 *
 * When `data-plane` is set on <html> (by direct_handlers.ts on spatial
 * manifest broadcast), these selectors shift the terminal's accent
 * colors, borders, glows, and focus rings to match the current plane.
 *
 * Colors are derived from PLANE_PALETTES in manifest_renderer.js:
 *   material=green, feywild=cyan, shadowfell=gray, astral=silver,
 *   ethereal=pale-blue, elemental=orange.
 *
 * The transition on :root ensures smooth color blending on plane change.
 */

:root {
  --plane-theme-transition: color 0.6s ease, border-color 0.6s ease,
    box-shadow 0.6s ease, background-color 0.6s ease;
}

/* ─── Material Plane (default green — explicit for return trips) ────── */
[data-plane="material"] {
  --color-accent-primary: #5a9fd8;
  --color-accent-secondary: #8ab56e;
  --color-border-focus: #61afef;
  --shadow-glow: 0 0 6px rgba(90, 159, 216, 0.2);
  --shell-accent: #61afef;
}

/* ─── Feywild (cyan/teal — vibrant, magical) ─────────────────────────── */
[data-plane="feywild"] {
  --color-accent-primary: #00ddff;
  --color-accent-secondary: #00ff88;
  --color-border-focus: #00ddff;
  --shadow-glow: 0 0 8px rgba(0, 221, 255, 0.25);
  --shadow-glow-success: 0 0 6px rgba(0, 255, 136, 0.25);
  --shell-accent: #00ddff;
}

/* ─── Shadowfell (muted gray/purple — oppressive, drained) ───────────── */
[data-plane="shadowfell"] {
  --color-accent-primary: #8b7daa;
  --color-accent-secondary: #666666;
  --color-border-focus: #8b7daa;
  --shadow-glow: 0 0 6px rgba(139, 125, 170, 0.2);
  --shadow-glow-success: 0 0 6px rgba(102, 102, 102, 0.2);
  --shell-accent: #8b7daa;
}

/* ─── Astral Plane (silver/white — vast, timeless) ───────────────────── */
[data-plane="astral"] {
  --color-accent-primary: #c0c0c0;
  --color-accent-secondary: #e0e0e0;
  --color-border-focus: #c0c0c0;
  --shadow-glow: 0 0 8px rgba(192, 192, 192, 0.25);
  --shell-accent: #c0c0c0;
}

/* ─── Ethereal Plane (pale blue — translucent, misty) ────────────────── */
[data-plane="ethereal"] {
  --color-accent-primary: #aaccff;
  --color-accent-secondary: #88aadd;
  --color-border-focus: #aaccff;
  --shadow-glow: 0 0 8px rgba(170, 204, 255, 0.25);
  --shell-accent: #aaccff;
}

/* ─── Elemental Planes (orange — raw, primal energy) ─────────────────── */
[data-plane="elemental"] {
  --color-accent-primary: #ff8800;
  --color-accent-secondary: #cc6600;
  --color-border-focus: #ff8800;
  --shadow-glow: 0 0 8px rgba(255, 136, 0, 0.25);
  --shadow-glow-warning: 0 0 6px rgba(255, 136, 0, 0.3);
  --shell-accent: #ff8800;
}
/**
 * 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;
}

/* #9862: the `.split-panel` / `.split-panel__header|__icon|__title|__actions|
 * __action|__content` chrome block that stood here was removed. It is the
 * pre-grid panel chrome; the legacy split-container controller that emitted
 * those classes was deleted in ce654ec3a3 (2026-02-15), and grid-container's
 * renderPanel() emits `.grid-panel` + `.grid-panel__header|__icon|__title|
 * __actions|__content` instead. The live chrome — same roles, same structure —
 * is terminal/layout/grid_container/_panel_base.css. Deleting a selector that
 * matches no element is a provable runtime no-op. `.split-divider` below is a
 * different case: rendering.ts DOES emit it, so it stays. */

.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-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;
}

/* ==========================================================================
   Creation on-ramp (#8643 Upload / #8646 structured-default re-weight)
   The on-ramp is always in the DOM but only shown while the terminal container
   is in the character_creation room. In that room the structured surface (cards
   + Upload) is primary and the always-visible free-text input is demoted to a
   secondary assist (pillar #4 preserved, not removed).
   ========================================================================== */
.creation-onramp {
  /* Hidden outside creation — the input area is shared across all rooms. */
  display: none;
}

.terminal-container[data-room="character_creation"] .creation-onramp {
  display: block;
  margin-bottom: var(--space-2);
}

.creation-onramp__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

/* Upload button doubles as the drop target. Reads as the primary call-to-action
   in the assist rail beneath the dominant creation cards. */
.creation-onramp__upload {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tertiary, var(--bg-secondary));
  border: 1px dashed var(--accent-secondary);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.creation-onramp__upload:hover,
.creation-onramp__upload:focus-visible {
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
}

.creation-onramp__upload:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.creation-onramp__upload:disabled {
  opacity: 0.6;
  cursor: progress;
}

.creation-onramp__upload--drag {
  border-style: solid;
  border-color: var(--accent-primary);
  background: var(--bg-secondary);
}

.creation-onramp__upload-icon {
  display: inline-flex;
  color: var(--accent-secondary);
}

.creation-onramp__upload-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.creation-onramp__upload-title {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
}

.creation-onramp__upload-hint {
  color: var(--text-muted);
  font-size: var(--font-size-xs, 0.75rem);
}

.creation-onramp__status {
  flex: 1 1 12rem;
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary, var(--text-muted));
}

.creation-onramp__status[data-state="error"] {
  color: var(--color-danger, #e06c75);
}

.creation-onramp__status[data-state="success"] {
  color: var(--color-success, var(--accent-primary));
}

/* Demote the free-text input to a secondary assist in the creation room. */
.creation-onramp__assist-note {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-muted);
}

.terminal-container[data-room="character_creation"] .input-line {
  opacity: 0.75;
  transition: opacity var(--transition-fast);
}

.terminal-container[data-room="character_creation"] .input-area:focus-within .input-line {
  /* Full emphasis once the player actually engages the free-text path. */
  opacity: 1;
}

/* 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);
  }

}

/* 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);
}

/* 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);
}


/* 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);
}


/* 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 {
  color: var(--bg-primary);
}

.cs-skill-name {
  color: var(--text-primary);
  flex: 1;
}

/* cs-skill-ability, cs-skill-mod removed — classes never applied in HTML (#6031) */

/* 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-name {
  flex: 1;
  color: var(--text-primary);
}

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

/* 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);
}

.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;
}

/*
 * 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
 */





/* _scene_tab removed — cs-scene-* classes unused; dm-scene-tab is an HTML id not a CSS class (#5556) */
/*
 * 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-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 {
  font-size: 12px;
}

/* cs-stat-value, cs-skill-bonus removed — classes never applied in HTML (#6031) */

/* Ensure all badges and chips meet minimum */
.badge--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.
     font-size MUST be >= 16px: iOS Safari auto-zooms the viewport on focus for
     any input below 16px, which was happening on every login/character/panel
     form field (the terminal bar was already protected at 16px). (mobile UX audit) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 12px;
    font-size: 16px;
  }

  /* 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
 * =========================================== */











/* _card removed — generic card-- classes all dead; specific card variants live in their own component CSS (#5556) */













/* _mobile_panel, _mobile_bottom_sheet, _hamburger_menu extracted → terminal_mobile.css (#5550) */




















/* _parchment_textures removed — dnd-parchment/dnd-sepia classes unused in templates/JS (#5556) */
/* _focus_indicators removed — all focus-ring/input-focus classes unused; input-focus is a JS event name not a CSS class (#5556) */






















/* Lazy-loaded: Three.js overlay CSS loaded on demand (Phase 1 Task 2) */
/* require terminal/components/_threejs_overlay */










/* _roll_overlay removed — roll-overlay__ classes unused in templates/JS (#5556) */
















/* ===========================================
 * 10. TERMINAL LAYOUT (Must be last)
 * =========================================== */

/* _mobile_accessibility_fixes: restored to terminal_2.css now that the brace-balance
 * truncation is fixed (#5551). MUST remain last in the cascade — its selectors
 * intentionally override per-component sizing rules (WCAG AA touch targets). */