/**
 * Terminal D&D Design Tokens — Colors & Spacing
 * ================================================
 * Color palette, background/text/accent colors, spacing scale,
 * border radius, and foundational visual variables.
 */

/* FOUC Prevention: Show body once CSS is loaded */
body.css-loading {
  visibility: visible;
}

:root {
  /* ========================================
   * COLOR PALETTE
   * ======================================== */

  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-bg-elevated: #404040;
  --color-bg-hover: #4a4a4a;

  /* Text Colors - WCAG AA compliant (4.5:1 minimum contrast on #1a1a1a) */
  --color-text-primary: #e0e0e0;      /* 11.5:1 contrast */
  --color-text-secondary: #a0a0a0;    /* 6.6:1 contrast */
  --color-text-muted: #888888;        /* 5.9:1 contrast - bumped from #666 for AA compliance */
  --color-text-disabled: #666666;     /* 4.2:1 - use only for disabled/decorative elements */
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - Slightly muted for easier viewing */
  --color-accent-primary: #5a9fd8;    /* Blue - interactive elements */
  --color-accent-secondary: #8ab56e;  /* Green - success, HP, nature */
  --color-accent-warning: #d4b06e;    /* Gold - warnings, items */
  --color-accent-error: #cf6068;      /* Red - errors, damage */
  --color-accent-purple: #b56cc8;     /* Purple - DM, magic */
  --color-accent-orange: #c08a58;     /* Orange - evocation, factions */
  --color-accent-cyan: #4da8b5;       /* Cyan - necromancy, water */

  /* Debug-tier accent — saturated orange retained for the channel-tabs DEBUG
   * tier signal (admin-only filter). Kept distinct from the muted
   * --color-accent-orange so the tier banner stays visually loud. */
  --debug-tier-accent: #f97316;
  --debug-tier-accent-soft: rgba(249, 115, 22, 0.45);
  --debug-tier-accent-muted: rgba(249, 115, 22, 0.85);

  /* Channel accent colors — promoted from hardcoded hex in
   * _channel_tabs.css (#4266 / audit findings 5.4). Each channel has a
   * foreground (`--color-channel-*`) and a low-opacity background variant
   * (`--color-channel-*-bg`) for active-tab fill. Saturated greens/blues/
   * golds/purples are intentionally distinct from the muted
   * `--color-accent-*` palette so the channel filter stays a strong signal. */
  --color-channel-adventure: #4ade80;          /* Green — adventure / core gameplay */
  --color-channel-adventure-bg: #0d2a1a;
  --color-channel-ooc: #60a5fa;                /* Blue — out-of-character chat */
  --color-channel-ooc-bg: #0d1a2a;
  --color-channel-dm: #fbbf24;                 /* Gold — DM channel */
  --color-channel-dm-bg: #2a2a0d;
  --color-channel-creative: #c084fc;           /* Purple — creative spaces */
  --color-channel-creative-bg: #1a0d2a;

  /* Semantic Colors */
  --color-hp-full: #8ab56e;
  --color-hp-mid: #d4b06e;
  --color-hp-low: #cf6068;
  --color-xp: #5a9fd8;
  --color-gold: #e8c44a;
  --color-error: #cf6068;              /* Red - error states (matches accent-error) */
  --color-error-bg: rgba(207, 96, 104, 0.15);
  --color-error-muted: rgba(207, 96, 104, 0.3);

  /* Skip Link Colors - WCAG AA 4.5:1 guaranteed (12.4:1 actual) */
  --skip-link-bg: #ffd700;             /* Bright gold background */
  --skip-link-color: #1a1a1a;          /* Dark text — 12.4:1 on #ffd700 */

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-primary: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #61afef;

  /* Entity Type Colors (for chips, tooltips, cards) */
  --color-entity-npc: #22d3ee;           /* Cyan - NPCs and characters */
  --color-entity-location: #98c379;      /* Green - Locations and places */
  --color-entity-item: #e5c07b;          /* Gold - Items and equipment */
  --color-entity-creature: #e06c75;      /* Red - Creatures and monsters */
  --color-entity-spell: #c678dd;         /* Purple - Spells and magic */
  --color-entity-quest: #61afef;         /* Blue - Quests and objectives */
  --color-entity-faction: #d19a66;       /* Orange - Factions and groups */
  --color-entity-lore: #abb2bf;          /* Gray - Lore and knowledge */

  /* Entity Background Variants (15% opacity for dark-theme card/chip backgrounds) */
  --color-entity-npc-bg: rgba(34, 211, 238, 0.15);
  --color-entity-item-bg: rgba(229, 192, 123, 0.15);
  --color-entity-creature-bg: rgba(224, 108, 117, 0.15);
  --color-entity-spell-bg: rgba(198, 120, 221, 0.15);
  --color-entity-quest-bg: rgba(97, 175, 239, 0.15);
  --color-entity-location-bg: rgba(152, 195, 121, 0.15);
  --color-entity-condition: #eab308;          /* Amber - Conditions and effects */
  --color-entity-condition-bg: rgba(234, 179, 8, 0.15);
  --color-entity-location-glow: 0 0 8px rgba(152, 195, 121, 0.3);

  /* D&D 5e Item Rarity Colors */
  --rarity-common: var(--color-text-primary);
  --rarity-uncommon: #1fc71f;         /* Green */
  --rarity-rare: #4d8be8;            /* Blue */
  --rarity-very-rare: #9b59d0;       /* Purple */
  --rarity-legendary: #ff8c00;       /* Orange */
  --rarity-artifact: #e74c3c;        /* Red */

  /* D&D 5e Damage Type Colors - PHB Accurate */
  --dmg-fire: #FF4500;           /* Orange-Red - flames and heat */
  --dmg-cold: #87CEEB;           /* Sky Blue - frost and ice */
  --dmg-lightning: #FFD700;      /* Gold - electrical energy */
  --dmg-acid: #9ACD32;           /* Yellow-Green - corrosive */
  --dmg-poison: #9370DB;         /* Medium Purple - toxic */
  --dmg-necrotic: #2F4F2F;       /* Dark Slate Gray - death energy */
  --dmg-radiant: #FFFACD;        /* Lemon Chiffon - holy light */
  --dmg-force: #DA70D6;          /* Orchid - pure magical energy */
  --dmg-psychic: #FF00FF;        /* Magenta - mental damage */
  --dmg-thunder: #4682B4;        /* Steel Blue - sonic boom */
  --dmg-bludgeoning: #8B4513;    /* Saddle Brown - blunt force */
  --dmg-piercing: #C0C0C0;       /* Silver - stabbing/piercing */
  --dmg-slashing: #DC143C;       /* Crimson - cutting/slicing */

  /* D&D 5e Spell School Colors - PHB Accurate */
  --spell-abjuration: #4682B4;    /* Steel Blue - protective magic */
  --spell-conjuration: #9370DB;   /* Medium Purple - summoning */
  --spell-divination: #87CEEB;    /* Sky Blue - knowledge and foresight */
  --spell-enchantment: #FFB6C1;   /* Light Pink - charm and mind control */
  --spell-evocation: #FF4500;     /* Orange Red - raw elemental power */
  --spell-illusion: #DA70D6;      /* Orchid - deception and trickery */
  --spell-necromancy: #2F4F2F;    /* Dark Slate Gray - death magic */
  --spell-transmutation: #32CD32; /* Lime Green - transformation */

  /* DM Narrative Text */
  --color-dm-text: #e8dcc4;             /* Warm parchment tone for DM narration */

  /* Speech Bubble Colors */
  --bubble-player-bg: rgba(152, 195, 121, 0.12);
  --bubble-player-border: rgba(152, 195, 121, 0.35);
  --bubble-dm-bg: rgba(139, 69, 19, 0.08);
  --bubble-dm-border: rgba(198, 120, 221, 0.4);
  --bubble-system-bg: rgba(171, 178, 191, 0.08);
  --bubble-tail-size: 10px;
  --bubble-radius: 12px;
  --bubble-max-width: 85%;

  /* Screenplay Mode Colors */
  --screenplay-bg: #FFFEF5;           /* Warm off-white (script paper) */
  --screenplay-text: #1a1a1a;         /* Near black for dialogue */
  --screenplay-action: #2a2a2a;       /* Dark gray for action lines */
  --screenplay-muted: #555555;        /* Gray for stage directions */
  --screenplay-player: #004488;       /* Dark blue for player input */
  --screenplay-font: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* Paper Surface (warm note/card backgrounds) */
  --paper-bg: #FFFEF5;              /* Warm off-white */
  --paper-bg-dark: #ede9df;         /* Darker warm paper for contrast areas */
  --paper-text: #2a2a2a;            /* Near-black for readability */
  --paper-border: rgba(0, 0, 0, 0.12);
  --paper-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  --paper-font: var(--font-body);

  /* Post-it Note Colors */
  --postit-yellow: #fff9c4;
  --postit-yellow-text: #3e3a00;
  --postit-blue: #bbdefb;
  --postit-blue-text: #0d2744;
  --postit-green: #c8e6c9;
  --postit-green-text: #1b3a1c;
  --postit-pink: #f8bbd0;
  --postit-pink-text: #3e1929;
  --postit-text: #1c1917;           /* Universal dark text for post-it bodies */
  --postit-font: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  --postit-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  --postit-radius: 2px;

  /* Progressive Reveal Stagger Timings */
  --progressive-delay-1: 0ms;
  --progressive-delay-2: 120ms;
  --progressive-delay-3: 240ms;
  --progressive-delay-4: 360ms;
  --progressive-delay-5: 480ms;

  /* Script Room (Full-page screenplay view) */
  --script-bg: #2a2a2e;              /* Dark background behind page */
  --script-page-bg: #FFFEF5;         /* Same warm off-white as screenplay */
  --script-page-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  --script-page-width: 8.5in;        /* US Letter width */
  --script-margin-bg: transparent;    /* Margin area background */
  --script-margin-width: 240px;       /* Margin sidebar width */
  --script-margin-note-bg: rgba(255, 255, 255, 0.06);
  --script-margin-note-border: rgba(255, 255, 255, 0.12);
  --script-cursor-color: var(--screenplay-player);

  /* Legacy aliases (for backwards compatibility during migration) */
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-tertiary: var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-accent-primary);
  --accent-secondary: var(--color-accent-secondary);
  --accent-warning: var(--color-accent-warning);
  --accent-error: var(--color-accent-error);
  --accent-purple: var(--color-accent-purple);
  --border-color: var(--color-border-default);
  --radius-pill: var(--radius-full);
  --color-primary: var(--color-accent-primary);
  --border-subtle: var(--color-border-subtle);

  /* Semantic aliases (used by creation_mode, world_selector, etc.) */
  --color-bg: var(--color-bg-primary);
  --color-text: var(--color-text-primary);
  --color-surface: var(--color-bg-secondary);
  --color-surface-hover: var(--color-bg-hover);
  --color-surface-elevated: var(--color-bg-elevated);

  /* Bare-name aliases (#4382/#4380/#4328 — consumers reference these
   * unsuffixed names but they were undefined in :root, causing widespread
   * invisible-on-dark rendering: status bar, world-select cards, concept
   * builder, creation preview, character sheet borders, sound settings). */
  --color-accent: var(--color-accent-primary);
  --color-fg: var(--color-text-primary);
  --border-default: var(--color-border-default);
  --surface-bg: var(--color-bg-secondary);

  /* Surface Colors (for DM panels and unified renderer) */
  --surface-primary: var(--color-bg-primary);
  --surface-secondary: var(--color-bg-secondary);
  --surface-elevated: var(--color-surface-elevated);
  --surface-dark: var(--color-bg-primary);
  --surface-darker: #141414;
  --surface-hover: var(--color-bg-hover);
  --color-border: var(--color-border-default);
  --color-accent-blue: var(--color-accent-primary);
  --color-accent-green: var(--color-accent-secondary);
  --color-accent-success: var(--color-accent-secondary);  /* Semantic alias for success states */
  --color-accent-yellow: var(--color-accent-warning);
  --color-accent-red: var(--color-accent-error);

  /* Status/Semantic Background Colors (for badges, alerts, etc.) */
  --color-success-bg: rgba(138, 181, 110, 0.15);
  --color-success-text: #8ab56e;
  --color-warning-bg: rgba(212, 176, 110, 0.15);
  --color-warning-text: #d4b06e;
  --color-info-bg: rgba(90, 159, 216, 0.15);
  --color-info-text: #5a9fd8;
  --color-accent-bg: rgba(90, 159, 216, 0.1);

  /* Primer-style Semantic State Colors
   * Used by turn rhythm, autopilot, inline panels, and other newer components.
   * Maps to project palette for terminal aesthetic consistency. */

  /* Text: tertiary level (between muted and disabled) */
  --color-text-tertiary: #777777;

  /* Border: strong emphasis */
  --color-border-strong: #555555;

  /* Accent (blue) semantic scale — interactive elements, autopilot */
  --color-accent-subtle: rgba(90, 159, 216, 0.1);
  --color-accent-muted: rgba(90, 159, 216, 0.3);
  --color-accent-emphasis: #5a9fd8;
  --color-accent-fg: #7ab8ea;
  --color-accent-info: #5a9fd8;

  /* Success (green) semantic scale — ready states */
  --color-success-subtle: rgba(138, 181, 110, 0.12);
  --color-success-emphasis: #8ab56e;
  --color-success-fg: #a0cc84;

  /* Warning (gold) semantic scale — DM bump, caution */
  --color-warning-subtle: rgba(212, 176, 110, 0.12);
  --color-warning-muted: rgba(212, 176, 110, 0.3);
  --color-warning-emphasis: #d4b06e;
  --color-warning-fg: #e0c488;

  /* Danger (red) semantic scale — telegraphs, errors */
  --color-danger-subtle: rgba(207, 96, 104, 0.12);
  --color-danger-muted: rgba(207, 96, 104, 0.3);
  --color-danger-emphasis: #cf6068;
  --color-danger-fg: #e07880;

  /* Severe (orange-red) semantic scale — high threat */
  --color-severe-emphasis: #c08a58;

  /* Foreground on emphasis backgrounds (dark text on vivid bg) */
  --color-fg-on-emphasis: #1a1a1a;

  /* Palette scale colors (Tailwind-style, used by turn rhythm scoped vars) */
  --color-green-500: #8ab56e;
  --color-orange-500: #c08a58;
  --color-gray-500: #777777;
  --color-yellow-500: #d4b06e;
  --color-red-500: #cf6068;

  /* Overlay Colors (for backdrops, shadows, transparency) */
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-light-plus: rgba(0, 0, 0, 0.3);
  --overlay-medium: rgba(0, 0, 0, 0.4);
  --overlay-medium-plus: rgba(0, 0, 0, 0.5);
  --overlay-heavy: rgba(0, 0, 0, 0.6);
  --overlay-dark: rgba(0, 0, 0, 0.8);
  --overlay-darker: rgba(0, 0, 0, 0.85);
  --overlay-white-subtle: rgba(255, 255, 255, 0.05);
  --overlay-white-light: rgba(255, 255, 255, 0.1);
  --overlay-white-medium: rgba(255, 255, 255, 0.2);
  --overlay-gold-subtle: rgba(255, 215, 0, 0.1);
  --overlay-gold-light: rgba(255, 215, 0, 0.2);
  --overlay-gold-medium: rgba(255, 215, 0, 0.3);

  /* Spacing aliases (semantic names) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);

}
/**
 * Terminal D&D Design Tokens — Typography, Animation, Z-Index
 * ============================================================
 * Font families/sizes/weights, animation timings, shadows,
 * elevation system, transitions, and z-index scale.
 */

:root {
  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font Families */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --font-family-mono: var(--font-mono);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Courier New', Courier, 'Liberation Mono', monospace;

  /* Fantasy Typography - D&D themed fonts */
  --font-heading: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', Times, serif;
  --font-fantasy-fallback: Georgia, 'Times New Roman', serif;

  /* Font Sizes - Phase 1: Enhanced scale for readability */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;     /* 13px → 14px: Reduces eye strain */
  --font-size-md: 15px;       /* 14px → 15px: Better hierarchy */
  --font-size-lg: 17px;       /* 16px → 17px: Enhanced readability */
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;
  --font-size-5xl: 48px;

  /* Heading sizes - Typographic scale (1.25 ratio for classical proportions) */
  --font-size-h1: 2rem;       /* 32px - Page titles, major section headers */
  --font-size-h2: 1.625rem;   /* 26px - Section headers */
  --font-size-h3: 1.3rem;     /* ~21px - Subsection headers */
  --font-size-h4: 1.125rem;   /* 18px - Card/panel headers */
  --font-size-h5: 1rem;       /* 16px - Minor headers */
  --font-size-h6: 0.875rem;   /* 14px - Smallest headers */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-narrative: 1.75;  /* Phase 2: Generous line-height for calm reading */
  --line-height-relaxed: 1.75;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ========================================
   * SPACING SCALE (4px base unit, harmonized)
   * ======================================== */

  --space-half: 2px;   /* Alias for 0.5 units (used by turn rhythm) */
  --space-0-5: 2px;   /* 0.5 units */
  --space-1: 4px;     /* 1 unit - base */
  --space-1-5: 6px;   /* 1.5 units */
  --space-2: 8px;     /* 2 units */
  --space-2-5: 10px;  /* 2.5 units */
  --space-3: 12px;    /* 3 units */
  --space-3-5: 14px;  /* 3.5 units */
  --space-4: 16px;    /* 4 units */
  --space-5: 20px;    /* 5 units */
  --space-6: 24px;    /* 6 units */
  --space-8: 32px;    /* 8 units */
  --space-10: 40px;   /* 10 units */
  --space-12: 48px;   /* 12 units */
  --space-16: 64px;   /* 16 units */
  --space-20: 80px;   /* 20 units */

  /* ========================================
   * BORDER RADIUS (sharper for flat UI)
   * ======================================== */

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 4px;
  --radius-full: 9999px;

  /* ========================================
   * ANIMATION & TRANSITION TIMING
   * ======================================== */

  /* Base animation speeds (controlled by data-animation-speed attribute) */
  --animation-speed-multiplier: 1;  /* Default: normal speed */

  /* Duration tokens */
  --duration-instant: calc(50ms * var(--animation-speed-multiplier));
  --duration-fast: calc(150ms * var(--animation-speed-multiplier));
  --duration-normal: calc(300ms * var(--animation-speed-multiplier));
  --duration-slow: calc(500ms * var(--animation-speed-multiplier));
  --duration-slower: calc(800ms * var(--animation-speed-multiplier));
  --duration-dramatic: calc(1000ms * var(--animation-speed-multiplier));

  /* Timing aliases (semantic names for component authors)
   * Map to --duration-* tokens above. Use these in component CSS. */
  --timing-instant: var(--duration-instant);    /* 50ms  - Hover states, toggles */
  --timing-fast: var(--duration-fast);          /* 150ms - Button transitions, small state changes */
  --timing-normal: var(--duration-normal);      /* 300ms - Panel open/close, card transitions */
  --timing-slow: var(--duration-slow);          /* 500ms - Page transitions, complex animations */
  --timing-dramatic: var(--duration-dramatic);  /* 1000ms - Boot sequence, celebrations */

  /* Easing functions */
  --ease-default: ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ========================================
   * SHADOWS (removed for flat UI, keep glow for effects)
   * ======================================== */

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-glow: 0 0 6px rgba(90, 159, 216, 0.2);
  --shadow-glow-success: 0 0 6px rgba(138, 181, 110, 0.2);
  --shadow-glow-warning: 0 0 6px rgba(212, 176, 110, 0.2);
  --shadow-glow-error: 0 0 6px rgba(207, 96, 104, 0.2);
  --shadow-glow-gold: 0 0 6px rgba(232, 196, 74, 0.2);
  --shadow-glow-purple: 0 0 6px rgba(181, 108, 200, 0.2);

  /* Subtle glow variants (6px, lower intensity) */
  --shadow-glow-sm: 0 0 6px rgba(90, 159, 216, 0.2);
  --shadow-glow-sm-gold: 0 0 6px rgba(232, 196, 74, 0.15);

  /* ========================================
   * ELEVATION SYSTEM (Phase 2 P1-6)
   * Subtle elevation with flat borders + shadows for depth
   * ======================================== */

  --elevation-base: 0 0 0 1px var(--color-border-subtle);
  --elevation-raised: 0 0 0 1px var(--color-border-subtle);
  --elevation-floating: 0 2px 8px rgba(0, 0, 0, 0.15),
                        0 0 0 1px var(--color-border-default);
  --elevation-modal: 0 4px 16px rgba(0, 0, 0, 0.2),
                     0 0 0 1px var(--color-border-default);

  /* Focus Ring (for accessibility - WCAG 2.1 AAA compliance with dual ring)
   * Canonical focus color is gold (#ffd700) to match terminal theme.
   * --focus-ring-color is the single token all focus indicators should reference. */
  --focus-ring-color: #ffd700;
  --focus-ring: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.25);
  --focus-ring-gold: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.2);
  --focus-ring-offset: 2px;

  /* ========================================
   * TRANSITIONS
   * ======================================== */

  --transition-fast: 100ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-resize: 150ms ease-out;
  --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-panel-slide: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: var(--ease-spring);

  /* ========================================
   * Z-INDEX SCALE
   *
   * Single source of truth for all z-index values.
   * Merged from _elevation.css (#2186). Keep in sync with
   * app/javascript/lib/elevation.ts.
   *
   * Usage:  .my-modal { z-index: var(--z-modal); }
   *
   * The pre-commit ratchet (z_index_literals in .ratchet.yml) blocks new
   * raw z-index numbers. Existing literals are grandfathered via the
   * baseline and the count can only decrease.
   * ======================================== */

  /* --- Layer below: behind the parent's content (requires isolation: isolate
   *     on the parent stacking context to avoid escaping). Use sparingly —
   *     intended for true background layers like the hologram viewport (#4220). */
  --z-behind: -1;

  /* --- Layer 0: Document flow — no special stacking --- */
  --z-base: 0;
  --z-raised: 1;            /* Just above siblings (card faces, image layers) */
  --z-above: 2;             /* Second layer in a local stack (badges, overlays within cards) */
  --z-float: 5;             /* Floating within a component (badges, decorative elements) */

  /* --- Layer 1: Sticky / pinned — headers, nav bars, scroll controls --- */
  --z-sticky: 10;           /* Sticky headers, focus rings, narrative entries */
  --z-sticky-above: 15;     /* Above sticky (channel panes, canvas overlays) */
  --z-docked: 20;           /* Docked elements (tab headers, loot modal layers) */
  --z-note: 30;             /* Sticky notes above narrative content */
  --z-note-active: 40;      /* Active/dragged sticky note */
  --z-scroll-anchor: 45;    /* Scroll anchor indicators */
  --z-narrative-loading: 45; /* Narrative loading bar (above panels, below modals/toasts) */
  --z-scroll-btn: 50;       /* Scroll-to-latest buttons */

  /* --- Layer 2: Panels — sidebars, side panels, the main grid layout --- */
  --z-panel: 100;
  --z-panel-active: 110;
  --z-panel-chrome: 150;    /* Panel chrome, VTT token overlays */

  /* --- Layer 3: Overlays — semi-transparent dimmers, focus traps --- */
  --z-overlay: 200;
  --z-fixed: 250;           /* Fixed-position elements (legacy, retained for compat) */

  /* --- Layer 4: Postit / sheets — float over panels, under modals --- */
  --z-sheet: 300;           /* Bottom sheets, slide-up panels */
  --z-modal-backdrop: 300;  /* Modal backdrop dimmer */
  --z-postit: 300;          /* Postit notes above panels */

  /* --- Layer 5: Modals — dialog boxes, confirmation prompts --- */
  --z-modal: 400;
  --z-modal-overlay: 410;

  /* --- Layer 6: Toasts / tooltips --- */
  --z-toast: 500;
  --z-tooltip: 500;         /* Tooltips (same layer as toasts) */

  /* --- Layer 7: Loading — full-screen loading overlays --- */
  --z-loading: 600;

  /* --- Layer 8: Popover / floating UI — dropdowns, floating panels --- */
  --z-dropdown: 900;           /* Token spawner dropdowns */
  --z-popover: 999;            /* Popovers below floating panels */
  --z-floating: 1000;          /* Floating panels, tooltips, modals */
  --z-floating-above: 1001;    /* Controls above floating panels */
  --z-floating-controls: 1010; /* Floating panel resize handles */
  --z-notification: 1100;      /* DM control notifications, form overlays */
  --z-warning: 1200;           /* DM warnings, toast overlays */

  /* --- Layer 9: Dev tools / debug / full-screen effects --- */
  --z-devtools: 9000;
  --z-fx: 9990;                /* CRT / cyberpunk visual effects */
  --z-fx-glass: 9995;          /* Glass fracture overlay */
  --z-curtain: 9997;           /* Curtain behind top-level UI (dice backdrop) */
  --z-ceiling: 9999;           /* Top-level overlays (panel palette, death saves) */
  --z-sky: 10000;              /* Above everything (boot sequence, command palette) */
  --z-sky-above: 10001;        /* Controls on top of sky-level overlays */
  --z-boot: 10000;             /* Boot sequence (alias for --z-sky) */

  /* --- Layer 10: Combat / roll overlays — absolute topmost --- */
  --z-combat-overlay: 99998;   /* Combat target picker backdrop */
  --z-combat-top: 99999;       /* Roll overlays, combat target picker */
  --z-skip-link: 99999;        /* Skip links — must be above everything when focused */

}
/**
 * Terminal D&D Design Tokens — Components & Media
 * ================================================
 * Layout split system, narrative components, theming, chips,
 * scrollbars, animations, skeleton loading, SVG icons,
 * dark mode overrides, and reduced motion preferences.
 */

:root {
  /* ========================================
   * LAYOUT - SPLIT SYSTEM
   * ======================================== */

  /* Split Container */
  --split-divider-size: 8px;
  --split-divider-hover-color: var(--color-accent-primary);
  --panel-min-width: 200px;
  --panel-min-height: 150px;

  /* Responsive Breakpoints (documentation anchors — CSS can't use vars in @media)
   * Authoritative values live in app/javascript/lib/breakpoints.js
   * Keep these in sync when changing breakpoint thresholds. */
  --bp-mobile: 768px;   /* 0–767 = mobile (1 col) */
  --bp-tablet: 1024px;  /* 768–1023 = tablet (8 cols) */
  --bp-desktop: 1440px; /* 1024–1439 = desktop (12 cols), 1440+ = wide (12 cols) */

  /* Grid Container */
  --grid-columns: 12;
  --grid-gap: 4px;
  --grid-resize-handle-size: 16px;

  /* Status Bar */
  --status-bar-height: 38px;
  --status-bar-padding: var(--space-1-5) var(--space-4);

  /* DM Responding Bar — compact height used to displace narrative header rows
   * so channel-tabs and narrative-filters are never occluded when bar is active.
   * Formula: host-padding(8) + bar-pad-top(12) + icon-row(24) + bar-pad-bottom(12) = 56px.
   * See _loading.css §"DM Bar Displacement" and organisms/narrative/_layout.css. */
  --dm-bar-compact-height: 56px;

  /* Side Panel */
  --panel-width-default: 380px;
  --panel-width-min: 280px;
  --panel-width-max: 600px;

  /* Input Area */
  --input-height: 40px;
  --input-padding: var(--space-2) var(--space-3);
  /* Total visual height of the input-area chrome: top-pad(8) + input-line(40) + bottom-pad(8).
   * Used to anchor dm-responding-bar-host above the input row (#5076). */
  --input-area-height: 56px;

  /* ========================================
   * COMPONENTS - NARRATIVE (tightened for flat UI)
   * ======================================== */

  /* Phase 2 (Rick Rubin): Generous spacing for readability and calm */
  --narrative-entry-spacing: var(--space-6);  /* 16px → 24px: Breathing room between entries */
  --narrative-border-width: 0;
  --narrative-padding: var(--space-5);        /* 12px → 20px: More padding around narrative */

  /* Phase 1: Semantic spacing tokens for consistent application */
  --panel-padding: var(--space-4);           /* 16px: Standard panel internal padding */
  --section-spacing: var(--space-8);         /* 32px: Between major sections */

  /* Entry Type Colors */
  --color-entry-dm: var(--color-accent-purple);
  --color-entry-player: var(--color-accent-primary);
  --color-entry-system: var(--color-accent-warning);
  --color-entry-error: var(--color-accent-error);
  --color-entry-roll: var(--color-accent-primary);
  --color-entry-combat: var(--color-accent-error);
  --color-entry-npc: var(--color-accent-purple);
  --color-entry-item: var(--color-accent-warning);
  --color-entry-location: var(--color-accent-secondary);

  /* ========================================
   * CONTEXT-AWARE THEMING (Phase 4 P2-14)
   * Theme shifts based on game context
   * ======================================== */

  /* Default context colors (overridden by data-context attributes) */
  --context-accent: var(--color-accent-primary);
  --context-glow: var(--shadow-glow);
  --context-border: var(--color-border-default);

  /* ========================================
   * COMPONENTS - CHIPS & BADGES
   * ======================================== */

  --chip-height: 28px;
  --chip-padding: var(--space-1) var(--space-3);
  --chip-gap: var(--space-2);
  --chip-border-radius: var(--radius-md);

  --badge-height: 20px;
  --badge-padding: var(--space-1) var(--space-2);
  --badge-font-size: var(--font-size-xs);

  /* ========================================
   * COMPONENTS - TRAYS
   * ======================================== */

  --tray-padding: var(--space-3);
  --tray-gap: var(--space-2);
  --tray-border-radius: var(--radius-lg);

  /* ========================================
   * CANVAS EFFECTS
   * ======================================== */

  --effect-ambient-opacity: 0.3;
  --effect-feedback-opacity: 0.8;
  --effect-particle-count: 100;

  /* ========================================
   * SCROLLBAR
   * ======================================== */

  --scrollbar-width: 8px;
  --scrollbar-width-thin: 6px;
  --scrollbar-track-color: var(--color-bg-primary);
  --scrollbar-thumb-color: var(--color-bg-tertiary);
  --scrollbar-thumb-hover-color: var(--color-bg-elevated);
  --scrollbar-thumb-radius: 4px;

  /* ========================================
   * MICRO-INTERACTIONS
   * ======================================== */

  --interaction-scale-hover: 1.01;
  --interaction-scale-active: 0.99;
  --interaction-glow-focus: 0 0 0 2px rgba(90, 159, 216, 0.25);
  --interaction-glow-success: 0 0 0 2px rgba(138, 181, 110, 0.25);
  --interaction-glow-error: 0 0 0 2px rgba(207, 96, 104, 0.25);

  /* ========================================
   * SKELETON LOADING
   * ======================================== */

  --skeleton-base-color: var(--color-bg-tertiary);
  --skeleton-shine-color: var(--color-bg-elevated);
  --skeleton-animation-duration: 1.5s;

  /* ========================================
   * GHOST/TRANSPARENT PANEL SYSTEM
   * Variable opacity with hover substantiation
   * ======================================== */

  /* Ghost opacity levels (ethereal → phantom) */
  --ghost-opacity-ethereal: 0.15;   /* Most transparent - barely visible */
  --ghost-opacity-wisp: 0.35;       /* Slightly visible */
  --ghost-opacity-shade: 0.55;      /* Default - balanced visibility */
  --ghost-opacity-phantom: 0.75;    /* Nearly solid */

  /* Numbered aliases for 4-level cycle (Phase 1 ghost toggle) */
  --ghost-opacity-0: 1.0;           /* Level 0: fully opaque (off) */
  --ghost-opacity-1: 0.7;           /* Level 1: light ghost */
  --ghost-opacity-2: 0.4;           /* Level 2: medium ghost */
  --ghost-opacity-3: 0.15;          /* Level 3: heavy ghost */

  /* Hover substantiation boost */
  --ghost-hover-opacity-boost: 0.4;

  /* Ghost visual effects */
  --ghost-blur-subtle: 4px;
  --ghost-blur-strong: 8px;
  --ghost-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Ghost text shadow for readability */
  --ghost-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  /* ========================================
   * SVG ICON MASKS (for CSS pseudo-element icons)
   * Use with: mask-image: var(--icon-NAME);
   * ======================================== */

  /* Status/Feedback Icons */
  --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E");
  --icon-x: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  --icon-alert-triangle: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");

  /* D&D/Game Icons */
  --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='20' height='20' rx='2'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='8' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='currentColor'/%3E%3C/svg%3E");
  --icon-sword: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5'/%3E%3Cpath d='M13 19l6-6'/%3E%3Cpath d='M16 16l4 4'/%3E%3Cpath d='M19 21l2-2'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
  --icon-crown: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E");

  /* Navigation Icons */
  --icon-chevron-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,18 15,12 9,6'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  --icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12,5 19,12 12,19'/%3E%3C/svg%3E");
  --icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12,19 5,12 12,5'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,3 19,12 5,21 5,3'/%3E%3C/svg%3E");
  --icon-zap: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='13,2 3,14 12,14 11,22 21,10 12,10 13,2'/%3E%3C/svg%3E");

  /* UI Icons */
  --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-timer: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M5 3l2 2'/%3E%3Cpath d='M19 3l-2 2'/%3E%3Cpath d='M12 5V3'/%3E%3Cpath d='M10 2h4'/%3E%3C/svg%3E");
  --icon-map-pin: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --icon-trophy: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 010-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 000-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0012 0V2z'/%3E%3C/svg%3E");
  --icon-sparkles: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z'/%3E%3Cpath d='M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z'/%3E%3Cpath d='M19 5l.5 1.5L21 7l-1.5.5L19 9l-.5-1.5L17 7l1.5-.5L19 5z'/%3E%3C/svg%3E");
  --icon-lightbulb: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z'/%3E%3C/svg%3E");

  /* Dot/Bullet icon */
  --icon-dot: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");

  /* Dice icon (d20) */
  --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");

  /* Additional SVG icons for CSS pseudo-element replacement */
  --icon-globe: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E");
  --icon-user: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a8.38 8.38 0 0113 0'/%3E%3C/svg%3E");
  --icon-users: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
  --icon-clipboard: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E");
  --icon-scroll: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h12a2 2 0 002-2v-2H10v2a2 2 0 11-4 0V5a2 2 0 10-4 0v2h12a2 2 0 012 2v10'/%3E%3C/svg%3E");
  --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --icon-lock: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  --icon-gem: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M12 22L6 9l3-6'/%3E%3Cpath d='M12 22l6-13-3-6'/%3E%3C/svg%3E");
  --icon-swords: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M9.5 17.5L21 6V3h-3L6.5 14.5M11 19l-6-6M8 16l-4 4M5 21l-2-2'/%3E%3C/svg%3E");
  --icon-gear: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
  --icon-leaf: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 20A7 7 0 019.8 6.9C15.5 4.9 17 3.5 20 2c0 3-1.5 6-3 8 1 1 2 3 2 5a7 7 0 01-7 7z'/%3E%3Cpath d='M5 20c2-2 5-3.5 8-4'/%3E%3C/svg%3E");
  --icon-cloud: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'/%3E%3C/svg%3E");
  --icon-musical-note: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
  --icon-books: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='10' x2='14' y2='10'/%3E%3C/svg%3E");
}
}

/* ========================================
 * DARK MODE OVERRIDES (if ever needed)
 * ======================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Already dark by default */
  }
}

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

@media (prefers-reduced-motion: reduce) {
  :root {
    --animation-speed-multiplier: 0;
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
    --transition-resize: 0ms;
    --transition-bounce: 0ms;
    --ease-out-back: ease;
    --effect-ambient-opacity: 0;
    --effect-particle-count: 0;
  }

  /* Covered by accessibility.css @media (prefers-reduced-motion: reduce) * rule */
}
/**
 * Terminal D&D Design Tokens — Import Hub
 * ==========================================
 * Single source of truth for all design variables.
 * Import this file first in any terminal-related stylesheet.
 *
 * Decomposed into focused files under tokens/ for maintainability.



 */
/*
 * Timing Design Tokens
 * ====================
 * Centralized animation/transition timing values.
 * Replaces hardcoded duration values across the codebase.
 *
 * Migration is INCREMENTAL: not all files have been migrated yet.
 * When editing a CSS file, replace hardcoded durations with these tokens.
 *
 * Duration mapping guide:
 *   0ms              -> var(--timing-instant)
 *   50ms             -> var(--timing-instant)
 *   100-200ms        -> var(--timing-fast)
 *   250-350ms        -> var(--timing-normal)
 *   400-600ms        -> var(--timing-slow)
 *   700-1000ms       -> var(--timing-dramatic)
 *   1000ms+          -> var(--timing-glacial)
 *
 * NOTE: The canonical --timing-* and --duration-* tokens are defined in
 * terminal/_tokens.css (lines 296-370) with --animation-speed-multiplier
 * support and reduced-motion handling. This file adds supplemental tokens
 * that extend that system (--timing-glacial, --ease-bounce, shorthand
 * transitions) without duplicating the base definitions.
 */

:root {
  /* ========================================
   * SUPPLEMENTAL DURATION TOKENS
   * Extends the base timing scale in _tokens.css
   * ======================================== */

  /* Glacial — very long animations (boot sequences, epic celebrations, confetti) */
  --duration-glacial: calc(1200ms * var(--animation-speed-multiplier));
  --timing-glacial: var(--duration-glacial);

  /* ========================================
   * SUPPLEMENTAL EASING TOKENS
   * Extends the base easing set in _tokens.css
   * ======================================== */

  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========================================
   * SHORTHAND TRANSITION TOKENS
   * Pre-composed transition values for common patterns.
   * Use these to replace "transition: all 0.15s ease" one-liners.
   * ======================================== */

  --transition-timing-fast: var(--timing-fast) var(--ease-default);
  --transition-timing-normal: var(--timing-normal) var(--ease-default);
  --transition-timing-slow: var(--timing-slow) var(--ease-default);
}

/* ========================================
 * REDUCED MOTION
 * Supplements the global reduced-motion rules in _tokens.css
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-glacial: 0ms;
  }
}
/*
 * Z-INDEX ELEVATION SYSTEM — REDIRECTED
 *
 * All z-index tokens have been consolidated into:
 *   app/assets/stylesheets/terminal/_tokens.css
 *
 * This file is kept as a no-op so existing `require terminal/base/_elevation`
 * directives don't break. It defines nothing; _tokens.css is the single
 * source of truth for all --z-* custom properties.
 *
 * Keep in sync with: app/javascript/lib/elevation.ts
 *
 * See #2186 for the consolidation rationale.
 */
/*
 * Shared Keyframes
 * ================
 * Consolidated animation keyframes used across multiple components.
 * Import this ONCE; individual component files should NOT redefine these.
 *
 * Naming convention: generic keyframes only. Component-specific keyframes
 * remain in their component file.
 */

/* ========================================
 * Spinner / Loading
 * ======================================== */

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========================================
 * Pulse (opacity)
 * ======================================== */

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

/* ========================================
 * Fade In
 * ======================================== */

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

/* ========================================
 * Skeleton Loading Shimmer
 * ======================================== */

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

/* ========================================
 * Slide In (from bottom)
 * ======================================== */

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

/* ========================================
 * Slide Up
 * ======================================== */

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

/* ========================================
 * Gem Sparkle (selection cards, etc.)
 * ======================================== */

@keyframes gemSparkle {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.6; transform: scale(1); }
}

/* ========================================
 * Notification Slide In
 * ======================================== */

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

/* ========================================
 * Masonry Spin (alias for spin, used by masonry cards)
 * ======================================== */

@keyframes masonry-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
 * Pulse Pending (opacity pulse)
 * ======================================== */

@keyframes pulse-pending {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
/**
 * Accessibility — Screen Reader, Focus, Skip Links, Motion, Colorblind, High Contrast, Touch, Text & Color Contrast
 */

/**
 * Accessibility Utilities
 * =======================
 * WCAG 2.1 AA compliant accessibility utilities.
 *
 * Includes:
 * - Screen reader utilities
 * - Focus management styles
 * - Reduced motion support
 * - High contrast support
 * - Skip links
 */

/* ========================================
 * SCREEN READER UTILITIES
 * ======================================== */

/* Visually hidden but accessible to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Becomes visible on focus (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Live region for dynamic announcements */
.aria-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========================================
 * FOCUS MANAGEMENT
 * WCAG 2.1 AAA Compliance - Enhanced Focus Indicators
 * ======================================== */

/* Default focus outline — gold to match terminal theme (keyboard_navigation.css is authoritative)
 * Dual ring design: 3px solid + 5px glow for high visibility */
:focus-visible {
  outline: 3px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
  position: relative;
  z-index: var(--z-sticky);
}

/* Remove default focus for mouse users (but keep for keyboard) */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* High visibility focus for dark backgrounds */
.focus-light:focus-visible {
  outline-color: var(--focus-ring-light, #ffffff);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);
}

/* Focus within container - highlight entire container */
.focus-within:focus-within {
  box-shadow: 0 0 0 3px var(--focus-ring-color, #ffd700),
              0 0 0 6px rgba(255, 215, 0, 0.2);
}

/* Focus trap indicator - visual cue that focus is trapped */
.focus-trap-active {
  position: relative;
}

.focus-trap-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed var(--focus-ring-color, #ffd700);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.5;
}

/* ========================================
 * SKIP LINKS
 * ======================================== */

.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-skip-link);
  padding: var(--space-3, 12px);
  background: var(--skip-link-bg, #ffd700);
  color: var(--skip-link-color, #1a1a1a);
  font-weight: bold;
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  transition: top 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
  top: var(--space-4, 16px);
  outline: 2px solid var(--skip-link-bg, #ffd700);
  outline-offset: 2px;
}

/* ========================================
 * REDUCED MOTION
 * Respect user's motion preferences
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep essential animations but simplify them */
  .toast,
  .tooltip,
  .modal {
    animation: none;
  }

  /* Disable parallax and scroll effects */
  .parallax,
  .scroll-animation {
    transform: none;
  }
}

/* Utility class to force animation even with reduced motion */
.motion-safe {
  /* Use with caution - only for essential feedback */
}

@media (prefers-reduced-motion: no-preference) {
  .motion-safe {
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
}

/* ========================================
 * COLORBLIND MODES
 * CSS filters to simulate color vision for different types of colorblindness
 * Based on research from colorblindness.com and Coblis simulator
 * ======================================== */

/* Protanopia (Red-blind) - Most common form, ~1% of males
 * Difficulty distinguishing red/green, red appears darker */
[data-colorblind-mode="protanopia"] {
  filter: url('#protanopia-filter');
}

/* Deuteranopia (Green-blind) - Common, ~1% of males
 * Difficulty distinguishing red/green, similar to protanopia */
[data-colorblind-mode="deuteranopia"] {
  filter: url('#deuteranopia-filter');
}

/* Tritanopia (Blue-blind) - Rare, ~0.001%
 * Difficulty distinguishing blue/yellow */
[data-colorblind-mode="tritanopia"] {
  filter: url('#tritanopia-filter');
}

/* Achromatopsia (Complete colorblindness) - Very rare
 * No color vision, only grayscale */
[data-colorblind-mode="achromatopsia"] {
  filter: grayscale(100%);
}

/* Fallback filters using CSS matrix transforms
 * These provide approximate simulation when SVG filters aren't available */
@supports not (filter: url('#protanopia-filter')) {
  [data-colorblind-mode="protanopia"] {
    filter:
      contrast(0.8)
      saturate(0.7)
      hue-rotate(-10deg);
  }

  [data-colorblind-mode="deuteranopia"] {
    filter:
      contrast(0.8)
      saturate(0.7)
      hue-rotate(10deg);
  }

  [data-colorblind-mode="tritanopia"] {
    filter:
      contrast(0.9)
      saturate(0.6)
      hue-rotate(180deg);
  }
}

/* ========================================
 * HIGH CONTRAST MODE
 * Support for Windows High Contrast mode
 * ======================================== */

@media (forced-colors: active) {
  /* Ensure borders are visible */
  .btn,
  .panel,
  .card,
  .modal,
  input,
  select,
  textarea {
    border: 1px solid CanvasText;
  }

  /* Ensure focus is visible */
  :focus-visible {
    outline: 4px solid Highlight;
    outline-offset: 2px;
  }

  /* Ensure links are distinguishable */
  a {
    text-decoration: underline;
  }

  /* Icons should use system colors */
  svg {
    fill: currentColor;
  }
}

/* ========================================
 * TOUCH TARGETS
 * Minimum 44x44px for touch accessibility
 * ======================================== */

.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Larger touch target for mobile */
@media (pointer: coarse) {
  .btn,
  button,
  [role="button"],
  a:not(.text-link) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase spacing between clickable items */
  .clickable-list > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* ========================================
 * TEXT SIZING
 * Support for user font size preferences
 * ======================================== */

/* Don't prevent text scaling */
html {
  -webkit-text-size-adjust: 100%;
}

/* Use rem for text that should scale with user preferences */
.text-scalable {
  font-size: 1rem;
  line-height: 1.5;
}

/* ========================================
 * COLOR CONTRAST UTILITIES
 * For maintaining WCAG AA compliance
 * ======================================== */

/* High contrast text on dark backgrounds */
.text-high-contrast {
  color: var(--terminal-text-primary, #e0e0e0);
  text-shadow: none;
}

/* Ensure link visibility */
.link-visible {
  color: var(--color-primary, #4a90e2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link-visible:hover {
  text-decoration-thickness: 2px;
}

/* ========================================
 * SEMANTIC STATES
 * Visual indicators for interactive states
 * ======================================== */

/* Disabled state */
[disabled],
.disabled,
[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selected state */
[aria-selected="true"],
.selected {
  background: var(--selection-bg, rgba(74, 144, 226, 0.2));
  border-color: var(--color-primary, #4a90e2);
}

/* Current/active state */
[aria-current="true"],
[aria-current="page"],
.current {
  font-weight: 600;
  border-left: 3px solid var(--color-primary, #4a90e2);
  padding-left: calc(1rem - 3px);
}

/* Expanded state indicator */
[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

/* ========================================
 * ERROR AND VALIDATION STATES
 * ======================================== */

/* Error state */
[aria-invalid="true"],
.has-error {
  border-color: var(--color-error, #cf6068);
}

[aria-invalid="true"]:focus-visible,
.has-error:focus-visible {
  outline: 3px solid var(--color-error, #cf6068);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.3);
  position: relative;
  z-index: var(--z-sticky);
}

/* Error message */
.error-message,
[role="alert"] {
  color: var(--color-error, #cf6068);
  font-size: 0.875rem;
}

/* Required field indicator */
.required::after {
  content: ' *';
  color: var(--color-error, #cf6068);
}
/**
 * Accessibility — Loading, Dialog, Terminal Focus, Keyboard Navigation, Skip Links, Keyboard Shortcut Hints & High Contrast Enhancements
 */


/* ========================================
 * LOADING STATES
 * ======================================== */

[aria-busy="true"] {
  cursor: wait;
  opacity: 0.7;
}

/* ========================================
 * DIALOG/MODAL ACCESSIBILITY
 * ======================================== */

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Modal backdrop should not receive focus */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay-medium-plus);
  z-index: var(--z-popover);
}

/* Modal should be centered and focusable */
[role="dialog"],
[role="alertdialog"] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-floating);
  max-height: 90vh;
  overflow-y: auto;
}

/* Close button should be easily identifiable */
.modal-close,
[aria-label="Close"] {
  min-width: 44px;
  min-height: 44px;
}

/* ========================================
 * TERMINAL-SPECIFIC FOCUS STYLES
 * Enhanced focus indicators for game UI
 * ======================================== */

/* Panel focus - golden glow for terminal theme with dual ring */
.panel:focus-within,
.split-panel:focus-within {
  box-shadow: 0 0 0 3px var(--color-gold, #ffd700),
              0 0 0 6px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Narrative entry focus */
.narrative-entry:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.05);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Menu item focus - consistent left border indicator with glow */
.room-menu__item:focus-visible,
.world-menu__item:focus-visible,
.session-menu-dropdown .menu-item:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--color-gold, #ffd700),
              0 0 0 3px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Card/option focus - scale and glow effect with dual ring */
.world-selector__option:focus-visible,
.lobby-welcome__action:focus-visible,
.quest-card:focus-visible,
.inventory-item:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  transform: translateX(4px);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3),
              0 0 0 5px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Form control focus - terminal style with dual ring */
.terminal-input:focus-visible,
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 1px;
  border-color: var(--color-gold, #ffd700);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* ========================================
 * KEYBOARD NAVIGATION PATTERNS
 * Roving tabindex and arrow key navigation
 * ======================================== */

/* Roving tabindex container */
[data-keyboard-nav="roving"] [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: -2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* List navigation - highlight current item */
[role="listbox"] [role="option"]:focus,
[role="listbox"] [role="option"][aria-selected="true"],
[role="menu"] [role="menuitem"]:focus,
[role="tablist"] [role="tab"]:focus-visible {
  outline: none;
  background: var(--color-bg-hover, rgba(255, 215, 0, 0.1));
  box-shadow: inset 3px 0 0 var(--color-gold, #ffd700),
              0 0 0 3px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Grid navigation (e.g., inventory) */
[role="grid"] [role="gridcell"]:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: -2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/* Tab panel focus */
[role="tabpanel"]:focus-visible {
  outline: 3px dashed var(--color-gold, #ffd700);
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.15);
  position: relative;
  z-index: var(--z-sticky);
}

/* ========================================
 * SCREEN READER GAME ANNOUNCEMENTS
 * ======================================== */

/* Combat/narrative/status announcers - visually hidden */
.combat-announcer,
.narrative-announcer,
.status-announcer,
[aria-live="assertive"].combat-event,
[aria-live="polite"].narrative-event,
[aria-live="polite"].status-update {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
 * GAME-SPECIFIC SKIP LINKS
 * ======================================== */

.skip-links {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-sky);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.skip-links a {
  display: block;
  padding: 12px 16px;
  background: var(--skip-link-bg, #ffd700);
  color: var(--skip-link-color, #1a1a1a);
  text-decoration: none;
  font-weight: 600;
  border: 2px solid var(--skip-link-color, #1a1a1a);
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-links a:focus {
  transform: translateY(0);
  outline: none;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* ========================================
 * KEYBOARD SHORTCUT HINTS
 * ======================================== */

.kbd,
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  box-shadow: 0 2px 0 var(--color-border-default);
}

/* ========================================
 * HIGH CONTRAST MODE ENHANCEMENTS
 * Full theme is defined in terminal/_user_typography.css
 * (data-high-contrast, body.high-contrast, prefers-contrast)
 * This section adds focus-specific enhancements.
 * ======================================== */

@media (prefers-contrast: more) {
  :focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
    outline-color: #ffffff;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
  }
}

/* Same focus enhancements when toggled manually */
html[data-high-contrast="true"] :focus-visible,
body.high-contrast :focus-visible {
  outline-width: 4px;
  outline-offset: 3px;
  outline-color: #ffffff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.4);
}

/* Windows high contrast - terminal specific */
@media (forced-colors: active) {
  .narrative-entry {
    border: 2px solid CanvasText;
    margin-bottom: 8px;
  }

  .narrative-entry.dm-message {
    border-color: Highlight;
  }

  .narrative-entry.player-message {
    border-color: LinkText;
  }

  .combat-turn-indicator,
  .current-turn {
    border: 3px solid Highlight;
    background: Canvas;
  }

  .hp-bar,
  .xp-bar {
    border: 2px solid CanvasText;
  }

  .hp-bar__fill,
  .xp-bar__fill {
    background: Highlight;
  }

  .btn,
  button {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .btn:hover,
  button:hover {
    border-color: Highlight;
  }

  .panel-header {
    border-bottom: 2px solid CanvasText;
  }

  .status-bar {
    border-bottom: 2px solid CanvasText;
  }
}

/* ========================================
 * ANIMATION SAFETY
 * ======================================== */

/* Animation speed control via data-animation-speed attribute */
[data-animation-speed="none"] {
  --animation-speed-multiplier: 0;
}

[data-animation-speed="none"] *,
[data-animation-speed="none"] *::before,
[data-animation-speed="none"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

[data-animation-speed="slow"] {
  --animation-speed-multiplier: 2;
}

[data-animation-speed="normal"] {
  --animation-speed-multiplier: 1;
}

[data-animation-speed="fast"] {
  --animation-speed-multiplier: 0.5;
}

/* User preference to disable animations */
.no-animations *,
.no-animations *::before,
.no-animations *::after {
  animation: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .typing-indicator,
  .thinking-indicator,
  .loading-spinner,
  .pulse,
  .bounce {
    animation: none;
  }

  .typing-indicator span,
  .thinking-indicator__dots span {
    opacity: 1;
  }
}

/* ========================================
 * NARRATIVE SEGMENT ACCESSIBILITY
 * Styles specific to narrative segments
 * ======================================== */

/* Interactive perception checks - enhanced focus */
.perception-interactive:focus-visible {
  outline: 3px dashed var(--color-gold, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  background-color: rgba(255, 215, 0, 0.05);
}

/* Selection segment radio buttons */
.inline-selection-option:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
}

/* Roll result segment focus */
.roll-result:focus-within {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
}

/* NPC dialogue - article focus */
.npc-dialogue:focus-within {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
}

/* Decorative elements hidden from screen readers */
.pixel-portrait[aria-hidden="true"],
.action-icon[aria-hidden="true"],
.perception-icon[aria-hidden="true"],
.roll-icon[aria-hidden="true"] {
  speak: none;
}

/* Selection dividers hidden from screen readers */
.inline-selection-divider[aria-hidden="true"] {
  speak: none;
}

/* Touch target sizing for narrative interactions */
@media (pointer: coarse) {
  .perception-interactive,
  .inline-selection-option,
  .narrative-segment [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  .perception-interactive {
    padding: var(--space-3, 0.75rem);
  }

  .inline-selection-option {
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  }
}

/* High contrast mode for narrative segments */
@media (prefers-contrast: high) {
  .narrative-segment {
    border: 2px solid currentColor;
  }

  .perception-hidden,
  .perception-interactive {
    border: 2px dashed currentColor;
  }

  .roll-result {
    border: 2px solid currentColor;
  }

  .npc-dialogue {
    border: 2px solid currentColor;
  }

  .perception-badge,
  .roll-badge {
    border: 2px solid currentColor;
  }

  .inline-selection-option {
    border: 2px solid currentColor;
  }
}

/**
 * Accessibility — Animation Safety, Narrative Segments & ARIA Live Regions
 */

/* ========================================
 * SPRINT 6 SEGMENT ACCESSIBILITY
 * Accessibility for new segment types
 * ======================================== */

/* Ambient Segment - ARIA and focus */
.ambient-segment {
  /* Ambient sounds should be live regions for updates */
}

.ambient-segment[role="status"] {
  /* Status role ensures screen readers announce changes */
}

.ambient-segment::before {
  /* Hide decorative musical note from screen readers */
  speak: none;
}

/* Time Segment - Time announcements */
.time-segment[role="status"] {
  /* Time changes announced as status updates */
}

.time-segment .time-icon {
  speak: none;
}

/* Secret Segment - DM-only content */
.secret-segment[aria-hidden="true"] {
  /* Hidden from players, but still accessible to DM screen readers */
}

.secret-segment:focus-visible {
  outline: 3px dashed var(--retro-red, #DC143C);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(220, 20, 60, 0.2);
}

.secret-segment::before {
  /* Lock icon decorative */
  speak: none;
}

/* Map Position Segment - Location announcements */
.map-position-segment[role="status"] {
  /* Position changes announced */
}

.map-position-segment:focus-visible {
  outline: 3px solid var(--retro-green, #32CD32);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(50, 205, 50, 0.2);
}

.map-position-segment .position-icon {
  speak: none;
}

/* Combat Log Segment - Combat announcements */
.combat-log-segment[role="log"] {
  /* Log role for sequential combat events */
}

.combat-log-segment:focus-visible {
  outline: 3px solid var(--retro-red, #DC143C);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(220, 20, 60, 0.2);
}

.combat-entry[role="listitem"] {
  /* Each combat entry is a list item */
}

/* Roll Result Segment - Dice roll announcements */
.roll-result-segment[role="status"] {
  /* Roll results announced to screen readers */
}

.roll-result-segment:focus-visible {
  outline: 3px solid var(--retro-gold, #FFD700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
}

.roll-dice-display {
  /* Dice icon is decorative, value announced via aria-label */
}

/* Pixel Portrait accessibility */
.pixel-portrait[role="img"] {
  /* Treated as an image with alt text */
}

.pixel-portrait canvas {
  /* Canvas should have role="presentation" if decorative */
}

/* High contrast for new segments */
@media (prefers-contrast: high) {
  .ambient-segment {
    border: 2px solid currentColor;
  }

  .time-segment {
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
  }

  .secret-segment {
    border: 2px dashed currentColor;
  }

  .map-position-segment {
    border: 2px solid currentColor;
  }

  .combat-log-segment {
    border: 2px solid currentColor;
  }

  .combat-entry {
    border-bottom: 1px solid currentColor;
  }

  .roll-result-segment {
    border: 2px solid currentColor;
  }

  .roll-dice-display {
    border: 2px solid currentColor;
  }

  .pixel-portrait {
    border: 2px solid currentColor;
  }
}

/* Forced colors (Windows High Contrast) for new segments */
@media (forced-colors: active) {
  .ambient-segment {
    border: 2px solid CanvasText;
    background: Canvas;
  }

  .time-segment {
    border-color: Highlight;
    background: Canvas;
  }

  .secret-segment {
    border: 2px dashed Mark;
    background: Canvas;
  }

  .map-position-segment {
    border: 2px solid LinkText;
    background: Canvas;
  }

  .combat-log-segment {
    border: 2px solid Mark;
    background: Canvas;
  }

  .roll-result-segment {
    border: 2px solid Highlight;
    background: Canvas;
  }

  .roll-dice-display {
    border: 2px solid CanvasText;
    background: ButtonFace;
    color: ButtonText;
  }

  .pixel-portrait {
    border: 2px solid CanvasText;
  }
}

/* Touch targets for new segments */
@media (pointer: coarse) {
  .ambient-segment,
  .time-segment,
  .map-position-segment,
  .roll-result-segment {
    min-height: 44px;
    padding: var(--space-3, 0.75rem);
  }

  .combat-entry {
    min-height: 44px;
    padding: var(--space-2, 0.5rem) 0;
  }
}

/* Reduced motion for new segment animations */
@media (prefers-reduced-motion: reduce) {
  .ambient-segment::before {
    animation: none;
    opacity: 0.8;
  }

  .pixel-portrait--loading {
    animation: none;
  }

  .pixel-portrait--loading::after {
    animation: none;
  }

  .npc-dialogue.npc-first-meeting .pixel-portrait {
    animation: none;
  }

  .roll-result-segment[data-outcome="critical"] {
    animation: none;
  }

  .roll-result-segment[data-outcome="critical"] .roll-dice-display {
    animation: none;
  }

  .roll-result-segment[data-outcome="fumble"] .roll-dice-display {
    animation: none;
  }

  .combat-entry[data-type="critical"] {
    animation: none;
  }
}

/* Screen reader only labels for segment types */
.segment-sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
 * NARRATIVE SEGMENT ARIA LIVE REGIONS
 * ======================================== */

/* Combat events should be announced assertively */
.combat-log-segment[aria-live="assertive"] {
  /* Critical combat events */
}

/* Roll results should be announced politely */
.roll-result-segment[aria-live="polite"] {
  /* Dice roll results */
}

/* Time changes should be announced politely */
.time-segment[aria-live="polite"] {
  /* Time passage */
}

/* Ambient changes announced politely */
.ambient-segment[aria-live="polite"] {
  /* Atmosphere changes */
}

/* Position changes announced politely */
.map-position-segment[aria-live="polite"] {
  /* Location updates */
}
/**
 * Accessibility Styles — Import Hub
 * ===================================
 * Screen reader utilities, focus management, skip links, reduced motion,
 * colorblind modes, high contrast, keyboard navigation and ARIA live regions.
 *
 * Decomposed into focused files under accessibility/ for maintainability.



 */
/**
 * Colorblind Modes — Protanopia
 * ================================
 * Metadata and protanopia (red-blind) token remapping.
 */

/**
 * Colorblind Display Modes
 * ========================
 * Token-level color remapping for three common color vision deficiencies.
 *
 * Strategy: remap CSS custom properties on the <html> element so every
 * consumer of those tokens inherits the corrected palette automatically.
 * No broad CSS filter is used — per-token overrides preserve luminance and
 * maintain WCAG AA contrast on the dark terminal background (#1a1a1a).
 *
 * Activation:
 *   html[data-colorblind-mode="protanopia"]   — red-blind
 *   html[data-colorblind-mode="deuteranopia"] — green-blind
 *   html[data-colorblind-mode="tritanopia"]   — blue-blind
 *
 * Toggled by TypographySettingsController → typography_settings_controller.js
 * which writes document.documentElement.dataset.colorblindMode = mode.
 *
 * Composition with high-contrast mode:
 *   These overrides apply at the html element level and remap the same token
 *   set that html[data-high-contrast="true"] overrides. When both are active,
 *   the last-declared rule wins for tokens they share. The high-contrast
 *   selector in _user_typography.css is declared after this file in terminal.css,
 *   so high-contrast colours take precedence — but we retain the shape/meaning
 *   cues added here (texture patterns and ARIA labels) which survive any filter.
 *
 * References:
 *   - Colour Universal Design (CUD) guidelines — Masataka Okabe & Kei Ito
 *   - WCAG 2.2 Success Criterion 1.4.1 (Use of Color — Level A)
 *   - WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum — Level AA)
 *   - Coblis Colour Blindness Simulator (https://www.color-blindness.com/coblis-color-blindness-simulator/)
 *
 * Design philosophy (RPG metaphor):
 *   Every hero deserves to read the battlefield clearly. These modes are not
 *   "simulation" filters — they are full palette swaps, like choosing a
 *   different UI skin that keeps every status indicator legible for your
 *   particular vision profile.
 *
 * Coverage per mode:
 *   - Accent colors (primary, secondary, warning, error, purple, orange, cyan)
 *   - HP bar states (full, mid, low)
 *   - Entity type colors (npc, location, item, creature, spell, quest, faction)
 *   - Entry type colors (dm, player, system, error, roll, combat, npc, item, location)
 *   - Status semantic colors (success, warning, info backgrounds and text)
 *   - Damage type colors (fire, cold, acid, poison, slashing, radiant, etc.)
 *   - Spell school colors (evocation, transmutation, conjuration, etc.)
 *   - HP bar fill states (healthy, wounded, critical — direct color values)
 *   - Speech bubble colors
 *   - Glow / shadow variants
 */

/* ============================================================
 * PROTANOPIA (Red-blind)
 * ~1% of males. Cannot distinguish red from green.
 * Red appears as a muted brown/olive; bright red is invisible.
 *
 * Remapping strategy:
 *   Red  → Blue (#4a90d9 family) — clearly distinct to protanopes
 *   Green → Orange (#d97a1a family) — retains the "warm success" feel
 *          but shifts to a hue protanopes see as distinctly different
 *          from the blue used for errors/danger.
 *   All other hues are kept; luminance is preserved.
 *
 * CUD palette base: #0072B2 (blue), #E69F00 (orange), #009E73 (bluegreen),
 *                   #CC79A7 (pink), #56B4E9 (sky blue), #F0E442 (yellow)
 * ============================================================ */

html[data-colorblind-mode="protanopia"] {
  /* ---- Accent tokens ---- */
  /* primary (blue) is already safe — keep */
  --color-accent-primary:   #5a9fd8;    /* blue — unchanged, safe */
  --color-accent-secondary: #d97a1a;    /* green → warm orange (CUD #E69F00 adjusted for dark bg) */
  --color-accent-warning:   #f0d040;    /* gold → bright yellow, higher luminance */
  --color-accent-error:     #4a90d9;    /* red → distinct blue (CUD #0072B2) */
  --color-accent-purple:    #cc79a7;    /* purple → pink-purple (CUD safe) */
  --color-accent-orange:    #d97a1a;    /* orange — kept (safe hue) */
  --color-accent-cyan:      #56b4e9;    /* cyan — kept (CUD sky blue) */

  /* ---- HP / vital status ---- */
  --color-hp-full: #d97a1a;            /* green HP → orange (warm, distinct from blue danger) */
  --color-hp-mid:  #f0d040;            /* gold HP — bumped to bright yellow */
  --color-hp-low:  #4a90d9;            /* red danger → blue (maximum urgency hue for protanope) */

  /* ---- Entity type colors ---- */
  --color-entity-npc:      #56b4e9;    /* cyan — CUD sky blue */
  --color-entity-location: #d97a1a;    /* green → orange */
  --color-entity-item:     #f0d040;    /* gold — bright yellow */
  --color-entity-creature: #4a90d9;    /* red → blue */
  --color-entity-spell:    #cc79a7;    /* purple → pink-purple (CUD) */
  --color-entity-quest:    #5a9fd8;    /* blue — unchanged */
  --color-entity-faction:  #d97a1a;    /* orange — safe */
  --color-entity-lore:     #abb2bf;    /* grey — unchanged */

  /* Entity backgrounds */
  --color-entity-creature-bg: rgba(74, 144, 217, 0.15);   /* blue tint */
  --color-entity-spell-bg:    rgba(204, 121, 167, 0.15);  /* pink-purple */
  --color-entity-quest-bg:    rgba(90, 159, 216, 0.15);   /* blue */
  --color-entity-location-glow: 0 0 8px rgba(217, 122, 26, 0.3); /* orange glow */

  /* ---- Narrative entry type colors ---- */
  --color-entry-dm:       #cc79a7;   /* purple → pink-purple */
  --color-entry-player:   #5a9fd8;   /* blue — unchanged */
  --color-entry-system:   #f0d040;   /* gold → yellow */
  --color-entry-error:    #4a90d9;   /* red → blue */
  --color-entry-roll:     #5a9fd8;   /* blue — unchanged */
  --color-entry-combat:   #4a90d9;   /* red → blue */
  --color-entry-npc:      #cc79a7;   /* purple → pink-purple */
  --color-entry-item:     #f0d040;   /* gold → yellow */
  --color-entry-location: #d97a1a;   /* green → orange */

  /* ---- Status / semantic backgrounds ---- */
  --color-success-bg:   rgba(217, 122, 26, 0.15);   /* orange tint for "success" */
  --color-success-text: #d97a1a;
  --color-warning-bg:   rgba(240, 208, 64, 0.15);
  --color-warning-text: #f0d040;
  --color-info-bg:      rgba(90, 159, 216, 0.15);
  --color-info-text:    #5a9fd8;

  /* Semantic aliases */
  --color-accent-green:   #d97a1a;   /* follow secondary remap */
  --color-accent-success: #d97a1a;
  --color-accent-red:     #4a90d9;   /* follow error remap */

  /* ---- Damage type colors ---- */
  --dmg-fire:        #4a90d9;   /* orange-red → blue (fire now reads as "cold-blue" but is distinct) */
  --dmg-cold:        #56b4e9;   /* sky blue — unchanged */
  --dmg-lightning:   #f0d040;   /* gold — unchanged */
  --dmg-acid:        #d97a1a;   /* yellow-green → orange */
  --dmg-poison:      #9370db;   /* purple — unchanged */
  --dmg-necrotic:    #4d5a4d;   /* dark green → dark grey-blue */
  --dmg-radiant:     #fffacd;   /* pale yellow — unchanged */
  --dmg-force:       #cc79a7;   /* orchid → pink-purple */
  --dmg-psychic:     #cc79a7;   /* magenta → pink-purple (distinct from blue) */
  --dmg-thunder:     #5a9fd8;   /* steel blue — unchanged */
  --dmg-bludgeoning: #8b6333;   /* saddle brown — slight hue shift, safe */
  --dmg-piercing:    #c0c0c0;   /* silver — unchanged */
  --dmg-slashing:    #4a90d9;   /* crimson → blue */

  /* ---- Spell school colors ---- */
  --spell-abjuration:   #5a9fd8;   /* steel blue — unchanged */
  --spell-conjuration:  #9370db;   /* purple — unchanged */
  --spell-divination:   #56b4e9;   /* sky blue — unchanged */
  --spell-enchantment:  #cc79a7;   /* pink → pink-purple */
  --spell-evocation:    #4a90d9;   /* orange-red → blue */
  --spell-illusion:     #cc79a7;   /* orchid → pink-purple */
  --spell-necromancy:   #4d5a4d;   /* dark green → dark grey */
  --spell-transmutation:#d97a1a;   /* lime green → orange */

  /* ---- HP bar fill gradient endpoints (used in _hp_bar.css) ---- */
  --hp-color-healthy-start: #d97a1a;
  --hp-color-healthy-end:   #b86a10;
  --hp-color-wounded-start: #f0d040;
  --hp-color-wounded-end:   #c8aa20;
  --hp-color-critical-start:#4a90d9;
  --hp-color-critical-end:  #2e6fbb;

  /* ---- Speech bubbles ---- */
  --bubble-player-bg:     rgba(217, 122, 26, 0.12);   /* orange player bubble */
  --bubble-player-border: rgba(217, 122, 26, 0.35);
  --bubble-dm-bg:         rgba(204, 121, 167, 0.08);  /* pink-purple DM bubble */
  --bubble-dm-border:     rgba(204, 121, 167, 0.4);

  /* ---- Glow shadows (sync with accent) ---- */
  --shadow-glow:         0 0 8px rgba(90, 159, 216, 0.3);
  --shadow-glow-success: 0 0 8px rgba(217, 122, 26, 0.3);
  --shadow-glow-warning: 0 0 8px rgba(240, 208, 64, 0.3);
  --shadow-glow-error:   0 0 8px rgba(74, 144, 217, 0.3);
}


/**
 * Colorblind Modes — Deuteranopia and Tritanopia
 * =================================================
 * Deuteranopia (green-blind) and tritanopia (blue-blind) token remapping.
 */

/* ============================================================
 * DEUTERANOPIA (Green-blind)
 * ~1% of males. Cannot distinguish red from green.
 * Similar confusion range to protanopia but shifted slightly.
 * Green is invisible; red appears as a brownish yellow.
 *
 * Remapping strategy: identical safe-color targets to protanopia
 * because the confusion pair (red/green) is the same.
 * Slight luminance differences vs. protanopia for the green
 * substitutes to help the subset of dichromats who have atypical
 * spectral sensitivity curves.
 * ============================================================ */

html[data-colorblind-mode="deuteranopia"] {
  /* ---- Accent tokens ---- */
  --color-accent-primary:   #5a9fd8;    /* blue — unchanged */
  --color-accent-secondary: #e08a00;    /* green → amber-orange (slightly warmer than protanopia) */
  --color-accent-warning:   #f5db50;    /* gold → warm yellow */
  --color-accent-error:     #3a7fc1;    /* red → medium blue */
  --color-accent-purple:    #cc79a7;    /* purple → pink-purple */
  --color-accent-orange:    #e08a00;    /* orange — kept / unified with secondary */
  --color-accent-cyan:      #56b4e9;    /* cyan — CUD sky blue */

  /* ---- HP / vital status ---- */
  --color-hp-full: #e08a00;   /* green → amber */
  --color-hp-mid:  #f5db50;   /* gold → warm yellow */
  --color-hp-low:  #3a7fc1;   /* red → blue */

  /* ---- Entity type colors ---- */
  --color-entity-npc:      #56b4e9;
  --color-entity-location: #e08a00;    /* green → amber */
  --color-entity-item:     #f5db50;    /* gold → warm yellow */
  --color-entity-creature: #3a7fc1;    /* red → blue */
  --color-entity-spell:    #cc79a7;    /* purple → pink-purple */
  --color-entity-quest:    #5a9fd8;
  --color-entity-faction:  #e08a00;
  --color-entity-lore:     #abb2bf;

  /* Entity backgrounds */
  --color-entity-creature-bg: rgba(58, 127, 193, 0.15);
  --color-entity-spell-bg:    rgba(204, 121, 167, 0.15);
  --color-entity-quest-bg:    rgba(90, 159, 216, 0.15);
  --color-entity-location-glow: 0 0 8px rgba(224, 138, 0, 0.3);

  /* ---- Narrative entry type colors ---- */
  --color-entry-dm:       #cc79a7;
  --color-entry-player:   #5a9fd8;
  --color-entry-system:   #f5db50;
  --color-entry-error:    #3a7fc1;
  --color-entry-roll:     #5a9fd8;
  --color-entry-combat:   #3a7fc1;
  --color-entry-npc:      #cc79a7;
  --color-entry-item:     #f5db50;
  --color-entry-location: #e08a00;

  /* ---- Status / semantic backgrounds ---- */
  --color-success-bg:   rgba(224, 138, 0, 0.15);
  --color-success-text: #e08a00;
  --color-warning-bg:   rgba(245, 219, 80, 0.15);
  --color-warning-text: #f5db50;
  --color-info-bg:      rgba(90, 159, 216, 0.15);
  --color-info-text:    #5a9fd8;

  --color-accent-green:   #e08a00;
  --color-accent-success: #e08a00;
  --color-accent-red:     #3a7fc1;

  /* ---- Damage type colors ---- */
  --dmg-fire:        #3a7fc1;
  --dmg-cold:        #56b4e9;
  --dmg-lightning:   #f5db50;
  --dmg-acid:        #e08a00;
  --dmg-poison:      #9370db;
  --dmg-necrotic:    #4a5050;
  --dmg-radiant:     #fffacd;
  --dmg-force:       #cc79a7;
  --dmg-psychic:     #cc79a7;
  --dmg-thunder:     #5a9fd8;
  --dmg-bludgeoning: #8b6333;
  --dmg-piercing:    #c0c0c0;
  --dmg-slashing:    #3a7fc1;

  /* ---- Spell school colors ---- */
  --spell-abjuration:   #5a9fd8;
  --spell-conjuration:  #9370db;
  --spell-divination:   #56b4e9;
  --spell-enchantment:  #cc79a7;
  --spell-evocation:    #3a7fc1;
  --spell-illusion:     #cc79a7;
  --spell-necromancy:   #4a5050;
  --spell-transmutation:#e08a00;

  /* ---- HP bar fill gradient endpoints ---- */
  --hp-color-healthy-start: #e08a00;
  --hp-color-healthy-end:   #c07200;
  --hp-color-wounded-start: #f5db50;
  --hp-color-wounded-end:   #d0b830;
  --hp-color-critical-start:#3a7fc1;
  --hp-color-critical-end:  #2260a0;

  /* ---- Speech bubbles ---- */
  --bubble-player-bg:     rgba(224, 138, 0, 0.12);
  --bubble-player-border: rgba(224, 138, 0, 0.35);
  --bubble-dm-bg:         rgba(204, 121, 167, 0.08);
  --bubble-dm-border:     rgba(204, 121, 167, 0.4);

  /* ---- Glow shadows ---- */
  --shadow-glow:         0 0 8px rgba(90, 159, 216, 0.3);
  --shadow-glow-success: 0 0 8px rgba(224, 138, 0, 0.3);
  --shadow-glow-warning: 0 0 8px rgba(245, 219, 80, 0.3);
  --shadow-glow-error:   0 0 8px rgba(58, 127, 193, 0.3);
}


/* ============================================================
 * TRITANOPIA (Blue-blind)
 * ~0.001% prevalence. Cannot distinguish blue from yellow/green.
 * Blue appears as green; yellow appears as pink/red.
 *
 * Remapping strategy:
 *   Blue  → Red (#d94040 family) — clearly distinct to tritanopes
 *   Cyan  → Red-adjacent (#d94040) or warm pink
 *   Yellow/Gold → Cyan (#00b4c8) — safe cool hue
 *   Green stays green (tritanopes see green well)
 *   Red stays red (safe for tritanopes)
 *   Orange stays orange (safe)
 * ============================================================ */

html[data-colorblind-mode="tritanopia"] {
  /* ---- Accent tokens ---- */
  --color-accent-primary:   #d94040;    /* blue → red (tritanopes see red clearly) */
  --color-accent-secondary: #8ab56e;    /* green — unchanged (safe) */
  --color-accent-warning:   #00b4c8;    /* gold/yellow → cyan (safe for tritanopes) */
  --color-accent-error:     #d94040;    /* red — unchanged and clearly visible */
  --color-accent-purple:    #c04080;    /* purple → rose/pink (not blue-dependent) */
  --color-accent-orange:    #c08a58;    /* orange — unchanged (safe) */
  --color-accent-cyan:      #d94040;    /* cyan (blue family) → red */

  /* ---- HP / vital status ---- */
  --color-hp-full: #8ab56e;   /* green — unchanged */
  --color-hp-mid:  #00b4c8;   /* gold → cyan */
  --color-hp-low:  #d94040;   /* red — unchanged (tritanopes see red fine) */

  /* ---- Entity type colors ---- */
  --color-entity-npc:      #d94040;    /* cyan → red */
  --color-entity-location: #8ab56e;    /* green — unchanged */
  --color-entity-item:     #00b4c8;    /* gold → cyan */
  --color-entity-creature: #d94040;    /* red — unchanged */
  --color-entity-spell:    #c04080;    /* purple → rose */
  --color-entity-quest:    #d94040;    /* blue → red */
  --color-entity-faction:  #c08a58;    /* orange — unchanged */
  --color-entity-lore:     #abb2bf;    /* grey — unchanged */

  /* Entity backgrounds */
  --color-entity-creature-bg: rgba(217, 64, 64, 0.15);
  --color-entity-spell-bg:    rgba(192, 64, 128, 0.15);
  --color-entity-quest-bg:    rgba(217, 64, 64, 0.15);
  --color-entity-location-glow: 0 0 8px rgba(138, 181, 110, 0.3);

  /* ---- Narrative entry type colors ---- */
  --color-entry-dm:       #c04080;    /* purple → rose */
  --color-entry-player:   #d94040;    /* blue → red */
  --color-entry-system:   #00b4c8;    /* gold → cyan */
  --color-entry-error:    #d94040;    /* red — unchanged */
  --color-entry-roll:     #d94040;    /* blue → red */
  --color-entry-combat:   #d94040;    /* red — unchanged */
  --color-entry-npc:      #c04080;    /* purple → rose */
  --color-entry-item:     #00b4c8;    /* gold → cyan */
  --color-entry-location: #8ab56e;    /* green — unchanged */

  /* ---- Status / semantic backgrounds ---- */
  --color-success-bg:   rgba(138, 181, 110, 0.15);   /* green — unchanged */
  --color-success-text: #8ab56e;
  --color-warning-bg:   rgba(0, 180, 200, 0.15);     /* cyan warning */
  --color-warning-text: #00b4c8;
  --color-info-bg:      rgba(217, 64, 64, 0.15);     /* red info */
  --color-info-text:    #d94040;

  --color-accent-green:   #8ab56e;   /* unchanged */
  --color-accent-success: #8ab56e;
  --color-accent-red:     #d94040;   /* unchanged */

  /* ---- Damage type colors ---- */
  --dmg-fire:        #d94040;    /* orange-red — kept (safe) */
  --dmg-cold:        #d94040;    /* sky blue → red (blue family remapped) */
  --dmg-lightning:   #00b4c8;    /* gold → cyan */
  --dmg-acid:        #8ab56e;    /* yellow-green → green (safe) */
  --dmg-poison:      #c04080;    /* purple → rose */
  --dmg-necrotic:    #2f4f2f;    /* dark green — unchanged */
  --dmg-radiant:     #d0d0c0;    /* lemon chiffon → near-white (yellow → pale grey) */
  --dmg-force:       #c04080;    /* orchid → rose */
  --dmg-psychic:     #c04080;    /* magenta → rose-pink */
  --dmg-thunder:     #d94040;    /* steel blue → red */
  --dmg-bludgeoning: #8b4513;    /* saddle brown — unchanged */
  --dmg-piercing:    #c0c0c0;    /* silver — unchanged */
  --dmg-slashing:    #d94040;    /* crimson — unchanged (safe) */

  /* ---- Spell school colors ---- */
  --spell-abjuration:   #d94040;    /* steel blue → red */
  --spell-conjuration:  #c04080;    /* purple → rose */
  --spell-divination:   #d94040;    /* sky blue → red */
  --spell-enchantment:  #c04080;    /* light pink → rose */
  --spell-evocation:    #d94040;    /* orange-red — unchanged */
  --spell-illusion:     #c04080;    /* orchid → rose */
  --spell-necromancy:   #2f4f2f;    /* dark green — unchanged */
  --spell-transmutation:#8ab56e;    /* lime green → green (safe) */

  /* ---- HP bar fill gradient endpoints ---- */
  --hp-color-healthy-start: #8ab56e;
  --hp-color-healthy-end:   #6a9850;
  --hp-color-wounded-start: #00b4c8;
  --hp-color-wounded-end:   #008fa0;
  --hp-color-critical-start:#d94040;
  --hp-color-critical-end:  #b82020;

  /* ---- Speech bubbles ---- */
  --bubble-player-bg:     rgba(138, 181, 110, 0.12);   /* green player */
  --bubble-player-border: rgba(138, 181, 110, 0.35);
  --bubble-dm-bg:         rgba(192, 64, 128, 0.08);    /* rose DM */
  --bubble-dm-border:     rgba(192, 64, 128, 0.4);

  /* ---- Glow shadows ---- */
  --shadow-glow:         0 0 8px rgba(217, 64, 64, 0.3);
  --shadow-glow-success: 0 0 8px rgba(138, 181, 110, 0.3);
  --shadow-glow-warning: 0 0 8px rgba(0, 180, 200, 0.3);
  --shadow-glow-error:   0 0 8px rgba(217, 64, 64, 0.3);
}


/**
 * Colorblind Modes — HP Bar Overrides
 * =====================================
 * HP bar fill color overrides for all colorblind modes.
 */

/* ============================================================
 * HP BAR STATE OVERRIDES — per-mode
 * _hp_bar.css uses hard-coded gradient values on state classes
 * (.cs-hp-bar__fill--healthy, --wounded, --critical).
 * We override those with the remapped token values defined above.
 * ============================================================ */

/* Protanopia */
html[data-colorblind-mode="protanopia"] .cs-hp-bar__fill--healthy,
html[data-colorblind-mode="protanopia"] .cs-hp-fill--healthy {
  --hp-color-start: #d97a1a;
  --hp-color-end:   #b86a10;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="protanopia"] .cs-hp-bar__fill--wounded,
html[data-colorblind-mode="protanopia"] .cs-hp-fill--wounded {
  --hp-color-start: #f0d040;
  --hp-color-end:   #c8aa20;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="protanopia"] .cs-hp-bar__fill--critical,
html[data-colorblind-mode="protanopia"] .cs-hp-fill--critical,
html[data-colorblind-mode="protanopia"] .cs-hp-bar__fill--low,
html[data-colorblind-mode="protanopia"] .cs-hp-fill--low {
  --hp-color-start: #4a90d9;
  --hp-color-end:   #2e6fbb;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="protanopia"] .cs-hp-bar__fill--medium,
html[data-colorblind-mode="protanopia"] .cs-hp-fill--medium {
  --hp-color-start: #f0d040;
  --hp-color-end:   #c8aa20;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

/* Deuteranopia */
html[data-colorblind-mode="deuteranopia"] .cs-hp-bar__fill--healthy,
html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--healthy {
  --hp-color-start: #e08a00;
  --hp-color-end:   #c07200;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="deuteranopia"] .cs-hp-bar__fill--wounded,
html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--wounded {
  --hp-color-start: #f5db50;
  --hp-color-end:   #d0b830;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="deuteranopia"] .cs-hp-bar__fill--critical,
html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--critical,
html[data-colorblind-mode="deuteranopia"] .cs-hp-bar__fill--low,
html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--low {
  --hp-color-start: #3a7fc1;
  --hp-color-end:   #2260a0;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="deuteranopia"] .cs-hp-bar__fill--medium,
html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--medium {
  --hp-color-start: #f5db50;
  --hp-color-end:   #d0b830;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

/* Tritanopia */
html[data-colorblind-mode="tritanopia"] .cs-hp-bar__fill--healthy,
html[data-colorblind-mode="tritanopia"] .cs-hp-fill--healthy {
  --hp-color-start: #8ab56e;
  --hp-color-end:   #6a9850;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="tritanopia"] .cs-hp-bar__fill--wounded,
html[data-colorblind-mode="tritanopia"] .cs-hp-fill--wounded {
  --hp-color-start: #00b4c8;
  --hp-color-end:   #008fa0;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="tritanopia"] .cs-hp-bar__fill--critical,
html[data-colorblind-mode="tritanopia"] .cs-hp-fill--critical,
html[data-colorblind-mode="tritanopia"] .cs-hp-bar__fill--low,
html[data-colorblind-mode="tritanopia"] .cs-hp-fill--low {
  --hp-color-start: #d94040;
  --hp-color-end:   #b82020;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}

html[data-colorblind-mode="tritanopia"] .cs-hp-bar__fill--medium,
html[data-colorblind-mode="tritanopia"] .cs-hp-fill--medium {
  --hp-color-start: #00b4c8;
  --hp-color-end:   #008fa0;
  background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end));
}


/* ============================================================
 * @media (prefers-contrast: more) COMPOSITION
 * When the OS requests high contrast AND a colorblind mode is active,
 * push the remapped colours to maximum luminance while keeping the
 * same safe-hue substitutions. This avoids clobbering the colorblind
 * remaps with the generic high-contrast white/yellow palette.
 * ============================================================ */

@media (prefers-contrast: more) {
  html[data-colorblind-mode="protanopia"] {
    --color-accent-primary:   #7cc0ff;   /* bright blue */
    --color-accent-secondary: #ffaa40;   /* bright orange */
    --color-accent-warning:   #ffed70;   /* bright yellow */
    --color-accent-error:     #7cc0ff;   /* bright blue for danger */
    --color-hp-full: #ffaa40;
    --color-hp-mid:  #ffed70;
    --color-hp-low:  #7cc0ff;
    --color-entity-creature: #7cc0ff;
    --color-entity-location: #ffaa40;
  }

  html[data-colorblind-mode="deuteranopia"] {
    --color-accent-primary:   #7cc0ff;
    --color-accent-secondary: #ffbb50;
    --color-accent-warning:   #ffee80;
    --color-accent-error:     #7cc0ff;
    --color-hp-full: #ffbb50;
    --color-hp-mid:  #ffee80;
    --color-hp-low:  #7cc0ff;
    --color-entity-creature: #7cc0ff;
    --color-entity-location: #ffbb50;
  }

  html[data-colorblind-mode="tritanopia"] {
    --color-accent-primary:   #ff6060;   /* bright red */
    --color-accent-secondary: #a8d890;   /* bright green */
    --color-accent-warning:   #40d8e8;   /* bright cyan */
    --color-accent-error:     #ff6060;   /* bright red */
    --color-hp-full: #a8d890;
    --color-hp-mid:  #40d8e8;
    --color-hp-low:  #ff6060;
    --color-entity-creature: #ff6060;
    --color-entity-location: #a8d890;
  }
}
/**
 * Colorblind Display Modes — Import Hub
 * ========================================
 * Accessible color remapping for protanopia, deuteranopia, and tritanopia.
 *
 * Decomposed into focused files under colorblind_modes/ for maintainability.



 */
/**
 * Mobile Enhancements — Viewport, Input, Filters, Chat Bar, Scroll, Tooltips, Modals & Character Sheet
 */

/**
 * Mobile Enhancements
 * ===================
 * Additional responsive optimizations for mobile devices.
 * Complements _mobile_accessibility_fixes.css with UX improvements.
 */

/* ========================================
 * VIEWPORT & SCALING
 * ======================================== */

@media (max-width: 768px) {
  /* Prevent horizontal overflow on mobile */
  html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent iOS text auto-resize without inflating root font-size.
     The 16px input override (below) prevents iOS zoom on focus. */
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ========================================
 * NARRATIVE INPUT AREA
 * ======================================== */

@media (max-width: 768px) {
  /* Input area on mobile — compact but touch-friendly */
  .narrative-input {
    min-height: 44px;
    font-size: 16px; /* Prevent iOS zoom */
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
  }

  /* Touch-friendly send button */
  .narrative-input-container .btn,
  .narrative-send-btn,
  button[type="submit"] {
    min-width: 60px;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-md);
  }

  /* Input container spacing — tighter on mobile */
  .narrative-input-container,
  .terminal-input-area {
    padding: var(--space-1) var(--space-2);
    gap: var(--space-1);
  }

  /* Suggestions need more touch space */
  .suggestion-btn,
  .quick-action-btn {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-md);
    border-radius: var(--radius-md);
  }
}

/* ========================================
 * COMPACT FILTER BAR ON SMALL PHONES
 * Reduces filter bar height while keeping channel tabs accessible.
 * ======================================== */

@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .narrative-filters {
    padding: 2px 4px;
    gap: 2px;
    min-height: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .mobile-bottom-sheet-mode .narrative-filters::-webkit-scrollbar {
    display: none;
  }

  .mobile-bottom-sheet-mode .narrative-filters .nf-btn {
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    min-height: 28px;
    /* Keep 44px touch target via transparent hit area */
    position: relative;
  }

  .mobile-bottom-sheet-mode .narrative-filters .nf-btn::before {
    content: '';
    position: absolute;
    inset: -8px -4px;
    /* Expand touch target to 44px while visual stays compact */
  }
}

/* ========================================
 * CHAT-STYLE INPUT BAR (Mobile Only)
 * Transforms the terminal input into a modern
 * chat-app input bar with rounded corners and
 * integrated send button on mobile devices.
 * ======================================== */

@media (max-width: 768px) {
  /* Chat-style input container — rounded pill shape */
  .input-area {
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    border-top: none;
    background: var(--bg-secondary);
  }

  .input-line {
    background: var(--bg-primary, #1e1e2e);
    border: 1px solid var(--color-border-subtle, #333);
    border-radius: var(--radius-full, 9999px);
    padding: var(--space-1) var(--space-2);
    gap: var(--space-2);
    transition: border-color var(--transition-fast, 100ms);
  }

  .input-line:focus-within {
    border-color: var(--accent-primary, #61afef);
  }

  /* Hide the terminal prompt on mobile for chat feel */
  .input-prompt {
    display: none;
  }

  /* Input field fills available space */
  .input-field {
    font-size: 16px; /* Prevent iOS zoom */
    min-height: 44px; /* WCAG 2.5.5 touch target (was 40px, bumped to match mobile_accessibility_fixes) */
    padding: var(--space-1) var(--space-2);
  }

  /* Show the mobile send button */
  .mobile-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: var(--accent-primary, #61afef);
    color: var(--bg-primary, #1e1e2e);
    border: none;
    font-size: var(--font-size-lg, 18px);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast, 100ms),
                transform var(--transition-fast, 100ms);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-send-btn:active {
    background: var(--accent-secondary, #56b6c2);
    transform: scale(0.92);
  }
}

/* Hide mobile send button on desktop */
.mobile-send-btn {
  display: none;
}

/* ========================================
 * SCROLL CONTAINERS
 * ======================================== */

@media (max-width: 768px) {
  /* Smooth momentum scrolling on iOS */
  .narrative-box,
  .split-panel__content,
  .panel-content,
  .modal-content {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Scroll snap for panels on very small screens */
  .mobile-mode .split-layout-container {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .mobile-mode .split-child.mobile-active {
    scroll-snap-align: center;
  }
}

/* ========================================
 * FILTER BUTTONS
 * ======================================== */

@media (max-width: 768px) {
  /* Horizontal scroll for filter buttons */
  .narrative-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .narrative-filters::-webkit-scrollbar {
    display: none;
  }

  /* Larger touch targets for filter buttons */
  .nf-btn {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ========================================
 * TOOLTIPS ON MOBILE
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Make tooltips tap-dismissable */
  .help-tooltip,
  .unified-tooltip,
  [role="tooltip"] {
    max-width: calc(100vw - 32px);
  }

  /* Position tooltips in center on mobile */
  .help-tooltip {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ========================================
 * MODALS ON MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Full-screen modals on mobile */
  .detail-modal,
  .unified-modal,
  .modal-content {
    width: 100%;
    max-width: 100%;
    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    margin: 0;
  }

  /* Sticky modal headers */
  .modal-header,
  .detail-modal__header,
  .unified-modal__header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg-secondary);
  }

  /* Larger close buttons */
  .modal-close,
  .detail-modal__close,
  .unified-modal__close {
    min-width: 48px;
    min-height: 48px;
    font-size: var(--font-size-3xl);
  }
}

/* ========================================
 * CHARACTER SHEET MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack character stats vertically */
  .cs-stats-grid,
  .character-abilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  /* Make stat blocks more tappable */
  .cs-stat-box,
  .ability-score-box {
    min-height: 64px;
    padding: var(--space-3);
  }

  /* Larger inventory items */
  .inventory__item,
  .equipment-slot {
    min-height: 52px;
    padding: var(--space-3);
  }
}

/* ========================================
 * COMBAT PANEL MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack combatant cards */
  .combat-tracker__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Bigger initiative badges */
  .initiative-badge {
    min-width: 40px;
    min-height: 40px;
    font-size: var(--font-size-lg);
  }
}

/**
 * Mobile Enhancements — Combat, Quest Log, Dice, Spellbook, Dropdowns & Input Visibility
 */

/* ========================================
 * COMBAT ACTION DASHBOARD MOBILE - Phase 3 P2-4
 * ======================================== */

@media (max-width: 768px) {
  /* Fixed bottom positioning for combat dashboard */
  .combat-action-dashboard {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 60vh;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3);
    z-index: var(--z-sticky);
  }

  /* Ensure footer has safe area padding */
  .combat-action-dashboard__footer {
    padding-bottom: calc(var(--panel-padding) + env(safe-area-inset-bottom, 16px));
  }

  /* Increase combat action button touch targets to 64px */
  .combat-action-btn {
    min-height: 64px;
    padding: var(--space-4);
    font-size: var(--font-size-md);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Larger end turn button for critical action */
  .end-turn-btn {
    min-height: 72px;
    font-size: var(--font-size-lg);
    padding: var(--space-5);
    touch-action: manipulation;
  }

  /* Make action slots more tappable */
  .action-slot {
    min-height: 64px;
    padding: var(--space-4);
  }

  /* Ensure adequate spacing for touch targets */
  .action-list {
    gap: var(--space-3);
  }

  /* Action icons larger for easier recognition */
  .action-icon {
    font-size: var(--font-size-2xl);
  }

  /* Swipe gesture hints for horizontal action scrolling */
  .action-list {
    position: relative;
  }

  /* Only show swipe hints when there's overflow */
  .action-list.has-overflow::before,
  .action-list.has-overflow::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-2xl);
    color: var(--color-text-muted);
    opacity: 0.3;
    pointer-events: none;
    z-index: var(--z-raised);
    animation: swipeHint 2s ease-in-out infinite;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
  }

  .action-list.has-overflow::before {
    content: '←';
    left: var(--space-2);
  }

  .action-list.has-overflow::after {
    content: '→';
    right: var(--space-2);
  }

  @keyframes swipeHint {
    0%, 100% {
      opacity: 0.2;
      transform: translateY(-50%) translateX(0);
    }
    50% {
      opacity: 0.4;
      transform: translateY(-50%) translateX(4px);
    }
  }

  /* Hide swipe hints when scrolling */
  .action-list.scrolling::before,
  .action-list.scrolling::after {
    display: none;
  }

  /* Enable horizontal scrolling for actions if needed */
  .action-list {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .action-list::-webkit-scrollbar {
    display: none;
  }

  /* Prevent double-tap zoom on combat buttons */
  .combat-action-btn,
  .end-turn-btn,
  .action-slot {
    touch-action: manipulation;
  }

  /* Increase spell gem touch targets */
  .spell-gem {
    width: 20px;
    height: 20px;
  }

  /* Better touch feedback for combat actions */
  .combat-action-btn:active {
    transform: scale(0.97);
    background: var(--color-bg-hover, rgba(255, 255, 255, 0.1));
  }

  .end-turn-btn:active {
    transform: scale(0.98);
  }
}

/* ========================================
 * QUEST LOG MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Stack quest cards */
  .quest-log__quests {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Larger objective checkboxes */
  .objective-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--radius-sm);
  }

  /* Better objective spacing */
  .quest-objective {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================
 * DICE ROLLING MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Larger dice buttons */
  .roll-menu__dice-btn,
  .dice-btn {
    min-width: 56px;
    min-height: 56px;
    font-size: var(--font-size-xl);
    border-radius: var(--radius-lg);
  }

  /* Grid layout for dice buttons */
  .roll-menu__dice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
  }

  /* Larger roll results */
  .roll-result {
    font-size: var(--font-size-3xl);
    padding: var(--space-4);
  }
}

/* ========================================
 * SPELLBOOK MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Larger spell slot indicators */
  .spell-slot {
    min-width: 44px;
    min-height: 44px;
  }

  /* Better spell card layout */
  .spell-card {
    padding: var(--space-3);
  }

  /* Larger cast buttons */
  .spell-cast-btn {
    min-height: 48px;
    font-size: var(--font-size-md);
  }
}

/* ========================================
 * DROPDOWN MENUS MOBILE
 * ======================================== */

@media (max-width: 768px) {
  /* Full-width dropdowns on mobile */
  .dropdown-menu,
  .panel-dropdown__menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 60vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
  }

  /* Larger dropdown items */
  .dropdown-item,
  .panel-dropdown__item {
    min-height: 52px;
    padding: var(--space-4);
    font-size: var(--font-size-lg);
  }

  /* Add backdrop */
  .dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay-medium-plus);
    z-index: calc(var(--z-dropdown) - 1);
  }
}

/* Status bar mobile rules extracted to organisms/status_bar/_mobile.css (#5124) */

/* ========================================
 * MOBILE INPUT BAR VISIBILITY
 * Ensure the input bar is always visible at the
 * bottom of the screen on mobile devices.
 *
 * Root cause: .narrative-main uses a flex column with
 * overflow:hidden. Intermediate elements between
 * .narrative-output and .input-area (ambient gutter,
 * world ticker, quick actions, TTS player, etc.) can
 * consume enough vertical space to push the input
 * below the clipped boundary. On phones this makes
 * the input bar invisible.
 *
 * Fix (#5119): on mobile, pin .input-area with position:fixed so it is
 * visible regardless of which panel is active. The narrative content needs
 * padding-bottom equal to the input bar height so it scrolls fully above
 * the fixed bar (see organisms/narrative/_input.css and _mobile.css).
 * ======================================== */

@media (max-width: 768px) {
  /* Make narrative-main the scroll container on mobile so narrative content
     is independently scrollable. Desktop keeps overflow:hidden. */
  .narrative-main {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Fixed input bar — pinned to the viewport bottom, panel-independent (#5119).
     Authoritative positioning rule lives in organisms/narrative/_input.css
     @media (max-width:767px). This block sets background/z-index fallbacks
     that apply before the narrative panel stylesheet loads. */
  .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sheet); /* 300 — above panels, dropdowns, overlay */
    background: var(--color-bg-primary);
    /* Ensure the input clears the home indicator / gesture bar */
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
}

/* ========================================
 * MOBILE INTERMEDIATE ELEMENT COMPRESSION (#1336)
 * Prevent intermediate elements between narrative-output
 * and input-area from consuming excessive vertical space.
 * These elements (ambient gutter, world ticker, TTS player,
 * sticky notes) should shrink to accommodate the narrative.
 * ======================================== */

@media (max-width: 768px) {
  /* Ambient gutter: compact on mobile, allow shrinking */
  .ambient-gutter {
    flex-shrink: 1;
    max-height: 40px;
    overflow: hidden;
  }

  /* World ticker: single line on mobile */
  .world-ticker {
    flex-shrink: 1;
    max-height: 28px;
    overflow: hidden;
  }

  /* TTS audio player: compact on mobile */
  .tts-audio-player {
    flex-shrink: 1;
    max-height: 44px;
    overflow: hidden;
  }

  /* Sticky notes layer: hide on mobile to save space */
  .sticky-notes-layer {
    max-height: 0;
    overflow: hidden;
  }

  /* Scroll-to-latest button: fixed position so it doesn't consume layout space */
  .scroll-to-latest {
    position: fixed;
    bottom: 80px;
    right: 12px;
    z-index: var(--z-panel);
  }

  /* Ensure narrative output gets minimum height so it's never fully squished.
     min-height: 30vh guarantees at least 30% of the viewport for narrative
     content even when intermediate elements are present. */
  .narrative-output {
    min-height: 30vh;
  }
}

/**
 * Mobile Enhancements — Compression, Keyboard State, Small Screens & Touch Optimizations
 */

/* ========================================
 * MOBILE KEYBOARD OPEN STATE
 * When the virtual keyboard is open, maximize
 * content space by hiding non-essential chrome.
 * Triggered by MobileKeyboardManager via
 * .mobile-keyboard-open class.
 * ======================================== */

@media (max-width: 768px) {
  /* Hide status bar when keyboard is open */
  .mobile-keyboard-open .status-bar {
    display: none;
  }

  /* Collapse contextual chips and quick actions to compact strip */
  .mobile-keyboard-open .contextual-chips {
    max-height: 36px;
    overflow-y: hidden;
  }

  .mobile-keyboard-open .quick-actions-container {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  /* Hide hamburger menu trigger */
  .mobile-keyboard-open .hamburger-menu__trigger {
    display: none;
  }

  /* Ensure input stays above keyboard. Fixed position already pins it to the
     viewport; MobileKeyboardManager sets --mobile-keyboard-offset on the
     element so it rises above the virtual keyboard (#5119). Reinforce
     z-index and background. */
  .mobile-keyboard-open .input-area {
    z-index: var(--z-sheet);
    background: var(--color-bg-primary);
  }
}

/* ========================================
 * VERY SMALL SCREENS (< 375px)
 * ======================================== */

@media (max-width: 375px) {
  /* Even more compact layouts */
  .cs-stats-grid,
  .character-abilities {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Smaller but readable text */
  .narrative-box,
  .split-panel__content {
    font-size: var(--font-size-md);
    line-height: 1.6;
  }
}

/* ========================================
 * PORTRAIT PHONE OPTIMIZATION
 * ======================================== */

@media (max-width: 480px) and (orientation: portrait) {
  /* Maximize vertical space */
  .mobile-panel-switcher {
    padding: 4px 8px;
  }

  .split-panel__header {
    padding: 2px var(--space-2);
    min-height: 28px;
  }

  /* More room for content */
  .narrative-panel-content {
    height: calc(100% - 28px); /* Account for compact status bar */
  }
}

/* ========================================
 * LANDSCAPE PHONE OPTIMIZATION
 * ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
  /* Hide non-essential chrome */
  .split-panel__header {
    display: none;
  }

  .mobile-panel-switcher {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-default);
    z-index: var(--z-fixed);
  }

  /* Adjust content for bottom tabs */
  .split-layout-container {
    padding-bottom: 44px;
  }
}

/* ========================================
 * TOUCH OPTIMIZATIONS
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Disable hover effects that feel weird on touch */
  .btn:hover,
  .mobile-panel-switcher__btn:hover {
    /* Keep same as default state */
  }

  /* Add active states instead */
  .btn:active,
  button:active,
  [role="button"]:active {
    transform: scale(0.96);
    opacity: 0.85;
    transition: transform 0.1s ease, opacity 0.1s ease;
  }

  /* Prevent text selection on interactive elements */
  button,
  .btn,
  .clickable,
  [role="button"] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  /* Remove tap highlight color */
  button,
  a,
  .btn,
  input,
  select,
  textarea {
    -webkit-tap-highlight-color: transparent;
  }

  /* Touch ripple effect for interactive elements */
  .touch-interactive {
    position: relative;
    overflow: hidden;
  }

  .touch-interactive::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    pointer-events: none;
  }

  .touch-interactive:active::after {
    width: 250%;
    height: 250%;
    opacity: 1;
    transition: none;
  }

  /* Improved touch feedback for list items */
  .cs-skill-item:active,
  .cs-ability-item:active,
  .cs-save-item:active,
  .cs-inventory-item:active,
  .narrative-entry:active,
  .clickable:active {
    background: var(--color-bg-hover, rgba(255, 255, 255, 0.1));
    transform: scale(0.99);
  }

  /* Larger touch areas for small buttons */
  .split-panel__action {
    min-width: 44px;
    min-height: 44px;
  }

  /* Better touch feedback on panel tabs */
  .mobile-panel-switcher__btn:active {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(0.95);
  }
}

/* ========================================
 * SWIPE GESTURE SUPPORT
 * ======================================== */

@media (max-width: 768px) {
  /* Enable horizontal swipe on panel container */
  .swipe-container {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .swipe-container::-webkit-scrollbar {
    display: none;
  }

  .swipe-container > * {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 100%;
  }

  /* Swipe indicator dots */
  .swipe-indicators {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .swipe-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
  }

  .swipe-indicator.active {
    background: var(--color-accent-primary);
    transform: scale(1.25);
  }

  /* Pull-to-refresh styling */
  .pull-to-refresh {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-default);
    transition: top 0.3s ease;
  }

  .pull-to-refresh.pulling,
  .pull-to-refresh.refreshing {
    top: 10px;
  }

  .pull-to-refresh .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-text-muted);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

/* ========================================
 * EDGE SWIPE NAVIGATION
 * ======================================== */

@media (max-width: 768px) {
  /* Edge swipe zone indicator */
  .edge-swipe-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: var(--z-sticky);
    pointer-events: none;
  }

  .edge-swipe-zone--left {
    left: 0;
  }

  .edge-swipe-zone--right {
    right: 0;
  }

  .edge-swipe-zone.active {
    background: linear-gradient(
      to right,
      rgba(97, 175, 239, 0.2),
      transparent
    );
  }

  .edge-swipe-zone--right.active {
    background: linear-gradient(
      to left,
      rgba(97, 175, 239, 0.2),
      transparent
    );
  }
}

/* ========================================
 * MOBILE CHAT BUBBLES
 * DM messages left-aligned, player messages right-aligned.
 * Only applies at mobile breakpoint — desktop unchanged.
 * ======================================== */

@media (max-width: 768px) {
  /* Enable flex column on the narrative container so align-self works */
  .narrative-output {
    display: flex;
    flex-direction: column;
  }

  /* Shared bubble base — override default narrative-entry border-left */
  .narrative-entry.dm,
  .narrative-entry.player {
    border-left: none;
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    max-width: 85%;
    position: relative;
  }

  /* DM bubble — left-aligned with accent background */
  .narrative-entry.dm {
    align-self: flex-start;
    margin-right: auto;
    background: rgba(139, 69, 19, 0.12);
    border: 1px solid rgba(210, 180, 140, 0.2);
    border-bottom-left-radius: var(--radius-sm, 4px);
  }

  .narrative-entry.dm:hover {
    background: rgba(139, 69, 19, 0.18);
  }

  /* Remove the divider pseudo-element between consecutive DM entries */
  .narrative-entry.dm + .narrative-entry.dm::after {
    display: none;
  }

  /* Player bubble — right-aligned with distinct background */
  .narrative-entry.player {
    align-self: flex-end;
    margin-left: auto;
    background: rgba(65, 105, 225, 0.15);
    border: 1px solid rgba(65, 105, 225, 0.25);
    border-bottom-right-radius: var(--radius-sm, 4px);
  }

  /* Hide the terminal '>' prompt on mobile — bubbles are self-evident */
  .narrative-entry.player::before {
    display: none;
  }

  /* Reset padding-left that desktop uses for the '>' prompt */
  .narrative-entry.player {
    padding-left: var(--space-4, 1rem);
  }

  /* Queued player messages inherit bubble style */
  .narrative-entry.player.queued-message {
    border-style: dashed;
  }
}
/**
 * Mobile Enhancements — Import Hub
 * ==================================
 * Additional responsive optimizations for mobile devices.
 *
 * Decomposed into focused files under mobile_enhancements/ for maintainability.



 */
/*
 * Mobile Overflow Fixes (#2086-#2094)
 * ====================================
 * Targeted fixes for CSS overflow issues on 390px mobile viewports.
 * Must load AFTER all component CSS so overrides cascade correctly.
 *
 * Issues addressed:
 * - #2092: Status bar actions zone overflows viewport right edge
 * - #2093: Split panel min-widths force >390px combined width
 * - #2087: Toast notifications overlap the input area
 * - #2088: Input placeholder text overflows on narrow screens
 * - #2086: Tab bar horizontal overflow with many panel tabs
 */

/* ========================================
 * #2092: STATUS BAR ACTIONS ZONE OVERFLOW
 * Allow actions zone to shrink so it doesn't push past the right
 * edge (~29px observed overflow on 390px viewport).
 * ======================================== */

@media (max-width: 480px) {
  .status-bar__zone--actions {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
}

/* ========================================
 * #2093: SPLIT PANEL MIN-WIDTHS ON MOBILE
 * Override min-width: 250px / 300px on split panels so they
 * don't force combined widths >390px. On mobile, only one panel
 * is visible at a time (via mobile-active).
 * ======================================== */

@media (max-width: 767px) {
  .split-panel--left,
  .split-panel--right {
    min-width: 0;
  }
}

/* ========================================
 * #2087: TOAST WRAPPER ABOVE INPUT ON MOBILE
 * Position toasts above the input area so mode toasts and
 * gameplay notifications don't overlap the text input.
 * Input area is ~80px + safe-area-inset on mobile.
 * ======================================== */

@media (max-width: 767px) {
  .toast-wrapper {
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    right: var(--space-2, 8px);
    left: var(--space-2, 8px);
  }

  .toast-wrapper .toast-container {
    align-items: stretch; /* Full-width toasts on mobile */
  }

  .toast {
    max-width: none;
  }
}

/* ========================================
 * #2088: INPUT PLACEHOLDER TRUNCATION
 * Long placeholder text like
 * "Type /create to start, or describe who you want to be..."
 * overflows on narrow screens. Truncate with ellipsis.
 * ======================================== */

@media (max-width: 480px) {
  .input-field {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

/* ========================================
 * #2086: TAB BAR HORIZONTAL OVERFLOW
 * Ensure smooth horizontal scrolling on narrow viewports.
 * Hide tab labels on phones, show icon-only tabs to fit
 * more panels within 390px without horizontal overflow.
 * ======================================== */

@media (max-width: 768px) {
  .mobile-panel-switcher {
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-panel-switcher__btn {
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .mobile-panel-switcher__label {
    display: none;
  }

  .mobile-panel-switcher__btn {
    padding: 4px 10px;
    min-width: 44px; /* Square icon buttons */
    justify-content: center;
  }
}
/**
 * Mobile Touch Target Fixes
 * =========================
 * WCAG 2.1 AA requires 44x44px minimum touch targets.
 * This file contains targeted overrides for elements that
 * fall below the minimum on mobile viewports.
 */

/* Split panel action buttons: base is 18x18px, expand on touch devices */
@media (max-width: 1023px) {
  .split-panel__action {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  /* Hamburger menu close button — 32px → 44px */
  .hamburger-menu__close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Voice mic button — add 44px minimum touch target.
     #4268 finding 7.3: voice-mic + mobile-send-btn coexist on the right edge of
     the input at mobile breakpoints. Explicit flex-shrink:0 + min-width prevents
     either button from collapsing at the 375px viewport (smallest target). The
     voice-input-wrapper inherits these so the wrapper doesn't squish either. */
  .input-area .voice-mic-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .input-area .voice-input-wrapper {
    flex-shrink: 0;
  }

  /* Map control buttons — add minimum touch dimensions */
  .map-controls button {
    min-width: 44px;
    min-height: 44px;
  }

  /* WCAG 2.5.5 touch-target FLOOR for combat / quick-action buttons.
     This is the exact selector union prodplay-combat-mobile.spec.js:659 asserts.
     Placed here (section 2: BASE/FOUNDATION, ~30KB into the CSS bundle) because
     terminal.css is 3.6MB and Chromium stops applying rules past ~3MB. The
     !important floor in _mobile_accessibility_fixes.css at byte 3.65MB is never
     reached. !important is intentional — a WCAG accessibility minimum must not be
     overridable by component-level padding reductions or .mobile-keyboard-open
     collapse rules. 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;
    min-width: 44px !important;
  }
}
/**
 * UX Refinements — Base Styles
 * ==============================
 * Scrollbar support, button normalization, input focus states,
 * skeleton loading, and micro-interactions.
 */

/**
 * UX Refinements
 * ==============
 * Enhanced user experience improvements including:
 * - Cross-browser scrollbar support
 * - Input focus states and feedback
 * - Skeleton loading states
 * - Micro-interactions
 * - Touch feedback enhancements
 */

/* ========================================
 * CROSS-BROWSER SCROLLBAR SUPPORT
 * ======================================== */

/* Firefox scrollbar support */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-thumb-radius);
  border: 2px solid var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* Thin scrollbar variant */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thin::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
  height: var(--scrollbar-width-thin);
}

/* Hidden scrollbar (still scrollable) */
.scrollbar-hidden {
  scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* ========================================
 * BUTTON NORMALIZATION (#4329)
 * Strip UA defaults (Arial / 13.3333px / light-gray bg) from all <button>
 * elements so component classes always start from a clean, design-system-
 * aligned base. Individual component rules (e.g. .btn, .room-menu__item,
 * .panel-tab-dropdown__item) override these as needed.
 *
 * Rules:
 *   font: inherit     — picks up the ancestor mono/sans stack; prevents Arial
 *   background: transparent — prevents rgb(240,240,240) UA surface
 *   color: inherit    — prevents black text on dark theme
 *   border: none      — removes UA 2px outset border
 *   padding: 0        — removes UA padding (component sets its own)
 *   cursor: pointer   — sensible default; disabled buttons override to not-allowed
 *
 * Focus rings are intentionally NOT overridden here — they are managed by
 * keyboard_navigation.css and _ux_refinements.css button:focus-visible rules.
 * ======================================== */

button {
  font: inherit;
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ========================================
 * INPUT FOCUS STATES & FEEDBACK
 * ======================================== */

/* Enhanced input focus */
.input-field:focus,
.terminal-input:focus,
input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  box-shadow: var(--interaction-glow-focus);
  border-color: var(--color-accent-primary);
}

/* Form element reset when used as .input-line container (#1560)
 * <form class="input-line"> inherits browser default margins — strip them. */
form.input-line {
  margin: 0;
  padding: 0;
  border: none;
}

/* Input container with focus-within — subtle border highlight only */
.input-line:focus-within,
.input-area:focus-within {
  border-color: var(--color-accent-primary);
}

.input-line:focus-within .input-prompt {
  color: var(--color-accent-primary);
}

/* Typing indicator animation */
.input-field:not(:placeholder-shown)::after,
.typing-indicator {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-accent-primary);
  animation: cursor-blink 1s step-end infinite;
  margin-left: 2px;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Input placeholder enhancement */
.input-field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.input-field:focus::placeholder,
input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.5;
}

/*
 * Defensive: hard-suppress placeholder whenever the input has content (#3196).
 * Bug repro: after submitting a quick-action while text was typed (or while the
 * 100ms placeholder opacity transition was mid-fade) the placeholder hint text
 * could remain visibly overlapping the textarea content. Native browser
 * behavior already hides ::placeholder when value is non-empty, but the
 * transition + the .terminal-input--submitting opacity change created a
 * stacking-context window where the fade left the placeholder painted over
 * real content.
 *
 * `:not(:placeholder-shown)` matches when the input has any value, so this
 * rule snaps the placeholder to opacity:0 with no transition the moment
 * content exists. Empty inputs continue to show the placeholder normally
 * (see rules above).
 */
.input-field:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder,
textarea:not(:placeholder-shown)::placeholder {
  opacity: 0;
  transition: none;
}

/* Input validation states */
.input-field.input--valid,
input.input--valid {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--interaction-glow-success);
}

.input-field.input--invalid,
input.input--invalid {
  border-color: var(--color-accent-error);
  box-shadow: var(--interaction-glow-error);
}

/* Input loading state */
.input-field.input--loading,
input.input--loading {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-bg-tertiary) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: input-loading 1.5s ease-in-out infinite;
}

@keyframes input-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
 * SKELETON LOADING STATES
 * ======================================== */

.skeleton {
  background: var(--skeleton-base-color);
  background-image: linear-gradient(
    90deg,
    var(--skeleton-base-color) 0%,
    var(--skeleton-shine-color) 50%,
    var(--skeleton-base-color) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-animation-duration) ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* Skeleton variants */
.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text:last-child {
  width: 70%;
}

.skeleton-title {
  height: 1.5em;
  width: 60%;
  margin-bottom: 1em;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
}

.skeleton-button {
  height: 36px;
  width: 100px;
}

.skeleton-card {
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
}

/* Skeleton for narrative entries */
.skeleton-narrative-entry {
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  border-left: 2px solid var(--color-bg-tertiary);
}

.skeleton-narrative-entry .skeleton-text:first-child {
  width: 30%;
  margin-bottom: var(--space-2);
}

/* Skeleton for panels */
.skeleton-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.skeleton-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.skeleton-panel-header .skeleton-avatar {
  flex-shrink: 0;
}

.skeleton-panel-header .skeleton-text {
  flex: 1;
  margin-bottom: 0;
}

/* ========================================
 * MICRO-INTERACTIONS
 * ======================================== */

/* Button hover lift effect — scoped under terminal-container */
.terminal-container .btn,
.terminal-container button:not(.no-interaction),
.terminal-container [role="button"] {
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.terminal-container .btn:hover:not(:disabled),
.terminal-container button:hover:not(:disabled):not(.no-interaction),
.terminal-container [role="button"]:hover:not([aria-disabled="true"]) {
  transform: translateY(-1px);
}

.terminal-container .btn:active:not(:disabled),
.terminal-container button:active:not(:disabled):not(.no-interaction),
.terminal-container [role="button"]:active:not([aria-disabled="true"]) {
  transform: translateY(0) scale(var(--interaction-scale-active));
}

/* Card/panel hover effect — scoped under terminal-container */
.terminal-container .split-panel,
.terminal-container .card,
.terminal-container .panel-card {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.terminal-container .split-panel:hover,
.terminal-container .card:hover,
.terminal-container .panel-card:hover {
  border-color: var(--color-border-focus);
}

/* Clickable item hover effect */
.clickable,
.cs-skill--clickable,
.cs-ability-item.rollable,
.cs-save-item.rollable {
  transition:
    background-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.clickable:hover,
.cs-skill--clickable:hover,
.cs-ability-item.rollable:hover,
.cs-save-item.rollable:hover {
  transform: translateX(2px);
}

/* Icon rotation on hover */
.icon-rotate-hover:hover {
  transform: rotate(15deg);
}

.icon-rotate-hover {
  transition: transform var(--transition-fast);
}

/* Subtle pulse for attention */
.pulse-attention {
  animation: pulse-attention 2s ease-in-out infinite;
}

@keyframes pulse-attention {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(97, 175, 239, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(97, 175, 239, 0);
  }
}

/* Success flash animation */
.flash-success {
  animation: flash-success 0.6s ease-out;
}

@keyframes flash-success {
  0% {
    background-color: var(--color-accent-secondary);
    box-shadow: 0 0 20px var(--color-accent-secondary);
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}

/* Error shake animation */
.shake-error {
  animation: shake-error 0.5s ease-in-out;
}

@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Fade in animation */
.fade-in {
  animation: fade-in var(--transition-normal) ease-out;
}

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

/* Slide in from right */
.slide-in-right {
  animation: slide-in-right var(--transition-normal) ease-out;
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Slide in from bottom */
.slide-in-bottom {
  animation: slide-in-bottom var(--transition-normal) ease-out;
}

@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scale in animation */
.scale-in {
  animation: scale-in var(--transition-fast) ease-out;
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
/**
 * UX Refinements — Touch & Loading
 * ==================================
 * Enhanced touch feedback, swipe gestures, loading states,
 * and progress indicators.
 */

/* ========================================
 * ENHANCED TOUCH FEEDBACK
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Ripple effect for touch */
  .touch-ripple {
    position: relative;
    overflow: hidden;
  }

  .touch-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, opacity 0.3s;
    opacity: 0;
    pointer-events: none;
  }

  .touch-ripple:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
  }

  /* Enhanced active state for buttons */
  .btn:active,
  button:active,
  [role="button"]:active {
    transform: scale(0.96);
    opacity: 0.9;
  }

  /* Long press indicator */
  .long-press-indicator {
    position: relative;
  }

  .long-press-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent-primary);
    border-radius: inherit;
    opacity: 0;
    animation: long-press-ring 0.5s ease-out forwards;
    animation-play-state: paused;
  }

  .long-press-indicator:active::before {
    animation-play-state: running;
  }

  @keyframes long-press-ring {
    0% {
      opacity: 0;
      transform: scale(1);
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: scale(1.1);
    }
  }
}

/* ========================================
 * SWIPE GESTURE HINTS
 * ======================================== */

.swipe-hint {
  position: relative;
}

.swipe-hint::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 20px;
  height: 2px;
  background: var(--color-text-muted);
  transform: translateY(-50%);
  opacity: 0;
  animation: swipe-hint 2s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes swipe-hint {
  0%, 100% {
    opacity: 0;
    transform: translateY(-50%) translateX(0);
  }
  20%, 80% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.5;
    transform: translateY(-50%) translateX(-10px);
  }
}

/* ========================================
 * LOADING STATES
 * ======================================== */

/* Spinner loading */
.loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-bg-tertiary);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-spinner--small {
  width: 14px;
  height: 14px;
  border-width: 1.5px;
}

.loading-spinner--large {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* Dots loading */
.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--color-accent-primary);
  border-radius: 50%;
  animation: loading-dot 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loading-dot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Typing indicator (3 dots) */
.typing-indicator-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
}

.typing-indicator-dots span {
  width: 8px;
  height: 8px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: typing-bounce 1.4s ease-in-out infinite;
}

.typing-indicator-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
}

/* ========================================
 * PROGRESS INDICATORS
 * ======================================== */

/* Progress bar */
.progress-bar {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.progress-bar--animated .progress-bar__fill {
  background: linear-gradient(
    90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%
  );
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
}

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

/* Indeterminate progress */
.progress-bar--indeterminate .progress-bar__fill {
  width: 30%;
  animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/**
 * UX Refinements — Accessibility & Interactions
 * ================================================
 * WCAG touch targets, focus-visible states, disabled states,
 * click/press feedback, and reduced motion support.
 */

/* ========================================
 * WCAG TOUCH TARGETS (44x44px minimum)
 * Priority fix for accessibility compliance
 * ======================================== */

/* Icon buttons must meet minimum touch target */
.help-icon-btn,
.feedback-icon-btn,
.terminal-container .btn--icon,
.copy-btn,
.close-btn,
[class*="icon-btn"] {
  min-width: 44px;
  min-height: 44px;
}

/* Ensure clickable breadcrumb segments meet touch target */
.breadcrumb__segment--character,
.breadcrumb__segment--campaign,
.breadcrumb__segment--room {
  min-height: 44px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* DM persona touch target */
.dm-persona {
  min-height: 44px;
}

/* Small buttons in panels need larger touch area */
.character-sheet__actions .btn--icon,
.panel-header .btn--icon {
  min-width: 44px;
  min-height: 44px;
}

/* ========================================
 * FOCUS-VISIBLE STATES
 * Replace :focus with :focus-visible for better UX
 * ======================================== */

/* Global focus-visible for interactive elements */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Remove default focus ring when not keyboard navigating */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* Menu items need visible focus */
.room-menu__item:focus-visible,
.campaign-menu__item:focus-visible,
.world-menu__item:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
  background: var(--color-bg-tertiary);
}

/* Tab focus states */
.builder-tab:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  z-index: var(--z-raised);
}

/* Collapsible section summary focus */
details > summary:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Selection options focus */
.selection-slot:focus-visible,
.alignment-btn:focus-visible,
.wizard__selection-option:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ========================================
 * DISABLED STATES
 * Make disabled elements obviously non-interactive
 * ======================================== */

/* Base disabled button styling */
.terminal-container button:disabled,
.terminal-container .btn:disabled,
.terminal-container [role="button"][aria-disabled="true"],
.terminal-container .btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
  transform: none;
  box-shadow: none;
}

/* Disabled with visual indicator */
.terminal-container .btn:disabled::after,
.terminal-container button:disabled::after {
  content: none; /* Prevent any pseudo-element effects */
}

/* Review button specific disabled state */
.builder-review-btn:disabled {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
}

/* Disabled links */
a[aria-disabled="true"],
.link--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* Disabled form inputs */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

/* ========================================
 * CLICK / PRESS FEEDBACK
 * Centralized :active states for elements
 * that lack press feedback.
 * ======================================== */

/* Lobby action buttons — hover lift + press scale */
.lobby-action:hover:not(:disabled) {
  transform: translateY(-1px);
}

.lobby-action:active:not(:disabled) {
  transform: scale(0.97);
  transition-duration: 50ms;
}

/* Lobby welcome CTA — already has hover lift, add press */
.lobby-welcome__action:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition-duration: 50ms;
}

/* Tab-style elements — press feedback */
.tab-btn:active,
.panel-tab:active,
.lobby-tab:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

/* Chip elements — press on desktop */
.chip:active:not(.chip--disabled) {
  transform: scale(0.96);
  transition-duration: 50ms;
}

/* Generic link active feedback */
a[href]:active:not(.btn):not(.no-interaction) {
  opacity: 0.8;
  transition-duration: 50ms;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  .input--loading,
  .loading-spinner,
  .loading-dots span,
  .typing-indicator-dots span,
  .progress-bar--animated .progress-bar__fill,
  .progress-bar--indeterminate .progress-bar__fill,
  .pulse-attention,
  .swipe-hint::after {
    animation: none;
  }

  .fade-in,
  .slide-in-right,
  .slide-in-bottom,
  .scale-in,
  .flash-success,
  .shake-error {
    animation: none;
  }

  .btn:hover,
  .clickable:hover,
  .lobby-action:hover,
  .lobby-action:active,
  .lobby-welcome__action:active,
  .tab-btn:active,
  .panel-tab:active,
  .lobby-tab:active,
  .chip:active {
    transform: none;
  }
}
/**
 * UX Refinements — Import Hub
 * =============================
 * Enhanced user experience improvements.
 *
 * Decomposed into focused files under ux_refinements/ for maintainability.



 */
/**
 * Keyboard Navigation Enhancement Styles
 * =======================================
 * Enhanced focus indicators and keyboard navigation visual feedback
 * for full accessibility support.
 *
 * Task #230: Full Keyboard Navigation Support
 * WCAG 2.1 AAA Compliant Focus Indicators
 */

/* ========================================
 * ENHANCED FOCUS INDICATORS
 * Dual-ring design: 3px solid + 5px glow
 * ======================================== */

/* Universal focus visible - keyboard only */
:focus-visible {
  outline: 3px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
  position: relative;
  z-index: var(--z-panel); /* Ensure focus visible above other content */
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ========================================
 * SELECTION CARDS & INTERACTIVE ELEMENTS
 * ======================================== */

/* Creation wizard selection cards */
.selection-card:focus-visible,
.ability-method-card:focus-visible,
.skill-chip:focus-visible,
.spell-chip:focus-visible,
.origin-card:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 5px rgba(255, 215, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sticky);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Selection grid items */
.selection-grid > *:focus-visible,
.ability-slots-grid > *:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.08);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.25);
  z-index: var(--z-sticky);
}

/* Buttons and primary actions */
button:focus-visible,
body .btn:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  box-shadow:
    0 0 0 5px rgba(255, 215, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: var(--z-sticky);
}

/* Confirm/primary buttons get green glow */
.selection-confirm-btn:focus-visible,
.ability-confirm-btn:focus-visible,
[data-primary="true"]:focus-visible {
  outline-color: #10b981;
  box-shadow:
    0 0 0 5px rgba(16, 185, 129, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Cancel/secondary buttons get red glow */
.selection-skip-btn:focus-visible,
.selection-skip-all-btn:focus-visible,
[data-danger="true"]:focus-visible {
  outline-color: #ef4444;
  box-shadow:
    0 0 0 5px rgba(239, 68, 68, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ========================================
 * FILTER TABS & TAB NAVIGATION
 * ======================================== */

.filter-tab:focus-visible,
.creation-tab:focus-visible,
[role="tab"]:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: -2px;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/* Active/selected tab */
.filter-tab.active:focus-visible,
.creation-tab.active:focus-visible,
[role="tab"][aria-selected="true"]:focus-visible {
  outline-width: 4px;
  background: rgba(255, 215, 0, 0.15);
}

/* ========================================
 * PANELS & MODALS
 * ======================================== */

.selection-panel:focus-within {
  border-color: var(--color-gold, #ffd700);
  box-shadow:
    0 0 0 3px rgba(255, 215, 0, 0.15),
    0 4px 16px rgba(0, 0, 0, 0.2);
}

body .modal:focus-within,
[role="dialog"]:focus-within,
[role="alertdialog"]:focus-within {
  box-shadow:
    0 0 0 4px var(--color-gold, #ffd700),
    0 0 0 8px rgba(255, 215, 0, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ========================================
 * FORM CONTROLS
 * ======================================== */

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.input-field:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 1px;
  border-color: var(--color-gold, #ffd700);
  box-shadow:
    0 0 0 5px rgba(255, 215, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: var(--z-sticky);
}

/* Point buy controls */
.pb-btn:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  transform: scale(1.1);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
}

/* ========================================
 * LINKS & TEXT ACTIONS
 * ======================================== */

a:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ========================================
 * HELP & UTILITY BUTTONS
 * ======================================== */

.selection-help-btn:focus-visible,
.selection-pick-btn:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  transform: scale(1.15) rotate(-2deg);
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
}

/* ========================================
 * KEYBOARD NAVIGATION HINTS
 * ======================================== */

/* Show keyboard hint on focus */
[data-keyboard-hint]:focus-visible::after {
  content: attr(data-keyboard-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--color-bg-primary, #0a0a0a);
  border: 2px solid var(--color-gold, #ffd700);
  color: var(--color-gold, #ffd700);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 4px;
  z-index: var(--z-floating);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Keyboard shortcut badge */
.kbd-hint {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-gold, #ffd700);
  margin-left: 8px;
}

/* ========================================
 * ROVING TABINDEX PATTERN
 * Items with tabindex="-1" should still show focus
 * ======================================== */

[tabindex="-1"]:focus-visible {
  outline: 3px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.3);
  z-index: var(--z-sticky);
}

/* ========================================
 * FOCUS TRAP INDICATORS
 * Visual cue that focus is trapped in modal
 * ======================================== */

.focus-trap-active::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed var(--color-gold, #ffd700);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.4;
  z-index: -1;
  animation: focus-trap-pulse 2s ease-in-out infinite;
}

@keyframes focus-trap-pulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.2;
  }
}

/* ========================================
 * SKIP LINKS (Keyboard-only navigation)
 * ======================================== */

.skip-link {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-skip-link);
  padding: 12px 24px;
  background: var(--color-gold, #ffd700);
  color: var(--color-bg-primary, #0a0a0a);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 4px;
  border: 3px solid var(--color-bg-primary, #0a0a0a);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
  outline: 3px solid var(--color-bg-primary, #0a0a0a);
  outline-offset: 2px;
}

/* ========================================
 * HIGH CONTRAST MODE SUPPORT
 * ======================================== */

@media (prefers-contrast: high), (forced-colors: active) {
  :focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.5);
  }

  .selection-card:focus-visible,
  .ability-method-card:focus-visible {
    border-width: 3px;
  }

  button:focus-visible,
  .btn:focus-visible {
    border-width: 3px;
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline-color: Highlight;
    box-shadow: none;
  }

  .selection-card:focus-visible,
  button:focus-visible {
    border-color: Highlight;
    background: Canvas;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .selection-card:focus-visible,
  .ability-method-card:focus-visible {
    transform: none;
    transition: none;
  }

  .focus-trap-active::before {
    animation: none;
    opacity: 0.4;
  }

  .skip-link {
    transition: none;
  }
}

/* ========================================
 * MOBILE / TOUCH SUPPORT
 * Touch-based focus should be less prominent
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Reduce focus glow intensity on touch devices */
  :focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  }

  /* Ensure minimum touch target size */
  button,
  .btn,
  [role="button"],
  .selection-card {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ========================================
 * DARK MODE ADJUSTMENTS
 * ======================================== */

@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: #ffed4e;
    box-shadow: 0 0 0 5px rgba(255, 237, 78, 0.25);
  }

  .selection-card:focus-visible {
    background: rgba(255, 237, 78, 0.05);
  }
}

/* ========================================
 * SCREEN READER ONLY ELEMENTS
 * ======================================== */

.sr-only-focusable:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus-visible {
  position: static;
  width: auto;
  height: auto;
  padding: 12px 24px;
  margin: 8px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-gold, #ffd700);
  color: var(--color-bg-primary, #0a0a0a);
  font-weight: 700;
  border-radius: 4px;
  z-index: var(--z-skip-link);
}
/*
 * Mobile Performance Optimizations
 * ==================================
 * Reduces GPU-intensive effects on mobile/touch devices.
 * - Disables backdrop-filter (GPU-intensive blur)
 * - Limits animation complexity
 * - Reduces box-shadow layers in transitions
 *
 * Scope: terminal/base/_mobile_performance.css
 */

/* ========================================
 * 1. DISABLE BACKDROP-FILTER ON MOBILE
 * backdrop-filter: blur() is extremely GPU-intensive on mobile,
 * causing jank and battery drain. Replace with solid backgrounds.
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  .selection-loading-overlay,
  .workspace-settings-modal,
  .workspace-settings-section,
  .creation-progress__track,
  .tab-group__header,
  .guest-limit-overlay,
  .guest-limit-modal,
  .floating-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Compensate with slightly more opaque backgrounds */
    background-color: var(--color-bg-secondary);
  }
}

/* ========================================
 * 2. REDUCE ANIMATION COMPLEXITY ON MOBILE
 * Limit to transform + opacity only (GPU-composited).
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Disable multi-property transitions that cause layout thrash.
     .token-status removed in #4267 (panel audit 6.4). */
  .dm-persona,
  .breadcrumb__segment,
  .room-indicator,
  .world-indicator,
  .difficulty-indicator,
  .session-menu-btn {
    transition-property: transform, opacity;
    transition-duration: 100ms;
  }

  /* Disable box-shadow animations entirely on mobile */
  .dm-mode-toggle--active,
  .guided-mode-toggle--active,
  .death-banner {
    animation: none;
  }

  /* Simplify hover/active glow effects */
  .status-widget--combat:hover,
  .status-widget--danger:hover,
  .dm-mode-toggle--active:hover,
  .guided-mode-toggle--active:hover {
    box-shadow: none;
  }
}

/* ========================================
 * 3. REDUCE MOTION (respects user preference)
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .loading,
  .dm-persona__avatar,
  .token-milestone-glow,
  .critical-hp-pulse,
  .death-banner-pulse,
  .dm-crown-pulse,
  .guided-book-pulse {
    animation: none;
  }

  /* Covered by accessibility.css @media (prefers-reduced-motion: reduce) * rule */
}
/**
 * User Typography — Font Size and Family
 * =========================================
 * Font size overrides, font family settings (OpenDyslexic, Cinzel, Spectral), and line spacing.
 */

/*
 * User Typography Preferences
 * ================================
 * Override default typography based on user preferences.
 * Preferences are applied via data attributes on the html element.
 */

/* Import OpenDyslexic font for accessibility */
@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* ========================================
 * FONT SIZE OVERRIDES
 * Using html element selector for higher specificity than :root.
 * --terminal-font-size is a convenience custom property for the base size.
 * ======================================== */

html[data-font-size="small"] {
  --terminal-font-size: 14px;
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-base: 11px;
  --font-size-md: 12px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-2xl: 18px;
  --font-size-3xl: 22px;
  --font-size-4xl: 28px;
  --font-size-5xl: 40px;
}

/* Medium is default */
html[data-font-size="medium"],
html:not([data-font-size]) {
  --terminal-font-size: 16px;
}

html[data-font-size="large"] {
  --terminal-font-size: 18px;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 26px;
  --font-size-4xl: 36px;
  --font-size-5xl: 52px;
}

html[data-font-size="extra-large"] {
  --terminal-font-size: 20px;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 17px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 22px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 40px;
  --font-size-5xl: 56px;
}

/* ========================================
 * FONT FAMILY OVERRIDES
 * Using html element selector for higher specificity than :root
 * ======================================== */

/* System is default - no override needed */

html[data-font-family="fira-code"] {
  --font-mono: 'Fira Code', 'SF Mono', 'Consolas', monospace;
}

html[data-font-family="jetbrains-mono"] {
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
}

html[data-font-family="sf-mono"] {
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;
}

html[data-font-family="consolas"] {
  --font-mono: 'Consolas', 'Monaco', 'SF Mono', monospace;
}

html[data-font-family="opendyslexic"] {
  --font-mono: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}

/* Apply OpenDyslexic to all text elements */
html[data-font-family="opendyslexic"] *,
body.dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
}

/* Body class alternative for dyslexia font toggle */
body.dyslexia-font {
  font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif;
}

/* ========================================
 * FANTASY FONT FAMILY OVERRIDES
 * D&D-themed fonts for immersive experience
 * ======================================== */

/* Cinzel - Classic fantasy headings */
html[data-font-family="cinzel"] {
  --font-heading: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', Times, serif;
}

/* Spectral - Elegant serif for reading */
html[data-font-family="spectral"] {
  --font-heading: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-body: 'Spectral', Georgia, 'Times New Roman', Times, serif;
}

/* Fantasy mode - Apply body font to narrative content */
html[data-font-family="cinzel"] .narrative-entry,
html[data-font-family="spectral"] .narrative-entry {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* Fantasy mode - Apply heading font to headers */
html[data-font-family="cinzel"] h1,
html[data-font-family="cinzel"] h2,
html[data-font-family="cinzel"] h3,
html[data-font-family="cinzel"] h4,
html[data-font-family="cinzel"] h5,
html[data-font-family="cinzel"] h6,
html[data-font-family="spectral"] h1,
html[data-font-family="spectral"] h2,
html[data-font-family="spectral"] h3,
html[data-font-family="spectral"] h4,
html[data-font-family="spectral"] h5,
html[data-font-family="spectral"] h6 {
  font-family: var(--font-heading);
}

/* ========================================
 * LINE SPACING OVERRIDES
 * Using html element selector for higher specificity than :root
 * ======================================== */

html[data-line-spacing="compact"] {
  --line-height-tight: 1.15;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.5;
}

/* Normal is default - no override needed */

html[data-line-spacing="relaxed"] {
  --line-height-tight: 1.4;
  --line-height-normal: 1.65;
  --line-height-relaxed: 1.9;
}

/**
 * User Typography — High Contrast Mode
 * =======================================
 * WCAG AAA high contrast mode overrides (7:1 contrast ratio) for all UI elements.
 */

/* ========================================
 * HIGH CONTRAST MODE — WCAG AAA (7:1 contrast ratio)
 * ========================================
 * Activated by any of:
 *   1. User toggle:  html[data-high-contrast="true"]
 *   2. Body class:   body.high-contrast
 *   3. OS setting:   @media (prefers-contrast: more)
 *
 * Pure white text on pure black backgrounds.
 * Accent colors brightened for 7:1+ on #000000.
 * Borders thickened and brightened for visibility.
 * ======================================== */

/* ---------- shared token overrides (used by all three selectors) ---------- */

html[data-high-contrast="true"],
body.high-contrast {

  /* ---- Backgrounds: pure black + very dark grays ---- */
  --color-bg-primary: #000000;
  --color-bg-secondary: #0d0d0d;
  --color-bg-tertiary: #1a1a1a;
  --color-bg-elevated: #1a1a1a;
  --color-bg-hover: #2a2a2a;

  /* ---- Text: pure white / very light ---- */
  --color-text-primary: #ffffff;           /* 21:1 on #000 */
  --color-text-secondary: #e0e0e0;        /* 15.3:1 on #000 */
  --color-text-muted: #c0c0c0;            /* 11.7:1 on #000 */
  --color-text-disabled: #999999;          /* 7.4:1 on #000 */
  --color-text-inverse: #000000;

  /* ---- Accent colors: brightened for 7:1+ on #000 ---- */
  --color-accent-primary: #6cb4ff;        /* Bright blue — 8.1:1 */
  --color-accent-secondary: #a4d682;      /* Bright green — 9.6:1 */
  --color-accent-warning: #ffd866;        /* Bright gold — 13.2:1 */
  --color-accent-error: #ff7b7b;          /* Bright red — 7.2:1 */
  --color-accent-purple: #d49cee;         /* Bright purple — 8.0:1 */
  --color-accent-orange: #f0aa60;         /* Bright orange — 9.0:1 */
  --color-accent-cyan: #66d9e8;           /* Bright cyan — 11.5:1 */

  /* ---- Semantic HP/XP ---- */
  --color-hp-full: #a4d682;
  --color-hp-mid: #ffd866;
  --color-hp-low: #ff7b7b;
  --color-xp: #6cb4ff;
  --color-gold: #ffd866;

  /* ---- Borders: high-visibility ---- */
  --color-border-default: #808080;        /* 6:1 on #000, clearly visible */
  --color-border-subtle: #666666;
  --color-border-focus: #ffffff;

  /* ---- Entity type colors (brightened) ---- */
  --color-entity-npc: #66e8ff;
  --color-entity-location: #a4d682;
  --color-entity-item: #ffd866;
  --color-entity-creature: #ff7b7b;
  --color-entity-spell: #d49cee;
  --color-entity-quest: #6cb4ff;
  --color-entity-faction: #f0aa60;
  --color-entity-lore: #d0d0d0;

  /* ---- Speech bubbles: higher opacity for readability ---- */
  --bubble-player-bg: rgba(164, 214, 130, 0.2);
  --bubble-player-border: rgba(164, 214, 130, 0.6);
  --bubble-dm-bg: rgba(212, 156, 238, 0.15);
  --bubble-dm-border: rgba(212, 156, 238, 0.6);
  --bubble-system-bg: rgba(255, 255, 255, 0.1);

  /* ---- Status/semantic backgrounds ---- */
  --color-success-bg: rgba(164, 214, 130, 0.2);
  --color-success-text: #a4d682;
  --color-warning-bg: rgba(255, 216, 102, 0.2);
  --color-warning-text: #ffd866;
  --color-info-bg: rgba(108, 180, 255, 0.2);
  --color-info-text: #6cb4ff;

  /* ---- Overlays: less transparency so text stays visible ---- */
  --overlay-white-subtle: rgba(255, 255, 255, 0.1);
  --overlay-white-light: rgba(255, 255, 255, 0.15);
  --overlay-white-medium: rgba(255, 255, 255, 0.3);

  /* ---- Surface aliases ---- */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-surface: #0d0d0d;
  --color-surface-hover: #2a2a2a;
  --color-surface-elevated: #1a1a1a;
  --surface-primary: #000000;
  --surface-secondary: #0d0d0d;
  --surface-elevated: #1a1a1a;
  --surface-dark: #000000;
  --surface-darker: #000000;
  --surface-hover: #2a2a2a;
  --color-border: #808080;

  /* ---- Legacy aliases ---- */
  --bg-primary: #000000;
  --bg-secondary: #0d0d0d;
  --bg-tertiary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #c0c0c0;
  --accent-primary: #6cb4ff;
  --accent-secondary: #a4d682;
  --accent-warning: #ffd866;
  --accent-error: #ff7b7b;
  --accent-purple: #d49cee;
  --border-color: #808080;

  /* ---- Scrollbar ---- */
  --scrollbar-track-color: #000000;
  --scrollbar-thumb-color: #666666;
  --scrollbar-thumb-hover-color: #999999;

  /* ---- Focus ring: bright white for maximum visibility ---- */
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px rgba(255, 255, 255, 0.4);

  /* ---- Elevation: solid borders instead of subtle shadows ---- */
  --elevation-base: 0 0 0 1px #808080;
  --elevation-raised: 0 0 0 2px #808080;
  --elevation-floating: 0 0 0 2px #ffffff;
  --elevation-modal: 0 0 0 3px #ffffff;

  /* ---- Skeleton loading ---- */
  --skeleton-base-color: #1a1a1a;
  --skeleton-shine-color: #333333;

  /* ---- Narrative entry type colors ---- */
  --color-entry-dm: #d49cee;
  --color-entry-player: #6cb4ff;
  --color-entry-system: #ffd866;
  --color-entry-error: #ff7b7b;
  --color-entry-roll: #6cb4ff;
  --color-entry-combat: #ff7b7b;
  --color-entry-npc: #d49cee;
  --color-entry-item: #ffd866;
  --color-entry-location: #a4d682;
}

/* ---------- structural overrides: thicker borders, underlined links ---------- */

html[data-high-contrast="true"] .panel,
html[data-high-contrast="true"] .card,
html[data-high-contrast="true"] .modal,
html[data-high-contrast="true"] input,
html[data-high-contrast="true"] select,
html[data-high-contrast="true"] textarea,
html[data-high-contrast="true"] .narrative-entry,
body.high-contrast .panel,
body.high-contrast .card,
body.high-contrast .modal,
body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea,
body.high-contrast .narrative-entry {
  border: 2px solid var(--color-border-default);
}

html[data-high-contrast="true"] a,
body.high-contrast a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

html[data-high-contrast="true"] button,
html[data-high-contrast="true"] .btn,
html[data-high-contrast="true"] [role="button"],
body.high-contrast button,
body.high-contrast .btn,
body.high-contrast [role="button"] {
  border: 2px solid var(--color-border-default);
  font-weight: 700;
}

html[data-high-contrast="true"] button:hover,
html[data-high-contrast="true"] .btn:hover,
html[data-high-contrast="true"] [role="button"]:hover,
body.high-contrast button:hover,
body.high-contrast .btn:hover,
body.high-contrast [role="button"]:hover {
  border-color: #ffffff;
}

html[data-high-contrast="true"] button:focus-visible,
html[data-high-contrast="true"] .btn:focus-visible,
html[data-high-contrast="true"] [role="button"]:focus-visible,
body.high-contrast button:focus-visible,
body.high-contrast .btn:focus-visible,
body.high-contrast [role="button"]:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 2px;
}

/* Narrative text overrides: hardcoded colors in application.css need overriding */
html[data-high-contrast="true"] .narrative-entry strong,
body.high-contrast .narrative-entry strong {
  color: #ffd866;
}

html[data-high-contrast="true"] .narrative-entry em,
body.high-contrast .narrative-entry em {
  color: #e0e0e0;
}

html[data-high-contrast="true"] .narrative-entry code,
body.high-contrast .narrative-entry code {
  color: #6cb4ff;
  background-color: rgba(255, 255, 255, 0.15);
}

html[data-high-contrast="true"] .narrative-entry blockquote,
body.high-contrast .narrative-entry blockquote {
  border-left-color: #808080;
  color: #c0c0c0;
  background-color: rgba(255, 255, 255, 0.05);
}

html[data-high-contrast="true"] .narrative-entry h1,
html[data-high-contrast="true"] .narrative-entry h2,
html[data-high-contrast="true"] .narrative-entry h3,
html[data-high-contrast="true"] .narrative-entry h4,
html[data-high-contrast="true"] .narrative-entry h5,
html[data-high-contrast="true"] .narrative-entry h6,
body.high-contrast .narrative-entry h1,
body.high-contrast .narrative-entry h2,
body.high-contrast .narrative-entry h3,
body.high-contrast .narrative-entry h4,
body.high-contrast .narrative-entry h5,
body.high-contrast .narrative-entry h6 {
  color: #ffffff;
}

html[data-high-contrast="true"] .narrative-entry a,
body.high-contrast .narrative-entry a {
  color: #6cb4ff;
}

html[data-high-contrast="true"] .narrative-entry hr,
body.high-contrast .narrative-entry hr {
  border-top-color: #808080;
}

/* Status bar visibility */
html[data-high-contrast="true"] .status-bar,
body.high-contrast .status-bar {
  border-bottom: 2px solid var(--color-border-default);
}

/* Panel headers */
html[data-high-contrast="true"] .panel-header,
body.high-contrast .panel-header {
  border-bottom: 2px solid var(--color-border-default);
}

/* Character sheet stat blocks */
html[data-high-contrast="true"] .hp-bar,
html[data-high-contrast="true"] .xp-bar,
body.high-contrast .hp-bar,
body.high-contrast .xp-bar {
  border: 2px solid var(--color-border-default);
}

/* ---------- @media (prefers-contrast: more) auto-detection ---------- */
/* Applied automatically for users with OS-level high-contrast preference.
 * The user toggle (data-high-contrast) overrides this in both directions. */

@media (prefers-contrast: more) {
  html:not([data-high-contrast="false"]) {
    /* Background */
    --color-bg-primary: #000000;
    --color-bg-secondary: #0d0d0d;
    --color-bg-tertiary: #1a1a1a;
    --color-bg-elevated: #1a1a1a;
    --color-bg-hover: #2a2a2a;

    /* Text */
    --color-text-primary: #ffffff;
    --color-text-secondary: #e0e0e0;
    --color-text-muted: #c0c0c0;
    --color-text-disabled: #999999;

    /* Accents */
    --color-accent-primary: #6cb4ff;
    --color-accent-secondary: #a4d682;
    --color-accent-warning: #ffd866;
    --color-accent-error: #ff7b7b;
    --color-accent-purple: #d49cee;
    --color-accent-orange: #f0aa60;
    --color-accent-cyan: #66d9e8;

    /* Borders */
    --color-border-default: #808080;
    --color-border-subtle: #666666;
    --color-border-focus: #ffffff;

    /* Surfaces */
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-surface: #0d0d0d;
    --surface-primary: #000000;
    --surface-secondary: #0d0d0d;
    --color-border: #808080;
    --border-color: #808080;

    /* Legacy */
    --bg-primary: #000000;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #c0c0c0;
  }

  html:not([data-high-contrast="false"]) .panel,
  html:not([data-high-contrast="false"]) .card,
  html:not([data-high-contrast="false"]) .modal,
  html:not([data-high-contrast="false"]) input,
  html:not([data-high-contrast="false"]) select,
  html:not([data-high-contrast="false"]) textarea,
  html:not([data-high-contrast="false"]) .narrative-entry {
    border: 2px solid var(--color-border-default);
  }

  html:not([data-high-contrast="false"]) a {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  html:not([data-high-contrast="false"]) button,
  html:not([data-high-contrast="false"]) .btn,
  html:not([data-high-contrast="false"]) [role="button"] {
    border: 2px solid var(--color-border-default);
    font-weight: 700;
  }

  html:not([data-high-contrast="false"]) button:focus-visible,
  html:not([data-high-contrast="false"]) .btn:focus-visible,
  html:not([data-high-contrast="false"]) [role="button"]:focus-visible {
    outline: 4px solid #ffffff;
    outline-offset: 2px;
  }
}
/**
 * User Typography Preferences — Import Hub
 * ==========================================
 * User-controlled font size, font family, line spacing, and high-contrast mode.
 *
 * Decomposed into focused files under user_typography/ for maintainability.


 */
/*
 * Fantasy Typography System
 * =========================
 * D&D-appropriate fonts for headings and body text.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Font Stack:
 * - Headings: Cinzel (evocative fantasy serif)
 * - Body: Spectral (readable serif with character)
 * - Monospace: Existing terminal fonts (unchanged)
 *
 * Accessibility:
 * - All fonts have proper fallbacks
 * - font-display: swap ensures text remains visible during font load
 * - WCAG AA compliant contrast maintained
 */

/* ========================================
 * GLOBAL HEADING STYLES
 * Applied to all h1-h6 elements with fantasy fonts
 * ======================================== */

h1, h2, h3, h4, h5, h6,
.heading,
.fantasy-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
  margin: 0;
}

/* Heading Size Scale */
h1, .h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
}

h2, .h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.03em;
}

h3, .h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
}

h4, .h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
}

h5, .h5 {
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-medium);
}

h6, .h6 {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
 * FANTASY BODY TEXT
 * Opt-in class for narrative/story content
 * ======================================== */

.fantasy-body,
.narrative-fantasy,
.fantasy-narration {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-narrative);
  font-weight: var(--font-weight-normal);
}

/* Italic variant for atmospheric descriptions */
.fantasy-body em,
.narrative-fantasy em {
  font-style: italic;
  font-weight: var(--font-weight-normal);
}

/* Bold variant for emphasis */
.fantasy-body strong,
.narrative-fantasy strong {
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * PANEL AND CARD HEADINGS
 * Consistent heading styles for UI panels
 * ======================================== */

.panel-heading,
.card-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

.panel-subheading,
.card-subheading {
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0.01em;
  color: var(--color-text-secondary);
}

/* ========================================
 * NARRATIVE ENTRY TYPOGRAPHY OVERRIDE
 * Enhanced typography for DM narrative content
 * ======================================== */

.narrative-entry.fantasy-mode,
.narrative-panel.fantasy-mode .narrative-entry {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

.narrative-entry.fantasy-mode h1,
.narrative-entry.fantasy-mode h2,
.narrative-entry.fantasy-mode h3,
.narrative-entry.fantasy-mode h4,
.narrative-entry.fantasy-mode h5,
.narrative-entry.fantasy-mode h6,
.narrative-panel.fantasy-mode .narrative-entry h1,
.narrative-panel.fantasy-mode .narrative-entry h2,
.narrative-panel.fantasy-mode .narrative-entry h3,
.narrative-panel.fantasy-mode .narrative-entry h4,
.narrative-panel.fantasy-mode .narrative-entry h5,
.narrative-panel.fantasy-mode .narrative-entry h6 {
  font-family: var(--font-heading);
  margin: 1.5em 0 0.5em 0;
}

/* ========================================
 * NARRATIVE INLINE HEADING OVERRIDE
 * AI DM output may contain # markdown that creates h1-h6 tags.
 * Cinzel font renders lowercase as petite caps (Roman capitals),
 * making all narrative text look ALL CAPS. Override to body font
 * within narrative segments so headings remain readable.
 * ======================================== */

.unified-segment h1,
.unified-segment h2,
.unified-segment h3,
.unified-segment h4,
.unified-segment h5,
.unified-segment h6 {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-transform: none;
  letter-spacing: normal;
  line-height: var(--line-height-narrative);
  margin: 0.75em 0 0.25em 0;
}

/* ========================================
 * SPECIAL TEXT TREATMENTS
 * For D&D-specific elements like spell names, titles, etc.
 * ======================================== */

/* Spell/ability names - uses heading font for emphasis */
.spell-name,
.ability-name,
.feature-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-medium);
  font-size: inherit;
  letter-spacing: 0.01em;
}

/* Ancient/magical text styling */
.ancient-text,
.magical-text {
  font-family: var(--font-heading);
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--color-accent-warning);
}

/* Quest/chapter titles */
.quest-title,
.chapter-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Character and NPC name styling */
.character-name,
.npc-name,
.speaker-name,
.fantasy-name {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  letter-spacing: 0.01em;
}

/* ========================================
 * TERMINAL AREAS - PRESERVE MONOSPACE
 * Ensure terminal/code areas keep monospace fonts
 * ======================================== */

.terminal-output,
.terminal-input,
.command-input,
.code-block,
pre,
code,
.input-area,
.terminal-prompt,
[data-controller*="terminal"] input,
[data-controller*="terminal"] textarea {
  font-family: var(--font-mono);
}

/* ========================================
 * RESPONSIVE HEADING SIZES
 * Scale down on smaller screens
 * ======================================== */

@media (max-width: 768px) {
  :root {
    --font-size-h1: 1.75rem;   /* 28px on mobile */
    --font-size-h2: 1.5rem;    /* 24px on mobile */
    --font-size-h3: 1.25rem;   /* 20px on mobile */
    --font-size-h4: 1.125rem;  /* 18px on mobile */
    --font-size-h5: 1rem;      /* 16px on mobile */
    --font-size-h6: 0.875rem;  /* 14px on mobile */
  }
}

/* ========================================
 * FANTASY THEME INTEGRATION
 * When fantasy themes are active, auto-apply body font
 * ======================================== */

html[data-theme="parchment"],
html[data-theme="dungeon"],
html[data-theme="arcane"] {
  /* Use fantasy body font by default for fantasy themes */
  --font-body-active: var(--font-body);
}

html[data-theme="parchment"] .narrative-entry,
html[data-theme="dungeon"] .narrative-entry,
html[data-theme="arcane"] .narrative-entry {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* ========================================
 * THEMATIC D&D ELEMENT TYPOGRAPHY
 * Apply fantasy fonts to D&D-specific UI elements.
 * These selectors target components defined in organism files
 * and centralize all fantasy font application here.
 * ======================================== */

/* --- CHARACTER SHEET --- */

/* Character name: the hero's identity deserves Cinzel's gravitas */
.cs-name {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Character sheet panel header (e.g. "Character Sheet") */
.character-sheet__title {
  font-family: var(--font-heading);
}

/* Character sheet inline variant */
.cs-inline__name,
.cs-header__name {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* --- NPC / NARRATIVE --- */

/* NPC name: every NPC name rendered in the terminal narrative */
.npc-name {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* DM narration: the voice of the Dungeon Master uses Spectral for readability */
.dm-narration {
  font-family: var(--font-body);
}

/* NPC dialogue speaker attribution */
.dialogue-speaker,
.npc-dialogue__speaker {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* --- SPELLBOOK --- */

/* Spell card name: magic deserves mystical letterforms */
.spell-card__name {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

/* Spellbook panel header */
.spellbook__title {
  font-family: var(--font-heading);
}

/* Spell detail view heading */
.spell-detail__name,
.spell-header__name {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Spell school label — italic Spectral for lore flavor */
.spell-card__school,
.spell-school {
  font-family: var(--font-body);
  font-style: italic;
}

/* --- MONSTER / COMBAT --- */

/* Monster name in stat blocks and combat tracker */
.monster-name,
.monster-stat-block__name,
.combat-tracker__creature-name,
.combatant-name {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* Combat round header */
.combat-round__header,
.round-label {
  font-family: var(--font-heading);
  letter-spacing: 0.03em;
}

/* --- QUEST LOG --- */

/* Quest card title: every quest is a heroic chapter */
.quest-card__title {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

/* Quest log panel header */
.quest-log__title {
  font-family: var(--font-heading);
}

/* Quest log section headers (Active, Completed, Failed) */
.quest-log__section-header {
  font-family: var(--font-heading);
}

/* --- INVENTORY --- */

/* Item names: every legendary sword deserves proper typography */
.inventory__item-name {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

/* Inventory panel header */
.inventory__title {
  font-family: var(--font-heading);
}

/* Inventory category section labels */
.inventory__category-header {
  font-family: var(--font-heading);
  letter-spacing: 0.04em;
}

/* Item description body text: lore and loot descriptions */
.item-description,
.inventory__item-description,
.item-lore {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* --- LORE / WORLD CONTENT --- */

/* Lore blocks: world history and location descriptions */
.lore-content,
.world-lore,
.lore-description,
.lore-entry__body {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* Location names in lore browser and map */
.location-name,
.lore-entry__title {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* --- NOTICE BOARD / PARTY JOURNAL --- */

/* Notice board post titles */
.notice-board__post-title,
.party-journal__entry-title {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

/* Party journal body text */
.party-journal__entry-body {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* --- NPC QUICK REFERENCE --- */

/* NPC reference panel headers */
.npc-quick-reference__title {
  font-family: var(--font-heading);
}

/* --- CHARACTER STORY / BACKGROUND --- */

/* Character backstory and trait text */
.character-story__content,
.character-background-text,
.character-trait-text {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* Character story section headers */
.character-story__section-title {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

/* --- MEMORIES --- */

/* Memory entry body text: narrative prose */
.memory-entry__content,
.memory-text {
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

/* ========================================
 * ACCESSIBILITY: REDUCED MOTION
 * Disable any text animations when reduced motion is preferred
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ancient-text,
  .magical-text {
    animation: none;
  }
}

/* ========================================
 * HIGH CONTRAST MODE SUPPORT
 * Ensure text remains readable in high contrast
 * ======================================== */

@media (prefers-contrast: high) {
  h1, h2, h3, h4, h5, h6,
  .heading,
  .fantasy-heading {
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.01em;
  }
}
/**
 * User Themes — Dark, Light & Greyscale
 * =======================================
 * Dark theme (default), light theme, greyscale theme, and fantasy pack.
 */

/*
 * Terminal D&D User Theme Presets
 * ================================
 * Theme Categories:
 *   Standard: Dark, Light, Greyscale
 *   Fantasy: Parchment, Dungeon, Arcane
 *   High Contrast: Solarized Dark, Solarized Light, Nord, Dracula
 *
 * Loaded after _tokens.css to override default values.
 * Applied via html[data-theme="X"] selectors.
 */

/* ========================================
 * DARK THEME (Default)
 * ======================================== */
html[data-theme="dark"] {
  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2d2d2d;
  --color-bg-tertiary: #3d3d3d;
  --color-bg-elevated: #404040;
  --color-bg-hover: #4a4a4a;

  /* Text Colors */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #888888;
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - Slightly muted */
  --color-accent-primary: #5a9fd8;
  --color-accent-secondary: #8ab56e;
  --color-accent-warning: #d4b06e;
  --color-accent-error: #cf6068;
  --color-accent-purple: #b56cc8;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #61afef;

  /* Semantic Colors */
  --color-hp-full: #8ab56e;
  --color-hp-mid: #d4b06e;
  --color-hp-low: #cf6068;
  --color-xp: #5a9fd8;
  --color-gold: #e8c44a;
  --color-error: #cf6068;
  --color-error-bg: rgba(207, 96, 104, 0.15);
  --color-error-muted: rgba(207, 96, 104, 0.3);

  /* Status Colors */
  --color-success-bg: rgba(138, 181, 110, 0.15);
  --color-success-text: #8ab56e;
  --color-warning-bg: rgba(212, 176, 110, 0.15);
  --color-warning-text: #d4b06e;
  --color-info-bg: rgba(90, 159, 216, 0.15);
  --color-info-text: #5a9fd8;
  --color-accent-bg: rgba(90, 159, 216, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 8px rgba(90, 159, 216, 0.3);

  /* Scrollbar */
  --scrollbar-track-color: #1a1a1a;
  --scrollbar-thumb-color: #3d3d3d;
  --scrollbar-thumb-hover-color: #404040;
}

/* ========================================
 * LIGHT THEME
 * ======================================== */
html[data-theme="light"] {
  /* Background Colors */
  --color-bg-primary: #f8f9fa;
  --color-bg-secondary: #e9ecef;
  --color-bg-tertiary: #dee2e6;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #ced4da;

  /* Text Colors */
  --color-text-primary: #212529;
  --color-text-secondary: #495057;
  --color-text-muted: #868e96;
  --color-text-inverse: #f8f9fa;

  /* Accent Colors - Darker for contrast on light bg */
  --color-accent-primary: #2563eb;
  --color-accent-secondary: #16a34a;
  --color-accent-warning: #ca8a04;
  --color-accent-error: #dc2626;
  --color-accent-purple: #9333ea;

  /* Border Colors */
  --color-border-default: #ced4da;
  --color-border-subtle: #dee2e6;
  --color-border-focus: #2563eb;

  /* Semantic Colors */
  --color-hp-full: #16a34a;
  --color-hp-mid: #ca8a04;
  --color-hp-low: #dc2626;
  --color-xp: #2563eb;
  --color-gold: #b8860b;

  /* Status Colors */
  --color-success-bg: rgba(22, 163, 74, 0.1);
  --color-success-text: #16a34a;
  --color-warning-bg: rgba(202, 138, 4, 0.1);
  --color-warning-text: #ca8a04;
  --color-info-bg: rgba(37, 99, 235, 0.1);
  --color-info-text: #2563eb;
  --color-accent-bg: rgba(37, 99, 235, 0.08);

  /* Shadows - Lighter for light theme */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 12px rgba(37, 99, 235, 0.3);

  /* Scrollbar */
  --scrollbar-track-color: #f8f9fa;
  --scrollbar-thumb-color: #ced4da;
  --scrollbar-thumb-hover-color: #adb5bd;
}

/* ========================================
 * GREYSCALE THEME
 * True monochrome - NO color whatsoever
 * Uses CSS filter to force ALL colors to greyscale
 * ======================================== */
html[data-theme="greyscale"] {
  /* Force everything to greyscale via filter */
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);

  /* Background Colors */
  --color-bg-primary: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-bg-tertiary: #3a3a3a;
  --color-bg-elevated: #444444;
  --color-bg-hover: #4a4a4a;

  /* Text Colors */
  --color-text-primary: #d0d0d0;
  --color-text-secondary: #909090;
  --color-text-muted: #606060;
  --color-text-inverse: #1a1a1a;

  /* Accent Colors - All greyscale */
  --color-accent-primary: #a0a0a0;
  --color-accent-secondary: #b0b0b0;
  --color-accent-warning: #c0c0c0;
  --color-accent-error: #808080;
  --color-accent-purple: #9a9a9a;

  /* Accent Aliases - Force greyscale */
  --color-accent-blue: #a0a0a0;
  --color-accent-green: #b0b0b0;
  --color-accent-yellow: #c0c0c0;
  --color-accent-red: #808080;
  --color-accent-gold: #c0c0c0;
  --color-accent: #a0a0a0;
  --color-accent-light: #c0c0c0;

  /* Border Colors */
  --color-border-default: #404040;
  --color-border-subtle: #333333;
  --color-border-focus: #a0a0a0;

  /* Semantic Colors */
  --color-hp-full: #c0c0c0;
  --color-hp-mid: #909090;
  --color-hp-low: #606060;
  --color-xp: #a0a0a0;
  --color-gold: #d0d0d0;

  /* Status Colors */
  --color-success-bg: rgba(176, 176, 176, 0.15);
  --color-success-text: #b0b0b0;
  --color-warning-bg: rgba(192, 192, 192, 0.15);
  --color-warning-text: #c0c0c0;
  --color-info-bg: rgba(160, 160, 160, 0.15);
  --color-info-text: #a0a0a0;
  --color-accent-bg: rgba(160, 160, 160, 0.1);

  /* Entry/Log Colors - All greyscale */
  --color-entry-dm: #9a9a9a;
  --color-entry-player: #a0a0a0;
  --color-entry-system: #c0c0c0;
  --color-entry-error: #808080;
  --color-entry-roll: #a0a0a0;
  --color-entry-combat: #808080;
  --color-entry-npc: #9a9a9a;
  --color-entry-item: #c0c0c0;
  --color-entry-location: #b0b0b0;

  /* Split Divider */
  --split-divider-hover-color: #a0a0a0;

  /* Legacy Aliases */
  --accent-primary: #a0a0a0;
  --accent-secondary: #b0b0b0;
  --accent-warning: #c0c0c0;
  --accent-error: #808080;
  --accent-purple: #9a9a9a;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 12px rgba(160, 160, 160, 0.3);

  /* Scrollbar */
  --scrollbar-track-color: #1a1a1a;
  --scrollbar-thumb-color: #3a3a3a;
  --scrollbar-thumb-hover-color: #444444;
}

/* ========================================
 * FANTASY PACK
 * ======================================== */

/* ----------------------------------------
 * PARCHMENT THEME
 * Warm, aged paper feel - perfect for reading
 * ---------------------------------------- */
html[data-theme="parchment"] {
  /* Background Colors - Warm cream/beige */
  --color-bg-primary: #f4e8d1;
  --color-bg-secondary: #e8dcc6;
  --color-bg-tertiary: #dcd0ba;
  --color-bg-elevated: #faf4e8;
  --color-bg-hover: #d0c4ae;

  /* Text Colors - Rich brown tones */
  --color-text-primary: #3d2914;
  --color-text-secondary: #5c4a32;
  --color-text-muted: #8b7355;
  --color-text-inverse: #f4e8d1;

  /* Accent Colors - Burgundy and forest */
  --color-accent-primary: #8b2942;
  --color-accent-secondary: #2d5a27;
  --color-accent-warning: #b8860b;
  --color-accent-error: #a52a2a;
  --color-accent-purple: #6b3a6b;

  /* Border Colors */
  --color-border-default: #c4b89c;
  --color-border-subtle: #d4c8ac;
  --color-border-focus: #8b2942;

  /* Semantic Colors */
  --color-hp-full: #2d5a27;
  --color-hp-mid: #b8860b;
  --color-hp-low: #a52a2a;
  --color-xp: #8b2942;
  --color-gold: #8b7500;

  /* Status Colors */
  --color-success-bg: rgba(45, 90, 39, 0.12);
  --color-success-text: #2d5a27;
  --color-warning-bg: rgba(184, 134, 11, 0.12);
  --color-warning-text: #8b6914;
  --color-info-bg: rgba(139, 41, 66, 0.1);
  --color-info-text: #8b2942;
  --color-accent-bg: rgba(139, 41, 66, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(61, 41, 20, 0.1);
  --shadow-md: 0 4px 8px rgba(61, 41, 20, 0.12);
  --shadow-lg: 0 8px 16px rgba(61, 41, 20, 0.15);
  --shadow-xl: 0 12px 24px rgba(61, 41, 20, 0.2);
  --shadow-glow: 0 0 12px rgba(139, 41, 66, 0.25);

  /* Scrollbar */
  --scrollbar-track-color: #e8dcc6;
  --scrollbar-thumb-color: #c4b89c;
  --scrollbar-thumb-hover-color: #b4a88c;
}

/* ----------------------------------------
 * DUNGEON THEME
 * Deep stone grey with torch-lit warmth
 * ---------------------------------------- */
html[data-theme="dungeon"] {
  /* Background Colors - Stone grey */
  --color-bg-primary: #1c1c1e;
  --color-bg-secondary: #2c2c30;
  --color-bg-tertiary: #3c3c42;
  --color-bg-elevated: #44444a;
  --color-bg-hover: #4c4c54;

  /* Text Colors - Warm grey */
  --color-text-primary: #d4cfc5;
  --color-text-secondary: #a09a90;
  --color-text-muted: #6a665e;
  --color-text-inverse: #1c1c1e;

  /* Accent Colors - Torch/amber tones */
  --color-accent-primary: #e5a04a;
  --color-accent-secondary: #7a9e5a;
  --color-accent-warning: #d4a84a;
  --color-accent-error: #c45a4a;
  --color-accent-purple: #9a7abc;

  /* Border Colors */
  --color-border-default: #4a4a50;
  --color-border-subtle: #3a3a40;
  --color-border-focus: #e5a04a;

  /* Semantic Colors */
  --color-hp-full: #7a9e5a;
  --color-hp-mid: #d4a84a;
  --color-hp-low: #c45a4a;
  --color-xp: #e5a04a;
  --color-gold: #ffc34a;

  /* Status Colors */
  --color-success-bg: rgba(122, 158, 90, 0.15);
  --color-success-text: #7a9e5a;
  --color-warning-bg: rgba(212, 168, 74, 0.15);
  --color-warning-text: #d4a84a;
  --color-info-bg: rgba(229, 160, 74, 0.12);
  --color-info-text: #e5a04a;
  --color-accent-bg: rgba(229, 160, 74, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 16px rgba(229, 160, 74, 0.35);

  /* Scrollbar */
  --scrollbar-track-color: #1c1c1e;
  --scrollbar-thumb-color: #4a4a50;
  --scrollbar-thumb-hover-color: #5a5a60;
}

/* ----------------------------------------
 * ARCANE THEME
 * Mystical purple with magical glow
 * ---------------------------------------- */
html[data-theme="arcane"] {
  /* Background Colors - Deep purple/indigo */
  --color-bg-primary: #12101a;
  --color-bg-secondary: #1e1a2e;
  --color-bg-tertiary: #2a2640;
  --color-bg-elevated: #342e4a;
  --color-bg-hover: #3e3854;

  /* Text Colors - Soft lavender */
  --color-text-primary: #e0daf0;
  --color-text-secondary: #a8a0c0;
  --color-text-muted: #6a6480;
  --color-text-inverse: #12101a;

  /* Accent Colors - Magical purple/cyan */
  --color-accent-primary: #b366ff;
  --color-accent-secondary: #66ffcc;
  --color-accent-warning: #ffb366;
  --color-accent-error: #ff6688;
  --color-accent-purple: #cc66ff;

  /* Border Colors */
  --color-border-default: #3a3450;
  --color-border-subtle: #2a2640;
  --color-border-focus: #b366ff;

  /* Semantic Colors */
  --color-hp-full: #66ffcc;
  --color-hp-mid: #ffb366;
  --color-hp-low: #ff6688;
  --color-xp: #b366ff;
  --color-gold: #ffd966;

  /* Status Colors */
  --color-success-bg: rgba(102, 255, 204, 0.12);
  --color-success-text: #66ffcc;
  --color-warning-bg: rgba(255, 179, 102, 0.12);
  --color-warning-text: #ffb366;
  --color-info-bg: rgba(179, 102, 255, 0.12);
  --color-info-text: #b366ff;
  --color-accent-bg: rgba(179, 102, 255, 0.1);

  /* Shadows - Purple glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 20px rgba(179, 102, 255, 0.5);

  /* Scrollbar */
  --scrollbar-track-color: #12101a;
  --scrollbar-thumb-color: #3a3450;
  --scrollbar-thumb-hover-color: #4a4460;
/**
 * User Themes — High Contrast & Retro
 * =====================================
 * High contrast accessibility pack and retro CRT pack.
 */


/* ========================================
 * HIGH CONTRAST PACK
 * ======================================== */

/* ----------------------------------------
 * SOLARIZED DARK THEME
 * Classic Solarized dark color scheme
 * ---------------------------------------- */
html[data-theme="solarized-dark"] {
  /* Background Colors */
  --color-bg-primary: #002b36;
  --color-bg-secondary: #073642;
  --color-bg-tertiary: #094552;
  --color-bg-elevated: #0b5262;
  --color-bg-hover: #0d5f72;

  /* Text Colors */
  --color-text-primary: #839496;
  --color-text-secondary: #657b83;
  --color-text-muted: #586e75;
  --color-text-inverse: #002b36;

  /* Accent Colors - Solarized palette */
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #859900;
  --color-accent-warning: #b58900;
  --color-accent-error: #dc322f;
  --color-accent-purple: #6c71c4;

  /* Border Colors */
  --color-border-default: #094552;
  --color-border-subtle: #073642;
  --color-border-focus: #268bd2;

  /* Semantic Colors */
  --color-hp-full: #859900;
  --color-hp-mid: #b58900;
  --color-hp-low: #dc322f;
  --color-xp: #268bd2;
  --color-gold: #b58900;

  /* Status Colors */
  --color-success-bg: rgba(133, 153, 0, 0.15);
  --color-success-text: #859900;
  --color-warning-bg: rgba(181, 137, 0, 0.15);
  --color-warning-text: #b58900;
  --color-info-bg: rgba(38, 139, 210, 0.15);
  --color-info-text: #268bd2;
  --color-accent-bg: rgba(38, 139, 210, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 12px rgba(38, 139, 210, 0.4);

  /* Scrollbar */
  --scrollbar-track-color: #002b36;
  --scrollbar-thumb-color: #094552;
  --scrollbar-thumb-hover-color: #0b5262;
}

/* ----------------------------------------
 * SOLARIZED LIGHT THEME
 * Classic Solarized light color scheme
 * ---------------------------------------- */
html[data-theme="solarized-light"] {
  /* Background Colors */
  --color-bg-primary: #fdf6e3;
  --color-bg-secondary: #eee8d5;
  --color-bg-tertiary: #e4dec8;
  --color-bg-elevated: #ffffff;
  --color-bg-hover: #d9d3bb;

  /* Text Colors */
  --color-text-primary: #657b83;
  --color-text-secondary: #839496;
  --color-text-muted: #93a1a1;
  --color-text-inverse: #fdf6e3;

  /* Accent Colors - Solarized palette */
  --color-accent-primary: #268bd2;
  --color-accent-secondary: #859900;
  --color-accent-warning: #b58900;
  --color-accent-error: #dc322f;
  --color-accent-purple: #6c71c4;

  /* Border Colors */
  --color-border-default: #d9d3bb;
  --color-border-subtle: #eee8d5;
  --color-border-focus: #268bd2;

  /* Semantic Colors */
  --color-hp-full: #859900;
  --color-hp-mid: #b58900;
  --color-hp-low: #dc322f;
  --color-xp: #268bd2;
  --color-gold: #b58900;

  /* Status Colors */
  --color-success-bg: rgba(133, 153, 0, 0.1);
  --color-success-text: #859900;
  --color-warning-bg: rgba(181, 137, 0, 0.1);
  --color-warning-text: #b58900;
  --color-info-bg: rgba(38, 139, 210, 0.1);
  --color-info-text: #268bd2;
  --color-accent-bg: rgba(38, 139, 210, 0.08);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 12px rgba(38, 139, 210, 0.25);

  /* Scrollbar */
  --scrollbar-track-color: #fdf6e3;
  --scrollbar-thumb-color: #d9d3bb;
  --scrollbar-thumb-hover-color: #c9c3ab;
}

/* ----------------------------------------
 * NORD THEME
 * Arctic, north-bluish color palette
 * ---------------------------------------- */
html[data-theme="nord"] {
  /* Background Colors - Polar Night */
  --color-bg-primary: #2e3440;
  --color-bg-secondary: #3b4252;
  --color-bg-tertiary: #434c5e;
  --color-bg-elevated: #4c566a;
  --color-bg-hover: #545e72;

  /* Text Colors - Snow Storm */
  --color-text-primary: #eceff4;
  --color-text-secondary: #d8dee9;
  --color-text-muted: #7b88a1;
  --color-text-inverse: #2e3440;

  /* Accent Colors - Frost & Aurora */
  --color-accent-primary: #88c0d0;
  --color-accent-secondary: #a3be8c;
  --color-accent-warning: #ebcb8b;
  --color-accent-error: #bf616a;
  --color-accent-purple: #b48ead;

  /* Border Colors */
  --color-border-default: #4c566a;
  --color-border-subtle: #434c5e;
  --color-border-focus: #88c0d0;

  /* Semantic Colors */
  --color-hp-full: #a3be8c;
  --color-hp-mid: #ebcb8b;
  --color-hp-low: #bf616a;
  --color-xp: #88c0d0;
  --color-gold: #ebcb8b;

  /* Status Colors */
  --color-success-bg: rgba(163, 190, 140, 0.15);
  --color-success-text: #a3be8c;
  --color-warning-bg: rgba(235, 203, 139, 0.15);
  --color-warning-text: #ebcb8b;
  --color-info-bg: rgba(136, 192, 208, 0.15);
  --color-info-text: #88c0d0;
  --color-accent-bg: rgba(136, 192, 208, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 12px rgba(136, 192, 208, 0.35);

  /* Scrollbar */
  --scrollbar-track-color: #2e3440;
  --scrollbar-thumb-color: #4c566a;
  --scrollbar-thumb-hover-color: #5e6a82;
}

/* ----------------------------------------
 * DRACULA THEME
 * Dark purple-ish theme with vibrant accents
 * ---------------------------------------- */
html[data-theme="dracula"] {
  /* Background Colors */
  --color-bg-primary: #282a36;
  --color-bg-secondary: #343746;
  --color-bg-tertiary: #3e4254;
  --color-bg-elevated: #484c62;
  --color-bg-hover: #525670;

  /* Text Colors */
  --color-text-primary: #f8f8f2;
  --color-text-secondary: #bfbfbf;
  --color-text-muted: #6272a4;
  --color-text-inverse: #282a36;

  /* Accent Colors - Dracula palette */
  --color-accent-primary: #bd93f9;
  --color-accent-secondary: #50fa7b;
  --color-accent-warning: #f1fa8c;
  --color-accent-error: #ff5555;
  --color-accent-purple: #ff79c6;

  /* Border Colors */
  --color-border-default: #44475a;
  --color-border-subtle: #3a3d4e;
  --color-border-focus: #bd93f9;

  /* Semantic Colors */
  --color-hp-full: #50fa7b;
  --color-hp-mid: #f1fa8c;
  --color-hp-low: #ff5555;
  --color-xp: #bd93f9;
  --color-gold: #f1fa8c;

  /* Status Colors */
  --color-success-bg: rgba(80, 250, 123, 0.15);
  --color-success-text: #50fa7b;
  --color-warning-bg: rgba(241, 250, 140, 0.15);
  --color-warning-text: #f1fa8c;
  --color-info-bg: rgba(189, 147, 249, 0.15);
  --color-info-text: #bd93f9;
  --color-accent-bg: rgba(189, 147, 249, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 14px rgba(189, 147, 249, 0.45);

  /* Scrollbar */
  --scrollbar-track-color: #282a36;
  --scrollbar-thumb-color: #44475a;
  --scrollbar-thumb-hover-color: #5a5e7a;
}

/* ========================================
 * RETRO PACK
 * ======================================== */

/* ----------------------------------------
 * NEOTERM THEME
 * 8-bit CRT aesthetic (ZX Spectrum palette)
 * ---------------------------------------- */
html[data-theme="neoterm"] {
  /* Background Colors - CRT black */
  --color-bg-primary: #0a0a0a;
  --color-bg-secondary: #141420;
  --color-bg-tertiary: #1a1a2e;
  --color-bg-elevated: #22223a;
  --color-bg-hover: #2a2a44;

  /* Text Colors - Bright white phosphor */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #a0a0a0;
  --color-text-muted: #606080;
  --color-text-inverse: #0a0a0a;

  /* Accent Colors - Softened ZX Spectrum */
  --color-accent-primary: #4ab8b8;   /* Cyan - desaturated */
  --color-accent-secondary: #5ab85a; /* Green - desaturated */
  --color-accent-warning: #c8c85a;   /* Yellow - desaturated */
  --color-accent-error: #c85a5a;     /* Red - desaturated */
  --color-accent-purple: #b85ab8;    /* Magenta - desaturated */

  /* ZX Spectrum softened palette (extra vars) */
  --color-zx-black: #0a0a0a;
  --color-zx-blue: #4a4ab8;
  --color-zx-red: #c85a5a;
  --color-zx-magenta: #b85ab8;
  --color-zx-green: #5ab85a;
  --color-zx-cyan: #4ab8b8;
  --color-zx-yellow: #c8c85a;
  --color-zx-white: #d0d0d0;

  /* Border Colors - Dark blue-tinted */
  --color-border-default: #2a2a4a;
  --color-border-subtle: #1a1a3a;
  --color-border-focus: #4ab8b8;

  /* Semantic Colors - Softened 8-bit */
  --color-hp-full: #5ab85a;
  --color-hp-mid: #c8c85a;
  --color-hp-low: #c85a5a;
  --color-xp: #4a4ab8;
  --color-gold: #c8c85a;

  /* Status Colors */
  --color-success-bg: rgba(90, 184, 90, 0.12);
  --color-success-text: #5ab85a;
  --color-warning-bg: rgba(200, 200, 90, 0.12);
  --color-warning-text: #c8c85a;
  --color-info-bg: rgba(74, 184, 184, 0.12);
  --color-info-text: #4ab8b8;
  --color-accent-bg: rgba(74, 184, 184, 0.08);

  /* Shadows - Softened cyan phosphor glow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 10px rgba(74, 184, 184, 0.25);

  /* Scrollbar */
  --scrollbar-track-color: #0a0a0a;
  --scrollbar-thumb-color: #2a2a4a;
  --scrollbar-thumb-hover-color: #3a3a5a;
}
/**
 * Terminal D&D User Theme Presets — Import Hub
 * ===============================================
 * Dark, light, greyscale, fantasy, high contrast, and retro theme presets.
 *
 * Decomposed into focused files under user_themes/ for maintainability.


 */
/*
 * Atomic Design: Atoms
 * ====================
 * Smallest UI components: buttons, badges, chips, inputs, icons.
 * Uses design tokens from: terminal/_tokens.css
 */

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--elevation-base);
  transition: border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px; /* Mobile touch target */
}

/* Use focus-visible only - don't show focus ring on mouse click */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Button elevation and hover feedback */
.btn:hover:not(:disabled) {
  box-shadow: var(--elevation-raised);
  transform: translateY(-1px);
}

/* Button press feedback - tactile 50ms response with scale */
.btn:active:not(:disabled) {
  box-shadow: var(--elevation-base);
  transform: translateY(0) scale(0.96);
  transition: transform 50ms ease;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(30%);
}

/* Ensure hover effects don't apply to disabled buttons */
.btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Button Sizes */
.btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.btn--md {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}

.btn--lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
}

/* Button Variants */
.btn--primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-primary) 110%, white),
    var(--color-accent-primary)
  );
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-primary) 120%, white),
    color-mix(in srgb, var(--color-accent-primary) 95%, white)
  );
  border-color: var(--color-accent-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn--primary:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.3);
}

.btn--secondary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-bg-secondary) 105%, white),
    var(--color-bg-secondary)
  );
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn--secondary:hover:not(:disabled) {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-bg-tertiary) 105%, white),
    var(--color-bg-tertiary)
  );
  border-color: var(--color-border-focus);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.2),
    0 2px 6px rgba(0, 0, 0, 0.15);
}

.btn--secondary:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(0, 0, 0, 0.2);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn--ghost:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.btn--danger {
  background: var(--color-accent-error);
  color: white;
  border-color: var(--color-accent-error);
}

.btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-error) 85%, black);
  border-color: color-mix(in srgb, var(--color-accent-error) 85%, black);
}

.btn__icon {
  display: flex;
  align-items: center;
  font-size: 1em;
}

.btn__text {
  display: flex;
  align-items: center;
}

/* Icon-only button (square, centered icon) */
.btn--icon {
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1;
}

/* Full-width button (mobile utility) */
.btn--full {
  width: 100%;
}

/* Success pulse animation */
@keyframes btn-success-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.btn--success-pulse {
  animation: btn-success-pulse 400ms var(--ease-out-back);
}

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

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Badge Sizes */
.badge--sm {
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
}

.badge--md {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

/* Badge Variants */
.badge--default {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.badge--success {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
}

.badge--warning {
  background: color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
  color: var(--color-accent-warning);
}

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

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

.badge__icon {
  font-size: 0.9em;
}

/* ========================================
 * Chips
 * Extends selection-base for consistent selection behavior
 * See _selection_base.css for shared selection styles
 * ======================================== */

.chip {
  /* Inherit selection base styles via CSS custom properties */
  --selection-border-radius: var(--radius-full);
  --selection-accent: var(--color-accent-primary);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--selection-bg, var(--color-bg-secondary));
  border: 1px solid var(--selection-border, var(--color-border-default));
  border-radius: var(--selection-border-radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--selection-text, var(--color-text-secondary));
  cursor: pointer;
  transition: var(--selection-transition, all var(--transition-fast));
}

.chip:hover:not(.chip--disabled) {
  background: var(--selection-bg-hover, var(--color-bg-tertiary));
  border-color: var(--selection-border-hover, var(--color-border-focus));
  color: var(--selection-text-hover, var(--color-text-primary));
}

/* Use focus-visible only - don't show focus ring on mouse click */
.chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.chip--selected {
  background: var(--selection-bg-selected, color-mix(in srgb, var(--selection-accent) 20%, var(--selection-bg)));
  border-color: var(--selection-border-selected, var(--selection-accent));
  color: var(--selection-text-selected, var(--selection-accent));
}

.chip--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* Chip--dimmed state (when others are selected) */
.chip--dimmed {
  opacity: 0.5;
}

.chip--dimmed:hover:not(.chip--disabled) {
  opacity: 0.8;
}

/* Chip Variants - Override accent color */
.chip--skill {
  --selection-accent: var(--color-accent-secondary);
  border-color: var(--selection-accent);
}

.chip--skill.chip--selected {
  background: color-mix(in srgb, var(--selection-accent) 20%, var(--color-bg-secondary));
  border-color: var(--selection-accent);
  color: var(--selection-accent);
}

.chip--spell {
  --selection-accent: var(--color-accent-primary);
  border-color: var(--selection-accent);
}

.chip--spell.chip--selected {
  background: color-mix(in srgb, var(--selection-accent) 20%, var(--color-bg-secondary));
  border-color: var(--selection-accent);
  color: var(--selection-accent);
}

.chip--equipment {
  --selection-accent: var(--color-accent-warning);
  border-color: var(--selection-accent);
}

.chip--equipment.chip--selected {
  background: color-mix(in srgb, var(--selection-accent) 20%, var(--color-bg-secondary));
  border-color: var(--selection-accent);
  color: var(--selection-accent);
}

.chip__text {
  line-height: 1;
}

.chip__check {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip__check::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-bg-primary);
}

/* ========================================
 * Inputs
 * ======================================== */

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  transition: border-color var(--transition-normal) var(--ease-out-back),
              box-shadow var(--transition-normal) var(--ease-out-back),
              transform var(--transition-fast);
}

.input::placeholder {
  color: var(--color-text-muted);
}

.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);
  transform: translateY(-1px);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

/* Input Sizes */
.input--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

.input--lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
}

/* ========================================
 * Stat Values
 * ======================================== */

.stat-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.stat-value__label {
  color: var(--color-text-muted);
}

.stat-value__number {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Stat Value Variants */
.stat-value--success .stat-value__number {
  color: var(--color-accent-success);
}

.stat-value--warning .stat-value__number {
  color: var(--color-accent-warning);
}

.stat-value--danger .stat-value__number {
  color: var(--color-accent-error);
}

/* ========================================
 * Icons
 * ======================================== */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

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

.icon--md {
  font-size: var(--font-size-base);
}

.icon--lg {
  font-size: var(--font-size-xl);
}

/* ========================================
 * Section Titles
 * ======================================== */

.section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================
 * Tab Button (for tab navigation)
 * ======================================== */

.tab-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tab-btn:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
}

.tab-btn.active,
.tab-btn--active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

/* ========================================
 * Equipment Selection Cards
 * Full-width clickable cards for equipment choices
 * Uses selection-base custom properties for theming
 * ======================================== */

.equipment-card {
  /* Selection theming - equipment uses warning/gold accent */
  --selection-accent: var(--color-accent-warning);
  --selection-border-radius: var(--radius-lg);

  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  background: var(--selection-bg, var(--color-bg-secondary));
  border: 2px solid var(--selection-border, var(--color-border-default));
  border-radius: var(--selection-border-radius);
  font-family: var(--font-mono);
  cursor: pointer;
  box-shadow: var(--elevation-base);
  transition: var(--selection-transition, all var(--transition-normal));
  position: relative;
}

.equipment-card:hover:not(.equipment-card--disabled) {
  background: var(--selection-bg-hover, var(--color-bg-tertiary));
  border-color: var(--selection-border-hover, var(--selection-accent));
  box-shadow: var(--elevation-raised);
  transform: translateX(2px) translateY(-1px);
}

/* Use focus-visible only - don't show focus ring on mouse click */
.equipment-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Selected state */
.equipment-card--selected {
  background: var(--selection-bg-selected, color-mix(in srgb, var(--selection-accent) 15%, var(--color-bg-secondary)));
  border-color: var(--selection-border-selected, var(--selection-accent));
}

.equipment-card--selected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--selection-accent);
  border-radius: var(--selection-border-radius) var(--selection-border-radius) 0 0;
}

/* Disabled state */
.equipment-card--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* Dimmed state (when others are selected) */
.equipment-card--dimmed {
  opacity: 0.5;
}

.equipment-card--dimmed:hover:not(.equipment-card--disabled) {
  opacity: 0.8;
}

/* Recommended indicator */
.equipment-card--recommended {
  --selection-accent: var(--color-accent-secondary);
  border-color: var(--selection-accent);
}

.equipment-card--recommended::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--selection-accent);
  border-radius: var(--selection-border-radius) var(--selection-border-radius) 0 0;
}

.equipment-card--recommended:hover {
  border-color: var(--selection-accent);
}

/* Option key badge (A, B, C) */
.equipment-card__key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  flex-shrink: 0;
}

.equipment-card--selected .equipment-card__key {
  background: var(--color-accent-warning);
  border-color: var(--color-accent-warning);
  color: var(--color-bg-primary);
}

.equipment-card--recommended .equipment-card__key {
  border-color: var(--color-accent-secondary);
}

/* Content area */
.equipment-card__content {
  flex: 1;
  min-width: 0;
}

.equipment-card__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

/* Individual item row */
.equipment-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.equipment-card__item-icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.equipment-card__item-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.equipment-card__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-normal);
}

/* Badges row */
.equipment-card__badges {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

/* Recommended badge */
.equipment-card__badge--recommended {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-card__badge--recommended::before {
  content: '\2713'; /* Checkmark */
  font-size: var(--font-size-xs);
}

/* Selection checkmark */
.equipment-card__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}

.equipment-card--selected .equipment-card__check {
  background: var(--color-accent-warning);
  border-color: var(--color-accent-warning);
}

.equipment-card--selected .equipment-card__check::after {
  content: '\2713';
  color: var(--color-bg-primary);
  font-size: var(--font-size-sm);
  font-weight: bold;
}

/* Equipment choice group */
.equipment-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.equipment-choice-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.equipment-choice-group__label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-choice-group__hint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.equipment-choice-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Tooltip for equipment details */
.equipment-tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
  z-index: var(--z-tooltip);
}

.equipment-card:hover .equipment-tooltip {
  opacity: 1;
  visibility: visible;
}

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

/* ========================================
 * Global Focus Utilities (Accessibility)
 * ======================================== */

/* Universal focus-visible utility for interactive elements */
[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset, 2px);
}

/* Alternative: Use box-shadow for elements that can't use outline */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-md);
  z-index: var(--z-notification);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-2);
}

/* ========================================
 * Card Hover Lift Effects
 * Applied to clickable cards for enhanced interactivity
 * ======================================== */

.card-hover-lift {
  transition: transform var(--transition-normal) var(--ease-out-back),
              box-shadow var(--transition-normal) var(--ease-out-back);
}

.card-hover-lift:hover:not(:disabled):not(.card-hover-lift--disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-hover-lift:active:not(:disabled):not(.card-hover-lift--disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

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

@media (prefers-reduced-motion: reduce) {
  .btn,
  .badge,
  .chip,
  .input,
  .tab-btn,
  .equipment-card,
  .card-hover-lift {
    transition: none;
    animation: none;
  }

  .btn:hover:not(:disabled),
  .btn:active:not(:disabled) {
    transform: none;
  }

  .equipment-card:hover:not(.equipment-card--disabled) {
    transform: none;
  }

  .card-hover-lift:hover:not(:disabled):not(.card-hover-lift--disabled) {
    transform: none;
  }

  .input:focus {
    transform: none;
  }
}

/* ========================================
 * Skeleton Loading Atoms
 * Placeholder content shown while async data loads
 * ======================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary, #2a2a4a) 25%,
    var(--color-bg-elevated, #353555) 50%,
    var(--color-bg-tertiary, #2a2a4a) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm, 4px);
}

.skeleton--text {
  height: 14px;
  margin-bottom: var(--space-2, 8px);
}

.skeleton--text-sm {
  height: 12px;
  width: 60%;
}

.skeleton--text-lg {
  height: 18px;
  width: 80%;
}

.skeleton--heading {
  height: 20px;
  width: 40%;
  margin-bottom: var(--space-3, 12px);
}

.skeleton--box {
  height: 60px;
  margin-bottom: var(--space-2, 8px);
}

.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton--badge {
  width: 60px;
  height: 24px;
  border-radius: var(--radius-md, 6px);
}

.skeleton--chip {
  width: 80px;
  height: 28px;
  border-radius: var(--radius-full, 9999px);
  display: inline-block;
  margin-right: var(--space-2, 8px);
}

/* Skeleton row for list items */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}

.skeleton-row .skeleton--text {
  flex: 1;
  margin-bottom: 0;
}

/* Skeleton panel content */
.skeleton-panel {
  padding: var(--space-3, 12px);
}

.skeleton-panel .skeleton--text:last-child {
  margin-bottom: 0;
  width: 40%;
}

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

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--color-bg-tertiary, #2a2a4a);
  }
}

/* Desktop: Relax touch-target minimums */
@media (min-width: 1024px) {
  .btn {
    min-height: auto;
  }

  .btn--icon {
    min-width: auto;
    min-height: auto;
  }
}

/* Only show hover states on devices that support hover (not touch) */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) {
    /* Hover styles only for mouse/trackpad */
  }

  .chip:hover:not(.chip--disabled) {
    /* Hover styles */
  }
}

/* Touch devices: Use active state instead of hover */
@media (hover: none), (pointer: coarse) {
  .btn:active:not(:disabled) {
    opacity: 0.8;
    transform: scale(0.98);
  }

  .chip:active:not(.chip--disabled) {
    opacity: 0.8;
  }
}

/* ========================================
 * Equipment Panel Note
 * ======================================== */

.equipment-panel-note {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin: var(--space-2, 8px) 0;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 13px);
}

.equipment-note-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-accent-warning, #fbbf24);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-bg-primary, #1a1a2e);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-bold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.equipment-note-text {
  color: var(--color-text-secondary, #b0b0b0);
  line-height: 1.4;
}

/* ========================================
 * Contextual Help Button
 * ======================================== */

.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: var(--space-2, 8px);
  background: var(--color-bg-tertiary, #2a2a4a);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 50%;
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold, 600);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s) ease, border-color var(--transition-fast, 0.15s) ease, color var(--transition-fast, 0.15s) ease, transform var(--transition-fast, 0.15s) ease;
  vertical-align: middle;
}

.help-btn:hover {
  background: var(--color-accent-primary, #4a9eff);
  border-color: var(--color-accent-primary, #4a9eff);
  color: #fff;
  transform: scale(1.1);
}

/* Use focus-visible only - don't show focus ring on mouse click */
.help-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

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

/* Smaller variant for inline use */
.help-btn--sm {
  width: 16px;
  height: 16px;
  font-size: var(--font-size-xs);
  margin-left: var(--space-1, 4px);
}

/* ========================================
 * Help Popover
 * ======================================== */

.help-popover {
  position: fixed;
  z-index: var(--z-sky);
  max-width: 360px;
  padding: var(--space-4, 16px);
  background: var(--color-bg-secondary, #252545);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--elevation-modal);
  opacity: 0;
  transform: translateY(-8px);
  animation: helpPopoverIn 0.2s ease forwards;
}

@keyframes helpPopoverIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.help-popover--closing {
  animation: helpPopoverOut 0.15s ease forwards;
}

@keyframes helpPopoverOut {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.help-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.help-popover__title {
  font-size: var(--font-size-md, 14px);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-text-primary, #e0e0e0);
  margin: 0;
}

.help-popover__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background var(--transition-fast, 0.15s) ease, color var(--transition-fast, 0.15s) ease;
}

.help-popover__close:hover {
  background: var(--color-bg-tertiary, #2a2a4a);
  color: var(--color-text-primary, #e0e0e0);
}

.help-popover__content {
  font-size: var(--font-size-sm, 13px);
  line-height: 1.5;
  color: var(--color-text-secondary, #b0b0b0);
}

.help-popover__section {
  margin-bottom: var(--space-3, 12px);
}

.help-popover__section:last-child {
  margin-bottom: 0;
}

.help-popover__section-title {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-bold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent-primary, #4a9eff);
  margin-bottom: var(--space-1, 4px);
}

.help-popover__detailed {
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: var(--space-2, 8px);
}

.help-popover__concept {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: rgba(147, 112, 219, 0.1);
  border-left: 3px solid var(--color-accent-magic, #9370db);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  font-style: italic;
  color: var(--color-text-secondary, #b0b0b0);
}

.help-popover__tips {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-popover__tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
}

.help-popover__tip::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-lightbulb) no-repeat center / contain;
  flex-shrink: 0;
}

.help-popover__examples {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-popover__example {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin-bottom: var(--space-1, 4px);
  background: var(--color-bg-tertiary, #2a2a4a);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary, #b0b0b0);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .help-popover {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .help-popover--closing {
    animation: none;
    display: none;
  }
}

/* ========================================
 * Elevation Utilities
 * Subtle depth system for visual hierarchy
 * Uses tokens from: terminal/_tokens.css
 * ======================================== */

/* Base elevation classes - apply directly to elements */
.elevation-base {
  box-shadow: var(--elevation-base);
}

.elevation-raised {
  box-shadow: var(--elevation-raised);
}

.elevation-floating {
  box-shadow: var(--elevation-floating);
}

.elevation-modal {
  box-shadow: var(--elevation-modal);
}

/* Interactive elevation - hover raises element */
.elevation-interactive {
  box-shadow: var(--elevation-base);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.elevation-interactive:hover {
  box-shadow: var(--elevation-raised);
  transform: translateY(-1px);
}

.elevation-interactive:active {
  box-shadow: var(--elevation-base);
  transform: translateY(0);
}

/* Card elevation - common pattern for cards */
.elevation-card {
  box-shadow: var(--elevation-base);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.elevation-card:hover {
  box-shadow: var(--elevation-raised);
  transform: translateY(-2px);
}

/* Panel elevation - for sidebars and panels */
.elevation-panel {
  box-shadow: var(--elevation-raised);
}

/* Dropdown/menu elevation */
.elevation-dropdown {
  box-shadow: var(--elevation-floating);
}

/* Focus elevation - for accessibility */
.elevation-focus:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Elevation with glow variants */
.elevation-glow {
  box-shadow: var(--elevation-base), var(--shadow-glow-sm);
}

.elevation-glow-gold {
  box-shadow: var(--elevation-base), var(--shadow-glow-sm-gold);
}

.elevation-glow-success {
  box-shadow: var(--elevation-base), var(--shadow-glow-success);
}

.elevation-glow-error {
  box-shadow: var(--elevation-base), var(--shadow-glow-error);
}

/* No elevation (reset) */
.elevation-none {
  box-shadow: none;
}
/*
 * Atoms: Base UI Components
 * ==========================
 * Fundamental UI atoms: buttons, badges, chips, inputs, stat values, icons, tabs, equipment, help.
 *
 * Split into focused modules under atoms/:
 *   _form_elements.css       — Buttons, badges, chips, inputs, stat values, icons, section titles
 *   _tabs.css                — Tab button (tab navigation)
 *   _equipment_selection.css — Equipment selection cards
 *   _accessibility_loading.css — Global focus utilities, card hover lift, reduced motion, skeleton loading
 *   _help_elevation.css      — Equipment panel note, contextual help button, help popover, elevation utilities
 */






/*
 * Atomic Design: Selection Base
 * =============================
 * Shared base styles for all selection components (chips, cards, buttons).
 * Provides consistent theming through CSS custom properties.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Selection Custom Properties (defaults)
 * Override these in component-specific contexts
 * ======================================== */

:root {
  /* Selection Colors */
  --selection-bg: var(--color-bg-secondary);
  --selection-bg-hover: var(--color-bg-tertiary);
  --selection-bg-selected: color-mix(in srgb, var(--selection-accent) 15%, var(--selection-bg));
  --selection-bg-pending: color-mix(in srgb, var(--selection-accent-warning) 10%, var(--selection-bg));
  --selection-bg-disabled: var(--color-bg-tertiary);

  /* Selection Borders */
  --selection-border: var(--color-border-default);
  --selection-border-hover: var(--color-accent-primary);
  --selection-border-selected: var(--selection-accent, var(--color-accent-success));
  --selection-border-pending: var(--color-accent-warning);
  --selection-border-disabled: var(--color-border-subtle);

  /* Selection Text */
  --selection-text: var(--color-text-secondary);
  --selection-text-hover: var(--color-text-primary);
  --selection-text-selected: var(--selection-accent, var(--color-accent-success));
  --selection-text-pending: var(--color-accent-warning);
  --selection-text-disabled: var(--color-text-muted);

  /* Selection Accent (override per-variant) */
  --selection-accent: var(--color-accent-success);
  --selection-accent-warning: var(--color-accent-warning);

  /* Selection Sizing */
  --selection-padding-x: var(--space-3);
  --selection-padding-y: var(--space-2);
  --selection-border-radius: var(--radius-md);
  --selection-border-width: 1px;

  /* Selection Transitions */
  --selection-transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ========================================
 * Selection Base Class
 * Core styles shared by all selection elements
 * ======================================== */

.selection-base {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--selection-padding-y) var(--selection-padding-x);
  background: var(--selection-bg);
  border: var(--selection-border-width) solid var(--selection-border);
  border-radius: var(--selection-border-radius);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--selection-text);
  cursor: pointer;
  transition: var(--selection-transition);
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}

/* ========================================
 * Selection States
 * ======================================== */

/* Hover State */
.selection-base:hover:not(.selection-base--disabled):not(.selection-base--pending) {
  background: var(--selection-bg-hover);
  border-color: var(--selection-border-hover);
  color: var(--selection-text-hover);
}

/* Focus State */
.selection-base:focus {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--selection-accent) 30%, transparent);
}

.selection-base:focus-visible {
  outline: 2px solid var(--selection-accent);
  outline-offset: 2px;
}

/* Selected State */
.selection-base--selected {
  background: var(--selection-bg-selected);
  border-color: var(--selection-border-selected);
  color: var(--selection-text-selected);
}

.selection-base--selected:hover:not(.selection-base--disabled) {
  background: color-mix(in srgb, var(--selection-accent) 20%, var(--selection-bg));
}

/* Pending/Loading State */
.selection-base--pending {
  background: var(--selection-bg-pending);
  border-color: var(--selection-border-pending);
  color: var(--selection-text-pending);
  opacity: 0.8;
  pointer-events: none;
}

/* Disabled State */
.selection-base--disabled {
  background: var(--selection-bg-disabled);
  border-color: var(--selection-border-disabled);
  color: var(--selection-text-disabled);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dimmed State (for non-selected items when others are selected) */
.selection-base--dimmed {
  opacity: 0.5;
}

.selection-base--dimmed:hover:not(.selection-base--disabled) {
  opacity: 0.8;
}

/* Hidden State */
.selection-base--hidden {
  display: none;
}

/* ========================================
 * Selection Indicators
 * Checkmarks, spinners, badges
 * ======================================== */

/* Checkmark for selected state */
.selection-base__check {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selection-base--selected .selection-base__check {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--selection-accent);
}

.selection-base--selected .selection-base__check::before {
  content: '\2713';
  font-weight: bold;
  font-size: var(--font-size-sm);
}

/* Spinner for pending state */
.selection-base--pending::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--selection-padding-x);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid var(--selection-border-pending);
  border-top-color: transparent;
  border-radius: 50%;
  animation: selection-spin 0.6s linear infinite;
}

@keyframes selection-spin {
  to { transform: rotate(360deg); }
}

/* ========================================
 * Selection Variants (Color Themes)
 * ======================================== */

/* Primary variant (blue) */
.selection-base--primary {
  --selection-accent: var(--color-accent-primary);
}

/* Success variant (green) - default */
.selection-base--success {
  --selection-accent: var(--color-accent-success);
}

/* Warning variant (amber/gold) */
.selection-base--warning {
  --selection-accent: var(--color-accent-warning);
}

/* Danger variant (red) */
.selection-base--danger {
  --selection-accent: var(--color-accent-error);
}

/* Purple variant (for spells/magic) */
.selection-base--purple {
  --selection-accent: #8a2be2;
}

/* Gold variant (for equipment/treasure) */
.selection-base--gold {
  --selection-accent: #ffd700;
}

/* ========================================
 * Container Theme Classes
 * Applied to carousel/panel containers to theme all selections within
 * These match the theme values from present_choices tool
 * ======================================== */

/* Theme: Default (blue accent) */
.theme-default {
  --selection-accent: var(--color-accent-primary);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-primary) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-primary);
  --selection-text-selected: var(--color-accent-primary);
}

/* Theme: Combat (red - for targets, attacks, damage) */
.theme-combat {
  --selection-accent: var(--color-accent-error);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-error) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-error);
  --selection-text-selected: var(--color-accent-error);
  --selection-border-hover: var(--color-accent-error);
}

/* Theme: Magic (purple - for spells, arcane effects) */
.theme-magic {
  --selection-accent: #8b5cf6;
  --selection-bg-selected: color-mix(in srgb, #8b5cf6 15%, var(--selection-bg));
  --selection-border-selected: #8b5cf6;
  --selection-text-selected: #8b5cf6;
  --selection-border-hover: #a78bfa;
}

/* Theme: Gold (amber - for shopping, treasure, economy) */
.theme-gold {
  --selection-accent: #f59e0b;
  --selection-bg-selected: color-mix(in srgb, #f59e0b 15%, var(--selection-bg));
  --selection-border-selected: #f59e0b;
  --selection-text-selected: #f59e0b;
  --selection-border-hover: #fbbf24;
}

/* Theme: Primary (blue - for social, dialogue, NPCs) */
.theme-primary {
  --selection-accent: var(--color-accent-primary);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-primary) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-primary);
  --selection-text-selected: var(--color-accent-primary);
}

/* Theme: Success (green - for character creation, positive choices) */
.theme-success {
  --selection-accent: var(--color-accent-success);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-success) 15%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-success);
  --selection-text-selected: var(--color-accent-success);
}

/* Theme: Danger (red variant - for dangerous/risky choices) */
.theme-danger {
  --selection-accent: var(--color-accent-error);
  --selection-bg-selected: color-mix(in srgb, var(--color-accent-error) 20%, var(--selection-bg));
  --selection-border-selected: var(--color-accent-error);
  --selection-text-selected: var(--color-accent-error);
}

/* ========================================
 * Selection Size Variants
 * ======================================== */

/* Compact/Small */
.selection-base--sm {
  --selection-padding-x: var(--space-2);
  --selection-padding-y: var(--space-1);
  font-size: var(--font-size-xs);
  gap: var(--space-1);
}

/* Large */
.selection-base--lg {
  --selection-padding-x: var(--space-4);
  --selection-padding-y: var(--space-3);
  font-size: var(--font-size-base);
  gap: var(--space-3);
}

/* ========================================
 * Selection Shape Variants
 * ======================================== */

/* Pill shape (full border-radius) */
.selection-base--pill {
  --selection-border-radius: var(--radius-full);
}

/* Square shape */
.selection-base--square {
  --selection-border-radius: 0;
}

/* Card shape (larger border-radius) */
.selection-base--card {
  --selection-border-radius: var(--radius-lg);
}

/* ========================================
 * Selection Layout Variants
 * ======================================== */

/* Block (full-width) */
.selection-base--block {
  display: flex;
  width: 100%;
}

/* Stacked (vertical content) */
.selection-base--stacked {
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* ========================================
 * Selection Container
 * For groups of selection elements
 * ======================================== */

.selection-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.selection-group--vertical {
  flex-direction: column;
}

.selection-group--horizontal {
  flex-direction: row;
}

.selection-group--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

/* ========================================
 * Touch Device Optimizations
 * ======================================== */

@media (hover: none), (pointer: coarse) {
  .selection-base {
    min-height: 44px; /* Touch target size */
  }

  .selection-base:active:not(.selection-base--disabled):not(.selection-base--pending) {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .selection-base {
    transition: none;
  }

  .selection-base--pending::after {
    animation: none;
  }
}

/* ========================================
 * Selection Lock State (UX Fix)
 * Prevents rapid double-clicks during character creation
 * ======================================== */

/* When user clicks too fast (within 200ms), show visual feedback instead of silent failure */
.selection-card.selection-locked,
.selection-base.selection-locked {
  opacity: 0.5;
  cursor: wait;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* ========================================
 * Creation Timeout Recovery Panel
 * Shown when AI response takes too long during character creation
 * ======================================== */

.creation-timeout-recovery {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-warning);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}

.creation-timeout-recovery h4 {
  margin: 0 0 var(--space-2) 0;
  color: var(--color-accent-warning);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.creation-timeout-recovery .recovery-message {
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.creation-timeout-recovery .recovery-actions {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.creation-timeout-recovery .recovery-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.creation-timeout-recovery .recovery-btn--primary {
  background: var(--color-accent-warning);
  border: 1px solid var(--color-accent-warning);
  color: var(--color-bg-primary);
}

.creation-timeout-recovery .recovery-btn--primary:hover {
  background: color-mix(in srgb, var(--color-accent-warning) 80%, white);
}

.creation-timeout-recovery .recovery-btn--secondary {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.creation-timeout-recovery .recovery-btn--secondary:hover {
  border-color: var(--color-text-secondary);
}

.creation-timeout-recovery .recovery-tips {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-2);
}

.creation-timeout-recovery .recovery-tip {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/*
 * Tooltip Atom
 * ============
 * Simple CSS-only tooltip system for disabled buttons and help text.
 * Uses data-tooltip attribute for content.
 */

/* Base tooltip styles */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal, 200ms ease);
  z-index: var(--z-floating);
}

/* Tooltip content */
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-inverse, #1a1a1a);
  color: var(--color-text-inverse, #ffffff);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 250px;
  text-align: center;
  box-shadow: var(--elevation-floating);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

/* Tooltip arrow */
[data-tooltip]::after {
  content: '';
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-bg-inverse, #1a1a1a);
  margin-bottom: -12px;
}

/* Show on hover */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
}

/* Disabled button variant - always show cursor help */
button:disabled[data-tooltip],
input:disabled[data-tooltip],
.btn:disabled[data-tooltip] {
  cursor: not-allowed;
}

button:disabled[data-tooltip]::before {
  background: var(--color-warning, #f59e0b);
  color: var(--color-bg-primary, #0f172a);
  border-color: var(--color-warning, #f59e0b);
}

button:disabled[data-tooltip]::after {
  border-top-color: var(--color-warning, #f59e0b);
}

/* Tooltip for narrow content - allow wrapping */
[data-tooltip-wrap]::before {
  white-space: normal;
  max-width: 200px;
}

/* Bottom tooltip variant */
[data-tooltip-position="bottom"]::before {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
}

[data-tooltip-position="bottom"]::after {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) rotate(180deg);
  margin-bottom: 0;
  margin-top: -12px;
}

/* Left tooltip variant */
[data-tooltip-position="left"]::before {
  bottom: 50%;
  left: auto;
  right: 100%;
  transform: translateY(50%) translateX(-8px);
}

[data-tooltip-position="left"]::after {
  bottom: 50%;
  left: auto;
  right: 100%;
  transform: translateY(50%) rotate(-90deg);
  margin-bottom: 0;
  margin-right: -12px;
}

/* Right tooltip variant */
[data-tooltip-position="right"]::before {
  bottom: 50%;
  left: 100%;
  right: auto;
  transform: translateY(50%) translateX(8px);
}

[data-tooltip-position="right"]::after {
  bottom: 50%;
  left: 100%;
  right: auto;
  transform: translateY(50%) rotate(90deg);
  margin-bottom: 0;
  margin-left: -12px;
}

/* Responsive: Hide tooltips on touch devices */
@media (hover: none) {
  [data-tooltip]::before,
  [data-tooltip]::after {
    display: none;
  }
}

/* Touch tooltip portal — JS fallback for hover-less devices (touch_tooltip_controller.js) */
.touch-tooltip {
  position: absolute;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-inverse, #1a1a1a);
  color: var(--color-text-inverse, #ffffff);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 250px;
  text-align: center;
  box-shadow: var(--elevation-floating);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  z-index: var(--z-floating, 9000);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.touch-tooltip--visible {
  opacity: 1;
}
/*
 * Detail Card - Base Styles
 * =========================
 * Reusable card component for displaying detailed information.
 * Used by three UX patterns: inline expand, slide-in panel, and modal.
 *
 * BEM Structure:
 * - .detail-card (block)
 * - .detail-card__header, __body, __traits (elements)
 * - .detail-card--inline, --panel, --modal (modifiers)
 */

/* ========================================
 * BASE CARD STRUCTURE
 * ======================================== */

.detail-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

/* Header — flat, no background differentiation */
.detail-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.detail-card__icon {
  font-size: 1.75em;
  flex-shrink: 0;
}

.detail-card__header-content {
  flex: 1;
  min-width: 0;
}

.detail-card__title {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  margin: 0;
}

.detail-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  margin-top: var(--space-1);
}

.detail-card__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.detail-card__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

/* Body */
.detail-card__body {
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.detail-card__body p {
  margin: 0 0 var(--space-3) 0;
}

.detail-card__body p:last-child {
  margin-bottom: 0;
}

.detail-card__body strong {
  color: var(--color-accent-primary);
}

/* Traits/Features List */
.detail-card__traits {
  padding: 0 var(--space-4) var(--space-4);
}

.detail-card__traits-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.detail-card__trait-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-card__trait-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-card__trait-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-warning);
  font-size: var(--font-size-sm);
}

.detail-card__trait-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: var(--line-height-relaxed);
}

/* Footer (for actions) — flat, no background */
.detail-card__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.detail-card__action {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

.detail-card__action:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.detail-card__action--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

.detail-card__action--primary:hover {
  background: #7bc4f8;
  border-color: #7bc4f8;
}

/* ========================================
 * PATTERN VARIANTS
 * ======================================== */

/* Inline expand (inside narrative) */
.detail-card--inline {
  margin: var(--space-2) 0;
  border-left: 3px solid var(--color-accent-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  animation: detailCardExpandIn 0.3s ease;
}

.detail-card--inline .detail-card__header {
  padding: var(--space-2) var(--space-3);
}

.detail-card--inline .detail-card__body {
  padding: var(--space-3);
}

/* Panel variant (inside reference panel) */
.detail-card--panel {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-card--panel:last-child {
  border-bottom: none;
}

/* Modal variant (inside modal overlay) */
.detail-card--modal {
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}

/* ========================================
 * TYPE VARIANTS (by content type)
 * ======================================== */

.detail-card--npc .detail-card__title {
  color: var(--color-accent-purple);
}

.detail-card--npc .detail-card--inline {
  border-left-color: var(--color-accent-purple);
}

.detail-card--location .detail-card__title {
  color: var(--color-accent-secondary);
}

.detail-card--location.detail-card--inline {
  border-left-color: var(--color-accent-secondary);
}

.detail-card--item .detail-card__title {
  color: var(--color-accent-warning);
}

.detail-card--item.detail-card--inline {
  border-left-color: var(--color-accent-warning);
}

.detail-card--creature .detail-card__title {
  color: var(--color-accent-error);
}

.detail-card--creature.detail-card--inline {
  border-left-color: var(--color-accent-error);
}

.detail-card--spell .detail-card__title {
  color: var(--color-accent-purple);
}

.detail-card--spell.detail-card--inline {
  border-left-color: var(--color-accent-purple);
}

.detail-card--lore .detail-card__title {
  color: var(--color-text-primary);
}

.detail-card--lore.detail-card--inline {
  border-left-color: var(--color-text-muted);
}

/* ========================================
 * NARRATIVE KEYWORDS (clickable text)
 * ======================================== */

.narrative-keyword {
  color: var(--color-accent-primary);
  cursor: pointer;
  border-bottom: 1px dotted var(--color-accent-primary);
  transition: color var(--transition-fast);
}

.narrative-keyword:hover {
  color: #7bc4f8;
  border-bottom-style: solid;
}

.narrative-keyword--npc {
  color: var(--color-accent-purple);
  border-bottom-color: var(--color-accent-purple);
}

.narrative-keyword--npc:hover {
  color: #d9a0ed;
}

.narrative-keyword--location {
  color: var(--color-accent-secondary);
  border-bottom-color: var(--color-accent-secondary);
}

.narrative-keyword--location:hover {
  color: #b5d9a1;
}

.narrative-keyword--item {
  color: var(--color-accent-warning);
  border-bottom-color: var(--color-accent-warning);
}

.narrative-keyword--item:hover {
  color: #f0d391;
}

.narrative-keyword--creature {
  color: var(--color-accent-error);
  border-bottom-color: var(--color-accent-error);
}

.narrative-keyword--creature:hover {
  color: #ea8f96;
}

.narrative-keyword--spell {
  color: var(--color-accent-purple);
  border-bottom-color: var(--color-accent-purple);
}

.narrative-keyword--expanded {
  background: var(--color-bg-tertiary);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  border-bottom: none;
}

/* Inline expansion container */
.narrative-keyword__expansion {
  display: block;
  margin: var(--space-2) 0;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.detail-card--loading .detail-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: var(--color-text-muted);
}

.detail-card__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: detailCardSpin 0.8s linear infinite;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes detailCardExpandIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

@keyframes detailCardSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .detail-card--inline {
    animation: none;
  }

  .detail-card__spinner {
    animation: none;
  }
}
/* SVG Icon Styles
 * ==========================================================================
 * Consistent styling for monochrome stroke-based SVG icons.
 * Icons inherit color from parent text color.
 * ========================================================================== */

.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants */
.svg-icon--xs {
  width: 0.75em;
  height: 0.75em;
}

.svg-icon--sm {
  width: 0.875em;
  height: 0.875em;
}

.svg-icon--md {
  width: 1em;
  height: 1em;
}

.svg-icon--lg {
  width: 1.25em;
  height: 1.25em;
}

.svg-icon--xl {
  width: 1.5em;
  height: 1.5em;
}

/* Fixed pixel sizes for specific contexts */
.svg-icon--14 {
  width: 14px;
  height: 14px;
}

.svg-icon--16 {
  width: 16px;
  height: 16px;
}

.svg-icon--20 {
  width: 20px;
  height: 20px;
}

.svg-icon--24 {
  width: 24px;
  height: 24px;
}

/* Icon with text spacing */
.svg-icon + span,
span + .svg-icon {
  margin-left: 0.35em;
}

/* Button icon styling */
.btn .svg-icon,
button .svg-icon {
  margin-right: 0.35em;
}

/* Panel header icons */
.panel-header .svg-icon,
.section-header .svg-icon {
  margin-right: 0.5em;
  opacity: 0.8;
}

/* Tab icons */
.tab-icon .svg-icon {
  width: 16px;
  height: 16px;
}

/* Status indicators */
.status-icon .svg-icon {
  width: 12px;
  height: 12px;
}

/* Character class icons - slightly larger */
.class-icon .svg-icon {
  width: 1.25em;
  height: 1.25em;
}

/* Lobby action button icons (matches _lobby.css) */
.lobby-action-icon .svg-icon,
.lobby-action-icon svg {
  width: 14px;
  height: 14px;
}
/* System Notification Styles
 * Used for admin broadcasts and deployment notifications
 */

.system-notification {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  border-left: 4px solid var(--primary);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  animation: notification-slide-in 0.3s ease-out;
}

.system-notification--info {
  border-left-color: var(--info, #3498db);
  background: rgba(52, 152, 219, 0.1);
}

.system-notification--success {
  border-left-color: var(--success, #2ecc71);
  background: rgba(46, 204, 113, 0.1);
}

.system-notification--warning {
  border-left-color: var(--warning, #f39c12);
  background: rgba(243, 156, 18, 0.1);
}

.system-notification--error {
  border-left-color: var(--error, #e74c3c);
  background: rgba(231, 76, 60, 0.1);
}

.system-notification__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.system-notification__message {
  flex: 1;
  color: var(--text-primary);
}

.system-notification__action {
  padding: 0.35rem 0.75rem;
  background: var(--primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.system-notification__action:hover {
  background: var(--primary-hover, var(--primary));
  filter: brightness(1.1);
}

.system-notification__dismiss {
  padding: 0.25rem 0.5rem;
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.system-notification__dismiss:hover {
  opacity: 1;
}

/* ========================================
 * GAME INVITE NOTIFICATION
 * Floating notification for friend game invites
 * ======================================== */

.game-invite-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-ceiling);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  pointer-events: none;
}

.game-invite-notification {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-bg-primary, #0d0d0d);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 12px rgba(97, 175, 239, 0.2);
  font-family: var(--font-mono);
  animation: game-invite-slide-in 0.3s ease-out;
  pointer-events: all;
}

@keyframes game-invite-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-invite-notification__content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.game-invite-notification__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border-radius: 50%;
  color: var(--color-accent-primary, #61afef);
}

.game-invite-notification__icon svg {
  width: 20px;
  height: 20px;
}

.game-invite-notification__text {
  flex: 1;
  min-width: 0;
}

.game-invite-notification__title {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-accent-primary, #61afef);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.game-invite-notification__message {
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: 0.25rem;
}

.game-invite-notification__details {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #808080);
}

.game-invite-notification__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.game-invite-notification__join {
  flex: 1;
}

.game-invite-notification__dismiss {
  flex: 0;
}
/*
 * Pending Roll Animation
 * ======================
 * Highlights skills/abilities in character sheet when the AI DM
 * requests a roll from the player.
 */

/* Base pending roll highlight */
.pending-roll {
  animation: pending-roll-pulse 1.5s ease-in-out infinite;
  border: 2px solid var(--color-accent, #f5c542);
  box-shadow: 0 0 10px var(--color-accent, #f5c542),
              0 0 20px rgba(245, 197, 66, 0.3);
  position: relative;
  z-index: var(--z-sticky);
}

/* Pulse animation */
@keyframes pending-roll-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--color-accent, #f5c542),
                0 0 20px rgba(245, 197, 66, 0.3);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--color-accent, #f5c542),
                0 0 30px rgba(245, 197, 66, 0.5);
  }
}

/* Skill items with pending roll */
.cs-skill.pending-roll,
.cs-save.pending-roll,
.cs-save-chip.pending-roll {
  border-radius: 4px;
  background-color: rgba(245, 197, 66, 0.1);
}

/* Make the skill name pop */
.pending-roll .cs-skill-name,
.pending-roll .cs-save__name,
.pending-roll .cs-save-chip__abbr {
  color: var(--color-accent, #f5c542);
  font-weight: bold;
}

/* Roll request prompt styling (for narrative panel) */
.roll-request-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  margin: var(--spacing-sm, 8px) 0;
  background: rgba(245, 197, 66, 0.1);
  border: 1px solid var(--color-accent, #f5c542);
  border-radius: 6px;
  text-align: center;
}

.roll-request-icon {
  font-size: 1.5em;
}

.roll-request-message {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 500;
}

.roll-request-hint {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 0.85em;
  font-style: italic;
}

/* Passive check styling */
.passive-check {
  opacity: 0.9;
  font-style: italic;
}

/* Legacy indicator used in pending-roll context */
.passive-check-indicator {
  color: var(--color-text-secondary, #a0a0a0);
  margin-right: var(--spacing-xs, 4px);
}

/* Narrative passive-check annotation segment (#4187)
 * The check *mechanism* (e.g. "Passive Perception: 14").
 * Intentionally uses passive-check-indicator class instead of perception-revealed
 * so the Discoveries filter tab (.perception-revealed selector) never picks it up. */
.narrative-segment.passive-check-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: 0.85em;
  color: var(--color-text-muted, #a0a0a0);
  font-style: italic;
  opacity: 0.7;
}

.passive-check-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.passive-check-label {
  color: var(--color-text-secondary, #a0a0a0);
}
/**
 * Toast System — Base & Variants
 * ================================
 * Unified toast system, level variants, D&D gameplay variants.
 */

/* ==========================================================================
 * Unified Toast System
 * Consolidates: dm-toast, level-up-toast, system-confirmation-toast
 * ========================================================================== */

/* Toast Container - wrapper handles fixed positioning */
.toast-container {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
}

/* Screen reader announcer (visually hidden) */
.toast-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Base Toast Styles */
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated, #2a2a4a);
  border: 1px solid var(--toast-border-color, var(--color-border-default, #3a3a5a));
  border-radius: var(--radius-lg);
  color: var(--color-text-primary, #e0e0e0);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-normal) ease,
              transform var(--transition-bounce);
  pointer-events: auto;
  max-width: 400px;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--hiding {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity var(--transition-normal) ease,
              transform var(--transition-normal) ease;
}

/* Toast Icon */
.toast__icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
  color: var(--toast-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast__icon svg {
  width: 18px;
  height: 18px;
}

/* Toast Message */
.toast__message {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Toast Action Button */
.toast__action {
  background: transparent;
  border: 1px solid var(--toast-border-color);
  border-radius: var(--radius-md);
  color: var(--toast-border-color);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}

.toast__action:hover {
  background: var(--toast-border-color);
  color: var(--bg-primary, #1a1a2e);
}

/* Toast Dismiss Button */
.toast__dismiss {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: 0 var(--space-1);
  line-height: 1;
  opacity: 0.6;
  transition: opacity var(--transition-normal);
  flex-shrink: 0;
}

.toast__dismiss:hover {
  opacity: 1;
  color: var(--text-primary, #e0e0e0);
}

/* ==========================================================================
 * Level Variants
 * ========================================================================== */

/* Success - green accent */
.toast--success {
  --toast-border-color: var(--accent-success, #4ade80);
}

/* Error - red accent */
.toast--error {
  --toast-border-color: var(--accent-danger, #ef4444);
}

/* Warning - orange accent */
.toast--warning {
  --toast-border-color: var(--accent-warning, #f59e0b);
}

/* Info - indigo accent */
.toast--info {
  --toast-border-color: var(--accent-primary, #6366f1);
}

/* ==========================================================================
 * D&D Gameplay Variants
 * ========================================================================== */

/* Damage - red/crimson accent */
.toast--damage {
  --toast-border-color: var(--accent-damage, #dc2626);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #3a2a3a 100%);
}

.toast--damage .toast__icon {
  animation: toast-damage-shake var(--timing-normal) ease-in-out;
}

@keyframes toast-damage-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* Healing - bright green accent */
.toast--healing {
  --toast-border-color: var(--accent-heal, #22c55e);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #2a3a3a 100%);
}

.toast--healing .toast__icon {
  animation: toast-heal-pulse var(--timing-slow) var(--ease-out);
}

@keyframes toast-heal-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Item acquired - cyan/teal accent */
.toast--item {
  --toast-border-color: var(--accent-item, #06b6d4);
}

/* Gold gain - gold accent */
.toast--gold-gain {
  --toast-border-color: var(--accent-gold, #fbbf24);
}

.toast--gold-gain .toast__icon {
  animation: toast-gold-bounce var(--timing-slow) var(--ease-out);
}

@keyframes toast-gold-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Gold spend - muted gold accent */
.toast--gold-spend {
  --toast-border-color: var(--text-muted, #888);
}

/* Quest milestone - purple/quest accent */
.toast--quest {
  --toast-border-color: var(--accent-quest, #a855f7);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #3a2a4a 100%);
}

/* Experience gained - golden/XP accent */
.toast--experience {
  --toast-border-color: var(--accent-xp, #eab308);
}

.toast--experience .toast__icon {
  animation: toast-xp-sparkle var(--timing-slow) var(--ease-out);
}

@keyframes toast-xp-sparkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}

/* Condition applied - orange/warning accent */
.toast--condition-applied {
  --toast-border-color: var(--accent-warning, #f59e0b);
}

/* Condition removed - green accent */
.toast--condition-removed {
  --toast-border-color: var(--accent-success, #4ade80);
}

/* Spell cast - magic purple accent */
.toast--spell {
  --toast-border-color: var(--accent-magic, #8b5cf6);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #2a2a5a 100%);
}

.toast--spell .toast__icon {
  animation: toast-spell-glow var(--timing-slow) var(--ease-out);
}

@keyframes toast-spell-glow {
  0% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px var(--accent-magic, #8b5cf6)); }
  100% { filter: drop-shadow(0 0 2px var(--accent-magic, #8b5cf6)); }
}

/* Long rest - deep blue/night accent */
.toast--rest-long {
  --toast-border-color: var(--accent-rest-long, #3b82f6);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #1a2a4a 100%);
}

/* Short rest - warm amber accent */
.toast--rest-short {
  --toast-border-color: var(--accent-rest-short, #d97706);
}

/* Save success - green shield */
.toast--save-success {
  --toast-border-color: var(--accent-success, #4ade80);
}

/* Save failure - red shield */
.toast--save-failure {
  --toast-border-color: var(--accent-danger, #ef4444);
}

.toast--save-failure .toast__icon {
  animation: toast-damage-shake var(--timing-normal) ease-in-out;
}

/* Concentration broken - magic purple fading to gray */
.toast--concentration-broken {
  --toast-border-color: var(--accent-magic-faded, #6b5b8a);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #3a2a4a 100%);
}

.toast--concentration-broken .toast__icon {
  animation: toast-concentration-fade var(--timing-slow) var(--ease-out);
}

@keyframes toast-concentration-fade {
  0% {
    filter: drop-shadow(0 0 8px var(--accent-magic, #8b5cf6));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 12px var(--accent-magic, #8b5cf6));
    opacity: 0.8;
  }
  100% {
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.6;
  }
}

/* Passive skill triggered - cyan/awareness accent */
.toast--passive-skill {
  --toast-border-color: var(--accent-awareness, #06b6d4);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #1a3a4a 100%);
}

.toast--passive-skill .toast__icon {
  animation: toast-passive-glow var(--timing-slow) var(--ease-out);
}

@keyframes toast-passive-glow {
  0% {
    filter: drop-shadow(0 0 0 transparent);
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px var(--accent-awareness, #06b6d4));
    transform: scale(1.1);
  }
  100% {
    filter: drop-shadow(0 0 3px var(--accent-awareness, #06b6d4));
    transform: scale(1);
  }
}

/* Memory formed - soft purple/mental accent */
.toast--memory {
  --toast-border-color: var(--accent-memory, #a78bfa);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #2a2a5a 100%);
}

.toast--memory .toast__icon {
  animation: toast-memory-shimmer var(--timing-dramatic) var(--ease-out);
}

@keyframes toast-memory-shimmer {
  0% {
    filter: drop-shadow(0 0 0 transparent);
    opacity: 0.7;
  }
  40% {
    filter: drop-shadow(0 0 10px var(--accent-memory, #a78bfa));
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 4px var(--accent-memory, #a78bfa));
    opacity: 1;
  }
}

/* Relationship change - heart/social accent */
.toast--relationship {
  --toast-border-color: var(--accent-relationship, #f472b6);
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #3a2a3a 100%);
}

.toast--relationship .toast__icon {
  animation: toast-relationship-beat var(--timing-slow) var(--ease-out);
}

@keyframes toast-relationship-beat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

/**
 * Toast System — Detailed & Celebration Toasts
 * ==============================================
 * Toast details, celebration toast (level-up, achievements),
 * step confirmation toast.
 */

 * Toast Details (for complex toasts)
 * ========================================================================== */

.toast__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.toast__details {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  margin-top: 2px;
}

.toast__details--recovery {
  color: var(--accent-heal, #22c55e);
}

.toast__details--quest {
  font-style: italic;
  color: var(--accent-quest, #a855f7);
}

/* Error suggestions - actionable hints */
.toast__details--suggestions {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #a0a0c0);
  margin-top: 4px;
  line-height: 1.3;
}

.toast__hint-label {
  color: var(--text-muted, #888);
  font-weight: 500;
}

.toast__error-code {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #555);
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  opacity: 0.6;
}

/* ==========================================================================
 * Celebration Toast (Level-up, Achievements)
 * ========================================================================== */

.toast--celebration {
  --toast-border-color: var(--accent-gold, #fbbf24);
  padding: 16px 20px;
  border-width: 2px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--bg-elevated, #2a2a4a) 0%, #3a2a5a 100%);
  box-shadow:
    0 4px 24px rgba(251, 191, 36, 0.3),
    0 0 40px rgba(251, 191, 36, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: var(--z-warning);
  align-items: flex-start;
  gap: 12px;
  transition: color var(--transition-slow), transform var(--transition-slow);
  max-width: 450px;
}

.toast--celebration .toast__icon--celebration {
  font-size: var(--font-size-3xl);
  color: var(--accent-gold, #fbbf24);
  animation: toast-celebration-pulse var(--timing-glacial) ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.toast--celebration .toast__icon--celebration svg {
  width: 28px;
  height: 28px;
}

@keyframes toast-celebration-pulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8));
  }
}

/* Celebration Content Layout */
.toast--celebration .toast__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toast--celebration .toast__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--accent-gold, #fbbf24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toast--celebration .toast__subtitle {
  font-size: var(--font-size-base);
  color: var(--text-secondary, #a0a0c0);
}

.toast--celebration .toast__features {
  font-size: var(--font-size-sm);
  color: var(--accent-primary, #6366f1);
  font-style: italic;
  margin-top: 2px;
}

/* Sparkle effect on visible */
.toast--celebration.toast--visible::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 14px;
  background: linear-gradient(
    45deg,
    transparent 0%,
    rgba(251, 191, 36, 0.1) 25%,
    transparent 50%,
    rgba(251, 191, 36, 0.1) 75%,
    transparent 100%
  );
  background-size: 200% 200%;
  animation: toast-shimmer 2s linear infinite;
  z-index: -1;
}

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

/* ==========================================================================
 * Step Confirmation Toast (Character Creation Flow)
 * ========================================================================== */

.toast--step-confirmation {
  --toast-border-color: var(--accent-success, #4ade80);
}

.toast--step-confirmation .toast__content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast--step-confirmation .toast__next {
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm);
  font-style: italic;
  padding-left: 10px;
  border-left: 1px solid var(--border-color, #3a3a5a);
}

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

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast--visible,
  .toast--hiding {
    transition: none;
    animation: none;
    transform: none;
  }

  .toast--visible {
    opacity: 1;
  }

  .toast--hiding {
    opacity: 0;
  }

  .toast--celebration .toast__icon--celebration,
  .toast--damage .toast__icon,
  .toast--healing .toast__icon,
  .toast--gold-gain .toast__icon,
  .toast--experience .toast__icon,
  .toast--spell .toast__icon,
  .toast--passive-skill .toast__icon,
  .toast--save-failure .toast__icon,
  .toast--concentration-broken .toast__icon,
  .toast--memory .toast__icon,
  .toast--relationship .toast__icon {
    animation: none;
  }

  .toast--celebration.toast--visible::before {
    animation: none;
  }
}

/**
 * Toast System — Reduced Motion & Reconnection
 * =============================================
 * Reduced motion, reconnection banner, reconnection exhausted overlay.
 */

 * Reconnection Banner
 * Persistent banner shown during WebSocket reconnection attempts
 * ========================================================================== */

.reconnection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sky);
  background: linear-gradient(135deg, #3a2a1a 0%, #2a1a0a 100%);
  border-bottom: 2px solid var(--accent-warning, #f59e0b);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  animation: reconnection-banner-slide-in var(--timing-normal) var(--ease-out);
}

@keyframes reconnection-banner-slide-in {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.reconnection-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  max-width: 1200px;
  margin: 0 auto;
}

.reconnection-banner__icon {
  flex-shrink: 0;
  color: var(--accent-warning, #f59e0b);
  animation: reconnection-icon-pulse var(--timing-glacial) ease-in-out infinite;
}

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

.reconnection-banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reconnection-banner__title {
  font-weight: 600;
  color: var(--accent-warning, #f59e0b);
  font-size: var(--font-size-base, 14px);
}

.reconnection-banner__status {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-secondary, #a0a0c0);
}

.reconnection-banner__attempt {
  opacity: 0.8;
}

.reconnection-banner__countdown {
  color: var(--color-text-primary, #e0e0e0);
}

.reconnection-banner__countdown strong {
  color: var(--accent-warning, #f59e0b);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reconnection-banner__reassurance {
  font-size: var(--font-size-xs, 11px);
  color: var(--accent-success, #22c55e);
  opacity: 0.9;
  margin-top: 2px;
}

.reconnection-banner__retry {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent-warning, #f59e0b);
  border-radius: var(--radius-md, 6px);
  color: var(--accent-warning, #f59e0b);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-height: 44px; /* Touch target */
  min-width: 44px;
}

.reconnection-banner__retry:hover {
  background: var(--accent-warning, #f59e0b);
  color: #1a1a2e;
}

.reconnection-banner__retry:focus-visible {
  outline: 2px solid var(--accent-warning, #f59e0b);
  outline-offset: 2px;
}

/* Progress bar at bottom of banner */
.reconnection-banner__progress {
  height: 3px;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.reconnection-banner__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-warning, #f59e0b) 0%, #fbbf24 50%, var(--accent-warning, #f59e0b) 100%);
  background-size: 200% 100%;
  width: 100%;
  transform-origin: right;
  animation: reconnection-progress linear forwards;
}

@keyframes reconnection-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .reconnection-banner__content {
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .reconnection-banner__text {
    flex: 1 1 100%;
    order: 1;
  }

  .reconnection-banner__icon {
    order: 0;
  }

  .reconnection-banner__retry {
    order: 2;
    width: 100%;
    margin-top: var(--space-2, 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reconnection-banner,
  .reconnection-banner__icon,
  .reconnection-banner__progress-bar {
    animation: none;
    transition: none;
  }

  .reconnection-banner {
    transform: translateY(0);
    opacity: 1;
  }

  .reconnection-banner__icon {
    opacity: 1;
  }

  .reconnection-banner__progress-bar {
    transform: scaleX(0.5);
  }
}

/* ============================================================================
 * Reconnection Exhausted Overlay (#441)
 * Shows when all WebSocket reconnection attempts are exhausted
 * ============================================================================ */

.reconnection-exhausted-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  animation: reconnection-exhausted-fade-in var(--timing-normal) var(--ease-out);
}

@keyframes reconnection-exhausted-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reconnection-exhausted__card {
  background: var(--color-bg-secondary, #2d2d2d);
  border: 1px solid var(--color-accent-error, #cf6068);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.reconnection-exhausted__icon {
  color: var(--color-accent-error, #cf6068);
  margin-bottom: 1rem;
}

.reconnection-exhausted__title {
  color: var(--color-text-primary, #e0e0e0);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.reconnection-exhausted__message {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}

.reconnection-exhausted__reload {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
  border: none;
  border-radius: 6px;
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default);
}

.reconnection-exhausted__reload:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 85%, white);
}

.reconnection-exhausted__reload:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}
/**
 * Toast System — Import Hub
 * ===========================
 * Unified toast system for gameplay notifications and reconnection.
 *
 * Decomposed into focused files under toast/ for maintainability.



 */
/**
 * Entity Chip — Base Styles
 * ===========================
 * Core chip component, color theming, entity type variants (NPC, location, item, spell, etc).
 */

/* Entity Chips - Clickable entity references in narrative and selections
 *
 * Entity chips are action-chip-styled buttons for entities (NPCs, locations, items, spells)
 * mentioned in narrative or presented as selection options.
 *
 * Usage:
 * - Narrative entities: `[[Goblin Chief]]` becomes clickable chip
 * - Inline selections: World/language choices as chip buttons
 */

/* ==========================================================================
   Base Entity Chip
   ========================================================================== */

.entity-chip {
  /* Entity chip color theming via custom properties */
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 97, 175, 239;

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  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-size: 0.9em;
  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);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
}

.entity-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.2) 0%,
    rgba(var(--chip-color-rgb), 0.1) 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);
}

.entity-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.entity-chip:active {
  transform: translateY(0);
  box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
}

/* Inspect indicator - subtle icon hint */
.entity-chip__inspect-icon {
  font-size: 0.75em;
  opacity: 0;
  transition: opacity var(--transition-fast);
  margin-left: 2px;
}

.entity-chip:hover .entity-chip__inspect-icon {
  opacity: 0.7;
}

/* Entity type icon */
.entity-chip__icon {
  font-size: 0.85em;
  opacity: 0.8;
}

/* ==========================================================================
   Entity Type Variants
   Using CSS custom properties for consistent theming
   ========================================================================== */

/* NPC - Cyan/teal theme */
.entity-chip--npc {
  --chip-color: var(--color-entity-npc);
  --chip-color-rgb: 34, 211, 238;
}

/* Location - Green theme */
.entity-chip--location {
  --chip-color: var(--color-entity-location);
  --chip-color-rgb: 152, 195, 121;
}

/* Item - Amber/gold theme */
.entity-chip--item {
  --chip-color: var(--color-entity-item);
  --chip-color-rgb: 229, 192, 123;
}

/* Spell - Purple theme */
.entity-chip--spell {
  --chip-color: var(--color-entity-spell);
  --chip-color-rgb: 198, 120, 221;
}

/* Monster/Creature - Red theme */
.entity-chip--creature,
.entity-chip--monster {
  --chip-color: var(--color-entity-creature);
  --chip-color-rgb: 224, 108, 117;
}

/* Quest - Blue theme */
.entity-chip--quest {
  --chip-color: var(--color-entity-quest);
  --chip-color-rgb: 97, 175, 239;
}

/* Faction - Orange theme */
.entity-chip--faction {
  --chip-color: var(--color-entity-faction);
  --chip-color-rgb: 209, 154, 102;
}

/* Lore - Gray theme */
.entity-chip--lore {
  --chip-color: var(--color-entity-lore);
  --chip-color-rgb: 171, 178, 191;
}

/**
 * Entity Chip — Selection Chips
 * ================================
 * Inline selection chips for world/language selection with hover and disabled states.
 */

/* ==========================================================================
   Inline Selection Chips
   ========================================================================== */

/* Container for inline selection chips */
.inline-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.inline-selection__label {
  width: 100%;
  font-size: 0.85em;
  color: var(--text-secondary, #888);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inline-selection__counter {
  width: 100%;
  font-size: 0.8em;
  color: var(--text-secondary, #888);
  margin-top: 8px;
}

/* Selection chip (extends entity-chip for world/language selection) */
.selection-chip {
  /* Selection chip color theming */
  --chip-color: var(--color-gold);
  --chip-color-rgb: 255, 215, 0;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(var(--chip-color-rgb), 0.25);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.08) 0%,
    rgba(var(--chip-color-rgb), 0.02) 100%
  );
  color: var(--chip-color);
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
}

.selection-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.15) 0%,
    rgba(var(--chip-color-rgb), 0.08) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.4);
  box-shadow: 0 0 10px rgba(var(--chip-color-rgb), 0.2);
  transform: translateY(-1px);
}

.selection-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.selection-chip:active {
  transform: translateY(0);
}

/* Selected state for multi-select */
.selection-chip--selected {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.25) 0%,
    rgba(var(--chip-color-rgb), 0.15) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.25);
}

.selection-chip--selected::after {
  content: "✓";
  font-size: 0.85em;
  margin-left: var(--space-1);
  color: var(--chip-color);
}

/* Disabled state */
.selection-chip--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Selection chip icon */
.selection-chip__icon {
  font-size: 1.1em;
}

/* Selection chip badge (for language script type) */
.selection-chip__badge {
  font-size: 0.7em;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ==========================================================================
   World Selection Chips (specific styling)
   ========================================================================== */

.selection-chip--world {
  padding: 10px 16px;
  border-radius: 24px;
}

.selection-chip--world .selection-chip__icon {
  font-size: 1.3em;
}

.selection-chip--world .selection-chip__description {
  display: none;
}

/* Show description on hover for world chips */
@media (hover: hover) {
  .selection-chip--world:hover .selection-chip__description {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--bg-secondary, #1e1e1e);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 400;
    color: var(--text-primary, #fff);
    white-space: normal;
    max-width: 200px;
    z-index: var(--z-panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* ==========================================================================
   Language Selection Chips (specific styling)
   ========================================================================== */

.selection-chip--language {
  padding: 6px 12px;
}

.selection-chip--language .selection-chip__badge {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

/* ==========================================================================
   Animation States
   ========================================================================== */

/* Pulse animation for newly appearing chips */
@keyframes chip-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.entity-chip--animate-in,
.selection-chip--animate-in {
  animation: chip-appear 0.3s ease forwards;
}

/* Loading state */
.entity-chip--loading {
  opacity: 0.7;
  pointer-events: none;
}

.entity-chip--loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/**
 * Entity Chip — Achievement Chips
 * ==================================
 * Achievement chip gold theme, progress bars, and variants.
 */

/* ==========================================================================
   Achievement Chips
   ========================================================================== */

/* Base achievement chip - Gold/trophy theme */
.achievement-chip {
  /* Achievement chip color theming */
  --chip-color: var(--color-gold);
  --chip-color-rgb: 255, 215, 0;

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(var(--chip-color-rgb), 0.4);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.15) 0%,
    rgba(var(--chip-color-rgb), 0.06) 100%
  );
  color: var(--chip-color);
  font-size: 0.9em;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  position: relative;
}

.achievement-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.25) 0%,
    rgba(var(--chip-color-rgb), 0.12) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.6);
  box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.3);
  transform: translateY(-1px);
}

.achievement-chip:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.achievement-chip:active {
  transform: translateY(0);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
}

.achievement-chip__icon {
  font-size: 1.1em;
}

.achievement-chip__name {
  font-weight: 500;
}

.achievement-chip__category {
  font-size: 0.7em;
  padding: 2px 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* ==========================================================================
   Achievement Category Variants
   Using CSS custom properties for consistent theming
   ========================================================================== */

/* Combat achievement - Red theme */
.achievement-chip--combat {
  --chip-color: var(--color-accent-error);
  --chip-color-rgb: 224, 108, 117;
}

/* Exploration achievement - Green theme */
.achievement-chip--exploration {
  --chip-color: var(--color-accent-secondary);
  --chip-color-rgb: 152, 195, 121;
}

/* Social achievement - Purple theme */
.achievement-chip--social {
  --chip-color: var(--color-accent-purple);
  --chip-color-rgb: 198, 120, 221;
}

/* Milestone achievement - Blue theme */
.achievement-chip--milestone {
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 97, 175, 239;
}

/* Engagement achievement - Teal theme */
.achievement-chip--engagement {
  --chip-color: var(--color-entity-npc);
  --chip-color-rgb: 34, 211, 238;
}

/* Category badge inherits color from parent */
.achievement-chip .achievement-chip__category {
  background: rgba(var(--chip-color-rgb), 0.2);
}

/* ==========================================================================
   Achievement Unlock Animation
   ========================================================================== */

/* Special "just unlocked" state with celebration effect */
.achievement-chip--unlocked {
  animation: achievement-unlock 0.6s ease forwards;
}

@keyframes achievement-unlock {
  0% {
    opacity: 0;
    transform: scale(0.8);
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.25);
  }
}

/* Inline achievement notification container */
.achievement-notification {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(255, 215, 0, 0.03) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  margin: 8px 0;
}

.achievement-notification__label {
  font-size: 0.75em;
  color: var(--accent-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* Achievement chips container (for multiple achievements) */
.achievement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

/* ===========================================================================
   Achievement Chips Section (for "show achievements" display)
   =========================================================================== */

.achievement-chips-section {
  background: linear-gradient(
    180deg,
    rgba(255, 215, 0, 0.05) 0%,
    rgba(255, 215, 0, 0.02) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 4px;
  padding: 16px;
  margin: 12px 0;
}

.achievement-chips-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.achievement-chips-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold, #ffd700);
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievement-chips-section__title::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-trophy) no-repeat center / contain;
}

.achievement-chips-section__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Achievement progress bar */
.achievement-chips-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.achievement-chips-progress__bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.achievement-chips-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-gold) 0%,
    rgba(255, 215, 0, 0.7) 100%
  );
  border-radius: var(--radius-md);
  transition: width var(--transition-slow);
}

.achievement-chips-progress__text {
  font-size: 0.8em;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}

/* Empty state for no achievements */
.achievement-chips-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}
/**
 * Entity Chip — Import Hub
 * ==========================
 * Clickable entity references in narrative and selections (NPC, location, item, spell).
 *
 * Decomposed into focused files under entity_chip/ for maintainability.



 */
/**
 * Panel Search Component
 * ======================
 * Reusable search input for panels with list content.
 * Used with lib/panel_search.js module.
 */

/* Search Container */
.panel-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.panel-search:focus-within {
  border-color: var(--color-primary, #4a90e2);
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

/* Search Icon */
.panel-search__icon {
  font-size: 0.875rem;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.panel-search:focus-within .panel-search__icon {
  opacity: 0.8;
}

/* Search Input */
.panel-search__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--terminal-text-primary, #e0e0e0);
  font-family: var(--font-mono, 'Fira Code', monospace);
  font-size: 0.875rem;
}

.panel-search__input::placeholder {
  color: var(--terminal-text-muted, #888);
}

.panel-search__input:focus {
  outline: none;
}

/* Keyboard Hint */
.panel-search__hint {
  padding: 0.125rem 0.375rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-muted, #888);
  font-size: 0.625rem;
  font-family: var(--font-mono, monospace);
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.panel-search:focus-within .panel-search__hint {
  opacity: 0;
}

/* Clear Button (inside input when there's a value) */
.panel-search__clear {
  display: none;
  padding: 0.125rem;
  background: transparent;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

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

.panel-search--has-value .panel-search__clear {
  display: block;
}

.panel-search--has-value .panel-search__hint {
  display: none;
}

/* ========================================
 * EMPTY STATE
 * Shown when search has no results
 * ======================================== */

.panel-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  animation: panel-search-empty-enter 0.2s ease-out;
}

@keyframes panel-search-empty-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-search__empty-icon {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
}

.panel-search__empty-text {
  margin: 0 0 1rem 0;
  font-size: 0.875rem;
  color: var(--terminal-text-muted, #888);
}

.panel-search__clear-btn {
  padding: 0.375rem 0.75rem;
  background: transparent;
  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;
}

.panel-search__clear-btn:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
}

/* ========================================
 * RESULT COUNT
 * Optional indicator showing matching items
 * ======================================== */

.panel-search__count {
  font-size: 0.6875rem;
  color: var(--terminal-text-muted, #888);
  white-space: nowrap;
}

.panel-search__count--no-results {
  color: var(--color-warning, #f59e0b);
}

/* State-driven visibility (preferred over inline style mutations) */
.panel-search__count--hidden {
  display: none;
}

/* ========================================
 * VARIANTS
 * Different sizes and contexts
 * ======================================== */

/* Compact variant for tight spaces */
.panel-search--compact {
  padding: 0.375rem 0.5rem;
}

.panel-search--compact .panel-search__input {
  font-size: 0.8125rem;
}

.panel-search--compact .panel-search__icon {
  font-size: 0.75rem;
}

/* Full-width variant */
.panel-search--full {
  width: 100%;
}

/* Inline variant (no border, blends into header) */
.panel-search--inline {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--terminal-border, #333);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.panel-search--inline:focus-within {
  border-color: var(--color-primary, #4a90e2);
  box-shadow: 0 1px 0 0 var(--color-primary, #4a90e2);
}

/* ========================================
 * FILTER TAGS
 * Optional quick filter buttons
 * ======================================== */

.panel-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.panel-search__filter-tag {
  padding: 0.25rem 0.5rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.panel-search__filter-tag:hover {
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

.panel-search__filter-tag--active {
  background: var(--color-primary-dark, #1a2a4a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
}

/* ========================================
 * ACCESSIBILITY
 * ======================================== */

/* Screen reader announcement for result count */
.panel-search__sr-count {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .panel-search__empty {
    animation: none;
  }
}
/*
 * Atomic: Display Formats
 * =======================
 * CSS for narrative display format variants.
 * Each format transforms how narrative entries appear.
 *
 * Formats:
 * - NARRATIVE (default): Full rich segments with styling
 * - SCRIPT: Screenplay format with speaker prefixes
 * - COMPACT: Single-line summaries with icons
 * - HUD: Card layout for metadata channels
 * - TIMELINE: Timestamped chronological view
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * NARRATIVE FORMAT (default)
 * Full rich rendering - no changes needed
 * ======================================== */

.narrative-entry.format-narrative {
  /* Default styling, no modifications */
}

/* ========================================
 * SCRIPT FORMAT
 * Screenplay style with speaker prefixes
 * ======================================== */

.narrative-entry.format-script {
  padding-left: 120px;
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.narrative-entry.format-script::before {
  content: attr(data-speaker) ":";
  position: absolute;
  left: var(--space-3);
  width: 100px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide decorative elements in script format */
.narrative-entry.format-script .npc-portrait,
.narrative-entry.format-script .npc-header,
.narrative-entry.format-script .dm-info-panel,
.narrative-entry.format-script .inline-actions {
  display: none;
}

/* Flatten dialogue content */
.narrative-entry.format-script .npc-dialogue {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.narrative-entry.format-script .npc-dialogue-content,
.narrative-entry.format-script .dialogue-segment {
  display: inline;
  font-style: italic;
}

/* Script format for different entry types */
.narrative-entry.format-script.player::before {
  color: var(--color-accent-secondary, #38bdf8);
}

.narrative-entry.format-script.dm::before {
  color: var(--color-text-secondary, #a0a0a0);
}

.narrative-entry.format-script.system::before {
  color: var(--color-text-muted, #888);
}

/* ========================================
 * COMPACT FORMAT
 * Single-line summaries with icons
 * ======================================== */

.narrative-entry.format-compact {
  padding: var(--space-1-5) var(--space-3);
  padding-left: 36px;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  line-height: 1.4;
}

.narrative-entry.format-compact::before {
  content: attr(data-icon);
  position: absolute;
  left: var(--space-3);
  width: 20px;
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Hide decorative/complex elements in compact format */
.narrative-entry.format-compact .npc-portrait,
.narrative-entry.format-compact .npc-header,
.narrative-entry.format-compact .dm-info-panel,
.narrative-entry.format-compact .inline-actions,
.narrative-entry.format-compact .narrative-entry__copy {
  display: none;
}

/* Make content inline */
.narrative-entry.format-compact .npc-dialogue,
.narrative-entry.format-compact .narrative-segment,
.narrative-entry.format-compact p {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.narrative-entry.format-compact br {
  display: none;
}

/* Compact format hover - show full content */
.narrative-entry.format-compact:hover {
  white-space: normal;
  overflow: visible;
  background: var(--color-bg-tertiary);
  z-index: var(--z-raised);
}

/* ========================================
 * HUD FORMAT
 * Card/panel layout for metadata
 * ======================================== */

.narrative-entry.format-hud {
  display: inline-flex;
  flex-direction: column;
  width: calc(50% - var(--space-2));
  margin: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  vertical-align: top;
  box-shadow: var(--elevation-base);
}

.narrative-entry.format-hud::before {
  content: attr(data-icon) " " attr(data-category);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Hide decorative elements in HUD format */
.narrative-entry.format-hud .dm-info-panel,
.narrative-entry.format-hud .inline-actions,
.narrative-entry.format-hud .narrative-entry__copy {
  display: none;
}

.narrative-entry.format-hud .npc-portrait,
.narrative-entry.format-hud .npc-header {
  display: none;
}

/* Full width for single cards */
@media (max-width: 600px) {
  .narrative-entry.format-hud {
    width: 100%;
    margin: var(--space-1) 0;
  }
}

/* ========================================
 * TIMELINE FORMAT
 * Timestamped chronological view
 * ======================================== */

.narrative-entry.format-timeline {
  padding-left: 100px;
  position: relative;
  margin-left: 40px;
  border-left: 2px solid var(--color-border-default);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  min-height: 32px;
}

/* Timestamp before element */
.narrative-entry.format-timeline::before {
  content: attr(data-timestamp);
  position: absolute;
  left: -90px;
  width: 70px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  padding-right: var(--space-2);
}

/* Timeline node dot */
.narrative-entry.format-timeline::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-gold, #ffd700);
  border-radius: 50%;
}

/* Hide decorative elements in timeline format */
.narrative-entry.format-timeline .dm-info-panel,
.narrative-entry.format-timeline .inline-actions {
  display: none;
}

/* Timeline format variations by type */
.narrative-entry.format-timeline.player::after {
  border-color: var(--color-accent-secondary, #38bdf8);
  background: var(--color-accent-secondary, #38bdf8);
}

.narrative-entry.format-timeline.combat::after,
.narrative-entry.format-timeline[data-category="combat"]::after {
  border-color: var(--color-accent-error, #ef4444);
  background: var(--color-accent-error, #ef4444);
}

.narrative-entry.format-timeline[data-category="magic"]::after {
  border-color: var(--color-accent-magic, #9370db);
  background: var(--color-accent-magic, #9370db);
}

.narrative-entry.format-timeline[data-category="dice"]::after {
  border-color: var(--color-accent-warning, #fbbf24);
}

.narrative-entry.format-timeline.system::after,
.narrative-entry.format-timeline[data-category="system"]::after {
  border-color: var(--color-text-muted, #888);
  background: var(--color-text-muted, #888);
}

/* First entry in timeline - no connecting line above */
.narrative-entry.format-timeline:first-child {
  border-left-color: transparent;
}

.narrative-entry.format-timeline:first-child::before {
  content: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.format-compact:hover {
    /* No transition needed */
  }
}

/* ========================================
 * Mobile Adjustments
 * ======================================== */

@media (max-width: 768px) {
  /* Script format - narrower speaker column */
  .narrative-entry.format-script {
    padding-left: 80px;
  }

  .narrative-entry.format-script::before {
    width: 65px;
  }

  /* Timeline format - stack vertically */
  .narrative-entry.format-timeline {
    padding-left: 20px;
    margin-left: 20px;
  }

  .narrative-entry.format-timeline::before {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
    margin-bottom: var(--space-1);
  }

  .narrative-entry.format-timeline::after {
    left: -15px;
  }

  /* Compact format - allow wrapping on mobile */
  .narrative-entry.format-compact {
    white-space: normal;
  }
}
/*
 * Atom: Post-it Note
 * ==================
 * Reusable clickable note cards for progressive reveal UI.
 * Click a post-it to type its command into the input bar.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Usage:
 *   render 'terminal/atoms/postit', title: "Your Heroes", body: "View characters",
 *     color: :yellow, command: "/characters", dismissible: true
 */

/* ========================================
 * Base Post-it
 * ======================================== */

.postit {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 180px;
  padding: 14px 14px 12px;
  border-radius: var(--postit-radius);
  box-shadow: var(--postit-shadow);
  cursor: pointer;
  transition: transform var(--timing-fast) var(--ease-default), box-shadow var(--timing-fast) var(--ease-default), opacity var(--timing-normal) var(--ease-default);
  user-select: none;
  z-index: var(--z-raised);
}

.postit:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
}

.postit:active {
  transform: scale(0.98);
}

/* ========================================
 * Color Variants
 * ======================================== */

.postit--yellow {
  background: var(--postit-yellow);
  color: var(--postit-yellow-text);
}

.postit--blue {
  background: var(--postit-blue);
  color: var(--postit-blue-text);
}

.postit--green {
  background: var(--postit-green);
  color: var(--postit-green-text);
}

.postit--pink {
  background: var(--postit-pink);
  color: var(--postit-pink-text);
}

/* ========================================
 * Typography
 * ======================================== */

.postit__title {
  font-family: var(--postit-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.postit__body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
  margin: 0;
}

.postit__command {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.5;
  margin-top: var(--space-1);
}

/* ========================================
 * Decorations (tape & pin)
 * ======================================== */

.postit__tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 1px;
  pointer-events: none;
}

.postit__pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 5px 5px, #ef5350, #b71c1c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ========================================
 * Dismiss Button
 * ======================================== */

.postit__dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--timing-fast) var(--ease-default);
  font-size: 14px;
  line-height: 1;
  color: inherit;
  padding: 0;
}

.postit:hover .postit__dismiss {
  opacity: 0.5;
}

.postit__dismiss:hover {
  opacity: 1;
}

/* ========================================
 * Animations
 * ======================================== */

/* Dismiss: note falls off screen */
.postit--falling {
  transform: translateY(120vh) rotate(15deg);
  opacity: 0;
  transition: transform var(--timing-dramatic) var(--ease-in), opacity var(--timing-dramatic) var(--ease-in);
  pointer-events: none;
}

/* Progressive reveal entrance */
.postit--entering {
  opacity: 0;
  transform: translateY(10px);
  animation: postitReveal var(--timing-normal) var(--ease-out) forwards;
}

/* Floating postits: entrance animation preserves the scattered rotation */
.postit-group--floating .postit--entering {
  opacity: 0;
  transform: rotate(var(--note-rotate, 0deg)) translateY(10px);
  animation: postitRevealRotated var(--timing-normal) var(--ease-out) forwards;
}

@keyframes postitReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes postitRevealRotated {
  to {
    opacity: 1;
    transform: rotate(var(--note-rotate, 0deg)) translateY(0);
  }
}

/* Staggered entrance delays */
.postit--delay-1 { animation-delay: var(--progressive-delay-1); }
.postit--delay-2 { animation-delay: var(--progressive-delay-2); }
.postit--delay-3 { animation-delay: var(--progressive-delay-3); }
.postit--delay-4 { animation-delay: var(--progressive-delay-4); }
.postit--delay-5 { animation-delay: var(--progressive-delay-5); }

/* ========================================
 * Layout: Post-it Group
 * ======================================== */

/* Default inline layout (creator studio, etc.) */
.postit-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  justify-content: center;
}

/* Floating layout — "stuck on the monitor" above everything.
 * Postits scatter across the viewport like physical sticky notes
 * haphazardly placed on a monitor. Visible in lobby room only.
 *
 * Rendered outside .terminal-zones in show.html.erb to avoid
 * stacking context burial from zone overflow/layout hierarchy. */
/* STRUCTURAL: Rendered in #postit-portal (direct body child) to escape all stacking contexts.
 * isolation:isolate creates an explicit stacking context so z-index works predictably
 * even if an ancestor somehow gets a transform/perspective applied. */
.postit-group--floating {
  position: fixed;
  inset: 0;
  z-index: var(--z-notification); /* Above panels/modals, below CRT effects */
  isolation: isolate;
  padding: 0;
  pointer-events: none; /* Let clicks pass through the container gap */
  display: block; /* No flexbox — children use absolute positioning */
}

/* #3731 1/5: Eager-strip floating postits from lobby first paint.
 * The DOM stays (so #3734 chip-row affordance map can summon them); only the
 * default visibility flips. Removing `postit-group--stripped` reveals them. */
.postit-group--floating.postit-group--stripped {
  display: none;
}

.postit-group--floating .postit {
  position: absolute;
  pointer-events: auto; /* Re-enable clicks on the notes themselves */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.postit-group--floating .postit:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Scattered placement — each nth-child gets a unique position on screen.
 * Positions chosen to look haphazard: corners, edges, off-center. */
.postit-group--floating .postit:nth-child(1) { top: 8%;  left: 6%;  --note-rotate: -3deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(2) { top: 12%; right: 8%; --note-rotate: 2deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(3) { top: 35%; left: 3%;  --note-rotate: 4deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(4) { top: 28%; right: 5%; --note-rotate: -2deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(5) { bottom: 22%; left: 8%; --note-rotate: 1deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(6) { bottom: 18%; right: 4%; --note-rotate: -4deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(7) { top: 55%; left: 5%;  --note-rotate: 3deg;  transform: rotate(var(--note-rotate)); }

/* Hover lifts the note slightly and resets rotation */
.postit-group--floating .postit:hover {
  z-index: var(--z-above);
}

/* Mobile (<768px) — hide post-it card stack entirely (#4276).
 * Per JP: don't compact/stack, fully remove from layout flow on narrow
 * viewports. Covers both the inline group layout and the floating cluster.
 * The `.postit` atom itself is also hidden defensively in case it appears
 * outside a known group wrapper. Desktop layout (≥768px) is untouched. */
@media (max-width: 767px) {
  .postit-group,
  .postit-group--floating,
  .postit {
    display: none !important;
  }
}

/* ========================================
 * Rotation Variants (for visual variety)
 * ======================================== */

.postit--tilt-left  { --note-rotate: -2deg; transform: rotate(var(--note-rotate)); }
.postit--tilt-right { --note-rotate: 2deg;  transform: rotate(var(--note-rotate)); }
.postit--tilt-left:hover  { transform: rotate(var(--note-rotate)) scale(1.04); }
.postit--tilt-right:hover { transform: rotate(var(--note-rotate)) scale(1.04); }

/* Floating postits use nth-child rotation — hover lifts while preserving tilt */
.postit-group--floating .postit:hover { transform: rotate(var(--note-rotate, 0deg)) scale(1.04); }

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

@media (prefers-reduced-motion: reduce) {
  .postit--entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .postit--falling {
    transition: opacity var(--timing-fast) var(--ease-default);
    transform: none;
  }
}
/*
 * Atom: Sticky Note
 * =================
 * Draggable parchment-style player notes that float in the narrative panel.
 * Created via /note command, persisted to CharacterNote.metadata.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Container
 * ======================================== */

.sticky-notes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-note); /* Above narrative-output content, below overlays (scroll-to-latest=50) */
}

/* ========================================
 * Base Sticky Note
 * ======================================== */

.sticky-note {
  position: absolute;
  width: 200px;
  min-height: 80px;
  border-radius: 3px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  user-select: none;
  transition: box-shadow var(--timing-fast) var(--ease-default), opacity var(--timing-normal) var(--ease-default);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  z-index: var(--z-note);
}

.sticky-note:hover {
  box-shadow: 3px 5px 14px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sticky-note--dragging {
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.6);
  opacity: 0.9;
  z-index: var(--z-note-active); /* Above other notes, below scroll-to-latest (50) */
}

/* ========================================
 * Color Variants
 * ======================================== */

.sticky-note--gold {
  background: #f5e6c8;
  color: #4a3b2a;
}

.sticky-note--gold .sticky-note__header {
  background: #e8d4a8;
  border-bottom: 1px solid #d4c090;
}

.sticky-note--blue {
  background: #c8daf5;
  color: #2a3b5a;
}

.sticky-note--blue .sticky-note__header {
  background: #a8c4e8;
  border-bottom: 1px solid #90aed4;
}

.sticky-note--green {
  background: #c8f0d0;
  color: #2a4a30;
}

.sticky-note--green .sticky-note__header {
  background: #a8d8b0;
  border-bottom: 1px solid #90c498;
}

.sticky-note--red {
  background: #f5cec8;
  color: #5a2a2a;
}

.sticky-note--red .sticky-note__header {
  background: #e8b0a8;
  border-bottom: 1px solid #d49890;
}

/* ========================================
 * Header (drag handle)
 * ======================================== */

.sticky-note__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  cursor: grab;
  border-radius: 3px 3px 0 0;
  min-height: 24px;
  gap: 4px;
}

.sticky-note__header:active {
  cursor: grabbing;
}

.sticky-note__drag-hint {
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 1px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-note__actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.sticky-note__btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  padding: 0;
  border-radius: 2px;
  transition: opacity var(--timing-instant) var(--ease-default), background var(--timing-instant) var(--ease-default);
}

.sticky-note__btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* ========================================
 * Body
 * ======================================== */

.sticky-note__body {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
}

.sticky-note--minimized .sticky-note__body {
  display: none;
}

/* ========================================
 * Footer
 * ======================================== */

.sticky-note__footer {
  padding: 2px 10px 6px;
  font-size: 10px;
  opacity: 0.4;
  text-align: right;
}

.sticky-note--minimized .sticky-note__footer {
  display: none;
}

/* ========================================
 * Minimized State
 * ======================================== */

.sticky-note--minimized {
  min-height: auto;
  width: 160px;
}

/* ========================================
 * Animations
 * ======================================== */

.sticky-note--entering {
  opacity: 0;
  transform: scale(0.9);
  animation: stickyNoteReveal var(--timing-normal) var(--ease-out) forwards;
}

@keyframes stickyNoteReveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sticky-note--dismissing {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--timing-normal) var(--ease-default), transform var(--timing-normal) var(--ease-default);
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .sticky-note--entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .sticky-note--dismissing {
    transition: opacity var(--timing-instant) var(--ease-default);
    transform: none;
  }
}
/* =============================================================================
   Autocomplete Dropdown
   ============================================================================= */

.autocomplete-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--elevation-floating);
  z-index: var(--z-dropdown);
  margin-bottom: var(--space-0-5);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--overlay-white-light);
}

.autocomplete-item.selected {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  border-left: 2px solid var(--color-accent-primary);
  padding-left: var(--space-2-5);
}

.autocomplete-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

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

.autocomplete-type {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--overlay-white-subtle);
  border-radius: var(--radius-sm);
}

/* Scrollbar styling */
.autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-thumb-radius);
}

.autocomplete-dropdown::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* Hint text when dropdown is shown */
.autocomplete-hint {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--overlay-light);
}

.autocomplete-hint kbd {
  display: inline-block;
  padding: 1px var(--space-1);
  font-size: var(--font-size-xs);
  background: var(--overlay-white-light);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-0-5);
}
/**
 * Molecules — Tab Navigation & Inputs
 * =====================================
 * Tab navigation, input line, message queue, chat mode selector,
 * selection tray, initiative entry, stat group, action group.
 */

/*
 * Atomic Design: Molecules
 * ========================
 * Combinations of atoms: tab-nav, input-line, selection-tray, etc.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Tab Navigation
 * ======================================== */

.tab-nav {
  display: flex;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

/* ========================================
 * Input Line
 * ======================================== */

.input-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.input-prompt {
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  -webkit-user-select: none;
  user-select: none;
}

.input-field {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.input-field::placeholder {
  color: var(--color-text-muted);
}

.input-field:focus {
  outline: none;
}

/* Focus state for the line */
.input-line:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Message Queue Indicator
 * Shows pending messages awaiting server response
 * ======================================== */

.message-queue-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.message-queue-indicator[hidden] {
  display: none;
}

.message-queue-indicator__icon {
  display: flex;
  align-items: center;
  animation: spin 1s linear infinite;
}

.message-queue-indicator__icon svg {
  width: 16px;
  height: 16px;
}

.message-queue-indicator__text {
  font-family: var(--font-mono);
}

.message-queue-indicator__count {
  font-weight: var(--font-weight-bold);
}

@keyframes queuePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* ========================================
 * Chat Mode Selector
 * Button-based mode selector (like DM channel mode)
 * ======================================== */

.chat-mode-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-right: var(--space-2);
  background: var(--color-bg-tertiary, #111);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.chat-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--color-text-muted, #888);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.chat-mode-btn:hover {
  background: var(--color-bg-hover, #1a1a1a);
  color: var(--color-text-primary, #fff);
}

.chat-mode-btn--active {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  border-color: var(--color-accent-primary, #7c3aed);
  color: var(--color-accent-primary, #7c3aed);
}

.chat-mode-btn__icon {
  font-size: 14px;
  line-height: 1;
}

.chat-mode-btn__label {
  font-weight: 500;
}

/* Keyboard hint */
.chat-mode-hint {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--color-text-muted);
}

.chat-mode-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

/* Hide labels on small screens, keep icons */
@media (max-width: 768px) {
  .chat-mode-btn__label {
    display: none;
  }

  .chat-mode-btn {
    padding: 6px;
  }

  .chat-mode-hint {
    display: none;
  }
}

/* Legacy indicator (deprecated, kept for compatibility) */
.chat-mode-indicator {
  display: none;
}

/* ========================================
 * Selection Tray
 * ======================================== */

.selection-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.send-selections-btn {
  flex-shrink: 0;
  align-self: flex-end;
}

/* Tray Variants */
.selection-tray--spell {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-secondary));
}

.selection-tray--equipment {
  border-color: var(--color-accent-warning);
  background: color-mix(in srgb, var(--color-accent-warning) 5%, var(--color-bg-secondary));
}

/* ========================================
 * Initiative Entry
 * ======================================== */

.initiative-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.initiative-entry--current {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary);
}

.initiative-entry--npc {
  border-left: 3px solid var(--color-accent-error);
}

.initiative-roll {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.initiative-entry--current .initiative-roll {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.participant-name {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ========================================
 * Stat Group
 * ======================================== */

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

.stat-group__title {
  font-family: var(--font-mono);
  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: 0;
}

.stat-group__values {
  display: flex;
  gap: var(--space-4);
}

/* Layout Variants */
.stat-group--horizontal .stat-group__values {
  flex-direction: row;
  flex-wrap: wrap;
}

.stat-group--vertical .stat-group__values {
  flex-direction: column;
  gap: var(--space-1);
}

.stat-group--grid .stat-group__values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2);
}

/* ========================================
 * Action Group
 * ======================================== */

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

.action-group__title {
  font-family: var(--font-mono);
  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: 0;
}

.action-group__buttons {
  display: flex;
  gap: var(--space-2);
}

/* Layout Variants */
.action-group--horizontal .action-group__buttons {
  flex-direction: row;
  flex-wrap: wrap;
}

.action-group--vertical .action-group__buttons {
  flex-direction: column;
}

/* ========================================
 * Suggestions Panel
 * ======================================== */

.suggestions-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  overflow: hidden;
}

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

.suggestions-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}

.suggestions-close {
  padding: var(--space-1);
  font-size: var(--font-size-xs);
}

.suggestions-content {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.suggestions-footer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.suggestion-custom-input {
  flex: 1;
}

.suggestion-batch-btn {
  flex-shrink: 0;
}
/**
 * Molecules — DM Guidance & Initiative
 * ======================================
 * Initiative list, DM guidance panel, and message mode chip.
 */

/* ========================================
 * Initiative List (container)
 * ======================================== */

.initiative-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ========================================
 * DM Guidance Panel
 * ======================================== */

.dm-guidance {
  display: flex;
  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-md);
  margin-top: var(--space-2);
}

.dm-guidance--compact {
  padding: var(--space-2);
  gap: var(--space-1);
}

/* Proactive Tip */
.dm-guidance__tip {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary)),
    color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-secondary))
  );
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  animation: tipSlideIn 0.3s ease-out;
}

.dm-guidance__tip--visible {
  display: flex;
}

.dm-guidance__tip-icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.dm-guidance__tip-content {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.dm-guidance__tip-dismiss {
  flex-shrink: 0;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: color var(--transition-fast);
}

.dm-guidance__tip-dismiss:hover {
  color: var(--color-text-primary);
}

/* Ask Section */
.dm-guidance__ask-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dm-guidance__ask-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  align-self: flex-start;
}

.dm-guidance__ask-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

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

.dm-guidance__ask-icon {
  font-size: var(--font-size-base);
}

.dm-guidance__ask-text {
  font-weight: var(--font-weight-medium);
}

/* Question Area */
.dm-guidance__question-area {
  display: none;
  align-items: center;
  gap: var(--space-2);
  animation: questionSlideIn 0.2s ease-out;
}

.dm-guidance__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dm-guidance__input::placeholder {
  color: var(--color-text-muted);
}

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

.dm-guidance__submit-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-bg-primary);
  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);
}

.dm-guidance__submit-btn:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 85%, white);
}

/* Answer Area */
.dm-guidance__answer-area {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border: 1px solid var(--color-accent-secondary);
  border-radius: var(--radius-md);
  animation: answerFadeIn 0.3s ease-out;
}

.dm-guidance__answer-area--visible {
  display: flex;
}

.dm-guidance__answer-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dm-guidance__answer-icon {
  font-size: var(--font-size-lg);
}

.dm-guidance__answer-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dm-guidance__answer-content {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Suggestion Chips */
.dm-guidance__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dm-guidance__chip {
  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-default);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dm-guidance__chip:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.dm-guidance__chip-icon {
  font-size: var(--font-size-sm);
}

.dm-guidance__chip-label {
  white-space: nowrap;
}

/* Loading Indicator */
.dm-guidance__loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.dm-guidance__loading-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  animation: loadingPulse 1.5s ease-in-out infinite;
}

/* Animations */
@keyframes tipSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

@keyframes loadingPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================
 * Message Mode Chip (#2847)
 * Inline badge shown on player echo when a turn-rhythm prefix is present.
 * ======================================== */

.message-mode-chip {
  display: inline-block;
  padding: 0 var(--space-1, 4px);
  margin-right: var(--space-1, 4px);
  border-radius: var(--radius-sm, 3px);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: baseline;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-secondary);
}

.message-mode-chip--act {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef9a9a;
}

.message-mode-chip--whisper,
.message-mode-chip--think {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.message-mode-chip--ask,
.message-mode-chip--plan {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.message-mode-chip--ready,
.message-mode-chip--react {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

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

@media (prefers-reduced-motion: reduce) {
  .initiative-entry,
  .input-line,
  .dm-guidance__tip,
  .dm-guidance__question-area,
  .dm-guidance__answer-area,
  .dm-guidance__loading-text {
    transition: none;
    animation: none;
  }
}
/**
 * Atomic Design: Molecules — Import Hub
 * ========================================
 * Composite UI components: tab nav, inputs, selection tray, DM guidance.
 *
 * Decomposed into focused files under molecules/ for maintainability.


 */
/**
 * Panel Components — Headers and Loading
 * ========================================
 * Panel headers, action groups, badges, tabs, skeleton loading states.
 */

/**
 * Panel Components
 * ================
 * Shared styles for panel headers, loading states, empty states,
 * and other common panel patterns.
 */

/* ========================================
 * Unified Panel Header
 * ======================================== */

.panel-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);
  min-height: 44px;
}

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

.panel-header__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.panel-header__icon {
  font-size: var(--font-size-base);
  color: var(--color-accent-primary);
}

.panel-header__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  background: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-primary);
}

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

.panel-header__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.panel-header__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.panel-header__action:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ========================================
 * Panel Content Area
 * ======================================== */

.panel-content {
  flex: 1;
  padding: var(--panel-padding); /* Phase 1: Consistent 16px panel padding */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.panel-content--compact {
  padding: var(--space-2);
}

.panel-content--flush {
  padding: 0;
}

/* ========================================
 * Panel Footer
 * ======================================== */

.panel-footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.panel-footer__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.panel-footer__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Unified Empty State
 * ======================================== */

.panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.panel-empty__icon {
  font-size: 48px;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.panel-empty__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.panel-empty__description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 280px;
}

.panel-empty__action {
  margin-top: var(--space-4);
}

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

.panel-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  gap: var(--space-3);
}

.panel-loading__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-bg-tertiary);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: panel-spin 1s linear infinite;
}

@keyframes panel-spin {
  to { transform: rotate(360deg); }
}

.panel-loading__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Skeleton loading for lists */
.panel-skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.panel-skeleton-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.panel-skeleton-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-hover) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: panel-shimmer 1.5s infinite;
}

.panel-skeleton-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.panel-skeleton-line {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-hover) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: panel-shimmer 1.5s infinite;
}

.panel-skeleton-line--short {
  width: 60%;
}

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

/**
 * Panel Components — Error, Nav, and Collapsibles
 * ==================================================
 * Panel error states, navigation buttons, section dividers, collapsible panels.
 */

/* ========================================
 * Panel Error State
 * ======================================== */

.panel-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.panel-error__icon {
  font-size: 32px;
  color: var(--color-accent-error);
  margin-bottom: var(--space-3);
}

.panel-error__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-error);
}

.panel-error__description {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  max-width: 280px;
}

.panel-error__retry {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.panel-error__retry:hover {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* ========================================
 * Panel Section Dividers
 * ======================================== */

.panel-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.panel-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-border-subtle);
}

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

/* ========================================
 * Panel Tabs
 * ======================================== */

.panel-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
}

.panel-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.panel-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.panel-tab--active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.panel-tab__badge {
  padding: 0 var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
}

.panel-tab--active .panel-tab__badge {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  color: var(--color-accent-primary);
}

/* ========================================
 * Panel Collapse/Expand
 * ======================================== */

.panel-collapsible__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: none;
}

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

.panel-collapsible__chevron {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.panel-collapsible--open .panel-collapsible__chevron {
  transform: rotate(180deg);
}

.panel-collapsible__content {
  padding: var(--space-2);
  display: none;
}

.panel-collapsible--open .panel-collapsible__content {
  display: block;
}
/**
 * Panel Components — Search and Misc
 * =====================================
 * Panel search, entity labels, subclass names, mobile clamping.
 */


/* ========================================
 * Panel Search
 * ======================================== */

.panel-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
}

.panel-search__input-wrapper {
  position: relative;
  flex: 1;
}

.panel-search__icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.panel-search__input {
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  transition: border-color var(--transition-fast);
}

.panel-search__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.panel-search__input::placeholder {
  color: var(--color-text-muted);
}

.panel-search__clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-bg-tertiary);
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.panel-search__input:not(:placeholder-shown) + .panel-search__clear {
  opacity: 1;
}

.panel-search__clear:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

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

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

  .panel-content {
    padding: var(--space-2);
  }

  .panel-tabs {
    padding: 0 var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .panel-tab {
    padding: var(--space-2);
    white-space: nowrap;
  }

  .panel-header__action {
    width: 44px;
    height: 44px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .panel-loading__spinner {
    animation: none;
  }

  .panel-skeleton-avatar,
  .panel-skeleton-line {
    animation: none;
  }
}

/* ========================================
 * Quick Start Panel — Archetype Onboarding
 * ======================================== */

.quick-start-panel .archetype-onboarding {
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-muted, #7f848e);
  margin-top: 4px;
}

/* Subdued underlying D&D class name (e.g. "Fighter" beneath "Warrior").
 * Helps players coming from D&D knowledge find the canonical class. (#4264 / 3.1) */
.quick-start-panel .archetype-class {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7f848e);
  opacity: 0.75;
  margin-top: 1px;
}

/* Mobile: clamp long onboarding descriptions to 2 lines so cards stay
 * predictable in height. CSS-only via line-clamp — no JS needed. (#4264 / 3.2) */
@media (max-width: 768px) {
  .quick-start-panel .archetype-onboarding {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/**
 * Panel Components — Import Hub
 * ================================
 * Reusable panel sub-components: headers, tabs, loading, errors, search.
 *
 * Decomposed into focused files under panel_components/ for maintainability.



 */
/*
 * Molecule: Roll Result
 * =====================
 * Visual dice roll display with outcome indicators.
 * Used by RollResultSegment for attack rolls, saves, skill checks, etc.
 */

/* ========================================
 * Roll Result Container
 * ======================================== */

.roll-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--overlay-dark);
  border: 1px solid var(--overlay-gold-light);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  margin: var(--space-2) 0;
}

/* Outcome-based border colors */
.roll-result.roll-critical_success {
  border-color: var(--color-success);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.roll-result.roll-success {
  border-color: var(--color-success);
}

.roll-result.roll-failure {
  border-color: var(--color-error);
  opacity: 0.9;
}

.roll-result.roll-critical_failure {
  border-color: var(--color-error);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* ========================================
 * Roll Header
 * ======================================== */

.roll-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.roll-icon {
  font-size: var(--font-size-lg);
}

.roll-type {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
}

.roll-character {
  color: var(--color-text-primary);
  font-weight: 500;
}

.roll-badge {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roll-badge-advantage {
  background: rgba(34, 197, 94, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.roll-badge-disadvantage {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ========================================
 * Dice Display
 * ======================================== */

.roll-dice-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-base);
}

.roll-formula {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.roll-equals {
  color: var(--color-text-muted);
}

.roll-dice {
  display: flex;
  gap: var(--space-1);
}

.roll-die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-1-5);
  background: var(--overlay-light);
  border: 2px solid var(--overlay-gold-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Natural 20 */
.roll-die.die-critical {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.3));
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  animation: die-glow 1.5s ease-in-out infinite alternate;
}

/* Natural 1 */
.roll-die.die-fumble {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.3));
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Used die (advantage/disadvantage) */
.roll-die.die-used {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.1);
}

/* Discarded die (advantage/disadvantage) */
.roll-die.die-discarded {
  opacity: 0.4;
  text-decoration: line-through;
  border-style: dashed;
}

@keyframes die-glow {
  from {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }
  to {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  }
}

.roll-modifier {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.roll-total-label {
  color: var(--color-text-muted);
}

.roll-total {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-2);
  background: var(--overlay-gold-light);
  border-radius: var(--radius-sm);
}

/* Outcome-based total colors */
.roll-critical_success .roll-total {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.2);
}

.roll-success .roll-total {
  color: var(--color-success);
}

.roll-failure .roll-total {
  color: var(--color-error);
}

.roll-critical_failure .roll-total {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.2);
}

/* ========================================
 * Result Bar
 * ======================================== */

.roll-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--overlay-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.roll-dc {
  color: var(--color-text-muted);
  font-weight: 500;
}

.roll-outcome-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roll-critical_success .roll-outcome-label {
  color: var(--color-success);
}

.roll-success .roll-outcome-label {
  color: var(--color-success);
}

.roll-failure .roll-outcome-label {
  color: var(--color-error);
}

.roll-critical_failure .roll-outcome-label {
  color: var(--color-error);
}

.roll-outcome-icon {
  font-size: var(--font-size-base);
}

/* ========================================
 * Narrative Text
 * ======================================== */

.roll-narrative {
  padding-top: var(--space-2);
  border-top: 1px solid var(--overlay-gold-light);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.roll-narrative p {
  margin: 0;
}

/* ========================================
 * Check Type Specific Styling
 * ======================================== */

.roll-type-attack .roll-type {
  color: var(--color-combat, #ef4444);
}

.roll-type-save .roll-type {
  color: var(--color-warning, #f59e0b);
}

.roll-type-damage .roll-total {
  color: var(--color-combat, #ef4444);
}

.roll-type-healing .roll-total {
  color: var(--color-success);
}

.roll-type-initiative .roll-type {
  color: var(--color-info, #3b82f6);
}

/* ========================================
 * Compact Mode (for inline display)
 * ======================================== */

.roll-result.roll-compact {
  flex-direction: row;
  align-items: center;
  padding: var(--space-2);
  gap: var(--space-3);
}

.roll-result.roll-compact .roll-header {
  display: none;
}

.roll-result.roll-compact .roll-dice-display {
  font-size: var(--font-size-sm);
}

.roll-result.roll-compact .roll-die {
  min-width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
}

.roll-result.roll-compact .roll-total {
  font-size: var(--font-size-base);
  padding: var(--space-0-5) var(--space-1-5);
}

.roll-result.roll-compact .roll-result-bar {
  display: none;
}

.roll-result.roll-compact .roll-narrative {
  border-top: none;
  padding-top: 0;
}

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

@media (max-width: 480px) {
  .roll-dice-display {
    flex-direction: column;
    align-items: flex-start;
  }

  .roll-result-bar {
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
  }
}
/*
 * Mobile HP Pill
 * ==============
 * Compact HP indicator shown in the status bar on mobile/tablet.
 * Only visible when in the game room (<1024px viewport).
 *
 * Extracted from _status_bar.css to respect file-size caps.
 * Uses design tokens from: terminal/_tokens.css
 */

.mobile-hp-pill {
  display: none; /* Hidden by default; shown via JS + media query */
}

@media (max-width: 1023px) {
  .mobile-hp-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 12px);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
  }

  .mobile-hp-pill--healthy {
    color: var(--accent-secondary, #98c379);
    background: rgba(152, 195, 121, 0.12);
    border-color: rgba(152, 195, 121, 0.25);
  }

  .mobile-hp-pill--injured {
    color: var(--accent-warning, #e5c07b);
    background: rgba(229, 192, 123, 0.12);
    border-color: rgba(229, 192, 123, 0.25);
  }

  .mobile-hp-pill--critical {
    color: var(--accent-error, #e06c75);
    background: rgba(224, 108, 117, 0.15);
    border-color: rgba(224, 108, 117, 0.3);
  }

  @keyframes mobileHpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* Only animate when user hasn't requested reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    .mobile-hp-pill--critical {
      animation: mobileHpPulse 1.5s ease-in-out infinite;
    }
  }

  .mobile-hp-pill__icon {
    font-size: var(--font-size-xs);
    line-height: 1;
  }

  .mobile-hp-pill__value {
    line-height: 1;
  }
}

/* Hide pill on desktop — stats visible in character sheet panel */
@media (min-width: 1024px) {
  .mobile-hp-pill {
    display: none;
  }
}
/* ========================================
 * Character Creation Layout
 * Split Panel Layout (Narrative Left + Banner/Wizard Right)
 * Extracted from _grid_container.css (#2637) to respect file-size caps.
 * ======================================== */

.character-creation-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: Narrative/Guidance panel - 60% */
.character-creation-layout .lobby-left-panel {
  flex: 0.6 1 0%;
  min-width: 250px;
  min-height: 0;
}

/* Right: Banner + Wizard panels - 40% */
.character-creation-layout .lobby-right-panels {
  flex: 0.4 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  min-height: 0;
}

/* Main content area below banner and hotbar */
.character-creation-layout .lobby-right-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.creation-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Phone (<=767px): Stack narrative and wizard panels vertically.
   Narrative stays visible (eliminates dead-space per #2575); the right
   panels are HIDDEN at this width — wizard/banner/overview open via
   bottom-sheet overlays controlled by mobile_panel_controller (#2637).
   See the (max-width: 767px) block below for right-panel display:none.
   Synced with mobile-panel controller breakpoint (768px). */
@media (max-width: 767px) {
  .character-creation-layout .lobby-split-container {
    flex-direction: column;
    flex: 1;
    height: 100%;
    /* Allow vertical scroll when stacked content exceeds viewport */
    overflow-y: auto;
  }

  .character-creation-layout .lobby-column-divider {
    display: none;
  }

  /* Narrative (left panel) always visible on mobile — overrides
     auto-mobile-mode .grid-panel { display: none } which would otherwise
     hide it until JS adds mobile-active or mobile-bottom-sheet-mode (#1070).
     Must match specificity of .grid-layout-wrapper.auto-mobile-mode .grid-panel (0-3-0). */
  .character-creation-layout.auto-mobile-mode .lobby-left-panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 0;
  }
}

/* Tablet (768-1023px): COMPRESSED DESKTOP — right-panels stay side-by-side
   with narrative, just with tighter padding + smaller min-widths to fit.
   Per #4150, JP design call (2026-04-30) resolving #2988: tablet should be
   "compressed desktop", NOT mobile drawer/stack. Right-panels (banner +
   character overview + wizard cards) remain visible alongside narrative
   instead of stacking below it.

   Touch targets stay >=44px (governed by _grid_container.css max-width:1023px
   block). Column divider stays visible (and is widened to 10px on touch via
   _grid_container.css). */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Keep horizontal split — do NOT collapse to column. */
  .character-creation-layout .lobby-split-container {
    flex-direction: row;
    flex: 1;
    height: auto;
    overflow: hidden;
  }

  /* Narrative gets a slightly larger share so the wizard side is compressed
     but still legible. min-width drops so it can shrink to ~190px on the
     narrowest tablet (768px) and still leave room for ~280px of right-panel.
     Override desktop's 250px floor. */
  .character-creation-layout .lobby-left-panel {
    flex: 0.55 1 0%;
    min-width: 190px;
  }

  /* Right panels stay visible alongside narrative. Compress min-width from
     250px (desktop) to 220px so we fit 768px viewport with the divider +
     narrative min-width. Inner padding from child panels handles the rest. */
  .character-creation-layout .lobby-right-panels {
    flex: 0.45 1 0%;
    min-width: 220px;
    width: auto;
  }

  /* Tighten the split-container gutter so we don't waste px on tablet. */
  .character-creation-layout .lobby-split-container {
    padding: var(--space-1, 4px);
    gap: var(--space-1, 4px);
  }
}

/* Phone (<768px): hide right-panels so narrative fills screen. Wizard/
   overview/banner open via bottom-sheet overlays controlled by JS.
   Tablet (768-1023px) shows compressed-desktop right-panels via the
   (min-width: 768px) and (max-width: 1023px) block above (#4150). */
@media (max-width: 767px) {
  .character-creation-layout .lobby-right-panels {
    display: none;
  }

  /* #3716: Collapse the empty black void below the chat input on phones.
     The (max-width: 767px) block above sets .lobby-left-panel to
     `flex: 1 0 auto`, which makes the panel sized by its CONTENT (cards +
     input area). When that content is short (e.g. ability-method picker,
     ~40-50% of viewport), the panel doesn't grow to fill
     .lobby-split-container, leaving a 50%+ void of dead space below the
     sticky input.

     On phones the wizard right-panels are hidden, so .lobby-left-panel
     is the only stacked child. Switching to `flex: 1 1 0%` makes the
     panel size from the PARENT height (which is constrained by
     .lobby-split-container -> .grid-layout-wrapper -> .zone--main),
     pushing the input to the bottom of the available viewport and
     letting narrative-output expand into the empty area above it.

     Also disable overflow-y on the split-container itself: with no
     stacked siblings on phones there's nothing to scroll at the
     container level. .narrative-main owns the internal scroll context
     (required for the sticky input-area; see _mobile_first.css).

     Tablet (768-1023px) uses compressed-desktop side-by-side layout
     (#4150) — this rule is phone-only and does not affect tablets. */
  .character-creation-layout.auto-mobile-mode .lobby-left-panel {
    flex: 1 1 0%;
  }

  .character-creation-layout .lobby-split-container {
    overflow: hidden;
  }
}
/*
 * Split Container Layout
 * ======================
 * Two-panel split layout with draggable divider.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Architecture:
 * - Two side-by-side panels with a draggable divider
 * - Split ratio controlled via CSS custom property --split-ratio
 * - Southpaw mode reverses visual order via flex-direction
 * - Responsive collapse at mobile breakpoint
 */

/* ========================================
 * Grid Layout Wrapper
 * ======================================== */

.grid-layout-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Room Transition Animations
   Duration synced from JS via --t-fade custom property (transition_timing.js).
   Fallback to 300ms if CSS custom property not yet initialized. */
.grid-layout-wrapper.room-transition-out {
  animation: fadeOut var(--t-fade, 300ms) ease-out forwards;
}

.grid-layout-wrapper.room-transition-in {
  animation: fadeIn var(--t-fade, 300ms) ease-in forwards;
}

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

/* ========================================
 * Split Layout Container
 * ======================================== */

.grid-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  gap: 0;
  padding: var(--grid-gap, 4px);
}

/* Southpaw mode: reverses visual panel order */
.grid-layout-container.split-layout--southpaw {
  flex-direction: row-reverse;
}

/* ========================================
 * Split Panels
 * ======================================== */

.split-panel--left {
  flex: var(--split-ratio, 0.65) 1 0%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.split-panel--right {
  flex: calc(1 - var(--split-ratio, 0.65)) 1 0%;
  min-width: 300px; /* Increased from 250px to give stat-hex (260px max-width) adequate room */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Stacked right panel (top + bottom) */
.split-panel--right.split-panel--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.split-panel--right-top {
  flex: var(--right-split, 0.5) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 80px; /* Smaller min for reference panel */
  overflow: hidden;
}

.split-panel--right-bottom {
  flex: calc(1 - var(--right-split, 0.5)) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 200px; /* Larger min for character sheet - needs more space */
  overflow: hidden;
}

/* Stacked solo panel (top + bottom, no left/right split) - used in character creation */
.split-panel--solo.split-panel--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.split-panel--left-top {
  flex: var(--left-split, 0.4) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 80px;
  overflow: hidden;
}

.split-panel--left-bottom {
  flex: calc(1 - var(--left-split, 0.4)) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  overflow: hidden;
}

/* Horizontal divider for stacked panels */
.split-divider--horizontal {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  cursor: row-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.split-divider--horizontal:hover,
.split-divider--horizontal.split-divider--dragging {
  background: var(--color-accent-primary);
}

.split-divider--horizontal .split-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.split-divider--horizontal:hover .split-divider__handle,
.split-divider--horizontal.split-divider--dragging .split-divider__handle {
  opacity: 1;
}

/* Body state during horizontal divider drag */
body.split-dragging-vertical {
  cursor: row-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging-vertical * {
  cursor: row-resize !important;
}

/* Single panel mode (no right panel) */
.split-panel--left.split-panel--solo {
  flex: 1;
  min-width: 0;
}

/* Tab menu panel (Battle.net style) */
.split-panel--right.split-panel--with-tab-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.split-panel--with-tab-menu .room-tab-menu {
  flex-shrink: 0;
}

.split-panel--with-tab-menu .room-tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.split-panel--with-tab-menu .grid-panel {
  flex: 1;
  min-height: 0;
}

/* ========================================
 * Split Divider
 * ======================================== */

.split-divider {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.split-divider:hover,
.split-divider--dragging {
  background: var(--color-accent-primary);
}

.split-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.split-divider:hover .split-divider__handle,
.split-divider--dragging .split-divider__handle {
  opacity: 1;
}

/* Body state during divider drag */
body.split-dragging {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Grid Panel (Card)
 * ======================================== */

.grid-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-primary);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  position: relative;
  /* Prevent flash: panels hidden until JS marks them as initialized */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--timing-normal) var(--ease-out), transform var(--timing-normal) var(--ease-out);
}

/* Show panel once initialized by JavaScript */
.grid-panel.initialized,
.grid-panel--active {
  opacity: 1;
  transform: translateY(0);
}

/* Allow dropdown submenus to escape panel bounds */
.grid-panel:has(.panel-dropdown__menu.open) {
  overflow: visible;
  z-index: var(--z-dropdown, 1000);
}

.grid-layout-container:has(.panel-dropdown__menu.open) {
  overflow: visible;
}

/* Active/focused panel - visible indicator */
.grid-panel--active {
  background: var(--color-bg-secondary);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  z-index: var(--z-raised);
}

/* Zoomed panel */
.grid-panel--zoomed {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  border-radius: 0;
  border: none;
}

/* ========================================
 * Panel Header
 * ======================================== */

.grid-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  flex-shrink: 0;
  min-height: 24px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.grid-panel__header:active {
  cursor: grabbing;
}

.grid-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* Reset h2 heading used for a11y hierarchy — keep visual consistency */
h2.grid-panel__title,
.grid-panel__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Focused panel header highlight */
.grid-panel--active .grid-panel__header {
  background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-secondary));
}

.grid-panel--active .grid-panel__title {
  color: var(--color-accent-primary);
}

/* ========================================
 * Panel Actions
 * ======================================== */

.grid-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.grid-panel:hover .grid-panel__actions,
.grid-panel--active .grid-panel__actions {
  opacity: 1;
}

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

.grid-panel__action:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.grid-panel__action--close:hover {
  background: var(--color-accent-error);
  color: white;
}

/* ========================================
 * Panel Content
 * ======================================== */

.grid-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.grid-panel__content::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.grid-panel__content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.grid-panel__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-md);
}

.grid-panel__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* ========================================
 * Panel Drag and Drop (Swap)
 * ======================================== */

.grid-panel--dragging {
  opacity: 0.6;
  z-index: var(--z-panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.01);
}

.grid-panel--drag-over {
  outline: 2px dashed var(--color-accent-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-primary));
}

body.grid-panel-dragging {
  cursor: grabbing;
}

body.grid-panel-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Prefix Indicator (Ctrl+B)
 * ======================================== */

.grid-prefix-indicator {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.grid-prefix-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
 * Empty State (all panels floating)
 * ======================================== */

.grid-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  padding: var(--space-8);
  color: var(--color-text-muted);
  text-align: center;
  animation: gridEmptyFadeIn var(--timing-normal) var(--ease-out);
}

.grid-empty-state__icon {
  font-size: var(--font-size-5xl);
  opacity: 0.2;
  margin-bottom: var(--space-3);
}

.grid-empty-state__text {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: var(--space-2);
}

.grid-empty-state__hint {
  font-size: var(--font-size-xs);
  opacity: 0.35;
}

.grid-empty-state__hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

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

@media (prefers-reduced-motion: reduce) {
  .grid-empty-state {
    animation: none;
  }
}

/* ========================================
 * Empty Panel Placeholder
 * ======================================== */

.grid-panel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.grid-panel__placeholder-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.grid-panel__placeholder-text {
  font-size: var(--font-size-sm);
}

/* ========================================
 * Notification
 * ======================================== */

.grid-notification {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-warning, #f59e0b);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}

.grid-notification.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================================
 * Protected Panel Indicator
 * ======================================== */

.grid-panel--protected .grid-panel__header {
  border-left: 2px solid var(--color-accent-warning, #f59e0b);
}

/* ========================================
 * Panel Transition Animations
 * ======================================== */

.grid-panel--exiting {
  animation: gridPanelFadeOut var(--timing-fast) var(--ease-out) forwards;
  pointer-events: none;
}

.grid-panel--entering {
  animation: gridPanelFadeIn var(--timing-normal) var(--ease-out) forwards;
}

.grid-panel__content--exiting {
  animation: gridContentFadeOut var(--timing-fast) var(--ease-out) forwards;
  pointer-events: none;
}

.grid-panel__content--entering {
  animation: gridContentFadeIn var(--timing-fast) var(--ease-out) forwards;
}

@keyframes gridPanelFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes gridPanelFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

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

/* ========================================
 * FLIP Panel Slide Animations
 * Ghost clones used by PanelAnimator for exit animations
 * ======================================== */

.panel-animator__ghost {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-sticky);
  will-change: transform, opacity;
  contain: strict;
  overflow: hidden;
}

/* Ensure container is a positioning context during animations */
.grid-layout-container {
  position: relative;
}

/* Tab content needs positioning for ghost clones during tab switches */
.room-tab-content {
  position: relative;
  overflow: hidden;
}

/* ========================================
 * Panel Update Highlight
 * ======================================== */

.grid-panel--highlight-update {
  animation: grid-panel-update-flash var(--timing-slow) var(--ease-out);
}

@keyframes grid-panel-update-flash {
  0% { box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
  100% { box-shadow: none; }
}

.grid-panel__update-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  animation: grid-badge-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes grid-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========================================
 * Panel AI DM Hint Highlights
 * Applied by grid_container_controller#highlightPanel when the AI DM
 * draws attention to a panel (e.g. "check your inventory").
 * Class pattern: grid-panel--highlight-{style}
 * Ported from split-panel--highlight-* in _panels.css (#1391)
 * ======================================== */

/* Pulse - pulsing glow for general attention hints */
.grid-panel--highlight-pulse {
  animation: grid-panel-pulse var(--timing-slow) var(--ease-in-out) 3;
}

@keyframes grid-panel-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-primary) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
  }
}

/* Glow - soft sustained aura, used for "look at this" hints */
.grid-panel--highlight-glow {
  animation: grid-panel-glow 1s ease-in-out infinite alternate;
}

@keyframes grid-panel-glow {
  from {
    box-shadow:
      0 0 5px color-mix(in srgb, var(--color-accent-primary) 30%, transparent),
      0 0 10px color-mix(in srgb, var(--color-accent-primary) 20%, transparent),
      0 0 15px color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
  }
  to {
    box-shadow:
      0 0 10px color-mix(in srgb, var(--color-accent-primary) 50%, transparent),
      0 0 20px color-mix(in srgb, var(--color-accent-primary) 30%, transparent),
      0 0 30px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  }
}

/* Border - quick warning-coloured border flash */
.grid-panel--highlight-border {
  animation: grid-panel-border-flash var(--timing-normal) var(--ease-out) 2;
}

@keyframes grid-panel-border-flash {
  0% {
    box-shadow: inset 0 0 0 1px transparent;
  }
  50% {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent-warning) 30%, transparent),
                0 0 0 2px color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
  }
  100% {
    box-shadow: inset 0 0 0 2px var(--color-accent-warning);
  }
}

/* Shake - horizontal jitter for urgent attention */
.grid-panel--highlight-shake {
  animation: grid-panel-shake var(--timing-normal) var(--ease-in-out) 2;
}

@keyframes grid-panel-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Combat - red pulse for combat-relevant alerts */
.grid-panel--highlight-combat {
  animation: grid-panel-combat var(--timing-slow) var(--ease-in-out) 3;
}

@keyframes grid-panel-combat {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-error) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
  }
}

/* Success - green glow for positive events and rewards */
.grid-panel--highlight-success {
  animation: grid-panel-success var(--timing-slow) var(--ease-in-out) 2;
}

@keyframes grid-panel-success {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-success) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-success) 50%, transparent);
  }
}

/* Panel Tooltip - floating message injected by AI DM highlight command */
.grid-panel__tooltip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-tooltip, 500);
  animation: grid-panel-tooltip-fade-in var(--timing-fast) var(--ease-out);
  pointer-events: none;
}

.grid-panel__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent-primary);
}

@keyframes grid-panel-tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-90%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%);
  }
}

/* ========================================
 * Focus-Visible (Keyboard Navigation)
 * ======================================== */

.grid-panel:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: -2px;
}

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

/* Mobile + Tablet: compact headers and touch targets */
@media (max-width: 1023px) {
  .grid-panel__header {
    padding: var(--space-1);
  }

  .grid-panel__title {
    font-size: var(--font-size-xs);
  }

  .grid-panel__action {
    width: 44px;  /* WCAG touch target */
    height: 44px;
    font-size: var(--font-size-base);
  }

  /* Hide divider on mobile since we use single-panel mode */
  .split-divider {
    display: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .grid-panel,
  .split-divider,
  .grid-prefix-indicator {
    transition: none;
  }

  .grid-panel--exiting,
  .grid-panel--entering,
  .grid-panel__content--exiting,
  .grid-panel__content--entering,
  .grid-panel--highlight-update,
  .grid-panel__tooltip {
    animation: none;
  }

  .grid-panel__update-badge {
    animation: none;
  }

  /* AI DM hint highlights: disable animations, use static outlines instead */
  .grid-panel--highlight-pulse,
  .grid-panel--highlight-glow {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-primary);
  }

  .grid-panel--highlight-border {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--color-accent-warning);
  }

  .grid-panel--highlight-shake {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--color-accent-primary);
  }

  .grid-panel--highlight-combat {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-error);
  }

  .grid-panel--highlight-success {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-success);
  }

  /* FLIP ghost animations disabled */
  .panel-animator__ghost {
    display: none;
  }
}

/* ========================================
 * Panel Dropdown Menu
 * ======================================== */

.panel-dropdown {
  position: relative;
}

.grid-panel__dropdown-trigger {
  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;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.grid-panel__dropdown-trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.grid-panel__dropdown-trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Row span badge in dropdown menu */
.panel-dropdown__badge {
  padding: 0 4px;
  font-size: var(--font-size-xs);
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* ========================================
 * Mobile Panel Switcher
 * ======================================== */

.grid-layout-wrapper.mobile-mode {
  flex-direction: column;
}

.grid-layout-wrapper.mobile-mode .mobile-panel-switcher {
  display: flex;
}

.grid-layout-wrapper.mobile-mode .grid-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Hide all panels except active in mobile */
.grid-layout-wrapper.mobile-mode .grid-panel {
  display: none;
}

.grid-layout-wrapper.mobile-mode .grid-panel.mobile-active {
  display: flex;
  flex: 1;
}

/* Auto-mobile breakpoint — synced with mobile_panel_controller (BREAKPOINTS.mobile = 768px) */
@media (max-width: 768px) {
  .grid-layout-wrapper.auto-mobile-mode .mobile-panel-switcher {
    display: flex;
  }

  .grid-layout-wrapper.auto-mobile-mode .grid-layout-container {
    display: flex;
  }

  .grid-layout-wrapper.auto-mobile-mode .grid-panel {
    display: none;
  }

  .grid-layout-wrapper.auto-mobile-mode .grid-panel.mobile-active {
    display: flex;
    flex: 1;
  }

  /* Bottom-sheet mode: narrative panel is always visible */
  .grid-layout-wrapper.auto-mobile-mode.mobile-bottom-sheet-mode .grid-panel {
    display: none;
  }

  .grid-layout-wrapper.auto-mobile-mode.mobile-bottom-sheet-mode .grid-panel[data-panel-type="narrative"],
  .grid-layout-wrapper.auto-mobile-mode.mobile-bottom-sheet-mode .grid-panel[data-panel-key="narrative"] {
    display: flex;
    flex: 1;
  }

}

/* Force desktop mode above mobile breakpoint (769px+) */
@media (min-width: 769px) {
  .grid-layout-wrapper .mobile-panel-switcher {
    display: none;
  }

  .grid-layout-wrapper .grid-panel {
    display: flex;
  }
}

/* Touch-friendly controls on tablet (768–1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .split-divider {
    width: 10px;  /* Wider for touch */
  }

  .split-divider__handle {
    opacity: 0.6;  /* Always visible on touch */
  }
}

@media (max-width: 1023px) {
  .grid-panel__action {
    width: 44px;
    height: 44px;
  }

  .grid-panel__dropdown-trigger {
    width: 44px;
    height: 44px;
  }
}

/* Lobby Narrative Layout — extracted to layout/_lobby_layout.css (#2091) */

/* ========================================
 * Lobby Character Select Layout (Chat Left + Panels Right)
 * [Legacy — retained for campaign_lobby and non-lobby rooms]
 * ======================================== */

.lobby-character-select-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lobby-split-container {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  padding: var(--grid-gap, 4px);
  gap: var(--grid-gap, 4px);
}

/* Left: Narrative/Chat panel - larger by default (60%) */
.lobby-character-select-layout .lobby-left-panel {
  flex: 0.6 1 0%;
  min-width: 250px;
  min-height: 0;
}

/* Right: Banner + Hotbar + Stacked lobby browser + character gallery - smaller (40%) */
.lobby-character-select-layout .lobby-right-panels {
  flex: 0.4 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  min-height: 0;
}

/* Main content area below banner and hotbar */
.lobby-character-select-layout .lobby-right-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.lobby-character-select-layout .lobby-top-panel {
  flex: 0 0 auto;
  min-height: 80px;
  max-height: 40%;
  overflow: auto;
}

.lobby-character-select-layout .lobby-bottom-panel {
  flex: 1;
  min-height: 200px;
  overflow: hidden;
}

.lobby-character-select-layout .lobby-right-content-full {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Row divider between lobby browser and character gallery */
.lobby-row-divider {
  height: 6px;
  flex-shrink: 0;
  cursor: row-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.lobby-row-divider:hover,
.lobby-row-divider.dragging {
  background: var(--color-accent-primary);
}

.lobby-row-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.lobby-row-divider:hover .lobby-row-divider__handle,
.lobby-row-divider.dragging .lobby-row-divider__handle {
  opacity: 1;
}

body.lobby-row-dragging {
  cursor: row-resize;
  -webkit-user-select: none;
  user-select: none;
}

/* Column divider between narrative and right panels */
.lobby-column-divider {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.lobby-column-divider:hover,
.lobby-column-divider.dragging {
  background: var(--color-accent-primary);
}

.lobby-column-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.lobby-column-divider:hover .lobby-column-divider__handle,
.lobby-column-divider.dragging .lobby-column-divider__handle {
  opacity: 1;
}

body.lobby-column-dragging {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

/* Mobile + Tablet: lobby layout collapses at tablet boundary (1023px).
   Synced with lobby_column_resize_controller MIN_VIEWPORT_PX = 1024. */
@media (max-width: 1023px) {
  .lobby-split-container {
    flex-direction: column;
  }

  .lobby-row-divider,
  .lobby-column-divider {
    display: none;
  }

  .lobby-character-select-layout .lobby-left-panel,
  .lobby-character-select-layout .lobby-top-panel,
  .lobby-character-select-layout .lobby-bottom-panel {
    flex: 1;
    min-width: 0;
    display: none;
  }

  .lobby-character-select-layout .lobby-left-panel.mobile-active,
  .lobby-character-select-layout .lobby-top-panel.mobile-active,
  .lobby-character-select-layout .lobby-bottom-panel.mobile-active {
    display: flex;
  }

  /* Bottom-sheet mode: lobby narrative (left panel) always visible and fills viewport */
  .mobile-bottom-sheet-mode .lobby-character-select-layout .lobby-left-panel {
    display: flex;
    flex: 1;
    min-width: 0;
  }

  .mobile-bottom-sheet-mode .lobby-character-select-layout .lobby-right-panels {
    display: none;
  }
}

/* ========================================
 * Mobile (<768px): Approach A — Narrative Always Visible
 * Narrative panel is the base layer. Other panels open as
 * bottom-sheet overlays (handled by mobile_panel_controller.js).
 * Input stays pinned at bottom via flex layout (flex-shrink:0).
 *
 * BREAKPOINT NOTE: CSS uses max-width:767px (mobile range 0–767px).
 * JS controller uses BREAKPOINTS.mobile = 768 (activates at <=768px).
 * HTML templates may override to 1024 — covered by the 1023px block above.
 * ======================================== */

@media (max-width: 767px) {
  /* ---- Lobby character-select layout ---- */

  /* Narrative left panel: always the base layer, never hidden */
  .lobby-character-select-layout .lobby-left-panel {
    display: flex;
    flex: 1;
    min-width: 0;
    /* Ensure narrative fills full height below status bar */
    min-height: 0;
  }

  /* ---- Character creation layout ---- */

  /* Narrative left panel: always the base layer on mobile (#1070).
     Belt-and-suspenders: also declared at max-width:1023px above,
     but repeated here with higher specificity for small phones. */
  .character-creation-layout .lobby-left-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  /* Right panels: hidden by default — opened as bottom-sheet overlays by JS */
  .lobby-character-select-layout .lobby-right-panels {
    display: none;
  }

  /* Dividers are non-functional on mobile */
  .lobby-row-divider,
  .lobby-column-divider {
    display: none;
  }

  /* ---- Grid panels (game room layout) ---- */

  /* Narrative grid panel: always visible as base layer */
  .grid-layout-wrapper .grid-panel[data-panel-type="narrative"],
  .grid-layout-wrapper .grid-panel[data-panel-key="narrative"] {
    display: flex;
    flex: 1;
    opacity: 1;
    transform: none;
  }

  /* Non-narrative panels: hidden by default (JS opens them in bottom-sheet) */
  .grid-layout-wrapper.mobile-bottom-sheet-mode .grid-panel:not([data-panel-type="narrative"]):not([data-panel-key="narrative"]) {
    display: none;
  }

  /* ---- Input area: always reachable at bottom ---- */

  /* narrative-main becomes the scroll container on mobile so that
     position:sticky on .input-area works. Without overflow-y:auto here,
     the input can be pushed below the overflow:hidden clip boundary by
     intermediate flex children (ambient gutter, world ticker, etc.).
     Note: mf-layout handles this via _mobile_first.css flex chain. */
  .mobile-bottom-sheet-mode:not(.mf-layout) .narrative-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-bottom-sheet-mode:not(.mf-layout) .narrative-main .narrative-output {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-bottom-sheet-mode:not(.mf-layout) .narrative-main .input-area {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: var(--z-panel);
    /* Ensure input stays at bottom even if narrative-output overflows */
    order: 99;
  }
}

/* Character Creation Layout extracted to ./_creation_layout.css (#2637) */
/*
 * Layout: Grid Container
 * =======================
 * Core grid and panel layout system: split layouts, panel animations, mobile support.
 *
 * Split into focused modules under grid_container/:
 *   _layout_split.css    — Grid wrapper, split layout container, split panels, split divider
 *   _panel_base.css      — Grid panel card, panel header, actions, content, drag/drop, prefix indicator, empty states, notifications
 *   _animations.css      — Panel transition animations, FLIP slide, update highlight, AI DM hint highlights, focus-visible, responsive
 *   _motion_mobile.css   — Reduced motion, panel dropdown menu, mobile panel switcher
 *   _lobby_responsive.css — Lobby character select layout, mobile narrative always visible
 */






/*
 * Panel UX Extensions (#5013)
 * ===========================
 * Lock toggle (Phase 2) and style picker (Phase 2) extracted from
 * _grid_container.css to keep that file under the 1000-LOC cap.
 *
 * Imported by terminal.css alongside _grid_container.css.
 */

/* ========================================
 * Locked Panel Indicator (#5013 Phase 2)
 * ======================================== */

.grid-panel--locked .grid-panel__header {
  cursor: default; /* locked panels can't be dragged */
}

.grid-panel--locked .grid-panel__header:active {
  cursor: default;
}

/* Small lock badge that appears in the header of locked panels */
.grid-panel__lock-badge {
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.grid-panel__lock-badge svg {
  width: 12px;
  height: 12px;
}

.grid-panel:hover .grid-panel__lock-badge,
.grid-panel--active .grid-panel__lock-badge {
  opacity: 0.8;
}

/* Disabled state for pop-out button when locked */
.panel-dropdown__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Active/pressed state for toggle items (e.g. lock) */
.panel-dropdown__item--active {
  color: var(--color-accent-primary, #3b82f6);
}

/* ========================================
 * Panel Style Variants (#5013 Phase 2)
 * Applied via body.panel-style--<value>.
 * 'terminal_default' = no override (base styles apply).
 * ======================================== */

/* Compact style: narrower headers + smaller content font */
body.panel-style--compact .grid-panel__header {
  padding: var(--space-0-5, 2px) var(--space-1);
  min-height: 20px;
}

body.panel-style--compact h2.grid-panel__title,
body.panel-style--compact .grid-panel__title {
  font-size: var(--font-size-2xs, 0.65rem);
}

body.panel-style--compact .grid-panel__content {
  font-size: var(--font-size-sm);
}

/* Wide style: larger headers + increased panel content padding */
body.panel-style--wide .grid-panel__header {
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
}

body.panel-style--wide h2.grid-panel__title,
body.panel-style--wide .grid-panel__title {
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
}

body.panel-style--wide .grid-panel__content {
  padding: var(--space-2);
  font-size: var(--font-size-base);
}

/* Suppress redundant panel identity inside the tab-menu context (#3205).
   The active tab button already shows the icon + label for the current panel.
   Hide only the title and icon children so the header element itself remains
   present as a drag handle (drag_drop.ts uses .grid-panel__header) and the
   actions dropdown (.grid-panel__actions) is still accessible. */
.split-panel--with-tab-menu .grid-panel__header .grid-panel__icon,
.split-panel--with-tab-menu .grid-panel__header .grid-panel__title {
  display: none;
}
/*
 * Lobby Narrative Layout
 * ======================
 * Extracted from _grid_container.css (#2091) to respect file-size caps.
 *
 * Two-part layout: narrative panel (full-width on mobile) + campaigns
 * sidebar (hidden on mobile, shown via hamburger menu overlay).
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Lobby Narrative Layout (Narrative + Open Campaigns sidebar)
 * ======================================== */

.lobby-narrative-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: var(--grid-gap, 4px);
}

/* ========================================
 * Lobby With Banner Layout (#2200)
 * Banner sits above the two-column content (narrative + sidebar).
 * Stacks vertically: banner on top, columns below.
 * ======================================== */

.lobby-with-banner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lobby-with-banner > .lobby-banner {
  flex-shrink: 0;
}

.lobby-content-columns {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: var(--grid-gap, 4px);
}

.lobby-narrative-full {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--grid-gap, 4px);
}

.lobby-campaigns-sidebar {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-width: 260px;
  max-width: 380px;
  min-height: 0;
  padding: var(--grid-gap, 4px);
}

/* ========================================
 * #3731 1/5: Eager-strip the campaigns sidebar from first paint.
 * The sidebar stays in the DOM (server-rendered) so #3732 LobbyCommandRouter
 * + #3733 pop-out wiring can summon it on demand without a re-render.
 *
 * `lobby-campaigns-sidebar--stripped` hides at first paint (display:none beats
 * the desktop default flex). Adding `lobby-sidebar--open` (existing summon
 * class used by hamburger menu) wins via higher specificity and reveals it
 * inline on desktop / overlay on mobile (existing rules below in @media).
 * ======================================== */
.lobby-campaigns-sidebar--stripped {
  display: none;
}

/* Summon: --open beats --stripped on desktop; mobile overlay rules below
   already use --open with higher specificity (.grid-layout-wrapper.…). */
.lobby-campaigns-sidebar--stripped.lobby-sidebar--open {
  display: flex;
}

/* ========================================
 * Auto-Mobile Override for Lobby
 * Ensures narrative panel is visible and sidebar is hidden on mobile.
 * Must be in a @media block matching auto-mobile-mode breakpoint (768px).
 * JS: mobile_panel_controller fires at window.innerWidth <= 768 (BREAKPOINTS.mobile).
 * ======================================== */

@media (max-width: 768px) {
  /* Lobby full-width layout: narrative panel should always be visible on mobile.
     Without this, auto-mobile-mode hides the panel before JS can add mobile-active,
     causing a black screen on phones (#1268).
     NOTE: Only target the narrative panel, NOT the sidebar. The old rule targeted
     all .grid-panel which forced the 260px sidebar visible on 390px viewports (#2091). */
  .grid-layout-wrapper.lobby-narrative-layout.auto-mobile-mode .lobby-narrative-full.grid-panel,
  .grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-narrative-full.grid-panel {
    display: flex;
    flex: 1;
  }

  /* Lobby sidebar: hidden on mobile by default, toggled via hamburger menu.
     Uses high specificity to override auto-mobile-mode's .grid-panel rules. */
  .grid-layout-wrapper.lobby-narrative-layout.auto-mobile-mode .lobby-campaigns-sidebar,
  .grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-campaigns-sidebar {
    display: none;
  }
}

/* Tablet (769–1023px): stack vertically; sidebar fills width */
@media (max-width: 1023px) {
  .lobby-narrative-layout,
  .lobby-content-columns {
    flex-direction: column;
  }

  .lobby-campaigns-sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
}

/* ========================================
 * Phone: Sidebar hidden, overlay toggle via hamburger menu
 * ======================================== */

/* On phones, hide sidebar entirely — narrative needs full viewport (#1070).
   Sidebar content is accessible via hamburger menu toggle (#2091). */
@media (max-width: 767px) {
  .lobby-narrative-layout .lobby-campaigns-sidebar,
  .lobby-with-banner .lobby-campaigns-sidebar {
    display: none;
  }

  /* When toggled open via hamburger menu, show as full-width overlay.
     Specificity must beat the auto-mobile-mode `display:none` rule
     (.grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-campaigns-sidebar,
     which is 0-4-0) — otherwise on small viewports (iOS Safari ~320px) the
     auto-mobile-mode rule wins and the sidebar either stays hidden or
     collapses to a 1-char-wide column because `display:none` beats the
     overlay `display:flex` and width rules (#2573). Adding
     `.grid-layout-wrapper` + `.auto-mobile-mode` brings this selector
     to 0-5-0, guaranteeing the overlay paints correctly. */
  .grid-layout-wrapper.lobby-narrative-layout.auto-mobile-mode .lobby-campaigns-sidebar.lobby-sidebar--open,
  .grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-campaigns-sidebar.lobby-sidebar--open,
  .lobby-narrative-layout .lobby-campaigns-sidebar.lobby-sidebar--open,
  .lobby-with-banner .lobby-campaigns-sidebar.lobby-sidebar--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    min-width: 0;
    z-index: var(--z-modal, 100);
    background: var(--color-bg-primary);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + 48px); /* Room for close button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: sidebarSlideIn 0.25s ease-out;
    box-sizing: border-box;
  }

  /* Close button for sidebar overlay */
  .lobby-sidebar__close {
    position: fixed;
    top: var(--space-2);
    right: var(--space-2);
    z-index: calc(var(--z-modal, 100) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .lobby-sidebar__close:hover,
  .lobby-sidebar__close:active {
    background: var(--color-bg-elevated);
    border-color: var(--color-accent-primary);
  }

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

/* ========================================
 * #5118: Narrative Panel Always-Visible on Mobile
 * Ensures narrative panel (lobby-left-panel, lobby-narrative-full)
 * is the base layer at first paint — before JS adds mobile-bottom-sheet-mode.
 *
 * Problem: auto-mobile-mode hides ALL .grid-panel at max-width:768px.
 * During the 150ms JS debounce in mobile_panel_controller, narrative
 * is collapsed to display:none, producing a blank screen on phones.
 *
 * Fix: Force display:flex !important on panels carrying
 * data-panel-key="narrative" and on .lobby-left-panel directly.
 * Must be max-width:768px (not 767px) to cover the full mobile range,
 * and must use !important to beat the auto-mobile-mode hide rule
 * (.grid-layout-wrapper.auto-mobile-mode .grid-panel at specificity 0-3-0).
 * ======================================== */

@media (max-width: 768px) {
  .grid-layout-wrapper.auto-mobile-mode .lobby-left-panel,
  .grid-layout-wrapper.auto-mobile-mode .grid-panel[data-panel-key="narrative"] {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
}
/*
 * Mobile-First Layout System
 * ==========================
 * Phase 2, Task 5 of the frontend architecture reset.
 *
 * DEFAULT layout (no media query) is mobile: single column, full-width narrative.
 * Tablet and desktop are progressive enhancements via min-width queries.
 *
 * Breakpoints (synced with app/javascript/lib/breakpoints.js):
 * - Mobile:  0 - 767px   (default — no query needed)
 * - Tablet:  768px+       (min-width: 768px)
 * - Desktop: 1024px+      (min-width: 1024px)
 * - Wide:    1440px+      (min-width: 1440px)
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Integration with Existing Grid System
 * ======================================== */

/*
 * The existing .grid-layout-wrapper, .grid-layout-container, and room-specific
 * layouts (lobby-narrative-layout, character-creation-layout, etc.) continue to
 * work as-is. The active mobile-first wrapper is .grid-layout-wrapper.mf-layout
 * (12 wrappers in _grid_layout.html.erb).
 *
 * NOTE (#3709): The previous .mobile-first-layout BEM block (~108 LOC) was
 * deleted on 2026-04-24 — it had zero consumers in app/, e2e/, or public/.
 * Real implementation lives in .mf-layout below.
 *
 * For views already using .grid-layout-wrapper, the mobile-first behavior is
 * handled by the existing max-width queries in _grid_container.css. This file
 * provides the clean min-width foundation for NEW views and for gradual migration.
 */

/* ========================================
 * Mobile-First Overrides for grid-layout-wrapper
 * These enhance the existing wrapper with mobile-first defaults.
 * Applied when .grid-layout-wrapper also has .mf-layout.
 * ======================================== */

.grid-layout-wrapper.mf-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* #2575: Mobile — wrapper must fill its flex parent (.zone--main), NOT the full
   viewport. The parent is already sized to viewport minus status-bar + hotbar.
   Using 100dvh on mobile makes the wrapper taller than its parent, pushing the
   fixed input-area + ~40-50% of flex content into the hidden overflow region
   below the hotbar. This manifests as dead black void between the last visible
   narrative content and the bottom of the screen.

   Scoped to <=767px so desktop layouts (which are sized by outer flex containers
   anyway) are unaffected. 100% resolves against the flex parent's computed
   height, which is the actual visible space. */
@media (max-width: 767px) {
  .grid-layout-wrapper.mf-layout {
    height: 100%;
    min-height: 0;
  }
}

/* On mobile, narrative fills viewport; panels are bottom-sheet only */
.grid-layout-wrapper.mf-layout .grid-layout-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Hide the split divider on mobile — no side-by-side panels */
.grid-layout-wrapper.mf-layout .split-divider {
  display: none;
}

/* Narrative panel takes full width on mobile */
.grid-layout-wrapper.mf-layout .split-panel--left {
  flex: 1;
  min-width: 0;
}

/* Right panel hidden on mobile — JS opens via bottom sheet */
.grid-layout-wrapper.mf-layout .split-panel--right {
  display: none;
}

/* --- Tablet: restore two-panel split --- */
@media (min-width: 768px) {
  .grid-layout-wrapper.mf-layout .grid-layout-container {
    flex-direction: row;
  }

  .grid-layout-wrapper.mf-layout .split-divider {
    display: block;
  }

  .grid-layout-wrapper.mf-layout .split-panel--left {
    flex: var(--split-ratio, 0.65) 1 0%;
    min-width: 250px;
  }

  .grid-layout-wrapper.mf-layout .split-panel--right {
    display: flex;
    flex: calc(1 - var(--split-ratio, 0.65)) 1 0%;
    min-width: 300px;
  }
}

/* ========================================
 * Narrative Panel Flex Chain (Mobile)
 * Ensures the full height chain works on mobile:
 *   .grid-panel (flex: 1, display: flex, flex-direction: column)
 *     .grid-panel__content (flex: 1, display: flex, flex-direction: column)
 *       .narrative-panel-content (flex: 1, display: flex, flex-direction: column)
 *         .narrative-main (flex: 1, display: flex, flex-direction: column)
 *           .narrative-output (flex: 1, overflow-y: auto)
 *           .input-area (flex-shrink: 0, pinned to bottom)
 * ======================================== */

/* Grid panel containing narrative: must be flex column to pass height down */
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-key="narrative"],
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-type="narrative"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* grid-panel__content must also be flex column so .narrative-panel-content's
   flex:1 actually constrains its height. Without this, grid-panel__content
   uses block flow, narrative-panel-content gets height:auto (content-sized),
   and the input-area scrolls off-screen on mobile (#1736). */
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-key="narrative"] > .grid-panel__content,
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-type="narrative"] > .grid-panel__content {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* narrative-main handles scrolling, not this container */
}

/* Narrative panel content: flex column to fill grid-panel */
.grid-layout-wrapper.mf-layout .narrative-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto; /* Override height:100% which breaks flex */
  max-height: none; /* Override max-height:100% which breaks flex */
}

/* Narrative main: flex column for output + input stacking.
   overflow-y:auto makes this the scroll container on mobile so
   overflow-y:auto keeps the narrative independently scrollable.
   position:fixed on .input-area (#5119) is viewport-anchored so it
   does not require a scrolling ancestor. Desktop restores overflow via
   the _critical.css / _layout.css base rules. */
.grid-layout-wrapper.mf-layout .narrative-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Narrative output: scrollable, takes remaining space */
.grid-layout-wrapper.mf-layout .narrative-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

/* Input area: pinned to viewport bottom on mobile (#5119), panel-independent.
   position:fixed removes the bar from document flow so it is visible regardless
   of which panel is active. The _input.css @media (max-width:767px) rule applies
   the fixed positioning globally; this block aligns flex properties for the
   mf-layout context and restores position:relative on desktop. */
.grid-layout-wrapper.mf-layout .input-area {
  flex-shrink: 0;
  flex-grow: 0;
  /* Mobile positioning handled by _input.css @media (max-width:767px).
     No position override here so the cascade order is:
       base (_critical.css, _terminal_layout.css) → _input.css mobile → this block → desktop reset */
  width: 100%;
}

/* Lobby layouts with narrative: same flex chain */
.grid-layout-wrapper.mf-layout .lobby-narrative-full,
.grid-layout-wrapper.mf-layout .lobby-left-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* --- Desktop: lobby sidebar beside narrative --- */
@media (min-width: 1024px) {
  /* .mf-layout forces flex-direction:column on the wrapper; lobby needs row
     for its direct narrative + sidebar children (not grid-container managed). */
  .grid-layout-wrapper.mf-layout.lobby-narrative-layout {
    flex-direction: row;
  }

  /* lobby-with-banner: outer wrapper stays column (banner above columns),
     but .lobby-content-columns needs row for narrative + sidebar side-by-side. */
  .grid-layout-wrapper.mf-layout.lobby-with-banner .lobby-content-columns {
    flex-direction: row;
  }
}

/* --- Tablet+: reset to standard layout behavior --- */
@media (min-width: 768px) {
  .grid-layout-wrapper.mf-layout .grid-panel[data-panel-key="narrative"] > .grid-panel__content,
  .grid-layout-wrapper.mf-layout .grid-panel[data-panel-type="narrative"] > .grid-panel__content {
    display: block; /* Restore default block flow for desktop */
    overflow: auto; /* Restore default scroll behavior */
  }

  .grid-layout-wrapper.mf-layout .narrative-panel-content {
    flex-direction: row; /* Restore row layout for sidebar */
    height: 100%;
    max-height: 100%;
  }

  .grid-layout-wrapper.mf-layout .narrative-main {
    overflow: hidden; /* Restore desktop overflow (mobile uses auto; fixed input is viewport-anchored) */
    -webkit-overflow-scrolling: auto;
  }

  .grid-layout-wrapper.mf-layout .narrative-output {
    display: block; /* Restore block flow for desktop */
    -webkit-overflow-scrolling: auto;
  }

  .grid-layout-wrapper.mf-layout .input-area {
    position: relative; /* Restore desktop positioning (fixed only on mobile <768px) */
    z-index: auto;
    padding-bottom: var(--space-2);
  }
}

/* ========================================
 * Mobile Narrative Chat Feel
 * On mobile, narrative messages take full width
 * with chat-app alignment (DM left, player right).
 * These are progressive: only activate at mobile size.
 *
 * NOTE: Chat bubble styles are already defined in
 * base/mobile_enhancements.css under MOBILE CHAT BUBBLES.
 * This section adds layout-level adjustments only.
 * ======================================== */

/* ========================================
 * Compact Status Bar on Mobile
 * Status bar compresses to a thin line on small screens.
 *
 * NOTE: Compact status bar styles are already defined in
 * base/mobile_enhancements.css under STATUS BAR MOBILE.
 * The mf-layout class inherits those styles automatically.
 * ======================================== */

/* ========================================
 * Viewport Height Fix
 * 100dvh (dynamic viewport height) is the correct unit for
 * mobile browsers where the address bar changes size.
 * Already applied via 100dvh above and in _terminal_layout.css.
 * ======================================== */

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

@media (prefers-reduced-motion: reduce) {
  .grid-layout-wrapper.mf-layout {
    transition: none;
  }
}
/*
 * Mobile Viewport Fixes
 * =======================================
 * Prevents horizontal scroll, layout/typography/keyboard fixes for mobile.
 * Keeps large files (_grid_container.css, mobile_enhancements.css) under LOC cap.
 */

@media (max-width: 767px) {
  /* Split panels: remove min-width that forces 556px combined minimum.
     Desktop: left 250px + right 300px + divider = 556px overflow on mobile. */
  .split-panel--left {
    min-width: 0;
  }

  .split-panel--right {
    min-width: 0;
  }
}

/* Map panel safe-area for notched / home-indicator devices */
@media (max-width: 768px) {
  .map-panel.visible {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Creation step labels — override 0.65rem (9.1px) fallback to 11px minimum */
@media (max-width: 768px) {
  .creation-progress__step-label,
  .creation-progress__step-optional {
    font-size: 11px;
  }
}

/* Creation grid — allow vertical scrolling when stacked on mobile */
/* #4324: was 700px (drift); canonical mobile max is 767px */
@media (max-width: 767px) {
  .creation-grid {
    overflow-y: auto;
    max-height: 100%;
  }
}

/* Scroll-to-latest — account for mobile keyboard height */
@media (max-width: 768px) {
  .scroll-to-latest {
    bottom: calc(80px + var(--mobile-keyboard-height, 0px));
  }
}

/* Combat dashboard — leave room for input area on mobile */
@media (max-width: 768px) {
  .combat-action-dashboard {
    max-height: calc(60vh - var(--mobile-keyboard-height, 0px));
    bottom: var(--mobile-keyboard-height, 0px);
  }
}
/**
 * Split Container — Layout, Divider, Panels, Headers, Actions, Content & Responsive
 */

/*
 * Split Container Layout
 * ======================
 * tmux-like split panel system with resizable dividers.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Split Layout Wrapper
 * ======================================== */

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

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

/* Zoomed state - hide siblings */
.split-container--zoomed .split-child:not(:has(.split-panel--zoomed)) {
  display: none;
}

.split-container--zoomed .split-divider {
  display: none;
}

/* ========================================
 * Split Child (wrapper for panel or nested split)
 * ======================================== */

.split-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: flex var(--transition-resize);
}

/* ========================================
 * Split Divider
 * ======================================== */

.split-divider {
  flex-shrink: 0;
  background: var(--color-border-subtle);
  transition: background var(--transition-fast);
  position: relative;
  z-index: var(--z-dropdown);
}

/* Horizontal split = vertical divider (|) */
.split-horizontal > .split-divider {
  width: var(--split-divider-size);
  height: 100%;
  cursor: col-resize;
}

/* Vertical split = horizontal divider (—) */
.split-vertical > .split-divider {
  width: 100%;
  height: var(--split-divider-size);
  cursor: row-resize;
}

/* Grip indicator for vertical divider (|) */
.split-horizontal > .split-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-text-disabled);
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

/* Grip indicator for horizontal divider (—) */
.split-vertical > .split-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-disabled);
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

/* Hover state */
.split-divider:hover {
  background: color-mix(in srgb, var(--split-divider-hover-color) 30%, transparent);
}

.split-divider:hover::before {
  opacity: 1;
  background: var(--split-divider-hover-color);
}

/* Dragging state */
.split-divider--dragging {
  background: color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.split-divider--dragging::before {
  opacity: 1;
  background: var(--color-accent-primary);
}

/* Body state during drag */
body.split-dragging {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Split Panel
 * ======================================== */

.split-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-primary);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  /* Prevent flash: panels hidden until JS marks them as initialized */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* Show panel once initialized by JavaScript */
.split-panel.initialized,
.split-panel--active {
  opacity: 1;
  transform: translateY(0);
}

/* Active/focused panel - visible indicator */
.split-panel--active {
  background: var(--color-bg-secondary);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  z-index: var(--z-raised);
}

/* Zoomed panel */
.split-panel--zoomed {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  border-radius: 0;
  border: none;
}

/* ========================================
 * Panel Header
 * ======================================== */

.split-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  flex-shrink: 0;
  min-height: 24px;
}

.split-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.split-panel__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

/* Focused panel header highlight */
.split-panel--active .split-panel__header {
  background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-secondary));
}

.split-panel--active .split-panel__title {
  color: var(--color-accent-primary);
}

/* ========================================
 * Panel Actions
 * ======================================== */

.split-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.split-panel:hover .split-panel__actions,
.split-panel--active .split-panel__actions {
  opacity: 1;
}

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

.split-panel__action:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.split-panel__action--close:hover {
  background: var(--color-accent-error);
  color: white;
}

/* ========================================
 * Panel Content
 * ======================================== */

.split-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.split-panel__content::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

.split-panel__content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.split-panel__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-md);
}

.split-panel__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* ========================================
 * Prefix Indicator
 * ======================================== */

.split-prefix-indicator {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.split-prefix-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
 * Empty Panel Placeholder
 * ======================================== */

.split-panel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.split-panel__placeholder-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.split-panel__placeholder-text {
  font-size: var(--font-size-sm);
}

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

@media (max-width: 768px) {
  .split-panel__header {
    padding: var(--space-1);
  }

  .split-panel__title {
    font-size: var(--font-size-xs);
  }

  .split-panel__action {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .split-child {
    transition: none;
  }

  .split-panel,
  .split-divider,
  .split-prefix-indicator {
    transition: none;
  }
}

/* ========================================
 * Split Notification (Bug 1.2 Fix)
 * ======================================== */

.split-notification {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-warning, #f59e0b);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}

.split-notification.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Touch-friendly dividers on mobile/tablet */
@media (max-width: 768px) {
  .split-horizontal > .split-divider {
    width: 16px;  /* Touch-friendly width */
  }

  .split-vertical > .split-divider {
    height: 16px;  /* Touch-friendly height */
  }

  /* Always show grip handle on touch devices */
  .split-divider::before {
    opacity: 0.8;
  }

  .split-divider:active::before {
    opacity: 1;
    background: var(--color-accent-primary);
  }

  /* Increase panel action button size for touch */
  .split-panel__action {
    width: 44px;   /* WCAG minimum (was 18px) */
    height: 44px;
  }
}

/* Panel Dropdown Menu — extracted to terminal/layout/_panel_dropdown.css (#4477) */

/* Protected panel indicator */
.split-panel--protected .split-panel__header {
  border-left: 2px solid var(--color-accent-warning, #f59e0b);
}

/* ========================================
/**
 * Split Container — Notifications, Single Panel Mode & Floating Panel FAB
 */

 * Single Panel Mode (Mobile/Tablet)
 * Shows one panel at a time with switcher
 * ======================================== */

/* Mobile Panel Switcher - always available */
.mobile-panel-switcher {
  display: none;  /* Hidden by default, shown via JS when in mobile mode */
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  position: relative;  /* For pseudo-element positioning */
}

.mobile-panel-switcher::-webkit-scrollbar {
  display: none;
}

/* Gradient fade to indicate scrollability */
.mobile-panel-switcher::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-bg-secondary)
  );
  pointer-events: none;  /* Don't block clicks */
  opacity: 0;  /* Hidden by default */
  transition: opacity var(--transition-fast);
}

/* Show gradient when content overflows */
.mobile-panel-switcher.has-overflow::after {
  opacity: 1;
}

.mobile-panel-switcher__btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px;  /* WCAG touch target */
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  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);
  white-space: nowrap;
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
}

.mobile-panel-switcher__btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.mobile-panel-switcher__btn.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.mobile-panel-switcher__btn:active {
  transform: scale(0.98);
}

.mobile-panel-switcher__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.mobile-panel-switcher__icon {
  font-size: var(--font-size-base);
}

/* Mobile: Compact panel switcher tabs */
@media (max-width: 768px) {
  .mobile-panel-switcher {
    padding: 4px 8px;
    gap: 4px;
  }

  .mobile-panel-switcher__btn {
    min-height: 44px;  /* WCAG 2.1 AA touch target minimum */
    padding: 4px 8px;
    font-size: var(--font-size-sm);
  }
}

/* Bottom-sheet mode: switcher becomes compact icon-only strip above input.
   Visual height is compact but touch targets remain 44px (WCAG 2.1 AA).
   Repositioned to BOTTOM of layout (above input) for thumb accessibility. */
@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .mobile-panel-switcher {
    padding: 2px 8px;
    gap: 4px;
    justify-content: center;
    border-bottom: none;
    border-top: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    min-height: 36px;
    /* Move switcher to bottom of flex layout (above input area) */
    order: 99;
  }

  .mobile-bottom-sheet-mode .mobile-panel-switcher__btn {
    /* Touch target: 44px (accessible), vertical tab bar layout */
    min-height: 44px;
    padding: 4px 10px 2px;
    gap: 1px;
    flex-direction: column;
    align-items: center;
  }

  .mobile-bottom-sheet-mode .mobile-panel-switcher__label {
    font-size: 12px;
    line-height: 1;
    opacity: 0.7;
  }

  .mobile-bottom-sheet-mode .mobile-panel-switcher__icon {
    font-size: var(--font-size-base);
  }

  /* Active button shows which sheet is open */
  .mobile-bottom-sheet-mode .mobile-panel-switcher__btn.sheet-open {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: var(--color-bg-primary);
  }
}

/* ========================================
 * Floating Panel Trigger (FAB) — Mobile Only (#5127)
 * Replaces the horizontal tab strip at ≤768px.
 * The .mobile-panel-switcher container becomes a zero-height
 * transparent wrapper; the FAB is position:fixed so it costs
 * ~0px of layout space and never overlaps the input bar.
 * ======================================== */

/* Hide the tab strip on mobile — the FAB replaces it */
@media (max-width: 768px) {
  .mobile-bottom-sheet-mode .mobile-panel-switcher {
    /* Collapse the layout strip to zero height — FAB is fixed-positioned */
    min-height: 0;
    padding: 0;
    border-top: none;
    background: transparent;
    overflow: visible;
  }

  /* Hide individual tab buttons (the FAB is injected instead) */
  .mobile-bottom-sheet-mode .mobile-panel-switcher__btn {
    display: none;
  }
}

/*
 * Floating Action Button (FAB) — panel trigger
 *
 * Positioned bottom-right corner, above the input bar and status chrome.
 * Visual treatment: circular, uses the accent colour, distinct from the
 * pill-shaped input send button (which is bottom-left inside the input bar).
 *
 * Accessibility:
 *   - ≥44×44px tap target (WCAG 2.5.5)
 *   - aria-label set by JS ("Open panels" / "Close panels")
 *   - aria-haspopup="true", aria-expanded managed by JS
 *   - focus-visible ring
 */
.mobile-panel-fab {
  /* Hidden by default — shown only when the controller renders it */
  display: none;
}

@media (max-width: 768px) {
  .mobile-panel-fab {
    display: flex;
    align-items: center;
    justify-content: center;

    /* Fixed positioning — costs 0px of layout space */
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: var(--space-4, 16px);
    /* #5123: FAB must appear above the bottom-sheet overlay (--z-sheet=300) and
       above the input bar (--z-sheet+1=301) so it remains tappable when a sheet
       is open. Using --z-modal (400) to clear both. Fallback 400 matches. */
    z-index: var(--z-modal, 400);

    /* Circular, minimum 52×52px for thumb tap target */
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 50%;

    /* Visual treatment — distinct from input bar send button */
    background: var(--color-bg-elevated, #2a2a3e);
    border: 1px solid var(--color-accent-primary, #61afef);
    color: var(--color-accent-primary, #61afef);
    cursor: pointer;

    /* Smooth transition for active state */
    transition:
      background var(--transition-fast, 100ms),
      color var(--transition-fast, 100ms),
      transform var(--transition-fast, 100ms),
      box-shadow var(--transition-fast, 100ms);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Prevent text selection and iOS tap flash */
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Active / panel-open state — filled accent colour */
  .mobile-panel-fab--active {
    background: var(--color-accent-primary, #61afef);
    color: var(--color-bg-primary, #1e1e2e);
    box-shadow: 0 4px 12px rgba(97, 175, 239, 0.35);
  }

  /* Touch feedback */
  .mobile-panel-fab:active {
    transform: scale(0.92);
  }

  /* Keyboard focus ring */
  .mobile-panel-fab:focus-visible {
    outline: 3px solid var(--color-accent-primary, #61afef);
    outline-offset: 3px;
  }

  /* Icon inside the FAB */
  .mobile-panel-fab__icon {
    font-size: 22px;
    line-height: 1;
    pointer-events: none;
  }
}

/* Reduced-motion: disable scale animation */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .mobile-panel-fab:active {
    transform: none;
  }
}

/* ========================================
 * Mobile Approach A: Narrative always visible
 * Non-narrative panels render as bottom-sheet overlays.
 * Input stays at bottom via flexbox within narrative-main.
 * ======================================== */
@media (max-width: 768px) {
  /* Narrative panel is always the base layer on mobile */
  .mobile-bottom-sheet-mode [data-panel-key="narrative"],
  .mobile-bottom-sheet-mode .grid-panel[data-panel-key="narrative"] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    opacity: 1;
    visibility: visible;
  }

  /* Non-narrative panels hidden from grid flow (rendered as bottom sheets instead) */
  .mobile-bottom-sheet-mode .grid-panel:not([data-panel-key="narrative"]) {
    display: none;
  }
}

/* When mobile mode is active */
.split-layout-wrapper.mobile-mode {
  flex-direction: column;
}

.split-layout-wrapper.mobile-mode .mobile-panel-switcher {
  display: flex;
}

.split-layout-wrapper.mobile-mode .split-layout-container {
  flex: 1;
  min-height: 0;
}

/* Hide all panels except the active one in mobile mode */
.split-layout-wrapper.mobile-mode .split-child {
  display: none;
}

.split-layout-wrapper.mobile-mode .split-child.mobile-active {
  display: flex;
  flex: 1;
}

/* Hide dividers in mobile mode */
.split-layout-wrapper.mobile-mode .split-divider {
  display: none;
}

/* Tablet breakpoint - enable mobile mode by default */
@media (max-width: 900px) {
  .split-layout-wrapper.auto-mobile-mode .mobile-panel-switcher {
    display: flex;
  }

  .split-layout-wrapper.auto-mobile-mode .split-child {
    display: none;
  }

  .split-layout-wrapper.auto-mobile-mode .split-child.mobile-active {
    display: flex;
    flex: 1;
  }

  .split-layout-wrapper.auto-mobile-mode .split-divider {
    display: none;
  }
}

/* Force desktop mode to always hide the switcher.
   Only hide when NOT in JS-activated mobile-mode (respects breakpoint value). */
@media (min-width: 901px) {
  .mobile-panel-switcher {
    display: none;
  }

  /* JS-activated mobile-mode overrides CSS media query.
     This covers 901-1024px where JS breakpoint > CSS breakpoint. */
  .split-layout-wrapper.mobile-mode .mobile-panel-switcher {
    display: flex;
  }

  .split-layout-wrapper:not(.mobile-mode) .split-child {
    display: flex;
  }

  .split-layout-wrapper:not(.mobile-mode) .split-divider {
    display: block;
  }
}

/* ========================================
 * Panel Transition Animations
 * Smooth transitions for room/content changes
 * ======================================== */

.split-panel--exiting {
  animation: panelFadeOut 0.2s ease-out forwards;
  pointer-events: none;
}

.split-panel--entering {
  animation: panelFadeIn 0.25s ease-out forwards;
}

.split-panel__content--exiting {
  animation: contentFadeOut 0.15s ease-out forwards;
  pointer-events: none;
}

.split-panel__content--entering {
  animation: contentFadeIn 0.2s ease-out forwards;
}

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

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

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

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

/* ========================================
 * Panel Update Highlight
 * ======================================== */

.split-panel--highlight-update {
  animation: panel-update-flash 0.6s ease-out;
}

@keyframes panel-update-flash {
  0% { box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
  100% { box-shadow: none; }
}

.split-panel__update-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  animation: badge-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========================================
 * Left-stacked + Right layout (#5038)
 * When a panel is dragged to the top edge with narrative already docked
 * left, the renderer produces leftTop/leftBottom alongside a right panel.
 * The outer wrapper needs split-panel--left (flex ratio) + stacked layout.
 * Mirrors .split-panel--right.split-panel--stacked in _grid_container.css.
 * ======================================== */

.split-panel--left.split-panel--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ========================================
 * Focus-Visible (Keyboard Navigation)
 * ======================================== */

.split-panel:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: -2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .split-panel--exiting,
  .split-panel--entering,
  .split-panel__content--exiting,
  .split-panel__content--entering,
  .split-panel--highlight-update {
    animation: none;
  }

  .split-panel__update-badge {
    animation: none;
  }

  .split-panel {
    transition: none;
  }
}
/**
 * Split Container Layout — Import Hub
 * ======================================
 * tmux-like split panel system with resizable dividers.
 *
 * Decomposed into focused files under split_container/ for maintainability.


 */
/* ========================================
 * Panel Dropdown Menu
 * ========================================
 * Extracted from _split_container.css (#4477) to keep that file under the
 * 1000-LOC pre-commit cap. Owns the dropdown menu pattern shared between
 * docked grid panels (.split-panel__dropdown-trigger) and floating panels
 * (.floating-panel__dropdown-trigger — see _floating_panel.css).
 */

.panel-dropdown {
  position: relative;
}

.split-panel__dropdown-trigger {
  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;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.split-panel__dropdown-trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.split-panel__dropdown-trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.panel-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  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(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: var(--z-dropdown, 1000);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease-out,
              transform 0.12s ease-out,
              visibility 0.12s ease-out;
}

.panel-dropdown__menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*
 * Flip-up modifier (#4477) — applied by dropdown_controller#_maybeFlipUp when
 * the natural downward menu would clip below the viewport. Anchors to the
 * bottom of the trigger so the menu opens upward instead.
 */
.panel-dropdown__menu--flip-up {
  top: auto;
  bottom: 100%;
  transform: translateY(2px);
}

.panel-dropdown__menu--flip-up.open {
  transform: translateY(0);
}

.panel-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.panel-dropdown__item:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.panel-dropdown__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-dropdown__item--disabled:hover {
  background: transparent;
  color: var(--color-text-secondary);
}

.panel-dropdown__item--has-submenu {
  position: relative;
}

.panel-dropdown__icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.panel-dropdown__chevron {
  margin-left: auto;
  color: var(--color-text-muted);
}

.panel-dropdown__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--color-border-subtle);
}

.panel-dropdown__shortcut {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

/* Submenu container */
.panel-dropdown__submenu-container {
  position: relative;
}

.panel-dropdown__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 160px;
  max-height: 500px; /* Increased from 300px to show all workshop panels */
  overflow-y: auto;
  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(--shadow-xl);
  z-index: calc(var(--z-dropdown, 1000) + 1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              visibility var(--transition-fast);
}

.panel-dropdown__submenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Keep submenu open when hovering */
.panel-dropdown__submenu-container:hover .panel-dropdown__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Flip submenu to left if near right edge */
.split-panel:last-child .panel-dropdown__submenu,
.panel-dropdown--flip-submenu .panel-dropdown__submenu {
  left: auto;
  right: 100%;
  transform: translateX(4px);
}

.split-panel:last-child .panel-dropdown__submenu.open,
.panel-dropdown--flip-submenu .panel-dropdown__submenu.open,
.split-panel:last-child .panel-dropdown__submenu-container:hover .panel-dropdown__submenu,
.panel-dropdown--flip-submenu .panel-dropdown__submenu-container:hover .panel-dropdown__submenu {
  transform: translateX(0);
}

/* Scrollbar styling for submenu */
.panel-dropdown__submenu::-webkit-scrollbar {
  width: 6px;
}

.panel-dropdown__submenu::-webkit-scrollbar-track {
  background: transparent;
}

.panel-dropdown__submenu::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 3px;
}

.panel-dropdown__submenu::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-subtle);
}

/* Mobile: larger tap targets */
@media (max-width: 768px) {
  .split-panel__dropdown-trigger {
    width: 44px;
    height: 44px;
  }

  .panel-dropdown__item {
    min-height: 44px;
  }

  .panel-dropdown__menu {
    min-width: 200px;
  }

  /* Stack submenus below parent on mobile */
  .panel-dropdown__submenu {
    position: relative;
    left: 0;
    right: auto;
    margin-left: var(--space-3);
    border: none;
    box-shadow: none;
    max-height: none;
  }

  .panel-dropdown__submenu.open {
    transform: none;
  }
}
/* Achievements Panel */

.achievements-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.achievements-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-header);
}

.achievements-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.achievements-panel__title svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-gold);
}

.achievements-panel__stats {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.achievements-panel__stats-divider {
  color: var(--color-text-muted);
}

/* Filters */
.achievements-panel__filters {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.achievements-panel__filter {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.achievements-panel__filter:hover {
  background: var(--color-background-hover);
  border-color: var(--color-border-hover);
}

.achievements-panel__filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* Content */
.achievements-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

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

/* Section grouping */
.achievements-panel__section {
  margin-bottom: var(--space-3);
}

.achievements-panel__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.achievements-panel__section-icon {
  font-size: var(--font-size-md);
}

.achievements-panel__section-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.achievements-panel__section-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.achievements-panel__section-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Achievement Card */
.achievements-panel__card {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel-bg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.achievements-panel__card:hover {
  border-color: var(--color-border-hover);
  background: var(--color-background-hover);
}

.achievements-panel__card--earned {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-panel-bg));
}

.achievements-panel__card--earned:hover {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-panel-bg));
}

.achievements-panel__card--locked {
  opacity: 0.7;
}

.achievements-panel__card--locked .achievements-panel__icon {
  filter: grayscale(1);
}

/* Card Icon */
.achievements-panel__card-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-background-subtle);
}

.achievements-panel__icon {
  font-size: 1.5rem;
}

.achievements-panel__earned-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Card Content */
.achievements-panel__card-content {
  flex: 1;
  min-width: 0;
}

.achievements-panel__card-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.achievements-panel__card-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.achievements-panel__card-date {
  margin-top: var(--space-1);
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Card Progress Bar (cumulative achievements) */
.achievements-panel__card-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.achievements-panel__card-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary, var(--color-background-subtle));
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.achievements-panel__card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-gold, #f59e0b), var(--color-accent-gold-light, #fcd34d));
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease-out;
  min-width: 0;
}

.achievements-panel__card-progress-text {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Hidden Achievement Mystery Cards
 * ===================================
 * Players see a locked silhouette for hidden achievements they haven't earned.
 * This acts as a "quest hook" — proof that secrets exist without spoiling them.
 */

.achievements-panel__hidden-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, var(--color-panel-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 25%, transparent);
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 90%, var(--color-text-primary));
  font-style: italic;
}

.achievements-panel__hidden-banner::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23f59e0b' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Mystery card — the locked slot for a hidden unearned achievement */
.achievements-panel__card--mystery {
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 20%, var(--color-border));
  background: color-mix(in srgb, var(--color-background-subtle) 60%, var(--color-panel-bg));
  opacity: 0.75;
  cursor: default;
}

.achievements-panel__card--mystery:hover {
  /* Mystery cards don't invite the same hover treatment as real achievements */
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-background-subtle) 60%, var(--color-panel-bg));
  transform: none;
}

/* Mystery card icon container — slightly dimmed with a distinct treatment */
.achievements-panel__card-icon--mystery {
  background: color-mix(in srgb, var(--color-background-subtle) 80%, transparent);
}

/* Lock icon inside mystery card */
.achievements-panel__icon--mystery {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 60%, var(--color-text-muted));
  filter: none; /* Override the grayscale from --locked modifier on parent */
}

.achievements-panel__icon--mystery svg {
  width: 20px;
  height: 20px;
}

/* Mystery card text — styled to look redacted/secret */
.achievements-panel__card-name--mystery {
  color: var(--color-text-muted);
  font-style: italic;
  letter-spacing: 0.025em;
}

.achievements-panel__card-description--mystery {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  opacity: 0.8;
}

/* Error state */
.achievements-panel__error {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

.achievements-panel__error p {
  margin-bottom: var(--space-2);
}

/* Legacy support for old .achievements class */
.achievements {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.achievements__header {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.achievements__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

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

.achievements__footer {
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
}
/**
 * Activity Timeline Panel (#4229)
 * ================================
 * PaperTrail-driven activity feed. Mounted in admin HUD, character sheet,
 * and campaign overview. Inherits surface from `.surface-panel`.
 */

.activity-timeline-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 480px;
  overflow-y: auto;
}

.activity-timeline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.activity-timeline-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.activity-timeline-panel__icon {
  font-size: 1.1em;
}

.activity-timeline-panel__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 1.5rem;
  text-align: center;
}

.activity-timeline-panel__empty {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border-left: 3px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.activity-item--create {
  border-left-color: var(--color-success, #2ecc71);
}

.activity-item--update {
  border-left-color: var(--color-info, #3498db);
}

.activity-item--destroy {
  border-left-color: var(--color-danger, #e74c3c);
}

.activity-item__icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

.activity-item__content {
  flex: 1;
  min-width: 0;
}

.activity-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.activity-item__event-type {
  color: var(--color-text-primary);
}

.activity-item__entity-type {
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
}

.activity-item__link {
  color: var(--color-link, var(--color-text-primary));
  text-decoration: underline;
  text-decoration-style: dotted;
}

.activity-item__deleted {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
}

.activity-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.activity-item__summary {
  margin: var(--space-1) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
/**
 * Image Gallery — Base & Lightbox
 * =================================
 * Header, tabs, content area, image grid, empty state, footer,
 * and lightbox overlay.
 */

/**
 * Image Gallery Panel
 * ===================
 * Responsive CSS grid of generated image thumbnails with lightbox overlay.
 * Follows BEM naming convention with terminal theme variables.
 */

/* Container */
.image-gallery {
  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;
}

/* ========================================
 * Header
 * ======================================== */

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

.image-gallery__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.image-gallery__title .svg-icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

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

.image-gallery__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  cursor: pointer;
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.image-gallery__toggle input[type="checkbox"] {
  accent-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__toggle-label {
  user-select: none;
}

/* ========================================
 * Category Tabs
 * ======================================== */

.image-gallery__tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  flex-shrink: 0;
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.1));
}

.image-gallery__tab {
  flex: 1;
  padding: var(--space-2, 0.5rem) var(--space-2, 0.5rem);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}

.image-gallery__tab:hover {
  color: var(--terminal-text, var(--color-text, #e0e0e0));
}

.image-gallery__tab.active {
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  border-bottom-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

/* ========================================
 * Content Area
 * ======================================== */

.image-gallery__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2, 0.5rem);
}

/* Skeleton loading grid */
.image-gallery__skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2, 0.5rem);
}

/* ========================================
 * Image Grid
 * ======================================== */

.image-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-2, 0.5rem);
}

@media (min-width: 400px) {
  .image-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.image-gallery__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--terminal-radius-sm, 4px);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  transition: border-color 0.2s, transform 0.15s;
}

.image-gallery__item:hover {
  border-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  transform: scale(1.03);
}

.image-gallery__item:focus-visible {
  outline: 2px solid var(--terminal-accent, var(--color-accent, #4ecdc4));
  outline-offset: 2px;
}

.image-gallery__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-gallery__item-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  opacity: 0;
  transition: opacity 0.2s;
}

.image-gallery__item:hover .image-gallery__item-overlay {
  opacity: 1;
}

.image-gallery__item-type {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
 * Empty State
 * ======================================== */

.image-gallery__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 1.5rem) var(--space-4, 1rem);
  text-align: center;
}

.image-gallery__empty-icon {
  opacity: 0.3;
  margin-bottom: var(--space-3, 0.75rem);
}

.image-gallery__empty-icon .svg-icon {
  width: 48px;
  height: 48px;
}

.image-gallery__empty-title {
  margin: 0 0 var(--space-1, 0.25rem);
  font-size: 0.875rem;
  color: var(--terminal-text, var(--color-text, #e0e0e0));
}

.image-gallery__empty-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  line-height: 1.4;
}

.image-gallery__empty-hint code {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.2));
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.8em;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

/* ========================================
 * Footer
 * ======================================== */

.image-gallery__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-top: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  flex-shrink: 0;
}

.image-gallery__count {
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

/* ========================================
 * Lightbox Overlay
 * ======================================== */

.image-gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 9000);
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}

.image-gallery-lightbox__content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 90vw;
  max-height: 90vh;
  z-index: var(--z-raised);
}

.image-gallery-lightbox__image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
  max-height: 80vh;
}

.image-gallery-lightbox__image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--terminal-radius-md, 8px);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Navigation buttons */
.image-gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-3, 0.75rem);
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  cursor: pointer;
  transition: background 0.15s;
  z-index: var(--z-above);
}

.image-gallery-lightbox__nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.image-gallery-lightbox__nav .svg-icon {
  width: 24px;
  height: 24px;
}

.image-gallery-lightbox__nav--prev {
  left: var(--space-4, 1rem);
}

.image-gallery-lightbox__nav--next {
  right: var(--space-4, 1rem);
}

/* Close button */
.image-gallery-lightbox__close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem);
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  cursor: pointer;
  transition: background 0.15s;
  z-index: var(--z-above);
}

.image-gallery-lightbox__close:hover {
  background: rgba(255, 60, 60, 0.6);
}

.image-gallery-lightbox__close .svg-icon {
  width: 20px;
  height: 20px;
}

/* Metadata bar */
.image-gallery-lightbox__meta {
  position: absolute;
  bottom: var(--space-4, 1rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--terminal-radius-md, 8px);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  max-width: 80vw;
  z-index: var(--z-above);
}

.image-gallery-lightbox__meta-type {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  white-space: nowrap;
}

.image-gallery-lightbox__meta-prompt {
  font-size: 0.75rem;
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

.image-gallery-lightbox__meta-date {
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  white-space: nowrap;
}

.image-gallery-lightbox__meta-character {
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  white-space: nowrap;
  font-style: italic;
}
/**
 * Image Gallery — Tag Editor
 * ============================
 * Lightbox tag editor (#3798).
 */

/* ========================================
 * Lightbox Tag Editor (#3798)
 * ======================================== */

.image-gallery-lightbox__tag-editor {
  position: absolute;
  bottom: calc(var(--space-4, 1rem) + 4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--terminal-radius-md, 8px);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  max-width: 80vw;
  z-index: var(--z-above, 2);
}

.image-gallery-lightbox__tag-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  margin-bottom: var(--space-1, 0.25rem);
}

.image-gallery-lightbox__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  min-height: 1.5rem;
}

.image-gallery-lightbox__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: 0.1em 0.5em;
  background: rgba(78, 205, 196, 0.15);
  border: 1px solid rgba(78, 205, 196, 0.4);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery-lightbox__tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  font-size: 0.85em;
}

.image-gallery-lightbox__tag-remove:hover {
  opacity: 1;
}

.image-gallery-lightbox__tag-form {
  display: flex;
  gap: var(--space-1, 0.25rem);
  margin-top: var(--space-1, 0.25rem);
}

.image-gallery-lightbox__tag-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}

.image-gallery-lightbox__tag-input:focus {
  outline: 2px solid var(--terminal-accent, var(--color-accent, #4ecdc4));
  outline-offset: -1px;
}

.image-gallery-lightbox__tag-add {
  background: rgba(78, 205, 196, 0.2);
  border: 1px solid rgba(78, 205, 196, 0.4);
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  cursor: pointer;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: 1rem;
  line-height: 1;
}

.image-gallery-lightbox__tag-add:hover {
  background: rgba(78, 205, 196, 0.3);
}

.image-gallery-lightbox__tag-error {
  font-size: 0.7rem;
  color: var(--terminal-error, var(--color-error, #ff6b6b));
  margin-top: var(--space-1, 0.25rem);
}

/* ========================================
 * Filter Bar
 * ======================================== */

.image-gallery__filters {
  flex-shrink: 0;
  padding: var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.1));
}

.image-gallery__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: flex-end;
}

.image-gallery__filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  min-width: 0;
}

.image-gallery__filter--tags {
  flex: 2;
  min-width: 120px;
}

.image-gallery__filter--date {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-1, 0.25rem);
  flex-wrap: wrap;
}

.image-gallery__filter--date .image-gallery__filter-label {
  align-self: flex-end;
  margin-bottom: 0.25rem;
}

.image-gallery__filter--search {
  flex: 2;
  min-width: 120px;
}

.image-gallery__filter-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.image-gallery__filter-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  width: 100%;
  min-width: 60px;
}

.image-gallery__filter-input:focus {
  outline: 2px solid var(--terminal-accent, var(--color-accent, #4ecdc4));
  outline-offset: -1px;
  border-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__filter-input[type="date"] {
  color-scheme: dark;
  min-width: 120px;
}

.image-gallery__filter-input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.6);
}

.image-gallery__filter-clear {
  flex-shrink: 0;
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  cursor: pointer;
  font-size: 0.7rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.image-gallery__filter-clear:hover {
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  border-color: var(--terminal-text-muted, var(--color-text-muted, #888));
/**
 * Image Gallery — Filters & Actions
 * ===================================
 * Filter bar, tag chips, per-image actions, and per-image tags.
 */


/* ========================================
 * Tag Chips (filter bar)
 * ======================================== */

.image-gallery__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  min-height: 1rem;
}

.image-gallery__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  background: rgba(78, 205, 196, 0.12);
  border: 1px solid rgba(78, 205, 196, 0.35);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  font-size: 0.9em;
}

.image-gallery__chip-remove:hover {
  opacity: 1;
}

/* ========================================
 * Per-Image Actions (hover action bar)
 * ======================================== */

.image-gallery__item-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 2px;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-gallery__item:hover .image-gallery__item-actions,
.image-gallery__item:focus-within .image-gallery__item-actions {
  opacity: 1;
}

.image-gallery__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--terminal-radius-sm, 4px);
  background: rgba(0, 0, 0, 0.7);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.image-gallery__action:hover {
  background: rgba(0, 0, 0, 0.9);
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__action--favorite {
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.image-gallery__item.is-favorited .image-gallery__action--favorite {
  color: #ffd700;
}

.image-gallery__action--delete:hover {
  background: rgba(255, 60, 60, 0.7);
  color: #fff;
}

/* ========================================
 * Per-Image Tag Chips (on thumbnail card)
 * ======================================== */

.image-gallery__item-tags {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.image-gallery__item-tag {
  display: inline-block;
  padding: 0.05em 0.35em;
  background: rgba(78, 205, 196, 0.2);
  border-radius: 2px;
  font-size: 0.55rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-gallery__item-tag--more {
  background: rgba(255, 255, 255, 0.1);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

/* ========================================
 * Load More Button
 * ======================================== */

.image-gallery__load-more-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--space-2, 0.5rem);
}

.image-gallery__load-more {
  background: transparent;
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  cursor: pointer;
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
  transition: color 0.15s, border-color 0.15s;
}

.image-gallery__load-more:hover {
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  border-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}
/**
 * Image Gallery Panel — Import Hub
 * ===================================
 * Image gallery with lightbox, tag editor, and filter controls.
 *
 * Decomposed into focused files under image_gallery/ for maintainability.



 */
/**
 * Combat Tracker Panel Styles
 * ============================
 * Real-time combat tracking UI with initiative order, HP bars, conditions.
 * Works with combat_tracker_controller.js for dynamic updates.
 */

/* ============================================
 * COMBAT HEADER
 * ============================================ */

.combat-header {
  padding: 0.75rem 1rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-bottom: 1px solid var(--terminal-border, #333);
  margin-bottom: 0.5rem;
}

.combat-header .combat-section-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text-primary, #e0e0e0);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ============================================
 * INITIATIVE LIST
 * ============================================ */

.initiative-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.initiative-entry {
  display: grid;
  grid-template-columns: 32px 2rem 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ============================================
 * COMBATANT PORTRAIT
 * ============================================ */

.combatant-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-purple, #9B59B6));
  flex-shrink: 0;
}

.combatant-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.combatant-portrait__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.combatant-portrait__placeholder .svg-icon svg {
  width: 16px;
  height: 16px;
}

/* NPC portrait - different gradient */
.initiative-entry--npc .combatant-portrait {
  background: linear-gradient(135deg, var(--color-danger, #ef4444), var(--color-warning, #f59e0b));
}

.initiative-entry:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--terminal-border-hover, #444);
}

/* Current Turn Highlight */
.initiative-entry--current {
  background: var(--color-primary-dark, #1a2a4a);
  border-color: var(--color-primary, #4a90e2);
  border-left-width: 3px;
  box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
}

.initiative-entry--current::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--color-primary, #4a90e2);
  mask-image: var(--icon-play);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-play);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* NPC Styling - Improved Visual Differentiation */
.initiative-entry--npc {
  opacity: 0.9;
  border-left: 3px solid var(--color-danger, #ef4444); /* Default: hostile */
}

.initiative-entry--npc .participant-name {
  color: var(--terminal-text-secondary, #999);
}

/* Hostile NPC - Red border (default for NPCs) */
.initiative-entry--npc.initiative-entry--hostile,
.initiative-entry--npc:not(.initiative-entry--friendly):not(.initiative-entry--neutral) {
  border-left-color: var(--color-danger, #ef4444);
}

.initiative-entry--npc.initiative-entry--hostile::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 8px;
  height: 8px;
  background: var(--color-danger, #ef4444);
  border-radius: 50%;
  opacity: 0.6;
}

/* Friendly NPC - Green border */
.initiative-entry--npc.initiative-entry--friendly {
  border-left-color: var(--color-success, #22c55e);
}

.initiative-entry--npc.initiative-entry--friendly .participant-name {
  color: var(--color-success-text, #86efac);
}

/* Neutral NPC - Gray/muted border */
.initiative-entry--npc.initiative-entry--neutral {
  border-left-color: var(--terminal-text-muted, #888);
  opacity: 0.85;
}

/* Unconscious State */
.initiative-entry.unconscious {
  opacity: 0.7;
  background: var(--color-danger-dark, #2a1a1a);
  border-color: var(--color-danger, #d9534f);
}

/* Dead State */
.initiative-entry.dead {
  opacity: 0.5;
  text-decoration: line-through;
  filter: grayscale(1);
}

/* ============================================
 * INITIATIVE COMPONENTS
 * ============================================ */

.initiative-roll {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--terminal-text-primary, #e0e0e0);
}

.initiative-entry--current .initiative-roll {
  background: var(--color-primary, #4a90e2);
  border-color: var(--color-primary-light, #6ba4e8);
  color: white;
}

.participant-name {
  font-weight: 500;
  color: var(--terminal-text-primary, #e0e0e0);
  font-size: 0.9375rem;
}

/* ============================================
 * HP BAR
 * ============================================ */

.hp-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 120px;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, #888);
  font-weight: 600;
}

.stat-current {
  font-weight: 700;
  color: var(--terminal-text-primary, #e0e0e0);
}

.stat-separator {
  color: var(--terminal-text-muted, #888);
  font-weight: 400;
}

.stat-max {
  color: var(--terminal-text-secondary, #999);
  font-weight: 400;
}

.hp-bar-container {
  flex: 1;
  height: 6px;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.hp-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease-out, background-color 0.2s ease;
  border-radius: 3px;
}

.hp-bar--success {
  background: linear-gradient(90deg, #5cb85c, #4caf50);
}

.hp-bar--warning {
  background: linear-gradient(90deg, #f0ad4e, #ff9800);
}

.hp-bar--danger {
  background: linear-gradient(90deg, #d9534f, #f44336);
}

/* HP Change Animations */
@keyframes flash-damage {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) hue-rotate(-20deg);
  }
}

@keyframes flash-healing {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5) saturate(1.5);
  }
}

.hp-bar.damage-flash {
  animation: flash-damage 0.5s ease-out;
}

.hp-bar.healing-flash {
  animation: flash-healing 0.5s ease-out;
}

/* ============================================
 * CONDITIONS
 * ============================================ */

.combatant-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  grid-column: 2 / -1;
  margin-top: 0.25rem;
}

/* Condition badge base and type colors are in components/_condition_badge.css */

/* ============================================
 * DEATH SAVES
 * ============================================ */

.death-saves {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: rgba(217, 83, 79, 0.1);
  border: 1px solid rgba(217, 83, 79, 0.3);
  border-radius: 4px;
}

.saves-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-danger, #d9534f);
}

.successes,
.failures {
  font-size: 1rem;
  letter-spacing: 0.125rem;
}

.successes {
  color: #5cb85c;
}

.failures {
  color: #d9534f;
}

@keyframes death-save-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.death-save-flash {
  animation: death-save-pulse 0.5s ease-out;
}

.stabilized {
  color: var(--color-success, #5cb85c);
  font-weight: 600;
  font-size: 0.875rem;
}

.dead-indicator {
  color: var(--color-danger, #d9534f);
  font-weight: 700;
  font-size: 0.875rem;
}

/* ============================================
 * EMPTY STATE
 * ============================================ */

.combat-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--terminal-text-muted, #888);
}

.combat-empty-state p {
  margin: 0.5rem 0;
}

.combat-hint {
  font-size: 0.875rem;
  opacity: 0.8;
}

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

@media (max-width: 768px) {
  .initiative-entry {
    grid-template-columns: 1.75rem 1fr;
    gap: 0.5rem;
  }

  .hp-stat {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
  }

  .combatant-conditions {
    grid-column: 1 / -1;
  }
}

/* ============================================
 * TURN INDICATOR ANIMATION
 * ============================================ */

@keyframes turn-start-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.6);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 4px rgba(74, 144, 226, 0.4);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
    transform: scale(1);
  }
}

.initiative-entry--turn-start {
  animation: turn-start-pulse 0.4s ease-out;
  background: var(--color-primary-dark, #1a2a4a);
  border-color: var(--color-primary, #4a90e2);
  border-left-width: 3px;
}

/* ============================================
 * NEXT UP PREVIEW
 * ============================================ */

.next-up {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px dashed var(--terminal-border, #333);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.next-up__label {
  color: var(--terminal-text-muted, #888);
  font-weight: 500;
}

.next-up__name {
  color: var(--terminal-text-secondary, #999);
  font-weight: 600;
}

.next-up__initiative {
  color: var(--terminal-text-muted, #888);
  font-size: 0.75rem;
}

/* ============================================
 * DAMAGE HISTORY
 * ============================================ */

.damage-history {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
}

.damage-history__header {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, #888);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.damage-history__entries {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.damage-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  padding: 0.25rem 0;
}

.damage-entry__amount {
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  min-width: 2.5rem;
  text-align: right;
}

.damage-entry--damage .damage-entry__amount {
  color: var(--color-danger, #ef4444);
}

.damage-entry--healing .damage-entry__amount {
  color: var(--color-success, #22c55e);
}

.damage-entry__detail {
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
}

/* ============================================
 * COMBAT TRACKER CONDITION BADGE OVERRIDES
 * Base styles and animations in components/_condition_badge.css
 * ============================================ */

.combat-tracker .condition-badge {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  cursor: help;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.combat-tracker .condition-badge:hover,
.combat-tracker .condition-badge:focus {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Enhanced duration badge in combat tracker */
.combat-tracker .condition-duration {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-weight: 700;
  background: var(--overlay-white-light);
  border-radius: 50%;
}

/* ============================================
 * CONDITION TOOLTIP
 * ============================================ */

.condition-tooltip-wrapper {
  pointer-events: none;
}

.condition-tooltip {
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  padding: 0.75rem;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 0.8125rem;
  animation: tooltip-fade-in 0.15s ease-out;
}

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

.condition-tooltip__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.condition-tooltip__icon {
  font-size: 1.25rem;
}

.condition-tooltip__name {
  font-size: 0.9375rem;
  color: var(--terminal-text-primary, #e0e0e0);
}

.condition-tooltip__description {
  color: var(--terminal-text-secondary, #999);
  font-style: italic;
  margin-bottom: 0.5rem;
}

.condition-tooltip__duration {
  color: var(--color-primary, #4a90e2);
  font-weight: 600;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

.condition-tooltip__effects {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.condition-tooltip__effects li {
  color: var(--terminal-text-primary, #e0e0e0);
  font-size: 0.75rem;
  padding-left: 0.75rem;
  position: relative;
}

.condition-tooltip__effects li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-danger, #ef4444);
}

/* ============================================
 * ACCESSIBILITY
 * ============================================ */

.initiative-entry:focus-within {
  outline: 2px solid var(--color-primary, #4a90e2);
  outline-offset: 2px;
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */

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

@media (prefers-reduced-motion: reduce) {
  .initiative-entry--turn-start {
    animation: none;
  }

  /* .condition-badge--entering reduced motion handled in components/_condition_badge.css */

  .condition-tooltip {
    animation: none;
  }
}

/* ============================================
 * ACTION ECONOMY DISPLAY
 * Shows available actions during player's turn
 * ============================================ */

.action-economy {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--color-primary-dark, #1a2a4a);
  border: 1px solid var(--color-primary, #4a90e2);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(74, 144, 226, 0.2);
}

.action-economy__title {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary-light, #6ba4e8);
}

.action-economy__resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.action-economy__resource {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.action-economy__resource--used {
  opacity: 0.4;
  filter: grayscale(1);
}

.action-economy__resource--partial {
  opacity: 0.7;
}

.action-economy__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-success, #5cb85c);
  transition: color 0.2s ease;
}

.action-economy__icon[data-available="false"] {
  color: var(--terminal-text-muted, #888);
}

.action-economy__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--terminal-text-secondary, #999);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-economy__value {
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--terminal-text-primary, #e0e0e0);
  min-width: 1.25rem;
  text-align: center;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 480px) {
  .action-economy__resources {
    gap: 0.5rem;
  }

  .action-economy__resource {
    padding: 0.25rem 0.5rem;
  }

  .action-economy__label {
    font-size: 0.6875rem;
  }
}

/* Action economy animation on turn start */
@keyframes action-economy-pulse {
  0% {
    box-shadow: 0 0 12px rgba(74, 144, 226, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(74, 144, 226, 0.4);
  }
  100% {
    box-shadow: 0 0 12px rgba(74, 144, 226, 0.2);
  }
}

.action-economy--new-turn {
  animation: action-economy-pulse 0.6s ease-out;
}

/* ============================================
 * COMBAT QUICK ACTIONS
 * Quick action buttons during player's turn
 * ============================================ */

.combat-actions {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
}

.combat-actions__title {
  margin: 0 0 0.5rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terminal-text-muted, #888);
}

.combat-actions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.combat-actions__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 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;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.combat-actions__btn:hover:not(:disabled) {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--terminal-border-hover, #444);
  color: var(--terminal-text-primary, #e0e0e0);
  transform: translateY(-1px);
}

.combat-actions__btn:active:not(:disabled) {
  transform: translateY(0);
}

.combat-actions__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.combat-actions__btn svg {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.8;
}

.combat-actions__label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Action Button Variants */
.combat-actions__btn--attack:hover:not(:disabled) {
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

.combat-actions__btn--attack:hover:not(:disabled) svg {
  color: var(--color-danger, #ef4444);
}

.combat-actions__btn--dash:hover:not(:disabled) {
  border-color: var(--color-warning, #f59e0b);
  color: var(--color-warning, #f59e0b);
}

.combat-actions__btn--dodge:hover:not(:disabled) {
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
}

.combat-actions__btn--disengage:hover:not(:disabled) {
  border-color: var(--color-secondary, #a855f7);
  color: var(--color-secondary, #a855f7);
}

.combat-actions__btn--help:hover:not(:disabled) {
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.combat-actions__btn--hide:hover:not(:disabled) {
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

.combat-actions__btn--ready:hover:not(:disabled) {
  border-color: var(--color-warning, #f59e0b);
  color: var(--color-warning, #f59e0b);
}

.combat-actions__btn--use-object:hover:not(:disabled) {
  border-color: var(--color-info, #3b82f6);
  color: var(--color-info, #3b82f6);
}

/* End Turn Button */
.combat-actions__end-turn {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--terminal-border, #333);
}

.combat-actions__btn--end-turn {
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.625rem;
  background: var(--color-primary-dark, #1a2a4a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary-light, #6ba4e8);
}

.combat-actions__btn--end-turn:hover:not(:disabled) {
  background: var(--color-primary, #4a90e2);
  color: white;
}

.combat-actions__btn--end-turn svg {
  width: 1rem;
  height: 1rem;
}

.combat-actions__btn--end-turn .combat-actions__label {
  font-size: 0.75rem;
  font-weight: 600;
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 480px) {
  .combat-actions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .combat-actions__btn {
    padding: 0.375rem;
  }

  .combat-actions__btn svg {
    width: 1rem;
    height: 1rem;
  }
}

/* Animation for button press feedback */
@keyframes action-pressed {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.combat-actions__btn--pressed {
  animation: action-pressed 0.15s ease-out;
}

/* ============================================
 * STYLED DEATH SAVE ICONS (replacing emoji)
 * ============================================ */

.death-save-icons {
  display: flex;
  gap: 0.25rem;
}

.death-save-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Success icon - filled */
.death-save-icon--success {
  background: var(--color-success, #22c55e);
  color: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--color-success, #22c55e);
}

.death-save-icon--success::after {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: currentColor;
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Failure icon - filled */
.death-save-icon--failure {
  background: var(--color-danger, #ef4444);
  color: white;
  border: 1px solid var(--color-danger, #ef4444);
}

.death-save-icon--failure::after {
  content: '';
  display: block;
  width: 0.5em;
  height: 0.5em;
  background-color: currentColor;
  mask-image: var(--icon-x);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-x);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Empty slot */
.death-save-icon--empty {
  background: transparent;
  border: 1px solid var(--terminal-border, #444);
  color: var(--terminal-text-muted, #888);
}

.death-save-icon--empty::after {
  content: '';
}

/* Animation when save is rolled */
.death-save-icon--new {
  animation: death-save-new 0.4s ease-out;
}

@keyframes death-save-new {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================
 * MOVEMENT SPEED LEGEND
 * Shows remaining/base speed
 * ============================================ */

.movement-display {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
}

.movement-display__icon {
  font-size: 1rem;
  color: var(--color-success, #22c55e);
}

.movement-display__bar {
  flex: 1;
  height: 6px;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}

.movement-display__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.movement-display__fill--full {
  background: var(--color-success, #22c55e);
}

.movement-display__fill--mid {
  background: var(--color-warning, #f59e0b);
}

.movement-display__fill--low {
  background: var(--color-danger, #ef4444);
}

.movement-display__text {
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--terminal-text-primary, #e0e0e0);
  min-width: 70px;
  text-align: right;
}

.movement-display__current {
  color: inherit;
}

.movement-display__separator {
  color: var(--terminal-text-muted, #888);
  margin: 0 0.125rem;
}

.movement-display__base {
  color: var(--terminal-text-muted, #888);
  font-weight: 400;
}

.movement-display__unit {
  font-size: 0.6875rem;
  color: var(--terminal-text-muted, #888);
  margin-left: 0.125rem;
}

/* ============================================
 * ENHANCED QUICK ACTION FEEDBACK
 * ============================================ */

.combat-actions__btn--executing {
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

.combat-actions__btn--executing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: action-shimmer 0.8s ease-in-out;
}

@keyframes action-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.combat-actions__btn--success {
  border-color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22c55e);
}

.combat-actions__btn--success::after {
  content: '';
  position: absolute;
  width: 0.75rem;
  height: 0.75rem;
  top: 2px;
  right: 4px;
  background-color: var(--color-success, #22c55e);
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  animation: check-appear 0.3s ease-out;
}

@keyframes check-appear {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Button hover tooltip showing action description */
.combat-actions__btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.625rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  font-size: 0.6875rem;
  color: var(--terminal-text-primary, #e0e0e0);
  white-space: nowrap;
  z-index: var(--z-panel);
  animation: tooltip-appear 0.15s ease-out;
}

@keyframes tooltip-appear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================
 * COMBAT END SUMMARY
 * ============================================ */

.combat-summary {
  padding: 1rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  animation: summary-appear 0.4s ease-out;
}

@keyframes summary-appear {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.combat-summary__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.combat-summary__icon {
  font-size: 1.25rem;
}

.combat-summary__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text-primary, #e0e0e0);
}

.combat-summary__outcome {
  font-size: 0.8125rem;
  color: var(--color-success, #22c55e);
  font-weight: 500;
}

.combat-summary__outcome--defeat {
  color: var(--color-danger, #ef4444);
}

.combat-summary__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.combat-summary__stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--terminal-bg, #0a0a0a);
  border-radius: 4px;
}

.combat-summary__stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, #888);
}

.combat-summary__stat-value {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-mono, monospace);
  color: var(--terminal-text-primary, #e0e0e0);
}

.combat-summary__stat-value--xp {
  color: var(--color-xp, #fbbf24);
}

.combat-summary__stat-value--gold {
  color: var(--color-gold, #ffd700);
}

.combat-summary__stat-value--damage {
  color: var(--color-danger, #ef4444);
}

.combat-summary__stat-value--rounds {
  color: var(--color-primary, #4a90e2);
}

/* Resources expended section */
.combat-summary__resources {
  padding-top: 0.75rem;
  border-top: 1px solid var(--terminal-border, #333);
}

.combat-summary__resources-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, #888);
  margin-bottom: 0.5rem;
}

.combat-summary__resources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.combat-summary__resource {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 3px;
  font-size: 0.75rem;
}

.combat-summary__resource-icon {
  font-size: 0.875rem;
}

.combat-summary__resource-name {
  color: var(--terminal-text-secondary, #999);
}

.combat-summary__resource-amount {
  font-weight: 600;
  color: var(--terminal-text-primary, #e0e0e0);
}

/* Dismiss button */
.combat-summary__dismiss {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.combat-summary__dismiss:hover {
  background: var(--terminal-bg, #0a0a0a);
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

/* ============================================
 * DAMAGE HISTORY ENHANCEMENTS
 * ============================================ */

.damage-history__truncation {
  font-size: 0.75rem;
  color: var(--terminal-text-muted, #888);
  font-style: italic;
  text-align: center;
  padding: 0.25rem 0;
  border-top: 1px dashed var(--terminal-border, #333);
  margin-top: 0.25rem;
}

.damage-entry__timestamp {
  font-size: 0.625rem;
  color: var(--terminal-text-muted, #555);
  margin-left: auto;
  font-family: var(--font-mono, monospace);
}

/* ============================================
 * ADDITIONAL REDUCED MOTION
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .death-save-icon--new,
  .combat-summary,
  .combat-actions__btn--executing::before,
  .combat-actions__btn--success::after,
  .combat-actions__btn[title]:hover::after {
    animation: none;
  }
}

/* ============================================
 * ACCESSIBILITY ENHANCEMENTS
 * Keyboard navigation and screen reader support
 * ============================================ */

/* Initiative list keyboard navigation */
.initiative-list[role="listbox"] {
  outline: none;
}

.initiative-entry:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  z-index: var(--z-raised);
}

.initiative-entry[aria-selected="true"] {
  box-shadow: inset 3px 0 0 var(--color-gold, #ffd700);
}

/* Combat action buttons keyboard focus */
.combat-actions__btn:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* HP adjustment and condition toggle focus */
.hp-adjust-btn:focus-visible,
.condition-toggle:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 1px;
}

/* Death save buttons keyboard focus */
.death-save-icon:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
  border-radius: 50%;
}

/* Combat summary dismiss focus */
.combat-summary__dismiss:focus-visible {
  outline: 2px solid var(--terminal-text-primary, #e0e0e0);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .initiative-entry--current {
    border: 3px solid Highlight;
  }

  .hp-bar__fill {
    background: Highlight;
  }

  .hp-bar__fill--critical {
    background: Mark;
  }

  .death-save-icon--success {
    color: LinkText;
  }

  .death-save-icon--failure {
    color: Mark;
  }

  .combat-actions__btn {
    border: 2px solid ButtonText;
  }

  .combat-actions__btn:hover,
  .combat-actions__btn:focus {
    border-color: Highlight;
  }
}

/* ============================================
 * VTT ↔ COMBAT TRACKER SYNC HIGHLIGHTING
 * ============================================ */

/* User-selected combatant (clicked in combat tracker) */
.initiative-entry--selected {
  background: var(--color-accent-secondary-dark, #2d1f4e);
  border-color: var(--color-accent-secondary, #9b59b6);
  border-left-width: 3px;
  box-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
}

.initiative-entry--selected .participant-name {
  color: var(--terminal-text-primary, #e0e0e0);
}

/* VTT-synced highlight (token selected in VTT → combat tracker) */
.initiative-entry--vtt-selected {
  background: var(--color-accent-tertiary-dark, #1f3d2d);
  border-color: var(--color-accent-tertiary, #27ae60);
  box-shadow: 0 0 8px rgba(39, 174, 96, 0.25);
}

.initiative-entry--vtt-selected::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-accent-tertiary, #27ae60);
  border-radius: 50%;
  animation: vtt-sync-pulse 1.5s ease-in-out infinite;
}

@keyframes vtt-sync-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
  }
}

/* Combined state: both selected and VTT-synced */
.initiative-entry--selected.initiative-entry--vtt-selected {
  border-color: var(--color-gold, #ffd700);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35);
}

/* ===========================================================================
   Your Turn Notification
   =========================================================================== */

.your-turn-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: var(--z-sky);
  opacity: 0;
  pointer-events: none;
  transition: background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.your-turn-notification--active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.your-turn-notification--exit {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.1);
}

.your-turn-notification__content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, 
    rgba(217, 119, 6, 0.95) 0%, 
    rgba(180, 83, 9, 0.95) 100%);
  border: 2px solid var(--color-gold);
  border-radius: var(--radius-lg);
  box-shadow: 
    0 0 40px rgba(217, 119, 6, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: your-turn-pulse 1s ease-in-out infinite alternate;
}

@keyframes your-turn-pulse {
  0% {
    box-shadow: 
      0 0 40px rgba(217, 119, 6, 0.5),
      0 4px 20px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  100% {
    box-shadow: 
      0 0 60px rgba(217, 119, 6, 0.7),
      0 4px 20px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

.your-turn-notification__icon {
  font-size: 2rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: your-turn-icon-bounce 0.6s ease-in-out;
}

@keyframes your-turn-icon-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.your-turn-notification__text {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Responsive - smaller on mobile */
@media (max-width: 640px) {
  .your-turn-notification__content {
    padding: 0.75rem 1.5rem;
  }

  .your-turn-notification__icon {
    font-size: 1.5rem;
  }

  .your-turn-notification__text {
    font-size: 1.25rem;
  }
}
/*
 * Organism: Combat Tracker
 * =========================
 * Combat initiative tracker with combatant portraits, HP bars, conditions, and actions.
 *
 * Split into focused modules under combat_tracker/:
 *   _combatants.css         — Header, initiative list, portrait, HP bar, conditions, death saves, empty state, animations
 *   _conditions_actions.css — Damage history, condition badges/tooltips, accessibility, action economy, quick actions
 *   _extended_combat.css    — Styled death save icons, movement speed legend, enhanced quick action feedback
 *   _summary_sync.css       — Combat end summary, damage enhancements, reduced motion, accessibility, VTT sync, turn notification
 */





/**
 * Combat Tracker — State Classes
 * ==============================
 * BEM `--hidden` state modifiers for the combat tracker subpanels.
 * Toggled by combat_tracker_controller.js and lib/combat_tracker/* helpers
 * via classList.add/remove instead of inline style mutations (#4259).
 */

.combat-header--hidden { display: none; }
.initiative-list--hidden { display: none; }
.initiative-wheel-container--hidden { display: none; }
.next-up--hidden { display: none; }
.damage-history--hidden { display: none; }
.combat-empty-state--hidden { display: none; }
.action-economy--hidden { display: none; }
.combat-actions--hidden { display: none; }
/**
 * Combat Tracker — Action Hierarchy
 * =================================
 * Visual hierarchy for the quick-combat action grid (#4271, finding 10.3).
 *
 * Layout:
 *   1. Primary Attack button (full-width, danger-colored, dominant)
 *   2. Secondary 2x2 grid: Dash / Dodge / Disengage / Use Item
 *   3. <details> "More actions" disclosure: Help / Hide / Ready
 *   4. End Turn footer (visually weighty — second only to Attack)
 *
 * Promote/demote via CSS overrides on the existing combat-actions__*
 * BEM scope so the original styles in _combat_tracker.css remain
 * the baseline. This file ships incremental hierarchy on top.
 */

/* Primary action row (Attack) — visually dominant, full-width button. */
.combat-actions__primary {
  margin-bottom: 0.5rem;
}

.combat-actions__btn--primary {
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-danger-dark, #4a1a1a);
  border: 1px solid var(--color-danger, #ef4444);
  color: var(--color-danger-light, #fca5a5);
  font-weight: 600;
}

.combat-actions__btn--primary:hover:not(:disabled) {
  background: var(--color-danger, #ef4444);
  color: white;
  transform: translateY(-1px);
}

.combat-actions__btn--primary svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 1;
}

.combat-actions__btn--primary .combat-actions__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Secondary 2x2 grid (Dash / Dodge / Disengage / Use Item). */
.combat-actions__grid--secondary {
  grid-template-columns: repeat(2, 1fr);
}

/* "More" disclosure for less-frequent actions (Help / Hide / Ready). */
.combat-actions__more {
  margin-top: 0.5rem;
}

.combat-actions__more-toggle {
  list-style: none;
  cursor: pointer;
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terminal-text-muted, #888);
  border: 1px dashed var(--terminal-border, #333);
  border-radius: 4px;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.combat-actions__more-toggle::-webkit-details-marker {
  display: none;
}

.combat-actions__more-toggle:hover {
  color: var(--terminal-text-primary, #e0e0e0);
  border-color: var(--terminal-border-hover, #444);
}

.combat-actions__more[open] .combat-actions__more-toggle {
  margin-bottom: 0.5rem;
  color: var(--terminal-text-primary, #e0e0e0);
  border-style: solid;
}

.combat-actions__grid--more {
  grid-template-columns: repeat(3, 1fr);
}

/* End Turn — weight-up. Second-most-dominant action after Attack. */
.combat-actions .combat-actions__end-turn {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--terminal-border, #333);
}

.combat-actions .combat-actions__btn--end-turn {
  padding: 0.75rem;
  font-weight: 600;
}

.combat-actions .combat-actions__btn--end-turn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.combat-actions .combat-actions__btn--end-turn svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 1;
}

.combat-actions .combat-actions__btn--end-turn .combat-actions__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Responsive: collapse the More grid to 2 columns on smaller screens. */
@media (max-width: 480px) {
  .combat-actions__grid--more {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*
 * Guest Gate Organism (#440)
 * ==========================
 * Loading/connecting page shown to unauthenticated visitors.
 * Includes progress animation and timeout error state.
 * Uses design tokens from: terminal/_tokens.css
 */

.guest-gate-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-primary, #1a1a1a);
  padding: 1rem;
}

.guest-gate-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.guest-gate-message {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 1.125rem;
  font-family: var(--font-mono, monospace);
  margin: 0 0 1.5rem;
}

.guest-gate-dots {
  display: inline-block;
  min-width: 1.5em;
  text-align: left;
}

/* Indeterminate progress bar */
.guest-gate-progress {
  width: 200px;
  height: 3px;
  background: var(--color-bg-tertiary, #3d3d3d);
  border-radius: 2px;
  margin: 0 auto 1.5rem;
  overflow: hidden;
}

.guest-gate-progress__bar {
  width: 40%;
  height: 100%;
  background: var(--color-accent-primary, #5a9fd8);
  border-radius: 2px;
  animation: guest-gate-progress-slide 1.5s ease-in-out infinite;
}

@keyframes guest-gate-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Error state (shown after timeout) */
.guest-gate-error {
  animation: guest-gate-fade-in 0.3s ease-out;
}

@keyframes guest-gate-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.guest-gate-error__message {
  color: var(--color-accent-warning, #d4b06e);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}

.guest-gate-error__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.guest-gate-error__button {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.guest-gate-error__button:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 85%, white);
}

.guest-gate-error__button:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.guest-gate-error__sign-in {
  color: var(--color-accent-primary, #5a9fd8);
  font-size: 0.875rem;
  font-family: var(--font-mono, monospace);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-accent-primary, #5a9fd8);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.guest-gate-error__sign-in:hover {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
}

.guest-gate-error__sign-in:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.guest-gate-noscript {
  color: var(--color-accent-warning, #d4b06e);
  font-size: 0.875rem;
  margin-top: 1rem;
}
/**
 * Inventory Panel — Base Layout, Items, Rarity, Item Info & Actions
 */

/**
 * Inventory Panel
 * ===============
 * Displays character inventory with rarity-based styling.
 * Uses design tokens from: terminal/_tokens.css
 */

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

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

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

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

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

.inventory__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.inventory__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Capacity Display
 * ======================================== */

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

.inventory__capacity-bar {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.inventory__capacity-fill {
  height: 100%;
  background: var(--color-accent-secondary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background-color var(--transition-normal);
}

.inventory__capacity-fill--warning {
  background: var(--color-accent-warning);
}

.inventory__capacity-fill--full {
  background: var(--color-accent-error);
}

/* ========================================
 * Item List
 * ======================================== */

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

.inventory__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Category Sections (dynamically rendered)
 * ======================================== */

.inventory__category {
  margin-bottom: var(--space-4);
}

.inventory__category:last-child {
  margin-bottom: 0;
}

.inventory__category-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: 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);
}

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

/* ========================================
 * Item Card
 * ======================================== */

.inventory__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);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-fast);
}

.inventory__item:hover {
  background: var(--color-bg-tertiary);
  transform: translateY(-1px);
}

.inventory__item:active {
  transform: translateY(0);
}

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

/* ========================================
 * State Modifiers
 * ======================================== */

.inventory__item--equipped {
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-secondary) 30%, var(--color-border-default));
}

.inventory__item--attuned {
  background: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-purple) 30%, var(--color-border-default));
}

/* ========================================
 * Rarity Variants (via data-rarity attribute)
 *
 * Refactor (#4260, XC-3): Most rarities now signal via a text-color badge
 * (`.inventory__item-rarity`) rather than a left-border accent. Two tiers
 * keep the load-bearing left-border treatment because they signal
 * exceptional / dangerous loot the player must not miss:
 *   - legendary  (gold border + tinted bg)
 *   - artifact   (red border + tinted bg — danger/cursed)
 * Color values for all six tiers are unchanged; only the SHAPE of the
 * common/uncommon/rare/very-rare signal moved from border to text color.
 * ======================================== */

/* Hover boosts for rarities that no longer carry a left-border accent —
 * the rarity color is preserved on the full border + glow on interaction. */
.inventory__item[data-rarity="uncommon"]:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--shadow-glow-success);
}

.inventory__item[data-rarity="rare"]:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

.inventory__item[data-rarity="very_rare"]:hover,
.inventory__item[data-rarity="very-rare"]:hover {
  border-color: var(--color-accent-purple);
  box-shadow: var(--shadow-glow-purple);
}

/* Legendary — left-border KEPT (load-bearing UX for top-tier loot) */
.inventory__item[data-rarity="legendary"] {
  border-left: 3px solid var(--color-gold);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    var(--color-bg-secondary) 100%
  );
}

.inventory__item[data-rarity="legendary"]:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-glow-gold);
}

/* Artifact — left-border KEPT (semantic danger / cursed signal) */
.inventory__item[data-rarity="artifact"] {
  border-left: 3px solid var(--color-accent-error);
  background: linear-gradient(
    135deg,
    rgba(224, 108, 117, 0.05) 0%,
    var(--color-bg-secondary) 100%
  );
}

.inventory__item[data-rarity="artifact"]:hover {
  border-color: var(--color-accent-error);
  box-shadow: var(--shadow-glow-error);
}

/* ========================================
 * Rarity Text Badge
 *
 * Inline text-color signal — preserves rarity color values without piling
 * another distinct left-border idiom into the panel. Renders next to the
 * item name when present (data-rarity is also queryable for sort/filter).
 * ======================================== */

.inventory__item-rarity {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.inventory__item[data-rarity="common"] .inventory__item-rarity {
  color: var(--color-text-muted);
}

.inventory__item[data-rarity="uncommon"] .inventory__item-rarity {
  color: var(--color-accent-secondary);
}

.inventory__item[data-rarity="rare"] .inventory__item-rarity {
  color: var(--color-accent-primary);
}

.inventory__item[data-rarity="very_rare"] .inventory__item-rarity,
.inventory__item[data-rarity="very-rare"] .inventory__item-rarity {
  color: var(--color-accent-purple);
}

.inventory__item[data-rarity="legendary"] .inventory__item-rarity {
  color: var(--color-gold);
}

.inventory__item[data-rarity="artifact"] .inventory__item-rarity {
  color: var(--color-accent-error);
}

/* ========================================
 * Item Icon
 * ======================================== */

.inventory__item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.inventory__item-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

/* ========================================
 * Item Info
 * ======================================== */

.inventory__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.inventory__item-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.inventory__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.inventory__item-badge--equipped {
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-primary));
  color: var(--color-accent-secondary);
}

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

/* ========================================
 * Item Actions
 * ======================================== */

.inventory__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Primary action always visible */
.inventory__item-actions .item-action--primary,
.inventory__item-actions__primary {
  opacity: 1;
}

/* Secondary actions hidden by default */
.inventory__item-actions .item-action--secondary,
.inventory__item-actions__secondary {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Show secondary on hover or focus */
.inventory__item:hover .inventory__item-actions .item-action--secondary,
.inventory__item:focus-within .inventory__item-actions .item-action--secondary,
.inventory__item:hover .inventory__item-actions__secondary,
.inventory__item:focus-within .inventory__item-actions__secondary {
  opacity: 1;
}

/* Legacy: hide all actions on non-interactive state */
.inventory__item-actions--hide-on-idle {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.inventory__item:hover .inventory__item-actions--hide-on-idle,
.inventory__item:focus-within .inventory__item-actions--hide-on-idle {
  opacity: 1;
}

/* ========================================
 * Item Meta (legacy support)
 * ======================================== */

.inventory-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.inventory-item__quantity {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.inventory-item__weight {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/**
 * Inventory Panel — Weight, Gold, Responsive, Loading, Search, Drag & Drop
 */

/* ========================================
 * Weight Display
 * ======================================== */

.inventory__weight {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inventory__weight--encumbered {
  color: var(--color-accent-warning);
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * Gold Display
 * ======================================== */

.inventory__gold {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
}

/* Styled gold coin icon (replaces emoji for consistency) */
.inventory__gold-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8860b 100%);
  border-radius: 50%;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: #1a1a1a;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.3);
}

.inventory__gold-icon::after {
  content: 'G';
}

/* Fallback if no icon element present */
.inventory__gold:not(:has(.inventory__gold-icon))::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  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);
}

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

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

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

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

  .inventory__item-icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-base);
  }

  /* All actions visible on small screens */
  .inventory__item-actions,
  .inventory__item-actions .item-action--secondary,
  .inventory__item-actions__secondary {
    opacity: 1;
  }
}

/* Touch device: always show all actions */
@media (hover: none) {
  .inventory__item-actions,
  .inventory__item-actions .item-action--secondary,
  .inventory__item-actions__secondary,
  .inventory__item-actions--hide-on-idle {
    opacity: 0.85;
  }
}

/* ========================================
 * Loading States
 * ======================================== */

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

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

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

/* ----------------------------------------
 * Skeleton — item card shape (9.4)
 * Mirrors the .inventory__item structure so the loading state
 * does not jump to a different layout when items arrive.
 * ---------------------------------------- */

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

.inventory__skeleton-row {
  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-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-md);
}

.inventory__skeleton-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.inventory__skeleton-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.inventory__skeleton-name {
  height: 14px;
  margin-bottom: 0;
}

.inventory__skeleton-meta {
  height: 10px;
  margin-bottom: 0;
}

.inventory__skeleton-badge {
  width: 28px;
  height: 18px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ========================================
 * Inline Search Shortcut Hint (9.3)
 * "Press / to search" — visible until first use.
 * ======================================== */

.panel-search-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border-default));
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.panel-search-hint__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  background: var(--color-bg-tertiary, var(--color-bg-elevated, #1a1a1a));
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #999);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.panel-search-hint--hidden {
  display: none;
}

/* ========================================
 * Drag and Drop States
 * ======================================== */

.inventory__item--dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.inventory__item--drag-over {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-secondary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.inventory__drop-zone {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.inventory__drop-zone--active {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);
  color: var(--color-accent-primary);
}

/* ========================================
 * Item Interaction Enhancements
 * ======================================== */

/* Equip animation */
.inventory__item--equipping {
  animation: inventory-equip 0.4s ease-out;
}

@keyframes inventory-equip {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-secondary)); }
  100% { transform: scale(1); }
}

/* Use item animation */
.inventory__item--using {
  animation: inventory-use 0.3s ease-out;
}

@keyframes inventory-use {
  0% { opacity: 1; }
  50% { opacity: 0.6; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Item removal animation */
.inventory__item--removing {
  animation: inventory-remove 0.3s ease-out forwards;
}

@keyframes inventory-remove {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-20px); height: 0; padding: 0; margin: 0; }
}

/* Item addition animation */
.inventory__item--new {
  animation: inventory-add 0.4s ease-out;
}

@keyframes inventory-add {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ========================================
/**
 * Inventory Panel — Quantity Controls, Category Collapse, Search Bar, Reduced Motion & VTT Drag
 */

 * Quantity Controls
 * ======================================== */

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

.inventory__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  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-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.inventory__qty-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

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

/* ========================================
 * Category Collapse
 * ======================================== */

.inventory__category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-1) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

.inventory__category-toggle:hover {
  color: var(--color-text-primary);
}

.inventory__category-chevron {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.inventory__category--collapsed .inventory__category-chevron {
  transform: rotate(-90deg);
}

.inventory__category--collapsed .inventory__items {
  display: none;
}

/* ========================================
 * Search/Filter Bar
 * ======================================== */

.inventory__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
}

.inventory__search-input {
  flex: 1;
  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-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.inventory__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.inventory__search-input::placeholder {
  color: var(--color-text-muted);
}

.inventory__filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.inventory__filter-btn--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

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

@media (prefers-reduced-motion: reduce) {
  .inventory__item {
    transition: none;
  }

  .inventory__item:hover {
    transform: none;
  }

  .inventory__capacity-fill {
    transition: none;
  }

  .inventory__item-actions {
    transition: none;
  }

  .inventory__skeleton {
    animation: none;
  }

  .inventory__item--equipping,
  .inventory__item--using,
  .inventory__item--removing,
  .inventory__item--new {
    animation: none;
  }
}

/* ========================================
 * Drag to VTT
 * ======================================== */

/* Make items draggable */
.inventory__item {
  cursor: grab;
}

.inventory__item:active {
  cursor: grabbing;
}

/* Dragging state */
.inventory__item--dragging {
  opacity: 0.5;
  outline: 2px dashed var(--color-accent-primary, #3498db);
  outline-offset: 2px;
}

/* Drag preview - floating element created by JavaScript */
.inventory-drag-preview {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.inventory-drag-preview__icon {
  font-size: 16px;
}

.inventory-drag-preview__name {
  font-weight: 500;
}
/**
 * Inventory Panel — Import Hub
 * ==============================
 * Displays character inventory with rarity-based styling.
 *
 * Decomposed into focused files under inventory/ for maintainability.



 */
/**
 * Login Panel
 * ===========
 * Terminal-style login form panel.
 */

.login-panel-content {
  padding: var(--space-md);
  color: var(--color-text-primary);
  overflow-y: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.login-section {
  margin-bottom: var(--space-md);
}

.login-section--success {
  background: rgba(138, 181, 110, 0.1);
  border: 1px solid var(--color-accent-secondary);
  border-radius: 6px;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
}

.login-section--footer {
  margin-top: auto;
  text-align: center;
}

/* Header */
.login-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-bg-elevated);
  border-radius: 6px;
}

.login-header__icon {
  font-size: 2rem;
  line-height: 1;
}

.login-header__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.login-header__subtitle {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Status (logged in) */
.login-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.login-status__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-secondary);
  color: var(--color-bg-primary);
  border-radius: 50%;
  font-weight: bold;
}

.login-status__text {
  color: var(--color-text-primary);
}

.login-status__text strong {
  color: var(--color-accent-cyan);
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.login-field__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

.login-field__input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field__input::placeholder {
  color: var(--color-text-muted);
}

.login-field__input:focus {
  outline: none;
  border-color: var(--color-accent-cyan);
  box-shadow: 0 0 0 2px rgba(77, 168, 181, 0.2);
}

/* Error */
.login-error {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: rgba(207, 96, 104, 0.1);
  border: 1px solid var(--color-accent-error);
  border-radius: 4px;
  color: var(--color-accent-error);
  font-size: 0.85rem;
}

.login-error[hidden] {
  display: none;
}

.login-error__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-accent-error);
  color: var(--color-bg-primary);
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Submit Button */
.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-cyan);
  border: none;
  border-radius: 4px;
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.login-submit:hover {
  background: #7be5f0;
}

.login-submit:active {
  transform: translateY(1px);
}

.login-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.login-submit__loading[hidden] {
  display: none;
}

/* Action Button */
.login-action {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  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;
}

.login-action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-cyan);
  color: var(--color-text-primary);
}

/* Footer */
.login-footer__text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

.login-footer__link {
  color: var(--color-accent-cyan);
  text-decoration: none;
}

.login-footer__link:hover {
  text-decoration: underline;
}
/* Map Panel */
/* Generated by MDSL */

.map {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.map__header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.map__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.map__content {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
}

.map__footer {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}
/* ========================================
 * Party Journal Panel
 * ========================================
 * Shared campaign notes for multiplayer sessions.
 * Timeline of events, rumors, theories, and quest logs.
 */

.panel-party-journal {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  overflow: hidden;
}

/* ========================================
 * Header
 * ========================================
 */

.journal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.journal-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.journal-actions {
  display: flex;
  gap: var(--space-1);
}

/* ========================================
 * Add Entry Form
 * ========================================
 */

.journal-add-form {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.journal-add-form .form-group {
  margin-bottom: var(--space-2);
}

.journal-add-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.journal-add-form .form-select,
.journal-add-form .form-input,
.journal-add-form .form-textarea {
  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-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.journal-add-form .form-textarea {
  resize: vertical;
  min-height: 60px;
}

.journal-add-form .form-row {
  margin-bottom: var(--space-2);
}

.journal-add-form .form-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.journal-add-form .form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ========================================
 * Filters
 * ========================================
 */

.journal-filters {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  flex-shrink: 0;
}

.filter-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* ========================================
 * Search
 * ========================================
 */

.journal-search {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.journal-search .form-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-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ========================================
 * Entries List
 * ========================================
 */

.journal-entries {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* ========================================
 * Journal Entry
 * ========================================
 */

.journal-entry {
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color 0.15s ease;
}

.journal-entry:hover {
  border-color: var(--color-border-hover);
}

.journal-entry.pinned {
  border-color: rgba(255, 215, 0, 0.4);
  background: rgba(255, 215, 0, 0.05);
}

.journal-entry.pinned::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.6), transparent);
}

.journal-entry[hidden] {
  display: none;
}

/* Entry Type Variants */
.journal-entry--event {
  border-left: 3px solid var(--color-info);
}

.journal-entry--rumor {
  border-left: 3px solid var(--color-warning);
}

.journal-entry--theory {
  border-left: 3px solid var(--color-secondary);
}

.journal-entry--note {
  border-left: 3px solid var(--color-text-muted);
}

.journal-entry--quest_log {
  border-left: 3px solid var(--color-success);
}

/* Entry Header */
.entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.entry-type-icon {
  font-size: var(--font-size-base);
}

.entry-author {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.entry-session {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  font-size: var(--font-size-xs);
}

.entry-time {
  margin-left: auto;
}

.pin-indicator,
.private-indicator {
  display: flex;
  align-items: center;
  color: rgba(255, 215, 0, 0.8);
}

.private-indicator {
  color: var(--color-text-muted);
}

/* Entry Content */
.entry-content {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.entry-content p {
  margin: 0;
}

.entry-content p + p {
  margin-top: var(--space-2);
}

/* Entry Tags */
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.entry-tags .tag {
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(var(--color-primary-rgb), 0.1);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease;
}

.entry-tags .tag:hover {
  background: rgba(var(--color-primary-rgb), 0.2);
}

/* Entry Actions */
.entry-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.journal-entry:hover .entry-actions {
  opacity: 1;
}

.btn-icon-inline {
  padding: var(--space-1);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-icon-inline:hover {
  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
}

/* ========================================
 * Empty State
 * ========================================
 */

.journal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.journal-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.journal-empty p {
  margin: 0;
}

.journal-empty .empty-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  opacity: 0.7;
}

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

@media (max-width: 640px) {
  .journal-filters {
    padding: var(--space-2);
  }

  .filter-btn {
    padding: var(--space-1);
    font-size: var(--font-size-xs);
  }

  .journal-entries {
    padding: var(--space-2);
  }

  .journal-entry {
    padding: var(--space-2);
  }

  .entry-actions {
    opacity: 1;
  }
}
/*
 * Profile — CSS custom properties
 * Extracted for maintainability (#2783).
 */

/**
 * Profile Page Styles
 * ===================
 * Complete profile page redesign with hero section,
 * pill-style tabs, modernized cards, and improved responsive design.
 */

/* ==========================================
   CSS Custom Properties (Profile-specific)
   ========================================== */

.profile-page {
  /* Base page styles */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  min-height: 100vh;
  margin: 0;
  padding: 0;

  /* Profile-specific custom properties */
  --profile-card-radius: 4px;
  --profile-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --profile-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
  --profile-transition: 0.2s ease;
  --profile-spacing-xs: 4px;
  --profile-spacing-sm: 8px;
  --profile-spacing-md: 16px;
  --profile-spacing-lg: 24px;
  --profile-spacing-xl: 32px;
}

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

.profile-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.profile-header {
  text-align: center;
  margin-bottom: var(--profile-spacing-lg);
}

.profile-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  margin-bottom: var(--profile-spacing-sm);
}

.profile-title::before {
  content: '> ';
  color: var(--color-text-muted);
}

.profile-subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ==========================================
   Flash Messages
   ========================================== */

.flash-messages {
  margin-bottom: var(--profile-spacing-lg);
}

.flash {
  padding: var(--profile-spacing-md);
  border-radius: var(--profile-card-radius);
  font-size: 0.875rem;
  margin-bottom: var(--profile-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
}

.flash.alert {
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.flash.notice {
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

/* ==========================================
   Hero Section (Profile Identity)
   ========================================== */

.profile-hero {
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  margin-bottom: var(--profile-spacing-lg);
  box-shadow: var(--profile-card-shadow);
}

.profile-hero__card {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-lg);
}

.profile-hero__identity {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-lg);
}

.profile-hero__avatar {
  width: 72px;
  height: 72px;
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-primary));
  border-radius: var(--profile-card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border-default);
  flex-shrink: 0;
  font-size: 2rem;
  transition: border-color var(--profile-transition), transform var(--profile-transition);
}

.profile-hero__avatar:hover {
  border-color: var(--color-accent-primary);
  transform: scale(1.02);
}

.profile-hero__info {
  flex: 1;
  min-width: 0;
}

.profile-hero__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--profile-spacing-xs);
}

.profile-hero__email {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-sm);
}

.profile-hero__role {
  display: flex;
  gap: var(--profile-spacing-sm);
  flex-wrap: wrap;
}

/* Stats Row in Hero */
.profile-hero__stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--profile-spacing-md);
}

.profile-hero__stat {
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  padding: var(--profile-spacing-md);
  text-align: center;
  border: 1px solid transparent;
  transition: border-color var(--profile-transition), transform var(--profile-transition);
}

.profile-hero__stat:hover {
  border-color: var(--color-border-default);
  transform: translateY(-2px);
}

.profile-hero__stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.profile-hero__stat-label {
  display: block;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: var(--profile-spacing-xs);
}

.profile-hero__stat--highlight .profile-hero__stat-value {
  color: var(--color-accent-warning);
}

.profile-hero__stat--clickable {
  cursor: pointer;
}

.profile-hero__stat--clickable:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
}

.profile-hero__stat--clickable:hover .profile-hero__stat-label {
  text-decoration: underline;
}

/* Timezone Select */
.timezone-select {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--profile-transition);
}

.timezone-select:hover,
.timezone-select:focus {
  border-color: var(--color-accent-primary);
  outline: none;
}

.timezone-select option {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Timezone button offset label */
.setting-btn__offset {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Section highlight animation (for scroll-to-timezone) */
.profile-tab-section--highlight {
  animation: section-highlight 2s ease;
}

@keyframes section-highlight {
  0% { outline: 2px solid var(--color-accent-primary); outline-offset: 4px; }
  100% { outline: 2px solid transparent; outline-offset: 4px; }
}

/* Token Usage in Hero */
.profile-hero__tokens {
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  padding: var(--profile-spacing-md);
}

.profile-hero__tokens-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--profile-spacing-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-hero__tokens-meter {
  height: 8px;
  background: var(--color-bg-primary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--profile-spacing-sm);
}

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

.profile-hero__tokens-fill--low { background: var(--color-accent-secondary); }
.profile-hero__tokens-fill--medium { background: var(--color-accent-warning); }
.profile-hero__tokens-fill--high { background: var(--color-accent-error); }

.profile-hero__tokens-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.profile-hero__tokens-used { color: var(--color-text-secondary); }
.profile-hero__tokens-remaining { color: var(--color-accent-secondary); }

/* Quick Actions in Hero */
.profile-hero__actions {
  display: flex;
  gap: var(--profile-spacing-md);
}

/*
 * Profile — Badges
 * Extracted for maintainability (#2783).
 */

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

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--profile-spacing-xs);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-badge--player {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

.profile-badge--admin {
  background: rgba(229, 192, 123, 0.15);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.profile-badge--dm {
  background: rgba(198, 120, 221, 0.15);
  color: var(--color-accent-purple);
  border: 1px solid rgba(198, 120, 221, 0.3);
}

/* ==========================================
   Tab Navigation (Pill Style with Icons)
   ========================================== */

.profile-tabs {
  margin-bottom: var(--profile-spacing-lg);
}

.profile-tab-nav {
  display: flex;
  gap: var(--profile-spacing-sm);
  padding: var(--profile-spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--profile-card-radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.profile-tab-nav::-webkit-scrollbar {
  display: none;
}

.profile-tab-btn {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
  flex-shrink: 0;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), opacity var(--profile-transition);
  white-space: nowrap;
}

.profile-tab-btn__icon {
  font-size: 1rem;
  opacity: 0.7;
  transition: opacity var(--profile-transition);
}

.profile-tab-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.profile-tab-btn:hover .profile-tab-btn__icon {
  opacity: 1;
}

.profile-tab-btn.active,
.profile-tab-btn[aria-selected="true"] {
  color: var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.1);
}

.profile-tab-btn.active .profile-tab-btn__icon,
.profile-tab-btn[aria-selected="true"] .profile-tab-btn__icon {
  opacity: 1;
}

/* Tab Content */
.profile-tab-content {
  animation: profileFadeIn 0.25s ease;
}

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

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

/* ==========================================
   Section Headers
   ========================================== */

.profile-tab-section {
  margin-bottom: var(--profile-spacing-xl);
}

.profile-tab-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--profile-spacing-md);
  padding-bottom: var(--profile-spacing-sm);
  border-bottom: 1px solid var(--color-border-default);
}

.profile-tab-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
}

.profile-tab-section__title-icon {
  font-size: 1.1rem;
  opacity: 0.7;
}

.profile-tab-section__count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 4px 12px;
  border-radius: 20px;
}

.profile-tab-section__description {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--profile-spacing-xs);
}

/* ==========================================
   Profile Cards (Reusable)
   ========================================== */

.profile-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
  box-shadow: var(--profile-card-shadow);
}

.profile-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: var(--profile-card-shadow-hover);
}

.profile-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--profile-spacing-sm);
}

.profile-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

.profile-card__subtitle {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--profile-spacing-sm);
}

.profile-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding-top: var(--profile-spacing-sm);
  border-top: 1px solid var(--color-border-default);
  margin-top: var(--profile-spacing-sm);
}

/* ==========================================
   Character Cards
   ========================================== */

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--profile-spacing-md);
}

.character-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), opacity var(--profile-transition);
  box-shadow: var(--profile-card-shadow);
  position: relative;
  overflow: hidden;
}

.character-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-purple));
  opacity: 0;
  transition: opacity var(--profile-transition);
}

.character-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-3px);
  box-shadow: var(--profile-card-shadow-hover);
}

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

.char-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--profile-spacing-sm);
}

.char-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

.char-level {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-primary));
  border: 1px solid var(--color-accent-warning);
  border-radius: 6px;
  color: var(--color-accent-warning);
}

.char-race-class {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--profile-spacing-sm);
  text-transform: capitalize;
}

.char-stats {
  display: flex;
  gap: var(--profile-spacing-lg);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-sm);
}

.char-stats .stat-value {
  color: var(--color-accent-primary);
  font-weight: 600;
}

.char-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-sm);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding-top: var(--profile-spacing-sm);
  border-top: 1px solid var(--color-border-default);
}

.char-actions {
  margin-top: var(--profile-spacing-md);
  padding-top: var(--profile-spacing-md);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  gap: var(--profile-spacing-sm);
}

.char-action-link {
  display: inline-flex;
  align-items: center;
  gap: var(--profile-spacing-xs);
  padding: 6px 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: 0.75rem;
  text-decoration: none;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
}

.char-action-link:hover {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/*
 * Profile — Gameplay stats
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Gameplay Stats Grid
   ========================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--profile-spacing-md);
}

.stat-card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-md);
  text-align: center;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent-primary);
}

.stat-card--highlight {
  border-color: var(--color-accent-warning);
  background: linear-gradient(135deg, var(--color-bg-tertiary), rgba(229, 192, 123, 0.05));
}

.stat-card .stat-label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--profile-spacing-xs);
}

.stat-card .stat-value {
  display: block;
  color: var(--color-accent-primary);
  font-size: 1.25rem;
  font-weight: 700;
}

.stat-card--highlight .stat-value {
  color: var(--color-accent-warning);
}

.stat-card .stat-subtext {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

/* ==========================================
   Achievements
   ========================================== */

.achievement-summary {
  margin-bottom: var(--profile-spacing-lg);
}

.achievement-progress {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-md);
}

.progress-bar {
  flex: 1;
  height: 10px;
  background: var(--color-bg-primary);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-warning), var(--color-accent-secondary));
  border-radius: 5px;
  transition: width 0.5s ease;
}

.progress-text {
  font-size: 0.9rem;
  color: var(--color-accent-warning);
  font-weight: 700;
  min-width: 48px;
  text-align: right;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--profile-spacing-md);
}

.achievement-card {
  position: relative;
  background: linear-gradient(135deg, var(--color-bg-elevated), var(--color-bg-tertiary));
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  text-align: center;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
  box-shadow: var(--profile-card-shadow);
}

.achievement-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent-warning);
  box-shadow: var(--profile-card-shadow-hover);
}

.corner-flourish {
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(229, 192, 123, 0.5);
  border-style: solid;
  transition: border-color var(--profile-transition);
}

.achievement-card:hover .corner-flourish {
  border-color: var(--color-accent-warning);
}

.corner-flourish--tl { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.corner-flourish--tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.corner-flourish--bl { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.corner-flourish--br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

.achievement-category {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.6rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  background: var(--color-bg-primary);
  border-radius: 4px;
}

.achievement-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: var(--profile-spacing-md);
}

.achievement-name {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-warning);
  margin-bottom: var(--profile-spacing-xs);
}

.achievement-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--profile-spacing-sm);
  line-height: 1.4;
}

.achievement-date {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ==========================================
   Campaign Cards
   ========================================== */

.profile-campaign-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--profile-spacing-md);
}

.profile-campaign-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
  box-shadow: var(--profile-card-shadow);
}

.profile-campaign-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-3px);
  box-shadow: var(--profile-card-shadow-hover);
}

.profile-campaign-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--profile-spacing-sm);
}

.profile-campaign-card__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

.profile-campaign-card__role {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.profile-campaign-card__role--dm {
  background: rgba(198, 120, 221, 0.15);
  color: var(--color-accent-purple);
  border: 1px solid rgba(198, 120, 221, 0.3);
}

.profile-campaign-card__role--player {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

.profile-campaign-card__role--co-dm {
  background: rgba(229, 192, 123, 0.15);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.profile-campaign-card__world {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-md);
}

.profile-campaign-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.profile-campaign-card__stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-campaign-card__time {
  margin-top: var(--profile-spacing-sm);
  padding-top: var(--profile-spacing-sm);
  border-top: 1px solid var(--color-border-default);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

/* ==========================================
   World List (Content tab — read-only summary, #3969)
   Canonical management lives at /dm/worlds; profile shows truncated preview.
   ========================================== */

.profile-world-list {
  list-style: none;
  margin: 0 0 var(--profile-spacing-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-xs);
}

.profile-world-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--profile-spacing-sm) var(--profile-spacing-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
}

.profile-world-list__name {
  font-weight: 600;
  color: var(--color-accent-purple);
}

.profile-world-list__status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.profile-world-list__status--published {
  background: rgba(152, 195, 121, 0.15);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.profile-world-list__status--draft {
  background: rgba(229, 192, 123, 0.15);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.profile-tab-section__action {
  margin-top: var(--profile-spacing-md);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================
   Activity Feed
   ========================================== */

.profile-activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-sm);
}

.profile-activity-item {
  display: flex;
  gap: var(--profile-spacing-md);
  padding: var(--profile-spacing-md);
  background: var(--color-bg-elevated);
  border-radius: var(--profile-card-radius);
  border-left: 4px solid var(--color-border-default);
  transition: background var(--profile-transition), color var(--profile-transition);
}

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

.profile-activity-item--session { border-left-color: var(--color-accent-primary); }
.profile-activity-item--achievement { border-left-color: var(--color-accent-warning); }
.profile-activity-item--level-up { border-left-color: var(--color-accent-secondary); }
.profile-activity-item--combat { border-left-color: var(--color-accent-error); }

.profile-activity-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.profile-activity-item__content {
  flex: 1;
  min-width: 0;
}

.profile-activity-item__title {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.profile-activity-item__detail {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.profile-activity-item__time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding: 4px 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

/*
 * Profile — Friends grid
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Friends Grid
   ========================================== */

.profile-friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--profile-spacing-md);
}

.profile-friend-card {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-md);
  padding: var(--profile-spacing-md);
  background: var(--color-bg-elevated);
  border-radius: var(--profile-card-radius);
  border: 1px solid var(--color-border-default);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
}

.profile-friend-card:hover {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
}

.profile-friend-card__avatar {
  width: 40px;
  height: 40px;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.profile-friend-card__info {
  flex: 1;
  min-width: 0;
}

.profile-friend-card__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-friend-card__characters {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* ==========================================
   Invite Codes
   ========================================== */

.invite-codes-list {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-md);
}

.invite-code-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-md) var(--profile-spacing-lg);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
}

.invite-code-card:hover {
  border-color: var(--color-accent-primary);
}

.invite-code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--profile-spacing-sm);
}

.invite-code-display {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 3px;
}

.copy-code-btn {
  padding: 6px 14px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color var(--profile-transition), border-color var(--profile-transition);
}

.copy-code-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.invite-code-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-md);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-sm);
}

.invite-code-status {
  font-weight: 600;
}

.status-valid { color: var(--color-accent-secondary); }
.status-used { color: var(--color-text-muted); }

.invite-code-actions {
  display: flex;
  gap: var(--profile-spacing-sm);
  margin-top: var(--profile-spacing-sm);
  padding-top: var(--profile-spacing-sm);
  border-top: 1px solid var(--color-border-default);
}

.action-btn {
  padding: 8px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
}

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

.action-btn--danger {
  color: var(--color-accent-error);
}

.action-btn--danger:hover {
  border-color: var(--color-accent-error);
  color: var(--color-accent-error);
}

/* ==========================================
   Empty States
   ========================================== */

.profile-empty-state {
  text-align: center;
  padding: var(--profile-spacing-xl);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px dashed var(--color-border-default);
  border-radius: var(--profile-card-radius);
}

.profile-empty-state__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--profile-spacing-md);
  opacity: 0.4;
}

.profile-empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: var(--profile-spacing-sm);
}

.profile-empty-state__text {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-bottom: var(--profile-spacing-lg);
  line-height: 1.5;
}

.profile-empty-state__hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--profile-spacing-md);
}

/* Legacy empty state support */
.profile-section--empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-empty {
  text-align: center;
  padding: var(--profile-spacing-xl);
}

.profile-empty__icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--profile-spacing-md);
  opacity: 0.4;
}

.profile-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-md);
}

.profile-container .empty-state {
  text-align: center;
  padding: var(--profile-spacing-lg);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  background: var(--color-bg-tertiary);
  border-radius: var(--profile-card-radius);
}

.empty-icon {
  font-size: 3rem;
  display: block;
  margin-bottom: var(--profile-spacing-md);
  opacity: 0.4;
}

.empty-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--profile-spacing-sm);
}

/* ==========================================
   Buttons / Actions
   ========================================== */

.profile-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--profile-spacing-sm);
  padding: 12px 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
}

.profile-action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.profile-action--primary {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.profile-action--primary:hover {
  background: #7bc5f5;
  border-color: #7bc5f5;
  color: var(--color-bg-primary);
}

.profile-action__icon {
  font-size: 1rem;
}

.profile-action__text {
  font-weight: 600;
}

/* Form button (full width) - scoped to profile-page to prevent style leakage */
.profile-page .btn {
  width: 100%;
  padding: 14px 24px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border: none;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), transform var(--profile-transition);
}

.profile-page .btn:hover {
  background: #7bc5f5;
  transform: translateY(-1px);
}

.profile-page .btn:active {
  transform: translateY(0);
}

.profile-page .btn--warning {
  background: var(--color-accent-warning);
  color: var(--color-bg-primary);
}

.profile-page .btn--warning:hover {
  background: #f0d090;
}

.profile-page .btn--secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

.profile-page .btn--secondary:hover {
  border-color: var(--color-accent-primary);
}

.profile-page .btn--small {
  padding: 8px 16px;
  font-size: 0.75rem;
}

/*
 * Profile — Form fields
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Form Fields
   ========================================== */

.field {
  margin-bottom: var(--profile-spacing-lg);
}

.field label {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--profile-spacing-sm);
  font-weight: 600;
}

.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  transition: border-color var(--profile-transition), box-shadow var(--profile-transition);
}

.field input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.15);
}

.field input::placeholder {
  color: var(--color-text-muted);
}

.actions {
  margin-top: var(--profile-spacing-lg);
}

/* ==========================================
   Section (Legacy Support)
   ========================================== */

.section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-lg);
  margin-bottom: var(--profile-spacing-lg);
}

/* Base section-header from components/_section.css; --warning variant also there */
.profile-container .section-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  margin-bottom: var(--profile-spacing-md);
  padding-bottom: var(--profile-spacing-md);
  border-bottom: 1px solid var(--color-border-default);
}

/* Profile Section (Panel styles) */
.profile-section {
  background: var(--color-bg-elevated);
  border-radius: 6px;
  padding: var(--profile-spacing-md);
  margin-bottom: var(--profile-spacing-md);
}

.profile-section__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-sm);
}

/* Stats Grid (Panel version) */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--profile-spacing-sm);
}

.profile-stat {
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  padding: var(--profile-spacing-sm);
  text-align: center;
}

.profile-stat--highlight {
  border: 1px solid var(--color-accent-warning);
  background: rgba(229, 192, 123, 0.08);
}

.profile-stat__value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

.profile-stat--highlight .profile-stat__value {
  color: var(--color-accent-warning);
}

.profile-stat__label {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ==========================================
   Token Usage (Settings tab)
   ========================================== */

.token-usage {
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  padding: var(--profile-spacing-md);
}

.token-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--profile-spacing-md);
  font-size: 0.875rem;
}

.tokens-used {
  color: var(--color-text-primary);
}

.intent-breakdown {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--profile-spacing-md);
}

.intent-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(var(--color-border-default-rgb, 64, 64, 64), 0.3);
}

.intent-row:last-child {
  border-bottom: none;
}

.intent-name {
  color: var(--color-text-secondary);
}

.intent-stats {
  color: var(--color-text-muted);
}

/* ==========================================
   Typography Settings
   ========================================== */

.typography-settings {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-lg);
}

.setting-group {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-sm);
}

.setting-group--themes .theme-category {
  margin-bottom: var(--profile-spacing-md);
}

.theme-category__label {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--profile-spacing-sm);
}

.setting-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.setting-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-sm);
}

.setting-buttons--wrap {
  flex-wrap: wrap;
}

.setting-btn {
  padding: 10px 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
}

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

.setting-btn.active {
  border-color: var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-accent-primary);
}

.setting-btn--wide {
  flex: 1;
  min-width: 140px;
}

.setting-btn__size {
  font-weight: 700;
}

.setting-btn__preview {
  font-size: 1.1rem;
}

.setting-btn__icon svg {
  display: block;
}

.color-pickers-grid {
  display: flex;
  gap: var(--profile-spacing-lg);
  flex-wrap: wrap;
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-xs);
}

.color-picker-item label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: none;
  font-weight: normal;
}

.color-picker-item input[type="color"] {
  width: 56px;
  height: 36px;
  padding: 2px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  cursor: pointer;
}

.reset-colors-btn {
  margin-top: var(--profile-spacing-sm);
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  cursor: pointer;
  align-self: flex-start;
  transition: color var(--profile-transition), border-color var(--profile-transition);
}

.reset-colors-btn:hover {
  border-color: var(--color-accent-error);
  color: var(--color-accent-error);
}

/*
 * Profile — Linked accounts
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Linked Accounts
   ========================================== */

.linked-accounts {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-md);
}

.linked-account {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--profile-spacing-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
}

.linked-account:hover {
  border-color: var(--color-border-active);
}

.linked-account--connected {
  border-color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 5%, var(--color-bg-tertiary));
}

.linked-account__info {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-md);
}

.linked-account__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-elevated);
  border-radius: 8px;
  color: var(--color-text-secondary);
}

.linked-account--connected .linked-account__icon {
  color: var(--color-accent-success);
}

.linked-account__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.linked-account__provider {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.linked-account__username {
  font-size: 0.8rem;
  color: var(--color-accent-success);
}

.linked-account__status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.linked-account__actions {
  display: flex;
  gap: var(--profile-spacing-sm);
}

.linked-account__unavailable {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================
   Play Style Settings
   ========================================== */

.play-style-settings {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-lg);
}

.play-style-loading {
  padding: var(--profile-spacing-xl);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

.play-style-error {
  padding: var(--profile-spacing-md);
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  border-radius: 6px;
  color: var(--color-accent-error);
  text-align: center;
}

.play-style-error button {
  margin-top: var(--profile-spacing-sm);
  padding: 8px 16px;
  background: var(--color-accent-error);
  color: var(--color-bg-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font-mono);
}

.play-style-group {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-md);
}

.play-style-header {
  margin-bottom: var(--profile-spacing-md);
}

.play-style-header .setting-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.play-style-description {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.play-style-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-sm);
}

.play-style-options .setting-btn {
  padding: 8px 16px;
  position: relative;
}

.play-style-options .setting-btn.saving {
  opacity: 0.7;
  pointer-events: none;
}

.play-style-options .setting-btn.saving::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid transparent;
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.play-style-options .setting-btn.error {
  border-color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.1);
}

.saved-feedback {
  display: inline-block;
  margin-left: var(--profile-spacing-xs);
  color: var(--color-accent-secondary);
  font-weight: 600;
  animation: savedPop 0.3s ease;
}

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

.play-style-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--profile-spacing-md);
  padding-top: var(--profile-spacing-md);
  border-top: 1px solid var(--color-border-default);
}

/* ==========================================
   Archetype Scores
   ========================================== */

.archetype-scores {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-md);
}

.archetype-score {
  background: var(--color-bg-elevated);
  border-radius: var(--profile-card-radius);
  padding: var(--profile-spacing-md);
  border: 1px solid var(--color-border-default);
  transition: background var(--profile-transition), color var(--profile-transition), border-color var(--profile-transition);
}

.archetype-score:hover {
  border-color: var(--color-border-default);
  background: var(--color-bg-tertiary);
}

.archetype-score--primary {
  border-color: var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.05);
}

.archetype-score--primary:hover {
  border-color: var(--color-accent-primary);
}

.archetype-score__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--profile-spacing-sm);
}

.archetype-score__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.archetype-score--primary .archetype-score__name {
  color: var(--color-accent-primary);
}

.archetype-score__value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.archetype-score--primary .archetype-score__value {
  color: var(--color-accent-primary);
}

.archetype-score__bar {
  height: 8px;
  background: var(--color-bg-primary);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--profile-spacing-sm);
}

.archetype-score__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
  background: var(--color-text-muted);
}

.archetype-score--primary .archetype-score__fill {
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-purple));
}

.archetype-score__hint {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.archetype-insufficient-data {
  padding: var(--profile-spacing-xl);
  text-align: center;
  background: var(--color-bg-elevated);
  border-radius: var(--profile-card-radius);
  border: 1px dashed var(--color-border-default);
}

.archetype-insufficient-data p {
  color: var(--color-text-muted);
  margin-bottom: var(--profile-spacing-sm);
}

.archetype-insufficient-data__hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.archetype-insufficient-data__icon {
  display: block;
  font-size: 2.5rem;
  margin-bottom: var(--profile-spacing-md);
  opacity: 0.4;
}

/* ==========================================
   Ko-fi Support Button
   ========================================== */

.kofi-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
  padding: 10px 18px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color var(--profile-transition), border-color var(--profile-transition), transform var(--profile-transition);
}

.kofi-btn:hover {
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
  transform: translateY(-1px);
}

.svg-icon {
  display: inline-flex;
}

.svg-icon--16 svg {
  width: 18px;
  height: 18px;
}

/*
 * Profile — Setup welcome
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Setup Welcome & Form Styles
   ========================================== */

.profile-setup-welcome {
  color: var(--color-accent-warning);
  margin-bottom: var(--profile-spacing-lg);
  font-size: 0.875rem;
}

.invite-code-form {
  margin-bottom: var(--profile-spacing-lg);
}

.invite-redeem-form {
  display: flex;
  gap: var(--profile-spacing-sm);
}

.invite-code-input {
  flex: 1;
  padding: 12px 16px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-transform: uppercase;
}

.invite-code-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.15);
}

/* ==========================================
   Footer
   ========================================== */

.return-link {
  text-align: center;
  margin: var(--profile-spacing-xl) 0 var(--profile-spacing-md);
}

.return-link a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--profile-transition);
}

.return-link a:hover {
  color: var(--color-accent-primary);
}

.footer-info {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  padding: var(--profile-spacing-md) 0;
  border-top: 1px solid var(--color-border-default);
}

/* ==========================================
   Guest CTA Box
   ========================================== */

.guest-cta-box {
  border-color: var(--color-accent-warning);
  background: linear-gradient(135deg, var(--color-bg-elevated), rgba(229, 192, 123, 0.05));
}

.guest-cta-box__title {
  color: var(--color-accent-warning);
  font-weight: 600;
  margin-bottom: var(--profile-spacing-sm);
}

.guest-cta-box__section {
  background: var(--color-bg-tertiary);
  padding: var(--profile-spacing-md);
  border-radius: 6px;
  margin-bottom: var(--profile-spacing-sm);
}

.guest-cta-box__section-title {
  font-weight: 700;
  margin-bottom: var(--profile-spacing-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.guest-cta-box__section-title--cyan {
  color: var(--color-accent-primary);
}

.guest-cta-box__section-title--green {
  color: var(--color-accent-secondary);
}

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

/* Tablet breakpoint */
@media (max-width: 768px) {
  .profile-container {
    padding: var(--profile-spacing-md);
  }

  .profile-hero__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .profile-hero__actions {
    flex-direction: column;
  }

  .profile-tab-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }

  .profile-tab-btn__icon {
    display: none;
  }

  .character-grid,
  .profile-campaign-grid,
  .profile-world-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  .profile-title {
    font-size: 1.5rem;
  }

  .profile-hero {
    padding: var(--profile-spacing-md);
  }

  .profile-hero__identity {
    flex-direction: column;
    text-align: center;
  }

  .profile-hero__role {
    justify-content: center;
  }

  .profile-hero__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--profile-spacing-sm);
  }

  .profile-hero__stat {
    padding: var(--profile-spacing-sm);
  }

  .profile-hero__stat-value {
    font-size: 1.25rem;
  }

  .profile-tab-nav {
    padding: var(--profile-spacing-xs);
    gap: var(--profile-spacing-xs);
  }

  .profile-tab-btn {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .profile-friends-grid {
    grid-template-columns: 1fr;
  }

  .play-style-options {
    flex-direction: column;
  }

  .play-style-options .setting-btn {
    width: 100%;
    justify-content: center;
  }

  .setting-buttons {
    flex-direction: column;
  }

  .setting-btn {
    width: 100%;
    justify-content: center;
  }

  .setting-btn--wide {
    min-width: unset;
  }

  .invite-code-header {
    flex-direction: column;
    gap: var(--profile-spacing-sm);
    align-items: flex-start;
  }

  .invite-code-display {
    font-size: 1.1rem;
  }
}

/*
 * Profile — Profile panel (split panel version)
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   Profile Panel (Split Panel Version)
   ==========================================
   Compact, visually engaging profile for split panels.
*/

.profile-panel {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-md, 12px);
  padding: var(--terminal-spacing-md, 12px);
  height: 100%;
  overflow-y: auto;
}

/* Hero Header */
.profile-panel__hero {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-md, 12px);
  padding: var(--terminal-spacing-md, 12px);
  background: linear-gradient(135deg, var(--terminal-bg-elevated, #2a2a2e), var(--terminal-bg-tertiary, #1e1e22));
  border-radius: 10px;
  border: 1px solid var(--terminal-border, #3a3a3e);
}

.profile-panel__avatar {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--terminal-cyan, #00d4ff), var(--terminal-purple, #a78bfa));
  border-radius: 10px;
  flex-shrink: 0;
}

.profile-panel__avatar-icon {
  display: flex;
  color: var(--terminal-bg-primary, #1a1a1e);
}

.profile-panel__avatar-icon svg {
  width: 24px;
  height: 24px;
}

.profile-panel__avatar-glow {
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--terminal-yellow, #fbbf24), var(--terminal-purple, #a78bfa));
  border-radius: 6px;
  z-index: -1;
  opacity: 0.6;
  animation: profile-glow 2s ease-in-out infinite alternate;
}

@keyframes profile-glow {
  from { opacity: 0.4; transform: scale(1); }
  to { opacity: 0.7; transform: scale(1.05); }
}

.profile-panel__identity {
  flex: 1;
  min-width: 0;
}

.profile-panel__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--terminal-text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-panel__badges {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.profile-panel__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-panel__badge--player {
  background: rgba(0, 212, 255, 0.15);
  color: var(--terminal-cyan, #00d4ff);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.profile-panel__badge--admin {
  background: rgba(251, 191, 36, 0.15);
  color: var(--terminal-yellow, #fbbf24);
  border: 1px solid rgba(251, 191, 36, 0.3);
}

/* Stats Row */
.profile-panel__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.profile-panel__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--terminal-bg-elevated, #2a2a2e);
  border: 1px solid var(--terminal-border, #3a3a3e);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.profile-panel__stat:hover {
  border-color: var(--terminal-cyan, #00d4ff);
  transform: translateY(-1px);
}

.profile-panel__stat--highlight {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));
  border-color: rgba(251, 191, 36, 0.3);
}

.profile-panel__stat--highlight:hover {
  border-color: var(--terminal-yellow, #fbbf24);
}

.profile-panel__stat-icon {
  display: flex;
  margin-bottom: 4px;
  color: var(--terminal-text-muted, #888);
}

.profile-panel__stat-icon svg {
  width: 16px;
  height: 16px;
}

.profile-panel__stat--highlight .profile-panel__stat-icon {
  color: var(--terminal-yellow, #fbbf24);
}

.profile-panel__stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--terminal-cyan, #00d4ff);
  line-height: 1;
}

.profile-panel__stat--highlight .profile-panel__stat-value {
  color: var(--terminal-yellow, #fbbf24);
}

.profile-panel__stat-label {
  font-size: 0.65rem;
  color: var(--terminal-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Token Usage */
.profile-panel__tokens {
  padding: 10px 12px;
  background: var(--terminal-bg-elevated, #2a2a2e);
  border: 1px solid var(--terminal-border, #3a3a3e);
  border-radius: 6px;
}

.profile-panel__tokens-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.profile-panel__tokens-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terminal-text-muted, #888);
}

.profile-panel__tokens-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--terminal-text-secondary, #888);
}

.profile-panel__tokens-bar {
  height: 6px;
  background: var(--terminal-bg-primary, #1a1a1e);
  border-radius: 3px;
  overflow: hidden;
}

.profile-panel__tokens-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.profile-panel__tokens-fill--ok {
  background: linear-gradient(90deg, var(--terminal-green, #4ade80), var(--terminal-cyan, #00d4ff));
}

.profile-panel__tokens-fill--warning {
  background: linear-gradient(90deg, var(--terminal-yellow, #fbbf24), var(--terminal-yellow, #fbbf24));
}

.profile-panel__tokens-fill--danger {
  background: linear-gradient(90deg, var(--terminal-red, #ef4444), var(--terminal-yellow, #fbbf24));
}

.profile-panel__tokens-counts {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--terminal-text-muted, #888);
}

/* Recent Heroes */
.profile-panel__recent {
  background: var(--terminal-bg-elevated, #2a2a2e);
  border: 1px solid var(--terminal-border, #3a3a3e);
  border-radius: 6px;
  overflow: hidden;
}

.profile-panel__recent-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--terminal-bg-tertiary, #1e1e22);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terminal-text-muted, #888);
}

.profile-panel__recent-count {
  background: var(--terminal-bg-primary, #1a1a1e);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  color: var(--terminal-cyan, #00d4ff);
}

.profile-panel__recent-list {
  display: flex;
  flex-direction: column;
}

.profile-panel__char {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--terminal-border, #3a3a3e);
  transition: background 0.15s ease;
}

.profile-panel__char:first-child {
  border-top: none;
}

.profile-panel__char:hover {
  background: var(--terminal-bg-tertiary, #1e1e22);
}

.profile-panel__char-level {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  background: linear-gradient(135deg, var(--terminal-purple, #a78bfa), var(--terminal-cyan, #00d4ff));
  color: var(--terminal-bg-primary, #1a1a1e);
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
}

.profile-panel__char-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terminal-text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-panel__char-class {
  font-size: 0.75rem;
  color: var(--terminal-text-muted, #888);
}

/* Actions */
.profile-panel__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.profile-panel__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--terminal-bg-elevated, #2a2a2e);
  border: 1px solid var(--terminal-border, #3a3a3e);
  border-radius: 6px;
  color: var(--terminal-text-secondary, #888);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-family: inherit;
}

.profile-panel__action svg {
  width: 16px;
  height: 16px;
}

.profile-panel__action:hover {
  background: var(--terminal-bg-tertiary, #1e1e22);
  border-color: var(--terminal-cyan, #00d4ff);
  color: var(--terminal-text-primary, #e0e0e0);
  transform: translateY(-1px);
}

.profile-panel__action--primary {
  background: linear-gradient(135deg, var(--terminal-cyan, #00d4ff), var(--terminal-purple, #a78bfa));
  border-color: transparent;
  color: var(--terminal-bg-primary, #1a1a1e);
  font-weight: 600;
}

.profile-panel__action--primary:hover {
  opacity: 0.9;
  color: var(--terminal-bg-primary, #1a1a1e);
}

/* Empty State */
.profile-panel__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
}

.profile-panel__empty-icon {
  display: flex;
  margin-bottom: 16px;
  opacity: 0.4;
}

.profile-panel__empty-icon svg {
  width: 48px;
  height: 48px;
}

.profile-panel__empty-text {
  color: var(--terminal-text-muted, #888);
  margin-bottom: 16px;
  font-size: 0.9rem;
}

/*
 * Profile — GDPR data export and account deletion
 * Extracted for maintainability (#2783).
 */

/* ==========================================
   GDPR Data Export Section
   ========================================== */

.gdpr-export {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-lg);
}

.gdpr-export__info {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-md);
}

.gdpr-export__description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.gdpr-export__includes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-xs);
}

.gdpr-export__includes li {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  padding-left: var(--profile-spacing-md);
  position: relative;
}

.gdpr-export__includes li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: var(--color-accent-primary);
  font-weight: 600;
}

.gdpr-export__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--profile-spacing-sm);
}

.btn--gdpr {
  min-width: 200px;
  font-weight: 600;
  transition: color var(--profile-transition), opacity var(--profile-transition), transform var(--profile-transition), box-shadow var(--profile-transition);
}

.btn--gdpr:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(97, 175, 239, 0.3);
}

.btn--gdpr:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gdpr-export__rate-limit {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-xs);
  margin: 0;
}

.gdpr-export__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent-warning);
}

/* ==========================================
   Account Deletion (Danger Zone)
   GDPR Article 17: Right to Erasure
   ========================================== */

.profile-tab-section--danger {
  border-color: var(--color-danger, #ef4444);
}

.profile-tab-section--danger .profile-tab-section__header {
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

.profile-tab-section__title--danger {
  color: var(--color-danger, #ef4444);
}

.profile-tab-section__title--danger .profile-tab-section__title-icon {
  color: var(--color-danger, #ef4444);
}

.account-deletion {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-lg);
}

.account-deletion__warning {
  display: flex;
  gap: var(--profile-spacing-md);
  padding: var(--profile-spacing-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--profile-card-radius);
}

.account-deletion__warning-icon {
  flex-shrink: 0;
  color: var(--color-danger, #ef4444);
}

.account-deletion__warning-icon svg {
  width: 24px;
  height: 24px;
}

.account-deletion__warning-content {
  flex: 1;
}

.account-deletion__warning-title {
  margin: 0 0 var(--profile-spacing-sm) 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-danger, #ef4444);
}

.account-deletion__warning-text {
  margin: 0 0 var(--profile-spacing-sm) 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.account-deletion__effects {
  margin: 0;
  padding-left: var(--profile-spacing-lg);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  list-style: disc;
}

.account-deletion__effects li {
  margin-bottom: var(--profile-spacing-xs);
}

.account-deletion__form {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-md);
}

.account-deletion__confirmation {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-sm);
}

.account-deletion__label {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.account-deletion__label code {
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  color: var(--color-danger, #ef4444);
}

.account-deletion__input {
  width: 100%;
  max-width: 300px;
  padding: var(--profile-spacing-sm) var(--profile-spacing-md);
  background: var(--color-bg-input, rgba(0, 0, 0, 0.2));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--profile-card-radius);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  transition: border-color var(--profile-transition);
}

.account-deletion__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.account-deletion__input--valid {
  border-color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.account-deletion__input--invalid {
  border-color: var(--color-warning, #f59e0b);
}

.account-deletion__options {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-sm);
}

.account-deletion__checkbox {
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.account-deletion__checkbox input[type="checkbox"] {
  accent-color: var(--color-accent-primary);
}

.account-deletion__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--profile-spacing-sm);
  padding-top: var(--profile-spacing-md);
  border-top: 1px solid var(--color-border-subtle);
}

.btn--danger {
  background: var(--color-danger, #ef4444);
  color: white;
  border: none;
  padding: var(--profile-spacing-sm) var(--profile-spacing-lg);
  border-radius: var(--profile-card-radius);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--profile-transition), color var(--profile-transition), opacity var(--profile-transition), transform var(--profile-transition);
}

.btn--danger:hover:not(:disabled) {
  background: #dc2626;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.account-deletion__help {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: 0;
}

.account-deletion__help a {
  color: var(--color-accent-primary);
  text-decoration: none;
}

.account-deletion__help a:hover {
  text-decoration: underline;
}
/**
 * Profile — Import Hub
 * =====================
 * Hero section, cards, stats, social, settings, responsive, danger zone.
 *
 * Decomposed into focused files under profile/ for maintainability (#2783).









 */
/*
 * Profile Calendar Tab
 * --------------------
 * Styles for app/views/profile/tabs/_calendar.html.erb
 * Extracted from inline <style> block (#3989) — verbatim move,
 * no token substitution. Token migration is a follow-up task.
 */

  .profile-calendar-links {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
  }

  .calendar-link-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .calendar-link-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
  }

  .calendar-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s;
  }

  .calendar-link-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
  }

  .calendar-link-icon {
    font-size: 12px;
  }

  .calendar-link-campaign {
    font-size: 11px;
    padding: 3px 8px;
  }

  .calendar-link-more {
    font-size: 11px;
    color: var(--text-muted);
  }

  .profile-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .profile-session-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 6px;
    border-left: 3px solid var(--accent-primary);
  }

  .profile-session-link {
    color: var(--text-primary);
    text-decoration: none;
  }

  .profile-session-link:hover {
    color: var(--accent-primary);
  }

  .event-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .event-status-draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }

  .event-status-ready {
    background: rgba(var(--accent-success-rgb, 34, 197, 94), 0.15);
    color: var(--accent-success, #22c55e);
  }

  .event-status-in_progress {
    background: rgba(var(--accent-warning-rgb, 234, 179, 8), 0.15);
    color: var(--accent-warning, #eab308);
  }

  .profile-calendar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
  }

  @media (max-width: 768px) {
    .profile-calendar-layout {
      grid-template-columns: 1fr;
    }
  }

  .profile-calendar__mini {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
  }

  .mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .mini-cal-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
  }

  .mini-cal-nav:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .mini-cal-month {
    font-weight: 500;
    font-size: 14px;
  }

  .mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
  }

  .mini-cal-weekday {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px;
  }

  .mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .mini-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: default;
  }

  .mini-cal-day.other-month {
    color: var(--text-muted);
  }

  .mini-cal-day.today {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
  }

  .mini-cal-day.has-event {
    position: relative;
  }

  .mini-cal-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--accent-warning);
    border-radius: 50%;
  }

  .profile-calendar__events {
    min-width: 0;
  }

  .events-section-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
  }

  .profile-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .profile-event-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border-left: 3px solid;
  }

  .profile-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
  }

  .event-day {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
  }

  .event-month {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
  }

  .profile-event-details {
    flex: 1;
    min-width: 0;
  }

  .profile-event-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .profile-event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
  }

  .event-type-badge {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .event-campaign-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
  }

  .profile-event-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
  }

  .profile-no-events {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 13px;
  }

  .profile-no-events-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
  }

  .announcements-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .announcements-header .events-section-title {
    flex: 1;
    margin-bottom: 0;
  }

  .announcements-view-all {
    font-size: 11px;
    color: var(--accent-primary);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 8px;
  }

  .announcements-view-all:hover {
    text-decoration: underline;
  }

  .profile-announcements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .profile-announcement-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
  }

  .profile-announcement-item:hover {
    background: var(--bg-elevated);
  }

  .announcement-date {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
  }

  .announcement-content {
    flex: 1;
    min-width: 0;
  }

  .announcement-title {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
  }

  .announcement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }

  .announcement-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
  }

  .announcement-tag .announcement-tag-icon {
    display: inline-flex;
    width: 10px;
    height: 10px;
  }

  .announcement-tag .announcement-tag-icon svg {
    width: 10px;
    height: 10px;
  }

  .announcement-summary {
    font-size: 12px;
    color: var(--text-secondary);
  }

  .announcement-full {
    display: none;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .announcement-full strong {
    color: var(--text-primary);
  }

  .announcement-full code {
    background: var(--bg-primary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
  }

  .announcement-expand-icon {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform 0.15s;
    align-self: center;
  }

  .profile-announcement-item.expanded .announcement-summary {
    display: none;
  }

  .profile-announcement-item.expanded .announcement-full {
    display: block;
  }

  .profile-announcement-item.expanded .announcement-expand-icon {
    transform: rotate(90deg);
  }
/**
 * Quest Log Panel — Base Layout, Stats, List & Quest Sections
 */

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

.quest-log {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-bg-primary);
}

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

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

.quest-log__icon {
  font-size: var(--font-size-base);
}

.quest-log__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.quest-log__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Quest Stats Summary
 * ======================================== */

.quest-log__stats {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.quest-log__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
}

.quest-log__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.quest-log__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.quest-log__stat--active .quest-log__stat-value {
  color: var(--color-accent-secondary);
}

.quest-log__stat--completed .quest-log__stat-value {
  color: var(--color-gold);
}

/* ========================================
 * Quest List
 * ======================================== */

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

.quest-log__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Quest Sections
 * ======================================== */

.quest-log__section {
  margin-bottom: var(--space-4);
}

.quest-log__section:last-child {
  margin-bottom: 0;
}

.quest-log__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: 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);
}

.quest-log__section-count {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}
/**
 * Quest Log Panel — Quest Cards, Status Variants, Badges, Objectives & Rewards
 */

/* ========================================
 * Quest Card
 * ======================================== */

.quest-card {
  display: flex;
  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-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-fast);
}

.quest-card:hover {
  background: var(--color-bg-tertiary);
  transform: translateY(-1px);
}

.quest-card:active {
  transform: translateY(0);
}

/* ========================================
 * Quest Status Variants
 * ======================================== */

/* Active Quest */
.quest-card--active {
  border-left: 3px solid var(--color-accent-secondary);
}

.quest-card--active:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--shadow-glow-success);
}

/* Completed Quest */
.quest-card--completed {
  border-left: 3px solid var(--color-gold);
  opacity: 0.85;
}

.quest-card--completed:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-glow-gold);
  opacity: 1;
}

/* Failed Quest */
.quest-card--failed {
  border-left: 3px solid var(--color-accent-error);
  opacity: 0.7;
}

.quest-card--failed:hover {
  border-color: var(--color-accent-error);
  box-shadow: var(--shadow-glow-error);
  opacity: 0.85;
}

/* Available Quest (not yet accepted) */
.quest-card--available {
  border-left: 3px solid var(--color-accent-primary);
  border-style: dashed;
  border-left-style: solid;
}

.quest-card--available:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

/* Main Quest */
.quest-card--main {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    var(--color-bg-secondary) 100%
  );
}

/* ========================================
 * Quest Header
 * ======================================== */

.quest-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.quest-card__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0;
}

.quest-card--completed .quest-card__title {
  text-decoration: line-through;
  color: var(--color-text-secondary);
}

/* ========================================
 * Quest Status Badge
 * ======================================== */

.quest-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.quest-status-badge--active {
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 40%, transparent);
  color: var(--color-accent-secondary);
}

.quest-status-badge--completed {
  background: color-mix(in srgb, var(--color-gold) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-gold) 40%, transparent);
  color: var(--color-gold);
}

.quest-status-badge--completed::before {
  content: '✓';
  font-weight: bold;
}

.quest-status-badge--failed {
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 40%, transparent);
  color: var(--color-accent-error);
}

.quest-status-badge--failed::before {
  content: '✗';
  font-weight: bold;
}

.quest-status-badge--available {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
  color: var(--color-accent-primary);
}

/* ========================================
 * Quest Type Badge
 * ======================================== */

.quest-type-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quest-type-badge--main {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(184, 134, 11, 0.25) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.4);
  color: var(--color-gold);
}

.quest-type-badge--side {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ========================================
 * Quest Description
 * ======================================== */

.quest-card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ========================================
 * Quest Progress
 * ======================================== */

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

.quest-card__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
}

.quest-card__progress-label {
  color: var(--color-text-muted);
}

.quest-card__progress-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.quest-card__progress-bar {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.quest-card__progress-fill {
  height: 100%;
  background: var(--color-accent-secondary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.quest-card--completed .quest-card__progress-fill {
  background: var(--color-gold);
}

/* ========================================
 * Quest Objectives
 * ======================================== */

.quest-card__objectives {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.quest-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.quest-objective__check {
  width: 18px;
  height: 18px;
  min-width: 18px;
  border-radius: 4px;
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* Hover state for interactive checkboxes */
.quest-objective:hover .quest-objective__check {
  border-color: var(--color-accent-secondary);
}

.quest-objective--completed .quest-objective__check {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
  color: var(--color-bg-primary);
}

.quest-objective--completed .quest-objective__check::before {
  content: '✓';
  font-weight: bold;
}

.quest-objective__text {
  flex: 1;
}

.quest-objective--completed .quest-objective__text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* Optional objective indicator */
.quest-objective--optional {
  opacity: 0.8;
}

.quest-objective--optional .quest-objective__text::after {
  content: ' (Optional)';
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-muted);
}

/* ========================================
 * Quest Rewards
 * ======================================== */

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

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

/* Styled reward icons (replace emoji for consistency) */
.quest-reward--gold {
  color: var(--color-gold);
}

.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%;
  margin-right: var(--space-1);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.quest-reward--xp {
  color: var(--color-accent-primary);
}

.quest-reward--xp::before {
  content: '★';
  font-size: 0.9em;
  margin-right: var(--space-1);
}

.quest-reward--item {
  color: var(--color-accent-warning);
}

.quest-reward--item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
  margin-right: var(--space-1);
}

/* ========================================
 * Quest Giver
 * ======================================== */

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

/* Styled person icon (replaces emoji) */
.quest-card__giver::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: currentColor;
  -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 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%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 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}
/**
 * Quest Log Interactions — Base and Cards
 * =========================================
 * Quest card interactions, accordion expand/collapse, and status transitions.
 */

/**
 * Quest Log Panel — Filtering, Animations, Discovery Levels, Inquiry & Responsive
 */

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

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

  .quest-log__content {
    padding: var(--space-2);
  }

  .quest-card {
    padding: var(--space-2);
  }

  .quest-log__stats {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

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

/* ========================================
 * Tracked/Pinned Quest Indicator
 * ======================================== */

.quest-card--tracked {
  position: relative;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.quest-card--tracked::before {
  content: '';
  position: absolute;
  top: -1px;
  right: var(--space-3);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--color-accent-primary);
}

.quest-track-btn {
  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);
}

.quest-track-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.quest-track-btn--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* ========================================
 * Urgency/Time-Sensitive Indicators
 * ======================================== */

.quest-card--urgent {
  border-left-color: var(--color-accent-error);
  animation: quest-urgent-pulse 2s ease-in-out infinite;
}

@keyframes quest-urgent-pulse {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-error) 40%, transparent); }
}

.quest-card__urgency {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, var(--color-accent-error) 15%, var(--color-bg-secondary));
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-accent-error);
  margin-top: var(--space-2);
}

.quest-card__urgency-icon {
  font-size: 0.9em;
}

/* ========================================
 * Quest Filtering
 * ======================================== */

.quest-log__filters {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

.quest-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.quest-filter-btn--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.quest-filter-btn__count {
  padding: 0 var(--space-1);
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-radius: var(--radius-pill);
  font-size: 0.85em;
}

/* ========================================
 * Loading States
 * ======================================== */

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

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

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

/* ========================================
 * Quest Update Animation
 * ======================================== */

.quest-card--updated {
  animation: quest-update 0.5s ease-out;
}

@keyframes quest-update {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); background: color-mix(in srgb, var(--color-accent-secondary) 15%, var(--color-bg-secondary)); }
  100% { transform: scale(1); }
}

.quest-objective--just-completed {
  animation: objective-complete 0.4s ease-out;
}

@keyframes objective-complete {
  0% { background: transparent; }
  50% { background: color-mix(in srgb, var(--color-accent-secondary) 20%, transparent); }
  100% { background: transparent; }
}

/* ========================================
 * Expanded Quest View
 * ======================================== */

.quest-card--expanded {
  background: var(--color-bg-tertiary);
}

.quest-card__expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.quest-card__expand-btn:hover {
  color: var(--color-text-primary);
}

.quest-card__expand-icon {
  transition: transform var(--transition-fast);
}

.quest-card--expanded .quest-card__expand-icon {
  transform: rotate(180deg);
}

/* ========================================
/**
 * Quest Log Interactions — Discovery Levels
 * ============================================
 * Discovery level indicators (minimal/moderate/full) and source badges.
 */

 * Discovery Level Indicators
 * Visual distinction for quest knowledge level
 * ======================================== */

/* Minimal Discovery - Mysterious/Foggy rumor */
.quest-card--discovery-minimal {
  position: relative;
  border-left: 3px solid var(--color-text-muted);
  border-style: dashed;
  opacity: 0.85;
}

.quest-card--discovery-minimal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(100, 100, 100, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
  border-radius: inherit;
}

.quest-card--discovery-minimal .quest-card__title {
  font-style: italic;
  color: var(--color-text-secondary);
}

.quest-card--discovery-minimal .quest-card__description {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Moderate Discovery - Partially revealed */
.quest-card--discovery-moderate {
  border-left: 3px solid var(--color-accent-warning);
}

.quest-card--discovery-moderate .quest-card__description {
  position: relative;
}

.quest-card--discovery-moderate .quest-card__description::after {
  content: '...';
  color: var(--color-text-muted);
  font-style: italic;
}

/* Full Discovery - Complete information */
.quest-card--discovery-full {
  border-left: 3px solid var(--color-accent-secondary);
}

/* Discovery Badge */
.quest-discovery-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quest-discovery-badge--minimal {
  background: color-mix(in srgb, var(--color-text-muted) 15%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);
  color: var(--color-text-muted);
}

.quest-discovery-badge--minimal::before {
  content: '?';
  font-weight: bold;
}

.quest-discovery-badge--moderate {
  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);
  color: var(--color-accent-warning);
}

.quest-discovery-badge--moderate::before {
  content: '~';
  font-weight: bold;
}

.quest-discovery-badge--full {
  background: color-mix(in srgb, var(--color-accent-secondary) 15%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
  color: var(--color-accent-secondary);
}

.quest-discovery-badge--full::before {
  content: '✓';
  font-weight: bold;
}

/* Quest Source Indicator */
.quest-source-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.quest-source-badge--rumor {
  color: var(--color-accent-warning);
}

.quest-source-badge--notice_board {
  color: var(--color-accent-primary);
}

.quest-source-badge--npc_hint {
  color: var(--color-accent-secondary);
}

.quest-source-badge--direct_offer {
  color: var(--color-gold);
}

.quest-source-badge--investigation {
  color: var(--color-accent-info);
}
/**
 * Quest Log Interactions — Inquiry and Actions
 * ===============================================
 * Quest inquiry status tracking and action button states.
 */


/* ========================================
 * Quest Inquiry Status
 * Player-side inquiry tracking
 * ======================================== */

.quest-inquiry {
  display: flex;
  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-md);
  border-left: 3px solid var(--color-border-default);
}

.quest-inquiry--pending {
  border-left-color: var(--color-accent-warning);
}

.quest-inquiry--accepted {
  border-left-color: var(--color-accent-secondary);
  background: color-mix(in srgb, var(--color-accent-secondary) 5%, var(--color-bg-secondary));
}

.quest-inquiry--declined {
  border-left-color: var(--color-accent-error);
  opacity: 0.75;
}

.quest-inquiry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.quest-inquiry__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.quest-inquiry__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.quest-inquiry__status--pending {
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-primary));
  color: var(--color-accent-warning);
}

.quest-inquiry__status--accepted {
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-primary));
  color: var(--color-accent-secondary);
}

.quest-inquiry__status--declined {
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-primary));
  color: var(--color-accent-error);
}

.quest-inquiry__character {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.quest-inquiry__message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.quest-inquiry__response {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent-primary);
}

.quest-inquiry__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.quest-inquiry__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

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

@media (prefers-reduced-motion: reduce) {
  .quest-card {
    transition: none;
  }

  .quest-card:hover {
    transform: none;
  }

  .quest-card__progress-fill {
    transition: none;
  }

  .quest-card--urgent {
    animation: none;
  }

  .quest-log__skeleton {
    animation: none;
  }

  .quest-card--updated,
  .quest-objective--just-completed {
    animation: none;
  }
}
/**
 * Quest Log Interactions — Import Hub
 * ======================================
 * Quest card interactions, discovery levels, source badges, and inquiry tracking.
 *
 * Decomposed into focused files under interactions/ for maintainability.



 */
/**
 * Quest Log Panel — Import Hub
 * ==============================
 * Displays character quests with status badges and progress.
 *
 * Decomposed into focused files under quest_log/ for maintainability (#2783).



 */
/* ========================================
 * Roll Prompt Card
 * ========================================
 * Interactive inline card for roll requests from AI DM.
 * Appears in narrative with countdown timer.
 */

/* Roll Prompt Card - Inline in narrative */
.roll-prompt {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg,
    rgba(30, 30, 40, 0.95) 0%,
    rgba(20, 20, 30, 0.98) 100%);
  border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:
    0 4px 20px var(--overlay-medium),
    0 0 30px color-mix(in srgb, var(--color-gold) 10%, transparent),
    inset 0 1px 0 var(--overlay-white-subtle);
  animation: rollPromptSlideIn 0.3s ease-out;
}

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

.roll-prompt--resolved {
  animation: rollPromptFadeOut 0.3s ease-out forwards;
}

@keyframes rollPromptFadeOut {
  to {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
}

/* Header with check type and countdown */
.roll-prompt__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.roll-prompt__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-prompt__countdown {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Reason text */
.roll-prompt__reason {
  font-style: italic;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
  border-left: 2px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
}

/* Progress bar */
.roll-prompt__progress-container {
  height: 6px;
  background: var(--overlay-white-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.roll-prompt__progress {
  height: 100%;
  transition: width 1s linear, background-color 0.5s ease;
  border-radius: 3px;
}

.roll-prompt__progress--ok {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.roll-prompt__progress--warning {
  background: linear-gradient(90deg, #eab308, #facc15);
}

.roll-prompt__progress--danger {
  background: linear-gradient(90deg, #ef4444, #f87171);
  animation: dangerPulse 0.5s ease-in-out infinite;
}

@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Action buttons */
.roll-prompt__actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.roll-prompt__btn {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.roll-prompt__btn--roll {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-gold) 20%, transparent) 0%, color-mix(in srgb, var(--color-gold) 10%, transparent) 100%);
  border: 2px solid color-mix(in srgb, var(--color-gold) 50%, transparent);
  color: var(--color-gold);
  animation: rollBtnPulse 2s ease-in-out infinite;
}

@keyframes rollBtnPulse {
  0%, 100% {
    box-shadow: 0 0 10px color-mix(in srgb, var(--color-gold) 30%, transparent);
  }
  50% {
    box-shadow: 0 0 20px color-mix(in srgb, var(--color-gold) 50%, transparent), 0 0 30px color-mix(in srgb, var(--color-gold) 20%, transparent);
  }
}

.roll-prompt__btn--roll:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-gold) 30%, transparent) 0%, color-mix(in srgb, var(--color-gold) 20%, transparent) 100%);
  border-color: color-mix(in srgb, var(--color-gold) 80%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-gold) 30%, transparent);
}

.roll-prompt__btn--roll:active {
  transform: translateY(0);
}

.roll-prompt__btn--describe {
  background: rgba(100, 100, 120, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-text-secondary);
}

.roll-prompt__btn--describe:hover {
  background: rgba(100, 100, 120, 0.5);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.roll-prompt__btn--describe:active {
  transform: translateY(0);
}

/* Hint text */
.roll-prompt__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.roll-prompt__hint-icon {
  color: var(--color-gold);
  margin-right: var(--space-1);
}

/* Input lock styling */
.terminal-input--locked {
  opacity: 0.5;
  pointer-events: none;
}

.terminal-input--locked::placeholder {
  color: var(--color-text-muted);
}

/* Advantage/Disadvantage indicators */
.roll-prompt__advantage {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
}

.roll-prompt__disadvantage {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: var(--space-2);
}

/* Responsive */
@media (max-width: 640px) {
  .roll-prompt {
    padding: var(--space-3);
  }

  .roll-prompt__actions {
    flex-direction: column;
    gap: var(--space-2);
  }

  .roll-prompt__btn {
    width: 100%;
  }

  .roll-prompt__title {
    font-size: var(--font-size-base);
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .roll-prompt {
    animation: none;
  }

  .roll-prompt--resolved {
    animation: none;
    opacity: 0;
  }

  .roll-prompt__progress {
    transition: width 0.1s linear;
  }

  .roll-prompt__btn--roll {
    animation: none;
  }

  .roll-prompt__progress--danger {
    animation: none;
  }
}
/*
 * Room Tab Menu Component
 * =======================
 * Battle.net-inspired tab menu for room-specific content switching.
 * Features icon tabs with animated indicator and tooltip labels.
 */

/* Container */
.room-tab-menu {
  --tab-menu-bg: var(--surface-darker, #0a0a0a);
  --tab-menu-border: var(--surface-border, rgba(255, 255, 255, 0.1));
  --tab-inactive: var(--text-muted, rgba(255, 255, 255, 0.5));
  --tab-hover: var(--text-secondary, rgba(255, 255, 255, 0.8));
  --tab-active: var(--accent-gold, #d4af37);
  --tab-indicator: var(--accent-gold, #d4af37);

  position: relative;
  background: var(--tab-menu-bg);
  border-bottom: 1px solid var(--tab-menu-border);
  padding: 0;
  z-index: var(--z-sticky);
}

.room-tab-menu__tabs {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  padding: 0.5rem 0.5rem;
  position: relative;
}

/* Tab Button */
.room-tab-menu__tab {
  --tab-size: 3rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--tab-size);
  height: var(--tab-size);
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  color: var(--tab-inactive);
}

.room-tab-menu__tab:hover {
  color: var(--tab-hover);
  background: rgba(255, 255, 255, 0.05);
}

.room-tab-menu__tab:focus-visible {
  outline: 2px solid var(--tab-active);
  outline-offset: 2px;
}

.room-tab-menu__tab--active {
  color: var(--tab-active);
}

.room-tab-menu__tab--active:hover {
  color: var(--tab-active);
}

/* Tab Icon */
.room-tab-menu__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.2s ease;
}

.room-tab-menu__tab-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.room-tab-menu__tab:hover .room-tab-menu__tab-icon {
  transform: scale(1.05);
}

.room-tab-menu__tab--active .room-tab-menu__tab-icon {
  filter: none;
}

/* Tab Label (text mode) */
.room-tab-menu__tab-label {
  display: none;
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
  white-space: nowrap;
}

.room-tab-menu--text .room-tab-menu__tab-label,
.room-tab-menu--both .room-tab-menu__tab-label {
  display: block;
}

.room-tab-menu--text .room-tab-menu__tab,
.room-tab-menu--both .room-tab-menu__tab {
  --tab-size: auto;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
}

/* Tab Badge */
.room-tab-menu__tab-badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  background: var(--color-danger, #dc3545);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Tab Tooltip */
.room-tab-menu__tab-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  padding: 0.375rem 0.625rem;
  background: var(--surface-elevated, #1a1a1a);
  color: var(--text-primary, #fff);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 0.375rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: var(--z-panel);
}

.room-tab-menu__tab-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface-elevated, #1a1a1a);
}

.room-tab-menu__tab:hover .room-tab-menu__tab-tooltip,
.room-tab-menu__tab:focus-visible .room-tab-menu__tab-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Text mode: hide tooltip since label is visible */
.room-tab-menu--text .room-tab-menu__tab-tooltip,
.room-tab-menu--both .room-tab-menu__tab-tooltip {
  display: none;
}

/* Animated Indicator */
.room-tab-menu__indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--tab-indicator) 20%,
    var(--tab-indicator) 80%,
    transparent
  );
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.room-tab-menu__indicator::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 60%;
  height: 100%;
  background: var(--tab-indicator);
  filter: blur(4px);
  opacity: 0.6;
}

/* =================================
   Tab Content Area
   ================================= */

.room-tab-content {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.room-tab-content__panel {
  position: absolute;
  inset: 0;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.room-tab-content__panel--active {
  position: relative;
  opacity: 1;
  visibility: visible;
}

.room-tab-content__panel[hidden] {
  display: none;
}

/* Loading State */
.room-tab-content__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  color: var(--text-muted);
  gap: 1rem;
}

.room-tab-content__loading .loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--surface-border);
  border-top-color: var(--tab-active);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* =================================
   Battle.net Style Variations
   ================================= */

/* Compact variant */
.room-tab-menu--compact .room-tab-menu__tabs {
  gap: 0;
  padding: 0.25rem 0.5rem;
}

.room-tab-menu--compact .room-tab-menu__tab {
  --tab-size: 2.5rem;
}

.room-tab-menu--compact .room-tab-menu__tab-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Dark variant */
.room-tab-menu--dark {
  --tab-menu-bg: #050505;
  --tab-menu-border: rgba(212, 175, 55, 0.1);
}

/* Accent colors by room */
.room-tab-menu[data-room-tab-menu-room-value="lobby"] {
  --tab-active: var(--accent-gold, #d4af37);
  --tab-indicator: var(--accent-gold, #d4af37);
}

.room-tab-menu[data-room-tab-menu-room-value="character_creation"] {
  --tab-active: var(--accent-purple, #9b59b6);
  --tab-indicator: var(--accent-purple, #9b59b6);
}

.room-tab-menu[data-room-tab-menu-room-value="game"] {
  --tab-active: var(--accent-green, #27ae60);
  --tab-indicator: var(--accent-green, #27ae60);
}

/* =================================
   Tab Drag-to-Reorder
   ================================= */

.room-tab-menu__tab--dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.room-tab-menu__tab--drag-over {
  outline: 2px dashed var(--tab-active);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.08);
}

.room-tab-menu__tab[draggable="true"] {
  cursor: grab;
}

.room-tab-menu__tab[draggable="true"]:active {
  cursor: grabbing;
}

/* =================================
   Tab Context Menu (Right-Click)
   ================================= */

.room-tab-context-menu {
  background: var(--surface-elevated, #1a1a1a);
  border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1));
  border-radius: 0.375rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  min-width: 140px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.room-tab-context-menu__item {
  display: block;
  width: 100%;
  padding: 0.375rem 0.625rem;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: var(--text-primary, #fff);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease;
}

.room-tab-context-menu__item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}

.room-tab-context-menu__item:disabled {
  color: var(--text-muted, rgba(255, 255, 255, 0.3));
  cursor: default;
}

.room-tab-context-menu__divider {
  height: 1px;
  background: var(--surface-border, rgba(255, 255, 255, 0.1));
  margin: 0.25rem 0;
}

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

@media (max-width: 768px) {
  .room-tab-menu__tabs {
    gap: 0.125rem;
    padding: 0.375rem 0.5rem;
  }

  .room-tab-menu__tab {
    --tab-size: 2.75rem;
  }

  .room-tab-menu__tab-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .room-tab-menu__tab-tooltip {
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (max-width: 480px) {
  .room-tab-menu__tabs {
    justify-content: space-around;
    width: 100%;
  }

  .room-tab-menu__tab {
    --tab-size: 2.5rem;
    flex: 1;
    max-width: 3.5rem;
  }

  /* On mobile, show mini labels below icons */
  .room-tab-menu__tab-label {
    display: block;
    font-size: 0.5625rem;
  }

  .room-tab-menu__tab-tooltip {
    display: none;
  }
}
/*
 * Status Bar — Dm Persona
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 110–225 (116 LOC)
 */

/* DM Persona Molecule - Context-based DM avatar + personality (merged) */
.dm-persona {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: visible;
  /* Button reset for element change from div to button */
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Subtle glow effect on hover */
.dm-persona::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, transparent 0%, var(--persona-color, var(--color-accent-primary)) 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: -1;
}

.dm-persona:hover {
  background: var(--color-bg-hover);
}

.dm-persona:hover::before {
  opacity: 0.08;
}

.dm-persona:hover .dm-persona__avatar {
  transform: scale(1.02);
}

/* Guest state - non-interactive, cursor help for tooltip only */
.dm-persona--guest {
  cursor: help;
  opacity: 0.85;
}

.dm-persona--guest:hover {
  transform: none;
  background: var(--color-bg-tertiary);
}

.dm-persona--guest:hover::before {
  opacity: 0;
}

.dm-persona__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  image-rendering: pixelated; /* Keep pixel art crisp */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.dm-persona__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--persona-color, var(--color-text-primary));
}

/* Persona-specific accent borders */
.dm-persona[data-persona="guide"] {
  border-left: 2px solid var(--color-accent-warning);
}

.dm-persona[data-persona="mentor"] {
  border-left: 2px solid var(--color-accent-primary);
}

.dm-persona[data-persona="scribe"] {
  border-left: 2px solid var(--color-accent-purple);
}

.dm-persona[data-persona="narrator"] {
  border-left: 2px solid var(--color-accent-secondary);
}

.dm-persona[data-persona="arbiter"] {
  border-left: 2px solid var(--color-accent-error);
}

.dm-persona[data-persona="artificer"] {
  border-left: 2px solid var(--color-accent-warning);
}

.dm-persona[data-persona="merchant"] {
  border-left: 2px solid var(--color-accent-warning);
}

/* Responsive: hide name on small screens */
@media (max-width: 768px) {
  .dm-persona__name {
    display: none;
  }

  .dm-persona {
    padding: var(--space-1) var(--space-2);
  }
}

/*
 * Status Bar — Breadcrumb
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 226–422 (197 LOC)
 */

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  opacity: 0.6;
  flex-shrink: 0;
  user-select: none;
}

.breadcrumb__segment {
  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-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border: none;
  font-family: var(--font-family-mono);
  min-width: 0;
  transition: background var(--transition-fast);
}

/* Character/Identity Indicator */
.breadcrumb__segment--character {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
  gap: var(--space-2);
}

.breadcrumb__segment--character:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.breadcrumb__segment--character:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.breadcrumb__avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.breadcrumb__avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.breadcrumb__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
}

/* User Indicator (non-clickable) */
.breadcrumb__segment--user {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  cursor: default;
}

.breadcrumb__segment--campaign {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.breadcrumb__segment--campaign:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.breadcrumb__segment--campaign:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.breadcrumb__segment--world {
  flex-shrink: 0;
  cursor: help;
  border-left: 1px solid var(--color-accent-primary);
}

.breadcrumb__segment--world:hover {
  background: var(--color-bg-hover);
}

.breadcrumb__segment--location {
  cursor: help;
  border-left: 1px solid var(--color-accent-success, #4ade80);
  min-width: 0;
}

.breadcrumb__segment--location:hover {
  background: var(--color-bg-hover);
}

/*
 * Transitioning state (#5080): when scene.phase === "establishing" the
 * destination has been committed in the DB but the establishing narrative
 * has not yet rendered in the narrative panel. The breadcrumb signals
 * in-progress travel with a muted border, italic label, and a gentle pulse
 * so players understand they are en route rather than arrived.
 * JS sets data-phase="establishing" on the element via applyScene().
 * The attribute is cleared (set to '') when the phase advances.
 */
.breadcrumb__segment--location[data-phase="establishing"] {
  border-left-color: var(--color-text-muted, #6b7280);
  opacity: 0.75;
  animation: breadcrumb-location-pulse 1.8s ease-in-out infinite;
}

.breadcrumb__segment--location[data-phase="establishing"] .breadcrumb__label {
  font-style: italic;
  color: var(--color-text-secondary);
}

@keyframes breadcrumb-location-pulse {
  0%, 100% { opacity: 0.75; }
  50%       { opacity: 0.5; }
}

.breadcrumb__segment--room {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.breadcrumb__segment--room:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

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

.breadcrumb__icon {
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.breadcrumb__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Campaign label - constrained width with ellipsis */
.breadcrumb__label--campaign {
  max-width: 180px;
}

@media (max-width: 1024px) {
  .breadcrumb__label--campaign {
    max-width: 120px;
  }
}

@media (max-width: 768px) {
  .breadcrumb__label--campaign {
    max-width: 100px;
  }
}

.breadcrumb__phase {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
  border-radius: var(--radius-sm);
  text-transform: capitalize;
  flex-shrink: 0;
}

.breadcrumb__room-wrapper {
  position: relative;
}

/* Mobile (<640px): collapse to rightmost segment only */
@media (max-width: 640px) {
  .breadcrumb__segment--campaign,
  .breadcrumb__segment--world,
  .breadcrumb__separator {
    display: none;
  }

  .breadcrumb__phase {
    display: none;
  }
}
/*
 * Status Bar — Room Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 424–766 (343 LOC)
 */

/* Room Indicator Molecule */
.room-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.room-indicator:hover {
  background: var(--color-bg-hover);
}

.room-indicator .room-icon {
  font-size: var(--font-size-lg);
}

.room-indicator .room-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

.room-indicator .room-type-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;
}

/* Room Menu - Clickable room indicator with dropdown */
.room-menu {
  position: relative;
}

.room-indicator--clickable {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.room-indicator--clickable:hover {
  border-color: var(--color-accent-primary);
}

.room-indicator--clickable:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* room-chevron styles consolidated in unified chevron section above */

.room-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 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-md);
  /* Enhanced shadow with subtle accent glow */
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  /* Smooth bounce easing for polish */
  transition: opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
}

.room-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Backdrop scrim when room menu is open */
.room-menu::before {
  content: '';
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-dropdown) - 1);
}

.room-menu:has(.room-menu__dropdown.open)::before {
  display: block;
}

/* Allow submenu flyout to overflow when open */
.room-menu__dropdown:has(.room-menu__submenu.open) {
  overflow-y: visible;
}

.room-menu__section {
  padding: var(--space-2) 0;
}

/* Wrapper for each submenu trigger + menu pair - provides positioning context */
.room-menu__submenu-wrapper {
  position: relative;
}

.room-menu__section-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.room-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;  /* WCAG touch target */
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
  position: relative;
  overflow: hidden;
}

/* Accent bar indicator for hover */
.room-menu__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent-primary);
  transform: scaleY(0);
  transition: transform var(--transition-fast);
}

.room-menu__item:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
}

.room-menu__item:hover:not(:disabled)::before {
  transform: scaleY(1);
}

.room-menu__item--current {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.room-menu__item--current::before {
  transform: scaleY(1);
  box-shadow: 0 0 6px var(--color-accent-primary);
}

.room-menu__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.room-menu__badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Soft badge for rooms requiring character selection */
.room-menu__badge--soft {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: calc(var(--font-size-xs) * 0.9);
  text-transform: none;
}

/* Subtle styling for rooms that need character selection */
.room-menu__item--needs-character {
  opacity: 0.85;
}

.room-menu__item--needs-character:hover {
  opacity: 1;
}

.room-menu__reason {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-warning-subtle, rgba(251, 191, 36, 0.2));
  color: var(--color-accent-warning);
  border: 1px solid var(--color-accent-warning);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Campaign role badges */
.room-menu__role-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.room-menu__role-badge.role-badge--dm,
.room-menu__role-badge.role-badge--co_dm {
  background: var(--overlay-purple-subtle, rgba(139, 92, 246, 0.2));
  color: var(--color-accent-info, var(--color-accent-purple));
}

.room-menu__role-badge.role-badge--player {
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
}

/* Empty state for campaigns */
.room-menu__empty {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-style: italic;
  text-align: center;
}

.room-menu__divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-1) 0;
}

.room-menu__submenu-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;  /* WCAG touch target */
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
}

.room-menu__submenu-trigger:hover {
  background: var(--color-bg-tertiary);
}

.room-menu__value {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.room-menu__submenu {
  display: none;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: calc(var(--z-dropdown) + 1);  /* Above parent dropdown */
}

.room-menu__submenu.open {
  display: block;
}

/* Desktop: submenu appears to the right */
@media (min-width: 641px) {
  .room-menu__submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--space-2);
    min-width: 180px;
  }
}

/* Mobile: submenu appears inline below */
@media (max-width: 640px) {
  .room-menu__submenu {
    position: static;
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
}

.room-menu__submenu .room-menu__item {
  font-size: var(--font-size-xs);
}

/* Mobile: Room menu centered */
@media (max-width: 640px) {
  .room-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
  }

  .room-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }

  /* Allow overflow when submenu is open so static submenu can display */
  .room-menu__dropdown:has(.room-menu__submenu.open) {
    overflow-y: visible;
  }
}
/*
 * Status Bar — Campaign Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 767–880 (114 LOC)
 */


/* Campaign Menu - Dropdown for campaign segment */
.campaign-menu {
  position: relative;
}

.breadcrumb__campaign-wrapper {
  position: relative;
}

/* campaign-chevron styles consolidated in unified chevron section above */

.campaign-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 200px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  transition: opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
}

.campaign-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Backdrop scrim when campaign menu is open */
.campaign-menu::before {
  content: '';
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-dropdown) - 1);
}

.campaign-menu:has(.campaign-menu__dropdown.open)::before {
  display: block;
}

.campaign-menu__section {
  padding: var(--space-2) 0;
}

.campaign-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.campaign-menu__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent-primary);
  transform: scaleY(0);
  transition: transform var(--transition-fast);
}

.campaign-menu__item:hover {
  background: var(--color-bg-tertiary);
}

.campaign-menu__item:hover::before {
  transform: scaleY(1);
}

/* Mobile: Campaign menu centered */
@media (max-width: 640px) {
  .campaign-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .campaign-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Location Detail
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 881–929 (49 LOC)
 */

/* Location Detail - legacy standalone styles (now rendered as breadcrumb segment) */
.location-detail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-accent-success, #4ade80);
  font-size: var(--font-size-sm);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.location-detail:hover {
  background: var(--color-bg-hover);
}

.location-detail__name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.location-detail__phase {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

/* Responsive: collapse location detail on small screens */
@media (max-width: 768px) {
  .location-detail__phase {
    display: none;
  }
}

@media (max-width: 480px) {
  .room-indicator .room-name {
    display: none;
  }

  .location-detail {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }
}
/*
 * Status Bar — World Indicator
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 930–949 (20 LOC)
 */


/* World Indicator Molecule */
.world-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: help;
  transition: background var(--transition-fast);
  border-left: 2px solid var(--color-accent-primary);
}

.world-indicator:hover {
  background: var(--color-bg-hover);
}

/*
 * Status Bar — World Menu Dropdown
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1135–1249 (115 LOC)
 */

/* World Menu Dropdown */
.world-menu {
  position: relative;
}

.world-indicator--clickable {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.world-indicator--clickable:hover {
  border-color: var(--color-accent-primary);
}

.world-indicator--clickable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* world-chevron styles consolidated in unified chevron section above */

.world-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 220px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: color var(--timing-fast) var(--ease-out), opacity var(--timing-fast) var(--ease-out), transform var(--timing-fast) var(--ease-out), box-shadow var(--timing-fast) var(--ease-out);
}

.world-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.world-menu__section {
  padding: var(--space-2) 0;
}

.world-menu__section-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.world-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.world-menu__item:hover {
  background: var(--color-bg-tertiary);
}

.world-menu__item--current {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.world-menu__badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Mobile: Center world menu dropdown */
@media (max-width: 640px) {
  .world-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .world-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Character Info
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1250–1364 (115 LOC)
 */

/* Character Info Molecule */
.status-bar .character-info {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.status-bar .character-name {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
}

.status-bar .hp-display {
  color: var(--color-hp-full);
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.status-bar .hp-display.low {
  color: var(--color-hp-mid);
}

.status-bar .hp-display.critical {
  color: var(--color-hp-low);
}

/* HP change animations (cross-panel sync) */
.status-bar .hp-display.hp-damaged {
  animation: status-hp-damage 1.5s ease;
}

.status-bar .hp-display.hp-healed {
  animation: status-hp-heal 1.5s ease;
}

@keyframes status-hp-damage {
  0%, 100% {
    text-shadow: none;
  }
  25%, 75% {
    color: var(--color-accent-error);
    text-shadow: 0 0 8px var(--overlay-error-glow, rgba(239, 68, 68, 0.6));
  }
}

@keyframes status-hp-heal {
  0%, 100% {
    text-shadow: none;
  }
  25%, 75% {
    color: var(--color-accent-secondary);
    text-shadow: 0 0 8px var(--overlay-success-glow, rgba(34, 197, 94, 0.6));
  }
}

/* ============================================
 * Enhanced Visual Hierarchy (#4380, #4391)
 * Makes critical info (HP, character name) more scannable.
 * Uses design tokens throughout — no raw rgba hex.
 * ============================================ */

/* Enhanced character info container */
.status-bar .character-info {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-muted, rgba(90, 159, 216, 0.3));
  border-radius: var(--radius-md);
  box-shadow: 0 0 8px var(--color-accent-subtle, rgba(90, 159, 216, 0.1));
}

/* Make character name more prominent */
.status-bar .character-name {
  font-size: var(--font-size-md);
  text-shadow: 0 0 6px var(--color-accent-subtle, rgba(90, 159, 216, 0.3));
}

/* Enhanced HP display with stat cell styling */
.status-bar .hp-display {
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
}

/* Progressive HP warning states with enhanced visuals */
.status-bar .hp-display.low {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.25);
}

.status-bar .hp-display.critical {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
  animation: critical-hp-pulse 1.5s ease-in-out infinite;
}

@keyframes critical-hp-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
  }
}

/* Secondary stats (AC, Level) get muted treatment */
.status-bar .character-info [data-status-bar-target="acDisplay"],
.status-bar .character-info [data-status-bar-target="levelDisplay"] {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

/*
 * Status Bar — Lock Status
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1365–1414 (50 LOC)
 */

/* Lock Status Molecule - Icon-only display with tooltip */
.lock-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: help;
  transition: background var(--transition-fast);
}

.lock-status:hover {
  background: var(--color-bg-tertiary);
}

.lock-status .lock-icon {
  font-size: var(--font-size-md);
}

.lock-status .lock-text {
  /* Hidden by default - icon + tooltip is sufficient */
  display: none;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lock-status[data-locked="true"] {
  color: var(--color-accent-warning);
}

.lock-status[data-locked="false"] {
  /* Hide lock status when character is editable (not locked) */
  display: none;
}

/* ============================================
 * Simplified Status Bar (User Feedback Round 3)
 * Hide all character stats - available in character sheet panel
 * Status bar focuses on navigation and system info only
 * ============================================ */

/* Hide entire character-info section - all stats in character sheet panel */
.status-bar .character-info {
  display: none;
}

/*
 * Status Bar — Difficulty Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1529–1665 (137 LOC)
 */

/* Difficulty Menu Container */
.difficulty-menu {
  position: relative;
}

/* Difficulty Indicator Molecule */
.difficulty-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

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

.difficulty-indicator:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.difficulty-indicator .difficulty-icon {
  font-size: var(--font-size-md);
}

.difficulty-indicator .difficulty-name {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* difficulty-chevron styles consolidated in unified chevron section above */

.difficulty-indicator[data-difficulty="story"] {
  color: var(--color-accent-secondary);
}

.difficulty-indicator[data-difficulty="balanced"] {
  color: var(--color-text-secondary);
}

.difficulty-indicator[data-difficulty="challenging"] {
  color: var(--color-accent-warning);
}

.difficulty-indicator[data-difficulty="hardcore"] {
  color: var(--color-accent-danger, #dc3545);
}

/* Difficulty Dropdown */
.difficulty-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 280px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background var(--timing-fast) var(--ease-out), color var(--timing-fast) var(--ease-out), border-color var(--timing-fast) var(--ease-out), opacity var(--timing-fast) var(--ease-out);
  padding: var(--space-2) 0;
}

.difficulty-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.difficulty-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.difficulty-option:hover:not(.active) {
  background: var(--color-bg-tertiary);
}

.difficulty-option.active {
  background: var(--color-bg-hover);
  border-left: 3px solid var(--color-accent-primary);
}

.difficulty-option-icon {
  display: inline;
}

.difficulty-option-name {
  font-weight: var(--font-weight-medium);
}

.difficulty-option-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Mobile: Center difficulty dropdown */
@media (max-width: 640px) {
  .difficulty-dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .difficulty-dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Toolbar
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 950–1134 (185 LOC)
 */

/* ========================================
 * Toolbar Icon Buttons (Unified Style)
 * Help, Feedback, and other icon-only toolbar buttons
 * ======================================== */

.toolbar-icon-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: --color-text-primary for WCAG AA contrast on dark button bg */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  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);
}

.toolbar-icon-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.toolbar-icon-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.toolbar-icon-btn:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

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

/* Spectator Mode Indicator */
.spectator-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  border: 1px solid var(--color-info, #3b82f6);
  border-radius: var(--radius-full);
  color: var(--color-info, #3b82f6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.spectator-indicator .svg-icon {
  width: 12px;
  height: 12px;
}

.spectator-indicator__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .spectator-indicator__label {
    display: none;
  }
}

.help-icon-btn,
.feedback-icon-btn,
.panels-icon-btn,
.hologram-toggle-btn,
.xr-mode-btn,
.friends-icon-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 (#a0a0a0, ~2.8:1 on bg-tertiary)
     to --color-text-primary (#e0e0e0, ~9.2:1) for WCAG AA icon contrast. */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  /* #3882: include transform so :active scale(0.95) eases, not snaps. */
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* B8: 44x44 touch targets on coarse-pointer mid-viewport (mobile/tablet, not phone-sized) */
@media (pointer: coarse) and (min-width: 481px) {
  .help-icon-btn, .feedback-icon-btn, .panels-icon-btn,
  .hologram-toggle-btn, .xr-mode-btn, .ghost-toggle-btn,
  .friends-icon-btn, .focus-mode-toggle {
    min-width: 44px; min-height: 44px;
  }
}

.help-icon-btn .svg-icon,
.feedback-icon-btn .svg-icon,
.panels-icon-btn .svg-icon,
.hologram-toggle-btn .svg-icon,
.xr-mode-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.help-icon-btn:hover,
.feedback-icon-btn:hover,
.panels-icon-btn:hover,
.hologram-toggle-btn:hover,
.xr-mode-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.help-icon-btn:focus-visible,
.feedback-icon-btn:focus-visible,
.panels-icon-btn:focus-visible,
.hologram-toggle-btn:focus-visible,
.xr-mode-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.help-icon-btn:active,
.feedback-icon-btn:active,
.panels-icon-btn:active,
.hologram-toggle-btn:active,
.xr-mode-btn:active {
  transform: scale(0.95);
}

/* B2: Sighted on-state for hologram toggle (aria-pressed reflective) */
.hologram-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Panels button first-visit hint dot */
.panels-icon-btn {
  position: relative;
}

.panels-icon-btn--new::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--color-accent-primary, #7c3aed);
  border-radius: 50%;
  animation: panels-hint-pulse 2s ease-in-out infinite;
}

@keyframes panels-hint-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Ghost toggle styles extracted to terminal/components/_ghost_toggle.css (#3870)
 * to keep this organism file under the size cap. */

.world-indicator .world-icon {
  font-size: var(--font-size-md);
}

.world-indicator .world-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Status Bar — Session Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1666–1853 (188 LOC)
 */

/* Session Menu Molecule (Dropdown) */
.session-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

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

.session-menu-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.session-menu-btn .session-title {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* session-menu chevron styles consolidated in unified chevron section above */

.session-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 180px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.session-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.session-menu-dropdown .menu-item {
  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-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.session-menu-dropdown .menu-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.session-menu-dropdown .menu-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.session-menu-dropdown .menu-item:hover {
  background: var(--color-bg-hover);
}

.session-menu-dropdown .menu-icon {
  width: 16px;
  text-align: center;
  color: var(--color-accent-primary);
  font-family: var(--font-family-mono);
}

.session-menu-dropdown .menu-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-1) 0;
}

/* Submenu for difficulty selection */
.menu-submenu {
  position: relative;
}

.menu-submenu .menu-item {
  justify-content: space-between;
}

.menu-submenu .submenu-chevron {
  opacity: 0.6;
  margin-left: auto;
}

.submenu-dropdown {
  position: absolute;
  right: calc(100% + var(--space-1));
  top: 0;
  min-width: 140px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: calc(var(--z-dropdown) + 1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.submenu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-dropdown .menu-item.active {
  background: var(--color-bg-hover);
  color: var(--color-accent-primary);
}

.submenu-dropdown .menu-item.active::before {
  content: '✓';
  position: absolute;
  right: var(--space-2);
  font-size: var(--font-size-xs);
}

/* Highlighted menu item - for CTAs like "Get Full Access" */
.menu-item--highlight {
  background: linear-gradient(135deg, var(--overlay-purple-subtle, rgba(139, 92, 246, 0.15)), var(--overlay-indigo-subtle, rgba(99, 102, 241, 0.1)));
  color: var(--color-accent-purple);
  border-left: 3px solid var(--color-accent-purple);
  font-weight: var(--font-weight-semibold);
}

.menu-item--highlight:hover {
  background: linear-gradient(135deg, var(--overlay-purple-medium, rgba(139, 92, 246, 0.25)), var(--overlay-indigo-medium, rgba(99, 102, 241, 0.2)));
  color: var(--color-accent-purple-light, var(--color-accent-purple));
}

.menu-item--highlight .menu-icon {
  color: var(--color-accent-purple);
}

/* Badge for menu items (e.g., unread announcements) */
.menu-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

.menu-badge[data-count]:not([data-count=""]):not([data-count="0"]) {
  display: inline-block;
}

.session-clock {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/*
 * Status Bar — Dm Mode Toggle
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1854–1936 (83 LOC)
 */

/* Help Icon Button - styles consolidated above in toolbar-icon-btn section */

/* DM Mode Toggle Button */
.dm-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-left: var(--space-2);
}

.dm-mode-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.dm-mode-toggle:focus {
  outline: 2px solid var(--color-accent-warning);
  outline-offset: 2px;
}

.dm-mode-toggle__icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast);
}

.dm-mode-toggle__label {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Active state - DM Mode is ON */
.dm-mode-toggle--active {
  background: linear-gradient(135deg, var(--overlay-warning-subtle, rgba(251, 191, 36, 0.2)), var(--overlay-warning-subtle-alt, rgba(245, 158, 11, 0.15)));
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
  box-shadow: 0 0 12px var(--overlay-warning-glow, rgba(251, 191, 36, 0.3));
}

.dm-mode-toggle--active:hover {
  background: linear-gradient(135deg, var(--overlay-warning-medium, rgba(251, 191, 36, 0.3)), var(--overlay-warning-medium-alt, rgba(245, 158, 11, 0.25)));
  box-shadow: 0 0 16px var(--overlay-warning-glow-strong, rgba(251, 191, 36, 0.4));
}

.dm-mode-toggle--active .dm-mode-toggle__icon {
  animation: dm-crown-pulse 2s ease-in-out infinite;
}

@keyframes dm-crown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive: hide label on small screens */
@media (max-width: 768px) {
  .dm-mode-toggle__label {
    display: none;
  }

  .dm-mode-toggle {
    padding: var(--space-1) var(--space-2);
  }
}

@media (max-width: 480px) {
  .dm-mode-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
  }
}

/*
 * Status Bar — Modes
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1937–2220 (284 LOC)
 */

/* ==================================================
   GUIDED MODE TOGGLE
   ================================================== */

.guided-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-left: var(--space-2);
}

.guided-mode-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.guided-mode-toggle:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.guided-mode-toggle__icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast);
}

.guided-mode-toggle__label {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Active state - Guided Mode is ON */
.guided-mode-toggle--active {
  background: linear-gradient(135deg, var(--overlay-primary-subtle, rgba(139, 92, 246, 0.2)), var(--overlay-primary-subtle-alt, rgba(124, 58, 237, 0.15)));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  box-shadow: 0 0 12px var(--overlay-primary-glow, rgba(139, 92, 246, 0.3));
}

.guided-mode-toggle--active:hover {
  background: linear-gradient(135deg, var(--overlay-primary-medium, rgba(139, 92, 246, 0.3)), var(--overlay-primary-medium-alt, rgba(124, 58, 237, 0.25)));
  box-shadow: 0 0 16px var(--overlay-primary-glow-strong, rgba(139, 92, 246, 0.4));
}

.guided-mode-toggle--active .guided-mode-toggle__icon {
  animation: guided-book-pulse 2s ease-in-out infinite;
}

@keyframes guided-book-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive: hide label on small screens */
@media (max-width: 768px) {
  .guided-mode-toggle__label {
    display: none;
  }

  .guided-mode-toggle {
    padding: var(--space-1) var(--space-2);
  }
}

@media (max-width: 480px) {
  .guided-mode-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
  }
}

/* Hover states only on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .feedback-icon-btn:hover {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--overlay-secondary-glow, rgba(96, 165, 250, 0.3));
  }

  .help-icon-btn:hover {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--overlay-accent-glow, rgba(139, 92, 246, 0.3));
  }

  .session-menu-btn:hover {
    background: var(--color-bg-hover);
  }

  .menu-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-primary);
  }
}

/* Touch devices: Show feedback on tap */
@media (hover: none), (pointer: coarse) {
  .feedback-icon-btn:active {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    transform: scale(0.95);
  }

  .help-icon-btn:active {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(0.95);
  }

  .menu-item:active {
    background: var(--color-bg-hover);
  }
}

/* Mobile HP Pill — extracted to molecules/_mobile_hp_pill.css */

/* #2090: Hide "Menu" text label on all mobile viewports, keep just the icon.
   Saves ~40px of horizontal space in the status bar. */
@media (max-width: 767px) {
  .session-title {
    display: none;
  }

  .session-menu-btn {
    padding: var(--space-1) var(--space-2);
  }
}

/* Mobile bottom-sheet mode: compact status bar (28px) */
@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .status-bar {
    height: 28px;
    min-height: 28px;
    padding: 2px 8px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Hide secondary actions zone items except session menu and token status.
     Token status kept visible for guest users to see remaining budget (#1286). */
  .mobile-bottom-sheet-mode .status-bar__zone--actions .toolbar-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .help-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .feedback-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .difficulty-menu,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .dm-mode-toggle,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .guided-mode-toggle {
    display: none;
  }

  /* Compact breadcrumb segments */
  .mobile-bottom-sheet-mode .breadcrumb__segment {
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
  }

  .mobile-bottom-sheet-mode .dm-persona__avatar {
    width: 22px;
    height: 22px;
  }
}

/* Tablet/small screens: hide lowest-priority toolbar buttons */
@media (max-width: 640px) {
  /* Hide nice-to-have buttons; keep menu, settings, focus mode */
  .hologram-toggle-btn,
  .xr-mode-btn,
  .ghost-toggle-btn,
  .shell-selector {
    display: none;
  }

  /* Collapse spectator label to icon-only */
  .spectator-indicator__label {
    display: none;
  }
}

/* Mobile: Compact 28px status bar - icons only on small screens */
@media (max-width: 480px) {
  .status-bar {
    height: 28px;
    min-height: 28px;
    padding: 2px 6px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* AGGRESSIVE: Hide secondary elements entirely.
     NOTE: .token-status widget was removed in #4267; milestone display
     now lives elsewhere. */
  .location-detail,
  .world-indicator,
  .lock-status,
  .difficulty-menu,
  .feedback-icon-btn,
  .help-icon-btn,
  .friends-icon-btn,
  .hologram-toggle-btn,
  .xr-mode-btn,
  .ghost-toggle-btn,
  .shell-selector,
  .session-clock {
    display: none;
  }

  /* Hide text labels, show icons only */
  .room-name,
  .room-type-badge,
  .dm-persona__name,
  .difficulty-name,
  .lock-text {
    display: none;
  }

  /* Character info: keep name and HP only */
  .status-bar .character-info [data-status-bar-target="acDisplay"],
  .status-bar .character-info [data-status-bar-target="levelDisplay"] {
    display: none;
  }

  /* Compact icons for 28px bar */
  .room-icon,
  .world-icon,
  .difficulty-icon,
  .lock-icon {
    font-size: var(--font-size-md);
  }

  /* Character info: keep name, condense stats */
  .character-info {
    gap: 6px;
    font-size: var(--font-size-xs);
  }

  /* Session menu: icon only */
  .session-title {
    display: none;
  }

  .session-menu-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
  }

  /* Panel tab dropdown trigger: compact for 28px */
  .panel-tab-dropdown__trigger-label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-tab-dropdown__chevron {
    width: 8px;
    height: 8px;
  }
}

/* Focus-mode toggle styles extracted to terminal/components/_focus_mode_toggle.css
 * to keep this organism file under the size cap. */

/*
 * Status Bar — Focus Mode
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2221–2372 (152 LOC)
 */

/* ========================================
 * Focus Mode Active State
 * Hides most UI for distraction-free reading
 * ======================================== */

.terminal-container--focus-mode .status-bar {
  height: 32px;
  padding: 2px 8px;
}

.terminal-container--focus-mode .status-bar > *:not(.session-menu):not(.focus-mode-toggle) {
  display: none;
}

.terminal-container--focus-mode .mobile-panel-switcher {
  display: none;
}

/* ========================================
 * Mobile Dropdowns: Bottom Sheet Style (Polish Priority 4.1)
 * Native mobile app feel with slide-up animation
 * ======================================== */
@media (max-width: 640px) {
  /* Session menu as bottom sheet on mobile */
  .session-menu-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    padding-bottom: 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .session-menu-dropdown.open {
    transform: translateY(0);
  }

  /* Add drag handle indicator */
  .session-menu-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 12px auto 16px;
    opacity: 0.6;
  }

  /* Larger touch targets for session menu on mobile */
  .session-menu-dropdown .menu-item {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  /* Settings submenu: bottom sheet style on mobile */
  .submenu-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .submenu-dropdown.open {
    transform: translateY(0);
  }

  /* Add a handle indicator for bottom sheet */
  .submenu-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 8px auto 12px;
    opacity: 0.6;
  }

  /* Larger touch targets for submenu items on mobile */
  .submenu-dropdown .menu-item {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  .submenu-dropdown .submenu-section-title {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
  }

  /* Difficulty dropdown as bottom sheet on mobile */
  .difficulty-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    padding-bottom: 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .difficulty-dropdown.open {
    transform: translateY(0);
  }

  .difficulty-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 12px auto 16px;
    opacity: 0.6;
  }
}

/*
 * Status Bar — Death Banner
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2373–2461 (89 LOC)
 */

/* ========================================
 * Death/Unconscious Banner
 * ======================================== */

.death-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--overlay-danger-medium, rgba(220, 38, 38, 0.25)), var(--overlay-danger-subtle, rgba(185, 28, 28, 0.2)));
  border: 2px solid var(--color-accent-danger, var(--color-accent-error));
  border-radius: var(--radius-md);
  color: var(--color-accent-danger, var(--color-accent-error));
  font-family: var(--font-family-mono);
  animation: death-banner-pulse 2s ease-in-out infinite;
}

.death-banner--visible {
  display: flex;
}

.death-banner[hidden] {
  display: none;
}

.death-banner__icon {
  font-size: var(--font-size-xl);
  animation: death-icon-shake var(--timing-slow) ease-in-out;
}

.death-banner__text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.death-banner__saves {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

.death-banner__successes {
  color: var(--color-accent-success, var(--color-accent-secondary));
}

.death-banner__failures {
  color: var(--color-accent-danger, var(--color-accent-error));
}

@keyframes death-banner-pulse {
  0%, 100% {
    box-shadow: 0 0 8px var(--overlay-danger-glow, rgba(220, 38, 38, 0.3));
  }
  50% {
    box-shadow: 0 0 16px var(--overlay-danger-glow-strong, rgba(220, 38, 38, 0.6));
  }
}

@keyframes death-icon-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* Mobile: death banner spans full width */
@media (max-width: 640px) {
  .death-banner {
    position: fixed;
    top: var(--status-bar-height, 48px);
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    justify-content: center;
    z-index: calc(var(--z-dropdown) / 2); /* Below dropdowns, above content */
    padding: var(--space-2);
  }

  .death-banner__text {
    font-size: var(--font-size-xs);
  }
}

/*
 * Status Bar — Status Widgets
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2462–2543 (82 LOC)
 */

/* Status Widget Container — dynamic widgets registered by panels.
 * Status-zone wrappers live in components/_status_zones.css (#3882). */

.status-widget-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.status-widget-container:empty {
  display: none;
}

/* Individual status widgets */
.status-widget {
  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-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}

.status-widget:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.status-widget__icon {
  font-size: var(--font-size-md);
}

.status-widget__label {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.status-widget__value {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
}

/* Widget variants */
.status-widget--combat {
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.status-widget--combat:hover {
  border-color: var(--color-accent-warning);
  box-shadow: 0 0 8px var(--overlay-warning-glow, rgba(251, 191, 36, 0.3));
}

.status-widget--danger {
  border-color: var(--color-accent-error);
  color: var(--color-accent-error);
}

.status-widget--danger:hover {
  border-color: var(--color-accent-error);
  box-shadow: 0 0 8px var(--overlay-error-glow, rgba(239, 68, 68, 0.3));
}

.status-widget--success {
  border-color: var(--color-accent-success, var(--color-accent-secondary));
  color: var(--color-accent-success, var(--color-accent-secondary));
}

/* Mobile: hide widgets to save space */
@media (max-width: 640px) {
  .status-widget-container {
    display: none;
  }
}

/*
 * Status Bar — Panel Tab Dropdown
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2544–2685 (142 LOC)
 */

/* ============================================================
   Panel Tab Dropdown — status bar dropdown to switch right panel
   ============================================================ */

.breadcrumb__panel-tab-wrapper {
  position: relative;
}

.breadcrumb__segment--panel-tab {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
  gap: var(--space-2);
}

.breadcrumb__segment--panel-tab:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.breadcrumb__segment--panel-tab:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.panel-tab-dropdown__trigger-icon {
  display: flex;
  align-items: center;
}

.panel-tab-dropdown__trigger-icon svg {
  width: 14px;
  height: 14px;
}

.panel-tab-dropdown__trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.panel-tab-dropdown__chevron {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform var(--timing-fast), opacity var(--timing-fast);
}

.panel-tab-dropdown:has(.panel-tab-dropdown__menu.open) .panel-tab-dropdown__chevron {
  opacity: 0.9;
  transform: rotate(180deg);
}

.panel-tab-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 180px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  transition: background var(--timing-fast) var(--ease-spring), color var(--timing-fast) var(--ease-spring), border-color var(--timing-fast) var(--ease-spring), opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
  padding: var(--space-1) 0;
}

.panel-tab-dropdown__menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.panel-tab-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--timing-instant);
}

.panel-tab-dropdown__item:hover {
  background: var(--color-bg-hover);
}

.panel-tab-dropdown__item-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.panel-tab-dropdown__item-icon svg {
  width: 16px;
  height: 16px;
}

.panel-tab-dropdown__item-label {
  flex: 1;
}

.panel-tab-dropdown__item--highlight {
  color: var(--color-accent-primary);
  font-weight: bold;
}

.panel-tab-dropdown__divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-1) 0;
}

/* Danger modifier — destructive items (Reset Session) in warning colour */
.panel-tab-dropdown__item--danger {
  color: var(--color-accent-error, #cf6068);
}

.panel-tab-dropdown__item--danger:hover {
  background: rgba(207, 96, 104, 0.12);
  color: var(--color-accent-error, #cf6068);
}

.panel-tab-dropdown__item--danger .panel-tab-dropdown__item-icon {
  color: var(--color-accent-error, #cf6068);
}

/* Session More — collapsible sub-section for session management controls
   (#4391: hides Reset Session / New Session Tab behind one extra click) */
.panel-tab-dropdown__session-more {
  list-style: none;
}

.panel-tab-dropdown__session-more summary {
  list-style: none;
  cursor: pointer;
}

.panel-tab-dropdown__session-more summary::-webkit-details-marker {
  display: none;
}

.panel-tab-dropdown__session-more summary::marker {
  content: '';
}

.panel-tab-dropdown__session-more-toggle {
  justify-content: flex-start;
}

.panel-tab-dropdown__session-more-chevron {
  margin-left: auto;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform var(--timing-fast);
}

.panel-tab-dropdown__session-more[open] .panel-tab-dropdown__session-more-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.panel-tab-dropdown__session-more-body {
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border-subtle);
  margin: var(--space-1) var(--space-2);
}

/* Mobile: full-width dropdown */
@media (max-width: 640px) {
  .panel-tab-dropdown__menu {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    min-width: 200px;
  }

  .panel-tab-dropdown__menu.open {
    transform: translateX(-50%) translateY(0);
  }
}
/*
 * Status Bar — Mobile Overrides (#5124)
 * =======================================
 * Compact single-line bar (36px) on ≤768px to reclaim vertical space.
 * Tighter padding reduces height from desktop (38px) to 36px mobile.
 * Touch targets preserved via internal padding (visual 28px button + 4px pad = ≥36px hit area).
 * Extracted from mobile_enhancements.css (#5124) to stay under the 1000-LOC file cap.
 *
 * Shows: character name/avatar + HP pill (+ location on tablets).
 * Phone-compact (≤480px): name + HP only.
 */

/* ========================================
 * STATUS BAR MOBILE
 * Compact single-line bar (36px) on ≤768px to reclaim vertical space.
 * Tighter padding reduces height from desktop (38px) to 36px mobile.
 * Touch targets preserved via internal padding (padding > hit target size).
 * Shows: character name/avatar + HP pill (+ location on tablets).
 * ======================================== */

@media (max-width: 768px) {
  /* Compact status bar — 36px single line (reclaims vertical space vs desktop) */
  .status-bar {
    padding: 4px 8px;
    padding-top: 4px;
    padding-top: env(safe-area-inset-top, 4px);
    padding-left: 8px;
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: 8px;
    padding-right: env(safe-area-inset-right, 8px);
    font-size: var(--font-size-xs);
    gap: 4px;
    height: 36px;
    min-height: 36px;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  /* Breadcrumb segments: tighter padding for 36px bar */
  .status-bar .breadcrumb__segment {
    padding: 3px 6px;
    font-size: var(--font-size-xs);
    gap: 3px;
  }

  /* Avatar sized to fit 36px bar */
  .status-bar .breadcrumb__avatar,
  .status-bar .breadcrumb__avatar--placeholder {
    width: 20px;
    height: 20px;
    font-size: 10px;
  }

  /* Breadcrumb icons: shrink */
  .status-bar .breadcrumb__icon {
    font-size: var(--font-size-xs);
  }

  .status-bar .breadcrumb__icon .svg-icon {
    width: 14px;
    height: 14px;
  }

  /* Hide less important status items */
  .status-bar__item--secondary {
    display: none;
  }

  /* Ensure important items are visible */
  .status-bar__item--primary {
    flex-shrink: 0;
  }

  /* Hide toolbar buttons that aren't essential on mobile.
     .token-status was removed in #4267 (panel audit 6.4). */
  .status-bar .session-clock,
  .status-bar .spectator-indicator__label,
  .status-bar .lock-status {
    display: none;
  }

  /* Toolbar icon buttons: 28px visual + extra padding for ≥40px touch target (#5124).
     The button's own padding expands the clickable area beyond the 28px visual size. */
  .status-bar .help-icon-btn,
  .status-bar .feedback-icon-btn,
  .status-bar .friends-icon-btn,
  .status-bar .hologram-toggle-btn,
  .status-bar .ghost-toggle-btn,
  .status-bar .focus-mode-toggle {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
  }

  .status-bar .help-icon-btn .svg-icon,
  .status-bar .feedback-icon-btn .svg-icon,
  .status-bar .friends-icon-btn .svg-icon {
    width: 16px;
    height: 16px;
  }

  /* ---- Mobile HP Pill: compact bar style ---- */
  /* Position HP pill inline with the nav zone for single-line layout */
  .mobile-hp-pill {
    order: 0; /* Flows naturally between nav and actions */
    padding: 2px 6px;
    font-size: 10px;
    gap: 2px;
    border-radius: var(--radius-pill, 12px);
    height: 24px;
    line-height: 1;
  }

  .mobile-hp-pill__icon {
    font-size: 10px;
  }

  .mobile-hp-pill__value {
    font-size: 10px;
  }
}

/* ========================================
 * MOBILE STATUS BAR: PHONE-COMPACT
 * On small phones, hide room/location to show only
 * character name + HP pill — the two most-glanceable items.
 * ======================================== */

@media (max-width: 480px) {
  /* Hide room and location segments — name + HP is sufficient */
  .status-bar .breadcrumb__segment--room,
  .status-bar .breadcrumb__segment--location,
  .status-bar .breadcrumb__room-wrapper {
    display: none;
  }

  /* Shrink the nav zone to only what's needed (avatar + name) */
  .status-bar__zone--nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Let HP pill sit right next to the name */
  .mobile-hp-pill {
    flex-shrink: 0;
  }

  /* Actions zone: minimal, pushed to far right */
  .status-bar__zone--actions {
    margin-left: auto;
  }
}
/*
 * Status Bar Organism — Import Hub
 * ================================
 * Top-level status display showing room, character, lock state, and session info.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Decomposed into focused files under status_bar/ for maintainability (#4252).
 * This parent retains only the cross-cutting container, chevron, and zone styles
 * shared by every sub-area; everything else lives in a sibling file.
 *
 * IMPORTANT: Sprockets `*= require` directives are only honored inside the
 * leading comment block (before any CSS rule). When the sub-area requires
 * lived at the bottom of this file (post-decomposition #4252), they were
 * silently ignored — the dropdown / room-menu / panel-tab-dropdown / session-
 * menu styles never made it into production CSS for ~2 days, which is why the
 * room dropdown rendered as always-visible (no `opacity: 0; visibility: hidden`
 * baseline). Keep these directives in this header comment.
 *



















 */

/* ========================================
 * Status Bar Container
 * ======================================== */

.status-bar {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--status-bar-padding);
  /* iOS safe area support for iPhone notch */
  /* Use fallback pattern for SassC compatibility */
  padding-top: 8px;
  padding-top: env(safe-area-inset-top, 8px);
  padding-left: 16px;
  padding-left: env(safe-area-inset-left, 16px);
  padding-right: 16px;
  padding-right: env(safe-area-inset-right, 16px);
  height: var(--status-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
}

/* ========================================
 * Dropdown Chevrons (Unified Subtle Style)
 * All dropdown indicators use this base style
 * ======================================== */

.room-chevron,
.campaign-chevron,
.world-chevron,
.difficulty-chevron,
.session-menu-btn .chevron-icon,
.menu-submenu .submenu-chevron {
  opacity: 0.35;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

/* Show chevrons on hover */
.breadcrumb__segment:hover .room-chevron,
.breadcrumb__segment:hover .campaign-chevron,
.world-indicator:hover .world-chevron,
.difficulty-indicator:hover .difficulty-chevron,
.session-menu-btn:hover .chevron-icon,
.menu-submenu:hover .submenu-chevron {
  opacity: 0.7;
}

/* Rotate chevrons when dropdown is open */
.room-menu:has(.room-menu__dropdown.open) .room-chevron,
.campaign-menu:has(.campaign-menu__dropdown.open) .campaign-chevron,
.world-menu:has(.world-menu__dropdown.open) .world-chevron,
.difficulty-menu:has(.difficulty-dropdown.open) .difficulty-chevron,
.session-menu:has(.session-menu-dropdown.open) .chevron-icon {
  opacity: 0.9;
  transform: rotate(180deg);
}

/* ========================================
 * Status Bar Zones (3-zone layout)
 * Zone 1 (nav): Identity + breadcrumb navigation
 * Zone 2 (status): Dynamic widgets, party badges
 * Zone 3 (actions): Toolbar buttons + session menu
 * ======================================== */

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

.status-bar__zone--nav {
  flex: 1;
  min-width: 0; /* Allow truncation */
}

.status-bar__zone--status {
  flex-shrink: 0;
}

.status-bar__zone--actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* #4447: Right zone — wraps character info + toolbar icons into one desktop row.
   On desktop: character info sits left of toolbar icons in a single flex row.
   On mobile (≤768px): character info is hidden via JS; only toolbar icons show. */
.status-bar__zone--right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* #2092: On narrow viewports, allow actions zone to shrink and clip overflow
   so it doesn't push past the right edge (observed ~29px overflow on 390px). */
@media (max-width: 480px) {
  .status-bar__zone--actions {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
}

/* Mobile (≤768px): hide character info inside zone--right; mobile-hp-pill
   in the breadcrumb zone provides compact health display instead.
   Also allow zone--right to shrink on narrow viewports. */
@media (max-width: 768px) {
  .status-bar__zone--right .character-info {
    display: none !important;
  }

  .status-bar__zone--right {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* Mobile: collapse status zone */
@media (max-width: 640px) {
  .status-bar__zone--status {
    display: none;
  }
}

/* Sub-area imports moved to the leading comment header (Sprockets only honors
 * directives there). See file header for the full list. */
/*
 * Narrative Panel: Layout
 * =======================
 * Container structure, filter bar, and scrollable output area.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Narrative Panel Content Container
 * ======================================== */

.narrative-panel-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--color-bg-primary);
  position: relative;
}

/*
 * Override parent overflow:auto so the narrative panel handles its own
 * scrolling internally (via narrative-output overflow-y:auto).
 */
.split-panel__content:has(.narrative-panel-content) {
  overflow: hidden;
}

/* Main content area (takes remaining space after sidebar) */
.narrative-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ========================================
 * Narrative Filter Bar
 * ======================================== */

.narrative-filters {
  display: flex;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* #2574: Mobile — horizontal swipe/scroll for tab row (Combat/Dialogue clipped at 320px).
 * Specificity 0,2,0 beats sibling `.narrative-filters` rules in _turn_queue.css
 * and any earlier mobile declarations that get clobbered by later cascade layers.
 * scroll-snap-type keeps tabs aligned at their edges; -webkit-overflow-scrolling gives
 * iOS momentum; scrollbar is hidden visually but swipe remains functional.
 *
 * #2638: Also reserve right-side padding so the fixed hamburger menu (40×40 at
 * top/right space-2) doesn't overlap the last scroll-snapped tab. Add a visual
 * right-edge fade to signal that more tabs exist past the visible edge. */
@media (max-width: 767px) {
  .narrative-panel-content .narrative-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Reserve ~56px on the right so the fixed hamburger (40px + space-2 margin)
       doesn't clip the rightmost tab. Use scroll-padding so scroll-snap respects
       the reserved zone. Base padding preserved via var(--space-3). */
    padding-right: calc(var(--space-3) + 56px);
    scroll-padding-right: 56px;
    /* Right-edge fade affordance — signals horizontal scrollability.
       Rendered via mask-image so content underneath remains interactive. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

  .narrative-panel-content .narrative-filters::-webkit-scrollbar {
    display: none;
  }

  .narrative-panel-content .narrative-filters .nf-btn {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

.nf-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nf-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--color-text-primary);
  border-color: rgba(255, 215, 0, 0.2);
}

.nf-btn.nf-active {
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold);
  border-color: rgba(255, 215, 0, 0.3);
}

.nf-btn svg {
  width: 12px;
  height: 12px;
}

/* Dynamic filter buttons (Discoveries, Personal) */
.nf-btn.nf-dynamic {
  gap: 3px;
}

.nf-btn.nf-dynamic .nf-icon {
  font-size: var(--font-size-xs);
  line-height: 1;
}

.nf-btn.nf-dynamic .nf-label {
  font-size: var(--font-size-xs);
}

/* Count badge for dynamic filters */
.nf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  margin-left: 2px;
}

.nf-btn.nf-active .nf-count {
  background: var(--overlay-white-medium);
  color: inherit;
}

.nf-count:empty {
  display: none;
}

/* Discoveries filter - blue theme (perception) */
.nf-btn[data-filter="discoveries"].nf-active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.nf-btn[data-filter="discoveries"].nf-active .nf-count {
  background: rgba(59, 130, 246, 0.3);
}

/* Personal filter - purple theme (character-specific) */
.nf-btn[data-filter="personal"].nf-active {
  background: rgba(147, 51, 234, 0.15);
  color: #c084fc;
  border-color: rgba(147, 51, 234, 0.3);
}

.nf-btn[data-filter="personal"].nf-active .nf-count {
  background: rgba(147, 51, 234, 0.3);
}

/* ========================================
 * Narrative Output (scrollable story area)
 * ======================================== */

.narrative-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--narrative-padding) var(--space-6);
  background: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-narrative);
  color: var(--color-text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) rgba(0, 0, 0, 0.15);
}

.narrative-output::-webkit-scrollbar {
  width: 8px;
}

.narrative-output::-webkit-scrollbar-track {
  background: var(--overlay-light);
  border-radius: var(--radius-sm);
}

.narrative-output::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-sm);
}

.narrative-output::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.4);
}
/*
 * Narrative Panel: Entry Base
 * ============================
 * Base narrative entry styles, actions (copy, bookmark, TTS),
 * channel config hover icon, and channel config popover.
 */

/* ========================================
 * Narrative Entry Base Styles
 * ======================================== */

.narrative-entry {
  margin-bottom: var(--narrative-entry-spacing);
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  animation: entrySlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  transition: background var(--transition-fast);
  /* #3919: Wall-of-text legibility — relaxed line-height applies to all entry
     types (was previously DM-only). Base value used by short single-line
     entries too; shorter values can override per-type. */
  line-height: var(--line-height-narrative);
}

.narrative-entry--restored {
  animation: none;
}

.narrative-entry:hover {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

/* Entry Actions Container */
.narrative-entry__actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: var(--z-sticky);
}

.narrative-entry:hover .narrative-entry__actions {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__actions:focus-within {
  opacity: 1;
  visibility: visible;
}

/* Copy Button */
.narrative-entry__copy {
  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;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Legacy: Copy button outside actions container */
.narrative-entry > .narrative-entry__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
  z-index: var(--z-sticky);
}

.narrative-entry:hover > .narrative-entry__copy {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__copy:hover {
  background: var(--color-primary, #3B82F6);
  border-color: var(--color-primary, #3B82F6);
  color: white;
}

.narrative-entry__copy:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

.narrative-entry > .narrative-entry__copy:focus-visible {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__copy.copied {
  background: var(--color-success, #22C55E);
  border-color: var(--color-success, #22C55E);
  color: white;
}

/* Bookmark Button (in actions container) */
.narrative-entry__actions .narrative-bookmark__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-bookmark__btn:hover {
  background: rgba(212, 165, 116, 0.2);
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-accent-gold, #d4a574);
}

.narrative-entry__actions .narrative-bookmark__btn--active {
  color: var(--color-accent-gold, #d4a574);
}

.narrative-entry__actions .narrative-bookmark__btn--active svg {
  fill: currentColor;
}

.narrative-entry__actions .narrative-bookmark__btn--active:hover {
  color: var(--color-danger, #dc2626);
}

.narrative-entry__actions .narrative-bookmark__btn:focus-visible {
  outline: 2px solid var(--color-accent-gold, #d4a574);
  outline-offset: 2px;
}

/* TTS Play Button (in actions container) */
.narrative-entry__actions .narrative-tts__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-tts__btn:hover {
  background: rgba(100, 180, 255, 0.2);
  border-color: var(--color-primary, #3B82F6);
  color: var(--color-primary, #3B82F6);
}

.narrative-entry__actions .narrative-tts__btn--loading {
  color: var(--color-text-muted);
  cursor: wait;
}

.narrative-entry__actions .narrative-tts__btn--loading svg {
  animation: tts-pulse 1s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.narrative-entry__actions .narrative-tts__btn--active {
  color: var(--color-primary, #3B82F6);
}

.narrative-entry__actions .narrative-tts__btn--active svg {
  fill: currentColor;
}

.narrative-entry__actions .narrative-tts__btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

/* Bookmarked entry indicator */
.narrative-entry--bookmarked {
  border-left: 2px solid var(--color-accent-gold, #d4a574);
}

/* ========================================
 * Layer 1 / Layer 2 Narrative Bubbles (#3503)
 * ----------------------------------------
 * --neutral: Layer 1, party-shared, third-person, observable
 *            facts only. Muted gray left border, no badge.
 * --personal: Layer 2, per-character, second-person,
 *             perception-filtered. Accent-colored left border
 *             plus character initial badge slot.
 * __personalizing: transient loading hint embedded in a dm_neutral
 *             bubble while Layer 2 (dm_personal) is in flight.
 *             Removed from the DOM when dm_personal arrives (#4405).
 *             Must be visually distinct from narrative prose so
 *             it is never mistaken for DM-authored content.
 * Modifiers only — base .narrative-entry styles untouched.
 * ======================================== */

.narrative-entry--neutral {
  border-left: 3px solid var(--color-text-muted, #888);
  padding-left: var(--space-3);
}

.narrative-entry--personal {
  border-left: 3px solid var(--color-accent-primary, #5a9fd8);
  padding-left: calc(var(--space-3) + 28px);
  position: relative;
}

/* Transient Layer 2 loading hint (#4405 fix — was unstyled, rendering as
 * plain narrative text). Display as a small muted italicised footer line
 * so it is clearly non-narrative while Layer 2 generation is in flight.
 * Removed from the DOM by removeIndicatorFor() when dm_personal arrives. */
.narrative-entry__personalizing {
  display: block;
  margin-top: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  font-style: italic;
  color: var(--color-text-muted, #888);
  opacity: 0.7;
  user-select: none;
  pointer-events: none;
  /* Soft pulse so the hint reads as "in progress", not as narrative text */
  animation: personalizingPulse 1.4s ease-in-out infinite;
}

@keyframes personalizingPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.35; }
}

.narrative-entry__personal-badge {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-bg-secondary, #2d2d2d);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  user-select: none;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .narrative-entry--personal {
    padding-left: calc(var(--space-3) + 24px);
  }

  .narrative-entry__personal-badge {
    width: 18px;
    height: 18px;
    font-size: var(--font-size-2xs, 10px);
    left: var(--space-1-5);
  }
}

/* ========================================
 * Channel Config Hover Icon (left side)
 * ======================================== */

.channel-config-icon {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  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, #888);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
  z-index: var(--z-sticky);
  font-size: 0;
  line-height: 0;
}

.channel-config-icon svg {
  width: 12px;
  height: 12px;
}

.narrative-entry:hover .channel-config-icon {
  opacity: 1;
  visibility: visible;
}

.channel-config-icon:hover {
  background: var(--color-bg-secondary, #252545);
  border-color: var(--color-border, #3a3a5a);
  color: var(--color-text-primary, #e0e0e0);
}

.channel-config-icon:focus-visible {
  opacity: 1;
  visibility: visible;
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

.channel-config-icon--touch-visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
 * Channel Config Popover
 * ======================================== */

.channel-config-popover {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 180px;
  max-width: 240px;
  background: var(--color-bg-secondary, #252545);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-modal, 0 4px 16px rgba(0, 0, 0, 0.5));
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 13px);
  opacity: 0;
  transform: translateX(-4px);
  animation: channelPopoverIn 0.15s ease forwards;
}

@keyframes channelPopoverIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.channel-config-popover__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.channel-config-popover__icon {
  font-size: var(--font-size-md, 14px);
  line-height: 1;
}

.channel-config-popover__label {
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-text-primary, #e0e0e0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--font-size-xs, 11px);
}

.channel-config-popover__body {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.channel-config-popover__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text-secondary, #b0b0b0);
}

.channel-config-popover__toggle input[type="checkbox"] {
  accent-color: var(--color-gold, #ffd700);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.channel-config-popover__toggle-label {
  font-size: var(--font-size-sm, 13px);
}

.channel-config-popover__configure {
  display: block;
  width: 100%;
  padding: var(--space-1-5) 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border, #3a3a5a);
  color: var(--color-accent-primary, #4a9eff);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.channel-config-popover__configure:hover {
  color: var(--color-text-primary, #e0e0e0);
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry__actions,
  .narrative-entry__copy,
  .narrative-entry__actions .narrative-bookmark__btn,
  .narrative-entry__actions .narrative-tts__btn,
  .narrative-entry__actions .narrative-snapshot__btn,
  .channel-config-icon,
  .channel-config-popover {
    transition: none;
    animation: none;
  }
}

/* #3919: Wall-of-text legibility — paragraph spacing tightened to prevent
   multi-paragraph DM narration from collapsing into a single block.
   Token: var(--space-3) = 12px (~0.75em) gives clear visual separation.
   :last-child rule preserves compact rendering for short single-paragraph
   responses (no trailing gap). */
.narrative-entry p {
  margin: 0 0 var(--space-3);
  max-width: 72ch;
}

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

/* Multi-paragraph readability: ensure consecutive narrative paragraphs
   never butt up against each other (defensive — covers cases where p tags
   are wrapped in containers like span/div with classes). */
.narrative-entry p + p {
  margin-top: var(--space-3);
}

.narrative-entry code {
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
}

/**
 * Narrative Entry Types — Narration and Party
 * =============================================
 * Base entry styles, narration, player/NPC dialogue, party alerts, and ambient.
 */

/*
 * Narrative Panel: Entry Types
 * ============================
 * DM, player, queued messages, party indicators,
 * system, combat, success, and tool execution entry types.
 */

/* ========================================
 * Entry Type: DM (Dungeon Master)
 * ======================================== */

.narrative-entry.dm {
  background: linear-gradient(to right, rgba(139, 69, 19, 0.08), rgba(139, 69, 19, 0.04));
  color: var(--color-dm-text, #e8dcc4);
  border-left: 2px solid rgba(210, 180, 140, 0.4);
  font-family: var(--font-body);
  line-height: var(--line-height-narrative);
}

.narrative-entry.dm:hover {
  background: linear-gradient(to right, rgba(139, 69, 19, 0.12), rgba(139, 69, 19, 0.06));
}

.narrative-entry.dm + .narrative-entry.dm::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-3);
  right: var(--space-3);
  height: 1px;
  background: rgba(210, 180, 140, 0.15);
}

/* ========================================
 * Entry Type: Player
 * ======================================== */

.narrative-entry.player {
  background: transparent;
  color: var(--color-accent-secondary);
  font-family: var(--font-mono);
  border-left: 2px solid color-mix(in srgb, var(--color-accent-secondary) 50%, transparent);
}

.narrative-entry.player::before {
  content: '>';
  position: absolute;
  left: var(--space-3);
  top: var(--space-2);
  color: var(--color-accent-secondary);
  font-weight: bold;
  opacity: 0.5;
}

.narrative-entry.player {
  padding-left: calc(var(--space-3) + 1.2em);
}

/* ========================================
 * Entry Type: Queued Player Message
 * ======================================== */

.narrative-entry.player.queued-message {
  position: relative;
  opacity: 0.85;
}

.queued-message__content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.queued-message__content p {
  flex: 1;
  margin: 0;
}

.queued-message__status {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-muted);
  opacity: 0.8;
  padding: 2px 8px;
  background: var(--overlay-white-subtle);
  border-radius: var(--radius-sm);
  animation: statusPulse 1.5s ease-in-out infinite;
}

.queued-message--pending {
  opacity: 0.7;
}

.queued-message--pending .queued-message__status {
  color: var(--color-text-muted);
  background: rgba(148, 163, 184, 0.1);
}

.queued-message--processing {
  opacity: 0.85;
}

.queued-message--processing .queued-message__status {
  color: var(--color-gold);
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
}

.queued-message--complete {
  opacity: 1;
}

.queued-message--complete .queued-message__status {
  display: none;
}

.narrative-entry.player:not(.queued-message) .queued-message__content {
  display: block;
}

.narrative-entry.player:not(.queued-message) .queued-message__status {
  display: none;
}

@keyframes statusPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .queued-message__status {
    animation: none;
    opacity: 0.8;
  }
}

/* ========================================
 * Party Action Indicator (Multiplayer)
 * ======================================== */

.party-action-indicator {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 8px;
  margin-bottom: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(184, 134, 11, 0.15));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 3px;
}

.party-action-indicator::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-swords) no-repeat center / contain;
  font-size: 0.85em;
}

.party-action-indicator::after {
  content: "'s action";
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
}

/* Ambient awareness: muted nearby party activity */
.ambient-awareness-label {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--retro-cyan, #00CED1);
  opacity: 0.8;
  margin-right: 0.5em;
}

/* Player input alerts */
.narrative-entry.party-action-alert {
  background: rgba(255, 215, 0, 0.04);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  opacity: 0.85;
  border-left: 3px solid rgba(255, 215, 0, 0.4);
  animation: party-fade-in 0.3s ease-out;
}

.party-alert__name {
  color: var(--color-gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: var(--font-size-xs);
}

.party-alert__message {
  color: var(--color-text-secondary);
  font-style: italic;
}

@keyframes party-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 0.85; transform: translateY(0); }
}

/* Party Summary */
.narrative-entry[data-category="party-summary"] {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  opacity: 0.9;
  border-left: 3px solid rgba(255, 215, 0, 0.5);
  background: rgba(255, 215, 0, 0.05);
  animation: party-fade-in 0.3s ease-out;
}

.nf-btn.nf-party-member {
  color: var(--color-gold);
  border-color: rgba(255, 215, 0, 0.3);
}

.nf-btn.nf-party-member.nf-active {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--color-gold);
}

/**
 * Narrative Entry Types — System and Dice
 * ==========================================
 * System messages, combat entries, dice roll results, and whisper entries.
 */

/* ========================================
 * Entry Type: System
 * ======================================== */

.narrative-entry.system {
  background: transparent;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-3);
  opacity: 0.7;
}

.narrative-entry.system:hover {
  opacity: 1;
}

/* ========================================
 * Entry Type: Combat
 * ======================================== */

.narrative-entry.combat {
  background: rgba(220, 20, 60, 0.1);
  color: #ff6b6b;
  animation: combatPulse 0.6s ease-out;
}

.narrative-entry.combat:hover {
  background: rgba(220, 20, 60, 0.15);
}

/* ========================================
 * Entry Type: Success
 * ======================================== */

.narrative-entry.success {
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}

/* ========================================
 * Entry Type: Tool Execution
 * ======================================== */

.narrative-entry.tool-execution {
  background: rgba(255, 215, 0, 0.06);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
  border-left: 2px solid rgba(255, 215, 0, 0.4);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
}

.narrative-entry.tool-execution:hover {
  background: rgba(255, 215, 0, 0.1);
}

.narrative-entry.tool-execution.tool-success {
  border-left-color: rgba(74, 222, 128, 0.6);
}

.narrative-entry.tool-execution.tool-failure {
  border-left-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.05);
}

.tool-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tool-entry__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: bold;
  flex-shrink: 0;
}

.tool-status--success {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
}

.tool-status--failure {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.tool-entry__name {
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--font-size-xs);
}

.tool-entry__message {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Query result data */
.query-result__list {
  list-style: none;
  margin: var(--space-1) 0 0 0;
  padding: 0;
  font-size: var(--font-size-sm);
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  padding-top: var(--space-1);
}

.query-result__item {
  padding: var(--space-1) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.query-result__item:last-child {
  border-bottom: none;
}

.query-result__name {
  font-weight: 600;
  color: var(--color-gold);
  margin-right: var(--space-2);
}

.query-result__type {
  font-size: 0.75em;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.query-result__desc {
  color: var(--color-text-muted);
  font-size: 0.85em;
  margin-top: 2px;
  line-height: 1.3;
}

.query-result__detail {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  font-size: var(--font-size-sm);
}

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

.query-result__metadata {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.query-result__meta-item strong {
  color: var(--color-text-secondary);
/**
 * Narrative Entry Types — Query and Tool
 * =========================================
 * Query result displays and expandable tool message details.
 */

}

/* Expandable details for tool messages */
.tool-entry__details {
  margin-top: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-1);
}

.tool-entry__details-toggle {
  cursor: pointer;
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  user-select: none;
  list-style: none;
}

.tool-entry__details-toggle::-webkit-details-marker {
  display: none;
}

.tool-entry__details-toggle::before {
  content: '\25B8 ';
}

.tool-entry__details[open] > .tool-entry__details-toggle::before {
  content: '\25BE ';
}

.tool-entry__details-content {
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.tool-entry__details-content h4 {
  color: var(--color-gold);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: var(--space-2) 0 var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.tool-entry__details-content h4:first-child {
  margin-top: 0;
}

.tool-entry__details-content h5 {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin: var(--space-1) 0 2px;
}

.tool-entry__details-content ul {
  list-style: none;
  margin: var(--space-1) 0;
  padding: 0 0 0 var(--space-2);
}

.tool-entry__details-content li {
  padding: 1px 0;
  position: relative;
}

.tool-entry__details-content li::before {
  content: '\00B7';
  position: absolute;
  left: calc(-1 * var(--space-2));
  color: var(--color-text-muted);
}

.tool-entry__details-content strong {
  color: var(--color-text-primary);
}

.tool-entry__details-content em {
  font-style: italic;
  color: var(--color-text-secondary);
}

.tool-entry__details-content p {
  margin: var(--space-1) 0;
}

.tool-entry__details-content p:first-child {
  margin-top: 0;
}

/**
 * Narrative Entry Types — Import Hub
 * =====================================
 * Visual styling for each narrative entry type (narration, dice, system, tool).
 *
 * Decomposed into focused files under entry_types/ for maintainability.



 */
/**
 * Entry Content — Base Entry Types
 * ==================================
 * Entry types: magic, lore, player chat, gallery image, reflex, thought, confirmation.
 */

/*
 * Narrative Panel: Entry Content
 * ==============================
 * Magic, lore, chat, gallery, reflex, thought, confirmation,
 * connection lost, tables, dice, streaming, extractable, voice input.
 */

/* ========================================
 * Entry Type: Magic/Spell
 * ======================================== */

.narrative-entry.magic {
  background: var(--color-entity-spell-bg);
  color: var(--color-entity-spell);
}

.narrative-entry.magic:hover {
  animation: magicShimmer 3s ease-in-out infinite;
}

/* ========================================
 * Entry Type: Lore/Description
 * ======================================== */

.narrative-entry.lore {
  background: var(--color-info-bg);
  font-style: italic;
  color: var(--color-accent-info);
}

/* ========================================
 * Entry Type: Player Chat
 * ======================================== */

.narrative-entry.player_chat,
.narrative-entry.player-chat {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-accent-cyan);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
  font-style: italic;
  color: var(--color-text-primary);
}

.narrative-entry.player_chat:hover,
.narrative-entry.player-chat:hover {
  box-shadow: inset 0 1px 0 var(--overlay-white-subtle);
}

.player-chat-sender {
  color: var(--color-accent-cyan);
  font-weight: bold;
  font-style: normal;
  margin-right: var(--space-2);
}

.lobby-chat-sender {
  color: var(--color-accent-secondary);
  font-weight: 600;
  font-style: normal;
  margin-right: var(--space-2);
}

/* ========================================
 * Entry Type: Gallery Image Shared
 * ======================================== */

.narrative-entry .gallery-share-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.narrative-entry .gallery-share-caption {
  color: var(--color-text-secondary);
  font-style: italic;
  display: block;
  margin-top: var(--space-1);
}

.narrative-entry .gallery-share-link {
  display: inline-block;
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity 0.2s ease;
  max-width: 200px;
}

.narrative-entry .gallery-share-link:hover {
  opacity: 0.85;
}

.narrative-entry .gallery-share-thumbnail {
  display: block;
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  object-fit: cover;
}

/* ========================================
 * Entry Type: Reflex Response
 * ======================================== */

.narrative-entry.reflex-response {
  background: transparent;
  border-left: 2px solid rgba(255, 215, 0, 0.3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  opacity: 0.85;
}

.narrative-entry.reflex-response .reflex-text {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.narrative-entry.reflex-response:hover {
  transform: none;
}

.narrative-entry.animate-fade-in {
  animation: reflexFadeIn 0.2s ease-out;
}

@keyframes reflexFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 0.85; transform: translateY(0); }
}

/* ========================================
 * Entry Type: Character Thought
 * ======================================== */

.narrative-entry.character-thought {
  background: var(--color-entity-spell-bg);
  border-left: 2px solid var(--color-accent-purple);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  opacity: 0.9;
}

.narrative-entry.character-thought .thought-text {
  color: var(--color-entity-spell);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.narrative-entry.character-thought:hover {
  transform: none;
  opacity: 1;
}

.narrative-entry.character-thought.thought-memory {
  border-left-color: var(--color-warning-emphasis);
  background: var(--color-warning-subtle);
}

.narrative-entry.character-thought.thought-memory .thought-text {
  color: var(--color-warning-fg);
}

.narrative-entry.character-thought.thought-situation {
  border-left-color: var(--color-text-muted);
  background: var(--overlay-white-subtle);
}

.narrative-entry.character-thought.thought-situation .thought-text {
  color: var(--color-text-secondary);
}

.narrative-entry.character-thought.thought-suggestion {
  border-left-color: var(--color-success-emphasis);
  background: var(--color-success-subtle);
}

.narrative-entry.character-thought.thought-suggestion .thought-text {
  color: var(--color-success-fg);
}

.narrative-entry.character-thought.thought-creation {
  border-left-color: var(--color-accent-cyan);
  background: var(--color-entity-npc-bg);
}

.narrative-entry.character-thought.thought-creation .thought-text {
  color: var(--color-entity-npc);
}

.narrative-entry.animate-thought-in {
  animation: thoughtFadeIn 0.3s ease-out;
}

@keyframes thoughtFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 0.9; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.animate-thought-in {
    animation: none;
  }
}

/* ========================================
 * Entry Type: Confirmation
 * ======================================== */

.narrative-entry.confirmation {
  background: transparent;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin-bottom: var(--space-1, 4px);
  animation: confirmationFadeIn 0.2s ease-out;
}

.narrative-entry.confirmation:hover {
  background: transparent;
}

.confirmation-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

.confirmation-badge__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--color-accent-secondary);
  border-radius: 50%;
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.confirmation-badge__text {
  color: var(--color-text-secondary);
}

.confirmation-badge__next {
  color: var(--color-text-muted);
  font-style: italic;
  opacity: 0.8;
}

.confirmation-badge__separator {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.confirmation {
    animation: none;
  }
}

/* ========================================
 * Connection Lost Prompt
 * ======================================== */

.connection-lost-prompt {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-danger-subtle);
  border: 2px solid var(--color-accent-error);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
}

.connection-lost-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.connection-lost-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-accent-error);
  animation: pulse-warning 2s ease-in-out infinite;
}

.connection-lost-message {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.connection-lost-refresh {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-error);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-fg-on-emphasis);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.connection-lost-refresh:hover {
  background: var(--color-danger-emphasis);
}

.connection-lost-refresh:active {
  background: var(--color-danger-muted);
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .connection-lost-icon {
    animation: none;
  }
/**
 * Entry Content — Tables & Dice
 * ================================
 * Markdown tables, dice roll display, and connection lost prompt.
 */


/* ========================================
 * Markdown Tables
 * ======================================== */

.narrative-entry table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--font-size-sm);
  background: var(--overlay-light-plus);
  border: 1px solid var(--overlay-gold-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.narrative-entry thead {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.15), rgba(184, 134, 11, 0.1));
}

.narrative-entry th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: bold;
  color: #ffd700;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  white-space: nowrap;
}

.narrative-entry td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  color: var(--color-text-primary);
}

.narrative-entry tbody tr:last-child td {
  border-bottom: none;
}

.narrative-entry tbody tr:nth-child(even) {
  background: rgba(255, 215, 0, 0.03);
}

.narrative-entry tbody tr:hover {
  background: rgba(255, 215, 0, 0.08);
}

.narrative-entry.dm table {
  background: rgba(139, 69, 19, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
}

.narrative-entry.dm thead {
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.15));
}

.narrative-entry.combat table {
  border-color: rgba(220, 20, 60, 0.4);
}

.narrative-entry.combat thead {
  background: linear-gradient(180deg, rgba(220, 20, 60, 0.2), rgba(139, 0, 0, 0.15));
}

.narrative-entry.combat th {
  color: #ff6b6b;
  border-bottom-color: rgba(220, 20, 60, 0.4);
}

.narrative-entry.combat td {
  border-bottom-color: rgba(220, 20, 60, 0.15);
}

/* ========================================
 * Dice Roll Display
 * ======================================== */

.dice-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: bold;
}

.dice-result.critical {
  background: rgba(52, 211, 153, 0.2);
  border-color: #34d399;
  color: #34d399;
  animation: criticalGlow 0.5s ease-out;
}

.dice-result.fumble {
  background: rgba(220, 20, 60, 0.2);
  border-color: #dc143c;
  color: #dc143c;
}

@keyframes criticalGlow {
  0% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.8); }
  100% { box-shadow: 0 0 5px rgba(52, 211, 153, 0.3); }
}

/* ========================================
 * Streaming Narrative Entry
 * ======================================== */

.narrative-entry.streaming {
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
}

.narrative-entry.streaming .streaming-text::after {
  content: '\2588';
  animation: streaming-blink 1s step-end infinite;
  color: var(--color-gold);
}

.narrative-entry.streaming[data-stream-complete="true"] .streaming-text::after {
  display: none;
}

@keyframes streaming-blink {
  50% { opacity: 0; }
}
/**
 * Entry Content — Streaming
 * ==========================
 * Streaming narrative entry and enhanced text transition.
 */

/* ========================================
 * Streaming Enhanced Text Transition
 * ======================================== */

.narrative-entry.stream-enhancing {
  position: relative;
  overflow: hidden;
  opacity: 0.85;
  border-left: 2px solid var(--color-gold);
}

.narrative-entry.stream-enhancing::after {
  content: 'Enhancing...';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.9;
  z-index: var(--z-sticky);
  animation: enhancingPulse 1s ease-in-out infinite;
}

@keyframes enhancingPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.narrative-entry.stream-enhancing::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15) 25%, rgba(255, 215, 100, 0.25) 50%, rgba(212, 175, 55, 0.15) 75%, transparent);
  animation: shimmerWave 0.6s ease-in-out forwards;
  pointer-events: none;
  z-index: var(--z-sticky);
}

@keyframes shimmerWave {
  0% { left: -100%; }
  100% { left: 100%; }
}

.narrative-entry.stream-enhanced {
  animation: enhanceGlow 0.4s ease-out;
}

@keyframes enhanceGlow {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.2); }
  100% { box-shadow: none; }
}

.narrative-entry.streaming.stream-fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.narrative-entry.stream-replaced {
  animation: streamReplaceFadeIn 0.3s ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.streaming.stream-fade-out {
    transition: none;
    opacity: 0;
  }
  .narrative-entry.stream-replaced {
    animation: none;
  }
  .narrative-entry.stream-enhancing::before {
    animation: none;
    display: none;
  }
  .narrative-entry.stream-enhancing::after {
    animation: none;
    opacity: 0.8;
  }
  .narrative-entry.stream-enhanced {
    animation: none;
  }
}

/* ========================================
 * Extractable Segment Pin Button
 * ======================================== */

[data-extractable="true"] {
  position: relative;
}

.segment-extract-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--overlay-heavy);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  z-index: var(--z-float);
}

[data-extractable="true"]:hover .segment-extract-btn {
  display: flex;
  opacity: 0.7;
}

.segment-extract-btn:hover {
  opacity: 1;
  color: var(--color-accent-primary);
  background: var(--overlay-white-subtle);
  border-color: var(--color-accent-primary);
}

.segment--extracted {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.narrative-extract-panel {
  padding: 8px 12px;
}

.narrative-extract-panel__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.narrative-extract-panel__content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
}

/* ========================================
 * Voice Input Mic Button
 * ======================================== */

.input-area .voice-input-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.input-area .voice-mic-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.input-area .voice-mic-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.input-area .voice-mic-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.input-area .voice-mic-btn.voice-active {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-fg);
  color: var(--color-danger-fg);
  animation: voice-pulse 1.5s ease-in-out infinite;
}

.input-area .voice-indicator {
  font-size: 11px;
  color: var(--color-danger-fg);
  animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/**
 * Narrative Panel: Entry Content — Import Hub
 * ==============================================
 * Entry type styles, tables, dice rolls, and streaming text.
 *
 * Decomposed into focused files under entry_content/ for maintainability.



 */
/*
 * Narrative Panel: Input Area
 * ===========================
 * Input bar, selection trays, and related controls.
 */

/* ========================================
 * Input Area (fixed at bottom)
 * ======================================== */

.input-area {
  /* position:sticky on mobile is set in mobile_enhancements.css.
     position:relative is the desktop default, applied below in the
     min-width media query to avoid overriding mobile sticky. */
  flex-shrink: 0;
  flex-grow: 0;
  max-height: 200px;
  padding: var(--space-3);
  padding-left: var(--space-3);
  padding-left: env(safe-area-inset-left, 12px);
  padding-right: var(--space-3);
  padding-right: env(safe-area-inset-right, 12px);
  padding-bottom: var(--space-3);
  padding-bottom: env(safe-area-inset-bottom, 12px);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--overlay-gold-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Mobile: pin input bar to the bottom of the viewport, independent of which
   panel is active. position:fixed removes it from normal flow so the input
   is always reachable even when the user switches to a non-narrative panel.

   Constraints (task #5119):
   - position:fixed only at <768px — desktop keeps position:relative (below)
   - left/right 0 so the bar spans the full viewport width
   - z-index ABOVE the bottom-sheet overlay (#5123: sheet at --z-sheet=300;
     input bar at --z-sheet+1=301 so it always renders above the sheet)
   - safe-area-inset-bottom so the bar clears the home indicator on notched phones
   - width/box-sizing so horizontal padding doesn't cause overflow */
@media (max-width: 767px) {
  .input-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    /* #5123: +1 above the bottom-sheet overlay (--z-sheet=300) so input is always
       visible. The .mobile-bottom-sheet element is appended to document.body AFTER
       the static .input-area in the DOM, so at the same z-index the sheet would win.
       One level higher guarantees the input bar is always above the sheet. */
    z-index: calc(var(--z-sheet) + 1); /* 301 */
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    /* CSS variable allows MobileKeyboardManager to lift the bar above the keyboard
       without modifying narrative-main layout. Reset to 0px when keyboard is closed. */
    bottom: calc(0px + var(--mobile-keyboard-offset, 0px));
  }
}

@media (min-width: 768px) {
  .input-area {
    position: relative;
  }
}

/* Input field styling */
.input-area input[type="text"],
.input-area textarea {
  background: var(--overlay-medium-plus);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.input-area input[type="text"]:focus,
.input-area textarea:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

.input-area input[type="text"]:focus-visible,
.input-area textarea:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

/* Mobile: compact input area */
@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .input-area {
    padding: var(--space-2);
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: env(safe-area-inset-right, 8px);
    padding-bottom: env(safe-area-inset-bottom, 8px);
    gap: var(--space-1);
  }
}

/* ========================================
 * Selection Trays (spell, equipment, etc.)
 * ======================================== */

.selection-tray,
.equipment-tray,
.spell-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  animation: traySlideUp 0.3s ease-out;
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.send-selections-btn {
  flex-shrink: 0;
  align-self: flex-end;
}

.spell-tray {
  border-color: var(--color-accent-purple);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-purple) 10%, transparent), color-mix(in srgb, var(--color-accent-purple) 5%, transparent));
}

.equipment-tray {
  border-color: var(--color-accent-warning);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-warning) 10%, transparent), color-mix(in srgb, var(--color-accent-warning) 5%, transparent));
}

/* State-driven visibility (preferred over inline style mutations) */
.selection-tray--hidden,
.equipment-tray--hidden {
  display: none;
}

/* Drop-target highlight when an image is being dragged from the gallery
   (#3797 — drag-into-narrative). The class is toggled by
   terminal--narrative-drop on dragover/dragleave. */
.input-area--drop-target {
  background: var(--accent-primary-soft, rgba(255, 191, 0, 0.08));
  outline: 2px dashed var(--accent-primary, #ffbf00);
  outline-offset: -4px;
}

/* ========================================
 * Input-area DM co-pilot mode bar (#4598)
 * Three-pill toggle [Chat | Plan | Auto] in the input area Zone E.
 * Only rendered when has_dm_powers. Managed by channel_tabs_controller.
 * ======================================== */

.input-area-dm-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.input-area-dm-mode__label {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.input-area-dm-mode__pills {
  display: flex;
  gap: 0.25rem;
}

.input-area-dm-mode__pill {
  padding: 0.1875rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.6875rem;
  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);
}

.input-area-dm-mode__pill:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.input-area-dm-mode__pill--active {
  background: var(--dm-accent-bg, #2a2a0d);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
  color: var(--dm-accent-color, var(--color-channel-dm));
}

.input-area-dm-mode__hint {
  font-size: 0.5625rem;
  color: var(--text-muted, #888);
  margin-left: auto;
}

.input-area-dm-mode__hint kbd {
  display: inline-block;
  padding: 0.0625rem 0.1875rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--border-color, #333);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
}

/* Mobile: hide hint text to save space */
@media (max-width: 767px) {
  .input-area-dm-mode__hint {
    display: none;
  }
}
/**
 * Narrative Loading — Base Indicators
 * =====================================
 * Loading spinner, typing indicator, floating AI thinking indicator,
 * prominent DM responding, and enhanced AI loading states.
 */

/*
 * Narrative Panel: Loading States
 * ================================
 * Loading spinner, typing indicator, AI thinking float,
 * DM responding bar, and DM thinking indicator.
 */

/* ========================================
 * Loading Spinner
 * ======================================== */

.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-top-color: #ffd700;
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
}

@keyframes loadingSpin {
  to { transform: rotate(360deg); }
}

.loading-text {
  display: inline-block;
  margin-left: 8px;
  color: var(--gold-text, #ffd700);
  font-size: var(--font-size-base);
  font-style: italic;
  animation: loadingFade 1.5s ease-in-out infinite;
}

@keyframes loadingFade {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

#loading-indicator {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.loading-container {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

/* ========================================
 * Typing Indicator
 * ======================================== */

.typing-indicator {
  display: flex;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  align-items: center;
}

.typing-indicator span {
  width: 8px;
  height: 8px;
  background: #ffd700;
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* ========================================
 * Floating AI Thinking Indicator (Scrying Orb)
 * ======================================== */

.ai-thinking-float {
  /* Legacy position — used when float is inside .input-area (fallback path
     with no #dm-responding-bar-host). Anchors the orb 40px above the input
     area's top edge so it hovers over the bottom of the narrative area. */
  position: absolute;
  top: -40px;
  right: 16px;
  z-index: var(--z-scroll-anchor);
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: none;
}

/* When the float is a direct child of #dm-responding-bar-host (the normal
   production path — host is position:fixed above the input row, #5076).
   Position the orb at the right edge of the bar area, vertically aligned
   with the bar's status row. position:absolute is relative to the host
   (position:fixed), so bottom:0 aligns with the host's bottom edge.
   host-padding-bottom(8) + bar-padding-bottom(12) + half(icon-row 24/2) - half(orb-height 32/2)
   = 8 + 12 + 12 - 16 = 16px from bottom. */
#dm-responding-bar-host > .ai-thinking-float {
  position: absolute;
  bottom: 16px;
  right: var(--space-2, 8px); /* sits just inside the host's right padding */
  top: auto;
  left: auto;
}

.ai-thinking-float--visible {
  opacity: 0.85;
  transform: scale(1);
  animation: thinkingPulseFloat 2.5s ease-in-out infinite;
}

.ai-thinking-float--hiding {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease-in, transform 0.3s ease-in;
}

.ai-thinking-float__orb {
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 12px rgba(155, 89, 182, 0.3));
}

.ai-thinking-float__queue {
  display: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-gold, #ffd700);
  color: #1a1a2e;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  position: absolute;
  top: -4px;
  right: -4px;
}

.ai-thinking-float--extended .ai-thinking-float__orb {
  filter: drop-shadow(0 0 4px rgba(153, 153, 153, 0.4));
}

@keyframes thinkingPulseFloat {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-thinking-float--visible {
    animation: none;
    opacity: 0.85;
  }
}

/* ========================================
 * Prominent DM Responding Indicator
 * ======================================== */

/* Persistent host that survives seamless room transitions (#2989, #4425, #5076).
   Lives in show.html.erb outside .terminal-zones / .grid-layout-wrapper so
   room_transition_coordinator._swapDOM cannot destroy it mid-request.

   Positioned as a BOTTOM GUTTER directly above the input row (#5076).
   The bar grows UPWARD from just above the input as the pipeline-progress
   step list is appended, expanding over the narrative scroll area — which
   is recoverable (scrollable content). The typing surface at the bottom
   is never occluded.

   --input-area-height is defined in _tokens.css (56px = 8px top-pad + 40px
   input-line + 8px bottom-pad). */
.dm-responding-bar-host {
  /* Moved INTO the input-area as Zone B passive indicator (2026-05-14 per JP).
     Flow-positioned above the input row, sharing layout with contextual chips
     and message-queue indicator. Higher-opacity surface signals "temporary
     overlay sitting inside the entry box" rather than full-width gutter. */
  position: relative;
  z-index: var(--z-narrative-loading); /* above neighboring chips when stacked */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 var(--space-2, 8px) var(--space-2, 8px);
  pointer-events: none; /* child bar re-enables for retry-button interaction */
}

/* When no dm-responding-bar child is present, collapse padding so the host
   doesn't reserve vertical space above the input. */
.dm-responding-bar-host:not(:has(.dm-responding-bar)) {
  padding-bottom: 0;
}

.dm-responding-bar-host > .dm-responding-bar {
  pointer-events: auto; /* retry button + dismiss-on-click need to work */
}

/* Pipeline-progress-host is moved inside .dm-responding-bar at runtime;
   pointer-events flow through from the bar's own auto rule. This rule
   guards the legacy case where the host sits directly in the bar-host
   (between turns, before the bar is created). */
.dm-responding-bar-host > .pipeline-progress-host:not([hidden]) {
  pointer-events: auto;
}

.dm-responding-bar {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-3) var(--space-4);
  /* Translucent purple — the bar lives INSIDE input-area (2026-05-14) but the
     subtle alpha matches the original gutter aesthetic per JP iteration. */
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.2) 50%, rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: dmRespondingPulse 2s ease-in-out infinite;
}

.dm-responding-bar__status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.dm-responding-bar--visible {
  display: flex;
  animation: dmRespondingEnter 0.3s ease-out, dmRespondingPulse 2s ease-in-out 0.3s infinite;
}

/* Hide contextual tip/hint chips while the DM-responding bar is visible
   so they don't stack on top of the loading state (#2848). */
.dm-responding-bar--visible ~ .contextual-chips-container {
  display: none !important;
}

.dm-responding-bar--hiding {
  display: flex;
  animation: dmRespondingExit 0.2s ease-in forwards;
}

.dm-responding-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.dm-responding-bar__icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold, #ffd700);
  animation: dmRespondingQuill 1.5s ease-in-out infinite;
}

.dm-responding-bar__text {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--color-text-primary);
  letter-spacing: 0.3px;
}

.dm-responding-bar__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-1);
}

.dm-responding-bar__dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold, #ffd700);
  border-radius: 50%;
  animation: dmRespondingDot 1.4s ease-in-out infinite;
}

.dm-responding-bar__dot:nth-child(1) { animation-delay: 0s; }
.dm-responding-bar__dot:nth-child(2) { animation-delay: 0.2s; }
.dm-responding-bar__dot:nth-child(3) { animation-delay: 0.4s; }

.dm-responding-bar__stage {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* Extended wait state */
.dm-responding-bar--extended {
  background: linear-gradient(90deg, rgba(100, 100, 100, 0.15), rgba(120, 120, 120, 0.2) 50%, rgba(100, 100, 100, 0.15));
  border-color: rgba(150, 150, 150, 0.4);
}

.dm-responding-bar--extended .dm-responding-bar__dot {
  background: var(--color-text-muted);
}

.dm-responding-bar--extended .dm-responding-bar__icon svg {
  color: var(--color-text-muted);
}

/* Error/timeout state */
.dm-responding-bar--error {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.15), rgba(239, 68, 68, 0.2) 50%, rgba(220, 38, 38, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
  animation: dmRespondingEnter 0.3s ease-out;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.dm-responding-bar--error .dm-responding-bar__icon--error svg {
  color: var(--color-error, #cf6068);
  animation: none;
}

.dm-responding-bar--error .dm-responding-bar__text {
  color: var(--color-error, #cf6068);
  font-style: normal;
}

/* Retry button inside error bar (#1796) */
.dm-responding-bar__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error, #cf6068);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm-responding-bar__retry-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
}

.dm-responding-bar__retry-btn:focus-visible {
  outline: 2px solid var(--color-error, #cf6068);
  outline-offset: 2px;
}

.dm-responding-bar__retry-icon svg {
  width: 16px;
  height: 16px;
}

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

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

@keyframes dmRespondingPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}

@keyframes dmRespondingQuill {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes dmRespondingDot {
  0%, 80%, 100% { opacity: 0.4; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-responding-bar,
  .dm-responding-bar--visible {
    animation: none;
  }
  .dm-responding-bar__icon svg {
    animation: none;
  }
  .dm-responding-bar__dot {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}

@media (max-width: 768px) {
  /* On mobile, account for safe-area-inset-bottom (iPhone notch/home bar) so
     the bar always clears the input row. The input-area already adds
     env(safe-area-inset-bottom) to its own padding-bottom, so the host must
     also offset by the same amount. */
  .dm-responding-bar-host {
    bottom: calc(var(--input-area-height, 56px) + env(safe-area-inset-bottom, 0px));
  }

  .dm-responding-bar {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }
  .dm-responding-bar__status-row {
    gap: var(--space-1-5);
  }
  .dm-responding-bar__icon {
    width: 18px;
    height: 18px;
  }
  .dm-responding-bar__icon svg {
    width: 14px;
    height: 14px;
  }
  .dm-responding-bar__text {
    font-size: var(--font-size-xs);
  }
  .dm-responding-bar__dots {
    gap: 3px;
  }
  .dm-responding-bar__dot {
    width: 4px;
    height: 4px;
  }
  .dm-responding-bar__stage {
    display: none;
  }
}

/**
 * Narrative Loading — Context & Streaming
 * =========================================
 * DM thinking legacy, context-aware messages, streaming text animation,
 * and connection status bar.
 */

 * DM Thinking Indicator (Legacy - #1348)
 * ========================================
 * Deprecated: Inline dm_thinking indicators are no longer created.
 * All thinking/processing feedback now uses the unified DM Responding
 * Bar above. These styles are retained for backward compat with any
 * cached DOM or stale server responses.
 * ======================================== */

.dm-thinking-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
  border-left: 3px solid var(--color-accent, #8b5cf6);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  animation: dm-thinking-fade-in 0.3s ease-out;
}

.dm-thinking-indicator__icon {
  font-size: 1.25rem;
  animation: dm-thinking-quill 2s ease-in-out infinite;
}

.dm-thinking-indicator__text {
  font-style: italic;
  letter-spacing: 0.3px;
}

.dm-thinking-indicator__dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}

.dm-thinking-indicator__dot {
  width: 4px;
  height: 4px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: dm-thinking-pulse 1.4s ease-in-out infinite;
}

.dm-thinking-indicator__dot:nth-child(1) { animation-delay: 0s; }
.dm-thinking-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.dm-thinking-indicator__dot:nth-child(3) { animation-delay: 0.4s; }

.dm-thinking-indicator__timer {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-left: var(--space-2);
  min-width: 2.5em;
  text-align: right;
}

@keyframes dm-thinking-fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dm-thinking-quill {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes dm-thinking-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-thinking-indicator {
    animation: none;
  }
  .dm-thinking-indicator__icon {
    animation: none;
  }
  .dm-thinking-indicator__dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ========================================
 * Enhanced AI Loading States
 * ======================================== */

.thinking-indicator__stage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.thinking-indicator__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4) 50%, rgba(255, 215, 0, 0.8));
  background-size: 200% 100%;
  animation: progressShimmer 1.5s ease-in-out infinite;
  width: 0%;
  transition: width 0.5s ease-out;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.thinking-indicator__stage[data-stage="thinking"] ~ .thinking-indicator__progress { width: 0%; }
.thinking-indicator__stage[data-stage="understanding"] ~ .thinking-indicator__progress { width: 15%; }
.thinking-indicator__stage[data-stage="planning"] ~ .thinking-indicator__progress { width: 35%; }
.thinking-indicator__stage[data-stage="generating"] ~ .thinking-indicator__progress { width: 55%; }
.thinking-indicator__stage[data-stage="executing"] ~ .thinking-indicator__progress { width: 75%; }

.thinking-indicator__stage[data-stage="extended"] ~ .thinking-indicator__progress {
  width: 85%;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.8), rgba(245, 158, 11, 0.4) 50%, rgba(245, 158, 11, 0.8));
}

.thinking-indicator__stage[data-stage="delayed"] ~ .thinking-indicator__progress {
  width: 95%;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.3) 50%, rgba(239, 68, 68, 0.6));
}

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

.thinking-indicator--extended {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.thinking-indicator--extended .thinking-indicator__text {
  color: #f59e0b;
}

.thinking-indicator--extended .thinking-indicator__dots span {
  background: #f59e0b;
}

/* ========================================
 * Context-Aware Thinking Messages
 * ======================================== */

.thinking-indicator__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid rgba(255, 215, 0, 0.2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.thinking-indicator__context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.thinking-indicator__context-icon--dice::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%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='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--combat::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -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='M6.92 5L5 7l6 6-6 6 1.92 2 6-6.06L19 21l1.92-2-6-6 6-6L19 5l-6.08 5.94L6.92 5z'/%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='M6.92 5L5 7l6 6-6 6 1.92 2 6-6.06L19 21l1.92-2-6-6 6-6L19 5l-6.08 5.94L6.92 5z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--dialogue::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -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='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%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='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--memory::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
 * Streaming Text Animation
 * ======================================== */

.streaming-text {
  position: relative;
}

.streaming-text--active::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--color-gold, #ffd700);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.streaming-word {
  display: inline;
  animation: wordReveal 0.1s ease-out forwards;
  opacity: 0;
}

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

/* ========================================
 * Connection Status Bar (#2642)
 * ========================================
 * Distinct from the DM responding bar — thinner,
 * blue/teal tones, purely informational.
 * Shows during initial connect and reconnection.
 * ======================================== */

.connection-status-bar {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-1-5) var(--space-3);
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(45, 212, 191, 0.15) 50%, rgba(56, 189, 248, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1-5);
}

.connection-status-bar--visible {
  display: flex;
  animation: connectionBarEnter 0.25s ease-out;
}

.connection-status-bar--hiding {
  display: flex;
  animation: connectionBarExit 0.2s ease-in forwards;
}

.connection-status-bar__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.connection-status-bar__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.8;
}

.connection-status-bar__icon svg {
  width: 14px;
  height: 14px;
  color: rgba(56, 189, 248, 0.9);
  animation: connectionPulseIcon 2s ease-in-out infinite;
}

.connection-status-bar__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.connection-status-bar__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.connection-status-bar__dot {
  width: 4px;
  height: 4px;
  background: rgba(56, 189, 248, 0.7);
  border-radius: 50%;
  animation: connectionDotPulse 1.4s ease-in-out infinite;
}

.connection-status-bar__dot:nth-child(1) { animation-delay: 0s; }
.connection-status-bar__dot:nth-child(2) { animation-delay: 0.2s; }
.connection-status-bar__dot:nth-child(3) { animation-delay: 0.4s; }

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

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

@keyframes connectionPulseIcon {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes connectionDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .connection-status-bar--visible {
    animation: none;
  }
  .connection-status-bar__icon svg {
    animation: none;
    opacity: 0.8;
  }
  .connection-status-bar__dot {
    animation: none;
    opacity: 0.6;
  }
}

@media (max-width: 768px) {
  .connection-status-bar {
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
  }
  .connection-status-bar__content {
    gap: var(--space-1);
  }
  .connection-status-bar__icon svg {
    width: 12px;
    height: 12px;
  }
  .connection-status-bar__text {
    font-size: 0.7rem;
  }
  .connection-status-bar__dot {
    width: 3px;
    height: 3px;
  }
}
/**
 * Narrative Loading States — Import Hub
 * ========================================
 * Loading spinners, typing indicators, AI thinking, and streaming text.
 *
 * Decomposed into focused files under loading/ for maintainability.


 */
/*
 * Narrative Panel: Animations
 * ============================
 * Segment entrance animations, reduced motion,
 * message arrival/highlight, and shared keyframes.
 */

/* ========================================
 * Segment Entrance Animations
 * ======================================== */

@keyframes entrySlideIn {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes npcDialogueEnter {
  0% { opacity: 0; transform: translateY(6px); border-left-width: 0; }
  50% { border-left-width: 4px; }
  100% { opacity: 1; transform: translateY(0); border-left-width: 4px; }
}

@keyframes combatActionEnter {
  0% { opacity: 0; transform: translateY(4px) scale(0.98); }
  50% { transform: translateY(-1px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes magicEnter {
  0% { opacity: 0; transform: scale(0.95); }
  60% { opacity: 0.85; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes loreEnter {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes systemEnter {
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes rollResultEnter {
  0% { opacity: 0; transform: scale(0.8); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes expandableEnter {
  0% { opacity: 0; transform: scaleY(0.8); transform-origin: top; }
  100% { opacity: 1; transform: scaleY(1); }
}

/* Staggered entrance */
.narrative-entry--stagger-1 { animation-delay: 0s; }
.narrative-entry--stagger-2 { animation-delay: 0.05s; }
.narrative-entry--stagger-3 { animation-delay: 0.1s; }
.narrative-entry--stagger-4 { animation-delay: 0.15s; }
.narrative-entry--stagger-5 { animation-delay: 0.2s; }

/* Apply segment-specific animations */
.narrative-entry.dm .segment-npc { animation: npcDialogueEnter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.narrative-entry.combat,
.narrative-entry .segment-combat_log { animation: combatActionEnter 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.narrative-entry.magic,
.narrative-entry .segment-magic { animation: magicEnter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.narrative-entry.lore,
.narrative-entry .segment-lore { animation: loreEnter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.narrative-entry.system,
.narrative-entry .segment-system { animation: systemEnter 0.2s ease-out; }
.narrative-entry .segment-roll_result { animation: rollResultEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.expandable-segment { animation: expandableEnter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* ========================================
 * Shared Keyframes
 * ======================================== */

@keyframes combatPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(220, 20, 60, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  50% { box-shadow: 0 2px 12px rgba(220, 20, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
}

@keyframes magicShimmer {
  0%, 100% { box-shadow: 0 2px 8px rgba(138, 43, 226, 0.2), inset 0 0 20px rgba(138, 43, 226, 0.05); }
  50% { box-shadow: 0 2px 12px rgba(138, 43, 226, 0.35), inset 0 0 30px rgba(138, 43, 226, 0.1); }
}

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

/* ========================================
 * Message Arrival Animation
 * ======================================== */

.narrative-entry--new { animation: messageArrival 0.4s ease-out; }

@keyframes messageArrival {
  from { opacity: 0; transform: translateY(8px); background: rgba(255, 215, 0, 0.1); }
  50% { background: rgba(255, 215, 0, 0.05); }
  to { opacity: 1; transform: translateY(0); background: transparent; }
}

.narrative-entry--highlight { animation: messageHighlight 1.5s ease-out; }

@keyframes messageHighlight {
  0% { box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.5); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}

/* ========================================
 * Reduced Motion — Global
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .narrative-entry,
  .narrative-entry.dm .segment-npc,
  .narrative-entry.combat,
  .narrative-entry .segment-combat_log,
  .narrative-entry.magic,
  .narrative-entry .segment-magic,
  .narrative-entry.lore,
  .narrative-entry .segment-lore,
  .narrative-entry.system,
  .narrative-entry .segment-system,
  .narrative-entry .segment-roll_result,
  .expandable-segment {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .narrative-entry,
  .selection-tray,
  .equipment-tray,
  .spell-tray {
    animation: none;
  }

  .narrative-entry.combat,
  .narrative-entry.magic {
    animation: none;
  }

  .typing-indicator span {
    animation: none;
    opacity: 1;
  }

  .new-messages-indicator__icon { animation: none; }
  .streaming-text--active::after { animation: none; opacity: 1; }
  .streaming-word { animation: none; opacity: 1; }
  .narrative-entry--new { animation: none; opacity: 1; }
  .narrative-entry--highlight { animation: none; box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.3); }
  .scroll-to-bottom { transition: none; }
  .new-messages-indicator { transition: opacity 0.01s; }
}
/*
 * Narrative Panel: Scroll Controls
 * ==================================
 * New messages indicator, scroll-to-bottom button.
 */

/* ========================================
 * New Messages Indicator
 * ======================================== */

.new-messages-indicator {
  position: sticky;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.95), rgba(218, 165, 32, 0.95));
  border: none;
  border-radius: var(--radius-pill);
  color: #1a1a1a;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 215, 0, 0.3);
  z-index: var(--z-scroll-btn);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast) ease-out, visibility var(--transition-fast) ease-out, transform var(--transition-fast) ease-out;
}

.new-messages-indicator--visible {
  opacity: 1;
  visibility: visible;
}

.new-messages-indicator:hover {
  transform: translateX(-50%) scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 215, 0, 0.4);
}

.new-messages-indicator:active {
  transform: translateX(-50%) scale(0.98);
}

.new-messages-indicator__icon {
  display: flex;
  align-items: center;
  animation: newMessagesBounce 1s ease-in-out infinite;
}

.new-messages-indicator__icon::before {
  content: '';
  width: 16px;
  height: 16px;
  background: #1a1a1a;
  -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='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%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='M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}

@keyframes newMessagesBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.new-messages-indicator__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #1a1a1a;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold, #ffd700);
}

/* ========================================
 * Scroll-to-Bottom Button
 * ======================================== */

.scroll-to-bottom {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: 50%;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-fast) ease-out, visibility var(--transition-fast) ease-out, transform var(--transition-fast) ease-out, background var(--transition-fast) ease-out, border-color var(--transition-fast) ease-out;
  z-index: var(--z-scroll-anchor);
}

.scroll-to-bottom--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-bottom:hover {
  background: var(--color-bg-tertiary, #252542);
  border-color: var(--color-gold, #ffd700);
  color: var(--color-gold, #ffd700);
}

.scroll-to-bottom:active { transform: scale(0.95); }

.scroll-to-bottom__icon::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -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='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%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='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");
}

.scroll-to-bottom__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-gold, #ffd700);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: #1a1a1a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.scroll-to-bottom__badge:empty { display: none; }
/**
 * Wiki Links — Base and Skill Opportunities
 * ==========================================
 * Wiki link base styles, skill opportunity hints, DC coding, and roll states.
 */

/*
 * Narrative Panel: Wiki Links & Interactive Elements
 * ===================================================
 * Entity links, skill opportunities, narrative hooks,
 * inline locations, inline items, and enrichment feedback.
 */

/* ========================================
 * Wiki-Style Links
 * ======================================== */

.wiki-link {
  color: #90a959;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  padding: 0 2px;
  border-radius: 2px;
}

.wiki-link:hover {
  color: #b8d974;
  background: rgba(144, 169, 89, 0.15);
  text-decoration-style: solid;
}

.wiki-link[data-entity-type="spell"] { color: #aa759f; }
.wiki-link[data-entity-type="spell"]:hover { color: #c99bc1; background: rgba(170, 117, 159, 0.15); }

.wiki-link[data-entity-type="skill"] { color: #6a9fb5; }
.wiki-link[data-entity-type="skill"]:hover { color: #8cc4d9; background: rgba(106, 159, 181, 0.15); }

.wiki-link[data-entity-type="ability"] { color: #f4bf75; }
.wiki-link[data-entity-type="ability"]:hover { color: #ffd699; background: rgba(244, 191, 117, 0.15); }

.wiki-link[data-entity-type="term"] { color: #ac9d9a; }
.wiki-link[data-entity-type="term"]:hover { color: #cfc4c1; background: rgba(172, 157, 154, 0.15); }

.wiki-link[data-entity-type="unknown"] { color: #90a959; }

.wiki-link[data-entity-type="npc"] { color: #f4bf75; text-decoration-style: solid; }
.wiki-link[data-entity-type="npc"]:hover { color: #ffd699; background: rgba(244, 191, 117, 0.15); }

.wiki-link[data-entity-type="location"] { color: #5fb3b3; text-decoration-style: solid; }
.wiki-link[data-entity-type="location"]:hover { color: #7fcfcf; background: rgba(95, 179, 179, 0.15); }

.wiki-link[data-entity-type="condition"] { color: #d27b53; }
.wiki-link[data-entity-type="condition"]:hover { color: #e89b73; background: rgba(210, 123, 83, 0.15); }

/* ========================================
 * Skill Opportunities
 * ======================================== */

.wiki-link[data-entity-type="skill_opportunity"],
.skill-opportunity {
  color: #fcd34d;
  text-decoration: underline;
  text-decoration-style: wavy;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 215, 0, 0.5);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  padding: 0 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
}

.wiki-link[data-entity-type="skill_opportunity"]:hover,
.skill-opportunity:hover {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.15);
  text-decoration-color: rgba(255, 215, 0, 0.8);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.skill-opportunity:focus-visible {
  outline: 2px solid #ffd700;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.2);
}

.skill-opportunity {
  position: relative;
}

.skill-opportunity::before {
  content: '';
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 0.85em;
  height: 0.85em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: var(--z-sticky);
}

.skill-opportunity:hover::before,
.skill-opportunity:focus-visible::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
  animation: diceHover 1s ease-in-out infinite;
}

@keyframes diceHover {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-5deg); }
  50% { transform: translateX(-50%) scale(1.1) rotate(5deg); }
}

.skill-opportunity::after {
  content: 'DC ' attr(data-dc);
  position: absolute;
  top: -1.5em;
  right: 0;
  transform: translateX(50%) scale(0);
  font-size: 0.65em;
  font-weight: 600;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fcd34d;
  border-radius: 2px;
  opacity: 0;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.skill-opportunity:hover::after,
.skill-opportunity:focus-visible::after {
  transform: translateX(50%) scale(1);
  opacity: 1;
}

/* DC difficulty color coding */
.skill-opportunity.dc-easy::after { color: #4ade80; }
.skill-opportunity.dc-medium::after { color: #fcd34d; }
.skill-opportunity.dc-hard::after { color: #f97316; }
.skill-opportunity.dc-very-hard::after { color: #ef4444; }

/* Skill-specific colors */
.skill-opportunity.skill-perception { --skill-color: #3b82f6; }
.skill-opportunity.skill-investigation { --skill-color: #10b981; }
.skill-opportunity.skill-insight { --skill-color: #8b5cf6; }
.skill-opportunity.skill-arcana { --skill-color: #a855f7; }
.skill-opportunity.skill-history { --skill-color: #6366f1; }
.skill-opportunity.skill-nature { --skill-color: #22c55e; }
.skill-opportunity.skill-religion { --skill-color: #f59e0b; }
.skill-opportunity.skill-athletics { --skill-color: #ef4444; }
.skill-opportunity.skill-acrobatics { --skill-color: #14b8a6; }
.skill-opportunity.skill-stealth { --skill-color: #64748b; }
.skill-opportunity.skill-survival { --skill-color: #84cc16; }

/* Rolling state */
.skill-opportunity.skill-rolling {
  animation: skillRolling 0.3s ease-in-out infinite;
  pointer-events: none;
  background: rgba(255, 215, 0, 0.2);
}

.skill-opportunity.skill-rolling::before {
  content: '';
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: translateX(-50%) scale(1.2);
  opacity: 1;
  animation: diceRolling 0.15s ease-in-out infinite;
}

@keyframes skillRolling {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

@keyframes diceRolling {
  0%, 100% { transform: translateX(-50%) scale(1.2) rotate(-15deg); }
  50% { transform: translateX(-50%) scale(1.2) rotate(15deg); }
}

/* Success state */
.skill-opportunity.skill-success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.2);
  text-decoration-color: #4ade80;
  animation: skillSuccess 0.5s ease-out;
  pointer-events: none;
}

.skill-opportunity.skill-success::before {
  content: '';
  width: 1em;
  height: 1em;
  background-color: #4ade80;
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  animation: none;
}

.skill-opportunity.skill-success::after {
  content: 'Success!';
  color: #4ade80;
  transform: translateX(50%) scale(1);
  opacity: 1;
}

@keyframes skillSuccess {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50% { box-shadow: 0 0 15px 5px rgba(74, 222, 128, 0.4); }
  100% { box-shadow: 0 0 8px rgba(74, 222, 128, 0.2); }
}

/* Failure state */
.skill-opportunity.skill-failure {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
  text-decoration-color: #f87171;
  animation: skillFailure 0.5s ease-out;
  pointer-events: none;
}

.skill-opportunity.skill-failure::before {
  content: '';
  width: 1em;
  height: 1em;
  background-color: #f87171;
  mask-image: var(--icon-x);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-x);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  transform: translateX(-50%) scale(1);
  opacity: 1;
  animation: none;
}

.skill-opportunity.skill-failure::after {
  content: 'Failed';
  color: #f87171;
  transform: translateX(50%) scale(1);
  opacity: 1;
}

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

/* Already checked state */
.skill-opportunity.skill-checked {
  color: #9ca3af;
  text-decoration-color: #6b7280;
  background: rgba(156, 163, 175, 0.1);
  cursor: not-allowed;
  pointer-events: none;
}

.skill-opportunity.skill-checked::before { content: '\2014'; color: #6b7280; transform: translateX(-50%) scale(1); opacity: 0.5; animation: none; }
.skill-opportunity.skill-checked::after { content: 'Checked'; color: #6b7280; }

.skill-opportunity[data-hint]:not([data-hint=""]):hover { cursor: help; }

/* Result badge */
.skill-opportunity-result {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  margin-left: 4px;
  font-size: 0.75em;
  font-weight: 600;
  border-radius: 3px;
  vertical-align: middle;
  animation: resultAppear 0.3s ease-out;
}

.skill-opportunity-result.success {
  background: rgba(74, 222, 128, 0.2);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.skill-opportunity-result.failure {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.skill-opportunity-result .roll-value { font-family: var(--font-mono); }

@keyframes resultAppear {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Skill hint reveal */
.skill-hint-reveal {
  color: #4ade80;
  font-style: italic;
  animation: hintReveal 0.5s ease-out;
}

.skill-hint-reveal em {
  color: #86efac;
  background: rgba(74, 222, 128, 0.1);
  padding: 1px 4px;
  border-radius: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  .skill-opportunity::before,
  .skill-opportunity::after { animation: none; }
  .skill-opportunity.skill-rolling,
  .skill-opportunity.skill-rolling::before { animation: none; }
  .skill-opportunity.skill-success,
  .skill-opportunity.skill-failure { animation: none; }
  .skill-opportunity-result,
  .skill-hint-reveal { animation: none; }
}

/**
 * Wiki Links — Narrative Hooks
 * ==============================
 * Narrative hook styling with topic colors, action variants, and glow rings.
 */

/* ========================================
 * Narrative Hooks
 * ======================================== */

.narrative-hook {
  color: #c792ea;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
  padding: 0 2px;
  border-radius: 2px;
  position: relative;
}

.narrative-hook::after {
  content: " ?";
  opacity: 0.4;
  font-size: 0.85em;
  font-weight: normal;
  transition: opacity 0.2s;
}

.narrative-hook:hover {
  color: #e0b0ff;
  background: rgba(199, 146, 234, 0.15);
  text-decoration-style: solid;
}

.narrative-hook:hover::after { opacity: 0.7; }

/* Topic-specific hook colors */
.narrative-hook.hook-quest_hint { color: #ffd700; }
.narrative-hook.hook-quest_hint:hover { background: rgba(255, 215, 0, 0.15); }

.narrative-hook.hook-danger { color: #ff6b6b; }
.narrative-hook.hook-danger:hover { background: rgba(255, 107, 107, 0.15); }

.narrative-hook.hook-mystery { color: #c792ea; }

.narrative-hook.hook-treasure { color: #f9c74f; }
.narrative-hook.hook-treasure:hover { background: rgba(249, 199, 79, 0.15); }

.narrative-hook.hook-backstory,
.narrative-hook.hook-relationship { color: #82aaff; }
.narrative-hook.hook-backstory:hover,
.narrative-hook.hook-relationship:hover { background: rgba(130, 170, 255, 0.15); }

.narrative-hook.hook-world_lore { color: #89ddff; }
.narrative-hook.hook-world_lore:hover { background: rgba(137, 221, 255, 0.15); }

.narrative-hook.hook-menu-open {
  background: rgba(199, 146, 234, 0.25);
  text-decoration-style: solid;
  box-shadow: 0 0 0 2px rgba(199, 146, 234, 0.4);
}

.narrative-hook.inquiry-sent { animation: hook-pulse 0.5s ease-out; }

@keyframes hook-pulse {
  0% { background: rgba(199, 146, 234, 0.4); }
  100% { background: transparent; }
}

/* Hook action type variants */
.narrative-hook.hook-type-combat { color: #e06c75; border-left: 3px solid rgba(224, 108, 117, 0.6); padding-left: 5px; }
.narrative-hook.hook-type-combat:hover { color: #f08090; background: rgba(224, 108, 117, 0.1); border-left-color: rgba(224, 108, 117, 0.9); }

.narrative-hook.hook-type-social { color: #61afef; border-left: 3px solid rgba(97, 175, 239, 0.5); padding-left: 5px; }
.narrative-hook.hook-type-social:hover { color: #82c4f8; background: rgba(97, 175, 239, 0.1); border-left-color: rgba(97, 175, 239, 0.85); }

.narrative-hook.hook-type-exploration { color: #98c379; border-left: 3px solid rgba(152, 195, 121, 0.5); padding-left: 5px; }
.narrative-hook.hook-type-exploration:hover { color: #b5d89a; background: rgba(152, 195, 121, 0.1); border-left-color: rgba(152, 195, 121, 0.85); }

.narrative-hook.hook-type-item { color: #e5c07b; border-left: 3px solid rgba(229, 192, 123, 0.5); padding-left: 5px; }
.narrative-hook.hook-type-item:hover { color: #f0d090; background: rgba(229, 192, 123, 0.1); border-left-color: rgba(229, 192, 123, 0.85); }

.narrative-hook.hook-type-magic { color: #c678dd; border-left: 3px solid rgba(198, 120, 221, 0.5); padding-left: 5px; }
.narrative-hook.hook-type-magic:hover { color: #d99aee; background: rgba(198, 120, 221, 0.1); border-left-color: rgba(198, 120, 221, 0.85); }

/* Type-aware glow rings */
.narrative-hook.hook-type-combat.hook-menu-open { box-shadow: 0 0 0 2px rgba(224, 108, 117, 0.35); }
.narrative-hook.hook-type-social.hook-menu-open { box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.35); }
.narrative-hook.hook-type-exploration.hook-menu-open { box-shadow: 0 0 0 2px rgba(152, 195, 121, 0.35); }
.narrative-hook.hook-type-item.hook-menu-open { box-shadow: 0 0 0 2px rgba(229, 192, 123, 0.35); }
.narrative-hook.hook-type-magic.hook-menu-open { box-shadow: 0 0 0 2px rgba(198, 120, 221, 0.35); }

/* Type-aware inquiry-sent pulse */
.narrative-hook.hook-type-combat.inquiry-sent { animation: hook-pulse-combat 0.5s ease-out; }
.narrative-hook.hook-type-social.inquiry-sent { animation: hook-pulse-social 0.5s ease-out; }
.narrative-hook.hook-type-exploration.inquiry-sent { animation: hook-pulse-exploration 0.5s ease-out; }
.narrative-hook.hook-type-item.inquiry-sent { animation: hook-pulse-item 0.5s ease-out; }
.narrative-hook.hook-type-magic.inquiry-sent { animation: hook-pulse-magic 0.5s ease-out; }

@keyframes hook-pulse-combat { 0% { background: rgba(224, 108, 117, 0.35); } 100% { background: transparent; } }
@keyframes hook-pulse-social { 0% { background: rgba(97, 175, 239, 0.35); } 100% { background: transparent; } }
@keyframes hook-pulse-exploration { 0% { background: rgba(152, 195, 121, 0.35); } 100% { background: transparent; } }
@keyframes hook-pulse-item { 0% { background: rgba(229, 192, 123, 0.35); } 100% { background: transparent; } }
@keyframes hook-pulse-magic { 0% { background: rgba(198, 120, 221, 0.35); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  .narrative-hook.hook-type-combat.inquiry-sent,
  .narrative-hook.hook-type-social.inquiry-sent,
  .narrative-hook.hook-type-exploration.inquiry-sent,
  .narrative-hook.hook-type-item.inquiry-sent,
  .narrative-hook.hook-type-magic.inquiry-sent { animation: none; }
}
/**
 * Wiki Links — Locations and Misc
 * ==================================
 * Inline location mentions, faction references, and miscellaneous wiki elements.
 */


/* ========================================
 * Inline Location Mentions
 * ======================================== */

.narrative-location {
  color: #98c379;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: rgba(152, 195, 121, 0.5);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0 2px;
  border-radius: 2px;
}

.narrative-location:hover {
  color: #b5d89a;
  background: rgba(152, 195, 121, 0.15);
  text-decoration-color: rgba(152, 195, 121, 0.8);
}

/* ========================================
 * Inline Item Mentions
 * ======================================== */

.narrative-item {
  color: #61afef;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-color: rgba(97, 175, 239, 0.5);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0 2px;
  border-radius: 2px;
}

.narrative-item:hover {
  color: #7fc3f3;
  background: rgba(97, 175, 239, 0.15);
  text-decoration-color: rgba(97, 175, 239, 0.8);
}

.narrative-item.rarity-common { color: #abb2bf; }
.narrative-item.rarity-uncommon { color: #98c379; }
.narrative-item.rarity-rare { color: #61afef; }
.narrative-item.rarity-very_rare,
.narrative-item.rarity-very-rare { color: #c792ea; }
.narrative-item.rarity-legendary { color: #ffa500; }
.narrative-item.rarity-artifact { color: #ff6b6b; }

/* ========================================
 * Enrichment Feedback
 * ======================================== */

.enrichment-link {
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.enrichment-link:active { transform: scale(0.98); }

.enrichment-applied { animation: enrichmentPulse 0.5s ease-out; }

@keyframes enrichmentPulse {
  0% { background-color: transparent; }
  50% { background-color: rgba(144, 169, 89, 0.1); }
  100% { background-color: transparent; }
}

.inquiry-sent { animation: inquirySent 0.5s ease-out; }

@keyframes inquirySent {
  0% { background-color: rgba(199, 146, 234, 0.3); }
  100% { background-color: transparent; }
}

.skill-check-triggered { animation: skillCheckTriggered 0.5s ease-out; }

@keyframes skillCheckTriggered {
  0% { background-color: rgba(255, 215, 0, 0.4); box-shadow: 0 0 12px rgba(255, 215, 0, 0.6); }
  100% { background-color: transparent; box-shadow: none; }
}
/**
 * Narrative Wiki Links — Import Hub
 * ====================================
 * Interactive inline elements: wiki links, skill opportunities, hooks, and locations.
 *
 * Decomposed into focused files under wiki_links/ for maintainability.



 */
/*
 * Narrative Panel: Perception & Knowledge
 * =========================================
 * Knowledge-exclusive content, perception checks,
 * shared/secondhand knowledge, and multiplayer indicators.
 */

/* ========================================
 * Knowledge-Exclusive Content
 * ======================================== */

.narrative-entry.knowledge-exclusive {
  position: relative;
  background: linear-gradient(135deg, rgba(138, 43, 226, 0.12), rgba(75, 0, 130, 0.08) 50%, rgba(138, 43, 226, 0.12));
  border-left: 4px solid #9333ea;
  border-right: 1px solid rgba(147, 51, 234, 0.3);
  padding-top: calc(var(--space-3) + 24px);
}

.narrative-entry.knowledge-exclusive::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.6) 20%, rgba(147, 51, 234, 0.8) 50%, rgba(147, 51, 234, 0.6) 80%, transparent);
}

.knowledge-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.25), rgba(126, 34, 206, 0.2));
  border: 1px solid rgba(147, 51, 234, 0.4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: #c084fc;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.knowledge-badge::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-eye) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

.knowledge-source {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Perception Check Success
 * ======================================== */

.narrative-entry.perception-success {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
  border-left: 4px solid #3b82f6;
  padding-top: calc(var(--space-3) + 24px);
}

.perception-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.perception-badge::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-search) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

/* ========================================
 * Shared Party Knowledge
 * ======================================== */

.narrative-entry.shared-knowledge {
  border-left-color: #22c55e;
}

.shared-knowledge-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: #4ade80;
}

.shared-knowledge-badge::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-users) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

/* ========================================
 * Secondhand Knowledge
 * ======================================== */

.narrative-entry.secondhand-knowledge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.05));
  border-left: 3px solid #f59e0b;
  opacity: 0.9;
}

.secondhand-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(251, 191, 36, 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: #fbbf24;
}

.secondhand-badge::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-chat) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

/* ========================================
 * Hidden Content Indicator
 * ======================================== */

.narrative-entry .hidden-content-hint {
  display: block;
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: rgba(100, 116, 139, 0.1);
  border: 1px dashed rgba(100, 116, 139, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}

.hidden-content-hint::before {
  content: '...';
  display: block;
  letter-spacing: 4px;
  margin-bottom: var(--space-1);
}

/* Knowledge Reveal Animation */
@keyframes knowledgeReveal {
  0% { opacity: 0; transform: translateY(8px); border-left-color: transparent; }
  50% { border-left-color: #9333ea; }
  100% { opacity: 1; transform: translateY(0); border-left-color: #9333ea; }
}

.narrative-entry.knowledge-exclusive.animate-reveal {
  animation: knowledgeReveal 0.6s ease-out;
}

/* Multiplayer Session Indicator */
.multiplayer-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: #4ade80;
  margin-bottom: var(--space-2);
}

.multiplayer-indicator::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -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='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%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='M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2zm4.5 2c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4-3c-.83 0-1.5-.67-1.5-1.5S18.67 9 19.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.knowledge-exclusive.animate-reveal {
    animation: none;
  }
}
/*
 * Narrative Panel: Speech Bubbles, Voice & Emotion
 * ==================================================
 * Speech bubble variants (player, DM, NPC, scene, system),
 * voice styles, and emotion badges.
 */

/* Base Speech Bubble */
.speech-bubble {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--bubble-radius);
  max-width: var(--bubble-max-width);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-relaxed);
  animation: bubbleFadeIn 0.3s ease-out;
}

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

.speech-bubble::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: var(--bubble-tail-size) solid transparent;
  top: 14px;
}

/* Player Bubble */
.speech-bubble--player {
  margin-left: auto;
  margin-right: var(--space-2);
  background: linear-gradient(135deg, var(--bubble-player-bg), rgba(152, 195, 121, 0.06));
  border: 1px solid var(--bubble-player-border);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(152, 195, 121, 0.1);
}

.speech-bubble--player::before {
  content: '>';
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  color: var(--color-accent-secondary);
  font-weight: bold;
  opacity: 0.6;
}

.speech-bubble--player::after {
  right: calc(-1 * var(--bubble-tail-size));
  border-left-color: var(--bubble-player-border);
}

.speech-bubble--player .bubble-content { padding-left: 1.5em; }

/* DM/Narrator Bubble */
.speech-bubble--dm {
  max-width: 100%;
  margin: 0;
  background: var(--bubble-dm-bg);
  border-left: 3px solid var(--bubble-dm-border);
  border-radius: 0;
  color: #e8dcc4;
  padding-left: var(--space-4);
}

.speech-bubble--dm::after { display: none; }

.speech-bubble--dm .bubble-speaker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.speech-bubble--dm .bubble-speaker::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-scroll) no-repeat center / contain;
  font-size: var(--font-size-sm);
}

/* NPC Bubble */
.speech-bubble--npc {
  --npc-color: var(--color-entity-npc);
  margin-right: auto;
  margin-left: var(--space-2);
  background: linear-gradient(135deg, color-mix(in srgb, var(--npc-color) 12%, transparent), color-mix(in srgb, var(--npc-color) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--npc-color) 35%, transparent);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--npc-color) 10%, transparent);
}

.speech-bubble--npc::after {
  left: calc(-1 * var(--bubble-tail-size));
  border-right-color: color-mix(in srgb, var(--npc-color) 35%, transparent);
}

.speech-bubble--npc .bubble-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--npc-color) 20%, transparent);
}

.speech-bubble--npc .bubble-portrait {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--npc-color) 25%, var(--color-bg-tertiary));
  border: 2px solid var(--npc-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.speech-bubble--npc .bubble-speaker {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--npc-color);
}

/* Scene/Environment Bubble */
.speech-bubble--scene {
  max-width: 100%;
  margin: var(--space-4) 0;
  padding: var(--space-4);
  text-align: center;
  font-style: italic;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-top: 1px dashed var(--color-border-subtle);
  border-bottom: 1px dashed var(--color-border-subtle);
  border-radius: 0;
}

.speech-bubble--scene::after { display: none; }
.speech-bubble--scene .bubble-content { text-shadow: 0 0 30px var(--color-bg-primary); }

.speech-bubble--scene .scene-location {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  font-style: normal;
}

/* System Bubble */
.speech-bubble--system {
  max-width: 100%;
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bubble-system-bg);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.speech-bubble--system::after { display: none; }

/* ========================================
 * Voice Styles
 * ======================================== */

.voice-whispered .bubble-content {
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.voice-whispered::before {
  content: '(whispers)';
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-1);
}

.voice-shouting .bubble-content {
  font-weight: var(--font-weight-bold);
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.voice-nervous { animation: nervousWobble 0.3s ease-in-out infinite; }

@keyframes nervousWobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}

.voice-commanding .bubble-content { font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; }
.voice-commanding { border-width: 2px; }

.voice-melodic .bubble-content { font-style: italic; letter-spacing: 0.03em; }

/* ========================================
 * Emotion Badges
 * ======================================== */

.emotion-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: var(--space-2);
}

.emotion-badge--angry { background: rgba(224, 108, 117, 0.2); color: #e06c75; }
.emotion-badge--friendly { background: rgba(152, 195, 121, 0.2); color: #98c379; }
.emotion-badge--suspicious { background: rgba(229, 192, 123, 0.2); color: #e5c07b; }
.emotion-badge--afraid { background: rgba(229, 192, 123, 0.2); color: #e5c07b; }
.emotion-badge--neutral { background: rgba(171, 178, 191, 0.15); color: #abb2bf; }
.emotion-badge--mysterious { background: rgba(198, 120, 221, 0.2); color: #c678dd; }
.emotion-badge--happy { background: rgba(152, 195, 121, 0.2); color: #98c379; }
.emotion-badge--sad { background: rgba(97, 175, 239, 0.2); color: #61afef; }

@media (prefers-reduced-motion: reduce) {
  .speech-bubble { animation: none; }
  .voice-nervous { animation: none; }
}
/*
 * Narrative Panel: Screenplay & Display Modes
 * =============================================
 * Script mode, screenplay format, display mode toggle,
 * DM insights panel, and room override styles.
 */

/* ========================================
 * Screenplay Mode
 * ======================================== */

.narrative-output.script-mode {
  font-family: var(--screenplay-font);
  font-size: 13pt;
  line-height: 1.5;
  background: var(--screenplay-bg);
  color: var(--screenplay-text);
  padding: var(--space-6) var(--space-8);
}

.script-mode .speech-bubble {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}

.script-mode .speech-bubble::before,
.script-mode .speech-bubble::after { display: none; content: none; }
.script-mode .bubble-portrait { display: none; }
.script-mode .bubble-header { border: none; padding: 0; margin: 0; background: transparent; }
.script-mode .emotion-badge { display: none; }
.script-mode [class*="voice-"] { animation: none; text-shadow: none; }

/* Scene Headings */
.script-mode .script-scene,
.script-mode .speech-bubble--scene,
.script-mode [data-segment="scene"] {
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: normal;
  margin: 24pt 0 12pt 0;
  padding: 0;
  color: var(--screenplay-text);
  font-style: normal;
}

.script-mode .script-scene::before,
.script-mode .speech-bubble--scene::before,
.script-mode .script-scene::after,
.script-mode .speech-bubble--scene::after { content: none; display: none; }

/* Character Names */
.script-mode .script-character,
.script-mode .bubble-speaker {
  display: block;
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  font-size: inherit;
  margin: var(--space-4) 0 var(--space-1) 0;
  padding-left: 25%;
  color: var(--screenplay-action);
  letter-spacing: 0.05em;
}

/* Parentheticals */
.script-mode .script-parenthetical {
  display: block;
  text-align: left;
  font-style: italic;
  font-size: 0.9em;
  color: var(--screenplay-muted);
  margin: 0 0 var(--space-2) 0;
  padding-left: 20%;
  max-width: none;
  background: transparent;
  border-radius: 0;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.script-mode .script-parenthetical::before { content: '('; }
.script-mode .script-parenthetical::after { content: ')'; }

/* Dialogue */
.script-mode .script-dialogue,
.script-mode .bubble-content {
  text-align: left;
  max-width: Min(500px, 80%);
  margin: 0 0 var(--space-3) 15%;
  padding: 0;
  color: var(--screenplay-text);
}

/* Action Lines */
.script-mode .script-action,
.script-mode .speech-bubble--dm { margin: var(--space-4) 0; }

.script-mode .speech-bubble--dm .bubble-content {
  text-align: left;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: var(--screenplay-text);
}

/* NPC Dialogue */
.script-mode .speech-bubble--npc { margin: var(--space-4) 0; background: transparent; }
.script-mode .speech-bubble--npc .bubble-speaker { padding-left: 25%; }
.script-mode .speech-bubble--npc .bubble-content { margin-left: 15%; max-width: Min(500px, 80%); }

/* Player Input */
.script-mode .speech-bubble--player { margin: var(--space-4) 0; background: transparent; }
.script-mode .speech-bubble--player .bubble-header { display: block; }
.script-mode .speech-bubble--player .bubble-speaker { padding-left: 25%; color: var(--screenplay-player); }
.script-mode .speech-bubble--player .bubble-speaker::before { content: '> '; font-weight: bold; }
.script-mode .speech-bubble--player .bubble-content { margin-left: 15%; max-width: Min(500px, 80%); color: var(--screenplay-player); }

/* System Messages */
.script-mode .speech-bubble--system {
  text-align: left;
  font-style: italic;
  color: var(--screenplay-muted);
  margin: var(--space-3) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--screenplay-muted);
}

.script-mode .speech-bubble--system .bubble-content { text-align: left; max-width: 100%; margin: 0; margin-left: auto; color: var(--screenplay-muted); }

/* Transitions */
.script-mode .script-transition { text-align: right; text-transform: uppercase; margin: 24pt 0; padding-right: 0; }

/* Inner Thoughts */
.script-mode [data-segment="inner"],
.script-mode .speech-bubble--inner { font-style: italic; margin-left: 1in; max-width: 3.5in; color: var(--screenplay-muted); }
.script-mode [data-segment="inner"]::before { content: '(V.O.) '; font-style: normal; }

/* Combat/Action */
.script-mode .speech-bubble--combat,
.script-mode [data-segment="action"] { margin: 12pt 0; }
.script-mode .speech-bubble--combat .bubble-content,
.script-mode [data-segment="action"] .bubble-content { text-align: left; max-width: 100%; margin: 0; padding: 0; color: var(--screenplay-action); text-transform: none; }

/* Rolls */
.script-mode .roll-result,
.script-mode [data-segment="roll"] { color: var(--screenplay-muted); font-size: 10pt; }

/* Links */
.script-mode a,
.script-mode [data-entity-type] { color: var(--screenplay-text); text-decoration: underline; }
.script-mode a:hover,
.script-mode [data-entity-type]:hover { color: var(--screenplay-action); }

/* Selections */
.script-mode .narrative-selection { background: transparent; border: none; color: var(--screenplay-text); text-decoration: underline; padding: 2pt 4pt; margin: 2pt; }
.script-mode .narrative-selection:hover { background: rgba(0, 0, 0, 0.05); }

/* Force dark text on light bg */
.script-mode .unified-segment__content,
.script-mode .unified-segment__content--narration,
.script-mode .unified-segment__content--dialogue,
.script-mode .unified-segment__content--action,
.script-mode .unified-segment__content--perception { color: var(--screenplay-text); }
.script-mode .unified-segment__speaker { color: var(--screenplay-action); }
.script-mode .unified-segment--dialogue { border-left-color: var(--screenplay-action); }
.script-mode .narrative-segment { opacity: 1; animation: none; color: var(--screenplay-text); }
.script-mode .unified-entity-link { color: var(--screenplay-player); }
.script-mode .unified-entity-link:hover { color: var(--screenplay-action); }

/* Input Area in Script Mode */
.narrative-panel-content:has(.narrative-output.script-mode) .input-area { background: var(--screenplay-bg); border-top: 1px solid var(--screenplay-muted); }
.narrative-panel-content:has(.narrative-output.script-mode) .input-line { background: transparent; }
.narrative-panel-content:has(.narrative-output.script-mode) .input-prompt { color: var(--screenplay-player); font-family: var(--screenplay-font); }
.narrative-panel-content:has(.narrative-output.script-mode) .input-field { background: transparent; color: var(--screenplay-text); font-family: var(--screenplay-font); caret-color: var(--screenplay-player); }
.narrative-panel-content:has(.narrative-output.script-mode) .input-field::placeholder { color: var(--screenplay-muted); }

/* Filter Bar in Script Mode */
.narrative-panel-content:has(.narrative-output.script-mode) .narrative-filters { background: var(--screenplay-bg); border-bottom-color: var(--screenplay-muted); }
.narrative-panel-content:has(.narrative-output.script-mode) .nf-btn { color: var(--screenplay-muted); font-family: var(--screenplay-font); }
.narrative-panel-content:has(.narrative-output.script-mode) .nf-btn:hover { background: rgba(0, 0, 0, 0.05); color: var(--screenplay-text); border-color: var(--screenplay-muted); }
.narrative-panel-content:has(.narrative-output.script-mode) .nf-btn.nf-active { background: rgba(0, 0, 0, 0.1); color: var(--screenplay-text); border-color: var(--screenplay-action); box-shadow: none; }

/* Display mode toggle in script mode */
.narrative-panel-content:has(.narrative-output.script-mode) .display-mode-toggle { background: rgba(0, 0, 0, 0.08); border-color: var(--screenplay-muted); color: var(--screenplay-text); }
.narrative-panel-content:has(.narrative-output.script-mode) .display-mode-toggle:hover { background: rgba(0, 0, 0, 0.12); }
.narrative-panel-content:has(.narrative-output.script-mode) .display-mode-toggle.active { background: rgba(0, 68, 136, 0.15); border-color: var(--screenplay-player); color: var(--screenplay-player); }

/* ========================================
 * Display Mode Toggle
 * ======================================== */

.display-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-2-5);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  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);
  margin-left: auto;
}

.display-mode-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); border-color: var(--color-border-focus); }
.display-mode-toggle.active { background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-tertiary)); border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
.display-mode-toggle__icon { font-size: var(--font-size-sm); }
.display-mode-toggle__label { text-transform: uppercase; letter-spacing: 0.05em; }

/* ========================================
 * DM Insights Panel
 * ======================================== */

.dm-info-panel {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-secondary) 8%, var(--color-bg-secondary)), color-mix(in srgb, var(--color-accent-tertiary) 5%, var(--color-bg-tertiary)));
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

.dm-info-panel__header { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid color-mix(in srgb, var(--color-accent-secondary) 20%, transparent); margin-bottom: var(--space-2); }
.dm-info-panel__icon { font-size: var(--font-size-sm); }
.dm-info-panel__title { font-weight: 600; color: var(--color-accent-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.dm-info-panel__turn { color: var(--color-text-muted); font-size: var(--font-size-2xs); }
.dm-info-panel__level { padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-2xs); text-transform: uppercase; letter-spacing: 0.5px; margin-left: auto; }
.dm-info-panel__level--essential { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.dm-info-panel__level--verbose { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.dm-info-panel__level--dev { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }
.dm-info-panel__content { display: flex; flex-direction: column; gap: var(--space-2); }
.dm-info-panel__section { display: flex; flex-wrap: wrap; gap: var(--space-1-5); align-items: baseline; }
.dm-info-panel__label { color: var(--color-text-muted); font-weight: 500; min-width: 100px; flex-shrink: 0; }
.dm-info-panel__value { color: var(--color-text-secondary); flex: 1; display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.dm-info-panel__tool { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-sm); font-size: var(--font-size-2xs); }
.dm-info-panel__tool--success { color: var(--color-success); }
.dm-info-panel__tool--failure { color: var(--color-error); }
.dm-info-panel__check { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 6px; background: var(--color-bg-tertiary); border-radius: var(--radius-sm); font-size: var(--font-size-2xs); }
.dm-info-panel__check--passed { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-tertiary)); }
.dm-info-panel__check--failed { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 10%, var(--color-bg-tertiary)); }
.dm-info-panel__monster { color: var(--color-accent-primary); }
.dm-info-panel__full-reasoning summary { cursor: pointer; user-select: none; }
.dm-info-panel__full-reasoning details[open] summary { margin-bottom: var(--space-2); }
.dm-info-panel__full-reasoning .dm-info-panel__value { display: block; padding: var(--space-2); background: var(--color-bg-tertiary); border-radius: var(--radius-sm); line-height: 1.6; }

.nf-dm-insights { background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-secondary) 10%, transparent), color-mix(in srgb, var(--color-accent-tertiary) 8%, transparent)); }
.nf-dm-insights.nf-active { background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-tertiary)), color-mix(in srgb, var(--color-accent-tertiary) 15%, var(--color-bg-tertiary))); border-color: var(--color-accent-secondary); color: var(--color-accent-secondary); }

/* ========================================
 * Narrative Filter Empty State
 * ======================================== */

.narrative-filter-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; color: var(--text-muted, #888); font-family: var(--font-mono, monospace); }
.narrative-filter-empty[hidden] { display: none; }
.narrative-filter-empty__icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; }
.narrative-filter-empty__text { font-size: 0.85rem; line-height: 1.5; max-width: 300px; }

/* Location Card (Dynamic Tab) */
.location-card { font-family: var(--font-mono, monospace); }
.location-card__name { font-size: 1.1rem; font-weight: 700; color: var(--text-primary, #eee); margin-bottom: 6px; }
.location-card__meta { display: flex; gap: 12px; margin-bottom: 8px; }
.location-card__activity,
.location-card__phase { font-size: 0.8rem; color: var(--text-secondary, #aaa); text-transform: capitalize; }
.location-card__desc { font-size: 0.85rem; color: var(--text-secondary, #bbb); line-height: 1.5; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); padding-top: 8px; margin-top: 4px; }

/* ========================================
 * Room Override: Lobby (screenplay-mode)
 * ======================================== */

.screenplay-mode .narrative-entry.player_chat,
.screenplay-mode .narrative-entry.player-chat,
.screenplay-mode .narrative-entry.character-thought,
.screenplay-mode .narrative-entry.lore,
.screenplay-mode .narrative-entry.magic { background: transparent; border-left: none; border-radius: 0; box-shadow: none; }
.screenplay-mode .narrative-entry.player_chat:hover,
.screenplay-mode .narrative-entry.player-chat:hover { background: transparent; box-shadow: none; }
.screenplay-mode .narrative-entry.dm + .narrative-entry.dm::after { display: none; }
.screenplay-mode .narrative-entry.player_chat,
.screenplay-mode .narrative-entry.player-chat { margin-left: 0; font-style: normal; }

/* Narrative Format: Screenplay (data-attribute) */
[data-narrative-format="screenplay"] .narrative-output { }
[data-narrative-format="screenplay"] .narrative-entry.dm { background: transparent; border: none; border-left: none; padding: var(--space-2) 1.5rem; padding-right: 1.5rem; max-width: 65ch; margin: var(--space-2) auto; line-height: 1.7; color: var(--color-text-primary); font-family: var(--font-body); text-align: left; }
[data-narrative-format="screenplay"] .narrative-entry.dm:hover { background: rgba(255, 255, 255, 0.02); }
[data-narrative-format="screenplay"] .npc-dialogue { background: transparent; border: none; border-left: none; padding: var(--space-3) 0; text-align: center; position: relative; }
[data-narrative-format="screenplay"] .npc-dialogue::before { display: none; }
[data-narrative-format="screenplay"] .npc-avatar { display: none; }
[data-narrative-format="screenplay"] .npc-name { display: inline-block; font-size: var(--font-size-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--npc-color, var(--color-text-secondary)); margin-bottom: 0; }
[data-narrative-format="screenplay"] .npc-mood { display: none; }
[data-narrative-format="screenplay"] .npc-speech-bubble { max-width: 65%; margin: 0 auto; text-align: center; line-height: 1.5; padding: 0; }
[data-narrative-format="screenplay"] .npc-speech-bubble--spoken::before { display: none; }
[data-narrative-format="screenplay"] .npc-speech-bubble p { margin: 0; text-align: center; }
[data-narrative-format="screenplay"] .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; }
[data-narrative-format="screenplay"] .narrative-entry.system { background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.3)); border-left: 3px solid var(--color-accent-primary); 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; }
[data-narrative-format="screenplay"] .narrative-entry.player_chat,
[data-narrative-format="screenplay"] .narrative-entry.player-chat,
[data-narrative-format="screenplay"] .narrative-entry.lore,
[data-narrative-format="screenplay"] .narrative-entry.magic { background: transparent; border-left: none; border-radius: 0; box-shadow: none; }

/* BEM modifier variants */
[data-narrative-format="screenplay"] .narrative-entry { font-family: 'Courier New', Courier, monospace; max-width: 60ch; margin: 0 auto; line-height: 1.6; }
[data-narrative-format="screenplay"] .narrative-entry--npc { text-align: center; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1.5em; }
[data-narrative-format="screenplay"] .narrative-entry--dialogue { margin: 0 auto; max-width: 40ch; text-align: center; }
/*
 * Narrative Panel: Dynamic Tabs & Panes
 * =======================================
 * Dynamic contextual tabs (Location, NPCs, Quests),
 * tab content panes, tooltips, selection cards, quick actions.
 */

/* ========================================
 * Dynamic Contextual Tabs
 * ======================================== */

.nf-separator {
  width: 1px;
  height: 20px;
  background: rgba(255, 215, 0, 0.2);
  margin: 0 6px;
  flex-shrink: 0;
}

.nf-dynamic-tabs {
  display: flex;
  gap: var(--space-1-5);
  margin-left: auto;
}

.nf-dynamic-tab {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.nf-dynamic-tab:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--color-text-primary);
  border-color: rgba(255, 215, 0, 0.2);
}

.nf-dynamic-tab.nf-active {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25), rgba(184, 134, 11, 0.25));
  color: var(--color-gold);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);
}

.nf-dynamic-tab .nf-icon { font-size: var(--font-size-sm); line-height: 1; }
.nf-dynamic-tab .nf-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 768px) {
  .nf-dynamic-tab .nf-label { display: none; }
}

@keyframes tab-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 215, 0, 0); }
  50% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); }
}

.nf-dynamic-tab.nf-tab-pulse { animation: tab-pulse 2s ease-in-out; border-color: var(--color-gold); }

@media (prefers-reduced-motion: reduce) {
  .nf-dynamic-tab.nf-tab-pulse { animation: none; border-color: var(--color-gold); box-shadow: 0 0 4px rgba(255, 215, 0, 0.4); }
}

/* ========================================
 * Onboarding Tooltip
 * ======================================== */

.nf-tabs-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-floating);
  max-width: 280px;
  padding: var(--space-3);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(229, 192, 123, 0.12));
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: tooltipFadeIn 0.3s ease-out;
}

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

.nf-tabs-tooltip__content { display: flex; flex-direction: column; gap: var(--space-2); }
.nf-tabs-tooltip__text { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--color-text-primary); line-height: 1.5; }

.nf-tabs-tooltip__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: var(--radius-sm);
  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);
}

.nf-tabs-tooltip__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); }
.nf-tabs-tooltip__button:active { transform: scale(0.98); }

.nf-tabs-tooltip::before { content: ''; position: absolute; bottom: 100%; right: 20px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(255, 215, 0, 0.3); }
.nf-tabs-tooltip::after { content: ''; position: absolute; bottom: 100%; right: 21px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(255, 215, 0, 0.15); }

@media (prefers-reduced-motion: reduce) { .nf-tabs-tooltip { animation: none; } }

/* ========================================
 * Tab Content Pane
 * ======================================== */

.narrative-tab-pane {
  flex-shrink: 0;
  max-height: 150px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--overlay-medium), var(--overlay-light-plus));
  border-bottom: 1px solid var(--overlay-gold-light);
  animation: tabPaneSlideDown 0.2s ease-out;
}

@keyframes tabPaneSlideDown {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 150px; }
}

.narrative-tab-pane__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2-5) var(--space-3-5); background: rgba(255, 215, 0, 0.08); border-bottom: 1px solid rgba(255, 215, 0, 0.1); }
.narrative-tab-pane__title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--font-size-sm); font-weight: 600; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.5px; }

.narrative-tab-pane__close { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--color-text-muted); font-size: var(--font-size-lg); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast); }
.narrative-tab-pane__close:hover { background: var(--overlay-white-light); color: var(--color-text-primary); }

.narrative-tab-pane__content { padding: var(--space-3-5); font-family: var(--font-mono); font-size: var(--font-size-base); line-height: 1.5; color: var(--color-text-primary); }
.narrative-tab-pane__content p { margin: 0 0 8px; }
.narrative-tab-pane__content p:last-child { margin-bottom: 0; }
.narrative-tab-pane__content .text-muted { color: var(--color-text-muted); font-style: italic; }

.narrative-tab-pane__content .dynamic-tab-list { list-style: none; margin: 0; padding: 0; }
.narrative-tab-pane__content .dynamic-tab-list li { padding: 6px 0; border-bottom: 1px solid rgba(255, 215, 0, 0.1); }
.narrative-tab-pane__content .dynamic-tab-list li:last-child { border-bottom: none; }
.narrative-tab-pane__content .dynamic-tab-list strong { color: var(--color-gold); }

.narrative-tab-pane::-webkit-scrollbar { width: 6px; }
.narrative-tab-pane::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.narrative-tab-pane::-webkit-scrollbar-thumb { background: rgba(255, 215, 0, 0.3); border-radius: 3px; }

@media (prefers-reduced-motion: reduce) { .narrative-tab-pane { animation: none; } }

/* ========================================
 * Inline Selection Cards
 * ======================================== */

.narrative-entry.selection-prompt {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: calc(-1 * var(--space-2));
  margin-bottom: var(--space-4);
  animation: traySlideUp 0.3s ease-out;
}

.narrative-entry.selection-prompt:hover { transform: none; }

.inline-selection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3-5);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  max-height: 60vh;
  overflow-y: auto;
}

.masonry-card {
  --selection-accent: var(--accent-color, #4f46e5);
  --selection-accent-warning: var(--accent-warning, #f59e0b);
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  position: relative;
}

.masonry-card:hover { background: 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); }
.masonry-card:active { transform: translateY(0); }
.masonry-card--selected { border-color: var(--accent-color, #4f46e5); background: rgba(79, 70, 229, 0.15); }
.masonry-card--selected::before { content: '\2713'; 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; }
.masonry-card--pending { border-color: var(--selection-border-pending, var(--selection-accent-warning)); background: var(--selection-bg-pending, rgba(245, 158, 11, 0.05)); opacity: 0.8; pointer-events: none; }
.masonry-card--pending::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--selection-accent-warning); border-top-color: transparent; border-radius: 50%; animation: masonry-spin 0.6s linear infinite; }

.masonry-card--hidden { display: none; }
.masonry-card--dimmed { opacity: 0.5; }
.masonry-card--dimmed:hover { opacity: 0.8; }
.masonry-card__name { display: block; font-weight: 600; font-size: 14px; color: var(--text-primary, #fff); margin-bottom: 2px; }
.masonry-card__desc { display: block; font-size: 12px; color: var(--text-secondary, #888); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
button.masonry-card { font-family: inherit; text-align: left; width: 100%; }

.masonry-card__info-btn { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--color-surface-elevated, #2a2a2a); border: 1px solid var(--color-border, #444); color: var(--color-text-muted, #888); font-size: var(--font-size-sm); font-weight: bold; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; z-index: var(--z-float); }
.masonry-card:hover .masonry-card__info-btn,
.masonry-card:focus .masonry-card__info-btn { opacity: 1; }
.masonry-card__info-btn:hover { background: var(--color-accent-blue, #61afef); color: var(--color-bg, #1a1a1a); border-color: var(--color-accent-blue, #61afef); }

.masonry-card__badge { position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 9999px; z-index: var(--z-float); }
.masonry-card__badge--beginner { background: rgba(16, 185, 129, 0.2); color: var(--success-color, #10b981); }
.masonry-card__badge--recommended { background: rgba(139, 92, 246, 0.2); color: var(--purple-400, #a78bfa); }
.masonry-card__badge--dm-suggested { background: rgba(229, 192, 123, 0.2); color: var(--color-accent-gold, #e5c07b); animation: none; }

@keyframes dm-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(229, 192, 123, 0.4); }
  50% { box-shadow: 0 0 8px rgba(229, 192, 123, 0.7); }
}

/* Category filter bar */
.category-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2-5); margin-bottom: 12px; padding: 8px 10px; background: var(--bg-elevated, #1e1e2e); border-radius: var(--radius-md); border: 1px solid var(--border-subtle, #333); }
.category-filter-bar::before { content: 'Filter:'; font-size: var(--font-size-sm); font-weight: 500; color: var(--text-tertiary, #888); margin-right: 4px; }
.category-filter-bar .chip { --selection-accent: var(--accent-primary, #4a9eff); --selection-border-radius: 12px; padding: 5px 12px; font-size: var(--font-size-sm); font-weight: 500; border-radius: var(--selection-border-radius); background: var(--selection-bg, var(--bg-base, #121212)); border: 1px solid var(--selection-border, var(--border-subtle, #444)); color: var(--selection-text, var(--text-secondary, #aaa)); cursor: pointer; transition: var(--selection-transition, all 0.15s ease); }
.category-filter-bar .chip:hover { border-color: var(--selection-border-hover, var(--selection-accent)); color: var(--selection-text-hover, var(--text-primary, #e0e0e0)); background: var(--selection-bg-hover, var(--bg-hover, #1a1a2e)); }
.category-filter-bar .chip--selected { background: var(--selection-accent); border-color: var(--selection-accent); color: var(--bg-base, #121212); font-weight: 600; }

@media (max-width: 768px) {
  .inline-selection-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2-5); padding: var(--space-2); }
  .masonry-card { padding: 10px; }
  .masonry-card__name { font-size: var(--font-size-sm); }
  .masonry-card__desc { font-size: var(--font-size-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .masonry-card { transition: none; }
  .masonry-card:hover { transform: none; }
  .masonry-card--pending::after { animation: none; }
}

/* ========================================
 * Quick Actions Container
 * ======================================== */

.quick-actions-container {
  position: relative;
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.05), rgba(0, 0, 0, 0.2));
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  animation: quickActionsSlideUp 0.3s ease-out;
}

.quick-actions-container:empty { display: none; }

.character-creation-layout .quick-actions-container,
.character-creation-layout .narrative-suggestions,
.character-creation-layout .input-suggestions { display: none; }

.lobby-split-container .narrative-suggestions,
.lobby-split-container .input-suggestions { display: none; }

.quick-actions-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.quick-actions-header::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: currentColor;
  mask-image: var(--icon-zap);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-zap);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.quick-actions-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.quick-actions-buttons::-webkit-scrollbar { display: none; }

.quick-actions-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.6));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.quick-actions-container:has(:not(:empty))::after { opacity: 1; }
.quick-actions-container.scrolled-end::after { opacity: 0; }

.quick-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  /* WCAG 2.5.5 tap target floor (#5437, #5499) */
  min-height: 44px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  animation: quickActionFadeIn 0.3s ease-out backwards;
}

.quick-action-btn:nth-child(1) { animation-delay: 0ms; }
.quick-action-btn:nth-child(2) { animation-delay: 50ms; }
.quick-action-btn:nth-child(3) { animation-delay: 100ms; }
.quick-action-btn:nth-child(4) { animation-delay: 150ms; }
.quick-action-btn:nth-child(5) { animation-delay: 200ms; }
.quick-action-btn:nth-child(6) { animation-delay: 250ms; }

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

.quick-action-btn:hover { background: rgba(255, 215, 0, 0.15); border-color: rgba(255, 215, 0, 0.5); color: var(--color-gold); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15); }
.quick-action-btn:active { transform: translateY(0); box-shadow: none; }
.quick-action-btn:focus { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.quick-action-btn__icon { font-size: var(--font-size-md); line-height: 1; }
.quick-action-btn__label { white-space: nowrap; }

.quick-action-btn--combat { border-color: rgba(220, 20, 60, 0.4); }
.quick-action-btn--combat:hover { background: rgba(220, 20, 60, 0.15); border-color: rgba(220, 20, 60, 0.6); color: #ff6b6b; box-shadow: 0 2px 8px rgba(220, 20, 60, 0.2); }

.quick-action-btn--movement { border-color: rgba(59, 130, 246, 0.4); }
.quick-action-btn--movement:hover { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.6); color: #60a5fa; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); }

.quick-action-btn--social { border-color: rgba(147, 51, 234, 0.4); }
.quick-action-btn--social:hover { background: rgba(147, 51, 234, 0.15); border-color: rgba(147, 51, 234, 0.6); color: #c084fc; box-shadow: 0 2px 8px rgba(147, 51, 234, 0.2); }

.quick-action-btn--exploration { border-color: rgba(34, 197, 94, 0.4); }
.quick-action-btn--exploration:hover { background: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.6); color: #4ade80; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2); }

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

@media (max-width: 768px) {
  /* Chat-style pills strip: compact, scrollable, no header label */
  .quick-actions-container {
    padding: var(--space-1-5) var(--space-2);
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: env(safe-area-inset-right, 8px);
    border-top: none;
    border-bottom: none;
    background: transparent;
    /* Allow shrinking on mobile to prevent squishing narrative output (#1336) */
    flex-shrink: 1;
    max-height: 60px;
    overflow: hidden;
  }

  .quick-actions-header { display: none; }

  .quick-actions-buttons {
    gap: var(--space-1-5);
    padding-bottom: 0;
  }

  .quick-action-btn {
    padding: 6px 12px;
    font-size: var(--font-size-sm);
    /* WCAG 2.5.5: 44px tap target floor on mobile — these are the
       primary combat interaction mechanism (#5437, #5499). */
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

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

/* Keyboard-open: collapse all quick action pills to icon-only */
@media (max-width: 768px) {
  .mobile-keyboard-open .quick-actions-container {
    padding: 2px var(--space-2);
  }

  .mobile-keyboard-open .quick-action-btn {
    padding: 4px 8px;
    /* keyboard-open collapse trims padding, but the tap target must
       stay WCAG 2.5.5 compliant — 44px floor, not 28px (#5437, #5499). */
    min-height: 44px;
  }

  .mobile-keyboard-open .quick-action-btn__label {
    display: none;
  }

  /* Unified renderer quick actions: also collapse to icon-only */
  .mobile-keyboard-open .unified-quick-actions {
    gap: var(--space-1);
    padding: 2px var(--space-1);
  }

  .mobile-keyboard-open .unified-quick-action {
    padding: var(--space-1) var(--space-2);
    /* keyboard-open collapse trims padding + font, but the tap target must
       stay WCAG 2.5.5 compliant — 44px floor, not 28px (#5437). */
    min-height: 44px;
    font-size: var(--font-size-sm);
  }

  .mobile-keyboard-open .unified-quick-action span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-actions-container { animation: none; }
  .quick-action-btn { animation: none; }
  .quick-action-btn:hover { transform: none; }
  .narrative-output { scroll-behavior: auto; }
}
/*
 * Narrative Panel: Transitions & Overlays
 * =========================================
 * Room transitions, location breadcrumbs, panel animations,
 * mobile transition optimizations, enrichment, ambient gutter.
 */

/* ========================================
 * Room Transition Overlay
 * ======================================== */

.room-transition-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: var(--z-panel);
  animation: overlayFadeIn 0.2s ease-out;
}

.room-transition-overlay--exiting { animation: overlayFadeOut 0.2s ease-out forwards; }

@keyframes overlayFadeIn {
  from { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  to { opacity: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}

@keyframes overlayFadeOut {
  from { opacity: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  to { opacity: 0; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
}

.room-transition-overlay__content { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.room-transition-overlay__spinner { display: flex; gap: var(--space-2-5); }
.room-transition-overlay__spinner span { width: 12px; height: 12px; background: var(--color-gold, #ffd700); border-radius: 50%; animation: transitionBounce 1.4s ease-in-out infinite; }
.room-transition-overlay__spinner span:nth-child(1) { animation-delay: 0s; }
.room-transition-overlay__spinner span:nth-child(2) { animation-delay: 0.2s; }
.room-transition-overlay__spinner span:nth-child(3) { animation-delay: 0.4s; }

@keyframes transitionBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.room-transition-overlay__text { font-family: var(--font-mono); font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-gold, #ffd700); letter-spacing: 0.05em; }

/* Enhanced stages */
.room-transition-overlay__location { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); opacity: 0; animation: locationReveal 0.5s ease-out 0.3s forwards; }

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

.room-transition-overlay__location-name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary, #fff); text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.room-transition-overlay__location-type { font-size: var(--font-size-sm); color: var(--color-text-secondary, #888); text-transform: capitalize; letter-spacing: 0.05em; }

/* Location-themed accent colors */
.room-transition-overlay[data-location-type="tavern"] { --transition-accent: #f59e0b; }
.room-transition-overlay[data-location-type="dungeon"] { --transition-accent: #6366f1; }
.room-transition-overlay[data-location-type="forest"] { --transition-accent: #22c55e; }
.room-transition-overlay[data-location-type="town"] { --transition-accent: #3b82f6; }
.room-transition-overlay[data-location-type="wilderness"] { --transition-accent: #84cc16; }
.room-transition-overlay[data-location-type="cave"] { --transition-accent: #8b5cf6; }
.room-transition-overlay[data-location-type="castle"] { --transition-accent: #ec4899; }
.room-transition-overlay[data-location-type] .room-transition-overlay__spinner span { background: var(--transition-accent, var(--color-gold, #ffd700)); }
.room-transition-overlay[data-location-type] .room-transition-overlay__text { color: var(--transition-accent, var(--color-gold, #ffd700)); }

/* Travel Progress */
.room-transition-overlay__progress { position: absolute; bottom: var(--space-8); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.room-transition-overlay__progress-bar { width: 200px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-pill); overflow: hidden; }
.room-transition-overlay__progress-fill { height: 100%; background: linear-gradient(90deg, var(--transition-accent, var(--color-gold, #ffd700)), color-mix(in srgb, var(--transition-accent, var(--color-gold, #ffd700)) 70%, white)); border-radius: var(--radius-pill); transition: width 0.3s ease-out; box-shadow: 0 0 8px var(--transition-accent, var(--color-gold, #ffd700)); }
.room-transition-overlay__progress-text { font-size: var(--font-size-xs); color: var(--color-text-muted); letter-spacing: 0.1em; text-transform: uppercase; }

/* Direction indicator */
.room-transition-overlay__direction { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.room-transition-overlay__direction-arrow { display: inline-flex; width: 24px; height: 24px; background: var(--transition-accent, var(--color-gold, #ffd700)); -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"); animation: arrowPulse 1s ease-in-out infinite; }

.room-transition-overlay__direction-arrow[data-direction="north"] { transform: rotate(-90deg); }
.room-transition-overlay__direction-arrow[data-direction="south"] { transform: rotate(90deg); }
.room-transition-overlay__direction-arrow[data-direction="west"] { transform: rotate(180deg); }
.room-transition-overlay__direction-arrow[data-direction="northwest"] { transform: rotate(-135deg); }
.room-transition-overlay__direction-arrow[data-direction="northeast"] { transform: rotate(-45deg); }
.room-transition-overlay__direction-arrow[data-direction="southwest"] { transform: rotate(135deg); }
.room-transition-overlay__direction-arrow[data-direction="southeast"] { transform: rotate(45deg); }

@keyframes arrowPulse {
  0%, 100% { opacity: 0.7; transform: translateX(0) var(--arrow-rotation, rotate(0deg)); }
  50% { opacity: 1; transform: translateX(4px) var(--arrow-rotation, rotate(0deg)); }
}

/* ========================================
 * Location Breadcrumb Trail
 * ======================================== */

.location-breadcrumb { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: var(--color-bg-secondary, #1a1a2e); border-radius: var(--radius-sm); font-size: var(--font-size-xs); overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.location-breadcrumb::-webkit-scrollbar { display: none; }
.location-breadcrumb__item { display: flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); white-space: nowrap; transition: color var(--transition-fast); }
.location-breadcrumb__item:hover { color: var(--color-text-secondary); }
.location-breadcrumb__item--current { color: var(--color-accent-primary, #ffd700); font-weight: var(--font-weight-medium); }
.location-breadcrumb__separator { color: var(--color-border-default, #333); font-size: 10px; }
.location-breadcrumb__separator::before { content: ''; display: inline-block; width: 12px; height: 12px; background: currentColor; -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='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%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='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E"); }
.location-breadcrumb__icon { font-size: 14px; }

/* Panel exit/enter animations */
.split-panel--exiting { opacity: 0.5; transform: scale(0.98); transition: opacity var(--transition-normal), transform var(--transition-normal); }
.split-panel--entering { animation: panelEnter 0.25s ease-out; }

@keyframes panelEnter {
  from { opacity: 0.5; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* ========================================
 * Scene Enrichment
 * ======================================== */

.scene-enrichment { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--font-size-sm); line-height: 1.6; opacity: 1; transform: translateY(0); transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.scene-enrichment--entering { opacity: 0; transform: translateY(8px); }
.scene-enrichment--visible { opacity: 1; transform: translateY(0); }
.scene-enrichment__content { display: block; color: var(--color-text-secondary); font-style: italic; }
.scene-enrichment__icon { margin-right: var(--space-1-5); font-style: normal; }

.scene-enrichment--texture { background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), rgba(180, 140, 40, 0.04)); border-left: 2px solid rgba(212, 175, 55, 0.3); animation: enrichmentGlimmer 3s ease-in-out infinite; }
.scene-enrichment--texture .scene-enrichment__content { color: var(--color-gold, #d4af37); }

.scene-enrichment--world_pulse { background: linear-gradient(135deg, rgba(100, 149, 237, 0.06), rgba(65, 105, 225, 0.04)); border-left: 2px solid rgba(100, 149, 237, 0.3); }
.scene-enrichment--world_pulse .scene-enrichment__content { color: var(--color-info, #6495ed); }

.scene-enrichment--meanwhile { background: linear-gradient(135deg, rgba(147, 112, 219, 0.06), rgba(123, 104, 238, 0.04)); border-left: 2px solid rgba(147, 112, 219, 0.3); }
.scene-enrichment--meanwhile .scene-enrichment__content { color: var(--color-accent, #9370db); }

.scene-enrichment--ambient { background: linear-gradient(135deg, rgba(34, 139, 34, 0.06), rgba(46, 125, 50, 0.04)); border-left: 2px solid rgba(34, 139, 34, 0.3); }
.scene-enrichment--ambient .scene-enrichment__content { color: var(--color-success, #228b22); }

.scene-enrichment--foreshadow { background: linear-gradient(135deg, rgba(148, 0, 211, 0.06), rgba(138, 43, 226, 0.04)); border-left: 2px solid rgba(148, 0, 211, 0.3); }
.scene-enrichment--foreshadow .scene-enrichment__content { color: var(--color-foreshadow, #9400d3); }

@keyframes enrichmentGlimmer {
  0%, 100% { border-left-color: rgba(212, 175, 55, 0.3); }
  50% { border-left-color: rgba(212, 175, 55, 0.5); }
}

.scene-enrichment-entry { padding: var(--space-1); }

/* ========================================
 * Expandable Segments
 * ======================================== */

.expandable-segment { --expandable-border: var(--color-border); --expandable-bg: rgba(var(--color-surface-rgb, 30, 30, 30), 0.4); --expandable-header-bg: rgba(var(--color-surface-rgb, 40, 40, 40), 0.6); --expandable-icon-color: var(--color-text-secondary); --expandable-title-color: var(--color-text-primary); --expandable-preview-color: var(--color-text-tertiary); --expandable-transition: 0.3s ease; border: 1px solid var(--expandable-border); border-radius: var(--radius-md); background: var(--expandable-bg); overflow: hidden; margin: var(--space-2) 0; }
.expandable-header { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-3) var(--space-4); background: var(--expandable-header-bg); border: none; cursor: pointer; text-align: left; transition: background var(--expandable-transition); }
.expandable-header:hover { background: rgba(var(--color-surface-rgb, 50, 50, 50), 0.8); }
.expandable-header:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.expandable-toggle-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--expandable-icon-color); transition: transform var(--expandable-transition); }
.expandable-toggle-icon::before { content: ''; display: block; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--expandable-transition); }
.expandable-expanded .expandable-toggle-icon::before { transform: rotate(90deg); }
.expandable-icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--expandable-icon-color); }
.expandable-icon--scroll::before { content: ''; display: inline-block; width: 1em; height: 1em; background: var(--icon-scroll) no-repeat center / contain; }
.expandable-icon--book::before { content: ''; display: inline-block; width: 1em; height: 1em; background: var(--icon-books) no-repeat center / contain; }
.expandable-icon--info::before { content: ''; display: inline-block; width: 1em; height: 1em; background: var(--icon-lightbulb) no-repeat center / contain; }
.expandable-icon--lore::before { content: ''; display: inline-block; width: 1em; height: 1em; background: var(--icon-sparkles) no-repeat center / contain; }
.expandable-icon--secret::before { content: ''; display: inline-block; width: 1em; height: 1em; background: var(--icon-lock) no-repeat center / contain; }
.expandable-title { font-weight: 600; color: var(--expandable-title-color); flex-shrink: 0; }
.expandable-preview { color: var(--expandable-preview-color); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; transition: opacity var(--expandable-transition); }
.expandable-expanded .expandable-preview { opacity: 0; pointer-events: none; }
.expandable-content { max-height: 0; overflow: hidden; transition: max-height var(--expandable-transition); }
.expandable-expanded .expandable-content { max-height: none; }
.expandable-content > * { padding: var(--space-4); }
.expandable-content > *:first-child { padding-top: var(--space-2); }
.expandable-content .narrative-segment { margin: 0; padding: var(--space-3) var(--space-4); }
.expandable-segment--lore { --expandable-border: rgba(70, 130, 180, 0.3); --expandable-bg: rgba(70, 130, 180, 0.08); --expandable-header-bg: rgba(70, 130, 180, 0.12); --expandable-icon-color: #6a9fb5; --expandable-title-color: #b8cde0; }
.expandable-segment--secret { --expandable-border: rgba(168, 153, 132, 0.4); --expandable-bg: rgba(168, 153, 132, 0.08); --expandable-header-bg: rgba(168, 153, 132, 0.12); --expandable-icon-color: #a89984; --expandable-title-color: #d5c4a1; }
.expandable-segment--important { --expandable-border: rgba(251, 191, 36, 0.4); --expandable-bg: rgba(251, 191, 36, 0.08); --expandable-header-bg: rgba(251, 191, 36, 0.12); --expandable-icon-color: #fbbf24; --expandable-title-color: #fcd34d; }

/* ========================================
 * Ambient Gutter
 * ======================================== */

.ambient-gutter { position: relative; max-height: 140px; overflow: hidden; padding: var(--space-1) var(--space-3); margin: 0 var(--space-2); opacity: 0.65; font-size: var(--font-size-xs); line-height: 1.5; transition: opacity 0.3s ease; pointer-events: none; }
.ambient-gutter:hover { opacity: 0.85; pointer-events: auto; }
.ambient-gutter:empty { display: none; }
.ambient-gutter__entry { padding: var(--space-1) var(--space-2); margin-bottom: var(--space-1); border-left: 2px solid rgba(34, 139, 34, 0.25); border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(34, 139, 34, 0.04), rgba(46, 125, 50, 0.02)); color: var(--color-text-tertiary, var(--color-text-secondary)); font-style: italic; opacity: 1; transform: translateY(0); transition: opacity 0.6s ease-out, transform 0.4s ease-out; }
.ambient-gutter__entry--entering { opacity: 0; transform: translateY(6px); }
.ambient-gutter__entry--fading { opacity: 0; transform: translateY(-4px); }
.ambient-gutter__entry .ambient-gutter__icon { margin-right: var(--space-1); font-style: normal; opacity: 0.7; }
.ambient-gutter__entry--texture { border-left-color: rgba(212, 175, 55, 0.25); background: linear-gradient(135deg, rgba(212, 175, 55, 0.04), rgba(180, 140, 40, 0.02)); }

/* Segment Visual Weight Tiers */
[data-segment-tier="primary"] { }
[data-segment-tier="ambient"] { opacity: 0.6; font-size: 0.9em; font-style: italic; }
[data-segment-tier="mechanical"] { font-size: 0.85em; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: rgba(128, 128, 128, 0.06); font-family: var(--font-mono, monospace); }

/* ========================================
 * Reduced Motion & Responsive
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .room-transition-overlay, .room-transition-overlay--exiting { animation: none; }
  .room-transition-overlay--exiting { opacity: 0; }
  .room-transition-overlay__spinner span { animation: none; opacity: 0.7; }
  .room-transition-overlay__spinner span:nth-child(2) { opacity: 0.85; }
  .room-transition-overlay__spinner span:nth-child(3) { opacity: 1; }
  .split-panel--exiting, .split-panel--entering { transition: none; animation: none; }
  .thinking-indicator__progress { animation: none; background: rgba(255, 215, 0, 0.6); }
  .scene-enrichment { transition: none; animation: none; }
  .scene-enrichment--entering { opacity: 1; transform: none; }
  .scene-enrichment--texture { animation: none; }
  .expandable-segment { --expandable-transition: 0s; }
  .expandable-toggle-icon::before, .expandable-content { transition: none; }
  .ambient-gutter__entry { transition: none; }
  .ambient-gutter__entry--entering { opacity: 1; transform: none; }
  .ambient-gutter__entry--fading { opacity: 0; }
}

@media (max-width: 640px) {
  .ambient-gutter { max-height: 80px; padding: var(--space-1) var(--space-2); margin: 0; font-size: 0.7rem; }
  .ambient-gutter__entry { padding: var(--space-half, 2px) var(--space-1); margin-bottom: 2px; border-left-width: 1px; }
}

/* ========================================
 * Mobile Transition Optimizations
 * ======================================== */

@media (max-width: 1023px) {
  .room-transition-overlay { animation-duration: var(--t-overlay-fade, 120ms); -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, 0.9); }
  .room-transition-overlay--exiting { animation-duration: var(--t-overlay-fade, 120ms); }
  .room-transition-overlay__spinner span { width: 10px; height: 10px; }
  .room-transition-overlay__text { font-size: var(--font-size-base); }
  .dm-responding-bar--visible { animation: dmRespondingEnter 0.2s ease-out, dmRespondingPulse 1.5s ease-in-out 0.2s infinite; }
  .ai-thinking-float--visible { animation: thinkingPulseFloat 1.8s ease-in-out infinite; }
  .ai-thinking-float--hiding { transition-duration: 0.15s; }
  .grid-panel--exiting { animation-duration: var(--timing-fast, 150ms); }
  .grid-panel--entering { animation-duration: var(--t-panel-enter, 150ms); }
}
/*
 * Narrative Panel: Responsive & Mobile
 * ======================================
 * Tablet/mobile responsive overrides, bottom sheet mode,
 * focus mode, and mobile-specific compact styles.
 */

/* ========================================
 * Tablet & Mobile Responsive
 * ======================================== */

@media (max-width: 1024px) {
  .input-area {
    max-height: 150px;
    padding: var(--space-2);
    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);
    padding-bottom: var(--space-2);
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }

  .narrative-output {
    padding: var(--space-3);
  }
}

@media (max-width: 768px) {
  /* Legacy: height-based narrative fill for non-mf-layout views.
     mf-layout uses flex chain instead (see _mobile_first.css). */
  .grid-layout-wrapper:not(.mf-layout) .narrative-panel-content,
  .grid-layout-wrapper:not(.mf-layout) .narrative-main {
    height: 100%;
    min-height: 0;
  }

  /* Legacy: fixed input height for non-mf-layout views.
     mf-layout uses flex-shrink: 0 instead (see _mobile_first.css). */
  .grid-layout-wrapper:not(.mf-layout) .input-area {
    max-height: 80px;
    min-height: 80px;
    padding: var(--space-2);
    padding-bottom: var(--space-2);
    padding-bottom: env(safe-area-inset-bottom, 8px);
    gap: var(--space-1);
  }

  /* Prevent iOS zoom on input focus (applies to all layouts).
     Hardcoded 16px minimum — var(--font-size-lg) can be 14px on
     small font-size setting, which still triggers iOS auto-zoom. */
  .input-area input[type="text"],
  .input-area textarea {
    font-size: max(16px, var(--font-size-lg));
    padding: var(--space-2-5) var(--space-3-5);
  }

  /* Ensure narrative main and input area fill full width on mobile (#1450).
     The narrative-main uses min-width:0 for flex but needs explicit width
     so the input-area inside stretches to the viewport edge. */
  .narrative-main {
    width: 100%;
  }

  .input-area {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Horizontal padding override is in _mobile_accessibility_fixes.css
       (loads last in cascade, after _terminal_layout.css). */
  }

  /* Input line fills available width inside the input area (#1450). */
  .input-line {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .narrative-output {
    padding: var(--space-2);
  }

  .narrative-entry {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
  }

  .narrative-entry.player {
    padding-left: calc(var(--space-3) + 1em);
  }

  .narrative-entry.player::before {
    left: var(--space-2);
    top: var(--space-2);
  }

  /* #1581: Hide narrative filter tabs on mobile to maximize vertical space.
     Mobile shows all narrative types (Story mode) by default.
     #3707/#3750: this rule is the authoritative hide for the narrative
     panel filter strip at <768px. Specificity 0,1,0 — it relies on the
     turn-queue rule remaining scoped to `.panel-turn-queue` (otherwise
     same-specificity, source-after `display: flex` would re-override).
     Regression coverage: e2e/tests/mobile/narrative-tab-overflow.spec.js. */
  .narrative-filters {
    display: none;
  }

  /* #1581: Hide grid panel header for the narrative panel on mobile.
     The title/icon/dropdown eat ~32px of precious vertical space. */
  .grid-panel[data-panel-type="narrative"] > .grid-panel__header {
    display: none;
  }

}

/* ========================================
 * Mobile: narrative-main bottom padding (#5119)
 * The .input-area is position:fixed on mobile (see _input.css), so it is
 * removed from normal document flow. Add padding-bottom to .narrative-main
 * equal to the input bar height + safe area so narrative content is never
 * hidden behind the fixed bar when scrolled to the bottom.
 * ======================================== */

@media (max-width: 767px) {
  .narrative-main {
    /* Reserve space at the bottom so narrative content scrolls above the
       fixed input bar. Uses the --input-area-height token (56px) plus
       any safe-area-inset-bottom (home indicator). */
    padding-bottom: calc(var(--input-area-height, 56px) + env(safe-area-inset-bottom, 0px));
  }
}

/* ========================================
 * Bottom Sheet Mode - Input Z-Index
 * (#5119: position:fixed replaces sticky — z-index is already set in _input.css.
 *  These rules are retained only for the panel/lobby z-index stacking context.) */

@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .grid-panel[data-panel-type="narrative"],
  .mobile-bottom-sheet-mode .lobby-left-panel {
    z-index: var(--z-overlay);
    position: relative;
  }
}

/* ========================================
 * Focus Mode - Compact Input
 * ======================================== */

.terminal-container--focus-mode .input-area {
  max-height: 60px;
  min-height: 60px;
  padding: var(--space-1) var(--space-2);
  padding-bottom: var(--space-1);
  padding-bottom: env(safe-area-inset-bottom, 4px);
}

/* ========================================
 * #2638: Narrow mobile viewports (<400px)
 * ========================================
 * At 360px–399px the compact mode-selector's "Act" label + tooltip
 * ("Click or press \ to change mode") steal enough horizontal space
 * to truncate the input placeholder mid-word. Collapse to icon-only
 * and hide the tooltip (the kbd shortcut remains discoverable via
 * the button's aria-label / title). The tooltip still renders on
 * wider viewports where it fits.
 */
@media (max-width: 399px) {
  /* Icon-only mode chip — compact tap target, label visually hidden */
  .mode-selector--compact .mode-selector__btn {
    padding: 4px;
    min-width: 32px;
    justify-content: center;
  }

  /* Visually hide the label but keep it in the a11y tree so screen
     readers still announce the current mode. */
  .mode-selector--compact .mode-selector__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Hide the educational tooltip — "Click or press \ to change mode" —
     so it doesn't overlay the input or steal layout space. Keyboard
     shortcut remains wired; button title attribute still exposes it. */
  .mode-selector--compact .mode-selector__tooltip {
    display: none;
  }
}
/*
 * Organism: Narrative Panel
 * =========================
 * The main story/narrative area with input field at the bottom.
 * Enhanced with D&D theming and immersive visual effects.
 *
 * Split into focused modules under narrative/:
 *   _layout.css       — Container, filter bar, scrollable output
 *   _entry.css        — Base entry styles, actions, channel config
 *   _entry_types.css  — DM, player, system, combat, tool entry types
 *   _entry_content.css — Magic, lore, chat, tables, streaming, voice
 *   _input.css        — Input bar, selection trays
 *   _loading.css      — Loading spinner, typing, AI thinking, DM responding
 *   _animations.css   — Segment entrance animations, shared keyframes
 *   _scroll.css       — New messages indicator, scroll-to-bottom
 *   _wiki_links.css   — Entity links, skill opportunities, narrative hooks
 *   _perception.css   — Knowledge-exclusive, perception checks, multiplayer
 *   _speech_bubbles.css — Speech bubbles, voice styles, emotion badges
 *   _screenplay.css   — Script/screenplay mode, display toggle, DM insights
 *   _tabs.css         — Dynamic tabs, panes, selection cards, quick actions
 *   _transitions.css  — Room transitions, breadcrumbs, enrichment, gutter
 *   _mobile.css       — Tablet/mobile responsive, bottom sheet, focus mode
 */
















/* ==========================================================================
   Ambient Gutter
   Holodeck Phase 1 — Atmospheric Rendering Layer (Task #947)

   Persistent, low-prominence rendering zone for environmental atmosphere.
   Ambient segments route here rather than into the main narrative stream,
   creating visual information hierarchy — world texture without interrupting
   the narrative flow.

   The ambient gutter is the game's "breathing" — it shows the world is alive
   without demanding the player's full attention.
   ========================================================================== */

/* ----------------------------------------
 * Ambient Gutter Zone
 * Persistent strip below narrative output
 * ---------------------------------------- */

.ambient-gutter {
  position: relative;
  max-height: 140px;
  overflow: hidden;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin: 0 var(--space-2, 8px);
  opacity: 0.65;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.5;
  transition: opacity 0.3s ease;
  /* Non-interactive by default — world texture, not actionable content */
  pointer-events: none;
}

/* Reveal fully on hover to allow reading */
.ambient-gutter:hover {
  opacity: 0.85;
  pointer-events: auto;
}

/* Collapse entirely when empty — no phantom space */
.ambient-gutter:empty {
  display: none;
}

/* ----------------------------------------
 * Individual Ambient Entries
 * ---------------------------------------- */

.ambient-gutter__entry {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin-bottom: var(--space-1, 4px);
  border-left: 2px solid rgba(34, 139, 34, 0.25);
  border-radius: var(--radius-sm, 2px);
  background: linear-gradient(
    135deg,
    rgba(34, 139, 34, 0.04) 0%,
    rgba(46, 125, 50, 0.02) 100%
  );
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.4s ease-out;
}

/* Entrance animation — entries materialize softly */
.ambient-gutter__entry--entering {
  opacity: 0;
  transform: translateY(6px);
}

/* Exit animation — oldest entries fade upward */
.ambient-gutter__entry--fading {
  opacity: 0;
  transform: translateY(-4px);
}

/* Sense-type icon */
.ambient-gutter__entry .ambient-gutter__icon {
  margin-right: var(--space-1, 4px);
  font-style: normal;
  opacity: 0.7;
}

/* Texture variant (gold accent — for noteworthy atmospheric details) */
.ambient-gutter__entry--texture {
  border-left-color: rgba(212, 175, 55, 0.25);
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.04) 0%,
    rgba(180, 140, 40, 0.02) 100%
  );
}

/* ----------------------------------------
 * Responsive: Collapse on narrow viewports
 * On mobile, ambient entries become inline
 * spans rather than a dedicated gutter zone
 * ---------------------------------------- */

@media (max-width: 640px) {
  .ambient-gutter {
    max-height: 80px;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    margin: 0;
    font-size: 0.7rem;
  }

  .ambient-gutter__entry {
    padding: var(--space-half, 2px) var(--space-1, 4px);
    margin-bottom: 2px;
    border-left-width: 1px;
  }
}

/* ----------------------------------------
 * Reduced Motion
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .ambient-gutter__entry {
    transition: none;
  }

  .ambient-gutter__entry--entering {
    opacity: 1;
    transform: none;
  }

  .ambient-gutter__entry--fading {
    opacity: 0;
  }
}

/* ==========================================================================
   Inline Ambient Narrative Entries (#2668)
   Supersedes the ambient-gutter zone for the streaming render path — ambient
   segments now flow inline in the narrative scroll with a distinct but
   readable treatment. JP feedback 2026-04-15: "environmental ambience is
   pretty good, I like their styling but a bit hard to read; maybe just
   include them in the regular narrative."
   ========================================================================== */

.narrative-entry--ambient {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin: var(--space-1, 4px) 0;
  border-left: 2px solid rgba(120, 160, 120, 0.55);
  border-radius: var(--radius-sm, 2px);
  background: linear-gradient(
    135deg,
    rgba(70, 120, 70, 0.08) 0%,
    rgba(60, 100, 60, 0.04) 100%
  );
  /* Full opacity + readable color — previous gutter used 0.65 opacity + tertiary
     color which was WCAG fail. This reads as secondary-text-italic. */
  opacity: 1;
  color: var(--color-text-secondary, #c0c0c0);
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.5;
  transition: opacity 0.4s ease-out, transform 0.3s ease-out;
}

.narrative-entry--ambient.narrative-entry--entering {
  opacity: 0;
  transform: translateY(4px);
}

.narrative-ambient__label {
  display: inline-block;
  margin-right: var(--space-2, 8px);
  padding: 0 var(--space-1, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(140, 180, 140, 0.9);
  border: 1px solid rgba(140, 180, 140, 0.3);
  border-radius: var(--radius-sm, 2px);
  vertical-align: baseline;
}

.narrative-ambient__entity {
  display: inline-block;
  margin-right: var(--space-1, 4px);
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-primary, #e0e0e0);
}

.narrative-ambient__text {
  /* italic from parent — text carries the atmosphere */
}

/* Texture variant — gold accent for noteworthy atmospheric details */
.narrative-entry--ambient-texture {
  border-left-color: rgba(212, 175, 90, 0.55);
  background: linear-gradient(
    135deg,
    rgba(180, 140, 40, 0.08) 0%,
    rgba(150, 110, 30, 0.04) 100%
  );
}

.narrative-entry--ambient-texture .narrative-ambient__label {
  color: rgba(220, 190, 120, 0.9);
  border-color: rgba(220, 190, 120, 0.3);
}

/* Speculative variant — cooler tone for inference/sense cues */
.narrative-entry--ambient-speculative {
  border-left-color: rgba(140, 170, 210, 0.55);
  background: linear-gradient(
    135deg,
    rgba(90, 120, 160, 0.08) 0%,
    rgba(70, 100, 140, 0.04) 100%
  );
}

.narrative-entry--ambient-speculative .narrative-ambient__label {
  color: rgba(170, 195, 225, 0.9);
  border-color: rgba(170, 195, 225, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry--ambient {
    transition: none;
  }
  .narrative-entry--ambient.narrative-entry--entering {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Segment Visual Weight Tiers
   Holodeck Phase 1 — Segment Visual Weight (Task #948)

   Assigns visual prominence tiers to segment types rendered in the main
   narrative stream. Uses data-segment-tier attribute set by the Ruby
   ResponseBroadcaster and applied by the NarrativeRendererController.

   Tier hierarchy (most → least prominent):
     Primary      narration, npc_dialogue, action
     Environmental ambient, time, position (fallback when gutter unavailable)
     Mechanical   roll_result, combat_log
     Contextual   hook, secret, expandable (subtle, collapsed by default)
   ========================================================================== */

/* Primary tier: narrative core — full weight, default styling */
[data-segment-tier="primary"] {
  /* No overrides — inherits default narrative styling */
}

/* Environmental tier: atmospheric texture rendered in main stream
 * (fallback when the ambient gutter is unavailable or viewport is narrow) */
[data-segment-tier="environmental"],
[data-segment-tier="ambient"] {
  opacity: 0.6;
  font-size: 0.9em;
  font-style: italic;
}

/* Mechanical tier: dice rolls, combat events, system messages
 * Compact monospace layout that doesn't interrupt narrative rhythm */
[data-segment-tier="mechanical"] {
  font-size: 0.85em;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 2px);
  background: rgba(128, 128, 128, 0.06);
  font-family: var(--font-mono, monospace);
}

/* Contextual tier: hooks, secrets, expandables
 * Subtle presence — available if player seeks it, invisible if they don't */
[data-segment-tier="contextual"] {
  opacity: 0.75;
  font-size: 0.9em;
  border-left: 2px solid rgba(139, 92, 246, 0.3);
  padding-left: var(--space-2, 8px);
  font-style: italic;
  color: var(--color-text-secondary, #9CA3AF);
}

/* Collapsed-by-default for contextual segments */
[data-segment-tier="contextual"][data-collapsed="true"] {
  cursor: pointer;
  overflow: hidden;
  max-height: 1.5em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-segment-tier="contextual"][data-collapsed="true"]:hover {
  max-height: none;
  white-space: normal;
  text-overflow: initial;
  opacity: 0.9;
}
/* ==========================================================================
   World Ticker
   Speculative Narration Phase 1 — Ambient Flavor Text Strip

   A persistent, single-line strip of scrolling low-priority flavor text.
   Sits between the ambient gutter and the scroll-to-latest button.
   Cycles one line at a time with a fade transition.

   Think "Barrens chat" — the world murmurs in the background.
   ========================================================================== */

.world-ticker {
  position: relative;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin: 0 var(--space-2, 8px);
  opacity: 0.4;
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Reveal on hover */
.world-ticker:hover {
  opacity: 0.65;
  pointer-events: auto;
}

/* Hide when empty or disabled */
.world-ticker[hidden],
.world-ticker:empty {
  display: none;
}

/* The cycling line */
.world-ticker__line {
  display: inline;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
  transition: opacity 0.4s ease;
}

/* Fade-out during line transition */
.world-ticker__line--fading {
  opacity: 0;
}

/* Entity label on gutter entries (speculative content attribution) */
.ambient-gutter__entity {
  font-size: 0.65rem;
  font-style: normal;
  opacity: 0.5;
  margin-right: var(--space-1, 4px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Speculative layer variant (blue-tinted accent) */
.ambient-gutter__entry--speculative {
  border-left-color: rgba(59, 130, 246, 0.25);
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.04) 0%,
    rgba(37, 99, 235, 0.02) 100%
  );
}

/* ----------------------------------------
 * Responsive: Hide on narrow viewports
 * ---------------------------------------- */

@media (max-width: 640px) {
  .world-ticker {
    display: none;
  }
}

/* ----------------------------------------
 * Reduced Motion
 * ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .world-ticker__line {
    transition: none;
  }

  .world-ticker__line--fading {
    opacity: 0;
  }
}
/* Channel Tabs - Unified message routing UI
 *
 * Replaces DM toggle + chat mode dropdown with a single channel paradigm.
 * Each channel is a separate message stream with different AI behavior.
 */

/* Wrapper for channel tabs + quick tools - sits at top of narrative-main */
.channel-tabs-wrapper {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Respect HTML `hidden` attribute — `display: flex` above otherwise wins
 * over the UA `[hidden] { display: none }` rule, which let the room-gated
 * DEBUG tab leak into lobby/character_creation for admins (#4255). */
.channel-tabs-wrapper[hidden] {
  display: none;
}

/* Horizontal tier tabs - top of narrative panel.
 *
 * #4266: vertical footprint is the dominant complaint (audit 5.2). Drop the
 * bottom-border separator so the tier-tabs row visually merges with the
 * channel-tabs row beneath it, and tighten vertical padding. The two rows
 * still share a single `--color-bg-secondary` background, so removing the
 * divider yields one continuous control strip instead of two stacked bars.
 */
.channel-tier-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 0.125rem 0.25rem;
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.channel-tier-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  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);
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

.channel-tier-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.channel-tier-tab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.channel-tier-tab.channel-tab--active {
  background: var(--accent-bg, var(--color-accent-bg));
  border-color: var(--accent-color, var(--color-accent-primary));
  color: var(--accent-color, var(--color-accent-primary));
}

/* Tier-specific active colors — sourced from --color-channel-* tokens
 * (#4266 / audit 5.4) so all channel hues live in _tokens.css. */
.channel-tier-tab[data-tier="core"].channel-tab--active {
  --accent-color: var(--color-channel-adventure);
  --accent-bg: var(--color-channel-adventure-bg);
}

.channel-tier-tab[data-tier="game"].channel-tab--active {
  --accent-color: var(--color-channel-creative);
  --accent-bg: var(--color-channel-creative-bg);
}

.channel-tier-tab[data-tier="both"].channel-tab--active {
  --accent-color: var(--color-channel-ooc);
  --accent-bg: var(--color-channel-ooc-bg);
}

.channel-tier-tab--debug.channel-tab--active {
  --accent-color: var(--debug-tier-accent);
  --accent-bg: #2a1a0d;
}

/* Active tier tab gets bolder weight + heavier letter-spacing so the
 * differentiation isn't color-only (#4266 / audit 5.3). */
.channel-tier-tab.channel-tab--active {
  font-weight: 800;
  letter-spacing: 0.075em;
}

.channel-tier-tab__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
}

.channel-tier-tab__icon .svg-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.channel-tier-tab__label {
  font-size: 0.625rem;
}

/* Hide vertical tier tabs on very small screens, show horizontal instead */
@media (max-width: 480px) {
  .channel-tier-tabs {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .channel-tabs-wrapper {
    flex-direction: column;
  }
}

/* Story mode toggle removed from UI - guided/freeform accessible via /guided command */

/* Main channel tabs container.
 *
 * #3879: tightened vertical padding so the header doesn't take ~3 row-heights
 * when the only content is the empty dynamic-tabs slot. With the FREE MODE
 * toggle removed (#3879), this row is often empty for non-DM players in
 * non-game rooms — let it compact to a near-zero footer.
 *
 * #4266: shaved another row of vertical chrome by removing the
 * tier-tabs/channel-tabs internal divider (see .channel-tier-tabs above).
 * The remaining bottom-border on this row still separates the channel
 * controls from the narrative output below.
 */
.channel-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
  flex: 1;
  min-height: 0;
}

/* When the only child of .channel-tabs that has any rendered content is the
 * empty dynamic-tabs slot (and the hidden separator), collapse padding.
 * Uses :has() — supported by all modern browsers (Chromium 105+, Safari 15.4+,
 * Firefox 121+). On older browsers the row keeps its compact 0.25rem padding,
 * which is still smaller than the previous 0.5rem.
 */
.channel-tabs:has(> .nf-dynamic-tabs:empty):not(:has(.dm-mode-indicator)):not(:has(.story-mode-toggle)) {
  padding: 0;
  border-bottom: none;
}

/* Individual channel tab (#1554: border-bottom style to distinguish from filter bar) */
.channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted, #888);
  font-size: 0.875rem;
  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);
}

.channel-tab:hover {
  background: transparent;
  color: var(--color-text-primary);
  border-bottom-color: var(--accent-color, rgba(255, 255, 255, 0.3));
}

.channel-tab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.channel-tab--active {
  background: transparent;
  border-bottom-color: var(--accent-color, var(--color-accent-primary));
  color: var(--accent-color, var(--color-accent-primary));
}

/* Channel-specific colors — sourced from --color-channel-* tokens
 * (#4266 / audit 5.4). Add a token here when introducing a new channel. */
.channel-tab[data-channel="adventure"].channel-tab--active {
  --accent-color: var(--color-channel-adventure);
  --accent-bg: var(--color-channel-adventure-bg);
}

.channel-tab[data-channel="ooc"].channel-tab--active {
  --accent-color: var(--color-channel-ooc);
  --accent-bg: var(--color-channel-ooc-bg);
}

.channel-tab[data-channel="dm"].channel-tab--active {
  --accent-color: var(--color-channel-dm);
  --accent-bg: var(--color-channel-dm-bg);
}

.channel-tab[data-channel="creative"].channel-tab--active {
  --accent-color: var(--color-channel-creative);
  --accent-bg: var(--color-channel-creative-bg);
}

/* Active channel tab gets bolder weight in addition to color so the
 * signal isn't color-only (#4266 / audit 5.3). The icon (rendered via
 * svg_icon in the partial) provides the second non-color signal. */
.channel-tab.channel-tab--active {
  font-weight: 700;
}

/* Channel tab icon */
.channel-tab__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

.channel-tab__icon .svg-icon {
  width: 1em;
  height: 1em;
}

/* Channel tab label */
.channel-tab__label {
  /* label hidden on small screens via media query below */
}

@media (max-width: 480px) {
  .channel-tab__label {
    display: none;
  }
}

/* DM tab only visible when user has DM powers */
.channel-tab--dm-only {
  display: none;
}

.channel-tabs[data-has-dm-powers="true"] .channel-tab--dm-only {
  display: inline-flex;
}

/* DM Channel Mode Indicator */
.dm-mode-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
}

.dm-mode-indicator__label {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.dm-mode-buttons {
  display: flex;
  gap: 0.25rem;
}

.dm-mode-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  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);
}

.dm-mode-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.dm-mode-btn--active {
  background: var(--dm-accent-bg, #2a2a0d);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Mode-specific icons */
.dm-mode-btn[data-mode="chat"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-chat) no-repeat center / contain;
}

.dm-mode-btn[data-mode="plan"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
}

.dm-mode-btn[data-mode="auto"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-zap);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-zap);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Shift+Tab hint */
.dm-mode-hint {
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  margin-left: 0.5rem;
}

.dm-mode-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.25rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--border-color, #333);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

/* Quick tool buttons for DM channel */
.dm-quick-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
}

/* Respect hidden attribute (CSS display overrides it otherwise) */
.dm-quick-tools[hidden],
.dm-mode-indicator[hidden] {
  display: none;
}

.dm-quick-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 0.75rem;
  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);
}

.dm-quick-tool-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
}

.dm-quick-tool-btn__icon {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .channel-tabs {
    padding: 0.375rem;
  }

  .channel-tab {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }

  .dm-mode-indicator {
    flex-wrap: wrap;
  }

  .dm-mode-hint {
    display: none;
  }
}

/* Animation for channel switching */
@keyframes channel-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.channel-tab--switching {
  animation: channel-pulse var(--timing-normal) var(--ease-default);
}

/* DM panes / pending-actions queue styles previously lived here; extracted to
 * organisms/_dm_panes.css in #4266 to keep this file under the 1000 LOC cap. */

/* Story Mode Toggle CSS removed in #3879 — toggle button no longer rendered
 * in the narrative header (use /guided slash command). Channel tabs spec
 * still creates the element programmatically to verify controller logic;
 * those tests don't depend on visual styling. */

/* ============================================================================
 * DEBUG tier visual feedback
 * ----------------------------------------------------------------------------
 * When the admin clicks the DEBUG tier tab, the channel-tabs controller adds
 * `narrative-panel--debug-tier` to the narrative panel root. The controller
 * also adds `narrative-panel--tier-empty` when the active tier filters out
 * every entry — used here to surface a "no entries" hint instead of a blank
 * panel (which previously made the click look like a no-op).
 * ============================================================================ */

.narrative-panel--debug-tier {
  /* Subtle orange border accent matching the DEBUG tab active colour */
  box-shadow: inset 0 0 0 1px var(--debug-tier-accent-soft);
}

/* Q18: Surface a sighted text label when debug tier is active so the
 * orange border isn't the only signal that the channel filter is on. */
.narrative-panel--debug-tier::before {
  content: "DEBUG channels visible";
  display: block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--debug-tier-accent);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.narrative-panel--tier-empty .narrative-output::after {
  content: attr(data-empty-tier-hint);
  display: block;
  padding: var(--space-3, 12px);
  margin: var(--space-2, 8px);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-align: center;
}

.narrative-panel--debug-tier.narrative-panel--tier-empty .narrative-output::after {
  border-color: var(--debug-tier-accent-soft);
  color: var(--debug-tier-accent-muted);
}

/* B7: Reduced-motion — silence channel tab transitions and pulse animation. */
@media (prefers-reduced-motion: reduce) {
  .channel-tab--switching, .channel-tier-tab, .channel-tab,
  .channel-tab-badge, .channel-tier-tab-badge { animation: none !important; transition: none !important; }
}
/**
 * DM Panes — Base Layout
 * ========================
 * DM content pane base, DM panes container, and pane content wrappers.
 */

/* DM Panes — DM-only content panes that overlay the narrative panel
 * when a sidebar tab is selected.
 *
 * Extracted from _channel_tabs.css (#4266) so the channel-tabs file
 * stays under the 1000 LOC cap. These rules are unrelated to channel
 * tabs themselves — they style the .dm-content-pane / .dm-panes-container
 * layout, the per-pane content wrappers (scene / live / npcs / tools /
 * cards / ai / prep / control), and the pending-actions queue items.
 */

/* DM Content Panes - shown in main content area when sidebar tabs selected */
.dm-content-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-docked);
  background: var(--color-bg-secondary);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dm-content-pane[hidden] {
  display: none;
}

/* Pane header */
.dm-content-pane__header {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-content-pane__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Pane body */
.dm-content-pane__body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

/* Override dm-control styles when in main pane */
.dm-control-pane .dm-control-panel {
  height: 100%;
  background: transparent;
}

.dm-control-pane .dm-control-header {
  display: none; /* Header is redundant - tab already identifies this */
}

/* ========================================
 * DM Panes Container (wraps all DM panes for shared controller)
 * ======================================== */

/* Container is absolutely positioned to not affect normal document flow.
   Individual panes inside are also absolute and overlay when shown. */
.dm-panes-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Allow clicks through when no pane visible */
  z-index: var(--z-sticky-above); /* Below panes (docked) but above narrative */
}

/* Re-enable pointer events on actual pane content */
.dm-panes-container .dm-content-pane {
  pointer-events: auto;
}

/**
 * DM Panes — Pane Content
 * =========================
 * Scene, live, NPC, tools, cards, prep, and control pane-specific styles.
 */

/* ========================================
 * DM Pane Content Wrappers
 * ======================================== */

.dm-pane-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Scene Pane */
.dm-scene-pane-content .dm-narrate-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-scene-pane-content .dm-scene-info {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-scene-pane-content .dm-scene-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Live Pane */
.dm-live-pane-content .dm-live-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
  font-size: 1rem;
}

.dm-live-pane-content .dm-action-queue,
.dm-live-pane-content .dm-turn-control,
.dm-live-pane-content .dm-session-state {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-live-pane-content .dm-action-queue-header,
.dm-live-pane-content .dm-turn-control-header,
.dm-live-pane-content .dm-session-state-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-live-pane-content .dm-action-queue-header h5,
.dm-live-pane-content .dm-turn-control-header h5,
.dm-live-pane-content .dm-session-state-header h5 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dm-live-pane-content .dm-action-queue-count {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: var(--dm-accent-color, var(--color-channel-dm));
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
}

.dm-live-pane-content .dm-turn-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dm-live-pane-content .dm-state-item {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.dm-live-pane-content .dm-state-item .state-label {
  color: var(--text-muted, #888);
}

.dm-live-pane-content .dm-state-item .state-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.dm-live-pane-content .dm-status--active {
  color: var(--color-accent-secondary);
}

.dm-live-pane-content .dm-exit-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.dm-live-pane-content .dm-exit-btn {
  width: 100%;
}

/* NPCs Pane */
.dm-npcs-pane-content .dm-npc-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

.dm-npcs-pane-content .dm-npc-list {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  min-height: 100px;
}

.dm-npcs-pane-content .dm-npc-quick-add {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-npcs-pane-content .dm-quick-add-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.dm-npcs-pane-content .dm-quick-add-row {
  display: flex;
  gap: 0.5rem;
}

.dm-npcs-pane-content .dm-npc-name-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.dm-npcs-pane-content .dm-npc-name-input:focus {
  outline: none;
  border-color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Tools Pane */
.dm-tools-pane-content .dm-tools-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Cards Pane */
.dm-cards-pane-content .dm-cards-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* AI Pane - uses assist_tab styles */
.dm-ai-pane-content .dm-assist-header h4 {
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Prep Pane - uses existing prep styles from dm_control */
.dm-prep-pane-content .dm-prep-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Control Pane - merged scene + live */
.dm-control-pane-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dm-control-pane-content .dm-narrate-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-control-pane-content .dm-scene-info {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-control-pane-content .dm-scene-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dm-control-pane-content .dm-action-queue,
.dm-control-pane-content .dm-turn-control,
.dm-control-pane-content .dm-session-state {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-control-pane-content .dm-action-queue-header,
.dm-control-pane-content .dm-turn-control-header,
.dm-control-pane-content .dm-session-state-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-control-pane-content .dm-action-queue-header h5,
.dm-control-pane-content .dm-turn-control-header h5,
.dm-control-pane-content .dm-session-state-header h5 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dm-control-pane-content .dm-action-queue-count {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: var(--dm-accent-color, var(--color-channel-dm));
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
}

.dm-control-pane-content .dm-turn-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dm-control-pane-content .dm-state-item {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.dm-control-pane-content .dm-state-item .state-label {
  color: var(--text-muted, #888);
}

.dm-control-pane-content .dm-state-item .state-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.dm-control-pane-content .dm-status--active {
  color: var(--color-accent-secondary);
}

.dm-control-pane-content .dm-exit-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.dm-control-pane-content .dm-exit-btn {
  width: 100%;
}
/**
 * DM Panes — Pending Actions Queue
 * ==================================
 * Pending action items, risk level variants, and active count indicators.
 */


/* ========================================
 * Pending Actions Queue Items
 * ======================================== */

.dm-pending-action-item {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  transition: opacity var(--timing-normal) var(--ease-default), transform var(--timing-normal) var(--ease-default);
}

.dm-pending-action-item--removing {
  opacity: 0;
  transform: translateX(10px);
}

/* Risk level variants
 * Refactor (#4260, XC-3): caution and danger now signal via background
 * tint + the existing `.dm-pending-action-badge--*` chip rather than a
 * left-border accent. `--critical` retains the left-border because it is
 * the load-bearing severity signal — at-a-glance "stop the world" cue
 * for the DM queue. */
.dm-pending-action-item--caution {
  background: rgba(245, 158, 11, 0.08);
}

.dm-pending-action-item--danger {
  background: rgba(239, 68, 68, 0.1);
}

.dm-pending-action-item--critical {
  border-left: 3px solid #dc2626;
  background: rgba(220, 38, 38, 0.15);
}

.dm-pending-action-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.dm-pending-action-tool {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.dm-pending-action-badge {
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
}

.dm-pending-action-badge--warning {
  background: var(--color-accent-warning);
  color: #000;
}

.dm-pending-action-badge--caution {
  background: var(--color-accent-warning);
  color: #000;
}

.dm-pending-action-badge--danger {
  background: var(--color-accent-error);
  color: #fff;
}

.dm-pending-action-badge--critical {
  background: #dc2626;
  color: #fff;
}

.dm-pending-action-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  font-family: var(--font-mono);
}

.dm-pending-action-description {
  font-size: 0.8125rem;
  color: var(--text-muted, #aaa);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.dm-pending-action-warning {
  font-size: 0.8125rem;
  color: var(--color-accent-warning);
  font-style: italic;
  margin-bottom: 0.5rem;
  padding: 0.375rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 4px;
}

.dm-pending-action-actions {
  display: flex;
  gap: 0.5rem;
}

.dm-pending-action-btn {
  flex: 1;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--timing-fast) var(--ease-default), background-color var(--timing-fast) var(--ease-default);
}

.dm-pending-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dm-pending-action-btn--approve {
  background: var(--color-accent-secondary);
  color: #fff;
}

.dm-pending-action-btn--approve:hover:not(:disabled) {
  background: #16a34a;
}

.dm-pending-action-btn--reject {
  background: var(--bg-secondary, #2a2a2a);
  color: var(--text-muted, #aaa);
  border: 1px solid var(--border-color, #444);
}

.dm-pending-action-btn--reject:hover:not(:disabled) {
  background: var(--color-accent-error);
  color: #fff;
  border-color: var(--color-accent-error);
}

/* Active count indicator */
.dm-action-queue-count--active {
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0);
  }
}
/**
 * DM Panes — Import Hub
 * =======================
 * DM-only content panes (scene, live, NPC, tools, pending actions queue).
 *
 * Decomposed into focused files under dm_panes/ for maintainability.



 */
/* Inspect Panel - Slide-in entity detail panel
 *
 * Shows detailed information about entities when clicked.
 * Slides in from the right side of the screen.
 */

/* ==========================================================================
   Backdrop
   ========================================================================== */

.inspect-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: var(--z-floating);
  pointer-events: none;
}

.inspect-panel__backdrop--visible {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* ==========================================================================
   Panel Container
   ========================================================================== */

.inspect-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--bg-primary, #1e1e1e);
  border-left: 1px solid var(--border-color, #3e3e3e);
  display: flex;
  flex-direction: column;
  z-index: var(--z-floating-above);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.inspect-panel--open {
  transform: translateX(0);
}

.inspect-panel--closing {
  transform: translateX(100%);
}

/* ==========================================================================
   Header
   ========================================================================== */

.inspect-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #3e3e3e);
  background: var(--bg-secondary, #252526);
}

.inspect-panel__header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.inspect-panel__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(97, 175, 239, 0.1);
  color: var(--accent-primary, #61afef);
  flex-shrink: 0;
}

.inspect-panel__type-icon svg {
  width: 20px;
  height: 20px;
}

.inspect-panel__titles {
  flex: 1;
  min-width: 0;
}

.inspect-panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspect-panel__type-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inspect-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.inspect-panel__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.inspect-panel__close svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Body
   ========================================================================== */

.inspect-panel__body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.inspect-panel__subtitle {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

.inspect-panel__description {
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary, #fff);
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.inspect-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.inspect-panel__stat {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 6px;
  border: 1px solid var(--border-color, #3e3e3e);
}

.inspect-panel__stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.inspect-panel__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

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

.inspect-panel__section {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #3e3e3e);
}

.inspect-panel__section-title {
  margin: 0 0 8px 0;
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Relationship badge */
.inspect-panel__relationship {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.inspect-panel__relationship--friendly {
  background: rgba(152, 195, 121, 0.2);
  color: var(--accent-secondary, #98c379);
}

.inspect-panel__relationship--neutral {
  background: rgba(150, 150, 150, 0.2);
  color: var(--text-secondary, #888);
}

.inspect-panel__relationship--hostile {
  background: rgba(224, 108, 117, 0.2);
  color: var(--accent-error, #e06c75);
}

.inspect-panel__notes {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

/* Tags */
.inspect-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspect-panel__tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(97, 175, 239, 0.15);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--accent-primary, #61afef);
}

/* Components */
.inspect-panel__components {
  font-size: 0.9rem;
  color: var(--text-primary, #fff);
  font-family: var(--font-mono, 'Fira Code', monospace);
}

/* List */
.inspect-panel__list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-primary, #fff);
}

.inspect-panel__list li {
  margin-bottom: 4px;
}

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

.inspect-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary, #888);
  gap: 12px;
}

.inspect-panel__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(97, 175, 239, 0.2);
  border-top-color: var(--accent-primary, #61afef);
  border-radius: 50%;
  animation: inspect-panel-spin 0.8s linear infinite;
}

@keyframes inspect-panel-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Footer Actions
   ========================================================================== */

.inspect-panel__footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #3e3e3e);
  background: var(--bg-secondary, #252526);
}

.inspect-panel__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #3e3e3e);
  border-radius: 6px;
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-primary, #fff);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inspect-panel__action:hover {
  background: var(--bg-primary, #1e1e1e);
  border-color: var(--accent-primary, #61afef);
}

.inspect-panel__action svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.inspect-panel__action--primary {
  background: linear-gradient(
    180deg,
    rgba(97, 175, 239, 0.2) 0%,
    rgba(97, 175, 239, 0.1) 100%
  );
  border-color: rgba(97, 175, 239, 0.4);
  color: var(--accent-primary, #61afef);
}

.inspect-panel__action--primary:hover {
  background: linear-gradient(
    180deg,
    rgba(97, 175, 239, 0.3) 0%,
    rgba(97, 175, 239, 0.15) 100%
  );
  border-color: var(--accent-primary, #61afef);
}

/* ==========================================================================
   Type-specific Styling
   ========================================================================== */

/* NPC */
.inspect-panel--npc .inspect-panel__type-icon {
  background: rgba(8, 145, 178, 0.15);
  color: #22d3ee;
}

/* Location */
.inspect-panel--location .inspect-panel__type-icon {
  background: rgba(22, 163, 106, 0.15);
  color: #4ade80;
}

/* Item */
.inspect-panel--item .inspect-panel__type-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}

/* Spell */
.inspect-panel--spell .inspect-panel__type-icon {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

/* Creature/Monster */
.inspect-panel--creature .inspect-panel__type-icon,
.inspect-panel--monster .inspect-panel__type-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ==========================================================================
   Action States
   ========================================================================== */

.inspect-panel__action--success {
  background: rgba(152, 195, 121, 0.2);
  border-color: var(--accent-secondary, #98c379);
  color: var(--accent-secondary, #98c379);
}

.inspect-panel__action--success:hover {
  background: rgba(152, 195, 121, 0.3);
  border-color: var(--accent-secondary, #98c379);
}

.inspect-panel__action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Error State
   ========================================================================== */

.inspect-panel__error {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  border-radius: 6px;
  color: var(--accent-error, #e06c75);
  font-size: 0.85rem;
  animation: inspect-panel-error-fade-in 0.2s ease;
}

@keyframes inspect-panel-error-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (max-width: 480px) {
  .inspect-panel {
    width: 100%;
    max-width: none;
  }
}
/*
 * Gap HUD Organism
 * ================
 * Persistent corner HUD that accumulates system-response-to-gap hints
 * (e.g., compound-command suggestions from the composition gap detector).
 *
 * Uses design tokens from: terminal/_tokens.css
 *   - z-index: --z-notification (1100) — above panels, below modals.
 *   - colors: terminal palette tokens
 *   - spacing: --space-2/3/4
 *
 * Positioning
 * - Desktop: fixed bottom-right, above any floating dock padding.
 * - Mobile: smaller badge, anchored above the message input via
 *   safe-area-aware offset. The expanded panel never exceeds 60vh so
 *   it cannot fully cover the input area.
 */

.gap-hud {
  position: fixed;
  right: 16px;
  /* Sit above the standard floating dock / message input gutter. */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-notification, 1100);
  pointer-events: none; /* children opt back in */
  max-width: min(360px, calc(100vw - 32px));
  font-family: var(--font-mono, monospace);
}

.gap-hud[data-empty="true"][data-expanded="false"] {
  display: none;
}

/* ── Collapsed badge ─────────────────────────────────────────────── */

.gap-hud__badge {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  background: var(--color-bg-primary, #0b0f0b);
  color: var(--color-text-primary, #9cf0a6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.gap-hud__badge:hover,
.gap-hud__badge:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  outline: none;
}

.gap-hud__badge-icon {
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.gap-hud__badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-accent-warning, #e0a800);
  color: var(--color-bg-primary, #0b0f0b);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Expanded panel ──────────────────────────────────────────────── */

.gap-hud__panel {
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  background: var(--color-bg-primary, #0b0f0b);
  color: var(--color-text-primary, #9cf0a6);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.gap-hud__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(120, 200, 140, 0.25));
  background: rgba(255, 255, 255, 0.02);
}

.gap-hud__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #7fb98a);
}

.gap-hud__actions {
  display: inline-flex;
  gap: 6px;
}

.gap-hud__action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #7fb98a);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.gap-hud__action-btn:hover,
.gap-hud__action-btn:focus-visible {
  border-color: var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  color: var(--color-text-primary, #9cf0a6);
  outline: none;
}

.gap-hud__close {
  font-size: 18px;
  line-height: 1;
  padding: 0 8px;
}

.gap-hud__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.gap-hud__empty {
  padding: var(--space-3, 12px);
  color: var(--color-text-muted, #5c8266);
  font-size: 12px;
  text-align: center;
}

.gap-hud__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid rgba(120, 200, 140, 0.12);
  font-size: 13px;
  line-height: 1.4;
}

.gap-hud__item:last-child {
  border-bottom: none;
}

.gap-hud__item[data-unseen="true"] {
  background: rgba(224, 168, 0, 0.06);
  border-left: 2px solid var(--color-accent-warning, #e0a800);
}

.gap-hud__item-body {
  flex: 1 1 auto;
  color: var(--color-text-primary, #9cf0a6);
  word-break: break-word;
}

.gap-hud__dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #5c8266);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.gap-hud__dismiss:hover,
.gap-hud__dismiss:focus-visible {
  color: var(--color-text-primary, #9cf0a6);
  outline: none;
}

/* ── Mobile tuning ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .gap-hud {
    right: 8px;
    /* Raise further to clear the mobile input + keyboard safe area. */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 16px);
  }

  .gap-hud__badge {
    width: 36px;
    height: 36px;
  }

  .gap-hud__panel {
    /* Smaller cap on mobile so it never fully covers the input. */
    max-height: min(50vh, 360px);
    width: calc(100vw - 16px);
  }
}
/* ========================================
 * Inline Action Chips
 * ========================================
 * Clickable action buttons embedded within narrative content.
 * Players can click these to take common actions quickly.
 */

/* Container for action chips */
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--overlay-white-light);
}

/* #4426: When inline-actions is the sole/first content of a narrative entry
 * (e.g. merchant Browse/Sell chips with no narrative text above them),
 * show a subtle section header so the chips have visible context rather
 * than appearing as bare unsourced buttons. */
.narrative-entry > .inline-actions:first-child,
.narrative-entry > .inline-actions.animate-in:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.narrative-entry > .inline-actions:first-child::before,
.narrative-entry > .inline-actions.animate-in:first-child::before {
  content: 'Quick actions';
  display: block;
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--overlay-white-light);
}

/* Individual action chip - D&D themed golden accent */
.action-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 100%);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  box-shadow: 0 2px 4px var(--overlay-light);
  text-shadow: 0 1px 2px var(--overlay-light-plus);
}

.action-chip:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 100%);
  border-color: rgba(255, 215, 0, 0.5);
  color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--overlay-light-plus), 0 0 15px rgba(255, 215, 0, 0.15);
}

.action-chip:active {
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.12) 100%);
  box-shadow: 0 2px 6px var(--overlay-light-plus);
}

/* Icon within chip */
.action-chip__icon {
  font-size: 1.1em;
}

/* ========================================
 * Action Type Variants
 * ========================================
 */

/* Combat actions - red tint */
.action-chip--combat,
.action-chip--attack {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.action-chip--combat:hover,
.action-chip--attack:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* Defense actions - blue tint */
.action-chip--defend,
.action-chip--defensive {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
}

.action-chip--defend:hover,
.action-chip--defensive:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

/* Talk/social actions - yellow tint */
.action-chip--talk,
.action-chip--social {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.action-chip--talk:hover,
.action-chip--social:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* Explore/investigate actions - green tint */
.action-chip--explore,
.action-chip--investigate {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.action-chip--explore:hover,
.action-chip--investigate:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

/* Magic actions - purple tint */
.action-chip--magic,
.action-chip--spell {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
}

.action-chip--magic:hover,
.action-chip--spell:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.15);
  color: #c4b5fd;
}

/* Skill roll actions - D&D dice themed with golden glow */
.action-chip--skill-roll {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(218, 165, 32, 0.08) 100%
  );
  box-shadow: 0 2px 6px var(--overlay-light), var(--shadow-glow-sm-gold);
  position: relative;
  overflow: hidden;
}

.action-chip--skill-roll::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--overlay-gold-light) 50%,
    transparent 100%
  );
  animation: skillRollShimmer 3s ease-in-out infinite;
}

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

.action-chip--skill-roll:hover {
  border-color: rgba(255, 215, 0, 0.7);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(218, 165, 32, 0.15) 100%
  );
  color: var(--color-gold);
  box-shadow: 0 4px 12px var(--overlay-light-plus), 0 0 20px rgba(255, 215, 0, 0.25);
  transform: translateY(-2px) scale(1.02);
}

.action-chip--skill-roll:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px var(--overlay-light-plus), 0 0 8px rgba(255, 215, 0, 0.15);
}

.action-chip--skill-roll .action-chip__icon {
  animation: diceWiggle 2s ease-in-out infinite;
}

@keyframes diceWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* ========================================
 * Roll Prompt CTA
 * ========================================
 * Contextual prompts for dice rolls
 */

.roll-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
}

.roll-cta__prompt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.roll-cta__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
  font-size: var(--font-size-sm);
  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);
}

.roll-cta__button:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.6);
  transform: scale(1.02);
}

.roll-cta__button:active {
  transform: scale(0.98);
}

.roll-cta__button .dice-icon {
  font-size: 1.2em;
}

/* ========================================
 * Animation
 * ========================================
 */

.inline-actions.animate-in .action-chip {
  animation: chipSlideIn 0.2s ease-out;
  animation-fill-mode: backwards;
}

.inline-actions.animate-in .action-chip:nth-child(1) { animation-delay: 0ms; }
.inline-actions.animate-in .action-chip:nth-child(2) { animation-delay: 50ms; }
.inline-actions.animate-in .action-chip:nth-child(3) { animation-delay: 100ms; }
.inline-actions.animate-in .action-chip:nth-child(4) { animation-delay: 150ms; }

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

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .inline-actions.animate-in .action-chip {
    animation: none;
  }
}

/* ========================================
 * Mobile Adjustments
 * ========================================
 */

@media (max-width: 640px) {
  .inline-actions {
    gap: var(--space-1);
  }

  .action-chip {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    min-height: 44px; /* WCAG 2.5.5 touch target — preserved after padding reduction */
  }

  .roll-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}
/* Inline Character Select — swipe cards rendered in narrative area */

.inline-character-select {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.inline-select__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 340px;
  width: 100%;
}

/* Card stack — reuses .swipe-card from character_gallery */
.inline-select__card-stack {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 420px;
}

.inline-select__card-stack .swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.inline-select__card-stack .swipe-card:active {
  cursor: grabbing;
}

/* Stack depth effect */
.inline-select__card-stack .swipe-card[data-stack-position="0"] {
  z-index: var(--z-above);
}

.inline-select__card-stack .swipe-card[data-stack-position="1"] {
  z-index: var(--z-raised);
  transform: scale(0.95) translateY(8px);
  opacity: 0.7;
}

.inline-select__card-stack .swipe-card[data-stack-position="2"] {
  z-index: var(--z-base);
  transform: scale(0.9) translateY(16px);
  opacity: 0.4;
}

/* Action buttons */
.inline-select__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.inline-select__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.inline-select__btn:hover {
  background: var(--color-surface-hover);
}

.inline-select__btn--skip {
  border-color: var(--color-danger-muted);
}

.inline-select__btn--skip:hover {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}

.inline-select__btn--select {
  border-color: var(--color-success-muted);
}

.inline-select__btn--select:hover {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.inline-select__btn-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

/* Hint text */
.inline-select__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Empty state */
.inline-select__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}

/* Resolved animation — fade out when character selected */
.inline-select--resolved {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* ============================================================
   Continue-As Consent Prompt (#4377)
   "Resume <name>?" with [Yes] [Choose different] [Start fresh]
   ============================================================ */

.continue-as-prompt {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0;
}

.continue-as__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface, #1a1a2e);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
  max-width: 380px;
  width: 100%;
  animation: continueAsSlideIn 0.25s ease-out;
}

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

.continue-as__question {
  margin: 0;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  text-align: center;
}

.continue-as__question strong {
  color: var(--color-accent, #9f7aea);
  font-weight: 600;
}

.continue-as__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.5rem);
  justify-content: center;
  margin-top: var(--space-xs, 0.5rem);
}

.continue-as__btn {
  padding: var(--space-xs, 0.5rem) var(--space-md, 1rem);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.continue-as__btn--yes {
  background: var(--color-accent, #9f7aea);
  color: #fff;
  border-color: var(--color-accent, #9f7aea);
}

.continue-as__btn--yes:hover {
  background: var(--color-accent-hover, #805ad5);
  border-color: var(--color-accent-hover, #805ad5);
}

.continue-as__btn--choose {
  background: transparent;
  color: var(--color-text-secondary, #a0aec0);
  border-color: var(--color-border, rgba(255, 255, 255, 0.2));
}

.continue-as__btn--choose:hover {
  background: var(--color-surface-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text-primary, #e0e0e0);
}

.continue-as__btn--fresh {
  background: transparent;
  color: var(--color-text-muted, #718096);
  border-color: transparent;
  font-size: var(--font-size-xs, 0.75rem);
}

.continue-as__btn--fresh:hover {
  color: var(--color-text-secondary, #a0aec0);
}

/* "Always do this" — persists auto_resume_consent=always (#4377) */
.continue-as__btn--always {
  background: transparent;
  color: var(--color-text-muted, #718096);
  border-color: transparent;
  font-size: var(--font-size-xs, 0.75rem);
}

.continue-as__btn--always:hover {
  color: var(--color-text-secondary, #a0aec0);
}

/* Resolved state (fade-out on selection) */
.continue-as--resolved {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
/*
 * Organism: Inline Panel
 * ======================
 * Panels rendered inline within the narrative flow.
 * Part of the command-driven panel lifecycle system.
 *
 * User types /sheet -> panel appears inline with pop-out controls
 */

/* ========================================
 * Inline Panel Container
 * ======================================== */

.inline-panel {
  --inline-panel-border: var(--color-accent-primary);
  --inline-panel-bg: var(--color-bg-elevated);
  --inline-panel-header-bg: var(--color-bg-tertiary);

  background: var(--inline-panel-bg);
  border: 1px solid var(--inline-panel-border);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inline-panel:hover {
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

/* ========================================
 * Inline Panel Header
 * ======================================== */

.inline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--inline-panel-header-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.inline-panel__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inline-panel__controls,
.inline-panel__actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.inline-panel__btn,
.inline-panel__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inline-panel__btn:hover,
.inline-panel__action-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.inline-panel__btn--popout:hover {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.inline-panel__btn--dock:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.inline-panel__btn--dismiss:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ========================================
 * Inline Panel Content
 * ======================================== */

.inline-panel__content {
  padding: var(--space-3);
  max-height: 400px;
  overflow-y: auto;
}

/* Reset some panel styles when rendered inline */
.inline-panel__content .split-panel__header,
.inline-panel__content .panel-header {
  display: none; /* Header is handled by inline-panel__header */
}

.inline-panel__content .split-panel__content {
  border: none;
  padding: 0;
}

/* ========================================
 * Inline Panel Footer
 * ======================================== */

.inline-panel__footer {
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-subtle);
}

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

/* ========================================
 * Inline Panel Animations
 * ======================================== */

/* Entry animation */
.inline-panel {
  animation: inlinePanelEnter 0.3s ease;
}

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

/* Pop-out animation */
.inline-panel--popping-out {
  animation: inlinePanelPopOut 0.3s ease forwards;
}

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

/* Dock animation */
.inline-panel--docking {
  animation: inlinePanelDock 0.3s ease forwards;
}

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

/* Dismiss animation */
.inline-panel--dismissing {
  animation: inlinePanelDismiss 0.2s ease forwards;
}

@keyframes inlinePanelDismiss {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

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

.inline-panel--loading {
  pointer-events: none;
}

.inline-panel--loading .inline-panel__content {
  min-height: 120px;
}

.inline-panel__loading-hint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  animation: inlinePanelLoadingPulse 1.5s ease-in-out infinite;
}

@keyframes inlinePanelLoadingPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Content reveal after skeleton replaced */
.inline-panel__content--reveal {
  animation: inlinePanelContentReveal 0.3s ease-out;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .inline-panel,
  .inline-panel--popping-out,
  .inline-panel--docking,
  .inline-panel--dismissing,
  .inline-panel__content--reveal {
    animation: none;
    transition: opacity 0.15s ease;
  }

  .inline-panel--popping-out,
  .inline-panel--docking,
  .inline-panel--dismissing {
    opacity: 0;
  }

  .inline-panel__loading-hint {
    animation: none;
  }
}

/* ========================================
 * Mobile Styles
 * ======================================== */

@media (max-width: 768px) {
  .inline-panel__content {
    max-height: 300px;
  }

  .inline-panel__header {
    padding: var(--space-1-5) var(--space-2);
  }

  .inline-panel__footer {
    padding: var(--space-1) var(--space-2);
  }

  .inline-panel__hint {
    font-size: 10px;
  }
}

/* ========================================
 * Inline Character Sheet
 * ======================================== */

.inline-character-sheet {
  font-family: var(--font-mono);
}

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

.inline-character-sheet__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.inline-character-sheet__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-character-sheet__level {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.inline-character-sheet__vitals {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.inline-character-sheet__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
}

.inline-character-sheet__hp .hp-current {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.inline-character-sheet__ac {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.inline-character-sheet__ac strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

/* Ability Scores Grid — Hexagonal */
.inline-character-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  justify-items: center;
}

.inline-ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

/* Hexagonal variant for inline abilities */
.inline-ability--hex {
  --hex-size: 56px;
  position: relative;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  justify-content: center;
  border: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.inline-ability--hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-border-subtle);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.inline-ability--hex::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--color-bg-tertiary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.inline-ability--hex:hover {
  transform: scale(1.08);
}

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

.inline-ability__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Modifier: prominent center display */
.inline-ability__modifier {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  line-height: 1.2;
}

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

/* Quick Stats Row */
.inline-character-sheet__quick-stats {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

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

.quick-stat__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.quick-stat__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Conditions */
.inline-character-sheet__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Base condition-badge styles from components/_condition_badge.css */
.inline-character-sheet__conditions .condition-badge {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 10px;
}

/* Expand Hint */
.inline-character-sheet__expand-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Empty State */
.inline-character-sheet--empty {
  text-align: center;
  padding: var(--space-4);
}

.inline-character-sheet--empty p {
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

/* Mobile: Stack abilities into 3-column honeycomb */
@media (max-width: 480px) {
  .inline-character-sheet__abilities {
    grid-template-columns: repeat(3, 1fr);
  }

  .inline-ability--hex {
    --hex-size: 50px;
  }

  .inline-character-sheet__quick-stats {
    flex-wrap: wrap;
  }
}

/* ========================================
 * Inline Inventory
 * ======================================== */

.inline-inventory {
  font-family: var(--font-mono);
}

.inline-inventory__currency {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-inventory__gold {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
}

.inline-inventory__stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.inline-inventory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  /* #3547: scroll inside panel instead of overflowing when >6 items. */
  max-height: 168px;
  overflow-y: auto;
}

.inline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.inline-item:hover {
  border-color: var(--color-accent-primary);
}

.inline-item__icon {
  font-size: var(--font-size-lg);
}

.inline-item__name {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-item__qty {
  font-size: 9px;
  color: var(--color-text-muted);
}

.inline-inventory__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  align-items: flex-start;
}

.inline-category {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-hover);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  /* #3547: prevent mid-word clipping of long category labels. */
  white-space: nowrap;
  min-width: max-content;
}

.inline-inventory__hint,
.inline-spellbook__hint,
.inline-equipment__hint,
.inline-combat__hint,
.inline-party__hint,
.inline-quests__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-2);
}

.inline-inventory--empty,
.inline-spellbook--empty,
.inline-equipment--empty,
.inline-combat--empty,
.inline-party--empty,
.inline-quests--empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

/* ========================================
 * Inline Spellbook
 * ======================================== */

.inline-spellbook {
  font-family: var(--font-mono);
}

.inline-spellbook__stats {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

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

.inline-stat__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.inline-stat__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-spellbook__slots {
  margin-bottom: var(--space-2);
}

.inline-spellbook__slots-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: block;
}

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

.inline-slot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.inline-slot__level {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  width: 1.2em;
  text-align: right;
}

.inline-slot__pips {
  display: flex;
  gap: 2px;
}

.inline-slot__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
}

.inline-slot__pip--filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.inline-spellbook__concentration {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5);
  background: var(--color-info-muted);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-spellbook__concentration .concentration-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inline-spellbook__concentration .concentration-spell {
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
}

.inline-spellbook__prepared,
.inline-spellbook__known {
  margin-bottom: var(--space-2);
}

.inline-spellbook__prepared-label,
.inline-spellbook__known-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: block;
}

.inline-spells-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.inline-spell {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.inline-spell--more {
  background: var(--color-bg-hover);
  font-style: italic;
}

/* ========================================
 * Inline Equipment
 * ======================================== */

.inline-equipment {
  font-family: var(--font-mono);
}

.inline-equipment__ac {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-equipment__ac .ac-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.inline-equipment__ac .ac-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-equipment__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}

.inline-eq-row {
  display: flex;
  gap: var(--space-2);
}

.inline-eq-slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.inline-eq-slot__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  min-width: 40px;
}

.inline-eq-slot__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-eq-slot__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.inline-eq-row--accessories {
  align-items: center;
}

.inline-eq-accessories-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.inline-eq-accessories-list {
  display: flex;
  gap: var(--space-0-5);
}

.inline-eq-accessory {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.inline-equipment__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ========================================
 * Inline Combat Tracker
 * ======================================== */

.inline-combat {
  font-family: var(--font-mono);
}

.inline-combat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-combat__round {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}

.inline-combat__difficulty {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-combat__difficulty--easy {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.inline-combat__difficulty--medium {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.inline-combat__difficulty--hard {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}

.inline-combat__difficulty--deadly {
  background: var(--color-danger);
  color: white;
}

.inline-combat__current-turn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-combat__current-turn .turn-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.inline-combat__current-turn .turn-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-combat__current-turn .turn-name--you {
  color: var(--color-accent-primary);
}

.inline-combat__initiative {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.inline-init-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
}

.inline-init-entry--active {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
}

.inline-init-entry--you {
  border-color: var(--color-success);
}

.inline-init-entry__pos {
  font-size: 10px;
  color: var(--color-text-muted);
  width: 1.5em;
  text-align: center;
}

.inline-init-entry__name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-init-entry__hp {
  width: 50px;
}

.inline-hp-bar {
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--color-success) var(--hp-pct), var(--color-bg-tertiary) var(--hp-pct));
  border-radius: 2px;
}

.inline-init-more {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.inline-combat__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.action-pip {
  font-size: var(--font-size-sm);
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-hover);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

/* ========================================
 * Inline Party
 * ======================================== */

.inline-party {
  font-family: var(--font-mono);
}

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

.inline-party__count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-party__members {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}

.inline-party-member {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.inline-party-member--you {
  border-color: var(--color-accent-primary);
}

.inline-party-member__identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.inline-party-member__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.inline-party-member__class {
  font-size: 10px;
  color: var(--color-text-muted);
}

.inline-party-member__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.inline-hp-bar-container {
  width: 40px;
  height: 6px;
  background: var(--color-bg-hover);
  border-radius: 3px;
  overflow: hidden;
}

.inline-hp-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--color-success);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.inline-hp-text {
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 40px;
}

.inline-party-member__conditions {
  display: flex;
  gap: var(--space-0-5);
}

.inline-condition {
  font-size: 9px;
  padding: 2px 4px;
  background: var(--color-warning-muted);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-party__more {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.inline-party__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Inline Quests
 * ======================================== */

.inline-quests {
  font-family: var(--font-mono);
}

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

.inline-quests__count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-quests__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.inline-quest {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.inline-quest__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.inline-quest__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-quest__priority {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-quest__priority--main {
  background: var(--color-accent-primary);
  color: white;
}

.inline-quest__priority--side {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

.inline-quest__objectives {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin-bottom: var(--space-1);
}

.inline-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inline-objective__check {
  color: var(--color-text-muted);
}

.inline-objective--completed {
  color: var(--color-success);
}

.inline-objective--completed .inline-objective__check {
  color: var(--color-success);
}

.inline-quest__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.inline-quest__meta {
  display: flex;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--color-text-muted);
}

.inline-quests__more,
.inline-quests__completed {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

/* ========================================
 * Inline VTT/Map
 * ======================================== */

.inline-vtt {
  font-family: var(--font-mono);
}

.inline-vtt__location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-vtt__location-icon {
  font-size: var(--font-size-lg);
}

.inline-vtt__location-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-vtt__preview {
  margin-bottom: var(--space-2);
}

.inline-vtt__coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-tertiary);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  gap: var(--space-1);
}

.inline-vtt__coming-soon-icon .svg-icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

.inline-vtt__coming-soon-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.inline-vtt__coming-soon-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.inline-vtt__coming-soon-hint kbd {
  font-family: var(--font-family-mono, monospace);
  background: var(--color-bg-hover);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.inline-vtt__combat-info,
.inline-vtt__npc-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-vtt__combat-info {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-muted);
}

.inline-vtt__combat-info .combat-status {
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}


.inline-vtt__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-2);
}

.inline-vtt--empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

/* ========================================
 * Mobile Adjustments for Inline Panels
 * ======================================== */

@media (max-width: 480px) {
  .inline-inventory__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inline-spellbook__stats {
    flex-wrap: wrap;
  }

  .inline-eq-row {
    flex-direction: column;
  }

  .inline-party-member {
    flex-wrap: wrap;
  }

  .inline-party-member__hp {
    width: 100%;
    margin-top: var(--space-1);
  }

  .inline-hp-bar-container {
    flex: 1;
  }
}
/*
 * Organism: Inline Panel
 * =======================
 * Inline panels for character data, inventory, spells, equipment, combat, quests, and map.
 *
 * Split into focused modules under inline_panel/:
 *   _base.css               — Panel container, header, content, footer, animations, loading skeleton, motion, mobile
 *   _character_inventory.css — Inline character sheet, inline inventory
 *   _spellbook_equipment.css — Inline spellbook, inline equipment
 *   _combat_party.css       — Inline combat tracker, inline party
 *   _quests_map.css         — Inline quests, inline VTT/map, mobile adjustments
 */






/*
 * Organism: Lobby Inline Panel (#4185)
 * ====================================
 * Chrome for the slash-command panels rendered by `lib/lobby/command_router.ts`
 * (`/characters`, `/campaigns`, `/lobbies`, `/presets`).
 *
 * Without these rules the panel container, header, body and (critically) the
 * `__swipe-stack` mount used by `/presets` had no styles at all — the swipe
 * cards inside use `position: absolute`, so the stack collapsed to 0 height
 * and only the portrait gradient + Quick Start badge were visible. Players
 * saw a tall purple void with no name, class, race, or hook copy (#4185).
 */

.lobby-inline-panel {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: inlinePanelEnter 0.3s ease;
}

.lobby-inline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.lobby-inline-panel__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lobby-inline-panel__actions {
  display: flex;
  gap: var(--space-1);
}

.lobby-inline-panel__btn {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  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);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lobby-inline-panel__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.lobby-inline-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.lobby-inline-panel__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.lobby-inline-panel__hint--presets {
  font-style: italic;
  color: var(--color-text-secondary);
}

.lobby-inline-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ========================================
 * Swipe stack mount for /presets (#4185)
 *
 * Cards inside use `position: absolute` (see _character_gallery.css ".swipe-card")
 * so the stack must be `position: relative` AND have a deterministic height
 * for cards to render.  Without this rule the stack collapsed to 0 height
 * and only the 130px portrait section was visible — the screenshot symptom.
 * ======================================== */

.lobby-inline-panel__swipe-stack {
  position: relative;
  width: 100%;
  /* Card body needs ~280px to fit portrait (130px) + name/class/stats/hook
     without scroll-clipping the hook copy.  Mobile scales down below. */
  min-height: 360px;
  max-width: 360px;
  margin: 0 auto;
  padding: var(--space-2) 0;
  perspective: 1000px;
  overflow: visible;
}

/* Mobile: shrink the panel chrome and the stack height so the card fits a
   single viewport without forcing the player to scroll past empty space. */
@media (max-width: 640px) {
  .lobby-inline-panel {
    margin: var(--space-2) 0;
  }

  .lobby-inline-panel__header {
    padding: var(--space-1-5) var(--space-2);
  }

  .lobby-inline-panel__body {
    padding: var(--space-2);
  }

  .lobby-inline-panel__swipe-stack {
    min-height: 320px;
    max-width: 100%;
  }
}

/* Even narrower phones: keep the card visible without overflowing the
   viewport. */
@media (max-width: 380px) {
  .lobby-inline-panel__swipe-stack {
    min-height: 300px;
  }
}

/* ========================================
 * Loading skeleton for /presets swipe stack (#4458)
 *
 * Shown while waiting for terminal:random_heroes to arrive. Replaced by
 * the swipe cards on success, or by __presets-status on empty/error.
 * ======================================== */

.lobby-inline-panel__presets-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-muted);
}

.lobby-inline-panel__presets-loading-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ========================================
 * Empty / error state notices for /presets swipe stack (#4458)
 *
 * `data-lobby-presets-status="empty"` → "No presets available"
 * `data-lobby-presets-status="error"` → "Failed to load — retry"
 *
 * Distinct colors so players can distinguish a content gap from a
 * connection failure at a glance.
 * ======================================== */

.lobby-inline-panel__presets-status {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: center;
}

.lobby-inline-panel__presets-status[data-lobby-presets-status="empty"] {
  color: var(--color-text-muted);
}

.lobby-inline-panel__presets-status[data-lobby-presets-status="error"] {
  color: var(--color-status-error, var(--color-text-danger, #e57373));
}
/*
 * Retro Narrative — NPC dialogue blocks
 * Extracted for maintainability (#2783).
 */

/*
 * Retro Narrative Styles
 * ======================
 * 8-bit inspired styles for structured AI DM output
 * Includes NPC dialogue, perception-gated content, and action styling
 */

/* ========================================
 * Retro Design Tokens
 * ======================================== */

:root {
  /* Retro Color Palette */
  --retro-black: #0f0f23;
  --retro-dark-gray: #1a1a2e;
  --retro-purple: #7B68EE;
  --retro-gold: #FFD700;
  --retro-cyan: #00CED1;
  --retro-green: #32CD32;
  --retro-red: #DC143C;
  --retro-blue: #4169E1;
}

/* ========================================
 * Structured Narrative Container
 * ======================================== */

.structured-narrative {
  display: flex;
  flex-direction: column;
  gap: var(--narrative-entry-spacing); /* Phase 1: Uses enhanced spacing (16px) */
}

.narrative-segment {
  margin: 0;
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 2px;
  border: 1px solid var(--overlay-white-subtle);
  position: relative;
  /* Ensure segments stack properly and don't overlap */
  display: block;
  clear: both;
}

/* ========================================
 * NPC Dialogue Block
 * ======================================== */

.npc-dialogue {
  --npc-color: var(--retro-purple); /* Overridden per-NPC via inline style */

  background: color-mix(in srgb, var(--npc-color) 8%, transparent);
  border-left: 3px solid var(--npc-color);
  border-radius: 2px;
  padding: var(--space-3, 0.75rem);
  position: relative;
}

/* Phase 3 P2-6: Cinematic NPC glow effect */
.npc-dialogue::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 0% 50%,
    color-mix(in srgb, var(--npc-color, var(--color-accent-primary)) 20%, transparent),
    transparent 50%
  );
  animation: npcGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes npcGlow {
  0% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.npc-dialogue--important::before {
  animation-duration: 2s;
  opacity: 0.8;
}

.npc-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
}

/* NPC Avatar Placeholder */
.npc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--npc-color) 20%, var(--color-bg-tertiary, #1a1a2e));
  border: 2px solid var(--npc-color);
  border-radius: 50%;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--npc-color);
  flex-shrink: 0;
}

.npc-avatar--portrait {
  background-size: cover;
  background-position: center;
  font-size: 0;
}

.npc-name {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--npc-color);
  font-size: var(--font-size-sm, 0.875rem);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* NPC name with relationship indicator */
.npc-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.npc-relationship {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.npc-relationship__heart {
  font-size: 8px;
  color: #dc143c;
  opacity: 0.3;
}

.npc-relationship__heart--filled {
  opacity: 1;
}

.npc-mood {
  font-size: var(--font-size-xs, 0.75rem);
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: lowercase;
  opacity: 0.8;
}

.npc-mood.friendly {
  background: rgba(50, 205, 50, 0.2);
  color: var(--retro-green);
}

.npc-mood.hostile {
  background: rgba(220, 20, 60, 0.2);
  color: var(--retro-red);
}

.npc-mood.neutral {
  background: rgba(128, 128, 128, 0.2);
  color: var(--color-text-secondary);
}

.npc-mood.suspicious {
  background: rgba(255, 165, 0, 0.2);
  color: #FFA500;
}

.npc-mood.mysterious {
  background: rgba(123, 104, 238, 0.2);
  color: var(--retro-purple);
}

.npc-mood.afraid {
  background: rgba(255, 255, 0, 0.15);
  color: #FFFF00;
}

.npc-mood.angry {
  background: rgba(220, 20, 60, 0.25);
  color: var(--retro-red);
}

.npc-mood.happy {
  background: rgba(50, 205, 50, 0.2);
  color: var(--retro-green);
}

.npc-speech-bubble {
  padding: var(--space-2, 0.5rem) 0;
  position: relative;
}

/* Visual quote marks for spoken dialogue */
.npc-speech-bubble--spoken {
  padding-left: var(--space-4, 1rem);
}

.npc-speech-bubble--spoken::before {
  content: '"';
  position: absolute;
  left: 0;
  top: var(--space-1, 0.25rem);
  font-size: 1.5em;
  font-family: Georgia, serif;
  color: var(--npc-color);
  opacity: 0.4;
  line-height: 1;
}

.npc-speech-bubble p {
  margin: 0;
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Inner thoughts styling (not spoken aloud) */
.npc-speech-bubble--thought {
  font-style: italic;
  opacity: 0.85;
  padding-left: var(--space-3, 0.75rem);
  border-left: 2px dotted color-mix(in srgb, var(--npc-color) 40%, transparent);
}

.npc-speech-bubble--thought::before {
  content: none;
}

/* Whispered dialogue */
.npc-speech-bubble--whisper {
  font-size: 0.9em;
  opacity: 0.8;
  letter-spacing: 0.3px;
}

.npc-speech-bubble--whisper::before {
  content: '(';
  position: static;
  font-size: 1em;
  font-family: inherit;
  opacity: 0.6;
}

.npc-speech-bubble--whisper::after {
  content: ')';
  font-size: 1em;
  opacity: 0.6;
}

/* Voice Variations - Subtle differences */
.voice-whispered .npc-speech-bubble {
  font-size: Max(0.9em, 12px); /* Never below 12px for readability */
  opacity: 0.9;
}

.voice-booming .npc-speech-bubble {
  font-weight: 500;
}

.voice-nervous .npc-speech-bubble,
.voice-elderly .npc-speech-bubble {
  font-style: italic;
}

/* Emotion Styling - Color hints only */
.emotion-angry .npc-name {
  color: var(--retro-red);
}

.emotion-nervous .npc-speech-bubble {
  font-style: italic;
}

/*
 * Retro Narrative — Inner segment types (beat/line/aside)
 * Extracted for maintainability (#2783).
 */

/* ========================================
 * Inner Segment Types (beat, line, aside)
 * Context-aware via SegmentRegistry
 * ======================================== */

/* Base inner segment styles */
.npc-beat,
.npc-line,
.npc-aside {
  display: block;
  margin: var(--space-1, 0.25rem) 0;
}

.npc-beat:first-child,
.npc-line:first-child,
.npc-aside:first-child {
  margin-top: 0;
}

/* Beat - actions and gestures */
.npc-beat {
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.npc-beat em {
  font-style: normal; /* Already italic, em becomes normal */
  color: var(--npc-color);
  opacity: 0.9;
}

.npc-beat--action {
  /* Default action style */
}

.npc-beat--gesture {
  font-size: 0.95em;
}

.npc-beat--pause {
  margin: var(--space-2, 0.5rem) 0;
  opacity: 0.7;
}

/* Line - spoken dialogue */
.npc-line {
  color: var(--color-text-primary);
}

.npc-line--dialogue {
  /* Default dialogue style */
}

.npc-line--welcome {
  font-size: 1.05em;
  color: var(--npc-color);
}

.npc-line--prompt {
  /* Contains selection - subtle highlight */
  padding: var(--space-1, 0.25rem) 0;
}

.npc-line--reaction {
  /* Response to player choice */
}

.npc-line--inquiry {
  /* Question to player */
}

.npc-line--farewell {
  opacity: 0.9;
}

/* Aside - internal thoughts, muttering */
.npc-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
  color: var(--color-text-secondary);
}

.npc-aside--internal {
  /* Default internal thought */
}

.npc-aside--musing {
  opacity: 0.85;
}

.npc-aside--whisper {
  font-size: Max(0.85em, 12px); /* Never below 12px for readability */
  letter-spacing: 0.5px;
  opacity: 0.85;
}

/* Pause indicator for segments that wait for input */
.npc-line[data-pause-after="true"]::after,
.npc-beat[data-pause-after="true"]::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: var(--space-2, 0.5rem);
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--npc-color) 30%, transparent) 50%,
    transparent 100%
  );
}

/* Animation for animated segments */
@keyframes npc-segment-appear {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.npc-beat[data-animate="true"],
.npc-line[data-animate="true"],
.npc-aside[data-animate="true"] {
  animation: npc-segment-appear 0.3s ease-out;
}

/* ========================================
 * Non-NPC Inner Segments
 * Used when <beat>/<aside> appear inside
 * <narration>, <action>, or <perception>
 * ======================================== */

/* Narration inner segments — environmental beats and atmospheric asides */
.narration-beat,
.narration-line,
.narration-aside {
  display: block;
  margin: var(--space-1, 0.25rem) 0;
}

.narration-beat {
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.narration-beat em {
  font-style: normal;
  color: var(--color-accent, #d4a574);
}

.narration-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
  color: var(--color-text-secondary);
  border-left: 2px solid var(--color-border-dim, #333);
  padding-left: var(--space-2, 0.5rem);
  margin-left: var(--space-1, 0.25rem);
}

.narration-line {
  color: var(--color-text-primary);
}

/* Action inner segments — mechanical sub-actions and tactical notes */
.action-beat,
.action-line,
.action-aside {
  display: block;
  margin: var(--space-1, 0.25rem) 0;
}

.action-beat {
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.action-beat em {
  font-style: normal;
  color: var(--color-warning, #e8a838);
}

.action-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.7;
  color: var(--color-text-secondary);
}

.action-line {
  color: var(--color-text-primary);
}

/* Perception inner segments — gated detail structure */
.perception-beat,
.perception-line,
.perception-aside {
  display: block;
  margin: var(--space-1, 0.25rem) 0;
}

.perception-beat {
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.85;
}

.perception-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.7;
}

.perception-line {
  color: var(--color-text-primary);
}

/* For-scoped inner segments — inherit parent styling */
.for-beat,
.for-line,
.for-aside {
  display: block;
  margin: var(--space-1, 0.25rem) 0;
}

.for-beat {
  font-style: italic;
  color: var(--color-text-secondary);
}

.for-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.7;
}

.for-line {
  color: var(--color-text-primary);
}

/* ========================================
 * DM Narration Styles
 * ======================================== */

.dm-narration {
  padding: var(--space-3, 0.75rem);
  color: var(--color-text-primary);
  background: rgba(97, 175, 239, 0.06);
  border-left: 3px solid var(--color-accent-primary, #61afef);
  border-radius: 2px;
  font-family: var(--font-body);
  line-height: var(--line-height-narrative); /* Phase 1: Enhanced readability (1.65) */
  font-size: var(--font-size-base); /* Phase 1: 14px for reduced eye strain */
}

.dm-narration p {
  margin: 0 0 0.75rem 0;
}

.dm-narration p:last-child {
  margin-bottom: 0;
}

/* Add subtle separator between paragraphs for readability */
.dm-narration p + p {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Mood variations */
.mood-tense {
  border-left: 2px solid var(--color-accent-warning);
  padding-left: var(--space-3, 0.75rem);
  background: rgba(229, 192, 123, 0.05);
}

.mood-mysterious {
  border-left: 2px solid var(--retro-purple);
  padding-left: var(--space-3, 0.75rem);
  background: rgba(123, 104, 238, 0.05);
}

.mood-ominous {
  border-left: 2px solid var(--retro-red);
  padding-left: var(--space-3, 0.75rem);
  background: rgba(220, 20, 60, 0.05);
}

.mood-calm {
  opacity: 0.9;
}

.mood-cheerful {
  border-left: 2px solid var(--retro-green);
  padding-left: var(--space-3, 0.75rem);
}

.mood-somber {
  opacity: 0.85;
  filter: saturate(0.8);
}

/* ========================================
 * DM Action Styles (Mechanical)
 * ======================================== */

.dm-action {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(255, 215, 0, 0.08);
  border-left: 3px solid var(--retro-gold);
  border-radius: 2px;
}

.dm-action p {
  margin: 0;
}

.dm-action--mechanical {
  font-family: var(--font-mono, 'Courier New', monospace);
  color: var(--retro-gold);
}

.dm-action .action-icon {
  font-size: var(--font-size-lg, 1.25rem);
  flex-shrink: 0;
}

.dm-action__body {
  flex: 1;
  min-width: 0;
}

.dm-action__body p {
  margin: 0;
}

/* Inline roll button inside action callouts */
.dm-action__roll-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-top: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--retro-gold);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(218, 165, 32, 0.08) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.dm-action__roll-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.dm-action__roll-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--overlay-gold-light, rgba(255, 215, 0, 0.1)) 50%,
    transparent 100%
  );
  animation: skillRollShimmer 3s ease-in-out infinite;
}

.dm-action__roll-btn:hover {
  border-color: rgba(255, 215, 0, 0.7);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(218, 165, 32, 0.15) 100%
  );
  color: var(--color-gold, #ffd700);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2), 0 0 12px rgba(255, 215, 0, 0.15);
  transform: translateY(-1px);
}

.dm-action__roll-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 1px 4px rgba(255, 215, 0, 0.1);
}

/*
 * Retro Narrative — Perception-gated content and passive detection
 * Extracted for maintainability (#2783).
 */

/* ========================================
 * Perception-Gated Content
 * ======================================== */

.perception-revealed {
  position: relative;
  margin: var(--space-2, 0.5rem) 0;
  padding-left: 1.5em;
}

.perception-indicator {
  position: absolute;
  left: 0;
  opacity: 0.6;
  font-size: 0.9em;
}

/* Perception Tier Indicators */
.tier-obvious {
  border-left: 2px solid var(--color-accent-secondary);
  padding-left: var(--space-3, 0.75rem);
}

.tier-hidden {
  border-left: 2px solid var(--color-accent-primary);
  padding-left: var(--space-3, 0.75rem);
}

.tier-concealed {
  border-left: 2px solid var(--color-accent-warning);
  padding-left: var(--space-3, 0.75rem);
}

.tier-secret {
  border-left: 2px solid var(--retro-purple);
  padding-left: var(--space-3, 0.75rem);
}

/* Skill-specific coloring for perception checks */
.perception-revealed[data-skill="perception"] {
  --perception-color: #3b82f6; /* Blue */
}

.perception-revealed[data-skill="insight"] {
  --perception-color: #8b5cf6; /* Purple */
}

.perception-revealed[data-skill="investigation"] {
  --perception-color: #10b981; /* Green */
}

.perception-revealed[data-skill] {
  border-left-color: var(--perception-color);
}

.perception-revealed[data-skill] .perception-indicator {
  color: var(--perception-color);
}

/* ========================================
 * Passive Detection - Skill-Specific Styling
 * ======================================== */

/* Skill-specific color variables */
.perception-revealed[data-skill="perception"],
.perception-hidden[data-skill="perception"],
.perception-vague[data-skill="perception"] {
  --skill-color: #3b82f6; /* Blue */
  --skill-color-faded: rgba(59, 130, 246, 0.15);
  --skill-icon: '👁️';
}

.perception-revealed[data-skill="insight"],
.perception-hidden[data-skill="insight"],
.perception-vague[data-skill="insight"] {
  --skill-color: #8b5cf6; /* Purple */
  --skill-color-faded: rgba(139, 92, 246, 0.15);
  --skill-icon: '🧠';
}

.perception-revealed[data-skill="investigation"],
.perception-hidden[data-skill="investigation"],
.perception-vague[data-skill="investigation"] {
  --skill-color: #10b981; /* Green */
  --skill-color-faded: rgba(16, 185, 129, 0.15);
  --skill-icon: '🔍';
}

/* Revealed content styling */
.perception-revealed {
  position: relative;
  margin: var(--space-2, 0.5rem) 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding-left: calc(var(--space-3, 0.75rem) + 3px);
  background: var(--skill-color-faded, rgba(59, 130, 246, 0.1));
  border-left: 3px solid var(--skill-color, #3b82f6);
  border-radius: 0 2px 2px 0;
  animation: revealFadeIn 0.4s ease-out;
}

.perception-revealed .perception-indicator {
  position: absolute;
  left: var(--space-2, 0.5rem);
  top: var(--space-2, 0.5rem);
  color: var(--skill-color, #3b82f6);
  font-size: 0.9em;
  opacity: 0.8;
}

@keyframes revealFadeIn {
  from {
    opacity: 0;
    background: var(--skill-color-faded, rgba(59, 130, 246, 0.3));
  }
  to {
    opacity: 1;
    background: var(--skill-color-faded, rgba(59, 130, 246, 0.1));
  }
}

/* Skill badge for revealed content */
.perception-revealed::before {
  content: attr(data-skill);
  position: absolute;
  top: -0.5em;
  right: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  background: var(--skill-color, #3b82f6);
  color: white;
  border-radius: 2px;
  opacity: 0.8;
}

/* "Your senses noticed" footer for perception in party mode */
.perception-revealed[data-party-mode]::after {
  content: 'Your senses noticed this';
  display: block;
  margin-top: var(--space-1, 0.25rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--skill-color, #3b82f6);
  opacity: 0.5;
  font-style: italic;
  text-align: right;
}

/* Hidden perception content */
.perception-hidden {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.15) 10px,
    rgba(0, 0, 0, 0.15) 20px
  );
  border-radius: 2px;
  border: 1px dashed var(--skill-color, var(--color-text-muted));
}

.perception-hidden[data-skill] {
  border-color: var(--skill-color);
}

.perception-icon {
  opacity: 0.5;
  animation: perceptionPulse 2s ease-in-out infinite;
  color: var(--skill-color, inherit);
}

.perception-hint {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Skill-specific hint text */
.perception-hidden[data-skill="insight"] .perception-hint::before {
  content: '(Insight) ';
  color: var(--skill-color);
  font-weight: 500;
}

.perception-hidden[data-skill="investigation"] .perception-hint::before {
  content: '(Investigation) ';
  color: var(--skill-color);
  font-weight: 500;
}

@keyframes perceptionPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Interactive perception (click-to-roll) */
.perception-interactive {
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.perception-interactive:hover {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 215, 0, 0.1),
    rgba(255, 215, 0, 0.1) 10px,
    rgba(255, 215, 0, 0.15) 10px,
    rgba(255, 215, 0, 0.15) 20px
  );
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.perception-interactive:focus-visible {
  outline: 2px solid var(--color-border-focus, #ffd700);
  outline-offset: 2px;
}

.perception-interactive .perception-roll-indicator {
  position: absolute;
  right: var(--space-2, 0.5rem);
  font-size: 1.1em;
  animation: diceWiggle 2s ease-in-out infinite;
}

@keyframes diceWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.perception-interactive:hover .perception-roll-indicator {
  animation: diceWiggleFast 0.3s ease-in-out infinite;
}

@keyframes diceWiggleFast {
  0%, 100% { transform: rotate(-10deg) scale(1.1); }
  50% { transform: rotate(10deg) scale(1.1); }
}

/* Revealed state after successful roll */
.perception-interactive.perception-revealed-success {
  cursor: default;
  background: var(--skill-color-faded, rgba(34, 197, 94, 0.15));
  border-color: var(--skill-color, #22c55e);
  border-style: solid;
  animation: revealSuccess 0.5s ease-out;
}

.perception-interactive.perception-revealed-success .perception-roll-indicator {
  display: none;
}

@keyframes revealSuccess {
  from {
    background: rgba(34, 197, 94, 0.4);
    transform: scale(1.02);
  }
  to {
    background: var(--skill-color-faded, rgba(34, 197, 94, 0.15));
    transform: scale(1);
  }
}

/* Revealed state after failed roll */
.perception-interactive.perception-revealed-failure {
  cursor: default;
  background: rgba(100, 100, 100, 0.1);
  border-color: var(--color-text-muted);
  border-style: solid;
}

.perception-interactive.perception-revealed-failure .perception-roll-indicator {
  display: none;
}

.perception-interactive.perception-revealed-failure .perception-hint {
  font-style: normal;
}

/* ========================================
 * Perception Advantage/Disadvantage Badges
 * ======================================== */

.perception-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  margin-left: var(--space-1, 0.25rem);
  vertical-align: middle;
}

.perception-badge-advantage {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  animation: advantagePulse 2s ease-in-out infinite;
}

.perception-badge-disadvantage {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: disadvantagePulse 2s ease-in-out infinite;
}

@keyframes advantagePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  50% { box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.3); }
}

@keyframes disadvantagePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50% { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.3); }
}

/*
 * Retro Narrative — Perception rolling/success/fail states and player-specific content
 * Extracted for maintainability (#2783).
 */

/* ========================================
 * Perception Rolling State
 * ======================================== */

.perception-rolling {
  pointer-events: none;
  position: relative;
}

.perception-rolling::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.15) 50%,
    transparent 100%
  );
  animation: rollingSweep 0.8s ease-in-out infinite;
}

@keyframes rollingSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.perception-rolling .perception-roll-indicator {
  animation: diceRolling 0.15s ease-in-out infinite;
}

@keyframes diceRolling {
  0%, 100% { transform: rotate(-15deg) scale(1.2); }
  25% { transform: rotate(15deg) scale(1.2); }
  50% { transform: rotate(-15deg) scale(1.2); }
  75% { transform: rotate(15deg) scale(1.2); }
}

.perception-roll-indicator.rolling {
  animation: diceRolling 0.1s ease-in-out infinite;
  font-size: 1.3em;
}

/* ========================================
 * Perception Success State (Interactive)
 * ======================================== */

.perception-success {
  animation: perceptionSuccessFlash 0.5s ease-out;
}

.perception-success .perception-indicator {
  color: #22c55e;
}

@keyframes perceptionSuccessFlash {
  0% {
    background: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  }
  100% {
    background: var(--skill-color-faded, rgba(34, 197, 94, 0.15));
    box-shadow: none;
  }
}

/* ========================================
 * Perception Failed State (Temporary)
 * ======================================== */

.perception-failed {
  animation: perceptionFailedShake 0.5s ease-out;
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

@keyframes perceptionFailedShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.perception-failed-text {
  color: #ef4444;
  font-style: normal;
}

/* ========================================
 * Perception Cooldown State
 * ======================================== */

.perception-cooldown {
  cursor: not-allowed;
  opacity: 0.7;
  background: repeating-linear-gradient(
    45deg,
    rgba(100, 100, 100, 0.1),
    rgba(100, 100, 100, 0.1) 10px,
    rgba(100, 100, 100, 0.15) 10px,
    rgba(100, 100, 100, 0.15) 20px
  );
  border-color: var(--color-text-muted);
  border-style: dashed;
}

.perception-cooldown .perception-icon {
  opacity: 0.4;
  animation: none;
}

.perception-cooldown .perception-hint {
  color: var(--color-text-muted);
  font-style: italic;
}

.perception-cooldown-indicator {
  position: absolute;
  right: var(--space-2, 0.5rem);
  font-size: 1.1em;
  opacity: 0.6;
  animation: hourglassSpin 3s ease-in-out infinite;
}

@keyframes hourglassSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

/* ========================================
 * Perception Revealing Animation
 * ======================================== */

.perception-revealing {
  animation: perceptionReveal 0.5s ease-out;
}

@keyframes perceptionReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
 * Perception Party Mode Indicator
 * ======================================== */

.perception-party-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  margin-top: var(--space-1, 0.25rem);
}

.perception-party-indicator .party-icon {
  opacity: 0.6;
}

.perception-party-indicator.party-any::after {
  content: 'Anyone can spot this';
}

.perception-party-indicator.party-majority::after {
  content: 'Majority must notice';
}

.perception-party-indicator.party-all::after {
  content: 'Everyone must notice';
}

/* Vague perception (partial reveal) */
.perception-vague {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--skill-color-faded, rgba(0, 0, 0, 0.1));
  border-left: 2px dashed var(--skill-color, var(--color-text-muted));
  border-radius: 2px;
  animation: vaguePulse 3s ease-in-out infinite;
  opacity: 0.85;
}

.perception-vague[data-skill] .perception-icon {
  color: var(--skill-color);
}

@keyframes vaguePulse {
  0%, 100% {
    background: var(--skill-color-faded, rgba(0, 0, 0, 0.05));
  }
  50% {
    background: var(--skill-color-faded, rgba(0, 0, 0, 0.12));
  }
}

/* ========================================
 * Player-Specific Content
 * ======================================== */

.player-specific {
  position: relative;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  padding-top: calc(var(--space-2, 0.5rem) + 1.4em);
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.1) 0%,
    rgba(97, 175, 239, 0.05) 100%
  );
  border-left: 3px solid var(--color-accent-primary);
  border-radius: 2px;
}

/* "Only you" badge — shows reason if available, otherwise generic label */
.player-specific::before {
  content: attr(data-reason);
  position: absolute;
  top: var(--space-1, 0.25rem);
  left: var(--space-3, 0.75rem);
  font-size: var(--font-size-xs, 0.75rem);
  padding: 1px 6px;
  background: rgba(97, 175, 239, 0.25);
  border-radius: 2px;
  color: var(--color-accent-primary);
  letter-spacing: 0.03em;
  font-weight: 500;
  white-space: nowrap;
}

/* Fallback when no data-reason attribute is set */
.player-specific:not([data-reason])::before {
  content: 'Only you';
}

.player-specific-reason {
  display: inline-block;
  font-size: var(--font-size-xs, 0.75rem);
  padding: 2px 6px;
  background: rgba(97, 175, 239, 0.2);
  border-radius: 2px;
  color: var(--color-accent-primary);
  margin-bottom: var(--space-1, 0.25rem);
}

/* DM view of player-specific content */
.player-specific.dm-view {
  border-style: dashed;
  opacity: 0.8;
}

.player-specific-indicator {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-1, 0.25rem);
}

/* ========================================
 * Plain Text Segment
 * ======================================== */

.plain-text {
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.03));
  border-radius: 2px;
  margin: var(--space-1, 0.25rem) 0;
}

.plain-text p {
  margin: 0;
}

/* ========================================
 * Inline Group - Mixed text and selections
 * Groups text fragments with inline selections to prevent fragmentation
 * ======================================== */

.narrative-segment.inline-group {
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.03));
  border-radius: 2px;
  margin: var(--space-1, 0.25rem) 0;
  line-height: 1.8;
}

.inline-text {
  /* Inline text fragments between selections */
}

.inline-text strong {
  color: var(--color-text-emphasis, #f0f0f0);
  font-weight: 600;
}

.inline-text em {
  font-style: italic;
  color: var(--color-text-secondary, #a0a0a0);
}

/* ========================================
 * Fallback Segment Styles
 * For BaseSegment-generated classes that may not have specific styling
 * ======================================== */

.narrative-segment.segment-plain_text,
.narrative-segment.segment-npc_dialogue,
.narrative-segment.segment-action,
.narrative-segment.segment-perception,
.narrative-segment.segment-narration,
.narrative-segment.segment-character_specific {
  margin: var(--space-1, 0.25rem) 0;
}

/* ========================================
 * Paragraph and Segment Separation
 * Ensures clear visual breaks for readability
 * ======================================== */

/* Paragraphs within any narrative segment - Phase 1: Enhanced readability */
.narrative-segment p {
  margin: 0 0 0.75em 0;
  line-height: var(--line-height-narrative); /* Phase 1: 1.65 for long-form reading */
  font-size: var(--font-size-base); /* Phase 1: 14px */
}

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

/* Visual separator between consecutive segments */
.narrative-segment + .narrative-segment {
  margin-top: var(--space-3, 0.75rem);
  padding-top: var(--space-2, 0.5rem);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Stronger separation for different segment types - Phase 1: Enhanced spacing */
.dm-narration + .npc-dialogue,
.npc-dialogue + .dm-narration,
.dm-action + .dm-narration,
.dm-narration + .dm-action {
  margin-top: var(--narrative-entry-spacing); /* Phase 1: 16px spacing */
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Plain text paragraphs */
.plain-text p {
  margin: 0 0 0.75em 0;
  line-height: 1.6;
}

.plain-text p:last-child {
  margin-bottom: 0;
}

/* Add subtle separator between paragraphs for plain text */
.plain-text p + p {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* ========================================
 * XML Parse Error Indicator
 * Shown when XML parsing fails and falls back to plain text
 * ======================================== */

.xml-parse-error {
  border-left: 3px solid var(--color-accent-error, #ff3b30);
  background: rgba(255, 59, 48, 0.1);
  padding: var(--space-2, 0.5rem);
  border-radius: 2px;
}

.xml-parse-error::before {
  content: 'Parse Error';
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent-error, #ff3b30);
  margin-bottom: var(--space-1, 0.25rem);
  font-weight: var(--font-weight-medium, 500);
}

/*
 * Retro Narrative — Narrative callouts
 * Extracted for maintainability (#2783).
 */

/* ========================================
 * Scene Description Segment
 * For environment, location, atmosphere descriptions
 * ======================================== */

.segment-scene,
.dm-scene {
  position: relative;
  padding: var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(70, 130, 180, 0.08) 0%,
    rgba(70, 130, 180, 0.03) 100%
  );
  border-left: 3px solid #4682b4; /* Steel blue */
  border-radius: 2px;
  margin: var(--space-2, 0.5rem) 0;
}

.dm-scene p {
  margin: 0;
  line-height: 1.6;
}

/* Scene with atmosphere indicator */
.dm-scene[data-atmosphere]::before {
  content: attr(data-atmosphere);
  display: inline-block;
  font-size: var(--font-size-xs, 0.75rem);
  padding: 2px 6px;
  background: rgba(70, 130, 180, 0.2);
  border-radius: 2px;
  color: #4682b4;
  margin-bottom: var(--space-2, 0.5rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ========================================
 * Lore/Knowledge Segment
 * For history, legends, world knowledge
 * ======================================== */

.segment-lore,
.dm-lore {
  position: relative;
  padding: var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08) 0%,
    rgba(138, 43, 226, 0.03) 100%
  );
  border-left: 3px solid #8a2be2; /* Blue violet */
  border-radius: 2px;
  margin: var(--space-2, 0.5rem) 0;
  font-style: italic;
}

.dm-lore p {
  margin: 0;
  line-height: 1.6;
}

/* Styled scroll icon (replaces emoji) */
.dm-lore::before {
  content: '';
  position: absolute;
  top: var(--space-2, 0.5rem);
  right: var(--space-2, 0.5rem);
  width: 18px;
  height: 18px;
  opacity: 0.4;
  background: #8a2be2;
  -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='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm2-4H7v-2h10v2zm0-4H7V7h10v2z'/%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='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm2-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Lore category badges */
.dm-lore[data-category]::after {
  content: attr(data-category);
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  padding: 2px 6px;
  background: rgba(138, 43, 226, 0.2);
  border-radius: 2px;
  color: #a78bfa;
  margin-top: var(--space-2, 0.5rem);
  font-style: normal;
  width: fit-content;
}

/* ========================================
 * Combat/Danger Segment
 * For combat narration, threatening situations
 * ======================================== */

.segment-combat,
.dm-combat {
  padding: var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(220, 20, 60, 0.08) 0%,
    rgba(220, 20, 60, 0.03) 100%
  );
  border-left: 3px solid #dc143c; /* Crimson */
  border-radius: 2px;
  margin: var(--space-2, 0.5rem) 0;
}

.dm-combat p {
  margin: 0;
}

/* ========================================
 * Narrative Callouts
 * For important information, warnings, rewards
 * ======================================== */

.narrative-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  border-radius: 2px;
  margin: var(--space-2, 0.5rem) 0;
}

.narrative-callout .callout-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.narrative-callout .callout-content {
  flex: 1;
}

.narrative-callout .callout-content p {
  margin: 0;
}

/* Warning callout */
.narrative-callout.warning {
  background: linear-gradient(
    135deg,
    rgba(255, 152, 0, 0.12) 0%,
    rgba(255, 152, 0, 0.05) 100%
  );
  border-left: 3px solid #ff9800;
  border: 1px solid rgba(255, 152, 0, 0.3);
}

.narrative-callout.warning .callout-icon {
  color: #ff9800;
}

/* Danger callout */
.narrative-callout.danger {
  background: linear-gradient(
    135deg,
    rgba(244, 67, 54, 0.12) 0%,
    rgba(244, 67, 54, 0.05) 100%
  );
  border-left: 3px solid #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

.narrative-callout.danger .callout-icon {
  color: #f44336;
}

/* Reward callout */
.narrative-callout.reward {
  background: linear-gradient(
    135deg,
    rgba(76, 175, 80, 0.12) 0%,
    rgba(76, 175, 80, 0.05) 100%
  );
  border-left: 3px solid #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.narrative-callout.reward .callout-icon {
  color: #4caf50;
}

/* Discovery callout */
.narrative-callout.discovery {
  background: linear-gradient(
    135deg,
    rgba(33, 150, 243, 0.12) 0%,
    rgba(33, 150, 243, 0.05) 100%
  );
  border-left: 3px solid #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.3);
}

.narrative-callout.discovery .callout-icon {
  color: #2196f3;
}

/* Info callout */
.narrative-callout.info {
  background: linear-gradient(
    135deg,
    rgba(156, 39, 176, 0.12) 0%,
    rgba(156, 39, 176, 0.05) 100%
  );
  border-left: 3px solid #9c27b0;
  border: 1px solid rgba(156, 39, 176, 0.3);
}

.narrative-callout.info .callout-icon {
  color: #9c27b0;
}

/* Quest callout */
.narrative-callout.quest {
  background: linear-gradient(
    135deg,
    rgba(255, 193, 7, 0.12) 0%,
    rgba(255, 193, 7, 0.05) 100%
  );
  border-left: 3px solid #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.narrative-callout.quest .callout-icon {
  color: #ffc107;
}

/* ========================================
 * Collapsible Segments
 * For long descriptions that can be expanded
 * ======================================== */

.segment-collapsible {
  cursor: pointer;
}

.segment-collapsible .segment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.segment-collapsible .segment-summary::after {
  content: '▼';
  font-size: 0.7rem;
  opacity: 0.5;
  transition: transform 0.2s ease;
}

.segment-collapsible.collapsed .segment-summary::after {
  transform: rotate(-90deg);
}

.segment-collapsible .segment-details {
  margin-top: var(--space-2, 0.5rem);
  padding-top: var(--space-2, 0.5rem);
  border-top: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.segment-collapsible.collapsed .segment-details {
  display: none;
}

/* ========================================
 * Animations - Typewriter segment reveal
 * ======================================== */

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

.narrative-segment {
  opacity: 0;
  animation: segmentReveal 0.25s ease-out forwards;
}

/* Stagger animation for typewriter effect (75ms between segments for faster reveal) */
.structured-narrative .narrative-segment:nth-child(1) { animation-delay: 0ms; }
.structured-narrative .narrative-segment:nth-child(2) { animation-delay: 75ms; }
.structured-narrative .narrative-segment:nth-child(3) { animation-delay: 150ms; }
.structured-narrative .narrative-segment:nth-child(4) { animation-delay: 225ms; }
.structured-narrative .narrative-segment:nth-child(5) { animation-delay: 300ms; }
.structured-narrative .narrative-segment:nth-child(6) { animation-delay: 375ms; }
.structured-narrative .narrative-segment:nth-child(7) { animation-delay: 450ms; }
.structured-narrative .narrative-segment:nth-child(8) { animation-delay: 525ms; }
.structured-narrative .narrative-segment:nth-child(9) { animation-delay: 600ms; }
.structured-narrative .narrative-segment:nth-child(10) { animation-delay: 675ms; }
.structured-narrative .narrative-segment:nth-child(11) { animation-delay: 750ms; }
.structured-narrative .narrative-segment:nth-child(12) { animation-delay: 825ms; }
.structured-narrative .narrative-segment:nth-child(13) { animation-delay: 900ms; }
.structured-narrative .narrative-segment:nth-child(14) { animation-delay: 975ms; }
.structured-narrative .narrative-segment:nth-child(15) { animation-delay: 1050ms; }
.structured-narrative .narrative-segment:nth-child(16) { animation-delay: 1125ms; }
.structured-narrative .narrative-segment:nth-child(17) { animation-delay: 1200ms; }
.structured-narrative .narrative-segment:nth-child(18) { animation-delay: 1275ms; }
.structured-narrative .narrative-segment:nth-child(19) { animation-delay: 1350ms; }
.structured-narrative .narrative-segment:nth-child(20) { animation-delay: 1425ms; }

/* Fallback: segments beyond 20 appear immediately */
.structured-narrative .narrative-segment:nth-child(n+21) {
  animation-delay: 0ms;
  opacity: 1;
}

/* ========================================
/*
 * Retro Narrative — Reduced motion
 * Extracted for maintainability (#2783).
 */

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

@media (prefers-reduced-motion: reduce) {
  .narrative-segment {
    animation: none;
    opacity: 1; /* Fix: ensure visibility when animation is disabled */
  }

  .perception-icon {
    animation: none;
    opacity: 0.5;
  }

  /* Phase 3 P2-6: Disable NPC glow animation for reduced motion */
  .npc-dialogue::before {
    animation: none;
    opacity: 0.3;
  }

  /* Disable perception animations for reduced motion */
  .perception-badge-advantage,
  .perception-badge-disadvantage {
    animation: none;
  }

  .perception-rolling::after,
  .perception-rolling .perception-roll-indicator,
  .perception-roll-indicator.rolling {
    animation: none;
  }

  .perception-success,
  .perception-failed,
  .perception-revealing {
    animation: none;
    opacity: 1;
  }

  .perception-cooldown-indicator {
    animation: none;
  }
}

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

@media (max-width: 768px) {
  .npc-dialogue {
    padding: var(--space-2, 0.5rem);
  }

  .npc-header {
    flex-wrap: wrap;
  }
}

/* ========================================
 * Memory Flashback Blocks
 * ======================================== */

.memory-flashback {
  position: relative;
  padding: var(--space-3, 0.75rem);
  padding-left: calc(var(--space-3, 0.75rem) + 3px);
  margin: var(--space-3, 0.75rem) 0;
  background: linear-gradient(
    135deg,
    rgba(147, 112, 219, 0.12) 0%,
    rgba(147, 112, 219, 0.04) 100%
  );
  border-left: 3px solid #9370db; /* Medium purple */
  border-radius: 0 2px 2px 0;
  animation: memoryFadeIn 0.4s ease-out;
}

.memory-flashback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(147, 112, 219, 0.02) 2px,
      rgba(147, 112, 219, 0.02) 4px
    );
  pointer-events: none;
  border-radius: 0 2px 2px 0;
}

.memory-flashback-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: #9370db;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.memory-flashback-icon {
  font-size: 1em;
  filter: drop-shadow(0 0 3px rgba(147, 112, 219, 0.5));
}

.memory-flashback-content {
  color: var(--color-text-secondary, #aaa);
  font-style: italic;
  line-height: 1.5;
}

.memory-flashback-content p {
  margin: 0;
}

.memory-flashback-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.memory-flashback-meta .memory-time {
  opacity: 0.7;
}

.memory-flashback-meta .memory-participants {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.memory-flashback-meta .memory-participants::before {
  content: '•';
  margin-right: var(--space-1, 0.25rem);
}

/* Memory category badges */
.memory-category {
  display: inline-block;
  padding: 2px 6px;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.memory-category.combat {
  background: rgba(220, 20, 60, 0.2);
  color: #dc143c;
}

.memory-category.social {
  background: rgba(70, 130, 180, 0.2);
  color: #4682b4;
}

.memory-category.exploration {
  background: rgba(34, 139, 34, 0.2);
  color: #228b22;
}

.memory-category.discovery {
  background: rgba(255, 215, 0, 0.2);
  color: #daa520;
}

.memory-category.quest {
  background: rgba(255, 165, 0, 0.2);
  color: #ff8c00;
}

.memory-category.lore {
  background: rgba(138, 43, 226, 0.2);
  color: #8a2be2;
}

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

/* ========================================
 * Memory Reference Links (Inline)
 * ======================================== */

.memory-reference {
  color: #9370db;
  cursor: pointer;
  position: relative;
  border-bottom: 1px dotted rgba(147, 112, 219, 0.5);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.memory-reference:hover {
  color: #b19cd9;
  border-bottom-color: #b19cd9;
  text-shadow: 0 0 8px rgba(147, 112, 219, 0.4);
}

/* Styled thought bubble icon (replaces emoji) */
.memory-reference::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: middle;
  opacity: 0.7;
  background: currentColor;
  -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='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%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='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}

.memory-reference.expanded {
  color: #b19cd9;
}

/* Inline memory expansion (on click) */
.memory-expansion {
  display: none;
  margin-top: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  background: rgba(147, 112, 219, 0.08);
  border-radius: 2px;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  font-style: italic;
}
/*
 * Retro Narrative — Memory Reference Links and NPC Relationship Context
 * Extracted for maintainability (#2783).
 */


.memory-reference.expanded + .memory-expansion {
  display: block;
  animation: memoryExpand 0.3s ease-out;
}

@keyframes memoryExpand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

/* ========================================
 * NPC Relationship Context
 * ======================================== */

.npc-context-popover {
  position: absolute;
  z-index: var(--z-panel);
  min-width: 280px;
  max-width: 350px;
  padding: var(--space-3, 0.75rem);
  background: var(--color-bg-elevated, #1a1a2e);
  border: 1px solid rgba(147, 112, 219, 0.3);
  border-radius: 2px;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 20px rgba(147, 112, 219, 0.15);
  animation: popoverFadeIn 0.2s ease-out;
}

.npc-context-popover::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  width: 12px;
  height: 12px;
  background: var(--color-bg-elevated, #1a1a2e);
  border-left: 1px solid rgba(147, 112, 219, 0.3);
  border-top: 1px solid rgba(147, 112, 219, 0.3);
  transform: rotate(45deg);
}

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

.npc-context-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid rgba(147, 112, 219, 0.2);
}

.npc-context-name {
  font-weight: 600;
  color: #9370db;
  font-size: var(--font-size-base, 1rem);
}

.npc-context-title {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.npc-context-relationship {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
}

.npc-context-relationship-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.npc-context-relationship-value {
  display: flex;
  gap: 2px;
}

.npc-context-relationship-value .heart {
  font-size: var(--font-size-sm);
  color: #dc143c;
  opacity: 0.3;
}

.npc-context-relationship-value .heart.filled {
  opacity: 1;
}

.npc-context-memories {
  max-height: 150px;
  overflow-y: auto;
}

.npc-context-memories-title {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1, 0.25rem);
}

.npc-context-memory-item {
  padding: var(--space-1, 0.25rem) 0;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.npc-context-memory-item:last-child {
  border-bottom: none;
}

.npc-context-memory-item .memory-date {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  margin-right: var(--space-1, 0.25rem);
}

.npc-context-empty {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  font-style: italic;
  text-align: center;
  padding: var(--space-2, 0.5rem) 0;
}

/* ========================================
 * Lore Context Blocks
 * ======================================== */

.lore-context {
  position: relative;
  padding: var(--space-3, 0.75rem);
  padding-left: calc(var(--space-3, 0.75rem) + 3px);
  margin: var(--space-2, 0.5rem) 0;
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.08) 0%,
    rgba(138, 43, 226, 0.03) 100%
  );
  border-left: 3px solid #8a2be2;
  border-radius: 0 2px 2px 0;
}

.lore-context-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: #8a2be2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.lore-context-icon {
  font-size: 1em;
}

.lore-context-content {
  color: var(--color-text-secondary, #aaa);
  font-style: italic;
  line-height: 1.5;
}

.lore-context-source {
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

/* ========================================
 * Expandable Lore (Inline)
 * ======================================== */

.expandable-lore {
  color: #8a2be2;
  cursor: pointer;
  position: relative;
  border-bottom: 1px dotted rgba(138, 43, 226, 0.5);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.expandable-lore:hover {
  color: #9932cc;
  border-bottom-color: #9932cc;
  text-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
}

/* Styled scroll icon for expandable lore (replaces emoji) */
.expandable-lore::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 3px;
  vertical-align: super;
  opacity: 0.7;
  background: currentColor;
  -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='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm2-4H7v-2h10v2zm0-4H7V7h10v2z'/%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='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 14H7v-2h8v2zm2-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
}

.expandable-lore.expanded {
  color: #9932cc;
}

.lore-expansion {
  display: none;
  margin-top: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  background: rgba(138, 43, 226, 0.08);
  border-radius: 2px;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  font-style: italic;
}

.expandable-lore.expanded + .lore-expansion {
  display: block;
  animation: loreExpand 0.3s ease-out;
}

@keyframes loreExpand {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 300px;
  }
}
/*
 * Retro Narrative — Ambient
 * Extracted for maintainability (#2783).
 */


/* ========================================
 * Context Integration - Responsive
 * ======================================== */

@media (max-width: 768px) {
  .memory-flashback {
    padding: var(--space-2, 0.5rem);
    margin: var(--space-2, 0.5rem) 0;
  }

  .memory-flashback-header {
    font-size: 0.7rem;
  }

  .npc-context-popover {
    min-width: 240px;
    max-width: 280px;
    padding: var(--space-2, 0.5rem);
  }

  .lore-context {
    padding: var(--space-2, 0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-flashback {
    animation: none;
  }

  .npc-context-popover {
    animation: none;
  }

  .memory-reference.expanded + .memory-expansion,
  .expandable-lore.expanded + .lore-expansion {
    animation: none;
  }
}

/* ========================================
 * Ambient Segment
 * Environmental sounds, music, atmosphere
 * ======================================== */

.ambient-segment {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(0, 206, 209, 0.08) 0%,
    rgba(0, 206, 209, 0.03) 100%
  );
  border-left: 3px solid var(--retro-cyan, #00CED1);
  border-radius: 2px;
  font-style: italic;
  color: var(--color-text-secondary, #aaa);
}

.ambient-segment::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-musical-note) no-repeat center / contain;
  font-size: 1.1em;
  opacity: 0.8;
  flex-shrink: 0;
  animation: ambientPulse 3s ease-in-out infinite;
}

.ambient-content {
  flex: 1;
  line-height: 1.5;
}

.ambient-content p {
  margin: 0;
}

/* Ambient intensity levels */
.ambient-segment[data-intensity="soft"] {
  opacity: 0.7;
  font-size: 0.9em;
}

.ambient-segment[data-intensity="intense"] {
  background: linear-gradient(
    135deg,
    rgba(0, 206, 209, 0.12) 0%,
    rgba(0, 206, 209, 0.05) 100%
  );
  border-left-width: 4px;
}

/* Ambient type variations */
.ambient-segment[data-type="music"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-musical-note) no-repeat center / contain;
}

.ambient-segment[data-type="nature"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-leaf) no-repeat center / contain;
  animation: none;
}

.ambient-segment[data-type="weather"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-cloud) no-repeat center / contain;
  animation: none;
}

.ambient-segment[data-type="danger"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-warning) no-repeat center / contain;
  animation: dangerPulse 1s ease-in-out infinite;
}

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

@keyframes dangerPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ========================================
 * Time Segment
 * Time of day, passage of time indicators
 * ======================================== */

.time-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.06) 20%,
    rgba(255, 215, 0, 0.1) 50%,
    rgba(255, 215, 0, 0.06) 80%,
    transparent 100%
  );
  border-top: 1px solid rgba(255, 215, 0, 0.2);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  color: var(--retro-gold, #FFD700);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: var(--font-size-sm, 0.875rem);
}

.time-icon {
  font-size: 1.1em;
  opacity: 0.8;
}

.time-value {
  color: var(--retro-gold, #FFD700);
}

.time-description {
  color: var(--color-text-secondary, #aaa);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-style: italic;
}

/* Time period styling */
.time-segment[data-period="dawn"] {
  --time-color: #ffa07a; /* Light salmon */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 160, 122, 0.08) 50%,
    transparent 100%
  );
  border-color: rgba(255, 160, 122, 0.2);
}

.time-segment[data-period="day"] {
  --time-color: #ffd700;
}

.time-segment[data-period="dusk"] {
  --time-color: #ff6347; /* Tomato */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 99, 71, 0.08) 50%,
    transparent 100%
  );
  border-color: rgba(255, 99, 71, 0.2);
}

.time-segment[data-period="night"] {
  --time-color: #6a5acd; /* Slate blue */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(106, 90, 205, 0.08) 50%,
    transparent 100%
  );
  border-color: rgba(106, 90, 205, 0.2);
}

.time-segment[data-period] .time-icon,
.time-segment[data-period] .time-value {
  color: var(--time-color);
}

/* ========================================
 * Secret Segment (DM-Only Content)
 * Hidden information visible only to DM
 * ======================================== */

.secret-segment {
  position: relative;
  padding: var(--space-3, 0.75rem);
  padding-left: calc(var(--space-3, 0.75rem) + 24px);
  background: repeating-linear-gradient(
    -45deg,
    rgba(220, 20, 60, 0.03),
    rgba(220, 20, 60, 0.03) 10px,
    rgba(220, 20, 60, 0.06) 10px,
    rgba(220, 20, 60, 0.06) 20px
  );
  border: 1px dashed var(--retro-red, #DC143C);
  border-radius: 2px;
}

.secret-segment::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-lock) no-repeat center / contain;
  position: absolute;
  left: var(--space-2, 0.5rem);
  top: var(--space-3, 0.75rem);
  font-size: 1rem;
  opacity: 0.7;
}

.secret-content {
  color: var(--color-text-secondary, #aaa);
  line-height: 1.5;
}

.secret-content p {
  margin: 0;
}

.secret-label {
  display: inline-block;
  position: absolute;
  top: -0.6em;
  right: var(--space-2, 0.5rem);
  padding: 2px 8px;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-bg-primary, #0f0f23);
  color: var(--retro-red, #DC143C);
  border: 1px solid var(--retro-red, #DC143C);
  border-radius: 2px;
}

/* Secret type variations */
.secret-segment[data-type="trap"] {
  border-color: #ff4500; /* Orange red */
}

.secret-segment[data-type="trap"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-warning) no-repeat center / contain;
}

.secret-segment[data-type="treasure"] {
  border-color: var(--retro-gold, #FFD700);
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 215, 0, 0.03),
    rgba(255, 215, 0, 0.03) 10px,
    rgba(255, 215, 0, 0.06) 10px,
    rgba(255, 215, 0, 0.06) 20px
  );
}

.secret-segment[data-type="treasure"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-gem) no-repeat center / contain;
}

.secret-segment[data-type="lore"] {
  border-color: var(--retro-purple, #7B68EE);
  background: repeating-linear-gradient(
    -45deg,
    rgba(123, 104, 238, 0.03),
    rgba(123, 104, 238, 0.03) 10px,
    rgba(123, 104, 238, 0.06) 10px,
    rgba(123, 104, 238, 0.06) 20px
  );
}

.secret-segment[data-type="lore"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-scroll) no-repeat center / contain;
}

/* ========================================
 * Map Position Segment
 * Location coordinates and position markers
 * ======================================== */

.map-position-segment {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(50, 205, 50, 0.08) 0%,
    rgba(50, 205, 50, 0.03) 100%
  );
  border-left: 3px solid var(--retro-green, #32CD32);
  border-radius: 2px;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.position-icon {
  color: var(--retro-green, #32CD32);
  font-size: 1.1em;
  opacity: 0.8;
}

.position-coords {
  color: var(--retro-green, #32CD32);
  font-weight: 600;
}

.position-label {
  color: var(--color-text-secondary, #aaa);
  font-family: inherit;
  font-weight: 400;
}

/* Position type variations */
.map-position-segment[data-type="entrance"] {
  border-left-color: #4682b4; /* Steel blue */
}

.map-position-segment[data-type="entrance"] .position-icon,
.map-position-segment[data-type="entrance"] .position-coords {
  color: #4682b4;
}

.map-position-segment[data-type="exit"] {
  border-left-color: var(--retro-gold, #FFD700);
}

.map-position-segment[data-type="exit"] .position-icon,
.map-position-segment[data-type="exit"] .position-coords {
  color: var(--retro-gold);
}

.map-position-segment[data-type="danger"] {
  border-left-color: var(--retro-red, #DC143C);
}

.map-position-segment[data-type="danger"] .position-icon,
.map-position-segment[data-type="danger"] .position-coords {
  color: var(--retro-red);
}

/*
 * Retro Narrative — Combat log
 * Extracted for maintainability (#2783).
 */

/* ========================================
 * Combat Log Segment
 * Combat round logs and turn tracking
 * ======================================== */

.combat-log-segment {
  padding: var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(220, 20, 60, 0.06) 0%,
    rgba(220, 20, 60, 0.02) 100%
  );
  border-left: 3px solid var(--retro-red, #DC143C);
  border-radius: 2px;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.combat-round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2, 0.5rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid rgba(220, 20, 60, 0.2);
}

.combat-round-number {
  font-weight: 700;
  color: var(--retro-red, #DC143C);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.combat-turn-indicator {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.combat-log-entries {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.combat-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
}

.combat-entry:last-child {
  border-bottom: none;
}

.combat-entry-actor {
  font-weight: 600;
  color: var(--retro-gold, #FFD700);
  min-width: 100px;
}

.combat-entry-action {
  color: var(--color-text-primary, #f0f0f0);
}

.combat-entry-result {
  margin-left: auto;
  color: var(--color-text-secondary, #aaa);
  font-size: 0.9em;
}

/* Combat entry type styling */
.combat-entry[data-type="attack"] .combat-entry-action::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-swords) no-repeat center / contain;
}

.combat-entry[data-type="damage"] {
  color: var(--retro-red, #DC143C);
}

.combat-entry[data-type="heal"] {
  color: var(--retro-green, #32CD32);
}

.combat-entry[data-type="heal"]::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-heart) no-repeat center / contain;
}

.combat-entry[data-type="spell"] .combat-entry-action::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-sparkles) no-repeat center / contain;
}

.combat-entry[data-type="critical"] {
  background: rgba(255, 215, 0, 0.1);
  padding: var(--space-1, 0.25rem);
  border-radius: 2px;
  animation: criticalFlash 0.5s ease-out;
}

@keyframes criticalFlash {
  0% { background: rgba(255, 215, 0, 0.4); }
  100% { background: rgba(255, 215, 0, 0.1); }
}

/* ========================================
 * Roll Result Segment
 * Dice roll results display
 * ======================================== */

.roll-result-segment {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.08) 0%,
    rgba(255, 215, 0, 0.03) 100%
  );
  border-left: 3px solid var(--retro-gold, #FFD700);
  border-radius: 2px;
  font-family: var(--font-mono, 'Courier New', monospace);
}

.roll-dice-display {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--color-bg-tertiary, #1a1a2e);
  border: 2px solid var(--retro-gold, #FFD700);
  border-radius: 4px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--retro-gold, #FFD700);
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.roll-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roll-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-breakdown {
  color: var(--color-text-secondary, #aaa);
  font-size: var(--font-size-sm, 0.875rem);
}

.roll-total {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-primary, #f0f0f0);
}

/* Roll outcome styling */
.roll-result-segment[data-outcome="success"] {
  border-left-color: var(--retro-green, #32CD32);
  background: linear-gradient(
    135deg,
    rgba(50, 205, 50, 0.08) 0%,
    rgba(50, 205, 50, 0.03) 100%
  );
}

.roll-result-segment[data-outcome="success"] .roll-dice-display {
  border-color: var(--retro-green, #32CD32);
  color: var(--retro-green, #32CD32);
  text-shadow: 0 0 8px rgba(50, 205, 50, 0.5);
}

.roll-result-segment[data-outcome="failure"] {
  border-left-color: var(--retro-red, #DC143C);
  background: linear-gradient(
    135deg,
    rgba(220, 20, 60, 0.08) 0%,
    rgba(220, 20, 60, 0.03) 100%
  );
}

.roll-result-segment[data-outcome="failure"] .roll-dice-display {
  border-color: var(--retro-red, #DC143C);
  color: var(--retro-red, #DC143C);
  text-shadow: 0 0 8px rgba(220, 20, 60, 0.5);
}

.roll-result-segment[data-outcome="critical"] {
  border-left-color: var(--retro-gold, #FFD700);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 215, 0, 0.05) 100%
  );
  animation: criticalGlow 1s ease-in-out infinite alternate;
}

.roll-result-segment[data-outcome="critical"] .roll-dice-display {
  animation: criticalPulse 0.5s ease-in-out infinite alternate;
}

@keyframes criticalGlow {
  0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
  100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
}

@keyframes criticalPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

.roll-result-segment[data-outcome="fumble"] {
  border-left-color: #8b0000; /* Dark red */
  background: linear-gradient(
    135deg,
    rgba(139, 0, 0, 0.12) 0%,
    rgba(139, 0, 0, 0.05) 100%
  );
}

.roll-result-segment[data-outcome="fumble"] .roll-dice-display {
  border-color: #8b0000;
  color: #8b0000;
  animation: fumbleShake 0.3s ease-in-out;
}

@keyframes fumbleShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px) rotate(-5deg); }
  75% { transform: translateX(3px) rotate(5deg); }
}

/* Advantage/Disadvantage indicators */
.roll-result-segment .roll-modifier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: var(--font-size-xs, 0.75rem);
  border-radius: 2px;
  margin-left: var(--space-1, 0.25rem);
}

.roll-modifier.advantage {
  background: rgba(50, 205, 50, 0.2);
  color: var(--retro-green, #32CD32);
}

.roll-modifier.disadvantage {
  background: rgba(220, 20, 60, 0.2);
  color: var(--retro-red, #DC143C);
}
/*
 * Retro Narrative — Pixel Portrait Canvas and Travel Segment
 * Extracted for maintainability (#2783).
 */


/* ========================================
 * Pixel Portrait Canvas
 * NPC portrait rendering
 * ======================================== */

.pixel-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--npc-color, var(--retro-purple));
  border-radius: 2px;
  background: var(--color-bg-tertiary, #1a1a2e);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Canvas element inside portrait container */
.pixel-portrait canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Firefox */
  image-rendering: -moz-crisp-edges;
  /* Webkit */
  image-rendering: -webkit-crisp-edges;
}

/* Hover effect - subtle glow */
.pixel-portrait:hover {
  box-shadow: 0 0 8px color-mix(in srgb, var(--npc-color, var(--retro-purple)) 50%, transparent);
}

/* Size variants */
.pixel-portrait--large {
  width: 48px;
  height: 48px;
  border-width: 3px;
}

.pixel-portrait--small {
  width: 24px;
  height: 24px;
  border-width: 1px;
}

.pixel-portrait--tiny {
  width: 18px;
  height: 18px;
  border-width: 1px;
}

/* Pixel portrait with loading state */
.pixel-portrait--loading {
  animation: portraitPulse 1s ease-in-out infinite;
}

.pixel-portrait--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: portraitShimmer 1.5s ease-in-out infinite;
}

@keyframes portraitPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes portraitShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Relationship-based portrait borders */
.npc-dialogue.relationship-hostile .pixel-portrait {
  border-color: #dc143c;
  box-shadow: 0 0 4px rgba(220, 20, 60, 0.3);
}

.npc-dialogue.relationship-unfriendly .pixel-portrait {
  border-color: #ff6347;
}

.npc-dialogue.relationship-neutral .pixel-portrait {
  border-color: #808080;
}

.npc-dialogue.relationship-friendly .pixel-portrait {
  border-color: #32cd32;
}

.npc-dialogue.relationship-allied .pixel-portrait {
  border-color: #4169e1;
  box-shadow: 0 0 4px rgba(65, 105, 225, 0.3);
}

/* First meeting indicator - pulsing border */
.npc-dialogue.npc-first-meeting .pixel-portrait {
  animation: firstMeetingPulse 2s ease-in-out infinite;
}

@keyframes firstMeetingPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(255, 215, 0, 0.4);
  }
}

/* Fallback glyph: shown until JS sets data-canvas-rendered (race fix #4952) */
.pixel-portrait:not([data-canvas-rendered])::before {
  content: '\1F464';
  font-size: 14px;
  color: var(--npc-color, var(--retro-purple));
  opacity: 0.6;
}
.pixel-portrait--large:not([data-canvas-rendered])::before { font-size: 20px; }
.pixel-portrait--small:not([data-canvas-rendered])::before { font-size: 10px; }

/* Portrait frame variants */
.pixel-portrait--framed {
  border-width: 3px;
  border-style: double;
}

.pixel-portrait--rounded {
  border-radius: 50%;
}

.pixel-portrait--rounded canvas {
  border-radius: 50%;
}

/* Important NPC indicator */
.pixel-portrait--important {
  border-color: var(--retro-gold, #FFD700);
}

.pixel-portrait--important::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  background: var(--retro-gold, #FFD700);
  border-radius: 50%;
  border: 1px solid var(--color-bg-primary, #0f0f23);
}

/* Dead/ghost NPC styling */
.pixel-portrait--deceased {
  filter: grayscale(100%);
  opacity: 0.6;
}

.pixel-portrait--deceased::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.1) 3px,
    rgba(0, 0, 0, 0.1) 6px
  );
  pointer-events: none;
}

/* ========================================
 * New Segment Animations - Reduced Motion
 * ======================================== */

/* ========================================
 * Travel Segment
 * Container for multi-part travel sequences
 * ======================================== */

.travel-segment {
  margin: var(--space-2, 0.5rem) 0;
  padding: var(--space-3, 0.75rem);
  border-left: 3px solid var(--retro-green);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 2px;
}

.travel-segment__header {
  font-size: 0.85em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2, 0.5rem);
  opacity: 0.85;
  color: var(--retro-green);
}

.travel-segment__label {
  display: inline;
}

.travel-segment__content {
  padding-left: var(--space-2, 0.5rem);
}

.travel-segment__content > :first-child {
  margin-top: 0;
}

.travel-segment__content > :last-child {
  margin-bottom: 0;
}

/* Departure variant - yellow accent */
.travel-segment--departure {
  border-left-color: var(--retro-gold);
}

.travel-segment--departure .travel-segment__header {
  color: var(--retro-gold);
}

/* Travel variant - green accent (default) */
.travel-segment--travel {
  border-left-color: var(--retro-green);
}

.travel-segment--travel .travel-segment__header {
  color: var(--retro-green);
}

/* Encounter variant - red accent */
.travel-segment--encounter {
  border-left-color: var(--retro-red);
}

.travel-segment--encounter .travel-segment__header {
  color: var(--retro-red);
}

/* Arrival variant - cyan accent */
.travel-segment--arrival {
  border-left-color: var(--retro-cyan);
}

.travel-segment--arrival .travel-segment__header {
  color: var(--retro-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .ambient-segment::before {
    animation: none;
    opacity: 0.8;
  }

  .roll-result-segment[data-outcome="critical"] {
    animation: none;
  }

  .roll-result-segment[data-outcome="critical"] .roll-dice-display {
    animation: none;
  }

  .roll-result-segment[data-outcome="fumble"] .roll-dice-display {
    animation: none;
  }

  .pixel-portrait--loading {
    animation: none;
    opacity: 0.7;
  }

  .combat-entry[data-type="critical"] {
    animation: none;
  }
}
/**
 * Retro Narrative — Import Hub
 * ==============================
 * NPC dialogue, segment types, perception, callouts, memory, ambient, combat.
 *
 * Decomposed into focused files under retro_narrative/ for maintainability (#2783).










 */
/**
 * Equipment Browser — Base Styles
 * ==================================
 * Core browser layout, search, categories, items list, footer cart, and scrollbar.
 */

/* ==========================================================================
 * Panel Component Styles
 * Extracted from inline styles in panel partials for better maintainability
 * ========================================================================== */

/* Equipment Browser Panel
 * ========================================================================== */
/* Equipment Browser Styles */
.equipment-browser-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

/* Header / Search */
.eb-header {
  padding: 10px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.eb-search {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
}

.eb-search:focus {
  outline: none;
  border-color: var(--accent-primary, #4a9eff);
}

.eb-search::placeholder {
  color: var(--text-muted, #888);
}

/* Categories */
.eb-categories {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  overflow-x: auto;
}

.eb-cat-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--text-secondary, #888);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.eb-cat-btn:hover {
  background: var(--bg-hover, #2a2a4a);
  color: var(--text-primary, #e0e0e0);
}

.eb-cat-btn.eb-cat-active {
  background: var(--accent-primary, #4a9eff);
  color: #fff;
}

/* Items List */
.eb-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.eb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted, #888);
  text-align: center;
  padding: 24px;
}

.eb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.eb-item:hover {
  background: var(--bg-hover, #2a2a4a);
  border-color: var(--accent-primary, #4a9eff);
}

.eb-item--selected {
  background: rgba(74, 222, 128, 0.1);
  border-color: var(--accent-success, #4ade80);
}

.eb-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--text-secondary, #888);
}

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

.eb-item-name {
  font-weight: 500;
  font-size: var(--font-size-base);
}

.eb-item-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-item-cost {
  font-size: var(--font-size-sm);
  color: var(--accent-warning, #fbbf24);
  font-weight: 500;
}

.eb-item-check {
  width: 20px;
  color: var(--accent-success, #4ade80);
}

.eb-svg {
  width: 18px;
  height: 18px;
}

.eb-check {
  width: 16px;
  height: 16px;
}

/* Footer / Cart */
.eb-footer {
  border-top: 1px solid var(--border-color, #3a3a5a);
  padding: 10px;
}

.eb-cart {
  max-height: 100px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.eb-cart-empty {
  text-align: center;
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm);
  padding: 8px;
}

.eb-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--bg-secondary, #252545);
  border-radius: 4px;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
}

.eb-cart-item-name {
  flex: 1;
}

.eb-cart-item-cost {
  color: var(--accent-warning, #fbbf24);
}

.eb-cart-remove {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 2px 6px;
  font-size: var(--font-size-sm);
}

.eb-cart-remove:hover {
  color: var(--accent-danger, #f87171);
}

/* Actions */
.eb-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.eb-total {
  font-size: var(--font-size-base);
}

.eb-total-label {
  color: var(--text-secondary, #888);
}

.eb-total-amount {
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
}

.eb-confirm {
  padding: 8px 16px;
  background: var(--accent-primary, #4a9eff);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s, transform 0.15s;
}

.eb-confirm:hover:not(:disabled) {
  background: #3a8eef;
}

.eb-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Warning Toast */
.eb-warning {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--accent-danger, #f87171);
  color: #fff;
  border-radius: 6px;
  font-size: var(--font-size-base);
  animation: ebFadeIn 0.2s ease;
}

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

/* Scrollbar */
.eb-items::-webkit-scrollbar,
.eb-cart::-webkit-scrollbar {
  width: 6px;
}

.eb-items::-webkit-scrollbar-track,
.eb-cart::-webkit-scrollbar-track {
  background: transparent;
}

.eb-items::-webkit-scrollbar-thumb,
.eb-cart::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}
/**
 * Equipment Browser — Gold-Buy Mode
 * ====================================
 * Gold budget display, gold-buy item cards, and budget states.
 */


/* Gold-Buy Mode Styles
 * ========================================================================== */

.eb-budget-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--bg-secondary, #252540), var(--bg-tertiary, #2a2a4a));
  border: 1px solid var(--accent-warning, #fbbf24);
  border-radius: 6px;
  margin-bottom: 10px;
}

.eb-budget-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
}

.eb-budget-remaining {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--accent-warning, #fbbf24);
}

.eb-budget--low {
  color: var(--accent-danger, #f87171);
}

.eb-category-filters {
  display: flex;
  gap: 6px;
  padding: 8px 0;
  overflow-x: auto;
  flex-wrap: wrap;
}

.eb-category-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 4px;
  color: var(--text-secondary, #888);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eb-category-btn:hover {
  background: var(--bg-hover, #3a3a5a);
  color: var(--text-primary, #e0e0e0);
}

.eb-category-btn--active {
  background: var(--accent-primary, #4a9eff);
  border-color: var(--accent-primary, #4a9eff);
  color: #fff;
}

.eb-item-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px 0;
  max-height: 400px;
  overflow-y: auto;
}

.eb-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.eb-item-card:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: var(--bg-tertiary, #2a2a4a);
}

.eb-item-card--unaffordable {
  opacity: 0.5;
}

.eb-item-card--unaffordable:hover {
  border-color: var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252540);
}

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

.eb-item-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 2px;
}

.eb-item-type {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  text-transform: capitalize;
}

.eb-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.eb-item-price {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
}

.eb-add-btn {
  padding: 6px 12px;
  background: var(--accent-primary, #4a9eff);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.eb-add-btn:hover:not(:disabled) {
  background: #3a8eef;
}

.eb-add-btn--disabled {
  background: var(--bg-tertiary, #2a2a4a);
  color: var(--text-muted, #888);
  cursor: not-allowed;
}

.eb-add-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.eb-add-btn.eb-loading {
  pointer-events: none;
  opacity: 0.7;
}

.eb-items-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px;
  color: var(--text-muted, #888);
}

.eb-items-empty-hint {
  font-size: var(--font-size-sm);
  margin-top: 8px;
  opacity: 0.7;
}

.eb-notification {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
  z-index: var(--z-floating);
  transition: opacity 0.3s ease;
}

.eb-notification--success {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.eb-notification--error {
  border-color: var(--accent-danger, #f87171);
  background: rgba(248, 113, 113, 0.1);
}

.eb-notification--fade {
  opacity: 0;
}
/**
 * Equipment Browser — Inline Cart
 * ==================================
 * Inline cart for gold-buy mode embedded in the equipment browser.
 */


/* Inline Cart for Gold-Buy Mode (embedded in equipment browser)
 * ========================================================================== */
.eb-inline-cart {
  margin-top: 16px;
  padding: 12px;
  background: var(--bg-tertiary, #1a1a2e);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
}

.eb-cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  margin-bottom: 10px;
}

.eb-cart-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.eb-cart-total {
  font-size: var(--font-size-sm);
  color: var(--accent-warning, #fbbf24);
  font-weight: 500;
}

.eb-cart-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}

.eb-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--bg-secondary, #252540);
  border-radius: 4px;
}

.eb-cart-item-name {
  flex: 1;
  font-size: var(--font-size-base);
  color: var(--text-primary, #e0e0e0);
}

.eb-cart-item-qty {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
}

.eb-cart-item-price {
  font-size: var(--font-size-sm);
  color: var(--accent-warning, #fbbf24);
  font-weight: 500;
  min-width: 50px;
  text-align: right;
}

.eb-cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 4px;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: var(--font-size-md);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eb-cart-remove:hover {
  background: var(--accent-danger, #f87171);
  border-color: var(--accent-danger, #f87171);
  color: #fff;
}

.eb-cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #3a3a5a);
  margin-top: 10px;
}

.eb-cart-remaining {
  font-size: var(--font-size-base);
  color: var(--text-secondary, #aaa);
}

.eb-cart-confirm {
  padding: 8px 16px;
  background: var(--accent-success, #4ade80);
  border: none;
  border-radius: 6px;
  color: #000;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.eb-cart-confirm:hover:not(:disabled) {
  background: #22c55e;
}

.eb-cart-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.eb-cart-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #888);
  font-size: var(--font-size-base);
}

.eb-cart-empty p {
  margin: 0;
}

/**
 * Equipment Browser Panel — Import Hub
 * =======================================
 * Equipment browser with search, categories, gold-buy mode, and inline cart.
 *
 * Decomposed into focused files under equipment_browser/ for maintainability.



 */
/* Equipment Modal (Gold-Buy Mode)
 * ========================================================================== */

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

@keyframes equipmentModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.equipment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  animation: equipmentModalFadeIn 0.2s ease;
}

.equipment-modal-overlay--closing {
  animation: equipmentModalFadeIn 0.2s ease reverse;
}

.equipment-modal {
  width: 90vw;
  max-width: 1000px;
  height: 80vh;
  max-height: 700px;
  background: var(--bg-primary, #1a1a2e);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: equipmentModalSlideIn 0.25s ease;
}

.equipment-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252540);
}

.equipment-modal__header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.equipment-modal__budget {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-md);
}

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

.equipment-modal__budget-amount {
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
}

.equipment-modal__budget-total {
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm);
}

.equipment-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-muted, #888);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-modal__close:hover {
  background: var(--accent-danger, #f87171);
  border-color: var(--accent-danger, #f87171);
  color: #fff;
}

.equipment-modal__body {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

.equipment-modal__browser {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 12px;
}

.equipment-modal__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.equipment-modal__filter-btn {
  padding: 6px 12px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-modal__filter-btn:hover {
  background: var(--bg-tertiary, #2a2a4a);
  border-color: var(--accent-primary, #4a9eff);
}

.equipment-modal__filter-btn--active {
  background: var(--accent-primary, #4a9eff);
  border-color: var(--accent-primary, #4a9eff);
  color: #fff;
}

.equipment-modal__search {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
}

.equipment-modal__search:focus {
  outline: none;
  border-color: var(--accent-primary, #4a9eff);
}

.equipment-modal__search::placeholder {
  color: var(--text-muted, #888);
}

.equipment-modal__items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equipment-modal__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.equipment-modal__item:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: var(--bg-tertiary, #2a2a4a);
}

.equipment-modal__item--unaffordable {
  opacity: 0.5;
}

.equipment-modal__item--unaffordable:hover {
  border-color: var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252540);
}

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

.equipment-modal__item-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 2px;
}

.equipment-modal__item-type {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  text-transform: capitalize;
}

.equipment-modal__item-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.equipment-modal__item-price {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
}

.equipment-modal__add-btn {
  padding: 6px 14px;
  background: var(--accent-primary, #4a9eff);
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.equipment-modal__add-btn:hover:not(:disabled) {
  background: #3a8eef;
}

.equipment-modal__add-btn--disabled {
  background: var(--bg-tertiary, #2a2a4a);
  color: var(--text-muted, #888);
  cursor: not-allowed;
}

.equipment-modal__add-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.equipment-modal__add-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

/* Modal Cart */
.equipment-modal__cart {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #252540);
  border-radius: 6px;
  padding: 14px;
  overflow: hidden;
}

.equipment-modal__cart h3 {
  margin: 0 0 12px 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.equipment-modal__cart-items {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.equipment-modal__cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-tertiary, #1a1a2e);
  border-radius: 4px;
}

.equipment-modal__cart-item-name {
  flex: 1;
  font-size: var(--font-size-base);
  color: var(--text-primary, #e0e0e0);
}

.equipment-modal__cart-item-qty {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
}

.equipment-modal__cart-item-price {
  font-size: var(--font-size-sm);
  color: var(--accent-warning, #fbbf24);
  font-weight: 500;
  min-width: 50px;
  text-align: right;
}

.equipment-modal__cart-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 4px;
  color: var(--text-muted, #888);
  cursor: pointer;
  font-size: var(--font-size-md);
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-modal__cart-remove:hover {
  background: var(--accent-danger, #f87171);
  border-color: var(--accent-danger, #f87171);
  color: #fff;
}

.equipment-modal__cart-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  color: var(--text-muted, #888);
  font-size: var(--font-size-base);
}

.equipment-modal__cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.equipment-modal__confirm {
  padding: 10px 20px;
  background: var(--accent-success, #4ade80);
  border: none;
  border-radius: 6px;
  color: #000;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.equipment-modal__confirm:hover:not(:disabled) {
  background: #22c55e;
}

.equipment-modal__confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Modal utilities */
.equipment-modal__empty,
.equipment-modal__loading,
.equipment-modal__error {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px;
  color: var(--text-muted, #888);
  text-align: center;
}

.equipment-modal__empty-hint {
  font-size: var(--font-size-sm);
  margin-top: 8px;
  opacity: 0.7;
}

.equipment-modal__notification {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: var(--bg-secondary, #252540);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
  z-index: var(--z-sticky);
  transition: opacity 0.3s ease;
}

.equipment-modal__notification--success {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.equipment-modal__notification--error {
  border-color: var(--accent-danger, #f87171);
  background: rgba(248, 113, 113, 0.1);
}

.equipment-modal__notification--fade {
  opacity: 0;
}

/* Gold-buy inline button styles */
.gold-buy-info {
  padding: 16px;
  text-align: center;
}

.gold-buy-info p {
  margin: 0 0 8px 0;
  color: var(--text-secondary, #aaa);
}

.gold-buy-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
}

.gold-buy-open-shop {
  margin-top: 12px;
  padding: 10px 20px;
  background: var(--accent-primary, #4a9eff);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gold-buy-open-shop:hover {
  background: #3a8eef;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 768px) {
  .equipment-modal {
    width: 95vw;
    height: 90vh;
    max-height: none;
  }

  .equipment-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .equipment-modal__cart {
    max-height: 200px;
  }
}
/* Equipment Cart Panel
 * ========================================================================== */
/* Equipment Cart Panel Styles */
.equipment-cart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

/* Header */
.ec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  gap: 8px;
}

.ec-mode-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
}

.ec-mode-label {
  color: var(--text-secondary, #888);
}

.ec-mode-value {
  font-weight: 600;
  color: var(--accent-primary, #4a9eff);
}

.ec-mode-toggle {
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 4px;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ec-mode-toggle:hover {
  background: var(--bg-hover, #3a3a5a);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--accent-primary, #4a9eff);
}

/* Gold Display */
.ec-gold-display {
  padding: 10px;
  background: var(--bg-secondary, #252545);
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.ec-gold-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: var(--font-size-base);
}

.ec-gold-row--spent .ec-gold-value {
  color: var(--accent-danger, #f87171);
}

.ec-gold-row--remaining .ec-gold-value {
  font-size: var(--font-size-md);
  font-weight: 600;
}

.ec-gold-label {
  color: var(--text-secondary, #888);
}

.ec-gold-value {
  color: var(--accent-warning, #fbbf24);
}

.ec-gold-value--highlight {
  color: var(--accent-success, #4ade80);
}

/* Items Container */
.ec-items-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ec-section-title {
  padding: 8px 10px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #888);
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.ec-items {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.ec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: var(--font-size-base);
  padding: 20px;
}

.ec-empty small {
  margin-top: 4px;
  font-size: var(--font-size-sm);
}

/* Cart Item */
.ec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ec-item:hover {
  border-color: var(--accent-primary, #4a9eff);
}

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

.ec-item-name {
  font-size: var(--font-size-base);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-item-meta {
  display: flex;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  margin-top: 2px;
}

.ec-item-cost {
  color: var(--accent-warning, #fbbf24);
}

.ec-item-qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ec-item-qty-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 3px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ec-item-qty-btn:hover {
  background: var(--accent-primary, #4a9eff);
  border-color: var(--accent-primary, #4a9eff);
}

.ec-item-qty-value {
  min-width: 20px;
  text-align: center;
  font-size: var(--font-size-sm);
}

.ec-item-remove {
  padding: 4px 8px;
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}

.ec-item-remove:hover {
  color: var(--accent-danger, #f87171);
}

/* Quick Pick Item (different styling) */
.ec-item--choice {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.ec-item-choice-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-success, #4ade80);
  margin-bottom: 2px;
}

/* Footer */
.ec-footer {
  padding: 10px;
  border-top: 1px solid var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252545);
}

.ec-summary {
  margin-bottom: 10px;
  text-align: center;
}

.ec-item-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
}

.ec-actions {
  display: flex;
  gap: 8px;
}

.ec-clear-btn {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-secondary, #888);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.ec-clear-btn:hover:not(:disabled) {
  background: var(--bg-hover, #3a3a5a);
  color: var(--accent-danger, #f87171);
  border-color: var(--accent-danger, #f87171);
}

.ec-clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ec-confirm-btn {
  flex: 2;
  padding: 8px 16px;
  background: var(--accent-primary, #4a9eff);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-size: var(--font-size-base);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.ec-confirm-btn:hover:not(:disabled) {
  background: #3a8eef;
}

.ec-confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Scrollbar */
.ec-items::-webkit-scrollbar {
  width: 6px;
}

.ec-items::-webkit-scrollbar-track {
  background: transparent;
}

.ec-items::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

/* Warning/Error Toast */
.ec-toast {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--accent-danger, #f87171);
  color: #fff;
  border-radius: 6px;
  font-size: var(--font-size-sm);
  animation: ecFadeIn 0.2s ease;
  z-index: var(--z-panel);
}

.ec-toast--success {
  background: var(--accent-success, #4ade80);
}

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

/* Pack/Container Styles for Equipment Cart */
.ec-pack {
  border: 1px solid var(--accent-primary, #4a9eff);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
  background: var(--bg-secondary, #252545);
}

.ec-pack-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(74, 158, 255, 0.1);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ec-pack-header:hover {
  background: rgba(74, 158, 255, 0.15);
}

.ec-pack-toggle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary, #888);
  transition: transform 0.2s ease;
}

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

.ec-pack-name {
  font-size: var(--font-size-base);
  font-weight: 500;
}

.ec-pack-meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  margin-top: 2px;
}

.ec-pack-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  padding: 2px 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 3px;
}

.ec-pack-contents {
  padding: 8px 12px 12px 28px;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(74, 158, 255, 0.2);
}

.ec-pack-contents.collapsed {
  display: none;
}

.ec-pack-content-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
  border-radius: 4px;
  transition: background 0.15s ease;
}

.ec-pack-content-item:last-child {
  margin-bottom: 0;
}

.ec-pack-content-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.ec-pack-content-name {
  flex: 1;
  color: var(--text-primary, #e0e0e0);
}

.ec-pack-content-qty {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
}

/* Pack Preview for Quick Pick mode */
.ec-pack-preview {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-top: 4px;
  font-style: italic;
}
/* Character Carousel - For saved/preset character selection
 * ========================================================================== */

.character-carousel-container {
  padding: 0 1rem;
  margin-bottom: 1rem;
  animation: carouselFadeIn 0.2s ease;
}

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

.character-carousel {
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  overflow: hidden;
}

.character-carousel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-tertiary, #2a2a4a);
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.character-carousel__title {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}

.character-carousel__close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

.character-carousel__close:hover {
  color: var(--text-primary, #e0e0e0);
}

.character-carousel__track {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, #3a3a5a) transparent;
}

.character-carousel__track::-webkit-scrollbar {
  height: 6px;
}

.character-carousel__track::-webkit-scrollbar-track {
  background: transparent;
}

.character-carousel__track::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

/* Responsive adjustments for carousel */
@media (max-width: 480px) {
  .character-carousel__track {
    gap: 0.75rem;
    padding: 0.75rem;
  }
}

/**
 * Choice Cards — Base Card Types
 * ================================
 * Universal selection cards: base, target, condition, item, spell, character, option.
 */

/* ==========================================================================
 * Choice Cards - Universal selection cards for AI carousel
 * Supports: target, item, spell, character, option
 * ========================================================================== */

button.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem;
  min-width: 140px;
  max-width: 180px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--bg-tertiary, #2a2a4a);
  background-image: none;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
  text-align: center;
}

button.choice-card:hover {
  background: var(--bg-secondary, #252545);
  border-color: var(--accent-primary, #4a9eff);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

.choice-card__icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

/* SVG icon sizing - use default 24px from inline attributes */
.choice-card__icon svg {
  display: block;
  margin: 0 auto;
}

/* Icon colors - themed by action type */
.choice-card__icon--user { color: #60a5fa; } /* Blue - user actions */
.choice-card__icon--users { color: #60a5fa; } /* Blue - user/character related */
.choice-card__icon--sparkles { color: #fbbf24; } /* Gold - magical/creative */
.choice-card__icon--flask { color: #a78bfa; } /* Purple - experimental/homebrew */
.choice-card__icon--link { color: #34d399; } /* Green - connections */
.choice-card__icon--list { color: #94a3b8; } /* Gray - neutral/info */
.choice-card__icon--sword { color: #ef4444; } /* Red - combat/fighter */
.choice-card__icon--swords { color: #dc2626; } /* Darker red - intense combat */
.choice-card__icon--user-secret { color: #7c3aed; } /* Purple - stealth/rogue */
.choice-card__icon--theater-mask { color: #ec4899; } /* Pink - DM/performance */
.choice-card__icon--book-open { color: #3b82f6; } /* Blue - learning/tutorial */
.choice-card__icon--message-circle { color: #22d3ee; } /* Cyan - chat */
.choice-card__icon--coins { color: #f59e0b; } /* Amber - gold/treasure */
.choice-card__icon--gift { color: #8b5cf6; } /* Purple - magic items */
.choice-card__icon--settings { color: #64748b; } /* Slate - dev tools */

/* Hover effect - brighten on hover */
button.choice-card:hover .choice-card__icon svg {
  filter: brightness(1.3);
  transition: filter 0.2s ease;
}

.choice-card__label {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  line-height: 1.2;
  white-space: nowrap;
}

.choice-card__meta {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  line-height: 1.3;
}

.choice-card__description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  line-height: 1.3;
  max-width: 100%;
}

/* Target Cards - Combat target selection */
button.choice-card--target {
  border-left: 3px solid #dc2626;
}

button.choice-card--target:hover {
  border-left-color: #f87171;
}

.choice-card__ac {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.choice-card__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-top: 4px;
}

/* Condition badge base + type colors from components/_condition_badge.css */
.choice-card__conditions .condition-badge {
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Item Cards - Shop browsing, inventory */
button.choice-card--item {
  border-left: 3px solid #f59e0b;
}

button.choice-card--item:hover {
  border-left-color: #fbbf24;
}

.choice-card__price {
  font-size: var(--font-size-sm);
  color: #fbbf24;
  font-weight: 500;
}

.choice-card__quantity {
  font-size: var(--font-size-xs);
  color: var(--text-secondary, #888);
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.choice-card__rarity {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 500;
}

/* Item rarity colors */
button.choice-card--rarity-common .choice-card__rarity {
  background: rgba(156, 163, 175, 0.3);
  color: #d1d5db;
}

button.choice-card--rarity-uncommon .choice-card__rarity {
  background: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

button.choice-card--rarity-rare .choice-card__rarity {
  background: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

button.choice-card--rarity-veryrare .choice-card__rarity,
button.choice-card--rarity-very_rare .choice-card__rarity {
  background: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}

button.choice-card--rarity-legendary .choice-card__rarity {
  background: rgba(249, 115, 22, 0.3);
  color: #fdba74;
}

button.choice-card--rarity-artifact .choice-card__rarity {
  background: rgba(236, 72, 153, 0.3);
  color: #f9a8d4;
}

/* Spell Cards */
button.choice-card--spell {
  border-left: 3px solid #8b5cf6;
}

button.choice-card--spell:hover {
  border-left-color: #a78bfa;
}

.choice-card__level {
  font-size: var(--font-size-xs);
  color: var(--text-secondary, #888);
  padding: 2px 6px;
  background: rgba(139, 92, 246, 0.2);
  border-radius: 4px;
}

.choice-card__school {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.choice-card__components {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  font-style: italic;
}

.choice-card__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--font-size-xs);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

.choice-card__badge--concentration {
  background: rgba(234, 179, 8, 0.4);
  color: #fde047;
}

/* Make spell cards relative for badge positioning */
button.choice-card--spell {
  position: relative;
}

/* School-specific border colors */
button.choice-card--school-abjuration { border-left-color: #60a5fa; }
button.choice-card--school-conjuration { border-left-color: #fbbf24; }
button.choice-card--school-divination { border-left-color: #c084fc; }
button.choice-card--school-enchantment { border-left-color: #f472b6; }
button.choice-card--school-evocation { border-left-color: #f87171; }
button.choice-card--school-illusion { border-left-color: #a78bfa; }
button.choice-card--school-necromancy { border-left-color: #6b7280; }
button.choice-card--school-transmutation { border-left-color: #4ade80; }

/* Character Choice Cards */
button.choice-card--character {
  border-left: 3px solid #4a9eff;
}

button.choice-card--character:hover {
  border-left-color: #7ab8ff;
}

/* Character labels: cap multi-word names (e.g. "Glorokdin Bramblenarrow") at
 * one line with ellipsis. Full name remains in the button's `title=` attr
 * for tooltip access. Scoped to --character so NPC/item/target/spell labels
 * are unaffected (#4013, redesign tracked in #4014). */
.choice-card--character .choice-card__label {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.choice-card__class {
  font-size: var(--font-size-sm);
  color: var(--accent-primary, #4a9eff);
}

/* Active character marker (#4015): mirrors the lobby's "Continue Playing"
 * green-success accent so the picker visually links back to that CTA.
 * Modifier sits on the wrapper only, so #4014's card redesign won't collide.
 * Distinct from .choice-card--disposition-* (NPC) and .choice-card--rarity-*
 * (item) to avoid any state confusion. */
button.choice-card--character.choice-card--active {
  border-left-color: var(--color-accent-success, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.10) 0%,
    rgba(34, 197, 94, 0.02) 100%
  );
}

button.choice-card--character.choice-card--active:hover {
  border-left-color: var(--color-accent-success, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.55);
}

.choice-card__active-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-sm, 4px);
}

/* Option Cards - Generic choices */
button.choice-card--option {
  border-left: 3px solid #4ade80;
}

button.choice-card--option:hover {
  border-left-color: #86efac;
}

/* Style variants for option cards */
button.choice-card--primary {
  border-left-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

button.choice-card--primary:hover {
  border-left-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.2);
}

button.choice-card--danger {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

button.choice-card--danger:hover {
  border-left-color: #f87171;
  background: rgba(220, 38, 38, 0.2);
}

/* Carousel variant styling */
.character-carousel--target {
  border-color: rgba(220, 38, 38, 0.4);
}

.character-carousel--item {
  border-color: rgba(245, 158, 11, 0.4);
}

.character-carousel--spell {
  border-color: rgba(139, 92, 246, 0.4);
}

.character-carousel--option {
  border-color: rgba(74, 222, 128, 0.4);
}

/* Responsive adjustments for choice cards */
@media (max-width: 480px) {
  button.choice-card {
    min-width: 120px;
    padding: 0.75rem;
  }

  .choice-card__label {
    font-size: var(--font-size-base);
  }

  .choice-card__meta,
  .choice-card__description {
    font-size: var(--font-size-xs);
  }
/**
 * Choice Cards — Story & Category Cards
 * =======================================
 * Story option cards, category cards (expandable), and children containers.
 */


/* Story Option Cards - Guided Story Mode
 * ========================================================================== */
button.choice-card--story-option {
  border-left: 3px solid #6366f1;
  position: relative;
  min-height: 80px;
  padding: 0.875rem 1rem;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

button.choice-card--story-option:hover {
  border-left-color: #818cf8;
  background: rgba(99, 102, 241, 0.15);
}

/* Type-specific borders */
button.choice-card--type-action {
  border-left-color: #ef4444;
}
button.choice-card--type-action:hover {
  border-left-color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}

button.choice-card--type-dialogue {
  border-left-color: #3b82f6;
}
button.choice-card--type-dialogue:hover {
  border-left-color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
}

button.choice-card--type-exploration {
  border-left-color: #10b981;
}
button.choice-card--type-exploration:hover {
  border-left-color: #34d399;
  background: rgba(16, 185, 129, 0.1);
}

button.choice-card--type-retreat {
  border-left-color: #f59e0b;
}
button.choice-card--type-retreat:hover {
  border-left-color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
}

/* Card content layout */
.choice-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
}

.choice-card__type-icon {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.choice-card__label--story {
  font-size: var(--font-size-md);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary, #e0e0e0);
}

/* Hint badges */
.choice-card__hint {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 0.25rem;
}

.choice-card__hint--risky {
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.choice-card__hint--safe {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.choice-card__hint--diplomatic {
  background: rgba(59, 130, 246, 0.25);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.choice-card__hint--sneaky {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

.choice-card__hint--neutral {
  background: rgba(100, 116, 139, 0.25);
  color: #cbd5e1;
  border: 1px solid rgba(100, 116, 139, 0.4);
}

/* Position badge */
.choice-card__position {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: var(--text-secondary, #888);
}

/* Swipe indicators */
.choice-card__swipe-indicators {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.375rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.swipe-indicator {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.swipe-indicator--loaded {
  color: var(--accent-primary, #4a9eff);
  opacity: 1;
}

button.choice-card--story-option:hover .swipe-indicator {
  opacity: 1;
}

/* Loading state during variation fetch */
.choice-card--loading-variation {
  opacity: 0.7;
  pointer-events: none;
}

.choice-card--loading-variation::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-muted, #888);
  border-top-color: var(--accent-primary, #4a9eff);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Story mode carousel styling */
.character-carousel--story_option {
  border-color: rgba(99, 102, 241, 0.4);
}

.character-carousel--story_option .character-carousel__track {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* Story option cards should be wider for readability */
.character-carousel--story_option button.choice-card--story-option {
  min-width: 200px;
  max-width: 280px;
  flex: 1;
}

/* Responsive adjustments for story cards */
@media (max-width: 768px) {
  .character-carousel--story_option .character-carousel__track {
    flex-direction: column;
    align-items: stretch;
  }

  .character-carousel--story_option button.choice-card--story-option {
    min-width: unset;
    max-width: unset;
  }
}

/* --------------------------------------------------------------------------
 * Category Cards (Expandable categories in lobby)
 * -------------------------------------------------------------------------- */
button.choice-card--category {
  border-left: 3px solid var(--accent-primary, #9333ea);
  position: relative;
}

button.choice-card--category:hover {
  border-left-color: #a855f7;
}

button.choice-card--category.expanded {
  border-left-color: #22d3ee;
  background: rgba(34, 211, 238, 0.08);
}

.choice-card__expand-indicator {
  font-size: var(--font-size-xs);
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--text-muted, #888);
}

button.choice-card--category.expanded .choice-card__expand-indicator {
  transform: rotate(180deg);
  color: #22d3ee;
}

/* Children container (appears below the expanded category card) */
.category-children {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

button.choice-card--child {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button.choice-card--child:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-primary, #9333ea);
}

button.choice-card--child .choice-card__title {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}

button.choice-card--child .choice-card__description {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  margin-top: 0.25rem;
}
/**
 * Choice Cards — Import Hub
 * ===========================
 * Universal selection cards for AI carousel: targets, items, spells, and story.
 *
 * Decomposed into focused files under choice_cards/ for maintainability.


 */
/**
 * Choice Cards Extended — Check, Service, NPC & Quest Cards
 * ===========================================================
 * Check cards, service cards, NPC cards, quest cards, and dialogue cards.
 */


/* ==========================================================================
 * Extended Choice Card Types
 * New card variants for platform-wide selection panels
 * ========================================================================== */

/* --------------------------------------------------------------------------
 * Check Cards (Ability Checks, Saving Throws)
 * -------------------------------------------------------------------------- */
button.choice-card--check {
  border-left: 3px solid var(--color-accent-error, #ef4444);
}

button.choice-card--check:hover {
  border-left-color: var(--color-accent-error, #f87171);
}

button.choice-card--saving_throw {
  border-left-color: #f59e0b;
}

button.choice-card--saving_throw:hover {
  border-left-color: #fbbf24;
}

.choice-card__dc {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent-error, #ef4444);
  background: rgba(239, 68, 68, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.choice-card__ability {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #a0a0a0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.choice-card__skill {
  font-size: 0.7rem;
  color: var(--color-accent-primary, #60a5fa);
}

.choice-card__badge--advantage {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
}

.choice-card__badge--disadvantage {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

/* --------------------------------------------------------------------------
 * Service Cards (Shop Services)
 * -------------------------------------------------------------------------- */
button.choice-card--service {
  border-left: 3px solid #f59e0b;
}

button.choice-card--service:hover {
  border-left-color: #fbbf24;
  background: rgba(245, 158, 11, 0.1);
}

.choice-card__duration {
  font-size: 0.7rem;
  color: var(--color-text-secondary, #a0a0a0);
  display: flex;
  align-items: center;
  gap: 4px;
}

.choice-card__duration::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.2em;
  background-color: currentColor;
  mask-image: var(--icon-timer);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-timer);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__requirements {
  font-size: 0.65rem;
  color: var(--color-accent-warning, #f59e0b);
  font-style: italic;
}

/* --------------------------------------------------------------------------
 * NPC Cards
 * -------------------------------------------------------------------------- */
button.choice-card--npc {
  border-left: 3px solid var(--color-accent-primary, #60a5fa);
}

button.choice-card--npc:hover {
  border-left-color: var(--color-accent-primary, #93c5fd);
  background: rgba(96, 165, 250, 0.1);
}

/* NPC Disposition variants */
button.choice-card--disposition-friendly {
  border-left-color: #22c55e;
}

button.choice-card--disposition-friendly:hover {
  background: rgba(34, 197, 94, 0.1);
}

button.choice-card--disposition-neutral {
  border-left-color: #64748b;
}

button.choice-card--disposition-hostile {
  border-left-color: #ef4444;
}

button.choice-card--disposition-hostile:hover {
  background: rgba(239, 68, 68, 0.1);
}

.choice-card__role {
  font-size: 0.7rem;
  color: var(--color-accent-primary, #60a5fa);
  font-style: italic;
}

.choice-card__disposition {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.choice-card__disposition--friendly {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__disposition--neutral {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

.choice-card__disposition--hostile {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.choice-card__location {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
}

.choice-card__location::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: currentColor;
  mask-image: var(--icon-map-pin);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-map-pin);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__stats {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
 * Quest Cards
 * -------------------------------------------------------------------------- */
button.choice-card--quest {
  border-left: 3px solid var(--color-accent-primary, #60a5fa);
  min-height: 80px;
}

button.choice-card--quest:hover {
  border-left-color: var(--color-accent-primary, #93c5fd);
  background: rgba(96, 165, 250, 0.1);
}

/* Quest difficulty variants */
button.choice-card--difficulty-easy {
  border-left-color: #22c55e;
}

button.choice-card--difficulty-moderate {
  border-left-color: #f59e0b;
}

button.choice-card--difficulty-hard {
  border-left-color: #ef4444;
}

button.choice-card--difficulty-deadly {
  border-left-color: #7c3aed;
}

.choice-card__difficulty {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.choice-card__difficulty--easy {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__difficulty--moderate {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.choice-card__difficulty--hard {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.choice-card__difficulty--deadly {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.choice-card__reward {
  font-size: 0.7rem;
  color: #fbbf24;
  display: flex;
  align-items: center;
  gap: 4px;
}

.choice-card__reward::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.2em;
  background-color: currentColor;
  mask-image: var(--icon-trophy);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-trophy);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__giver {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.choice-card__status {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.choice-card__status--available {
  background: rgba(96, 165, 250, 0.2);
  color: #60a5fa;
}

.choice-card__status--active {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__status--completed {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
}

.choice-card__progress {
  width: 100%;
  height: 6px;
  background: var(--color-bg-tertiary, #2a2a4a);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}

.choice-card__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.choice-card__progress-text {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.55rem;
  color: var(--color-text-primary, #e0e0e0);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
 * Dialogue Cards
 * -------------------------------------------------------------------------- */
button.choice-card--dialogue {
  border-left: 3px solid var(--color-accent-primary, #60a5fa);
  text-align: left;
}

button.choice-card--dialogue:hover {
  border-left-color: var(--color-accent-primary, #93c5fd);
  background: rgba(96, 165, 250, 0.1);
}

/* Dialogue tone variants */
button.choice-card--tone-friendly {
  border-left-color: #22c55e;
}

button.choice-card--tone-friendly:hover {
  background: rgba(34, 197, 94, 0.1);
}

button.choice-card--tone-aggressive {
  border-left-color: #ef4444;
}

button.choice-card--tone-aggressive:hover {
  background: rgba(239, 68, 68, 0.1);
}

button.choice-card--tone-deceptive {
  border-left-color: #a78bfa;
}

button.choice-card--tone-deceptive:hover {
  background: rgba(167, 139, 250, 0.1);
}

button.choice-card--tone-inquisitive {
  border-left-color: #22d3ee;
}

button.choice-card--tone-inquisitive:hover {
  background: rgba(34, 211, 238, 0.1);
}

.choice-card__tone {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.choice-card__tone--friendly {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__tone--aggressive {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.choice-card__tone--deceptive {
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
}

.choice-card__tone--inquisitive {
  background: rgba(34, 211, 238, 0.2);
  color: #22d3ee;
}

.choice-card__skill-check {
  font-size: 0.65rem;
  color: var(--color-accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.choice-card__skill-check::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__consequence {
  font-size: 0.6rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  opacity: 0.8;
}
/**
 * Choice Cards Extended — Creation, Location, Action & HP Cards
 * ==============================================================
 * Creation cards, location cards, action cards, HP bar, and responsive.
 */

/* --------------------------------------------------------------------------
 * Creation Cards (Race, Class, Background, etc.)
 * -------------------------------------------------------------------------- */
button.choice-card--creation {
  border-left: 3px solid var(--color-accent-success, #22c55e);
  min-height: 70px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

button.choice-card--creation:hover {
  border-left-color: var(--color-accent-success, #4ade80);
  background: rgba(34, 197, 94, 0.1);
}

/* Creation type-specific colors */
button.choice-card--race {
  border-left-color: #f59e0b;
}

button.choice-card--race:hover {
  background: rgba(245, 158, 11, 0.1);
}

button.choice-card--class {
  border-left-color: #ef4444;
}

button.choice-card--class:hover {
  background: rgba(239, 68, 68, 0.1);
}

button.choice-card--background {
  border-left-color: #8b5cf6;
}

button.choice-card--background:hover {
  background: rgba(139, 92, 246, 0.1);
}

button.choice-card--alignment {
  border-left-color: #64748b;
}

button.choice-card--skill {
  border-left-color: #22d3ee;
}

button.choice-card--equipment {
  border-left-color: #fbbf24;
}

.choice-card__source {
  font-size: 0.6rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.choice-card__traits,
.choice-card__bonuses,
.choice-card__abilities,
.choice-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.choice-card__trait,
.choice-card__feature {
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-bg-tertiary, #2a2a4a);
  color: var(--color-text-secondary, #a0a0a0);
}

.choice-card__trait--more {
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.choice-card__bonus {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__ability-pill {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* --------------------------------------------------------------------------
 * Location Cards
 * -------------------------------------------------------------------------- */
button.choice-card--location {
  border-left: 3px solid var(--color-accent-primary, #60a5fa);
}

button.choice-card--location:hover {
  border-left-color: var(--color-accent-primary, #93c5fd);
  background: rgba(96, 165, 250, 0.1);
}

/* Location danger level variants */
button.choice-card--danger-safe {
  border-left-color: #22c55e;
}

button.choice-card--danger-low {
  border-left-color: #84cc16;
}

button.choice-card--danger-moderate {
  border-left-color: #f59e0b;
}

button.choice-card--danger-high {
  border-left-color: #ef4444;
}

button.choice-card--danger-deadly {
  border-left-color: #7c3aed;
}

button.choice-card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.choice-card__danger {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.choice-card__danger--safe {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.choice-card__danger--low {
  background: rgba(132, 204, 22, 0.2);
  color: #84cc16;
}

.choice-card__danger--moderate {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.choice-card__danger--high {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.choice-card__danger--deadly {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

.choice-card__distance {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
}

.choice-card__distance::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: currentColor;
  mask-image: var(--icon-map-pin);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-map-pin);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__badge--undiscovered {
  background: rgba(100, 116, 139, 0.3);
  color: #94a3b8;
  font-size: 0.8rem;
}

.choice-card__badge--locked {
  background: rgba(239, 68, 68, 0.2);
  font-size: 0.7rem;
}

/* --------------------------------------------------------------------------
 * Action Cards (Combat Actions, Abilities)
 * -------------------------------------------------------------------------- */
button.choice-card--action {
  border-left: 3px solid var(--color-accent-primary, #60a5fa);
}

button.choice-card--action:hover {
  border-left-color: var(--color-accent-primary, #93c5fd);
  background: rgba(96, 165, 250, 0.1);
}

/* Action type variants */
button.choice-card--action-type-action {
  border-left-color: #60a5fa;
}

button.choice-card--action-type-bonus_action {
  border-left-color: #f59e0b;
}

button.choice-card--action-type-reaction {
  border-left-color: #a78bfa;
}

button.choice-card--action-type-movement {
  border-left-color: #22c55e;
}

button.choice-card--action-type-free {
  border-left-color: #94a3b8;
}

.choice-card__action-type {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  background: var(--color-bg-tertiary, #2a2a4a);
  color: var(--color-text-secondary, #a0a0a0);
}

.choice-card__uses {
  font-size: 0.65rem;
  color: var(--color-accent-success, #22c55e);
}

.choice-card__cooldown {
  font-size: 0.6rem;
  color: var(--color-text-muted, #6b7280);
}

.choice-card__cooldown::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background-color: currentColor;
  mask-image: var(--icon-timer);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-timer);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.choice-card__resource {
  font-size: 0.6rem;
  color: var(--color-accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
 * HP Bar (shared component for target/npc cards)
 * -------------------------------------------------------------------------- */
.choice-card__hp-bar {
  width: 100%;
  height: 6px;
  background: var(--color-bg-tertiary, #2a2a4a);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.choice-card__hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.choice-card__hp-fill--healthy {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.choice-card__hp-fill--wounded {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.choice-card__hp-fill--critical {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.choice-card__hp-text {
  font-size: 0.55rem;
  color: var(--color-text-secondary, #a0a0a0);
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
 * Responsive adjustments for new card types
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  button.choice-card--creation,
  button.choice-card--quest,
  button.choice-card--npc {
    min-height: unset;
    padding: 10px 12px;
  }

  .choice-card__traits,
  .choice-card__bonuses,
  .choice-card__abilities,
  .choice-card__features {
    display: none; /* Hide pills on mobile for cleaner UI */
  }

  .choice-card__progress {
    height: 4px;
  }
}


/**
 * Choice Cards Extended — Import Hub
 * =====================================
 * Extended choice card types for checks, NPCs, quests, and combat.
 *
 * Decomposed into focused files under choice_cards_extended/ for maintainability.


 */
/* Character Sheet Panel (Overview during creation)
 * ========================================================================== */
/* Character Overview Styles */
.character-overview {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

.co-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Progress Bar */
.co-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-progress-bar {
  height: 8px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 4px;
  overflow: hidden;
}

.co-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary, #4a9eff), var(--accent-success, #4ade80));
  transition: width 0.3s ease;
}

.co-progress-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  text-align: center;
}

.co-progress-stages {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
}

.co-stage {
  color: var(--text-muted, #888);
  padding: 2px 6px;
  border-radius: 3px;
}

.co-stage--done {
  color: var(--accent-success, #4ade80);
}

.co-stage--active {
  color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

/* Choices List */
.co-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.co-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  font-size: var(--font-size-base);
}

.co-choice--complete {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.05);
}

.co-choice--active {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
  border-left: 3px solid var(--accent-primary, #4a9eff);
}

.co-choice--active .co-choice-icon {
  color: var(--accent-primary, #4a9eff);
}

.co-choice--active .co-choice-label {
  color: var(--accent-primary, #4a9eff);
}

.co-active-indicator {
  color: var(--accent-primary, #4a9eff);
  font-weight: bold;
}

/* Pending rows are redundant with the horizontal co-progress-stages strip
   above — hide them entirely so the overview shows only the active step
   plus already-completed selections (#2637-followup). */
.co-choice--pending {
  display: none;
}

.co-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-secondary, #888);
}

.co-choice--complete .co-choice-icon {
  color: var(--accent-success, #4ade80);
}

.co-choice-label {
  font-weight: 500;
  min-width: 80px;
}

.co-choice-value {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #888);
}

.co-choice--complete .co-choice-value {
  color: var(--text-primary, #e0e0e0);
}

.co-check {
  display: flex;
  color: var(--accent-success, #4ade80);
}

.co-pending {
  font-style: italic;
  color: var(--text-muted, #888);
}

.co-svg {
  width: 16px;
  height: 16px;
}

.co-svg--check {
  width: 14px;
  height: 14px;
}

/* Hints Section */
.co-hints {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: 6px;
  margin-top: 8px;
}

.co-hint-icon {
  display: flex;
  color: var(--accent-primary, #4a9eff);
  flex-shrink: 0;
}

.co-hint-text {
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--text-primary, #e0e0e0);
}

/* Tab styling for creation phase */
.sp-tab-btn:disabled {
  cursor: default;
  opacity: 0.8;
}

/* Mobile breakpoints
 * #2984: Full mobile layout pass — previously only font-size was tweaked,
 * which left horizontal overflow + tiny touch targets on 360-480px viewports.
 * Goals:
 *   (a) Stats readable (≥12px) — clamp font shrinks.
 *   (b) No horizontal scroll on 360px — container max-width 100%, stages wrap.
 *   (c) Touch targets ≥44×44 — tab buttons and interactive surfaces.
 *   (d) Content readable without squish — vertical stack on narrow screens.
 */
@media (max-width: 767px) {
  .character-overview,
  .character-overview-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .co-container {
    padding: 12px;
  }

  .co-progress-stages {
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
  }

  .co-choice {
    font-size: 0.9em;
    min-height: 44px;
  }

  .co-choice-value {
    flex-wrap: wrap;
    min-width: 0;
    word-break: break-word;
  }

  /* Tab buttons are the primary interactive surface into this panel —
   * ensure WCAG 2.5.5 / iOS HIG 44pt touch minimum. */
  .sp-tab-btn {
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  .co-container {
    padding: 10px;
    gap: 12px;
  }

  /* Clamp floor at 12px so stat labels stay readable on small screens
   * (0.85em × 14px base ≈ 11.9px; raise floor explicitly). */
  .co-choice {
    font-size: clamp(12px, 0.85em, 14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .co-choice-label {
    min-width: 0;
  }

  .co-choice-value {
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .co-progress-stages {
    font-size: clamp(11px, var(--font-size-xs), 12px);
  }

  .co-hints {
    padding: 10px;
  }

  .co-hint-text {
    font-size: clamp(12px, var(--font-size-base), 14px);
  }
}

@media (max-width: 399px) {
  .co-container {
    padding: 8px;
    gap: 10px;
  }

  /* Keep 12px floor even at the tightest viewport. */
  .co-choice {
    font-size: clamp(12px, 0.8em, 13px);
    padding: 8px;
  }
}
/* Game Log Panel
 * ========================================================================== */
/* Game Log Panel Styles */
.game-log-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

/* Filter Bar */
.gl-filters {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--bg-secondary, #252545);
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  flex-shrink: 0;
}

.gl-filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary, #888);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
}

.gl-filter-btn:hover {
  background: var(--bg-hover, #2a2a4a);
  color: var(--text-primary, #e0e0e0);
}

.gl-filter-btn.gl-filter-active {
  background: var(--accent-primary, #4a9eff);
  color: #fff;
  border-color: var(--accent-primary, #4a9eff);
}

.gl-filter-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #4a9eff);
  outline-offset: 2px;
}

.gl-filter-icon {
  width: 12px;
  height: 12px;
}

/* Mobile touch target sizing for game log filters */
@media (max-width: 1024px) {
  .gl-filter-btn {
    min-height: 44px;  /* WCAG minimum */
    min-width: 44px;  /* Square touch target */
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }
}

/* Entries Container */
.gl-entries {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scroll-behavior: smooth;
}

/* Empty State */
.gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted, #888);
  padding: 24px;
}

.gl-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.gl-empty p {
  font-size: var(--font-size-base);
  margin: 0;
}

/* Log Entry */
.gl-entry {
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  animation: glEntrySlide 0.2s ease-out;
}

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

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

/* Entry Header */
.gl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.gl-svg-icon {
  width: 18px;
  height: 18px;
}

.gl-result {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent-success, #4ade80);
}

.gl-time {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

/* Entry Body */
.gl-body {
  padding-left: 32px;
}

.gl-message {
  color: var(--text-primary, #e0e0e0);
  line-height: 1.4;
}

/* Details Section */
.gl-details {
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
}

.gl-details summary {
  cursor: pointer;
  color: var(--accent-primary, #4a9eff);
}

.gl-details summary:hover {
  text-decoration: underline;
}

.gl-dice, .gl-modifier, .gl-detail-content {
  padding: 4px 0;
  font-family: var(--font-mono, monospace);
}

/* Advantage/Disadvantage dice display */
.gl-dice-adv-dis {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gl-dice-label {
  font-weight: bold;
  color: var(--color-text-secondary, #888);
  font-size: 0.9em;
}

.gl-dice-kept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.1em;
}

.gl-dice-kept.gl-adv {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary, #98c379);
  border: 1px solid rgba(152, 195, 121, 0.4);
}

.gl-dice-kept.gl-dis {
  background: rgba(224, 108, 117, 0.2);
  color: var(--color-accent-error, #e06c75);
  border: 1px solid rgba(224, 108, 117, 0.4);
}

.gl-dice-discarded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.95em;
  color: var(--color-text-muted, #888);
  background: rgba(128, 128, 128, 0.1);
  text-decoration: line-through;
  opacity: 0.6;
}

/* Entry Type Variations */
.gl-entry.dice_roll {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.gl-entry.dice_roll .gl-icon {
  color: var(--accent-success, #4ade80);
}

.gl-entry.combat {
  border-left: 3px solid var(--accent-danger, #f87171);
}

.gl-entry.combat .gl-icon {
  color: var(--accent-danger, #f87171);
}

.gl-entry.inventory {
  border-left: 3px solid var(--accent-warning, #fbbf24);
}

.gl-entry.inventory .gl-icon {
  color: var(--accent-warning, #fbbf24);
}

.gl-entry.character {
  border-left: 3px solid var(--accent-info, #60a5fa);
}

.gl-entry.character .gl-icon {
  color: var(--accent-info, #60a5fa);
}

.gl-entry.general {
  border-left: 3px solid var(--border-color, #3a3a5a);
}

/* Scrollbar */
.gl-entries::-webkit-scrollbar {
  width: 6px;
}

.gl-entries::-webkit-scrollbar-track {
  background: transparent;
}

.gl-entries::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

.gl-entries::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #888);
}
/* ==========================================================================
 * Panel Highlight Animations (AI DM Panel Tools)
 * Used by highlight_panel tool to draw player attention
 * ========================================================================== */

/* Pulse Effect - Pulsing border animation */
.split-panel--highlight-pulse {
  animation: panelPulse 0.6s ease-in-out 3;
}

@keyframes panelPulse {
  0%, 100% {
    border-color: var(--accent-primary, #4a9eff);
    box-shadow: 0 0 0 0 rgba(74, 158, 255, 0);
  }
  50% {
    border-color: var(--accent-primary, #4a9eff);
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.3);
  }
}

/* Glow Effect - Soft glowing aura */
.split-panel--highlight-glow {
  animation: panelGlow 1s ease-in-out infinite alternate;
}

@keyframes panelGlow {
  from {
    box-shadow:
      0 0 5px rgba(74, 158, 255, 0.3),
      0 0 10px rgba(74, 158, 255, 0.2),
      0 0 15px rgba(74, 158, 255, 0.1);
  }
  to {
    box-shadow:
      0 0 10px rgba(74, 158, 255, 0.5),
      0 0 20px rgba(74, 158, 255, 0.3),
      0 0 30px rgba(74, 158, 255, 0.2);
  }
}

/* Border Effect - Quick border flash */
.split-panel--highlight-border {
  animation: panelBorderFlash 0.3s ease-out 2;
}

@keyframes panelBorderFlash {
  0% {
    border-color: var(--border-color, #3a3a5a);
  }
  50% {
    border-color: var(--accent-warning, #fbbf24);
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.3);
  }
  100% {
    border-color: var(--accent-warning, #fbbf24);
  }
}

/* Shake Effect - Attention-grabbing shake */
.split-panel--highlight-shake {
  animation: panelShake 0.4s ease-in-out 2;
}

@keyframes panelShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-4px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(4px);
  }
}

/* Combat Effect - Red pulsing for combat alerts */
.split-panel--highlight-combat {
  animation: panelCombat 0.5s ease-in-out 3;
}

@keyframes panelCombat {
  0%, 100% {
    border-color: var(--accent-danger, #f87171);
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
  }
  50% {
    border-color: var(--accent-danger, #f87171);
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.4);
  }
}

/* Success Effect - Green glow for positive events */
.split-panel--highlight-success {
  animation: panelSuccess 0.6s ease-in-out 2;
}

@keyframes panelSuccess {
  0%, 100% {
    border-color: var(--accent-success, #4ade80);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
  50% {
    border-color: var(--accent-success, #4ade80);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  }
}

/* Update Effect - Subtle flash for data synchronization */
.split-panel--highlight-update {
  animation: panelUpdate 0.4s ease-out 1;
}

@keyframes panelUpdate {
  0% {
    background-color: inherit;
  }
  30% {
    background-color: rgba(74, 158, 255, 0.08);
  }
  100% {
    background-color: inherit;
  }
}

/* Update Badge - Shows in panel header when data updated */
.split-panel__update-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--accent-primary, #4a9eff);
  border-radius: 50%;
  animation: updateBadgePulse 0.6s ease-out 2;
  pointer-events: none;
  z-index: var(--z-sticky);
}

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

/* Panel Tooltip - Floating message from AI DM */
.split-panel__tooltip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: 8px 12px;
  background: var(--bg-elevated, #2a2a4a);
  border: 1px solid var(--accent-primary, #4a9eff);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-floating);
  animation: tooltipFadeIn 0.2s ease-out;
  pointer-events: none;
}

.split-panel__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-primary, #4a9eff);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-90%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%);
  }
}

/* Tooltip variants */
.split-panel__tooltip--warning {
  border-color: var(--accent-warning, #fbbf24);
}

.split-panel__tooltip--warning::after {
  border-top-color: var(--accent-warning, #fbbf24);
}

.split-panel__tooltip--danger {
  border-color: var(--accent-danger, #f87171);
}

.split-panel__tooltip--danger::after {
  border-top-color: var(--accent-danger, #f87171);
}

.split-panel__tooltip--success {
  border-color: var(--accent-success, #4ade80);
}

.split-panel__tooltip--success::after {
  border-top-color: var(--accent-success, #4ade80);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .split-panel--highlight-pulse,
  .split-panel--highlight-glow,
  .split-panel--highlight-border,
  .split-panel--highlight-shake,
  .split-panel--highlight-combat,
  .split-panel--highlight-success {
    animation: none;
  }

  .split-panel--highlight-pulse,
  .split-panel--highlight-glow {
    box-shadow: 0 0 0 2px var(--accent-primary, #4a9eff);
  }

  .split-panel--highlight-border {
    border-color: var(--accent-warning, #fbbf24);
  }

  .split-panel--highlight-combat {
    border-color: var(--accent-danger, #f87171);
  }

  .split-panel--highlight-success {
    border-color: var(--accent-success, #4ade80);
  }
}

/* ==========================================================================
 * Creation Pane Highlight Support
 * Ensure highlight animations work on character creation panes
 * ========================================================================== */

.creation-pane.split-panel--highlight-pulse,
.creation-pane.split-panel--highlight-glow,
.creation-pane.split-panel--highlight-border,
.creation-pane.split-panel--highlight-shake {
  animation-duration: 1.5s;
  animation-iteration-count: 2;
}
/* ==========================================================================
 * Character Creation Accordion (Panel-First UX)
 * Collapsible sections for race, class, background, etc.
 * ========================================================================== */

.sp-creation-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

/* Individual accordion section */
.sp-creation-section {
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-creation-section:hover {
  border-color: var(--accent-primary, #4a9eff);
}

/* Section states */
.sp-creation-section.completed {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.sp-creation-section.active {
  border-color: var(--accent-primary, #4a9eff);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2);
}

.sp-creation-section.locked {
  opacity: 0.5;
  pointer-events: none;
}

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

/* Section header (always visible) */
.sp-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sp-section-header:hover {
  background: var(--bg-hover, #2a2a4a);
}

.sp-section-icon {
  font-size: var(--font-size-xl);
  width: 24px;
  text-align: center;
}

.sp-section-title {
  flex: 1;
  font-weight: 500;
  font-size: var(--font-size-base);
}

.sp-section-value {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-creation-section.completed .sp-section-value {
  color: var(--accent-success, #4ade80);
}

.sp-section-toggle {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  transition: transform 0.2s ease;
}

.sp-creation-section.expanded .sp-section-toggle {
  transform: rotate(180deg);
}

.sp-section-check {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-md);
}

/* Section options container (collapsible) */
.sp-section-options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.sp-creation-section.expanded .sp-section-options {
  /* Expand to full natural height — parent panel handles scrolling.
     Removes nested scroll that trapped mouse wheel events (#1343). */
  max-height: none;
  overflow-y: visible;
  border-top-color: var(--border-color, #3a3a5a);
}

/* Options grid */
.sp-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px;
}

/* Option card */
.sp-option-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.sp-option-card:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.sp-option-card.selected {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.sp-option-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: 6px;
}

.sp-option-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 2px;
}

.sp-option-preview {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  line-height: 1.3;
}

/* Option list (alternative to grid) */
.sp-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.sp-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sp-option-row:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.sp-option-row.selected {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.sp-option-row-info {
  flex: 1;
  min-width: 0;
}

.sp-option-row-name {
  font-size: var(--font-size-base);
  font-weight: 500;
}

.sp-option-row-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-option-row-check {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-lg);
}

/* Scrollbar for options */
.sp-section-options::-webkit-scrollbar {
  width: 6px;
}

.sp-section-options::-webkit-scrollbar-track {
  background: transparent;
}

.sp-section-options::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

/* Create Character Button (shown when complete) */
.sp-create-character-section {
  margin-top: 12px;
  padding: 12px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid var(--accent-success, #4ade80);
  border-radius: 6px;
  text-align: center;
}

.sp-create-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--accent-success, #4ade80);
  border: none;
  border-radius: 6px;
  color: #1a1a2e;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-create-btn:hover {
  background: #5be890;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}

.sp-create-btn:active {
  transform: translateY(0);
}

/* Reduced motion for accordion */
@media (prefers-reduced-motion: reduce) {
  .sp-section-options {
    transition: none;
  }

  .sp-section-toggle {
    transition: none;
  }
}

/* ========================================
   Cumulative Character Preview (Phase 6)
   ======================================== */

.cp-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  font-size: var(--font-size-base);
}

.cp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
}

.cp-empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: 12px;
  opacity: 0.5;
}

.cp-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, #333);
}

.cp-name {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-identity {
  color: var(--text-secondary, #aaa);
  margin-top: 4px;
}

.cp-placeholder {
  color: var(--text-muted, #888);
  font-style: italic;
}

.cp-level {
  color: var(--accent-primary, #60a5fa);
  margin-left: 8px;
}

.cp-section {
  background: var(--bg-elevated, #1a1a2e);
  border-radius: 6px;
  padding: 10px;
}

.cp-section-title {
  font-weight: bold;
  color: var(--accent-primary, #60a5fa);
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.cp-ability {
  text-align: center;
  padding: 6px;
  background: var(--bg-surface, #252540);
  border-radius: 4px;
  position: relative;
}

.cp-ability--boosted {
  border: 1px solid var(--accent-success, #4ade80);
}

.cp-ability-name {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

.cp-ability-score {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-ability-mod {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
}

.cp-ability-bonus {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: var(--font-size-xs);
  color: var(--accent-success, #4ade80);
  font-weight: bold;
}

.cp-ability-source {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: var(--accent-success, #4ade80);
  text-align: center;
}

.cp-abilities-pending {
  text-align: center;
  padding: 8px;
}

/* Vitals */
.cp-vitals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cp-vital {
  text-align: center;
}

.cp-vital-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

.cp-vital-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-vital-note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

/* Proficiencies */
.cp-prof-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
}

.cp-prof-label {
  color: var(--text-muted, #888);
  min-width: 60px;
}

.cp-prof-value {
  color: var(--text-primary, #e0e0e0);
}

/* Traits & Features (#2941)
   -----------------------------------------------------------
   `.cp-traits` / `.cp-features` are the list containers emitted by
   creation_preview_controller.js for the dynamically-rendered Traits (race)
   and Features (class level 1) blocks. The per-item `.cp-trait` / `.cp-feature`
   styles below are shared so both blocks render identically. */
.cp-traits, .cp-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-trait, .cp-feature {
  margin-bottom: 6px;
  padding: 4px 6px;
  background: var(--bg-surface, #252540);
  border-radius: 4px;
}

.cp-trait-name, .cp-feature-name {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
  display: block;
  font-size: var(--font-size-sm);
}

.cp-trait-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-top: 2px;
  line-height: 1.4;
}

/* Racial bonus "source" badge on ability chips (#2941).
   The base +N number is already styled by `.preview-ability__bonus` in
   organisms/_creation_preview.css; here we style just the inline source label
   (e.g. "Racial") that explains *why* the score is boosted. */
.preview-ability__bonus-source {
  display: inline-block;
  margin-left: 2px;
  font-size: var(--font-size-2xs, 0.7rem);
  font-weight: 400;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Equipment */
.cp-equipment-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
}

/* Form Mode: Create Character Button */
.cp-create-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle, #333);
  background: var(--bg-elevated, #252540);
}

.create-character-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bg-base, #0a0a0f);
  background: linear-gradient(135deg, var(--accent-success, #34d399) 0%, var(--accent-primary, #60a5fa) 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
}

.create-character-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(52, 211, 153, 0.4);
}

.create-character-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(52, 211, 153, 0.2);
}

.create-character-btn .btn--icon {
  font-size: var(--font-size-xl);
}

.create-character-btn .btn-text {
  flex: 1;
  text-align: center;
}

.create-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  text-align: center;
  font-style: italic;
}

/**
 * Creation Layout — Pane Grid
 * ============================
 * Six-pane grid layout, narrative/selection/preview/abilities panes, and responsive mobile.
 */

/* ============================================
   6-PANE CHARACTER CREATION GRID
   ============================================
   tmux-style grid layout for character creation.
   Replaces the split layout during character creation phase.
   Layout:
   ┌─────────────────┬─────────────────┬─────────────────┐
   │  AI/Narrative   │  Selection Pane │ Character Prev  │
   │  (DM dialogue)  │ Race→Class→Bg   │ (live preview)  │
   │                 │  (dynamic)      │                 │
   ├─────────────────┼─────────────────┼─────────────────┤
   │ Abilities/Skills│    Equipment    │     Spells      │
   │  (point buy,    │  (choices grid) │  (cantrips +    │
   │   skill picks)  │                 │   known spells) │
   └─────────────────┴─────────────────┴─────────────────┘
*/

.creation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
  width: 100%;
  padding: 4px;
  background: var(--bg-base, #0a0a0f);
  box-sizing: border-box;
}

.creation-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #1a1a2e);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  overflow: hidden;
  min-height: 0; /* Allow shrinking in grid */
}

.creation-pane .pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-elevated, #252540);
  border-bottom: 1px solid var(--border-subtle, #333);
  flex-shrink: 0;
}

.creation-pane .pane-title {
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary, #60a5fa);
}

.creation-pane .pane-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--accent-primary, #60a5fa);
  color: var(--bg-base, #0a0a0f);
  border-radius: 10px;
  font-weight: 600;
}

.creation-pane .pane-badge:empty {
  display: none;
}

.creation-pane .pane-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0; /* Allow shrinking */
}

.creation-pane .pane-placeholder {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 20px;
}

/* Error fallback UI for creation pane render failures */
.creation-pane .pane-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--error-color, #cc6666);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 20px;
}

.creation-pane .pane-error .error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error-bg, rgba(204, 102, 102, 0.2));
  color: var(--error-color, #cc6666);
  font-weight: bold;
  font-size: var(--font-size-sm);
}

.creation-pane .pane-error .error-text {
  font-style: italic;
}

/* Narrative Pane - DM dialogue and input */
.pane-narrative {
  display: flex;
  flex-direction: column;
}

.pane-narrative .pane-content {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pane-narrative .narrative-box {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pane-narrative .narrative-output {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.pane-narrative .narrative-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle, #333);
  padding: 8px;
  background: var(--bg-elevated, #252540);
}

/* Selection Pane - Race/Class/Background options */
.pane-selection .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 8px;
}

/* Option cards for race/class/background selection */
.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--bg-elevated, #252540);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: center;
  min-height: 60px;
}

.option-card:hover {
  background: var(--bg-hover, #2a2a45);
  border-color: var(--accent-primary, #60a5fa);
  transform: translateY(-1px);
}

.option-card.selected {
  background: var(--accent-primary-dim, #1e3a5f);
  border-color: var(--accent-primary, #60a5fa);
}

.option-card .option-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.option-card .option-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-top: 4px;
}

/* Preview Pane - Live character sheet */
.pane-preview .pane-content {
  padding: 8px;
}

/* Abilities Pane - Point buy and skills */
.pane-abilities .pane-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

/* Equipment Pane */
.pane-equipment .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  align-content: start;
  padding: 8px;
}

/* Spells Pane */
.pane-spells .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  align-content: start;
  padding: 8px;
}

/* Complete badge shown when core selections are done */
.selection-complete-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.selection-complete-badge .checkmark {
  font-size: var(--font-size-4xl);
  color: var(--accent-success, #4ade80);
  margin-bottom: 8px;
}

.selection-complete-badge .complete-text {
  font-size: var(--font-size-md);
  color: var(--text-primary, #e0e0e0);
  font-weight: 600;
}

.selection-complete-badge .selections-summary {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  margin-top: 8px;
}

/* Responsive: Stack on narrower screens */
@media (max-width: 1100px) {
  .creation-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
}

/* Mobile: Single column with prioritized layout */
/* #4324: was 700px (drift); canonical mobile max is 767px */
@media (max-width: 767px) {
  .creation-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;  /* Allow panes to size naturally */
    gap: 8px;  /* Increased spacing for touch targets */
    padding: 8px;
  }

  /* Narrative pane - primary (taller for conversation) */
  .pane-narrative {
    min-height: 300px;
    max-height: 50vh;  /* Don't dominate entire screen */
  }

  /* Selection pane - important (expandable) */
  .pane-selection {
    min-height: 200px;
  }

  /* Preview pane - compact summary */
  .pane-preview {
    min-height: 150px;
    max-height: 200px;
  }

  /* Secondary panes - collapsed by default, expandable */
  .pane-abilities,
  .pane-equipment,
  .pane-spells {
    min-height: 60px;  /* Just show header when collapsed */
  }

  /* Make pane headers tappable to expand/collapse on mobile */
  .creation-pane .pane-header {
    cursor: pointer;
    padding: 12px 16px;  /* Larger touch target */
    -webkit-user-select: none;
    user-select: none;
  }

  .creation-pane .pane-header::after {
    content: '▼';
    font-size: var(--font-size-xs);
    color: var(--text-muted, #888);
    margin-left: auto;
  }

  /* Collapsed state for secondary panes */
  .creation-pane.collapsed .pane-content {
    display: none;
  }

  .creation-pane.collapsed .pane-header::after {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    background-color: currentColor;
    mask-image: var(--icon-play);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--icon-play);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  /* Increase touch targets for mobile */
  .creation-pane .chip,
  .creation-pane button {
    min-height: 44px;  /* WCAG minimum touch target */
    padding: 12px 16px;
  }

  /* Stack ability score controls vertically */
  .ability-row {
    flex-direction: column;
    gap: 8px;
  }
}

/**
 * Creation Layout — Two-Column Layout
 * ======================================
 * Simple two-column layout with narrative and character sheet side-by-side.
 */


/* ==========================================================================
 * Simple Two-Column Creation Layout
 * Replaces the 6-pane grid with narrative + character sheet side-by-side
 * ========================================================================== */

.creation-layout {
  display: grid;
  grid-template-columns: 1fr 320px 280px;
  gap: 4px;
  height: 100%;
  padding: 4px;
  background: var(--bg-base, #0a0a14);
}

.creation-narrative {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.creation-narrative .narrative-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.creation-sheet {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border-subtle, #2a2a3a);
  overflow: hidden;
}

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

.creation-log {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--border-subtle, #2a2a3a);
  overflow: hidden;
}

.creation-log .game-log-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Responsive: Stack on narrower screens */
@media (max-width: 1024px) {
  .creation-layout {
    grid-template-columns: 1fr 280px;
    grid-template-rows: 1fr auto;
  }

  .creation-log {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 1px solid var(--border-subtle, #2a2a3a);
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .creation-layout {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto auto;
  }

  .creation-sheet {
    border-left: none;
    border-top: 1px solid var(--border-subtle, #2a2a3a);
    max-height: 40vh;
  }

  .creation-log {
    max-height: 30vh;
  }
}

/**
 * Creation Layout — Preview Panel
 * ==================================
 * Dynamic character sheet preview during creation, preview sections.
 */

/* ==========================================================================
 * Creation Preview - Dynamic Character Sheet during creation
 * ========================================================================== */

.creation-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.creation-preview-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle, #2a2a3a);
  background: var(--bg-secondary, #1a1a2e);
}

.creation-preview-title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.creation-preview-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.creation-preview-empty {
  text-align: center;
  padding: 24px 16px;
}

.creation-preview-empty .cs-empty-text {
  margin-bottom: 16px;
  color: var(--text-muted, #888);
}

.creation-preview-hints {
  text-align: left;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  padding: 12px 16px;
}

.creation-preview-hints p {
  margin: 0 0 8px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
}

.creation-preview-hints ul {
  margin: 0;
  padding-left: 20px;
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
}

.creation-preview-hints li {
  margin-bottom: 4px;
}

/* Character Preview Sections */
.cp-identity {
  text-align: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #2a2a3a);
}

.cp-name {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 4px;
}

.cp-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-secondary, #aaa);
}

.cp-vitals {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-subtle, #2a2a3a);
}

.cp-vital {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.cp-vital-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  text-transform: uppercase;
}

.cp-vital-value {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.cp-section-header {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cp-abilities,
.cp-skills,
.cp-equipment,
.cp-spells {
  margin-bottom: 16px;
}

.cp-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.cp-stat-abbr {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  text-transform: uppercase;
}

.cp-stat-score {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.cp-stat-mod {
  font-size: var(--font-size-sm);
  color: var(--accent-primary, #4a9eff);
}

.cp-skills-list,
.cp-equipment-list,
.cp-spells-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cp-skill-tag,
.cp-equipment-tag,
.cp-spell-tag {
  padding: 4px 8px;
  font-size: var(--font-size-sm);
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 4px;
  color: var(--text-secondary, #aaa);
}

/**
 * Creation Layout — Import Hub
 * ==============================
 * Character creation pane grid, two-column layout, and live preview panel.
 *
 * Decomposed into focused files under creation_layout/ for maintainability.



 */
/**
 * Creation Masonry — Base Layout
 * ================================
 * Masonry card layout for character creation options.
 */

/* ============================================
   MASONRY CARD LAYOUT
   Pure CSS masonry for selection options
   Replaces quick actions with optimistic UI cards
   ============================================ */

.masonry-options {
  column-count: 3;
  column-gap: 12px;
  padding: 12px;
}

.masonry-card {
  break-inside: avoid;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}

.masonry-card:hover {
  background: 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);
}

.masonry-card:active {
  transform: translateY(0);
}

/* Selected state — matches creation-card (accent border, subtle bg) */
.masonry-card--selected {
  border-color: var(--accent-color, #4f46e5);
  background: rgba(79, 70, 229, 0.15);
}

.masonry-card--selected::before {
  content: '\2713';
  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;
}

/* Confirmed state — server has acknowledged the selection (#3644 T2.2).
 * Applied after creation_state_updated confirms the choice. Green border
 * signals success; the badge reads "Confirmed" and a subtle drag hint
 * beneath it guides the player to drag onto the character sheet.
 * Using ::after for the badge so ::before remains available for the
 * existing checkmark (masonry-card--selected shares this element). */
.masonry-card--confirmed {
  border-color: var(--success-color, #10b981);
  background: rgba(16, 185, 129, 0.08);
  /* Ensure the confirmed badge doesn't clip */
  overflow: visible;
}

.masonry-card--confirmed::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md, 8px);
  border: 2px solid var(--success-color, #10b981);
  pointer-events: none;
  animation: confirmed-pulse 2s ease-in-out 1;
}

@keyframes confirmed-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .masonry-card--confirmed::after {
    animation: none;
  }
}

/* Confirmed badge label — appears at top-right, replaces the generic checkmark */
.masonry-card--confirmed .masonry-card__confirmed-badge {
  position: absolute;
  top: -10px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--success-color, #10b981);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full, 9999px);
  white-space: nowrap;
  z-index: var(--z-base, 1);
}

/* Drag hint — shown beneath the confirmed badge inside floating panels.
 * Only visible when the card is inside a .floating-panel so it doesn't
 * clutter the inline narrative grid. */
.floating-panel .masonry-card--confirmed .masonry-card__drag-hint {
  display: block;
  font-size: 10px;
  color: var(--success-color, #10b981);
  text-align: center;
  margin-top: 4px;
  opacity: 0.8;
  letter-spacing: 0.2px;
}

/* Hidden by default — only shown inside floating panel context above */
.masonry-card__drag-hint {
  display: none;
}

/* Pending state - waiting for server confirmation */
.masonry-card--pending {
  border-color: var(--accent-warning, #f59e0b);
  opacity: 0.8;
  pointer-events: none;
}

.masonry-card--pending::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid var(--accent-warning, #f59e0b);
  border-top-color: transparent;
  border-radius: 50%;
  animation: masonry-spin 0.6s linear infinite;
}

/* Hidden state - filtered out by category */
.masonry-card--hidden {
  display: none;
}

/* Category filter bar */
.category-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--bg-elevated, #1e1e2e);
  border-radius: 6px;
  border: 1px solid var(--border-subtle, #333);
}

.category-filter-bar::before {
  content: 'Filter:';
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-tertiary, #888);
  margin-right: 4px;
}

.category-filter-bar .chip {
  padding: 5px 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: 4px;
  background: var(--bg-base, #121212);
  border: 1px solid var(--border-subtle, #444);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-filter-bar .chip:hover {
  border-color: var(--accent-primary, #4a9eff);
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-hover, #1a1a2e);
}

.category-filter-bar .chip--selected {
  background: var(--accent-primary, #4a9eff);
  border-color: var(--accent-primary, #4a9eff);
  color: var(--bg-base, #121212);
  font-weight: 600;
}

/* Card content structure */
.masonry-card__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 4px;
}

.masonry-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
}

.masonry-card__description {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary, #888);
  line-height: 1.4;
}

.masonry-card__icon {
  font-size: var(--font-size-3xl);
  margin-bottom: 8px;
}

/* Make cards position relative for pseudo-elements */
.masonry-card {
  position: relative;
}

/* Expandable thread section (future enhancement) */
.card-thread {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid var(--border-subtle, #333);
  margin-top: 8px;
  padding-top: 0;
}

.masonry-card.expanded .card-thread {
  max-height: 200px;
  padding-top: 8px;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .masonry-options {
    column-count: 2;
  }
}

@media (max-width: 767px) {
  .masonry-options {
    column-count: 1;
  }
}

/* Landscape phone / small tablet band (640-767px): prefer 2 columns over
   the ≤767px 1-col rule so landscape phone viewports (e.g. 720x1024) don't
   get an awkward single tall column. See coord #2980 / squish audit #2682. */
@media (min-width: 640px) and (max-width: 767px) {
  .masonry-options {
    column-count: 2;
  }
/**
 * Creation Masonry — Selection & Collapse
 * =========================================
 * Selection sections for parallel display and collapsed section state.
 */


/* ============================================
   SELECTION SECTIONS FOR PARALLEL DISPLAY
   Wrapper for race/class/background groups
   ============================================ */

.selection-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle, #333);
}

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

/* Base section-header/section-title from components/_section.css and atoms/_atoms.css */
.selection-section .section-header {
  margin-bottom: 8px;
  padding: 0 12px;
  background: transparent;
}

.section-check {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-sm);
  font-weight: bold;
}

/* Completed section styling - collapse to single row */
.selection-section--completed {
  opacity: 0.7;
}

.selection-section--completed .masonry-options {
  column-count: 4;
  max-height: 80px;
  overflow: hidden;
}

.selection-section--completed .masonry-card {
  padding: 6px 10px;
  margin-bottom: 6px;
}

.selection-section--completed .masonry-card__desc {
  display: none;
}

.selection-section--completed .section-title {
  color: var(--accent-success, #4ade80);
}

/* ============================================
   COLLAPSED SECTION STATE (per-section collapse)
   Animates individual sections when selection made
   ============================================ */

.selection-section {
  transition: max-height 0.4s ease-out, opacity 0.3s ease;
  /* Use overflow: visible by default so race/class grids with many options
     are not clipped. Only collapsed/completed states use overflow: hidden (#381). */
  overflow: visible;
}

.selection-section--collapsed {
  max-height: 56px;
  opacity: 1;
  overflow: hidden;
}

.selection-section--collapsed .masonry-options {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

.selection-section--collapsed .section-header {
  display: none;
}

/* Selection Summary Bar - shown when collapsed */
.selection-summary {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--panel-bg-hover, rgba(255, 255, 255, 0.05));
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.selection-section--collapsed .selection-summary {
  display: flex;
}

.selection-summary:hover {
  background: var(--panel-bg-active, rgba(255, 255, 255, 0.08));
}

.selection-summary__icon {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-md);
  font-weight: bold;
  flex-shrink: 0;
}

.selection-summary__type {
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}

.selection-summary__text {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
  font-size: var(--font-size-base);
  flex-grow: 1;
}

.selection-summary__expand {
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.selection-summary:hover .selection-summary__expand {
  color: var(--accent-primary, #60a5fa);
}

.selection-summary__expand-icon {
  font-size: var(--font-size-xs);
  transition: transform 0.2s ease;
}

.selection-section--expanded .selection-summary__expand-icon {
  transform: rotate(180deg);
}

/* Re-expanded state after user clicks "Change" */
.selection-section--expanded {
  max-height: none;
}

.selection-section--expanded .selection-summary {
  display: flex;
  margin-bottom: 12px;
  background: var(--accent-success-dim, rgba(74, 222, 128, 0.1));
  border: 1px solid var(--accent-success, #4ade80);
}

.selection-section--expanded .masonry-options {
  opacity: 1;
  max-height: none;
}

.selection-section--expanded .section-header {
  display: none;
}

/* Card content elements — matches creation-card typography */
.masonry-card__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #fff);
  margin-bottom: 2px;
}

.masonry-card__desc {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Button reset for masonry cards */
button.masonry-card {
  font-family: inherit;
  text-align: left;
  width: 100%;
}

/* Info button for Guided mode (explain_option) */
.masonry-card__info-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-surface-elevated, #2a2a2a);
  border: 1px solid var(--color-border, #444);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: var(--z-float);
}

.masonry-card:hover .masonry-card__info-btn,
.masonry-card:focus .masonry-card__info-btn {
  opacity: 1;
}

.masonry-card__info-btn:hover {
  background: var(--color-accent-blue, #61afef);
  color: var(--color-bg, #1a1a1a);
  border-color: var(--color-accent-blue, #61afef);
}

/* Explanation loading indicator */
.explanation-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-surface-elevated, #2a2a2a);
  border: 1px solid var(--color-border, #444);
  border-radius: var(--radius-md, 6px);
  margin-bottom: 12px;
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-base);
  animation: explanation-pulse 1.5s ease-in-out infinite;
}

@keyframes explanation-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.explanation-loading .loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border, #444);
  border-top-color: var(--color-accent-blue, #61afef);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Masonry card badges — matches creation-card badge (subtle, pill-shaped) */
.masonry-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 9999px;
  z-index: var(--z-float);
}

.masonry-card__badge--beginner {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-color, #10b981);
}

.masonry-card__badge--recommended {
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple-400, #a78bfa);
}

/* DM Suggested badge for Immersive mode */
.masonry-card__badge--dm-suggested {
  background: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-gold, #e5c07b);
  animation: none;
}

@keyframes dm-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(229, 192, 123, 0.4); }
  50% { box-shadow: 0 0 8px rgba(229, 192, 123, 0.7); }
}

/* Override button in masonry cards */
.dm-override-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--color-border, #4a4a4a);
  background: var(--color-bg-alt, #2a2a2a);
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: var(--z-float);
}

.dm-override-btn:hover {
  background: var(--color-accent-gold, #e5c07b);
  color: var(--color-bg, #1a1a1a);
  border-color: var(--color-accent-gold, #e5c07b);
}

/* DM inference container for ability scores preview */
.cp-dm-inference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  margin-bottom: 8px;
  background: rgba(229, 192, 123, 0.15);
  border: 1px solid var(--color-accent-gold, #e5c07b);
  border-radius: 4px;
}

.cp-dm-badge {
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-accent-gold, #e5c07b);
  cursor: help;
}

.cp-override-btn {
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--color-border, #4a4a4a);
  background: var(--color-bg-alt, #2a2a2a);
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cp-override-btn:hover {
  background: var(--color-accent-gold, #e5c07b);
  color: var(--color-bg, #1a1a1a);
  border-color: var(--color-accent-gold, #e5c07b);
}

/* Override notice in narrative pane */
.dm-override-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(229, 192, 123, 0.1);
  border-left: 3px solid var(--color-accent-gold, #e5c07b);
  border-radius: 0 4px 4px 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, #888);
}

.dm-override-notice .override-icon {
  font-size: var(--font-size-md);
  color: var(--color-accent-gold, #e5c07b);
}

/* Responsive for selection sections */
@media (max-width: 1200px) {
  .selection-section--completed .masonry-options {
    column-count: 3;
  }
}

@media (max-width: 900px) {
  .selection-section--completed .masonry-options {
    column-count: 2;
  }
}

/**
 * Creation Masonry — Import Hub
 * ================================
 * Pure CSS masonry layout for character creation option cards.
 *
 * Decomposed into focused files under creation_masonry/ for maintainability.


 */

@media (max-width: 640px) {
  .selection-section--completed .masonry-options {
    column-count: 1;
    max-height: 100px;
  }
}

/* Selection pane scrollable for parallel content */
.pane-selection .pane-content {
  display: block;
  overflow-y: auto;
  padding: 0;
}

/* ============================================
   Origin/World Ties Selection Panel
   ============================================ */

.origin-selection-panel {
  background: var(--panel-bg, rgba(0, 0, 0, 0.85));
  border: 1px solid var(--color-border, #444);
  border-radius: 4px;
  margin: 1rem 0;
  padding: 1rem;
}

.origin-intro {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-dim, #333);
}

.origin-intro-text {
  color: var(--color-text-dim, #888);
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

/* Origin Sections (Faction, Mentor, Quest) */
.origin-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--color-bg-dark, rgba(0, 0, 0, 0.3));
  border-radius: 4px;
  border: 1px solid var(--color-border-dim, #333);
}

.origin-section:last-of-type {
  margin-bottom: 1rem;
}

.origin-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.origin-section-icon {
  font-size: 1.2rem;
  opacity: 0.8;
}

.origin-section-title {
  font-weight: 600;
  color: var(--color-text, #ddd);
  flex: 1;
}

.origin-section-desc {
  color: var(--color-text-dim, #888);
  font-size: 0.85rem;
  margin: 0 0 0.75rem 0;
}

/* Skip buttons */
.origin-skip-btn {
  background: transparent;
  border: 1px solid var(--color-border-dim, #444);
  color: var(--color-text-dim, #888);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.origin-skip-btn:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text, #ddd);
  border-color: var(--color-border, #555);
}

/* Origin Options Container */
.origin-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.origin-no-options {
  color: var(--color-text-dim, #666);
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.5rem;
}

/* Origin Cards (Faction, Mentor, Quest) */
.origin-card {
  background: var(--color-bg-card, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-dim, #444);
  border-radius: 4px;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.origin-card:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--color-border, #555);
}

.origin-card.selected {
  border-color: var(--color-primary, #4a9eff);
  background: var(--color-primary-bg, rgba(74, 158, 255, 0.1));
  box-shadow: 0 0 6px var(--color-primary-glow, rgba(74, 158, 255, 0.3));
}

.origin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.origin-card-title {
  font-weight: 600;
  color: var(--color-text, #ddd);
  font-size: 0.95rem;
}

.origin-card-type {
  font-size: 0.7rem;
  color: var(--color-text-dim, #888);
  background: var(--color-bg-badge, rgba(255, 255, 255, 0.1));
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.origin-card-desc {
  color: var(--color-text-dim, #999);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.origin-card-meta {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.origin-card-check {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border-dim, #555);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.origin-card.selected .origin-card-check {
  background: var(--color-primary, #4a9eff);
  border-color: var(--color-primary, #4a9eff);
  color: white;
}

/* Faction-specific styles */
.faction-card .origin-card-type {
  background: var(--color-faction-badge, rgba(156, 39, 176, 0.2));
  color: var(--color-faction, #ce93d8);
}

/* Mentor-specific styles */
.mentor-card .origin-card-type {
  background: var(--color-mentor-badge, rgba(76, 175, 80, 0.2));
  color: var(--color-mentor, #a5d6a7);
}

/* Quest-specific styles */
.quest-card .origin-card-type {
  background: var(--color-quest-badge, rgba(255, 152, 0, 0.2));
  color: var(--color-quest, #ffcc80);
}

/* Skip All Button */
.selection-skip-all-btn {
  background: transparent;
  border: 1px solid var(--color-border-dim, #555);
  color: var(--color-text-dim, #888);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  margin-right: 0.5rem;
}

.selection-skip-all-btn:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text, #ddd);
  border-color: var(--color-border, #666);
}

/* Confirm button area adjustments for origin panel */
.origin-selection-panel .selection-confirm-area {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-dim, #333);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .origin-options {
    grid-template-columns: 1fr;
  }

  .origin-section {
    padding: 0.75rem;
  }

  .origin-selection-panel .selection-confirm-area {
    flex-direction: column;
  }

  .selection-skip-all-btn {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}

/* ==========================================================================
 * Rewind Button - Turn undo functionality
 * ========================================================================== */

.rewind-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.rewind-button:hover {
  background: var(--bg-hover, #2a2a4a);
  border-color: var(--accent-primary, #4a9eff);
  color: var(--text-primary, #e0e0e0);
}

.rewind-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rewind-button-icon {
  font-size: var(--font-size-md);
}

.rewind-button-count {
  padding: 2px 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 10px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

/* Combat tracker mobile font sizes */
@media (max-width: 640px) {
  .initiative-entry {
    padding: 12px;
    gap: 12px;
  }

  .initiative-roll {
    font-size: var(--font-size-xl);  /* Larger for quick reference (was 14px) */
    font-weight: bold;
    min-width: 36px;
  }

  .participant-name {
    font-size: var(--font-size-lg);  /* Readable (was 14px) */
    font-weight: 500;
  }

  .participant-hp {
    font-size: var(--font-size-base);  /* Clear HP visibility (was 13px) */
  }

  /* Highlight current turn more prominently on mobile */
  .initiative-entry.current {
    background: rgba(255, 215, 0, 0.2);
    border-left: 4px solid #ffd700;
    padding-left: 16px;
  }
}

/* ============================================
   Form Mode Wizard Layout
   Simple 2-pane layout for quick character creation
   ============================================ */

.creation-wizard {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  height: 100%;
  min-height: 400px;
  padding: 16px;
  background: var(--bg-surface, #1a1a2e);
  box-sizing: border-box;
}

.wizard-selection {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #0f0f1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  overflow: hidden;
}

.wizard-preview {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary, #0f0f1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  overflow: hidden;
}

.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-tertiary, #1f1f3a);
  border-bottom: 1px solid var(--border-color, #333);
}

.wizard-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--accent-primary, #60a5fa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wizard-progress {
  font-size: var(--font-size-sm);
  padding: 3px 8px;
  background: var(--accent-primary, #60a5fa);
  color: var(--bg-primary, #0a0a14);
  border-radius: 4px;
  font-weight: 600;
}

.wizard-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

/* Enforce 3 columns for form mode options */
.masonry-options--three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  column-count: unset;  /* Override default column-count */
}

.masonry-options--three-col .masonry-card {
  break-inside: unset;  /* Override for grid layout */
  margin-bottom: 0;     /* Grid handles gaps */
}

/* Form complete summary */
.form-complete {
  text-align: center;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.form-complete__checkmark {
  font-size: var(--font-size-5xl);
  color: var(--accent-success, #4ade80);
  margin-bottom: 16px;
  animation: scaleIn 0.3s ease-out;
}

@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.form-complete__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0 0 24px 0;
}

.form-complete__summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px 24px;
  background: var(--bg-tertiary, #1f1f3a);
  border-radius: 6px;
  border: 1px solid var(--border-color, #333);
}

.form-complete__summary .summary-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--font-size-md);
  color: var(--text-primary, #e0e0e0);
}

.form-complete__summary .summary-label {
  color: var(--text-muted, #888);
  font-weight: 500;
}

.form-complete__message {
  color: var(--text-muted, #888);
  font-size: var(--font-size-base);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* Responsive: 2 columns on tablet */
@media (max-width: 1024px) {
  .masonry-options--three-col {
    grid-template-columns: repeat(2, 1fr);
  }

  .creation-wizard {
    grid-template-columns: 1fr 280px;
    gap: 12px;
    padding: 12px;
  }
}

/* Responsive: Single column on mobile */
@media (max-width: 640px) {
  .masonry-options--three-col {
    grid-template-columns: 1fr;
  }

  .creation-wizard {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .wizard-preview {
    max-height: 200px;
  }
}

/* Responsive: Short/landscape phones (400-479px) — tighten preview so controls remain visible */
@media (min-width: 400px) and (max-width: 479px) {
  .wizard-preview {
    max-height: 160px;
  }
}

/* Responsive: Very small viewports (<400px) — preview shrinks to leave room for content */
@media (max-width: 399px) {
  .creation-wizard {
    grid-template-rows: auto 1fr;
  }

  .wizard-preview {
    max-height: 120px;
  }
}

/* ==========================================================================
 * DM Warning Panel - Risky Action Confirmation
 * Shows when player attempts risky actions (attacking friendlies, etc.)
 * ========================================================================== */

.dm-warning-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  background: var(--bg-elevated, #1e1e2e);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: var(--z-warning);
  animation: warningPanelSlideIn 0.25s ease-out;
  overflow: hidden;
}

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

/* Warning header with severity color */
.dm-warning-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.dm-warning-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
}

.dm-warning-title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.dm-warning-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

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

/* Warning body content */
.dm-warning-body {
  padding: 20px;
}

.dm-warning-message {
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 16px;
}

/* Consequences list */
.dm-warning-consequences {
  margin-bottom: 16px;
}

.dm-warning-consequences-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dm-warning-consequences-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-warning-consequences-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary, #aaa);
}

.dm-warning-consequences-list li::before {
  content: '•';
  color: var(--accent-danger, #f87171);
}

/* Alternatives section */
.dm-warning-alternatives {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-secondary, #252545);
  border-radius: 6px;
}

.dm-warning-alternatives-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dm-warning-alternative-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dm-warning-alternative-btn:last-child {
  margin-bottom: 0;
}

.dm-warning-alternative-btn:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

/* Warning actions (confirm/cancel) */
.dm-warning-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252545);
}

.dm-warning-cancel-btn {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dm-warning-cancel-btn:hover {
  background: var(--bg-hover, #2a2a4a);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--text-muted, #888);
}

.dm-warning-confirm-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ==========================================================================
 * Severity-Based Styling
 * ========================================================================== */

/* CAUTION - Yellow/Warning theme */
.dm-warning-panel.warning-caution {
  border: 2px solid var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-caution .dm-warning-header {
  background: rgba(251, 191, 36, 0.1);
  border-bottom-color: rgba(251, 191, 36, 0.3);
}

.dm-warning-panel.warning-caution .dm-warning-icon {
  color: var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-caution .dm-warning-confirm-btn {
  background: var(--accent-warning, #fbbf24);
  color: #1a1a2e;
}

.dm-warning-panel.warning-caution .dm-warning-confirm-btn:hover {
  background: #eab308;
}

.dm-warning-panel.warning-caution .dm-warning-consequences-list li::before {
  color: var(--accent-warning, #fbbf24);
}

/* DANGER - Red/Danger theme */
.dm-warning-panel.warning-danger {
  border: 2px solid var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-danger .dm-warning-header {
  background: rgba(248, 113, 113, 0.1);
  border-bottom-color: rgba(248, 113, 113, 0.3);
}

.dm-warning-panel.warning-danger .dm-warning-icon {
  color: var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-danger .dm-warning-confirm-btn {
  background: var(--accent-danger, #f87171);
  color: #fff;
}

.dm-warning-panel.warning-danger .dm-warning-confirm-btn:hover {
  background: #ef4444;
}

/* CRITICAL - Purple/Critical theme with shake animation */
.dm-warning-panel.warning-critical {
  border: 2px solid #a855f7;
  animation: warningPanelSlideIn 0.25s ease-out, criticalPulse 2s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(168, 85, 247, 0);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.4);
  }
}

.dm-warning-panel.warning-critical .dm-warning-header {
  background: rgba(168, 85, 247, 0.15);
  border-bottom-color: rgba(168, 85, 247, 0.3);
}

.dm-warning-panel.warning-critical .dm-warning-icon {
  color: #a855f7;
  animation: criticalShake 0.5s ease-in-out infinite;
}

@keyframes criticalShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.dm-warning-panel.warning-critical .dm-warning-confirm-btn {
  background: #a855f7;
  color: #fff;
}

.dm-warning-panel.warning-critical .dm-warning-confirm-btn:hover {
  background: #9333ea;
}

.dm-warning-panel.warning-critical .dm-warning-consequences-list li::before {
  color: #a855f7;
}

/* Warning overlay backdrop */
.dm-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-warning);
  animation: overlayFadeIn 0.2s ease-out;
}

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

/* Expiration timer */
.dm-warning-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  padding: 8px 20px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.dm-warning-timer-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 2px;
  overflow: hidden;
}

.dm-warning-timer-fill {
  height: 100%;
  background: var(--accent-primary, #4a9eff);
  transition: width 1s linear;
}

.dm-warning-panel.warning-caution .dm-warning-timer-fill {
  background: var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-danger .dm-warning-timer-fill {
  background: var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-critical .dm-warning-timer-fill {
  background: #a855f7;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dm-warning-panel,
  .dm-warning-overlay {
    animation: none;
  }

  .dm-warning-panel.warning-critical {
    animation: none;
  }

  .dm-warning-panel.warning-critical .dm-warning-icon {
    animation: none;
  }
}

/* ========================================
   Suggestions Panel
   ======================================== */

/* Main container for suggestions panel */
.suggestions-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4, 16px);
  gap: var(--space-4, 16px);
  background: var(--bg-secondary, #16161f);
}

/* Header section */
.suggestions-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-color, #333);
}

.suggestions-header .panel-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}

.suggestions-header .panel-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  margin: 0;
}

/* Scrollable suggestions list */
.suggestions-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}

/* Individual suggestion item */
.suggestion-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-raised, #1f1f3a);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  gap: var(--space-2, 8px);
}

.suggestion-item:hover {
  border-color: var(--primary, #7c3aed);
  background: var(--surface-hover, #252540);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.suggestion-item.selected {
  border-color: var(--primary, #7c3aed);
  background: var(--surface-hover, #252540);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* Suggestion header row with icon, action, and checkbox */
.suggestion-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.suggestion-icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.suggestion-action {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}

.suggestion-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary, #7c3aed);
}

/* Example suggestions */
.suggestion-examples {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  padding-left: var(--space-8, 36px); /* Align with action text */
  line-height: 1.4;
}

.suggestion-example-link {
  color: var(--primary, #7c3aed);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.suggestion-example-link:hover {
  color: var(--primary-light, #9f67ff);
  text-decoration: none;
}

/* Footer with batch button and custom input */
.suggestions-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-color, #333);
}

.suggestion-batch-btn {
  width: 100%;
  padding: var(--space-3, 12px);
  background: var(--primary, #7c3aed);
  color: white;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.suggestion-batch-btn:hover {
  background: var(--primary-dark, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.suggestion-batch-btn:active {
  transform: translateY(0);
}

.suggestion-custom-input {
  width: 100%;
  padding: var(--space-3, 12px);
  background: var(--bg-tertiary, #1f1f3a);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.suggestion-custom-input:focus {
  outline: none;
  border-color: var(--primary, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.suggestion-custom-input::placeholder {
  color: var(--text-muted, #888);
}

/* Empty state */
.suggestions-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
}

.suggestions-empty-state p {
  margin: 0;
  color: var(--text-primary, #e0e0e0);
}

.suggestions-empty-state .text-muted {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  max-width: 300px;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .suggestions-panel-content {
    padding: var(--space-3, 12px);
  }

  .suggestion-item {
    padding: var(--space-2, 8px);
  }

  .suggestion-examples {
    padding-left: var(--space-6, 24px);
  }
}

/* ==========================================================================
 * Panel Component Styles — Import Hub
 * Split into focused files under panels/ for maintainability (Phase 3 Task 8)
 * Original: 6,569 LOC -> 14 files, largest 783 LOC
 * ========================================================================== */

/* Equipment panels */




/* Choice card system */




/* Game panels */




/* Character creation flow */







/* DM tools */


/*
 * Terminal Error Page Organism (#437)
 * ====================================
 * Styled error page replacing raw plain-text error responses.
 * Uses design tokens from: terminal/_tokens.css
 */

.terminal-error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-primary, #1a1a1a);
  padding: 1rem;
}

.terminal-error-content {
  text-align: center;
  max-width: 440px;
  width: 100%;
}

.terminal-error-icon {
  color: var(--color-accent-warning, #d4b06e);
  margin-bottom: 1.25rem;
}

.terminal-error-title {
  color: var(--color-text-primary, #e0e0e0);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.terminal-error-message {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.terminal-error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.terminal-error-button {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.terminal-error-button--primary {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
}

.terminal-error-button--primary:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 85%, white);
}

.terminal-error-button--secondary {
  background: transparent;
  color: var(--color-text-secondary, #a0a0a0);
  border: 1px solid var(--color-border-default, #404040);
}

.terminal-error-button--secondary:hover {
  background: var(--color-bg-secondary, #2d2d2d);
  color: var(--color-text-primary, #e0e0e0);
}

.terminal-error-button:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}
/*
 * Terminal Show Page Styles
 * Extracted from app/views/terminal/show.html.erb inline styles
 * Organized by component and using design tokens from _tokens.css
 */

/* ========================================
   ROOM INDICATOR STYLES
   ======================================== */

.room-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-3);
}

.room-icon {
  font-size: var(--font-size-md);
}

.room-name {
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

/* Room-specific colors */
.room-indicator[data-room="lobby"],
.room-indicator[data-room="character_creation"] {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--color-accent-primary);
}

.room-indicator[data-room="combat"] {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--color-accent-error);
  animation: pulse 2s infinite;
}

.room-indicator[data-room="tavern"],
.room-indicator[data-room="town"],
.room-indicator[data-room="wilderness"],
.room-indicator[data-room="dungeon"] {
  background: rgba(34, 197, 94, 0.2);
  border-color: var(--color-accent-secondary);
}

/* ========================================
   LOCK STATUS BADGE STYLES
   ======================================== */

.lock-status {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--duration-normal), transform var(--duration-normal);
  margin-left: var(--space-3);
}

.lock-status[data-locked="false"] {
  background: rgba(34, 197, 94, 0.2);
}

.lock-status[data-locked="true"] {
  background: rgba(234, 179, 8, 0.2);
}

.lock-icon {
  font-size: var(--font-size-lg);
  filter: drop-shadow(0 0 2px currentColor);
}

.lock-status:hover {
  transform: scale(1.1);
}

/* ========================================
   PENDING ACTIONS PANEL STYLES
   ======================================== */

.pending-actions-panel {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 320px;
  max-height: 350px;
  overflow-y: auto;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-accent-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  z-index: var(--z-floating);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  animation: slideInRight var(--duration-normal) ease-out;
}

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

.pending-actions-panel.has-pending {
  animation: slideInRight var(--duration-normal) ease-out, pendingPulse 2s ease-in-out 0.3s;
}

@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(245, 158, 11, 0.6); }
}

.pending-header {
  color: var(--color-accent-warning);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pending-header::before {
  content: '⚠️';
  font-size: var(--font-size-lg);
}

.pending-action {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.pending-description {
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.pending-reason {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-bottom: var(--space-2);
}

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

.approve-btn, .reject-btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.approve-btn {
  background: var(--color-accent-secondary);
  color: white;
}

.approve-btn:hover {
  background: color-mix(in srgb, var(--color-accent-secondary) 80%, black);
}

.reject-btn {
  background: var(--color-accent-error);
  color: white;
}

.reject-btn:hover {
  background: var(--color-danger-emphasis);
}

/* Rejection Dialog Inline */
.reject-dialog {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
}

.reject-dialog-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-error);
  margin-bottom: var(--space-2);
}

.reject-reason-input {
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  background: rgba(0, 0, 0, 0.3);
  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);
  margin-bottom: var(--space-2);
}

.reject-reason-input:focus {
  outline: none;
  border-color: var(--color-accent-error);
  background: rgba(0, 0, 0, 0.5);
}

.reject-dialog-buttons {
  display: flex;
  gap: var(--space-2);
}

.confirm-reject-btn {
  flex: 1;
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-accent-error);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.confirm-reject-btn:hover {
  background: var(--color-danger-emphasis);
}

.cancel-reject-btn {
  padding: var(--space-1-5) var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.cancel-reject-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text-primary);
}

/* ========================================
   SUGGESTIONS PANEL STYLES
   ======================================== */

.suggestions-panel {
  margin-top: var(--space-4);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  animation: slideIn var(--duration-normal) ease-out;
}

.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-accent-primary);
}

.suggestions-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.suggestions-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

.suggestions-close:hover {
  color: var(--color-text-primary);
}

.suggestions-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  position: relative;
}

.suggestion-item:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--color-accent-primary);
  transform: translateX(4px);
}

.suggestion-item.selected {
  background: rgba(124, 58, 237, 0.3);
  border-color: var(--color-accent-primary);
  border-width: 2px;
}

.suggestion-item.selected::before {
  content: '✓';
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

.suggestion-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1-5);
}

.suggestion-icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.suggestion-action {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.suggestion-checkbox {
  margin-left: auto;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.suggestion-examples {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: 26px;
  font-style: italic;
}

.suggestion-example-link {
  color: var(--color-accent-purple);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.suggestion-example-link:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

.suggestions-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(124, 58, 237, 0.3);
}

.suggestion-batch-btn {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: background var(--duration-fast);
}

.suggestion-batch-btn:hover {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
}

.suggestion-custom-input {
  flex: 2;
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.suggestion-custom-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  background: rgba(0, 0, 0, 0.5);
}

.suggestion-custom-input::placeholder {
  color: var(--color-text-muted);
}

/* ========================================
   NARRATIVE & SIDE PANEL LAYOUT
   ======================================== */

.narrative-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

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

.side-panel-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

.side-panel-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

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

.side-panel-content {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Terminal-style content formatting */
.side-panel-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.side-panel-content .stat-block {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-sm);
}

.side-panel-content .stat-header {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-accent-primary);
  padding-bottom: var(--space-1);
}

.side-panel-content .stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}

.side-panel-content .stat-row:last-child {
  border-bottom: none;
}

.side-panel-content .stat-label {
  color: var(--color-text-muted);
}

.side-panel-content .stat-value {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

/* ========================================
   SIDE PANEL TAB NAVIGATION
   ======================================== */

.sp-tab-nav {
  display: flex;
  gap: var(--space-0-5);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-darker);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

/* .sp-tab-btn rules live in _side_panel_tabs.css (#4194 — terminal bundle SSOT) */

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

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

/* Side Panel Section Headers */
.sp-section-header {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

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

/* ========================================
   SIDE PANEL STATS TAB
   ======================================== */

.sp-stats { }

.sp-core-stats {
  margin-bottom: var(--space-3);
}

.sp-hp-bar {
  position: relative;
  height: 24px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.sp-hp-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-error), var(--color-danger-emphasis));
  transform-origin: left;
  transition: transform var(--duration-normal);
}

.sp-hp-text {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 24px;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sp-stat-row {
  display: flex;
  justify-content: space-around;
  gap: var(--space-2);
}

.sp-stat-item {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: rgba(124, 58, 237, 0.1);
  border-radius: var(--radius-sm);
  flex: 1;
}

.sp-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.sp-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Ability Scores Grid */
.sp-abilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1-5);
}

.sp-ability-item {
  text-align: center;
  padding: var(--space-2) var(--space-1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.sp-ability-item.proficient {
  border-color: var(--color-accent-primary);
  background: rgba(124, 58, 237, 0.1);
}

.sp-ability-name {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.sp-ability-score {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.sp-ability-mod {
  display: block;
  font-size: var(--font-size-md);
  color: var(--color-accent-purple);
}

/* Saving Throws */
.sp-saves-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.sp-save-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

.sp-save-item.proficient {
  background: rgba(124, 58, 237, 0.1);
}

.sp-save-prof {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-save-item.proficient .sp-save-prof {
  color: var(--color-accent-primary);
}

.sp-save-name {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-save-mod {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* ========================================
   SIDE PANEL SKILLS TAB
   ======================================== */

.sp-skills { }

.sp-skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.sp-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
}

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

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

.sp-skill-prof {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-skill-item.proficient .sp-skill-prof {
  color: var(--color-accent-primary);
}

.sp-skill-name {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

.sp-skill-mod {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* ========================================
   SIDE PANEL DETAILS TAB
   ======================================== */

.sp-details { }

.sp-detail-section {
  margin-bottom: var(--space-4);
}

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

.sp-detail-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sp-detail-value {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
}

.sp-feature-block {
  padding: var(--space-2);
  background: rgba(124, 58, 237, 0.05);
  border-left: 2px solid var(--color-accent-primary);
  margin: var(--space-2) 0;
}

.sp-feature-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  margin-bottom: var(--space-1);
}

.sp-feature-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.sp-personality-item {
  margin: var(--space-1-5) 0;
}

.sp-personality-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sp-personality-value {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-top: var(--space-0-5);
}

/* Placeholder and Empty States */
.sp-placeholder, .sp-empty-text {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-5);
  font-size: var(--font-size-xs);
}

/* ========================================
   TOOL RESULTS PANEL (GAME LOG)
   ======================================== */

.tool-results-panel {
  display: none; /* Game log is now in the side panel tabs */
}

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

.tool-panel-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

.tool-panel-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

.tool-panel-close:hover {
  color: var(--color-text-primary);
}

.tool-panel-content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

/* Tool result item */
.tool-result-item {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

/* Category colors */
.tool-result-item.dice_roll {
  border-left-color: var(--color-accent-primary); /* Blue */
}

.tool-result-item.combat {
  border-left-color: var(--color-accent-error);
}

.tool-result-item.inventory {
  border-left-color: var(--color-accent-secondary);
}

.tool-result-item.character {
  border-left-color: var(--color-accent-warning);
}

/* Dice roll component */
.dice-roll-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-sm);
}

.roll-icon {
  font-size: var(--font-size-2xl);
}

.roll-result {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.roll-breakdown {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.roll-breakdown summary {
  cursor: pointer;
  user-select: none;
  color: var(--color-accent-purple);
}

.roll-breakdown summary:hover {
  color: var(--color-accent-primary);
}

.roll-breakdown[open] summary {
  margin-bottom: var(--space-1-5);
}

.roll-formula, .roll-dice {
  padding: var(--space-0-5) 0;
  color: var(--color-text-muted);
}

/* Combat results */
.combat-result {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.combat-result .icon {
  font-size: var(--font-size-md);
}

.damage-value {
  color: var(--color-accent-error);
  font-weight: var(--font-weight-bold);
}

.healing-value {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

/* Inventory results */
.inventory-result {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.inventory-result .icon {
  font-size: var(--font-size-md);
}

/* Character update results */
.character-update-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-change {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-xs);
}

.stat-change-arrow {
  color: var(--color-text-muted);
}

.stat-change-old {
  color: var(--color-accent-error);
}

.stat-change-new {
  color: var(--color-accent-secondary);
}

/* Category section header */
.tool-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  background: rgba(124, 58, 237, 0.1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  cursor: pointer;
  user-select: none;
}

.tool-category-header:hover {
  background: rgba(124, 58, 237, 0.2);
}

.tool-category-icon {
  font-size: var(--font-size-md);
}

.tool-category-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Collapsible sections */
.tool-category-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height var(--duration-normal);
}

.tool-category-content.collapsed {
  max-height: 0;
}

/* ========================================
   SIDE PANEL GAME LOG STYLES
   ======================================== */

.sp-game-log {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-2);
}

.sp-log-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 150px;
}

.sp-log-item {
  margin-bottom: var(--space-2-5);
  padding: var(--space-2) var(--space-2-5);
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.sp-log-item.dice_roll {
  border-left-color: var(--color-accent-primary);
}

.sp-log-item.combat {
  border-left-color: var(--color-accent-error);
}

.sp-log-item.inventory {
  border-left-color: var(--color-accent-secondary);
}

.sp-log-item.character {
  border-left-color: var(--color-accent-warning);
}

.sp-log-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-log-icon {
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.sp-log-result {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.sp-log-breakdown {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-log-breakdown summary {
  cursor: pointer;
  user-select: none;
  color: var(--color-accent-purple);
}

.sp-log-breakdown summary:hover {
  color: var(--color-accent-primary);
}

.sp-log-breakdown[open] summary {
  margin-bottom: var(--space-1);
}

.sp-log-dice, .sp-log-formula {
  padding: var(--space-0-5) 0;
  color: var(--color-text-muted);
}

.sp-log-message {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
   CSS GRID LAYOUT FOR TERMINAL
   ======================================== */

.terminal-grid {
  display: grid;
  grid-template-columns: 1fr 8px var(--panel-width-default);
  height: calc(100vh - 60px);
  overflow: hidden;
}

.narrative-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 300px;
}

.panel-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: var(--panel-width-min);
  max-width: var(--panel-width-max);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-default);
}

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

/* Draggable Divider */
.grid-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  background: var(--color-bg-primary);
  transition: background var(--duration-fast);
}

.grid-divider:hover,
.grid-divider.dragging {
  background: var(--color-accent-primary);
}

.divider-handle {
  width: 4px;
  height: 40px;
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.grid-divider:hover .divider-handle,
.grid-divider.dragging .divider-handle {
  background: var(--color-text-primary);
}

/* Responsive: Collapse on narrow screens */
@media (max-width: 768px) {
  .terminal-grid {
    grid-template-columns: 1fr;
  }

  .grid-divider {
    display: none;
  }

  .panel-column {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: var(--z-panel);
    transform: translateX(100%);
    transition: transform var(--duration-normal);
  }

  .panel-column.visible {
    transform: translateX(0);
  }

  /* Mobile toggle button */
  .mobile-panel-toggle {
    display: block;
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-accent-primary);
    color: white;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    z-index: var(--z-panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

@media (min-width: 769px) {
  .mobile-panel-toggle {
    display: none;
  }
}

.panel-column .side-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border-left: none;
  z-index: auto;
}

.panel-column .side-panel.hidden {
  display: block; /* Override - panel visibility controlled by .panel-column */
}

/* ========================================
   EQUIPMENT SELECTION UI STYLES
   ======================================== */

.equipment-selection-panel {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 2px solid rgba(34, 197, 94, 0.5);
  border-radius: var(--radius-lg);
  animation: slideIn var(--duration-normal) ease-out;
}

.equipment-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
}

.equipment-icon {
  font-size: var(--font-size-3xl);
}

.equipment-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  flex: 1;
}

.equipment-class {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.equipment-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.equipment-group {
  padding: var(--space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid rgba(34, 197, 94, 0.5);
}

.group-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2-5);
}

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

.equipment-option {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3-5);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: left;
}

.equipment-option:hover {
  border-color: var(--color-accent-secondary);
  background: rgba(34, 197, 94, 0.1);
  transform: translateX(4px);
}

.equipment-option.selected {
  background: rgba(34, 197, 94, 0.3);
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.equipment-option.selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

.option-letter {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  min-width: 28px;
}

.option-desc {
  flex: 1;
  color: var(--color-text-primary);
}

/* Equipment Tray (sticky bottom bar) */
.equipment-tray {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md);
  animation: slideIn var(--duration-fast) ease-out;
}

.equipment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  flex: 1;
}

.equipment-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-accent-secondary);
  font-family: var(--font-mono);
}

.send-equipment-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-secondary);
  color: var(--color-fg-on-emphasis);
  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-equipment-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-secondary) 80%, black);
  transform: scale(1.02);
}

.send-equipment-btn:disabled,
.send-equipment-btn.disabled {
  background: rgba(34, 197, 94, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* Responsive equipment styles */
@media (max-width: 600px) {
  .equipment-tray {
    flex-direction: column;
    gap: var(--space-2);
  }

  .equipment-summary {
    justify-content: center;
  }

  .send-equipment-btn {
    width: 100%;
  }
}


/* ========================================
   HIDDEN STATE UTILITIES
   Extracted from inline styles in show.html.erb
   ======================================== */

.pending-actions-panel.initially-hidden,
.character-status-panel.initially-hidden,
.tooltip.initially-hidden,
.threejs-dice-overlay.initially-hidden,
.context-menu.initially-hidden {
  display: none;
}

/* ========================================
   TOAST WRAPPER POSITIONING
   Fixed container for toast notifications
   ======================================== */

.toast-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-sky);
  pointer-events: none;
}

/* Toast container inside wrapper handles pointer events */
.toast-wrapper .toast-container {
  pointer-events: auto;
}
/*
 * Organism: Terminal Show
 * ========================
 * Main terminal game view: room indicators, panels, side panel, game log, equipment.
 *
 * Split into focused modules under terminal_show/:
 *   _panels.css        — Room indicator, lock status badge, pending actions panel, suggestions panel
 *   _side_panel.css    — Narrative/side panel layout, tab navigation, stats tab, skills tab, details tab
 *   _game_log.css      — Tool results panel (game log), side panel game log styles
 *   _grid_equipment.css — CSS grid layout, equipment selection UI, hidden state utilities, toast wrapper
 */





/**
 * Side Panel Tabs (.sp-tab-btn)
 * =============================
 * Pill-style tab buttons used in side panels — character sheet
 * (Stats / Powers / Gear), session planner, and other tablist UIs.
 *
 * History (#4194):
 *   #3898 consolidated these rules to application.css as the SSOT, but the
 *   terminal layout only loads terminal.css, not application.css. That left
 *   Stats/Powers/Gear tabs rendering as default browser <button>s (gray
 *   squares with no terminal aesthetic). Restored here so the terminal
 *   bundle has its own SSOT for these classes.
 *
 * Cascade notes:
 *   - .sp-tab-btn--popout (in character_sheet/_base.css) overrides flex:1
 *     with flex:0 0 auto + margin-left:auto for the right-edge icon button.
 *   - .sp-tab-nav layout lives in _terminal_show.css (the wrapping flex row);
 *     align-items added here so the popout icon button stays centered with
 *     the tab pills in the row.
 */

.sp-tab-nav {
  align-items: center;
}

.sp-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted, #888);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast, 150ms),
              color var(--duration-fast, 150ms),
              border-color var(--duration-fast, 150ms);
}

.sp-tab-btn:hover {
  background: rgba(90, 159, 216, 0.12);
  color: var(--color-text-primary, #e0e0e0);
}

.sp-tab-btn.active,
.sp-tab-btn[aria-selected="true"] {
  background: rgba(90, 159, 216, 0.22);
  border-color: var(--color-accent-primary, #5a9fd8);
  color: var(--color-accent-primary, #5a9fd8);
  font-weight: var(--font-weight-bold, 700);
}

.sp-tab-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.sp-tab-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Wiki link tab — anchor that visually matches a tab */
.sp-tab-btn--link {
  text-decoration: none;
}

/* Mobile touch target sizing (WCAG 2.5.5 / iOS HIG 44pt minimum) */
@media (max-width: 768px) {
  .sp-tab-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-2);
  }
}
/**
 * Workshop — Cards and Navigation
 * ==================================
 * Workshop layout, template cards, content cards, visibility badges, balance scores.
 */

/*
 * Workshop Panel Organism
 * =======================
 * Styling for the Homebrew Workshop and World Lore browser panels.
 * Used in both status bar dropdown and side panel modes.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Workshop Header (Breadcrumb Navigation)
 * ========================================================================== */

.workshop-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.workshop-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  font-size: var(--font-size-base);
}

.breadcrumb-icon {
  font-size: var(--font-size-lg);
  opacity: 0.8;
}

.breadcrumb-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.workshop-back-btn {
  padding: var(--space-1) var(--space-2);
  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);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

/* ==========================================================================
 * Workshop Items List
 * ========================================================================== */

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

.workshop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6);
}

.workshop-empty p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
}

.workshop-empty-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.workshop-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ==========================================================================
 * Workshop Item Cards
 * ========================================================================== */

.workshop-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.workshop-item:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.workshop-item:active {
  transform: translateY(0);
}

.workshop-item:last-child {
  margin-bottom: 0;
}

.workshop-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.workshop-item-name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workshop-item-badge {
  flex-shrink: 0;
  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;
  font-weight: var(--font-weight-medium);
}

/* Visibility badges */
.workshop-item-public {
  background: rgba(152, 195, 121, 0.15);
  color: var(--color-accent-secondary);
}

.workshop-item-private {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary);
}

.workshop-item-campaign {
  background: rgba(198, 120, 221, 0.15);
  color: var(--color-accent-purple);
}

.workshop-item-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.workshop-item-balance {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.workshop-item-balance::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-secondary);
}

/* Balance score color indicators */
.workshop-item-balance[data-score="low"]::before {
  background: var(--color-accent-error);
}

.workshop-item-balance[data-score="medium"]::before {
  background: var(--color-accent-warning);
}

.workshop-item-balance[data-score="high"]::before {
  background: var(--color-accent-secondary);
}

/**
 * Workshop — Actions and Menu
 * =============================
 * Actions footer, sidebar navigation, workshop menu states, section indicators.
 */

/* ==========================================================================
 * Workshop Actions Footer
 * ========================================================================== */

.workshop-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.workshop-actions .sp-btn {
  flex: 1;
}

.workshop-actions .sp-btn-primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workshop-actions .sp-btn-primary:hover {
  background: #4a9eff;
  box-shadow: var(--shadow-sm);
}

.workshop-actions .sp-btn-secondary {
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.workshop-actions .sp-btn-secondary:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-accent-primary);
}

/* ==========================================================================
 * Status Bar Workshop Submenu
 * ========================================================================== */

.workshop-submenu {
  min-width: 220px;
}

.submenu-section-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-weight: var(--font-weight-medium);
}

.submenu-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-2) 0;
}

/* Workshop menu item states */
.session-menu-dropdown .menu-item[data-action*="Workshop"] .menu-icon {
  color: var(--color-accent-purple);
}

.session-menu-dropdown .menu-item.exit-workshop {
  color: var(--color-text-muted);
}

.session-menu-dropdown .menu-item.exit-workshop:hover {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.1);
}

.session-menu-dropdown .menu-item.exit-workshop .menu-icon {
  color: inherit;
}

/* Active workshop section indicator */
.submenu-dropdown .menu-item.active {
  background: var(--color-bg-hover);
  border-left: 2px solid var(--color-accent-primary);
  padding-left: calc(var(--space-3) - 2px);
}

.submenu-dropdown .menu-item.active .menu-icon {
  color: var(--color-accent-primary);
}

/* ==========================================================================
 * Workshop Detail View (for viewing individual items)
 * ========================================================================== */

.workshop-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

.workshop-detail-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.workshop-detail-back {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--space-1);
  transition: color var(--transition-fast);
}

.workshop-detail-back:hover {
  color: var(--color-accent-primary);
}

.workshop-detail-title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.workshop-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.workshop-detail-section {
  margin-bottom: var(--space-4);
}

.workshop-detail-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.workshop-detail-text {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

.workshop-detail-actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
/**
 * Workshop — Search and Responsive
 * ==================================
 * Workshop search, preview panel, responsive layouts, and enhanced states.
 */

}

/* ==========================================================================
 * Workshop Search (optional enhancement)
 * ========================================================================== */

.workshop-search {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
}

.workshop-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workshop-search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.2);
}

.workshop-search-input::placeholder {
  color: var(--color-text-muted);
}

/* ==========================================================================
 * Workshop Category Filters
 * ========================================================================== */

.workshop-filters {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

.workshop-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.workshop-filter-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.workshop-filter-btn.active {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.workshop-filter-icon {
  font-size: var(--font-size-sm);
}

/* ==========================================================================
 * Scrollbar Styling
 * ========================================================================== */

.workshop-items::-webkit-scrollbar,
.workshop-detail-content::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.workshop-items::-webkit-scrollbar-track,
.workshop-detail-content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.workshop-items::-webkit-scrollbar-thumb,
.workshop-detail-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-sm);
}

.workshop-items::-webkit-scrollbar-thumb:hover,
.workshop-detail-content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

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

@media (max-width: 480px) {
  .workshop-header {
    padding: var(--space-2) var(--space-3);
  }

  .workshop-breadcrumb {
    font-size: var(--font-size-sm);
  }

  .breadcrumb-text {
    max-width: 120px;
  }

  .workshop-item {
    padding: var(--space-2);
  }

  .workshop-item-name {
    font-size: var(--font-size-sm);
  }

  .workshop-actions {
    padding: var(--space-2);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .workshop-item {
    transition: none;
  }

  .workshop-item:hover {
    transform: none;
  }

  .workshop-back-btn,
  .workshop-filter-btn,
  .workshop-search-input {
    transition: none;
  }
}
/**
 * Workshop Panel — Import Hub
 * =============================
 * Template and content workshop panel with cards, navigation, and search.
 *
 * Decomposed into focused files under workshop/ for maintainability.



 */
/*
 * World Map Panel Organism
 * ========================
 * Overlay panel for ASCII world map display.
 * Toggle with Ctrl+M, supports zoom and distance annotations.
 * Uses design tokens from: terminal/_tokens.css
 */

/* Base Panel - Overlay Positioning */
.world-map {
  position: fixed;
  top: calc(var(--status-bar-height) + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - var(--space-8));
  max-width: 900px;
  max-height: calc(100dvh - var(--status-bar-height) - var(--space-8));
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

/* Hidden state */
.world-map--hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-20px);
  pointer-events: none;
}

/* Visible state */
.world-map--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Header Section */
.world-map__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

.world-map__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.world-map__icon {
  font-size: var(--font-size-xl);
}

/* Control Buttons */
.world-map__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.world-map__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.world-map__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.world-map__btn:active {
  background: var(--color-bg-elevated);
  transform: scale(0.95);
}

.world-map__btn--zoom {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.world-map__btn--close {
  color: var(--color-text-secondary);
}

.world-map__btn--close:hover {
  color: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

/* Resolution Indicator */
.world-map__resolution-indicator {
  padding: 0 var(--space-2);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 70px;
  text-align: center;
}

/* Location Info Bar */
.world-map__location-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.world-map__location-label {
  color: var(--color-text-muted);
}

.world-map__location-name {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-medium);
}

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

/* Main Map Content */
.world-map__content {
  flex: 1;
  overflow: auto;
  padding: var(--space-3);
  min-height: 200px;
}

.world-map__ascii {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.2;
  color: var(--color-text-primary);
  white-space: pre;
  margin: 0;
  text-align: center;
  /* Ensure proper alignment for ASCII art */
  letter-spacing: 0;
}

/* Party marker highlight */
.world-map__ascii::selection {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

/* Nearby Locations Summary */
.world-map__nearby {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border-default);
  max-height: 120px;
  overflow-y: auto;
  flex-shrink: 0;
}

.world-map__nearby-header {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}

.world-map__nearby-list {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
  margin: 0;
}

/* Keyboard Shortcuts Footer */
.world-map__shortcuts {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

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

/* Scrollbar Styling */
.world-map__content::-webkit-scrollbar,
.world-map__nearby::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.world-map__content::-webkit-scrollbar-track,
.world-map__nearby::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.world-map__content::-webkit-scrollbar-thumb,
.world-map__nearby::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-full);
}

.world-map__content::-webkit-scrollbar-thumb:hover,
.world-map__nearby::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* Resolution-specific sizing */
.world-map[data-world-map-resolution-value="compact"] .world-map__ascii {
  font-size: var(--font-size-xs);
}

.world-map[data-world-map-resolution-value="expanded"] .world-map__ascii {
  font-size: var(--font-size-base);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .world-map {
    width: calc(100vw - var(--space-4));
    top: var(--space-2);
    max-height: calc(100dvh - var(--space-4));
  }

  .world-map__controls {
    gap: var(--space-1);
  }

  .world-map__btn {
    min-width: 28px;
    height: 28px;
  }

  .world-map__shortcuts {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .world-map__ascii {
    font-size: var(--font-size-xs);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .world-map {
    transition: none;
  }

  .world-map__btn {
    transition: none;
  }
}
/**
 * World Selector — Base Menu
 * ============================
 * Main container, menu items, homebrew/preset badges, and submenus.
 */

/* World Selector - Modern terminal-style interface with subtle accents */

/* Main container with dark background */
.world-selector {
  position: relative;
  background-color: var(--color-bg-primary);
  min-height: 100%;
  padding: var(--space-8);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  overflow: hidden;
  animation: worldSelectorFadeIn 0.4s ease-out;
}

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

/* Staggered entrance for menu items */
.world-selector__option {
  animation: menuItemSlideIn 0.3s ease-out backwards;
}

.world-selector__option:nth-child(1) { animation-delay: 0.1s; }
.world-selector__option:nth-child(2) { animation-delay: 0.15s; }
.world-selector__option:nth-child(3) { animation-delay: 0.2s; }
.world-selector__option:nth-child(4) { animation-delay: 0.25s; }
.world-selector__option:nth-child(5) { animation-delay: 0.3s; }

@keyframes menuItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* SVG Logo header */
.world-selector__header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding: var(--space-4) 0;
}

.world-selector__logo {
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.world-selector__logo-text {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.15em;
}

.world-selector__logo-text--terminal {
  font-size: var(--font-size-4xl);
}

.world-selector__logo-text--dnd {
  font-size: var(--font-size-4xl);
  letter-spacing: 0.3em;
}

.world-selector__logo-ampersand {
  font-size: var(--font-size-3xl);
  fill: #e5c07b;
}

/* Subtle animation for dice and brackets */
.world-selector__logo-dice,
.world-selector__logo-bracket {
  animation: logo-pulse 3s ease-in-out infinite;
}

.world-selector__dice-shape {
  animation: dice-spin 10s linear infinite;
  transform-origin: center;
}

@keyframes logo-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

@keyframes dice-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Title below ASCII art */
.world-selector__title {
  text-align: center;
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-text-primary);
  text-shadow: 0 0 20px rgba(97, 175, 239, 0.3);
}

.world-selector__subtitle {
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* Divider line */
.world-selector__divider {
  text-align: center;
  color: var(--color-border-default);
  margin: var(--space-6) 0;
  letter-spacing: 0.2em;
}

/* Menu container */
.world-selector__menu {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-4) 0;
}

/* Menu item - Card style with gradients */
.world-selector__option {
  display: flex;
  align-items: flex-start;
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  cursor: pointer;
  border: 2px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  position: relative;
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
}

.world-selector__option:hover,
.world-selector__option--focused {
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.1) 0%,
    rgba(97, 175, 239, 0.05) 100%
  );
  border-left-color: var(--color-accent-primary);
  border-color: var(--color-border-focus);
  transform: translateX(8px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.world-selector__option--selected {
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.2) 0%,
    rgba(97, 175, 239, 0.1) 100%
  );
  border: 2px solid var(--color-accent-primary);
  border-left: 4px solid var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

.world-selector__option--selected .world-selector__option-description,
.world-selector__option--selected .world-selector__option-tagline {
  color: var(--color-text-primary);
}

/* Homebrew worlds get purple accent */
.world-selector__option[data-world-type="homebrew"] {
  border-left-color: var(--color-accent-purple);
}

.world-selector__option[data-world-type="homebrew"]:hover,
.world-selector__option[data-world-type="homebrew"]--focused {
  background: linear-gradient(
    135deg,
    rgba(198, 120, 221, 0.1) 0%,
    rgba(198, 120, 221, 0.05) 100%
  );
}

/* Option key indicator - Modern style */
.world-selector__option-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2rem;
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  margin-right: var(--space-4);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  color: var(--color-accent-primary);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  font-size: var(--font-size-md);
}

.world-selector__option:hover .world-selector__option-key {
  transform: scale(1.1);
  box-shadow: 0 0 8px rgba(97, 175, 239, 0.4);
}

.world-selector__option--selected .world-selector__option-key {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

/* Option content */
.world-selector__option-content {
  flex: 1;
}

.world-selector__option-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.world-selector__option-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.world-selector__option-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.world-selector__option-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

/* Homebrew indicator - Purple badge */
.world-selector__homebrew-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  background: var(--color-accent-purple);
  color: white;
  border-radius: var(--radius-md);
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

/* Preset badge - Gold badge */
.world-selector__preset-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  background: var(--color-accent-warning);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
}

/* Submenu for homebrew worlds */
.world-selector__submenu {
  margin-left: var(--space-12);
  margin-top: var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-subtle);
}

.world-selector__submenu-option {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-sm);
}

.world-selector__submenu-option:hover,
.world-selector__submenu-option--focused {
  background-color: var(--color-bg-hover);
  transform: translateX(4px);
}

.world-selector__submenu-option--selected {
  background: var(--color-accent-secondary);
  color: var(--color-text-inverse);
}

/* Footer instructions */
.world-selector__footer {
  position: absolute;
  bottom: var(--space-8);
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  margin: 0 var(--space-8);
/**
 * World Selector — Cursor & States
 * ==================================
 * Footer, blinking cursor, loading/error states, and preset selection panel.
 */


.world-selector__footer-key {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(97, 175, 239, 0.1);
}

/* Blinking cursor */
.world-selector__cursor {
  display: inline-block;
  width: 0.6rem;
  height: 1rem;
  background-color: var(--color-accent-primary);
  animation: blink 1s step-end infinite;
  vertical-align: middle;
  margin-left: var(--space-1);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Loading state */
.world-selector__loading {
  text-align: center;
  padding: var(--space-8);
}

.world-selector__loading-text {
  animation: pulse 1.5s ease-in-out infinite;
  color: var(--color-accent-primary);
}

/* Error state */
.world-selector__error {
  color: var(--color-accent-error);
  text-align: center;
  padding: var(--space-4);
  border: 2px solid var(--color-accent-error);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
  background: rgba(224, 108, 117, 0.1);
}

/* Preset adventurer selection panel */
.world-selector__presets-panel {
  max-width: 700px;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease-out;
}

.world-selector__presets-header {
  text-align: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.world-selector__presets-title {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  letter-spacing: 0.1em;
}

.world-selector__presets-subtitle {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.world-selector__presets-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Individual preset option */
.world-selector__preset-option {
  display: flex;
  align-items: flex-start;
  padding: var(--space-4);
  cursor: pointer;
  border: 2px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  background: linear-gradient(
    135deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-elevated) 100%
  );
}

.world-selector__preset-option:hover,
.world-selector__preset-option--focused {
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.15) 0%,
    rgba(97, 175, 239, 0.08) 100%
  );
  border-color: var(--color-accent-primary);
  transform: translateX(6px) scale(1.01);
  box-shadow: var(--shadow-md);
}

.world-selector__preset-option--selected {
  background: linear-gradient(
    135deg,
    rgba(97, 175, 239, 0.25) 0%,
    rgba(97, 175, 239, 0.15) 100%
  );
  border: 2px solid var(--color-accent-primary);
  border-left: 4px solid var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

.world-selector__preset-option--selected .world-selector__preset-details,
.world-selector__preset-option--selected .world-selector__preset-description {
  color: var(--color-text-primary);
}

/* Preset key indicator */
.world-selector__preset-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2rem;
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  margin-right: var(--space-4);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  color: var(--color-accent-primary);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.world-selector__preset-option:hover .world-selector__preset-key {
  transform: scale(1.1);
}

.world-selector__preset-option--selected .world-selector__preset-key {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

/* Preset content */
.world-selector__preset-content {
  flex: 1;
}

.world-selector__preset-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-1);
  color: var(--color-text-primary);
}

.world-selector__preset-details {
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.world-selector__preset-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
/**
 * World Selector — Responsive
 * =============================
 * Responsive adjustments, compact variant, and reduced motion.
 */


/* Responsive adjustments */
@media (max-width: 640px) {
  .world-selector {
    padding: var(--space-4);
  }

  .world-selector__logo {
    max-width: 320px;
  }

  .world-selector__logo-text--terminal {
    font-size: var(--font-size-3xl);
  }

  .world-selector__logo-text--dnd {
    font-size: var(--font-size-2xl);
  }

  .world-selector__logo-dice,
  .world-selector__logo-bracket {
    display: none;
  }

  .world-selector__title {
    font-size: var(--font-size-xl);
  }

  .world-selector__option {
    padding: var(--space-3);
  }

  .world-selector__option-key {
    min-width: 2rem;
    height: 1.5rem;
    font-size: var(--font-size-sm);
  }

  .world-selector__submenu {
    margin-left: var(--space-8);
  }

  .world-selector__presets-panel {
    padding: var(--space-4);
  }

  .world-selector__preset-option {
    padding: var(--space-3);
  }

  .world-selector__preset-key {
    min-width: 2rem;
    font-size: var(--font-size-sm);
  }
}

/* Compact variant for landscape phones / large portrait phones (480-639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .world-selector {
    padding: var(--space-3);
  }

  .world-selector__menu {
    padding: var(--space-2) 0;
  }

  .world-selector__subtitle {
    margin-bottom: var(--space-4);
  }

  .world-selector__option {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }

  .world-selector__option:hover,
  .world-selector__option--focused {
    transform: none;
  }

  .world-selector__option-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .world-selector__submenu {
    margin-left: var(--space-6);
  }

  .world-selector__preset-option {
    padding: var(--space-2) var(--space-3);
  }

  .world-selector__preset-option:hover,
  .world-selector__preset-option--focused {
    transform: none;
  }

  .world-selector__preset-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .world-selector__presets-panel {
    padding: var(--space-3);
  }
}

/* Accessibility - respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .world-selector {
    animation: none;
  }

  .world-selector__option,
  .world-selector__preset-option,
  .world-selector__option-key,
  .world-selector__submenu-option {
    transition: none;
    transform: none;
    animation: none;
  }

  .world-selector__option:hover,
  .world-selector__preset-option:hover {
    transform: none;
  }

  .world-selector__cursor {
    animation: none;
    opacity: 1;
  }

  .world-selector__presets-panel {
    animation: none;
  }

  /* Disable logo animations */
  .world-selector__logo-dice,
  .world-selector__logo-bracket {
    animation: none;
    opacity: 1;
  }

  .world-selector__dice-shape {
    animation: none;
  }
}
/**
 * World Selector — Import Hub
 * =============================
 * Terminal-style world selector with presets and responsive support.
 *
 * Decomposed into focused files under world_selector/ for maintainability.



 */
/* World Orb Selector - 3D wireframe world selection */

.world-orb-selector {
  position: relative;
  background-color: var(--color-bg-primary);
  min-height: 100%;
  padding: var(--space-6);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: worldOrbFadeIn 0.4s ease-out;
}

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

/* Header */
.world-orb-selector__header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.world-orb-selector__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  text-shadow: 0 0 20px rgba(97, 175, 239, 0.3);
  margin: 0 0 var(--space-2);
}

.world-orb-selector__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.world-orb-selector__cursor {
  display: inline-block;
  width: 0.6rem;
  height: 1rem;
  background-color: var(--color-accent-primary);
  animation: worldOrbBlink 1s step-end infinite;
  vertical-align: middle;
  margin-left: var(--space-1);
}

@keyframes worldOrbBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* 3D Viewport */
.world-orb-selector__viewport {
  width: 100%;
  max-width: 800px;
  height: 280px;
  position: relative;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a0f;
}

.world-orb-selector__viewport canvas,
.world-orb-selector__fallback-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Detail Card */
.world-orb-selector__details {
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-4);
}

.world-orb-selector__detail-card {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  animation: worldOrbDetailSlide 0.3s ease-out;
}

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

.world-orb-selector__detail-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-1);
}

.world-orb-selector__detail-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 0 var(--space-2);
}

.world-orb-selector__detail-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-2);
}

.world-orb-selector__detail-players {
  font-size: var(--font-size-xs);
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-medium);
}

/* Confirm Button */
.world-orb-selector__actions {
  margin-top: var(--space-4);
}

.world-orb-selector__confirm {
  padding: var(--space-3) var(--space-8);
  background: transparent;
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: not-allowed;
  transition: border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal),
              background var(--transition-normal);
}

.world-orb-selector__confirm--active,
.world-orb-selector__confirm:not(:disabled) {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  cursor: pointer;
}

.world-orb-selector__confirm--active:hover,
.world-orb-selector__confirm:not(:disabled):hover {
  background: rgba(97, 175, 239, 0.1);
  box-shadow: 0 0 16px rgba(97, 175, 239, 0.3);
}

/* Footer */
.world-orb-selector__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.world-orb-selector__footer-key {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(97, 175, 239, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .world-orb-selector {
    padding: var(--space-4);
  }

  .world-orb-selector__viewport {
    height: 200px;
  }

  .world-orb-selector__title {
    font-size: var(--font-size-xl);
  }
}

/* Narrow mobile (<480px): tighten viewport so orbs render without overflow.
   Promoted-to-default in #3751. Prior 480-639px fixes (#2687, #2985) handled
   the next-tier-up; this rule closes the bottom gap so guests on narrow
   phones see the orb selector clipped neither at the viewport box nor at
   the column the orb sits in. */
@media (max-width: 479px) {
  .world-orb-selector {
    padding: var(--space-3);
  }

  .world-orb-selector__viewport {
    height: 160px;
    max-width: 100%;
  }

  .world-orb-selector__title {
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
  }

  .world-orb-selector__details {
    max-width: 100%;
  }

  .world-orb-selector__confirm {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
  }

  .world-orb-selector__footer {
    font-size: var(--font-size-xs);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .world-orb-selector {
    animation: none;
  }

  .world-orb-selector__detail-card {
    animation: none;
  }

  .world-orb-selector__cursor {
    animation: none;
    opacity: 1;
  }

  .world-orb-selector__confirm {
    transition: none;
  }
}
/* Character Swipe Selector - Tinder-style character card selection */

.character-swipe-selector {
  position: relative;
  background-color: var(--color-bg-primary);
  min-height: 100%;
  padding: var(--space-6);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: charSwipeFadeIn 0.4s ease-out;
}

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

/* Header */
.character-swipe-selector__header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.character-swipe-selector__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  text-shadow: 0 0 20px rgba(97, 175, 239, 0.3);
  margin: 0 0 var(--space-2);
}

.character-swipe-selector__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.character-swipe-selector__counter {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Card Stack Container */
.character-swipe-selector__stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 420px;
  margin: var(--space-2) 0;
  outline: none;
}

/* Individual Swipe Card */
.character-swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5);
  user-select: none;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}

.character-swipe-card:active {
  cursor: grabbing;
}

.character-swipe-card[data-stack-position="0"] {
  border-color: var(--color-border-focus);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
              0 0 0 1px var(--color-border-subtle);
}

/* Swipe Overlays */
.character-swipe-card__overlay {
  position: absolute;
  top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 3px solid;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: var(--z-sticky);
  pointer-events: none;
}

.character-swipe-card__overlay--select {
  right: var(--space-4);
  color: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
  transform: rotate(12deg);
}

.character-swipe-card__overlay--skip {
  left: var(--space-4);
  color: var(--color-accent-error);
  border-color: var(--color-accent-error);
  transform: rotate(-12deg);
}

/* Avatar */
.character-swipe-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--accent-color, var(--color-accent-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  background: rgba(97, 175, 239, 0.05);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-color, var(--color-accent-primary)) 30%, transparent);
}

.character-swipe-card__initial {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--accent-color, var(--color-accent-primary));
}

/* Info */
.character-swipe-card__info {
  text-align: center;
  margin-bottom: var(--space-3);
}

.character-swipe-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-swipe-card__class {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--accent-color, var(--color-accent-primary));
  font-weight: var(--font-weight-medium);
}

.character-swipe-card__level {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Stats Grid */
.character-swipe-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 240px;
  margin-bottom: var(--space-3);
}

.character-swipe-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.character-swipe-card__stat-label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.character-swipe-card__stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Backstory */
.character-swipe-card__backstory {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Create New Card */
.character-swipe-card--create-new {
  border-style: dashed;
  border-color: var(--color-border-subtle);
  justify-content: center;
}

.character-swipe-card--create-new:hover {
  border-color: var(--color-accent-primary);
}

.character-swipe-card__create-icon {
  font-size: 48px;
  color: var(--color-accent-primary);
  opacity: 0.6;
  margin-bottom: var(--space-2);
}

/* Action Buttons */
.character-swipe-selector__actions {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.character-swipe-selector__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border-subtle);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

.character-swipe-selector__action--skip {
  color: var(--color-accent-error);
}

.character-swipe-selector__action--skip:hover {
  border-color: var(--color-accent-error);
  box-shadow: 0 0 12px rgba(224, 108, 117, 0.3);
  transform: scale(1.1);
}

.character-swipe-selector__action--select {
  color: var(--color-accent-secondary);
}

.character-swipe-selector__action--select:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 12px rgba(152, 195, 121, 0.3);
  transform: scale(1.1);
}

.character-swipe-selector__action-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.character-swipe-selector__action-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Empty State */
.character-swipe-selector__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
}

.character-swipe-selector__empty-icon {
  font-size: 48px;
  color: var(--color-text-muted);
  opacity: 0.4;
}

.character-swipe-selector__empty-text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
}

.character-swipe-selector__create-btn {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.character-swipe-selector__create-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  box-shadow: 0 0 12px rgba(97, 175, 239, 0.3);
}

/* Hint Footer */
.character-swipe-selector__hint {
  margin-top: auto;
  padding-top: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.character-swipe-selector__hint-key {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(97, 175, 239, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .character-swipe-selector {
    padding: var(--space-4);
  }

  .character-swipe-selector__stack {
    max-width: 280px;
    height: 380px;
  }

  .character-swipe-selector__title {
    font-size: var(--font-size-xl);
  }

  .character-swipe-card {
    padding: var(--space-4);
  }

  .character-swipe-card__avatar {
    width: 64px;
    height: 64px;
  }

  .character-swipe-card__initial {
    font-size: var(--font-size-2xl);
  }

  .character-swipe-selector__action {
    width: 56px;
    height: 56px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .character-swipe-selector {
    animation: none;
  }

  .character-swipe-card {
    transition: none !important;
    will-change: auto;
  }

  .character-swipe-selector__action {
    transition: none;
  }

  .character-swipe-selector__create-btn {
    transition: none;
  }
}
/**
 * Guest Limit — Base Styles
 * ==========================
 * Guest limit UI, usage meters, token breakdown modal base,
 * and session expiry components.
 */

/*
 * Guest Limit Modal Organism
 * ==========================
 * Modal displayed when guest users reach their token limit.
 * Includes invite code redemption form and token usage display.
 * Uses design tokens from: terminal/_tokens.css
 */

/* Modal Container */
.guest-limit-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.guest-limit-modal.visible {
  opacity: 1;
  visibility: visible;
}

/* Backdrop */
.guest-limit-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Modal Content */
.guest-limit-content {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px var(--overlay-medium);
  transform: translateY(-20px);
  transition: transform var(--transition-normal);
}

.guest-limit-modal.visible .guest-limit-content {
  transform: translateY(0);
}

/* Title */
.guest-limit-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-warning);
  margin: 0 0 var(--space-3);
  text-align: center;
}

/* Message */
.guest-limit-message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
  text-align: center;
}

/* Token Usage Display */
.token-usage-display {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.token-bar {
  height: 8px;
  background: var(--color-bg-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.token-bar-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background-color var(--transition-fast);
}

.token-bar-fill.warning {
  background: var(--color-accent-warning);
}

.token-bar-fill.critical {
  background: var(--color-accent-error);
}

.token-usage-text {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
}

/* Invite Code Section */
.invite-code-section {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.invite-code-section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3);
  text-align: center;
}

.invite-code-input-group {
  display: flex;
  gap: var(--space-2);
}

.invite-code-input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.invite-code-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 139, 92, 246), 0.2);
}

.invite-code-input::placeholder {
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.invite-code-submit {
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.invite-code-submit:hover:not(:disabled) {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
}

.invite-code-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error and Success Messages */
.guest-limit-error {
  color: var(--color-accent-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  text-align: center;
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-error) 10%, transparent);
  border-radius: var(--radius-sm);
}

.guest-limit-success {
  color: var(--color-accent-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  text-align: center;
  padding: var(--space-2);
  background: rgba(var(--color-accent-secondary-rgb, 34, 197, 94), 0.1);
  border-radius: var(--radius-sm);
}

/* Footer */
.guest-limit-footer {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.guest-limit-signup-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.guest-limit-signup-btn:hover {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

.guest-limit-signup-btn:active {
  transform: translateY(0);
}

.guest-limit-footer-secondary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.guest-limit-footer-divider {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.guest-limit-signin-link {
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.guest-limit-signin-link:hover {
  color: var(--color-accent-primary-hover, #7c3aed);
  text-decoration: underline;
}

.guest-limit-close {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.guest-limit-close:hover {
  color: var(--color-text-secondary);
}

/* Status Bar Token Status Molecule — REMOVED (#4267, panel audit 6.4).
 * The .token-status widget was deleted from the status bar; these milestone
 * colors moved with it. The guest-limit modal carries the consequential
 * signal (read-only mode + invite-code prompt) without leaking raw counts. */

/* Read-only mode indicator on input */
.terminal-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

.terminal-input:disabled::placeholder {
  color: var(--color-accent-warning);
}

/* Guest Cap Exceeded Page
   =======================
   Full-page display when guest creation is blocked due to cap */

.guest-cap-exceeded-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--color-bg-primary);
}

.guest-cap-exceeded-page .guest-limit-content {
  max-width: 480px;
  animation: fadeInUp 0.5s ease-out;
}

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

.cap-status-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.cap-status-icon {
  color: var(--color-accent-warning);
}

.cap-status-text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  text-align: center;
}

.guest-limit-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.action-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.action-divider::before,
.action-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-default);
}

.signin-section {
  display: flex;
  justify-content: center;
}

.signin-button {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  color: var(--color-accent-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.signin-button:hover {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent, #fff);
}

.invite-code-form {
  width: 100%;
}

.footer-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  line-height: 1.5;
}

/* Token Breakdown Modal
   =====================
   Detailed token usage modal */

.token-breakdown-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sky);
  background: var(--overlay-dark);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  transform: none;
}

.token-breakdown-modal.active {
  opacity: 1;
  visibility: visible;
}

.token-breakdown-content {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px var(--overlay-medium);
  transform: translateY(-20px) scale(0.95);
  transition: transform var(--transition-normal);
}

.token-breakdown-modal.active .token-breakdown-content {
  transform: translateY(0) scale(1);
}
/**
 * Guest Limit — Badges & Indicators
 * ====================================
 * Token breakdown content, guest badge, party badge,
 * and turn indicator badge styles.
 */

.token-breakdown-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.token-breakdown-content .modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.token-breakdown-content .modal-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.token-breakdown-content .modal-close:hover {
  color: var(--color-text-primary);
}

/* Token Meter */
.token-breakdown-content .token-meter {
  margin-bottom: var(--space-4);
}

.token-breakdown-content .meter-track {
  height: 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.token-breakdown-content .meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

/* Note: Old .meter-fill.warning and .meter-fill.critical removed - no longer using percentage-based warnings */

.token-breakdown-content .meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

/* Breakdown Stats */
.token-breakdown-content .breakdown-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.token-breakdown-content .stat {
  text-align: center;
}

.token-breakdown-content .stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.token-breakdown-content .stat-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
}

/* Token Explainer */
.token-breakdown-content .token-explainer {
  margin-bottom: var(--space-4);
}

.token-breakdown-content .token-explainer h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.token-breakdown-content .token-explainer p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.token-breakdown-content .model-info,
.token-breakdown-content .cost-info {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-right: var(--space-2);
}

.token-breakdown-content .model-label,
.token-breakdown-content .cost-label {
  color: var(--color-text-muted);
}

/* Upgrade CTA */
.token-breakdown-content .upgrade-cta {
  text-align: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.token-breakdown-content .upgrade-cta p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.token-breakdown-content .btn--primary {
  display: inline-block;
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.token-breakdown-content .btn--primary:hover {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
}

.token-breakdown-content .btn--primary:active {
  transform: translateY(0);
}

/* Milestone Progress Track */
.token-breakdown-content .milestone-progress {
  margin: var(--space-4) 0;
}

.token-breakdown-content .milestone-progress h4 {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.token-breakdown-content .milestone-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.token-breakdown-content .milestone-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  opacity: 0.4;
  transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.token-breakdown-content .milestone-marker.achieved {
  opacity: 1;
  transform: scale(1.1);
}

.token-breakdown-content .milestone-icon {
  font-size: var(--font-size-xl);
}

.token-breakdown-content .milestone-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Stat value emphasis for total */
.token-breakdown-content .stat--primary .stat-value {
  font-size: var(--font-size-xl);
  color: var(--color-accent-primary);
}

/* ========================================
   Guest Badge (Status Bar)
   ======================================== */

.guest-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.guest-badge:hover {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

.guest-badge__icon {
  font-size: var(--font-size-sm);
}

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

/* Responsive: hide text on small screens */
@media (max-width: 768px) {
  .guest-badge__text {
    display: none;
  }

  .guest-badge {
    padding: var(--space-1);
  }
}

/* ==========================================================================
   Party Badge - Multiplayer indicator in status bar
   ========================================================================== */

.party-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.party-badge:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(6, 182, 212, 0.15));
  border-color: rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}

.party-badge__icon {
  font-size: var(--font-size-sm);
}

.party-badge__text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-party-teal, #14b8a6);
  text-transform: uppercase;
}

.party-badge__indicator {
  font-size: var(--font-size-xs);
  color: var(--color-party-teal, #14b8a6);
  animation: pulse-indicator 1.5s ease-in-out infinite;
}

/* State-driven visibility (preferred over inline style mutations) */
.party-badge__indicator--hidden {
  display: none;
}

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

/* Processing state - pulsing animation when party members are typing */
.party-badge--processing {
  animation: party-processing-pulse 1.5s ease-in-out infinite;
}

@keyframes party-processing-pulse {
  0%, 100% {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
    border-color: rgba(20, 184, 166, 0.3);
  }
  50% {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(6, 182, 212, 0.2));
    border-color: rgba(20, 184, 166, 0.6);
  }
}

/* Responsive: hide text on small screens */
@media (max-width: 768px) {
  .party-badge__text {
    display: none;
  }

  .party-badge {
    padding: var(--space-1);
  }

  .party-badge__indicator {
    display: none;
  }
}

/* ==========================================================================
   Turn Indicator Badge - Whose turn is it in turn-based mode
   ========================================================================== */

.turn-indicator-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-mono);
}

.turn-indicator-badge.hidden {
  display: none;
}

/* Your Turn - Prominent green with glow */
.turn-indicator-badge--your-turn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.2));
  border: 2px solid #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  animation: turn-badge-glow 1.5s ease-in-out infinite;
}

.turn-indicator-badge--your-turn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(22, 163, 74, 0.3));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
}

.turn-indicator-badge--your-turn .turn-indicator-badge__text {
  color: #22c55e;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

@keyframes turn-badge-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
  }
}

/* Flash when turn changes to you */
.turn-indicator-badge--flash {
  animation: turn-badge-flash 0.4s ease-out 3;
}

@keyframes turn-badge-flash {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

/* Waiting for another player - Subtle amber */
.turn-indicator-badge--waiting {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.turn-indicator-badge--waiting:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: rgba(234, 179, 8, 0.6);
}

.turn-indicator-badge--waiting .turn-indicator-badge__icon {
  animation: turn-waiting-spin 3s linear infinite;
}

.turn-indicator-badge--waiting .turn-indicator-badge__text {
  color: #eab308;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes turn-waiting-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.turn-indicator-badge__icon {
  font-size: var(--font-size-sm);
}

.turn-indicator-badge__text {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

/* Responsive: simplify on small screens */
@media (max-width: 768px) {
  .turn-indicator-badge__text {
    display: none;
  }

  .turn-indicator-badge {
    padding: var(--space-1);
  }

  .turn-indicator-badge--your-turn {
    /* Keep the icon visible but make it more prominent */
    font-size: var(--font-size-base);
  }
}
/**
 * Guest Limit — Import Hub
 * ==========================
 * Guest limit UI, usage meters, badges, and indicators.
 *
 * Decomposed into focused files under guest_limit/ for maintainability.


 */
/*
 * Organism: Landing Post-its
 * ==========================
 * Informational sticky notes shown on first session visit to the terminal,
 * alongside the boot sequence. Ported from the former landing page.
 *
 * Used by: app/views/terminal/_landing_postits.html.erb
 * Controlled by: app/javascript/controllers/terminal/landing_postits_controller.js
 *
 * Distinct from:
 *   - .postit (atom) — used by _floating_postits for lobby action cards
 *   - .sticky-note  — used by other surface components
 */

/* ── Container (fixed viewport wrapper) ── */
.landing-postits {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  pointer-events: none; /* children opt in */
}

/* ── Sticky Notes on Monitor ── */
.monitor-note {
  --note-rotate: 0deg;
  position: fixed;
  z-index: var(--z-panel-active);
  width: 180px;
  padding: 14px 14px 12px;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--note-rotate));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  pointer-events: auto;
}

.monitor-note:hover {
  transform: rotate(var(--note-rotate)) scale(1.03);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
}

/* Note falling-off animation when its modal closes */
.monitor-note--falling {
  transition: transform 0.6s ease-in, opacity 0.6s ease-in;
  transform: translateY(120vh) rotate(15deg) !important;
  opacity: 0;
  pointer-events: none;
}

/* Note colors */
.note--yellow { background: #fff9c4; color: #3e3a00; }
.note--blue   { background: #bbdefb; color: #0d2744; }
.note--green  { background: #c8e6c9; color: #1b3a1c; }
.note--pink   { background: #f8bbd0; color: #3e1929; }

/* Tape decoration */
.note-tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 60px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(200, 200, 200, 0.3);
  z-index: var(--z-raised);
}

/* Pin decoration */
.note-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 5px 5px, #ef5350, #b71c1c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: var(--z-raised);
}

.monitor-note__title {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 4px;
}

.monitor-note__teaser {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.75;
}

/* ── Note Modals ── */
.note-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-panel-active);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.note-modal-backdrop--hidden {
  display: none;
}

.note-modal {
  position: relative;
  max-width: 480px;
  width: 90%;
  padding: 32px 28px 28px;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.note-modal--yellow { background: #fff9c4; color: #3e3a00; }
.note-modal--blue   { background: #bbdefb; color: #0d2744; }
.note-modal--green  { background: #c8e6c9; color: #1b3a1c; }
.note-modal--pink   { background: #f8bbd0; color: #3e1929; }

/* State-driven visibility (preferred over inline style mutations) */
.note-modal--hidden {
  display: none;
}

.monitor-note--hidden {
  display: none;
}

.note-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  line-height: 1;
  padding: 4px;
}

.note-modal__close:hover { opacity: 1; }

.note-heading {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
  line-height: 1.3;
}

.note-body {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 15px;
  line-height: 1.65;
}

.note-body p { margin-bottom: 10px; }
.note-body p:last-child { margin-bottom: 0; }

.note-body ol {
  padding-left: 22px;
  margin: 8px 0;
}

.note-body ol li {
  margin-bottom: 6px;
}

.note-body strong {
  font-weight: 700;
}

/* ── Responsive ── */

/* Mobile (<768px) — hide post-its entirely (#4276).
 * On narrow viewports the scattered inline-positioned notes overlap the boot
 * text and each other; rather than reflow, we remove them from the layout
 * flow per JP. The DOM still mounts (controller no-ops gracefully when no
 * .monitor-note children render), so the modal backdrop and any future
 * reveal hook remain available. Desktop layout above 768px is untouched. */
@media (max-width: 767px) {
  .landing-postits,
  .monitor-note,
  .note-modal-backdrop {
    display: none !important;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .monitor-note--falling {
    transition: none;
  }
}
/**
 * Help — Base Styles
 * ====================
 * Base help content, keyboard shortcut tables, and help card styles.
 */

/**
 * Help Panel
 * ==========
 * Styles for the user help and quick reference panel.
 */

.help-panel-content {
  padding: var(--terminal-spacing-lg);
  color: var(--terminal-text-primary);
  overflow-y: auto;
  height: 100%;
}

.help-section {
  margin-bottom: var(--terminal-spacing-lg);
}

.help-section--footer {
  margin-top: auto;
  padding-top: var(--terminal-spacing-lg);
  border-top: 1px dashed var(--terminal-border);
}

.help-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--terminal-text-primary);
  margin: 0 0 var(--terminal-spacing-sm) 0;
  background: linear-gradient(90deg, var(--terminal-cyan), var(--terminal-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.help-section__subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-yellow);
  margin: 0 0 var(--terminal-spacing-sm) 0;
}

.help-section__text {
  font-size: 0.9rem;
  color: var(--terminal-text-secondary);
  margin: 0;
  line-height: 1.5;
}

.help-section__text--muted {
  color: var(--terminal-text-muted);
  font-style: italic;
}

.help-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.help-list li {
  display: flex;
  align-items: baseline;
  gap: var(--terminal-spacing-sm);
  padding: var(--terminal-spacing-xs) 0;
  font-size: 0.875rem;
  color: var(--terminal-text-secondary);
}

.help-list li code {
  font-family: var(--terminal-font-mono);
  background: var(--terminal-bg-elevated);
  color: var(--terminal-green);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

.help-key {
  font-family: var(--terminal-font-mono);
  color: var(--terminal-cyan);
  min-width: 120px;
  flex-shrink: 0;
}

.help-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: var(--terminal-spacing-xs);
}

.help-badge--vanilla {
  background: var(--terminal-bg-elevated);
  color: var(--terminal-text-secondary);
  border: 1px solid var(--terminal-border);
}

.help-badge--homebrew {
  background: rgba(var(--terminal-purple-rgb), 0.2);
  color: var(--terminal-purple);
  border: 1px solid var(--terminal-purple);
}

.help-badge--presets {
  background: rgba(var(--terminal-green-rgb), 0.2);
  color: var(--terminal-green);
  border: 1px solid var(--terminal-green);
}

/* Creation mode badges */
.help-badge--form {
  background: rgba(var(--terminal-cyan-rgb), 0.2);
  color: var(--terminal-cyan);
  border: 1px solid var(--terminal-cyan);
}

.help-badge--guided {
  background: rgba(var(--terminal-yellow-rgb), 0.2);
  color: var(--terminal-yellow);
  border: 1px solid var(--terminal-yellow);
}

.help-badge--immersive {
  background: rgba(var(--terminal-purple-rgb), 0.2);
  color: var(--terminal-purple);
  border: 1px solid var(--terminal-purple);
}

/* Help description text for creation modes */
.help-description {
  color: var(--terminal-text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.help-list--tips li {
  flex-wrap: wrap;
}

.help-list--tips li strong {
  color: var(--terminal-text-primary);
  min-width: 140px;
}

/* ========================================
 * Help Card (Inline Narrative Help)
 * Displayed when user types "help" or "?"
 * ======================================== */

.help-card {
  background: var(--terminal-bg-elevated);
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  padding: var(--terminal-spacing-md);
  margin: var(--terminal-spacing-sm) 0;
  max-width: 600px;
}

.help-card__header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  margin-bottom: var(--terminal-spacing-md);
  padding-bottom: var(--terminal-spacing-sm);
  border-bottom: 1px solid var(--terminal-border);
}

.help-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--terminal-cyan), var(--terminal-purple));
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--terminal-bg-primary);
}

.help-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--terminal-text-primary);
}

.help-card__section {
  margin-bottom: var(--terminal-spacing-md);
}

.help-card__section:last-of-type {
  margin-bottom: 0;
}

.help-card__section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terminal-text-muted);
  margin-bottom: var(--terminal-spacing-xs);
}

.help-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--terminal-spacing-xs);
}

.help-card__examples {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
  margin-top: var(--terminal-spacing-xs);
}

.help-card__hint {
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
  margin-bottom: var(--terminal-spacing-xs);
}

.help-card__hint code {
  font-family: var(--terminal-font-mono);
  background: var(--terminal-bg-tertiary);
  color: var(--terminal-cyan);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.75rem;
}

.help-card__footer {
  margin-top: var(--terminal-spacing-md);
  padding-top: var(--terminal-spacing-sm);
  border-top: 1px dashed var(--terminal-border);
  font-size: 0.85rem;
  color: var(--terminal-text-muted);
  font-style: italic;
  text-align: center;
}

/* Help Command Chips */
.help-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  padding: 6px 10px;
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.help-chip:hover {
  background: var(--terminal-bg-secondary);
  border-color: var(--terminal-cyan);
  color: var(--terminal-text-primary);
  transform: translateY(-1px);
}

.help-chip:active {
  transform: translateY(0);
}

.help-chip code {
  font-family: var(--terminal-font-mono);
  color: var(--terminal-green);
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
}

.help-chip:hover code {
  color: var(--terminal-cyan);
}

/* Example chips - wider, full row */
.help-chip--example {
  width: 100%;
  justify-content: flex-start;
  background: var(--terminal-bg-secondary);
  border-style: dashed;
}

.help-chip--example:hover {
  border-style: solid;
}
/**
 * Help — Tabbed Panel
 * =====================
 * Tabbed help panel for contextual help sections.
 */

/* ========================================
 * Tabbed Help Panel
 * Card-based layout with clickable commands
 * ======================================== */

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

/* Hero Header with Context */
.help-panel__hero {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-md);
  padding: var(--terminal-spacing-md);
  background: linear-gradient(135deg, var(--terminal-bg-elevated), var(--terminal-bg-secondary));
  border-bottom: 1px solid var(--terminal-border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.help-panel__hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terminal-cyan), var(--terminal-purple));
}

/* Color variants for hero accent */
.help-panel__hero--cyan::before { background: var(--terminal-cyan); }
.help-panel__hero--green::before { background: var(--terminal-green); }
.help-panel__hero--red::before { background: var(--terminal-red); }
.help-panel__hero--yellow::before { background: var(--terminal-yellow); }
.help-panel__hero--purple::before { background: var(--terminal-purple); }
.help-panel__hero--blue::before { background: var(--terminal-blue, #60a5fa); }
.help-panel__hero--orange::before { background: var(--terminal-orange, #fb923c); }

.help-panel__hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--terminal-bg-tertiary);
  border-radius: 12px;
  border: 1px solid var(--terminal-border);
  flex-shrink: 0;
}

.help-panel__hero-icon svg {
  width: 24px;
  height: 24px;
  opacity: 0.8;
}

.help-panel__hero--cyan .help-panel__hero-icon { border-color: var(--terminal-cyan); }
.help-panel__hero--cyan .help-panel__hero-icon svg { color: var(--terminal-cyan); }
.help-panel__hero--green .help-panel__hero-icon { border-color: var(--terminal-green); }
.help-panel__hero--green .help-panel__hero-icon svg { color: var(--terminal-green); }
.help-panel__hero--red .help-panel__hero-icon { border-color: var(--terminal-red); }
.help-panel__hero--red .help-panel__hero-icon svg { color: var(--terminal-red); }
.help-panel__hero--yellow .help-panel__hero-icon { border-color: var(--terminal-yellow); }
.help-panel__hero--yellow .help-panel__hero-icon svg { color: var(--terminal-yellow); }
.help-panel__hero--purple .help-panel__hero-icon { border-color: var(--terminal-purple); }
.help-panel__hero--purple .help-panel__hero-icon svg { color: var(--terminal-purple); }
.help-panel__hero--blue .help-panel__hero-icon { border-color: var(--terminal-blue, #60a5fa); }
.help-panel__hero--blue .help-panel__hero-icon svg { color: var(--terminal-blue, #60a5fa); }
.help-panel__hero--orange .help-panel__hero-icon { border-color: var(--terminal-orange, #fb923c); }
.help-panel__hero--orange .help-panel__hero-icon svg { color: var(--terminal-orange, #fb923c); }

.help-panel__hero-content {
  flex: 1;
  min-width: 0;
}

.help-panel__context-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.help-panel__context-badge--cyan { background: rgba(var(--terminal-cyan-rgb, 0, 206, 209), 0.2); color: var(--terminal-cyan); }
.help-panel__context-badge--green { background: rgba(var(--terminal-green-rgb, 0, 255, 0), 0.2); color: var(--terminal-green); }
.help-panel__context-badge--red { background: rgba(var(--terminal-red-rgb, 255, 0, 0), 0.2); color: var(--terminal-red); }
.help-panel__context-badge--yellow { background: rgba(var(--terminal-yellow-rgb, 255, 193, 7), 0.2); color: var(--terminal-yellow); }
.help-panel__context-badge--purple { background: rgba(var(--terminal-purple-rgb, 138, 43, 226), 0.2); color: var(--terminal-purple); }
.help-panel__context-badge--blue { background: rgba(96, 165, 250, 0.2); color: var(--terminal-blue, #60a5fa); }
.help-panel__context-badge--orange { background: rgba(251, 146, 60, 0.2); color: var(--terminal-orange, #fb923c); }

.help-panel__header {
  padding: var(--terminal-spacing-md);
  border-bottom: 1px solid var(--terminal-border);
  flex-shrink: 0;
}

.help-panel__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: var(--terminal-text-primary);
}

.help-panel__subtitle {
  font-size: 0.8rem;
  color: var(--terminal-text-muted);
  margin: 0;
}

/* Tab Navigation - Improved */
.help-tabs {
  display: flex;
  gap: 6px;
  padding: 8px var(--terminal-spacing-md);
  border-bottom: 1px solid var(--terminal-border);
  background: var(--terminal-bg-secondary);
  flex-shrink: 0;
}

.help-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  color: var(--terminal-text-muted);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.help-tab__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--terminal-bg-secondary);
  border-radius: 4px;
  font-family: var(--terminal-font-mono);
}

.help-tab__label {
  font-weight: 500;
}

.help-tab:hover {
  color: var(--terminal-text-primary);
  border-color: var(--terminal-text-muted);
  transform: translateY(-1px);
}

.help-tab.active {
  color: var(--terminal-cyan);
  border-color: var(--terminal-cyan);
  background: rgba(var(--terminal-cyan-rgb, 0, 206, 209), 0.1);
}

.help-tab.active .help-tab__number {
  background: var(--terminal-cyan);
  color: var(--terminal-bg-primary);
}

/* Tab Content Area */
.help-tab-content {
  display: none;
  padding: var(--terminal-spacing-md);
  overflow-y: auto;
  flex: 1;
}

.help-tab-content.active {
  display: block;
}

/* Command Cards */
.help-command-card {
  background: var(--terminal-bg-elevated);
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  margin-bottom: var(--terminal-spacing-md);
  overflow: hidden;
}

.help-command-card__header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  padding: var(--terminal-spacing-sm) var(--terminal-spacing-md);
  background: var(--terminal-bg-tertiary);
  border-bottom: 1px solid var(--terminal-border);
}

.help-command-card__icon {
  font-size: 1rem;
  line-height: 1;
}

.help-command-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--terminal-text-primary);
}

.help-command-card__body {
  padding: var(--terminal-spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--terminal-spacing-sm);
}

.help-command-card__tip {
  width: 100%;
  padding-top: var(--terminal-spacing-sm);
  margin-top: var(--terminal-spacing-sm);
  border-top: 1px dashed var(--terminal-border);
  font-size: 0.8rem;
  color: var(--terminal-text-muted);
  font-style: italic;
}

.help-command-card__tip::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-lightbulb) no-repeat center / contain;
}

/* Clickable Command Chips */
.help-command-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  padding: 6px 10px;
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-family: inherit;
}

.help-command-chip:hover {
  background: var(--terminal-bg-tertiary);
  border-color: var(--terminal-cyan);
  color: var(--terminal-text-primary);
  transform: translateY(-1px);
}

.help-command-chip:active {
  transform: translateY(0);
}

.help-command-chip__label {
  font-weight: 500;
  color: var(--terminal-cyan);
}

.help-command-chip code {
  font-family: var(--terminal-font-mono);
  color: var(--terminal-green);
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
}

.help-command-chip:hover code {
  color: var(--terminal-cyan);
}

/* Chip Variants */
.help-command-chip--shortcut {
  background: rgba(var(--terminal-purple-rgb, 138, 43, 226), 0.15);
  border-color: var(--terminal-purple);
}

.help-command-chip--shortcut .help-command-chip__label {
  color: var(--terminal-purple);
}

.help-command-chip--action {
  background: rgba(var(--terminal-yellow-rgb, 255, 193, 7), 0.1);
  border-color: var(--terminal-yellow);
}

.help-command-chip--action .help-command-chip__label {
  color: var(--terminal-yellow);
}

/* Tooltips for chips */
.help-command-chip[data-tooltip] {
  position: relative;
}

.help-command-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--terminal-bg-primary);
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--terminal-text-secondary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  z-index: var(--z-panel);
  pointer-events: none;
}

.help-command-chip[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--terminal-border);
  opacity: 0;
  visibility: hidden;
  transition: color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
  z-index: var(--z-panel);
}

.help-command-chip[data-tooltip]:hover::after,
.help-command-chip[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Info List (for action economy, tips, etc.) */
.help-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.help-info-list li {
  padding: var(--terminal-spacing-xs) 0;
  font-size: 0.85rem;
  color: var(--terminal-text-secondary);
  line-height: 1.5;
}

.help-info-list li + li {
  border-top: 1px dashed var(--terminal-border);
  margin-top: var(--terminal-spacing-xs);
  padding-top: var(--terminal-spacing-sm);
}

.help-info-list li strong {
  color: var(--terminal-cyan);
}

.help-info-list li code {
  font-family: var(--terminal-font-mono);
  background: var(--terminal-bg-tertiary);
  color: var(--terminal-green);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
}

/* Help Card Description (inline descriptions for sections) */
.help-card-desc {
  font-size: 0.85rem;
  color: var(--terminal-text-secondary);
  margin: 0 0 var(--terminal-spacing-sm);
  line-height: 1.5;
}

/* Footer */
.help-panel__footer {
  padding: var(--terminal-spacing-sm) var(--terminal-spacing-md);
  border-top: 1px dashed var(--terminal-border);
  font-size: 0.8rem;
  color: var(--terminal-text-muted);
  font-style: italic;
  text-align: center;
  flex-shrink: 0;
}
/**
 * Help Panel — Import Hub
 * =========================
 * Contextual help panel with cards and tabbed navigation.
 *
 * Decomposed into focused files under help/ for maintainability.


 */
/* Terminal Hotbar - Quick action chip style contextual action bar
 * ========================================================================== */

.terminal-hotbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  flex-shrink: 0;
}

/* Floating mode (for game rooms) */
.terminal-hotbar--floating {
  position: fixed;
  bottom: var(--space-4, 16px);
  right: var(--space-4, 16px);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-floating, 100);
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

/* Hotbar Item (Button) - Quick action chip style */
.terminal-hotbar__item,
button.terminal-hotbar__item {
  /* Reset default button styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  /* Chip styling */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px 10px;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-text-secondary);
  font-size: 11px;
  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), transform var(--transition-fast, 0.15s);
  position: relative;
  white-space: nowrap;
}

.terminal-hotbar__item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
}

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

.terminal-hotbar__item:active,
.terminal-hotbar__item--active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent-primary);
}

/* Icon - compact inline */
.terminal-hotbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.terminal-hotbar__icon svg {
  width: 12px;
  height: 12px;
}

/* Label - inline with icon */
.terminal-hotbar__label {
  font-size: 11px;
  white-space: nowrap;
}

/* Keyboard shortcut hint - shown after label */
.terminal-hotbar__shortcut {
  font-size: 9px;
  padding: 0 4px;
  margin-left: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
  opacity: 0.7;
}

.terminal-hotbar__item:hover .terminal-hotbar__shortcut {
  opacity: 1;
}

/* Variant: Primary (highlighted action) - gold accent */
.terminal-hotbar__item--primary {
  background: rgba(255, 215, 0, 0.12);
  border-color: rgba(255, 215, 0, 0.25);
  color: var(--color-gold, #ffd700);
}

.terminal-hotbar__item--primary:hover {
  background: rgba(255, 215, 0, 0.18);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--color-gold, #ffd700);
}

.terminal-hotbar__item--primary .terminal-hotbar__shortcut {
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
}

/* Variant: Subtle (secondary actions) */
.terminal-hotbar__item--subtle {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}

.terminal-hotbar__item--subtle:hover {
  color: var(--color-text-secondary);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Variant: Danger (destructive actions) */
.terminal-hotbar__item--danger {
  color: var(--color-accent-error);
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
}

.terminal-hotbar__item--danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Context: Combat (red accent border) */
.terminal-hotbar--combat {
  border-color: rgba(239, 68, 68, 0.3);
}

.terminal-hotbar--floating.terminal-hotbar--combat {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2), 0 0 0 1px rgba(239, 68, 68, 0.1);
}

/* Context: Character Creation (purple accent) */
.terminal-hotbar--creation,
.terminal-hotbar--character_creation {
  border-color: rgba(124, 58, 237, 0.3);
}

.terminal-hotbar--floating.terminal-hotbar--creation,
.terminal-hotbar--floating.terminal-hotbar--character_creation {
  border-color: rgba(124, 58, 237, 0.5);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2), 0 0 0 1px rgba(124, 58, 237, 0.1);
}

/* Context: Lobby (transparent, chips only) */
.terminal-hotbar--lobby {
  background: transparent;
  border-bottom: none;
  padding: var(--space-1, 4px) 0;
}

/* Transition animation for context changes */
.terminal-hotbar--transitioning {
  animation: hotbarTransition 0.3s ease-out;
}

@keyframes hotbarTransition {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .terminal-hotbar__item:active {
    transform: none;
  }

  .terminal-hotbar--transitioning {
    animation: none;
  }
}

/* Mobile: Horizontal scroll with icons only */
@media (max-width: 640px) {
  .terminal-hotbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: var(--space-1, 4px);
  }

  .terminal-hotbar::-webkit-scrollbar {
    display: none;
  }

  .terminal-hotbar__item {
    padding: 6px 8px;
  }

  .terminal-hotbar__label {
    display: none;
  }

  .terminal-hotbar__shortcut {
    display: none;
  }

  .terminal-hotbar__icon {
    width: 16px;
    height: 16px;
  }

  .terminal-hotbar__icon svg {
    width: 14px;
    height: 14px;
  }

  /* Floating mode on mobile: full width at bottom */
  .terminal-hotbar--floating {
    left: var(--space-2, 8px);
    right: var(--space-2, 8px);
    bottom: var(--space-2, 8px);
    justify-content: center;
  }
}

/* Compact mode - icons with shortcut numbers only */
.terminal-hotbar--compact .terminal-hotbar__label {
  display: none;
}

.terminal-hotbar--compact .terminal-hotbar__item {
  padding: 6px 10px;
}

/* Loading state */
.terminal-hotbar--loading {
  opacity: 0.6;
  pointer-events: none;
}

.terminal-hotbar--loading .terminal-hotbar__item {
  cursor: wait;
}
/* =========================================
   Shop Browser Styles
   In-game merchant shop interface
   ========================================= */

/* Container */
.shop-browser {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Empty State */
.shop-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-text-muted);
}

.shop-empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-md);
  opacity: 0.5;
}

.shop-empty-text {
  font-size: 1.1rem;
  margin: 0 0 var(--space-sm);
}

.shop-empty-hint {
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 0;
}

/* Header */
.shop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.shop-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-accent);
  margin: 0;
}

.shop-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}

/* NPC Greeting */
.shop-npc {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm);
}

.shop-npc-name {
  font-weight: bold;
  color: var(--color-accent);
}

.shop-npc-greeting {
  color: var(--color-text-muted);
}

/* Gold Display */
.shop-gold {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(135deg, var(--color-surface), var(--color-surface-hover));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-weight: bold;
}

.shop-gold-icon {
  font-size: 1.2rem;
}

.shop-gold-amount {
  color: var(--color-gold);
  font-size: 1.1rem;
}

.shop-gold-label {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Filters */
.shop-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.shop-category-btn {
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shop-category-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
}

.shop-category-btn--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Search */
.shop-search {
  width: 100%;
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

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

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

/* Inventory List */
.shop-inventory {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.shop-inventory-empty {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
}

/* Item Card */
.shop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.shop-item:hover {
  border-color: var(--color-accent);
}

.shop-item--featured {
  border-color: var(--color-gold);
  background: linear-gradient(135deg, var(--color-surface), var(--overlay-gold-subtle, rgba(255, 215, 0, 0.05)));
}

.shop-item--expensive {
  opacity: 0.7;
}

.shop-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  grid-column: 1;
}

.shop-item-name {
  font-weight: bold;
  color: var(--color-text);
}

.shop-item-rarity {
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  text-transform: capitalize;
}

/* Rarity colors follow WoW-style conventions */
.shop-item-rarity--common { background: var(--color-rarity-common, #888); color: var(--color-text-primary); }
.shop-item-rarity--uncommon { background: var(--color-rarity-uncommon, #1eff00); color: var(--color-bg-primary); }
.shop-item-rarity--rare { background: var(--color-rarity-rare, #0070dd); color: var(--color-text-primary); }
.shop-item-rarity--very-rare { background: var(--color-rarity-very-rare, #a335ee); color: var(--color-text-primary); }
.shop-item-rarity--legendary { background: var(--color-rarity-legendary, #ff8000); color: var(--color-text-primary); }
.shop-item-rarity--artifact { background: var(--color-rarity-artifact, #e6cc80); color: var(--color-bg-primary); }

/* Homebrew Badge */
.shop-item-homebrew {
  font-size: 0.65rem;
  padding: 2px 4px;
  background: var(--color-homebrew, var(--color-accent-purple));
  color: var(--color-text-primary);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.5px;
}

/* Homebrew Item Card Styling */
.shop-item--homebrew {
  border-left: 3px solid var(--color-homebrew, var(--color-accent-purple));
  background: linear-gradient(135deg, var(--color-surface), var(--overlay-purple-subtle, rgba(147, 51, 234, 0.05)));
}

.shop-item--homebrew:hover {
  border-color: var(--color-homebrew, var(--color-accent-purple));
}

/* Homebrew Modal Styling */
.shop-modal--homebrew {
  border: 2px solid var(--color-homebrew, var(--color-accent-purple));
}

.shop-modal--homebrew .shop-modal-title {
  color: var(--color-homebrew, var(--color-accent-purple));
}

.shop-item-details {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  grid-column: 1;
}

.shop-item-price {
  color: var(--color-gold);
  font-weight: bold;
}

.shop-item-stock {
  opacity: 0.7;
}

.shop-item-buy {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-on-accent);
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.shop-item-buy:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.shop-item-buy--disabled,
.shop-item-buy:disabled {
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Modal Overlay */
.shop-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-heavy, rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  animation: fadeIn 0.2s ease;
}

.shop-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  min-width: 300px;
  max-width: 90vw;
  animation: slideUp 0.2s ease;
}

.shop-modal-title {
  margin: 0 0 var(--space-md);
  font-size: 1.2rem;
  color: var(--color-accent);
}

.shop-modal-item {
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm);
}

.shop-item-desc {
  margin: var(--space-xs) 0 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.shop-modal-price,
.shop-modal-gold {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  font-size: 0.95rem;
}

.shop-price-value {
  color: var(--color-gold);
  font-weight: bold;
}

.shop-gold-value {
  font-weight: bold;
}

.shop-gold-insufficient {
  color: var(--color-error, var(--color-accent-error));
}

.shop-modal-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.shop-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shop-btn--confirm {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.shop-btn--confirm:hover {
  filter: brightness(1.1);
}

.shop-btn--cancel {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.shop-btn--cancel:hover {
  background: var(--color-surface);
}

.shop-btn--disabled {
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Notifications */
.shop-notification {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: bold;
  z-index: var(--z-floating-above);
  animation: slideUp 0.3s ease;
}

.shop-notification--success {
  background: var(--color-success, var(--color-accent-secondary));
  color: var(--color-text-primary);
}

.shop-notification--error {
  background: var(--color-error, var(--color-accent-error));
  color: var(--color-text-primary);
}

.shop-notification--info {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.shop-notification--fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Animations */

/**
 * Creation Wizard — Base Styles
 * ===============================
 * Wizard prompt, character creation selection panel,
 * and skill selection enhancements.
 */

/* ========================================
   Wizard Question Prompt (in narrative panel)
   ======================================== */

.wizard-question-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.wizard-help-text {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

.wizard-ask-btn {
  padding: var(--space-sm) var(--space-lg);
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border-radius: 4px;
}

.wizard-ask-btn:hover {
  border-color: var(--color-accent-blue);
  background: var(--color-surface-hover);
  color: var(--color-accent-blue);
}

.wizard-question-input {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  animation: fadeIn 0.2s ease;
}

/* ========================================
   Character Creation Selection Panel
   ======================================== */

.character-creation-selection-panel {
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg);
  padding: var(--space-md);
}

.selection-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.selection-title {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--color-text);
  margin: 0 0 var(--space-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.selection-subtitle {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}

/* Selection Grid — matches creation-options__grid sizing */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: var(--space-sm);
}

.selection-grid--alignment {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
}

.selection-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
  font-family: var(--font-mono);
  position: relative;
  width: 100%;
}

.selection-card:hover {
  background: 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);
}

.selection-card--selected {
  border-color: var(--accent-color, #4f46e5);
  background: rgba(79, 70, 229, 0.15);
}

.selection-card--selected::after {
  content: '\2713';
  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;
}

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

.card-category {
  display: inline-block;
  font-size: 9px;
  color: var(--text-secondary, #888);
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: 9999px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 2px;
}

.card-description {
  display: none; /* Hidden for compact card display */
}

.selection-empty,
.selection-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-xl);
}

.selection-empty p,
.selection-loading p {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ========================================
   Skill Selection Panel Enhancements
   ======================================== */

.skill-selection-panel {
  padding: var(--space-md);
}

.skill-selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.skill-selection-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
}

.skill-selection-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.skill-selection-counter__current {
  color: var(--color-accent-primary);
  font-weight: 700;
}

.skill-selection-counter--complete {
  border-color: var(--color-accent-success);
  background: rgba(34, 197, 94, 0.1);
}

.skill-selection-counter--complete .skill-selection-counter__current {
  color: var(--color-accent-success);
}

/* Skill list layout */
.skill-selection-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
}

/* Individual skill item */
.skill-selection-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border: 2px 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;
  font-family: var(--font-mono);
}

.skill-selection-item:hover:not(.skill-selection-item--disabled) {
  border-color: var(--color-accent-primary);
  background: var(--color-surface-hover);
}

/* Selected skill */
.skill-selection-item--selected {
  border-color: var(--color-accent-primary);
  background: rgba(59, 130, 246, 0.1);
}

.skill-selection-item--selected .skill-selection-item__checkbox {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.skill-selection-item--selected .skill-selection-item__checkbox::after {
  content: '';
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-bg-primary);
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Background skill (auto-granted) - IMPROVED VISUAL DISTINCTION */
.skill-selection-item--background {
  border-color: var(--color-accent-success);
  background: rgba(34, 197, 94, 0.08);
  cursor: default;
  position: relative;
}

.skill-selection-item--background::before {
  content: 'From Background';
  position: absolute;
  top: -8px;
  right: var(--space-sm);
  padding: 2px 6px;
  background: var(--color-accent-success);
  color: var(--color-bg-primary);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 3px;
}

.skill-selection-item--background .skill-selection-item__checkbox {
  background: var(--color-accent-success);
  border-color: var(--color-accent-success);
}

.skill-selection-item--background .skill-selection-item__checkbox::after {
  content: '';
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--color-bg-primary);
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.skill-selection-item--background .skill-selection-item__name {
  color: var(--color-accent-success);
}

/* Disabled skill (max reached) */
.skill-selection-item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.skill-selection-item--disabled:hover {
  border-color: var(--color-border);
  background: var(--color-surface);
}

/* Checkbox element */
.skill-selection-item__checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

/* Skill name and ability */
.skill-selection-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.skill-selection-item__name {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
}

.skill-selection-item__ability {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Skill modifier */
.skill-selection-item__modifier {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent-primary);
  min-width: 32px;
  text-align: right;
}

/**
 * Creation Wizard — Filters & Equipment
 * =======================================
 * Ability filter tabs, equipment selection enhancements,
 * confirm selection button.
 */

   Ability Filter Tabs (for skills)
   ======================================== */

.ability-filter-tabs {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-xs);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow-x: auto;
  scrollbar-width: none;
}

.ability-filter-tabs::-webkit-scrollbar {
  display: none;
}

.ability-filter-tab {
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.ability-filter-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.ability-filter-tab--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* ========================================
   Equipment Selection Enhancements
   ======================================== */

.equipment-choice-group {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.equipment-choice-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.equipment-choice-group__label {
  font-weight: 600;
  color: var(--color-text);
}

.equipment-choice-group__or {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

/* Equipment option (radio-style) */
.equipment-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: var(--color-bg);
  border: 2px 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;
}

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

.equipment-option:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-surface-hover);
}

.equipment-option--selected {
  border-color: var(--color-accent-primary);
  background: rgba(59, 130, 246, 0.1);
}

.equipment-option__radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-option--selected .equipment-option__radio {
  border-color: var(--color-accent-primary);
}

.equipment-option--selected .equipment-option__radio::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--color-accent-primary);
  border-radius: 50%;
}

.equipment-option__name {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.equipment-option__details {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ========================================
   Confirm Selection Button
   ======================================== */

.selection-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-md);
  margin-top: var(--space-lg);
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.selection-confirm-btn:hover:not(:disabled) {
  background: var(--color-accent-secondary);
  transform: translateY(-1px);
}

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

.selection-confirm-btn--ready {
  background: var(--color-accent-success);
  animation: confirm-ready-pulse 2s ease-in-out infinite;
}

@keyframes confirm-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(34, 197, 94, 0.2); }
}

/**
 * Creation Wizard — Summary & Responsive
 * =========================================
 * Selection summary tray, responsive adjustments,
 * and character creation timeout recovery.
 */

   Selection Summary Tray (bottom bar)
   ======================================== */

.selection-summary-tray {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  z-index: var(--z-sticky);
}

.selection-summary-tray__info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.selection-summary-tray__count {
  font-weight: 600;
  color: var(--color-accent-primary);
}

.selection-summary-tray__btn {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.selection-summary-tray__btn:hover:not(:disabled) {
  background: var(--color-accent-secondary);
}

.selection-summary-tray__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

@media (max-width: 768px) {
  .skill-selection-list {
    grid-template-columns: 1fr;
  }

  .skill-selection-item--background::before {
    top: auto;
    bottom: -6px;
    right: 50%;
    transform: translateX(50%);
    font-size: 0.6rem;
  }

  .ability-filter-tabs {
    justify-content: flex-start;
  }

  .selection-summary-tray {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .selection-summary-tray__btn {
    width: 100%;
  }
}

/* ========================================
   Phase 1: P0-1 - Character Creation Timeout Recovery
   ======================================== */

.creation-timeout-recovery {
  margin: var(--space-4) 0;
  padding: var(--panel-padding);
  background: linear-gradient(
    135deg,
    rgba(229, 192, 123, 0.08) 0%,
    rgba(229, 192, 123, 0.03) 100%
  );
  border: 2px solid var(--color-accent-warning);
  border-radius: var(--radius-md);
  animation: recoveryFadeIn 0.3s ease-out;
}

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

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

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

.recovery-icon {
  font-size: var(--font-size-2xl);
  animation: recoveryPulse 2s ease-in-out infinite;
}

@keyframes recoveryPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

.recovery-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-warning);
}

.recovery-message {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-narrative);
  color: var(--color-text-primary);
}

.recovery-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.recovery-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  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);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  min-height: 44px; /* Accessibility: touch target */
}

.recovery-btn--primary {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.recovery-btn--primary:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 85%, white);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(97, 175, 239, 0.3);
}

.recovery-btn--primary:active {
  transform: translateY(0);
}

.recovery-btn--secondary {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.recovery-btn--secondary:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-text-secondary);
}

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

.btn--icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.btn-text {
  line-height: 1;
}

.recovery-tips {
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.recovery-tip {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .recovery-actions {
    flex-direction: column;
  }

  .recovery-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px; /* Larger touch target on mobile */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .creation-timeout-recovery {
    animation: none;
  }

  .recovery-icon {
    animation: none;
  }
}
/**
 * Creation Wizard — Import Hub
 * ==============================
 * Wizard question prompt, character creation panels, and responsive styles.
 *
 * Decomposed into focused files under wizard/ for maintainability.



 */
/*
 * Spectator Mode Styles
 * ======================
 * Styles for read-only spectator view of campaigns
 */

/* ========================================
   Spectator Mode Body State
   ======================================== */

/* Add subtle purple indicator to status bar when spectating */
body.spectator-mode .status-bar {
  border-top: 2px solid var(--color-spectator, #a78bfa);
}

/* Disable input styling in spectator mode */
body.spectator-mode .terminal-input-container input,
body.spectator-mode .terminal-input-container textarea {
  border-color: var(--color-spectator, #a78bfa);
  opacity: 0.6;
  cursor: not-allowed;
}

body.spectator-mode .terminal-input-container input:disabled,
body.spectator-mode .terminal-input-container textarea:disabled {
  background: rgba(167, 139, 250, 0.1);
}

/* Hide action buttons in spectator mode */
body.spectator-mode .quick-action-button,
body.spectator-mode .carousel-card__action-btn,
body.spectator-mode .story-choice-button {
  opacity: 0.5;
  pointer-events: none;
}

body.spectator-mode .quick-action-button::after,
body.spectator-mode .carousel-card__action-btn::after {
  content: '(Spectating)';
  font-size: 0.7rem;
  color: var(--color-spectator, #a78bfa);
  display: block;
}

/* ========================================
   Spectator Mode Banner
   ======================================== */

.spectator-mode-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(90deg, rgba(167, 139, 250, 0.15), rgba(139, 92, 246, 0.15));
  border-bottom: 1px solid rgba(167, 139, 250, 0.3);
  font-size: 0.875rem;
  color: var(--color-spectator, #a78bfa);
  z-index: var(--z-panel);
}

.spectator-mode-banner__icon {
  font-size: 1rem;
}

.spectator-mode-banner__text {
  font-weight: 500;
}

/* ========================================
   Spectator-Specific Narrative Styling
   ======================================== */

/* Add subtle indicator that you're watching */
body.spectator-mode .narrative-output::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--color-spectator, #a78bfa), transparent);
  opacity: 0.3;
}

/* ========================================
   Spectator Counter (for DM view)
   ======================================== */

.spectator-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.3);
  border-radius: 1rem;
  font-size: 0.75rem;
  color: var(--color-spectator, #a78bfa);
}

.spectator-counter__icon {
  font-size: 0.875rem;
}

.spectator-counter__count {
  font-weight: 600;
}

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  --color-spectator: #a78bfa;
  --color-spectator-dark: #7c3aed;
  --color-spectator-light: #c4b5fd;
}
/*
 * Campaign — Campaign overview
 * Extracted for maintainability (#2783).
 */

/*
 * Campaign Creator Panel Organism
 * ================================
 * Styling for the Campaign Creator room panels:
 * - Campaign Overview
 * - World Selector Advanced
 * - Party Manager
 * - Campaign Rules
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Shared Campaign Panel Styles
 * ========================================================================== */

.panel-campaign-overview,
.panel-world-selector-advanced,
.panel-party-manager,
.panel-campaign-rules {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* ==========================================================================
 * Campaign Overview Panel
 * ========================================================================== */

.campaign-overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.campaign-overview-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.campaign-overview-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.campaign-overview-header .panel-icon svg,
.campaign-overview-header .panel-icon .svg-icon,
.campaign-overview-header .panel-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

.campaign-overview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.campaign-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.campaign-stat {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.campaign-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

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

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.campaign-actions .btn {
  flex: 1;
  min-width: 140px;
}

/* ==========================================================================
 * World Dropdown (Campaign Overview)
 * ========================================================================== */

.info-item--world {
  position: relative;
}

.info-item--world .info-value {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-change-world {
  padding: 4px 10px;
  font-size: var(--font-size-xs);
  background: rgba(139, 92, 246, 0.2);
  color: var(--color-accent-info, #8b5cf6);
  border: 1px solid var(--color-accent-info, #8b5cf6);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-change-world:hover {
  background: rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.world-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-floating);
  min-width: 300px;
  max-width: 400px;
}

.world-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.world-dropdown-header strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.world-dropdown-close {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.world-dropdown-close:hover {
  color: var(--color-text-primary);
}

.world-dropdown-warning {
  padding: var(--space-2) var(--space-3);
  background: rgba(251, 191, 36, 0.1);
  border-bottom: 1px solid rgba(251, 191, 36, 0.3);
  color: var(--color-accent-warning);
  font-size: var(--font-size-sm);
  text-align: center;
}

.world-dropdown-options {
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-2);
}

.world-option {
  width: 100%;
  padding: var(--space-3);
  text-align: left;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  margin-bottom: var(--space-2);
}

.world-option:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.world-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.world-option--current {
  border-color: var(--color-accent-success);
  background: rgba(74, 222, 128, 0.1);
}

.world-option-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.world-option-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

.world-badge--homebrew {
  display: inline-block;
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  background: rgba(139, 92, 246, 0.2);
  color: var(--color-accent-info);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

.badge-current {
  padding: 2px 6px;
  font-size: var(--font-size-xs);
  background: rgba(74, 222, 128, 0.2);
  color: var(--color-accent-success);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ==========================================================================
 * World Selector Advanced Panel
 * ========================================================================== */

.world-selector-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.world-selector-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.world-selector-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.world-type-section {
  margin-bottom: var(--space-4);
}

.world-type-section h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.world-type-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.world-type-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.world-type-option:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.world-type-option.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-primary);
}

.world-type-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.world-type-content {
  flex: 1;
  min-width: 0;
}

.world-type-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.world-type-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.world-list {
  margin-top: var(--space-3);
}

.world-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-bottom: var(--space-1);
}

.world-option:hover {
  background: var(--color-bg-hover);
}

.world-option.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-secondary);
}

.fork-section,
.custom-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.fork-section.hidden,
.custom-section.hidden {
  display: none;
}

/*
 * Campaign — Party manager panel
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Party Manager Panel
 * ========================================================================== */

.party-manager-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.party-manager-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.party-manager-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.party-manager-header .panel-icon svg,
.party-manager-header .panel-icon .svg-icon,
.party-manager-header .panel-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

.party-manager-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

/* Party Manager: Empty state (no campaign) */
.party-manager-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.party-manager-empty__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.party-manager-empty__desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

/* Party Manager: Members list */
.party-manager-members__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.party-manager-members__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.party-manager-members__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.party-manager-members__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Party Manager: Join section */
.party-manager-join {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.party-manager-join__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.party-manager-join__row {
  display: flex;
  gap: var(--space-2);
}

.party-manager-join__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.party-manager-join__input::placeholder {
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.party-manager-join__btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.party-manager-join__btn:hover {
  filter: brightness(1.1);
}

/* Party Manager: Action buttons */
.party-manager-action-btn {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--space-2);
}

.party-manager-action-btn:hover {
  background: var(--color-bg-hover);
}

.party-manager-action-btn--danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.party-manager-action-btn--danger:hover {
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
}

/* Party Manager: Invite modal */
.party-manager-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.member-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.member-name {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.member-role {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.member-status {
  font-size: var(--font-size-xs);
}

.member-status.online {
  color: var(--color-success);
}

.member-status.offline {
  color: var(--color-text-muted);
}

.member-actions {
  display: flex;
  gap: var(--space-1);
}

.member-actions button {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.member-actions button:hover {
  background: var(--color-bg-hover);
}

.member-actions .btn-remove:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.member-item.role-dm {
  border-left: 3px solid var(--color-accent-primary);
}

.member-item.role-codm {
  border-left: 3px solid var(--color-warning);
}

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

.party-member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.party-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.party-member-avatar svg,
.party-member-avatar .svg-icon,
.party-member-avatar .svg-icon svg {
  width: 20px;
  height: 20px;
}

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

.party-member-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.party-member-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.party-member-role.role-dm {
  color: var(--color-accent-primary);
}

.party-member-role.role-co-dm {
  color: var(--color-accent-secondary);
}

.party-member-actions {
  display: flex;
  gap: var(--space-1);
}

.party-member-actions button {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.party-member-actions button:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.party-member-actions button.danger:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.invite-section {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.invite-section h4 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.invite-code-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
}

.invite-code-display code {
  flex: 1;
  color: var(--color-accent-primary);
}

.invite-code-display .copy-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.invite-code-display .copy-btn.copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

/*
 * Campaign — Join campaign section
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Join Campaign Section (Solo Players)
 * ========================================================================== */

.join-section {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.join-section h4 {
  margin-bottom: var(--space-1);
}

.join-section .section-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.join-controls {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.join-code-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  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-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.join-code-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.join-code-input::placeholder {
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: normal;
}

.join-code-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.join-feedback {
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.join-feedback.hidden {
  display: none;
}

.join-feedback--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.join-feedback--success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.join-feedback--loading {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
}

/* Browse Campaigns Link */
.browse-campaigns-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.or-divider {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.btn-browse-campaigns {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  justify-content: center;
}

.btn-browse-campaigns svg {
  width: 1rem;
  height: 1rem;
}

/* Solo Campaign Callout */
.solo-callout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: linear-gradient(135deg,
    rgba(155, 89, 182, 0.1) 0%,
    rgba(52, 152, 219, 0.1) 100%);
  border: 1px solid rgba(155, 89, 182, 0.3);
  border-radius: var(--radius-md);
}

.solo-callout .solo-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
}

.solo-callout .solo-text strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-base);
  color: var(--color-accent-primary);
}

.solo-callout .solo-text p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .join-controls {
    flex-direction: column;
  }

  .join-controls button {
    width: 100%;
  }

  .solo-callout {
    flex-direction: column;
    text-align: center;
  }
}

/*
 * Campaign — Campaign rules
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Campaign Rules Panel
 * ========================================================================== */

.campaign-rules-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.campaign-rules-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.campaign-rules-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}

.dm-mode-section,
.difficulty-section,
.house-rules-section,
.content-section {
  margin-bottom: var(--space-4);
}

.campaign-overview .section-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.dm-mode-options,
.difficulty-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dm-mode-option,
.difficulty-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dm-mode-option:hover,
.difficulty-option:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.dm-mode-option.selected,
.difficulty-option.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-primary);
}

.mode-icon,
.diff-icon {
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.mode-content,
.diff-content {
  flex: 1;
  min-width: 0;
}

.mode-name,
.diff-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: block;
}

.mode-desc,
.diff-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: block;
}

.house-rules-list,
.content-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.house-rule-option,
.content-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.house-rule-option input[type="checkbox"],
.content-option input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.rule-name,
.content-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  display: block;
}

.rule-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  display: block;
}

/* ==========================================================================
 * Status Indicators
 * ========================================================================== */

.status-badge {
  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-medium);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.status-badge.status--active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-badge.status--inactive {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.status-badge.status--pending {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* ==========================================================================
 * Empty States
 * ========================================================================== */

.campaign-empty,
.party-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.campaign-empty-icon,
.party-empty-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.campaign-empty p,
.party-empty p {
  margin: 0;
  font-size: var(--font-size-base);
}

/*
 * Campaign — Invite modal and invite code tool result
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Invite Modal
 * ========================================================================== */

.invite-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  padding: var(--space-4);
}

.invite-modal--open {
  display: flex;
}

.invite-modal-content {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

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

.invite-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-accent-primary);
}

.invite-modal-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
}

.invite-modal-close:hover {
  color: var(--color-text-primary);
}

.invite-modal-body {
  padding: var(--space-4);
}

/* Invite Code Generation Form */
.invite-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.invite-form-row {
  display: flex;
  gap: var(--space-3);
}

.invite-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
}

.invite-form-field label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.invite-form-field select,
.invite-form-field input {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.invite-form-field select:focus,
.invite-form-field input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* Generated Code Display */
.invite-code-display {
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  text-align: center;
  margin-bottom: var(--space-4);
}

.invite-code-display:not(.has-code) {
  color: var(--color-text-muted);
  font-style: italic;
}

.invite-code-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.invite-code-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  letter-spacing: 0.1em;
}

.invite-code-meta {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Role Badges */
.role-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

.role-badge.role-player {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.role-badge.role-co_dm {
  background: rgba(147, 51, 234, 0.2);
  color: #c084fc;
}

.role-badge.role-dm {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

/* Invite Actions */
.invite-actions {
  display: flex;
  gap: var(--space-2);
}

.invite-actions .btn {
  flex: 1;
}

.invite-actions .btn.copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Invite List */
.invite-list {
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-4);
}

.invite-list h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.invite-list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.invite-list-item.unavailable {
  opacity: 0.5;
}

.invite-list-item .invite-code {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.invite-list-item .invite-meta {
  flex: 1;
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.invite-list-item .revoke-btn {
  background: transparent;
  border: 1px solid var(--color-border-default);
  color: var(--color-text-muted);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invite-list-item .revoke-btn:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Invite Stats */
.invite-stats {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.invite-stats .stat {
  text-align: center;
}

.invite-stats .stat-value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.invite-stats .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Error State */
.invite-error {
  padding: var(--space-3);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  text-align: center;
}

/* Empty State */
.invite-list .empty-state {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
 * Invite Code Tool Result (Game Log / Narrative)
 * ========================================================================== */

.tool-result-item.invite-code-result {
  background: var(--color-bg-elevated, #1e1e2e);
  border: 1px solid var(--color-border-default, #3a3a4a);
  border-radius: 6px;
  padding: var(--space-3, 12px);
  margin: var(--space-2, 8px) 0;
}

.invite-code-result__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2, 8px);
}

.invite-code-result__code {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 1px;
  padding: var(--space-2, 8px);
  background: var(--color-bg-primary, #111);
  border-radius: 4px;
  text-align: center;
  user-select: all;
  cursor: pointer;
}

.invite-code-result__meta {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.invite-code-result__role {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.invite-code-result__uses {
  opacity: 0.7;
}

.invite-code-result__actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
}

.invite-code-copy-btn {
  font-size: 0.75rem;
  padding: 4px 10px;
  cursor: pointer;
}

/*
 * Campaign — World option cards (advanced selector)
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * World Option Cards (Advanced Selector)
 * ========================================================================== */

.world-options-section {
  margin-bottom: var(--space-4);
}

.world-option-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.world-option-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}

.world-option-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.world-option-card.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-primary);
}

.world-option-card .option-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.world-option-card .option-content {
  flex: 1;
  min-width: 0;
}

.world-option-card .option-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.world-option-card .option-desc {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.world-option-card .option-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.world-option-card .option-badge.recommended {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

/* Available Worlds Section */
.available-worlds-section {
  margin-bottom: var(--space-4);
}

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

.world-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.world-item:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.world-item.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-primary);
}

.world-item .world-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.world-item .world-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Current Selection Section */
.current-selection-section {
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.current-world-display .selected-world {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.current-world-display .world-icon {
  font-size: var(--font-size-lg);
}

.current-world-display .world-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.current-world-display .world-type {
  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);
}

.current-world-display .no-selection {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Available Instances Section (for forking) */
.available-instances-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.available-instances-section.hidden {
  display: none;
}

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

.instance-option {
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.instance-option:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

.instance-option.selected {
  background: var(--color-bg-selected);
  border-color: var(--color-accent-primary);
}

.instance-option .instance-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.instance-option .instance-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.instance-option .instance-type {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.instance-option .badge-shared {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.instance-option .badge-campaign {
  background: rgba(147, 51, 234, 0.2);
  color: #c084fc;
}

.instance-option .badge-fork {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.instance-option .instance-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.instance-option .meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.instance-option .meta-icon {
  font-size: var(--font-size-sm);
}

/* Fork Preview */
.fork-preview {
  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);
}

.fork-preview-loading {
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

.fork-preview-content .preview-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.fork-preview-content .preview-stats {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.fork-preview-content .preview-stats .stat {
  text-align: center;
}

.fork-preview-content .preview-stats .stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.fork-preview-content .preview-stats .stat-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.fork-preview-content .preview-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Loading Indicator */
.world-selector-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.world-selector-loading.hidden {
  display: none;
}

/*
 * Campaign — Party status panel (real-time multiplayer)
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Party Status Panel (Real-time Multiplayer)
 * ========================================================================== */

.panel-party-status {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

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

.party-status-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0;
}

.party-status-badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.party-status-badge.online {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.party-status-badge.offline {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.play-mode-indicator .mode-badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.play-mode-indicator .mode-badge.realtime {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.play-mode-indicator .mode-badge.turn_based {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.play-mode-indicator .mode-badge.async {
  background: rgba(147, 51, 234, 0.2);
  color: #c084fc;
}

.party-status-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Party Members List */
.party-members-live {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.party-member-card {
  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: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.party-member-card.in-combat {
  border-color: rgba(239, 68, 68, 0.5);
}

.party-member-card.current-turn {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-selected);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.3);
}

.party-member-card.damaged {
  animation: damage-flash 0.5s ease-out;
}

.party-member-card.healed {
  animation: heal-flash 0.5s ease-out;
}

@keyframes damage-flash {
  0% { background: rgba(239, 68, 68, 0.3); }
  100% { background: var(--color-bg-secondary); }
}

@keyframes heal-flash {
  0% { background: rgba(34, 197, 94, 0.3); }
  100% { background: var(--color-bg-secondary); }
}

.member-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.member-avatar .class-icon {
  font-size: var(--font-size-lg);
}

.member-avatar .online-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-secondary);
  background: #6b7280;
}

.member-avatar .online-indicator[data-online="true"] {
  background: #22c55e;
}

/* Member Portrait - token image based */
.member-portrait {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-purple, #9B59B6));
  flex-shrink: 0;
}

.member-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-portrait__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.member-portrait__placeholder .svg-icon svg {
  width: 18px;
  height: 18px;
}

.member-portrait .online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-bg-secondary);
  background: #6b7280;
}

.member-portrait .online-indicator[data-online="true"] {
  background: #22c55e;
}

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

.member-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.member-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.you-badge {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.member-class {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.member-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.hp-bar-container {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hp-bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.hp-bar.healthy {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.hp-bar.wounded {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.hp-bar.critical {
  background: linear-gradient(90deg, #ef4444, #f87171);
  animation: pulse-critical 1s ease-in-out infinite;
}

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

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

.member-conditions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* Base condition-badge styles from components/_condition_badge.css */
.member-conditions .condition-badge {
  width: 20px;
  height: 20px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

/* Turn Indicator */
.turn-indicator {
  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);
}

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

.turn-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.turn-character {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.your-turn-alert {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: var(--radius-sm);
  color: #fbbf24;
  font-weight: var(--font-weight-bold);
  text-align: center;
  animation: pulse-turn 2s ease-in-out infinite;
}

.your-turn-alert.flash {
  animation: flash-turn 0.5s ease-out;
}

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

@keyframes flash-turn {
  0% { transform: scale(1.05); background: rgba(251, 191, 36, 0.4); }
  100% { transform: scale(1); background: rgba(251, 191, 36, 0.2); }
}

/* Combat Status */
.party-combat-status {
  margin-top: var(--space-3);
}

.combat-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
}

.combat-indicator.active {
  animation: combat-pulse 2s ease-in-out infinite;
}

@keyframes combat-pulse {
  0%, 100% { border-color: rgba(239, 68, 68, 0.3); }
  50% { border-color: rgba(239, 68, 68, 0.6); }
}

.combat-icon {
  font-size: var(--font-size-lg);
}

.combat-label {
  flex: 1;
  font-weight: var(--font-weight-medium);
  color: #ef4444;
}

.combat-round {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* Quick Actions */
.party-quick-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.party-quick-actions .btn {
  flex: 1;
}

/* No Party State */
.no-party-session {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.no-party-session .empty-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.no-party-session h4 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}

.no-party-session p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.empty-party {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/*
 * Campaign — Turn queue panel
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Turn Queue Panel
 * ========================================================================== */

.panel-turn-queue {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

.turn-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.turn-queue-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.turn-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-mono);
}

.turn-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.turn-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold);
}

.turn-queue-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Deadline Section */
.deadline-section {
  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-sm);
  border: 1px solid var(--color-border-subtle);
}

.deadline-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.deadline-countdown {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.deadline-countdown.urgent {
  color: var(--color-danger);
  animation: pulse 1s ease-in-out infinite;
}

.deadline-countdown.expired {
  color: var(--color-danger);
}

/* My Action Section */
.my-action-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
}

.my-action-section .section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.my-action.submitted {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-success);
}

.my-action .action-icon {
  font-size: var(--font-size-xl);
  color: var(--color-success);
}

.my-action .action-details {
  flex: 1;
}

.my-action .action-type {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.my-action .action-summary {
  color: var(--color-text-primary);
}

.my-action .action-controls {
  display: flex;
  gap: var(--space-2);
}

.my-action.editing .action-details {
  opacity: 0.5;
}

/* Action Form */
.action-form {
  padding: var(--space-3);
}

.action-form.hidden {
  display: none;
}

.action-form .form-group {
  margin-bottom: var(--space-3);
}

.action-form label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.action-form .form-select,
.action-form .form-textarea {
  width: 100%;
  padding: 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-family: inherit;
}

.action-form .form-textarea {
  resize: vertical;
  min-height: 80px;
}

.action-form .form-actions {
  display: flex;
  gap: var(--space-2);
}

/* Queue Status Section */
.queue-status-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border: 1px solid var(--color-border-default);
}

.queue-status-section .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.pending-count {
  font-family: var(--font-family-mono);
  color: var(--color-accent-primary);
}

/* Awaiting Section */
.awaiting-section {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.awaiting-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.awaiting-name {
  color: var(--color-warning);
  font-weight: var(--font-weight-medium);
}

.all-ready {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

/* Queue List */
.queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.queue-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent-primary);
}

.queue-entry.pending {
  border-left-color: var(--color-warning);
}

.queue-entry.processing {
  border-left-color: var(--color-accent-primary);
  animation: pulse 1s ease-in-out infinite;
}

.queue-entry.completed,
.queue-entry.processed {
  border-left-color: var(--color-success);
  opacity: 0.7;
}

.queue-entry.skipped {
  border-left-color: var(--color-text-muted);
  opacity: 0.5;
}

.entry-avatar {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border-radius: 50%;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.entry-details {
  flex: 1;
  min-width: 0;
}

.entry-character {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.entry-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-status {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

/* Quick Actions */
.queue-quick-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Queue Disabled State */
.queue-disabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.queue-disabled .disabled-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.queue-disabled h4 {
  margin: 0 0 var(--space-2);
  color: var(--color-text-primary);
}

.queue-disabled p {
  margin: 0;
  font-size: var(--font-size-sm);
}

.queue-disabled .mode-hint {
  margin-top: var(--space-2);
  font-style: italic;
}

/* Processing State */
.panel-turn-queue.processing {
  position: relative;
}

.panel-turn-queue.processing::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%
  );
  background-size: 200% 100%;
  animation: processingBar 1.5s linear infinite;
}

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

/* Realtime Mode - Hide queue elements */
.panel-turn-queue.realtime-mode .turn-queue-body {
  display: none;
}

.panel-turn-queue.realtime-mode .queue-disabled {
  display: flex;
}

/*
 * Campaign — Play mode indicator
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Play Mode Indicator
 * ========================================================================== */

.play-mode-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.play-mode-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-sm);
  cursor: default;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.play-mode-badge.realtime {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.play-mode-badge.turn_based {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
}

.play-mode-badge.async {
  background: rgba(147, 51, 234, 0.15);
  border-color: rgba(147, 51, 234, 0.4);
}

.play-mode-icon {
  font-size: var(--font-size-base);
}

.play-mode-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.play-mode-badge.realtime .play-mode-label {
  color: #60a5fa;
}

.play-mode-badge.turn_based .play-mode-label {
  color: #fbbf24;
}

.play-mode-badge.async .play-mode-label {
  color: #c084fc;
}

.play-mode-turn,
.play-mode-queue {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

/* Your Turn Indicator */
.your-turn-indicator {
  padding: var(--space-1) var(--space-2);
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: var(--radius-sm);
  color: #fbbf24;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  animation: pulse-turn 2s ease-in-out infinite;
}

.your-turn-indicator.hidden {
  display: none;
}

.your-turn-indicator.flash {
  animation: flash-turn 0.5s ease-out, pulse-turn 2s ease-in-out 0.5s infinite;
}

/* Play Mode Actions */
.play-mode-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.play-mode-actions .btn--sm {
  padding: var(--space-1);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-sm);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.play-mode-actions .btn--sm:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-hover);
}

/* Play Mode Menu (Dropdown for DM) */
.play-mode-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  min-width: 160px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-panel);
  overflow: hidden;
}

.play-mode-menu.hidden {
  display: none;
}

.play-mode-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-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.play-mode-option:hover {
  background: var(--color-bg-hover);
}

.play-mode-option.active {
  background: var(--color-bg-selected);
  color: var(--color-accent-primary);
}

.play-mode-option:not(:last-child) {
  border-bottom: 1px solid var(--color-border-subtle);
}

/*
 * Campaign — Invite section
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Invite Section (Standalone Component)
 * ========================================================================== */

.invite-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.invite-section-header .section-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invite-section-header .heading-icon {
  font-size: var(--font-size-base);
}

.invite-quick-stats {
  display: flex;
  gap: var(--space-3);
}

.invite-quick-stats .quick-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.invite-quick-stats .stat-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.invite-quick-stats .stat-label {
  color: var(--color-text-muted);
}

.invite-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.quick-generate .btn-block {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.quick-generate .btn--icon {
  font-size: var(--font-size-lg);
}

/* Recent Codes Preview */
.recent-codes-preview {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.recent-codes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.recent-code-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.recent-code-item .code-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
}

.recent-code-item .code-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
}

.recent-code-item .uses-count {
  color: var(--color-text-muted);
}

.invite-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

.invite-hint code {
  background: var(--color-bg-tertiary);
  padding: 1px 4px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.invite-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.btn-link {
  background: transparent;
  border: none;
  color: var(--color-accent-primary);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.btn-link:hover {
  color: var(--color-accent-secondary);
}

/* Compact Mode */
.invite-section--compact .invite-section-header {
  margin-bottom: var(--space-2);
}

.invite-section--compact .quick-generate .btn {
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Invite Placeholder */
.invite-placeholder {
  margin: 0;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Form Input Styling in Modal */
.invite-form .form-input,
.invite-form .form-select {
  width: 100%;
  padding: 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: var(--font-size-base);
}

.invite-form .form-input:focus,
.invite-form .form-select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.invite-form-field--action {
  display: flex;
  align-items: flex-end;
}

/* Invite Stats Wrapper */
.invite-stats-wrapper {
  margin-bottom: var(--space-4);
}

/* ==========================================================================
 * SVG Icon Sizing
 * ==========================================================================
 * SVGs don't respond to font-size, so we need explicit sizing.
 * These rules ensure icons inherit container dimensions properly.
 */

/* Solo callout icon - 2rem (matches font-size-3xl) */
.solo-callout .solo-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
}

.solo-callout .solo-icon svg,
.solo-callout .solo-icon .svg-icon,
.solo-callout .solo-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* Member avatar class icon - 1.125rem (matches font-size-lg) */
.member-avatar .class-icon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
}

.member-avatar .class-icon svg,
.member-avatar .class-icon .svg-icon,
.member-avatar .class-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* Empty state icons - 48px */
.no-party-session .empty-icon,
.queue-disabled .disabled-icon {
  display: inline-flex;
  width: 48px;
  height: 48px;
}

.no-party-session .empty-icon svg,
.no-party-session .empty-icon .svg-icon,
.no-party-session .empty-icon .svg-icon svg,
.queue-disabled .disabled-icon svg,
.queue-disabled .disabled-icon .svg-icon,
.queue-disabled .disabled-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* Action icons - 1.25rem (matches font-size-xl) */
.my-action .action-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
}

.my-action .action-icon svg,
.my-action .action-icon .svg-icon,
.my-action .action-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* Play mode icon - 1rem (matches font-size-base) */
.play-mode-icon {
  display: inline-flex;
  width: 1rem;
  height: 1rem;
}

.play-mode-icon svg,
.play-mode-icon .svg-icon,
.play-mode-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/*
 * Campaign — Mobile responsive styles
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Mobile Responsive Styles
 * ========================================================================== */

/* Small screens (phones) */
@media (max-width: 640px) {
  /* Campaign Overview */
  .campaign-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .campaign-stat {
    padding: var(--space-2);
  }

  .campaign-stat-value {
    font-size: var(--font-size-xl);
  }

  .campaign-actions {
    flex-direction: column;
  }

  .campaign-actions .btn {
    min-width: 100%;
  }

  /* Party Manager */
  .party-member {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .party-member-avatar {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base);
  }

  .party-member-info {
    width: 100%;
  }

  .party-member-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Party Status Panel */
  .party-member-card {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .member-info {
    flex: 1 1 60%;
  }

  .member-status {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
  }

  .hp-bar-container {
    width: 50px;
    height: 4px;
  }

  .member-conditions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Turn Queue Panel */
  .turn-queue-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
  }

  .my-action.submitted {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .my-action .action-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .queue-entry {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .entry-details {
    flex: 1 1 70%;
  }

  .queue-quick-actions {
    flex-direction: column;
  }

  /* Play Mode Indicator */
  .play-mode-indicator {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .play-mode-badge {
    padding: var(--space-1);
    font-size: var(--font-size-xs);
  }

  .play-mode-turn,
  .play-mode-queue {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-1);
  }

  .play-mode-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-option {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
  }

  /* Invite Modal */
  .invite-modal-content {
    max-height: 90vh;
    margin: var(--space-2);
  }

  .invite-form-row {
    flex-direction: column;
  }

  .invite-code-value {
    font-size: var(--font-size-lg);
    letter-spacing: 0.05em;
  }

  .invite-actions {
    flex-direction: column;
  }

  .invite-stats {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .invite-list-item {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* World Selector */
  .world-option-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .world-option-card .option-badge {
    position: static;
    margin-top: var(--space-2);
  }

  /* Campaign Rules */
  .dm-mode-option,
  .difficulty-option {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .mode-icon,
  .diff-icon {
    font-size: var(--font-size-2xl);
  }

  .permissions-grid {
    gap: var(--space-2);
  }

  .permission-role {
    flex-wrap: wrap;
    gap: var(--space-1);
  }
}

/* Medium screens (tablets) */
@media (min-width: 641px) and (max-width: 1024px) {
  .campaign-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .party-member-actions button {
    padding: var(--space-1) var(--space-2);
  }

  .invite-form-row {
    flex-wrap: wrap;
  }

  .invite-form-field {
    flex: 1 1 45%;
  }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .play-mode-option,
  .dm-mode-option,
  .difficulty-option,
  .world-type-option,
  .queue-entry {
    min-height: 48px;
  }

  .btn--sm {
    min-height: 36px;
    min-width: 36px;
  }

  .revoke-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .party-member-actions button {
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
  }

  /* Remove hover states that don't apply */
  .play-mode-badge:hover,
  .queue-entry:hover,
  .party-member-card:hover {
    background: inherit;
  }
}

/*
 * Campaign — Campaign selection cards
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Campaign Selection Cards (Lobby Campaign List)
 * Displayed when user asks to see/switch campaigns in the lobby
 * ========================================================================== */

.campaign-selection-container {
  margin: var(--space-3) 0;
  animation: fadeIn 0.3s ease-out;
}

.campaign-selection {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.campaign-selection__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
}

.campaign-selection__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.campaign-selection__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.campaign-selection__close:hover {
  color: var(--color-text-primary);
}

.campaign-selection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

/* Individual Campaign Card */
.campaign-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  text-align: left;
  width: 100%;
}

.campaign-card:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.campaign-card:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.3);
}

/* DM Card Styling */
.campaign-card--dm {
  border-color: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.05) 0%,
    var(--color-bg-primary) 100%);
}

.campaign-card--dm:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.7);
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.1) 0%,
    var(--color-bg-hover) 100%);
}

/* Player Card Styling */
.campaign-card--player {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.05) 0%,
    var(--color-bg-primary) 100%);
}

.campaign-card--player:hover:not(:disabled) {
  border-color: rgba(59, 130, 246, 0.7);
  background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.1) 0%,
    var(--color-bg-hover) 100%);
}

/* Current Campaign */
.campaign-card--current {
  border-color: var(--color-accent-success);
  opacity: 0.7;
  cursor: default;
  transform: none;
}

.campaign-card--current:hover {
  transform: none;
  box-shadow: none;
}

/* Loading State */
.campaign-card--loading {
  opacity: 0.6;
  pointer-events: none;
}

.campaign-card--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Header */
.campaign-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}

.campaign-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.3;
  flex: 1;
}

.campaign-card__role-badge {
  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-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.campaign-card--dm .campaign-card__role-badge {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.campaign-card--player .campaign-card__role-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

/* Card Details */
.campaign-card__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.campaign-card__world,
.campaign-card__dm,
.campaign-card__members {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.campaign-card__world::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-globe) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

.campaign-card__dm::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-user) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

.campaign-card__members::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-users) no-repeat center / contain;
  font-size: var(--font-size-xs);
}

/* Card Footer */
.campaign-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-1);
}

.campaign-card__last-played {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

.campaign-card__current-badge {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-radius: var(--radius-sm);
}

/* Campaign Join Section (inline in selection panel) */
.campaign-join-section {
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.campaign-join-divider {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
}

.campaign-join-input-row {
  display: flex;
  gap: var(--space-2);
}

.campaign-join-input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-join-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

.campaign-join-input::placeholder {
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: normal;
  color: var(--color-text-tertiary);
}

.campaign-join-button {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-bg-primary);
  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);
}

.campaign-join-button:hover {
  background: var(--color-accent-primary-hover);
  transform: translateY(-1px);
}

.campaign-join-button:active {
  transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .campaign-selection__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .campaign-card {
    padding: var(--space-2);
  }

  .campaign-card__name {
    font-size: var(--font-size-sm);
  }

  .campaign-card__details {
    font-size: var(--font-size-xs);
  }

  .campaign-join-input-row {
    flex-direction: column;
  }

  .campaign-join-button {
    width: 100%;
  }
}

/*
 * Campaign — Party treasury panel
 * Extracted for maintainability (#2783).
 */

/* ==========================================================================
 * Party Treasury Panel
 * ========================================================================== */

.panel-party-treasury {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

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

.party-treasury-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0;
}

.party-treasury-body {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.treasury-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.treasury-section-title .item-count {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

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

.total-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.total-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #fbbf24;
}

.treasury-currencies {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.currency-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
}

.currency-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.currency-icon.pp { background: #e5e7eb; color: #1f2937; }
.currency-icon.gp { background: #fbbf24; color: #1f2937; }
.currency-icon.ep { background: #93c5fd; color: #1f2937; }
.currency-icon.sp { background: #d1d5db; color: #1f2937; }
.currency-icon.cp { background: #c2956e; color: #1f2937; }

.currency-amount {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

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

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

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

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

.item-name {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.item-quantity {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
/**
 * Campaign Panels — Import Hub
 * =============================
 * Party management, world selection, invite system, turn queue, campaign browser.
 *
 * Decomposed into focused files under campaign/ for maintainability (#2783).













 */
/*
 * Campaign selection empty state (#3908)
 * --------------------------------------
 * Rendered when `/load` (or `/campaigns`) is invoked by a user with no
 * campaigns. Replaces the silent bail in the prior auto-broadcast flow with
 * an explicit "create your first campaign" CTA.
 *
 * Co-located here rather than _campaign.css because that file is at the
 * 2000-LOC hard cap; new campaign-selection styles must extract.
 */

.campaign-selection__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
}

.campaign-selection__empty-message {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.campaign-selection__create-button {
  appearance: none;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-strong, var(--color-border-default));
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.campaign-selection__create-button:hover,
.campaign-selection__create-button:focus-visible {
  background: var(--color-accent, var(--color-bg-primary));
  border-color: var(--color-accent, var(--color-border-strong, var(--color-border-default)));
  color: var(--color-text-on-accent, var(--color-text-primary));
  outline: none;
}
/**
 * Spellbook Panel — Base Layout, Spell Slots, List, Level Sections & Spell Card
 */

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

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

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

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

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

.spellbook__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.spellbook__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Spell Slots Display
 * ======================================== */

.spellbook__slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.spellbook__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  min-width: 48px;
}

.spellbook__slot-level {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.spellbook__slot-pips {
  display: flex;
  gap: 3px;
}

.spellbook__slot-pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spellbook__slot-pip--available {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 10px rgba(198, 120, 221, 0.7),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spellbook__slot-pip--used {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================
 * Spell List
 * ======================================== */

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

.spellbook__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Spell Level Sections
 * ======================================== */

.spellbook__level-section {
  margin-bottom: var(--space-4);
}

.spellbook__level-section:last-child {
  margin-bottom: 0;
}

.spellbook__level-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

.spellbook__level-count {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
}

/* ========================================
 * Spell Card
 * ======================================== */

.spell-card {
  display: flex;
  align-items: flex-start;
  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);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              transform var(--transition-fast);
}

.spell-card:hover {
  background: var(--color-bg-tertiary);
  transform: translateY(-1px);
}

.spell-card:active {
  transform: translateY(0);
}

/* ========================================
 * School Color Variants
 * ======================================== */

/* Abjuration - Blue (protective) */
.spell-card--abjuration {
  border-left: 3px solid var(--color-accent-primary);
}

.spell-card--abjuration:hover {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Conjuration - Yellow/Gold (summoning) */
.spell-card--conjuration {
  border-left: 3px solid var(--color-accent-warning);
}

.spell-card--conjuration:hover {
  border-color: var(--color-accent-warning);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* Divination - Silver/Light Blue (knowledge) */
.spell-card--divination {
  border-left: 3px solid var(--color-text-secondary);
}

.spell-card--divination:hover {
  border-color: var(--color-text-secondary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-text-secondary) 30%, transparent);
}

/* Enchantment - Pink (charm) */
.spell-card--enchantment {
  border-left: 3px solid var(--color-accent-error);
}

.spell-card--enchantment:hover {
  border-color: var(--color-accent-error);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-error) 30%, transparent);
}

/* Evocation - Red/Orange (damage) */
.spell-card--evocation {
  border-left: 3px solid var(--color-accent-orange);
}

.spell-card--evocation:hover {
  border-color: var(--color-accent-orange);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-orange) 30%, transparent);
}

/* Illusion - Purple (trickery) */
.spell-card--illusion {
  border-left: 3px solid var(--color-accent-purple);
}

.spell-card--illusion:hover {
  border-color: var(--color-accent-purple);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

/* Necromancy - Dark Green (death) */
.spell-card--necromancy {
  border-left: 3px solid var(--color-accent-cyan);
}

.spell-card--necromancy:hover {
  border-color: var(--color-accent-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-cyan) 30%, transparent);
}

/* Transmutation - Green (change) */
.spell-card--transmutation {
  border-left: 3px solid var(--color-accent-secondary);
}

.spell-card--transmutation:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}
/**
 * Spellbook Panel — Spell Icon, Details, Badges, Actions, Prepared, Cantrip & Responsive
 */

/* ========================================
 * Spell Icon
 * ======================================== */

.spell-card__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

/* ========================================
 * Spell Details
 * ======================================== */

.spell-card__details {
  flex: 1;
  min-width: 0;
}

.spell-card__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.spell-card__school {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.spell-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* ========================================
 * Spell Badges
 * ======================================== */

.spell-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Concentration Badge */
.spell-badge--concentration {
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
  color: var(--color-accent-warning);
}

.spell-badge--concentration::before {
  content: 'C';
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-1);
}

/* Ritual Badge */
.spell-badge--ritual {
  background: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
  color: var(--color-accent-purple);
}

.spell-badge--ritual::before {
  content: 'R';
  font-weight: var(--font-weight-bold);
  margin-right: var(--space-1);
}

/* Verbal Component */
.spell-badge--verbal {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* Somatic Component */
.spell-badge--somatic {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* Material Component */
.spell-badge--material {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* ========================================
 * Spell Actions (cast button)
 * ======================================== */

.spell-card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.spell-card__cast-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-purple);
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.spell-card__cast-btn:hover {
  background: color-mix(in srgb, var(--color-accent-purple) 80%, white);
  transform: scale(1.05);
}

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

.spell-card__cast-btn:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.spell-card__cast-btn:disabled:hover {
  transform: none;
}

/* ========================================
 * Prepared/Known Indicator
 * ======================================== */

.spell-card--prepared {
  background: color-mix(in srgb, var(--color-accent-secondary) 8%, var(--color-bg-secondary));
}

.spell-card__prepared-badge {
  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-secondary) 20%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 40%, transparent);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-secondary);
}

.spell-card__prepared-badge::before {
  content: '✓';
  font-weight: bold;
}

/* ========================================
 * Cantrip Styling
 * ======================================== */

.spell-card--cantrip {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent-primary) 5%, transparent) 0%,
    var(--color-bg-secondary) 100%
  );
}

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

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

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

  .spell-card {
    padding: var(--space-2);
  }

  .spell-card__icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-base);
  }

  .spellbook__slots {
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .spellbook__slot {
    padding: var(--space-1);
    min-width: 40px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .spell-card {
    transition: none;
  }

  .spell-card:hover {
    transform: none;
  }

  .spell-card__cast-btn {
    transition: none;
  }

  .spell-card__cast-btn:hover {
    transform: none;
  }

  .spellbook__slot-pip--available {
    animation: none;
  }
}
/**
 * Spellbook Panel — Dynamic Components (sb- prefix)
 * Used by spellbook_controller.js
 */

/* Stats Section */
.spellbook__stats {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
}

.spellbook__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

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

.spellbook__stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-purple);
}

/* Slots Section */
.spellbook__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;
}

.sb-slots-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.sb-slot-level {
  min-width: 20px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-align: center;
}

.sb-slot-pips {
  display: flex;
  gap: 4px;
}

.sb-slot-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

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

.sb-slot-pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Concentration Section */
.sb-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-warning) 10%, var(--color-bg-secondary));
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

.sb-concentration--active {
  background: color-mix(in srgb, var(--color-accent-purple) 15%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
}

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

.sb-concentration__spell {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-purple);
}

.sb-concentration__end {
  margin-left: auto;
}

/* Tabs */
.spellbook__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}

.spellbook__tab {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.spellbook__tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.spellbook__tab--active {
  color: var(--color-accent-purple);
  background: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

/* Header Meta (prepare count) */
.spellbook__header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.spellbook__prepare-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Level Groups */
.sb-level-group {
  margin-bottom: var(--space-3);
}

.sb-level-group:last-child {
  margin-bottom: 0;
}

.sb-level-header {
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid color-mix(in srgb, var(--color-accent-purple) 30%, transparent);
}

.sb-level-spells {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Spell Cards (dynamic) */
.sb-spell {
  position: relative;
  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: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  overflow: hidden;
}

.sb-spell:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-purple);
}

.sb-spell--prepared {
  background: color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-border-default));
}

.sb-spell--cantrip {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-accent-secondary) 5%, transparent) 0%,
    var(--color-bg-secondary) 100%
  );
}

/* Prepare Button */
.sb-spell-prepare {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.sb-spell-prepare:hover {
  border-color: var(--color-accent-purple);
  color: var(--color-accent-purple);
}

.sb-spell-prepare--prepared {
  background: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
  color: var(--color-bg-primary);
}

/* Spell Info */
.sb-spell-info {
  flex: 1;
  min-width: 0;
}

.sb-spell-name {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 2px 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-spell-name:hover {
  color: var(--color-accent-purple);
  text-decoration: underline;
}

.sb-spell-meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sb-spell-school {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

/* School color variants */
.sb-spell-school--abjuration { color: var(--spell-abjuration); }
.sb-spell-school--conjuration { color: var(--spell-conjuration); }
.sb-spell-school--divination { color: var(--spell-divination); }
.sb-spell-school--enchantment { color: var(--spell-enchantment); }
.sb-spell-school--evocation { color: var(--spell-evocation); }
.sb-spell-school--illusion { color: var(--spell-illusion); }
.sb-spell-school--necromancy { color: var(--spell-necromancy); }
.sb-spell-school--transmutation { color: var(--spell-transmutation); }
/**
 * Spellbook Panel — Spell School Hover Effects, Cast Menu, Modal & Responsive
 */

/* ========================================
 * Spell School Hover Enhancements
 * Magical glow effects for each school
 * ======================================== */

/* Magical pulse animation */
@keyframes schoolPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

/* Radial gradient overlay for mouse tracking */
.sb-spell[data-spell-school]:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    color-mix(in srgb, var(--spell-school-color) 15%, transparent),
    transparent 60%
  );
  animation: schoolPulse 2s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  z-index: var(--z-base);
}

/* Ensure spell content is above the glow */
.sb-spell > * {
  position: relative;
  z-index: var(--z-raised);
}

/* School-specific hover glows - Abjuration */
.sb-spell[data-spell-school="abjuration"]:hover {
  --spell-school-color: var(--spell-abjuration);
  background: color-mix(in srgb, var(--spell-abjuration) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-abjuration) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-abjuration) 6%, transparent);
}

/* School-specific hover glows - Conjuration */
.sb-spell[data-spell-school="conjuration"]:hover {
  --spell-school-color: var(--spell-conjuration);
  background: color-mix(in srgb, var(--spell-conjuration) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-conjuration) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-conjuration) 6%, transparent);
}

/* School-specific hover glows - Divination */
.sb-spell[data-spell-school="divination"]:hover {
  --spell-school-color: var(--spell-divination);
  background: color-mix(in srgb, var(--spell-divination) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-divination) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-divination) 6%, transparent);
}

/* School-specific hover glows - Enchantment */
.sb-spell[data-spell-school="enchantment"]:hover {
  --spell-school-color: var(--spell-enchantment);
  background: color-mix(in srgb, var(--spell-enchantment) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-enchantment) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-enchantment) 6%, transparent);
}

/* School-specific hover glows - Evocation */
.sb-spell[data-spell-school="evocation"]:hover {
  --spell-school-color: var(--spell-evocation);
  background: color-mix(in srgb, var(--spell-evocation) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-evocation) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-evocation) 6%, transparent);
}

/* School-specific hover glows - Illusion */
.sb-spell[data-spell-school="illusion"]:hover {
  --spell-school-color: var(--spell-illusion);
  background: color-mix(in srgb, var(--spell-illusion) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-illusion) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-illusion) 6%, transparent);
}

/* School-specific hover glows - Necromancy */
.sb-spell[data-spell-school="necromancy"]:hover {
  --spell-school-color: var(--spell-necromancy);
  background: color-mix(in srgb, var(--spell-necromancy) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-necromancy) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-necromancy) 6%, transparent);
}

/* School-specific hover glows - Transmutation */
.sb-spell[data-spell-school="transmutation"]:hover {
  --spell-school-color: var(--spell-transmutation);
  background: color-mix(in srgb, var(--spell-transmutation) 10%, var(--color-bg-secondary));
  box-shadow:
    0 0 16px color-mix(in srgb, var(--spell-transmutation) 25%, transparent),
    inset 0 0 24px color-mix(in srgb, var(--spell-transmutation) 6%, transparent);
}

.sb-spell-tag {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.sb-spell-tag--concentration {
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-tertiary));
  color: var(--color-accent-warning);
}

.sb-spell-tag--ritual {
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-tertiary));
  color: var(--color-accent-secondary);
}

/* Spell Actions */
.sb-spell-actions {
  flex-shrink: 0;
}

.sb-spell-cast {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.sb-spell-cast:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cast Menu */
.sb-cast-menu {
  position: absolute;
  z-index: var(--z-panel);
  min-width: 160px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.sb-cast-menu-title {
  padding: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-default);
}

.sb-cast-level {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.sb-cast-level:hover {
  background: var(--color-bg-tertiary);
}

.sb-cast-level--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sb-cast-level--disabled:hover {
  background: transparent;
}

.sb-cast-level-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.sb-cast-level-slots {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Modal */
.sb-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
}

.sb-modal {
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.sb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}

.sb-modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.sb-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.sb-modal-close:hover {
  color: var(--color-text-primary);
}

.sb-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
}

.sb-modal-stat {
  color: var(--color-text-secondary);
}

.sb-modal-stat-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.sb-modal-components {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.sb-modal-description {
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-primary);
}

.sb-modal-higher {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-bg-secondary));
  border-top: 1px solid var(--color-border-subtle);
}

.sb-modal-higher-title {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
}

/* Responsive for dynamic components */
@media (max-width: 768px) {
  .sb-slots-grid {
    gap: 2px;
  }

  .sb-slot-row {
    padding: var(--space-1);
    gap: var(--space-1);
  }

  .sb-slot-pip {
    width: 8px;
    height: 8px;
  }

  .sb-spell {
    padding: var(--space-2);
  }

  .spellbook__tabs {
    padding: var(--space-1) var(--space-2);
    overflow-x: auto;
  }

  .spellbook__stats {
    flex-wrap: wrap;
    padding: var(--space-2);
  }
}

/* Reduced motion for dynamic components */
@media (prefers-reduced-motion: reduce) {
  .sb-slot-pip,
  .sb-spell,
  .sb-spell-prepare,
  .sb-cast-level {
    transition: none;
  }

  .sb-slot-pip--filled {
    animation: none;
  }

  /* Disable magical pulse animation for spell school hovers */
  .sb-spell[data-spell-school]:hover::before {
    animation: none;
    opacity: 0.2;
  }
}
/**
 * Spellbook Panel — Import Hub
 * ==============================
 * Displays character spells with slot tracking, school color variants,
 * and dynamic spell management components.
 *
 * Decomposed into focused files under spellbook/ for maintainability.




 */
/*
 * Reference Panel - Slide-in Side Panel
 * ======================================
 * Right-edge panel for displaying reference information.
 * Used for race traits, class features, spell details, etc.
 *
 * Slides in from the right when opened, includes backdrop overlay.
 */

/* ========================================
 * PANEL CONTAINER
 * ======================================== */

.reference-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--panel-width-default);
  max-width: 90vw;
  height: 100vh;
  height: 100dvh; /* Mobile Safari: accounts for browser chrome */
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-accent-primary);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}

.reference-panel--open {
  transform: translateX(0);
}

/* ========================================
 * BACKDROP
 * ======================================== */

.reference-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
  z-index: calc(var(--z-modal) - 1);
}

.reference-panel__backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * PANEL HEADER
 * ======================================== */

.reference-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.reference-panel__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.reference-panel__title-icon {
  font-size: 1.2em;
}

.reference-panel__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reference-panel__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

/* ========================================
 * PANEL CONTENT
 * ======================================== */

.reference-panel__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom scrollbar */
.reference-panel__content::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.reference-panel__content::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.reference-panel__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-full);
}

.reference-panel__content::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* ========================================
 * PANEL SECTIONS
 * ======================================== */

.reference-panel__section {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.reference-panel__section:last-child {
  border-bottom: none;
}

.reference-panel__section-title {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3) 0;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.reference-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  gap: var(--space-3);
}

.reference-panel__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: referencePanelSpin 0.8s linear infinite;
}

.reference-panel__loading-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.reference-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.reference-panel__empty-icon {
  font-size: 2em;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.reference-panel__empty-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* ========================================
 * HISTORY (breadcrumb navigation)
 * ======================================== */

.reference-panel__history {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}

.reference-panel__history-back {
  background: transparent;
  border: none;
  color: var(--color-accent-primary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.reference-panel__history-back:hover {
  background: var(--color-bg-hover);
}

.reference-panel__history-back:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.reference-panel__history-current {
  color: var(--color-text-secondary);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes referencePanelSpin {
  to {
    transform: rotate(360deg);
  }
}

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

@media (max-width: 600px) {
  .reference-panel {
    width: 100vw;
    max-width: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .reference-panel {
    transition: none;
  }

  .reference-panel__backdrop {
    transition: none;
  }

  .reference-panel__spinner {
    animation: none;
  }
}
/*
 * Detail Modal - Center Screen Overlay
 * =====================================
 * Modal overlay for detailed interactions.
 * Used for equipment shopping, spellbook browsing, complex choices.
 *
 * Centered on screen with backdrop, supports scrollable content.
 */

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.detail-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
  padding: var(--space-4);
}

.detail-modal--open {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * BACKDROP
 * ======================================== */

.detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

/* ========================================
 * MODAL CONTENT WRAPPER
 * ======================================== */

.detail-modal__wrapper {
  position: relative;
  max-width: 600px;
  max-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-normal);
}

.detail-modal--open .detail-modal__wrapper {
  transform: scale(1) translateY(0);
}

/* ========================================
 * MODAL CARD (uses detail-card styling)
 * ======================================== */

.detail-modal__card {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  box-shadow: var(--shadow-xl), 0 0 40px rgba(97, 175, 239, 0.2);
}

/* ========================================
 * MODAL HEADER
 * ======================================== */

.detail-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.detail-modal__title-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.detail-modal__icon {
  font-size: 1.5em;
  flex-shrink: 0;
}

.detail-modal__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0;
}

.detail-modal__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: var(--space-1) 0 0 0;
}

.detail-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

/* ========================================
 * MODAL BODY
 * ======================================== */

.detail-modal__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-4);
}

/* Custom scrollbar */
.detail-modal__body::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.detail-modal__body::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
}

.detail-modal__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-full);
}

.detail-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}

/* ========================================
 * MODAL FOOTER
 * ======================================== */

.detail-modal__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  flex-shrink: 0;
}

.detail-modal__action {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.detail-modal__action:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.detail-modal__action--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

.detail-modal__action--primary:hover {
  background: #7bc4f8;
  border-color: #7bc4f8;
}

.detail-modal__action--danger {
  background: transparent;
  color: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

.detail-modal__action--danger:hover {
  background: var(--color-accent-error);
  color: var(--color-text-inverse);
}

/* ========================================
 * MODAL CONTENT SECTIONS
 * ======================================== */

.detail-modal__section {
  margin-bottom: var(--space-4);
}

.detail-modal__section:last-child {
  margin-bottom: 0;
}

.detail-modal__section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================
 * ITEM LIST (for shopping)
 * ======================================== */

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

.detail-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.detail-modal__item--selected {
  border-color: var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.1);
}

.detail-modal__item-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-modal__item-name {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.detail-modal__item-desc {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.detail-modal__item-price {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-gold);
  white-space: nowrap;
}

/* ========================================
 * CHOICE OPTIONS (for complex choices)
 * ======================================== */

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

.detail-modal__choice {
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

.detail-modal__choice--selected {
  border-color: var(--color-accent-primary);
  border-width: 2px;
  background: rgba(97, 175, 239, 0.05);
}

.detail-modal__choice-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0 0 var(--space-2) 0;
}

.detail-modal__choice-desc {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.detail-modal__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  gap: var(--space-3);
}

.detail-modal__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: detailModalSpin 0.8s linear infinite;
}

/* ========================================
 * SIZE VARIANTS
 * ======================================== */

.detail-modal--small .detail-modal__wrapper {
  max-width: 400px;
}

.detail-modal--large .detail-modal__wrapper {
  max-width: 800px;
  max-height: 90vh;
}

.detail-modal--large .detail-modal__card {
  max-height: 90vh;
}

.detail-modal--fullscreen .detail-modal__wrapper {
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
  max-height: calc(100dvh - var(--space-8)); /* Mobile Safari */
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes detailModalSpin {
  to {
    transform: rotate(360deg);
  }
}

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

@media (max-width: 600px) {
  .detail-modal {
    padding: var(--space-2);
  }

  .detail-modal__wrapper {
    max-width: none;
    max-height: calc(100vh - var(--space-4));
    max-height: calc(100dvh - var(--space-4)); /* Mobile Safari */
  }

  .detail-modal__card {
    max-height: calc(100vh - var(--space-4));
    max-height: calc(100dvh - var(--space-4)); /* Mobile Safari */
    border-radius: var(--radius-md);
  }

  .detail-modal__header,
  .detail-modal__body,
  .detail-modal__footer {
    padding: var(--space-3);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .detail-modal {
    transition: none;
  }

  .detail-modal__wrapper {
    transition: none;
  }

  .detail-modal__spinner {
    animation: none;
  }
}
/**
 * Tab Settings Modal — Dialog, Header, Body, Gallery & Editor Views
 */

/*
 * Tab Settings Modal
 * ==================
 * Modal for configuring narrative panel tabs and channel subscriptions.
 * Two-view design: Gallery (tab cards + presets) and Editor (settings + preview).
 * Room-aware channel filtering.
 *
 * UX Improvements Applied:
 * - P1: Visual hierarchy, touch targets (44px min)
 * - P2: Spacing consistency, preset visual treatment
 * - P3: Content clarity ("filters" not "types")
 * - P4: Accessibility (live region, close button semantics)
 * - P5: Mobile experience (modal framing, header order)
 */

/* ========================================
 * NATIVE DIALOG STYLES
 * ======================================== */

.tab-settings-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 900px;
  width: 95vw;
  max-height: 90vh;
  overflow: visible;
}

.tab-settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.tab-settings-dialog__content {
  background: var(--color-bg-elevated, #404040);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-lg, 8px);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

/* ========================================
 * MODAL HEADER
 * P2: Room badge moved to subtitle row
 * ======================================== */

.tab-settings-dialog .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, #333333);
  background: var(--color-bg-elevated, #404040);
  gap: var(--space-3, 12px);
}

.tab-settings-dialog .modal__header-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  flex: 1;
  min-width: 0;
}

.tab-settings-dialog .modal__header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.tab-settings-dialog .modal__title {
  font-size: var(--font-size-lg, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e0e0e0);
  margin: 0;
}

/* Subtitle row with room badge inline */
.tab-settings__subtitle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  flex-wrap: wrap;
}

.tab-settings__subtitle {
  font-size: var(--font-size-sm, 11px);
  color: var(--color-text-muted, #888888);
}

.tab-settings__room-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px var(--space-2, 8px);
  background: var(--color-bg-secondary, #2d2d2d);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-full, 999px);
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-secondary, #a0a0a0);
}

.tab-settings__room-badge-icon {
  font-size: var(--font-size-sm, 11px);
}

.tab-settings__room-badge-label {
  font-weight: var(--font-weight-medium, 500);
}

/* P4: Close button with SVG, better touch target */
.tab-settings-dialog .modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted, #888888);
  cursor: pointer;
  padding: var(--space-2, 8px);
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--radius-md, 4px);
  transition: color var(--transition-fast, 100ms ease), background var(--transition-fast, 100ms ease);
}

.tab-settings-dialog .modal__close:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: var(--color-bg-secondary, #2d2d2d);
}

.tab-settings-dialog .modal__close:focus {
  outline: none;
}

.tab-settings-dialog .modal__close:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.tab-settings-dialog .modal__close svg {
  width: 18px;
  height: 18px;
}

/* ========================================
 * MODAL BODY
 * ======================================== */

.tab-settings-modal__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ========================================
 * GALLERY VIEW
 * P2: Harmonized spacing
 * ======================================== */

.tab-settings__gallery {
  padding: var(--space-4, 16px);
  overflow-y: auto;
  max-height: calc(90vh - 180px);
}

.tab-gallery__section {
  margin-bottom: var(--space-5, 20px);
}

.tab-gallery__section:last-child {
  margin-bottom: 0;
}

.tab-gallery__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
  gap: var(--space-3, 12px);
}

/* P1: Enhanced section titles - better hierarchy */
.tab-gallery__section-title {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #a0a0a0);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.tab-gallery__divider {
  height: 1px;
  background: var(--color-border-subtle, #333333);
  margin: var(--space-4, 16px) 0;
}

/* Tab Cards Grid - P2: Consistent gap */
.tab-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-4, 16px);
}

/* P1: Tab card with better touch target and edit affordance */
.tab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2d2d2d);
  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);
  text-align: center;
  min-height: 110px;
  position: relative;
  overflow: hidden;
}

.tab-card:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-bg-elevated, #404040);
}

.tab-card:focus {
  outline: none;
}

.tab-card:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-bg-elevated, #404040);
}

.tab-card__icon {
  font-size: var(--font-size-2xl, 24px);
  margin-bottom: var(--space-2, 8px);
}

.tab-card__label {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: var(--space-1, 4px);
}

.tab-card__channels {
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
}

/* P1: Better edit affordance - overlay on hover */
.tab-card__hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  background: rgba(97, 175, 239, 0.9);
  color: white;
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  opacity: 0;
  transition: opacity var(--transition-fast, 100ms ease);
}

.tab-card:hover .tab-card__hint,
.tab-card:focus-visible .tab-card__hint {
  opacity: 1;
}

.tab-card__hint-icon {
  width: 14px;
  height: 14px;
}

/* P2: Preset items - solid border with "+" indicator */
.tab-gallery__presets {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.preset-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: transparent;
  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), opacity var(--transition-fast, 100ms ease);
  min-height: 52px;
  position: relative;
}

/* "+" indicator on left */
.preset-item::before {
  content: '+';
  position: absolute;
  left: var(--space-3, 12px);
  font-size: var(--font-size-lg, 16px);
  color: var(--color-accent-primary, #61afef);
  font-weight: var(--font-weight-bold, 700);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.preset-item:hover::before {
  opacity: 1;
}

.preset-item:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.08);
}

.preset-item:focus {
  outline: none;
}

.preset-item:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
  border-color: var(--color-accent-primary, #61afef);
}

.preset-item__icon {
  font-size: var(--font-size-lg, 16px);
  flex-shrink: 0;
  margin-left: var(--space-4, 16px);
}

.preset-item__content {
  flex: 1;
  min-width: 0;
}

.preset-item__label {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.preset-item__desc {
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preset-list__empty {
  font-size: var(--font-size-sm, 11px);
  color: var(--color-text-muted, #888888);
  font-style: italic;
  padding: var(--space-3, 12px);
  text-align: center;
}

/* P3: Simple room notice - moved before tabs when shown */
.tab-gallery__simple-notice {
  background: var(--color-bg-secondary, #2d2d2d);
  border: 1px solid var(--color-border-subtle, #333333);
  border-left: 3px solid var(--color-accent-warning, #e5c07b);
  border-radius: var(--radius-md, 4px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin-bottom: var(--space-4, 16px);
}

.tab-gallery__simple-notice p {
  margin: 0;
  font-size: var(--font-size-sm, 11px);
  color: var(--color-text-secondary, #a0a0a0);
}

/**
 * Tab Settings Modal — Channel List & Preview Pane
 */

/* ========================================
 * EDITOR VIEW
 * ======================================== */

.tab-settings__editor-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.tab-settings__editor-wrapper[hidden] {
  display: none;
}

.tab-editor__back {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-bottom: 1px solid var(--color-border-subtle, #333333);
  background: var(--color-bg-secondary, #2d2d2d);
}

.tab-editor__editing-label {
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #a0a0a0);
}

/* Split Pane Layout */
.tab-editor__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Settings Pane (Left) */
.tab-editor__settings {
  padding: var(--space-4, 16px);
  overflow-y: auto;
  border-right: 1px solid var(--color-border-subtle, #333333);
  background: var(--color-bg-elevated, #404040);
}

.tab-editor__header {
  display: flex;
  gap: var(--space-3, 12px);
  margin-bottom: var(--space-4, 16px);
  flex-wrap: wrap;
}

.tab-editor__name-group {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex: 1;
}

.tab-editor__format-group {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.tab-editor__label {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted, #888888);
  text-transform: uppercase;
}

.tab-editor__icon-input {
  width: 48px;
  text-align: center;
  font-size: var(--font-size-lg, 16px);
  padding: var(--space-2, 8px);
  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);
}

.tab-editor__icon-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.2);
}

.tab-editor__name-input {
  flex: 1;
  min-width: 100px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  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-size: var(--font-size-base, 13px);
}

.tab-editor__name-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.2);
}

.tab-editor__format-select {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  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-size: var(--font-size-sm, 11px);
  cursor: pointer;
}

.tab-editor__format-select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.2);
}

.tab-editor__channels-title {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-muted, #888888);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3, 12px) 0;
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, #333333);
}

.tab-editor__footer {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, #333333);
}

/* ========================================
 * CHANNEL LIST (Flat Groups)
 * ======================================== */

.channel-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.channel-group {
  display: flex;
  flex-direction: column;
}

.channel-group__label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted, #888888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-subtle, #333333);
  margin-top: var(--space-2, 8px);
}

.channel-group:first-child .channel-group__label {
  margin-top: 0;
}

.channel-group__icon {
  font-size: var(--font-size-sm, 11px);
}

.channel-group__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease);
  min-height: 36px;
}

.channel-item:hover {
  background: var(--color-bg-elevated, #404040);
}

.channel-item:focus-within {
  background: var(--color-bg-elevated, #404040);
}

.channel-item__checkbox:focus {
  outline: none;
}

.channel-item__checkbox:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
  border-radius: 2px;
}

.channel-item__checkbox {
  accent-color: var(--color-accent-primary, #61afef);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.channel-item__icon {
  font-size: var(--font-size-sm, 11px);
  flex-shrink: 0;
}

.channel-item__label {
  font-size: var(--font-size-sm, 11px);
  color: var(--color-text-primary, #e0e0e0);
  flex: 1;
}

/* ========================================
 * PREVIEW PANE (Right)
 * ======================================== */

.tab-editor__preview {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-primary, #1e1e1e);
}

.tab-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2d2d2d);
  border-bottom: 1px solid var(--color-border-subtle, #333333);
}

.tab-preview__title {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-muted, #888888);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tab-preview__count {
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
}

.tab-preview__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.tab-preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  color: var(--color-text-muted, #888888);
}

.tab-preview__placeholder-icon {
  font-size: var(--font-size-3xl, 32px);
  margin-bottom: var(--space-2, 8px);
  opacity: 0.5;
}

.tab-preview__placeholder-text {
  font-size: var(--font-size-sm, 11px);
  max-width: 200px;
}

/* Preview entries (cloned from narrative) */
.tab-preview__entry {
  padding: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
  background: var(--color-bg-secondary, #2d2d2d);
  border-radius: var(--radius-sm, 2px);
  font-size: var(--font-size-sm, 11px);
  color: var(--color-text-secondary, #a0a0a0);
}

.tab-preview__entry--dm {
  border-left: 2px solid var(--color-accent-primary, #61afef);
}

.tab-preview__entry--player {
  border-left: 2px solid var(--color-accent-success, #98c379);
}

/* ========================================
/**
 * Tab Settings Modal — Footer, Buttons, Settings, Configured Tab Styles & Responsive
 */

 * MODAL FOOTER
 * ======================================== */

.tab-settings-dialog .modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border-top: 1px solid var(--color-border-subtle, #333333);
  background: var(--color-bg-secondary, #2d2d2d);
  gap: var(--space-3, 12px);
}

/* Primary action in footer should be larger */
.tab-settings-dialog .modal__footer .btn--primary {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-semibold, 600);
}

/* Secondary actions in footer should be more subtle */
.tab-settings-dialog .modal__footer .btn--ghost {
  font-size: var(--font-size-xs, 10px);
}

/* ========================================
 * BUTTONS (scoped to tab-settings-dialog)
 * P1: Touch-friendly sizes (44px min)
 * ======================================== */

.tab-settings-dialog .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  font-size: var(--font-size-sm, 11px);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-md, 4px);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease);
  min-height: 36px;
}

.tab-settings-dialog .btn--primary {
  background: var(--color-accent-primary, #61afef);
  color: white;
  min-height: 44px;
}

.tab-settings-dialog .btn--primary:hover {
  background: #4a9fe0;
}

.tab-settings-dialog .btn--primary:focus {
  outline: none;
}

.tab-settings-dialog .btn--primary:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(97, 175, 239, 0.2);
}

.tab-settings-dialog .btn--secondary {
  background: var(--color-bg-elevated, #404040);
  border-color: var(--color-border-subtle, #333333);
  color: var(--color-text-primary, #e0e0e0);
}

.tab-settings-dialog .btn--secondary:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-bg-secondary, #2d2d2d);
}

.tab-settings-dialog .btn--secondary:focus {
  outline: none;
}

.tab-settings-dialog .btn--secondary:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.tab-settings-dialog .btn--ghost {
  background: transparent;
  color: var(--color-text-muted, #888888);
  min-height: 36px;
}

.tab-settings-dialog .btn--ghost:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: var(--color-bg-secondary, #2d2d2d);
}

.tab-settings-dialog .btn--ghost:focus {
  outline: none;
}

.tab-settings-dialog .btn--ghost:focus-visible {
  outline: 2px solid var(--color-text-muted, #888888);
  outline-offset: 2px;
}

.tab-settings-dialog .btn--danger {
  background: transparent;
  border: 1px solid var(--color-accent-error, #e06c75);
  color: var(--color-accent-error, #e06c75);
}

.tab-settings-dialog .btn--danger:hover {
  background: var(--color-accent-error, #e06c75);
  color: white;
}

.tab-settings-dialog .btn--danger:focus {
  outline: none;
}

.tab-settings-dialog .btn--danger:focus-visible {
  outline: 2px solid var(--color-accent-error, #e06c75);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(224, 108, 117, 0.2);
}

/* P1: Small buttons still meet touch target */
.tab-settings-dialog .btn--sm {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-size: var(--font-size-xs, 10px);
  min-height: 36px;
}

/* ========================================
 * SETTINGS BUTTON IN FILTER BAR
 * ======================================== */

.nf-btn.nf-settings {
  margin-left: auto;
  background: transparent;
  border: 1px dashed var(--color-border-subtle, #333333);
}

.nf-btn.nf-settings:hover {
  border-style: solid;
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-bg-secondary, #2d2d2d);
}

.nf-btn.nf-settings .nf-icon {
  opacity: 0.6;
  transition: opacity var(--transition-fast, 100ms ease);
}

.nf-btn.nf-settings:hover .nf-icon {
  opacity: 1;
}

/* ========================================
 * CONFIGURED TAB STYLES
 * ======================================== */

.nf-btn.nf-configured {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
}

.nf-btn.nf-configured .nf-icon {
  font-size: var(--font-size-sm, 11px);
}

.nf-btn.nf-configured .nf-label {
  font-size: var(--font-size-sm, 11px);
}

/* ========================================
 * RESPONSIVE
 * P5: Preserve modal framing on mobile
 * ======================================== */

@media (max-width: 768px) {
  .tab-settings-dialog {
    max-width: calc(100vw - var(--space-4, 16px));
    width: calc(100vw - var(--space-4, 16px));
    max-height: calc(100vh - var(--space-8, 32px));
    max-height: calc(100dvh - var(--space-8, 32px));
    margin: var(--space-4, 16px) auto;
  }

  .tab-settings-dialog__content {
    border-radius: var(--radius-lg, 8px);
    max-height: calc(100vh - var(--space-8, 32px));
    max-height: calc(100dvh - var(--space-8, 32px));
  }

  .tab-editor__split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .tab-editor__settings {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle, #333333);
    max-height: 50vh;
  }

  .tab-editor__preview {
    max-height: 200px;
  }

  .tab-gallery__grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--space-3, 12px);
  }

  .tab-card {
    min-height: 96px;
    padding: var(--space-3, 12px);
  }

  /* P5: Fix header ordering - don't reorder on mobile */
  .tab-settings-dialog .modal__header {
    flex-wrap: nowrap;
    gap: var(--space-2, 8px);
  }

  .tab-settings-dialog .modal__header-left {
    min-width: 0;
    flex: 1;
  }

  .tab-settings-dialog .modal__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tab-settings__subtitle-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .tab-editor__header {
    flex-direction: column;
  }

  .tab-editor__name-group {
    width: 100%;
  }

  .tab-editor__format-group {
    width: 100%;
    justify-content: flex-start;
  }

  .preset-item {
    flex-wrap: wrap;
  }

  .preset-item__desc {
    width: 100%;
    margin-top: var(--space-1, 4px);
  }

  .tab-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
 * ACCESSIBILITY UTILITIES
 * ======================================== */

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

/* P4: Live region for announcements */
[aria-live="polite"] {
  /* Screen reader only, no visual */
}
/**
 * Tab Settings Modal — Import Hub
 * ==================================
 * Modal for configuring narrative panel tabs and channel subscriptions.
 *
 * Decomposed into focused files under tab_settings_modal/ for maintainability.



 */
/*
 * Uploaded Asset Modal (#3864)
 * =============================
 * Drag-drop / file-picker modal for POST /api/v1/uploaded_assets.
 * Mirrors the visual language of the clarification modal (terminal-themed,
 * mobile-friendly with full-bleed sheet on small screens).
 */

.uploaded-asset-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal, 1000);
  animation: uploaded-asset-modal-backdrop-enter 0.2s ease-out;
}

.uploaded-asset-modal__backdrop.hidden {
  display: none;
}

.uploaded-asset-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content, 1001);
  max-width: 560px;
  width: calc(100% - var(--space-8, 2rem));
  max-height: calc(100vh - var(--space-8, 2rem));
  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 30px rgba(97, 175, 239, 0.2);
  animation: uploaded-asset-modal-enter 0.2s ease-out;
  overflow: hidden;
}

.uploaded-asset-modal.hidden {
  display: none;
}

.uploaded-asset-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-bottom: 1px solid var(--color-border-default, #444);
}

.uploaded-asset-modal__title {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-md, 0.9375rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary, #aaa);
  font-size: var(--font-size-xl, 1.25rem);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 3px);
}

.uploaded-asset-modal__close:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: rgba(255, 255, 255, 0.05);
}

.uploaded-asset-modal__close:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.uploaded-asset-modal__body {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  overflow-y: auto;
}

.uploaded-asset-modal__caps-hint {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.uploaded-asset-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.uploaded-asset-modal__field-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uploaded-asset-modal__kind-select,
.uploaded-asset-modal__caption {
  background: var(--color-bg-tertiary, #282840);
  border: 1px solid var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.uploaded-asset-modal__kind-select:focus,
.uploaded-asset-modal__caption:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  min-height: 140px;
  padding: var(--space-5, 1.25rem);
  background: rgba(97, 175, 239, 0.04);
  border: 2px dashed var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.uploaded-asset-modal__drop-zone:hover,
.uploaded-asset-modal__drop-zone:focus-visible {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.10);
  outline: none;
}

.uploaded-asset-modal__drop-zone--hot {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.18);
}

.uploaded-asset-modal__drop-icon {
  width: 36px;
  height: 36px;
  color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__drop-text {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__drop-link {
  color: var(--color-accent-primary, #61afef);
  text-decoration: underline;
}

.uploaded-asset-modal__drop-text--touch {
  display: none;
}

.uploaded-asset-modal__preview {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  padding: var(--space-3, 0.75rem);
  background: var(--color-bg-tertiary, #282840);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border-subtle, #333);
}

.uploaded-asset-modal__preview-image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm, 3px);
  background: var(--color-bg-secondary, #2a2a3e);
  flex-shrink: 0;
}

.uploaded-asset-modal__preview-meta {
  flex: 1;
  min-width: 0;
}

.uploaded-asset-modal__preview-name {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploaded-asset-modal__preview-size {
  margin: var(--space-1, 0.25rem) 0 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.uploaded-asset-modal__error,
.uploaded-asset-modal__rate-limit {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 6px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
}

.uploaded-asset-modal__error {
  background: rgba(224, 108, 117, 0.12);
  border: 1px solid rgba(224, 108, 117, 0.4);
  color: var(--color-error, #e06c75);
}

.uploaded-asset-modal__rate-limit {
  background: rgba(229, 192, 123, 0.12);
  border: 1px solid rgba(229, 192, 123, 0.4);
  color: var(--color-warning, #e5c07b);
}

.uploaded-asset-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-top: 1px solid var(--color-border-default, #444);
}

.uploaded-asset-modal__button {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border-default, #444);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uploaded-asset-modal__button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.uploaded-asset-modal__button--secondary {
  background: transparent;
  color: var(--color-text-secondary, #aaa);
}

.uploaded-asset-modal__button--secondary:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__button--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  border-color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__button--primary:hover:not([disabled]) {
  background: var(--color-accent-primary-hover, #4d97d6);
  border-color: var(--color-accent-primary-hover, #4d97d6);
}

.uploaded-asset-modal__button--primary:focus-visible,
.uploaded-asset-modal__button--secondary:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

@keyframes uploaded-asset-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 uploaded-asset-modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile / touch — bottom-sheet layout, picker fallback. */
@media (max-width: 768px) {
  .uploaded-asset-modal {
    max-width: 100%;
    width: 100%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 90vh;
    animation: uploaded-asset-modal-enter-mobile 0.25s ease-out;
  }

  @keyframes uploaded-asset-modal-enter-mobile {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (hover: none) and (pointer: coarse) {
  .uploaded-asset-modal__drop-text--desktop { display: none; }
  .uploaded-asset-modal__drop-text--touch { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .uploaded-asset-modal,
  .uploaded-asset-modal__backdrop {
    animation: none;
  }
  .uploaded-asset-modal__drop-zone,
  .uploaded-asset-modal__button {
    transition: none;
  }
}
/* LLM API Keys Settings Component */

.llm-keys {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-md);
}

.llm-keys__list {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-sm);
}

.llm-keys__loading {
  color: var(--terminal-text-muted);
  font-style: italic;
  padding: var(--terminal-spacing-md);
  text-align: center;
}

.llm-keys__empty {
  color: var(--terminal-text-muted);
  padding: var(--terminal-spacing-lg);
  text-align: center;
  border: 1px dashed var(--terminal-border);
  border-radius: var(--terminal-radius);
}

.llm-keys__error-state {
  color: var(--terminal-error);
  padding: var(--terminal-spacing-md);
  text-align: center;
}

/* Individual Key Item */
.llm-key-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--terminal-spacing-md);
  padding: var(--terminal-spacing-sm) var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius);
}

@media (max-width: 768px) {
  .llm-key-item {
    grid-template-columns: 1fr;
    gap: var(--terminal-spacing-sm);
  }
}

.llm-key-item__info {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  flex-wrap: wrap;
}

.llm-key-item__provider {
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--terminal-radius-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.llm-key-item__provider--anthropic {
  background: rgba(209, 179, 141, 0.2);
  color: #d1b38d;
}

.llm-key-item__provider--openai {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.llm-key-item__provider--gemini {
  background: rgba(66, 133, 244, 0.2);
  color: #4285f4;
}

.llm-key-item__label {
  color: var(--terminal-text);
  font-weight: 500;
}

.llm-key-item__masked {
  color: var(--terminal-text-muted);
  font-family: monospace;
  font-size: 0.875rem;
}

.llm-key-item__status {
  display: flex;
  align-items: center;
}

.llm-key-item__status-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--terminal-radius-sm);
}

.llm-key-item__status-badge--valid {
  background: rgba(34, 197, 94, 0.2);
  color: var(--terminal-success);
}

.llm-key-item__status-badge--invalid {
  background: rgba(239, 68, 68, 0.2);
  color: var(--terminal-error);
}

.llm-key-item__status-badge--pending {
  background: rgba(234, 179, 8, 0.2);
  color: var(--terminal-warning);
}

.llm-key-item__usage {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.llm-key-item__actions {
  display: flex;
  gap: var(--terminal-spacing-xs);
}

/* Add Form */
.llm-keys__add-form {
  padding: var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius);
}

.llm-keys__form-title {
  margin: 0 0 var(--terminal-spacing-md) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text);
}

.llm-keys__field {
  margin-bottom: var(--terminal-spacing-md);
}

.llm-keys__field label {
  display: block;
  margin-bottom: var(--terminal-spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--terminal-text-muted);
}

.llm-keys__field select,
.llm-keys__field input {
  width: 100%;
  padding: var(--terminal-spacing-sm);
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-sm);
  color: var(--terminal-text);
  font-size: 0.875rem;
}

.llm-keys__field select:focus,
.llm-keys__field input:focus {
  outline: none;
  border-color: var(--terminal-accent);
}

.llm-keys__hint {
  display: block;
  margin-top: var(--terminal-spacing-xs);
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.llm-keys__actions {
  display: flex;
  gap: var(--terminal-spacing-sm);
  margin-top: var(--terminal-spacing-md);
}

.llm-keys__error {
  margin-top: var(--terminal-spacing-md);
  padding: var(--terminal-spacing-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--terminal-error);
  border-radius: var(--terminal-radius-sm);
  color: var(--terminal-error);
  font-size: 0.875rem;
}

/* Footer */
.llm-keys__footer {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-sm);
  align-items: flex-start;
}

.llm-keys__note {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
  margin: 0;
}
/* Highlight pulse animation for carousel when scrolled to */
.character-carousel-container.highlight-pulse {
  animation: carouselPulse 0.5s ease-out 3;
}

@keyframes carouselPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.4);
  }
}

/* Prompt Input Modal (for entering invite codes, etc.)
 * ========================================================================== */
.prompt-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  animation: overlayFadeIn 0.2s ease;
}

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

.prompt-input-modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 40px var(--overlay-medium-plus);
  animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.prompt-input-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1rem;
  text-align: center;
}

.prompt-input-field {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1.125rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-subtle);
  border-radius: 6px;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}

.prompt-input-field:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--overlay-white-light);
}

.prompt-input-field::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.prompt-input-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.prompt-input-actions .btn {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.prompt-input-actions .btn--secondary {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

.prompt-input-actions .btn--secondary:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-secondary);
}

.prompt-input-actions .btn--primary {
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-text-primary);
}

.prompt-input-actions .btn--primary:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  filter: brightness(0.85);
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .prompt-input-modal {
    padding: 1.25rem;
  }

  .prompt-input-field {
    font-size: 1rem;
    padding: 0.75rem;
  }
}

/* ========================================
 * Welcome Experience
 * Landing page polish for new users
 * ======================================== */

.lobby-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-8, 32px);
  text-align: center;
  animation: lobbyFadeIn 0.5s ease-out;
}

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

.lobby-welcome__greeting {
  font-size: var(--font-size-2xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2, 8px);
  animation: greetingSlideIn 0.4s ease-out 0.1s backwards;
}

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

.lobby-welcome__subtitle {
  font-size: var(--font-size-base, 16px);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8, 32px);
  animation: greetingSlideIn 0.4s ease-out 0.2s backwards;
}

/* Quick action cards */
.lobby-welcome__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 16px);
  max-width: 600px;
  width: 100%;
}

.lobby-welcome__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: background var(--transition-normal, 0.2s), border-color var(--transition-normal, 0.2s), opacity var(--transition-normal, 0.2s), transform var(--transition-normal, 0.2s);
  animation: actionCardSlideUp 0.4s ease-out backwards;
}

.lobby-welcome__action:nth-child(1) { animation-delay: 0.3s; }
.lobby-welcome__action:nth-child(2) { animation-delay: 0.4s; }
.lobby-welcome__action:nth-child(3) { animation-delay: 0.5s; }

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

.lobby-welcome__action:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.lobby-welcome__action:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.lobby-welcome__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-bg-tertiary);
  border-radius: 50%;
  font-size: var(--font-size-xl, 20px);
  transition: transform var(--transition-fast, 0.15s);
}

.lobby-welcome__action:hover .lobby-welcome__action-icon {
  transform: scale(1.1);
}

.lobby-welcome__action-title {
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.lobby-welcome__action-desc {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Session info banner */
.lobby-session-info {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4, 16px);
}

.lobby-session-info__icon {
  width: 20px;
  height: 20px;
  background: var(--color-accent-success, #22c55e);
  -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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%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 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.lobby-session-info__text {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-accent-success, #22c55e);
}

/* Returning player welcome */
.lobby-welcome--returning .lobby-welcome__greeting::after {
  content: ' 👋';
}

/* New player welcome */
.lobby-welcome--new .lobby-welcome__action--primary {
  border-color: var(--color-accent-primary);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
}

.lobby-welcome--new .lobby-welcome__action--primary .lobby-welcome__action-icon {
  background: var(--color-accent-primary);
  color: white;
}

/* Recent character quick-resume */
.lobby-recent-character {
  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: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
  margin-top: var(--space-6, 24px);
  max-width: 400px;
  width: 100%;
}

.lobby-recent-character:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.lobby-recent-character__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg, 18px);
}

.lobby-recent-character__info {
  flex: 1;
  text-align: left;
}

.lobby-recent-character__name {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  font-size: var(--font-size-base, 16px);
}

.lobby-recent-character__details {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

.lobby-recent-character__continue {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium, 500);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .lobby-welcome,
  .lobby-welcome__greeting,
  .lobby-welcome__subtitle,
  .lobby-welcome__action {
    animation: none;
  }

  .lobby-welcome__action:hover {
    transform: none;
  }

  .lobby-welcome__action:hover .lobby-welcome__action-icon {
    transform: none;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .lobby-welcome {
    padding: var(--space-4, 16px);
  }

  .lobby-welcome__actions {
    grid-template-columns: 1fr;
  }

  .lobby-welcome__action {
    flex-direction: row;
    text-align: left;
    padding: var(--space-4, 16px);
  }

  .lobby-welcome__action-icon {
    width: 40px;
    height: 40px;
  }
}
/**
 * Lobby Banner — Welcome & Quick Actions
 * ========================================
 * Welcome message, dragon art, quick command suggestions, play prompt,
 * announcements, and banner backgrounds.
 */

/* Lobby Banner - Battle.net-inspired welcome banner
 * ========================================================================== */

.lobby-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  min-height: auto;
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* Welcome message with ASCII dragon */
.lobby-banner__welcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.lobby-banner__welcome--ascii {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4, 16px);
}

/* ASCII Dragon Art */
.lobby-banner__dragon {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.15;
  color: var(--color-text-muted);
  margin: 0;
  white-space: pre;
  flex-shrink: 0;
  opacity: 0.7;
}

/* SVG Dragon */
.lobby-banner__welcome--svg {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4, 16px);
}

.lobby-banner__dragon-svg {
  display: inline-flex;
  width: 80px;
  height: 48px;
  color: var(--color-text-muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.lobby-banner__dragon-svg svg {
  width: 100%;
  height: 100%;
}

.lobby-banner__greeting-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding-top: var(--space-2, 8px);
}

.lobby-banner__greeting {
  margin: 0;
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.lobby-banner__subtitle {
  margin: 0;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* Quick Command Suggestions
 * Affordance map (#3734 4/5): the chip row is the visible map of available
 * lobby commands now that the eager surfaces are stripped (#3731). Each chip
 * dispatches the same command the slash surface uses through
 * LobbyCommandRouter (#3732). We deliberately allow the row to wrap so all
 * 7 chips remain reachable at every viewport — discoverability over
 * compactness. */
.lobby-banner__quick-commands {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  flex-wrap: wrap;
  /* Belt-and-suspenders: prevent any horizontal scroll spillover even when
     a single chip's title attribute or focus ring would otherwise nudge the
     row past its container. */
  max-width: 100%;
  min-width: 0;
}

.lobby-banner__quick-label {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium, 500);
}

.lobby-banner__quick-cmd {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: var(--font-size-xs, 12px);
  padding: var(--space-0-5, 2px) var(--space-2, 8px);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent-primary);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
  line-height: 1.4;
}

.lobby-banner__quick-cmd:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--color-accent-primary);
}

.lobby-banner__quick-cmd:active {
  background: rgba(251, 191, 36, 0.25);
}

/* Quick Play Prompt — prominent CTA for last-played character */
.lobby-banner__quick-play-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(34, 197, 94, 0.05) 100%
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md, 8px);
  animation: resumePromptSlideIn 0.3s ease-out;
}

.quick-play-prompt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 8px);
  background: rgba(34, 197, 94, 0.2);
  color: var(--color-accent-success, #22c55e);
  flex-shrink: 0;
}

.quick-play-prompt__icon svg {
  width: 18px;
  height: 18px;
}

.quick-play-prompt__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-0-5, 2px);
}

.quick-play-prompt__title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent-success, #22c55e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-play-prompt__character {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-play-prompt__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quick-play-prompt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: var(--space-1-5, 6px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
  border: none;
}

.quick-play-prompt__btn svg {
  width: 14px;
  height: 14px;
}

.quick-play-prompt__btn--play {
  background: var(--color-accent-success, #22c55e);
  color: white;
}

.quick-play-prompt__btn--play:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.quick-play-prompt__btn--play:active {
  transform: translateY(0);
}

/* Resume Incomplete Character Prompt */
.lobby-banner__resume-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.15) 0%,
    rgba(124, 58, 237, 0.05) 100%
  );
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-md, 8px);
  animation: resumePromptSlideIn 0.3s ease-out;
}

/* Draft-state modifier (#4263 finding 2.3) — visually distinguishes the
   in-progress character creation strip from the solid "Continue Playing"
   strip above. Dashed border signals "unfinished", lower-saturation fill
   signals "rough draft", and the inline "Draft" badge gives the explicit
   state label so the two strips are never confusable at a glance. */
.lobby-banner__resume-prompt--draft {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.08) 0%,
    rgba(124, 58, 237, 0.03) 100%
  );
  border: 1px dashed rgba(124, 58, 237, 0.5);
}

.resume-prompt__badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1-5, 6px);
  padding: 1px var(--space-1-5, 6px);
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent-primary);
  background: rgba(124, 58, 237, 0.15);
  border: 1px dashed rgba(124, 58, 237, 0.5);
  border-radius: var(--radius-sm, 4px);
  vertical-align: middle;
  line-height: 1.2;
}

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

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

.resume-prompt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 8px);
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.resume-prompt__icon svg {
  width: 18px;
  height: 18px;
}

.resume-prompt__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-0-5, 2px);
}

.resume-prompt__title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.resume-prompt__character {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-prompt__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.resume-prompt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: var(--space-1-5, 6px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
  border: none;
  background: transparent;
}

.resume-prompt__btn svg {
  width: 14px;
  height: 14px;
}

.resume-prompt__btn--resume {
  background: var(--color-accent-primary);
  color: white;
}

.resume-prompt__btn--resume:hover {
  background: var(--color-accent-primary-hover, #6d28d9);
  transform: translateY(-1px);
}

.resume-prompt__btn--resume:active {
  transform: translateY(0);
}

.resume-prompt__btn--discard {
  padding: var(--space-1-5, 6px);
  color: var(--color-text-muted);
}

.resume-prompt__btn--discard:hover {
  color: var(--color-accent-error);
  background: rgba(239, 68, 68, 0.1);
}

/* Announcements Slot */
.lobby-banner__announcements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* State-driven visibility (preferred over inline style mutations) */
.lobby-banner__announcements--hidden {
  display: none;
}

.lobby-banner__announcement {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

.lobby-banner__announcement--info {
  border-left: 3px solid var(--color-accent-info, #3b82f6);
}

.lobby-banner__announcement--success {
  border-left: 3px solid var(--color-accent-success, #22c55e);
}

.lobby-banner__announcement--warning {
  border-left: 3px solid var(--color-accent-warning, #f59e0b);
}

/* Context-specific banner backgrounds */
.lobby-banner--combat {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(239, 68, 68, 0.05) 100%
  );
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

.lobby-banner--character_creation {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.15) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border-bottom-color: rgba(124, 58, 237, 0.3);
  min-height: auto;
  max-height: none;
  padding: var(--space-3, 12px) var(--space-4, 16px);
}

.lobby-banner--exploration {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(34, 197, 94, 0.05) 100%
  );
  border-bottom-color: rgba(34, 197, 94, 0.3);
}
/**
 * Lobby Banner — Character Creation & Mobile
 * ============================================
 * Character creation header, step summary, responsive, and mobile adjustments.
 */

/* Character Creation Header */
.lobby-banner__creation-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.creation-header__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
}

.creation-header__title {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.creation-header__subtitle {
  font-size: var(--font-size-sm, 14px);
  font-style: italic;
  color: var(--color-accent-primary);
  opacity: 0.8;
}

/* Character Creation Step Summary (in header, replaces duplicate progress bar) */
.creation-header__step-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  margin-top: var(--space-1, 4px);
}

.creation-header__step-text {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.creation-header__step-count {
  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.5px;
}

/* ========================================
 * Sticky Mobile Step Indicator
 * Shows "Step N of M: Description" on mobile
 * within the creation-progress component
 * ======================================== */

.creation-progress__mobile-step {
  display: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  text-align: center;
  padding-top: var(--space-1, 4px);
}

.creation-progress__mobile-step-text {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 500;
}

@media (max-width: 640px) {
  .creation-progress__mobile-step {
    display: block;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    animation: none;
  }

  .quick-play-prompt__btn--play:hover,
  .resume-prompt__btn--resume:hover {
    transform: none;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .lobby-banner {
    padding: var(--space-3, 12px);
    max-height: none;
  }

  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    flex-wrap: wrap;
  }

  .quick-play-prompt__content,
  .resume-prompt__content {
    flex-basis: calc(100% - 44px);
  }

  .quick-play-prompt__actions,
  .resume-prompt__actions {
    margin-left: auto;
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: var(--space-2, 8px);
  }
}

/* ========================================
 * Mobile compaction (#3705, #3706, #3748)
 * Below 768px:
 *   - Banner total height target: ≤72px (#3748 — both lobby + creation contexts)
 *   - Icon shrinks from 80×48 SVG to 24×24 inline
 *   - Subtitle hidden
 *   - Quick-cmds inlined into a single horizontally-scrollable row
 *     (was wrapped to multiple rows pre-#3748 — wrapping pushed banner to
 *     ~92-120px, well over the 72px cap. Horizontal scroll keeps every chip
 *     reachable via swipe while collapsing to one ~28px row.)
 *   - Duplicate "Your Heroes / Quick Start" post-it cards hidden
 *     (slash-commands /characters and /presets remain in input)
 *   - Character-creation banner: title row only (no separate step summary
 *     row), smaller font; step summary still rendered below banner via
 *     creation-progress component.
 *
 * Regression guards:
 *   - e2e/tests/mobile/lobby-banner-postit-hide.spec.js (#3749)
 *   - e2e/tests/mobile/lobby-banner-height.spec.js (#3748)
 * ======================================== */
@media (max-width: 767px) {
  .lobby-banner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    min-height: 0;
    max-height: 72px;
    overflow: hidden;
  }

  /* Override the .lobby-banner--character_creation desktop padding so the
     creation context also honors the 72px cap (#3748). The desktop rule at
     line ~407 has equal specificity but loses on source order — we re-declare
     padding here defensively in case someone re-orders the file. */
  .lobby-banner.lobby-banner--character_creation {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    max-height: 72px;
  }

  /* Greeting row collapses to icon + greeting on one line */
  .lobby-banner__welcome--svg {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    flex-wrap: nowrap;
  }

  /* Shrink dragon icon to 24x24 */
  .lobby-banner__dragon-svg {
    width: 24px;
    height: 24px;
  }

  /* Greeting text inline, no padding */
  .lobby-banner__greeting-text {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 8px);
    padding-top: 0;
    min-width: 0;
    overflow: hidden;
  }

  .lobby-banner__greeting {
    font-size: var(--font-size-sm, 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Drop subtitle on mobile */
  .lobby-banner__subtitle {
    display: none;
  }

  /* #3748: Single-row chip strip with horizontal scroll.
     Pre-#3748 the row wrapped to 2-3 lines (28px × 3 = 84px), pushing banner
     past 72px. Now the row is nowrap + overflow-x:auto — all 7 chips remain
     tappable via horizontal swipe, the banner stays one chip-row tall (~28px),
     and discoverability is preserved (chips visible at the right edge invite
     the swipe). */
  .lobby-banner__quick-commands {
    flex: 1 1 100%;
    margin-top: 0;
    gap: var(--space-1, 4px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .lobby-banner__quick-commands::-webkit-scrollbar {
    display: none; /* Chrome/Safari — chips visible at edge are the affordance */
  }

  .lobby-banner__quick-label {
    display: none;
  }

  .lobby-banner__quick-cmd {
    min-height: 24px;
    padding: 0 var(--space-1-5, 6px);
    font-size: 11px;
    flex-shrink: 0; /* Don't compress chips inside the scroll strip */
  }

  /* #3706 / #3749: Hide duplicate post-it CTAs on mobile.
     The quick-cmd chips already cover /characters + /presets via input.
     Regression guard: e2e/tests/mobile/lobby-banner-postit-hide.spec.js. */
  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    display: none;
  }

  /* #3748: Compact creation-context header.
     Desktop renders title (18px bold) + subtitle italic + step summary +
     step count = ~50-60px of text + 24px padding = ~84+px. At mobile we
     collapse to a single line: title + step count, drop subtitle. The
     creation-progress component below the banner still shows the detailed
     step text via .creation-progress__mobile-step (line ~490). */
  .lobby-banner__creation-header {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-bottom: 0;
    min-width: 0;
    overflow: hidden;
  }

  .creation-header__title-row {
    align-items: baseline;
    gap: var(--space-2, 8px);
    min-width: 0;
    overflow: hidden;
  }

  .creation-header__title {
    font-size: var(--font-size-base, 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .creation-header__subtitle {
    /* Drop the italic subtitle on mobile — title already says "Character
       Creation"; subtitle is decorative. */
    display: none;
  }

  .creation-header__step-summary {
    margin-top: 0;
    flex-shrink: 0;
  }

  .creation-header__step-text {
    /* Step text is still rendered by creation-progress on mobile (see
       .creation-progress__mobile-step at ≤640px). Hide here to avoid
       duplication. */
    display: none;
  }

  .creation-header__step-count {
    font-size: var(--font-size-xs, 12px);
  }
}

/* ========================================
 * #3734 4/5 / #3748: Ultra-narrow viewports (≤480px)
 * Tighten chip padding even further. The 767px rule already establishes a
 * single horizontally-scrollable row (#3748), so this just shrinks the chips
 * and keeps the same overflow-x:auto behavior — the scroll stays inside
 * .lobby-banner__quick-commands and never spills to the document.
 * ======================================== */
@media (max-width: 480px) {
  .lobby-banner__quick-commands {
    /* Force the chip row to its own line beneath the greeting/icon. */
    flex-basis: 100%;
    gap: 4px;
    /* Inherit overflow-x: auto from the 767px rule — chips remain reachable
       via swipe. The banner itself has overflow:hidden + max-height:72px so
       this strip cannot leak outside its column. */
  }

  .lobby-banner__quick-cmd {
    /* Slightly smaller padding so common 4-letter chips like /help fit
       3-per-row at 360px. */
    padding: 0 4px;
    font-size: 10.5px;
    min-height: 24px;
  }
}
/**
 * Lobby Banner — Import Hub
 * ===========================
 * Battle.net-inspired welcome banner with creation support.
 *
 * Decomposed into focused files under lobby_banner/ for maintainability.


 */
/* Image Quota Badge (#3805, redesigned #4256)
 * Visual gauge surfaced in the lobby that shows per-user image generation
 * usage as two stacked segmented progress bars (daily on top, hourly below).
 * Mobile-friendly: collapses caption width and tightens spacing under 480px.
 * Replaced the prior text-strip ("Images: 0/30 today · 0/10 this hour") that
 * looked like debug output. The bars communicate fill at a glance and shift
 * to warm/amber at 80% and to a prominent red at 100% (exceeded).
 * ========================================================================== */

.image-quota-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin: 0;
  background: var(--color-bg-tertiary, #1a1a1a);
  border-top: 1px solid var(--color-border-subtle, #2a2a2a);
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 28px;
}

.image-quota-badge__icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  opacity: 0.65;
  flex-shrink: 0;
}

.image-quota-badge__icon svg {
  width: 100%;
  height: 100%;
}

.image-quota-badge__label {
  color: var(--color-text-tertiary, #888);
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ==========================================================================
 * Visual gauge — two stacked segmented bars (#4256)
 *
 * Each row is a 3-column grid: caption | bar | count. The fill scales by
 * the inline CSS variable `--fill` (a percentage 0-100) and the row-level
 * `data-state` attribute drives color (ok / warning / exceeded). Cascading
 * state classes on the parent badge ensure server-rendered HTML and
 * JS-updated state stay in lockstep.
 * ========================================================================== */

.image-quota-gauge {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 4px;
  min-width: 10rem;
  max-width: 22rem;
}

.image-quota-gauge__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.72rem;
  line-height: 1;
}

.image-quota-gauge__caption {
  color: var(--color-text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  font-weight: 600;
}

.image-quota-gauge__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--color-border-subtle, #2a2a2a);
  overflow: hidden;
  /* Subtle segmented texture — 8 ticks across the rail, mirrors typical
     hourly cap (10) and dailies divisible by 8. Decorative only. */
  background-image:
    linear-gradient(
      to right,
      transparent calc(12.5% - 1px),
      rgba(255, 255, 255, 0.04) calc(12.5% - 1px),
      rgba(255, 255, 255, 0.04) 12.5%,
      transparent 12.5%
    );
  background-size: 12.5% 100%;
}

.image-quota-gauge__fill {
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: var(--color-accent, #3b82f6);
  border-radius: inherit;
  transition: width 0.35s ease, background-color 0.2s ease;
}

/* Per-row state coloring. Driven by data-state on the row so the daily and
   hourly bars can shift independently (e.g. hour at 100%, day at 40%). */
.image-quota-gauge__row[data-state="ok"] .image-quota-gauge__fill {
  background: var(--color-accent, #3b82f6);
}

.image-quota-gauge__row[data-state="warning"] .image-quota-gauge__fill {
  background: var(--color-warning, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.image-quota-gauge__row[data-state="exceeded"] .image-quota-gauge__fill {
  background: var(--color-danger, #ef4444);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Pulse the exceeded bar so "cap reached" is unmissable without being noisy. */
@keyframes image-quota-gauge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.image-quota-gauge__row[data-state="exceeded"] .image-quota-gauge__fill {
  animation: image-quota-gauge-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .image-quota-gauge__fill {
    transition: none;
    animation: none !important;
  }
}

.image-quota-gauge__count {
  color: var(--color-text-primary, #ddd);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  white-space: nowrap;
}

.image-quota-gauge__count-sep {
  opacity: 0.45;
  margin: 0 1px;
}

.image-quota-badge__warning {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 * Panel-resident variant (#4381)
 * When the badge is rendered inside the image-gallery panel rather than as
 * full-bleed lobby chrome, it drops the edge-to-edge borders and gains a
 * rounded card appearance that fits the gallery's vertical layout.
 * ========================================================================== */

.image-quota-badge--in-panel {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
  border-radius: 0;
  margin: 0 0 var(--space-2, 8px) 0;
}

/* Restate the warning/exceeded border overrides for in-panel context so the
   state colors still cascade correctly without the top/side borders. */
.image-quota-badge--in-panel.image-quota-badge--warning {
  border-bottom-color: var(--color-warning, #d97706);
}

.image-quota-badge--in-panel.image-quota-badge--exceeded {
  border-left: 3px solid var(--color-danger, #dc2626);
  border-bottom: 1px solid var(--color-danger, #dc2626);
}

/* State variants */
.image-quota-badge--ok {
  /* default — neutral tint */
}

/* State-driven visibility (preferred over inline style mutations) */
.image-quota-badge--hidden {
  display: none;
}

.image-quota-badge__warning--hidden {
  display: none;
}

.image-quota-badge--warning {
  color: var(--color-text-primary, #ddd);
  border-top-color: var(--color-warning, #d97706);
  border-bottom-color: var(--color-warning, #d97706);
  background: linear-gradient(
    180deg,
    rgba(217, 119, 6, 0.05) 0%,
    var(--color-bg-tertiary, #1a1a1a) 100%
  );
}

.image-quota-badge--warning .image-quota-badge__warning {
  background: var(--color-warning-bg, rgba(217, 119, 6, 0.15));
  color: var(--color-warning, #f59e0b);
  border: 1px solid var(--color-warning, #d97706);
}

.image-quota-badge--exceeded {
  /* Promote exceeded state from a 28px strip into a prominent banner
     (#4269 finding 8.3). Stronger left accent + extra padding makes the
     blocked-generation state clearly noticed without blocking gameplay. */
  color: var(--color-text-primary, #ddd);
  border-top: 1px solid var(--color-danger, #dc2626);
  border-bottom: 1px solid var(--color-danger, #dc2626);
  border-left: 3px solid var(--color-danger, #dc2626);
  padding-top: var(--space-3, 12px);
  padding-bottom: var(--space-3, 12px);
  background: linear-gradient(
    180deg,
    rgba(220, 38, 38, 0.12) 0%,
    var(--color-bg-tertiary, #1a1a1a) 100%
  );
}

.image-quota-badge--exceeded .image-quota-badge__warning {
  background: var(--color-danger-bg, rgba(220, 38, 38, 0.15));
  color: var(--color-danger, #ef4444);
  border: 1px solid var(--color-danger, #dc2626);
  font-weight: 700;
}

/* ==========================================================================
 * Exceeded-state banner detail (#4269 finding 8.3)
 * Renders only when the badge is in --exceeded state. Spans the badge full
 * width below the gauge to explain what's blocked and how to recover.
 * ========================================================================== */

.image-quota-badge__exceeded-detail {
  flex-basis: 100%;
  margin: var(--space-2, 8px) 0 0 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-danger-bg, rgba(220, 38, 38, 0.12));
  border: 1px solid var(--color-danger, #dc2626);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary, #ddd);
  font-size: 0.82rem;
  line-height: 1.45;
}

.image-quota-badge__exceeded-detail--hidden {
  display: none;
}

.image-quota-badge__exceeded-message {
  margin: 0 0 var(--space-1, 4px) 0;
  color: var(--color-text-primary, #ddd);
}

.image-quota-badge__exceeded-recovery {
  margin: 0;
  color: var(--color-text-secondary, #aaa);
  font-size: 0.78rem;
}

/* ==========================================================================
 * Tier-upgrade CTA (#3862)
 * Visible only when the badge is in --exceeded state. Server-rendered as
 * either a link to /billing (for subscribers) or neutral free-tier text
 * (for non-subscribers). Controller toggles --hidden class.
 * ========================================================================== */

.image-quota-badge__cta {
  flex-basis: 100%;
  margin: var(--space-1, 4px) 0 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text-secondary, #aaa);
}

.image-quota-badge__cta--hidden {
  display: none;
}

.image-quota-badge__cta-link {
  color: var(--color-danger, #ef4444);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.image-quota-badge__cta-link:hover,
.image-quota-badge__cta-link:focus-visible {
  color: var(--color-danger-hover, #f87171);
}

.image-quota-badge__cta-text {
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

/* ==========================================================================
 * Pre-generation confirm dialog (#3862)
 * Lightweight modal anchored to the badge but positioned fixed so it's
 * mobile-friendly and not clipped by container overflow.
 * ========================================================================== */

.image-quota-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
}

.image-quota-confirm-dialog--hidden {
  display: none;
}

.image-quota-confirm-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.image-quota-confirm-dialog__panel {
  position: relative;
  z-index: var(--z-base);
  max-width: 28rem;
  width: 100%;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  background: var(--color-bg-secondary, #161616);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--color-text-primary, #ddd);
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
}

.image-quota-confirm-dialog__title {
  margin: 0 0 var(--space-2, 8px) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #ddd);
}

.image-quota-confirm-dialog__message {
  margin: 0 0 var(--space-4, 16px) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #aaa);
}

.image-quota-confirm-dialog__actions {
  display: flex;
  gap: var(--space-2, 8px);
  justify-content: flex-end;
}

.image-quota-confirm-dialog__btn {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.image-quota-confirm-dialog__btn--cancel {
  background: transparent;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text-secondary, #aaa);
}

.image-quota-confirm-dialog__btn--cancel:hover,
.image-quota-confirm-dialog__btn--cancel:focus-visible {
  border-color: var(--color-border-strong, #555);
  color: var(--color-text-primary, #ddd);
}

.image-quota-confirm-dialog__btn--confirm {
  background: var(--color-accent, #3b82f6);
  border: 1px solid var(--color-accent, #3b82f6);
  color: var(--color-on-accent, #fff);
}

.image-quota-confirm-dialog__btn--confirm:hover,
.image-quota-confirm-dialog__btn--confirm:focus-visible {
  background: var(--color-accent-hover, #2563eb);
  border-color: var(--color-accent-hover, #2563eb);
}

/* Mobile: tighten gauge, stack warning below buckets */
@media (max-width: 480px) {
  .image-quota-badge {
    font-size: 0.78rem;
    padding: var(--space-2, 8px);
    gap: var(--space-1, 4px);
  }

  .image-quota-gauge {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .image-quota-gauge__row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--space-1, 4px);
  }

  .image-quota-gauge__caption {
    font-size: 0.6rem;
  }

  .image-quota-badge__warning {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
  }

  .image-quota-badge__cta {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .image-quota-confirm-dialog__panel {
    max-width: 100%;
  }

  .image-quota-confirm-dialog__actions {
    flex-direction: column-reverse;
  }

  .image-quota-confirm-dialog__btn {
    width: 100%;
  }
}
/**
 * Lobby Browser — Cards & Buttons
 * =================================
 * Lobby cards, visibility badges, action buttons, skeleton loading,
 * empty state, error state, and footer.
 */

/* Lobby Browser Panel
 * ====================
 * Subtle, minimal lobby browser (quick-actions style).
 */

.lobby-browser-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

/* Global button reset for lobby browser - ensure all buttons are subtle */
.lobby-browser-panel .btn,
.lobby-browser-panel button.btn {
  box-shadow: none;
}

/* Show panel header when in lobby sidebar, hide toolbar */
.lobby-campaigns-sidebar .lobby-browser-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-browser-panel .panel-toolbar {
  display: none;
}

/* Panel content fills available space and scrolls when form is open */
.lobby-browser-panel .panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Section Headers - shown in sidebar, hidden when grid panel header shows title */
/* Base section-header from components/_section.css */
.lobby-browser-panel .section-header {
  display: none;
}

.lobby-campaigns-sidebar .lobby-browser-panel .section-header {
  display: flex;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2) var(--space-1);
}

/* (section-header SVG styles removed — header is hidden) */

/* Open Lobbies Section */
.open-lobbies-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  min-height: 0;
}

/* Lobbies List */
.lobbies-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  overflow-y: auto;
  min-height: 0;
}

/* Lobby Card - Subtle Row Style */
.lobby-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px var(--space-2);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--transition-fast);
}

.lobby-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

.lobby-card:last-child {
  border-bottom: none;
}

.lobby-card__name {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 80px;
  max-width: 120px;
}

.lobby-card__dm {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 60px;
}

.lobby-card__dm-status {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-card__dm-status.dm-status--online {
  background: var(--color-success);
  box-shadow: 0 0 3px var(--color-success);
}

.lobby-card__dm-status.dm-status--offline {
  background: var(--color-text-muted);
}

.lobby-card__dm-name {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-card__details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.lobby-card__world,
.lobby-card__level,
.lobby-card__players {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.lobby-card__world svg,
.lobby-card__level svg,
.lobby-card__players svg {
  width: 10px;
  height: 10px;
}

.lobby-card__status {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lobby-card__status.status--open {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--color-success);
}

.lobby-card__status.status--in-game {
  background: var(--color-warning-bg, rgba(251, 191, 36, 0.15));
  color: var(--color-warning);
}

/* Visibility Badges */
.lobby-card__visibility {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  white-space: nowrap;
}

.lobby-card__visibility.visibility--spectate {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
}

.lobby-card__visibility.visibility--spectate-only {
  background: var(--color-muted-bg, rgba(107, 114, 128, 0.15));
  color: var(--color-text-muted);
}

.lobby-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Lobby Action Buttons - Subtle ghost-style buttons */
.lobby-action {
  padding: 3px 8px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  box-shadow: none;
  font-weight: normal;
}

.lobby-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.lobby-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-action svg {
  width: 10px;
  height: 10px;
}

/* Join button - gold accent */
.lobby-action--join,
.lobby-action--primary {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
  color: var(--color-gold, #ffd700);
}

.lobby-action--join:hover:not(:disabled),
.lobby-action--primary:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}

/* Spectate button - info blue accent */
.lobby-action--spectate {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: var(--color-info, #3b82f6);
}

.lobby-action--spectate:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

/* Hidden elements in table row mode */
.lobby-card__header,
.lobby-card__badges,
.lobby-card__info,
.lobby-card__message,
.lobby-card__note {
  display: none;
}

/* Skeleton Loading State */
.lobby-skeleton-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lobby-card--skeleton {
  pointer-events: none;
  opacity: 0.6;
}

.lobby-card--skeleton .skeleton-line {
  display: inline-block;
  flex-shrink: 0;
}

/* Skeleton line size variants — scoped to lobby skeleton cards so they don't
   collide with the global .skeleton-line--name variant in components/_skeleton.css.
   Sizes match the design tokens for the corresponding non-skeleton elements. */
.lobby-card--skeleton .skeleton-line--name {
  width: 90px;
  height: 12px;
}

.lobby-card--skeleton .skeleton-line--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.lobby-card--skeleton .skeleton-line--dm-name {
  width: 50px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--world {
  width: 40px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--players {
  width: 30px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--badge {
  width: 32px;
  height: 14px;
  border-radius: var(--radius-full, 9999px);
}

.lobby-card--skeleton .skeleton-line--action {
  width: 44px;
  height: 20px;
  border-radius: var(--radius-full, 9999px);
}

/* Empty State */
.lobby-browser-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
}

.lobby-browser-panel .empty-state.hidden {
  display: none;
}

.lobby-browser-panel .empty-state .empty-icon {
  display: none;
}

.lobby-browser-panel .empty-state h4 {
  display: none;
}

.lobby-browser-panel .empty-state p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 11px;
  opacity: 0.7;
}

/* Error State */
.lobby-browser-panel .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-error);
}

.lobby-browser-panel .error-state svg {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
}

.lobby-browser-panel .error-state p {
  margin: 0 0 var(--space-4);
}

/* Footer - subtle */
.lobby-browser-panel .panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  font-size: 9px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Footer Left (for lobby count and last updated) */
.lobby-browser-panel .panel-footer .footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Footer loading state — hide stale "0 lobbies / Updated just now" defaults
   while skeleton loader is showing. Count placeholder ("…") still renders;
   last-updated is hidden until the first successful load. (Finding 4.3) */
.lobby-browser-panel .panel-footer.lobby-browser__footer--loading .lobby-count {
  opacity: 0.5;
}

.lobby-browser-panel .panel-footer.lobby-browser__footer--loading .last-updated {
  display: none;
}
/**
 * Lobby Browser — Create Lobby Form
 * ===================================
 * Create lobby form and its child elements.
 */

/* Create Lobby Form — contained within panel-content so it scrolls naturally */
.create-lobby-form.hidden {
  display: none;
}

.create-lobby-form {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary, var(--color-bg-secondary));
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.create-lobby-form .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.create-lobby-form .form-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.create-lobby-form .form-header h4 svg {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

.create-lobby-form .form-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.create-lobby-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.create-lobby-form .form-group label {
  font-size: 10px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.create-lobby-form .form-group label .required {
  color: var(--color-error);
}

.create-lobby-form .form-group label .optional {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
  font-size: 9px;
}

.create-lobby-form .form-group input[type="text"],
.create-lobby-form .form-group select,
.create-lobby-form .form-group textarea {
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text);
  font-size: 11px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.create-lobby-form .form-group input[type="text"]:focus,
.create-lobby-form .form-group select:focus,
.create-lobby-form .form-group textarea:focus {
  outline: none;
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.15);
}

.create-lobby-form .form-group input[type="text"].error,
.create-lobby-form .form-group select.error,
.create-lobby-form .form-group textarea.error {
  border-color: var(--color-error);
}

.create-lobby-form .form-group input[type="text"]::placeholder,
.create-lobby-form .form-group textarea::placeholder {
  color: var(--color-text-muted);
}

.create-lobby-form .form-group textarea {
  resize: vertical;
  min-height: 40px;
}

.create-lobby-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.create-lobby-form .form-actions .btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  font-size: 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.create-lobby-form .form-actions .btn svg {
  width: 10px;
  height: 10px;
}

.create-lobby-form .form-actions .btn--secondary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
}

.create-lobby-form .form-actions .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.create-lobby-form .form-actions .btn--primary {
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.25);
  color: var(--color-gold, #ffd700);
  font-weight: var(--weight-medium);
}

.create-lobby-form .form-actions .btn--primary:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}

.create-lobby-form .form-actions .btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
/**
 * Lobby Browser — Guest, Host & Responsive
 * ==========================================
 * Guest variant, hosting badge, manage button, invite code,
 * and responsive adjustments.
 */


/* Empty state action button */
.lobby-browser-panel .empty-state .lobby-action {
  margin-top: var(--space-2);
}

/* Footer action button */
.lobby-browser-panel .panel-footer .lobby-action {
  opacity: 0.85;
}

.lobby-browser-panel .panel-footer .lobby-action:hover {
  opacity: 1;
}

/* ──────────────────────────────────────────
   Active-game banner (#4456)
   Shows when player is already in a multiplayer session.
   Hosting: gold/shield accent; guest: blue accent.
   ────────────────────────────────────────── */
.active-game-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-md);
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.18);
  font-size: 11px;
  line-height: 1.4;
}

.active-game-banner__icon {
  flex-shrink: 0;
  color: var(--color-gold, #ffd700);
  opacity: 0.8;
}

.active-game-banner__icon svg {
  width: 14px;
  height: 14px;
}

.active-game-banner__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.active-game-banner__label {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.active-game-banner__label--hosting {
  color: var(--color-gold, #ffd700);
}

.active-game-banner__label--guest {
  color: var(--color-info, #3b82f6);
}

.active-game-banner__name {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-game-banner__actions {
  flex-shrink: 0;
}

.active-game-banner__go-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--color-gold, #ffd700);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.active-game-banner__go-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  color: var(--color-gold, #ffd700);
  text-decoration: none;
}

.active-game-banner__go-btn svg {
  width: 10px;
  height: 10px;
}

/* Guest variant — blue accent */
.active-game-banner:has(.active-game-banner__label--guest) {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.18);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__icon {
  color: var(--color-info, #3b82f6);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__go-btn {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--color-info, #3b82f6);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__go-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Hosting badge in lobby cards (#4456) */
.lobby-card--hosting {
  background: rgba(255, 215, 0, 0.04);
  border-left: 2px solid rgba(255, 215, 0, 0.35);
}

.lobby-card__hosting-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  font-size: 8px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold, #ffd700);
  vertical-align: middle;
}

.lobby-card__hosting-badge svg {
  width: 8px;
  height: 8px;
}

/* Manage button — DM host variant of the Rejoin button */
.lobby-action--manage {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
}

.lobby-action--manage:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.35);
}

/* Empty-state hint (inline kbd) */
.lobby-browser-panel .empty-state .empty-state__hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.lobby-browser-panel .empty-state .empty-state__hint kbd {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-primary);
}

/* Invite Code Disclosure Toggle */
.invite-code-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.invite-code-toggle {
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: var(--space-1);
}

/* Remove default disclosure triangle (WebKit + Firefox) */
.invite-code-toggle::-webkit-details-marker {
  display: none;
}

.invite-code-section .invite-code-form {
  padding: var(--space-2);
}

/* Responsive */
@media (max-width: 480px) {
  .lobby-card__details {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Keep buttons inline but allow wrapping */
  .lobby-card__actions {
    flex-wrap: wrap;
  }

  .create-lobby-form .form-actions {
    flex-direction: column;
  }

  .create-lobby-form .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .lobby-browser-panel .panel-footer {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .lobby-browser-panel .panel-footer .footer-left {
    justify-content: space-between;
  }

  .lobby-browser-panel .panel-footer .lobby-action {
    justify-content: center;
  }
}
/**
 * Lobby Browser Panel — Import Hub
 * ===================================
 * Subtle, minimal lobby browser with create form and host/guest variants.
 *
 * Decomposed into focused files under lobby_browser/ for maintainability.



 */
/* Settings Panel */
/* Generated by MDSL */

.settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.settings__header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.settings__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.settings__content {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
}

.settings__footer {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

/* Settings Sections */
.settings__section {
  margin-bottom: var(--terminal-spacing-md);
  padding-bottom: var(--terminal-spacing-md);
  border-bottom: 1px solid var(--terminal-border);
}

.settings__section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.settings__section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--terminal-text-muted);
  margin: 0 0 var(--terminal-spacing-sm) 0;
}

/* Settings Rows */
.settings__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--terminal-spacing-md);
  margin-bottom: var(--terminal-spacing-sm);
}

.settings__row:last-child {
  margin-bottom: 0;
}

.settings__row--indented {
  margin-left: var(--terminal-spacing-md);
  padding-left: var(--terminal-spacing-sm);
  border-left: 2px solid var(--terminal-border);
}

.settings__label {
  flex: 1;
  font-size: 0.85rem;
  color: var(--terminal-text-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings__label-small {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.settings__hint {
  font-size: 0.7rem;
  color: var(--terminal-text-muted);
}

.settings__value {
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
}

.settings__value--badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings__value--essential {
  background: rgba(var(--terminal-cyan-rgb), 0.2);
  color: var(--terminal-cyan);
  border: 1px solid var(--terminal-cyan);
}

.settings__value--verbose {
  background: rgba(var(--terminal-yellow-rgb), 0.2);
  color: var(--terminal-yellow);
  border: 1px solid var(--terminal-yellow);
}

.settings__value--dev {
  background: rgba(var(--terminal-purple-rgb), 0.2);
  color: var(--terminal-purple);
  border: 1px solid var(--terminal-purple);
}

/* Toggle Button */
.settings__toggle {
  flex-shrink: 0;
  padding: 4px 12px;
  min-width: 50px;
  font-family: var(--terminal-font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  color: var(--terminal-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.settings__toggle:hover {
  background: var(--terminal-bg-elevated);
  border-color: var(--terminal-text-muted);
}

.settings__toggle--active {
  background: rgba(var(--terminal-green-rgb), 0.2);
  border-color: var(--terminal-green);
  color: var(--terminal-green);
}

.settings__toggle--active:hover {
  background: rgba(var(--terminal-green-rgb), 0.3);
}

/* Link Button */
.settings__link-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  background: var(--color-surface-elevated);
  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);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.settings__link-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.settings__link-btn .settings__hint {
  margin-left: auto;
}

/* Theme Swatch Grid */
.settings__theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 6px;
}

.settings__theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.settings__theme-swatch:hover {
  border-color: var(--terminal-border);
}

.settings__theme-swatch--active,
.settings__theme-swatch.active {
  border-color: var(--color-accent-primary, var(--terminal-cyan));
}

.settings__theme-swatch-preview {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 3px;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
  padding: 3px;
}

.settings__theme-swatch-accent {
  width: 60%;
  height: 3px;
  border-radius: 1px;
}

.settings__theme-swatch-label {
  font-size: 0.6rem;
  color: var(--terminal-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.settings__theme-swatch--active .settings__theme-swatch-label,
.settings__theme-swatch.active .settings__theme-swatch-label {
  color: var(--color-accent-primary, var(--terminal-cyan));
}

/* Toggle Group (ON/OFF pair) */
.settings__toggle-group {
  display: flex;
  flex-shrink: 0;
  border: 1px solid var(--terminal-border);
  border-radius: 4px;
  overflow: hidden;
}

.settings__toggle-option {
  padding: 4px 10px;
  font-family: var(--terminal-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  background: var(--terminal-bg-tertiary);
  border: none;
  color: var(--terminal-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.settings__toggle-option:first-child {
  border-right: 1px solid var(--terminal-border);
}

.settings__toggle-option:hover {
  background: var(--terminal-bg-elevated);
}

.settings__toggle-option.active {
  background: rgba(var(--terminal-green-rgb, 0, 224, 0), 0.2);
  color: var(--color-success-text, var(--terminal-green));
}
/**
 * Sound Settings Panel
 *
 * Compact panel for managing sound volume and mute settings.
 * Used in settings modal or as standalone dropdown.
 */

.sound-settings-panel {
  padding: var(--space-md);
  background: var(--panel-bg);
  border-radius: var(--radius-md);
  min-width: 280px;
}

.sound-settings-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.sound-settings-panel__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.sound-settings-panel__mute-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  font-size: 1.25rem;
}

.sound-settings-panel__mute-button:hover {
  background: var(--surface-elevated);
  border-color: var(--accent-primary);
}

.sound-settings-panel__mute-button.sound-muted {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.sound-settings-panel__sliders {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.sound-settings-panel__slider-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.sound-settings-panel__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.sound-settings-panel__value {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  min-width: 3em;
  text-align: right;
}

.sound-settings-panel__slider {
  width: 100%;
  height: 6px;
  appearance: none;
  background: var(--surface-elevated);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sound-settings-panel__slider::-webkit-slider-thumb {
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.sound-settings-panel__slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.sound-settings-panel__slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--accent-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.sound-settings-panel__slider:focus {
  outline: none;
}

.sound-settings-panel__slider:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

.sound-settings-panel__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
}

.sound-settings-panel__test-button {
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sound-settings-panel__test-button:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-contrast);
}

/* Embedded variant for settings panel */
.sound-settings-panel--embedded {
  padding: 0;
  background: transparent;
  min-width: auto;
}

.sound-settings-panel--embedded .sound-settings-panel__header {
  display: none;
}

.sound-settings-panel__mute-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-color);
}

.sound-settings-panel__mute-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.sound-settings-panel--embedded .sound-settings-panel__footer {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: none;
}

/* Compact variant for dropdown/popover */
.sound-settings-panel--compact {
  min-width: 220px;
  padding: var(--space-sm);
}

.sound-settings-panel--compact .sound-settings-panel__header {
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
}

.sound-settings-panel--compact .sound-settings-panel__title {
  font-size: var(--font-size-sm);
}

.sound-settings-panel--compact .sound-settings-panel__mute-button {
  width: 28px;
  height: 28px;
  font-size: 1rem;
}

.sound-settings-panel--compact .sound-settings-panel__sliders {
  gap: var(--space-sm);
}

.sound-settings-panel--compact .sound-settings-panel__label {
  font-size: var(--font-size-xs);
}

.sound-settings-panel--compact .sound-settings-panel__footer {
  display: none;
}

/* Dark theme adjustments */
[data-theme="dark"] .sound-settings-panel__slider {
  background: var(--surface-bg);
}

[data-theme="dark"] .sound-settings-panel__slider::-webkit-slider-track {
  background: var(--surface-bg);
}
/*
 * Tech Support Panel Organism
 * ===========================
 * Styling for the Tech Support dashboard panel.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Panel Container
 * ========================================================================== */

.panel-tech-support {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* ==========================================================================
 * Header
 * ========================================================================== */

.tech-support-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-default, #3f3f46);
  flex-shrink: 0;
}

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

.tech-support-header .panel-icon {
  display: inline-flex;
  align-items: center;
}

.tech-support-header .panel-icon .svg-icon {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  overflow: hidden;
}

.tech-support-header .panel-icon .svg-icon svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
 * Body
 * ========================================================================== */

.tech-support-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.tech-support-section {
  margin-bottom: var(--space-4);
}

.tech-support-section .section-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ==========================================================================
 * Request List
 * ========================================================================== */

.request-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.request-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

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

.request-ref {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  white-space: nowrap;
}

.request-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.request-status {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--font-weight-medium);
}

.request-votes {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Status Colors */
.status-pending {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-acknowledged {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-in_progress {
  background: var(--color-accent-bg);
  color: var(--color-accent-primary);
}

.status-completed {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.status-wont_fix,
.status-duplicate {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* ==========================================================================
 * Empty State
 * ========================================================================== */

.tech-support-section .empty-state {
  color: var(--color-text-secondary);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
}

/* ==========================================================================
 * Footer
 * ========================================================================== */

.tech-support-footer {
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-default, #3f3f46);
  flex-shrink: 0;
}

.exit-btn {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: var(--space-3) !important;
  background: transparent !important;
  border: 1px solid var(--color-border-default, #3f3f46) !important;
  border-radius: var(--radius-md, 6px) !important;
  font-size: var(--font-size-sm, 0.875rem) !important;
  color: var(--color-text-secondary, #a1a1aa) !important;
  cursor: pointer !important;
  transition: background var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s) !important;
}

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

.exit-btn .btn--icon {
  font-size: 1.5rem;
}

.exit-btn .btn--icon .svg-icon {
  width: 24px;
  height: 24px;
}

.exit-btn .btn--icon .svg-icon svg {
  width: 100%;
  height: 100%;
}
/**
 * Bureaucratic Forms — Base Styles
 * ==================================
 * Form modal overlay, container, header, form body and fields.
 */

/* ============================================
   Bureaucratic Forms - Ordnance & Ordinances
   ============================================
   Official government form aesthetic with
   typewriter fonts, red tape, and rubber stamps.
*/

/* ===========================================
   Form Modal Overlay
   =========================================== */

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

.bureaucratic-form-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-darker);
  animation: bureaucraticModalFadeIn 0.2s ease;
}

.bureaucratic-form-overlay.hidden {
  display: none;
}

.bureaucratic-form-overlay--closing {
  animation: bureaucraticModalFadeIn 0.2s ease reverse;
}

/* ===========================================
   Form Container
   =========================================== */

.bureaucratic-form-container {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  background: #f5f0e1;
  border: 2px solid var(--color-border-subtle);
  box-shadow:
    0 4px 20px var(--overlay-medium),
    inset 0 0 60px rgba(139, 119, 101, 0.1);
  font-family: 'Courier New', Courier, monospace;
  color: var(--color-border-subtle);
}

/* Red tape decoration */
.bureaucratic-tape {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    #c41e3a,
    #c41e3a 10px,
    #f5f0e1 10px,
    #f5f0e1 20px
  );
}

.bureaucratic-tape--top {
  top: 0;
}

.bureaucratic-tape--bottom {
  bottom: 0;
}

/* ===========================================
   Form Header
   =========================================== */

.bureaucratic-form-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px dashed #999;
  margin-top: 8px;
}

.bureaucratic-seal {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border: 2px solid #8b0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f5f0e1 0%, #e8e0d0 100%);
}

.seal-inner {
  width: 50px;
  height: 50px;
  border: 1px solid #8b0000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seal-text {
  font-size: 0.6rem;
  font-weight: bold;
  color: #8b0000;
  letter-spacing: 0.1em;
}

.bureaucratic-title-block {
  flex: 1;
}

.bureaucratic-form-number {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.bureaucratic-form-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-bg-primary);
  margin: 0 0 0.25rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bureaucratic-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Close button */
.bureaucratic-form-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #999;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.bureaucratic-form-close:hover {
  background: #c41e3a;
  border-color: #c41e3a;
  color: var(--color-text-primary);
}

/* ===========================================
   Form Body & Fields
   =========================================== */

.bureaucratic-form-body {
  padding: 1.5rem;
}

.bureaucratic-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bureaucratic-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bureaucratic-label {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bureaucratic-required {
  color: #c41e3a;
  margin-left: 0.25rem;
}

.bureaucratic-input,
.bureaucratic-textarea,
.bureaucratic-select {
  padding: 0.5rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  border: 1px solid #999;
  background: #fff;
  color: var(--color-border-subtle);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bureaucratic-input:focus,
.bureaucratic-textarea:focus,
.bureaucratic-select:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.2);
}

.bureaucratic-input--number {
  width: 100px;
}

.bureaucratic-textarea {
  resize: vertical;
  min-height: 60px;
}

.bureaucratic-select {
  cursor: pointer;
}

/* Checkbox styling */
.bureaucratic-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
}

.bureaucratic-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.85rem;
}

.bureaucratic-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  cursor: pointer;
}

.bureaucratic-checkbox-text {
  flex: 1;
  line-height: 1.3;
}

/* Help text */
.bureaucratic-help-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Error styling */
.bureaucratic-field-error {
  border-color: #c41e3a;
  background: #fff0f0;
}

.bureaucratic-errors {
  background: #fff0f0;
  border: 1px solid #c41e3a;
  padding: 0.75rem;
  margin-bottom: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bureaucratic-errors.visible {
  opacity: 1;
}

.bureaucratic-errors ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.8rem;
  color: #c41e3a;
}

/* Loading state */
.bureaucratic-loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
  font-style: italic;
/**
 * Bureaucratic Forms — Fine Print & Actions
 * ===========================================
 * Fine print, form actions, and stamp overlay.
 */


/* ===========================================
   Fine Print
   =========================================== */

.bureaucratic-fine-print {
  padding: 1rem 1.5rem;
  font-size: 0.65rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  border-top: 1px dashed var(--color-text-secondary);
  font-style: italic;
}

/* ===========================================
   Form Actions
   =========================================== */

.bureaucratic-form-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem 1.5rem;
  margin-bottom: 8px;
}

.bureaucratic-button {
  padding: 0.75rem 1.5rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.bureaucratic-button--primary {
  background: #2a5934;
  border-color: #1a3d22;
  color: var(--color-text-primary);
}

.bureaucratic-button--primary:hover:not(:disabled) {
  background: #1a3d22;
}

.bureaucratic-button--primary:disabled {
  background: var(--color-text-muted);
  border-color: #444;
  cursor: not-allowed;
  opacity: 0.7;
}

.bureaucratic-button--secondary {
  background: transparent;
  border-color: #999;
  color: var(--color-text-muted);
}

.bureaucratic-button--secondary:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--color-text-muted);
  color: var(--color-border-subtle);
}

/* ===========================================
   Stamp Overlay
   =========================================== */

.bureaucratic-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg) scale(0);
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding: 0.5rem 2rem;
  border: 6px solid;
  border-radius: 4px;
  opacity: 0.85;
  pointer-events: none;
  z-index: var(--z-sticky);
}

.bureaucratic-stamp.stamping {
  animation: stamp-animation 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bureaucratic-stamp.approved {
  color: #1a5c2a;
  border-color: #1a5c2a;
  background: rgba(26, 92, 42, 0.1);
}

.bureaucratic-stamp.denied {
  color: #8b0000;
  border-color: #8b0000;
  background: rgba(139, 0, 0, 0.1);
}

.bureaucratic-stamp.conditional {
  color: #cc7a00;
  border-color: #cc7a00;
  background: rgba(204, 122, 0, 0.1);
}

@keyframes stamp-animation {
  0% {
    transform: translate(-50%, -50%) rotate(-15deg) scale(3);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) rotate(-15deg) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(-15deg) scale(1);
    opacity: 0.85;
  }
/**
 * Bureaucratic Forms — Processing & Citations
 * ============================================
 * Processing overlay and citation notification.
 */


/* ===========================================
   Processing Overlay
   =========================================== */

.bureaucratic-processing-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(245, 240, 225, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-float);
}

.bureaucratic-processing-overlay.hidden {
  display: none;
}

.processing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-text-secondary);
  border-top-color: var(--color-border-subtle);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.processing-text {
  font-size: 1rem;
  font-weight: bold;
  color: var(--color-border-subtle);
  margin-bottom: 0.25rem;
}

.processing-subtext {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ===========================================
   Citation Notification
   =========================================== */

.bureaucratic-citation-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  padding: 1rem;
  background: #fff;
  border: 2px solid;
  box-shadow: 0 4px 20px var(--overlay-light-plus);
  font-family: 'Courier New', Courier, monospace;
  z-index: var(--z-notification);
  opacity: 0;
  transform: translateX(100%);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.bureaucratic-citation-notification.visible {
  opacity: 1;
  transform: translateX(0);
}

.bureaucratic-citation-notification.severity-minor {
  border-color: #cc7a00;
  background: #fff8e6;
}

.bureaucratic-citation-notification.severity-moderate {
  border-color: #cc4400;
  background: #fff0e6;
}

.bureaucratic-citation-notification.severity-major {
  border-color: #c41e3a;
  background: #ffe6ea;
}

.bureaucratic-citation-notification.severity-severe {
  border-color: #8b0000;
  background: #ffe0e0;
}

.citation-header {
  font-size: 1rem;
  font-weight: bold;
  color: #c41e3a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-text-secondary);
  padding-bottom: 0.25rem;
}

.citation-reason {
  font-size: 0.85rem;
  color: var(--color-border-subtle);
  margin-bottom: 0.5rem;
}

.citation-fine {
  font-size: 0.9rem;
  font-weight: bold;
  color: #c41e3a;
}

.citation-severity {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 0.5rem;
}

/* ===========================================
   Exemption Notification
   =========================================== */

.bureaucratic-exemption-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
  padding: 1rem;
  background: #e6fff0;
  border: 2px solid #1a5c2a;
  box-shadow: 0 4px 20px var(--overlay-light-plus);
  font-family: 'Courier New', Courier, monospace;
  z-index: var(--z-notification);
  opacity: 0;
  transform: translateX(100%);
  transition: color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.bureaucratic-exemption-notification.visible {
  opacity: 1;
  transform: translateX(0);
}

.exemption-header {
  font-size: 1rem;
  font-weight: bold;
  color: #1a5c2a;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #1a5c2a;
  padding-bottom: 0.25rem;
}

.exemption-form {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--color-border-subtle);
}

.exemption-reason {
  font-size: 0.85rem;
  color: var(--color-border-subtle);
  margin: 0.25rem 0;
}

.exemption-granted-by {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

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

@media (max-width: 640px) {
  .bureaucratic-form-container {
    width: 95%;
    max-height: 90vh;
  }

  .bureaucratic-form-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .bureaucratic-form-actions {
    flex-direction: column;
  }

  .bureaucratic-button {
    width: 100%;
  }

  .bureaucratic-stamp {
    font-size: 2rem;
    padding: 0.25rem 1rem;
  }

  .bureaucratic-citation-notification,
  .bureaucratic-exemption-notification {
    width: calc(100% - 40px);
    left: 20px;
    right: 20px;
  }
}
/**
 * Bureaucratic Forms — Import Hub
 * ==================================
 * Ordnance & ordinance forms with stamps and citation notifications.
 *
 * Decomposed into focused files under bureaucratic_forms/ for maintainability.



 */
/*
 * Character Select Modal
 * ======================
 * Extends detail-modal for character selection when entering
 * rooms that require a character (Story Mode, Game, etc.)
 */

/* ========================================
 * FOUC PROTECTION
 * Ensures modal is completely hidden during initial page load
 * to prevent any flash before JavaScript initializes
 * ======================================== */

#character-select-modal:not(.detail-modal--open) {
  display: none;
  visibility: hidden;
  opacity: 0;
}

/* ========================================
 * MODAL CONTENT WRAPPER
 * Provides the visible content container within detail-modal
 * ======================================== */

#character-select-modal .detail-modal__content {
  position: relative;
  max-width: 600px;
  width: 100%;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-xl), var(--shadow-glow);
  transform: scale(0.95) translateY(10px);
  transition: transform var(--transition-normal);
}

#character-select-modal.detail-modal--open .detail-modal__content {
  transform: scale(1) translateY(0);
}

/* ========================================
 * CHARACTER CARDS GRID
 * ======================================== */

.character-select-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.character-select-modal__card {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

/* Portrait */
.character-select-modal__portrait {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-purple, #9B59B6));
}

.character-select-modal__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.character-select-modal__portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.character-select-modal__portrait-placeholder svg {
  width: 24px;
  height: 24px;
}

/* Info wrapper */
.character-select-modal__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.character-select-modal__card:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  transform: translateY(-2px);
}

.character-select-modal__card--selected {
  border-color: var(--color-accent-primary);
  background: var(--color-accent-bg);
  box-shadow: var(--shadow-glow);
}

/* Delete button on character cards */
.character-select-modal__delete-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.character-select-modal__card {
  position: relative;
}

.character-select-modal__card:hover .character-select-modal__delete-btn {
  opacity: 1;
}

.character-select-modal__delete-btn:hover {
  background: var(--color-accent-danger);
  border-color: var(--color-accent-danger);
  color: var(--color-text-inverse);
}

.character-select-modal__delete-btn svg {
  width: 14px;
  height: 14px;
}

/* Character info */
.character-select-modal__name {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  margin: 0 0 var(--space-1) 0;
}

.character-select-modal__class {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

.character-select-modal__meta {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.character-select-modal__race {
  color: var(--color-text-secondary);
}

.character-select-modal__last-played {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * ACTION BUTTONS ROW
 * ======================================== */

.character-select-modal__actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.character-select-modal__action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px dashed 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);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.character-select-modal__action-btn:hover {
  border-color: var(--color-accent-primary);
  border-style: solid;
  color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.character-select-modal__action-btn svg {
  width: 24px;
  height: 24px;
}

/* Create New button special styling */
.character-select-modal__action-btn--create:hover {
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}

/* Random button special styling */
.character-select-modal__action-btn--random:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.character-select-modal__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
}

.character-select-modal__empty-icon {
  font-size: 3em;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.character-select-modal__empty-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  margin: 0 0 var(--space-2) 0;
}

.character-select-modal__empty-subtext {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* ========================================
 * TARGET ROOM BADGE
 * ======================================== */

.character-select-modal__target-room {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  margin-bottom: var(--space-4);
}

/* ========================================
 * CAMPAIGN STATUS BADGES
 * Shows character's campaign assignment status when joining a campaign
 * ======================================== */

.character-select-modal__campaign-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.character-select-modal__campaign-badge--available {
  background: rgba(52, 199, 89, 0.15);
  color: var(--color-accent-success, #34c759);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.character-select-modal__campaign-badge--other {
  background: rgba(255, 204, 0, 0.15);
  color: var(--color-gold, #ffcc00);
  border: 1px solid rgba(255, 204, 0, 0.3);
}

.character-select-modal__campaign-badge--here {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary, #61afef);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* ========================================
 * LEVEL WARNING BADGES
 * Shows warning when character level is outside campaign's range
 * ======================================== */

.character-select-modal__level-warning {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.character-select-modal__level-warning--under {
  background: rgba(255, 159, 10, 0.15);
  color: var(--color-accent-warning, #ff9f0a);
  border: 1px solid rgba(255, 159, 10, 0.3);
}

.character-select-modal__level-warning--over {
  background: rgba(255, 69, 58, 0.15);
  color: var(--color-accent-danger, #ff453a);
  border: 1px solid rgba(255, 69, 58, 0.3);
}

/* Card styling when has level warning */
.character-select-modal__card[data-level-warning] {
  border-color: rgba(255, 159, 10, 0.4);
}

.character-select-modal__card[data-level-warning="over"] {
  border-color: rgba(255, 69, 58, 0.4);
}

/* ========================================
 * SECTION TITLES
 * For separating characters from presets
 * ======================================== */

.character-select-modal__section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3) 0;
}

.character-select-modal__section-title--gold {
  color: var(--color-gold, #daa520);
}

.character-select-modal__characters-section {
  margin-bottom: var(--space-4);
}

/* ========================================
 * PRESETS SECTION (Swipe Selector)
 * Module adventurers shown as swipeable cards
 * ======================================== */

.character-select-modal__presets-section {
  margin-bottom: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-select-modal__swipe-hint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
  text-align: center;
}

/*
 * #4312: cards inside (`.character-swipe-card`) use `position: absolute`, so
 * the stack itself MUST keep an explicit non-zero height for them to render.
 * Use `min-height` (not just `height`) so a flex parent that compresses its
 * children at narrow viewports (mobile/popout panel) can't shrink the stack
 * below the card-card body height — same root cause as the lobby-inline-panel
 * fix in #4185 (see `_lobby_inline_panel.css`).
 *
 * The probe in #4312 found this element at w=0,h=0 inside `.detail-modal`
 * when the campaign-join modal's preset section was visible on a 725×570
 * viewport. Without the explicit sizing chain, the absolute-positioned cards
 * have no anchor and the player sees a hint header with no cards beneath.
 */
.character-select-modal__swipe-stack {
  position: relative;
  width: 100%;
  max-width: 280px;
  min-height: 340px;
  margin: 0 auto var(--space-2);
  outline: none;
  overflow: visible;
  perspective: 1000px;
  /* #4312: don't let the flex parent compress this below min-height. */
  flex-shrink: 0;
}

.character-select-modal__swipe-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.character-select-modal__swipe-counter {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 3em;
  text-align: center;
}

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

/*
 * #4312: extend mobile-mode breakpoint to 768px (was 600px). The bug repro
 * was a 725×570 viewport — wider than the old 600px cap, but still narrow
 * enough that the campaign-join modal needs the mobile layout. Without this,
 * a 700px tablet/popout viewport got the desktop swipe-stack sizing AND a
 * flex parent that compressed it to zero height.
 */
@media (max-width: 768px) {
  .character-select-modal__swipe-stack {
    max-width: 100%;
    min-height: 320px;
  }
}

@media (max-width: 600px) {
  .character-select-modal__grid {
    grid-template-columns: 1fr;
  }

  .character-select-modal__swipe-stack {
    max-width: 240px;
    min-height: 300px;
  }

  .character-select-modal__actions {
    flex-direction: column;
  }

  .character-select-modal__campaign-badge {
    max-width: 80px;
  }
}

/*
 * #4312: very narrow phones — keep cards visible without overflowing viewport.
 * Mirrors the lobby-inline-panel breakpoint in `_lobby_inline_panel.css`.
 */
@media (max-width: 380px) {
  .character-select-modal__swipe-stack {
    min-height: 280px;
  }
}
/**
 * Creation Progress — Container, Progress Bar, Info Row, Pick-For-Me, Breadcrumb & Help Tooltips
 */

/*
 * Creation Progress Indicator
 * ===========================
 * Shows step number, step name, and completion percentage during character creation.
 * Displays persistently at the top of the narrative panel.
 */

/* ========================================
 * Progress Container
 * ======================================== */

.creation-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-secondary, rgba(20, 25, 35, 0.95));
  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--space-3, 12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  backdrop-filter: blur(8px);
}

/* ========================================
 * Progress Bar
 * ======================================== */

.creation-progress__bar {
  height: 6px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.creation-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary, #3b82f6),
    var(--color-accent-success, #22c55e)
  );
  border-radius: var(--radius-full, 9999px);
  transition: width 0.4s ease-out;
  min-width: 2%;
}

/* Pulse animation when progress changes */
.creation-progress__fill.pulse {
  animation: progress-pulse 0.6s ease-out;
}

@keyframes progress-pulse {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
  100% { filter: brightness(1); }
}

/* ========================================
 * Progress Info Row
 * ======================================== */

.creation-progress__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
}

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

.creation-progress__label {
  flex: 1;
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creation-progress__percent {
  color: var(--color-accent-success, #22c55e);
  font-weight: 600;
  white-space: nowrap;
}

/* Completed state */
.creation-progress.complete .creation-progress__fill {
  background: var(--color-accent-success, #22c55e);
}

.creation-progress.complete .creation-progress__percent {
  color: var(--color-accent-success, #22c55e);
}

.creation-progress.complete .creation-progress__label {
  color: var(--color-accent-success, #22c55e);
}

/* ========================================
 * Pick For Me Button
 * Consistent styling for all selection panel headers
 * ======================================== */

.selection-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: 1px solid var(--color-accent-warning, #f59e0b);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent-warning, #f59e0b);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
  margin-left: auto;
}

.selection-pick-btn:hover:not(:disabled) {
  background: rgba(245, 158, 11, 0.1);
  border-color: var(--color-accent-warning, #f59e0b);
  transform: translateY(-1px);
}

.selection-pick-btn:active:not(:disabled) {
  transform: translateY(0);
}

.selection-pick-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selection-pick-btn .pick-icon {
  font-size: 1em;
}

.selection-pick-btn .pick-text {
  font-size: inherit;
}

/* Suggesting state - animated while waiting for AI response */
.selection-pick-btn.suggesting {
  pointer-events: none;
  animation: pick-pulse 1s ease-in-out infinite;
}

.selection-pick-btn.suggesting .pick-icon {
  animation: pick-spin 0.8s linear infinite;
}

@keyframes pick-pulse {
  0%, 100% {
    opacity: 1;
    background: rgba(245, 158, 11, 0.1);
  }
  50% {
    opacity: 0.7;
    background: rgba(245, 158, 11, 0.2);
  }
}

@keyframes pick-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ========================================
 * Selection Header Layout Adjustment
 * Ensure header can accommodate the pick button
 * ======================================== */

.selection-panel .selection-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* When using with spell panels */
.spell-selection-panel .spell-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

/* Equipment panel header */
.equipment-selection-panel .selection-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
}

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

@media (max-width: 480px) {
  .creation-progress {
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }

  .creation-progress__info {
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .creation-progress__label {
    order: -1;
    width: 100%;
    text-align: left;
  }

  .selection-pick-btn {
    padding: var(--space-1, 4px) var(--space-1, 4px);
  }

  .selection-pick-btn .pick-text {
    display: none;
  }
}

/* ========================================
 * Step Breadcrumb Trail
 * ======================================== */

.creation-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.creation-breadcrumb::-webkit-scrollbar {
  display: none;
}

.creation-breadcrumb__step {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  white-space: nowrap;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}

.creation-breadcrumb__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #333);
  border: 1px solid var(--color-border-default, #444);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
  flex-shrink: 0;
}

.creation-breadcrumb__label {
  color: var(--color-text-muted, #888);
  transition: color var(--transition-fast, 0.15s);
}

/* Completed step */
.creation-breadcrumb__step--completed .creation-breadcrumb__dot {
  background: var(--color-accent-success, #22c55e);
  border-color: var(--color-accent-success, #22c55e);
}

.creation-breadcrumb__step--completed .creation-breadcrumb__label {
  color: var(--color-accent-success, #22c55e);
}

/* Current step */
.creation-breadcrumb__step--current .creation-breadcrumb__dot {
  background: var(--color-accent-primary, #3b82f6);
  border-color: var(--color-accent-primary, #3b82f6);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
  animation: breadcrumb-pulse 2s ease-in-out infinite;
}

.creation-breadcrumb__step--current .creation-breadcrumb__label {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 600;
}

/* Pending step */
.creation-breadcrumb__step--pending .creation-breadcrumb__dot {
  background: transparent;
}

.creation-breadcrumb__step--pending .creation-breadcrumb__label {
  color: var(--color-text-disabled, #666);
}

/* Connector between steps */
.creation-breadcrumb__connector {
  width: 12px;
  height: 1px;
  background: var(--color-border-default, #444);
  flex-shrink: 0;
}

.creation-breadcrumb__step--completed + .creation-breadcrumb__connector {
  background: var(--color-accent-success, #22c55e);
}

@keyframes breadcrumb-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.5); }
  50% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.8); }
}

/* Compact mode - show only dots */
.creation-breadcrumb--compact .creation-breadcrumb__label {
  display: none;
}

.creation-breadcrumb--compact .creation-breadcrumb__connector {
  width: 8px;
}

/* ========================================
 * Inline Help Tooltip (on field labels)
 * ======================================== */

.creation-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: var(--space-1, 4px);
  background: transparent;
  border: 1px solid var(--color-text-muted, #888);
  border-radius: 50%;
  color: var(--color-text-muted, #888);
  font-size: 10px;
  font-weight: 600;
  cursor: help;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
  vertical-align: middle;
}

.creation-help-trigger:hover {
  background: var(--color-accent-primary, #3b82f6);
  border-color: var(--color-accent-primary, #3b82f6);
  color: var(--color-bg-primary, #1a1a1a);
}

.creation-help-tooltip {
  position: absolute;
  z-index: var(--z-tooltip, 500);
  max-width: 280px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-elevated, #404040);
  border: 1px solid var(--color-border-default, #555);
  border-radius: var(--radius-md, 4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), opacity var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
}

.creation-help-tooltip--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.creation-help-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 16px;
  width: 10px;
  height: 10px;
  background: var(--color-bg-elevated, #404040);
  border-left: 1px solid var(--color-border-default, #555);
  border-top: 1px solid var(--color-border-default, #555);
  transform: rotate(45deg);
}

.creation-help-tooltip__title {
  font-weight: 600;
  color: var(--color-accent-primary, #3b82f6);
  margin-bottom: var(--space-1, 4px);
}

/* ========================================
 * Step Saved Confirmation (inline)
 * ======================================== */

.creation-step-saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid var(--color-accent-success, #22c55e);
  border-radius: var(--radius-md, 4px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent-success, #22c55e);
  animation: step-saved-appear 0.3s ease-out;
}

.creation-step-saved__icon {
  font-size: 1em;
}

@keyframes step-saved-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Auto-hide after appearing */
.creation-step-saved--auto-hide {
  animation: step-saved-appear 0.3s ease-out, step-saved-fade-out 0.3s ease-in 2s forwards;
}

@keyframes step-saved-fade-out {
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* ========================================
 * Loading State for Selections
 * ======================================== */

.selection-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(26, 26, 26, 0.8);
  backdrop-filter: blur(2px);
  z-index: var(--z-sticky);
  animation: fade-in var(--transition-fast, 0.15s);
}

.selection-loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
}

.selection-loading-spinner__icon {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-bg-tertiary, #333);
  border-top-color: var(--color-accent-primary, #3b82f6);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/**
 * Creation Progress — Step Saved, Loading, Reduced Motion & Step-Based Progress Indicator
 */


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

@media (prefers-reduced-motion: reduce) {
  .creation-progress__fill {
    transition: none;
  }

  .selection-pick-btn.suggesting,
  .selection-pick-btn.suggesting .pick-icon {
    animation: none;
  }

  .creation-breadcrumb__step--current .creation-breadcrumb__dot {
    animation: none;
  }

  .creation-step-saved,
  .creation-step-saved--auto-hide {
    animation: none;
  }

  .selection-loading-spinner__icon {
    animation: none;
  }
}

/* ========================================
 * Step-Based Progress Indicator (Phase 3)
 * New visual step indicator with icons
 * ======================================== */

.creation-progress__steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  justify-content: center;
  padding: var(--space-2, 8px) 0;
}

/* Horizontal scrollable on mobile */
@media (max-width: 768px) {
  .creation-progress__steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-1, 4px);
  }

  .creation-progress__steps::-webkit-scrollbar {
    display: none;
  }
}

/* ========================================
 * Individual Step Button
 * ======================================== */

.creation-progress__step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: 2px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  min-width: 50px;
}

.creation-progress__step-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--color-text-muted, #888);
}

.creation-progress__step-btn:focus {
  outline: 2px solid var(--color-accent-primary, #3b82f6);
  outline-offset: 2px;
}

.creation-progress__step-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Step indicator (icon + number container) */
.creation-progress__step-indicator {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: 50%;
}

.creation-progress__step-icon {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted, #888);
  transition: color 0.2s ease;
}

.creation-progress__step-number {
  position: absolute;
  bottom: -2px;
  right: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-bg-secondary, rgba(20, 25, 35, 0.95));
  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.1));
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #888);
}

.creation-progress__step-label {
  font-size: var(--font-size-2xs, 0.65rem);
  color: var(--color-text-muted, #888);
  text-align: center;
  white-space: nowrap;
}

.creation-progress__step-optional {
  color: var(--color-accent-warning, #f59e0b);
  font-size: var(--font-size-2xs, 0.65rem);
}

/* ========================================
 * Step States
 * ======================================== */

/* Completed state */
.creation-progress__step-btn--completed {
  border-color: var(--color-accent-success, #22c55e);
}

.creation-progress__step-btn--completed .creation-progress__step-indicator {
  background: var(--color-accent-success, #22c55e);
}

.creation-progress__step-btn--completed .creation-progress__step-icon {
  color: var(--color-bg-primary, #1a1a1a);
}

.creation-progress__step-btn--completed .creation-progress__step-number {
  background: var(--color-accent-success, #22c55e);
  border-color: var(--color-accent-success, #22c55e);
  color: var(--color-bg-primary, #1a1a1a);
}

.creation-progress__step-btn--completed .creation-progress__step-label {
  color: var(--color-accent-success, #22c55e);
}

/* Current step */
.creation-progress__step-btn--current {
  border-color: var(--color-accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

.creation-progress__step-btn--current .creation-progress__step-indicator {
  background: var(--color-accent-primary, #3b82f6);
  animation: step-pulse-glow 2s ease-in-out infinite;
}

.creation-progress__step-btn--current .creation-progress__step-icon {
  color: var(--color-bg-primary, #1a1a1a);
}

.creation-progress__step-btn--current .creation-progress__step-number {
  background: var(--color-accent-primary, #3b82f6);
  border-color: var(--color-accent-primary, #3b82f6);
  color: var(--color-bg-primary, #1a1a1a);
}

.creation-progress__step-btn--current .creation-progress__step-label {
  color: var(--color-accent-primary, #3b82f6);
  font-weight: 600;
}

@keyframes step-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(59, 130, 246, 0);
  }
}

/* Disabled/Future step */
.creation-progress__step-btn--disabled {
  border-color: var(--color-border-default, rgba(255, 255, 255, 0.1));
  opacity: 0.5;
}

.creation-progress__step-btn--disabled .creation-progress__step-indicator {
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
}

/* Unavailable conditional step */
.creation-progress__step-btn--unavailable {
  border-style: dashed;
  opacity: 0.4;
}

.creation-progress__step-btn--unavailable .creation-progress__step-label {
  text-decoration: line-through;
}

/**
 * Creation Progress — Compact Step Mode, Progress Bar v2 & Creation Recovery Banner
 */

/* ========================================
 * Compact Step Mode
 * ======================================== */

.creation-progress__step-btn--compact {
  min-width: auto;
  padding: var(--space-1, 4px);
  flex-direction: row;
  gap: var(--space-1, 4px);
}

.creation-progress__step-btn--compact .creation-progress__step-indicator {
  display: none;
}

.creation-progress__step-btn--compact .creation-progress__step-icon {
  width: 12px;
  height: 12px;
}

.creation-progress__step-btn--compact .creation-progress__step-number {
  position: static;
  width: auto;
  height: auto;
  background: none;
  border: none;
  font-size: var(--font-size-2xs, 0.65rem);
}

.creation-progress__step-btn--compact .creation-progress__step-label {
  display: none;
}

.creation-progress__step-btn--compact.creation-progress__step-btn--completed .creation-progress__step-icon {
  color: var(--color-accent-success, #22c55e);
}

.creation-progress__step-btn--compact.creation-progress__step-btn--current .creation-progress__step-icon {
  color: var(--color-accent-primary, #3b82f6);
}

/* ========================================
 * Progress Bar Container (v2)
 * ======================================== */

.creation-progress__bar-container {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.creation-progress__bar-v2 {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.creation-progress__bar-fill-v2 {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary, #3b82f6) 0%,
    var(--color-accent-success, #22c55e) 100%
  );
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease;
}

.creation-progress__percentage-label {
  min-width: 40px;
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 600;
  color: var(--color-text-secondary, #aaa);
  text-align: right;
}

/* Reduced motion for new animations */
@media (prefers-reduced-motion: reduce) {
  .creation-progress__step-btn,
  .creation-progress__step-icon,
  .creation-progress__bar-fill-v2 {
    transition: none;
  }

  .creation-progress__step-btn--current .creation-progress__step-indicator {
    animation: none;
  }
}

/* ========================================
 * Creation Recovery Banner
 * ========================================
 * Shown when user returns to character creation with existing progress.
 * Offers to continue or start fresh.
 */

.creation-recovery-banner {
  display: flex;
  align-items: stretch;
  margin: 0 0 var(--space-3, 12px) 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15) 0%,
    rgba(34, 197, 94, 0.1) 100%
  );
  border: 1px solid var(--color-accent-primary, #3b82f6);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  animation: recovery-banner-slide-in 0.3s ease-out;
}

@keyframes recovery-banner-slide-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.creation-recovery-banner--dismissing {
  animation: recovery-banner-slide-out 0.2s ease-in forwards;
}

@keyframes recovery-banner-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.creation-recovery-banner__content {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  width: 100%;
  flex-wrap: wrap;
}

.creation-recovery-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md, 6px);
  color: var(--color-accent-primary, #3b82f6);
}

.creation-recovery-banner__icon svg {
  width: 24px;
  height: 24px;
}

.creation-recovery-banner__text {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.creation-recovery-banner__text strong {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-base, 0.95rem);
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 600;
}

.creation-recovery-banner__summary {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  color: var(--color-text-muted, #888);
}

.creation-recovery-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.creation-recovery-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.85rem);
  font-weight: 500;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.creation-recovery-banner__btn:focus {
  outline: 2px solid var(--color-accent-primary, #3b82f6);
  outline-offset: 2px;
}

.creation-recovery-banner__btn--primary {
  background: var(--color-accent-primary, #3b82f6);
  border: 1px solid var(--color-accent-primary, #3b82f6);
  color: white;
}

.creation-recovery-banner__btn--primary:hover {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
}

.creation-recovery-banner__btn--primary:active {
  transform: translateY(0);
}

.creation-recovery-banner__btn--secondary {
  background: transparent;
  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.2));
  color: var(--color-text-muted, #888);
}

.creation-recovery-banner__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-muted, #888);
  color: var(--color-text-primary, #e0e0e0);
}

.creation-recovery-banner__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  margin-left: auto;
}

.creation-recovery-banner__close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary, #e0e0e0);
}

.creation-recovery-banner__close:focus {
  outline: 2px solid var(--color-accent-primary, #3b82f6);
  outline-offset: 2px;
}

.creation-recovery-banner__close svg {
  width: 16px;
  height: 16px;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .creation-recovery-banner__content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
  }

  .creation-recovery-banner__icon {
    display: none;
  }

  .creation-recovery-banner__text {
    min-width: 0;
    width: 100%;
  }

  .creation-recovery-banner__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .creation-recovery-banner__close {
    position: absolute;
    top: var(--space-2, 8px);
    right: var(--space-2, 8px);
  }

  .creation-recovery-banner {
    position: relative;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .creation-recovery-banner,
  .creation-recovery-banner--dismissing {
    animation: none;
  }

  .creation-recovery-banner__btn {
    transition: none;
  }

  .creation-recovery-banner__btn--primary:hover {
    transform: none;
  }
}
/**
 * Creation Progress Indicator — Import Hub
 * ==========================================
 * Shows step number, step name, and completion percentage during character creation.
 *
 * Decomposed into focused files under creation_progress/ for maintainability.



 */
/* Adventure Card - Narrative Reveal Styling
 * ==========================================
 * Styles for adventure cards revealed in the narrative panel.
 * Uses rarity-based coloring and card type icons.
 */

/* Card container */
.narrative-card {
  --card-accent: var(--text-muted);

  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--card-accent);
  border-radius: var(--radius-md);
  animation: card-reveal 0.5s ease-out;
}

@keyframes card-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Rarity-based accent colors */
.narrative-card--common {
  --card-accent: var(--text-muted);
}

.narrative-card--uncommon {
  --card-accent: #4ade80; /* Green */
}

.narrative-card--rare {
  --card-accent: #60a5fa; /* Blue */
}

.narrative-card--legendary {
  --card-accent: #f59e0b; /* Gold */
  background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(245, 158, 11, 0.05) 100%);
}

/* Card header */
.narrative-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.narrative-card__icon {
  width: 20px;
  height: 20px;
  color: var(--card-accent);
  flex-shrink: 0;
}

.narrative-card__icon svg {
  width: 100%;
  height: 100%;
}

.narrative-card__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--card-accent);
  margin: 0;
  flex: 1;
}

.narrative-card__type-badge {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

/* Card content */
.narrative-card__content {
  color: var(--text-primary);
}

.narrative-card__teaser {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: var(--spacing-sm);
}

.narrative-card__description {
  margin: var(--spacing-sm) 0;
  line-height: 1.6;
}

.narrative-card__objectives {
  margin: var(--spacing-sm) 0;
  padding-left: var(--spacing-md);
}

.narrative-card__objectives li {
  margin-bottom: var(--spacing-xs);
  color: var(--text-secondary);
}

.narrative-card__objectives li::marker {
  color: var(--card-accent);
}

/* Card reveal levels */
.narrative-card--front-only .narrative-card__content {
  /* Show only teaser */
}

.narrative-card--partial .narrative-card__content {
  /* Show teaser + description */
}

.narrative-card--full .narrative-card__content {
  /* Show everything */
}

/* Mystery indicator for partial reveals */
.narrative-card__mystery {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px dashed var(--border-subtle);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
}

.narrative-card__mystery-icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Card type icons */
.narrative-card--quest_hook .narrative-card__icon {
  color: #4ade80; /* Green for quests */
}

.narrative-card--encounter .narrative-card__icon {
  color: #f87171; /* Red for combat */
}

.narrative-card--npc_moment .narrative-card__icon {
  color: #a78bfa; /* Purple for NPCs */
}

.narrative-card--world_event .narrative-card__icon {
  color: #fbbf24; /* Yellow for world events */
}

/* Tags */
.narrative-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.narrative-card__tag {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}

/* Legendary card special effects */
.narrative-card--legendary::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  background: linear-gradient(45deg, #f59e0b, #fbbf24, #f59e0b);
  z-index: -1;
  animation: legendary-glow 2s ease-in-out infinite alternate;
  opacity: 0.3;
}

@keyframes legendary-glow {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.4;
  }
}

.narrative-card--legendary {
  position: relative;
}

/* Rarity stars */
.narrative-card__rarity {
  font-size: var(--font-size-sm);
  color: var(--card-accent);
  margin-left: var(--spacing-xs);
}

/* Card actions */
.narrative-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.narrative-card__action {
  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;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.narrative-card__action:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.narrative-card__action--primary {
  background: rgba(var(--card-accent), 0.1);
  border-color: var(--card-accent);
  color: var(--card-accent);
}

.narrative-card__action--primary:hover {
  background: rgba(var(--card-accent), 0.2);
}

.narrative-card__play-group {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.narrative-card__play-group .narrative-card__action {
  border-radius: 0;
}

.narrative-card__play-group .narrative-card__action:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.narrative-card__play-group .narrative-card__action:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .narrative-card {
    padding: var(--spacing-sm);
  }

  .narrative-card__title {
    font-size: var(--font-size-base);
  }

  .narrative-card__type-badge {
    display: none;
  }

  .narrative-card__actions {
    flex-direction: column;
  }

  .narrative-card__play-group {
    margin-left: 0;
    width: 100%;
  }

  .narrative-card__play-group .narrative-card__action {
    flex: 1;
  }
}
/* Equipment Package Card
 * ======================
 * Inline gear bundle rendered in the narrative stream.
 * NPM Phase 3 T3.3 (#3648).
 *
 * Consistent with .homebrew-card shape:
 *   - left-accent border
 *   - reveal animation (reuses homebrew-reveal keyframe)
 *   - surface-elevated background
 *   - mono font body
 */

.equipment-package-card {
  --ep-accent: var(--color-warning, #f59e0b);

  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--color-bg-elevated, var(--surface-elevated));
  border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--ep-accent);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  animation: homebrew-reveal 0.4s ease-out; /* keyframe defined in _homebrew_card.css */
}

/* ── Header ── */

.equipment-package-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.equipment-package-card__icon {
  font-size: 1.2em;
  flex-shrink: 0;
  color: var(--ep-accent);
}

.equipment-package-card__name {
  font-family: var(--font-display, var(--font-mono));
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold, 600);
  color: var(--ep-accent);
  margin: 0;
  flex: 1;
}

.equipment-package-card__item-count {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}

/* ── Flavor text ── */

.equipment-package-card__flavor {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2) 0;
}

/* ── Item list ── */

.equipment-package-card__items {
  list-style: none;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.equipment-package-card__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.equipment-package-card__item-icon {
  flex-shrink: 0;
  color: var(--ep-accent);
  font-size: 0.9em;
}

.equipment-package-card__item-name {
  flex: 1;
  color: var(--color-text-primary);
}

.equipment-package-card__item-qty {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.equipment-package-card__item-cost {
  font-size: var(--font-size-xs);
  color: var(--color-warning, #f59e0b);
  white-space: nowrap;
}

/* ── Total ── */

.equipment-package-card__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.15));
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.equipment-package-card__total-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.equipment-package-card__total-amount {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-warning, #f59e0b);
}

.equipment-package-card__gold-icon {
  color: var(--color-warning, #f59e0b);
}

/* ── Actions ── */

.equipment-package-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.equipment-package-card__action {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-secondary, var(--surface-secondary));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-package-card__action:hover,
.equipment-package-card__action:focus-visible {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--ep-accent);
  outline: none;
}

.equipment-package-card__action:focus-visible {
  box-shadow: 0 0 0 2px var(--ep-accent);
}

.equipment-package-card__action--primary {
  background: rgba(245, 158, 11, 0.12);
  border-color: var(--ep-accent);
  color: var(--ep-accent);
}

.equipment-package-card__action--primary:hover,
.equipment-package-card__action--primary:focus-visible {
  background: rgba(245, 158, 11, 0.2);
  color: var(--color-text-primary);
}

/* ── Responsive — tablet ── */

@media (max-width: 768px) {
  .equipment-package-card {
    padding: var(--space-2);
  }

  .equipment-package-card__header {
    flex-wrap: wrap;
  }

  .equipment-package-card__name {
    font-size: var(--font-size-base);
    order: 1;
    flex-basis: 100%;
  }

  .equipment-package-card__icon {
    order: 0;
  }

  .equipment-package-card__item-count {
    order: 2;
  }
}

/* ── Responsive — mobile ── */

@media (max-width: 480px) {
  .equipment-package-card__item {
    flex-wrap: wrap;
  }

  .equipment-package-card__item-cost {
    width: 100%;
    text-align: right;
  }

  .equipment-package-card__actions {
    flex-direction: column;
  }

  .equipment-package-card__action {
    width: 100%;
    text-align: center;
  }
}

/* ── Merged state (T3.4 #3649) ── */
/* Mirrors .masonry-card--confirmed: green accent, disabled button, badge */

.equipment-package-card--merging {
  opacity: 0.8;
  pointer-events: none; /* block clicks during in-flight round-trip */
}

.equipment-package-card--merged {
  --ep-accent: var(--color-success, #22c55e);

  border-left-color: var(--ep-accent);
}

.equipment-package-card__merged-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid var(--color-success, #22c55e);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-success, #22c55e);
  white-space: nowrap;
}

.equipment-package-card__action--merged {
  background: rgba(34, 197, 94, 0.08);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
  cursor: default;
  opacity: 0.75;
}

.equipment-package-card__action--merged:hover,
.equipment-package-card__action--merged:focus-visible {
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .equipment-package-card {
    animation: none;
  }
}
/* ========================================
 * Shared Sheet Card (CSV Phase 3.1 #3664)
 * ======================================== */

.shared-sheet-card {
  background: var(--color-surface, #1e1e2e);
  border: 1px solid var(--color-border-accent, #6c63ff);
  border-left: 3px solid var(--color-border-accent, #6c63ff);
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-3, 0.75rem);
  margin: var(--space-2, 0.5rem) 0;
  font-size: var(--font-size-sm, 0.875rem);
  position: relative;
  animation: segment-reveal 0.3s ease-out;
}

.shared-sheet-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--color-border, #3a3a5c);
  padding-bottom: var(--space-2, 0.5rem);
}

.shared-sheet-card__icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.shared-sheet-card__header-text {
  flex: 1;
  min-width: 0;
}

.shared-sheet-card__name {
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shared-sheet-card__subtitle {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #718096);
}

.shared-sheet-card__timestamp {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #718096);
  flex-shrink: 0;
}

.shared-sheet-card__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.shared-sheet-card__section {
  padding: var(--space-2, 0.5rem) 0;
}

.shared-sheet-card__section + .shared-sheet-card__section {
  border-top: 1px solid var(--color-border, #3a3a5c);
}

.shared-sheet-card__section-title {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #718096);
  margin: 0 0 var(--space-2, 0.5rem);
}

/* Identity */
.shared-sheet-card__identity {
  color: var(--color-text-secondary, #a0aec0);
  margin: 0;
}

/* Combat stats */
.shared-sheet-card__stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
}

.shared-sheet-card__stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-surface-elevated, #2d2d3d);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.125rem 0.375rem;
  font-size: var(--font-size-xs, 0.75rem);
}

.shared-sheet-card__stat-label {
  color: var(--color-text-muted, #718096);
  font-size: 0.7rem;
}

.shared-sheet-card__stat-value {
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
}

/* Ability scores grid */
.shared-sheet-card__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-1, 0.25rem);
}

.shared-sheet-card__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-surface-elevated, #2d2d3d);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.25rem;
  text-align: center;
}

.shared-sheet-card__ability-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-text-muted, #718096);
}

.shared-sheet-card__ability-score {
  font-size: var(--font-size-base, 1rem);
  font-weight: 700;
  color: var(--color-text-primary, #e2e8f0);
  line-height: 1.2;
}

.shared-sheet-card__ability-mod {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent, #6c63ff);
}

/* Saves & Skills lists */
.shared-sheet-card__saves,
.shared-sheet-card__skills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.125rem;
}

.shared-sheet-card__save,
.shared-sheet-card__skill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.125rem 0.25rem;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0aec0);
}

.shared-sheet-card__save-val,
.shared-sheet-card__skill-val {
  font-weight: 600;
  color: var(--color-text-primary, #e2e8f0);
}

/* Inventory list */
.shared-sheet-card__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.shared-sheet-card__item {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0aec0);
  padding: 0.125rem 0;
}

.shared-sheet-card__item--more {
  font-style: italic;
  color: var(--color-text-muted, #718096);
}

/* Spellbook */
.shared-sheet-card__spell-group {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0aec0);
  margin: 0.125rem 0;
}

/* Footer */
.shared-sheet-card__footer {
  margin-top: var(--space-2, 0.5rem);
  padding-top: var(--space-1, 0.25rem);
  border-top: 1px solid var(--color-border, #3a3a5c);
}

.shared-sheet-card__snapshot-label {
  font-size: 0.65rem;
  color: var(--color-text-muted, #718096);
  font-style: italic;
}

/* ========================================
 * Share Sheet Modal (sheet-share-modal)
 * ======================================== */

.sheet-share-modal {
  background: var(--color-surface, #1e1e2e);
  border: 1px solid var(--color-border-accent, #6c63ff);
  border-radius: var(--radius-md, 0.5rem);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  width: 300px;
  max-width: 95vw;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e2e8f0);
}

.sheet-share-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--color-border, #3a3a5c);
}

.sheet-share-modal__title {
  font-weight: 600;
}

.sheet-share-modal__close {
  background: none;
  border: none;
  color: var(--color-text-muted, #718096);
  cursor: pointer;
  padding: 0.125rem 0.25rem;
  font-size: 0.875rem;
  line-height: 1;
}

.sheet-share-modal__close:hover {
  color: var(--color-text-primary, #e2e8f0);
}

.sheet-share-modal__fieldset {
  border: none;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  margin: 0;
}

.sheet-share-modal__legend {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #718096);
  margin-bottom: var(--space-1, 0.25rem);
  padding: 0;
}

.sheet-share-modal__section-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-1, 0.25rem);
}

.sheet-share-modal__section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0aec0);
}

.sheet-share-modal__section-label:hover {
  color: var(--color-text-primary, #e2e8f0);
}

.sheet-share-modal__select-all {
  font-size: 0.7rem;
  padding: 0.125rem 0.25rem;
  margin-top: 0.25rem;
}

.sheet-share-modal__scope-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0aec0);
  margin-bottom: 0.25rem;
}

.sheet-share-modal__scope-label:hover {
  color: var(--color-text-primary, #e2e8f0);
}

.sheet-share-modal__actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-top: 1px solid var(--color-border, #3a3a5c);
}
/* World Overview Panel - DM Tools world synopsis display */

.panel-world-overview {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-bg, var(--color-bg-primary));
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}

/* Header */
.world-overview-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, var(--color-border-subtle));
  background: var(--panel-header-bg, var(--overlay-light));
}

.world-overview-header .panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
}

.world-overview-header .panel-icon {
  font-size: 1.25rem;
}

.world-overview-header .world-tagline {
  margin: 0.25rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary, var(--color-text-secondary));
  font-style: italic;
}

/* Body */
.world-overview-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

.world-overview-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Sections */
.world-section {
  margin-bottom: 1rem;
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 4px;
  overflow: hidden;
}

.world-section:last-child {
  margin-bottom: 0;
}

.world-section .section-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-cyan, var(--color-accent-primary));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Synopsis Section */
.world-synopsis .section-title {
  padding: 0.5rem 0.75rem;
  background: rgba(0, 212, 255, 0.1);
  border-bottom: 1px solid var(--border-color, var(--color-border-subtle));
}

.world-synopsis .section-content {
  padding: 0.75rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.world-synopsis .section-content p {
  margin: 0 0 0.5rem 0;
}

.world-synopsis .section-content p:last-child {
  margin-bottom: 0;
}

/* Collapsible Sections */
.section-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--overlay-white-subtle);
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: background 0.2s;
}

.section-toggle:hover {
  background: var(--overlay-white-light);
}

.section-toggle .toggle-icon {
  font-size: 0.7rem;
  transition: transform 0.2s;
  color: var(--text-secondary, var(--color-text-secondary));
}

.section-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(90deg);
}

.section-content.collapsed {
  display: none;
}

/* Entity Lists (Locations, Factions) */
.entity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle, var(--overlay-white-subtle));
}

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

.entity-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
}

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

.entity-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary, var(--color-text-primary));
}

.entity-desc {
  font-size: 0.7rem;
  color: var(--text-secondary, var(--color-text-secondary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* House Rules List */
.rules-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rule-item {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle, var(--overlay-white-subtle));
}

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

.rule-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent-gold, var(--color-gold));
}

.rule-desc {
  display: block;
  font-size: 0.7rem;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-top: 0.125rem;
}

/* Campaign State */
.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.state-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem;
  background: var(--overlay-white-subtle);
  border-radius: 4px;
}

.state-label {
  font-size: 0.65rem;
  color: var(--text-secondary, var(--color-text-secondary));
  text-transform: uppercase;
}

.state-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-cyan, var(--color-accent-primary));
}

/* Tension colors */
.tension-1, .tension-2 { color: var(--color-accent-secondary); }
.tension-3, .tension-4 { color: var(--color-accent-warning); }
.tension-5, .tension-6 { color: #f97316; }
.tension-7 { color: var(--color-accent-error); }

/* Empty states */
.world-overview-body .empty-state {
  color: var(--text-secondary, var(--color-text-secondary));
  font-style: italic;
  font-size: 0.8rem;
}

/* Scrollbar */
.world-overview-body::-webkit-scrollbar {
  width: 6px;
}

.world-overview-body::-webkit-scrollbar-track {
  background: transparent;
}

.world-overview-body::-webkit-scrollbar-thumb {
  background: var(--border-color, var(--color-border-subtle));
  border-radius: 3px;
}

.world-overview-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, var(--color-text-secondary));
}
/*
 * Character Gallery — Container
 * Extracted for maintainability (#2783).
 */

/* Character Gallery Panel - Lobby character selection with prominent levels */
/* Supports both Tinder-style swipe view (default) and grid view */

.panel-character-gallery {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-bg, var(--color-bg-primary));
  color: var(--text-primary, var(--color-text-primary));
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
}

/* ========================================
   View Toggle - Minimal Swipe / Grid Switch
   ======================================== */

.gallery-view-toggle {
  display: flex;
  gap: 4px;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--color-text-muted, var(--text-secondary));
  font-family: inherit;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.view-toggle-btn:hover {
  color: var(--color-text-secondary, var(--text-primary));
}

.view-toggle-btn:focus {
  outline: none;
}

.view-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, var(--accent-cyan));
  outline-offset: 2px;
}

.view-toggle-btn.active {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary, var(--text-primary));
}

.view-toggle-btn .toggle-icon {
  display: flex;
}

.view-toggle-btn .toggle-icon .svg-icon svg {
  width: 12px;
  height: 12px;
}

.view-toggle-btn .toggle-label {
  font-weight: 500;
}

/* ========================================
   Swipe View - Tinder-Style Card Stack
   ======================================== */

.swipe-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Swipe Tabs - Minimal segmented control */
.swipe-tabs {
  display: flex;
  gap: 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.swipe-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted, var(--text-secondary));
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.swipe-tab:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}

.swipe-tab:not(:first-child):not(:last-child) {
  border-left: none;
}

.swipe-tab:last-child {
  border-radius: 0 6px 6px 0;
  border-left: none;
}

.swipe-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-secondary, var(--text-primary));
}

.swipe-tab:focus {
  outline: none;
}

.swipe-tab:focus-visible {
  outline: 2px solid var(--color-accent-primary, var(--accent-cyan));
  outline-offset: -2px;
  z-index: var(--z-raised);
}

.swipe-tab.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary, var(--text-primary));
}

.swipe-tab .tab-icon {
  display: flex;
}

.swipe-tab .tab-icon .svg-icon svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.swipe-tab.active .tab-icon .svg-icon svg {
  opacity: 1;
}

/* Browse Games Panel (lobby browser inside character gallery) */
.gallery-browse-games {
  flex: 1;
  overflow-y: auto;
}

.gallery-browse-games .lobby-browser-panel {
  height: 100%;
}

/* Card Stack Container */
.swipe-card-stack {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 0.5rem 0.5rem;
  perspective: 1000px;
  overflow: hidden;
}

.swipe-card-stack:focus {
  outline: none;
}

.swipe-card-stack:focus-visible {
  outline: 2px dashed var(--accent-cyan, var(--color-accent-primary));
  outline-offset: -4px;
}

/* Keyboard hint when stack is focused */
.swipe-card-stack:focus-visible::after {
  content: "← Skip | Select →";
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  background: var(--overlay-dark-plus, rgba(0, 0, 0, 0.85));
  border-radius: 4px;
  font-size: 0.65rem;
  color: var(--text-secondary, var(--color-text-secondary));
  white-space: nowrap;
}

/* Individual Swipe Card */
.swipe-card {
  position: absolute;
  width: 320px;
  max-width: 90%;
  max-height: calc(100% - 1rem);
  background: var(--panel-bg, var(--color-bg-primary, #1e1e2e));
  border: 2px solid var(--border-color, var(--color-border-subtle));
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
  transition: box-shadow 0.2s ease;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.swipe-card:active {
  cursor: grabbing;
}

.swipe-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* Card Stack Positioning (cards behind current) - Fanned for swipability hint */
.swipe-card[data-stack-position="0"] {
  z-index: var(--z-sticky);
  transform: scale(1) translateY(0) rotate(0deg);
  opacity: 1;
}

.swipe-card[data-stack-position="1"] {
  z-index: var(--z-float);
  transform: scale(0.95) translate(25px, 8px) rotate(4deg);
  opacity: 0.7;
  pointer-events: none;
}

.swipe-card[data-stack-position="2"] {
  z-index: var(--z-float);
  transform: scale(0.90) translate(-25px, 16px) rotate(-4deg);
  opacity: 0.5;
  pointer-events: none;
}

/* Swipe Card Content */
.swipe-card__portrait {
  position: relative;
  width: 100%;
  height: 130px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-cyan, var(--color-accent-primary)) 50%, transparent), color-mix(in srgb, var(--accent-purple, var(--color-accent-purple)) 30%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.swipe-card__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swipe-card__portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.5);
}

.swipe-card__portrait-placeholder .svg-icon svg {
  width: 64px;
  height: 64px;
}

.swipe-card__level-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 4px 10px;
  background: var(--overlay-dark-plus, rgba(0, 0, 0, 0.85));
  border: 1px solid var(--accent-gold, var(--color-gold));
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-gold, var(--color-gold));
}

.swipe-card__body {
  padding: 0.75rem 1rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color, var(--color-border-subtle)) transparent;
}

.swipe-card__body::-webkit-scrollbar {
  width: 4px;
}

.swipe-card__body::-webkit-scrollbar-track {
  background: transparent;
}

.swipe-card__body::-webkit-scrollbar-thumb {
  background: var(--border-color, var(--color-border-subtle));
  border-radius: 2px;
}

.swipe-card__name {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.swipe-card__class {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--accent-cyan, var(--color-accent-primary));
}

/* Stats Row */
.swipe-card__stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.2));
  border-radius: 6px;
}

.swipe-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.swipe-card__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
}

.swipe-card__stat-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Ability Scores */
.swipe-card__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.swipe-card__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.35rem;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.2));
  border-radius: 4px;
}

.swipe-card__ability-label {
  font-size: 0.55rem;
  text-transform: uppercase;
  color: var(--text-secondary, var(--color-text-secondary));
  margin-bottom: 0.15rem;
}

.swipe-card__ability-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary, var(--color-text-primary));
  line-height: 1.1;
}

.swipe-card__ability-mod {
  font-size: 0.7rem;
  color: var(--accent-cyan, var(--color-accent-primary));
  margin-top: 0.1rem;
}

/* Campaign Badge */
.swipe-card__campaign {
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
  border: 1px solid var(--accent-gold, var(--color-gold));
  border-radius: 6px;
}

.swipe-card__campaign-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
  margin: 0 0 0.25rem;
}

.swipe-card__campaign-info {
  font-size: 0.65rem;
  color: var(--text-secondary, var(--color-text-secondary));
  margin: 0;
}

/* Quick Start Badge */
.swipe-card__quick-start-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  background: var(--color-success, #22c55e);
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* ========================================
/*
 * Character Gallery — Playstyle tags
 * Extracted for maintainability (#2783).
 */

   Immersive Hero Preview - Background Section
   ======================================== */

.swipe-card__background {
  margin: 0.5rem 0;
  padding: 0.4rem;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), transparent);
  border: 1px solid var(--accent-gold, var(--color-gold));
  border-radius: 6px;
}

.swipe-card__background-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.swipe-card__background-icon {
  font-size: 1rem;
  line-height: 1;
}

.swipe-card__background-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-gold, var(--color-gold));
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.swipe-card__feature {
  margin-top: 0.4rem;
}

.swipe-card__feature-name {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  margin-bottom: 0.2rem;
}

.swipe-card__feature-hint {
  margin: 0;
  font-size: 0.65rem;
  font-style: italic;
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: 1.3;
}

.swipe-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.swipe-card__skill-tag {
  padding: 2px 6px;
  background: var(--overlay-white-subtle);
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 3px;
  font-size: 0.55rem;
  font-weight: 500;
  color: var(--text-secondary, var(--color-text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Playstyle Tags */
.swipe-card__playstyle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.swipe-card__playstyle-tag {
  padding: 2px 8px;
  background: linear-gradient(135deg, var(--accent-cyan, var(--color-accent-primary)), var(--accent-purple, var(--color-accent-purple)));
  border-radius: 12px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}

/* Personality Section - Dating Profile "About Me" Style */
.swipe-card__personality {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.15));
  border-left: 3px solid var(--accent-cyan, var(--color-accent-primary));
  border-radius: 0 4px 4px 0;
}

.swipe-card__personality-header {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-cyan, var(--color-accent-primary));
  margin-bottom: 0.3rem;
}

.swipe-card__personality-trait {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--text-primary, var(--color-text-primary));
  line-height: 1.4;
}

.swipe-card__personality-line {
  margin: 0;
  font-size: 0.6rem;
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: 1.5;
}

.swipe-card__personality-label {
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
}

/* Quirks Section */
.swipe-card__quirks {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: linear-gradient(135deg, rgba(198, 120, 221, 0.1), transparent);
  border: 1px solid var(--accent-purple, var(--color-accent-purple));
  border-radius: 6px;
}

.swipe-card__quirks-header {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-purple, var(--color-accent-purple));
  margin-bottom: 0.4rem;
}

.swipe-card__quirk {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.6rem;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.swipe-card__quirk:last-child {
  margin-bottom: 0;
}

.swipe-card__quirk-icon {
  flex-shrink: 0;
  font-size: 0.7rem;
  line-height: 1;
}

.swipe-card__quirk-label {
  font-weight: 600;
  color: var(--text-secondary, var(--color-text-secondary));
}

.swipe-card__quirk-value {
  color: var(--text-primary, var(--color-text-primary));
}

/* Equipment Hint */
.swipe-card__equipment {
  margin-top: 0.5rem;
  padding: 0.4rem;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.1));
  border-radius: 4px;
  font-size: 0.55rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

.swipe-card__equipment-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 0.3rem;
}

.swipe-card__equipment-value {
  font-style: italic;
}

/* Hero Card Detail Section (collapsible background flavor, traits, gear teaser) */
.swipe-card__detail-toggle {
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
}

.swipe-card__detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  background: transparent;
  border: 1px solid var(--accent-cyan, var(--color-accent-primary));
  border-radius: 12px;
  color: var(--accent-cyan, var(--color-accent-primary));
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.swipe-card__detail-btn:hover {
  background: var(--accent-cyan, var(--color-accent-primary));
  color: var(--color-background, #0a0e1a);
}

.swipe-card__detail-btn .svg-icon {
  flex-shrink: 0;
}

.swipe-card__detail {
  margin-top: 0.5rem;
  overflow: hidden;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  padding-top: 0.5rem;
  transition: max-height 0.25s ease, opacity 0.2s ease;
  max-height: 300px;
  opacity: 1;
}

.swipe-card__detail--collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  border-top-width: 0;
  pointer-events: none;
}

.swipe-card__detail-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  color: var(--text-secondary, var(--color-text-secondary));
  padding: 0.3rem 0;
}

.swipe-card__detail-flavor {
  font-size: 0.6rem;
  font-style: italic;
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: 1.4;
  margin: 0 0 0.4rem;
}

.swipe-card__detail-traits-header {
  font-size: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-cyan, var(--color-accent-primary));
  margin-bottom: 0.2rem;
}

.swipe-card__detail-traits {
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

.swipe-card__detail-trait {
  font-size: 0.6rem;
  color: var(--text-primary, var(--color-text-primary));
  line-height: 1.35;
  padding: 0.1rem 0;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
}

.swipe-card__detail-trait:last-child {
  border-bottom: none;
}

.swipe-card__detail-equipment-section {
  margin-top: 0.3rem;
}

.swipe-card__detail-equipment {
  font-size: 0.6rem;
  color: var(--text-secondary, var(--color-text-secondary));
  font-style: italic;
  margin: 0.1rem 0 0;
}

/* Connections Section */
.swipe-card__connections {
  margin-top: 0.5rem;
}

.swipe-card__connections-header {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-cyan, var(--color-accent-primary));
  margin-bottom: 0.3rem;
}

/* Feature Examples Section */
.swipe-card__feature-examples {
  margin: 0.5rem 0;
}

.swipe-card__examples-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-secondary, var(--color-text-secondary));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.swipe-card__examples-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.swipe-card__examples-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.65rem;
  color: var(--accent-cyan, var(--color-accent-primary));
  line-height: 1.5;
}

.swipe-card__examples-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent-gold, var(--color-gold));
  font-weight: bold;
}

/* Starting Context Section */
.swipe-card__context {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.1));
  border-radius: 4px;
}

.swipe-card__location {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}

.swipe-card__location-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.swipe-card__location-name {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-primary, var(--color-text-primary));
}

.swipe-card__known-contact {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.3rem;
  border-top: 1px dashed var(--border-color, var(--color-border-subtle));
}

.swipe-card__contact-icon {
  font-size: 0.75rem;
  line-height: 1;
}

.swipe-card__contact-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent-cyan, var(--color-accent-primary));
}

.swipe-card__contact-role {
  font-size: 0.55rem;
  color: var(--text-secondary, var(--color-text-secondary));
  font-style: italic;
/*
 * Character Gallery — Swipe overlays
 * Extracted for maintainability (#2783).
 */

}

/* Swipe Overlays (Like/Nope feedback) */
.swipe-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.swipe-card__overlay--like {
  background: rgba(34, 197, 94, 0.2);
}

.swipe-card__overlay--nope {
  background: rgba(239, 68, 68, 0.2);
}

.swipe-card__overlay-text {
  padding: 0.75rem 1.5rem;
  border: 4px solid;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  transform: rotate(-15deg);
}

.swipe-card__overlay--like .swipe-card__overlay-text {
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.swipe-card__overlay--nope .swipe-card__overlay-text {
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
  transform: rotate(15deg);
}

/* Swipe Empty State - Minimal */
.swipe-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-4, 16px);
  text-align: center;
  min-height: 100px;
}

.swipe-empty-state .empty-icon {
  margin-bottom: var(--space-2, 8px);
  color: var(--color-text-muted, var(--text-secondary));
  opacity: 0.5;
}

.swipe-empty-state .empty-icon .svg-icon svg {
  width: 32px;
  height: 32px;
}

.swipe-empty-state .empty-title {
  margin: 0 0 var(--space-1, 4px);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
}

.swipe-empty-state .empty-hint {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted, var(--text-secondary));
  max-width: 200px;
  line-height: 1.4;
}

/* Swipe Loading State */
.swipe-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
}

.swipe-loading-state .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color, var(--color-border-subtle));
  border-top-color: var(--accent-cyan, var(--color-accent-primary));
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

.swipe-loading-state p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Swipe Actions */
.swipe-actions {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.5rem 1rem;
  background: var(--panel-header-bg, var(--overlay-light));
  border-top: 1px solid var(--border-color, var(--color-border-subtle));
}

.swipe-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 64px;
  height: 64px;
  padding: 0.5rem;
  background: var(--overlay-white-subtle);
  border: 2px solid var(--border-color, var(--color-border-subtle));
  border-radius: 50%;
  color: var(--text-secondary, var(--color-text-secondary));
  font-family: inherit;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.swipe-action-btn .action-icon {
  display: flex;
  font-size: 1.5rem;
}

.swipe-action-btn .action-icon .svg-icon svg {
  width: 24px;
  height: 24px;
}

.swipe-action-btn .action-label {
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Skip button - secondary action, smaller and muted */
.swipe-action-btn.skip {
  width: 56px;
  height: 56px;
}

.swipe-action-btn.skip:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
  transform: scale(1.05);
}

.swipe-action-btn.skip:focus {
  outline: none;
}

.swipe-action-btn.skip:focus-visible {
  outline: 2px solid var(--color-danger, #ef4444);
  outline-offset: 2px;
}

/* Select button - primary action, larger and prominent */
.swipe-action-btn.select {
  width: 72px;
  height: 72px;
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.swipe-action-btn.select .action-icon .svg-icon svg {
  width: 28px;
  height: 28px;
}

.swipe-action-btn.select:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.swipe-action-btn.select:focus {
  outline: none;
}

.swipe-action-btn.select:focus-visible {
  outline: 2px solid var(--color-success, #22c55e);
  outline-offset: 2px;
}

/* Swipe Hint */
.swipe-hint {
  padding: 0.25rem 0.5rem;
  text-align: center;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.1));
}

.swipe-hint .hint-text {
  font-size: 0.7rem;
  color: var(--text-secondary, var(--color-text-secondary));
  font-style: italic;
}

/* Swipe Card Animations */
@keyframes swipeOutRight {
  to {
    transform: translateX(150%) rotate(30deg);
    opacity: 0;
  }
}

@keyframes swipeOutLeft {
  to {
    transform: translateX(-150%) rotate(-30deg);
    opacity: 0;
  }
}

.swipe-card.swiping-right {
  animation: swipeOutRight 0.3s ease-out forwards;
}

.swipe-card.swiping-left {
  animation: swipeOutLeft 0.3s ease-out forwards;
}

/* DM Selection States */
.swipe-card--selecting {
  animation: pulse-selecting 0.6s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(225, 112, 85, 0.5);
}

.swipe-card--selected {
  animation: select-success 0.5s ease-out forwards;
}

@keyframes pulse-selecting {
  0%, 100% {
    box-shadow: 0 0 20px rgba(225, 112, 85, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(225, 112, 85, 0.6);
    transform: scale(1.02);
  }
}

@keyframes select-success {
  0% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.8);
  }
  100% {
    transform: scale(0.95);
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  }
}

/* Archetype-specific card themes — muted gradients to fit terminal aesthetic */
.swipe-card.archetype-warrior .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(224, 108, 117, 0.5), rgba(224, 108, 117, 0.15));
}

.swipe-card.archetype-mage .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(97, 175, 239, 0.5), rgba(97, 175, 239, 0.15));
}

.swipe-card.archetype-healer .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(152, 195, 121, 0.5), rgba(152, 195, 121, 0.15));
}

.swipe-card.archetype-rogue .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(229, 192, 123, 0.5), rgba(229, 192, 123, 0.15));
}

.swipe-card.archetype-nature_warden .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(86, 182, 194, 0.5), rgba(86, 182, 194, 0.15));
}

.swipe-card.archetype-dark_pact .swipe-card__portrait {
  background: linear-gradient(135deg, rgba(168, 100, 190, 0.5), rgba(168, 100, 190, 0.15));
}

/*
 * Character Gallery — Archetype themes
 * Extracted for maintainability (#2783).
 */

/* Grid View Container */
.grid-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.character-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-color, var(--color-border-subtle));
  background: var(--panel-header-bg, var(--overlay-light));
}

.character-gallery-header .panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
}

.character-gallery-header .panel-icon {
  font-size: 1.25rem;
}

.character-gallery-header .character-count {
  font-size: 0.75rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Filter Controls */
.gallery-filter-controls {
  padding: 0.5rem 0.75rem;
  background: var(--panel-header-bg, var(--overlay-light));
  border-bottom: 1px solid var(--border-color, var(--color-border-subtle));
}

.filter-row {
  display: flex;
  gap: 0.5rem;
}

.filter-row + .filter-row {
  margin-top: 0.5rem;
}

.filter-search {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.filter-search .search-icon {
  position: absolute;
  left: 0.5rem;
  display: flex;
  color: var(--text-secondary, var(--color-text-secondary));
  pointer-events: none;
}

.filter-search .search-icon .svg-icon svg {
  width: 14px;
  height: 14px;
}

.filter-input {
  flex: 1;
  padding: 0.4rem 0.5rem 0.4rem 1.75rem;
  background: var(--overlay-white-subtle);
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 4px;
  color: var(--text-primary, var(--color-text-primary));
  font-family: inherit;
  font-size: 0.75rem;
}

.filter-input::placeholder {
  color: var(--text-secondary, var(--color-text-secondary));
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent-cyan, var(--color-accent-primary));
}

.filter-selects {
  display: flex;
  gap: 0.5rem;
}

.filter-select {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.5rem;
  background: var(--overlay-white-subtle);
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 4px;
  color: var(--text-primary, var(--color-text-primary));
  font-family: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--accent-cyan, var(--color-accent-primary));
}

/* No Match State */
.gallery-no-match {
  padding: 1.5rem;
}

.gallery-no-match .btn {
  margin-top: 0.75rem;
}

/* Body */
.character-gallery-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
}

/* Empty State */
.gallery-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 2rem;
}

.gallery-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.gallery-empty p {
  margin: 0.25rem 0;
  color: var(--text-secondary, var(--color-text-secondary));
}

.gallery-empty .empty-hint {
  font-size: 0.75rem;
  font-style: italic;
}

/* Transition feedback while navigating to character creation */
.gallery-transition-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Character Grid */
.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* Character Card */
.character-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem;
  background: var(--overlay-white-subtle);
  border: 2px solid var(--border-color, var(--color-border-subtle));
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.character-card:hover {
  background: var(--overlay-white-light);
  border-color: var(--accent-cyan, var(--color-accent-primary));
  transform: translateY(-2px);
}

.character-card.current {
  border-color: var(--accent-gold, var(--color-gold));
  background: rgba(255, 215, 0, 0.1);
}

/* Portrait Display - Character token image with level badge */
.card-portrait {
  grid-row: 1 / 3;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-cyan, var(--color-accent-primary)), var(--accent-purple, var(--color-accent-purple)));
}

.card-portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-portrait__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
}

.card-portrait__placeholder .svg-icon svg {
  width: 24px;
  height: 24px;
}

.card-portrait__level {
  position: absolute;
  bottom: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--overlay-dark-plus, rgba(0, 0, 0, 0.85));
  border: 1px solid var(--accent-gold, var(--color-gold));
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent-gold, var(--color-gold));
  line-height: 16px;
  text-align: center;
}

/* Legacy support for card-level (archived card fallback) */
.card-level {
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--accent-cyan, var(--color-accent-primary)), var(--accent-purple, var(--color-accent-purple)));
  border-radius: 6px;
}

.card-level .level-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  text-shadow: 0 1px 2px var(--overlay-light-plus);
}

.card-level .level-label {
  font-size: 0.5rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Card Info */
.card-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.card-race {
  font-size: 0.7rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Card Meta */
.card-meta {
  grid-column: 2;
  display: flex;
  gap: 0.75rem;
  font-size: 0.65rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

.card-hp {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.card-updated {
  font-style: italic;
}

/* Current Badge */
.current-badge {
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 2px 8px;
  background: var(--accent-gold, var(--color-gold));
  color: #000;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}

/* Footer - Quick action chip style */
.character-gallery-footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
}

.gallery-action {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: 8px 12px;
  min-height: 36px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, var(--color-text-primary));
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gallery-action:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Create button - primary gold accent */
.gallery-action.create {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
}

.gallery-action.create:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.35);
}

/* Random button - purple accent */
.gallery-action.random {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.2);
  color: var(--color-accent-purple, #a78bfa);
}

.gallery-action.random:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.35);
}

.gallery-action .action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-action .action-icon .svg-icon svg {
  width: 14px;
  height: 14px;
}

.gallery-action .action-label {
  font-weight: 500;
}

/* Card Action Buttons */
.card-actions {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.character-card:hover .card-actions,
.character-card:focus-within .card-actions {
  opacity: 1;
}

.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.6));
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 4px;
  color: var(--text-secondary, var(--color-text-secondary));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.card-action-btn .svg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-action-btn .svg-icon svg {
  width: 14px;
  height: 14px;
}

.card-action-btn:hover {
  background: var(--overlay-dark-plus, rgba(0, 0, 0, 0.8));
  color: var(--text-primary, var(--color-text-primary));
}

.card-action-btn.archive-btn:hover {
/*
 * Character Gallery — Grid view filter controls, body, empty states, responsive
 * Extracted for maintainability (#2783).
 */

  border-color: var(--accent-cyan, var(--color-accent-primary));
  color: var(--accent-cyan, var(--color-accent-primary));
}

.card-action-btn.unarchive-btn:hover {
  border-color: var(--accent-green, var(--color-accent-secondary));
  color: var(--accent-green, var(--color-accent-secondary));
}

.card-action-btn.delete-btn:hover {
  border-color: var(--accent-red, #e74c3c);
  color: var(--accent-red, #e74c3c);
}

/* Preset Section - Quick Start Heroes */
.preset-section {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color, var(--color-border-subtle));
}

/* Base section-header from components/_section.css */
.preset-section .section-header {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
}

.preset-section .section-icon {
  display: flex;
  font-size: 1rem;
}

.preset-section .section-icon .svg-icon svg {
  width: 16px;
  height: 16px;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

/* Preset Card - Distinguished from saved characters */
.preset-card {
  border-color: var(--accent-purple, var(--color-accent-purple));
  background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), transparent);
}

.preset-card:hover {
  border-color: var(--accent-gold, var(--color-gold));
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
}

.preset-portrait {
  background: linear-gradient(135deg, var(--accent-purple, var(--color-accent-purple)), var(--accent-gold, var(--color-gold)));
}

.preset-badge {
  display: inline-flex;
  padding: 2px 6px;
  background: var(--accent-purple, var(--color-accent-purple));
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 3px;
}

/* Quick Start Hero Cards - Archetype-specific theming */
.quick-start-card {
  position: relative;
  overflow: hidden;
}

.quick-start-card .preset-badge {
  background: var(--color-success, #22c55e);
}

.quick-start-card .card-portrait__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.quick-start-card .card-portrait__icon svg {
  width: 24px;
  height: 24px;
}

/* Archetype Colors */
.quick-start-card.archetype-warrior {
  border-color: var(--color-danger, #e06c75);
}
.quick-start-card.archetype-warrior .card-portrait {
  background: linear-gradient(135deg, rgba(224, 108, 117, 0.3), rgba(224, 108, 117, 0.1));
}
.quick-start-card.archetype-warrior .card-portrait__icon {
  color: var(--color-danger, #e06c75);
}

.quick-start-card.archetype-mage {
  border-color: var(--color-accent-primary, #61afef);
}
.quick-start-card.archetype-mage .card-portrait {
  background: linear-gradient(135deg, rgba(97, 175, 239, 0.3), rgba(97, 175, 239, 0.1));
}
.quick-start-card.archetype-mage .card-portrait__icon {
  color: var(--color-accent-primary, #61afef);
}

.quick-start-card.archetype-healer {
  border-color: var(--color-success, #98c379);
}
.quick-start-card.archetype-healer .card-portrait {
  background: linear-gradient(135deg, rgba(152, 195, 121, 0.3), rgba(152, 195, 121, 0.1));
}
.quick-start-card.archetype-healer .card-portrait__icon {
  color: var(--color-success, #98c379);
}

.quick-start-card.archetype-rogue {
  border-color: var(--color-warning, #e5c07b);
}
.quick-start-card.archetype-rogue .card-portrait {
  background: linear-gradient(135deg, rgba(229, 192, 123, 0.3), rgba(229, 192, 123, 0.1));
}
.quick-start-card.archetype-rogue .card-portrait__icon {
  color: var(--color-warning, #e5c07b);
}

.quick-start-card.archetype-nature_warden {
  border-color: #56b6c2;
}
.quick-start-card.archetype-nature_warden .card-portrait {
  background: linear-gradient(135deg, rgba(86, 182, 194, 0.3), rgba(86, 182, 194, 0.1));
}
.quick-start-card.archetype-nature_warden .card-portrait__icon {
  color: #56b6c2;
}

.quick-start-card.archetype-dark_pact {
  border-color: #c678dd;
}
.quick-start-card.archetype-dark_pact .card-portrait {
  background: linear-gradient(135deg, rgba(198, 120, 221, 0.3), rgba(198, 120, 221, 0.1));
}
.quick-start-card.archetype-dark_pact .card-portrait__icon {
  color: #c678dd;
}

.quick-start-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-description {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border-color, var(--color-border-subtle));
  font-size: 0.65rem;
  font-style: italic;
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: 1.3;
}

/* Archived Section */
.archived-section {
  margin-top: 1rem;
  border-top: 1px solid var(--border-color, var(--color-border-subtle));
  padding-top: 0.5rem;
}

.archived-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0;
  background: none;
  border: none;
  color: var(--text-secondary, var(--color-text-secondary));
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.archived-toggle:hover {
  color: var(--text-primary, var(--color-text-primary));
}

.archived-toggle .toggle-icon {
  display: flex;
  transition: transform 0.2s ease;
}

.archived-toggle .toggle-icon .svg-icon svg {
  width: 14px;
  height: 14px;
}

.archived-section.expanded .archived-toggle .toggle-icon {
  transform: rotate(90deg);
}

.archived-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Archived Character Card */
.character-card.archived {
  opacity: 0.6;
  border-style: dashed;
}

.character-card.archived:hover {
  opacity: 0.9;
}

.character-card.archived .card-level {
  background: linear-gradient(135deg, var(--text-secondary, #666), var(--text-secondary, #888));
}

/* Scrollbar */
.character-gallery-body::-webkit-scrollbar {
  width: 6px;
}

.character-gallery-body::-webkit-scrollbar-track {
  background: transparent;
}

.character-gallery-body::-webkit-scrollbar-thumb {
  background: var(--border-color, var(--color-border-subtle));
  border-radius: 3px;
}

.character-gallery-body::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary, var(--color-text-secondary));
}

/* ========================================
   World Selector Inline (Random Hero Flow)
   ======================================== */

.world-selector-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}

.world-selector-inline__header {
  text-align: center;
}

.world-selector-inline__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent-gold, var(--color-gold));
}

.world-selector-inline__subtitle {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary, var(--color-text-secondary));
}

.world-selector-inline__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
}

/* World Card */
.world-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--overlay-white-subtle);
  border: 2px solid var(--border-color, var(--color-border-subtle));
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.world-card:hover {
  background: var(--overlay-white-light);
  border-color: var(--accent-cyan, var(--color-accent-primary));
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.world-card:active {
  transform: translateY(-1px);
}

.world-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.world-card__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, var(--color-text-primary));
}

.world-card__desc {
  font-size: 0.65rem;
  color: var(--text-secondary, var(--color-text-secondary));
  line-height: 1.3;
}

/* Cancel button */
.world-selector-inline__cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--border-color, var(--color-border-subtle));
  border-radius: 6px;
  color: var(--text-secondary, var(--color-text-secondary));
  font-family: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.world-selector-inline__cancel:hover {
  background: var(--overlay-white-subtle);
  color: var(--text-primary, var(--color-text-primary));
  border-color: var(--text-secondary, var(--color-text-secondary));
}

.world-selector-inline__cancel .svg-icon svg {
  width: 14px;
  height: 14px;
}

/* Swipe tabs with 3 tabs - need to handle middle border */
.swipe-tabs .swipe-tab:nth-child(2) {
  border-radius: 0;
  border-right: none;
}

.swipe-tabs .swipe-tab:nth-child(3) {
  border-radius: 0 4px 4px 0;
}

/* Responsive */
@media (max-width: 600px) {
  .character-grid {
    grid-template-columns: 1fr;
  }

  .character-card {
    padding: 0.5rem;
  }

  .card-level {
    width: 45px;
    height: 45px;
  }

  .card-level .level-number {
    font-size: 1.25rem;
  }

  .filter-selects {
    flex-wrap: wrap;
  }

  .filter-select {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: calc(50% - 0.25rem);
  }

}

/* ============================================================
   Hero Vignette ("Watch Story") — Discover Heroes swipe cards
   ============================================================ */

.panel-character-gallery .swipe-card__vignette-section {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  padding-top: 0.5rem;
}

.panel-character-gallery .swipe-card__watch-story-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent-cyan, var(--color-accent-primary));
  background: transparent;
  border: 1px solid var(--accent-cyan, var(--color-accent-primary));
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.panel-character-gallery .swipe-card__watch-story-btn:hover:not(:disabled) {
  background: var(--accent-cyan, var(--color-accent-primary));
  color: var(--bg-primary, #0a0a0a);
}

.panel-character-gallery .swipe-card__watch-story-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-character-gallery .swipe-card__vignette {
  margin-top: 0.5rem;
}

.panel-character-gallery .swipe-card__vignette-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  color: var(--text-muted, var(--color-text-muted));
  font-style: italic;
}

.panel-character-gallery .swipe-card__vignette-text {
  font-size: 0.65rem;
  line-height: 1.55;
  color: var(--text-primary, var(--color-text-primary));
  font-style: italic;
  margin: 0;
}

.panel-character-gallery .swipe-card__vignette-text--visible {
  animation: vignette-fade-in 0.4s ease forwards;
}

@keyframes vignette-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*
 * Character Gallery — Observer Mode Panel
 * "Being John Malkovich" hero discovery scene.
 *
 * The player watches 4-5 NPCs living their lives and chooses one to become.
 * Wired to terminal--observer-mode Stimulus controller (#5431).
 */

/* Outer wrapper — shown by gallery controller when Discover Heroes tab is active */
.gallery-observer-mode-panel {
  overflow: auto;
}

/* Inner controller root */
.observer-mode-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  color: var(--text-primary, var(--color-text-primary));
}

/* -----------------------------------------------------------------------
   State containers — each state div is shown/hidden by the controller
   ----------------------------------------------------------------------- */

.observer-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* Loading / converting spinner */
.observer-state--loading,
.observer-state--converting {
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

.observer-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color-accent, #7c6af5);
  border-radius: 50%;
  animation: observer-spin 0.8s linear infinite;
}

@keyframes observer-spin {
  to { transform: rotate(360deg); }
}

.observer-loading-text {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-muted, var(--text-secondary));
}

/* -----------------------------------------------------------------------
   Observing state — scene intro + NPC grid
   ----------------------------------------------------------------------- */

.observer-scene-intro {
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted, var(--text-secondary));
  font-style: italic;
}

.observer-npc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2, 8px);
}

/* NPC cards are injected by JS via _npcCardHtml() */
.observer-npc-card {
  padding: var(--space-2, 8px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.observer-npc-card:hover,
.observer-npc-card:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  outline: none;
}

.observer-npc-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #7c6af5);
  margin-bottom: 2px;
}

.observer-npc-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.observer-npc-appearance {
  font-size: 10px;
  color: var(--color-text-muted, var(--text-secondary));
  margin-bottom: 4px;
  line-height: 1.4;
}

.observer-beat-preview {
  font-size: 10px;
  font-style: italic;
  color: var(--color-text-muted, var(--text-secondary));
}

/* -----------------------------------------------------------------------
   Inspecting state — NPC detail panel
   ----------------------------------------------------------------------- */

.observer-detail-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: var(--space-3, 12px);
}

.observer-detail-name {
  margin: 0 0 2px 0;
  font-size: 16px;
  font-weight: 700;
}

.observer-detail-role {
  margin: 0 0 8px 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent, #7c6af5);
}

.observer-detail-appearance {
  margin: 0 0 10px 0;
  font-size: 11px;
  color: var(--color-text-muted, var(--text-secondary));
  line-height: 1.5;
}

.observer-detail-beats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.observer-beat {
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--color-accent, #7c6af5);
  border-radius: 0 4px 4px 0;
}

.observer-beat-1 { border-left-color: var(--color-accent, #7c6af5); }
.observer-beat-2 { border-left-color: var(--color-success, #4caf85); }
.observer-beat-3 { border-left-color: var(--color-warning, #e8a838); }

.observer-detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* -----------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------- */

.observer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.observer-btn--primary {
  background: var(--color-accent, #7c6af5);
  color: #fff;
  border-color: var(--color-accent, #7c6af5);
}

.observer-btn--primary:hover {
  opacity: 0.85;
}

.observer-btn--secondary {
  background: transparent;
  color: var(--color-text-muted, var(--text-secondary));
  border-color: rgba(255, 255, 255, 0.15);
  font-size: 11px;
}

.observer-btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--text-primary, var(--color-text-primary));
}

.observer-btn--ghost {
  background: transparent;
  color: var(--color-text-muted, var(--text-secondary));
  border-color: transparent;
  font-size: 11px;
}

.observer-btn--ghost:hover {
  color: var(--text-primary, var(--color-text-primary));
}

/* -----------------------------------------------------------------------
   Error message
   ----------------------------------------------------------------------- */

.observer-error {
  margin: 0;
  padding: 8px 10px;
  background: rgba(220, 60, 60, 0.12);
  border: 1px solid rgba(220, 60, 60, 0.3);
  border-radius: 4px;
  font-size: 11px;
  color: #f07070;
}
/**
 * Character Gallery — Import Hub
 * ================================
 * Swipe card stack, card content, UX overlays, and grid view.
 *
 * Decomposed into focused files under character_gallery/ for maintainability (#2783).






 */
/* Campaign List Panel
 * ====================
 * Shows all campaigns where the user is a member.
 * Extracted from inline styles in _campaign_list.html.erb
 */

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

.campaign-list-panel .panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-list-panel .panel-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-list-panel .panel-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary, #888);
}

.campaign-list-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.campaign-list-panel .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-list-panel .empty-state-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.campaign-list-panel .empty-state-text {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-primary, #e0e0e0);
}

.campaign-list-panel .empty-state-hint {
  font-size: 0.875rem;
}

.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.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, transform 0.2s ease;
  cursor: pointer;
}

.campaign-card:hover {
  border-color: var(--primary-color, #4a9eff);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.campaign-card--current {
  border-color: var(--success-color, #4ade80);
  background: var(--panel-bg-highlight, #222);
}

.campaign-card--solo {
  border-left: 3px solid var(--solo-color, #9b59b6);
}

.campaign-type-badge {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.campaign-type-badge--solo {
  background: var(--solo-color, #9b59b6);
  color: #fff;
}

.campaign-type-badge--party {
  background: var(--party-color, #3498db);
  color: #fff;
}

.campaign-card-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.campaign-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.campaign-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-list-panel .badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

.campaign-list-panel .badge-success {
  background: var(--success-color, #4ade80);
  color: #000;
}

.role-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-badge--dm {
  background: var(--primary-color, #4a9eff);
  color: #000;
}

.role-badge--co_dm {
  background: var(--info-color, #60a5fa);
  color: #000;
}

.role-badge--player {
  background: var(--secondary-color, #666);
  color: #fff;
}

.campaign-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.campaign-detail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary, #888);
}

.campaign-detail .detail-icon {
  font-size: 1rem;
}

.campaign-card-actions {
  display: flex;
  gap: 0.5rem;
}

.campaign-list-panel .panel-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-color, #333);
  flex-shrink: 0;
}

/* Button styles for campaign list */
.campaign-list-panel .btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  border: none;
}

.campaign-list-panel .btn--primary {
  background: var(--primary-color, #4a9eff);
  color: #000;
}

.campaign-list-panel .btn--primary:hover {
  background: var(--primary-hover, #3a8eef);
}

.campaign-list-panel .btn--secondary {
  background: var(--secondary-color, #666);
  color: #fff;
}

.campaign-list-panel .btn--secondary:hover {
  background: var(--secondary-hover, #555);
}

.campaign-list-panel .btn-invite {
  background: var(--solo-color, #9b59b6);
  color: #fff;
}

.campaign-list-panel .btn-invite:hover {
  background: var(--solo-color-hover, #8e44ad);
}

.campaign-list-panel .btn--ghost {
  background: transparent;
  border: 1px solid var(--border-color, #333);
  color: var(--text-primary, #e0e0e0);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campaign-list-panel .btn--ghost:hover {
  border-color: var(--primary-color, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.campaign-list-panel .btn--sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
}

.campaign-list-panel .btn--danger {
  background: var(--color-error, #cf6068);
  color: #fff;
}

.campaign-list-panel .btn--danger:hover {
  background: var(--error-hover, #dc2626);
}

/* Character roster per campaign */
.campaign-card-characters {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border-subtle, #2a2a2a);
  font-size: 0.875rem;
  color: var(--text-secondary, #888);
}

.campaign-card-characters .detail-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.campaign-card-characters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
}

.campaign-card-character {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
}

.campaign-card-character__level {
  color: var(--text-muted, #888);
  font-weight: 400;
  font-size: 0.75rem;
}

/* ==========================================
   Campaign Sections (Active/Older grouping)
   ========================================== */

.campaign-section {
  margin-bottom: 1.5rem;
}

.campaign-section:last-child {
  margin-bottom: 0;
}

.campaign-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-section__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary, #888);
}

.campaign-section__title svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.campaign-section__count {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--panel-bg-highlight, #222);
  border-radius: 10px;
  color: var(--text-muted, #888);
  margin-left: auto;
}

/* Collapsible Older Section */
.campaign-section__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: var(--panel-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.5rem;
  color: var(--text-secondary, #888);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.campaign-section__toggle:hover {
  background: var(--panel-bg-highlight, #222);
  border-color: var(--text-muted, #888);
}

.campaign-section__toggle-icon {
  display: flex;
  transition: transform 0.2s ease;
}

.campaign-section__toggle-icon svg {
  width: 14px;
  height: 14px;
}

.campaign-section__content {
  display: none;
  margin-top: 0.75rem;
}

/* Expanded State */
.campaign-section--expanded .campaign-section__toggle-icon {
  transform: rotate(90deg);
}

.campaign-section--expanded .campaign-section__content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Compact Campaign Cards */
.campaign-card--compact {
  padding: 0.75rem;
}

.campaign-card--compact .campaign-card-header {
  margin-bottom: 0.5rem;
}

.campaign-card--compact .campaign-card-title {
  font-size: 0.95rem;
}

.campaign-card--compact .campaign-card-meta {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin-bottom: 0.5rem;
}

.campaign-card--compact .campaign-card-actions {
  gap: 0.375rem;
}

.campaign-card--compact .btn {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
}
/**
 * Floating Panel — Base, Pinned, Minimized, Header, Dropdown, Protected, Content, Resize & Dock
 */

/**
 * Floating Panel System
 * =====================
 * Styles for draggable, resizable floating panel windows.
 */

/* ========================================
 * FLOATING PANEL BASE
 * ======================================== */

/* STRUCTURAL: isolation:isolate creates explicit stacking context so z-index
 * works predictably regardless of ancestor transforms. */
.floating-panel {
  position: fixed;
  z-index: var(--z-floating);
  isolation: isolate;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  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;
  flex-direction: column;
  min-width: 250px;
  min-height: 200px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* Mobile Safari */
  overflow: hidden;
}

/* Bring focused panel to front */
.floating-panel:focus-within,
.floating-panel--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);
}

/* ========================================
 * PINNED STATE
 * ======================================== */

.floating-panel--pinned {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.floating-panel--pinned .floating-panel__header {
  cursor: default;
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-elevated) 100%
  );
}

.floating-panel--pinned .floating-panel__pin-btn {
  color: var(--color-accent-secondary);
}

/* ========================================
 * MINIMIZED STATE
 * ======================================== */

.floating-panel--minimized {
  display: none;
}

/* ========================================
 * HEADER
 * ======================================== */

.floating-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-primary);
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
}

.floating-panel__header:active {
  cursor: grabbing;
}

.floating-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-panel__title-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.floating-panel__controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.floating-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Visual size stays compact, but hit area is 44x44 for accessibility */
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  /* Expand touch target without changing visual size */
  position: relative;
}

/* Expand touch target to 44x44px for motor accessibility */
.floating-panel__btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Focus state for keyboard navigation */
.floating-panel__btn:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: 2px;
}

.floating-panel__btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.floating-panel__btn--close:hover {
  background: var(--color-error);
  color: white;
}

.floating-panel__btn--pin.active {
  color: var(--color-accent-secondary);
}

/* Dock button - shows for all floating panels */
.floating-panel__btn--dock:hover {
  background: var(--color-accent-primary);
  color: white;
}

/* Hidden button state - used for close button on protected panels */
.floating-panel__btn--hidden {
  display: none;
}

/* ========================================
 * FLOATING PANEL DROPDOWN MENU
 * Reuses panel-dropdown pattern from grid panels
 * ======================================== */

.floating-panel__dropdown-trigger {
  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;
}

.floating-panel__dropdown-trigger:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.floating-panel__dropdown-trigger:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: 2px;
}

/* Ensure dropdown menu renders above floating panel content */
.floating-panel .panel-dropdown__menu {
  z-index: var(--z-floating-controls);
}

/* ========================================
 * PROTECTED PANEL STATE
 * Protected panels can be docked back but not closed
 * ======================================== */

.floating-panel--protected {
  border-color: var(--color-accent-warning, #f59e0b);
}

.floating-panel--protected .floating-panel__header {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-accent-warning, #f59e0b) 10%, var(--color-bg-secondary)),
    var(--color-bg-secondary)
  );
  border-left: 2px solid var(--color-accent-warning, #f59e0b);
}

/* ========================================
 * CONTENT
 * ======================================== */

.floating-panel__content {
  flex: 1;
  overflow: auto;
  padding: var(--space-2);
  min-height: 0;
}

/* Ensure panel content fills available space */
.floating-panel__content > * {
  height: 100%;
}

/* ========================================
 * RESIZE HANDLES
 * ======================================== */

.floating-panel__resize {
  position: absolute;
  z-index: var(--z-sticky);
  background: transparent;
}

/* Edge handles */
.floating-panel__resize--n,
.floating-panel__resize--s {
  height: 8px;
  left: 12px;
  right: 12px;
}

.floating-panel__resize--n {
  top: -4px;
  cursor: ns-resize;
}

.floating-panel__resize--s {
  bottom: -4px;
  cursor: ns-resize;
}

.floating-panel__resize--e,
.floating-panel__resize--w {
  width: 8px;
  top: 12px;
  bottom: 12px;
}

.floating-panel__resize--e {
  right: -4px;
  cursor: ew-resize;
}

.floating-panel__resize--w {
  left: -4px;
  cursor: ew-resize;
}

/* Corner handles */
.floating-panel__resize--ne,
.floating-panel__resize--nw,
.floating-panel__resize--se,
.floating-panel__resize--sw {
  width: 16px;
  height: 16px;
}

.floating-panel__resize--ne {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.floating-panel__resize--nw {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

.floating-panel__resize--se {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.floating-panel__resize--sw {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

/* Visual corner grip indicator */
.floating-panel__resize--se::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    var(--color-text-tertiary) 50%,
    var(--color-text-tertiary) 60%,
    transparent 60%,
    transparent 70%,
    var(--color-text-tertiary) 70%,
    var(--color-text-tertiary) 80%,
    transparent 80%
  );
  opacity: 0.5;
  pointer-events: none;
}

.floating-panel:hover .floating-panel__resize--se::after {
  opacity: 0.8;
}

/* ========================================
 * FLOATING DOCK
 * Taskbar for minimized panels
 * ======================================== */

.floating-dock {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-popover);
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  animation: floatingDockSlideUp 0.15s ease-out;
}

@keyframes floatingDockSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Hide dock when empty */
.floating-dock:empty {
  display: none;
}

.floating-dock__item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  background: var(--color-bg-primary);
  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;
}

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

/* Focus state for keyboard navigation (A11y requirement) */
.floating-dock__item:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: 2px;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.floating-dock__item-icon {
  font-size: var(--font-size-md);
}

.floating-dock__item-title {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/**
 * Floating Panel — Manager Container, Transitions, Tooltip, Mobile, Pop-out & Snap
 */

/* ========================================
 * FLOATING MANAGER CONTAINER
 * ======================================== */

.floating-panels-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: var(--z-floating);
  pointer-events: none;
}

.floating-panels-container .floating-panel {
  pointer-events: auto;
}

/* ========================================
 * TRANSITIONS & ANIMATIONS
 * ======================================== */

.floating-panel--dragging {
  opacity: 0.9;
  transition: none;
}

.floating-panel--resizing {
  transition: none;
}

/*
 * Float-over-narrative drag affordance (#3903 Phase 5 follow-up).
 * Body-level toggle from floating_panel_controller#startDrag/#stopDrag.
 * Soft-blurs the docked split-panels behind the dragging floater so the
 * user can visually confirm "this is hovering over the layout" without us
 * having to draw an explicit drop region. Reduced-motion users skip the
 * blur entirely (no animation, no perceptual cost worth the GPU spend).
 */
body.floating-panel-dragging .split-panel--left,
body.floating-panel-dragging .split-panel--right {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: backdrop-filter 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body.floating-panel-dragging .split-panel--left,
  body.floating-panel-dragging .split-panel--right {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
}

.floating-panel--snap-preview {
  background: var(--color-accent-primary);
  opacity: 0.2;
  pointer-events: none;
}

/* Entrance animation */
@keyframes floating-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.floating-panel--entering {
  animation: floating-panel-enter 0.2s ease-out;
}

/* Exit animation */
@keyframes floating-panel-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.floating-panel--exiting {
  animation: floating-panel-exit 0.15s ease-in;
  pointer-events: none;
}

/* Minimize animation */
@keyframes floating-panel-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
}

.floating-panel--minimizing {
  animation: floating-panel-minimize 0.2s ease-in forwards;
}

/* ========================================
 * TOOLTIP (for panel messages)
 * ======================================== */

.floating-panel__tooltip {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  z-index: var(--z-floating-above);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

/* ========================================
 * MOBILE: DISABLE FLOATING PANELS
 * ======================================== */

/* Mobile breakpoint — synced with lib/breakpoints.js */
@media (max-width: 767px) {
  .floating-panel,
  .floating-dock,
  .floating-panels-container {
    display: none;
  }
}

/* ========================================
 * POP-OUT BUTTON IN SPLIT PANELS
 * ======================================== */

.panel-header__btn--popout {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.split-panel:hover .panel-header__btn--popout {
  opacity: 1;
}

.panel-header__btn--popout:hover {
  color: var(--color-accent-primary);
}

/* ========================================
 * SNAP-TO-EDGE
 * ======================================== */

/* Snap preview overlay */
.floating-panel__snap-preview {
  position: fixed;
  display: none;
  background: rgba(139, 92, 246, 0.15);
  border: 2px dashed rgba(139, 92, 246, 0.6);
  border-radius: var(--panel-border-radius, 8px);
  pointer-events: none;
  z-index: var(--z-curtain);
  animation: snap-preview-pulse 1s ease-in-out infinite;
}

@keyframes snap-preview-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.005);
  }
}

/* Snap preview edge highlights */
.floating-panel__snap-preview[data-edge*="left"] {
  border-left-width: 4px;
  border-left-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="right"] {
  border-right-width: 4px;
  border-right-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="top"] {
  border-top-width: 4px;
  border-top-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="bottom"] {
  border-bottom-width: 4px;
  border-bottom-color: var(--color-accent-primary, #8b5cf6);
}

/* Snapping animation */
.floating-panel--snapping {
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

/* Visual feedback when near snap zone */
.floating-panel--dragging {
  opacity: 0.9;
}

/* ========================================
 * DOCK PREVIEW OVERLAY
 * Shows where panel will dock on drop
 * ======================================== */

/* Dock preview overlay (covers half the screen) */
.floating-panel__dock-preview {
  position: fixed;
  display: none;
  background: linear-gradient(
    to bottom,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(59, 130, 246, 0.15) 50%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border: 2px dashed rgba(59, 130, 246, 0.5);
  pointer-events: none;
  z-index: var(--z-curtain);
  animation: dock-preview-pulse 1.2s ease-in-out infinite;
}

@keyframes dock-preview-pulse {
  0%, 100% {
    opacity: 0.7;
    border-color: rgba(59, 130, 246, 0.5);
  }
  50% {
    opacity: 1;
    border-color: rgba(59, 130, 246, 0.8);
  }
}

/* Left dock zone styling */
.floating-panel__dock-preview[data-zone="left"] {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--color-accent-primary, #3b82f6);
  border-right: none;
  border-radius: 0 12px 12px 0;
}

/* Right dock zone styling */
.floating-panel__dock-preview[data-zone="right"] {
  border-right-width: 4px;
  border-right-style: solid;
  border-right-color: var(--color-accent-primary, #3b82f6);
  border-left: none;
  border-radius: 12px 0 0 12px;
}

/* Dock zone indicator icon (arrow pointing to edge) */
.floating-panel__dock-preview::after {
  content: "⬇";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: rgba(59, 130, 246, 0.8);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.floating-panel__dock-preview[data-zone="left"]::after {
  content: "◀";
  left: 20px;
}

.floating-panel__dock-preview[data-zone="right"]::after {
  content: "▶";
  right: 20px;
}

/**
 * Floating Panel — Dock Preview Overlays, Ghost Panels & Mobile HUD
 */

/* ========================================
 * DOCK PREVIEW OVERLAY (edge-triggered, 120px)
 * Lightweight side-strip shown when dragging within threshold of left/right edge.
 * Complements the broader .floating-panel__dock-preview used for half-screen docking.
 * ======================================== */

.dock-preview-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  background: rgba(var(--accent-color-rgb, 100, 150, 255), 0.15);
  border: 2px dashed rgba(var(--accent-color-rgb, 100, 150, 255), 0.5);
  pointer-events: none;
  z-index: var(--z-ceiling);
  transition: opacity 0.15s ease;
}

.dock-preview-overlay--left { left: 0; }
.dock-preview-overlay--right { right: 0; }

/* ========================================
 * GHOST/TRANSPARENT PANELS
 * Variable opacity with hover substantiation
 * ======================================== */

/* Base ghost mode */
.floating-panel--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);
}

/* Ghost level: Ethereal (most transparent) */
.floating-panel--ghost.floating-panel--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);
}

.floating-panel--ghost.floating-panel--ghost-ethereal:hover {
  opacity: calc(var(--ghost-opacity-ethereal) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Wisp */
.floating-panel--ghost.floating-panel--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);
}

.floating-panel--ghost.floating-panel--ghost-wisp:hover {
  opacity: calc(var(--ghost-opacity-wisp) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Shade (default) */
.floating-panel--ghost.floating-panel--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);
}

.floating-panel--ghost.floating-panel--ghost-shade:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Phantom (nearly solid) */
.floating-panel--ghost.floating-panel--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);
}

.floating-panel--ghost.floating-panel--ghost-phantom:hover {
  opacity: calc(var(--ghost-opacity-phantom) + var(--ghost-hover-opacity-boost));
}

/* Ghost text styling for readability */
.floating-panel--ghost .floating-panel__title,
.floating-panel--ghost .floating-panel__content {
  text-shadow: var(--ghost-text-shadow);
}

/* Ghost header styling */
.floating-panel--ghost .floating-panel__header {
  background: rgba(45, 45, 45, 0.5);
  border-bottom-color: rgba(64, 64, 64, 0.5);
}

/* Ghost controls remain visible on hover */
.floating-panel--ghost .floating-panel__controls {
  opacity: 0.5;
  transition: opacity var(--ghost-transition);
}

.floating-panel--ghost:hover .floating-panel__controls {
  opacity: 1;
}

/* Ghost button in header */
.floating-panel__btn--ghost {
  position: relative;
}

.floating-panel__btn--ghost.active {
  color: var(--color-accent-cyan);
}

/* Ghost level indicator badge */
.floating-panel__btn--ghost::after {
  content: attr(data-ghost-level);
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--ghost-transition);
}

.floating-panel__btn--ghost.active::after {
  opacity: 1;
}

/* High contrast mode: disable transparency */
@media (prefers-contrast: high) {
  .floating-panel--ghost,
  .floating-panel--ghost.floating-panel--ghost-ethereal,
  .floating-panel--ghost.floating-panel--ghost-wisp,
  .floating-panel--ghost.floating-panel--ghost-shade,
  .floating-panel--ghost.floating-panel--ghost-phantom {
    opacity: 1;
    background: var(--color-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .floating-panel--ghost:hover {
    opacity: 1;
  }
}

/* Reduced motion: instant transitions */
@media (prefers-reduced-motion: reduce) {
  .floating-panel--ghost {
    transition: none;
  }

  .floating-panel--ghost .floating-panel__controls {
    transition: none;
  }

  .floating-dock {
    animation: none;
  }
}

/* ==========================================================================
   Mobile-HUD overlay row (#3721)
   ==========================================================================
   In mobile mode, floating-panel elements whose registry entry sets
   `mobileAlwaysVisible: true` get the `.floating-panel--mobile-hud` class
   applied by `mobile_panel_controller#_tagFloatingPanelsForHud`. They are
   pinned in a compact always-visible row at the top of the viewport above
   the narrative scroll, instead of either (a) sitting as desktop-sized
   position:fixed overlays or (b) being hidden inside the bottom-sheet
   switcher.

   Affected panels (5): turn_status_banner, combat_round_log, equipment_cart,
   location_list, portrait_generator.

   Outside mobile mode (>=768px) `.floating-panel--mobile-hud` has no
   effect — desktop layout is preserved.
   ========================================================================== */
@media (max-width: 767px) {
  .floating-panel.floating-panel--mobile-hud {
    /* Override the desktop position the floating_manager wrote inline,
       and pin to the top of the viewport. CSS specificity (0,2,1) plus
       `!important` is needed because floating_manager sets `top`/`left`
       as inline styles via the position value. */
    position: fixed !important;
    top: env(safe-area-inset-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* Compact: well under the 60px cap from the task constraints. */
    max-height: 56px;
    min-height: 0;
    min-width: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: var(--z-floating-above, var(--z-floating));
    overflow: hidden;
  }

  /* Compress header chrome — drag handle / resize / dropdown are not
     useful for a HUD row and would push the content out of view. */
  .floating-panel.floating-panel--mobile-hud .floating-panel__header {
    padding: 2px var(--space-2);
    min-height: 0;
    cursor: default;
    border-bottom: 1px solid var(--color-border-primary);
  }

  .floating-panel.floating-panel--mobile-hud .floating-panel__resize {
    display: none;
  }

  .floating-panel.floating-panel--mobile-hud .floating-panel__content {
    padding: 0 var(--space-2);
    overflow: hidden auto;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.3;
  }

  /* When several HUD panels are present, stack them vertically up to the
     56px cap each — viewport-fixed positioning means they would otherwise
     overlap. The narrative scroll area below should already account for
     mobile chrome via existing rules in mobile_enhancements.css; we don't
     need an offset here because each HUD panel sets its own `top`. */
  .floating-panel.floating-panel--mobile-hud:nth-of-type(2) {
    top: calc(env(safe-area-inset-top, 0) + 56px) !important;
  }

  .floating-panel.floating-panel--mobile-hud:nth-of-type(3) {
    top: calc(env(safe-area-inset-top, 0) + 112px) !important;
  }
}

/* ==========================================================================
   Pop-out CTA hint (#2671)
   Inline panel partials end with a "Pop out for full X management" hint
   div to advertise the pop-out affordance. When a panel is popped out via
   handleInlinePanelPopout (app/javascript/lib/narrative/inline_panel_renderer.ts),
   the inline panel's innerHTML is copied verbatim into `.floating-panel` —
   so the pop-out CTA travels along and appears circularly in the popped view.
   Each CTA carries a shared marker class `inline-panel__popout-hint` (added
   to 6 inline partials: party, equipment, inventory, quests, combat_tracker,
   character_sheet). Hide it whenever it appears inside a floating panel.
   ========================================================================== */
.floating-panel .inline-panel__popout-hint,
.floating-panel__content .inline-panel__popout-hint {
  display: none;
}
/**
 * Floating Panel System — Import Hub
 * =====================================
 * Styles for draggable, resizable floating panel windows.
 *
 * Decomposed into focused files under floating_panel/ for maintainability.



 */
/**
 * Status Panels — Base Styles
 * =============================
 * Workshop, DM tools, campaign creator status panels.
 */

/* ============================================
 * Status Panels (Chat-Driven Sidebar)
 * ============================================
 * Minimal status panels for workshop, DM tools, and campaign creator.
 * All real work happens via chat - these just show status and quick actions.
 */

/* Shared Panel Styles */
.panel-workshop-status,
.panel-dm-status,
.panel-campaign-status {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* Header */
.status-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

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

.status-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

/* Body */
.status-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.status-section {
  margin-bottom: var(--space-4);
}

.status-section:last-child {
  margin-bottom: 0;
}

.status-section .section-heading {
  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: 0 0 var(--space-2) 0;
}

/* Primary section (drafts) - more prominent styling */
.status-section--primary {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border-left: 3px solid var(--color-accent-primary);
}

.status-section--primary .section-heading {
  color: var(--color-accent-primary);
}

/* Quick Prompt Buttons */
.quick-prompt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quick-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  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;
}

.quick-prompt-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.quick-prompt-btn.full-width {
  width: 100%;
  justify-content: center;
}

.quick-prompt-btn .btn--icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

/* Browse Buttons */
.browse-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.browse-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.browse-btn:hover {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.browse-btn .btn--icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

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

/* Item List */
.item-list,
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row,
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.item-row:hover,
.member-row:hover {
  background: var(--color-bg-secondary);
}

.item-icon {
  font-size: var(--font-size-base);
}

.item-name,
.member-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Draft item styling */
.item-row--draft:hover {
  background: rgba(97, 175, 239, 0.1);
}

/* Metadata (time ago) */
.item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Compact list (for published items) */
.item-list--compact .item-row {
  padding: var(--space-1) var(--space-2);
}

.item-list--compact .item-name {
  font-size: var(--font-size-xs);
}

.member-role {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.member-role.role-dm {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.member-role.role-co_dm {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

/* Campaign Info */
.campaign-info {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.info-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.info-label {
  color: var(--color-text-muted);
}

.info-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Plan Card */
.plan-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.plan-card:hover {
  border-color: var(--color-accent-primary);
}

.plan-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.plan-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.plan-status.status-ready {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.plan-status.status-in_progress {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Invite Code */
.invite-code-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.invite-code {
  flex: 1;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  background: transparent;
  padding: 0;
}

.copy-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}

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

.copy-btn.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}

.invite-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0 0;
}

/* Friend invite suggestions — compact list below the invite code display.
   Only visible to the current user (own friend graph); server never leaks. */
.invite-friend-suggestions {
  margin-top: var(--space-2);
}

.invite-friend-suggestions__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1) 0;
  font-weight: 500;
}

.invite-friend-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.invite-friend-suggestions__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}

.invite-friend-suggestions__name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-friend-suggestions__copy-btn {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.invite-friend-suggestions__copy-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Browse Buttons */
.browse-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.browse-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  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-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

/* Empty State */
.status-panel .empty-state {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
  margin: 0;
}

/* Footer */
.status-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
/**
 * Status Panels — Game Time & Weather
 * =====================================
 * Game time panel, weather display, and seasonal indicators.
 */

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

.exit-btn .btn--icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

/* ============================================
 * Game Time Panel
 * ============================================
 * Displays in-game calendar, time of day, and season.
 */

.panel-game-time {
  font-family: var(--font-mono);
  background: var(--color-bg-panel);
}

/* Compact widget for status bar */
.game-time-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.game-time-compact:hover {
  background: var(--color-bg-tertiary);
}

.game-time-compact .time-icon {
  font-size: var(--font-size-base);
}

.game-time-compact .time-text,
.game-time-compact .date-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.game-time-compact .time-separator {
  color: var(--color-border);
}

/* Expanded panel view */
.game-time-expanded {
  padding: var(--space-3);
}

.game-time-expanded .time-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

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

.game-time-expanded .panel-icon {
  color: var(--color-accent-primary);
}

.game-time-expanded .collapse-btn {
  background: none;
  border: none;
  padding: var(--space-1);
  color: var(--color-text-muted);
  cursor: pointer;
}

.game-time-expanded .collapse-btn:hover {
  color: var(--color-text-primary);
}

/* Time Display */
.time-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

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

.time-icon--large {
  font-size: var(--font-size-2xl);
}

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

.time-clock {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Date Display */
.date-display {
  text-align: center;
  margin-bottom: var(--space-3);
}

.date-full {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.day-of-week {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Season Display */
.season-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.season-icon {
  font-size: var(--font-size-lg);
}

.season-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Lighting Conditions */
.lighting-display,
.shop-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
}

.lighting-label,
.shop-label {
  color: var(--color-text-muted);
}

.lighting-value--bright {
  color: #f59e0b;
}

.lighting-value--dim {
  color: #8b5cf6;
}

.lighting-value--dark {
  color: #6b7280;
}

.shop-value--open {
  color: #22c55e;
}

.shop-value--closed {
  color: #ef4444;
}

/* Time Actions */
.time-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.time-action-btn {
  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);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

/* Time update animation */
.panel-game-time.time-updated {
  animation: time-flash 0.5s ease;
}

@keyframes time-flash {
  0%, 100% {
    background-color: var(--color-bg-panel);
  }
  50% {
    background-color: rgba(97, 175, 239, 0.15);
  }
}

/* Time of day specific icon colors */
.time-icon--dawn { color: #f59e0b; }
.time-icon--morning { color: #fbbf24; }
.time-icon--midday { color: #f97316; }
.time-icon--noon { color: #f97316; }
.time-icon--afternoon { color: #fbbf24; }
.time-icon--dusk { color: #f472b6; }
.time-icon--evening { color: #8b5cf6; }
.time-icon--night { color: #6366f1; }
.time-icon--midnight { color: #4b5563; }

/* Season specific icon colors */
.season-icon--spring { color: #f472b6; }
.season-icon--summer { color: #fbbf24; }
.season-icon--autumn { color: #f97316; }
.season-icon--fall { color: #f97316; }
.season-icon--winter { color: #60a5fa; }

/* ============================================
 * Weather Display (Task #326)
 * ============================================
 * Shows current weather conditions in game time panel.
 */

/* Compact weather in status bar */
.game-time-compact .weather-icon {
  font-size: var(--font-size-base);
}

.game-time-compact .weather-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Expanded weather section */
.weather-display {
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  border-left: 3px solid var(--weather-accent, var(--color-border));
}

.weather-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.weather-icon--large {
  font-size: var(--font-size-2xl);
}

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

.weather-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--space-2);
}

.weather-effects {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

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

.weather-effects-list {
  margin: var(--space-1) 0 0 0;
  padding: 0;
  list-style: none;
}

.weather-effect {
  font-size: var(--font-size-xs);
  color: var(--color-accent-warning);
  padding: var(--space-1) 0;
}

.weather-effect::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.25em;
  background: var(--icon-warning) no-repeat center / contain;
}

/* Weather update animation */
.panel-game-time.weather-updated {
  animation: weather-flash 0.5s ease;
}

@keyframes weather-flash {
  0%, 100% {
    background-color: var(--color-bg-panel);
  }
  50% {
    background-color: rgba(139, 92, 246, 0.15);
  }
}

/* Weather-specific accent colors */
.weather-display--clear { --weather-accent: #fbbf24; }
.weather-display--partly_cloudy { --weather-accent: #9ca3af; }
.weather-display--overcast { --weather-accent: #6b7280; }
.weather-display--fog { --weather-accent: #9ca3af; }
.weather-display--light_rain { --weather-accent: #60a5fa; }
.weather-display--rain { --weather-accent: #3b82f6; }
.weather-display--heavy_rain { --weather-accent: #2563eb; }
.weather-display--thunderstorm { --weather-accent: #8b5cf6; }
.weather-display--light_snow { --weather-accent: #e5e7eb; }
.weather-display--snow { --weather-accent: #d1d5db; }
.weather-display--heavy_snow { --weather-accent: #9ca3af; }
.weather-display--blizzard { --weather-accent: #60a5fa; }
.weather-display--extreme_heat { --weather-accent: #ef4444; }
.weather-display--extreme_cold { --weather-accent: #06b6d4; }
.weather-display--strong_wind { --weather-accent: #6b7280; }
.weather-display--sandstorm { --weather-accent: #d97706; }

/* Weather icon colors */
.weather-icon--clear { color: #fbbf24; }
.weather-icon--partly_cloudy { color: #9ca3af; }
.weather-icon--overcast { color: #6b7280; }
.weather-icon--fog { color: #9ca3af; }
.weather-icon--light_rain { color: #60a5fa; }
.weather-icon--rain { color: #3b82f6; }
.weather-icon--heavy_rain { color: #2563eb; }
.weather-icon--thunderstorm { color: #8b5cf6; }
.weather-icon--light_snow { color: #e5e7eb; }
.weather-icon--snow { color: #d1d5db; }
.weather-icon--heavy_snow { color: #9ca3af; }
.weather-icon--blizzard { color: #60a5fa; }
.weather-icon--extreme_heat { color: #ef4444; }
.weather-icon--extreme_cold { color: #06b6d4; }
.weather-icon--strong_wind { color: #6b7280; }
.weather-icon--sandstorm { color: #d97706; }
/**
 * Status Panels — Import Hub
 * ============================
 * Minimal status panels for workshop, DM tools, campaign creator,
 * game time, and weather display.
 *
 * Decomposed into focused files under status_panels/ for maintainability.


 */
/* ============================================
 * Verification HUD (Tier 2 Ground-Truth)
 * ============================================
 * Dense tabular display of DB/audit-log state.
 * Shows per-turn: intent, tools fired, cost, gap incidents.
 * Scoped: .verification-hud
 */

.verification-hud {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow: hidden;
}

.verification-hud--hidden .verification-hud__content {
  display: none;
}

.verification-hud--disconnected {
  opacity: 0.5;
}

/* Header */
.verification-hud__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.verification-hud__title {
  color: var(--color-accent-primary);
  font-weight: 600;
  white-space: nowrap;
}

.verification-hud__subtitle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xxs, 0.65rem);
  white-space: nowrap;
}

.verification-hud__cost-summary {
  margin-left: auto;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xxs, 0.65rem);
  white-space: nowrap;
}

.verification-hud__toggle {
  padding: 2px var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xxs, 0.65rem);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.verification-hud__toggle:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-muted);
}

/* Content area */
.verification-hud__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-1);
}

.verification-hud__empty {
  padding: var(--space-4);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Turn rows */
.verification-hud__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 40%, transparent);
  flex-wrap: wrap;
}

.verification-hud__row:hover {
  background: var(--color-bg-tertiary);
}

.verification-hud__time {
  color: var(--color-text-muted);
  font-size: var(--font-size-xxs, 0.65rem);
  min-width: 60px;
  flex-shrink: 0;
}

/* Badges */
.verification-hud__badge {
  display: inline-block;
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xxs, 0.65rem);
  white-space: nowrap;
}

.verification-hud__badge--intent {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  color: var(--color-accent-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.verification-hud__badge--none {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Tool chips */
.verification-hud__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.verification-hud__tool {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: 2px;
  font-size: var(--font-size-xxs, 0.65rem);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.verification-hud__tool--executed {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.verification-hud__tool--failed {
  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
  color: var(--color-danger);
}

.verification-hud__tool--unknown {
  background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
  color: var(--color-text-muted);
}

.verification-hud__muted {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-xxs, 0.65rem);
}

/* Cost display */
.verification-hud__cost {
  color: var(--color-warning);
  font-size: var(--font-size-xxs, 0.65rem);
  white-space: nowrap;
  margin-left: auto;
}

/* Gap indicator */
.verification-hud__gap {
  display: inline-block;
  padding: 0 var(--space-1);
  background: color-mix(in srgb, var(--color-danger) 20%, transparent);
  color: var(--color-danger);
  border-radius: 2px;
  font-size: var(--font-size-xxs, 0.65rem);
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* Suggested Cards - Context-Aware Card Suggestions
 * =================================================
 * Styles for displaying suggested adventure cards to DMs.
 */

.suggested-cards {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #a78bfa; /* Purple for suggestions */
  border-radius: var(--radius-md);
}

.suggested-cards__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.suggested-cards__icon {
  font-size: var(--font-size-lg);
}

.suggested-cards__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #a78bfa;
}

.suggested-cards__context {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Card grid */
.suggested-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.suggested-cards__empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  padding: var(--spacing-md);
}

/* Mini card */
.suggested-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.suggested-card:hover {
  border-color: var(--border-default);
  background: var(--surface-tertiary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.suggested-card:active {
  cursor: grabbing;
}

/* Rarity borders */
.suggested-card--common {
  border-left: 3px solid var(--text-muted);
}

.suggested-card--uncommon {
  border-left: 3px solid #4ade80;
}

.suggested-card--rare {
  border-left: 3px solid #60a5fa;
}

.suggested-card--legendary {
  border-left: 3px solid #f59e0b;
  background: linear-gradient(135deg, var(--surface-secondary) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.suggested-card__icon {
  font-size: var(--font-size-lg);
}

.suggested-card__title {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggested-card__play {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
  background: #a78bfa;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--surface-primary);
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.suggested-card__play:hover {
  background: #8b5cf6;
}

/* Footer with deck state */
.suggested-cards__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.suggested-cards__deck-info {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.suggested-cards__draw {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.suggested-cards__draw:hover {
  background: var(--surface-tertiary);
  color: var(--text-primary);
  border-color: var(--border-default);
}

/* Responsive */
@media (max-width: 600px) {
  .suggested-cards__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .suggested-cards__footer {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .suggested-cards__draw {
    width: 100%;
  }
}
/* Achievement Cards Display
 * =========================
 * Shows player achievements as clickable cards in the narrative area.
 * Cards open a modal with full achievement details.
 */

/* Container */
.achievement-cards-container {
  margin: var(--space-3) 0;
  animation: achievementFadeIn 0.3s ease-out;
}

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

.achievement-cards {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Header */
.achievement-cards__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
}

.achievement-cards__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold);
}

.achievement-cards__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.achievement-cards__close:hover {
  color: var(--color-text-primary);
}

/* Progress Bar */
.achievement-cards__progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.achievement-cards__progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.achievement-cards__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-light, #fcd34d));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal) ease-out;
}

.achievement-cards__progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Grid */
.achievement-cards__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  padding: var(--space-4);
}

.achievement-cards__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Individual Achievement Card */
.achievement-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  text-align: center;
  width: 100%;
}

.achievement-card:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--overlay-gold-light, rgba(251, 191, 36, 0.2));
}

.achievement-card:focus {
  outline: none;
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 3px var(--overlay-gold-medium, rgba(251, 191, 36, 0.3));
}

.achievement-card__icon {
  font-size: 2.5rem;
  line-height: 1;
}

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

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

.achievement-card__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.achievement-card__unlocked {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Category-specific styling */
.achievement-card--combat {
  border-color: var(--color-combat-subtle, rgba(239, 68, 68, 0.3));
}

.achievement-card--combat:hover {
  border-color: var(--color-combat-medium, rgba(239, 68, 68, 0.7));
  box-shadow: 0 4px 12px var(--overlay-combat-light, rgba(239, 68, 68, 0.2));
}

.achievement-card--exploration {
  border-color: var(--color-exploration-subtle, rgba(34, 197, 94, 0.3));
}

.achievement-card--exploration:hover {
  border-color: var(--color-exploration-medium, rgba(34, 197, 94, 0.7));
  box-shadow: 0 4px 12px var(--overlay-exploration-light, rgba(34, 197, 94, 0.2));
}

.achievement-card--social {
  border-color: var(--color-social-subtle, rgba(168, 85, 247, 0.3));
}

.achievement-card--social:hover {
  border-color: var(--color-social-medium, rgba(168, 85, 247, 0.7));
  box-shadow: 0 4px 12px var(--overlay-social-light, rgba(168, 85, 247, 0.2));
}

.achievement-card--milestone {
  border-color: var(--color-milestone-subtle, rgba(59, 130, 246, 0.3));
}

.achievement-card--milestone:hover {
  border-color: var(--color-milestone-medium, rgba(59, 130, 246, 0.7));
  box-shadow: 0 4px 12px var(--overlay-milestone-light, rgba(59, 130, 246, 0.2));
}

/* Achievement Modal Overlay */
.achievement-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-dark, rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sky);
  animation: achievementOverlayFadeIn 0.2s ease-out;
}

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

/* Achievement Modal */
.achievement-modal {
  position: relative;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-accent-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: achievementModalSlideIn 0.3s ease-out;
  box-shadow: 0 0 40px var(--overlay-gold-medium, rgba(251, 191, 36, 0.3)),
              0 0 80px var(--overlay-gold-subtle, rgba(251, 191, 36, 0.1));
}

@keyframes achievementModalSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.achievement-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.achievement-modal__close:hover {
  color: var(--color-text-primary);
}

.achievement-modal__icon {
  font-size: 4rem;
  margin-bottom: var(--space-3);
  animation: achievementIconBounce 0.5s ease-out;
}

@keyframes achievementIconBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.achievement-modal__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-gold);
  margin: 0 0 var(--space-2) 0;
}

.achievement-modal__category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.achievement-modal__description {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
  line-height: 1.6;
}

.achievement-modal__unlocked {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

/* Responsive */
@media (max-width: 640px) {
  .achievement-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .achievement-card {
    padding: var(--space-2);
  }

  .achievement-card__icon {
    font-size: 2rem;
  }

  .achievement-card__name {
    font-size: var(--font-size-xs);
  }

  .achievement-modal {
    padding: var(--space-4);
  }

  .achievement-modal__icon {
    font-size: 3rem;
  }
}
/*
 * Terminal D&D - Core Bundled Stylesheet (Part 1 of 2)
 * =====================================================
 * Core styles loaded on every terminal page. Split into two files
 * (terminal.css + terminal_2.css) to stay under Chromium's ~3MB
 * per-stylesheet rule-application limit (#5515).
 *
 * 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
 *
 * Lazy-loaded bundles (see assets.rb precompile):
 *   vtt.css            Virtual Tabletop styles
 *   creator_studio.css  Creator Studio / content authoring
 *   dm_tools.css        DM control panel, workspace, session tools
 *   debug.css           Debug panel and debug channels
 *   shells/*.css        Shell theme overrides (dos386, tubes, etc.)
 *
 * Order matters! Loaded in cascade order:
 *  1. Design tokens    2. Base/foundation    3. Typography
 *  4. Atoms            5. Molecules          6. Layout
 *  7. Organisms (pt1)  ← terminal.css ends here
 *  7. Organisms (pt2)  8. Panels             9. Components
 * 10. Terminal layout (must be last — in terminal_2.css)
 */

/* ===========================================
 * 1. DESIGN TOKENS
 * =========================================== */





/* ===========================================
 * 2. BASE / FOUNDATION
 * =========================================== */









/* ===========================================
 * 3. TYPOGRAPHY & THEMING
 * =========================================== */




/* ===========================================
 * 4. ATOMS
 * =========================================== */















/* ===========================================
 * 5. MOLECULES
 * =========================================== */





/* ===========================================
 * 6. LAYOUT
 * =========================================== */









/* ===========================================
 * 7. ORGANISMS (Complex Components)
 * Lazy-loaded organisms are in separate bundles:
 *   creator_studio.css, dm_tools.css, debug.css, vtt.css
 * =========================================== */










































































/* Continued in terminal_2.css (Part 2 of 2): character_sheet → panels → components → layout */