/*
 * Terminal D&D Design Tokens
 * ================================
 * Single source of truth for all design variables.
 * Import this file first in any terminal-related stylesheet.
 */

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

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

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

  /* ========================================
   * TYPOGRAPHY
   * ======================================== */

  /* Font Families */
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  --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 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-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 */

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

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

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

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

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


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


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

/* ========================================
 * 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
 * Compact single-line bar (28px) to maximize narrative space.
 * Shows: character name/avatar + HP pill (+ location on tablets).
 * ======================================== */

@media (max-width: 768px) {
  /* Compact status bar — 28px single line for max narrative space */
  .status-bar {
    padding: 2px 8px;
    padding-top: 2px;
    padding-top: env(safe-area-inset-top, 2px);
    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: 28px;
    min-height: 28px;
    overflow: hidden;
    flex-wrap: nowrap;
  }

  /* Breadcrumb segments: minimal padding for 28px bar */
  .status-bar .breadcrumb__segment {
    padding: 1px 6px;
    font-size: var(--font-size-xs);
    gap: 3px;
  }

  /* Smaller avatar to fit 28px bar */
  .status-bar .breadcrumb__avatar,
  .status-bar .breadcrumb__avatar--placeholder {
    width: 16px;
    height: 16px;
    font-size: 9px;
  }

  /* Breadcrumb icons: shrink */
  .status-bar .breadcrumb__icon {
    font-size: var(--font-size-xs);
  }

  .status-bar .breadcrumb__icon .svg-icon {
    width: 12px;
    height: 12px;
  }

  /* 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.
     NOTE: .token-status is kept visible — it shows guest users their
     remaining token budget, which is a critical constraint they need
     to see while playing. */
  .status-bar .session-clock,
  .status-bar .spectator-indicator__label,
  .status-bar .lock-status {
    display: none;
  }

  /* Compact token status for 28px mobile bar */
  .status-bar .token-status {
    padding: 1px 4px;
    font-size: 10px;
    gap: 2px;
    height: 20px;
    line-height: 1;
    border-radius: var(--radius-pill, 12px);
  }

  .status-bar .token-status .token-icon .svg-icon {
    width: 12px;
    height: 12px;
  }

  .status-bar .token-status .token-count {
    font-size: 10px;
  }

  /* Toolbar icon buttons: smaller for 28px bar */
  .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: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 2px;
  }

  .status-bar .help-icon-btn .svg-icon,
  .status-bar .feedback-icon-btn .svg-icon,
  .status-bar .friends-icon-btn .svg-icon {
    width: 14px;
    height: 14px;
  }

  /* ---- 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: 1px 6px;
    font-size: 10px;
    gap: 2px;
    border-radius: var(--radius-pill, 12px);
    height: 20px;
    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;
  }
}

/* ========================================
 * 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: on mobile, make .narrative-main the scroll
 * container (overflow-y: auto) and pin .input-area
 * with position:sticky at the bottom. The narrative
 * content scrolls naturally while the input stays
 * visible. This replaces the desktop pattern where
 * .narrative-output is the sole scroll container.
 * ======================================== */

@media (max-width: 768px) {
  /* Make narrative-main the scroll container on mobile.
     Desktop keeps overflow:hidden (set in _critical.css and _layout.css)
     because the narrative-output handles scrolling there. On mobile
     the extra flex children can overflow, so we let narrative-main scroll. */
  .narrative-main {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Sticky input bar — always pinned to the visible bottom of
     the scrollable .narrative-main container.
     position:sticky works here because narrative-main now has
     overflow-y:auto (sticky requires a scrolling ancestor). */
  .input-area {
    position: sticky;
    bottom: 0;
    z-index: var(--z-panel);
    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 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. The sticky position
     already pins it; reinforce z-index and background so it
     paints above scrolled content. The --mobile-keyboard-height
     var is set by MobileKeyboardManager.js when the virtual
     keyboard opens. */
  .mobile-keyboard-open .input-area {
    z-index: var(--z-panel);
    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 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 */
  .input-area .voice-mic-btn {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Map control buttons — add minimum touch dimensions */
  .map-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}
/**
 * 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;
}

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

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

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

/* ========================================
 * 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;
  }
}
/**
 * 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,
  .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 */
  .token-status.milestone-silver,
  .token-status.milestone-gold,
  .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 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;
}

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

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

.passive-check-indicator {
  color: var(--color-text-secondary, #a0a0a0);
  margin-right: var(--spacing-xs, 4px);
}
/* ==========================================================================
 * 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 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;
  }
}

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

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

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

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

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

/* Stack vertically on small screens */
@media (max-width: 767px) {
  .postit-group {
    flex-direction: column;
    align-items: center;
  }

  /* On mobile, stack postits along the right edge instead of scattering */
  .postit-group--floating .postit {
    width: 140px;
    padding: 10px 10px 8px;
    left: auto !important;
    right: 4px !important;
  }

  .postit-group--floating .postit:nth-child(1) { top: 6% !important; bottom: auto !important; }
  .postit-group--floating .postit:nth-child(2) { top: 20% !important; bottom: auto !important; }
  .postit-group--floating .postit:nth-child(3) { top: 34% !important; bottom: auto !important; }
  .postit-group--floating .postit:nth-child(4) { top: 48% !important; bottom: auto !important; }
  .postit-group--floating .postit:nth-child(5) { top: 62% !important; bottom: auto !important; }
  .postit-group--floating .postit:nth-child(6) { top: 76% !important; bottom: auto !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);
}
/*
 * 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: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.15) 0%,
    rgba(245, 158, 11, 0.1) 100%
  );
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-gold, #fbbf24);
  animation: queuePulse 2s ease-in-out infinite;
}

.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.8;
    border-color: rgba(251, 191, 36, 0.3);
  }
  50% {
    opacity: 1;
    border-color: rgba(251, 191, 36, 0.5);
  }
}

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

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

/* ========================================
 * 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;
  }
}
/**
 * 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 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 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;
}
/*
 * 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;
  }
}
/*
 * 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 breakpoint (1024px) */
@media (max-width: 1023px) {
  .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) */
@media (min-width: 1024px) {
  .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: single panel view with bottom sheet.
   Synced with mobile-panel controller breakpoint (1024px). */
@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
 * Split Panel Layout (Narrative Left + Banner/Wizard Right)
 * ======================================== */

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

/* Mobile + Tablet: Narrative-only mode, right panels hidden.
   Creation cards appear inline in narrative. Right side (character sheet,
   creation reference, stale banner) just duplicates content at this width.
   Synced with mobile-panel controller breakpoint (1024px). */
@media (max-width: 1023px) {
  .character-creation-layout .lobby-split-container {
    flex-direction: column;
    flex: 1;
    height: 100%;
  }

  .character-creation-layout .lobby-column-divider {
    display: none;
  }

  /* Narrative (left panel) always visible on mobile/tablet — 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;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  /* Hide right panels — they duplicate narrative content on mobile/tablet */
  .character-creation-layout .lobby-right-panels {
    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);
}

/* ========================================
 * 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 (1023px).
 * ======================================== */

@media (max-width: 1023px) {
  /* 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;
  }

  /* On tablet, stack vertically; sidebar fills width */
  .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 */
  .lobby-narrative-layout .lobby-campaigns-sidebar.lobby-sidebar--open,
  .lobby-with-banner .lobby-campaigns-sidebar.lobby-sidebar--open {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    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;
  }

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

/* ========================================
 * Mobile Base (Default — No Media Query)
 * Single column, narrative-first layout.
 * ======================================== */

.mobile-first-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;              /* Fallback for older browsers */
  height: 100dvh;             /* Dynamic viewport height — accounts for mobile address bar */
  overflow: hidden;
}

/* Narrative region: fills available space, scrollable */
.mobile-first-layout__narrative {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Input region: pinned to bottom, never scrolls off-screen */
.mobile-first-layout__input {
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  /* Safe area: respect home indicator on notched devices */
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}

/* Panels region: hidden on mobile — opened as bottom-sheet overlays via JS */
.mobile-first-layout__panels {
  display: none;
}

/* Status bar region: thin single line on mobile */
.mobile-first-layout__status {
  flex-shrink: 0;
}

/* ========================================
 * Safe Area Handling
 * Notched/rounded-corner devices (iPhone X+, Pixel, etc.)
 * ======================================== */

.mobile-first-layout {
  /* Left/right safe areas for landscape orientation */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ========================================
 * Tablet: Two-Column Layout (min-width: 768px)
 * Narrative + side panels in a grid.
 * ======================================== */

@media (min-width: 768px) {
  .mobile-first-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    grid-template-rows: auto 1fr auto;
    /* grid-template-areas provides clear slot naming:
       "status  status"
       "narr    panels"
       "input   panels"
    */
    grid-template-areas:
      "status  status"
      "narr    panels"
      "input   panels";
  }

  .mobile-first-layout__status {
    grid-area: status;
  }

  .mobile-first-layout__narrative {
    grid-area: narr;
    /* Reset mobile touch scrolling for desktop mice */
    -webkit-overflow-scrolling: auto;
  }

  .mobile-first-layout__input {
    grid-area: input;
    /* Reset safe area — not needed on tablet when not full-bleed */
    padding-bottom: var(--space-2);
  }

  .mobile-first-layout__panels {
    display: flex;
    flex-direction: column;
    grid-area: panels;
    overflow-y: auto;
    min-height: 0;
    border-left: 1px solid var(--color-border-subtle);
  }
}

/* ========================================
 * Desktop: Wider Panels (min-width: 1024px)
 * ======================================== */

@media (min-width: 1024px) {
  .mobile-first-layout {
    grid-template-columns: 1fr 380px;
  }
}

/* ========================================
 * Wide: Max Width + Centered (min-width: 1440px)
 * ======================================== */

@media (min-width: 1440px) {
  .mobile-first-layout {
    grid-template-columns: 1fr 440px;
    max-width: 1600px;
    margin: 0 auto;
  }
}

/* ========================================
 * 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 .mobile-first-layout class is an ADDITIONAL option that views
 * can adopt incrementally.
 *
 * 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;
}

/* 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
   position:sticky on .input-area works (sticky requires a scrolling
   ancestor, not overflow:hidden). 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 bottom, never pushed off-screen.
   Mobile uses position:sticky so the input stays visible even when
   intermediate flex children (ambient gutter, world ticker, etc.)
   would otherwise push it below the overflow boundary.
   Desktop uses position:relative (restored in the min-width:768px block). */
.grid-layout-wrapper.mf-layout .input-area {
  flex-shrink: 0;
  flex-grow: 0;
  position: sticky;
  bottom: 0;
  z-index: var(--z-panel);
  width: 100%;
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}

/* 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 for sticky input) */
    -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 (sticky only needed on mobile) */
    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.
 * ======================================== */

/* --- Tablet+: reset narrative to block flow --- */
@media (min-width: 768px) {
  .mobile-first-layout__narrative .narrative-output {
    display: block;
  }
}

/* ========================================
 * 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) {
  .mobile-first-layout,
  .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 */
@media (max-width: 700px) {
  .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
 * ======================
 * 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
 * ======================================== */

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

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

/* Protected panel indicator */
.split-panel--protected .split-panel__header {
  border-left: 2px solid var(--color-accent-warning, #f59e0b);
}

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

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

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

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

/* Common (default) */
.inventory__item[data-rarity="common"] {
  border-left: 3px solid var(--color-text-muted);
}

.inventory__item[data-rarity="common"]:hover {
  border-color: var(--color-text-secondary);
  border-left-color: var(--color-text-secondary);
}

/* Uncommon */
.inventory__item[data-rarity="uncommon"] {
  border-left: 3px solid var(--color-accent-secondary);
}

.inventory__item[data-rarity="uncommon"]:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--shadow-glow-success);
}

/* Rare */
.inventory__item[data-rarity="rare"] {
  border-left: 3px solid var(--color-accent-primary);
}

.inventory__item[data-rarity="rare"]:hover {
  border-color: var(--color-accent-primary);
  box-shadow: var(--shadow-glow);
}

/* Very Rare */
.inventory__item[data-rarity="very_rare"],
.inventory__item[data-rarity="very-rare"] {
  border-left: 3px solid var(--color-accent-purple);
}

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

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

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

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

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

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

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

.profile-world-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--profile-spacing-md);
}

.profile-world-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
  overflow: hidden;
  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-world-card:hover {
  border-color: var(--color-accent-purple);
  transform: translateY(-3px);
  box-shadow: var(--profile-card-shadow-hover);
}

.profile-world-card__header {
  padding: var(--profile-spacing-lg);
  background: linear-gradient(135deg, var(--color-bg-tertiary), var(--color-bg-elevated));
  border-bottom: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-world-card__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-purple);
  display: flex;
  align-items: center;
  gap: var(--profile-spacing-sm);
}

.profile-world-card__status {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

.profile-world-card__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-card__status--draft {
  background: rgba(229, 192, 123, 0.15);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.profile-world-card__body {
  padding: var(--profile-spacing-lg);
}

.profile-world-card__tagline {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin-bottom: var(--profile-spacing-sm);
}

.profile-world-card__description {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-bottom: var(--profile-spacing-md);
  line-height: 1.5;
}

.profile-world-card__lore-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--profile-spacing-xs);
}

.profile-world-card__lore-tag {
  font-size: 0.7rem;
  padding: 4px 10px;
  background: var(--color-bg-tertiary);
  border-radius: 20px;
  color: var(--color-text-muted);
}

.profile-world-card__lore-tag--campaign {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.profile-world-card__created {
  margin-top: var(--profile-spacing-md);
  padding-top: var(--profile-spacing-sm);
  border-top: 1px solid var(--color-border-default);
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

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

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

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

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

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

/* ==========================================
   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;
}
/**
 * Quest Log Panel
 * ===============
 * Displays character quests with status badges and progress.
 * Uses design tokens from: terminal/_tokens.css
 */

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

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

/* ========================================
 * 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 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;
  }
}
/* ========================================
 * 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 Organism
 * ===================
 * Top-level status display showing room, character, lock state, and session info.
 * Uses design tokens from: terminal/_tokens.css
 */

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

/* #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: collapse status zone */
@media (max-width: 640px) {
  .status-bar__zone--status {
    display: none;
  }
}

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

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

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

/* 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(-10px) scale(0.97);
  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) scale(1);
}

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

/* 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(-10px) scale(0.97);
  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) scale(1);
}

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

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

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

/* ========================================
 * 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);
  color: var(--color-text-secondary);
  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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  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);
}

.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,
.feedback-icon-btn:focus,
.panels-icon-btn:focus,
.hologram-toggle-btn:focus,
.xr-mode-btn:focus {
  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);
}

/* 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 Button */
.ghost-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  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);
}

.ghost-toggle-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.ghost-toggle-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.ghost-toggle-btn--active {
  background: rgba(90, 159, 216, 0.1);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.ghost-toggle-btn:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Ghost Level Overrides on Grid Container */
[data-ghost-level="ethereal"] .floating-panel {
  opacity: var(--ghost-opacity-ethereal);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="wisp"] .floating-panel {
  opacity: var(--ghost-opacity-wisp);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="shade"] .floating-panel {
  opacity: var(--ghost-opacity-shade);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="phantom"] .floating-panel {
  opacity: var(--ghost-opacity-phantom);
  transition: opacity var(--ghost-transition);
}

/* Ghost panels become solid on hover */
[data-ghost-level] .floating-panel:hover {
  opacity: 1;
  transition: opacity var(--ghost-transition);
}

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

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

/* 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 (Polish Priority 1.1)
 * Makes critical info (HP, character name) more scannable
 * ============================================ */

/* Enhanced character info container */
.status-bar .character-info {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-md);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.1);
}

/* Make character name more prominent */
.status-bar .character-name {
  font-size: var(--font-size-md);
  text-shadow: 0 0 6px rgba(124, 58, 237, 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;
}

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

/* ============================================
 * Token Status Enhancement (Polish Priority 1.4)
 * Styled like biosystems stat cells with milestone celebrations
 * ============================================ */

.token-status {
  display: flex;
  flex-direction: row;
  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);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  position: relative;
}

.token-status::after {
  content: '▾';
  font-size: 8px;
  opacity: 0.4;
  margin-left: 2px;
  transition: opacity var(--transition-fast);
}

.token-status:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.token-status:hover::after {
  opacity: 0.8;
}

.token-status:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.token-status:active {
  transform: scale(0.98);
}

.token-status .token-icon {
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.token-status .token-icon .svg-icon {
  width: 14px;
  height: 14px;
  color: var(--color-accent-secondary);
}

.token-status:hover .token-icon {
  transform: scale(1.1);
}

.token-status .token-count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
}

/* Milestone celebrations - progressive visual rewards
 * milestone-bronze: 10K-50K tokens
 * milestone-silver: 50K-100K tokens
 * milestone-gold: 100K+ tokens
 */
.token-status.milestone-bronze {
  border-color: rgba(205, 127, 50, 0.5);
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.25);
}

.token-status.milestone-bronze .token-count {
  color: #cd7f32; /* Bronze color */
}

.token-status.milestone-silver {
  border-color: rgba(192, 192, 192, 0.6);
  box-shadow: 0 0 12px rgba(192, 192, 192, 0.35);
  animation: token-milestone-glow 2s ease-in-out infinite;
}

.token-status.milestone-silver .token-count {
  color: #c0c0c0; /* Silver color */
  text-shadow: 0 0 6px rgba(192, 192, 192, 0.5);
}

.token-status.milestone-gold {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.4);
  animation: token-milestone-glow 1.5s ease-in-out infinite;
}

.token-status.milestone-gold .token-count {
  color: #ffd700; /* Gold color */
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
}

@keyframes token-milestone-glow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

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

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

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

/* ==================================================
   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 is kept visible — guest users need to see
     their remaining token budget while playing (#1286). */
  .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);
  }

  /* Token icon uses SVG, size via width/height */
  .token-status .token-icon .svg-icon {
    width: 14px;
    height: 14px;
  }

  /* 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 (Mobile Only)
 * ======================================== */

.focus-mode-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.focus-mode-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.focus-mode-toggle:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.focus-mode-toggle--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Show focus mode toggle on mobile/tablet */
@media (max-width: 768px) {
  .focus-mode-toggle {
    display: flex;
  }
}

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

/* ========================================
 * 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 Widget Container
 * Dynamic widgets registered by panels (e.g., combat turn indicator)
 * ======================================== */

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

/* ============================================================
   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 {
  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(-10px) scale(0.97);
  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);
  padding: var(--space-1) 0;
}

.panel-tab-dropdown__menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

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

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

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

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

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

.narrative-entry p {
  margin: 0 0 0.5rem;
}

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

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

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

/* 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 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: rgba(138, 43, 226, 0.1);
  color: #c084fc;
}

.narrative-entry.magic:hover {
  animation: magicShimmer 3s ease-in-out infinite;
}

/* ========================================
 * Entry Type: Lore/Description
 * ======================================== */

.narrative-entry.lore {
  background: rgba(70, 130, 180, 0.08);
  font-style: italic;
  color: #b8cde0;
}

/* ========================================
 * Entry Type: Player Chat
 * ======================================== */

.narrative-entry.player_chat,
.narrative-entry.player-chat {
  background: linear-gradient(135deg, rgba(106, 159, 181, 0.12), rgba(70, 130, 180, 0.08));
  border-left: 3px solid #6a9fb5;
  padding-left: var(--space-4);
  margin-left: var(--space-4);
  font-style: italic;
  color: #c8dce8;
}

.narrative-entry.player_chat:hover,
.narrative-entry.player-chat:hover {
  box-shadow: 0 2px 8px rgba(106, 159, 181, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.player-chat-sender {
  color: #6a9fb5;
  font-weight: bold;
  font-style: normal;
  margin-right: var(--space-2);
}

.lobby-chat-sender {
  color: #8ec07c;
  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: #c8dce8;
  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 rgba(106, 159, 181, 0.3);
  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: linear-gradient(135deg, rgba(147, 51, 234, 0.08), rgba(126, 34, 206, 0.05));
  border-left: 2px solid rgba(147, 51, 234, 0.4);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  opacity: 0.9;
}

.narrative-entry.character-thought .thought-text {
  color: #c4b5fd;
  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: rgba(251, 191, 36, 0.4);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.06), rgba(245, 158, 11, 0.03));
}

.narrative-entry.character-thought.thought-memory .thought-text {
  color: #fde68a;
}

.narrative-entry.character-thought.thought-situation {
  border-left-color: rgba(148, 163, 184, 0.4);
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.06), rgba(100, 116, 139, 0.03));
}

.narrative-entry.character-thought.thought-situation .thought-text {
  color: #cbd5e1;
}

.narrative-entry.character-thought.thought-suggestion {
  border-left-color: rgba(74, 222, 128, 0.4);
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), rgba(34, 197, 94, 0.03));
}

.narrative-entry.character-thought.thought-suggestion .thought-text {
  color: #86efac;
}

.narrative-entry.character-thought.thought-creation {
  border-left-color: rgba(34, 211, 238, 0.4);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(6, 182, 212, 0.03));
}

.narrative-entry.character-thought.thought-creation .thought-text {
  color: #67e8f9;
}

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

.confirmation-badge__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--accent-success, #4ade80);
  border-radius: 50%;
  color: var(--color-bg-primary, #1a1a2e);
  font-size: var(--font-size-xs);
  font-weight: 700;
}

.confirmation-badge__text {
  color: var(--color-text-secondary, #aaa);
}

.confirmation-badge__next {
  color: var(--color-text-muted, #888);
  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: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border: 2px solid #ef4444;
  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: #ef4444;
  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: #ef4444;
  border: none;
  border-radius: var(--radius-md);
  color: white;
  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: #dc2626;
}

.connection-lost-refresh:active {
  background: #b91c1c;
}

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

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

.narrative-entry.streaming[data-stream-complete="true"] .streaming-text::after {
  display: none;
}

@keyframes streaming-blink {
  50% { opacity: 0; }
}

/* ========================================
 * Streaming Enhanced Text Transition
 * ======================================== */

.narrative-entry.stream-enhancing {
  position: relative;
  overflow: hidden;
  opacity: 0.85;
  border-left: 2px solid var(--color-gold, #c8a45c);
}

.narrative-entry.stream-enhancing::after {
  content: 'Enhancing...';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  font-style: italic;
  color: var(--color-gold, #c8a45c);
  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(--panel-bg, rgba(0, 0, 0, 0.6));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-sm);
  color: var(--text-muted, #888);
  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(--accent-color, #4f46e5);
  background: var(--card-bg, rgba(255, 255, 255, 0.08));
  border-color: var(--accent-color, #4f46e5);
}

.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, #888);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color, #333);
}

.narrative-extract-panel__content {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary, #fff);
}

/* ========================================
 * 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, #3e4451);
  color: var(--color-text-muted, #5c6370);
  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, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.input-area .voice-mic-btn.voice-active {
  background: rgba(224, 108, 117, 0.15);
  border-color: var(--color-danger, #e06c75);
  color: var(--color-danger, #e06c75);
  animation: voice-pulse 1.5s ease-in-out infinite;
}

.input-area .voice-indicator {
  font-size: 11px;
  color: var(--color-danger, #e06c75);
  animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/*
 * 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);
}

@media (min-width: 769px) {
  .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);
}

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

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

.dm-responding-bar {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-3) var(--space-4);
  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);
  margin-bottom: var(--space-2);
  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;
}

.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) {
  .dm-responding-bar {
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
    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;
  }
}

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

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

/* ========================================
 * 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 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;
  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);
    min-height: 36px;
    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;
    min-height: 28px;
  }

  .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);
    min-height: 28px;
    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. */
  .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;
  }

}

/* ========================================
 * Bottom Sheet Mode - Input Z-Index
 * ======================================== */

@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .input-area {
    position: sticky;
    bottom: 0;
    z-index: var(--z-overlay);
    padding-bottom: var(--space-2);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

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

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

/* Horizontal tier tabs - top of narrative panel */
.channel-tier-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 0.25rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
  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 {
  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 */
.channel-tier-tab[data-tier="core"].channel-tab--active {
  --accent-color: #4ade80;
  --accent-bg: #0d2a1a;
}

.channel-tier-tab[data-tier="game"].channel-tab--active {
  --accent-color: #c084fc;
  --accent-bg: #1a0d2a;
}

.channel-tier-tab[data-tier="both"].channel-tab--active {
  --accent-color: #60a5fa;
  --accent-bg: #0d1a2a;
}

.channel-tier-tab--debug.channel-tab--active {
  --accent-color: #f97316;
  --accent-bg: #2a1a0d;
}

.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 */
.channel-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
  flex: 1;
}

/* 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 {
  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 */
.channel-tab[data-channel="adventure"].channel-tab--active {
  --accent-color: #4ade80; /* Green for adventure */
  --accent-bg: #0d2a1a;
}

.channel-tab[data-channel="ooc"].channel-tab--active {
  --accent-color: #60a5fa; /* Blue for OOC */
  --accent-bg: #0d1a2a;
}

.channel-tab[data-channel="dm"].channel-tab--active {
  --accent-color: #fbbf24; /* Gold for DM */
  --accent-bg: #2a2a0d;
}

.channel-tab[data-channel="creative"].channel-tab--active {
  --accent-color: #c084fc; /* Purple for Creative Spaces */
  --accent-bg: #1a0d2a;
}

/* Channel tab icon */
.channel-tab__icon {
  font-size: 1rem;
}

/* 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, #fbbf24);
  color: var(--dm-accent-color, #fbbf24);
}

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

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

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

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

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

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

/* AI Pane - uses assist_tab styles */
.dm-ai-pane-content .dm-assist-header h4 {
  color: var(--dm-accent-color, #fbbf24);
}

/* 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, #fbbf24);
  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%;
}

/* ========================================
 * 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;
  border-left: 3px solid var(--dm-accent-color, #fbbf24);
  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 */
.dm-pending-action-item--caution {
  border-left-color: var(--color-accent-warning);
}

.dm-pending-action-item--danger {
  border-left-color: var(--color-accent-error);
  background: rgba(239, 68, 68, 0.1);
}

.dm-pending-action-item--critical {
  border-left-color: #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);
  }
}

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

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

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

.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__more {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.inline-inventory__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

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

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

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

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

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

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

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

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

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

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

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

/* Portrait placeholder when no canvas */
.pixel-portrait:empty::before {
  content: '?';
  font-size: 14px;
  font-weight: 600;
  color: var(--npc-color, var(--retro-purple));
  opacity: 0.6;
}

.pixel-portrait--large:empty::before {
  font-size: 20px;
}

.pixel-portrait--small:empty::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;
  }
}
/* ==========================================================================
 * 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;
}

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

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

.choice-card__class {
  font-size: var(--font-size-sm);
  color: var(--accent-primary, #4a9eff);
}

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

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

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

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


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

.co-choice--pending {
  opacity: 0.7;
}

.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;
}
/* 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 */
.cp-trait, .cp-feature {
  margin-bottom: 6px;
}

.cp-trait-name, .cp-feature-name {
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
}

.cp-trait-desc {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
}

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

/* ============================================
   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 */
@media (max-width: 700px) {
  .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;
  }
}


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

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

/* 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: 640px) {
  .masonry-options {
    column-count: 1;
  }
}

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


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

/* ==========================================================================
 * 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 {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  white-space: nowrap;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.sp-tab-btn:hover {
  background: rgba(124, 58, 237, 0.1);
  color: var(--color-text-primary);
}

.sp-tab-btn.active {
  background: var(--color-accent-primary);
  color: white;
}

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

/* ========================================
   SPELL SELECTION UI STYLES
   ======================================== */

.spell-selection-panel {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.5);
  border-radius: var(--radius-lg);
  animation: slideIn var(--duration-normal) ease-out;
}

.spell-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
}

.spell-icon {
  font-size: var(--font-size-2xl);
}

.spell-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-count {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.3);
  font-size: var(--font-size-sm);
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

.spell-count.complete {
  background: rgba(34, 197, 94, 0.3);
  color: var(--color-success-fg);
}

.school-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-3);
}

.school-tab {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.school-tab:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--color-accent-purple);
}

.school-tab.active {
  background: rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
  color: var(--color-text-primary);
}

.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-1);
}

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

.spell-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.spell-grid::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-sm);
}

.spell-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.8);
}

.spell-chip:hover:not(.selected) {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
}

.spell-chip.selected {
  background: rgba(139, 92, 246, 0.3);
  border-color: var(--color-accent-purple);
  color: var(--color-text-primary);
}

.spell-chip.hidden {
  display: none;
}

.spell-school-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  min-width: 28px;
  text-align: center;
}

/* School-specific badge colors */
.spell-school-badge[data-school="Abjuration"] { background: rgba(59, 130, 246, 0.3); color: var(--color-accent-fg); }
.spell-school-badge[data-school="Conjuration"] { background: rgba(245, 158, 11, 0.3); color: var(--color-warning-fg); }
.spell-school-badge[data-school="Divination"] { background: rgba(139, 92, 246, 0.3); color: var(--color-accent-purple); }
.spell-school-badge[data-school="Enchantment"] { background: rgba(236, 72, 153, 0.3); color: var(--color-accent-purple); }
.spell-school-badge[data-school="Evocation"] { background: rgba(239, 68, 68, 0.3); color: var(--color-danger-fg); }
.spell-school-badge[data-school="Illusion"] { background: rgba(99, 102, 241, 0.3); color: var(--color-accent-fg); }
.spell-school-badge[data-school="Necromancy"] { background: rgba(75, 85, 99, 0.4); color: var(--color-text-secondary); }
.spell-school-badge[data-school="Transmutation"] { background: rgba(34, 197, 94, 0.3); color: var(--color-success-fg); }

.spell-name {
  font-size: var(--font-size-xs);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spell-check {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.spell-confirm-area {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

.spell-confirm-btn {
  padding: var(--space-2-5) var(--space-6);
  background: var(--color-accent-purple);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.spell-confirm-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.spell-confirm-btn:disabled,
.spell-confirm-btn.disabled {
  background: rgba(139, 92, 246, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* Spell Selection Tray (sticky bottom bar) */
.spell-tray {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-md);
  animation: slideIn var(--duration-fast) ease-out;
  z-index: var(--z-panel);
  max-width: 90vw;
}

.spell-tray.hidden {
  display: none;
}

.spell-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  flex: 1;
}

.spell-tray-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-accent-purple);
  font-family: var(--font-mono);
}

.send-spell-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-purple);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  white-space: nowrap;
}

.send-spell-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
  transform: scale(1.02);
}

.send-spell-btn:disabled {
  background: rgba(139, 92, 246, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* Responsive spell styles */
@media (max-width: 600px) {
  .spell-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .spell-tray {
    flex-direction: column;
    gap: var(--space-2);
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
  }

  .spell-summary {
    justify-content: center;
  }

  .send-spell-btn {
    width: 100%;
  }
}

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

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

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

/* 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 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 */
.token-status {
  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;
  transition: background var(--transition-fast);
}

.token-status:hover {
  background: var(--color-bg-tertiary);
}

.token-status .token-icon {
  font-size: var(--font-size-md);
}

.token-status .token-count {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
}

.token-status .token-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Token Status - Milestone colors (celebrating usage achievements, not warnings) */
.token-status.milestone-bronze {
  color: var(--color-milestone-bronze, #cd7f32);
  border-left: 3px solid var(--color-milestone-bronze, #cd7f32);
}

.token-status.milestone-silver {
  color: var(--color-milestone-silver, #c0c0c0);
  border-left: 3px solid var(--color-milestone-silver, #c0c0c0);
}

.token-status.milestone-gold {
  color: var(--color-gold);
  border-left: 3px solid var(--color-gold);
  animation: milestone-glow 2s ease-in-out infinite;
}

@keyframes milestone-glow {
  0%, 100% { box-shadow: 0 0 5px var(--overlay-gold-medium); }
  50% { box-shadow: 0 0 15px color-mix(in srgb, var(--color-gold) 60%, transparent); }
}

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

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

@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);
  }
}
/*
 * 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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.7;
}

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

.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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  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 ── */
@media (max-width: 640px) {
  .monitor-note {
    width: 150px;
    padding: 10px 10px 8px;
  }

  .monitor-note__title { font-size: 13px; }
  .monitor-note__teaser { font-size: 11px; }

  .note-modal {
    max-width: 95%;
    padding: 24px 20px 20px;
  }

  .note-heading { font-size: 19px; }
  .note-body { font-size: 14px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .monitor-note--falling {
    transition: none;
  }
}
/**
 * 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
 * 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);
}
/**
 * Spellbook Panel
 * ===============
 * Displays character spells with school-based styling.
 * Uses design tokens from: terminal/_tokens.css
 */

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

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

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

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

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

/* ========================================
 * 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 */
}
/* 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 - 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 {
  width: 80px;
  height: 48px;
  color: var(--color-text-muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.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 */
.lobby-banner__quick-commands {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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

.character-select-modal__swipe-stack {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: 340px;
  margin: 0 auto var(--space-2);
  outline: none;
}

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

@media (max-width: 600px) {
  .character-select-modal__grid {
    grid-template-columns: 1fr;
  }

  .character-select-modal__swipe-stack {
    max-width: 240px;
    height: 300px;
  }

  .character-select-modal__actions {
    flex-direction: column;
  }

  .character-select-modal__campaign-badge {
    max-width: 80px;
  }
}
/*
 * 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;
}

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

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

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

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

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

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

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

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

.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; }
/* ============================================
 * 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;
}
/* Branch Choices - Card Chain Branching UI
 * =========================================
 * Styles for displaying branch choices at branch nodes in card chains.
 */

.branch-choices {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid #f59e0b; /* Gold for branching */
  border-radius: var(--radius-md);
}

.branch-choices__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-subtle);
}

.branch-choices__icon {
  font-size: var(--font-size-lg);
}

.branch-choices__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #f59e0b;
}

.branch-choices__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

/* Individual branch choice */
.branch-choice {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.branch-choice:hover {
  border-color: var(--border-default);
  background: var(--surface-tertiary);
}

.branch-choice--available {
  border-left: 3px solid #4ade80; /* Green for available */
}

.branch-choice--blocked {
  border-left: 3px solid #f87171; /* Red for blocked */
  opacity: 0.7;
}

.branch-choice__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.branch-choice__number {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-muted);
}

.branch-choice__label {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.branch-choice__description {
  margin: var(--spacing-xs) 0;
  font-style: italic;
  color: var(--text-muted);
  padding-left: var(--spacing-lg);
}

.branch-choice__conditions {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.branch-choice--available .branch-choice__conditions-text {
  color: #4ade80;
}

.branch-choice--blocked .branch-choice__conditions-text {
  color: #f87171;
}

.branch-choice__play {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: #4ade80;
  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, transform 0.15s ease;
}

.branch-choice__play:hover:not(:disabled) {
  background: #22c55e;
  transform: translateY(-1px);
}

.branch-choice__play:disabled {
  background: var(--surface-tertiary);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 600px) {
  .branch-choice__header {
    flex-wrap: wrap;
  }

  .branch-choice__play {
    margin-top: var(--spacing-xs);
    width: 100%;
  }
}
/* 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;
  }
}
/**
 * Character Sheet Panel
 * =====================
 * Displays character stats, abilities, and key information.
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.copy-btn--copied {
  background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-tertiary));
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}

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

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

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

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

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

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

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

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

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

  .copy-btn__label {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-resource--partial .cs-resource__bar-fill {
  background: var(--terminal-warning, #FFC107);
}

.cs-resource--empty .cs-resource__bar-fill {
  background: var(--terminal-danger, #f44336);
}

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

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

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

  .cs-resource__name {
    font-size: 0.75rem;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cs-skeleton {
    animation: none;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-save-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion: reduce) {
  .ability-hexagon__vertex {
    transition: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Resource bars - larger touch area */
  .cs-resource {
    padding: var(--space-3);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-rest-modal__section-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-death-saves-interactive,
.cs-death-saves-card {
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .cs-concentration__icon {
    animation: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cs-feature-item[data-controller="rich-tooltip"] {
  cursor: help;
}

.cs-feature-item__name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.cs-feature-item__level {
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.cs-feature-item__info-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.cs-feature-item:hover .cs-feature-item__info-hint {
  opacity: 1;
  color: var(--color-accent-primary);
}

/* Type-specific accent colors */
.cs-feature-item--class .cs-feature-item__name {
  color: var(--color-accent-primary);
}

.cs-feature-item--racial .cs-feature-item__name {
  color: var(--color-accent-success);
}

.cs-feature-item--feat .cs-feature-item__name {
  color: var(--color-accent-warning);
}

/* Features list container */
.cs-features-list {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Touch targets */
@media (hover: none) {
  .cs-feature-item {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .cs-feature-item__info-hint {
    opacity: 0.7;
  }
}

/* ========================================
 * Hit Dice Card
 * ======================================== */

.cs-hit-dice-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-hit-dice-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.cs-hit-dice-card__icon {
  font-size: var(--font-size-sm);
}

.cs-hit-dice-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-hit-dice-card__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-hit-dice-card__dice {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-hit-dice-card__count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-hit-dice-card__use {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.cs-hit-dice-card__use:hover:not(:disabled) {
  background: var(--color-accent-primary-dim);
  border-color: var(--color-accent-primary);
}

.cs-hit-dice-card__use:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-hit-dice-card__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

.cs-hit-dice__class {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Death Saves Card
 * ======================================== */

.cs-death-saves-card {
  background: var(--color-bg-danger-dim);
  border: 1px solid var(--color-accent-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-death-saves-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cs-death-saves-card__icon {
  font-size: var(--font-size-sm);
}

.cs-death-saves-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-death-saves-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.cs-death-saves-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-death-saves-card__pips {
  display: flex;
  gap: var(--space-1);
}

.cs-death-pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-death-pip--success {
  color: var(--color-accent-success);
}

.cs-death-pip--failure {
  color: var(--color-accent-danger);
}

.cs-death-pip--filled {
  background: currentColor;
}

.cs-death-saves-card__roll {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-death-saves-card__roll:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Concentration Indicator
 * ======================================== */

.cs-concentration-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: var(--color-accent-primary-dim);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

.cs-concentration-indicator__icon {
  color: var(--color-accent-primary);
  animation: pulse 2s infinite;
}

.cs-concentration-indicator__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-concentration-indicator__spell {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

.cs-concentration-indicator__end {
  margin-left: auto;
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-concentration-indicator__end:hover {
  color: var(--color-accent-danger);
  border-color: var(--color-accent-danger);
}

/* ========================================
 * Proficiencies Card
 * ======================================== */

.cs-proficiencies-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-3);
}

.cs-proficiencies-card__header {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cs-proficiencies-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-proficiencies-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-prof-section {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.cs-prof-section__icon {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

.cs-prof-section__label {
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.cs-prof-section__list {
  color: var(--color-text-primary);
}

/* ========================================
 * Homebrew Badge
 * ======================================== */

.cs-homebrew-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-warning);
  background: var(--color-accent-warning-dim);
  border-radius: var(--radius-xs);
  vertical-align: middle;
}

/* ========================================
 * Class Resources Interactive
 * ======================================== */

.cs-resources-interactive {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-resources-interactive__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
}

.cs-resource-interactive {
  margin-bottom: var(--space-2);
}

.cs-resource-interactive:last-child {
  margin-bottom: 0;
}

.cs-resource-interactive__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.cs-resource-interactive__icon {
  font-size: var(--font-size-sm);
}

.cs-resource-interactive__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-resource-interactive__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-resource-interactive__recovery {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
}

.cs-resource-interactive__bar {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.cs-resource-interactive__fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-xs);
  transition: width 0.3s;
}

.cs-resource-interactive__buttons {
  display: flex;
  gap: var(--space-1);
}

.cs-resource-btn {
  flex: 1;
  padding: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-resource-btn--use {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
}

.cs-resource-btn--use:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.cs-resource-btn--recover {
  color: var(--color-accent-success);
  background: var(--color-accent-success-dim);
  border: 1px solid transparent;
}

.cs-resource-btn--recover:hover:not(:disabled) {
  border-color: var(--color-accent-success);
}

.cs-resource-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
 * Spellcasting Stats
 * ======================================== */

.cs-spellcasting-stats {
  display: flex;
  justify-content: space-around;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.cs-spell-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cs-spell-stat__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-spell-stat__label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Touch targets for new components */
@media (hover: none) {
  .cs-hit-dice-card__use,
  .cs-death-saves-card__roll,
  .cs-concentration-indicator__end,
  .cs-resource-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ========================================
 * Pending Actions Tray
 * Shows queued actions awaiting player response
 * ======================================== */

.cs-pending-tray-container {
  flex-shrink: 0;
}

.cs-pending-tray {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
}

.cs-pending-tray__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-pending-tray__icon {
  font-size: var(--font-size-base);
}

.cs-pending-tray__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-pending-tray__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background: var(--color-accent-warning);
  border-radius: var(--radius-full);
}

.cs-pending-tray__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual pending action cards */
.cs-pending-action {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-secondary);
  padding: var(--space-2);
  transition: transform 0.2s, opacity 0.2s;
}

.cs-pending-action.warning-caution {
  border-left-color: var(--color-accent-warning);
}

.cs-pending-action.warning-danger {
  border-left-color: var(--color-accent-error);
}

.cs-pending-action.warning-critical {
  border-left-color: var(--color-accent-error);
  background: var(--color-bg-error-subtle);
}

.cs-pending-action--approved,
.cs-pending-action--rejected {
  transform: translateX(100%);
  opacity: 0;
}

/* Error state for restored cards after backend failure */
.cs-pending-action--error {
  animation: shake 0.4s ease-in-out;
  border-left-color: var(--color-accent-error);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.cs-pending-action__error {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-error-subtle);
  color: var(--color-accent-error);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.cs-pending-action__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.cs-pending-action__icon {
  font-size: var(--font-size-sm);
}

.cs-pending-action__tool {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-pending-action__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-warning);
  background: var(--color-bg-warning-subtle);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
}

.cs-pending-action__body {
  margin-bottom: var(--space-2);
}

.cs-pending-action__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.4;
}

.cs-pending-action__warning {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-warning);
  margin: 0 0 var(--space-1) 0;
}

.cs-pending-action__consequences,
.cs-pending-action__alternatives {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0;
}

.cs-pending-action__consequences strong,
.cs-pending-action__alternatives strong {
  display: block;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-0-5);
}

.cs-pending-action__consequences ul,
.cs-pending-action__alternatives ul {
  margin: 0;
  padding-left: var(--space-3);
}

.cs-pending-action__consequences li,
.cs-pending-action__alternatives li {
  margin-bottom: var(--space-0-5);
}

.cs-pending-action__actions {
  display: flex;
  gap: var(--space-2);
}

.cs-pending-action__btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}

.cs-pending-action__btn:active {
  transform: scale(0.98);
}

.cs-pending-action__btn--confirm {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.cs-pending-action__btn--confirm:hover {
  background: var(--color-accent-primary-hover);
}

.warning-caution .cs-pending-action__btn--confirm {
  background: var(--color-accent-warning);
}

.warning-danger .cs-pending-action__btn--confirm,
.warning-critical .cs-pending-action__btn--confirm {
  background: var(--color-accent-error);
}

.cs-pending-action__btn--reject {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.cs-pending-action__btn--reject:hover {
  background: var(--color-bg-hover);
}

/* Touch targets */
@media (hover: none) {
  .cs-pending-action__btn {
    min-height: 44px;
  }
}

/* ========================================
 * Action Economy Display (Multiplayer Combat)
 * Shows available actions, bonus actions, reactions, movement
 * ======================================== */

.cs-action-economy {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
}

.cs-action-economy__resources {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cs-action-economy__resource {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-success-dim);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s, opacity 0.2s;
}

.cs-action-economy__resource--used {
  background: var(--color-bg-tertiary);
  opacity: 0.5;
}

.cs-action-economy__resource--used .cs-action-economy__icon {
  opacity: 0.4;
}

.cs-action-economy__icon {
  font-size: var(--font-size-sm);
}

.cs-action-economy__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-action-economy__movement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 80px;
}

.cs-action-economy__movement-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.cs-action-economy__movement-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

.cs-action-economy__movement-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 32px;
  text-align: right;
}

/* Compact mode for smaller screens */
@media (max-width: 400px) {
  .cs-action-economy__resources {
    gap: var(--space-2);
  }

  .cs-action-economy__resource {
    padding: var(--space-0-5) var(--space-1);
  }

  .cs-action-economy__label {
    display: none;
  }

  .cs-action-economy__icon {
    font-size: var(--font-size-base);
  }
}

/* ========================================
 * Mechanics Breakdown Tooltips
 * D&D 5e modifier calculation transparency
 * ======================================== */

/* Elements with breakdown tooltips should use help cursor */
.cs-mini-stat[title],
.proficiency-chip[title],
.cs-passive-stat[title],
.cs-save__chip[title] {
  cursor: help;
}

/* ========================================
 * Empty States
 * Consistent empty state styling for tabs
 * ======================================== */

.cs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  min-height: 150px;
}

.cs-empty-state__icon {
  font-size: 2.5rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  opacity: 0.6;
}

.cs-empty-state__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  font-weight: var(--font-weight-medium);
}

.cs-empty-state__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* Legacy empty text (for backward compatibility) */
.cs-empty-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-4);
  font-style: italic;
}

/* ========================================
 * Party Member Tabs
 * Horizontal tab row for switching between
 * viewing own character and party members
 * ======================================== */

.party-member-tabs {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-bg-secondary);
}

.party-member-tabs__container {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.party-member-tabs__container::-webkit-scrollbar {
  display: none;
}

.party-member-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  min-width: 56px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--color-text-secondary);
  font-family: inherit;
}

.party-member-tab:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.party-member-tab--active {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary);
  color: var(--color-text-primary);
}

.party-member-tab--self {
  /* Slightly different style for "You" tab */
}

.party-member-tab__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.party-member-tab__hp-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.party-member-tab__hp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-muted);
  transition: background-color 0.2s ease;
}

.party-member-tab__hp-dot--filled {
  background: var(--color-success);
}

.party-member-tab__hp-dot--critical {
  background: var(--color-error);
  animation: pulse-critical 1.5s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Viewing Indicator - shows when viewing party member's sheet */
.cs-viewing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--font-size-xs);
}

.cs-viewing-indicator__label {
  color: var(--color-text-muted);
}

.cs-viewing-indicator__name {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .party-member-tabs {
    padding: var(--space-1);
  }

  .party-member-tab {
    min-width: 48px;
    padding: var(--space-1);
  }

  .party-member-tab__name {
    max-width: 48px;
    font-size: 10px;
  }

  .party-member-tab__hp-dot {
    width: 4px;
    height: 4px;
  }
}

/* ==========================================================================
   Achievements/Discoveries Section
   ========================================================================== */

.cs-achievements {
  margin-top: var(--spacing-sm);
}

.cs-achievements__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
}

.cs-achievements__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cs-achievements__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-md);
}

.cs-achievement {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border-left: 3px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.cs-achievement:hover {
  background: var(--color-surface-elevated);
}

.cs-achievement__icon {
  font-size: var(--font-size-md);
  line-height: 1;
  flex-shrink: 0;
}

.cs-achievement__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cs-achievement__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

.cs-achievement__first-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-bg);
  margin-left: var(--spacing-xs);
  vertical-align: middle;
}

.cs-achievement__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Rarity variants */
.cs-achievement--mythic {
  border-left-color: #ff4081;
  background: rgba(255, 64, 129, 0.05);
}

.cs-achievement--mythic .cs-achievement__name {
  color: #ff4081;
}

.cs-achievement--legendary {
  border-left-color: #ffd700;
  background: rgba(255, 215, 0, 0.05);
}

.cs-achievement--legendary .cs-achievement__name {
  color: #ffd700;
}

.cs-achievement--epic {
  border-left-color: #9c27b0;
  background: rgba(156, 39, 176, 0.05);
}

.cs-achievement--epic .cs-achievement__name {
  color: #9c27b0;
}

.cs-achievement--rare {
  border-left-color: #2196f3;
  background: rgba(33, 150, 243, 0.05);
}

.cs-achievement--rare .cs-achievement__name {
  color: #2196f3;
}

.cs-achievement--common {
  border-left-color: #4caf50;
  background: rgba(76, 175, 80, 0.03);
}

.cs-achievement--common .cs-achievement__name {
  color: #4caf50;
}

.cs-achievement--trivial {
  border-left-color: var(--color-border);
}

/* ========================================
 * Stats+Skills section divider (#1205)
 * Visual separator between merged content blocks
 * ======================================== */

.cs-section-divider {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #9ca3af);
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
  margin: var(--space-2, 8px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
}

/* ========================================
 * Overview Tab (#1205)
 * Adventure status at a glance — the party's
 * mini-map equivalent for the character sheet.
 * ======================================== */

.cs-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
}

/* HP section in overview */
.cs-ov-hp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

/* Active conditions in overview */
.cs-ov-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
}

/* Compact 4-stat combat row */
.cs-ov-combat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 4px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

.cs-ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cs-ov-stat-value {
  font-size: var(--font-size-lg, 18px);
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
  line-height: 1;
}

.cs-ov-stat-label {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Adventure status rows (location, quests, party) */
.cs-ov-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.15);
}

.cs-ov-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cs-ov-row:last-child {
  border-bottom: none;
}

.cs-ov-row--clickable {
  cursor: pointer;
  border-radius: 3px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin: 0 calc(-1 * var(--space-2, 8px));
  transition: background 0.15s ease;
}

.cs-ov-row--clickable:hover,
.cs-ov-row--clickable:focus-visible {
  background: rgba(124, 58, 237, 0.15);
  outline: none;
}

.cs-ov-row--clickable:focus-visible {
  outline: 2px solid var(--color-accent-primary, #7c3aed);
  outline-offset: 1px;
}

.cs-ov-label {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cs-ov-value {
  font-size: var(--font-size-sm, 12px);
  color: var(--text-primary, #e0e0e0);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-ov-value--badge {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
}

.cs-ov-value--link {
  color: #a78bfa;
  font-size: var(--font-size-xs, 11px);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.4);
}

/* Mobile adjustments for overview */
@media (max-width: 1024px) {
  .cs-ov-combat-row {
    gap: var(--space-1, 4px);
  }

  .cs-ov-stat-value {
    font-size: var(--font-size-base, 16px);
  }
}

/* Mobile readability: enforce minimum 12px font on touch devices (#946)
   Sub-12px text is illegible on mobile screens. Stat labels, save abbreviations,
   and chip labels use 8-9px for density on desktop but need to be bumped on mobile. */
@media (max-width: 768px) {
  .cs-mini-stat__label,
  .cs-saves-card__label,
  .cs-save-chip__abbr,
  .stat-chip__label {
    font-size: 11px;
  }
}

/**
 * Character Sheet Panel — Import Hub
 * Split into focused files under character_sheet/ for maintainability (Phase 3 Task 8)
 */









/* Character Sheet Inline - Inline Panel Styling
 * ==============================================
 * Styles for the inline character sheet panel.
 * Renders inline in narrative area with tabs for Stats, Skills, Powers, Gear.
 * Uses 'csi-' prefix to avoid collision with main character sheet 'cs-' classes.
 */

/* Panel container */
.character-sheet-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

@keyframes csi-reveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.character-sheet-inline__header {
  margin-bottom: var(--spacing-md);
}

.character-sheet-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.character-sheet-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.character-sheet-inline__icon {
  font-size: 1.25em;
}

.character-sheet-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.character-sheet-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.character-sheet-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.character-sheet-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Filter Tabs */
.character-sheet-inline__filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.character-sheet-inline__tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.character-sheet-inline__tab:hover {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.character-sheet-inline__tab.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
}

/* Content Area */
.character-sheet-inline__content {
  min-height: 120px;
}

.character-sheet-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

/* Footer */
.character-sheet-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.character-sheet-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.character-sheet-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Stats Tab
 * ========================================== */

.csi-hp-bar {
  position: relative;
  height: 24px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.csi-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-error), var(--color-accent-warning));
  transform-origin: left;
  transition: transform 0.3s ease;
}

.csi-hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.csi-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.csi-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.csi-stat-label {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csi-stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Conditions */
.csi-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.csi-condition {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: rgba(251, 191, 36, 0.2);
  border-radius: var(--radius-sm);
  color: #fbbf24;
  cursor: help;
}

/* Ability Grid */
.csi-ability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

@media (min-width: 600px) {
  .csi-ability-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.csi-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.csi-ability-item:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

.csi-ability-item.rollable {
  cursor: pointer;
}

.csi-ability-abbr {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.csi-ability-score {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.csi-ability-mod {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Skills Tab
 * ========================================== */

.csi-skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-xs);
}

.csi-skill {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.csi-skill--clickable {
  cursor: pointer;
}

.csi-skill--clickable:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

.csi-skill--proficient {
  background: rgba(34, 197, 94, 0.1);
}

.csi-skill-prof {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.csi-skill--proficient .csi-skill-prof {
  color: var(--color-accent-success);
}

.csi-skill-name {
  flex: 1;
  color: var(--text-primary);
}

.csi-skill-bonus {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* ==========================================
 * Powers Tab
 * ========================================== */

.csi-powers-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.csi-features-section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.csi-features-section__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.csi-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.csi-feature__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.csi-feature__icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.csi-feature--class .csi-feature__icon {
  color: #fbbf24;
}

.csi-feature--racial .csi-feature__icon {
  color: #a78bfa;
}

.csi-feature--feat .csi-feature__icon {
  color: #22d3ee;
}

.csi-feature__name {
  color: var(--text-primary);
  font-weight: 500;
}

.csi-feature__level {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.csi-feature__desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  line-height: 1.4;
}

/* Spells */
.csi-spell-slots {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-slot {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-xs);
}

.csi-cantrips,
.csi-spells-section {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-spells-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-spell {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs);
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  cursor: help;
}

.csi-cantrip {
  color: var(--color-accent-primary);
}

/* ==========================================
 * Gear Tab
 * ========================================== */

.csi-gold {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.csi-inventory-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.csi-gear-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-gear-group__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csi-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border-left: 2px solid var(--border-subtle);
}

.csi-item--common { border-left-color: var(--text-muted); }
.csi-item--uncommon { border-left-color: #22c55e; }
.csi-item--rare { border-left-color: #3b82f6; }
.csi-item--very_rare { border-left-color: #a855f7; }
.csi-item--legendary { border-left-color: #f59e0b; }
.csi-item--artifact { border-left-color: #ef4444; }

.csi-item__name {
  flex: 1;
  color: var(--text-primary);
}

.csi-item__qty {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.csi-item__badge {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 1px 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: #fff;
}

.csi-item__badge--attuned {
  background: var(--color-accent-warning);
}

.csi-item__stat {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ==========================================
 * Responsive
 * ========================================== */

@media (max-width: 600px) {
  .character-sheet-inline {
    padding: var(--spacing-sm);
  }

  .csi-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .csi-skills-list {
    grid-template-columns: 1fr;
  }

  .character-sheet-inline__filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: thin;
  }
}

/* ============================================================================
 * INVENTORY INLINE PANEL
 * A focused view of just the character's inventory/gear.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.inventory-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.inventory-inline__header {
  margin-bottom: var(--spacing-md);
}

.inventory-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.inventory-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.inventory-inline__icon {
  font-size: 1.25em;
}

.inventory-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.inventory-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inventory-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.inventory-inline__subtitle {
  font-size: var(--font-size-sm);
  color: #fbbf24;
  font-weight: 600;
}

.inventory-inline__content {
  min-height: 80px;
}

.inventory-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.inventory-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.inventory-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.inventory-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ============================================================================
 * SPELLS INLINE PANEL
 * A focused view of just the character's spells.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.spells-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.spells-inline__header {
  margin-bottom: var(--spacing-md);
}

.spells-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.spells-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.spells-inline__icon {
  font-size: 1.25em;
}

.spells-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.spells-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spells-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.spells-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.spells-inline__content {
  min-height: 80px;
}

.spells-inline__section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.spells-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.spells-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.spells-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.spells-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* Responsive adjustments for inventory and spells panels */
@media (max-width: 600px) {
  .inventory-inline,
  .spells-inline {
    padding: var(--spacing-sm);
  }
}
/**
 * Entity Inline Panel Styles
 * ==========================
 *
 * Shared styles for all entity inline panels (items, NPCs, locations, monsters).
 * These panels appear in the narrative area when clicking entity links.
 */

/* Base container */
.entity-inline {
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 6px;
  margin: 12px 0;
  overflow: hidden;
  animation: entityInline-slideIn 0.2s ease-out;
}

@keyframes entityInline-slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.entity-inline__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.entity-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entity-inline__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.entity-inline__icon {
  font-size: 1.2em;
}

.entity-inline__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  flex-grow: 1;
}

.entity-inline__subtitle {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  margin-left: 28px; /* Align with title (after icon) */
}

.entity-inline__close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1em;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  margin-left: auto;
}

.entity-inline__close-btn:hover {
  background: var(--color-bg-hover, #333);
  color: var(--color-text-primary, #e0e0e0);
}

/* Badges */
.entity-inline__badge {
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-accent, #6ab0f3);
  text-transform: capitalize;
}

.entity-inline__badge--cr {
  background: var(--color-danger-bg, #4a2a2a);
  color: var(--color-danger, #f36a6a);
}

/* Rarity badges */
.entity-inline__rarity--common {
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-text-muted, #888);
}

.entity-inline__rarity--uncommon {
  background: #2a4a2a;
  color: #6af36a;
}

.entity-inline__rarity--rare {
  background: #2a3a5a;
  color: #6ab0f3;
}

.entity-inline__rarity--very-rare {
  background: #4a2a5a;
  color: #b06af3;
}

.entity-inline__rarity--legendary {
  background: #5a4a2a;
  color: #f3b06a;
}

.entity-inline__rarity--artifact {
  background: #5a2a2a;
  color: #f36a6a;
}

/* NPC attitude badges */
.entity-inline__attitude {
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.entity-inline__attitude--friendly {
  background: #2a4a2a;
  color: #6af36a;
}

.entity-inline__attitude--hostile {
  background: #4a2a2a;
  color: #f36a6a;
}

.entity-inline__attitude--wary {
  background: #4a4a2a;
  color: #f3f36a;
}

.entity-inline__attitude--neutral {
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-text-muted, #888);
}

/* Content body */
.entity-inline__content {
  padding: 12px 16px;
}

.entity-inline__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entity-inline__meta {
  display: flex;
  gap: 16px;
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  flex-wrap: wrap;
}

.entity-inline__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entity-inline__description {
  margin: 0;
  color: var(--color-text-secondary, #bbb);
  line-height: 1.5;
  font-size: 0.95em;
}

/* Monster combat stats */
.entity-inline__combat-stats {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  flex-wrap: wrap;
}

.entity-inline__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
  color: var(--color-text-secondary, #bbb);
}

/* Monster ability scores */
.entity-inline__ability-scores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  text-align: center;
}

.entity-inline__ability {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entity-inline__ability-label {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--color-text-muted, #888);
}

.entity-inline__ability-score {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.entity-inline__ability-mod {
  font-size: 0.75em;
  color: var(--color-accent, #6ab0f3);
}

/* Lists (properties, facts, traits, exits, POI) */
.entity-inline__properties,
.entity-inline__facts,
.entity-inline__traits,
.entity-inline__exits,
.entity-inline__poi {
  font-size: 0.9em;
}

.entity-inline__properties strong,
.entity-inline__facts strong,
.entity-inline__traits strong,
.entity-inline__exits strong,
.entity-inline__poi strong {
  color: var(--color-text-primary, #e0e0e0);
  display: block;
  margin-bottom: 6px;
}

.entity-inline__property-list,
.entity-inline__fact-list,
.entity-inline__trait-list,
.entity-inline__exit-list,
.entity-inline__poi-list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-secondary, #bbb);
}

.entity-inline__property-list li,
.entity-inline__fact-list li,
.entity-inline__trait-list li,
.entity-inline__exit-list li,
.entity-inline__poi-list li {
  margin-bottom: 4px;
}

/* Actions bar */
.entity-inline__actions {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.entity-inline__action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.entity-inline__action-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 4px;
  background: var(--color-bg-secondary, #1a1a1a);
  color: var(--color-text-secondary, #bbb);
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entity-inline__action-btn:hover {
  background: var(--color-bg-hover, #333);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-text-primary, #e0e0e0);
}

.entity-inline__action-btn--primary {
  background: var(--color-accent-bg, #1a3a5a);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-accent, #6ab0f3);
}

.entity-inline__action-btn--primary:hover {
  background: var(--color-accent, #6ab0f3);
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--danger {
  background: var(--color-danger-bg, #4a2a2a);
  border-color: var(--color-danger, #f36a6a);
  color: var(--color-danger, #f36a6a);
}

.entity-inline__action-btn--danger:hover {
  background: var(--color-danger, #f36a6a);
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * Item Inline - Enhanced Styles
 * ======================================== */

/* Property chips (for item properties) */
.entity-inline__property-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.entity-inline__property-chip {
  padding: 3px 8px;
  background: var(--color-bg-tertiary, #242424);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 4px;
  font-size: 0.8em;
  color: var(--color-text-secondary, #9ca3af);
}

/* Item stats display */
.item-inline__stats {
  display: flex;
  gap: 16px;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
  flex-wrap: wrap;
}

.item-inline__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.item-inline__stat-label {
  font-size: 0.7em;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.item-inline__stat-value {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-text-primary, #e5e7eb);
}

.item-inline__stat--negative .item-inline__stat-value {
  color: var(--color-accent-error, #ef4444);
}

/* Weapon-specific */
.item-inline__stats--weapon {
  border-left: 3px solid var(--color-item, #6ab0f3);
}

/* Armor-specific */
.item-inline__stats--armor {
  border-left: 3px solid var(--color-npc, #c084fc);
}

/* AC Breakdown (hidden by default) */
.item-inline__ac-breakdown {
  display: none;
  margin-top: 8px;
  padding: 8px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  font-size: 0.85em;
}

.item-inline__ac-breakdown.visible {
  display: block;
}

.item-inline__breakdown-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-primary, #e5e7eb);
}

.item-inline__breakdown-row {
  color: var(--color-text-secondary, #9ca3af);
  padding: 2px 0;
}

/* Consumable effect */
.item-inline__effect {
  padding: 8px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
}

.item-inline__effect-label {
  font-weight: 600;
  color: #22c55e;
  margin-right: 6px;
}

.item-inline__effect-text {
  color: var(--color-text-secondary, #9ca3af);
}

/* Attunement section */
.item-inline__attunement {
  padding: 10px 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
}

.item-inline__attunement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.item-inline__attunement-label {
  font-weight: 600;
  color: #a78bfa;
}

.item-inline__attunement-slots {
  font-size: 0.8em;
  color: var(--color-text-muted, #6b7280);
}

.item-inline__attunement-status {
  font-size: 0.85em;
  color: var(--color-text-secondary, #9ca3af);
}

.item-inline__attunement-status--attuned {
  color: #22c55e;
  font-weight: 500;
}

.item-inline__attunement-status--full {
  color: var(--color-accent-warning, #f59e0b);
}

.item-inline__attunement-warning {
  display: none;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 4px;
  font-size: 0.8em;
  color: #ef4444;
}

.item-inline__attunement-warning.visible {
  display: block;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Equipment comparison hint */
.item-inline__comparison-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary, #242424);
  border: 1px dashed var(--color-border, #3a3a3a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.item-inline__comparison-hint:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--color-accent, #6ab0f3);
}

.item-inline__comparison-icon {
  font-size: 1.1em;
}

.item-inline__comparison-text {
  font-size: 0.85em;
  color: var(--color-text-secondary, #9ca3af);
}

/* Attune button */
.entity-inline__action-btn--attune {
  background: rgba(139, 92, 246, 0.15);
  border-color: #a78bfa;
  color: #a78bfa;
}

.entity-inline__action-btn--attune:hover:not(:disabled) {
  background: #a78bfa;
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--attune:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Consumable button */
.entity-inline__action-btn--consumable {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}

.entity-inline__action-btn--consumable:hover {
  background: #22c55e;
  color: var(--color-bg-primary, #121212);
}

/* Confirm state for use button */
.entity-inline__action-btn--confirm {
  background: var(--color-accent-warning, #f59e0b);
  border-color: var(--color-accent-warning, #f59e0b);
  color: var(--color-bg-primary, #121212);
  animation: pulse-confirm 1s ease-in-out infinite;
}

@keyframes pulse-confirm {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Equipped/Attuned badges */
.entity-inline__badge--equipped {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.entity-inline__badge--attuned {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Footer */
.entity-inline__footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.entity-inline__tip {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  text-align: center;
}

.entity-inline__tip code {
  background: var(--color-bg-tertiary, #242424);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
}

/* Entity type-specific accent colors */
.entity-inline--item {
  border-left: 3px solid var(--color-item, #b0f36a);
}

.entity-inline--npc {
  border-left: 3px solid var(--color-npc, #6af3b0);
}

.entity-inline--location {
  border-left: 3px solid var(--color-location, #f3b06a);
}

.entity-inline--monster {
  border-left: 3px solid var(--color-monster, #f36a6a);
}

/* ============================================================
 * Location Inline Enhancements
 * ============================================================ */

/* Breadcrumb for location hierarchy */
.entity-inline__breadcrumb {
  font-size: 0.75em;
  color: var(--color-text-muted, #888);
  margin-bottom: 2px;
}

/* "You are here" badge */
.entity-inline__badge--current {
  background: var(--color-success-bg, #2a4a2a);
  color: var(--color-success, #6af36a);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Atmosphere and danger level */
.entity-inline__atmosphere {
  flex: 1;
}

.entity-inline__danger {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
}

.entity-inline__danger--safe,
.entity-inline__danger--none {
  background: var(--color-success-bg, #2a4a2a);
  color: var(--color-success, #6af36a);
}

.entity-inline__danger--low,
.entity-inline__danger--mild {
  background: var(--color-warning-bg, #4a4a2a);
  color: var(--color-warning, #f3f36a);
}

.entity-inline__danger--moderate,
.entity-inline__danger--medium {
  background: #5a3a2a;
  color: #f3a06a;
}

.entity-inline__danger--high,
.entity-inline__danger--dangerous {
  background: var(--color-danger-bg, #4a2a2a);
  color: var(--color-danger, #f36a6a);
}

.entity-inline__danger--deadly,
.entity-inline__danger--extreme {
  background: #3a1a1a;
  color: #ff5050;
  font-weight: 600;
}

/* Section styling */
.entity-inline__section {
  margin-top: 8px;
}

.entity-inline__section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--color-text-muted, #888);
}

.entity-inline__section-header svg {
  width: 14px;
  height: 14px;
}

.entity-inline__section-header strong {
  color: var(--color-text-primary, #e0e0e0);
}

/* Chip list for exits, POIs, NPCs */
.entity-inline__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.entity-inline__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.85em;
  border: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-secondary, #1a1a1a);
  color: var(--color-text-secondary, #bbb);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.entity-inline__chip:hover {
  background: var(--color-bg-hover, #333);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-text-primary, #e0e0e0);
}

/* Exit chips */
.entity-inline__chip--exit {
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-location, #f3b06a);
}

.entity-inline__chip--exit:hover {
  background: rgba(243, 176, 106, 0.15);
  color: var(--color-location, #f3b06a);
}

.entity-inline__chip--locked {
  opacity: 0.6;
  border-style: dashed;
}

.entity-inline__chip--locked:hover {
  opacity: 1;
}

/* POI chips */
.entity-inline__chip--poi {
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-accent, #6ab0f3);
}

.entity-inline__chip--poi:hover {
  background: rgba(106, 176, 243, 0.15);
  color: var(--color-accent, #6ab0f3);
}

.entity-inline__chip--interacted {
  opacity: 0.7;
  border-color: var(--color-text-muted, #888);
}

/* NPC chips (non-interactive) */
.entity-inline__chip--npc {
  cursor: default;
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-npc, #6af3b0);
}

/* ============================================================
 * Location Status Widget (Status Bar)
 * ============================================================ */

.location-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--color-bg-tertiary, #242424);
  cursor: pointer;
  transition: background 0.15s ease;
  max-width: 180px;
}

.location-widget:hover {
  background: var(--color-bg-hover, #333);
}

.location-widget__icon {
  font-size: 1em;
  flex-shrink: 0;
}

.location-widget__name {
  font-size: 0.85em;
  color: var(--color-text-secondary, #bbb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
 * Location List Panel Enhancements
 * ============================================================ */

.location-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-list--connected {
  /* Visual indicator when WebSocket is connected */
}

.location-list__current {
  padding: 12px;
  background: var(--color-bg-tertiary, #242424);
  border-bottom: 1px solid var(--color-border, #3a3a3a);
}

.location-list__current--changing {
  animation: location-flash 0.5s ease;
}

@keyframes location-flash {
  0%, 100% { background: var(--color-bg-tertiary, #242424); }
  50% { background: rgba(243, 176, 106, 0.2); }
}

.location-list__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.location-list__section-title svg {
  width: 14px;
  height: 14px;
}

.location-list__current-name {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: 4px;
}

.location-list__current-desc {
  font-size: 0.9em;
  color: var(--color-text-secondary, #bbb);
  line-height: 1.4;
}

.location-list__section {
  padding: 12px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
}

.location-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.location-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
}

.location-list__item:last-child {
  border-bottom: none;
}

.location-list__item--discovered {
  opacity: 0.8;
}

.location-list__item--visited {
  opacity: 1;
}

.location-list__item--traveling {
  background: rgba(243, 176, 106, 0.1);
  animation: travel-pulse 1s ease-in-out infinite;
}

@keyframes travel-pulse {
  0%, 100% { background: rgba(243, 176, 106, 0.1); }
  50% { background: rgba(243, 176, 106, 0.2); }
}

.location-list__item--updating {
  animation: item-highlight 0.5s ease;
}

@keyframes item-highlight {
  0% { background: rgba(106, 176, 243, 0.3); }
  100% { background: transparent; }
}

.location-list__name {
  flex: 1;
  color: var(--color-text-secondary, #bbb);
  font-size: 0.9em;
}

.location-list__distance {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
}

.location-list__visited-badge {
  color: var(--color-success, #6af36a);
}

.location-list__travel-btn {
  padding: 4px 8px;
  font-size: 0.8em;
  border: 1px solid var(--color-location, #f3b06a);
  border-radius: 4px;
  background: transparent;
  color: var(--color-location, #f3b06a);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.location-list__travel-btn:hover {
  background: var(--color-location, #f3b06a);
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * NPC Inline - Relationship & History
 * ======================================== */

/* Relationship bar */
.npc-inline__relationship {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.npc-inline__rep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.npc-inline__rep-label {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
}

.npc-inline__rep-value {
  font-size: 0.85em;
  font-weight: 600;
  text-transform: capitalize;
}

.npc-inline__rep-value--friendly {
  color: #22c55e;
}

.npc-inline__rep-value--warm {
  color: #84cc16;
}

.npc-inline__rep-value--neutral {
  color: #9ca3af;
}

.npc-inline__rep-value--wary {
  color: #f59e0b;
}

.npc-inline__rep-value--hostile {
  color: #ef4444;
}

.npc-inline__rep-change {
  font-size: 0.75em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.npc-inline__rep-change.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.npc-inline__rep-change.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.npc-inline__rep-bar {
  height: 6px;
  background: var(--color-bg-primary, #121212);
  border-radius: 3px;
  overflow: hidden;
}

.npc-inline__rep-fill {
  height: 100%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 3px;
}

.npc-inline__rep-fill--friendly {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.npc-inline__rep-fill--warm {
  background: linear-gradient(90deg, #84cc16, #a3e635);
}

.npc-inline__rep-fill--neutral {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.npc-inline__rep-fill--wary {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.npc-inline__rep-fill--hostile {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Interaction history */
.npc-inline__history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.npc-inline__history strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--color-text-secondary, #999);
}

.npc-inline__history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.npc-inline__history-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  font-size: 0.85em;
}

.npc-inline__history-icon {
  flex-shrink: 0;
  font-size: 1em;
}

.npc-inline__history-text {
  flex: 1;
  color: var(--color-text-primary, #e5e7eb);
  line-height: 1.4;
}

.npc-inline__history-time {
  flex-shrink: 0;
  font-size: 0.75em;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
}

/* Merchant action button */
.entity-inline__action-btn--merchant {
  background: var(--color-npc, #c084fc);
  border-color: var(--color-npc, #c084fc);
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--merchant:hover {
  background: color-mix(in srgb, var(--color-npc, #c084fc) 80%, white);
  border-color: color-mix(in srgb, var(--color-npc, #c084fc) 80%, white);
}

/* Attitude badges - enhanced */
.entity-inline__attitude {
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
  font-weight: 500;
}

.entity-inline__attitude--friendly {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.entity-inline__attitude--hostile {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.entity-inline__attitude--wary {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.entity-inline__attitude--neutral {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ========================================
 * Party Member Inline Panel
 * ======================================== */

.party-member-inline__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Online status indicator */
.party-member-inline__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.party-member-inline__status.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.party-member-inline__status.offline {
  background: #6b7280;
}

/* HP Section */
.party-member-inline__hp-section {
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.party-member-inline__hp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.party-member-inline__hp-label {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
}

.party-member-inline__hp-value {
  font-size: 0.9em;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

.party-member-inline__hp-value--healthy {
  color: #22c55e;
}

.party-member-inline__hp-value--injured {
  color: #eab308;
}

.party-member-inline__hp-value--critical {
  color: #ef4444;
}

.party-member-inline__hp-value--down {
  color: #6b7280;
}

.party-member-inline__hp-bar {
  height: 8px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.party-member-inline__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-member-inline__hp-fill--healthy {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.party-member-inline__hp-fill--injured {
  background: linear-gradient(90deg, #ca8a04, #eab308);
}

.party-member-inline__hp-fill--critical {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  animation: hp-pulse 1s ease-in-out infinite;
}

.party-member-inline__hp-fill--down {
  background: #4b5563;
}

@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.party-member-inline__hp-temp {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  opacity: 0.7;
}

/* Stats row */
.party-member-inline__stats-row {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.party-member-inline__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.party-member-inline__stat-value {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
}

.party-member-inline__stat-label {
  font-size: 0.7em;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Conditions */
.party-member-inline__conditions {
  padding: 8px 0;
}

.party-member-inline__conditions-label {
  display: block;
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  margin-bottom: 6px;
}

.party-member-inline__condition-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.party-member-inline__condition {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  background: var(--color-bg-tertiary, #242424);
  border: 1px solid var(--color-border, #3a3a3a);
  color: var(--color-text-secondary, #9ca3af);
}

.party-member-inline__condition--debuff {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.party-member-inline__condition--buff {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.party-member-inline__condition--concentration {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

/* Heal action button */
.entity-inline__action-btn--heal {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.entity-inline__action-btn--heal:hover {
  background: #ef4444;
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * Treasury Inline Panel
 * ======================================== */

.treasury-inline {
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
  margin: 12px 0;
  overflow: hidden;
  animation: entityInline-slideIn 0.2s ease-out;
}

.treasury-inline__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.treasury-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.treasury-inline__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.treasury-inline__icon {
  font-size: 1.2em;
}

.treasury-inline__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  flex-grow: 1;
}

.treasury-inline__close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1em;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.treasury-inline__close-btn:hover {
  background: var(--color-bg-hover, #333);
  color: var(--color-text-primary, #e0e0e0);
}

.treasury-inline__subtitle {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  margin-left: 28px;
}

.treasury-inline__content {
  padding: 12px 16px;
}

.treasury-inline__sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.treasury-inline__section {
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__section-title {
  margin: 0 0 10px 0;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-text-secondary, #bbb);
}

.treasury-inline__currency-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.treasury-inline__currency-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__currency-amount {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
  font-family: var(--font-mono, monospace);
}

.treasury-inline__currency-type {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  text-transform: lowercase;
}

.treasury-inline__items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.treasury-inline__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__item-name {
  color: var(--color-text-primary, #e5e7eb);
  font-size: 0.9em;
}

.treasury-inline__item-contributor {
  font-size: 0.75em;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.treasury-inline__empty {
  text-align: center;
  color: var(--color-text-muted, #888);
  font-style: italic;
  padding: 16px;
}

.treasury-inline__empty-currency {
  color: var(--color-text-muted, #888);
  font-style: italic;
  font-size: 0.9em;
  margin: 0;
}

.treasury-inline__footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__tip {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .entity-inline__ability-scores {
    grid-template-columns: repeat(3, 1fr);
  }

  .entity-inline__combat-stats {
    flex-direction: column;
    gap: 8px;
  }

  .entity-inline__action-bar {
    flex-direction: column;
  }

  .entity-inline__action-btn {
    width: 100%;
    justify-content: center;
  }

  .entity-inline__chip-list {
    gap: 4px;
  }

  .entity-inline__chip {
    padding: 3px 8px;
    font-size: 0.8em;
  }

  .location-widget {
    max-width: 140px;
  }

  .location-widget__name {
    font-size: 0.8em;
  }

  .npc-inline__history-item {
    flex-wrap: wrap;
  }

  .npc-inline__history-time {
    width: 100%;
    margin-top: 4px;
  }
}
/* Zone-Based Panel Architecture CSS
 * ===================================
 * Styles for the zone-based layout system.
 *
 * Zones:
 * - status: Header area (managed by _status_bar.css)
 * - left: Left sidebar
 * - right: Right sidebar
 * - main: Center split container
 * - footer: Bottom dock (managed by floating_dock)
 * - center_solo: Fullscreen single panel
 */

/* ==========================================
 * Terminal Zones Container
 * ========================================== */

.terminal-zones {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ==========================================
 * Sidebar Zones (Left & Right)
 * ========================================== */

.zone {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, min-width 0.25s ease, opacity 0.25s ease;
}

/* STRUCTURAL: contain:layout prevents pseudo-elements and positioned children
 * from escaping the zone boundary. This makes CSS overflow bugs in zone
 * sidebars structurally contained rather than cascading to other elements. */
.zone--left {
  width: var(--zone-left-width, 280px);
  min-width: var(--zone-left-min, 200px);
  max-width: var(--zone-left-max, 400px);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  contain: layout;
}

.zone--right {
  width: var(--zone-right-width, 320px);
  min-width: var(--zone-right-min, 200px);
  max-width: var(--zone-right-max, 500px);
  border-left: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  contain: layout;
}

.zone--main {
  flex: 1;
  min-width: 300px;
  overflow: hidden;
}

/* Collapsed state */
.zone--collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Dockable zone sidebar indicator strip (#1555)
 * Shows a thin colored strip on hover when a sidebar zone is collapsed,
 * hinting that a dockable panel zone exists and can be expanded.
 * Desktop-only: the negative-offset pseudo-elements overflow on mobile. */
@media (min-width: 769px) {
  .zone--left.zone--collapsed,
  .zone--right.zone--collapsed {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
  }

  .zone--left.zone--collapsed::before,
  .zone--right.zone--collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
    z-index: var(--z-sticky);
  }

  .zone--left.zone--collapsed::before {
    right: -4px;
  }

  .zone--right.zone--collapsed::before {
    left: -4px;
  }

  .zone--left.zone--collapsed:hover::before,
  .zone--right.zone--collapsed:hover::before {
    background: var(--color-accent-primary, #7c3aed);
  }
}

/* ==========================================
 * Zone Header (for sidebar zones)
 * ========================================== */

.zone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.zone__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zone__actions {
  display: flex;
  gap: var(--spacing-xs);
}

.zone__action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zone__action-btn:hover {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ==========================================
 * Zone Content
 * ========================================== */

.zone__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-sm);
}

/* ==========================================
 * Zone Toggle Handles
 * ========================================== */

.zone-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 48px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.zone-toggle:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
}

.zone-toggle--left {
  right: -16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

.zone-toggle--right {
  left: -16px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}

.zone-toggle__icon {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.zone--collapsed .zone-toggle__icon {
  transform: rotate(180deg);
}

/* ==========================================
 * Center Solo (Fullscreen) Mode
 * ========================================== */

.center-solo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.center-solo-overlay.active {
  opacity: 1;
  visibility: visible;
}

.center-solo__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.center-solo__header {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.center-solo__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.center-solo__close:hover {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
  color: #fff;
}

.center-solo__content {
  flex: 1;
  overflow: hidden;
  padding: var(--spacing-md);
}

/* When center solo is active, hide other UI */
body.center-solo-active .terminal-container > *:not(.center-solo-overlay) {
  opacity: 0.3;
  pointer-events: none;
}

/* ==========================================
 * Zone Resize Handles
 * ========================================== */

.zone-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  z-index: var(--z-float);
}

.zone-resize:hover,
.zone-resize.dragging {
  background: var(--color-accent-primary);
}

.zone-resize--left {
  right: 0;
}

.zone-resize--right {
  left: 0;
}

.zone-resize__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background 0.15s ease;
}

.zone-resize:hover .zone-resize__handle,
.zone-resize.dragging .zone-resize__handle {
  background: #fff;
}

/* ==========================================
 * Responsive
 * ========================================== */

@media (max-width: 1024px) {
  /* On tablets, sidebars become overlays */
  .zone--left,
  .zone--right {
    position: fixed;
    top: 60px;
    bottom: 60px;
    z-index: var(--z-panel);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

  .zone--left {
    left: 0;
    border-right: 1px solid var(--border-subtle);
  }

  .zone--right {
    right: 0;
    border-left: 1px solid var(--border-subtle);
  }

  .zone--collapsed {
    transform: translateX(-100%);
  }

  .zone--right.zone--collapsed {
    transform: translateX(100%);
  }

  /* Overlay backdrop when sidebar is open */
  .zone-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-panel);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .zone-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 768px) {
  /* On mobile, sidebars take full width */
  .zone--left,
  .zone--right {
    width: 100%;
    max-width: 100%;
  }

  /* Center solo takes full viewport */
  .center-solo__content {
    padding: var(--spacing-sm);
  }
}

/* ==========================================
 * Portrait-Mode Landscape Hint (#1547)
 * Gentle rotate prompt on VTT/map panels in portrait orientation.
 * Scoped to VTT/map panel containers only — not shown globally.
 * ========================================== */

.portrait-rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 480px) {
  .vtt-panel .portrait-rotate-hint,
  .dungeon-map-panel .portrait-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-secondary, #1a1a2e);
    border-bottom: 1px solid var(--border-subtle, #333);
    color: var(--text-muted, #888);
    font-size: 0.6875rem;
    font-family: var(--font-mono, monospace);
    text-align: center;
    flex-shrink: 0;
    animation: portrait-hint-fade 0.3s ease-out;
    animation-fill-mode: forwards;
  }

  .portrait-rotate-hint__icon {
    display: inline-block;
    transform: rotate(90deg);
    font-size: 0.875rem;
  }
}

@keyframes portrait-hint-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Combat Panel
 * ============
 * Combat overview panel showing current encounter status.
 */

/* ========================================
 * Base Layout
 * ======================================== */

.combat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-bg-primary);
}

.combat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.combat__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__icon {
  font-size: var(--font-size-base);
}

.combat__status-indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.combat__status-indicator--active {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

.combat__status-indicator--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.combat__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.combat__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: center;
}

/* ========================================
 * Combat Active State
 * ======================================== */

.combat__active {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Round Display */
.combat__round-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.combat__round-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.combat__round-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
}

/* Current Turn */
.combat__current-turn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-primary);
}

.combat__turn-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.combat__turn-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* HP Display */
.combat__hp-display {
  padding: var(--space-2);
}

.combat__hp-bar-container {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.combat__hp-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-success) 0%, var(--color-accent-success) 50%, var(--color-accent-warning) 75%, var(--color-accent-error) 100%);
  background-size: 200% 100%;
  background-position: calc((1 - var(--hp-percent, 1)) * 100%) 0;
  border-radius: var(--radius-pill);
  transform-origin: left;
  transition: transform 0.3s ease, background-position 0.3s ease;
}

.combat__hp-text {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

/* Your Turn Actions */
.combat__your-turn {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-success) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-success) 30%, transparent);
  border-radius: var(--radius-md);
}

.combat__actions-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__action-economy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Action Token Group - holds action, bonus, reaction */
.action-token-group {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Individual Action Token */
.action-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 52px;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  font-size: var(--font-size-base);
  cursor: help;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.action-token:hover:not(.action-token--used) {
  transform: scale(1.05);
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
}

.action-token:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
  position: relative;
}

.action-token__icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.action-token__label {
  font-size: var(--font-size-xxs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Color coding for different action types */
.action-token--action {
  border-color: color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
}

.action-token--action:hover:not(.action-token--used) {
  border-color: var(--color-accent-warning);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

.action-token--bonus {
  border-color: color-mix(in srgb, var(--color-accent-secondary) 40%, transparent);
}

.action-token--bonus:hover:not(.action-token--used) {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

.action-token--reaction {
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

.action-token--reaction:hover:not(.action-token--used) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Used state */
.action-token--used {
  opacity: 0.4;
  filter: grayscale(0.8);
  border-color: var(--color-border-subtle);
  cursor: default;
}

/* Animation when token is just used */
.action-token--just-used {
  animation: token-spent 0.5s ease-out;
}

@keyframes token-spent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
}

/* Movement Display */
.action-token-movement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.action-token-movement .action-token__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.movement-bar-container {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 80px;
}

.movement-bar {
  height: 100%;
  background: var(--color-accent-success);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.movement-bar--low {
  background: var(--color-accent-warning);
}

.movement-bar--depleted {
  background: var(--color-accent-error);
}

.movement-text {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 65px;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
}

.movement-text__current {
  font-weight: var(--font-weight-bold);
}

.movement-text__separator {
  color: var(--color-text-muted);
}

.movement-text__base {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.movement-text__unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: 1px;
}

/* HP Bar color states */
.hp-bar--healthy {
  background: var(--color-accent-success);
}

.hp-bar--injured {
  background: var(--color-accent-warning);
}

.hp-bar--critical {
  background: var(--color-accent-error);
  animation: hp-critical-pulse 1s ease-in-out infinite;
}

@keyframes hp-critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Status indicator variants */
.combat__status--combat {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

.combat__status--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

.combat__status--waiting {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.combat__status--ended {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.combat__turn-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Quick Action Buttons
 * ======================================== */

.combat__quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.combat__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.combat__action-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.combat__action-btn:active {
  transform: translateY(0);
}

.combat__action-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
  position: relative;
}

.combat__action-btn--attack {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.combat__action-btn--attack:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border-hover);
  color: var(--color-danger-text-hover);
}

.combat__action-btn--sent {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  transform: scale(0.95);
}

.combat__action-icon {
  font-size: var(--font-size-base);
}

.combat__action-label {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Responsive: 2 columns on smaller panels */
@media (max-width: 320px) {
  .combat__quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Quick Stats */
.combat__quick-stats {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.combat__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.combat__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .combat__header {
    padding: var(--space-2);
  }

  .combat__content {
    padding: var(--space-2);
  }

  .combat__quick-stats {
    flex-wrap: wrap;
  }

  .combat__stat {
    flex: 1;
    min-width: 70px;
  }

  /* Action tokens on mobile - improved accessibility */
  .action-token {
    width: 52px;
    height: 52px;
    min-width: 48px;
    min-height: 48px;
  }

  .action-token__label {
    display: none;
  }

  .action-token__icon {
    font-size: var(--font-size-xl);
  }

  .action-token-group {
    gap: var(--space-2);
  }

  .action-token-movement {
    padding: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .movement-bar-container {
    min-width: 100%;
    order: 3;
  }

  .movement-text {
    font-size: var(--font-size-sm);
    min-width: auto;
    flex: 1;
  }

  .movement-text__base {
    display: none; /* Hide base on very small screens */
  }
}

/* Very small screens - stack action tokens vertically if needed */
@media (max-width: 360px) {
  .action-token-group {
    flex-wrap: wrap;
    justify-content: space-around;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .combat__status-indicator--your-turn,
  .combat__status--your-turn,
  .hp-bar--critical {
    animation: none;
  }

  .combat__hp-bar,
  .movement-bar,
  .action-token {
    transition: none;
  }

  .action-token--just-used {
    animation: none;
  }
}

/* ========================================
 * Combat Status Widget (Status Bar)
 * ======================================== */

.combat-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.combat-widget:hover {
  background: var(--color-bg-hover);
}

.combat-widget--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 15%, transparent);
  color: var(--color-accent-success);
}

.combat-widget--your-turn:hover {
  background: color-mix(in srgb, var(--color-accent-success) 25%, transparent);
}

.combat-widget__icon {
  font-size: var(--font-size-base);
  line-height: 1;
}

.combat-widget__round {
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
}

.combat-widget__separator {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.combat-widget__your-turn {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-success);
  animation: combat-widget-pulse 2s ease-in-out infinite;
}

.combat-widget__other-turn {
  color: var(--color-text-secondary);
}

.combat-widget__waiting {
  color: var(--color-text-muted);
  font-style: italic;
}

.combat-widget__concentration {
  margin-left: var(--space-1);
  font-size: var(--font-size-base);
  cursor: help;
}

@keyframes combat-widget-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .combat-widget__your-turn {
    animation: none;
  }
}

/* ========================================
 * Initiative Sidebar (Zone-Based)
 * ======================================== */

.initiative-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 180px;
  background: var(--color-bg-primary);
}

.initiative-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.initiative-sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.initiative-sidebar__round {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.initiative-sidebar__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  overflow-y: auto;
}

.initiative-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.initiative-sidebar__empty-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.initiative-sidebar__empty-text {
  font-size: var(--font-size-sm);
}

/* Initiative Row */
.initiative-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.initiative-row:hover {
  background: var(--color-bg-hover);
}

.initiative-row--current {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-left-color: var(--color-accent-primary);
}

.initiative-row--player {
  border-left-color: var(--color-accent-success);
}

.initiative-row--current.initiative-row--player {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-secondary));
  border-left-color: var(--color-accent-success);
}

.initiative-row__order {
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.initiative-row--current .initiative-row__order {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.initiative-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.initiative-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.initiative-row__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.initiative-row__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.initiative-row__turn-indicator {
  color: var(--color-accent-success);
  font-size: var(--font-size-xs);
  margin-left: auto;
  animation: initiative-pulse 1s ease-in-out infinite;
}

@keyframes initiative-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

.initiative-row__hp {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.initiative-row__hp-bar {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.initiative-row__hp-bar--healthy {
  background: var(--color-accent-success);
}

.initiative-row__hp-bar--injured {
  background: var(--color-accent-warning);
}

.initiative-row__hp-bar--critical {
  background: var(--color-accent-error);
  animation: hp-critical-pulse 1s ease-in-out infinite;
}

.initiative-row__conditions {
  display: flex;
  gap: var(--space-1);
}

.initiative-condition {
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: help;
}

/* Responsive */
@media (max-width: 768px) {
  .initiative-sidebar {
    min-width: 160px;
  }

  .initiative-row__order {
    min-width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
  }

  .initiative-row__label {
    font-size: var(--font-size-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .initiative-row__turn-indicator,
  .initiative-row__hp-bar--critical {
    animation: none;
  }
}

/* ========================================
 * Combat Result Inline (Enhanced)
 * ======================================== */

.combat-result-enhanced {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-error);
}

.combat-result__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.combat-result__icon {
  font-size: var(--font-size-base);
}

.combat-result__action {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-error);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat-result__vs {
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* Attack Roll */
.combat-result__attack,
.combat-result__save {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.combat-result__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 80px;
}

.combat-result__roll {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
}

.combat-result__roll--hit {
  color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
}

.combat-result__roll--miss {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.combat-result__roll--crit {
  color: var(--color-accent-warning);
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-tertiary));
  animation: crit-glow 0.5s ease-out;
}

.combat-result__roll--fumble {
  color: var(--color-accent-error);
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-tertiary));
}

@keyframes crit-glow {
  0% { box-shadow: 0 0 0 0 var(--color-accent-warning); transform: scale(1); }
  50% { box-shadow: 0 0 12px 4px var(--color-accent-warning); transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.combat-result__breakdown {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.combat-result__crit-badge {
  background: var(--color-accent-warning);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  animation: badge-pop 0.3s ease-out;
}

.combat-result__fumble-badge {
  background: var(--color-accent-error);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.combat-result__ac {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Damage */
.combat-result__damage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.combat-result__damage-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-accent-error);
}

.combat-result__damage-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.combat-result__damage--resisted .combat-result__damage-value {
  text-decoration: line-through;
  opacity: 0.7;
}

.combat-result__damage--vulnerable .combat-result__damage-value {
  color: var(--color-accent-warning);
}

.combat-result__resist-badge {
  background: var(--color-accent-secondary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

.combat-result__vuln-badge {
  background: var(--color-accent-warning);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

/* Save */
.combat-result__save-outcome {
  font-weight: var(--font-weight-semibold);
}

/* Condition */
.combat-result__condition {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.combat-result__condition--applied {
  background: color-mix(in srgb, var(--color-accent-warning) 15%, var(--color-bg-tertiary));
  border-left: 2px solid var(--color-accent-warning);
}

.combat-result__condition--removed {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
  border-left: 2px solid var(--color-accent-success);
}

.combat-result__condition-icon {
  font-size: var(--font-size-sm);
}

.combat-result__condition-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.combat-result__condition-action {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.combat-result__condition-duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* HP Change */
.combat-result__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.combat-result__hp--damage .combat-result__hp-change {
  color: var(--color-accent-error);
}

.combat-result__hp--healing .combat-result__hp-change {
  color: var(--color-accent-success);
}

.combat-result__hp-arrow {
  color: var(--color-text-muted);
}

.combat-result__hp-before {
  color: var(--color-text-muted);
}

.combat-result__hp-after {
  font-weight: var(--font-weight-bold);
}

.combat-result__hp-change {
  font-weight: var(--font-weight-semibold);
}

/* Summary */
.combat-result__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .combat-result__roll--crit,
  .combat-result__crit-badge {
    animation: none;
  }
}
/**
 * Equipment Slots Panel
 * =====================
 * Visual display of character equipment organized by body slot.
 */

/* ========================================
 * Base Layout
 * ======================================== */

.equipment-slots {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 260px;
  background: var(--color-bg-primary);
}

.equipment-slots__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.equipment-slots__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-slots__stats {
  display: flex;
  gap: var(--space-3);
}

.equipment-slots__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.equipment-slots__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-slots__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
}

.equipment-slots__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.equipment-slots__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.equipment-slots__equipped-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Slots Grid
 * ======================================== */

.es-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.es-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.es-slot--large {
  grid-column: span 2;
}

.es-slot__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.es-slot__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.es-slot__item:hover:not(.es-slot__item--empty) {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.es-slot__item--empty {
  border-style: dashed;
  cursor: default;
}

.es-slot__empty-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Weapon slots - slightly taller */
.es-slot--weapon .es-slot__item {
  min-height: 52px;
}

/* Small slots (rings) */
.es-slot--small .es-slot__item {
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
}

/* ========================================
 * Equipped Item Display
 * ======================================== */

.es-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
}

.es-item__name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-item__attuned {
  color: var(--color-accent-secondary, var(--color-gold));
  font-weight: var(--font-weight-bold);
  margin-left: auto;
}

/* Rarity colors */
.es-item--common .es-item__name {
  color: var(--color-text-primary);
}

.es-item--uncommon .es-item__name {
  color: var(--color-rarity-uncommon, #1eff00);
}

.es-item--rare .es-item__name {
  color: var(--color-rarity-rare, #0070dd);
}

.es-item--very_rare .es-item__name,
.es-item--veryrare .es-item__name {
  color: var(--color-rarity-very-rare, #a335ee);
}

.es-item--legendary .es-item__name {
  color: var(--color-rarity-legendary, #ff8000);
}

.es-item--artifact .es-item__name {
  color: var(--color-rarity-artifact, #e6cc80);
  text-shadow: 0 0 8px var(--color-rarity-artifact, #e6cc80);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .equipment-slots__header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .equipment-slots__stats {
    width: 100%;
    justify-content: flex-end;
  }

  .equipment-slots__content {
    padding: var(--space-2);
  }

  .es-grid {
    gap: var(--space-1);
  }

  .es-slot__item {
    min-height: 40px;
  }
}

@media (max-width: 375px) {
  .es-grid {
    grid-template-columns: 1fr;
  }

  .es-slot--large {
    grid-column: span 1;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .es-slot__item {
    transition: none;
  }
}
/**
 * Memories Panel
 * ==============
 * Displays character memories grouped by importance and recency.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Layout
 * ======================================== */

.memories-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.memories-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.memories-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.memories-breakdown {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ========================================
 * Memory Sections (Collapsible)
 * ======================================== */

.memories-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.memories-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  min-height: 44px;
  transition: background var(--transition-fast);
}

.memories-section__header:hover {
  background: var(--color-bg-hover);
}

.memories-section__header:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

.memories-section__header::-webkit-details-marker {
  display: none;
}

.memories-section__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.memories-section__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.memories-section__toggle {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.memories-section[open] .memories-section__toggle {
  transform: rotate(180deg);
}

.memories-section__content {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

/* Section Type Variants */
.memories-section--core .memories-section__header {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-tertiary));
}

.memories-section--core .memories-section__title {
  color: var(--color-gold);
}

.memories-section--recent .memories-section__header {
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.memories-section--distant .memories-section__header {
  background: var(--color-bg-tertiary);
}

.memories-section--distant .memories-section__title {
  color: var(--color-text-muted);
}

/* ========================================
 * Memory Entry
 * ======================================== */

.memory-entry {
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-text-muted);
  transition: border-color 0.15s ease;
}

.memory-entry:hover {
  border-color: var(--color-border-hover);
}

/* Importance-based border colors (like item rarity) */
.memory-entry--importance-5 {
  border-left-color: var(--color-gold);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    var(--color-bg-primary) 100%
  );
}

.memory-entry--importance-4 {
  border-left-color: var(--color-accent-purple);
}

.memory-entry--importance-3 {
  border-left-color: var(--color-accent-primary);
}

.memory-entry--importance-2 {
  border-left-color: var(--color-accent-secondary);
}

.memory-entry--importance-1 {
  border-left-color: var(--color-text-muted);
}

/* Core section entries have stronger highlight */
.memory-entry--core {
  background: color-mix(in srgb, var(--color-gold) 5%, var(--color-bg-primary));
}

/* ========================================
 * Memory Entry Header
 * ======================================== */

.memory-entry__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.memory-entry__icon {
  font-size: var(--font-size-base);
  width: 20px;
  text-align: center;
}

.memory-entry__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.memory-entry__importance {
  font-size: var(--font-size-xs);
}

.memory-stars {
  color: var(--color-gold);
  letter-spacing: -1px;
}

.memory-entry__age {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ========================================
 * Memory Badges
 * ======================================== */

.memory-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.memory-badge--verified {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
}

.memory-badge--contradicted {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

/* ========================================
 * Memory Entry Summary
 * ======================================== */

.memory-entry__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

/* ========================================
 * Memory Entry Stimulus (What Happened)
 * ======================================== */

.memory-entry__stimulus {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-default);
  font-style: italic;
}

/* ========================================
 * Memory Detail Response (Context)
 * ======================================== */

.memory-detail--response {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
  line-height: 1.5;
}

/* ========================================
 * Memory Entry Details (Expandable)
 * ======================================== */

.memory-entry__details {
  margin-top: var(--space-1);
}

.memory-entry__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  list-style: none;
}

.memory-entry__details-toggle::-webkit-details-marker {
  display: none;
}

.memory-entry__details-toggle::before {
  content: '▸';
  font-size: 0.7em;
  transition: transform var(--transition-fast);
}

.memory-entry__details[open] .memory-entry__details-toggle::before {
  transform: rotate(90deg);
}

.memory-entry__details-toggle:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.memory-entry__details-toggle:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.memory-entry__details-content {
  padding: var(--space-2);
  margin-top: var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.memory-detail {
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
}

.memory-detail:last-child {
  margin-bottom: 0;
}

.memory-detail strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* ========================================
 * Loading/Waiting State
 * ======================================== */

.memories-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-waiting__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  animation: memories-pulse 1.5s ease-in-out infinite;
}

.memories-waiting__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.memories-waiting__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

@keyframes memories-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ========================================
 * Empty State
 * ======================================== */

.memories-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-empty__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.memories-empty__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  font-weight: var(--font-weight-medium);
}

.memories-empty__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* ========================================
 * Error State
 * ======================================== */

.memories-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-error__icon {
  font-size: 2.5rem;
  color: var(--color-accent-warning);
  margin-bottom: var(--space-3);
}

.memories-error__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--font-weight-medium);
}

.memories-error__retry {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
}

.memories-error__retry:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.memories-error__retry:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.memories-error__retry:active {
  transform: scale(0.98);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .memories-section__content {
    max-height: 200px;
  }

  .memory-entry__header {
    flex-wrap: wrap;
  }

  .memory-entry__age {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-1);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .memories-section__toggle {
    transition: none;
  }

  .memory-entry {
    transition: none;
  }
}
/**
 * Room History Panel
 * ==================
 * Cross-session room history with infinite scroll.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Container
 * ======================================== */

.room-history {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.room-history__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-2);
  flex: 1;
  min-height: 0;
}

/* ========================================
 * Toggle Button
 * ======================================== */

.room-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.room-history__toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.room-history__toggle:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

.room-history__toggle--active {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.room-history__toggle--active:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-bg-secondary));
}

.room-history__toggle-icon {
  font-size: var(--font-size-sm);
}

/* ========================================
 * Session Boundary Divider
 * ======================================== */

.room-history__session-boundary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  -webkit-user-select: none;
  user-select: none;
}

.room-history__session-boundary-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-subtle) 20%,
    var(--color-border-subtle) 80%,
    transparent
  );
}

.room-history__session-boundary-label {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ========================================
 * History Entry
 * ======================================== */

.room-history__entry {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-text-muted);
}

.room-history__entry--dm {
  border-left-color: var(--color-accent-primary);
}

.room-history__entry--player,
.room-history__entry--user {
  border-left-color: var(--color-accent-secondary);
  background: color-mix(in srgb, var(--color-accent-secondary) 5%, var(--color-bg-primary));
}

.room-history__entry--system {
  border-left-color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.room-history__entry--error {
  border-left-color: var(--color-accent-error);
  background: color-mix(in srgb, var(--color-accent-error) 5%, var(--color-bg-primary));
}

.room-history__entry-content {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* Ensure nested narrative segments display correctly */
.room-history__entry-content .narrative-segment {
  margin-bottom: var(--space-1);
}

.room-history__entry-content .narrative-segment:last-child {
  margin-bottom: 0;
}

.room-history__entry-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.room-history__entry-meta time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ========================================
 * Loading State
 * ======================================== */

.room-history__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
}

.room-history__loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: room-history-spin 0.8s linear infinite;
}

@keyframes room-history-spin {
  to {
    transform: rotate(360deg);
  }
}

.room-history__loading-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ========================================
 * Empty State
 * ======================================== */

.room-history__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.room-history__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.room-history__empty-message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.room-history__empty-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ========================================
 * Error State
 * ======================================== */

.room-history__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  background: color-mix(in srgb, var(--color-accent-error) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
  border-radius: var(--radius-md);
}

.room-history__error-icon {
  font-size: 1.5rem;
  color: var(--color-accent-error);
  margin-bottom: var(--space-2);
}

.room-history__error-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ========================================
 * Sentinel (Infinite Scroll Trigger)
 * ======================================== */

.room-history__sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
}

/* ========================================
 * Header Bar (contains toggle)
 * ======================================== */

.room-history__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

/* ========================================
 * Hidden Utility
 * Elements use BEM naming so we target them directly
 * ======================================== */

.room-history__loading.hidden,
.room-history__empty.hidden,
.room-history__error.hidden {
  display: none;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .room-history__toggle {
    padding: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .room-history__entry {
    padding: var(--space-2);
  }

  .room-history__session-boundary-label {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .room-history__loading-spinner {
    animation: none;
    border-top-color: var(--color-accent-primary);
    opacity: 0.7;
  }

  .room-history__toggle {
    transition: none;
  }
}
/* Party Panel */
/* Generated by MDSL */

.party {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.party__header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.party__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.party__content {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
}

.party__footer {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

/* Member Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-xs);
  font-size: 0.75rem;
  line-height: 1;
  cursor: help;
}

.status-badge[data-status="active"] {
  animation: pulse-active 2s ease-in-out infinite;
}

@keyframes pulse-active {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Online indicator enhancement */
.online-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
  background-color: var(--color-text-muted);
  transition: background-color 0.3s ease;
}

.online-indicator[data-online="true"] {
  background-color: #22c55e;
}

.online-indicator[data-status="idle"] {
  background-color: #eab308;
}

.online-indicator[data-status="away"] {
  background-color: #6b7280;
}

/* Turn Status Bar */
.turn-status-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.turn-number {
  font-weight: 600;
  color: var(--color-text-primary);
}

.turn-status-processing {
  color: #eab308;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.turn-status-processing svg {
  width: 12px;
  height: 12px;
  animation: spin-slow 2s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.turn-status-allready {
  color: #22c55e;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.turn-status-allready svg {
  width: 12px;
  height: 12px;
}

.turn-status-waiting {
  color: var(--color-text-muted);
}

/* Submission Progress Segments */
.submission-progress {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}

.progress-segment {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background-color 0.3s ease;
}

.progress-segment.filled {
  background: #22c55e;
}

/* Turn Timer Display */
.turn-timer-display {
  font-family: monospace;
  color: var(--color-text-primary);
  font-size: 0.75rem;
}

.turn-timer-display.timer-low {
  color: #ef4444;
  animation: pulse-active 1s ease-in-out infinite;
}

/* Member Action Badges */
.member-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 2px;
}

.member-action-badge svg {
  width: 10px;
  height: 10px;
}

.badge-waiting {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

.badge-ready {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.badge-acting {
  color: #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.badge-done {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  opacity: 0.6;
}

/* Their Turn - pulsing border for turn-based current character */
.party-member-card.their-turn {
  border-color: #eab308;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.3);
  animation: pulse-turn 2s ease-in-out infinite;
}

@keyframes pulse-turn {
  0%, 100% { box-shadow: 0 0 6px rgba(234, 179, 8, 0.3); }
  50% { box-shadow: 0 0 12px rgba(234, 179, 8, 0.5); }
}

/* Clickable Member Cards */
.party-member-card.clickable {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.party-member-card.clickable:hover {
  border-color: var(--color-text-secondary, #9ca3af);
  box-shadow: 0 0 6px rgba(156, 163, 175, 0.2);
}

.party-member-card.clickable:active {
  box-shadow: 0 0 3px rgba(156, 163, 175, 0.15);
}

/* Read-Only Sheet (modal content) */
.ro-sheet {
  font-size: 0.85rem;
  color: var(--color-text-primary, #e5e7eb);
  line-height: 1.4;
}

.ro-sheet__header {
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__identity {
  display: flex;
  gap: var(--spacing-xs, 4px);
  flex-wrap: wrap;
  align-items: baseline;
}

.ro-sheet__race,
.ro-sheet__bg {
  color: var(--color-text-secondary, #9ca3af);
}

.ro-sheet__class {
  font-weight: 600;
}

.ro-sheet__conditions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ro-sheet__condition {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Stats Row */
.ro-sheet__stats-row {
  display: flex;
  gap: var(--spacing-sm, 8px);
  margin-bottom: var(--spacing-sm, 8px);
  padding: var(--spacing-xs, 4px) 0;
  border-top: 1px solid var(--color-border, #374151);
  border-bottom: 1px solid var(--color-border, #374151);
}

.ro-sheet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.ro-sheet__stat-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__stat-label {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Abilities Grid */
.ro-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
}

.ro-sheet__ability-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ro-sheet__ability-mod {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__ability-score {
  font-size: 0.65rem;
  color: var(--color-text-secondary, #9ca3af);
}

/* Sections */
.ro-sheet__section {
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__section-title {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #6b7280);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #374151);
  padding-bottom: 2px;
}

/* Skills */
.ro-sheet__skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 12px;
  font-size: 0.75rem;
}

.ro-sheet__skill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 0;
  color: var(--color-text-secondary, #9ca3af);
}

.ro-sheet__skill.proficient {
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__skill-prof {
  font-size: 0.6rem;
}

.ro-sheet__skill-bonus {
  font-family: monospace;
  min-width: 2em;
  text-align: right;
}

.ro-sheet__skill-name {
  flex: 1;
}

/* Equipment */
.ro-sheet__equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ro-sheet__equip-item {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, #374151);
}

.ro-sheet__none {
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

/* Features */
.ro-sheet__feature {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 0.75rem;
}

.ro-sheet__feature-name {
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__feature-level {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.65rem;
}

/* Spells */
.ro-sheet__spell-meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #9ca3af);
  margin-bottom: 4px;
}

.ro-sheet__spell-group {
  font-size: 0.75rem;
  margin-bottom: 2px;
}

.ro-sheet__spell-label {
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
}

/* Loading state */
.sheet-loading {
  text-align: center;
  padding: var(--spacing-lg, 16px);
  color: var(--color-text-muted, #6b7280);
}

/* ========================================
 * Party Status Widget (Status Bar)
 * ======================================== */

.party-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #9ca3af);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background-color 0.15s ease;
}

.party-widget:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.party-widget--empty {
  opacity: 0.6;
}

.party-widget--alert {
  background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 15%, transparent);
}

.party-widget--alert:hover {
  background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 25%, transparent);
}

.party-widget__icon {
  font-size: var(--font-size-base, 1rem);
  line-height: 1;
}

.party-widget__count {
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-primary, #e5e7eb);
}

.party-widget__separator {
  color: var(--color-text-muted, #6b7280);
  margin: 0 var(--space-1, 4px);
}

.party-widget__label {
  color: var(--color-text-muted, #6b7280);
}

.party-widget__hp-bars {
  display: flex;
  gap: 3px;
  align-items: center;
}

.party-widget__hp-bar {
  position: relative;
  width: 20px;
  height: 12px;
  background: var(--color-bg-tertiary, #1f2937);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--color-border, #374151);
}

.party-widget__hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #22c55e;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-widget__hp-bar--healthy .party-widget__hp-fill {
  background: #22c55e;
}

.party-widget__hp-bar--injured .party-widget__hp-fill {
  background: #eab308;
}

.party-widget__hp-bar--critical .party-widget__hp-fill {
  background: #ef4444;
  animation: pulse-hp 1s ease-in-out infinite;
}

.party-widget__hp-bar--down .party-widget__hp-fill {
  background: #6b7280;
}

.party-widget__hp-bar--down {
  border-color: #ef4444;
}

@keyframes pulse-hp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.party-widget__hp-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-primary, #e5e7eb);
  text-transform: uppercase;
  z-index: var(--z-raised);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.party-widget__alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-error, #ef4444);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: var(--space-1, 4px);
  animation: pulse-alert 1.5s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .party-widget__hp-bar--critical .party-widget__hp-fill,
  .party-widget__alert-badge {
    animation: none;
  }
}

/* ========================================
 * DM Disconnected State
 * ======================================== */

.dm-disconnected {
  position: relative;
}

.dm-disconnected::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: var(--z-raised);
  border-radius: inherit;
}

/* Combat paused indicator */
.combat-indicator.paused {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.combat-indicator.paused .combat-label {
  color: #f59e0b;
}

.combat-indicator.paused::after {
  content: ' (DM Offline)';
  font-size: 0.7rem;
  color: var(--color-text-muted, #6b7280);
}

/* Party notification styling */
.party-notifications {
  position: absolute;
  top: var(--spacing-sm, 8px);
  left: var(--spacing-sm, 8px);
  right: var(--spacing-sm, 8px);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  pointer-events: none;
}

.party-notification {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  background: var(--color-bg-secondary, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-primary, #e5e7eb);
  animation: notification-slide-in 0.3s ease-out;
  pointer-events: auto;
}

/* ========================================
 * Scene Presence Tracking
 * ======================================== */

/* Character is in a different location */
.party-member-card.scene-absent {
  opacity: 0.6;
  filter: grayscale(30%);
}

.party-member-card.scene-absent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.05) 20px
  );
  pointer-events: none;
  border-radius: inherit;
}

.scene-indicator {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  margin-left: var(--spacing-xs, 4px);
}

/* ========================================
 * Typing Indicator
 * ======================================== */

.typing-indicator {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  border-top: 1px solid var(--color-border, #374151);
  animation: typing-pulse 1.5s ease-in-out infinite;
}

@keyframes typing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Member card typing state */
.party-member-card.is-typing {
  border-color: var(--color-accent-primary, #3b82f6);
}

.party-member-card.is-typing::before {
  content: '...';
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 1rem;
  color: var(--color-accent-primary, #3b82f6);
  animation: typing-dots 1s steps(4, end) infinite;
}

@keyframes typing-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Player Whisper Styles */
.party-whisper-log {
  max-height: 120px;
  overflow-y: auto;
  border-top: 1px dashed var(--color-border, #374151);
  padding: var(--spacing-xs, 4px);
  margin-top: var(--spacing-xs, 4px);
}

.party-whisper {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  margin-bottom: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  animation: whisper-fade-in 0.3s ease-out;
}

.party-whisper.whisper-sent {
  background: rgba(59, 130, 246, 0.1);
  border-left: 2px solid var(--color-accent-primary, #3b82f6);
  color: var(--color-text-secondary, #9ca3af);
}

.party-whisper.whisper-received {
  background: rgba(139, 92, 246, 0.15);
  border-left: 2px solid #8b5cf6;
  color: var(--color-text-primary, #e5e7eb);
}

.whisper-header {
  font-weight: 600;
  font-style: italic;
  color: #8b5cf6;
  margin-right: 4px;
}

.whisper-sent .whisper-header {
  color: var(--color-accent-primary, #3b82f6);
}

.whisper-text {
  color: inherit;
}

@keyframes whisper-fade-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Whisper button on member cards */
.btn-whisper {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.party-member-card {
  position: relative;
}

.party-member-card:hover .btn-whisper {
  opacity: 1;
}

.btn-whisper:hover {
  background: rgba(139, 92, 246, 0.4);
}

.btn-whisper:active {
  background: rgba(139, 92, 246, 0.6);
}

/* ========================================
 * Player Avatar (inline in member cards)
 * ======================================== */

.player-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.15s ease;
}

.player-avatar-status-ring {
  border: 2px solid #22c55e;
  border-radius: 50%;
  padding: 1px;
  transition: border-color 0.3s ease;
}

.player-avatar-wrapper[data-status="idle"] .player-avatar-status-ring {
  border-color: #f59e0b;
}

.player-avatar-wrapper[data-status="afk"] .player-avatar-status-ring {
  border-color: #6b7280;
}

.player-avatar-wrapper[data-status="in_combat"] .player-avatar-status-ring {
  border-color: #ef4444;
}

.player-avatar-wrapper[data-status="in_dialogue"] .player-avatar-status-ring {
  border-color: #8b5cf6;
}

.player-avatar-wrapper[data-status="typing"] .player-avatar-status-ring {
  border-color: #3b82f6;
}

.player-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary, #1f2937);
}

.player-avatar__img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.player-avatar__fallback {
  display: block;
}

.player-avatar-name {
  font-size: 0.6rem;
  color: var(--color-text-muted, #6b7280);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  display: none; /* Hidden in inline card context; shown in standalone avatar views */
}

.player-avatar-class {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-accent-primary, #6366f1);
  margin-left: 2px;
}

/* When avatar is used inside party roster (character sheet) */
.party-roster__portrait .player-avatar-wrapper {
  width: 36px;
  height: 36px;
}

.party-roster__portrait .player-avatar-status-ring {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-roster__portrait .player-avatar-name {
  display: none;
}

/* When avatar is used inside party panel member card */
.member-portrait .player-avatar-wrapper {
  width: 36px;
  height: 36px;
}

.member-portrait .player-avatar-status-ring {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-portrait .player-avatar-name {
  display: none;
}

.btn-whisper svg {
  width: 14px;
  height: 14px;
}

/* Whisper compose modal */
.whisper-compose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.whisper-compose__recipient {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary, #9ca3af);
}

.whisper-compose__recipient strong {
  color: #8b5cf6;
}

.whisper-compose__input {
  width: 100%;
  padding: var(--spacing-sm, 8px);
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.2));
  color: var(--color-text-primary, #e5e7eb);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
}

.whisper-compose__input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.whisper-compose__input::placeholder {
  color: var(--color-text-muted, #6b7280);
}

.whisper-compose__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs, 4px);
}

.whisper-compose__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}
/**
 * Party Treasury Panel Styles
 * ============================
 * Styles for the multiplayer party treasury panel including
 * deposit/withdraw modal and currency action buttons.
 */

/* ============================================================================
   Treasury Header and Actions
   ============================================================================ */

.treasury-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3, 0.75rem);
}

.treasury-section-title {
  margin: 0;
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

.treasury-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-secondary, #1a1a2e);
  color: var(--color-text-primary, #e5e5e5);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.treasury-btn svg {
  width: 1rem;
  height: 1rem;
}

.treasury-btn:hover {
  background: var(--color-bg-tertiary, #252540);
  border-color: var(--color-accent-primary, #61afef);
}

.treasury-btn:active {
  transform: translateY(1px);
}

.treasury-btn--deposit:hover {
  border-color: var(--color-success, #22C55E);
  color: var(--color-success, #22C55E);
}

.treasury-btn--withdraw:hover {
  border-color: var(--color-warning, #F59E0B);
  color: var(--color-warning, #F59E0B);
}

/* ============================================================================
   Treasury Modal
   ============================================================================ */

.treasury-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

.treasury-modal[hidden] {
  display: none;
}

.treasury-modal__content {
  width: 90%;
  max-width: 400px;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(97, 175, 239, 0.2);
  animation: slideIn 0.2s ease-out;
}

.treasury-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
}

.treasury-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease;
}

.treasury-modal__close:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__body {
  padding: var(--space-5, 1.25rem);
}

.treasury-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.form-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #b0b0b0);
}

.form-input,
.form-select {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.1);
}

.form-input::placeholder {
  color: var(--color-text-muted, #888);
}

.treasury-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-top: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
}

.treasury-modal__btn {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-weight: var(--font-weight-medium, 500);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.treasury-modal__btn--cancel {
  background: transparent;
  color: var(--color-text-secondary, #b0b0b0);
}

.treasury-modal__btn--cancel:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__btn--submit {
  background: var(--color-accent-primary, #61afef);
  color: white;
  border-color: var(--color-accent-primary, #61afef);
}

.treasury-modal__btn--submit:hover {
  background: #529fde;
  border-color: #529fde;
}

.treasury-modal__btn--submit:active {
  transform: translateY(1px);
}

/* ============================================================================
   Animations
   ============================================================================ */

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .treasury-modal__content {
    width: 95%;
  }

  .treasury-actions {
    flex-direction: column;
  }

  .treasury-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .treasury-modal,
  .treasury-modal__content,
  .treasury-btn {
    animation: none;
    transition: none;
  }
}
/**
 * Friends Panel
 * =============
 * Displays friends list and friend request management.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Layout
 * ======================================== */

.friends {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-bg-primary);
}

.friends__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.friends__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.friends__title svg {
  width: 16px;
  height: 16px;
}

.friends__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

/* ========================================
 * Section Headers
 * ======================================== */

.friends__section {
  margin-bottom: var(--space-4);
}

.friends__section:last-child {
  margin-bottom: 0;
}

.friends__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-subtle);
}

.friends__section-title svg {
  width: 14px;
  height: 14px;
}

/* Requests section has distinct styling */
.friends__section--requests {
  background: color-mix(in srgb, var(--color-accent-warning) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-border-default));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.friends__section--requests .friends__section-title {
  color: var(--color-accent-warning);
  border-bottom-color: color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* Blocked section has distinct styling */
.friends__section--blocked {
  background: color-mix(in srgb, var(--color-danger) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, var(--color-border-default));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-top: var(--space-3);
}

.friends__section--blocked .friends__section-title {
  color: var(--color-danger);
  border-bottom-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.friends__item--blocked {
  opacity: 0.7;
}

.friends__item--blocked .friends__item-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* ========================================
 * Friend List
 * ======================================== */

.friends__list,
.friends__requests-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ========================================
 * Friend/Request Item
 * ======================================== */

.friends__item,
.friends__request-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.friends__item:hover,
.friends__request-item:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-hover);
}

/* ========================================
 * Item Avatar
 * ======================================== */

.friends__item-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.friends__item-avatar svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

/* ========================================
 * Item Info
 * ======================================== */

.friends__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.friends__item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends__item-username {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* ========================================
 * Item Actions
 * ======================================== */

.friends__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.friends__item:hover .friends__item-actions,
.friends__item:focus-within .friends__item-actions,
.friends__request-item .friends__item-actions {
  opacity: 1;
}

/* Request items always show actions */
.friends__request-item .friends__item-actions {
  opacity: 1;
}

/* ========================================
 * Footer / Add Friend Form
 * ======================================== */

.friends__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.friends__add-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.friends__add-input {
  flex: 1;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.friends__add-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.friends__add-input::placeholder {
  color: var(--color-text-muted);
}

/* ========================================
 * Status Message
 * ======================================== */

.friends__status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  text-align: center;
}

.friends__status--success {
  background: color-mix(in srgb, var(--color-accent-secondary) 15%, transparent);
  color: var(--color-accent-secondary);
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

.friends__status--error {
  background: color-mix(in srgb, var(--color-accent-error) 15%, transparent);
  color: var(--color-accent-error);
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
}

.friends__status--info {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  color: var(--color-accent-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Button Variants
 * ======================================== */

.friends .btn--success {
  background: var(--color-accent-secondary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-secondary);
}

.friends .btn--success:hover {
  background: color-mix(in srgb, var(--color-accent-secondary) 85%, white);
}

.friends .btn--danger {
  color: var(--color-accent-error);
}

.friends .btn--danger:hover {
  background: color-mix(in srgb, var(--color-accent-error) 15%, transparent);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .friends__header {
    padding: var(--space-2);
  }

  .friends__content {
    padding: var(--space-2);
  }

  .friends__item,
  .friends__request-item {
    padding: var(--space-2);
  }

  .friends__item-avatar {
    width: 32px;
    height: 32px;
  }

  .friends__item-actions {
    opacity: 1; /* Always visible on touch devices */
  }

  .friends__footer {
    padding: var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .friends__item,
  .friends__request-item {
    transition: none;
  }

  .friends__item-actions {
    transition: none;
  }
}
/* Friends Modal Styles */

/* Friends Button in Status Bar */
.friends-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.friends-icon-btn:hover {
  color: var(--color-accent-primary);
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.friends-icon-btn:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.friends-icon-btn:active {
  transform: scale(0.95);
}

.friends-icon svg,
.friends-icon .svg-icon {
  width: 16px;
  height: 16px;
}

/* Badge showing online friend count */
.friends-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--color-success, #22c55e);
  color: var(--color-bg-primary);
  font-size: 10px;
  font-weight: var(--font-weight-bold, 700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-bg-primary);
}

/* Pulse animation when friends are online */
.friends-badge:not(:empty) {
  animation: friends-badge-pulse 2s ease-in-out infinite;
}

@keyframes friends-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 2px var(--color-success);
  }
  50% {
    box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 8px 4px rgba(34, 197, 94, 0.3);
  }
}

/* Modal Dialog - Reset browser dialog defaults */
dialog.friends-modal {
  color: #e4e4e7;
  color: var(--text-primary, #e4e4e7);
  background-color: #0f0f14;
  background: var(--bg-primary, #0f0f14);
  border: 1px solid #27272a;
  border-color: var(--border-color, #27272a);
  border-radius: 8px;
  border-radius: var(--radius-lg, 8px);
  padding: 0;
  width: Min(400px, 90vw);
  max-height: 80vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

dialog.friends-modal[open] {
  background-color: #0f0f14;
}

dialog.friends-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

.friends-modal__content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: #0f0f14;
  background: var(--bg-primary, #0f0f14);
}

.friends-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #71717a);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.friends-modal__close:hover {
  color: var(--text-primary, #e4e4e7);
}

.friends-modal__close svg {
  width: 16px;
  height: 16px;
}

/* Header */
.friends-modal__header {
  padding: var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, #27272a);
  position: relative;
  background: var(--surface-1, #111118);
}

.friends-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--text-primary, #e4e4e7);
  display: flex;
  align-items: center;
  gap: 8px;
}

.friends-modal__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary, #a855f7);
}

.friends-modal__count {
  font-weight: 400;
  color: var(--text-muted, #71717a);
}

/* Friends List */
.friends-modal__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  max-height: 300px;
}

.friends-modal__friend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.friends-modal__friend:hover {
  background-color: var(--color-surface-hover);
}

.friends-modal__friend-status {
  font-size: 12px;
  line-height: 1;
}

.friends-modal__friend-status--online {
  color: var(--color-success);
}

.friends-modal__friend-status--offline {
  color: var(--color-text-muted);
}

.friends-modal__friend-info {
  flex: 1;
  min-width: 0;
}

.friends-modal__friend-name {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-modal__friend-activity {
  display: block;
  font-size: var(--size-sm);
  color: var(--color-success);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-modal__friend-activity--offline {
  color: var(--color-text-muted);
}

.friends-modal__friend-actions {
  display: flex;
  gap: var(--space-1);
}

.friends-modal__action-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.friends-modal__action-btn:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.friends-modal__action-btn--join {
  color: var(--color-success);
  border-color: var(--color-success);
}

.friends-modal__action-btn--join:hover:not(:disabled) {
  background-color: var(--color-success);
  color: var(--color-bg-primary);
}

.friends-modal__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State */
.friends-modal__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
}

.friends-modal__empty-hint {
  font-size: var(--size-sm);
  margin-top: var(--space-2);
}

/* Quick Actions */
.friends-modal__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
  border-top: 1px solid var(--border-color, #27272a);
  background-color: var(--surface-1, #111118);
}

.friends-modal__quick-action {
  flex: 1;
  min-width: calc(50% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px);
  background: var(--surface-2, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e4e4e7);
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.friends-modal__quick-action:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-primary, #a855f7);
  background: var(--surface-3, #1f1f26);
}

.friends-modal__quick-action svg {
  width: 14px;
  height: 14px;
}

/* Add Friend Form */
.friends-modal__add-form {
  padding: var(--space-3);
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.friends-modal__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.friends-modal__field {
  margin-bottom: var(--space-2);
}

.friends-modal__input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-sm);
}

.friends-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.friends-modal__form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.friends-modal__btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.friends-modal__btn--cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.friends-modal__btn--cancel:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.friends-modal__btn--primary {
  background: var(--color-primary);
  border: none;
  color: var(--color-bg-primary);
}

.friends-modal__btn--primary:hover {
  opacity: 0.9;
}

/* Status Message */
.friends-modal__status {
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.friends-modal__status--info {
  background-color: var(--color-info-bg, rgba(59, 130, 246, 0.1));
  color: var(--color-info, #3b82f6);
}

.friends-modal__status--success {
  background-color: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--color-success);
}

.friends-modal__status--warning {
  background-color: var(--color-warning-bg, rgba(251, 191, 36, 0.1));
  color: var(--color-warning);
}

.friends-modal__status--error {
  background-color: var(--color-error-bg, rgba(207, 96, 104, 0.1));
  color: var(--color-error);
}

/* Online Count in Header */
.friends-modal__online-count {
  font-size: var(--size-xs);
  color: var(--color-success);
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

/* Away Status */
.friends-modal__friend-activity--away {
  color: var(--color-warning, #f59e0b);
}

/* Loading Skeleton */
.friends-modal__loading {
  padding: var(--space-3);
}

.friends-modal__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.friends-modal__skeleton-item {
  height: 48px;
  background: linear-gradient(
    90deg,
    var(--color-surface-hover) 25%,
    var(--color-surface) 50%,
    var(--color-surface-hover) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Turn Queue Panel
 * ================
 * Multiplayer turn queue with initiative order, player statuses, and NPC markers.
 */

.panel-turn-queue {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

/* Header */
.turn-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.turn-queue-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-lg);
}

.turn-queue-header .mode-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.turn-info {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.turn-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.turn-number {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* Base section-header/section-title from components/_section.css and atoms/_atoms.css */
.panel-turn-queue .section-header {
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

/* Initiative List */
.initiative-section {
  margin-bottom: var(--spacing-md);
}

.initiative-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.initiative-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  transition: background-color 0.2s ease;
}

.initiative-entry.is-current-turn {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

/* Actor type styling - NPCs get purple theme */
.initiative-entry.actor-npc,
.initiative-entry.actor-dm_puppet {
  border-left: 3px solid var(--color-purple, #9333ea);
  background: rgba(147, 51, 234, 0.1);
}

.initiative-entry.actor-npc .initiative-icon,
.initiative-entry.actor-dm_puppet .initiative-icon {
  color: var(--color-purple, #9333ea);
}

.initiative-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

.initiative-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.actor-label {
  font-size: var(--font-size-xs);
  color: var(--color-purple, #9333ea);
  font-style: italic;
  padding: 1px 4px;
  background: rgba(147, 51, 234, 0.15);
  border-radius: var(--radius-sm);
}

.turn-indicator {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Player Status List */
.player-status-section {
  margin-bottom: var(--spacing-md);
}

.player-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.player-status-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.status-icon {
  width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
}

.player-name {
  flex: 1;
  font-weight: 500;
}

.status-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.current-turn-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  text-transform: uppercase;
}

/* Status-specific colors */
.player-status-entry.status-acting {
  background: var(--color-success-bg);
  border-left: 3px solid var(--color-success);
}

.player-status-entry.status-drafting {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
}

.player-status-entry.status-ready {
  background: var(--color-success-bg);
}

.player-status-entry.status-waiting {
  opacity: 0.8;
}

.player-status-entry.status-afk {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
}

.player-status-entry.status-disconnected {
  background: var(--color-error-bg);
  border-left: 3px solid var(--color-error);
  opacity: 0.6;
}

/* Status badge in initiative entries */
.status-badge {
  font-size: var(--font-size-sm);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.status-badge.status-acting { background: var(--color-success-bg); }
.status-badge.status-drafting { background: var(--color-info-bg); }
.status-badge.status-afk { background: var(--color-warning-bg); }
.status-badge.status-disconnected { background: var(--color-error-bg); }

/* Queue Position */
.queue-position-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.queue-position-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.position-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.position-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.position-estimate {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Draft Panel */
.draft-panel {
  padding: var(--spacing-md);
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-info);
}

.draft-header {
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.draft-description {
  padding: var(--spacing-sm);
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.draft-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.draft-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.draft-warning.severity-info {
  background: var(--color-info-bg);
}

.draft-warning.severity-caution {
  background: var(--color-warning-bg);
}

.draft-warning.severity-danger {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
}

.draft-warning.severity-critical {
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  animation: warning-pulse 1s ease-in-out infinite;
}

@keyframes warning-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.warning-icon {
  flex-shrink: 0;
}

.warning-message {
  flex: 1;
  font-size: var(--font-size-sm);
}

.draft-quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.draft-action-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.draft-action-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--color-primary);
}

.draft-action-btn[data-action="commit_draft"] {
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  border-color: var(--color-primary);
}

/* Party Member Grid */
.party-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
}

.party-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.party-member-card.is-current-turn {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.party-member-card .member-name {
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.party-member-card .member-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.party-member-card .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.party-member-card.status-submitted .status-indicator {
  background: var(--color-success);
}

.party-member-card.status-acting .status-indicator {
  background: var(--color-primary);
  animation: pulse 1s infinite;
}

/* Countdown Timer */
.turn-queue-timer-section {
  text-align: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.countdown-timer {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.countdown-timer.urgent {
  color: var(--color-warning);
}

.countdown-timer.critical {
  color: var(--color-error);
}

.countdown-timer.pulse {
  animation: countdown-pulse 0.5s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Awaiting Section */
.awaiting-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.awaiting-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.awaiting-list.highlighted {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.awaiting-name {
  padding: 2px 8px;
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.all-ready {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-success);
  font-weight: 500;
}

/* Processing Overlay */
.processing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: var(--z-panel);
}

.processing-overlay.active {
  opacity: 1;
}

.processing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ========================================
   Mode Tabs (Chat / Plan / Do)
   ======================================== */

.turn-mode-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--spacing-xs);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.turn-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.turn-mode-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.turn-mode-tab.active {
  color: var(--color-gold, #d4a843);
  border-color: var(--color-gold, #d4a843);
  background: rgba(212, 168, 67, 0.1);
}

.tab-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  line-height: 1;
}

.turn-mode-cycle-hint {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

.turn-mode-cycle-hint kbd {
  font-family: var(--font-mono, monospace);
  padding: 0 3px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--surface-secondary);
  font-size: var(--font-size-xs);
}

/* ========================================
   Narrative Feed Filters
   ======================================== */

.narrative-filters {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
}

.narrative-filter {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.narrative-filter:hover {
  border-color: var(--text-secondary);
}

.narrative-filter.active {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ========================================
   Mode Panels (Chat / Plan / Do content areas)
   ======================================== */

.mode-panel {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
}

/* Chat Mode */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.chat-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.chat-message {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.chat-message__author {
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}

.chat-message__text {
  color: var(--text-primary);
  word-break: break-word;
}

.chat-message--dm {
  background: rgba(212, 168, 67, 0.08);
  border-left: 2px solid var(--color-gold, #d4a843);
  padding-left: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.chat-message--dm .chat-message__author {
  color: var(--color-gold, #d4a843);
}

.chat-input-form {
  display: flex;
  gap: var(--spacing-xs);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.chat-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.chat-send-btn {
  flex-shrink: 0;
}

/* Action Economy Bar (Plan mode) */
.action-economy-bar {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.economy-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.economy-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.economy-indicator {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  position: relative;
  overflow: hidden;
}

.economy-indicator.used {
  background: var(--color-primary);
}

.economy-indicator.available {
  background: var(--color-success, #22c55e);
}

/* Planner flair input */
.planner-flair-row {
  margin-top: var(--spacing-xs);
}

.planner-flair-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.planner-flair-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
  color: var(--text-primary);
}

/* Additional planner item types */
.planner-item--action {
  border-left-color: var(--color-primary, #6366f1);
}

.planner-item--bonus_action {
  border-left-color: var(--color-purple, #9333ea);
}

.planner-item--movement {
  border-left-color: var(--color-success, #22c55e);
}

.planner-item__type--action {
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-primary, #6366f1);
}

.planner-item__type--bonus_action {
  background: rgba(147, 51, 234, 0.15);
  color: var(--color-purple, #9333ea);
}

.planner-item__type--movement {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22c55e);
}

.planner-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coaching Section (Plan mode) */
.coaching-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.coaching-refresh-btn {
  font-size: var(--font-size-xs);
}

.coaching-feedback {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.coaching-empty {
  color: var(--text-secondary);
  font-style: italic;
}

.coaching-text {
  white-space: pre-wrap;
}

/* Do Mode Panel */
.do-review-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.do-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.do-review-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.do-review-item__cost {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-primary);
  flex-shrink: 0;
}

.do-review-item__text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.do-review-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.do-economy-summary {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.do-actions {
  padding-top: var(--spacing-sm);
}

.do-submit-btn {
  width: 100%;
  padding: var(--spacing-sm);
  font-weight: 600;
}

/* End Turn Button (shown when it's your turn) */
.end-turn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  font-weight: 600;
  background: var(--color-success);
  border: none;
  color: white;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.end-turn-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.end-turn-btn svg {
  width: 16px;
  height: 16px;
}

.end-turn-btn.hidden {
  display: none;
}

/* Guardrail Warning (Do mode) */
.guardrail-warning {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-error-bg, rgba(207, 96, 104, 0.1));
  border: 2px solid var(--color-error, #cf6068);
  border-radius: var(--radius-md);
}

.guardrail-header {
  font-weight: 700;
  color: var(--color-error, #cf6068);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

.guardrail-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.guardrail-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Do waiting state */
.do-waiting {
  padding: var(--spacing-lg);
  text-align: center;
}

.do-waiting-text {
  color: var(--text-secondary);
  font-style: italic;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* DM controls row */
.dm-controls-row {
  display: flex;
  gap: var(--spacing-sm);
}

/* Realtime mode hides turn-based elements */
.panel-turn-queue.realtime-mode .turn-queue-timer-section,
.panel-turn-queue.realtime-mode .queue-list-section,
.panel-turn-queue.realtime-mode .action-form-section {
  display: none;
}

/* ========================================
   Turn Queue Planner (plan-your-turn section)
   ======================================== */

.turn-planner-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.planner-counter {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.planner-form {
  margin-bottom: var(--spacing-sm);
}

.planner-input-row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: stretch;
}

.planner-type-select {
  flex-shrink: 0;
  width: 110px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.planner-submit-btn {
  flex-shrink: 0;
}

/* Queued Items List */
.planner-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.planner-empty {
  padding: var(--spacing-sm);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.planner-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-color);
}

.planner-item--question {
  border-left-color: var(--color-info, #3b82f6);
}

.planner-item--plan {
  border-left-color: var(--color-success, #22c55e);
}

.planner-item--investigate {
  border-left-color: var(--color-warning, #f59e0b);
}

.planner-item__type {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.planner-item__type--question {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
}

.planner-item__type--plan {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--color-success, #22c55e);
}

.planner-item__type--investigate {
  background: var(--color-warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--color-warning, #f59e0b);
}

.planner-item__text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-item__remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: 1;
}

.planner-item__remove:hover {
  background: var(--color-error-bg, rgba(207, 96, 104, 0.15));
  color: var(--color-error, #cf6068);
}

/* ========================================
   Observer Summaries (other players' turns)
   ======================================== */

.observer-summaries-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.observer-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
}

.observer-summary {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary, var(--color-primary));
  font-size: var(--font-size-sm);
}

.observer-summary__actor {
  font-weight: 600;
  color: var(--accent-primary, var(--color-primary));
  flex-shrink: 0;
}

.observer-summary__text {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observer-summary__tools {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Observer entry in narrative feed (compact inline summary) */
.observer-narrative-entry {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 2px solid var(--text-secondary);
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  opacity: 0.85;
}
/* Campaign Discovery Panel
 * =========================
 * Browse and search public campaigns to join.
 * Extends campaign card styles from _campaign_list.css
 */

.campaign-discovery-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.campaign-discovery-panel .panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .panel-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-color, #4a9eff);
}

.campaign-discovery-panel .panel-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary, #888);
}

/* Search Section */
.campaign-discovery-panel .panel-search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--panel-bg-highlight, #1a1a1a);
  border-bottom: 1px solid var(--border-color, #333);
}

.search-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color, #4a9eff);
}

.search-input::placeholder {
  color: var(--text-muted, #888);
}

.btn-search {
  padding: 0.5rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-search:hover {
  background: var(--primary-hover, #3a8eef);
}

.btn-search svg {
  width: 1rem;
  height: 1rem;
}

/* Filters */
.search-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-select,
.filter-input {
  padding: 0.375rem 0.5rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.75rem;
}

.filter-select {
  cursor: pointer;
}

.filter-input {
  flex: 1;
  min-width: 200px;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary-color, #4a9eff);
}

.filter-input::placeholder {
  color: var(--text-muted, #888);
}

/* Invite Code Section */
.campaign-discovery__invite-section {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), transparent);
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery__invite-wrapper {
  display: flex;
  gap: 0.5rem;
}

.campaign-discovery__invite-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: var(--input-bg, #0d0d0d);
  border: 2px solid var(--color-gold, #daa520);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campaign-discovery__invite-input:focus {
  outline: none;
  border-color: var(--color-gold, #daa520);
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.campaign-discovery__invite-input::placeholder {
  color: var(--text-muted, #888);
  text-transform: none;
  letter-spacing: normal;
}

.campaign-discovery__invite-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: var(--color-gold, #daa520);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.campaign-discovery__invite-btn:hover {
  background: #f4c430;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.4);
}

.campaign-discovery__invite-btn svg {
  width: 1rem;
  height: 1rem;
}

.campaign-discovery__invite-hint {
  margin: 0.75rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* Campaign List Content */
.campaign-discovery-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.campaign-discovery-panel .campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Discovery-specific campaign card styles */
.campaign-discovery-panel .campaign-card {
  border: 1px solid var(--border-color, #333);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--panel-bg, #1a1a1a);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.campaign-discovery-panel .campaign-card:hover {
  border-color: var(--primary-color, #4a9eff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.campaign-discovery-panel .campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.campaign-discovery-panel .campaign-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .campaign-status {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-discovery-panel .status-recruiting {
  background: var(--success-color, #4ade80);
  color: #000;
}

.campaign-discovery-panel .status-active {
  background: var(--primary-color, #4a9eff);
  color: #000;
}

.campaign-discovery-panel .campaign-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .campaign-description {
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Campaign Tags */
.campaign-discovery-panel .campaign-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.campaign-discovery-panel .campaign-tags .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--primary-color, #4a9eff);
  text-transform: lowercase;
  letter-spacing: 0.025em;
}

.campaign-discovery-panel .campaign-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, #2a2a2a);
}

.campaign-discovery-panel .campaign-activity {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

.campaign-discovery-panel .btn-join {
  padding: 0.375rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.25rem;
  color: #000;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-join:hover:not(:disabled) {
  background: var(--primary-hover, #3a8eef);
}

.campaign-discovery-panel .btn-join:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-join.btn--success {
  background: var(--success-color, #4ade80);
}

/* Loading State */
.campaign-discovery-panel .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--primary-color, #4a9eff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

/* Empty State */
.campaign-discovery-panel .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.campaign-discovery-panel .empty-icon svg {
  width: 3rem;
  height: 3rem;
}

.campaign-discovery-panel .empty-state h4 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Error State */
.campaign-discovery-panel .error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-error, #cf6068);
}

.campaign-discovery-panel .error-state p {
  margin: 0 0 1rem 0;
}

/* Pagination */
.campaign-discovery-panel .panel-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.campaign-discovery-panel .btn-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: var(--panel-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-pagination:hover:not(:disabled) {
  border-color: var(--primary-color, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.campaign-discovery-panel .btn-pagination:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-pagination svg {
  width: 0.875rem;
  height: 0.875rem;
}

.campaign-discovery-panel .page-info {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

/* Hidden utility */
.campaign-discovery-panel .hidden {
  display: none;
}
/**
 * Character Sheet Full Page
 * =========================
 * Traditional D&D 5e character sheet layout with Terminal D&D sections.
 * Designed for out-of-game review and printing.
 */

/* ========================================
 * Base Layout
 * ======================================== */

body:has(.character-sheet-page) {
  margin: 0;
  padding: 0;
  background: var(--color-bg-primary);
  overflow-y: auto;
  height: auto;
}

.character-sheet-page {
  min-height: 100vh;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.character-sheet-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ========================================
 * Header Section
 * ======================================== */

.cs-page-header {
  text-align: center;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
}

.cs-page-header__name {
  margin: 0 0 var(--space-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 0.02em;
}

.cs-page-header__subtitle {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.cs-page-header__race::after {
  content: ' ';
}

.cs-page-header__class {
  color: var(--color-accent-warning);
}

.cs-page-header__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-page-meta-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-page-meta-value {
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

/* ========================================
 * Three-Column Main Grid
 * ======================================== */

.cs-main-grid {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cs-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ========================================
 * Section Styles
 * ======================================== */

.cs-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
}

.cs-section__title {
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-section__title--small {
  font-size: 0.7rem;
}

/* ========================================
 * Ability Scores
 * ======================================== */

/* Ability scores: 3-column honeycomb grid */
.cs-abilities-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  justify-items: center;
}

/* Offset bottom row for honeycomb effect */
.cs-abilities-list .cs-ability-box:nth-child(n+4) {
  margin-top: calc(-1 * var(--space-sm));
}

.cs-ability-box {
  --hex-size: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  cursor: pointer;
}

.cs-ability-box:hover {
  border-color: var(--color-accent-primary);
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Color coding based on ability score ranges */
.cs-ability-box[data-score-tier="legendary"] {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(126, 34, 206, 0.1));
  border-color: rgb(147, 51, 234);
}

.cs-ability-box[data-score-tier="exceptional"] {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(37, 99, 235, 0.1));
  border-color: rgb(59, 130, 246);
}

.cs-ability-box[data-score-tier="great"] {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
  border-color: rgb(34, 197, 94);
}

.cs-ability-box[data-score-tier="good"] {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(202, 138, 4, 0.1));
  border-color: rgb(234, 179, 8);
}

.cs-ability-box[data-score-tier="average"] {
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.15), rgba(100, 116, 139, 0.1));
  border-color: rgb(148, 163, 184);
}

.cs-ability-box[data-score-tier="poor"] {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
  border-color: rgb(239, 68, 68);
}

.cs-ability-box__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Modifier: prominent center display */
.cs-ability-box__mod {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* Raw score: smaller below modifier */
.cs-ability-box__score {
  font-size: 0.7rem;
  font-weight: 400;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  line-height: 1;
}

/* ========================================
 * Stat Inline (Proficiency Bonus, etc.)
 * ======================================== */

.cs-stat-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-stat-inline__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-stat-inline__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

/* ========================================
 * Saving Throws & Skills
 * ======================================== */

.cs-saves-list,
.cs-skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-save-item,
.cs-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background 0.15s ease;
}

.cs-save-item:hover,
.cs-skill-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-save-item--proficient,
.cs-skill-item--proficient {
  background: rgba(97, 175, 239, 0.1);
}

.cs-save-item__dot,
.cs-skill-item__dot {
  width: 14px;
  text-align: center;
  font-family: monospace;
  color: var(--color-text-muted);
}

.cs-save-item--proficient .cs-save-item__dot,
.cs-skill-item--proficient .cs-skill-item__dot {
  color: var(--color-accent-primary);
}

.cs-save-item__value,
.cs-skill-item__value {
  width: 28px;
  text-align: right;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-save-item__name,
.cs-skill-item__name {
  color: var(--color-text-secondary);
}

.cs-save-item--proficient .cs-save-item__name,
.cs-skill-item--proficient .cs-skill-item__name {
  color: var(--color-accent-primary);
}

/* ========================================
 * Combat Stats
 * ======================================== */

.cs-combat-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-combat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border-default);
  border-radius: 6px;
}

.cs-combat-stat--ac {
  border-color: var(--color-accent-primary);
}

.cs-combat-stat__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-combat-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ========================================
 * HP Block
 * ======================================== */

.cs-hp-block {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.cs-hp-block__header {
  margin-bottom: var(--space-xs);
}

.cs-hp-block__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-hp-block__values {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

.cs-hp-block__current {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.cs-hp-block__sep {
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.cs-hp-block__max {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-hp-bar {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.cs-hp-bar__fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
  border-radius: 4px;
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ========================================
 * Death Saves
 * ======================================== */

.cs-death-saves {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.cs-death-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-death-save-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.cs-death-save-boxes {
  display: flex;
  gap: 4px;
}

.cs-death-save-box {
  width: 16px;
  height: 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 3px;
}

.cs-death-save-box--filled {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
}

.cs-death-save-box--failure.cs-death-save-box--filled {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

/* ========================================
 * Tab Navigation
 * ======================================== */

.cs-tab-nav {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cs-tab-nav::-webkit-scrollbar {
  display: none;
}

.cs-tab-btn {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  min-height: 44px;
}

.cs-tab-btn:hover {
  color: var(--color-text-primary);
}

.cs-tab-btn.active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.cs-tab-panels {
  animation: cs-tab-fade-in 0.2s ease;
}

.cs-tab-panels > .hidden {
  display: none;
}

@keyframes cs-tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
 * Full-Width Sections
 * ======================================== */

.cs-full-width-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-two-column-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Attacks Table
 * ======================================== */

.cs-attacks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cs-attacks-table th {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cs-attacks-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.cs-attacks-table tr:last-child td {
  border-bottom: none;
}

/* ========================================
 * Equipment List
 * ======================================== */

.cs-equipment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-equipment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-equipment-item--equipped {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-equipment-item--unidentified {
  font-style: italic;
  opacity: 0.7;
}

.cs-equipment-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-equipment-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-equipment-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
  font-size: 0.7rem;
}

.cs-equipment-item__sep {
  color: var(--color-text-muted);
}

.cs-equipment-item__damage {
  color: var(--color-accent-error);
  font-weight: 500;
}

/* Equipment badges */
.cs-equipment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-equipment-badge--equipped {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.cs-equipment-badge--attuned {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-purple);
  border: 1px solid rgba(198, 120, 221, 0.3);
}

/* Rarity colors */
.cs-equipment-rarity {
  font-weight: 600;
}

.cs-equipment-rarity--common { color: var(--color-text-muted); }
.cs-equipment-rarity--uncommon { color: var(--color-accent-secondary); }
.cs-equipment-rarity--rare { color: var(--color-accent-primary); }
.cs-equipment-rarity--very-rare { color: var(--color-accent-purple); }
.cs-equipment-rarity--legendary { color: var(--color-accent-warning); }
.cs-equipment-rarity--artifact { color: var(--color-accent-error); }

.cs-equipment-item__qty {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-gold-display {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
}

.cs-gold-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-gold-value {
  color: var(--color-accent-warning);
  font-weight: 600;
}

/* ========================================
 * Features List
 * ======================================== */

.cs-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-feature-item {
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

.cs-feature-item__name {
  display: block;
  font-weight: 600;
  color: var(--color-accent-primary);
  font-size: 0.85rem;
}

.cs-feature-item__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-more-items {
  margin: var(--space-sm) 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Personality
 * ======================================== */

.cs-personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.cs-personality-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-personality-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-personality-value {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cs-personality-value--editable {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-bottom: 1px dashed transparent;
}

.cs-personality-value--editable:hover {
  background-color: var(--color-bg-secondary, rgba(255, 255, 255, 0.05));
  border-bottom-color: var(--color-accent, #c0a060);
}

.cs-inline-textarea {
  width: 100%;
  min-height: 40px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-accent, #c0a060);
  border-radius: 2px;
  resize: vertical;
  line-height: 1.4;
}

.cs-inline-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-accent, #c0a060);
}

.cs-personality-source {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Proficiencies
 * ======================================== */

.cs-proficiencies-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-prof-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cs-prof-label {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-prof-value {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* ========================================
 * Spells Section
 * ======================================== */

.cs-spells-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-spell-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cs-spell-stat__label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cs-spell-stat__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-purple);
}

.cs-spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-spell-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  min-width: 60px;
}

.cs-spell-slot__level {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.cs-spell-slot__uses {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

.cs-spell-list {
  margin-bottom: var(--space-md);
}

.cs-spell-list__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.75rem;
  color: var(--color-accent-purple);
}

.cs-spell-list ul,
.cs-spell-items {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.cs-spell-list li {
  margin-bottom: 4px;
}

/* Enriched spell item layout */
.cs-spell-item {
  padding: var(--space-sm);
  border-radius: 4px;
  margin-bottom: 4px;
  transition: opacity 0.15s ease;
}

.cs-spell-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-spell-item--unprepared {
  opacity: 0.5;
}

.cs-spell-item--prepared {
  opacity: 1;
}

.cs-spell-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-spell-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-spell-item__name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-spell-item__meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-spell-item__desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
  font-style: italic;
}

/* Spell badges (Concentration, Ritual) */
.cs-spell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-spell-badge--concentration {
  background: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.cs-spell-badge--ritual {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* Spell school colors */
.cs-spell-school {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
  flex-shrink: 0;
}

.cs-spell-school--evocation { color: var(--color-accent-error); }
.cs-spell-school--abjuration { color: var(--color-accent-primary); }
.cs-spell-school--conjuration { color: var(--color-accent-secondary); }
.cs-spell-school--divination { color: var(--color-accent-warning); }
.cs-spell-school--enchantment { color: var(--color-accent-purple); }
.cs-spell-school--illusion { color: #c678dd; }
.cs-spell-school--necromancy { color: var(--color-text-muted); }
.cs-spell-school--transmutation { color: #d19a66; }

/* ========================================
 * Terminal D&D Divider
 * ======================================== */

.cs-tdd-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.cs-tdd-divider::before,
.cs-tdd-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
}

.cs-tdd-divider__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================
 * Terminal D&D Sections
 * ======================================== */

.cs-tdd-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* TDD Stats Grid */
.cs-tdd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.cs-tdd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-tdd-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

.cs-tdd-stat__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Memories */
.cs-memory-group {
  margin-bottom: var(--space-md);
}

.cs-memory-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-memory-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  font-size: 0.85rem;
}

.cs-memory-list--events .cs-memory-item {
  display: list-item;
  list-style: disc inside;
  color: var(--color-text-secondary);
}

.cs-memory-item__name {
  font-weight: 600;
  color: var(--color-accent-primary);
}

.cs-memory-item__detail {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-memory-item__text {
  color: var(--color-text-secondary);
}

.cs-memory-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

.cs-memory-badge--combat { background: rgba(224, 108, 117, 0.2); color: var(--color-accent-error); }
.cs-memory-badge--social { background: rgba(198, 120, 221, 0.2); color: var(--color-accent-purple); }
.cs-memory-badge--exploration { background: rgba(97, 175, 239, 0.2); color: var(--color-accent-primary); }
.cs-memory-badge--discovery { background: rgba(229, 192, 123, 0.2); color: var(--color-accent-warning); }
.cs-memory-badge--quest { background: rgba(152, 195, 121, 0.2); color: var(--color-accent-secondary); }
.cs-memory-badge--lore { background: rgba(209, 154, 102, 0.2); color: #d19a66; }

/* Quests */
.cs-quest-group {
  margin-bottom: var(--space-md);
}

.cs-quest-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-quest-card {
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--color-accent-warning);
}

.cs-quest-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.cs-quest-card__title {
  font-weight: 600;
  color: var(--color-accent-warning);
}

.cs-quest-card__progress {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-card__desc {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-quest-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-quest-objective--complete {
  color: var(--color-accent-secondary);
}

.cs-quest-objective__check {
  font-family: monospace;
  flex-shrink: 0;
}

.cs-quest-summary {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-quest-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-quest-summary__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.cs-quest-summary__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Error State */
.cs-error-state {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-error);
  border-radius: 12px;
  margin: var(--space-xl) 0;
}

.cs-error-state h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-accent-error);
}

.cs-error-state p {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-text-secondary);
}

/* Empty State */
.cs-empty-state {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

/* ========================================
 * Footer
 * ======================================== */

.cs-page-footer {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-footer__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cs-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cs-footer-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  transform: translateY(-1px);
}

/* ========================================
 * Rollable Elements
 * ======================================== */

.rollable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.2);
}

.rollable:active {
  background: rgba(97, 175, 239, 0.15);
}

/* ========================================
 * Dice Roll Toast
 * ======================================== */

.cs-roll-toast {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-accent-primary);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 8px rgba(97, 175, 239, 0.15);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  text-align: center;
  min-width: 160px;
}

.cs-roll-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
}

.cs-roll-toast--exit {
  opacity: 0;
  transform: translateX(-50%) translateY(-120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Toast header with dice icon and label */
.cs-roll-toast__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cs-roll-toast__dice {
  font-size: 1.2rem;
  line-height: 1;
}

.cs-roll-toast__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Result number - large and prominent */
.cs-roll-toast__result {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.cs-roll-toast__breakdown {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Critical hit toast */
.cs-roll-toast--critical {
  border-color: var(--color-accent-warning);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3);
  animation: cs-toast-critical-pulse 0.8s ease-in-out 0.6s 2;
}

.cs-roll-toast--critical .cs-roll-toast__result {
  color: var(--color-accent-warning);
}

/* Fumble toast */
.cs-roll-toast--fumble {
  border-color: var(--color-accent-error);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(224, 108, 117, 0.3);
  animation: cs-toast-fumble-shake 0.4s ease-out 0.6s;
}

.cs-roll-toast--fumble .cs-roll-toast__result {
  color: var(--color-accent-error);
}

/* Special labels (CRITICAL! / FUMBLE!) */
.cs-roll-toast__special {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.cs-roll-toast__special--critical {
  color: var(--color-accent-warning);
  background: rgba(229, 192, 123, 0.15);
}

.cs-roll-toast__special--fumble {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.15);
}

/* Advantage / Disadvantage badges */
.cs-roll-toast__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-roll-toast__badge--advantage {
  color: var(--color-accent-secondary);
  background: rgba(152, 195, 121, 0.2);
}

.cs-roll-toast__badge--disadvantage {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.2);
}

@keyframes cs-toast-critical-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 28px rgba(229, 192, 123, 0.5); }
}

@keyframes cs-toast-fumble-shake {
  0%, 100% { transform: translateX(-50%) translateY(-100%); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-50% - 4px)) translateY(-100%); }
  20%, 40%, 60%, 80% { transform: translateX(calc(-50% + 4px)) translateY(-100%); }
}

/* ========================================
 * Inline Editing
 * ======================================== */

.cs-hp-block__current,
.cs-gold-value {
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 2px 4px;
  border-radius: 4px;
}

.cs-hp-block__current:hover,
.cs-gold-value:hover {
  background: rgba(97, 175, 239, 0.1);
}

.cs-inline-input {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: inherit;
  padding: 2px 4px;
  text-align: center;
  outline: none;
}

.cs-inline-input:focus {
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.3);
}

/* Flash feedback */
.cs-flash--success {
  animation: cs-flash-green 0.6s ease;
}

.cs-flash--error {
  animation: cs-flash-red 0.6s ease;
}

@keyframes cs-flash-green {
  0%, 100% { background: transparent; }
  50% { background: rgba(152, 195, 121, 0.3); }
}

@keyframes cs-flash-red {
  0%, 100% { background: transparent; }
  50% { background: rgba(224, 108, 117, 0.3); }
}

/* ========================================
 * Death Save Boxes (interactive)
 * ======================================== */

.cs-death-save-box {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cs-death-save-box:hover {
  transform: scale(1.2);
}

/* ========================================
 * Conditions (interactive)
 * ======================================== */

.cs-conditions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.cs-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  border-radius: 12px;
  color: var(--color-accent-error);
  font-size: 0.75rem;
  font-weight: 600;
}

.cs-condition-remove {
  background: none;
  border: none;
  color: var(--color-accent-error);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
}

.cs-condition-remove:hover {
  opacity: 1;
}

.cs-condition-add {
  background: none;
  border: 1px dashed var(--color-border-default);
  border-radius: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-condition-add:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.cs-condition-dropdown {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 4px 8px;
}

/* ========================================
 * Combat Layout
 * ======================================== */

.cs-combat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-combat-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Equipment Groups
 * ======================================== */

.cs-equipment-group {
  margin-bottom: var(--space-md);
}

.cs-equipment-group__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * Spell Level Groups
 * ======================================== */

.cs-spell-level-group {
  margin-bottom: var(--space-md);
}

.cs-spell-level-heading {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

/* ========================================
 * Save Status & Footer Extras
 * ======================================== */

.cs-page-footer__status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.cs-save-status {
  font-size: 0.7rem;
  transition: opacity 0.3s ease;
}

.cs-save-status[data-status="idle"] {
  opacity: 0;
}

.cs-save-status[data-status="saving"] {
  color: var(--color-accent-warning);
  opacity: 1;
}

.cs-save-status[data-status="saved"] {
  color: var(--color-accent-secondary);
  opacity: 1;
}

.cs-save-status[data-status="error"] {
  color: var(--color-accent-error);
  opacity: 1;
}

.cs-keyboard-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .character-sheet-page {
    background: white;
    color: black;
  }

  .character-sheet-container {
    max-width: none;
    padding: 0.5in;
  }

  /* Show all tabs when printing */
  .cs-tab-nav {
    display: none;
  }

  [data-tab-content].hidden {
    display: block;
  }

  [role="tabpanel"] {
    page-break-inside: avoid;
  }

  /* Hide interactive controls */
  .cs-condition-add,
  .cs-condition-remove,
  .cs-condition-dropdown,
  .cs-page-footer,
  .cs-page-footer__status,
  .cs-roll-toast {
    display: none;
  }

  .cs-page-header,
  .cs-section,
  .cs-combat-stat,
  .cs-hp-block,
  .cs-ability-box,
  .cs-stat-inline,
  .cs-tdd-stat,
  .cs-memory-item,
  .cs-quest-card,
  .cs-equipment-item,
  .cs-feature-item {
    background: white;
    border-color: #ccc;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .rollable {
    cursor: default;
  }

  .cs-ability-box__mod,
  .cs-stat-inline__value,
  .cs-hp-block__current,
  .cs-combat-stat--ac .cs-combat-stat__value,
  .cs-tdd-stat__value,
  .cs-memory-item__name,
  .cs-quest-card__title,
  .cs-feature-item__name,
  .cs-save-item--proficient .cs-save-item__name,
  .cs-skill-item--proficient .cs-skill-item__name {
    color: #333;
    font-weight: bold;
  }

  .cs-page-header__name {
    color: #000;
  }

  .cs-tdd-divider__text {
    color: #666;
  }

  .cs-tdd-divider::before,
  .cs-tdd-divider::after {
    background: #ccc;
  }
}

/* ========================================
 * Responsive Design
 * ======================================== */

@media (max-width: 900px) {
  .cs-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cs-column--abilities {
    grid-column: span 2;
  }

  .cs-abilities-list {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
  }

  .cs-abilities-list .cs-ability-box:nth-child(n+4) {
    margin-top: 0;
  }

  .cs-ability-box {
    --hex-size: 72px;
  }

  .cs-tdd-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cs-tab-btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  .cs-combat-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .character-sheet-container {
    padding: var(--space-md);
  }

  .cs-main-grid {
    grid-template-columns: 1fr;
  }

  .cs-column--abilities {
    grid-column: span 1;
  }

  .cs-two-column-row {
    grid-template-columns: 1fr;
  }

  .cs-personality-grid {
    grid-template-columns: 1fr;
  }

  .cs-combat-stats {
    grid-template-columns: 1fr;
  }

  .cs-page-header__subtitle {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cs-page-header__meta {
    flex-direction: column;
    align-items: center;
  }

  .cs-footer-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ============================================
 * Validation Feedback Panel
 * ============================================
 * Displays validation warnings, errors, and suggestions
 * from the AI DM pipeline's Stage 5 validate phase.
 */

/* Panel Container */
.validation-feedback-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

.validation-feedback-panel:not(.visible) {
  opacity: 0.6;
}

.validation-feedback-panel.minimized .validation-content,
.validation-feedback-panel.minimized .validation-suppressed {
  display: none;
}

/* Header */
.validation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.validation-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.validation-icon {
  font-size: 1.1em;
}

.validation-controls {
  display: flex;
  gap: var(--space-1);
}

/* Summary */
.validation-summary {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.validation-count {
  font-family: var(--font-mono);
}

/* Content Area */
.validation-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.validation-section {
  margin-bottom: var(--space-3);
}

.validation-section:last-child {
  margin-bottom: 0;
}

.validation-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.severity-icon {
  font-size: 1em;
}

.dismiss-all-btn {
  margin-left: auto;
  font-size: var(--font-size-xxs);
}

/* Validation List */
.validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.validation-item:last-child {
  margin-bottom: 0;
}

/* Error Items */
.validation-error {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  border-left: 3px solid var(--color-danger, #dc3545);
  color: var(--color-danger-text, #dc3545);
}

/* Warning Items */
.validation-warning {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  border-left: 3px solid var(--color-warning, #ffc107);
  color: var(--color-text-primary);
}

.validation-warning .warning-text {
  flex: 1;
}

.validation-warning .dismiss-btn {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.validation-warning:hover .dismiss-btn {
  opacity: 1;
}

/* Suggestion Items */
.validation-suggestion {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  border-left: 3px solid var(--color-info, #0dcaf0);
  color: var(--color-text-primary);
}

/* Suppressed Items */
.validation-suppressed {
  background: var(--color-bg-tertiary, rgba(128, 128, 128, 0.1));
  border-left: 3px solid var(--color-text-muted);
  color: var(--color-text-muted);
}

.suppressed-count {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Balance Score Section */
.validation-balance-section {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.balance-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.balance-score-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.balance-score-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.balance-score-fill.score-1 {
  background: var(--color-danger, #dc3545);
}

.balance-score-fill.score-2 {
  background: var(--color-warning, #ffc107);
}

.balance-score-fill.score-3 {
  background: var(--color-info, #0dcaf0);
}

.balance-score-fill.score-4 {
  background: var(--color-success, #28a745);
}

.balance-score-fill.score-5 {
  background: var(--color-accent-primary);
}

.balance-score-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 30px;
  text-align: right;
}

.balance-assessment {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Suppressed Section */
.validation-suppressed {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.suppressed-list-container {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.suppressed-list .validation-item {
  opacity: 0.7;
}

/* Empty State */
.validation-empty-state {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.validation-empty-state p {
  margin: 0 0 var(--space-2) 0;
}

.validation-empty-state p:first-child {
  font-size: var(--font-size-lg);
  color: var(--color-success, #28a745);
}

.validation-empty-state .text-muted {
  font-size: var(--font-size-xs);
}

/* ============================================
 * Inline Validation Segments (in narrative)
 * ============================================
 */

.validation-alert {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.validation-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.validation-alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.validation-alert-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Severity-specific styles */
.validation-alert.severity-info {
  border-color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-info .validation-alert-badge {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-warning {
  border-color: var(--color-warning, #ffc107);
}

.validation-alert.severity-warning .validation-alert-badge {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  color: var(--color-warning, #ffc107);
}

.validation-alert.severity-error {
  border-color: var(--color-danger, #dc3545);
}

.validation-alert.severity-error .validation-alert-badge {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  color: var(--color-danger, #dc3545);
}

.validation-alert.severity-critical {
  border-color: var(--color-danger, #dc3545);
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
}

.validation-alert.severity-critical .validation-alert-badge {
  background: var(--color-danger, #dc3545);
  color: white;
}

.validation-alert-body {
  font-size: var(--font-size-sm);
}

.validation-alert-issues {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-alert-issues li {
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border);
}

.validation-alert-issues li:last-child {
  border-bottom: none;
}

.validation-alert-suggestions {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.validation-alert-suggestions h5 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.validation-alert-suggestions ul {
  list-style: disc;
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.validation-dismiss-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.validation-dismiss-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.validation-dismiss-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}

/* ============================================
 * DM Correction Segment
 * ============================================
 * Displayed when AI hallucinates tool success
 */

.dm-correction,
dm-correction {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  border: 1px solid var(--color-danger, #dc3545);
  border-left: 3px solid var(--color-danger, #dc3545);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dm-correction::before,
dm-correction::before {
  content: 'Correction';
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-danger, #dc3545);
}

.dm-correction strong,
dm-correction strong {
  color: var(--color-danger-text, #dc3545);
}

.dm-correction ul,
dm-correction ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}

.dm-correction li,
dm-correction li {
  margin-bottom: var(--space-1);
}
/* Dressing Room Panel */
/* Character management - edit, level, equip, and manage variants */

.dressing-room {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 320px;
  background: var(--color-surface);
}

.dressing-room__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.dressing-room__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dressing-room__character-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.dressing-room__character-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.dressing-room__character-level {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Sections */
.dressing-room__section {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.dressing-room__section:last-child {
  border-bottom: none;
}

.dressing-room__section-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Fields */
.dressing-room__field {
  margin-bottom: var(--spacing-sm);
}

.dressing-room__field:last-child {
  margin-bottom: 0;
}

.dressing-room__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

/* Name Editor */
.dressing-room__name-editor {
  display: flex;
  gap: var(--spacing-xs);
}

.dressing-room__name-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.dressing-room__name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Level Control */
.dressing-room__level-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dressing-room__level-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room__level-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__level-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dressing-room__level-display {
  min-width: 40px;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
}

/* Equipment Grid */
.dressing-room__equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.dressing-room__equipment-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dressing-room__equipment-slot:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}

.dressing-room__equipment-slot--fantasy {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.dressing-room__slot-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.dressing-room__slot-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: center;
  word-break: break-word;
}

.dressing-room__slot-item--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Inventory */
.dressing-room__inventory-search {
  margin-bottom: var(--spacing-sm);
}

.dressing-room__search-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.dressing-room__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dressing-room__inventory-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dressing-room__inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room__inventory-item:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.dressing-room__inventory-item--equipped {
  border-color: var(--color-success);
}

.dressing-room__inventory-item--disabled {
  opacity: 0.5;
  cursor: default;
}

.dressing-room__inventory-item-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dressing-room__inventory-item-quantity {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Fantasy Indicator */
.dressing-room__fantasy-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: 1px solid var(--color-warning);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.dressing-room__fantasy-badge {
  padding: 2px 8px;
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
  border-radius: var(--border-radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.dressing-room__fantasy-count {
  font-weight: 600;
  color: var(--color-warning);
}

.dressing-room__fantasy-label {
  color: var(--color-text-secondary);
}

/* Variant Tree */
.dressing-room__variant-tree {
  max-height: 200px;
  overflow-y: auto;
}

.dressing-room__variant-loading {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-style: italic;
}

.dressing-room__variant-node {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-left: var(--spacing-md);
  border-left: 2px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dressing-room__variant-node:hover {
  background: var(--color-surface-elevated);
}

.dressing-room__variant-node--canonical {
  border-left-color: var(--color-success);
}

.dressing-room__variant-node--current {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-left-color: var(--color-primary);
}

.dressing-room__variant-node--root {
  margin-left: 0;
  border-left: none;
}

.dressing-room__variant-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.dressing-room__variant-level {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.dressing-room__variant-badge {
  font-size: var(--font-size-xs);
  padding: 1px 6px;
  border-radius: var(--border-radius-xs);
}

.dressing-room__variant-badge--canonical {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}

.dressing-room__variant-badge--branch {
  background: var(--color-info);
  color: var(--color-on-info, #fff);
}

.dressing-room__variant-badge--respec {
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
}

/* Buttons */
.dressing-room__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dressing-room__btn:hover {
  filter: brightness(1.1);
}

.dressing-room__btn--small {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
}

.dressing-room__btn--save {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}

.dressing-room__btn--danger {
  background: var(--color-error);
  color: var(--color-on-error, #fff);
}

.dressing-room__btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Actions */
.dressing-room__actions {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* Status */
.dressing-room__status {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-info-bg, color-mix(in srgb, var(--color-info) 15%, transparent));
  color: var(--color-info);
  font-size: var(--font-size-sm);
  text-align: center;
}

.dressing-room__status--error {
  background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
  color: var(--color-error);
}

.dressing-room__status--success {
  background: var(--color-success-bg, color-mix(in srgb, var(--color-success) 15%, transparent));
  color: var(--color-success);
}

/* Dressing Room Compact (Settings Panel Embed) */
.dressing-room-compact__inline-edit {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.dressing-room-compact__input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  min-width: 0;
}

.dressing-room-compact__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dressing-room-compact__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.dressing-room-compact__btn:hover {
  filter: brightness(1.1);
}

.dressing-room-compact__level-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dressing-room-compact__level-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room-compact__level-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room-compact__level-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dressing-room-compact__level-display {
  min-width: 32px;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-primary);
}

.dressing-room-compact__status {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  text-align: center;
}

.dressing-room-compact__status--success {
  background: var(--color-success-bg, color-mix(in srgb, var(--color-success) 15%, transparent));
  color: var(--color-success);
}

.dressing-room-compact__status--error {
  background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
  color: var(--color-error);
}

.dressing-room-compact__status--info {
  background: var(--color-info-bg, color-mix(in srgb, var(--color-info) 15%, transparent));
  color: var(--color-info);
}

/* Slot Selector Dropdown */
.dressing-room__inventory-item--selecting {
  position: relative;
  z-index: var(--z-sticky);
}

.dressing-room__slot-selector {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.3));
  z-index: var(--z-panel);
  overflow: hidden;
}

.dressing-room__slot-selector-header {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dressing-room__slot-selector-option {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.dressing-room__slot-selector-option:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__slot-selector-cancel {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.dressing-room__slot-selector-cancel:hover {
  background: var(--color-error);
  color: var(--color-on-error, #fff);
}

/* Variant Menu */
.dressing-room__variant-node--menu-open {
  position: relative;
  z-index: var(--z-sticky);
}

.dressing-room__variant-menu {
  position: absolute;
  top: 100%;
  left: var(--spacing-md);
  min-width: 180px;
  margin-top: 4px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.3));
  z-index: var(--z-panel);
  overflow: hidden;
}

.dressing-room__variant-menu-header {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dressing-room__variant-menu-info {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dressing-room__variant-menu-option {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.dressing-room__variant-menu-option:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__variant-menu-hint {
  padding: 2px var(--spacing-sm) var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dressing-room__variant-menu-close {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.dressing-room__variant-menu-close:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}
/* ==========================================================================
   Structured Segments
   Tables, lists, and data grids for structured LLM output
   ========================================================================== */

/* -----------------------------------------------------------------------------
   TABLE SEGMENT
   -------------------------------------------------------------------------- */

.narrative-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
}

.narrative-table-caption {
  padding: var(--spacing-sm);
  font-weight: bold;
  text-align: left;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-border);
  background: rgba(var(--color-gold-rgb), 0.1);
}

.narrative-table-header {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: bold;
  color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.15);
  border-bottom: 2px solid var(--color-gold);
}

.narrative-table-cell {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.narrative-table tbody tr:hover {
  background: rgba(var(--color-gold-rgb), 0.05);
}

.narrative-table tbody tr:last-child .narrative-table-cell {
  border-bottom: none;
}

/* Compact table variant */
.narrative-table--compact {
  font-size: var(--font-size-xs);
}

.narrative-table--compact .narrative-table-header,
.narrative-table--compact .narrative-table-cell {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
  .narrative-table,
  .narrative-table thead,
  .narrative-table tbody,
  .narrative-table th,
  .narrative-table td,
  .narrative-table tr {
    display: block;
  }

  .narrative-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .narrative-table-cell {
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-left: 45%;
    position: relative;
    border-bottom: 1px solid var(--color-border);
  }

  .narrative-table-cell::before {
    content: attr(data-label);
    position: absolute;
    left: var(--spacing-sm);
    width: 40%;
    font-weight: bold;
    color: var(--color-gold);
  }

  .narrative-table tbody tr {
    border-bottom: 2px solid var(--color-gold);
    margin-bottom: var(--spacing-sm);
  }
}

/* -----------------------------------------------------------------------------
   LIST SEGMENT
   -------------------------------------------------------------------------- */

.narrative-list {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.narrative-list--numbered {
  list-style-type: decimal;
}

.narrative-list--bullet {
  list-style-type: none;
}

.narrative-list--bullet .narrative-list-item::before {
  content: '\25B8';
  color: var(--color-gold);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.narrative-list-item {
  padding: var(--spacing-xs) 0;
  line-height: 1.5;
}

.narrative-list-item + .narrative-list-item {
  border-top: 1px dotted var(--color-border);
}

/* Inline list variant */
.narrative-list-inline {
  font-style: italic;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   DATA GRID SEGMENT
   -------------------------------------------------------------------------- */

.narrative-datagrid {
  display: grid;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.narrative-datagrid--cols-1 {
  grid-template-columns: 1fr;
}

.narrative-datagrid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.narrative-datagrid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.narrative-datagrid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .narrative-datagrid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .narrative-datagrid--cols-2,
  .narrative-datagrid--cols-3,
  .narrative-datagrid--cols-4 {
    grid-template-columns: 1fr;
  }
}

.datagrid-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.datagrid-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.3);
}

.datagrid-card-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(var(--color-gold-rgb), 0.1);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.datagrid-card-icon {
  font-size: var(--font-size-lg);
}

.datagrid-card-title {
  font-weight: bold;
  color: var(--color-gold);
  flex: 1;
}

.datagrid-card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.datagrid-card-content {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   SEGMENT WRAPPER STYLES
   -------------------------------------------------------------------------- */

.segment-table,
.segment-list,
.segment-datagrid {
  margin: var(--spacing-sm) 0;
}

/* Ensure strong/em styling in cells */
.narrative-table-cell strong,
.narrative-list-item strong,
.datagrid-card-content strong {
  color: var(--color-gold);
  font-weight: bold;
}

.narrative-table-cell em,
.narrative-list-item em,
.datagrid-card-content em {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Accessibility: focus states */
.narrative-table:focus-within,
.datagrid-card:focus-within {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .narrative-table,
  .narrative-list,
  .narrative-datagrid {
    break-inside: avoid;
  }

  .datagrid-card {
    border: 1px solid #333;
    box-shadow: none;
  }
}
/* ==========================================================================
 * Resource Tracker Panel
 * Displays class-specific resources (Ki, Rage, Channel Divinity, etc.)
 * ========================================================================== */

.resource-tracker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  height: 100%;
  overflow-y: auto;
}

/* Header */
.resource-tracker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
  padding-bottom: var(--space-2, 8px);
}

.resource-tracker__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-lg, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e0e0e0);
  margin: 0;
}

.resource-tracker__title svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary, #6366f1);
}

/* Sections */
.resource-tracker__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.resource-tracker__section-title {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Resource Grid */
.resource-tracker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2, 8px);
}

/* Individual Resource Item */
.resource-tracker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3, 12px) var(--space-2, 8px);
  background: var(--color-bg-secondary, #1e1e38);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), opacity var(--transition-fast, 0.15s);
}

.resource-tracker__item:hover {
  border-color: var(--color-border-hover, #5a5a7a);
}

.resource-tracker__item--depleted {
  opacity: 0.6;
}

.resource-tracker__item--full {
  border-color: var(--accent-success, #4ade80);
}

/* Resource Icon */
.resource-tracker__icon {
  font-size: 24px;
  margin-bottom: var(--space-1, 4px);
}

/* Resource Name */
.resource-tracker__name {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #a0a0c0);
  text-align: center;
  margin-bottom: var(--space-1, 4px);
}

/* Resource Value (current / max) */
.resource-tracker__value {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #e0e0e0);
  font-variant-numeric: tabular-nums;
}

.resource-tracker__value--depleted {
  color: var(--accent-danger, #ef4444);
}

.resource-tracker__value--low {
  color: var(--accent-warning, #f59e0b);
}

.resource-tracker__max {
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #888);
}

/* Recovery indicator (short rest / long rest) */
.resource-tracker__recovery {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888);
  margin-top: var(--space-1, 4px);
}

.resource-tracker__recovery svg {
  width: 10px;
  height: 10px;
}

.resource-tracker__recovery--short {
  color: var(--accent-rest-short, #d97706);
}

.resource-tracker__recovery--long {
  color: var(--accent-rest-long, #3b82f6);
}

/* Spell Slots */
.resource-tracker__spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.resource-tracker__spell-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2, 8px);
  background: var(--color-bg-secondary, #1e1e38);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  min-width: 50px;
}

.resource-tracker__spell-level-num {
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888);
  margin-bottom: 2px;
}

.resource-tracker__spell-slots-pips {
  display: flex;
  gap: 3px;
}

.resource-tracker__spell-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.resource-tracker__spell-pip--available {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.resource-tracker__spell-pip--used {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Concentration */
.resource-tracker__concentration {
  background: linear-gradient(135deg, var(--color-bg-secondary, #1e1e38) 0%, #2a2a4a 100%);
  border: 1px solid var(--accent-magic, #8b5cf6);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 8px);
}

.resource-tracker__concentration-spell {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--accent-magic, #8b5cf6);
  font-weight: var(--font-weight-medium, 500);
}

.resource-tracker__concentration-spell::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-sparkles) no-repeat center / contain;
}

/* Empty State */
.resource-tracker__empty {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* Recovery Actions */
.resource-tracker__actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: auto;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-default, #3a3a5a);
}

.resource-tracker__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: transparent;
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-secondary, #a0a0c0);
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}

.resource-tracker__action-btn:hover {
  background: var(--color-bg-hover, #2a2a4a);
  border-color: var(--color-border-hover, #5a5a7a);
  color: var(--color-text-primary, #e0e0e0);
}

.resource-tracker__action-btn svg {
  width: 14px;
  height: 14px;
}

/* Resource Type-Specific Colors */
.resource-tracker__item[data-resource-type="ki"] {
  --resource-color: var(--accent-ki, #22d3ee);
}

.resource-tracker__item[data-resource-type="ki"] .resource-tracker__icon {
  color: var(--accent-ki, #22d3ee);
}

.resource-tracker__item[data-resource-type="rage"] {
  --resource-color: var(--accent-rage, #ef4444);
}

.resource-tracker__item[data-resource-type="rage"] .resource-tracker__icon {
  color: var(--accent-rage, #ef4444);
}

.resource-tracker__item[data-resource-type="channel_divinity"] {
  --resource-color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="channel_divinity"] .resource-tracker__icon {
  color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="action_surge"] {
  --resource-color: var(--accent-martial, #f97316);
}

.resource-tracker__item[data-resource-type="action_surge"] .resource-tracker__icon {
  color: var(--accent-martial, #f97316);
}

.resource-tracker__item[data-resource-type="second_wind"] {
  --resource-color: var(--accent-heal, #22c55e);
}

.resource-tracker__item[data-resource-type="second_wind"] .resource-tracker__icon {
  color: var(--accent-heal, #22c55e);
}

.resource-tracker__item[data-resource-type="sorcery_points"] {
  --resource-color: var(--accent-magic, #8b5cf6);
}

.resource-tracker__item[data-resource-type="sorcery_points"] .resource-tracker__icon {
  color: var(--accent-magic, #8b5cf6);
}

.resource-tracker__item[data-resource-type="bardic_inspiration"] {
  --resource-color: var(--accent-bardic, #ec4899);
}

.resource-tracker__item[data-resource-type="bardic_inspiration"] .resource-tracker__icon {
  color: var(--accent-bardic, #ec4899);
}

.resource-tracker__item[data-resource-type="lay_on_hands"] {
  --resource-color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="lay_on_hands"] .resource-tracker__icon {
  color: var(--accent-divine, #fbbf24);
}

/* Animation for resource change */
@keyframes resource-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.resource-tracker__item--changed {
  animation: resource-pulse 0.3s ease-out;
}

.resource-tracker__item--spent .resource-tracker__value {
  animation: resource-spent 0.3s ease-out;
}

@keyframes resource-spent {
  0% { color: var(--color-text-primary, #e0e0e0); }
  50% { color: var(--accent-danger, #ef4444); }
  100% { color: var(--color-text-primary, #e0e0e0); }
}

.resource-tracker__item--recovered .resource-tracker__value {
  animation: resource-recovered 0.3s ease-out;
}

@keyframes resource-recovered {
  0% { color: var(--color-text-primary, #e0e0e0); }
  50% { color: var(--accent-success, #4ade80); }
  100% { color: var(--color-text-primary, #e0e0e0); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .resource-tracker__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-tracker__actions {
    flex-direction: column;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .resource-tracker__item--changed,
  .resource-tracker__item--spent .resource-tracker__value,
  .resource-tracker__item--recovered .resource-tracker__value {
    animation: none;
  }

  .resource-tracker__spell-pip--available {
    animation: none;
  }
}
/**
 * Location List Panel
 * ===================
 * Text-based navigation showing current location, nearby destinations,
 * and known locations. Click to travel.
 */

/* Container */
.location-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-md, 8px);
  overflow: hidden;
}

/* Header */
.location-list__header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  padding-bottom: var(--terminal-spacing-sm);
  border-bottom: 1px solid var(--terminal-border);
  margin-bottom: var(--terminal-spacing-md);
  flex-shrink: 0;
}

.location-list__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--terminal-cyan);
}

.location-list__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text-primary);
  margin: 0;
}

/* Content Area */
.location-list__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sections */
.location-list__section {
  margin-bottom: var(--terminal-spacing-lg);
}

.location-list__section:last-child {
  margin-bottom: 0;
}

.location-list__section-title {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--terminal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--terminal-spacing-sm) 0;
}

.location-list__section-icon {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Current Location */
.location-list__current {
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-cyan);
  border-left: 3px solid var(--terminal-cyan);
  border-radius: var(--terminal-radius-sm, 4px);
  padding: var(--terminal-spacing-sm);
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.location-list__current--changing {
  animation: location-pulse 0.5s ease;
}

@keyframes location-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.location-list__location {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
}

.location-list__location-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.location-list__location-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.location-list__location-name {
  font-weight: 600;
  color: var(--terminal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-list__location-type {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.location-list__location-desc {
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
  margin: var(--terminal-spacing-xs) 0 0 0;
  line-height: 1.4;
}

/* Location List */
.location-list__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
}

.location-list__list--compact .location-list__item {
  padding: 0;
}

/* Location Items */
.location-list__item {
  border-radius: var(--terminal-radius-sm, 4px);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.location-list__item--updating {
  animation: item-update 0.5s ease;
}

@keyframes item-update {
  0% { background-color: var(--terminal-cyan-dim, rgba(0, 255, 255, 0.1)); }
  100% { background-color: transparent; }
}

.location-list__item--traveling {
  opacity: 0.8;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

/* Travel progress shimmer effect */
.location-list__item--traveling::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: traveling-shimmer 1.5s ease-in-out infinite;
}

@keyframes traveling-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.location-list__item--traveling .location-list__travel-btn {
  border-color: var(--terminal-cyan);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
}

/* Travel status badge */
.location-list__travel-status {
  display: none;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  padding: 2px 8px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid var(--terminal-cyan);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.location-list__item--traveling .location-list__travel-status {
  display: flex;
  animation: traveling-pulse 1s ease infinite;
}

@keyframes traveling-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.location-list__travel-status-icon {
  width: 12px;
  height: 12px;
  background: var(--terminal-cyan);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Visibility States */
.location-list__item--undiscovered {
  opacity: 0.5;
}

.location-list__item--discovered {
  opacity: 0.8;
}

.location-list__item--discovered .location-list__item-name {
  color: var(--terminal-text-secondary);
  font-style: italic;
}

.location-list__item--visited {
  opacity: 1;
}

/* Travel Button */
.location-list__travel-btn {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
  width: 100%;
  padding: var(--terminal-spacing-sm);
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-sm, 4px);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.location-list__travel-btn:hover {
  border-color: var(--terminal-cyan);
  background: var(--terminal-bg-secondary);
}

.location-list__travel-btn:focus {
  outline: 2px solid var(--terminal-cyan);
  outline-offset: 2px;
}

.location-list__travel-btn:active {
  transform: scale(0.98);
}

/* Compact style for known locations */
.location-list__item--compact .location-list__travel-btn {
  flex-direction: row;
  align-items: center;
  padding: var(--terminal-spacing-xs) var(--terminal-spacing-sm);
}

/* Item Header (direction + icon + name) */
.location-list__item-header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
}

.location-list__direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--terminal-cyan);
  flex-shrink: 0;
}

/* Styled direction arrow icon */
.location-list__direction-icon {
  width: 16px;
  height: 16px;
  background: var(--terminal-cyan);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  transition: transform var(--transition-fast, 0.15s);
}

/* Directional rotations */
.location-list__direction[data-direction="north"] .location-list__direction-icon,
.location-list__direction[data-direction="N"] .location-list__direction-icon {
  transform: rotate(-90deg);
}

.location-list__direction[data-direction="south"] .location-list__direction-icon,
.location-list__direction[data-direction="S"] .location-list__direction-icon {
  transform: rotate(90deg);
}

.location-list__direction[data-direction="east"] .location-list__direction-icon,
.location-list__direction[data-direction="E"] .location-list__direction-icon {
  transform: rotate(0deg);
}

.location-list__direction[data-direction="west"] .location-list__direction-icon,
.location-list__direction[data-direction="W"] .location-list__direction-icon {
  transform: rotate(180deg);
}

.location-list__direction[data-direction="northwest"] .location-list__direction-icon,
.location-list__direction[data-direction="NW"] .location-list__direction-icon {
  transform: rotate(-135deg);
}

.location-list__direction[data-direction="northeast"] .location-list__direction-icon,
.location-list__direction[data-direction="NE"] .location-list__direction-icon {
  transform: rotate(-45deg);
}

.location-list__direction[data-direction="southwest"] .location-list__direction-icon,
.location-list__direction[data-direction="SW"] .location-list__direction-icon {
  transform: rotate(135deg);
}

.location-list__direction[data-direction="southeast"] .location-list__direction-icon,
.location-list__direction[data-direction="SE"] .location-list__direction-icon {
  transform: rotate(45deg);
}

/* Hover effect */
.location-list__travel-btn:hover .location-list__direction-icon {
  transform: var(--direction-rotation, rotate(0deg)) scale(1.2);
}

.location-list__item-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.location-list__item-name {
  font-weight: 500;
  color: var(--terminal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Item Details (travel time, difficulty) */
.location-list__item-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--terminal-spacing-sm);
  padding-left: calc(1.2em + var(--terminal-spacing-xs));
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.location-list__travel-time {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.location-list__travel-time .svg-icon {
  font-size: 0.85em;
  opacity: 0.7;
}

.location-list__difficulty {
  padding: 0.1em 0.4em;
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.location-list__difficulty--2 {
  background: var(--terminal-yellow-dim, rgba(255, 200, 0, 0.2));
  color: var(--terminal-yellow);
}

.location-list__difficulty--3 {
  background: var(--terminal-orange-dim, rgba(255, 150, 0, 0.2));
  color: var(--terminal-orange, #ffa500);
}

.location-list__difficulty--4 {
  background: var(--terminal-red-dim, rgba(255, 100, 100, 0.2));
  color: var(--terminal-red);
}

.location-list__difficulty--5 {
  background: var(--terminal-magenta-dim, rgba(255, 0, 255, 0.2));
  color: var(--terminal-magenta);
}

.location-list__path-type {
  padding: 0.1em 0.4em;
  background: var(--terminal-bg-secondary);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
}

/* Visited Badge */
.location-list__visited-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--terminal-green);
  flex-shrink: 0;
}

.location-list__visited-badge svg {
  width: 16px;
  height: 16px;
}

/* Empty State */
.location-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--terminal-spacing-xl);
  text-align: center;
  color: var(--terminal-text-muted);
}

.location-list__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--terminal-spacing-md);
  opacity: 0.5;
}

/* Styled compass icon for empty state */
.location-list__empty-icon::before {
  content: '';
  width: 40px;
  height: 40px;
  background: var(--terminal-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
}

.location-list__empty-text {
  font-size: 0.9rem;
  margin: 0;
  max-width: 200px;
}

/* Footer */
.location-list__footer {
  padding-top: var(--terminal-spacing-sm);
  border-top: 1px dashed var(--terminal-border);
  margin-top: var(--terminal-spacing-md);
  flex-shrink: 0;
}

.location-list__footer:empty {
  display: none;
}

.location-list__hint {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
  font-style: italic;
}

/* Known Locations Section - more compact */
.location-list__section--known {
  border-top: 1px dashed var(--terminal-border);
  padding-top: var(--terminal-spacing-md);
}

.location-list__section--known .location-list__list {
  max-height: 200px;
  overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .location-list {
    padding: var(--terminal-spacing-sm);
  }

  .location-list__header {
    margin-bottom: var(--terminal-spacing-sm);
  }

  .location-list__item-details {
    padding-left: 0;
  }
}
/**
 * Character Ragdoll Styles
 * ========================
 * Styling for the visual character silhouette with drag-and-drop equipment slots.
 *
 * Components:
 * - .character-ragdoll - Main container
 * - .character-silhouette - SVG silhouette
 * - .equipment-slot - Interactive slot regions
 * - .equipped-icon - Icons for equipped items
 */

/* =============================================================================
   RAGDOLL CONTAINER
   ============================================================================= */

.character-ragdoll {
  --ragdoll-bg: var(--panel-bg, var(--surface-0));
  --ragdoll-border: var(--panel-border, var(--border-subtle));
  --ragdoll-slot-idle: rgba(99, 102, 241, 0.1);
  --ragdoll-slot-hover: rgba(99, 102, 241, 0.3);
  --ragdoll-slot-valid: rgba(74, 222, 128, 0.4);
  --ragdoll-slot-invalid: rgba(239, 68, 68, 0.4);
  --ragdoll-slot-equipped: rgba(99, 102, 241, 0.5);
  --ragdoll-slot-pending: rgba(251, 191, 36, 0.4);

  display: flex;
  flex-direction: column;
  background: var(--ragdoll-bg);
  border: 1px solid var(--ragdoll-border);
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

.character-ragdoll--compact {
  max-width: 200px;
}

/* =============================================================================
   HEADER
   ============================================================================= */

.character-ragdoll__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ragdoll-border);
  background: var(--surface-1, rgba(0, 0, 0, 0.1));
}

.character-ragdoll__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
}

.character-ragdoll__hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
}

/* =============================================================================
   BODY / SVG CONTAINER
   ============================================================================= */

.character-ragdoll__body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  min-height: 300px;
}

.character-ragdoll__silhouette {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.character-ragdoll__silhouette svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================================
   SVG SILHOUETTE STYLING
   ============================================================================= */

.character-silhouette .silhouette-body path,
.character-silhouette .silhouette-body ellipse {
  transition: fill 0.2s ease;
}

/* Slot labels */
.character-silhouette .slot-labels text {
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  fill: var(--text-muted, #888);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* =============================================================================
   EQUIPMENT SLOT REGIONS
   ============================================================================= */

.character-silhouette .equipment-slot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

/* Hover state */
.character-silhouette .equipment-slot:hover,
.character-silhouette .equipment-slot:focus {
  fill: var(--ragdoll-slot-hover);
  stroke: var(--accent-primary, #6366f1);
  outline: none;
}

/* Focus visible for keyboard navigation */
.character-silhouette .equipment-slot:focus-visible {
  fill: var(--ragdoll-slot-hover);
  stroke: var(--accent-primary, #6366f1);
  stroke-width: 3;
}

/* Equipped state */
.character-silhouette .equipment-slot.slot--equipped {
  fill: var(--ragdoll-slot-equipped);
  stroke: var(--accent-primary, #6366f1);
}

/* Valid drop zone during drag */
.character-silhouette .equipment-slot.slot--valid-drop {
  fill: var(--ragdoll-slot-valid);
  stroke: var(--success, #4ade80);
  stroke-width: 2;
  animation: pulse-valid 1s ease-in-out infinite;
}

/* Invalid drop zone during drag */
.character-silhouette .equipment-slot.slot--invalid-drop {
  fill: var(--ragdoll-slot-invalid);
  stroke: var(--color-error, #cf6068);
  stroke-width: 1;
  opacity: 0.5;
}

/* Drag over state */
.character-silhouette .equipment-slot.slot--drag-over {
  fill: var(--ragdoll-slot-valid);
  stroke: var(--success, #4ade80);
  stroke-width: 3;
}

/* Pending state (waiting for server response) */
.character-silhouette .equipment-slot.slot--pending {
  fill: var(--ragdoll-slot-pending);
  stroke: var(--warning, #fbbf24);
  animation: pulse-pending 0.5s ease-in-out infinite;
}

@keyframes pulse-valid {
  0%, 100% { fill: var(--ragdoll-slot-valid); }
  50% { fill: rgba(74, 222, 128, 0.6); }
}

/* =============================================================================
   EQUIPPED ITEM ICONS
   ============================================================================= */

.character-silhouette .equipped-items {
  pointer-events: none;
}

.character-silhouette .equipped-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

/* Rarity colors for equipped items */
.character-silhouette .equipped-icon--uncommon rect:first-child {
  fill: var(--rarity-uncommon, #22c55e);
}

.character-silhouette .equipped-icon--rare rect:first-child {
  fill: var(--rarity-rare, #3b82f6);
}

.character-silhouette .equipped-icon--very-rare rect:first-child,
.character-silhouette .equipped-icon--veryrare rect:first-child {
  fill: var(--rarity-very-rare, #a855f7);
}

.character-silhouette .equipped-icon--legendary rect:first-child {
  fill: var(--rarity-legendary, #f59e0b);
}

.character-silhouette .equipped-icon--artifact rect:first-child {
  fill: var(--rarity-artifact, #ef4444);
}

/* =============================================================================
   SLOT INFO TOOLTIP
   ============================================================================= */

.character-ragdoll__slot-info {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2, rgba(0, 0, 0, 0.8));
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  pointer-events: none;
}

.character-ragdoll__slot-info.visible {
  display: flex;
}

.character-ragdoll__slot-name {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.character-ragdoll__slot-item {
  color: var(--text-muted);
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.character-ragdoll__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ragdoll-border);
  background: var(--surface-1, rgba(0, 0, 0, 0.1));
}

.character-ragdoll__stats {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
}

.character-ragdoll__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.character-ragdoll__stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-ragdoll__stat-value {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.character-ragdoll__keyboard-hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
  text-align: center;
}

.character-ragdoll__keyboard-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: var(--surface-2, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs, 0.125rem);
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
}

/* =============================================================================
   DRAG ACTIVE STATE
   ============================================================================= */

.character-ragdoll.ragdoll--drag-active {
  outline: 2px dashed var(--accent-primary, #6366f1);
  outline-offset: -2px;
}

.character-ragdoll.ragdoll--drag-active .character-ragdoll__hint {
  color: var(--accent-primary, #6366f1);
  font-weight: 500;
}

/* =============================================================================
   DRAG GHOST ELEMENT
   ============================================================================= */

.drag-ghost {
  position: fixed;
  z-index: var(--z-sky);
  pointer-events: none;
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--surface-2, rgba(30, 30, 46, 0.95));
  border: 1px solid var(--accent-primary, #6366f1);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 200px;
  font-size: var(--text-sm, 0.875rem);
}

.drag-ghost .inventory__item-actions,
.drag-ghost .es-slot__actions {
  display: none;
}

/* =============================================================================
   RESPONSIVE / COMPACT MODE
   ============================================================================= */

.character-ragdoll--compact .character-ragdoll__header {
  padding: 0.5rem 0.75rem;
}

.character-ragdoll--compact .character-ragdoll__hint {
  display: none;
}

.character-ragdoll--compact .character-ragdoll__body {
  padding: 0.5rem;
  min-height: 200px;
}

.character-ragdoll--compact .character-ragdoll__silhouette {
  max-width: 150px;
}

.character-ragdoll--compact .character-ragdoll__footer {
  padding: 0.5rem 0.75rem;
}

.character-ragdoll--compact .character-ragdoll__keyboard-hint {
  display: none;
}

/* =============================================================================
   TOUCH DEVICE ADJUSTMENTS
   ============================================================================= */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for slots */
  .character-silhouette .equipment-slot {
    stroke-width: 4;
  }

  /* No hover states on touch */
  .character-silhouette .equipment-slot:hover {
    fill: transparent;
    stroke: transparent;
  }

  /* Active state for touch */
  .character-silhouette .equipment-slot:active {
    fill: var(--ragdoll-slot-hover);
    stroke: var(--accent-primary, #6366f1);
  }

  /* Equipped state maintained */
  .character-silhouette .equipment-slot.slot--equipped {
    fill: var(--ragdoll-slot-equipped);
    stroke: var(--accent-primary, #6366f1);
  }

  /* Hide keyboard hint on touch */
  .character-ragdoll__keyboard-hint {
    display: none;
  }

  /* Adjust hint for touch */
  .character-ragdoll__hint::after {
    content: " (long-press to drag)";
  }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .character-silhouette .equipment-slot,
  .character-silhouette .equipped-icon {
    transition: none;
  }

  .character-silhouette .equipment-slot.slot--valid-drop,
  .character-silhouette .equipment-slot.slot--pending {
    animation: none;
  }
}

/* =============================================================================
   DARK MODE ADJUSTMENTS
   ============================================================================= */

[data-theme="dark"] .character-ragdoll,
.dark .character-ragdoll {
  --ragdoll-bg: var(--surface-0, #1e1e2e);
  --ragdoll-border: var(--border-subtle, #313244);
  --ragdoll-slot-idle: rgba(99, 102, 241, 0.15);
  --ragdoll-slot-hover: rgba(99, 102, 241, 0.35);
}
/**
 * Stat Comparison Panel
 *
 * Before/after stat comparison for equipment changes.
 * Shows current vs. proposed with color-coded differences.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Container
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.stat-comparison__body {
  min-height: 100px;
}

.stat-comparison__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
  text-align: center;
}

.stat-comparison__empty .empty-state {
  max-width: 200px;
}

.stat-comparison__empty .empty-state__icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  opacity: 0.5;
}

.stat-comparison__empty .empty-state__text {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.stat-comparison__empty .empty-state__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

.stat-comparison__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.stat-comparison__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.stat-comparison__title svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Grid Layout
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.stat-comparison__header {
  display: grid;
  grid-template-columns: 1fr 70px 70px 60px;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-comparison__col-label {
  text-align: center;
}

.stat-comparison__col-label:first-child {
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stat Rows
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__row {
  display: grid;
  grid-template-columns: 1fr 70px 70px 60px;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

/* When no proposed column */
.stat-comparison__row:has(.stat-comparison__value--current:last-child) {
  grid-template-columns: 1fr 70px;
}

.stat-comparison__row:hover {
  background: var(--bg-hover);
}

/* Row states */
.stat-comparison__row--increase {
  background: color-mix(in srgb, var(--color-success) 10%, var(--bg-tertiary));
}

.stat-comparison__row--decrease {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-tertiary));
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stat Name
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__stat-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.stat-comparison__stat-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Values
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__value {
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.stat-comparison__value--current {
  color: var(--text-primary);
}

.stat-comparison__value--proposed {
  font-weight: 600;
}

.stat-comparison__value--diff {
  font-weight: 600;
  font-size: var(--font-size-xs);
}

/* Diff colors */
.stat-comparison__diff--increase {
  color: var(--color-success);
}

.stat-comparison__diff--decrease {
  color: var(--color-danger);
}

/* Animation for value changes */
.stat-comparison__value--animated {
  animation: value-pop 0.3s ease;
}

@keyframes value-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Action Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.stat-comparison__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.stat-comparison__actions .btn svg {
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Compact Mode
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison--compact .stat-comparison__header,
.stat-comparison--compact .stat-comparison__row {
  grid-template-columns: 1fr 60px 60px 50px;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
}

.stat-comparison--compact .stat-comparison__stat-name {
  font-size: var(--font-size-xs);
}

.stat-comparison--compact .stat-comparison__value {
  font-size: var(--font-size-xs);
}

.stat-comparison--compact .stat-comparison__stat-icon {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Summary Card (Alternative Layout)
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.stat-comparison__summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs);
  min-width: 60px;
}

.stat-comparison__summary-label {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-comparison__summary-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.stat-comparison__summary-diff {
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.stat-comparison__summary-item--increase .stat-comparison__summary-diff {
  color: var(--color-success);
}

.stat-comparison__summary-item--decrease .stat-comparison__summary-diff {
  color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Adjustments
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .stat-comparison__header,
  .stat-comparison__row {
    grid-template-columns: 1fr 50px 50px 45px;
    gap: var(--spacing-2xs);
  }

  .stat-comparison__stat-icon {
    display: none;
  }

  .stat-comparison__value {
    font-size: var(--font-size-xs);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .stat-comparison__row,
  .stat-comparison__value--animated {
    transition: none;
    animation: none;
  }
}
/**
 * Creation Preview Panel
 *
 * Live character preview during creation showing:
 * - Race/class selection
 * - Ability score summary
 * - Skills list
 * - Equipment preview
 * - Overall summary
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Container
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  min-height: 200px;
}

.creation-preview--compact {
  padding: var(--spacing-sm);
  gap: var(--spacing-sm);
}

.creation-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.creation-preview__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.creation-preview__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Placeholder State
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-muted);
}

.creation-preview__placeholder-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.creation-preview__placeholder-text {
  font-size: var(--font-size-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Content Sections
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.creation-preview__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.creation-preview__section--hidden {
  display: none;
}

.creation-preview__section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__section-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Race & Class Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__identity {
  display: flex;
  gap: var(--spacing-md);
}

.creation-preview__identity-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.creation-preview__identity-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__identity-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.creation-preview__identity-detail {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Race icons */
.creation-preview__race-icon,
.creation-preview__class-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-2xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ability Scores Grid
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
}

.creation-preview__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.creation-preview__ability-name {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__ability-score {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.creation-preview__ability-modifier {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.creation-preview__ability-modifier--positive {
  color: var(--color-success);
}

.creation-preview__ability-modifier--negative {
  color: var(--color-danger);
}

/* Racial bonus indicator */
.creation-preview__ability--has-bonus .creation-preview__ability-score {
  color: var(--color-accent);
}

.creation-preview__ability-bonus {
  font-size: var(--font-size-2xs);
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Skills Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.creation-preview__skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.creation-preview__skill-chip--proficient {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.creation-preview__skill-chip--expertise {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}

.creation-preview__skill-icon {
  width: 12px;
  height: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Equipment Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__equipment {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.creation-preview__equipment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.creation-preview__equipment-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.creation-preview__equipment-name {
  flex: 1;
  color: var(--text-primary);
}

.creation-preview__equipment-qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Summary Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.creation-preview__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creation-preview__summary-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.creation-preview__summary-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__section {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.creation-preview__section--entering {
  animation: creation-preview-enter 0.3s ease forwards;
}

@keyframes creation-preview-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.creation-preview__ability,
.creation-preview__skill-chip,
.creation-preview__equipment-item {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.creation-preview__ability:hover,
.creation-preview__skill-chip:hover,
.creation-preview__equipment-item:hover {
  background: var(--bg-hover);
}

/* Value change highlight */
.creation-preview__ability--changed,
.creation-preview__summary-value--changed {
  animation: value-highlight 0.5s ease;
}

@keyframes value-highlight {
  0%, 100% {
    background: transparent;
  }
  50% {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Compact Mode
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview--compact .creation-preview__identity {
  flex-direction: column;
  gap: var(--spacing-xs);
}

.creation-preview--compact .creation-preview__abilities {
  grid-template-columns: repeat(6, 1fr);
}

.creation-preview--compact .creation-preview__ability {
  padding: var(--spacing-2xs);
}

.creation-preview--compact .creation-preview__ability-name {
  display: none;
}

.creation-preview--compact .creation-preview__ability-modifier {
  font-size: var(--font-size-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .creation-preview__section,
  .creation-preview__ability,
  .creation-preview__skill-chip,
  .creation-preview__equipment-item {
    transition: none;
  }

  .creation-preview__section--entering,
  .creation-preview__ability--changed,
  .creation-preview__summary-value--changed {
    animation: none;
  }
}
/**
 * Spell Selector Panel
 * ====================
 * Displays available spells during character creation for spell-casting classes.
 * Features a searchable grid of spell cards with level filtering, school badges,
 * and selection tracking. Used in the character creation wizard's spell selection step.
 */

/* Container */
.spell-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header */
.spell-selector__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.spell-selector__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.spell-selector__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Content Area */
.spell-selector__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Empty State */
.spell-selector__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.spell-selector__empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.spell-selector__empty-text {
  font-size: 0.9rem;
  margin: 0;
  max-width: 200px;
}

/* Footer */
.spell-selector__footer {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-default);
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.spell-selector__footer:empty {
  display: none;
}

/* ========================================
 * Panel-specific Styles
 * Add custom styles below this line
 * ======================================== */

/* Title Row */
.spell-selector__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Filters */
.spell-selector__filters {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.spell-selector__search,
.spell-selector__filter {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 0.85rem;
  font-family: 'Fira Code', monospace;
}

.spell-selector__search:focus,
.spell-selector__filter:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* Spell Slots Section */
.spell-selector__slots-section {
  margin: var(--space-4) 0;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-selector__section-title {
  margin: 0 0 var(--space-2) 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.spell-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-slot-level {
  min-width: 60px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.spell-slot-pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spell-slot-pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-slot-pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-slot-count {
  min-width: 40px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* Concentration Banner */
.spell-selector__concentration {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  margin: var(--space-4) 0;
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.1));
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.3));
  border-radius: var(--radius-sm);
}

.spell-selector__concentration--active {
  display: flex;
}

.spell-selector__concentration-content {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.spell-selector__concentration-icon {
  font-size: 1.1rem;
}

.spell-selector__concentration-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.spell-selector__concentration-spell {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

.spell-selector__concentration-end {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.5));
  border-radius: var(--radius-sm);
  color: var(--color-accent-purple);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spell-selector__concentration-end:hover {
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.2));
  border-color: var(--color-accent-purple);
}

/* Spell List */
.spell-selector__spell-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spell-level-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spell-level-title {
  margin: 0;
  padding: var(--space-1) 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-default);
}

.spell-level-spells {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Spell Card (scoped to spell-selector) */
.spell-selector__card {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.spell-selector__card:hover {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 8px var(--color-accent-primary-glow, rgba(6, 182, 212, 0.2));
}

.spell-selector__card--cantrip {
  border-left: 3px solid var(--color-accent-warning);
}

.spell-selector__card--prepared {
  border-left: 3px solid var(--color-accent-secondary);
  background: var(--color-accent-secondary-bg, rgba(34, 197, 94, 0.05));
}

.spell-selector__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.spell-selector__card-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.spell-selector__card-name:hover {
  color: var(--color-accent-primary);
}

.spell-selector__card-tags {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.spell-selector__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.spell-selector__card-school {
  padding: 2px var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.spell-selector__card-range {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.spell-selector__card-actions {
  display: flex;
  justify-content: flex-end;
}

.spell-selector__card-cast-btn {
  padding: var(--space-1) var(--space-4);
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.spell-selector__card-cast-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--color-accent-primary);
  box-shadow: 0 0 8px var(--color-accent-primary-glow, rgba(6, 182, 212, 0.3));
}

.spell-selector__card-cast-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}

/* Cast Menu */
.spell-cast-menu {
  z-index: var(--z-floating);
  min-width: 200px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px var(--overlay-medium-plus);
  overflow: hidden;
}

.spell-cast-menu__header {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.spell-cast-menu__options {
  display: flex;
  flex-direction: column;
}

.spell-cast-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.spell-cast-menu__option:last-child {
  border-bottom: none;
}

.spell-cast-menu__option:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-accent-primary);
}

.spell-cast-menu__option-label {
  font-weight: 600;
}

.spell-cast-menu__option-slots {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* Spell Details Modal */
.spell-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-warning);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spell-details-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-heavy);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.spell-details-modal__content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px var(--overlay-heavy-plus);
  overflow-y: auto;
}

.spell-details-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.spell-details-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

.spell-details-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.spell-details-modal__close:hover {
  color: var(--color-accent-error);
}

.spell-details-modal__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spell-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-stat__value {
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.spell-details-modal__description {
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.spell-details-modal__higher {
  padding: var(--space-2);
  background: var(--color-accent-primary-bg, rgba(6, 182, 212, 0.1));
  border: 1px solid var(--color-accent-primary-border, rgba(6, 182, 212, 0.3));
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Loading State */
.spell-selector__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.spell-selector__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spell-selector__loading-text {
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Error State */
.spell-selector__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.spell-selector__error-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.spell-selector__error-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.spell-selector__retry-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.spell-selector__retry-btn:hover {
  background: transparent;
  color: var(--color-accent-primary);
}

/* Footer Stats */
.spell-selector__footer-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.spell-selector__footer-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.spell-selector__footer-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.spell-selector__footer-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .spell-selector {
    padding: var(--space-2);
  }

  .spell-selector__header {
    margin-bottom: var(--space-2);
  }
}

/* ========================================
 * ENHANCED SPELL TOOLTIPS
 * Quick reference on hover
 * ======================================== */

.spell-tooltip-wrapper {
  pointer-events: none;
  animation: spell-tooltip-fade-in 0.15s ease-out;
}

@keyframes spell-tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.spell-tooltip {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: 0.75rem;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 8px 24px var(--overlay-medium-plus);
  font-size: 0.8125rem;
}

.spell-tooltip__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.spell-tooltip__school-icon {
  font-size: 1.25rem;
}

.spell-tooltip__name {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.spell-tooltip__level {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.spell-tooltip__stats {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.spell-tooltip__stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spell-tooltip__stat-icon {
  font-size: 0.875rem;
  width: 1.25rem;
  text-align: center;
}

.spell-tooltip__stat-value {
  color: var(--color-text-primary);
  font-size: 0.8125rem;
}

.spell-tooltip__components {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.spell-tooltip__tags {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.spell-tooltip__tag {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spell-tooltip__tag--conc {
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.2));
  color: var(--color-accent-purple-light);
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.3));
}

.spell-tooltip__tag--ritual {
  background: var(--color-accent-secondary-bg, rgba(34, 197, 94, 0.2));
  color: var(--color-accent-secondary-light);
  border: 1px solid var(--color-accent-secondary-border, rgba(34, 197, 94, 0.3));
}

/* ========================================
 * ENHANCED SPELL CARDS
 * School icons and better visual hierarchy
 * ======================================== */

.spell-selector__card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spell-selector__card-school-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spell-tooltip-wrapper {
    animation: none;
  }

  .spell-slot-pip--filled {
    animation: none;
  }
}
/*
 * Confirm Dialog - Non-blocking confirmation modal
 * =================================================
 * Terminal-themed <dialog> replacement for window.confirm().
 * Uses native <dialog> element with showModal() for built-in
 * focus trapping and backdrop.
 */

/* ========================================
 * DIALOG ELEMENT
 * ======================================== */

.confirm-dialog {
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 420px;
  width: calc(100% - var(--space-8, 2rem));
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.15);
  animation: confirm-dialog-enter 0.15s ease-out;
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  animation: confirm-dialog-backdrop 0.15s ease-out;
}

/* ========================================
 * VARIANT BORDERS
 * ======================================== */

.confirm-dialog--danger {
  border-color: var(--color-danger, #e06c75);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(224, 108, 117, 0.15);
}

.confirm-dialog--warning {
  border-color: var(--color-warning, #e5c07b);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(229, 192, 123, 0.15);
}

/* ========================================
 * CONTENT
 * ======================================== */

.confirm-dialog__content {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.confirm-dialog__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-primary, #e0e0e0);
}

.confirm-dialog__message {
  margin: 0 0 var(--space-5, 1.25rem);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * ACTIONS
 * ======================================== */

.confirm-dialog__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
}

.confirm-dialog__btn {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 4px);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.confirm-dialog__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* Cancel button */
.confirm-dialog__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.confirm-dialog__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

/* Confirm button (info - default) */
.confirm-dialog__btn--confirm {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
}

.confirm-dialog__btn--confirm:hover {
  filter: brightness(1.1);
}

/* Confirm button (danger) */
.confirm-dialog__btn--danger {
  background: var(--color-danger, #e06c75);
  color: #fff;
}

.confirm-dialog__btn--danger:hover {
  filter: brightness(1.1);
}

/* Confirm button (warning) */
.confirm-dialog__btn--warning {
  background: var(--color-warning, #e5c07b);
  color: #1e1e2e;
}

.confirm-dialog__btn--warning:hover {
  filter: brightness(1.1);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes confirm-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes confirm-dialog-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-dialog {
    animation: none;
  }
  .confirm-dialog::backdrop {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .confirm-dialog {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .confirm-dialog__actions {
    flex-direction: column-reverse;
  }

  .confirm-dialog__btn {
    width: 100%;
    text-align: center;
  }
}
/*
 * Message Queue Indicator
 * =======================
 * Shows when a player's message is queued in multiplayer
 * (waiting for another player's action to complete).
 */

.message-queue-indicator {
  position: relative;
  margin: 0 16px 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.message-queue-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.queue-indicator__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.queue-indicator__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(245, 158, 11, 0.3);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: queue-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes queue-spin {
  to {
    transform: rotate(360deg);
  }
}

.queue-indicator__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.queue-indicator__status {
  font-size: 13px;
  font-weight: 600;
  color: #f59e0b;
  font-family: 'Courier New', monospace;
}

.queue-indicator__reason {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-family: 'Courier New', monospace;
}

.queue-indicator__message {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-indicator__message:empty {
  display: none;
}

.queue-indicator__cancel {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.queue-indicator__cancel:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .queue-indicator__content {
    flex-wrap: wrap;
  }

  .queue-indicator__message {
    width: 100%;
    max-width: none;
    order: 1;
    margin-top: 8px;
  }
}
/*
 * NPC Quick Reference Panel
 * ==========================
 * Left sidebar panel for DMs showing active NPCs in current scene.
 * Compact cards with instant stat/personality access.
 *
 * Design: Color-coded by disposition, expandable details, search/filter
 */

/* ========================================
   Panel Container
   ======================================== */

.npc-quick-reference {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-panel-bg, #1a1a2e);
  color: var(--color-text, #e0e0e0);
  overflow: hidden;
}

/* ========================================
   Header
   ======================================== */

.npc-qr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #333);
  background: rgba(212, 175, 55, 0.08);
}

.npc-qr-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.npc-qr-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold, #d4af37);
}

.npc-qr-icon .svg-icon,
.npc-qr-icon svg {
  width: 100%;
  height: 100%;
}

.npc-qr-title h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-bright, #fff);
}

.npc-qr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  background: var(--color-accent, #4a9eff);
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

/* ========================================
   Filter Tabs
   ======================================== */

.npc-qr-filters {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #333);
  background: var(--color-panel-bg-light, #1e1e35);
}

.npc-filter-tab {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border, #333);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.npc-filter-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-bright, #555);
  color: var(--color-text, #e0e0e0);
}

.npc-filter-tab.active {
  background: var(--color-accent, #4a9eff);
  border-color: var(--color-accent, #4a9eff);
  color: #fff;
}

/* ========================================
   Search Bar
   ======================================== */

.npc-qr-search {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #333);
}

.npc-qr-search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: var(--color-input-bg, #0f0f1e);
  border: 1px solid var(--color-border, #333);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text, #e0e0e0);
  transition: border-color 0.15s ease;
}

.npc-qr-search-input:focus {
  outline: none;
  border-color: var(--color-accent, #4a9eff);
}

.npc-qr-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

.npc-qr-search-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted, #888);
  pointer-events: none;
}

/* ========================================
   NPC List
   ======================================== */

.npc-qr-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Custom scrollbar */
.npc-qr-list::-webkit-scrollbar {
  width: 0.5rem;
}

.npc-qr-list::-webkit-scrollbar-track {
  background: var(--color-panel-bg, #1a1a2e);
}

.npc-qr-list::-webkit-scrollbar-thumb {
  background: var(--color-border, #333);
  border-radius: 0.25rem;
}

.npc-qr-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-bright, #555);
}

/* ========================================
   NPC Cards
   ======================================== */

.npc-card {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--color-panel-bg-light, #1e1e35);
  border: 1px solid var(--color-border, #333);
  border-left: 3px solid var(--npc-color, var(--color-border));
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.npc-card:hover {
  border-color: var(--color-border-bright, #555);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.npc-card.expanded {
  border-left-color: var(--color-accent, #4a9eff);
}

/* Disposition color coding */
.npc-disposition-friendly,
.npc-disposition-ally {
  --npc-color: var(--color-success, #22c55e);
}

.npc-disposition-neutral {
  --npc-color: var(--color-warning, #f59e0b);
}

.npc-disposition-hostile,
.npc-disposition-enemy {
  --npc-color: var(--color-danger, #ef4444);
}

/* Card Header */
.npc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.npc-card-title {
  flex: 1;
  min-width: 0;
}

.npc-name {
  margin: 0 0 0.125rem 0;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-bright, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.npc-role {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

.npc-expand-btn {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.npc-expand-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text, #e0e0e0);
}

.npc-expand-btn.expanded {
  transform: rotate(180deg);
  color: var(--color-accent, #4a9eff);
}

/* Quick Stats */
.npc-card-quick-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
}

.npc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.npc-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
}

.npc-stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-bright, #fff);
  font-family: 'Courier New', monospace;
}

/* Personality Trait */
.npc-card-personality {
  margin-bottom: 0.5rem;
}

.npc-trait {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: rgba(212, 175, 55, 0.05);
  border-radius: 0.25rem;
}

.npc-trait-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.125rem;
  color: var(--color-gold, #d4af37);
}

.npc-trait-text {
  flex: 1;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text, #e0e0e0);
}

/* Card Actions */
.npc-card-actions {
  display: flex;
  gap: 0.375rem;
}

.npc-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: var(--color-button-bg, #2a2a45);
  border: 1px solid var(--color-border, #333);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text, #e0e0e0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.npc-action-btn:hover {
  background: var(--color-button-bg-hover, #35355a);
  border-color: var(--color-border-bright, #555);
  color: var(--color-text-bright, #fff);
}

.npc-action-btn .svg-icon,
.npc-action-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.npc-speak-btn {
  border-color: var(--color-gold, #d4af37);
}

.npc-speak-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--color-gold, #d4af37);
  color: var(--color-gold, #d4af37);
}

.npc-info-btn {
  flex: 0 0 auto;
  padding: 0.375rem;
}

/* Expanded Content */
.npc-card-expanded {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #333);
}

.npc-expanded-section {
  margin-bottom: 0.75rem;
}

.npc-expanded-section:last-child {
  margin-bottom: 0;
}

.npc-expanded-title {
  margin: 0 0 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
}

.npc-voice-notes,
.npc-dm-notes {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text, #e0e0e0);
}

.npc-stat-block {
  font-size: 0.75rem;
  line-height: 1.5;
}

.npc-stat-block .stat-line {
  margin-bottom: 0.25rem;
  color: var(--color-text, #e0e0e0);
}

.npc-stat-block .stat-line strong {
  color: var(--color-text-bright, #fff);
}

.npc-stat-block .abilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.npc-stat-block .abilities span {
  font-size: 0.6875rem;
}

/* ========================================
   Empty State
   ======================================== */

.npc-qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.npc-qr-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--color-text-muted, #888);
  opacity: 0.5;
}

.npc-qr-empty-text {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
}

.npc-qr-empty-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  line-height: 1.5;
}

/* ========================================
   Loading State
   ======================================== */

.npc-qr-loading {
  padding: 1rem;
}

.panel-loading-skeleton {
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* ========================================
   Flash Messages
   ======================================== */

.npc-card-flash {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: none;
  animation: flash-fade-in-out 2s ease;
  z-index: var(--z-sticky);
}

.npc-card-flash-success {
  background: var(--color-success, #22c55e);
  color: #fff;
}

.npc-card-flash-error {
  background: var(--color-danger, #ef4444);
  color: #fff;
}

@keyframes flash-fade-in-out {
  0%, 100% {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Error State
   ======================================== */

.npc-qr-error {
  padding: 1rem;
  text-align: center;
  color: var(--color-danger, #ef4444);
  font-size: 0.8125rem;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .npc-qr-filters {
    padding: 0.375rem 0.5rem;
  }

  .npc-filter-tab {
    font-size: 0.6875rem;
    padding: 0.25rem 0.375rem;
  }

  .npc-card {
    padding: 0.5rem;
  }

  .npc-card-quick-stats {
    gap: 0.5rem;
  }
}
/**
 * Combat Action Dashboard
 * =======================
 * Phase 1: P0-2 - Right sidebar combat action panel
 *
 * Reduces combat turn time from 2+ minutes to <45 seconds by displaying:
 * - Action economy (Action, Bonus, Reaction, Movement)
 * - Spell slot gems with visual status
 * - Contextually filtered available actions
 * - Prominent End Turn button
 */

/* ========================================
 * Base Layout
 * ======================================== */

.combat-action-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
  overflow: hidden;
}

.combat-action-dashboard__header {
  padding: var(--space-3) var(--panel-padding);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.combat-action-dashboard__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat-action-dashboard__content {
  flex: 1;
  padding: var(--panel-padding);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--section-spacing);
}

/* ========================================
 * Action Economy Display
 * ======================================== */

.action-economy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.action-economy__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-economy__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.action-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  position: relative;
}

.action-slot.available {
  border-color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 8%, var(--color-bg-secondary));
  overflow: hidden;
}

/* Phase 4 P2-18: Action token shimmer effect */
.action-slot.available::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: actionShimmer 3s ease-in-out infinite;
}

@keyframes actionShimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

.action-slot.used {
  border-color: var(--color-border-subtle);
  opacity: 0.5;
}

.action-slot__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.action-slot__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

.action-slot.available .action-slot__label {
  color: var(--color-accent-success);
}

/* Movement bar */
.movement-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.movement-display__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.movement-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.movement-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    color-mix(in srgb, var(--color-accent-primary) 85%, white)
  );
  transition: width var(--transition-normal);
  position: relative;
}

.movement-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.movement-text {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  text-align: center;
  margin-top: var(--space-1);
}

/* ========================================
 * Spell Slot Tracker
 * ======================================== */

.spell-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spell-slots__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-level-track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.spell-level-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  min-width: 50px;
}

.spell-slots {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.spell-gem {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.spell-gem.available {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-gem.used {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-count {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  min-width: 30px;
  text-align: right;
}

.no-spell-slots {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Available Actions List
 * ======================================== */

.available-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.available-actions__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.combat-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  min-height: 44px;
  text-align: left;
}

.combat-action-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.combat-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

.combat-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.combat-action-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.action-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
  flex-shrink: 0;
}

.action-label {
  flex: 1;
  line-height: 1.3;
}

.action-cost {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Action type specific styling */
.action-attack {
  border-left: 3px solid var(--color-accent-error);
}

.action-spell {
  border-left: 3px solid var(--color-accent-purple);
}

.action-bonus {
  border-left: 3px solid var(--color-accent-warning);
}

.no-actions {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * End Turn Button
 * ======================================== */

.combat-action-dashboard__footer {
  padding: var(--panel-padding);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.end-turn-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-accent-error);
  border: 2px solid var(--color-accent-error);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 48px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.end-turn-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-error) 85%, white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.end-turn-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.end-turn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.end-turn-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 3px;
}

/* ========================================
 * Mobile Responsive
 * ======================================== */

@media (max-width: 768px) {
  .action-economy__slots {
    grid-template-columns: 1fr 1fr;
  }

  .combat-action-btn {
    min-height: 48px;
  }

  .end-turn-btn {
    min-height: 52px;
    font-size: var(--font-size-xl);
  }
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .spell-gem.available {
    animation: none;
  }

  .combat-action-btn:hover,
  .end-turn-btn:hover {
    transform: none;
  }

  .movement-fill {
    transition: none;
  }
}
/* Token Spawner Panel Styles */

.token-spawner-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-panel, #1a1a2e);
  color: var(--color-text-primary, #eee);
}

.token-spawner-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.spawner-icon {
  color: var(--color-accent, #9b59b6);
}

/* Search Input */
.token-spawner-search {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-search-input {
  width: 100%;
  padding: 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
}

.token-search-input:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

.token-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* Size Selector */
.token-spawner-size-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.size-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #aaa);
}

.size-select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
  font-size: 0.875rem;
}

.size-select:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

/* Tab Navigation */
.token-spawner-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-secondary, #aaa);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.token-tab:hover {
  background: var(--color-bg-hover, #3a3a5a);
  color: var(--color-text-primary, #eee);
}

.token-tab.active {
  background: var(--color-accent-dark, #2d1f4e);
  color: var(--color-accent, #9b59b6);
}

.token-tab svg {
  width: 14px;
  height: 14px;
}

/* Tab Content */
.token-spawner-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.token-tab-panel {
  display: none;
}

.token-tab-panel.active {
  display: block;
}

/* Token Grid */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
}

/* Token Card */
.token-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--color-bg-card, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 6px;
  cursor: grab;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.token-card:hover {
  background: var(--color-bg-hover, #3a3a5a);
  border-color: var(--color-accent, #9b59b6);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.token-card:active {
  cursor: grabbing;
}

.token-card--dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.token-card-preview {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.token-symbol {
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.token-card-name {
  font-size: 0.625rem;
  color: var(--color-text-secondary, #aaa);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom Token Form */
.custom-token-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.custom-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.custom-form-group label {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #aaa);
}

.custom-token-name,
.custom-token-symbol {
  padding: 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
}

.custom-token-symbol {
  width: 50px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.custom-token-color {
  width: 50px;
  height: 32px;
  padding: 2px;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  cursor: pointer;
}

.create-custom-btn {
  padding: 0.5rem 1rem;
  background: var(--color-accent, #9b59b6);
  border: none;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.create-custom-btn:hover {
  background: var(--color-accent-light, #b775d4);
}

.custom-tokens-grid {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.empty-custom-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
  grid-column: 1 / -1;
}

/* Instructions */
.token-spawner-instructions {
  padding: 0.5rem 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner-instructions p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.token-spawner-instructions svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent, #9b59b6);
}

/* VTT Canvas Drop Target State */
.vtt-canvas--drop-target {
  outline: 2px dashed var(--color-accent, #9b59b6);
  outline-offset: -2px;
}

/* Token Drop Preview */
.token-drop-preview {
  pointer-events: none;
  animation: drop-preview-pulse 1s ease-in-out infinite;
}

@keyframes drop-preview-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* ========================================================================== */
/* Bottom Drawer Mode */
/* ========================================================================== */

.token-spawner--drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-bg-panel, #1a1a2e);
  border-top: 2px solid var(--color-accent, #9b59b6);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  max-height: 400px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, max-height 0.3s ease;
  transform: translateY(calc(100% - 48px)); /* Show only handle when closed */
}

.token-spawner--drawer.token-spawner--open {
  transform: translateY(0); /* Fully visible when open */
}

/* Drawer Handle (Always Visible) */
.token-spawner__drawer-handle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.token-spawner__drawer-handle:hover {
  background: var(--color-bg-hover, #3a3a5a);
}

.token-spawner__drawer-icon {
  font-size: 0.875rem;
  color: var(--color-accent, #9b59b6);
  transition: transform 0.3s ease;
}

.token-spawner--open .token-spawner__drawer-icon {
  transform: rotate(180deg);
}

.token-spawner__drawer-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #eee);
}

.token-spawner__drawer-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

.token-spawner--open .token-spawner__drawer-hint {
  display: none;
}

/* Drawer Content (Hidden When Collapsed) */
.token-spawner--drawer .token-spawner__header {
  flex-shrink: 0;
}

.token-spawner--drawer .token-spawner__search,
.token-spawner--drawer .token-spawner__tabs,
.token-spawner--drawer .token-spawner__list-container,
.token-spawner--drawer .token-spawner__selection,
.token-spawner--drawer .token-spawner__quick-actions,
.token-spawner--drawer .token-spawner__help {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__search,
.token-spawner--drawer.token-spawner--open .token-spawner__tabs,
.token-spawner--drawer.token-spawner--open .token-spawner__list-container,
.token-spawner--drawer.token-spawner--open .token-spawner__selection,
.token-spawner--drawer.token-spawner--open .token-spawner__quick-actions,
.token-spawner--drawer.token-spawner--open .token-spawner__help {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* Batch Spawn Mode */
/* ========================================================================== */

/* Entity Item Batch Actions */
.entity-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--color-bg-card, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.entity-item:hover {
  background: var(--color-bg-hover, #3a3a5a);
  border-color: var(--color-accent, #9b59b6);
}

.entity-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.entity-item__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary, #eee);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-item__subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.entity-item__badge {
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  background: var(--color-accent-dark, #2d1f4e);
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-accent, #9b59b6);
}

.entity-item__batch-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.entity-item:hover .entity-item__batch-actions {
  opacity: 1;
}

.entity-batch-btn {
  padding: 0.25rem 0.5rem;
  background: var(--color-accent, #9b59b6);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.entity-batch-btn:hover {
  background: var(--color-accent-light, #b775d4);
  transform: scale(1.1);
}

.entity-batch-btn:active {
  transform: scale(0.95);
}

/* Batch Spawn Toast Notification */
.batch-spawn-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-ceiling);
  padding: 1rem 1.5rem;
  background: var(--color-bg-panel, #1a1a2e);
  border: 2px solid var(--color-accent, #9b59b6);
  border-radius: 8px;
  color: var(--color-text-primary, #eee);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: none;
  animation: toast-slide-in 0.3s ease;
}

.batch-spawn-toast--success {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.batch-spawn-toast--info {
  border-color: var(--color-accent, #9b59b6);
}

@keyframes toast-slide-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* VTT Canvas in Batch Spawn Mode */
.vtt-canvas--batch-spawn-active {
  cursor: crosshair;
}

.vtt-canvas--batch-spawn-active * {
  cursor: crosshair;
}

/* Batch Spawn Markers */
.batch-spawn-marker {
  pointer-events: none;
  animation: batch-marker-appear 0.3s ease;
}

@keyframes batch-marker-appear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================================================== */
/* Monster Filter Bar */
/* ========================================================================== */

.token-spawner__filters {
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner__filter-select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
  font-size: 0.75rem;
}

.token-spawner__filter-select:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

/* Drawer filter visibility transitions */
.token-spawner--drawer .token-spawner__filters {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__filters {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* Monster Stat Preview */
/* ========================================================================== */

.token-spawner__stat-preview {
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner__stat-loading,
.token-spawner__stat-error {
  display: block;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.stat-block {
  padding: 0.5rem;
  font-size: 0.75rem;
}

.stat-block__name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-accent, #9b59b6);
  margin-bottom: 0.125rem;
}

.stat-block__meta {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
  text-transform: capitalize;
}

.stat-block__divider {
  height: 1px;
  background: var(--color-border, #3a3a5a);
  margin: 0.375rem 0;
}

.stat-block__combat {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stat-block__combat span {
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #aaa);
}

.stat-block__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
  text-align: center;
}

.stat-block__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-block__ability-label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-accent, #9b59b6);
}

.stat-block__ability-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary, #eee);
}

.stat-block__ability-mod {
  font-size: 0.5625rem;
  color: var(--color-text-muted, #888);
}

.stat-block__actions-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent, #9b59b6);
  margin-bottom: 0.25rem;
}

.stat-block__action {
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #aaa);
  margin-bottom: 0.125rem;
}

/* Drawer stat preview visibility */
.token-spawner--drawer .token-spawner__stat-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__stat-preview {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* CR Difficulty Badges */
/* ========================================================================== */

.entity-item__badge--cr-low {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.entity-item__badge--cr-medium {
  background: rgba(255, 193, 7, 0.2);
  color: #FFC107;
}

.entity-item__badge--cr-high {
  background: rgba(255, 152, 0, 0.2);
  color: #FF9800;
}

.entity-item__badge--cr-deadly {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}
/**
 * NPC Portrait Panel
 * ==================
 * Player-facing panel showing the current speaking NPC during dialogue.
 * Features animated portrait frame, disposition indicators, and personality hints.
 */

/* ========================================
   Panel Container
   ======================================== */

.npc-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md, 12px);
  background: var(--surface-1, #1a1a2e);
  color: var(--text-1, #e0e0e0);
  min-height: 200px;
}

/* ========================================
   Placeholder State
   ======================================== */

.npc-portrait__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl, 24px);
  text-align: center;
  opacity: 0.5;
}

.npc-portrait__placeholder-icon {
  color: var(--text-3, #666);
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__placeholder-text {
  color: var(--text-3, #666);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* ========================================
   Active NPC Display
   ======================================== */

.npc-portrait__active {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: npc-portrait-fadeIn 0.3s ease-out;
}

@keyframes npc-portrait-fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   Portrait Frame
   ======================================== */

.npc-portrait__frame {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: var(--space-md, 12px);
}

.npc-portrait__glow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  opacity: 0.4;
  transition: background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.npc-portrait__glow--friendly {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
}

.npc-portrait__glow--neutral {
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
  background: radial-gradient(circle, rgba(148, 163, 184, 0.1) 0%, transparent 70%);
}

.npc-portrait__glow--hostile {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);
}

.npc-portrait__frame--speaking .npc-portrait__glow {
  opacity: 0.7;
  animation: npc-glow-pulse 1s ease-in-out infinite;
}

@keyframes npc-glow-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

.npc-portrait__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #2a2a3e);
  border: 2px solid var(--border-1, #444);
  border-radius: 50%;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.npc-portrait__frame--speaking .npc-portrait__avatar {
  border-color: var(--color-gold, #d4af37);
}

.npc-portrait__avatar-icon {
  color: var(--text-2, #a0a0a0);
  opacity: 0.7;
}

.npc-portrait__avatar-icon svg {
  width: 60px;
  height: 60px;
}

/* Speaking Indicator */
.npc-portrait__speaking {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 3px 8px;
  background: var(--surface-2, #2a2a3e);
  border-radius: 10px;
  border: 1px solid var(--color-gold, #d4af37);
}

.npc-portrait__speaking-dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold, #d4af37);
  border-radius: 50%;
  animation: speaking-bounce 1.2s ease-in-out infinite;
}

.npc-portrait__speaking-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.npc-portrait__speaking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes speaking-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ========================================
   NPC Info
   ======================================== */

.npc-portrait__info {
  text-align: center;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-bright, #fff);
  margin-bottom: var(--space-2xs, 2px);
}

.npc-portrait__role {
  font-size: 0.8rem;
  color: var(--text-2, #a0a0a0);
  margin-bottom: var(--space-xs, 4px);
}

.npc-portrait__disposition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.npc-portrait__disposition-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.npc-portrait__disposition--friendly {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.npc-portrait__disposition--friendly .npc-portrait__disposition-indicator {
  background: #22c55e;
}

.npc-portrait__disposition--neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.npc-portrait__disposition--neutral .npc-portrait__disposition-indicator {
  background: #94a3b8;
}

.npc-portrait__disposition--hostile {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.npc-portrait__disposition--hostile .npc-portrait__disposition-indicator {
  background: #ef4444;
}

/* ========================================
   Personality Section
   ======================================== */

.npc-portrait__personality {
  width: 100%;
  padding: var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border-radius: 6px;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__personality-label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  font-size: 0.7rem;
  color: var(--text-3, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2xs, 2px);
}

.npc-portrait__personality-text {
  font-size: 0.8rem;
  color: var(--text-2, #a0a0a0);
  font-style: italic;
  line-height: 1.4;
}

/* ========================================
   Quick Stats
   ======================================== */

.npc-portrait__stats {
  width: 100%;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__stats-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-2, #a0a0a0);
  cursor: pointer;
  list-style: none;
}

.npc-portrait__stats-toggle::-webkit-details-marker {
  display: none;
}

.npc-portrait__stats-toggle svg {
  transition: transform 0.2s ease;
}

.npc-portrait__stats[open] .npc-portrait__stats-toggle svg {
  transform: rotate(180deg);
}

.npc-portrait__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs, 4px);
  padding: var(--space-sm, 8px);
  background: var(--surface-1, #1a1a2e);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 0 0 4px 4px;
}

.npc-portrait__stat {
  text-align: center;
}

.npc-portrait__stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-3, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.npc-portrait__stat-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-1, #e0e0e0);
}

/* ========================================
   Actions
   ======================================== */

.npc-portrait__actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.npc-portrait__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border: 1px solid var(--border-1, #444);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-2, #a0a0a0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.npc-portrait__action:hover {
  background: var(--surface-3, #3a3a4e);
  color: var(--text-1, #e0e0e0);
  border-color: var(--color-gold, #d4af37);
}

.npc-portrait__action svg {
  opacity: 0.7;
}

.npc-portrait__action:hover svg {
  opacity: 1;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .npc-portrait__active {
    animation: none;
  }

  .npc-portrait__frame--speaking .npc-portrait__glow {
    animation: none;
  }

  .npc-portrait__speaking-dot {
    animation: none;
    opacity: 1;
  }
}
/*
 * Party Wizard Modal - Create/Join Party Flow
 * ============================================
 * Step-through wizard for party formation.
 * Uses native <dialog> with terminal theme.
 */

/* ========================================
 * DIALOG BASE
 * ======================================== */

.party-wizard-modal {
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 480px;
  width: calc(100% - var(--space-8, 2rem));
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  animation: party-wizard-enter 0.2s ease-out;
  overflow: hidden;
}

.party-wizard-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  animation: party-wizard-backdrop 0.2s ease-out;
}

.party-wizard-modal[open] {
  display: flex;
}

/* ========================================
 * CONTENT WRAPPER
 * ======================================== */

.party-wizard-modal__content {
  position: relative;
  width: 100%;
  min-height: 320px;
}

.party-wizard-modal__close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.party-wizard-modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__close svg {
  width: 16px;
  height: 16px;
}

/* ========================================
 * STEP CONTAINERS
 * ======================================== */

.party-wizard-modal__step {
  padding: var(--space-6, 1.5rem);
  animation: party-wizard-step-in 0.2s ease-out;
}

/* ========================================
 * HEADER
 * ======================================== */

.party-wizard-modal__header {
  text-align: center;
  margin-bottom: var(--space-6, 1.5rem);
  position: relative;
}

.party-wizard-modal__back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__back:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * CHOOSE OPTIONS (Step 1)
 * ======================================== */

.party-wizard-modal__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.party-wizard-modal__option {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.party-wizard-modal__option:hover {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__option-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border-radius: var(--radius-md, 6px);
  color: var(--color-accent-primary, #61afef);
  flex-shrink: 0;
}

.party-wizard-modal__option-icon svg {
  width: 24px;
  height: 24px;
}

.party-wizard-modal__option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.party-wizard-modal__option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__option-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
}

.party-wizard-modal__option-arrow {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
  transition: transform 0.15s ease;
}

.party-wizard-modal__option:hover .party-wizard-modal__option-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * FORM ELEMENTS
 * ======================================== */

.party-wizard-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
}

.party-wizard-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.party-wizard-modal__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-wizard-modal__input {
  padding: var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e0e0e0);
  font-size: 1rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.party-wizard-modal__input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.party-wizard-modal__input::placeholder {
  color: var(--text-muted, #888);
}

.party-wizard-modal__input--code {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  text-align: center;
}

.party-wizard-modal__hint {
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
  margin: 0;
}

/* ========================================
 * PLAY MODE SELECTION
 * ======================================== */

.party-wizard-modal__play-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 0.75rem);
}

.party-wizard-modal__play-mode {
  cursor: pointer;
}

.party-wizard-modal__play-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.party-wizard-modal__play-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__play-mode:hover .party-wizard-modal__play-mode-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted, #888);
}

.party-wizard-modal__play-mode input:checked + .party-wizard-modal__play-mode-card {
  background: rgba(97, 175, 239, 0.15);
  border-color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__play-mode input:focus-visible + .party-wizard-modal__play-mode-card {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__play-mode-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #888);
}

.party-wizard-modal__play-mode input:checked + .party-wizard-modal__play-mode-card .party-wizard-modal__play-mode-icon {
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__play-mode-icon svg {
  width: 20px;
  height: 20px;
}

.party-wizard-modal__play-mode-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__play-mode-desc {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* ========================================
 * ACTIONS
 * ======================================== */

.party-wizard-modal__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
  margin-top: var(--space-2, 0.5rem);
}

.party-wizard-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.party-wizard-modal__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.party-wizard-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__btn--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__btn--primary:hover {
  filter: brightness(1.1);
}

.party-wizard-modal__btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ========================================
 * ERROR STATE
 * ======================================== */

.party-wizard-modal__error {
  padding: var(--space-3, 0.75rem);
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid var(--color-danger, #e06c75);
  border-radius: var(--radius-md, 6px);
  color: var(--color-danger, #e06c75);
  font-size: 0.875rem;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.party-wizard-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  background: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary, #444);
  border-top-color: var(--color-accent-primary, #61afef);
  border-radius: 50%;
  animation: party-wizard-spin 0.8s linear infinite;
}

.party-wizard-modal__loading-text {
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  margin: 0;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes party-wizard-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes party-wizard-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes party-wizard-step-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes party-wizard-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .party-wizard-modal,
  .party-wizard-modal::backdrop,
  .party-wizard-modal__step,
  .party-wizard-modal__spinner {
    animation: none;
  }
}

/* ========================================
 * WAITING ROOM (Step 4)
 * ======================================== */

.party-wizard-modal__invite-section {
  text-align: center;
  margin-bottom: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  background: rgba(97, 175, 239, 0.1);
  border-radius: var(--radius-md, 6px);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

.party-wizard-modal__invite-label {
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
  margin: 0 0 var(--space-2, 0.5rem);
}

.party-wizard-modal__invite-code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.party-wizard-modal__invite-code-text {
  font-size: 1.25rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-primary, #61afef);
  letter-spacing: 0.05em;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm, 4px);
}

.party-wizard-modal__copy-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__copy-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__copy-btn svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__members-section {
  margin-bottom: var(--space-4, 1rem);
}

.party-wizard-modal__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.party-wizard-modal__members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 200px;
  overflow-y: auto;
  padding-right: var(--space-2, 0.5rem);
}

.party-wizard-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.party-wizard-modal__member--ready {
  background: rgba(152, 195, 121, 0.15);
  border-color: var(--color-success, #98c379);
}

.party-wizard-modal__member--placeholder {
  opacity: 0.6;
  border-style: dashed;
}

.party-wizard-modal__member-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-full, 50%);
  color: var(--color-accent-primary, #61afef);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.party-wizard-modal__member--ready .party-wizard-modal__member-avatar {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-success, #98c379);
}

.party-wizard-modal__member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.party-wizard-modal__member-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__member-status {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.party-wizard-modal__member--ready .party-wizard-modal__member-status {
  color: var(--color-success, #98c379);
}

.party-wizard-modal__member-ready-icon {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
}

.party-wizard-modal__member--ready .party-wizard-modal__member-ready-icon {
  color: var(--color-success, #98c379);
}

.party-wizard-modal__waiting-message,
.party-wizard-modal__all-ready-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  font-size: 0.875rem;
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--space-4, 1rem);
}

.party-wizard-modal__waiting-message {
  background: rgba(255, 193, 7, 0.1);
  color: var(--color-warning, #e5c07b);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.party-wizard-modal__waiting-message svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__all-ready-message {
  background: rgba(152, 195, 121, 0.15);
  color: var(--color-success, #98c379);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.party-wizard-modal__all-ready-message svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__actions--waiting {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: center;
}

.party-wizard-modal__btn--secondary {
  background: transparent;
  border: 1px solid var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__btn--secondary:hover {
  background: rgba(97, 175, 239, 0.15);
}

.party-wizard-modal__btn--ready {
  background: var(--color-success, #98c379);
  border-color: var(--color-success, #98c379);
  color: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__btn--ready:hover {
  filter: brightness(0.9);
}

.party-wizard-modal__leave-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem);
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.party-wizard-modal__leave-btn:hover {
  color: var(--color-danger, #e06c75);
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .party-wizard-modal {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .party-wizard-modal__play-modes {
    grid-template-columns: 1fr;
  }

  .party-wizard-modal__play-mode-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-3, 0.75rem);
  }

  .party-wizard-modal__play-mode-desc {
    text-align: left;
  }

  .party-wizard-modal__actions {
    flex-direction: column-reverse;
  }

  .party-wizard-modal__btn {
    width: 100%;
    text-align: center;
  }
}
/* Character Story Viewer Panel */
/* Timeline visualization of adventure history and memories */

.character-story {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* Header */
.character-story__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.character-story__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.character-story__title h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.character-story__icon {
  color: var(--color-primary);
}

.character-story__actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* Filters */
.character-story__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

.filter-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.filter-tab {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.filter-tab.active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filter-importance {
  display: flex;
  gap: 2px;
}

.importance-btn {
  padding: 4px 6px;
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.importance-btn:hover {
  background: var(--color-bg-hover);
}

.importance-btn.active {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}

.importance-star {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.importance-btn.active .importance-star {
  color: #fbbf24;
}

/* Loading state */
.character-story__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  color: var(--color-text-secondary);
}

.character-story__loading.hidden {
  display: none;
}

.loading-text {
  font-style: italic;
}

/* Error state */
.character-story__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  color: var(--color-error);
}

.character-story__error.hidden {
  display: none;
}

.error-icon {
  font-size: 2rem;
}

/* Empty state */
.character-story__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  text-align: center;
}

.character-story__empty.hidden {
  display: none;
}

.empty-illustration {
  font-size: 3rem;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.empty-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.empty-message {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 300px;
}

/* Content area */
.character-story__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.character-story__content.hidden {
  display: none;
}

/* Sections */
.story-section {
  margin-bottom: var(--spacing-xl);
}

.story-section.hidden {
  display: none;
}

.story-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary);
}

.section-icon {
  color: var(--color-primary);
}

.section-count {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
}

.section-content {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.empty-text {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-md);
}

/* Backstory */
.backstory-origin {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.backstory-text {
  margin-bottom: var(--spacing-md);
  white-space: pre-wrap;
}

.backstory-traits,
.backstory-ideals,
.backstory-bonds,
.backstory-flaws {
  margin-bottom: var(--spacing-md);
}

.backstory-traits h4,
.backstory-ideals h4,
.backstory-bonds h4,
.backstory-flaws h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.backstory-traits ul,
.backstory-ideals ul,
.backstory-bonds ul,
.backstory-flaws ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.backstory-traits li,
.backstory-ideals li,
.backstory-bonds li,
.backstory-flaws li {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

/* Timeline */
.timeline-container {
  position: relative;
}

.timeline-period {
  margin-bottom: var(--spacing-md);
}

.period-title {
  margin: 0 0 var(--spacing-sm) 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.timeline-entry {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-sm);
}

.timeline-entry.hidden {
  display: none;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-bg-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-line {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin-top: var(--spacing-xs);
}

.timeline-content {
  flex: 1;
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.timeline-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
}

.timeline-date {
  color: var(--color-text-secondary);
}

.timeline-category {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 500;
  text-transform: capitalize;
}

.timeline-category.category-combat {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.timeline-category.category-social {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.timeline-category.category-exploration {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.timeline-category.category-discovery {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.timeline-category.category-quest {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.timeline-category.category-lore {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.timeline-importance {
  color: #fbbf24;
  letter-spacing: -2px;
}

.timeline-importance.importance-1 { opacity: 0.4; }
.timeline-importance.importance-2 { opacity: 0.6; }
.timeline-importance.importance-3 { opacity: 0.8; }
.timeline-importance.importance-4 { opacity: 0.9; }
.timeline-importance.importance-5 { opacity: 1; text-shadow: 0 0 4px rgba(251, 191, 36, 0.5); }

.timeline-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.timeline-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.timeline-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Relationships */
.relationships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.relationship-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.relationship-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.relationship-avatar {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-sm);
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-bg-tertiary);
  border-radius: 50%;
  font-size: 1.5rem;
}

.avatar-placeholder::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-user) no-repeat center / contain;
}

.relationship-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.relationship-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.relationship-disposition {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.disposition-label {
  color: var(--color-text-muted);
}

.disposition-value {
  font-weight: 600;
  text-transform: capitalize;
}

.disposition-friendly { color: #22c55e; }
.disposition-neutral { color: var(--color-text-secondary); }
.disposition-hostile { color: #ef4444; }
.disposition-trusted { color: #3b82f6; }

.relationship-history {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Quests */
.quests-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.quests-group h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.quest-entry {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.quest-entry.quest-active {
  border-left-color: #eab308;
}

.quest-entry.quest-completed {
  border-left-color: #22c55e;
  opacity: 0.8;
}

.quest-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.quest-description {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.quest-reward {
  font-size: var(--font-size-xs);
  color: #eab308;
}

/* Achievements */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-md);
}

.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.achievement-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(135deg, #a855f7, #3b82f6);
  border-radius: 50%;
  color: white;
}

.achievement-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.achievement-description {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.achievement-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/**
 * Companions Panel (Task #328)
 * ============================
 * Manages companion and familiar display.
 */

.companions-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel, #1a1a2e);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.companions-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companions-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.companions-panel__icon {
  font-size: 1.2em;
}

.companions-panel__count {
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-muted, #9ca3af);
  font-size: var(--font-size-sm, 12px);
}

.companions-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.companions-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.companions-panel__empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.companions-panel__empty-text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.companions-panel__empty-hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

.companions-panel__footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companions-panel__action {
  flex: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.companions-panel__action:hover {
  background: var(--color-bg-tertiary, #3a3a5a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* Companion List */
.companions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Companion Card */
.companion-card {
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.companion-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
}

.companion-card--updated {
  animation: companion-flash 0.5s ease;
}

@keyframes companion-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

.companion-card--dismissed {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Type-specific borders */
.companion-card--ally { border-left: 3px solid #10b981; }
.companion-card--hireling { border-left: 3px solid #f59e0b; }
.companion-card--animal { border-left: 3px solid #8b5cf6; }
.companion-card--summoned { border-left: 3px solid #ec4899; }
.companion-card--rescued { border-left: 3px solid #06b6d4; }

.companion-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
}

.companion-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.companion-card__type-icon {
  font-size: 1.2em;
}

.companion-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.companion-card__status {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.companion-card__status--active {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.companion-card__status--dismissed {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.companion-card__status--unconscious {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.companion-card__status--dead {
  background: rgba(55, 65, 81, 0.4);
  color: #6b7280;
}

/* Stats */
.companion-card__stats {
  margin-bottom: var(--space-2, 8px);
}

.companion-card__hp {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__stat-label {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 24px;
}

.companion-card__hp-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.companion-card__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease;
}

.companion-card__hp-fill--healthy { background: linear-gradient(90deg, #10b981, #34d399); }
.companion-card__hp-fill--bloodied { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.companion-card__hp-fill--critical { background: linear-gradient(90deg, #ef4444, #f87171); }

.companion-card__hp-text {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.companion-card__stat-row {
  display: flex;
  gap: var(--space-3, 12px);
}

.companion-card__stat {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary, #d1d5db);
}

.companion-card__stat-icon {
  font-size: 0.9em;
}

/* Loyalty */
.companion-card__loyalty {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__loyalty-label {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  width: 48px;
}

.companion-card__loyalty-bar {
  flex: 1;
  height: 4px;
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.companion-card__loyalty-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.companion-card__loyalty-fill--devoted { background: linear-gradient(90deg, #ec4899, #f472b6); }
.companion-card__loyalty-fill--friendly { background: linear-gradient(90deg, #10b981, #34d399); }
.companion-card__loyalty-fill--neutral { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.companion-card__loyalty-fill--wary { background: linear-gradient(90deg, #ef4444, #f87171); }

.companion-card__loyalty-level {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
}

/* Abilities */
.companion-card__abilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__ability {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.companion-card__ability--more {
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

/* Actions */
.companion-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companion-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.companion-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

.companion-card__action--secondary {
  background: transparent;
  color: var(--color-text-muted, #9ca3af);
}

.companion-card__action--secondary:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* Responsive */
@media (max-width: 640px) {
  .companion-card__stat-row {
    flex-wrap: wrap;
  }

  .companion-card__actions {
    flex-wrap: wrap;
  }

  .companion-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/**
 * Faction Reputation Panel (Task #329)
 * =====================================
 * Displays and tracks faction reputation levels.
 */

.faction-reputation-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel, #1a1a2e);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.faction-reputation-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-reputation-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-reputation-panel__icon {
  font-size: 1.2em;
}

.faction-reputation-panel__count {
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-muted, #9ca3af);
  font-size: var(--font-size-sm, 12px);
}

.faction-reputation-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.faction-reputation-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.faction-reputation-panel__empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.faction-reputation-panel__empty-text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.faction-reputation-panel__empty-hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

.faction-reputation-panel__footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-reputation-panel__action {
  flex: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.faction-reputation-panel__action:hover {
  background: var(--color-bg-tertiary, #3a3a5a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* Faction List */
.faction-reputation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Faction Card */
.faction-card {
  position: relative;
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faction-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
}

.faction-card--updated {
  animation: faction-flash 0.5s ease;
}

@keyframes faction-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

/* Level-specific border colors */
.faction-card--revered { border-left: 3px solid #f59e0b; }
.faction-card--honored { border-left: 3px solid #10b981; }
.faction-card--friendly { border-left: 3px solid #22c55e; }
.faction-card--neutral { border-left: 3px solid #6b7280; }
.faction-card--unfriendly { border-left: 3px solid #f97316; }
.faction-card--hostile { border-left: 3px solid #ef4444; }
.faction-card--hated { border-left: 3px solid #7f1d1d; }

.faction-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
}

.faction-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.faction-card__icon {
  font-size: 1.2em;
}

.faction-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-card__level {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faction-card__level--revered { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.faction-card__level--honored { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.faction-card__level--friendly { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.faction-card__level--neutral { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.faction-card__level--unfriendly { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.faction-card__level--hostile { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.faction-card__level--hated { background: rgba(127, 29, 29, 0.3); color: #fca5a5; }

/* Reputation Bar */
.faction-card__reputation {
  margin-bottom: var(--space-2, 8px);
}

.faction-card__reputation-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(90deg, #7f1d1d 0%, #374151 50%, #f59e0b 100%);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.faction-card__reputation-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: var(--radius-full, 9999px);
}

/* Semi-transparent overlay that shows progress */
.faction-card__reputation-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
}

.faction-card__reputation-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.faction-card__reputation-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-1, 4px);
}

.faction-card__reputation-min,
.faction-card__reputation-max {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #6b7280);
}

.faction-card__reputation-value {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #d1d5db);
  font-variant-numeric: tabular-nums;
}

.faction-card__reputation-value.positive {
  color: #10b981;
}

.faction-card__reputation-value.negative {
  color: #ef4444;
}

.faction-card__trend {
  font-size: var(--font-size-2xs, 10px);
  margin-left: var(--space-1, 4px);
}

.faction-card__trend--positive { color: #10b981; }
.faction-card__trend--negative { color: #ef4444; }

/* Description and Meta */
.faction-card__description {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

.faction-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.faction-card__modifier,
.faction-card__leader {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.faction-card__modifier-icon,
.faction-card__leader-icon {
  font-size: 0.9em;
}

.faction-card__reason {
  margin: 0 0 var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
}

/* Actions */
.faction-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.faction-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* History Overlay */
.faction-card__history {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 46, 0.95);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sticky);
}

.faction-card__history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-card__history-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9ca3af);
  font-size: 1.2em;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.faction-card__history-close:hover {
  color: var(--color-text-primary, #fff);
}

.faction-card__history-note {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
}

/* Level Change Notification */
.faction-card__level-change {
  position: absolute;
  top: var(--space-2, 8px);
  right: var(--space-2, 8px);
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  animation: level-change-fade 3s ease forwards;
  z-index: var(--z-float);
}

.faction-card__level-change--up {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.faction-card__level-change--down {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.faction-card__level-change-arrow {
  font-size: 1.1em;
}

@keyframes level-change-fade {
  0% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 640px) {
  .faction-card__actions {
    flex-wrap: wrap;
  }

  .faction-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/**
 * Treasury Item Cards (Task #354)
 * ================================
 * Styles for treasury item management cards.
 */

/* Item List Container */
.treasury-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Empty State */
.treasury-items-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.treasury-items-empty__icon {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.treasury-items-empty__text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.treasury-items-empty__hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

/* Treasury Item Card */
.treasury-item-card {
  position: relative;
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.treasury-item-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
  transform: translateY(-1px);
}

.treasury-item-card--updated {
  animation: treasury-item-flash 0.5s ease;
}

@keyframes treasury-item-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

.treasury-item-card--claimed {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Rarity-specific borders */
.treasury-item-card--common { border-left: 3px solid #9ca3af; }
.treasury-item-card--uncommon { border-left: 3px solid #22c55e; }
.treasury-item-card--rare { border-left: 3px solid #3b82f6; }
.treasury-item-card--very-rare,
.treasury-item-card--very_rare { border-left: 3px solid #8b5cf6; }
.treasury-item-card--legendary { border-left: 3px solid #f59e0b; }
.treasury-item-card--artifact { border-left: 3px solid #ef4444; }

/* Header */
.treasury-item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
}

.treasury-item-card__icon {
  font-size: 1.3em;
  flex-shrink: 0;
}

.treasury-item-card__name-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.treasury-item-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
  line-height: 1.2;
}

.treasury-item-card__type {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.treasury-item-card__badges {
  display: flex;
  gap: var(--space-1, 4px);
  align-items: center;
  flex-shrink: 0;
}

.treasury-item-card__quantity {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__rarity {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.treasury-item-card__rarity--common { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.treasury-item-card__rarity--uncommon { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.treasury-item-card__rarity--rare { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.treasury-item-card__rarity--very-rare,
.treasury-item-card__rarity--very_rare { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.treasury-item-card__rarity--legendary { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.treasury-item-card__rarity--artifact { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Description */
.treasury-item-card__description {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.4;
}

/* Meta Info */
.treasury-item-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__value,
.treasury-item-card__contributor,
.treasury-item-card__date {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__value-icon,
.treasury-item-card__contributor-icon {
  font-size: 0.9em;
}

.treasury-item-card__total-value {
  color: var(--color-text-muted, #9ca3af);
}

.treasury-item-card__date {
  color: var(--color-text-muted, #6b7280);
}

/* Properties */
.treasury-item-card__properties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__property {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__property--more {
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

/* Actions */
.treasury-item-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.treasury-item-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.treasury-item-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

.treasury-item-card__action--primary {
  background: var(--color-accent-primary, #61afef);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1a1a2e);
  font-weight: var(--font-weight-semibold, 600);
}

.treasury-item-card__action--primary:hover {
  background: var(--color-accent-secondary, #51a0df);
  border-color: var(--color-accent-secondary, #51a0df);
  color: var(--color-bg-primary, #1a1a2e);
}

/* Panel Update Animation */
.panel-party-treasury.treasury-updated {
  animation: treasury-panel-flash 0.5s ease;
}

@keyframes treasury-panel-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(97, 175, 239, 0.05); }
}

/* Responsive */
@media (max-width: 640px) {
  .treasury-item-card__header {
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .treasury-item-card__badges {
    align-self: flex-start;
  }

  .treasury-item-card__actions {
    flex-wrap: wrap;
  }

  .treasury-item-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/* Portrait Generator Component
 * Provides UI for AI-generated character portraits
 */

.portrait-generator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.portrait-generator__preview {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
}

.portrait-generator__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.portrait-generator__image--hidden {
  opacity: 0;
  position: absolute;
}

.portrait-generator__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color-subtle), var(--accent-color-subtle));
}

.portrait-generator__placeholder--hidden {
  display: none;
}

.portrait-generator__placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  opacity: 0.5;
}

.portrait-generator__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.portrait-generator__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  width: 100%;
  max-width: 200px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.portrait-generator__button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.portrait-generator__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.portrait-generator__button--loading {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.portrait-generator__button--loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-secondary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: portrait-spin 0.8s linear infinite;
}

@keyframes portrait-spin {
  to {
    transform: rotate(360deg);
  }
}

.portrait-generator__button-icon {
  width: 16px;
  height: 16px;
}

.portrait-generator__status {
  font-size: var(--font-size-xs);
  text-align: center;
  min-height: 1.2em;
  transition: opacity 0.2s ease;
}

.portrait-generator__status--loading {
  color: var(--text-secondary);
  animation: portrait-pulse 1.5s ease-in-out infinite;
}

@keyframes portrait-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.portrait-generator__status--success {
  color: var(--success-color);
}

.portrait-generator__status--error {
  color: var(--error-color);
}

/* Empty state when no character is selected */
.portrait-generator__empty-state {
  text-align: center;
  padding: var(--spacing-sm);
}

.portrait-generator__empty-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Compact variant for inline use */
.portrait-generator--compact {
  flex-direction: row;
  padding: var(--spacing-sm);
}

.portrait-generator--compact .portrait-generator__preview {
  width: 64px;
  height: 64px;
}

.portrait-generator--compact .portrait-generator__controls {
  flex: 1;
  align-items: flex-start;
}

.portrait-generator--compact .portrait-generator__button {
  max-width: none;
  width: auto;
}

/* Character sheet integration */
.character-sheet .portrait-generator {
  margin-bottom: var(--spacing-md);
}
/**
 * Narrative Bookmarks
 * ===================
 * Styles for bookmarking and highlighting narrative moments
 */

/* ============================================
   Bookmark Button (inline with narrative entries)
   ============================================ */

.narrative-bookmark__btn {
  --bookmark-color: var(--color-text-muted, #6b7280);
  --bookmark-active-color: var(--color-accent-gold, #d4a574);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--bookmark-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

.narrative-bookmark__btn:hover {
  opacity: 1;
  color: var(--bookmark-active-color);
  background: rgba(212, 165, 116, 0.1);
}

.narrative-bookmark__btn--active {
  opacity: 1;
  color: var(--bookmark-active-color);
}

.narrative-bookmark__btn--active:hover {
  color: var(--color-danger, #dc2626);
}

.narrative-bookmark__btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Type Selector Popup
   ============================================ */

.narrative-bookmark__type-selector {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 180px;
  padding: 8px 0;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__type-selector--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.narrative-bookmark__type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--color-text, #f9fafb);
  cursor: pointer;
  transition: background 0.15s ease;
}

.narrative-bookmark__type-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.narrative-bookmark__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.narrative-bookmark__type-icon--memorable { background: rgba(78, 205, 196, 0.2); color: #4ECDC4; }
.narrative-bookmark__type-icon--epic_moment { background: rgba(255, 215, 0, 0.2); color: #FFD700; }
.narrative-bookmark__type-icon--combat_victory { background: rgba(231, 76, 60, 0.2); color: #E74C3C; }
.narrative-bookmark__type-icon--funny { background: rgba(243, 156, 18, 0.2); color: #F39C12; }
.narrative-bookmark__type-icon--lore { background: rgba(155, 89, 182, 0.2); color: #9B59B6; }
.narrative-bookmark__type-icon--custom { background: rgba(149, 165, 166, 0.2); color: #95A5A6; }

/* ============================================
   Bookmarks Panel
   ============================================ */

.bookmarks-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface, #111827);
}

.bookmarks-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #374151);
}

.bookmarks-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.bookmarks-panel__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent-gold, #d4a574);
}

.bookmarks-panel__subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
}

/* Filters */
.bookmarks-panel__filters {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border, #374151);
  overflow-x: auto;
}

.bookmarks-panel__filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 16px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.bookmarks-panel__filter:hover {
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-text, #f9fafb);
}

.bookmarks-panel__filter--active {
  background: var(--color-accent-gold, #d4a574);
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-surface, #111827);
}

/* Content area */
.bookmarks-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Empty state */
.bookmarks-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.bookmarks-panel__empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212, 165, 116, 0.1);
  border-radius: 50%;
  color: var(--color-accent-gold, #d4a574);
  font-size: 2rem;
}

.bookmarks-panel__empty-icon svg {
  width: 32px;
  height: 32px;
}

.bookmarks-panel__empty-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.bookmarks-panel__empty-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.5;
}

.bookmarks-panel__icon-sample {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-accent-gold, #d4a574);
}

.bookmarks-panel__icon-sample svg {
  width: 14px;
  height: 14px;
}

/* Loading state */
.bookmarks-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-text-muted, #9ca3af);
}

.bookmarks-panel__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border, #374151);
  border-top-color: var(--color-accent-gold, #d4a574);
  border-radius: 50%;
  animation: bookmarks-spin 0.8s linear infinite;
}

@keyframes bookmarks-spin {
  to { transform: rotate(360deg); }
}

/* ============================================
   Bookmark Item
   ============================================ */

.narrative-bookmark__item {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-radius: 8px;
  transition: border-color 0.2s ease;
}

.narrative-bookmark__item:hover {
  border-color: var(--color-accent-gold, #d4a574);
}

.narrative-bookmark__item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.narrative-bookmark__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(var(--type-color-rgb, 78, 205, 196), 0.15);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--type-color, #4ECDC4);
}

.narrative-bookmark__character {
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
}

.narrative-bookmark__preview {
  margin: 0 0 10px;
  font-size: 0.875rem;
  color: var(--color-text, #f9fafb);
  line-height: 1.5;
}

.narrative-bookmark__note {
  margin: 0 0 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid var(--color-accent-gold, #d4a574);
  border-radius: 0 4px 4px 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-muted, #9ca3af);
}

.narrative-bookmark__item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.narrative-bookmark__item-footer time {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
}

.narrative-bookmark__share-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text, #f9fafb);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.narrative-bookmark__share-btn:hover {
  background: var(--color-accent-gold, #d4a574);
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-surface, #111827);
}

/* ============================================
   Image Section (action buttons & thumbnails)
   ============================================ */

.narrative-bookmark__image-section {
  margin-bottom: 10px;
}

.narrative-bookmark__action-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text, #f9fafb);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__action-btn:hover {
  background: var(--color-accent-gold, #d4a574);
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-surface, #111827);
}

.narrative-bookmark__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.narrative-bookmark__action-btn:disabled:hover {
  background: transparent;
  border-color: var(--color-border, #374151);
  color: var(--color-text, #f9fafb);
}

.narrative-bookmark__thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--color-border, #374151);
}

.narrative-bookmark__footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Error state */
.bookmarks-panel__error {
  padding: 12px 20px;
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger, #dc2626);
  font-size: 0.875rem;
}

/* ============================================
   Adventure Card (for sharing)
   ============================================ */

.adventure-card {
  --card-accent: var(--type-color, #4ECDC4);

  position: relative;
  width: 320px;
  padding: 24px;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  border: 2px solid var(--card-accent);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(var(--card-accent-rgb, 78, 205, 196), 0.2);
  overflow: hidden;
}

.adventure-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent);
}

.adventure-card__header {
  margin-bottom: 16px;
}

.adventure-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(var(--card-accent-rgb, 78, 205, 196), 0.15);
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-accent);
  margin-bottom: 8px;
}

.adventure-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text, #f9fafb);
  line-height: 1.3;
}

.adventure-card__content {
  margin-bottom: 16px;
  font-size: 0.9375rem;
  color: var(--color-text, #f9fafb);
  line-height: 1.6;
}

.adventure-card__character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border, #374151);
}

.adventure-card__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-accent);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-surface, #111827);
}

.adventure-card__character-info {
  flex: 1;
}

.adventure-card__character-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.adventure-card__character-class {
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
}

.adventure-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #374151);
}

.adventure-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
}

.adventure-card__branding {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #6b7280);
}
/**
 * Scene Snapshot
 * ==============
 * Styles for the inline scene snapshot button (camera icon) in narrative entries
 * and the snapshot preview modal that displays generated scene images.
 */

/* ============================================
   Snapshot Button (in narrative entry actions)
   ============================================ */

.narrative-entry__actions .narrative-snapshot__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.narrative-entry__actions .narrative-snapshot__btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--color-accent-purple, #8b5cf6);
  color: var(--color-accent-purple, #8b5cf6);
}

.narrative-entry__actions .narrative-snapshot__btn:focus-visible {
  outline: 2px solid var(--color-accent-purple, #8b5cf6);
  outline-offset: 2px;
}

/* Loading state — pulsing animation while image generates */
.narrative-entry__actions .narrative-snapshot__btn--loading {
  color: var(--color-accent-purple, #8b5cf6);
  cursor: wait;
  pointer-events: none;
}

.narrative-entry__actions .narrative-snapshot__btn--loading svg {
  animation: snapshot-pulse 1.2s ease-in-out infinite;
}

@keyframes snapshot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Success state — has a generated image */
.narrative-entry__actions .narrative-snapshot__btn--has-image {
  color: var(--color-accent-purple, #8b5cf6);
}

.narrative-entry__actions .narrative-snapshot__btn--has-image:hover {
  background: rgba(139, 92, 246, 0.3);
}

/* Error state — brief flash on failure */
.narrative-entry__actions .narrative-snapshot__btn--error {
  color: var(--color-danger, #dc2626);
  border-color: var(--color-danger, #dc2626);
  animation: snapshot-shake 0.4s ease;
}

@keyframes snapshot-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ============================================
   Scene Snapshot Preview (modal content)
   ============================================ */

.scene-snapshot-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-snapshot-preview__image {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #374151);
  background: var(--color-surface, #111827);
}

.scene-snapshot-preview__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
}

.scene-snapshot-preview__prompt-details {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
}

.scene-snapshot-preview__prompt-details summary {
  cursor: pointer;
  color: var(--color-text, #f9fafb);
  font-weight: 500;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.scene-snapshot-preview__prompt-details summary:hover {
  color: var(--color-accent-purple, #8b5cf6);
}

.scene-snapshot-preview__prompt {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.3));
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted, #9ca3af);
  white-space: pre-wrap;
  word-break: break-word;
}

.scene-snapshot-preview__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scene-snapshot-preview__regenerate {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text, #f9fafb);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.scene-snapshot-preview__regenerate:hover {
  background: var(--color-accent-purple, #8b5cf6);
  border-color: var(--color-accent-purple, #8b5cf6);
  color: white;
}

.scene-snapshot-preview__regenerate:disabled {
  opacity: 0.5;
  cursor: wait;
}

.scene-snapshot-preview__regenerate:disabled:hover {
  background: transparent;
  border-color: var(--color-border, #374151);
  color: var(--color-text, #f9fafb);
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .narrative-entry__actions .narrative-snapshot__btn,
  .narrative-entry__actions .narrative-snapshot__btn--loading svg,
  .narrative-entry__actions .narrative-snapshot__btn--error {
    transition: none;
    animation: none;
  }
}
/*
 * Loot Split Modal - Party Treasury Distribution
 * ==============================================
 * Dialog for distributing party loot among members.
 * Uses native <dialog> with terminal theme.
 */

/* ========================================
 * DIALOG BASE
 * ======================================== */

.loot-split-modal {
  border: 1px solid var(--color-accent-gold, #d4a574);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 540px;
  width: calc(100% - var(--space-8, 2rem));
  max-height: 85vh;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(212, 165, 116, 0.2);
  animation: loot-split-enter 0.2s ease-out;
  overflow: hidden;
}

.loot-split-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  animation: loot-split-backdrop 0.2s ease-out;
}

.loot-split-modal[open] {
  display: flex;
}

/* ========================================
 * CONTENT WRAPPER
 * ======================================== */

.loot-split-modal__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.loot-split-modal__close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.loot-split-modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__close svg {
  width: 16px;
  height: 16px;
}

/* ========================================
 * HEADER
 * ======================================== */

.loot-split-modal__header {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--border-secondary, #333);
  text-align: center;
}

.loot-split-modal__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-gold, #d4a574);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__title svg {
  width: 24px;
  height: 24px;
}

.loot-split-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * BODY
 * ======================================== */

.loot-split-modal__body {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  overflow-y: auto;
  flex: 1;
}

.loot-split-modal__section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.loot-split-modal__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 0.75rem);
}

.loot-split-modal__section-header .loot-split-modal__section-title {
  margin-bottom: 0;
}

.loot-split-modal__action-btn {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.loot-split-modal__action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.loot-split-modal__item-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

/* ========================================
 * METHOD SELECTION
 * ======================================== */

.loot-split-modal__method-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__method-options {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.loot-split-modal__method-option {
  flex: 1;
  cursor: pointer;
}

.loot-split-modal__method-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.loot-split-modal__method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.loot-split-modal__method-option:hover .loot-split-modal__method-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted, #888);
}

.loot-split-modal__method-option input:checked + .loot-split-modal__method-card {
  background: rgba(212, 165, 116, 0.15);
  border-color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__method-icon {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
}

.loot-split-modal__method-option input:checked + .loot-split-modal__method-card .loot-split-modal__method-icon {
  color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__method-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__method-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

/* ========================================
 * CURRENCY SECTION
 * ======================================== */

.loot-split-modal__currency-section {
  margin-bottom: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  background: rgba(212, 165, 116, 0.08);
  border-radius: var(--radius-md, 6px);
  border: 1px solid rgba(212, 165, 116, 0.2);
}

.loot-split-modal__currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.loot-split-modal__currency-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.loot-split-modal__currency-input .currency-label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
}

.loot-split-modal__currency-input .currency-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full, 50%);
  font-size: 0.625rem;
  font-weight: 700;
}

.loot-split-modal__currency-input .currency-icon.pp {
  background: linear-gradient(135deg, #e0e0e0, #a0a0a0);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.gp {
  background: linear-gradient(135deg, #ffd700, #daa520);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.ep {
  background: linear-gradient(135deg, #c0c0c0, #808080);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.sp {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.cp {
  background: linear-gradient(135deg, #cd7f32, #8b4513);
  color: #fff;
}

.loot-split-modal__currency-input .currency-available {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.loot-split-modal__currency-input input {
  padding: var(--space-2, 0.5rem);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #e0e0e0);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.875rem;
  text-align: center;
}

.loot-split-modal__currency-input input:focus {
  outline: none;
  border-color: var(--color-accent-gold, #d4a574);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
}

/* ========================================
 * ITEMS SECTION
 * ======================================== */

.loot-split-modal__items-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 150px;
  overflow-y: auto;
  padding: var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background 0.15s ease;
}

.loot-split-modal__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.loot-split-modal__item input[type="checkbox"] {
  accent-color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__item-info {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex: 1;
}

.loot-split-modal__item-name {
  font-size: 0.875rem;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__item-quantity {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm, 4px);
}

/* ========================================
 * MEMBERS SECTION
 * ======================================== */

.loot-split-modal__members-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__members-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__member-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-full, 50%);
  color: var(--color-accent-primary, #61afef);
  font-weight: 700;
  font-size: 0.75rem;
}

.loot-split-modal__member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loot-split-modal__member-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__member-class {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

/* ========================================
 * PREVIEW
 * ======================================== */

.loot-split-modal__preview {
  padding: var(--space-3, 0.75rem);
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid rgba(152, 195, 121, 0.3);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__preview-content {
  font-size: 0.875rem;
  line-height: 1.5;
}

.loot-split-modal__preview-section {
  margin-bottom: var(--space-2, 0.5rem);
}

.loot-split-modal__preview-section:last-child {
  margin-bottom: 0;
}

.loot-split-modal__preview-split {
  color: var(--color-success, #98c379);
  font-style: italic;
}

.loot-split-modal__preview-items {
  margin: var(--space-1, 0.25rem) 0 0 var(--space-4, 1rem);
  padding: 0;
  list-style: disc;
  color: var(--text-secondary, #aaa);
  font-size: 0.8125rem;
}

.loot-split-modal__preview-empty {
  color: var(--text-muted, #888);
  font-style: italic;
  text-align: center;
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.loot-split-modal__empty {
  padding: var(--space-4, 1rem);
  text-align: center;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* ========================================
 * ERROR STATE
 * ======================================== */

.loot-split-modal__error {
  padding: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid var(--color-danger, #e06c75);
  border-radius: var(--radius-md, 6px);
  color: var(--color-danger, #e06c75);
  font-size: 0.875rem;
}

/* ========================================
 * ACTIONS
 * ======================================== */

.loot-split-modal__actions {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--border-secondary, #333);
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
}

.loot-split-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__btn svg {
  width: 16px;
  height: 16px;
}

.loot-split-modal__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.loot-split-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
}

.loot-split-modal__btn--primary {
  background: var(--color-accent-gold, #d4a574);
  color: var(--color-bg-primary, #1e1e2e);
}

.loot-split-modal__btn--primary:hover {
  filter: brightness(1.1);
}

.loot-split-modal__btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.loot-split-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  background: var(--color-bg-primary, #1e1e2e);
  z-index: var(--z-docked);
}

.loot-split-modal__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary, #444);
  border-top-color: var(--color-accent-gold, #d4a574);
  border-radius: 50%;
  animation: loot-split-spin 0.8s linear infinite;
}

.loot-split-modal__loading-text {
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  margin: 0;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes loot-split-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes loot-split-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loot-split-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loot-split-modal,
  .loot-split-modal::backdrop,
  .loot-split-modal__spinner {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .loot-split-modal {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .loot-split-modal__currency-grid {
    grid-template-columns: 1fr 1fr;
  }

  .loot-split-modal__actions {
    flex-direction: column-reverse;
  }

  .loot-split-modal__btn {
    width: 100%;
    justify-content: center;
  }
}
/**
 * Quality Rating (Thumbs Up/Down)
 * ================================
 * Styles for AI response quality rating buttons
 *
 * UX Standards Applied:
 * - Touch targets: 44x44px minimum (WCAG 2.5.5)
 * - Focus states: Visible focus indicators
 * - Contrast: Sufficient disabled state contrast
 */

.quality-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
  /* Prevent hover glitch: don't capture pointer events when invisible */
  pointer-events: none;
}

.narrative-entry:hover .quality-rating,
.quality-rating:focus-within,
.quality-rating--visible {
  opacity: 1;
  pointer-events: auto;
}

.quality-rating__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Touch target: 44x44px minimum per WCAG 2.5.5 */
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.quality-rating__btn:hover {
  color: var(--color-text, #f9fafb);
  background: rgba(255, 255, 255, 0.1);
}

/* Focus states - visible outline for keyboard navigation */
.quality-rating__btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  color: var(--color-text, #f9fafb);
}

.quality-rating__btn--up:hover,
.quality-rating__btn--up:focus-visible,
.quality-rating__btn--up.quality-rating__btn--active {
  color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
}

.quality-rating__btn--up:focus-visible {
  outline-color: var(--color-success, #22c55e);
}

.quality-rating__btn--down:hover,
.quality-rating__btn--down:focus-visible,
.quality-rating__btn--down.quality-rating__btn--active {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.15);
}

.quality-rating__btn--down:focus-visible {
  outline-color: var(--color-danger, #ef4444);
}

.quality-rating__btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Feedback panel */
.quality-rating__feedback {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  width: 280px;
  padding: 12px;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-rating__feedback--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(4px);
}

.quality-rating__feedback-title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.quality-rating__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.quality-rating__category {
  /* Increased padding for better touch targets */
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 12px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__category:hover {
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category--selected {
  background: var(--color-accent, #4ECDC4);
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-surface, #111827);
}

.quality-rating__textarea {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  padding: 8px;
  background: var(--color-surface, #111827);
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text, #f9fafb);
  font-size: 0.8125rem;
  resize: vertical;
}

.quality-rating__textarea:focus {
  outline: none;
  border-color: var(--color-accent, #4ECDC4);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.quality-rating__textarea::placeholder {
  color: var(--color-text-muted, #6b7280);
}

.quality-rating__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.quality-rating__submit {
  padding: 8px 16px;
  min-height: 36px;
  background: var(--color-accent, #4ECDC4);
  border: none;
  border-radius: 4px;
  color: var(--color-surface, #111827);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.quality-rating__submit:hover:not(:disabled) {
  opacity: 0.9;
}

.quality-rating__submit:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
}

.quality-rating__submit:disabled {
  opacity: 0.4;
  background: var(--color-text-muted, #6b7280);
  cursor: not-allowed;
}

.quality-rating__cancel {
  padding: 8px 16px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__cancel:hover {
  color: var(--color-text, #f9fafb);
  border-color: var(--color-text-muted, #9ca3af);
}

.quality-rating__cancel:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}
/**
 * TTS Audio Player
 * ================
 * Inline audio player bar shown above input area when TTS audio is available.
 */

.tts-audio-player {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-surface-elevated, #1f2937);
  border-top: 1px solid var(--color-border, #374151);
  gap: 8px;
}

.tts-audio-player[hidden] {
  display: none;
}

.tts-audio-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tts-audio-player__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-accent, #4ECDC4);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tts-audio-player__play-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tts-audio-player__play-btn.playing {
  color: var(--color-warning, #f59e0b);
}

.tts-audio-player__play-btn svg {
  width: 20px;
  height: 20px;
}

.tts-audio-player__progress {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
}

.tts-audio-player__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--color-accent, #4ECDC4);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__volume {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
  flex-shrink: 0;
}

.tts-audio-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--color-text-muted, #9ca3af);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #4b5563);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.tts-audio-player__status.audio-available {
  background: var(--color-success, #22c55e);
  animation: tts-pulse 2s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/**
 * OOC Sidebar Modals
 * ==================
 * Styles for session notes and schedule modals in the OOC sidebar.
 * Uses native <dialog> element for proper modal behavior.
 */

/* ========================================
 * SHARED MODAL STYLES
 * ======================================== */

.session-notes-dialog,
.session-schedule-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 480px;
  width: 90vw;
  max-height: 80vh;
  overflow: visible;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
}

.session-notes-dialog::backdrop,
.session-schedule-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.session-notes-dialog__content,
.session-schedule-dialog__content {
  background: #1a1a2e;
  border: 2px solid #4a4a6e;
  border-radius: 12px;
  min-height: 300px;
  max-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Headers */
.session-notes-dialog__header,
.session-schedule-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #3a3a5e;
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-notes-dialog__title,
.session-schedule-dialog__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #00d4ff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.session-notes-dialog__icon,
.session-schedule-dialog__icon {
  font-size: 1.25rem;
}

.session-notes-dialog__close,
.session-schedule-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  font-size: 1.25rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-notes-dialog__close:hover,
.session-schedule-dialog__close:hover {
  color: #00d4ff;
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

/* Footers */
.session-notes-dialog__footer,
.session-schedule-dialog__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid #3a3a5e;
  background: #151525;
}

/* ========================================
 * SESSION NOTES MODAL
 * ======================================== */

/* AI Recap Section */
.session-notes__recap-section {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg,
    rgba(138, 43, 226, 0.08) 0%,
    rgba(138, 43, 226, 0.02) 100%);
  border-bottom: 1px solid #3a3a5e;
}

.session-notes__recap-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.session-notes__recap-icon {
  font-size: 1.25rem;
}

.session-notes__recap-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #b388ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-notes__recap-description {
  font-size: 0.8125rem;
  color: #888;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.session-notes__recap-actions {
  display: flex;
  gap: 0.5rem;
}

.session-notes__btn--recap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8a2be2 0%, #6b1fa8 100%);
  border-color: #8a2be2;
  color: #fff;
  font-weight: 600;
}

.session-notes__btn--recap:hover {
  background: linear-gradient(135deg, #9b4dca 0%, #7c25c4 100%);
  border-color: #9b4dca;
}

.session-notes__btn--recap:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.session-notes__btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

.session-notes__btn-icon {
  font-size: 1rem;
}

/* Loading state */
.session-notes__recap-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-top: 0.75rem;
  background: rgba(138, 43, 226, 0.1);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 6px;
  color: #b388ff;
  font-size: 0.8125rem;
}

.session-notes__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(179, 136, 255, 0.3);
  border-top-color: #b388ff;
  border-radius: 50%;
  animation: session-notes-spin 0.8s linear infinite;
}

@keyframes session-notes-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.session-notes__recap-error {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.8125rem;
}

/* Recap note item styling */
.session-notes__item--recap {
  border-color: rgba(138, 43, 226, 0.4);
  background: linear-gradient(180deg,
    rgba(138, 43, 226, 0.1) 0%,
    rgba(138, 43, 226, 0.03) 100%);
}

.session-notes__item--recap .session-notes__item-title {
  color: #b388ff;
}

.session-notes__item--recap::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  background: var(--icon-sparkles) no-repeat center / contain;
}

/* Notes List */
.session-notes__list {
  flex: 1;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.75rem;
}

.session-notes__loading,
.session-notes__error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #888;
  font-size: 0.875rem;
}

.session-notes__error {
  color: #ff6b6b;
}

.session-notes__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #888;
  text-align: center;
}

.session-notes__empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.session-notes__empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Note Items */
.session-notes__item {
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s ease;
}

.session-notes__item:last-child {
  margin-bottom: 0;
}

.session-notes__item:hover {
  border-color: #3a3a5e;
}

.session-notes__item--pinned {
  border-color: #00d4ff;
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-notes__item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.375rem;
}

.session-notes__item-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-notes__item-time {
  font-size: 0.6875rem;
  color: #666;
}

.session-notes__item-content {
  font-size: 0.8125rem;
  color: #b0b0b0;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.session-notes__item-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

.session-notes__item-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

.session-notes__item-btn:hover {
  color: #00d4ff;
}

.session-notes__item-btn--delete:hover {
  color: #ff6b6b;
}

/* Separator */
.session-notes__separator {
  height: 1px;
  background: #3a3a5e;
  margin: 0;
}

/* Add Form */
.session-notes__add-form {
  padding: 1rem 1.25rem;
  background: #151525;
}

.session-notes__label {
  display: block;
  font-size: 0.75rem;
  color: #00d4ff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-notes__input-row {
  margin-bottom: 0.5rem;
}

.session-notes__title-input,
.session-notes__content-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 6px;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.8125rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.session-notes__title-input:focus,
.session-notes__content-input:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.session-notes__title-input::placeholder,
.session-notes__content-input::placeholder {
  color: #555;
}

.session-notes__content-input {
  resize: vertical;
  min-height: 60px;
}

.session-notes__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-notes__pin-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #888;
  cursor: pointer;
}

.session-notes__pin-label input {
  accent-color: #00d4ff;
}

.session-notes__pin-icon {
  font-size: 0.875rem;
}

/* Buttons */
.session-notes__btn {
  padding: 0.5rem 1rem;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  background: #2a2a4e;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-notes__btn:hover {
  background: #3a3a5e;
  border-color: #00d4ff;
}

.session-notes__btn--primary {
  background: #00d4ff;
  border-color: #00d4ff;
  color: #000;
  font-weight: 600;
}

.session-notes__btn--primary:hover {
  background: #00b8e6;
  border-color: #00b8e6;
}

.session-notes__link {
  font-size: 0.75rem;
  color: #888;
  text-decoration: none;
  transition: color 0.15s ease;
}

.session-notes__link:hover {
  color: #00d4ff;
  text-decoration: underline;
}

/* ========================================
 * SESSION SCHEDULE MODAL
 * ======================================== */

/* Campaign Info */
.session-schedule__campaign {
  padding: 0.75rem 1.25rem;
  background: #151525;
  border-bottom: 1px solid #3a3a5e;
}

.session-schedule__campaign-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__no-campaign {
  font-size: 0.875rem;
  color: #888;
  font-style: italic;
}

/* Next Session */
.session-schedule__next {
  padding: 1rem 1.25rem;
}

.session-schedule__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: #888;
  font-size: 0.875rem;
}

.session-schedule__error {
  text-align: center;
  padding: 1rem;
  color: #ff6b6b;
  font-size: 0.875rem;
}

.session-schedule__next-session {
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.12) 0%,
    rgba(0, 212, 255, 0.04) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.session-schedule__next-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-schedule__next-icon {
  font-size: 1.5rem;
}

.session-schedule__next-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__next-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 0.75rem;
}

.session-schedule__next-datetime {
  margin-bottom: 0.375rem;
}

.session-schedule__next-date {
  font-size: 0.9375rem;
  color: #e0e0e0;
}

.session-schedule__next-time {
  font-size: 0.875rem;
  color: #888;
}

.session-schedule__next-relative {
  font-size: 0.75rem;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__no-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #888;
}

.session-schedule__no-next-icon {
  font-size: 1.25rem;
  opacity: 0.5;
}

.session-schedule__no-next-text {
  font-size: 0.875rem;
}

/* Proposals */
.session-schedule__proposals {
  padding: 0 1.25rem 1rem;
  max-height: 250px;
  overflow-y: auto;
}

.session-schedule__proposals-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-schedule__proposals-icon {
  font-size: 1rem;
}

.session-schedule__proposals-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__proposals-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Proposal Card */
.session-schedule__proposal {
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 8px;
  padding: 0.875rem;
  transition: border-color 0.15s ease;
}

.session-schedule__proposal:hover {
  border-color: #3a3a5e;
}

.session-schedule__proposal--voted {
  border-color: rgba(0, 212, 255, 0.3);
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.05) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-schedule__proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.session-schedule__proposal-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__proposal-status {
  font-size: 0.6875rem;
  color: #888;
}

.session-schedule__proposal-desc {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.session-schedule__proposal-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.session-schedule__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #1a1a2e;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-schedule__slot:hover:not(:disabled) {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

.session-schedule__slot--voted {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.15);
  cursor: default;
}

.session-schedule__slot-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__slot-time {
  font-size: 0.6875rem;
  color: #888;
}

.session-schedule__slot-check {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.session-schedule__proposal-voted-msg {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: #00d4ff;
  text-align: center;
}

/* Empty State */
.session-schedule__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}

.session-schedule__empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.session-schedule__empty-text {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: #e0e0e0;
}

.session-schedule__empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: #888;
  font-style: italic;
}

/* Footer */
.session-schedule__btn {
  padding: 0.5rem 1rem;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  background: #2a2a4e;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-schedule__btn:hover {
  background: #3a3a5e;
  border-color: #00d4ff;
}

.session-schedule__link {
  font-size: 0.75rem;
  color: #888;
  text-decoration: none;
  transition: color 0.15s ease;
}

.session-schedule__link:hover {
  color: #00d4ff;
  text-decoration: underline;
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 500px) {
  .session-notes-dialog,
  .session-schedule-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    margin: 0;
    margin-top: auto;
  }

  .session-notes-dialog__content,
  .session-schedule-dialog__content {
    border-radius: 12px 12px 0 0;
    max-height: 90vh;
  }

  .session-notes__list {
    max-height: 200px;
  }

  .session-schedule__proposals {
    max-height: 180px;
  }
}
/* ========================================
 * SCRIPT ROOM - Full-page Screenplay View
 * ========================================
 * A dedicated room rendering the game as a screenplay document.
 * Dark background, centered white page, interactive margins.
 */

/* ----------------------------------------
 * Room Container: Dark background
 * ---------------------------------------- */
.script-room {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--script-bg);
  overflow: hidden;
}

/* ----------------------------------------
 * Script Room Header: Minimal, top-right
 * ---------------------------------------- */
.script-room__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  flex-shrink: 0;
  z-index: var(--z-sticky);
}

.script-room__header-label {
  font-family: var(--screenplay-font);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.script-room__exit-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--screenplay-font);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__exit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ----------------------------------------
 * Script Room Body: Scrollable content area
 * ---------------------------------------- */
.script-room__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ----------------------------------------
 * Script Page: White page container
 * ---------------------------------------- */
.script-room__page-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-8) var(--space-4);
  display: flex;
  justify-content: center;
}

.script-room__page {
  width: var(--script-page-width);
  max-width: 100%;
  min-height: 100%;
  background: var(--script-page-bg);
  box-shadow: var(--script-page-shadow);
  padding: 1in 1.25in;
  font-family: var(--screenplay-font);
  font-size: 12pt;
  line-height: 1.5;
  color: var(--screenplay-text);
  position: relative;
}

/* ----------------------------------------
 * Screenplay Elements (reuse from narrative_panel.css)
 * ---------------------------------------- */

/* Scene Headings / Sluglines */
.script-room__scene-heading {
  text-transform: uppercase;
  font-weight: bold;
  margin: 24pt 0 12pt 0;
  padding: 0;
  color: var(--screenplay-text);
  letter-spacing: normal;
}

.script-room__scene-heading:first-child {
  margin-top: 0;
}

/* Action Lines (DM narration) */
.script-room__action {
  margin: 12pt 0;
  color: var(--screenplay-text);
}

/* Character Name (centered in screenplay format) */
.script-room__character-name {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  margin: 12pt 0 0 0;
  padding-left: 2.5in;
  color: var(--screenplay-action);
  letter-spacing: 0.05em;
}

/* Player character name distinguished */
.script-room__character-name--player {
  color: var(--screenplay-player);
}

/* Parenthetical */
.script-room__parenthetical {
  display: block;
  font-style: italic;
  font-size: 0.9em;
  color: var(--screenplay-muted);
  padding-left: 2in;
  margin: 0 0 2pt 0;
}

.script-room__parenthetical::before {
  content: '(';
}

.script-room__parenthetical::after {
  content: ')';
}

/* Dialogue */
.script-room__dialogue {
  margin: 0 0 12pt 0;
  padding-left: 1.5in;
  max-width: 4in;
  color: var(--screenplay-text);
}

.script-room__dialogue--player {
  color: var(--screenplay-player);
}

/* System Messages / Stage Directions */
.script-room__stage-direction {
  font-style: italic;
  color: var(--screenplay-muted);
  margin: 12pt 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--screenplay-muted);
}

/* Transitions */
.script-room__transition {
  text-align: right;
  text-transform: uppercase;
  font-weight: bold;
  margin: 24pt 0;
}

/* Roll Results */
.script-room__roll-result {
  color: var(--screenplay-muted);
  font-size: 10pt;
  font-style: italic;
  margin: 4pt 0 12pt 1.5in;
}

/* Quick Actions (subtle inline choices) */
.script-room__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 12pt 0;
  padding-left: 1.5in;
}

.script-room__quick-action {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  color: var(--screenplay-player);
  font-family: var(--screenplay-font);
  font-size: 10pt;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__quick-action:hover {
  background: rgba(0, 68, 136, 0.08);
  border-color: var(--screenplay-player);
}

/* ----------------------------------------
 * Cursor Input: Inline with document
 * ---------------------------------------- */
.script-room__cursor-input {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: 12pt;
  padding-left: 1.5in;
  max-width: 4in;
  min-height: 1.5em;
}

.script-room__cursor-prompt {
  color: var(--screenplay-player);
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}

.script-room__cursor-field {
  flex: 1;
  min-height: 1.5em;
  outline: none;
  font-family: var(--screenplay-font);
  font-size: 12pt;
  line-height: 1.5;
  color: var(--screenplay-player);
  caret-color: var(--screenplay-player);
  border: none;
  background: transparent;
  padding: 0;
  word-wrap: break-word;
}

.script-room__cursor-field:empty::before {
  content: attr(data-placeholder);
  color: var(--screenplay-muted);
  pointer-events: none;
}

/* Blinking cursor animation */
.script-room__cursor-field:focus {
  outline: none;
}

/* ----------------------------------------
 * Margin Area: Interactive sidebar
 * ---------------------------------------- */
.script-room__margin {
  width: var(--script-margin-width);
  flex-shrink: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.script-room__margin-title {
  font-family: var(--screenplay-font);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Margin Notes */
.script-room__margin-note {
  background: var(--script-margin-note-bg);
  border: 1px solid var(--script-margin-note-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--screenplay-font);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.script-room__margin-note-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.script-room__margin-note--npc {
  border-left: 2px solid var(--color-entity-npc);
}

.script-room__margin-note--location {
  border-left: 2px solid var(--color-entity-location);
}

.script-room__margin-note--lore {
  border-left: 2px solid var(--color-entity-lore);
}

.script-room__margin-note--comment {
  border-left: 2px solid var(--color-accent-warning);
}

/* ----------------------------------------
 * Highlight Popover (for text selection)
 * ---------------------------------------- */
.script-room__highlight-popover {
  position: absolute;
  display: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  gap: var(--space-1);
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.script-room__highlight-popover.visible {
  display: flex;
}

.script-room__highlight-btn {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.script-room__highlight-btn:hover {
  background: var(--color-bg-hover);
}

/* ----------------------------------------
 * Dice Roll Modal Overlay
 * ---------------------------------------- */
.script-room__dice-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.script-room__dice-modal.visible {
  display: flex;
}

.script-room__dice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.script-room__dice-card {
  position: relative;
  background: var(--script-page-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elevation-modal);
  font-family: var(--screenplay-font);
  color: var(--screenplay-text);
  text-align: center;
  min-width: 280px;
  max-width: 400px;
}

.script-room__dice-title {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: var(--space-2);
}

.script-room__dice-description {
  font-size: 11pt;
  color: var(--screenplay-muted);
  margin-bottom: var(--space-6);
}

.script-room__dice-result {
  font-size: 36pt;
  font-weight: bold;
  margin: var(--space-4) 0;
  color: var(--screenplay-text);
}

.script-room__dice-result--success {
  color: #2d8a2d;
}

.script-room__dice-result--failure {
  color: #c0392b;
}

.script-room__dice-roll-btn {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  background: var(--screenplay-player);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--screenplay-font);
  font-size: 12pt;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.script-room__dice-roll-btn:hover {
  opacity: 0.85;
}

.script-room__dice-dismiss-btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: 1px solid var(--screenplay-muted);
  border-radius: var(--radius-sm);
  font-family: var(--screenplay-font);
  font-size: 10pt;
  color: var(--screenplay-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__dice-dismiss-btn:hover {
  border-color: var(--screenplay-text);
  color: var(--screenplay-text);
}

/* ----------------------------------------
 * Responsive: Collapse margin on small screens
 * ---------------------------------------- */
@media (max-width: 1200px) {
  .script-room__margin {
    display: none;
  }

  .script-room__page {
    padding: 0.5in 0.75in;
  }
}

@media (max-width: 768px) {
  .script-room__page {
    padding: var(--space-4) var(--space-6);
    font-size: 11pt;
  }

  .script-room__character-name {
    padding-left: 1.5in;
  }

  .script-room__parenthetical {
    padding-left: 1.2in;
  }

  .script-room__dialogue,
  .script-room__cursor-input {
    padding-left: 1in;
    max-width: none;
  }
}

/* ----------------------------------------
 * Scrollbar Styling (dark theme for page wrapper)
 * ---------------------------------------- */
.script-room__page-wrapper::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.script-room__page-wrapper::-webkit-scrollbar-track {
  background: var(--script-bg);
}

.script-room__page-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--scrollbar-thumb-radius);
}

.script-room__page-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Margin scrollbar */
.script-room__margin::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
}

.script-room__margin::-webkit-scrollbar-track {
  background: transparent;
}

.script-room__margin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--scrollbar-thumb-radius);
}
/**
 * Billing Page Styles
 * ===================
 * Subscription and billing management page with
 * plan cards, usage meters, and action buttons.
 */

/* ==========================================
   CSS Custom Properties (Billing-specific)
   ========================================== */

.billing-page {
  /* Base page styles */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;

  /* Billing-specific custom properties */
  --billing-card-radius: 12px;
  --billing-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --billing-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
  --billing-transition: 0.2s ease;
  --billing-spacing-xs: 4px;
  --billing-spacing-sm: 8px;
  --billing-spacing-md: 16px;
  --billing-spacing-lg: 24px;
  --billing-spacing-xl: 32px;
}

/* ==========================================
   Base Layout
   ========================================== */

.billing-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.billing-header {
  text-align: center;
  margin-bottom: var(--billing-spacing-lg);
}

.billing-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.billing-title::before {
  content: '> ';
  color: var(--color-text-muted);
}

.billing-subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ==========================================
   Flash Messages
   ========================================== */

.billing-page .flash-messages {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-page .flash {
  padding: var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  font-size: 0.875rem;
  margin-bottom: var(--billing-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--billing-spacing-sm);
}

.billing-page .flash.alert {
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.billing-page .flash.notice {
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

/* ==========================================
   Billing Notice (System Messages)
   ========================================== */

.billing-notice {
  padding: var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  margin-bottom: var(--billing-spacing-lg);
}

.billing-notice--warning {
  background: rgba(229, 192, 123, 0.1);
  border: 1px solid var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.billing-notice strong {
  display: block;
  margin-bottom: var(--billing-spacing-sm);
}

.billing-notice p {
  margin: 0;
  font-size: 0.875rem;
}

/* ==========================================
   Billing Cards
   ========================================== */

.billing-card {
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: var(--billing-card-radius);
  margin-bottom: var(--billing-spacing-lg);
  box-shadow: var(--billing-card-shadow);
  overflow: hidden;
}

.billing-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--billing-spacing-md) var(--billing-spacing-lg);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
}

.billing-card__header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.billing-card__body {
  padding: var(--billing-spacing-lg);
}

/* ==========================================
   Tier Badges
   ========================================== */

.billing-tier {
  display: inline-block;
  padding: var(--billing-spacing-xs) var(--billing-spacing-md);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.billing-tier--free {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-secondary);
}

.billing-tier--pro {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
}

.billing-tier--dm {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-tertiary);
  border: 1px solid var(--color-accent-tertiary);
}

/* ==========================================
   Plan Details
   ========================================== */

.billing-plan-details {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-plan-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.billing-plan-price .price-amount {
  color: var(--color-accent-primary);
}

.billing-plan-price .price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.billing-status {
  display: inline-block;
  padding: var(--billing-spacing-sm) var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  font-size: 0.875rem;
  margin-top: var(--billing-spacing-sm);
}

.billing-status--canceled {
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.billing-status--past_due {
  background: rgba(229, 192, 123, 0.1);
  border: 1px solid var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.billing-status--trialing {
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* ==========================================
   Usage Summary
   ========================================== */

.billing-usage {
  margin-bottom: var(--billing-spacing-lg);
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-usage h3 {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--billing-spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--billing-spacing-md);
}

.usage-item {
  background: var(--color-bg-primary);
  padding: var(--billing-spacing-md);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
}

.usage-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--billing-spacing-xs);
}

.usage-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.usage-bar {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.usage-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
  border-radius: 3px;
  transition: width var(--billing-transition);
}

/* ==========================================
   Billing Actions
   ========================================== */

.billing-actions {
  display: flex;
  gap: var(--billing-spacing-md);
  flex-wrap: wrap;
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-actions .btn {
  padding: var(--billing-spacing-sm) var(--billing-spacing-lg);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.billing-actions .btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.billing-actions .btn--primary:hover {
  background: var(--color-accent-primary-hover, var(--color-accent-primary));
  filter: brightness(1.1);
}

.billing-actions .btn--secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

.billing-actions .btn--secondary:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.billing-actions .btn--danger {
  background: transparent;
  color: var(--color-accent-error);
  border: 1px solid var(--color-accent-error);
}

.billing-actions .btn--danger:hover {
  background: rgba(224, 108, 117, 0.1);
}

/* ==========================================
   Invoice Preview
   ========================================== */

.billing-invoice {
  margin-top: var(--billing-spacing-lg);
  padding: var(--billing-spacing-md);
  background: var(--color-bg-primary);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
}

.billing-invoice h4 {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--billing-spacing-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.billing-invoice p {
  margin: 0;
  color: var(--color-text-primary);
}

/* ==========================================
   Available Plans Grid
   ========================================== */

.billing-plans {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-plans h2 {
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-lg);
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--billing-spacing-lg);
}

/* ==========================================
   Plan Cards
   ========================================== */

.plan-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--billing-card-radius);
  padding: var(--billing-spacing-lg);
  display: flex;
  flex-direction: column;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition), transform var(--billing-transition);
  position: relative;
}

.plan-card:hover {
  box-shadow: var(--billing-card-shadow-hover);
  transform: translateY(-2px);
}

.plan-card--featured {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 20px rgba(97, 175, 239, 0.1);
}

.plan-card--current {
  border-color: var(--color-accent-secondary);
  background: linear-gradient(135deg, var(--color-bg-secondary), rgba(152, 195, 121, 0.05));
}

.plan-card__badge {
  display: inline-block;
  padding: var(--billing-spacing-xs) var(--billing-spacing-md);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--billing-spacing-md);
  align-self: flex-start;
}

.plan-card__badge[data-tier="free"] {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
}

.plan-card__badge[data-tier="pro"] {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
}

.plan-card__badge[data-tier="dm"] {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-tertiary);
}

.plan-card__price {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--billing-spacing-md);
}

.plan-card__price .price-amount {
  color: var(--color-text-primary);
}

.plan-card__price .price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--billing-spacing-lg) 0;
  flex: 1;
}

.plan-card__features li {
  padding: var(--billing-spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.plan-card__features li:last-child {
  border-bottom: none;
}

.plan-card__features li::before {
  content: '✓ ';
  color: var(--color-accent-secondary);
  font-weight: 700;
}

.plan-card__action {
  margin-top: auto;
}

.plan-card__action .btn {
  width: 100%;
  padding: var(--billing-spacing-md);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition), transform var(--billing-transition);
  border: none;
}

.plan-card__action .btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.plan-card__action .btn--primary:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.current-plan-badge {
  display: block;
  text-align: center;
  padding: var(--billing-spacing-md);
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid var(--color-accent-secondary);
  border-radius: 6px;
  color: var(--color-accent-secondary);
  font-weight: 600;
  font-size: 0.875rem;
}

/* ==========================================
   Footer Links
   ========================================== */

.billing-page .return-link {
  text-align: center;
  margin-top: var(--billing-spacing-xl);
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-page .return-link a {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: color var(--billing-transition);
}

.billing-page .return-link a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.billing-page .footer-info {
  text-align: center;
  margin-top: var(--billing-spacing-lg);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 768px) {
  .billing-container {
    padding: var(--billing-spacing-md);
  }

  .billing-card__header {
    flex-direction: column;
    gap: var(--billing-spacing-sm);
    text-align: center;
  }

  .billing-actions {
    flex-direction: column;
  }

  .billing-actions .btn {
    width: 100%;
  }

  .usage-grid {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * Creation Cards
 * ==============
 * Interactive option cards for character creation.
 * Rendered in the narrative when AI calls show_creation_options.
 */

.creation-options {
  margin: 16px 0;
  padding: 16px;
  background: var(--panel-bg, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-color, #333);
  /* Cards expand to full natural height — parent panel handles scrolling.
     Removes nested scroll that trapped mouse wheel events (#1343). */
  max-height: none;
  overflow-y: visible;
  /* Keep cards below sticky creation-progress bar (--z-sticky)
     when scrolling within the narrative output area (#839) */
  position: relative;
  z-index: var(--z-raised);
  /* Ensure cards receive pointer events even when narrative-output
     scroll container intercepts them (#2063) */
  pointer-events: auto;
  isolation: isolate;
}

.creation-options--selected {
  transition: opacity 0.3s ease;
}

.creation-options__header {
  margin-bottom: 12px;
}

.creation-options__context {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.creation-options__search {
  margin-bottom: 12px;
}

.creation-options__search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #fff);
  font-size: 13px;
}

.creation-options__search-input:focus {
  outline: none;
  border-color: var(--accent-color, #4f46e5);
}

.creation-options__search-input::placeholder {
  color: var(--text-muted, #888);
}

/* ============================================
   FILTER TOOLBAR
   Category filter buttons above the card grid.
   Allows filtering by source (Core, Expanded, Homebrew).
   ============================================ */

.creation-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.creation-filter__btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-full, 9999px);
  color: var(--text-secondary, #888);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.creation-filter__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-hover, #555);
  color: var(--text-primary, #fff);
}

.creation-filter__btn--active {
  background: rgba(79, 70, 229, 0.15);
  border-color: var(--accent-color, #4f46e5);
  color: var(--accent-color, #4f46e5);
}

.creation-filter__btn--active:hover {
  background: rgba(79, 70, 229, 0.2);
}

/* ============================================
   COLOR ACCENTS — Source-tinted left border
   Subtle tinted left-border per card source type.
   Preserves the terminal dark theme.
   ============================================ */

.creation-card--source-core {
  border-left: 3px solid rgba(59, 130, 246, 0.4);
}

.creation-card--source-core:hover {
  border-left-color: rgba(59, 130, 246, 0.7);
}

.creation-card--source-expanded {
  border-left: 3px solid rgba(245, 158, 11, 0.4);
}

.creation-card--source-expanded:hover {
  border-left-color: rgba(245, 158, 11, 0.7);
}

.creation-card--source-homebrew {
  border-left: 3px solid rgba(139, 92, 246, 0.4);
}

.creation-card--source-homebrew:hover {
  border-left-color: rgba(139, 92, 246, 0.7);
}

/* Recommended cards keep their green accent — override source border */
.creation-card--recommended {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.creation-card--recommended:hover {
  border-left-color: rgba(16, 185, 129, 0.8);
}

.creation-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Card Styles — font-family: inherit picks up var(--font-mono) from .narrative-output,
   matching .masonry-card and .selection-card for consistent typography (#556). */
/* Using button.creation-card for higher specificity than user-agent button styles (#1108). */
button.creation-card,
.creation-card {
  /* Button reset — required for <button> elements to override browser defaults.
     Without appearance:none, Safari/WebKit renders native platform button chrome
     (gray background, system border) over custom styles. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  outline: none;

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  touch-action: manipulation; /* Allow tap-select without conflicting with scroll */
}

.creation-card:hover {
  background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
  border-color: var(--border-hover, #555);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.creation-card:active {
  transform: translateY(0);
}

.creation-card--recommended {
  border-color: var(--success-color, #10b981);
  background-color: rgba(16, 185, 129, 0.06);
  background-image: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(16, 185, 129, 0.02) 100%
  );
}

.creation-card--recommended:hover {
  border-color: var(--success-color-bright, #34d399);
}

.creation-card--selected {
  border-color: var(--accent-color, #4f46e5);
  background-color: rgba(79, 70, 229, 0.15);
}

.creation-card--selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-color, #4f46e5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Thinking state: spinner replaces checkmark while server processes */
.creation-card--thinking::after {
  content: '';
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: creation-card-spin 0.6s linear infinite;
}

@keyframes creation-card-spin {
  to { transform: rotate(360deg); }
}

/* Locked container: immediate pointer-event block + dim unselected cards */
.creation-options--locked {
  pointer-events: none;
}

.creation-options--locked .creation-card:not(.creation-card--selected) {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.creation-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.creation-card__name {
  font-weight: 600;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.creation-card__badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-full, 9999px);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.creation-card__badge--recommended {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-color, #10b981);
}

.creation-card__badge--homebrew {
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple-400, #a78bfa);
}

.creation-card__tagline {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creation-card__highlights {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.creation-card__highlight {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--tag-bg, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #888);
}

/* ============================================
   MULTI-SELECT FOOTER
   ============================================ */

.creation-options__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #333);
}

.creation-options__count {
  font-size: 13px;
  color: var(--text-secondary, #888);
  font-weight: 500;
}

.creation-options__count--complete {
  color: var(--success-color, #10b981);
}

.creation-options__confirm {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  padding: 8px 20px;
  border: 1px solid var(--accent-color, #4f46e5);
  border-radius: var(--radius-md, 8px);
  background-color: var(--accent-color, #4f46e5);
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.creation-options__confirm--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background-color: transparent;
  color: var(--text-muted, #888);
}

.creation-options__confirm--ready {
  opacity: 1;
}

.creation-options__confirm--ready:hover {
  background-color: var(--accent-color-bright, #6366f1);
  transform: translateY(-1px);
}

/* Limit reached flash */
.creation-options--limit-reached {
  animation: limit-flash 0.3s ease;
}

@keyframes limit-flash {
  0%, 100% { border-color: var(--border-color, #333); }
  50% { border-color: var(--warning-color, #f59e0b); }
}

/* In multi-select mode, selected cards show checkmark but no spinner */
.creation-options[data-max-select]:not([data-max-select="1"]) .creation-card--selected::after {
  content: '✓';
  border: none;
  animation: none;
}

/* ============================================
   DESKTOP: Enhanced flex grid layout (>= 768px)
   Cards flow 2-3 per row on desktop viewports
   for better visual scanning.
   ============================================ */
@media (min-width: 768px) {
  .creation-options__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .creation-options__grid .creation-card {
    /* Flex items: 2 columns minimum, 3 on wider viewports.
       calc() leaves room for the gap between items. */
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 200px;
  }
}

@media (min-width: 1100px) {
  .creation-options__grid .creation-card {
    /* 3 columns on wide viewports */
    flex: 1 1 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Cards flow naturally; the parent handles all vertical scrolling.
   * Nested scroll was removed — conflicts with parent .narrative-output
   * scroller on mobile (touch events are ambiguous). */
  .creation-options {
    max-height: none;
    overflow-y: visible;
  }
}

/* ============================================
   MOBILE: Full-width list layout (< 768px)
   Cards render as a scrollable list inside the
   bottom sheet, not a grid. Touch targets >= 48px.
   ============================================ */
@media (max-width: 767px) {
  .creation-options__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .creation-options {
    padding: 12px;
    border-radius: var(--radius-md, 8px);
  }

  .creation-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    min-height: 48px;
    /* Remove hover transforms on touch devices */
    transform: none;
  }

  .creation-card:hover {
    transform: none;
    box-shadow: none;
  }

  .creation-card:active {
    background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
    border-color: var(--border-hover, #555);
  }

  .creation-card__header {
    flex: 1;
    min-width: 0;
  }

  .creation-card__name {
    font-size: 14px;
  }

  .creation-card__tagline {
    font-size: 12px;
    -webkit-line-clamp: 1;
    margin-top: 2px;
  }

  .creation-card__highlights {
    margin-top: 2px;
  }

  .creation-card__highlight {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* Checkmark stays right-aligned in row layout */
  .creation-card--selected::after {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Multi-select footer touch-friendly */
  .creation-options__footer {
    padding-top: 10px;
    margin-top: 10px;
  }

  .creation-options__confirm {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
  }

  /* Search input touch-friendly */
  .creation-options__search-input {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Filter buttons: touch-friendly sizing */
  .creation-filter__btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* ============================================
   MOBILE BOTTOM SHEET (< 768px, .mf-layout only)
   On mobile, creation options slide up from the
   bottom as a fixed sheet with backdrop and drag
   handle. Desktop layout is unaffected.
   ============================================ */
@media (max-width: 767px) {
  .mf-layout .creation-options {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-xl, 4px) var(--radius-xl, 4px) 0 0;
    border: 1px solid var(--border-color, #333);
    border-bottom: none;
    background: var(--color-bg-primary, var(--panel-bg, #111));
    z-index: var(--z-modal-backdrop, 300);
    padding: var(--space-4, 16px) var(--space-3, 12px) calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 8px));
    margin: 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(0);
    animation: sheet-slide-up var(--duration-normal, 300ms) cubic-bezier(0.4, 0, 0.2, 1) both;
  }

  /* Backdrop — covers the viewport behind the sheet */
  .mf-layout .narrative-entry:has(.creation-options)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal-backdrop, 300) - 1);
    animation: sheet-backdrop-in var(--duration-normal, 300ms) ease both;
  }

  /* Drag handle — visual indicator the sheet can be dismissed */
  .mf-layout .creation-options::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
    margin: 0 auto var(--space-3, 12px);
    flex-shrink: 0;
  }

  /* Category header — prominent at top of sheet */
  .mf-layout .creation-options__context {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-3, 12px);
  }

  /* Ensure the narrative-entry wrapper doesn't clip the fixed sheet */
  .mf-layout .narrative-entry:has(.creation-options) {
    position: static;
    overflow: visible;
  }

  /* Auto-dismiss on selection — plays after brief delay for checkmark visibility */
  .mf-layout .creation-options--selected {
    animation: sheet-dismiss var(--duration-normal, 300ms) ease-out 0.5s forwards;
  }

  /* Dismiss the backdrop when selection is made */
  .mf-layout .narrative-entry:has(.creation-options--selected)::before {
    animation: sheet-backdrop-out var(--duration-normal, 300ms) ease-out 0.5s forwards;
  }
}

@keyframes sheet-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes sheet-dismiss {
  to {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
  }
}

@keyframes sheet-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sheet-backdrop-out {
  to {
    opacity: 0;
    pointer-events: none;
  }
}

/* Reduced motion: skip slide/fade animations for bottom sheet (mobile only) */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mf-layout .creation-options {
    animation: none;
  }

  .mf-layout .narrative-entry:has(.creation-options)::before {
    animation: none;
  }

  .mf-layout .creation-options--selected {
    animation: none;
    transform: translateY(100%);
    opacity: 0;
  }

  .mf-layout .narrative-entry:has(.creation-options--selected)::before {
    opacity: 0;
  }
}

/* ============================================
   SELECTION STATUS (#1467)
   Brief "Saving your choice..." feedback shown
   while the server processes a card selection.
   ============================================ */

.creation-options__status {
  margin-top: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted, #888);
  text-align: center;
  animation: status-fade-in 0.2s ease;
}

@keyframes status-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .creation-options__status {
    animation: none;
  }
}

/* Animation for card appearance */
@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.creation-options__grid .creation-card {
  animation: card-fade-in 0.2s ease forwards;
}

.creation-options__grid .creation-card:nth-child(1) { animation-delay: 0.02s; }
.creation-options__grid .creation-card:nth-child(2) { animation-delay: 0.04s; }
.creation-options__grid .creation-card:nth-child(3) { animation-delay: 0.06s; }
.creation-options__grid .creation-card:nth-child(4) { animation-delay: 0.08s; }
.creation-options__grid .creation-card:nth-child(5) { animation-delay: 0.10s; }
.creation-options__grid .creation-card:nth-child(6) { animation-delay: 0.12s; }
.creation-options__grid .creation-card:nth-child(7) { animation-delay: 0.14s; }
.creation-options__grid .creation-card:nth-child(8) { animation-delay: 0.16s; }
.creation-options__grid .creation-card:nth-child(9) { animation-delay: 0.18s; }
.creation-options__grid .creation-card:nth-child(10) { animation-delay: 0.20s; }
.creation-options__grid .creation-card:nth-child(11) { animation-delay: 0.22s; }
.creation-options__grid .creation-card:nth-child(12) { animation-delay: 0.24s; }

/* Reduced motion: disable animations, ensure cards are visible */
@media (prefers-reduced-motion: reduce) {
  .creation-options__grid .creation-card {
    animation: none;
    opacity: 1;
  }

  .creation-card--thinking::after {
    animation: none;
    content: '…';
    border: none;
  }

  .creation-options--locked .creation-card:not(.creation-card--selected) {
    transition: none;
  }
}

/* Selection summary — replaces cards after a choice is made */
.creation-selection-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  border-left: 2px solid var(--accent-color, #4f46e5);
}

.creation-selection-summary__label {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.creation-selection-summary__value {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.narrative-entry--selection-summary {
  margin: 4px 0;
}

/* ============================================
   CHARACTER CREATION ROOM: Click-through fix (#2063)

   During character creation the narrative-output scroll container
   intercepts pointer events on creation cards — Playwright
   reports "click intercepted by narrative-output div".

   Root cause: the scroll container (.narrative-output) with
   overflow-y:auto creates a hit-test surface that sits above
   its children in certain layout configurations (flex column
   with the mf-layout display:flex override). When elementFromPoint
   is called at the card's center coordinates, the scroll
   container itself is returned instead of the child button.

   Fix: in character_creation room only, set pointer-events:none
   on the narrative-output so it passes clicks through, then
   re-enable pointer-events on all direct children. Scroll via
   mouse wheel still works because the scrollable children
   (narrative entries) have pointer-events:auto and propagate
   wheel events to their scroll container parent.

   SCOPE: character_creation room only — game room narrative
   scrolling and clicking is unaffected.
   ============================================ */

[data-room="character_creation"] .narrative-output {
  pointer-events: none;
}

[data-room="character_creation"] .narrative-output > * {
  pointer-events: auto;
}

[data-room="character_creation"] .narrative-output .creation-card {
  pointer-events: auto;
}
/* Expedition Status Panel
   ========================
   Player-facing UI for expedition supplies and watch schedules.
   Displays rations, water, torches with visual bars and projections.
*/

.expedition-status-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  height: 100%;
  overflow-y: auto;
}

/* Header */
.expedition-status__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-terminal-border);
}

.expedition-status__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-terminal-amber);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

.expedition-status__refresh {
  background: none;
  border: none;
  color: var(--color-terminal-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  transition: color 0.2s;
}

.expedition-status__refresh:hover {
  color: var(--color-terminal-amber);
}

/* Section */
.expedition-status__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.expedition-status__section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-terminal-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Supplies Grid */
.expedition-status__supplies {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.expedition-status__supply-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-terminal-overlay);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-terminal-border);
  transition: border-color 0.2s;
}

.expedition-status__supply-item[data-status="critical"] {
  border-color: var(--color-terminal-red);
  background: rgba(239, 68, 68, 0.1);
}

.expedition-status__supply-item[data-status="low"] {
  border-color: var(--color-terminal-amber);
  background: rgba(245, 158, 11, 0.1);
}

/* Supply Header */
.expedition-status__supply-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.expedition-status__supply-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-terminal-amber);
}

.expedition-status__supply-name {
  flex: 1;
  font-weight: 600;
  color: var(--color-terminal-text);
}

.expedition-status__supply-amount {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-terminal-amber);
}

.expedition-status__supply-item[data-status="critical"] .expedition-status__supply-amount {
  color: var(--color-terminal-red);
}

.expedition-status__supply-item[data-status="low"] .expedition-status__supply-amount {
  color: var(--color-terminal-amber);
}

/* Supply Bar */
.expedition-status__supply-bar {
  height: 8px;
  background: var(--color-terminal-overlay-dark);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  position: relative;
}

.expedition-status__supply-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-terminal-green), var(--color-terminal-green-light));
  border-radius: var(--border-radius-sm);
  transition: width 0.4s ease, background 0.4s ease;
}

.expedition-status__supply-item[data-status="low"] .expedition-status__supply-fill {
  background: linear-gradient(90deg, var(--color-terminal-amber), var(--color-terminal-amber-light));
}

.expedition-status__supply-item[data-status="critical"] .expedition-status__supply-fill {
  background: linear-gradient(90deg, var(--color-terminal-red), var(--color-terminal-red-light));
  animation: pulse-critical 1.5s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Supply Status */
.expedition-status__supply-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-terminal-text-muted);
}

.expedition-status__days-remaining,
.expedition-status__watches-remaining {
  font-weight: 500;
}

/* Overall Status */
.expedition-status__overall {
  display: flex;
  justify-content: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-terminal-border);
}

.expedition-status__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.expedition-status__badge--good {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-terminal-green);
  border: 1px solid var(--color-terminal-green);
}

.expedition-status__badge--low {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-terminal-amber);
  border: 1px solid var(--color-terminal-amber);
}

.expedition-status__badge--critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-terminal-red);
  border: 1px solid var(--color-terminal-red);
}

/* Watch Schedule */
.expedition-status__watches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.expedition-status__watch-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-terminal-overlay);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-terminal-border);
}

.expedition-status__watch-item--active {
  border-color: var(--color-terminal-amber);
  background: rgba(245, 158, 11, 0.1);
}

.expedition-status__watch-number {
  font-weight: 700;
  color: var(--color-terminal-amber);
  min-width: 60px;
}

.expedition-status__watch-character {
  flex: 1;
  color: var(--color-terminal-text);
}

.expedition-status__watch-time {
  font-size: var(--font-size-sm);
  color: var(--color-terminal-text-muted);
}

/* Actions */
.expedition-status__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-terminal-border);
}

.expedition-status__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-terminal-overlay);
  border: 1px solid var(--color-terminal-border);
  border-radius: var(--border-radius-md);
  color: var(--color-terminal-text);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.expedition-status__action-btn:hover {
  background: var(--color-terminal-overlay-hover);
  border-color: var(--color-terminal-amber);
  color: var(--color-terminal-amber);
}

.expedition-status__action-btn:active {
  transform: scale(0.98);
}

.expedition-status__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State */
.expedition-status__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-terminal-text-muted);
}

.expedition-status__empty.visible {
  display: flex;
}

.expedition-status__help-text {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .expedition-status__actions {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Experience Features - Modal and Controls Styles
   ========================================================================== */

/* Base Modal Styles */
.experience-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal, 1000);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.experience-modal--open {
  display: flex;
  opacity: 1;
}

.experience-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2px);
}

.experience-modal__content {
  position: relative;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-primary);
  border-radius: 0.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(var(--terminal-primary-rgb), 0.3);
}

.experience-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--terminal-border);
}

.experience-modal__header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--terminal-primary);
  font-family: var(--font-terminal);
}

.experience-modal__close {
  background: transparent;
  border: none;
  color: var(--terminal-dim);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.experience-modal__close:hover {
  color: var(--terminal-primary);
}

.experience-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--terminal-text);
}

.experience-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--terminal-border);
  gap: 1rem;
}

/* ==========================================================================
   Session Recap Modal
   ========================================================================== */

.session-recap-modal .experience-modal__content {
  max-width: 700px;
}

.session-recap {
  line-height: 1.7;
}

.session-recap p {
  margin-bottom: 1em;
}

.session-recap strong {
  color: var(--terminal-primary);
}

.session-recap em {
  color: var(--terminal-cyan);
  font-style: italic;
}

/* Recap style variants */
.recap-style--dramatic strong {
  color: var(--terminal-amber);
}

.recap-style--epic strong {
  color: var(--terminal-gold);
}

.recap-style--mysterious {
  font-style: italic;
}

.recap-style--mysterious strong {
  color: var(--terminal-magenta);
}

.recap-style--brief {
  font-size: 0.9rem;
}

.session-recap__meta {
  color: var(--terminal-dim);
  font-size: 0.8rem;
}

/* ==========================================================================
   Consequence Preview Modal
   ========================================================================== */

.consequence-preview-modal .experience-modal__content {
  max-width: 550px;
}

.consequence-action {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--terminal-border);
}

.consequence-action strong {
  color: var(--terminal-cyan);
}

.consequence-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.consequence-item {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border-left: 3px solid;
  background: rgba(255, 255, 255, 0.02);
}

.consequence-item--low {
  border-color: var(--terminal-green);
}

.consequence-item--medium {
  border-color: var(--terminal-amber);
}

.consequence-item--high {
  border-color: var(--terminal-red);
}

.consequence-likelihood {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-dim);
  margin-bottom: 0.25rem;
}

.consequence-outcome {
  margin: 0.25rem 0 0.5rem;
  color: var(--terminal-text);
  line-height: 1.5;
}

.consequence-risk {
  font-size: 0.75rem;
  color: var(--terminal-dim);
}

.consequence-item--low .consequence-risk {
  color: var(--terminal-green);
}

.consequence-item--medium .consequence-risk {
  color: var(--terminal-amber);
}

.consequence-item--high .consequence-risk {
  color: var(--terminal-red);
}

/* ==========================================================================
   Quick Actions Palette
   ========================================================================== */

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.quick-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 1rem;
  color: var(--terminal-text);
  font-size: 0.8rem;
  font-family: var(--font-terminal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.quick-action-chip:hover {
  background: rgba(var(--terminal-primary-rgb), 0.1);
  border-color: var(--terminal-primary);
  color: var(--terminal-primary);
}

.quick-action-chip:active {
  transform: scale(0.97);
}

.quick-action-chip__icon {
  font-size: 1rem;
}

/* ==========================================================================
   Atmosphere Controls
   ========================================================================== */

.atmosphere-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
}

.atmosphere-controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.atmosphere-controls__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--terminal-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.atmosphere-controls__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  background: var(--terminal-border);
  border-radius: 0.25rem;
  outline: none;
}

.atmosphere-controls__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--terminal-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.atmosphere-controls__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.atmosphere-controls__slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--terminal-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.atmosphere-controls__select {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  color: var(--terminal-text);
  padding: 0.5rem;
  font-family: var(--font-terminal);
  font-size: 0.85rem;
}

.atmosphere-controls__select:focus {
  outline: none;
  border-color: var(--terminal-primary);
}

/* ==========================================================================
   Bookmarks List
   ========================================================================== */

.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookmark-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.bookmark-item:hover {
  border-color: var(--terminal-primary);
}

.bookmark-item__icon {
  flex-shrink: 0;
  color: var(--terminal-amber);
  font-size: 1.1rem;
}

.bookmark-item__content {
  flex: 1;
  min-width: 0;
}

.bookmark-item__label {
  font-weight: 600;
  color: var(--terminal-text);
  margin-bottom: 0.25rem;
}

.bookmark-item__excerpt {
  font-size: 0.85rem;
  color: var(--terminal-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookmark-item__meta {
  font-size: 0.7rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

/* ==========================================================================
   Body modal-open state
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Relationship Map Modal
   ========================================================================== */

.relationship-map-modal .experience-modal__content {
  max-width: 650px;
}

.relationship-map__nodes,
.relationship-map__edges {
  margin-bottom: 1.5rem;
}

.relationship-map__nodes h3,
.relationship-map__edges h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terminal-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.relationship-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.relationship-node--player {
  border-color: var(--terminal-primary);
  background: rgba(var(--terminal-primary-rgb), 0.1);
}

.relationship-node--npc {
  border-left: 3px solid var(--terminal-cyan);
}

.relationship-node__label {
  font-weight: 500;
  color: var(--terminal-text);
}

.relationship-node__disposition {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--terminal-bg);
  color: var(--terminal-dim);
}

.relationship-edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
  color: var(--terminal-text);
  border-bottom: 1px solid var(--terminal-border);
}

.relationship-edge:last-child {
  border-bottom: none;
}

.relationship-edge__label {
  color: var(--terminal-cyan);
}

.relationship-edge__strength {
  color: var(--terminal-dim);
  font-size: 0.75rem;
}

/* ==========================================================================
   Character Goals Panel
   ========================================================================== */

.character-goals {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.goal-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
}

.goal-item--completed {
  opacity: 0.6;
  border-color: var(--terminal-green);
}

.goal-item__checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--terminal-border);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.goal-item__checkbox:hover {
  border-color: var(--terminal-primary);
}

.goal-item--completed .goal-item__checkbox {
  background: var(--terminal-green);
  border-color: var(--terminal-green);
}

.goal-item__content {
  flex: 1;
  min-width: 0;
}

.goal-item__text {
  color: var(--terminal-text);
  line-height: 1.4;
}

.goal-item--completed .goal-item__text {
  text-decoration: line-through;
}

.goal-item__meta {
  font-size: 0.75rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

.goal-item__type {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  background: var(--terminal-bg);
}

/* ==========================================================================
   Downtime Activity Cards
   ========================================================================== */

.downtime-activities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.downtime-activity {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.downtime-activity:hover {
  background: rgba(var(--terminal-primary-rgb), 0.1);
  border-color: var(--terminal-primary);
}

.downtime-activity__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.downtime-activity__label {
  font-weight: 500;
  color: var(--terminal-text);
  font-size: 0.9rem;
}

.downtime-activity__desc {
  font-size: 0.75rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

/* ==========================================================================
   Living Lore Encyclopedia Modal
   ========================================================================== */

.lore-encyclopedia-modal .experience-modal__content {
  max-width: 750px;
  max-height: 85vh;
}

.lore-encyclopedia__toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--terminal-border);
  background: rgba(255, 255, 255, 0.01);
}

.lore-encyclopedia__search {
  display: flex;
  gap: 0.5rem;
}

.lore-encyclopedia__search input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  color: var(--terminal-text);
  font-family: var(--font-terminal);
  font-size: 0.85rem;
}

.lore-encyclopedia__search input:focus {
  outline: none;
  border-color: var(--terminal-primary);
}

.lore-encyclopedia__search button {
  padding: 0.5rem 1rem;
  background: var(--terminal-primary);
  border: none;
  border-radius: 0.25rem;
  color: var(--terminal-bg);
  font-family: var(--font-terminal);
  font-size: 0.85rem;
  cursor: pointer;
}

.lore-encyclopedia__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lore-category-btn {
  padding: 0.25rem 0.625rem;
  background: transparent;
  border: 1px solid var(--terminal-border);
  border-radius: 1rem;
  color: var(--terminal-dim);
  font-size: 0.75rem;
  font-family: var(--font-terminal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lore-category-btn:hover {
  border-color: var(--terminal-primary);
  color: var(--terminal-primary);
}

.lore-category-btn--active {
  background: var(--terminal-primary);
  border-color: var(--terminal-primary);
  color: var(--terminal-bg);
}

.lore-encyclopedia__body {
  max-height: 400px;
  overflow-y: auto;
}

.lore-encyclopedia__count {
  flex: 1;
  font-size: 0.8rem;
  color: var(--terminal-dim);
  text-align: center;
}

.lore-entry {
  padding: 1rem;
  border-bottom: 1px solid var(--terminal-border);
}

.lore-entry:last-child {
  border-bottom: none;
}

.lore-entry:hover {
  background: rgba(255, 255, 255, 0.02);
}

.lore-entry__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lore-entry__category {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lore-entry--npc .lore-entry__category {
  background: var(--terminal-cyan-dim);
  color: var(--terminal-cyan);
}

.lore-entry--location .lore-entry__category {
  background: var(--terminal-green-dim);
  color: var(--terminal-green);
}

.lore-entry--item .lore-entry__category {
  background: var(--terminal-amber-dim);
  color: var(--terminal-amber);
}

.lore-entry--custom .lore-entry__category {
  background: var(--terminal-magenta-dim);
  color: var(--terminal-magenta);
}

.lore-entry--faction .lore-entry__category {
  background: var(--terminal-red-dim);
  color: var(--terminal-red);
}

.lore-entry--history .lore-entry__category {
  background: var(--terminal-blue-dim);
  color: var(--terminal-blue);
}

.lore-entry__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text);
}

.lore-entry__description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--terminal-dim);
  line-height: 1.5;
}

.lore-entry__meta {
  margin-top: 0.5rem;
}

.lore-entry__player-added {
  font-size: 0.7rem;
  color: var(--terminal-cyan);
  font-style: italic;
}

.lore-entry--empty {
  padding: 2rem;
  text-align: center;
  color: var(--terminal-dim);
  font-style: italic;
}
/*
 * Guest Export Banner
 * ====================
 * Banner shown to guest users in Creator Studio when they have local content.
 * Provides export options and sign-up CTA.
 */

.guest-export-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(217, 119, 6, 0.1) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
}

.guest-export-banner[hidden] {
  display: none;
}

.guest-export-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-full);
  color: #FBBF24;
}

.guest-export-banner__content {
  flex: 1;
  min-width: 0;
}

.guest-export-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.guest-export-banner__subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.guest-export-banner__actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.guest-export-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.guest-export-banner__btn .btn--icon {
  display: flex;
  align-items: center;
}

.guest-export-banner__btn .btn--icon svg {
  width: 14px;
  height: 14px;
}

.guest-export-banner__btn--secondary {
  background: rgba(45, 45, 45, 0.8);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.guest-export-banner__btn--secondary:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

.guest-export-banner__btn--primary {
  background: #F59E0B;
  color: var(--gray-900);
  border-color: #F59E0B;
}

.guest-export-banner__btn--primary:hover {
  background: #FBBF24;
  border-color: #FBBF24;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .guest-export-banner {
    flex-wrap: wrap;
  }

  .guest-export-banner__content {
    flex-basis: calc(100% - 56px);
  }

  .guest-export-banner__actions {
    flex-basis: 100%;
    margin-top: var(--spacing-xs);
    justify-content: flex-end;
  }
}
/*
 * Lobby Modal - AI-DM Triggered Meta-game Coordination Modal
 * ===========================================================
 * Triggered via WebSocket for session pauses, character selection,
 * party invitations, downtime activities, and custom DM content.
 *
 * Overlays game content without disrupting gameplay state.
 */

/* ========================================
 * BODY STATE
 * ======================================== */

.lobby-modal-open {
  overflow: hidden;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.lobby-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 1000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal, 0.2s) ease;
  padding: var(--space-4, 1rem);
}

.lobby-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * BACKDROP
 * ======================================== */

.lobby-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  animation: lobby-modal-backdrop-in 0.2s ease-out;
}

.lobby-modal--visible .lobby-modal__backdrop {
  animation: lobby-modal-backdrop-in 0.2s ease-out forwards;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.lobby-modal__container {
  position: relative;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  overflow: hidden;
  animation: lobby-modal-enter 0.25s ease-out;
}

.lobby-modal--visible .lobby-modal__container {
  animation: lobby-modal-enter 0.25s ease-out forwards;
}

/* ========================================
 * MODAL HEADER
 * ======================================== */

.lobby-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, #333);
  text-align: center;
}

.lobby-modal__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border: 2px solid var(--color-accent-primary, #61afef);
  border-radius: 50%;
  color: var(--color-accent-primary, #61afef);
}

.lobby-modal__icon-symbol {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* Icon variants */
.lobby-modal__icon--pause {
  background: rgba(229, 192, 123, 0.15);
  border-color: var(--color-warning, #e5c07b);
  color: var(--color-warning, #e5c07b);
}

.lobby-modal__icon--character {
  background: rgba(152, 195, 121, 0.15);
  border-color: var(--color-success, #98c379);
  color: var(--color-success, #98c379);
}

.lobby-modal__icon--party {
  background: rgba(198, 120, 221, 0.15);
  border-color: var(--color-accent-secondary, #c678dd);
  color: var(--color-accent-secondary, #c678dd);
}

.lobby-modal__icon--downtime {
  background: rgba(86, 182, 194, 0.15);
  border-color: var(--color-info, #56b6c2);
  color: var(--color-info, #56b6c2);
}

.lobby-modal__icon--custom {
  background: rgba(97, 175, 239, 0.15);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.lobby-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-text-primary, #e0e0e0);
}

/* ========================================
 * MODAL BODY
 * ======================================== */

.lobby-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

/* Custom scrollbar */
.lobby-modal__body::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
}

.lobby-modal__body::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, #1e1e2e);
}

.lobby-modal__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, #444);
  border-radius: var(--radius-full, 9999px);
}

.lobby-modal__message {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary, #e0e0e0);
  text-align: center;
}

.lobby-modal__submessage {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #888);
  text-align: center;
}

.lobby-modal__empty {
  text-align: center;
  color: var(--color-text-muted, #888);
  font-style: italic;
  padding: var(--space-4, 1rem);
}

/* ========================================
 * CHARACTER LIST (character_select)
 * ======================================== */

.lobby-modal__character-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-modal__character-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-primary, #e0e0e0);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.lobby-modal__character-option:hover {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary, #61afef);
}

.lobby-modal__character-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__character-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.lobby-modal__character-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-modal__character-details {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
}

.lobby-modal__character-arrow {
  font-size: 1.25rem;
  color: var(--color-text-muted, #888);
  transition: transform 0.15s ease;
}

.lobby-modal__character-option:hover .lobby-modal__character-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * PARTY INVITE
 * ======================================== */

.lobby-modal__party-members {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md, 6px);
}

.lobby-modal__party-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  margin-bottom: var(--space-2, 0.5rem);
}

.lobby-modal__member-list {
  margin: 0;
  padding-left: var(--space-5, 1.25rem);
  list-style: disc;
}

.lobby-modal__member-list li {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #bbb);
  margin-bottom: var(--space-1, 0.25rem);
}

/* ========================================
 * ACTIVITY LIST (downtime)
 * ======================================== */

.lobby-modal__activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-modal__activity-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-primary, #e0e0e0);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.lobby-modal__activity-option:hover {
  background: rgba(86, 182, 194, 0.1);
  border-color: var(--color-info, #56b6c2);
}

.lobby-modal__activity-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.lobby-modal__activity-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-modal__activity-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
}

.lobby-modal__activity-duration {
  font-size: 0.75rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-info, #56b6c2);
  white-space: nowrap;
}

/* ========================================
 * CUSTOM CONTENT
 * ======================================== */

.lobby-modal__custom-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #bbb);
}

/* ========================================
 * MODAL FOOTER
 * ======================================== */

.lobby-modal__footer {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #333);
  background: var(--color-bg-secondary, #252535);
}

/* ========================================
 * BUTTONS
 * ======================================== */

.lobby-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  border: 1px solid transparent;
}

.lobby-modal__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lobby-modal__btn--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  border-color: var(--color-accent-primary, #61afef);
}

.lobby-modal__btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.lobby-modal__btn--secondary {
  background: transparent;
  border-color: var(--color-border-subtle, #444);
  color: var(--color-text-secondary, #aaa);
}

.lobby-modal__btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-secondary, #aaa);
  color: var(--color-text-primary, #e0e0e0);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes lobby-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lobby-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .lobby-modal {
    transition: none;
  }

  .lobby-modal__backdrop,
  .lobby-modal__container {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 600px) {
  .lobby-modal {
    padding: var(--space-2, 0.5rem);
  }

  .lobby-modal__container {
    max-width: none;
    max-height: calc(100vh - var(--space-4, 1rem));
    max-height: calc(100dvh - var(--space-4, 1rem));
  }

  .lobby-modal__header,
  .lobby-modal__body,
  .lobby-modal__footer {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }

  .lobby-modal__footer {
    flex-direction: column-reverse;
  }

  .lobby-modal__btn {
    width: 100%;
    text-align: center;
  }
}
/*
 * Lobby Preview Modal
 * Shows campaign preview before joining
 */

.lobby-preview-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.lobby-preview-modal.detail-modal--open {
  display: flex;
}

.lobby-preview-modal__content {
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-bg-primary, #0d0d0d);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(97, 175, 239, 0.2);
  padding: var(--space-5, 1.25rem);
}

/* Loading State */
.lobby-preview__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-8, 2rem);
  color: var(--color-text-muted, #808080);
}

.lobby-preview__loading svg {
  animation: spin 1s linear infinite;
}

/* Error State */
.lobby-preview__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-8, 2rem);
  color: var(--color-accent-danger, #ff453a);
}

/* Header */
.lobby-preview__header {
  margin-bottom: var(--space-4, 1rem);
}

.lobby-preview__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-accent-primary, #61afef);
  margin: 0 0 var(--space-2, 0.5rem);
}

.lobby-preview__badges {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__badge {
  padding: 0.125rem var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.lobby-preview__badge--status {
  background: rgba(52, 199, 89, 0.15);
  color: var(--color-accent-success, #34c759);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.lobby-preview__badge--visibility {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary, #61afef);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* Sections */
.lobby-preview__section {
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-preview__section:last-of-type {
  border-bottom: none;
}

.lobby-preview__section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 500);
  color: var(--color-text-secondary, #c0c0c0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.lobby-preview__description {
  font-family: var(--font-mono);
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: 1.5;
  margin: 0;
}

/* Lobby Message */
.lobby-preview__message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(218, 165, 32, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: var(--radius-md, 6px);
  color: var(--color-gold, #daa520);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
}

.lobby-preview__message svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Details Grid */
.lobby-preview__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__detail {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #c0c0c0);
}

.lobby-preview__detail svg {
  color: var(--color-text-muted, #808080);
  flex-shrink: 0;
}

.lobby-preview__detail strong {
  color: var(--color-text-primary, #e0e0e0);
}

/* Party Composition */
.lobby-preview__party {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__empty-party {
  padding: var(--space-4, 1rem);
  text-align: center;
  color: var(--color-text-muted, #808080);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  font-style: italic;
}

.lobby-preview__member {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg-secondary, #1a1a1a);
  border-radius: var(--radius-md, 6px);
}

.lobby-preview__member--dm {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.1), transparent);
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.lobby-preview__member-portrait-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-purple, #9B59B6));
}

.lobby-preview__member-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-preview__member-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

.lobby-preview__member-info {
  flex: 1;
  min-width: 0;
}

.lobby-preview__member-name {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-mono);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-semibold, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-preview__member-role {
  padding: 0 var(--space-1, 0.25rem);
  background: var(--color-gold, #daa520);
  color: var(--color-bg-primary, #0d0d0d);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 600);
  text-transform: uppercase;
}

.lobby-preview__member-class {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #808080);
}

/* Actions */
.lobby-preview__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-preview__join-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__close-btn {
  flex: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .lobby-preview-modal__content {
    width: 95%;
    max-height: 90vh;
    padding: var(--space-4, 1rem);
  }

  .lobby-preview__details {
    grid-template-columns: 1fr;
  }
}
/* ========================================
 * Panel Palette (Ctrl+B ? Command Palette)
 * ======================================== */

.panel-palette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
}

.panel-palette--open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.panel-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.panel-palette-modal {
  position: relative;
  width: 400px;
  max-width: 90vw;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #1a1a1a);
  border: 1px solid var(--color-accent-purple, #7c3aed);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.2);
  overflow: hidden;
  animation: palette-slide-in 0.15s ease-out;
}

@keyframes palette-slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.panel-palette-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #333);
}

.panel-palette-title {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-accent-purple, #7c3aed);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-palette-hint {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--text-muted, #888);
  padding: 2px 6px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

.panel-palette-search {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-bottom: 1px solid var(--border-color, #333);
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  outline: none;
}

.panel-palette-search::placeholder {
  color: var(--text-muted, #888);
}

.panel-palette-search:focus {
  background: rgba(0, 0, 0, 0.5);
}

.panel-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.panel-palette-category {
  margin-bottom: 4px;
}

.panel-palette-category-header {
  padding: 6px 8px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
}

.panel-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.panel-palette-item:hover,
.panel-palette-item--selected {
  background: rgba(124, 58, 237, 0.15);
}

.panel-palette-item--open {
  opacity: 0.5;
}

.panel-palette-item-title {
  flex: 1;
}

.panel-palette-item-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(124, 58, 237, 0.2);
  color: var(--accent-light, #a78bfa);
}

@media (prefers-reduced-motion: reduce) {
  .panel-palette-modal {
    animation: none;
  }
}
/* Party Chat Panel */

.panel-party-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 300px;
}

.party-chat-header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.party-chat-messages {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.party-chat-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: messageSlideIn 0.2s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.party-chat-message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
}

.party-chat-sender {
  font-weight: 600;
  color: var(--color-accent);
}

.party-chat-timestamp {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.party-chat-message-content {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Self message styling */
.party-chat-message[data-self="true"] .party-chat-sender {
  color: var(--color-success);
}

.party-chat-message[data-self="true"] .party-chat-message-content {
  background: var(--color-bg-accent, rgba(34, 197, 94, 0.1));
  border-color: var(--color-success);
}

/* Input area */
.party-chat-input-container {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.party-chat-input-wrapper {
  display: flex;
  gap: var(--spacing-xs);
}

.party-chat-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s ease;
}

.party-chat-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 59, 130, 246), 0.1);
}

.party-chat-send-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-accent);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.party-chat-send-btn:hover:not(:disabled) {
  background: var(--color-accent-hover, #2563eb);
}

.party-chat-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.party-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.party-chat-send-btn svg {
  width: 16px;
  height: 16px;
}

/* System messages */
.party-chat-system-message {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Empty state */
.party-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-lg);
}

/* Scroll hint when new messages arrive */
.party-chat-scroll-hint {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: var(--spacing-xs);
  background: var(--color-accent);
  color: white;
  font-size: 0.75rem;
  cursor: pointer;
  animation: fadeIn 0.3s ease;
  z-index: var(--z-sticky);
}

/* ========================================
 * Party Chat - Voting Integration
 * ======================================== */

.party-chat-votes {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}

.party-chat-votes:empty {
  display: none;
  padding: 0;
  border: none;
}

.party-chat-vote-form {
  padding: var(--spacing-sm);
  padding-top: 0;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Vote Card (inline with chat) */
.vote-card {
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  animation: messageSlideIn 0.2s ease-out;
}

.vote-card--complete {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.vote-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.vote-card__action {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  flex: 1;
  word-break: break-word;
}

.vote-card__timer {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-bg-tertiary, #1f2937);
  white-space: nowrap;
}

.vote-card__timer--urgent {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-urgent 1s ease-in-out infinite;
}

.vote-card__timer--expired {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

@keyframes pulse-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.vote-card__status {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
}

.vote-card__status--complete {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.vote-card__progress {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.vote-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Vote Option Button */
.vote-option-btn {
  padding: 4px var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-tertiary, #1f2937);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vote-option-btn:hover:not(:disabled) {
  border-color: var(--color-accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

.vote-option-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.vote-option-btn--selected {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.vote-option-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vote-check {
  font-size: 0.7rem;
}

/* Vote Results */
.vote-card__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--spacing-xs);
}

.vote-result {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px var(--spacing-xs);
  border-radius: 3px;
  font-size: 0.8rem;
}

.vote-result--winner {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.vote-result__option {
  flex: 1;
  color: var(--color-text-primary);
}

.vote-result__count {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.vote-result__badge {
  color: #22c55e;
  font-weight: 700;
}

/* Vote Form Accordion (in chat) */
.vote-form-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}

.vote-form-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  transition: background-color 0.15s ease;
  list-style: none;
}

.vote-form-toggle::-webkit-details-marker {
  display: none;
}

.vote-form-toggle:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.vote-form-toggle__icon {
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.2s ease;
}

details[open] .vote-form-toggle__icon {
  transform: rotate(45deg);
}

/* Vote Form */
.vote-form {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.vote-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vote-form__field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.vote-form__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vote-form__hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
}

.vote-form__input,
.vote-form__select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-tertiary, #1f2937);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}

.vote-form__input:focus,
.vote-form__select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.vote-form__input::placeholder {
  color: var(--color-text-muted);
}

.vote-form__select {
  cursor: pointer;
  min-width: 100px;
}

.vote-form__submit {
  align-self: flex-start;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-accent-primary, #3b82f6);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.vote-form__submit:hover {
  background: var(--color-accent-primary-hover, #2563eb);
}

.vote-form__submit:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .vote-card__timer--urgent,
  .vote-form-toggle__icon,
  .vote-option-btn,
  .vote-form__submit,
  .vote-card {
    animation: none;
    transition: none;
  }
}
/* Party Lobby Modal
 * ==================
 * In-game modal for party management, join requests, and spectators.
 */

.party-lobby-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  width: Min(500px, 90vw);
  max-height: 80vh;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.party-lobby-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.party-lobby-modal__content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

/* Header */
.party-lobby-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.party-lobby-modal__title {
  margin: 0;
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.party-lobby-modal__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.party-lobby-modal__count {
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

.party-lobby-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.party-lobby-modal__close:hover {
  color: var(--color-text);
}

.party-lobby-modal__close svg {
  width: 16px;
  height: 16px;
}

/* Tabs */
.party-lobby-modal__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.party-lobby-modal__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.party-lobby-modal__tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}

.party-lobby-modal__tab.active {
  color: var(--color-primary);
  background: var(--color-surface);
}

.party-lobby-modal__tab svg {
  width: 14px;
  height: 14px;
}

.party-lobby-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.party-lobby-modal__badge:empty,
.party-lobby-modal__badge.hidden {
  display: none;
}

/* Body */
.party-lobby-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.party-lobby-modal__panel {
  display: none;
}

.party-lobby-modal__panel.active {
  display: block;
}

.party-lobby-modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Member Card */
.party-lobby-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.party-lobby-modal__member:hover {
  background: var(--color-surface-hover);
}

.party-lobby-modal__member-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.party-lobby-modal__member-status.status--online {
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

.party-lobby-modal__member-status.status--offline {
  background: var(--color-text-muted);
}

.party-lobby-modal__member-info {
  flex: 1;
  min-width: 0;
}

.party-lobby-modal__member-name {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.party-lobby-modal__member-character {
  display: block;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-lobby-modal__member-role {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-lobby-modal__member-role.role--dm {
  background: var(--color-primary-bg, rgba(139, 92, 246, 0.15));
  color: var(--color-primary);
}

.party-lobby-modal__member-role.role--player {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
}

.party-lobby-modal__member-actions {
  display: flex;
  gap: var(--space-1);
}

/* Request Card */
.party-lobby-modal__request {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.party-lobby-modal__request-info {
  flex: 1;
}

.party-lobby-modal__request-name {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.party-lobby-modal__request-message {
  margin: var(--space-1) 0 0;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.party-lobby-modal__request-actions {
  display: flex;
  gap: var(--space-2);
}

/* Spectator */
.party-lobby-modal__spectator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.party-lobby-modal__spectator-name {
  font-size: var(--size-sm);
  color: var(--color-text);
}

/* Empty State */
.party-lobby-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.party-lobby-modal__empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.party-lobby-modal__empty p {
  margin: 0;
}

/* Loading */
.party-lobby-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.party-lobby-modal__loading .loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Footer */
.party-lobby-modal__footer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  justify-content: flex-end;
}

.party-lobby-modal__footer .btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.party-lobby-modal__footer .btn svg {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 480px) {
  .party-lobby-modal__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .party-lobby-modal__member {
    flex-wrap: wrap;
  }

  .party-lobby-modal__member-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-2);
  }

  .party-lobby-modal__request {
    flex-direction: column;
  }

  .party-lobby-modal__request-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .party-lobby-modal__footer {
    flex-wrap: wrap;
  }

  .party-lobby-modal__footer .btn {
    flex: 1;
    min-width: calc(50% - var(--space-1));
  }
}
/**
 * Player Notes Panel
 * ==================
 * Free-form markdown notes panel with edit/preview toggle.
 * Follows BEM naming convention with terminal theme variables.
 */

/* Container */
.player-notes {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--terminal-bg-secondary, var(--color-surface, #1a1a2e));
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-md, 8px);
  overflow: hidden;
}

/* ========================================
 * Toolbar
 * ======================================== */

.player-notes__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  flex-shrink: 0;
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.15));
}

.player-notes__toolbar-left,
.player-notes__toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.player-notes__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border: 1px solid transparent;
  border-radius: var(--terminal-radius-sm, 4px);
  background: transparent;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.player-notes__btn:hover {
  background: var(--terminal-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
}

.player-notes__btn--active {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
}

.player-notes__btn--icon {
  padding: var(--space-1, 0.25rem);
}

.player-notes__btn--icon svg {
  width: 14px;
  height: 14px;
}

.player-notes__btn--danger:hover {
  color: var(--terminal-red, var(--color-danger, #e74c3c));
}

.player-notes__btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ========================================
 * Content Area
 * ======================================== */

.player-notes__content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Editor */
.player-notes__editor {
  flex: 1;
  display: flex;
  min-height: 0;
}

.player-notes__textarea {
  flex: 1;
  width: 100%;
  padding: var(--space-3, 0.75rem);
  border: none;
  background: transparent;
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.player-notes__textarea::placeholder {
  color: var(--terminal-text-muted, var(--color-text-muted, #555));
  font-style: italic;
}

.player-notes__textarea:focus {
  outline: none;
}

/* Preview */
.player-notes__preview {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 0.75rem);
}

.player-notes__preview-content {
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Markdown rendered content styles */
.player-notes__preview-content h1,
.player-notes__preview-content h2,
.player-notes__preview-content h3,
.player-notes__preview-content h4,
.player-notes__preview-content h5,
.player-notes__preview-content h6 {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
  margin: 0.8em 0 0.4em;
  line-height: 1.3;
}

.player-notes__preview-content h1 { font-size: 1.3rem; }
.player-notes__preview-content h2 { font-size: 1.15rem; }
.player-notes__preview-content h3 { font-size: 1.05rem; }

.player-notes__preview-content p {
  margin: 0 0 0.6em;
}

.player-notes__preview-content ul,
.player-notes__preview-content ol {
  margin: 0 0 0.6em;
  padding-left: 1.5em;
}

.player-notes__preview-content li {
  margin-bottom: 0.2em;
}

.player-notes__preview-content code {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.3));
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: var(--terminal-green, var(--color-success, #2ecc71));
}

.player-notes__preview-content pre {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.3));
  padding: var(--space-2, 0.5rem);
  border-radius: var(--terminal-radius-sm, 4px);
  overflow-x: auto;
  margin: 0 0 0.6em;
}

.player-notes__preview-content pre code {
  background: none;
  padding: 0;
}

.player-notes__preview-content blockquote {
  border-left: 3px solid var(--terminal-cyan, var(--color-accent-primary, #3498db));
  margin: 0 0 0.6em;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  font-style: italic;
}

.player-notes__preview-content hr {
  border: none;
  border-top: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  margin: 0.8em 0;
}

.player-notes__preview-content strong {
  color: var(--terminal-yellow, var(--color-warning, #f39c12));
}

.player-notes__preview-content a {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
  text-decoration: underline;
}

.player-notes__preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.6em;
}

.player-notes__preview-content th,
.player-notes__preview-content td {
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  text-align: left;
  font-size: 0.85rem;
}

.player-notes__preview-content th {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.2));
  font-weight: 600;
}

/* ========================================
 * Empty State
 * ======================================== */

.player-notes__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6, 1.5rem);
  text-align: center;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.player-notes__empty-icon {
  margin-bottom: var(--space-3, 0.75rem);
  opacity: 0.4;
}

.player-notes__empty-icon svg {
  width: 32px;
  height: 32px;
}

.player-notes__empty-text {
  font-size: 0.9rem;
  margin: 0 0 var(--space-1, 0.25rem);
  font-weight: 500;
}

.player-notes__empty-hint {
  font-size: 0.8rem;
  margin: 0;
  max-width: 240px;
  opacity: 0.7;
}

/* ========================================
 * Status Bar
 * ======================================== */

.player-notes__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-top: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  flex-shrink: 0;
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.1));
}

.player-notes__char-count {
  opacity: 0.8;
}

.player-notes__save-indicator {
  opacity: 0.6;
  font-style: italic;
}

.player-notes__save-indicator--saving {
  color: var(--terminal-yellow, var(--color-warning, #f39c12));
}

.player-notes__save-indicator--saved {
  color: var(--terminal-green, var(--color-success, #2ecc71));
}

.player-notes__error {
  color: var(--terminal-red, var(--color-danger, #e74c3c));
  font-style: italic;
  padding: var(--space-3, 0.75rem);
}

/* ========================================
 * Sidebar Mode
 * ======================================== */

.player-notes--sidebar-mode {
  border: none;
  border-radius: 0;
}

.player-notes--sidebar-mode .player-notes__toolbar {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}

.player-notes--sidebar-mode .player-notes__textarea {
  font-size: 0.8rem;
  padding: var(--space-2, 0.5rem);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .player-notes__toolbar {
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  }

  .player-notes__textarea {
    font-size: 0.8rem;
    padding: var(--space-2, 0.5rem);
  }
}
/**
 * Stream Panel Styles
 * ===================
 * Density-responsive streaming content with container queries.
 * Three density levels: minimal, compact, full.
 */

/* ========================================
   CONTAINER SETUP
   ======================================== */

.floating-stream-panel__content,
.tab-group__content[data-stream-content] {
  container-type: size;
  container-name: stream-content;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ========================================
   STREAM MESSAGE BASE
   ======================================== */

.stream-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  transition: background-color 150ms ease;
}

.stream-message:hover {
  background-color: var(--color-surface-hover);
}

.stream-message:last-child {
  border-bottom: none;
}

/* Message type icons */
.stream-message__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 2px;
}

.stream-message__icon--info {
  background-color: var(--color-info);
}

.stream-message__icon--success {
  background-color: var(--color-success);
}

.stream-message__icon--warning {
  background-color: var(--color-warning);
}

.stream-message__icon--error {
  background-color: var(--color-error);
}

.stream-message__icon--debug {
  background-color: var(--color-text-muted);
}

.stream-message__icon--tool {
  background-color: var(--color-accent);
}

.stream-message__icon--ai {
  background-color: var(--color-primary);
}

.stream-message__icon--combat {
  background-color: var(--color-error);
}

.stream-message__icon--roll {
  background-color: var(--color-warning);
}

/* ========================================
   DENSITY: MINIMAL (icon + count only)
   ======================================== */

.stream-message--minimal {
  padding: var(--space-2xs) var(--space-xs);
  justify-content: center;
}

.stream-message--minimal .stream-message__icon {
  width: 10px;
  height: 10px;
}

/* Container query for minimal density */
@container stream-content (max-width: 200px) {
  .stream-message {
    padding: var(--space-2xs) var(--space-xs);
    justify-content: center;
  }

  .stream-message__text,
  .stream-message__time,
  .stream-message__header,
  .stream-message__body,
  .stream-message__details {
    display: none;
  }

  .stream-message__icon {
    width: 10px;
    height: 10px;
  }
}

/* ========================================
   DENSITY: COMPACT (truncated single line)
   ======================================== */

.stream-message--compact {
  flex-wrap: nowrap;
}

.stream-message--compact .stream-message__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.stream-message--compact .stream-message__time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Expand on hover for compact */
.stream-message--compact:hover .stream-message__text {
  white-space: normal;
  word-break: break-word;
}

/* Container query for compact density */
@container stream-content (min-width: 201px) and (max-width: 350px) {
  .stream-message {
    flex-wrap: nowrap;
  }

  .stream-message__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stream-message__header,
  .stream-message__body,
  .stream-message__details {
    display: none;
  }

  .stream-message:hover .stream-message__text {
    white-space: normal;
    word-break: break-word;
  }
}

/* ========================================
   DENSITY: FULL (complete with details)
   ======================================== */

.stream-message--full {
  flex-direction: column;
  gap: var(--space-2xs);
}

.stream-message__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.stream-message__title {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.stream-message__time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.stream-message__body {
  color: var(--color-text-secondary);
  padding-left: calc(14px + var(--space-xs));
}

.stream-message__details {
  padding-left: calc(14px + var(--space-xs));
  margin-top: var(--space-2xs);
}

.stream-message__details code {
  display: block;
  padding: var(--space-xs);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 100px;
  overflow-y: auto;
}

/* Container query for full density */
@container stream-content (min-width: 351px) {
  .stream-message {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .stream-message__header {
    display: flex;
  }

  .stream-message__body,
  .stream-message__details {
    display: block;
  }

  .stream-message__text {
    display: none;
  }
}

/* ========================================
   CHANNEL SELECTOR DROPDOWN
   ======================================== */

.channel-selector {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 200px;
  max-width: 280px;
  max-height: 300px;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.channel-selector--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.channel-selector__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.channel-selector__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.channel-selector__close:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.channel-selector__list {
  padding: var(--space-xs);
  max-height: 250px;
  overflow-y: auto;
}

.channel-selector__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.channel-selector__option:hover {
  background-color: var(--color-surface-hover);
}

.channel-selector__option input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
}

.channel-selector__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.channel-selector__label {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   STREAM BADGE (buffered message count)
   ======================================== */

.stream-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-2xs);
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.stream-badge--visible {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   DENSITY INDICATOR
   ======================================== */

.density-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.density-indicator:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

/* ========================================
   FLOATING STREAM PANEL SPECIFICS
   ======================================== */

.floating-stream-panel {
  display: flex;
  flex-direction: column;
}

.floating-stream-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  cursor: move;
  user-select: none;
}

.floating-stream-panel__title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-stream-panel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  position: relative;
}

.floating-stream-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.floating-stream-panel__btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.floating-stream-panel__btn--close:hover {
  background-color: var(--color-error-muted);
  color: var(--color-error);
}

.floating-stream-panel__content {
  flex: 1;
  overflow-y: auto;
  background-color: var(--color-surface);
}

/* ========================================
   ANIMATIONS
   ======================================== */

.floating-stream-panel--entering {
  animation: stream-panel-enter 200ms ease-out;
}

.floating-stream-panel--exiting {
  animation: stream-panel-exit 150ms ease-in forwards;
}

.floating-stream-panel--minimizing {
  animation: stream-panel-minimize 200ms ease-in forwards;
}

@keyframes stream-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes stream-panel-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes stream-panel-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
}

/* ========================================
   MINIMIZED STATE
   ======================================== */

.floating-stream-panel--minimized {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

.floating-stream-panel--minimized .floating-stream-panel__content,
.floating-stream-panel--minimized .floating-stream-panel__resize {
  display: none;
}

.floating-stream-panel--minimized .floating-stream-panel__header {
  border-bottom: none;
  border-radius: var(--radius-md);
}

/* ========================================
   GHOST MODE (inherits from floating panel)
   ======================================== */

.floating-stream-panel--ghost {
  backdrop-filter: blur(var(--ghost-blur-subtle));
  transition: opacity var(--ghost-transition), backdrop-filter var(--ghost-transition);
}

.floating-stream-panel--ghost-ethereal {
  opacity: var(--ghost-opacity-ethereal);
}

.floating-stream-panel--ghost-wisp {
  opacity: var(--ghost-opacity-wisp);
}

.floating-stream-panel--ghost-shade {
  opacity: var(--ghost-opacity-shade);
}

.floating-stream-panel--ghost-phantom {
  opacity: var(--ghost-opacity-phantom);
}

.floating-stream-panel--ghost:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
  backdrop-filter: blur(var(--ghost-blur-strong));
}

/* ========================================
   RESIZE HANDLES
   ======================================== */

.floating-stream-panel__resize {
  position: absolute;
  z-index: var(--z-sticky);
}

.floating-stream-panel__resize--n {
  top: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: n-resize;
}

.floating-stream-panel__resize--ne {
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: ne-resize;
}

.floating-stream-panel__resize--e {
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 4px;
  cursor: e-resize;
}

.floating-stream-panel__resize--se {
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: se-resize;
}

.floating-stream-panel__resize--s {
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: s-resize;
}

.floating-stream-panel__resize--sw {
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: sw-resize;
}

.floating-stream-panel__resize--w {
  top: 8px;
  left: 0;
  bottom: 8px;
  width: 4px;
  cursor: w-resize;
}

.floating-stream-panel__resize--nw {
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: nw-resize;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .stream-message,
  .channel-selector,
  .stream-badge,
  .floating-stream-panel--entering,
  .floating-stream-panel--exiting,
  .floating-stream-panel--minimizing {
    animation: none;
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .floating-stream-panel--ghost,
  .floating-stream-panel--ghost-ethereal,
  .floating-stream-panel--ghost-wisp,
  .floating-stream-panel--ghost-shade,
  .floating-stream-panel--ghost-phantom {
    opacity: 1;
    backdrop-filter: none;
  }

  .stream-message__icon {
    border: 2px solid currentColor;
  }
}
/**
 * Tab Group System
 * ================
 * Styles for tabbed floating panel groups.
 * Supports multiple tab orientations and ghost mode.
 */

/* ========================================
 * BASE TAB GROUP
 * ======================================== */

.tab-group {
  position: fixed;
  z-index: var(--z-floating);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  min-width: 300px;
  min-height: 250px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

/* Focused state */
.tab-group:focus-within,
.tab-group--focused {
  z-index: var(--z-floating-above);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
              0 6px 16px rgba(0, 0, 0, 0.3),
              0 0 0 2px var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: HORIZONTAL TOP (default)
 * ======================================== */

.tab-group,
.tab-group--horizontal-top {
  flex-direction: column;
}

.tab-group--horizontal-top .tab-group__header {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-default);
}

.tab-group--horizontal-top .tab-group__tablist {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-default);
}

.tab-group--horizontal-top .tab-group__tab {
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
}

.tab-group--horizontal-top .tab-group__tab--active {
  border-bottom-color: var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: HORIZONTAL BOTTOM
 * ======================================== */

.tab-group--horizontal-bottom {
  flex-direction: column-reverse;
}

.tab-group--horizontal-bottom .tab-group__header {
  flex-direction: row;
  border-top: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--horizontal-bottom .tab-group__tablist {
  flex-direction: row;
  border-top: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--horizontal-bottom .tab-group__tab {
  border-top: 2px solid transparent;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
}

.tab-group--horizontal-bottom .tab-group__tab--active {
  border-top-color: var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: VERTICAL LEFT
 * ======================================== */

.tab-group--vertical-left {
  flex-direction: row;
}

.tab-group--vertical-left .tab-group__header {
  flex-direction: column;
  border-right: 1px solid var(--color-border-default);
  border-bottom: none;
  width: auto;
}

.tab-group--vertical-left .tab-group__tablist {
  flex-direction: column;
  border-right: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--vertical-left .tab-group__tab {
  border-right: 2px solid transparent;
  border-bottom: none;
  border-radius: 4px 0 0 4px;
  flex-direction: column;
  padding: 8px 6px;
}

.tab-group--vertical-left .tab-group__tab--active {
  border-right-color: var(--color-accent-primary);
}

.tab-group--vertical-left .tab-group__tab-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  max-width: none;
  max-height: 100px;
}

.tab-group--vertical-left .tab-group__content-wrapper {
  flex: 1;
  min-width: 0;
}

/* ========================================
 * ORIENTATION: VERTICAL RIGHT
 * ======================================== */

.tab-group--vertical-right {
  flex-direction: row-reverse;
}

.tab-group--vertical-right .tab-group__header {
  flex-direction: column;
  border-left: 1px solid var(--color-border-default);
  border-bottom: none;
  width: auto;
}

.tab-group--vertical-right .tab-group__tablist {
  flex-direction: column;
  border-left: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--vertical-right .tab-group__tab {
  border-left: 2px solid transparent;
  border-bottom: none;
  border-radius: 0 4px 4px 0;
  flex-direction: column;
  padding: 8px 6px;
}

.tab-group--vertical-right .tab-group__tab--active {
  border-left-color: var(--color-accent-primary);
}

.tab-group--vertical-right .tab-group__tab-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-width: none;
  max-height: 100px;
}

.tab-group--vertical-right .tab-group__content-wrapper {
  flex: 1;
  min-width: 0;
}

/* ========================================
 * HEADER
 * ======================================== */

.tab-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: var(--color-bg-secondary);
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
  gap: 8px;
}

.tab-group__header:active {
  cursor: grabbing;
}

.tab-group__header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ========================================
 * TAB LIST
 * ======================================== */

.tab-group__tablist {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  background: var(--color-bg-secondary);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.tab-group__tablist::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.tab-group__tablist::-webkit-scrollbar-thumb {
  background: var(--color-bg-tertiary);
  border-radius: 2px;
}

/* ========================================
 * TAB BUTTON
 * ======================================== */

.tab-group__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.tab-group__tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.tab-group__tab--active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.tab-group__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tab-group__tab-icon svg {
  width: 14px;
  height: 14px;
}

.tab-group__tab-title {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-group__tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.tab-group__tab:hover .tab-group__tab-close {
  opacity: 1;
}

.tab-group__tab-close:hover {
  background: var(--color-accent-error);
  color: white;
}

.tab-group__tab-close svg {
  width: 10px;
  height: 10px;
}

/* ========================================
 * CONTENT AREA
 * ======================================== */

.tab-group__content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-group__content {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
}

/* Panel containers */
.tab-group__panel {
  display: none;
  height: 100%;
}

.tab-group__panel--active {
  display: block;
}

/* ========================================
 * HEADER BUTTONS
 * ======================================== */

.tab-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-group__btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.tab-group__btn svg {
  width: 14px;
  height: 14px;
}

.tab-group__btn--close:hover {
  background: var(--color-accent-error);
  color: white;
}

.tab-group__btn--orientation {
  font-size: 10px;
}

.tab-group__btn--ghost.active {
  color: var(--color-accent-cyan);
}

/* ========================================
 * RESIZE HANDLES
 * ======================================== */

.tab-group__resize {
  position: absolute;
  z-index: var(--z-sticky);
  background: transparent;
}

.tab-group__resize--n,
.tab-group__resize--s {
  height: 8px;
  left: 12px;
  right: 12px;
}

.tab-group__resize--n {
  top: -4px;
  cursor: ns-resize;
}

.tab-group__resize--s {
  bottom: -4px;
  cursor: ns-resize;
}

.tab-group__resize--e,
.tab-group__resize--w {
  width: 8px;
  top: 12px;
  bottom: 12px;
}

.tab-group__resize--e {
  right: -4px;
  cursor: ew-resize;
}

.tab-group__resize--w {
  left: -4px;
  cursor: ew-resize;
}

.tab-group__resize--ne,
.tab-group__resize--nw,
.tab-group__resize--se,
.tab-group__resize--sw {
  width: 16px;
  height: 16px;
}

.tab-group__resize--ne {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.tab-group__resize--nw {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

.tab-group__resize--se {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.tab-group__resize--sw {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

/* Corner grip indicator */
.tab-group__resize--se::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    var(--color-text-muted) 50%,
    var(--color-text-muted) 60%,
    transparent 60%,
    transparent 70%,
    var(--color-text-muted) 70%,
    var(--color-text-muted) 80%,
    transparent 80%
  );
  opacity: 0.5;
  pointer-events: none;
}

.tab-group:hover .tab-group__resize--se::after {
  opacity: 0.8;
}

/* ========================================
 * GHOST MODE
 * ======================================== */

.tab-group--ghost {
  backdrop-filter: blur(var(--ghost-blur-subtle));
  -webkit-backdrop-filter: blur(var(--ghost-blur-subtle));
  transition:
    opacity var(--ghost-transition),
    backdrop-filter var(--ghost-transition),
    box-shadow var(--ghost-transition);
}

.tab-group--ghost.tab-group--ghost-ethereal {
  opacity: var(--ghost-opacity-ethereal);
  background: rgba(26, 26, 26, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.tab-group--ghost.tab-group--ghost-ethereal:hover {
  opacity: calc(var(--ghost-opacity-ethereal) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-wisp {
  opacity: var(--ghost-opacity-wisp);
  background: rgba(26, 26, 26, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.tab-group--ghost.tab-group--ghost-wisp:hover {
  opacity: calc(var(--ghost-opacity-wisp) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-shade {
  opacity: var(--ghost-opacity-shade);
  background: rgba(26, 26, 26, 0.6);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.tab-group--ghost.tab-group--ghost-shade:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-phantom {
  opacity: var(--ghost-opacity-phantom);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.tab-group--ghost.tab-group--ghost-phantom:hover {
  opacity: calc(var(--ghost-opacity-phantom) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost .tab-group__header,
.tab-group--ghost .tab-group__tablist {
  background: rgba(45, 45, 45, 0.5);
}

.tab-group--ghost .tab-group__header-controls {
  opacity: 0.5;
  transition: opacity var(--ghost-transition);
}

.tab-group--ghost:hover .tab-group__header-controls {
  opacity: 1;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .tab-group--ghost,
  .tab-group--ghost.tab-group--ghost-ethereal,
  .tab-group--ghost.tab-group--ghost-wisp,
  .tab-group--ghost.tab-group--ghost-shade,
  .tab-group--ghost.tab-group--ghost-phantom {
    opacity: 1;
    background: var(--color-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ========================================
 * STATE CLASSES
 * ======================================== */

.tab-group--dragging {
  opacity: 0.9;
  transition: none;
}

.tab-group--resizing {
  transition: none;
}

.tab-group--minimized {
  display: none;
}

/* Animations */
@keyframes tab-group-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tab-group--entering {
  animation: tab-group-enter 0.2s ease-out;
}

@keyframes tab-group-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.tab-group--exiting {
  animation: tab-group-exit 0.15s ease-in;
  pointer-events: none;
}

@keyframes tab-group-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
}

.tab-group--minimizing {
  animation: tab-group-minimize 0.2s ease-in forwards;
}

/* ========================================
 * MERGE PREVIEW OVERLAY
 * ======================================== */

.tab-merge-preview {
  position: fixed;
  z-index: var(--z-ceiling);
  display: none;
  background: rgba(90, 159, 216, 0.2);
  border: 2px dashed var(--color-accent-primary);
  border-radius: 6px;
  pointer-events: none;
  animation: merge-preview-pulse 1s ease-in-out infinite;
}

.tab-merge-preview--visible {
  display: block;
}

@keyframes merge-preview-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}

/* Merge zone indicator on headers */
.tab-group--merge-target .tab-group__header,
.floating-panel--merge-target .floating-panel__header {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    rgba(90, 159, 216, 0.3) 50%,
    var(--color-bg-secondary) 100%
  );
  animation: merge-target-glow 1.5s ease-in-out infinite;
}

@keyframes merge-target-glow {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(90, 159, 216, 0.2);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(90, 159, 216, 0.4);
  }
}

/* ========================================
 * MOBILE: DISABLE TAB GROUPS
 * ======================================== */

@media (max-width: 768px) {
  .tab-group,
  .tab-merge-preview {
    display: none;
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .tab-group--ghost {
    transition: none;
  }

  .tab-group--entering,
  .tab-group--exiting,
  .tab-group--minimizing {
    animation: none;
  }

  .tab-merge-preview,
  .tab-group--merge-target .tab-group__header,
  .floating-panel--merge-target .floating-panel__header {
    animation: none;
  }
}
/**
 * Turn Rhythm System
 * ==================
 * Simultaneous action collection and resolution UI.
 * Includes phase indicator, mode selector, action queue, ready states,
 * telegraphs, DM bump panel, and autopilot components.
 */

/* ========================================
 * CSS Custom Properties (Scoped)
 * ======================================== */

.turn-rhythm-panel {
  --turn-rhythm-planning-color: var(--color-green-500);
  --turn-rhythm-resolving-color: var(--color-orange-500);
  --turn-rhythm-paused-color: var(--color-gray-500);
  --turn-rhythm-timer-warning: var(--color-yellow-500);
  --turn-rhythm-timer-critical: var(--color-red-500);
}

/* ========================================
 * Main Panel Layout
 * ======================================== */

.turn-rhythm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.turn-rhythm-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.turn-rhythm-panel__phase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.turn-rhythm-panel__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.turn-rhythm-panel__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.turn-rhythm-panel__resolution {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.turn-rhythm-panel__resolution.hidden {
  display: none;
}

/* ========================================
 * Phase Indicator
 * ======================================== */

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.phase-indicator.phase-planning {
  background: color-mix(in srgb, var(--turn-rhythm-planning-color) 20%, transparent);
  color: var(--turn-rhythm-planning-color);
}

.phase-indicator.phase-resolution {
  background: color-mix(in srgb, var(--turn-rhythm-resolving-color) 20%, transparent);
  color: var(--turn-rhythm-resolving-color);
}

.round-indicator {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* ========================================
 * Timer Display
 * ======================================== */

.timer-display {
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.timer-display.timer-warning {
  color: var(--turn-rhythm-timer-warning);
}

.timer-display.timer-critical {
  color: var(--turn-rhythm-timer-critical);
  animation: timer-pulse 1s ease-in-out infinite;
}

.timer-display.timer-expired {
  color: var(--turn-rhythm-timer-critical);
  font-weight: var(--font-weight-bold);
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========================================
 * Mode Selector (Compact Single-Click Design)
 * ======================================== */

.mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

/* Compact variant - single clickable control (inline with input) */
.mode-selector--compact {
  display: inline-flex;
  position: relative;
  padding: 0;
  background: transparent;
  margin: 0;
  flex-shrink: 0;
}

/* Inline mode selector button with icon + label */
.mode-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mode-selector__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.mode-selector__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

/* Mode change animation */
.mode-selector__btn.mode-changed {
  animation: mode-pulse 0.3s ease-out;
}

@keyframes mode-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); background: var(--color-accent-primary); }
  100% { transform: scale(1); }
}

/* Educational tooltip */
.mode-selector__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: var(--z-panel);
  animation: tooltip-bounce 0.4s ease-out;
}

.mode-selector__tooltip[data-dismissed="true"] {
  display: none;
}

.mode-selector__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: var(--color-accent-primary);
}

.mode-selector__tooltip-text {
  font-size: 11px;
  color: var(--color-text-primary);
}

.mode-selector__tooltip-text kbd {
  display: inline-block;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.mode-selector__tooltip-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.mode-selector__tooltip-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

@keyframes tooltip-bounce {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Legacy control style (kept for non-compact usage) */
.mode-selector__control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.mode-selector__control:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.mode-selector__control:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.mode-selector__control.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mode-specific colors for the control */
/* Mode-specific colors */
.mode-selector__btn.mode-color-gray,
.mode-selector__control.mode-color-gray {
  border-color: var(--color-text-tertiary);
}
.mode-selector__btn.mode-color-gray:hover,
.mode-selector__control.mode-color-gray:hover {
  border-color: var(--color-text-secondary);
  background: rgba(128, 128, 128, 0.15);
}

.mode-selector__btn.mode-color-purple,
.mode-selector__control.mode-color-purple {
  border-color: var(--color-accent-purple, #a855f7);
}
.mode-selector__btn.mode-color-purple:hover,
.mode-selector__control.mode-color-purple:hover {
  border-color: var(--color-accent-purple, #a855f7);
  background: rgba(168, 85, 247, 0.15);
}

.mode-selector__btn.mode-color-blue,
.mode-selector__control.mode-color-blue {
  border-color: var(--color-accent-info, #3b82f6);
}
.mode-selector__btn.mode-color-blue:hover,
.mode-selector__control.mode-color-blue:hover {
  border-color: var(--color-accent-info, #3b82f6);
  background: rgba(59, 130, 246, 0.15);
}

.mode-selector__btn.mode-color-yellow,
.mode-selector__control.mode-color-yellow {
  border-color: var(--color-accent-warning, #eab308);
}
.mode-selector__btn.mode-color-yellow:hover,
.mode-selector__control.mode-color-yellow:hover {
  border-color: var(--color-accent-warning, #eab308);
  background: rgba(234, 179, 8, 0.15);
}

.mode-selector__btn.mode-color-green,
.mode-selector__control.mode-color-green {
  border-color: var(--color-accent-success, #22c55e);
}
.mode-selector__btn.mode-color-green:hover,
.mode-selector__control.mode-color-green:hover {
  border-color: var(--color-accent-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
}

.mode-selector__btn.mode-color-orange,
.mode-selector__control.mode-color-orange {
  border-color: var(--color-accent-warning, #f97316);
}
.mode-selector__btn.mode-color-orange:hover,
.mode-selector__control.mode-color-orange:hover {
  border-color: var(--color-accent-warning, #f97316);
  background: rgba(249, 115, 22, 0.15);
}

/* Icon in the compact control */
.mode-selector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.mode-selector__icon svg {
  width: 14px;
  height: 14px;
}

/* Label in the compact control - hidden by default, shown on hover */
.mode-selector__label {
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
  font-size: 11px;
}

/* Keyboard hint - hidden in compact mode */
.mode-selector--compact .mode-selector__hint {
  display: none;
}

.mode-selector__hint {
  display: flex;
  align-items: center;
  margin-left: var(--space-1);
  color: var(--color-text-muted);
}

.mode-selector__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-size: 10px;
  font-weight: 500;
}

/* Legacy button styles (kept for compatibility with non-compact version) */
.mode-selector__btn {
  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);
  background: transparent;
  border: 1px solid var(--color-border-default);
  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;
}

.mode-selector__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.mode-selector__btn.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.mode-selector__btn:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.mode-selector__shortcut {
  font-size: var(--font-size-2xs);
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
}

/* ========================================
 * Action Queue
 * ======================================== */

.action-queue {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.action-queue__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.action-queue__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.action-queue__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-pill);
}

.action-queue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.action-queue__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Action Items */
.queued-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.15s ease;
}

.queued-action:last-child {
  border-bottom: none;
}

.queued-action:hover {
  background: var(--color-bg-hover);
}

.queued-action__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.queued-action__content {
  flex: 1;
  min-width: 0;
}

.queued-action__verb {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.queued-action__target {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.queued-action__type {
  font-size: var(--font-size-2xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.queued-action__remove {
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.queued-action:hover .queued-action__remove {
  opacity: 1;
}

.queued-action__remove:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger-fg);
}

/* Conditional Actions */
.queued-action.conditional {
  border-left: 3px solid var(--color-warning-emphasis);
}

.queued-action__trigger {
  font-size: var(--font-size-xs);
  color: var(--color-warning-fg);
  background: var(--color-warning-subtle);
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

/* ========================================
 * Ready States
 * ======================================== */

.ready-states {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.ready-states__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.ready-states__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ready-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
}

.ready-state.ready {
  background: var(--color-success-subtle);
  border-color: var(--color-success-emphasis);
}

.ready-state.not-ready {
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}

.ready-state__indicator {
  font-size: var(--font-size-sm);
}

.ready-state.ready .ready-state__indicator {
  color: var(--color-success-fg);
}

.ready-state.not-ready .ready-state__indicator {
  color: var(--color-text-tertiary);
}

.ready-state__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.waiting-message {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  font-style: italic;
}

/* ========================================
 * Telegraphs
 * ======================================== */

.telegraphs {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-danger-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.telegraphs.hidden {
  display: none;
}

.telegraphs__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.telegraphs__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
  margin: 0;
}

.telegraphs__hint {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.telegraphs__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.telegraphs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.telegraphs__empty {
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Telegraph Items */
.telegraph-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--threat-color, var(--color-border-default));
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.telegraph-item:hover {
  background: var(--color-bg-hover);
}

/* Threat level colors */
.telegraph-item.threat-immediate { --threat-color: var(--color-danger-emphasis); }
.telegraph-item.threat-high { --threat-color: var(--color-severe-emphasis); }
.telegraph-item.threat-moderate { --threat-color: var(--color-warning-emphasis); }
.telegraph-item.threat-low { --threat-color: var(--color-text-tertiary); }

.telegraph-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.telegraph-item__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
}

.telegraph-item__threat {
  font-size: var(--font-size-sm);
}

.telegraph-item__body {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.telegraph-stance {
  font-size: var(--font-size-base);
}

.telegraph-hint {
  color: var(--color-text-secondary);
}

/* Clarity-based hint styling */
.telegraph-item.clarity-clear .telegraph-hint { color: var(--color-text-primary); }
.telegraph-item.clarity-good .telegraph-hint { color: var(--color-text-secondary); }
.telegraph-item.clarity-partial .telegraph-hint { color: var(--color-text-tertiary); font-style: italic; }
.telegraph-item.clarity-vague .telegraph-hint { color: var(--color-text-disabled); font-style: italic; }
.telegraph-item.clarity-none .telegraph-hint { color: var(--color-text-disabled); font-style: italic; }

.telegraph-hint--none {
  color: var(--color-text-disabled);
  font-style: italic;
}

.telegraph-target {
  font-size: var(--font-size-xs);
  background: var(--color-danger-subtle);
  color: var(--color-danger-fg);
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
}

.telegraph-item__meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
}

.telegraph-insight {
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
}

.telegraph-insight.success {
  background: var(--color-success-subtle);
  color: var(--color-success-fg);
}

.telegraph-insight.failure {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* ========================================
 * DM Bump Panel
 * ======================================== */

.dm-bump {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.dm-bump__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dm-bump__icon {
  font-size: var(--font-size-lg);
}

.dm-bump__title {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-fg);
}

.dm-bump__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-warning-fg);
}

.dm-bump__body {
  margin-bottom: var(--space-3);
}

.dm-bump__message {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.dm-bump__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dm-bump__remember {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.dm-bump__remember .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* ========================================
 * Autopilot Settings
 * ======================================== */

.autopilot-display.initially-hidden,
.autopilot-settings.initially-hidden { display: none; }

.autopilot-settings {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-width: 400px;
}

.autopilot-settings__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.autopilot-settings__toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.autopilot-settings__toggle:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.autopilot-settings__toggle.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.autopilot-settings__instructions {
  width: 100%;
  min-height: 80px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  resize: vertical;
}

.autopilot-settings__instructions:focus {
  outline: none;
  border-color: var(--color-accent-emphasis);
}

.autopilot-settings__char-count {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.autopilot-settings__char-count.warning {
  color: var(--color-warning-fg);
}

/* ========================================
 * Autopilot Display
 * ======================================== */

.autopilot-display {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.autopilot-display__actions {
  list-style: none;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
}

.autopilot-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.autopilot-action::before {
  content: '•';
  color: var(--color-accent-fg);
}

.autopilot-display__reasoning {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

.autopilot-display__reasoning .reasoning-label {
  color: var(--color-accent-fg);
  font-weight: var(--font-weight-semibold);
}

.autopilot-display__reasoning .reasoning-text {
  color: var(--color-text-secondary);
  font-style: italic;
}

.autopilot-display.dismissing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
 * Control Buttons
 * ======================================== */

.btn--ready {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success-emphasis);
  color: var(--color-success-fg);
}

.btn--ready:hover {
  background: var(--color-success-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--ready:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--bump {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning-emphasis);
  color: var(--color-warning-fg);
}

.btn--bump:hover {
  background: var(--color-warning-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--autopilot {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.btn--autopilot:hover {
  background: var(--color-accent-emphasis);
  color: var(--color-fg-on-emphasis);
}

/* ========================================
 * Resolution Pending State
 * ======================================== */

.turn-rhythm-panel.resolution-pending {
  border-color: var(--turn-rhythm-resolving-color);
}

.turn-rhythm-panel.resolution-pending .phase-indicator {
  animation: resolution-pending-pulse 2s ease-in-out infinite;
}

@keyframes resolution-pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.resolution-countdown {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.resolution-countdown.hidden {
  display: none;
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

@media (max-width: 640px) {
  .turn-rhythm-panel {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .mode-selector {
    gap: var(--space-half);
  }

  .mode-selector__btn {
    padding: var(--space-half) var(--space-1);
    font-size: var(--font-size-2xs);
  }

  .mode-selector__shortcut {
    display: none;
  }

  .action-queue__list {
    max-height: 150px;
  }

  .dm-bump__actions {
    flex-direction: column;
  }

  .autopilot-settings {
    max-width: 100%;
  }
}
/* ==========================================================================
   Workflow Panels
   ========================================================================== */

/* ----------------------------------------
   Workflow Status Panel
   ---------------------------------------- */

.workflow-status-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workflow-status-panel.compact {
  padding: var(--space-2);
  gap: var(--space-1);
}

/* Mode-specific theming */
.workflow-status-panel.workflow-mode-sketch {
  border-left: 3px solid var(--color-warning);
}

.workflow-status-panel.workflow-mode-guided {
  border-left: 3px solid var(--color-primary);
}

.workflow-status-panel.workflow-mode-quick {
  border-left: 3px solid var(--color-success);
}

.workflow-status-panel.workflow-mode-polish {
  border-left: 3px solid var(--color-info);
}

/* Header */
.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-type {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-type svg {
  color: var(--color-primary);
}

.workflow-name {
  font-size: var(--text-sm);
}

.workflow-mode-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: help;
}

.workflow-mode-badge svg {
  width: 12px;
  height: 12px;
}

/* Progress bar */
.workflow-progress-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.workflow-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.workflow-progress-bar .progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

.progress-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Phase indicators */
.workflow-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.phase-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background 0.2s ease, color 0.2s ease;
}

.phase-indicator.phase-complete {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.phase-indicator.phase-current {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

.phase-indicator.phase-pending {
  background: var(--surface-secondary);
  color: var(--text-muted);
}

.phase-indicator.skipped {
  text-decoration: line-through;
  opacity: 0.6;
}

.phase-check,
.phase-current,
.phase-pending {
  font-size: 10px;
}

.phase-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workflow controls */
.workflow-controls {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.workflow-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.workflow-btn:hover:not(:disabled) {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}

.workflow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workflow-btn svg {
  width: 14px;
  height: 14px;
}

.btn-label {
  display: none;
}

@media (min-width: 640px) {
  .btn-label {
    display: inline;
  }
}

/* Timer */
.workflow-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.workflow-timer svg {
  width: 12px;
  height: 12px;
}

/* ----------------------------------------
   Workflow History Panel
   ---------------------------------------- */

.workflow-history-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.history-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.history-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Empty state */
.history-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--text-muted);
}

.history-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.history-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* History sections */
.history-section {
  margin-bottom: var(--space-2);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.section-label svg {
  width: 12px;
  height: 12px;
}

/* History list */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.history-entry:hover {
  background: var(--surface-tertiary);
}

.history-entry:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.redo-entry {
  opacity: 0.6;
  border-left: 2px solid var(--color-info);
}

.undo-entry {
  border-left: 2px solid var(--color-primary);
}

.entry-phase {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 60px;
}

.entry-input {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-time {
  color: var(--text-muted);
  font-size: 10px;
}

.entry-action {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.history-entry:hover .entry-action {
  opacity: 1;
}

.entry-action svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

/* Current marker */
.history-current-marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.marker-line {
  flex: 1;
  height: 1px;
  background: var(--color-primary);
}

.marker-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* History controls */
.history-controls {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}

.history-btn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.history-btn:hover:not(:disabled) {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.history-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----------------------------------------
   Mode Switcher (inline component)
   ---------------------------------------- */

.workflow-mode-switcher {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.mode-switch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-switch-btn:hover {
  color: var(--text-secondary);
}

.mode-switch-btn.active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.mode-switch-btn svg {
  width: 12px;
  height: 12px;
}
/*
 * Narrative Annotations
 * =====================
 * Text selection annotations on narrative entries.
 * Includes: popover, highlights, margin indicators.
 */

/* ========================================
 * Annotation Popover (floating above selection)
 * ======================================== */

.annotation-popover {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating);
  padding: var(--space-3);
  min-width: 240px;
  max-width: 360px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  animation: annotationPopoverIn 150ms ease-out;
}

@keyframes annotationPopoverIn {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
  }
}

.annotation-popover__selected-text {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annotation-popover__input {
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  margin-bottom: var(--space-2);
}

.annotation-popover__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(90, 159, 216, 0.2);
}

.annotation-popover__input::placeholder {
  color: var(--color-text-muted);
}

.annotation-popover__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.annotation-popover__btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.annotation-popover__btn--cancel {
  background: transparent;
  color: var(--color-text-muted);
}

.annotation-popover__btn--cancel:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.annotation-popover__btn--save {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.annotation-popover__btn--save:hover {
  filter: brightness(1.1);
}

/* ========================================
 * Annotation Highlight (on annotated text)
 * ======================================== */

.annotation-highlight {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  border-bottom: 1px dashed var(--color-accent-primary);
  border-radius: 2px;
  cursor: help;
  transition: background var(--transition-fast);
}

.annotation-highlight:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Margin Indicator (dot in entry left margin)
 * ======================================== */

.annotation-margin-indicator {
  position: absolute;
  left: -12px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.annotation-margin-indicator:hover {
  opacity: 1;
  transform: scale(1.5);
}

.annotation-margin-indicator--multiple {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Show count as pseudo-element for multiple annotations */
.annotation-margin-indicator--multiple::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  left: 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  line-height: 1;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .annotation-popover {
    animation: none;
  }

  .annotation-margin-indicator {
    transition: none;
  }

  .annotation-highlight {
    transition: none;
  }
}
/**
 * Moment Capture Component
 * ========================
 * Floating camera button for capturing memorable narrative moments.
 * Positioned top-right of the narrative area, semi-transparent until hover.
 */

.moment-capture {
  position: absolute;
  top: var(--spacing-3);
  right: var(--spacing-3);
  z-index: var(--z-floating);
  pointer-events: auto;
}

.moment-capture__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.moment-capture__button:hover {
  opacity: 1;
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.moment-capture__button:active {
  transform: scale(0.95);
}

.moment-capture__button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Capturing state - pulsing animation */
.moment-capture__button--capturing {
  opacity: 1;
  animation: moment-capture-pulse 0.8s ease-in-out infinite;
}

@keyframes moment-capture-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Success flash animation */
.moment-capture__button--success {
  animation: moment-capture-success 0.6s ease-out;
}

@keyframes moment-capture-success {
  0% {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    transform: scale(1);
  }
}

/* Icon styling */
.moment-capture__button .svg-icon {
  width: 18px;
  height: 18px;
}

/* Feedback toast */
.moment-capture__feedback {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  animation: moment-feedback-in 0.2s ease-out;
}

@keyframes moment-feedback-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.moment-capture__feedback--success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.moment-capture__feedback--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.moment-capture__feedback-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip on hover */
.moment-capture__button[title] {
  position: relative;
}

.moment-capture__button[title]::after {
  content: attr(title);
  position: absolute;
  top: calc(100% + var(--spacing-1));
  right: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
  pointer-events: none;
  z-index: var(--z-raised);
}

.moment-capture__button[title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Position context - ensure parent has position relative */
.narrative-main {
  position: relative;
}

/* ============================================================
 * Prompt Panel - Image prompt display with copy functionality
 * ============================================================ */

.moment-capture__prompt-panel {
  position: absolute;
  top: calc(100% + var(--spacing-2));
  right: 0;
  width: 320px;
  max-width: calc(100vw - var(--spacing-6));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: moment-panel-in 0.3s ease-out;
  z-index: calc(var(--z-floating) + 1);
}

@keyframes moment-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.moment-capture__prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-success);
}

.moment-capture__prompt-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.moment-capture__prompt-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Tabs for switching between prompt formats */
.moment-capture__prompt-tabs {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.moment-capture__prompt-tab {
  flex: 1;
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__prompt-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.moment-capture__prompt-tab--active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Prompt content area */
.moment-capture__prompt-contents {
  padding: var(--spacing-2);
}

.moment-capture__prompt-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.moment-capture__prompt-content.hidden {
  display: none;
}

.moment-capture__prompt-text {
  margin: 0;
  padding: var(--spacing-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.moment-capture__copy-btn {
  padding: var(--spacing-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__copy-btn:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}

.moment-capture__copy-btn--success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

/* Footer with help text */
.moment-capture__prompt-footer {
  padding: var(--spacing-2) var(--spacing-3);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.moment-capture__prompt-footer small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .moment-capture__prompt-panel {
    width: calc(100vw - var(--spacing-4));
    right: calc(-100% + 36px + var(--spacing-2));
  }

  .moment-capture__prompt-tabs {
    flex-wrap: wrap;
  }

  .moment-capture__prompt-tab {
    flex: 1 1 calc(50% - var(--spacing-1));
  }
}
/**
 * Imagine Entry
 * =============
 * Inline image entries in the narrative panel from /imagine command.
 * Three states: loading (shimmer), complete (image), error.
 */

.imagine-entry {
  margin: 12px 0;
  padding: 12px;
  background: var(--panel-bg, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-color, #333);
}

.imagine-entry__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.imagine-entry__icon {
  display: flex;
  align-items: center;
  color: var(--accent-color, #4f46e5);
}

.imagine-entry__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.imagine-entry__prompt {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 8px;
  font-style: italic;
}

/* Loading state — shimmer placeholder */
.imagine-entry--loading .imagine-entry__label {
  color: var(--text-secondary, #888);
}

.imagine-entry__shimmer {
  height: 200px;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: imagine-shimmer 1.5s ease-in-out infinite;
}

@keyframes imagine-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Complete state — rendered image */
.imagine-entry--complete {
  border-color: var(--accent-color, #4f46e5);
}

.imagine-entry__image-container {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.imagine-entry__image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.imagine-entry__image:hover {
  opacity: 0.9;
}

/* Error state */
.imagine-entry--error {
  border-color: var(--color-error, #cf6068);
}

.imagine-entry--error .imagine-entry__icon {
  color: var(--color-error, #cf6068);
}

.imagine-entry--error .imagine-entry__label {
  color: var(--color-error, #cf6068);
}

.imagine-entry__error {
  font-size: 13px;
  color: var(--text-secondary, #888);
  padding: 8px 0;
}

/* Responsive */
@media (max-width: 600px) {
  .imagine-entry__image {
    max-height: 250px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .imagine-entry__shimmer {
    animation: none;
    background: rgba(255, 255, 255, 0.05);
  }
}
/*
 * Creator Studio Sub-Panels
 * =========================
 * Styles for homebrew_status, balance_reference, encounter_builder, export_preview panels.
 * These panels appear in the Creator Studio layout modes (Mechanics, Campaign Prep, Publishing).
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Shared Panel Title
 * ========================================================================== */

.panel-homebrew-status .panel-title,
.panel-balance-reference .panel-title,
.panel-encounter-builder .panel-title,
.panel-export-preview .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.panel-homebrew-status .panel-icon,
.panel-balance-reference .panel-icon,
.panel-encounter-builder .panel-icon,
.panel-export-preview .panel-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

/* ==========================================================================
 * Homebrew Status Panel
 * ========================================================================== */

.panel-homebrew-status {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.homebrew-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.homebrew-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.homebrew-status-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

/* Empty state */
.homebrew-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.homebrew-empty-state .empty-icon {
  display: flex;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.homebrew-empty-state .empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.homebrew-empty-state .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-normal);
}

.homebrew-empty-state .empty-suggestions {
  text-align: left;
  width: 100%;
  max-width: 240px;
}

.homebrew-empty-state .suggestion-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-medium);
}

.homebrew-empty-state .suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homebrew-empty-state .suggestion-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* Type summary badges */
.homebrew-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.type-badge .badge-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

.type-badge .badge-label {
  color: var(--color-text-secondary);
}

/* Recent items */
.homebrew-recent .section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
}

.homebrew-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homebrew-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.homebrew-item:hover {
  background: var(--color-bg-hover);
}

.homebrew-item .item-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.homebrew-item .item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.homebrew-item .item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homebrew-item .item-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.homebrew-item .item-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
 * Balance Reference Panel
 * ========================================================================== */

.panel-balance-reference {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.balance-ref-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.balance-ref-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ref-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ref-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Reference tables */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.ref-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.ref-table td {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ref-table tr:last-child td {
  border-bottom: none;
}

/* Rarity colors */
.rarity-common { color: var(--color-text-secondary); }
.rarity-uncommon { color: var(--color-accent-success, #98c379); }
.rarity-rare { color: var(--color-accent-primary, #61afef); }
.rarity-very-rare { color: var(--color-accent-purple, #c678dd); }
.rarity-legendary { color: var(--color-accent-warning, #e5c07b); }

/* Reference list */
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ref-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  line-height: var(--line-height-normal);
}

.ref-list li strong {
  color: var(--color-text-secondary);
}

/* ==========================================================================
 * Encounter Builder Panel
 * ========================================================================== */

.panel-encounter-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.encounter-builder-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.encounter-builder-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.eb-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.eb-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Party info */
.eb-party-info {
  display: flex;
  gap: var(--space-4);
}

.party-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
}

.party-stat .stat-num {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  line-height: 1;
}

.party-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.eb-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* XP Threshold grid */
.eb-threshold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.threshold-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.threshold-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.threshold-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Threshold difficulty colors */
.threshold-easy .threshold-label { color: var(--color-accent-success, #98c379); }
.threshold-medium .threshold-label { color: var(--color-accent-warning, #e5c07b); }
.threshold-hard .threshold-label { color: var(--color-accent-error, #e06c75); }
.threshold-deadly .threshold-label { color: var(--color-accent-purple, #c678dd); }

/* CR table */
.eb-cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.eb-cr-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.eb-cr-table td {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.eb-cr-table tr:last-child td {
  border-bottom: none;
}

/* Multiplier list */
.eb-multiplier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.eb-multiplier-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
}

.eb-multiplier-list li strong {
  color: var(--color-text-secondary);
}

/* Suggestions */
.eb-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.eb-suggestions li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
 * Export Preview Panel
 * ========================================================================== */

.panel-export-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.export-preview-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.export-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

/* Empty state */
.export-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.export-empty-state .empty-icon {
  display: flex;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.export-empty-state .empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.export-empty-state .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-normal);
}

/* Summary stats */
.export-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.export-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  flex: 1;
}

.export-stat .stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  line-height: 1;
}

.export-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sections */
.export-section {
  margin-bottom: var(--space-4);
}

.export-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Category list */
.export-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.export-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.export-category .category-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.export-category .category-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.export-category .category-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

/* Type breakdown list */
.export-type-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.export-type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.export-type-item:hover {
  background: var(--color-bg-hover);
}

.export-type-item .type-name {
  color: var(--color-text-primary);
}

.export-type-item .type-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* Export suggestions */
.export-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.export-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.export-suggestions li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
 * Scrollbar Styling (all sub-panels)
 * ========================================================================== */

.homebrew-status-body::-webkit-scrollbar,
.balance-ref-body::-webkit-scrollbar,
.encounter-builder-body::-webkit-scrollbar,
.export-preview-body::-webkit-scrollbar {
  width: var(--scrollbar-width, 6px);
}

.homebrew-status-body::-webkit-scrollbar-track,
.balance-ref-body::-webkit-scrollbar-track,
.encounter-builder-body::-webkit-scrollbar-track,
.export-preview-body::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, transparent);
}

.homebrew-status-body::-webkit-scrollbar-thumb,
.balance-ref-body::-webkit-scrollbar-thumb,
.encounter-builder-body::-webkit-scrollbar-thumb,
.export-preview-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, var(--color-bg-tertiary));
  border-radius: var(--radius-sm);
}

.homebrew-status-body::-webkit-scrollbar-thumb:hover,
.balance-ref-body::-webkit-scrollbar-thumb:hover,
.encounter-builder-body::-webkit-scrollbar-thumb:hover,
.export-preview-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color, var(--color-bg-hover));
}

/* ==========================================================================
 * Reduced Motion Support
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .homebrew-item,
  .export-type-item {
    transition: none;
  }
}
/* Notice Board Panel - LFG Quest Poster System */

.notice-board-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.notice-board-panel .panel-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.notice-board-panel .panel-title {
  margin: 0;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notice-board-panel .panel-subtitle {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Tab Navigation */
.notice-board-panel .panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.notice-board-panel .tab-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.notice-board-panel .tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.notice-board-panel .tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* Tab Content */
.notice-board-panel .tab-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.notice-board-panel .tab-content.hidden {
  display: none;
}

/* Filters */
.notice-board-panel .panel-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.notice-board-panel .filter-select {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Quest Poster Card */
.quest-poster-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.quest-poster-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.quest-poster-card.status-filled,
.quest-poster-card.status-withdrawn,
.quest-poster-card.status-expired {
  opacity: 0.7;
}

.quest-poster-card .poster-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.quest-poster-card .poster-title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--accent-primary);
}

.quest-poster-card .poster-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
}

.quest-poster-card .poster-hook {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  font-style: italic;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
}

.quest-poster-card .poster-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.quest-poster-card .meta-item {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.quest-poster-card .poster-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.quest-poster-card .style-tag {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.quest-poster-card .poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

.quest-poster-card .quest-giver {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.quest-poster-card .poster-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.quest-poster-card .inquiry-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--warning-subtle);
  color: var(--warning);
}

/* Inquiry Section in Poster Card */
.poster-inquiries {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-subtle);
}

.inquiry-item {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.inquiry-item .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.inquiry-item .character-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.inquiry-item .inquiry-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inquiry-item.status-pending .inquiry-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.inquiry-item.status-accepted .inquiry-status {
  background: var(--success-subtle);
  color: var(--success);
}

.inquiry-item.status-declined .inquiry-status {
  background: var(--error-subtle);
  color: var(--error);
}

.inquiry-item .inquiry-message {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-xs) 0;
}

.inquiry-item .inquiry-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Inquiry Card (Player view) */
.inquiry-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.inquiry-card .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.inquiry-card .poster-title {
  margin: 0;
  font-size: var(--font-size-md);
}

.inquiry-card .character-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.inquiry-card .inquiry-message,
.inquiry-card .response-message {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Modal */
.notice-board-panel .modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
}

.notice-board-panel .modal.hidden {
  display: none;
}

.notice-board-panel .modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-lg);
}

.notice-board-panel .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.notice-board-panel .modal-header h3 {
  margin: 0;
}

.notice-board-panel .btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-xs);
}

/* Form */
.notice-board-panel .form-group {
  margin-bottom: var(--space-md);
}

.notice-board-panel .form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.notice-board-panel .form-group input,
.notice-board-panel .form-group textarea,
.notice-board-panel .form-group select {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.notice-board-panel .form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.notice-board-panel .form-row {
  display: flex;
  gap: var(--space-md);
}

.notice-board-panel .form-group.half {
  flex: 1;
}

.notice-board-panel .range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notice-board-panel .range-inputs input {
  width: 60px;
  text-align: center;
}

.notice-board-panel .range-inputs span {
  color: var(--text-muted);
}

.notice-board-panel .tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.notice-board-panel .tag-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.notice-board-panel .tag-checkbox input {
  width: auto;
}

.notice-board-panel .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Poster Preview in Inquiry Modal */
.notice-board-panel .poster-preview {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.notice-board-panel .poster-preview h4 {
  margin: 0 0 var(--space-sm);
  color: var(--accent-primary);
}

.notice-board-panel .poster-preview p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Tab Header */
.notice-board-panel .tab-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

/* Loading and Empty States */
.notice-board-panel .loading-state,
.notice-board-panel .empty-state,
.notice-board-panel .error-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.notice-board-panel .loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.notice-board-panel .empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}

/* ==================== LFG Players Tab ==================== */

/* Mode Toggle (Browse Players / My Listing) */
.notice-board-panel .lfg-mode-toggle {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.notice-board-panel .mode-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-board-panel .mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.notice-board-panel .mode-btn.active {
  color: var(--text-primary);
  background: var(--bg-primary);
  box-shadow: 0 1px 3px var(--shadow-color);
}

.notice-board-panel .lfg-mode-content.hidden {
  display: none;
}

/* Player Listing Card */
.player-listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-listing-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.player-listing-card .listing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.player-listing-card .listing-title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--accent-primary);
}

.player-listing-card .listing-character {
  margin-bottom: var(--space-sm);
}

.player-listing-card .character-summary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.player-listing-card .listing-pitch {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
  font-style: italic;
}

.player-listing-card .listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.player-listing-card .listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.player-listing-card .listing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

.player-listing-card .player-name {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Compatibility Badge */
.compatibility-badge {
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.compatibility-badge.compatibility-high {
  background: var(--success-subtle);
  color: var(--success);
}

.compatibility-badge.compatibility-medium {
  background: var(--warning-subtle);
  color: var(--warning);
}

.compatibility-badge.compatibility-low {
  background: var(--error-subtle);
  color: var(--error);
}

/* My Listing Card (Player's own listing view) */
.my-listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.my-listing-card .listing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.my-listing-card .listing-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--accent-primary);
}

.my-listing-card .listing-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
}

.my-listing-card.status-active .listing-status {
  background: var(--success-subtle);
  color: var(--success);
}

.my-listing-card.status-matched .listing-status {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.my-listing-card.status-withdrawn .listing-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.my-listing-card .listing-character {
  margin-bottom: var(--space-sm);
}

.my-listing-card .character-summary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.my-listing-card .listing-pitch {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
}

.my-listing-card .listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.my-listing-card .listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.my-listing-card .listing-actions {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

/* DM Inquiry Items (shown on player's listing) */
.my-listing-card .listing-inquiries {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-subtle);
}

.my-listing-card .listing-inquiries h5 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.dm-inquiry-item {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.dm-inquiry-item .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.dm-inquiry-item .dm-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.dm-inquiry-item .inquiry-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.dm-inquiry-item.status-pending .inquiry-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.dm-inquiry-item.status-accepted .inquiry-status {
  background: var(--success-subtle);
  color: var(--success);
}

.dm-inquiry-item.status-declined .inquiry-status {
  background: var(--error-subtle);
  color: var(--error);
}

.dm-inquiry-item .quest-link {
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
  margin: var(--space-xs) 0;
}

.dm-inquiry-item .inquiry-message {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-xs) 0;
  font-style: italic;
}

.dm-inquiry-item .inquiry-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Listing Preview in Recruit Modal */
.notice-board-panel .listing-preview {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.notice-board-panel .listing-preview h4 {
  margin: 0 0 var(--space-sm);
  color: var(--accent-primary);
}

.notice-board-panel .listing-preview p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
/* Party Activity Feed Panel */

.panel-party-activity-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.party-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.party-activity-header .panel-title {
  margin: 0;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.activity-filter-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.activity-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.activity-filter-btn svg {
  width: 14px;
  height: 14px;
}

.party-activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}

.party-activity-filters[hidden] {
  display: none;
}

.activity-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.activity-filter-option input {
  accent-color: var(--accent-primary);
}

.party-activity-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  transition: background 0.2s ease;
}

.activity-item:hover {
  background: var(--bg-tertiary);
}

.activity-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: bold;
  border-radius: var(--radius-sm);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-description {
  color: var(--text-secondary);
  word-break: break-word;
}

.activity-timestamp {
  font-size: var(--font-size-xxs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Activity type colors */
.activity-positive .activity-icon {
  color: var(--success);
  background: var(--success-subtle);
}

.activity-negative .activity-icon {
  color: var(--error);
  background: var(--error-subtle);
}

.activity-combat .activity-icon {
  color: var(--warning);
  background: var(--warning-subtle);
}

.activity-dm .activity-icon {
  color: var(--accent-secondary);
  background: var(--accent-secondary-subtle);
}

.activity-quest .activity-icon {
  color: var(--accent-primary);
  background: var(--accent-primary-subtle);
}

.activity-loot .activity-icon {
  color: var(--gold);
  background: var(--gold-subtle);
}

.activity-default .activity-icon {
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

/* Empty state */
.activity-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
/* Campaign Lobby Panel - Subtle/Compact Style */
.panel-campaign-lobby {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.campaign-lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.campaign-lobby-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  margin: 0;
}

.lobby-status-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.lobby-status-badge.status--open {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.lobby-status-badge.status--in_game {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.lobby-status-badge.status--closed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}

/* Tab Navigation */
.lobby-tabs {
  display: flex;
  gap: 4px;
  padding: 4px var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}

.lobby-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.lobby-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.lobby-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

.lobby-tab svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.player-count-badge {
  font-size: var(--font-size-xs);
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  min-width: 16px;
  text-align: center;
}

/* Tab Content */
.lobby-tab-content {
  display: none;
}

.lobby-tab-content.active {
  display: block;
}

.campaign-lobby-body {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.lobby-section {
  margin-bottom: var(--space-2);
}

/* Player List */
.lobby-player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--timing-instant);
}

.lobby-player:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lobby-player--dm {
  background: rgba(255, 215, 0, 0.08);
}

.lobby-player-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player-status.online {
  background: var(--color-success);
  box-shadow: 0 0 4px var(--color-success);
}

.lobby-player-status.offline {
  background: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.lobby-player-role {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lobby-player-ready {
  display: flex;
  align-items: center;
}

.lobby-player-ready svg {
  width: 14px;
  height: 14px;
}

.lobby-player-ready.ready {
  color: var(--color-success);
}

.lobby-player-ready.not-ready {
  color: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.lobby-player-empty svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.lobby-kick-btn {
  opacity: 0;
  transition: opacity var(--timing-fast);
  padding: 2px 4px;
}

.lobby-player:hover .lobby-kick-btn {
  opacity: 0.6;
}

.lobby-kick-btn:hover {
  opacity: 1;
  color: var(--color-error);
}

/* Ready Summary */
.lobby-ready-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.ready-count {
  font-weight: 600;
  color: var(--color-success);
}

.ready-label {
  color: var(--text-muted);
}

/* Lobby Actions */
.lobby-actions {
  display: flex;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.lobby-actions .btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

.lobby-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-actions .btn-leave {
  flex: 0 0 auto;
}

.lobby-actions .btn-leave:hover {
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
}

/* Settings Tab */
.lobby-settings-group {
  margin-bottom: var(--space-3);
}

.settings-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.settings-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.settings-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.settings-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.settings-buttons {
  display: flex;
  gap: 8px;
}

.settings-buttons .btn {
  padding: 5px 10px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.settings-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

/* Player Settings View */
.lobby-settings-info {
  padding: var(--space-3);
  text-align: center;
}

.settings-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.settings-note svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Skeleton loading */
.lobby-player-skeleton {
  color: var(--text-muted);
  font-style: italic;
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Pulse animation for start button when ready */
.btn-pulse {
  animation: pulse 1.5s infinite;
}

/**
 * Creation Reference Panel
 * ========================
 * Browsable entity list for character creation.
 * Shows races, classes, backgrounds, etc. based on current creation step.
 */

.creation-reference-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-bg, #0a0a14);
  border-radius: 8px;
  overflow: hidden;
}

/* Header */
.creation-reference-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel-header-bg, #1a1a2e);
  border-bottom: 1px solid var(--border-color, #2a2a4e);
}

.creation-reference-panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}

.creation-reference-panel__title .svg-icon--16 {
  width: 16px;
  height: 16px;
  color: var(--accent-color, #00d4ff);
}

.creation-reference-panel__step-label {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #2a2a4e);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Search */
.creation-reference-panel__search {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color, #2a2a4e);
}

/* Tabs */
.creation-reference-panel__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color, #2a2a4e);
  overflow-x: auto;
}

.creation-reference-panel__tabs:empty {
  display: none;
}

.creation-reference-panel__tab {
  padding: 0.375rem 0.75rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted, #888);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.creation-reference-panel__tab:hover {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-tertiary, #2a2a4e);
}

.creation-reference-panel__tab--active {
  color: var(--accent-color, #00d4ff);
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

/* Content */
.creation-reference-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.creation-reference-panel__content::-webkit-scrollbar {
  width: 6px;
}

.creation-reference-panel__content::-webkit-scrollbar-track {
  background: var(--bg-primary, #0a0a14);
}

.creation-reference-panel__content::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5e);
  border-radius: 3px;
}

.creation-reference-panel__content::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover, #4a4a6e);
}

/* Entity List */
.creation-browser__entities {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Category Section */
.creation-browser__category {
  margin-bottom: 1rem;
}

.creation-browser__category-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}

.creation-browser__category-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color, #2a2a4e);
}

/* Entity Card */
.creation-browser__entity-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
  width: 100%;
}

.creation-browser__entity-card:hover {
  border-color: var(--accent-color, #00d4ff);
  background: var(--bg-hover, #2a2a4e);
}

/* Focus state for keyboard navigation (A11y requirement) */
.creation-browser__entity-card:focus-visible {
  outline: 2px solid var(--accent-color, #00d4ff);
  outline-offset: 2px;
  border-color: var(--accent-color, #00d4ff);
  background: var(--bg-hover, #2a2a4e);
}

.creation-browser__entity-card--selected {
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

.creation-browser__entity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary, #2a2a4e);
  border-radius: 6px;
  color: var(--accent-color, #00d4ff);
  flex-shrink: 0;
}

.creation-browser__entity-icon svg {
  width: 20px;
  height: 20px;
}

.creation-browser__entity-info {
  flex: 1;
  min-width: 0;
}

.creation-browser__entity-name {
  display: block;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 0.25rem;
}

.creation-browser__entity-desc {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creation-browser__entity-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.creation-browser__entity-tag {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  /* Minimum readable size is 12px (0.75rem), was 9px */
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #2a2a4e);
  padding: 0.1875rem 0.5rem;
  border-radius: 3px;
}

.creation-browser__entity-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.creation-browser__entity-card:hover .creation-browser__entity-arrow {
  color: var(--accent-color, #00d4ff);
}

.creation-browser__entity-arrow svg {
  width: 16px;
  height: 16px;
}

/* Empty State */
.creation-reference-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #888);
}

.creation-reference-panel__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--text-muted, #555);
}

.creation-reference-panel__empty-icon svg {
  width: 32px;
  height: 32px;
}

.creation-reference-panel__empty-text {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Loading Skeleton */
.skeleton-loader--list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-item {
  padding: 0.75rem;
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 6px;
}

.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #2a2a4e 25%, #3a3a5e 50%, #2a2a4e 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line--title {
  width: 60%;
  height: 14px;
}

.skeleton-line--text {
  width: 100%;
}

.skeleton-line--short {
  width: 40%;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Footer */
.creation-reference-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color, #2a2a4e);
  background: var(--panel-header-bg, #1a1a2e);
  flex-shrink: 0;
}

.creation-browser__count {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

.creation-reference-panel__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 4px;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.creation-reference-panel__action:hover {
  color: var(--accent-color, #00d4ff);
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

.creation-reference-panel__action svg {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 480px) {
  .creation-reference-panel__header {
    padding: 0.5rem 0.75rem;
  }

  .creation-reference-panel__content {
    padding: 0.375rem;
  }

  .creation-browser__entity-card {
    padding: 0.5rem;
  }

  .creation-browser__entity-icon {
    width: 32px;
    height: 32px;
  }

  .creation-browser__entity-icon svg {
    width: 16px;
    height: 16px;
  }
}
/* Dungeon Map Panel - terminal-themed exploration map */

.dungeon-map-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

.dungeon-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.dungeon-map-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dungeon-map-controls {
  display: flex;
  gap: 2px;
}

.dungeon-map-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.dungeon-map-btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.dungeon-map-btn:active {
  background: var(--color-bg-active, #333);
}

.dungeon-map-container {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
}

.dungeon-map-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
}
/* Spatial Map Editor — terminal-themed grid editor for SpatialManifest data */

.spatial-map-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

/* Header */
.spatial-map-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.spatial-map-editor__title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spatial-map-editor__actions {
  display: flex;
  gap: 4px;
}

.spatial-map-editor__btn {
  padding: 2px 8px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.spatial-map-editor__btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.spatial-map-editor__btn--primary {
  border-color: var(--color-text-green, #00ff00);
  color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__btn--primary:hover {
  background: rgba(0, 255, 0, 0.1);
}

/* Toolbar */
.spatial-map-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  flex-wrap: wrap;
}

.spatial-map-editor__dimensions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.spatial-map-editor__label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #aaa);
  display: flex;
  align-items: center;
  gap: 2px;
}

.spatial-map-editor__dim-input {
  width: 40px;
  padding: 1px 4px;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #333);
  border-radius: 2px;
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-align: center;
}

.spatial-map-editor__dim-input:focus {
  outline: none;
  border-color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__tool-group {
  display: flex;
  gap: 2px;
  border-left: 1px solid var(--color-border, #333);
  padding-left: 6px;
}

/* Terrain brush buttons */
.spatial-map-editor__terrain-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.spatial-map-editor__terrain-btn:hover {
  border-color: var(--color-border, #444);
}

.spatial-map-editor__terrain-btn--active {
  border-color: var(--color-text-green, #00ff00);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
}

.spatial-map-editor__terrain-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-text-secondary, #aaa);
}

.spatial-map-editor__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.spatial-map-editor__swatch--stone-floor { background: #3a3a4a; }
.spatial-map-editor__swatch--wall { background: #1a1a2a; }
.spatial-map-editor__swatch--wood-floor { background: #6b4f2a; }
.spatial-map-editor__swatch--water { background: #1a3a6a; }
.spatial-map-editor__swatch--difficult { background: #4a3a2a; }
.spatial-map-editor__swatch--door { background: #8b5a2b; }
.spatial-map-editor__swatch--pillar { background: #5a5a6a; }
.spatial-map-editor__swatch--stairs { background: #4a4a5a; }

/* Canvas area */
.spatial-map-editor__canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  padding: 8px;
}

.spatial-map-editor__canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
}

/* Footer */
.spatial-map-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  background: var(--color-bg-secondary, #111);
  border-top: 1px solid var(--color-border, #2a2a2a);
  min-height: 22px;
}

.spatial-map-editor__cell-info,
.spatial-map-editor__status {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #777);
}

.spatial-map-editor__status {
  color: var(--color-text-green, #00ff00);
}

/* Export textarea */
.spatial-map-editor__export-area {
  width: 100%;
  max-height: 120px;
  padding: 4px 8px;
  background: var(--color-bg-primary, #0a0a0a);
  border: none;
  border-top: 1px solid var(--color-border, #2a2a2a);
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  resize: none;
}

.spatial-map-editor__export-area:focus {
  outline: none;
}
/* ============================================
 * Foreshadowing Panel (DM Terminal Sidebar)
 * ============================================
 * Shows active plot threads, hooks, orbits, and promises.
 * DM-only panel for tracking narrative foreshadowing elements.
 */

.panel-foreshadowing {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* Header */
.foreshadowing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.foreshadowing-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.foreshadowing-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.refresh-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.refresh-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.refresh-btn.refreshing .refresh-icon {
  animation: spin 1s linear infinite;
}

/* Quick Stats */
.foreshadowing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.foreshadowing-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.foreshadowing-stats .stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.foreshadowing-stats .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Body */
.foreshadowing-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.foreshadowing-section {
  margin-bottom: var(--space-3);
}

.foreshadowing-section:last-child {
  margin-bottom: 0;
}

.foreshadowing-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.foreshadowing-section .section-header:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.foreshadowing-section .section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.section-toggle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.section-content {
  margin-top: var(--space-2);
}

/* Foreshadow Items */
.foreshadow-item {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent-primary);
}

.foreshadow-item:last-child {
  margin-bottom: 0;
}

.item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.item-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 100px;
}

.item-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* Badge colors */
.badge-mystery { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-prophecy { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-revenge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-romance { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.badge-political { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.badge-quest_hook { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-subplot { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.badge-foreshadowing { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-villain_scheme { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-faction_conflict { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-ready { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-active { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

/* Importance stars */
.importance-stars {
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
}

.importance-1 { color: var(--color-text-muted); }
.importance-2 { color: var(--color-text-secondary); }
.importance-3 { color: var(--color-accent-primary); }
.importance-4 { color: #eab308; }
.importance-5 { color: #ef4444; }

/* Item content */
.item-description {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.item-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-style: italic;
}

.hint-label {
  color: var(--color-text-muted);
}

.item-npcs {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.npcs-label {
  color: var(--color-text-muted);
}

.item-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Urgency indicators */
.urgency-indicator {
  font-size: var(--font-size-sm);
}

.urgency-immediate { color: #ef4444; }
.urgency-time_sensitive { color: #eab308; }
.urgency-low { color: var(--color-text-muted); }
.urgency-background { color: var(--color-text-muted); opacity: 0.6; }

/* Hook items */
.hook-item.urgency-immediate {
  border-left-color: #ef4444;
}

.hook-item.urgency-time_sensitive {
  border-left-color: #eab308;
}

.ai-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  margin-left: var(--space-1);
}

/* Orbit progress */
.orbit-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 35px;
}

.orbit-ready {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: #22c55e;
  font-weight: var(--font-weight-medium);
}

/* Promise items */
.promise-direction {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.promise-npc_to_player { border-left-color: #3b82f6; }
.promise-player_to_npc { border-left-color: #22c55e; }
.promise-mutual { border-left-color: #eab308; }

.promise-text {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}

.overdue-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  margin-left: var(--space-1);
}

/* Empty state */
.foreshadowing-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.foreshadowing-empty .empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.foreshadowing-empty .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Footer */
.foreshadowing-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  flex-shrink: 0;
}

.footer-link {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}
/* Party Roster Panel */
/* Compact party member display for character sheet sidebar */

.party-roster {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-xs, 4px) 0;
}

/* Empty state */
.party-roster__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 16px);
  text-align: center;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm, 8px);
  opacity: 0.5;
}

.party-roster__empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.party-roster__empty-message {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  color: var(--color-text-secondary, #9ca3af);
}

.party-roster__empty-hint {
  margin: var(--spacing-xs, 4px) 0 0;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Loading state */
.party-roster__loading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
}

/* Party members list */
.party-roster__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

/* Individual member card */
.party-roster__member {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-sm, 8px);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-sm, 4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.party-roster__member--clickable {
  cursor: pointer;
}

.party-roster__member--clickable:hover {
  border-color: var(--color-text-secondary, #9ca3af);
  box-shadow: 0 0 6px rgba(156, 163, 175, 0.15);
}

.party-roster__member--self {
  border-color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 5%, transparent);
}

/* Member portrait */
.party-roster__portrait {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary, #1f2937);
  border: 2px solid var(--color-border, #374151);
}

.party-roster__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-roster__portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__portrait-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Online indicator on portrait */
.party-roster__online-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted, #6b7280);
  border: 2px solid var(--color-bg-secondary, #1f2937);
}

.party-roster__online-indicator--online {
  background: #22c55e;
}

.party-roster__online-indicator--idle {
  background: #eab308;
}

.party-roster__online-indicator--away {
  background: #6b7280;
}

/* Member info section */
.party-roster__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.party-roster__name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

.party-roster__name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-roster__you-badge {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 15%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.party-roster__class {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Health status section */
.party-roster__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

/* HP status badge (privacy-aware) */
.party-roster__hp-status {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.party-roster__hp-status--healthy {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.party-roster__hp-status--injured {
  color: #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.party-roster__hp-status--bloodied {
  color: #f97316;
  background: rgba(249, 115, 22, 0.15);
}

.party-roster__hp-status--critical {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-hp-critical 1.5s ease-in-out infinite;
}

.party-roster__hp-status--down {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

@keyframes pulse-hp-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* HP bar for self (shows exact HP) */
.party-roster__hp-bar {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary, #1f2937);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--color-border, #374151);
}

.party-roster__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-roster__hp-fill--healthy {
  background: #22c55e;
}

.party-roster__hp-fill--wounded {
  background: #eab308;
}

.party-roster__hp-fill--critical {
  background: #ef4444;
}

.party-roster__hp-text {
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-secondary, #9ca3af);
}

/* Conditions display */
.party-roster__conditions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 2px;
}

.party-roster__condition {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Condition severity colors */
.party-roster__condition--debuff {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.party-roster__condition--control {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.party-roster__condition--buff {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Party header (optional) */
.party-roster__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-xs, 4px);
  margin-bottom: var(--spacing-xs, 4px);
  border-bottom: 1px solid var(--color-border, #374151);
}

.party-roster__title {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-roster__count {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .party-roster__hp-status--critical {
    animation: none;
  }

  .party-roster__member,
  .party-roster__hp-fill {
    transition: none;
  }
}
/**
 * Session Analytics Panel
 * =======================
 * Displays session statistics, progression charts, and DM metrics.
 * Extracted from inline <style> in terminal/panels/_session_analytics.html.erb.
 */

.session-analytics-panel {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  overflow-y: auto;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.analytics-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.analytics-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.date-range-filters {
  display: flex;
  gap: var(--space-1);
}

.date-range-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.date-range-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.date-range-btn.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Loading */
.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.analytics-loading.hidden,
.analytics-empty.hidden {
  display: none;
}

.session-analytics-panel .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: session-analytics-spin 0.8s linear infinite;
}

@keyframes session-analytics-spin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.analytics-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Sections */
.session-analytics-panel .analytics-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.session-analytics-panel .section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Campaign stats grid */
.campaign-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
}

.campaign-stat {
  text-align: center;
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.campaign-stat__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent-primary);
}

.campaign-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Session list */
.session-analytics-panel .session-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

.analytics-session-card {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.analytics-session-card:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.analytics-session-card--selected {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.session-card__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.session-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

.session-card__duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-card__body {
  display: flex;
  gap: var(--space-3);
}

.session-card__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-analytics-panel .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-analytics-panel .stat-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.session-card__summary {
  margin: var(--space-2) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Progression chart */
.progression-chart-container {
  min-height: 120px;
}

.progression-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progression-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100px;
  padding: var(--space-2) 0;
}

.progression-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.progression-bar {
  width: 100%;
  min-height: 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height 0.3s ease;
}

.progression-bar--level-up {
  background: linear-gradient(to top, var(--color-accent-primary), var(--color-accent-warning));
}

.level-marker {
  position: absolute;
  top: -16px;
  font-size: 10px;
}

.progression-chart__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Session detail */
.session-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.session-detail__title {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.session-detail__section h5 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.session-detail__section p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Notable moments */
.notable-moments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notable-moment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.moment-icon {
  flex-shrink: 0;
}

.moment-text {
  color: var(--color-text-secondary);
}

.no-moments, .no-data {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* DM metrics */
.dm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.dm-metric {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.dm-metric__value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.dm-metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Tool usage */
.tool-usage-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tool-usage-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

.tool-name {
  color: var(--color-text-secondary);
}

.tool-count {
  color: var(--color-accent-primary);
  font-weight: 500;
}
/**
 * Point Buy & Ability Score Assignment
 * =====================================
 * Styles for all three ability score methods:
 * - Standard Array (click-to-assign)
 * - Roll Dice (click-to-assign)
 * - Point Buy (+/- controls with budget)
 *
 * Source of truth for classes used in:
 *   app/javascript/controllers/terminal/creation_ability_controller.js
 */

/* ========================================
   Ability Panel Theme
   Orange accent for ability score selection
   ======================================== */

.abilities-selection-panel {
  --panel-accent-color: #fb923c;
  --panel-border-color: rgba(251, 146, 60, 0.5);
  --panel-glow-color: rgba(249, 115, 22, 0.2);
  --panel-accent-rgb: 249, 115, 22;
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.15), inset 0 0 30px rgba(249, 115, 22, 0.03);
}

/* ========================================
   Method Selection Cards
   Three options: Standard Array, Roll, Point Buy
   ======================================== */

.ability-methods-grid.selection-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.ability-method-card.selection-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.05);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
  min-width: auto;
}

.ability-method-card.selection-card:hover,
.ability-method-card.selection-card.hovered {
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.15);
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.5);
  transform: translateX(4px);
}

.ability-method-card .card-icon,
.ability-method-card .method-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.ability-method-card .card-name,
.ability-method-card .method-name {
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--panel-accent-color, #fb923c);
  margin-bottom: var(--space-1, 4px);
}

.ability-method-card .card-meta,
.ability-method-card .method-description {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1, 4px);
  padding-left: 0;
  border-left: none;
}

.ability-method-card .card-detail,
.ability-method-card .method-detail {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Legacy method card styles for backward compatibility */
.ability-methods-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.ability-method-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: rgba(251, 146, 60, 0.05);
  border: 1px solid rgba(251, 146, 60, 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
}

.ability-method-card:hover,
.ability-method-card.hovered {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.5);
  transform: translateX(4px);
}

.method-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.method-content {
  flex: 1;
}

.method-name {
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: #fb923c;
  margin-bottom: var(--space-1, 4px);
}

.method-description {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1, 4px);
}

.method-detail {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* ========================================
   Click-to-Assign UI (Standard Array & Roll)
   Value chips + ability slot cards
   ======================================== */

.ability-values-section {
  margin-bottom: var(--space-5, 20px);
}

.values-header,
.slots-header {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: rgba(251, 146, 60, 0.8);
  margin-bottom: var(--space-2, 8px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.values-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.ability-value-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(251, 146, 60, 0.1);
  border: 2px solid rgba(251, 146, 60, 0.3);
  border-radius: var(--radius-lg, 2px);
  font-size: var(--font-size-xl, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
}

.ability-value-chip:hover {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.5);
  transform: scale(1.05);
}

.ability-value-chip.selected {
  background: rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
  animation: chipPulse 1s ease-in-out infinite;
}

@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 146, 60, 0.4); }
  50% { box-shadow: 0 0 16px rgba(251, 146, 60, 0.6); }
}

/* ========================================
   Ability Slot Cards (shared by all methods)
   3x2 grid of mini-cards per ability
   ======================================== */

.ability-slots-section {
  margin-bottom: var(--space-4, 16px);
}

/* Override selection-grid for ability slots to use 3-col grid */
.ability-slots-grid.selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px);
}

/* Ability slot cards - card-style with centered content */
.ability-slot.selection-card.detailed {
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
  text-align: center;
  min-width: auto;
  max-width: none;
}

.ability-slot.selection-card.detailed:hover {
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.4);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.05);
}

.ability-slot.selection-card.detailed.primary {
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.4);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.08);
}

/* Legacy ability-slot styles */
.ability-slot {
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
  text-align: center;
}

.ability-slot:hover {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.05);
}

.ability-slot.primary {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.08);
}

.ability-slot.assigned {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}

.ability-slot-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5, 6px);
  margin-bottom: var(--space-2, 8px);
}

.ability-abbrev {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
}

.ability-slot.assigned .ability-abbrev {
  color: #4ade80;
}

.primary-badge {
  font-size: 9px;
  padding: 2px var(--space-1-5, 6px);
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: var(--radius-sm, 2px);
  color: #fb923c;
}

.ability-slot-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-1, 4px);
}

.assigned-value {
  font-size: var(--font-size-3xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: rgba(255, 255, 255, 0.9);
}

.ability-slot.assigned .assigned-value {
  color: #4ade80;
}

.racial-bonus {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: #60a5fa;
}

.ability-slot-total {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-1-5, 6px);
}

.total-value {
  font-weight: var(--font-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.7);
}

.ability-slot.assigned .total-value {
  color: #4ade80;
}

.ability-slot-desc {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.4);
  line-height: var(--line-height-tight, 1.25);
}

/* ========================================
   Point Buy UI
   Budget header + 3x2 grid of ability cards
   ======================================== */

.point-buy-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: var(--radius-lg, 2px);
  margin-bottom: var(--space-4, 16px);
}

.points-remaining {
  font-size: var(--font-size-lg, 17px);
  color: rgba(255, 255, 255, 0.9);
}

.points-remaining span {
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
  font-size: var(--font-size-2xl, 20px);
}

.points-total {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
}

/* Budget Progress Bar */
.pb-budget-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.pb-budget-fill {
  height: 100%;
  background: linear-gradient(90deg, #fb923c, #fbbf24);
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease;
}

/* Budget exhausted state */
.budget-exhausted .pb-budget-fill {
  background: linear-gradient(90deg, var(--color-accent-error, #cf6068), #e06c75);
}

.budget-exhausted .points-remaining span {
  color: var(--color-accent-error, #cf6068);
}

/* Point Buy Sliders — 3x2 grid of mini-cards */
.point-buy-sliders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px);
}

.point-buy-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 2px);
  transition: all var(--transition-normal, 200ms ease);
}

.point-buy-row:hover {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.03);
}

.point-buy-row.primary {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.05);
}

/* Ability info: abbreviation + primary badge */
.pb-ability-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5, 6px);
  width: 100%;
}

.pb-ability-name {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
}

.point-buy-row.primary .pb-ability-name {
  color: #fbbf24;
}

.pb-ability-desc {
  display: none; /* Hidden in card layout; info is conveyed by abbreviation */
}

/* Score display: large centered number + modifier */
.pb-score-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pb-score {
  font-size: var(--font-size-3xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}

.pb-modifier {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.5);
}

/* Controls: +/- buttons flanking the score */
.pb-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pb-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: var(--radius-lg, 2px);
  color: #fb923c;
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-bold, 700);
  cursor: pointer;
  transition: all var(--transition-fast, 100ms ease);
}

.pb-btn:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
  transform: scale(1.05);
}

.pb-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.pb-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Racial bonus */
.pb-racial {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: #60a5fa;
}

/* Total score */
.pb-total {
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-bold, 700);
  color: #4ade80;
  padding: 2px var(--space-1-5, 6px);
  background: rgba(74, 222, 128, 0.1);
  border-radius: var(--radius-sm, 2px);
}

/* Cost display */
.pb-cost {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
}

.pb-cost span {
  color: #fbbf24;
  font-weight: var(--font-weight-semibold, 600);
}

/* Accessible summary (screen readers + visual) */
.pb-summary {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-2, 8px);
  min-height: 1em;
}

/* ========================================
   Confirm Button (shared by all methods)
   ======================================== */

.ability-confirm-section {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid rgba(251, 146, 60, 0.2);
}

.ability-confirm-btn {
  width: 100%;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: var(--radius-lg, 2px);
  color: rgba(251, 146, 60, 0.6);
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: not-allowed;
  transition: all var(--transition-normal, 200ms ease);
}

.ability-confirm-btn:disabled {
  opacity: 0.5;
}

.ability-confirm-btn.ready {
  background: rgba(251, 146, 60, 0.2);
  border-color: #fb923c;
  color: #fb923c;
  cursor: pointer;
}

.ability-confirm-btn.ready:hover {
  background: rgba(251, 146, 60, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

/* ========================================
   Responsive: 2-col on small screens
   ======================================== */

@media (max-width: 640px) {
  .ability-slots-grid.selection-grid,
  .point-buy-sliders {
    grid-template-columns: repeat(2, 1fr);
  }

  .ability-value-chip {
    width: 38px;
    height: 38px;
    font-size: var(--font-size-lg, 17px);
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ability-value-chip.selected {
    animation: none;
  }

  .pb-budget-fill {
    transition: none;
  }
}
/*
 * Clarification Modal - Socratic Clarification UI
 * ================================================
 * Displays when player input is ambiguous (confidence < 0.65).
 * Presents 2-3 clarification options instead of guessing.
 *
 * Features:
 * - Keyboard shortcuts (1-9 for options, Escape to cancel)
 * - Touch-friendly on mobile
 * - Auto-hides after selection
 * - Confidence percentage badges
 */

/* ========================================
 * BACKDROP
 * ======================================== */

.clarification-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal, 1000);
  animation: clarification-backdrop-enter 0.2s ease-out;
}

.clarification-backdrop.hidden {
  display: none;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.clarification-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content, 1001);
  max-width: 480px;
  width: calc(100% - var(--space-8, 2rem));
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.2);
  animation: clarification-modal-enter 0.2s ease-out;
  overflow: hidden;
}

.clarification-modal.hidden {
  display: none;
}

/* ========================================
 * HEADER / MESSAGE
 * ======================================== */

.clarification-header {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-bottom: 1px solid var(--color-border-default, #444);
}

.clarification-message {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-md, 0.9375rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  margin: 0;
}

/* ========================================
 * OPTIONS CONTAINER
 * ======================================== */

.clarification-options {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ========================================
 * OPTION BUTTONS
 * ======================================== */

.clarification-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
  background: var(--color-bg-tertiary, #282840);
  border: 1px solid var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.clarification-option:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
              0 0 12px rgba(97, 175, 239, 0.15);
}

.clarification-option:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.clarification-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* ========================================
 * OPTION HEADER
 * ======================================== */

.option-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.option-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  border-radius: var(--radius-full, 50%);
  flex-shrink: 0;
}

.option-description {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  flex: 1;
}

/* ========================================
 * CONFIDENCE BADGE
 * ======================================== */

.option-confidence {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding-left: calc(24px + var(--space-3, 0.75rem));
}

/* ========================================
 * CANCEL SECTION
 * ======================================== */

.clarification-cancel {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #333);
  background: var(--color-bg-secondary, #2a2a3e);
}

.clarification-cancel-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: transparent;
  border: 1px dashed var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.clarification-cancel-button:hover {
  border-color: var(--color-text-secondary, #aaa);
  border-style: solid;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary, #e0e0e0);
}

.clarification-cancel-button:focus-visible {
  outline: 2px solid var(--color-text-secondary, #aaa);
  outline-offset: 2px;
}

.cancel-text {
  font-weight: var(--font-weight-medium, 500);
}

.cancel-hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: var(--color-bg-tertiary, #282840);
  border-radius: var(--radius-sm, 3px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes clarification-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

@keyframes clarification-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
 * RESPONSIVE - MOBILE
 * ======================================== */

@media (max-width: 640px) {
  .clarification-modal {
    max-width: calc(100% - var(--space-4, 1rem));
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: clarification-modal-enter-mobile 0.25s ease-out;
  }

  .clarification-header,
  .clarification-options,
  .clarification-cancel {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }

  .clarification-option {
    padding: var(--space-4, 1rem);
    /* Larger tap targets on mobile */
    min-height: 64px;
  }

  .option-number {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm, 0.875rem);
  }

  .option-description {
    font-size: var(--font-size-md, 0.9375rem);
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========================================
 * RESPONSIVE - TABLET
 * ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  .clarification-modal {
    max-width: 520px;
  }
}

/* ========================================
 * TOUCH DEVICES
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  .clarification-option {
    /* Disable hover transform on touch devices to prevent flicker */
    transform: none;
  }

  .clarification-option:active {
    background: rgba(97, 175, 239, 0.15);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .clarification-modal {
    animation: none;
  }

  .clarification-backdrop {
    animation: none;
  }

  .clarification-option {
    transition: none;
  }

  .clarification-option:hover {
    transform: none;
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ========================================
 * DARK MODE ADJUSTMENTS
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .clarification-modal {
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.7)),
                0 0 40px rgba(97, 175, 239, 0.25);
  }

  .clarification-option:hover {
    background: rgba(97, 175, 239, 0.12);
  }
}
/**
 * Section Component
 * =================
 * Shared section header and title styles used across panels.
 * Consolidates duplicate .section-header and .section-title definitions
 * from 9+ organism files into a single mobile-first source of truth.
 *
 * Usage:
 *   <div class="section-header">
 *     <span class="section-toggle-icon">...</span>
 *     <h3 class="section-title">Section Name</h3>
 *     <span class="section-count">3</span>
 *   </div>
 */

/* ============================================================================
   Section Header - clickable/collapsible container
   ============================================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px; /* Touch target */
  background: var(--color-bg-tertiary);
  user-select: none;
}

/* Interactive section headers (collapsible) */
.section-header--interactive {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.section-header--interactive:hover {
  background: var(--color-bg-hover);
}

.section-header--interactive:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

/* Warning variant */
.section-header--warning {
  color: var(--color-accent-warning);
}

/* Section header description text */
.section-header .section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Desktop: compact headers */
@media (min-width: 1024px) {
  .section-header {
    min-height: auto;
    padding: var(--space-1-5) var(--space-3);
  }
}

/* ============================================================================
   Section Title - heading text within sections
   ============================================================================

   Note: Base .section-title is defined in atoms/_atoms.css (line 467).
   This file provides additional section title variants and context modifiers.
   Organisms should scope overrides via their parent class, e.g.:
     .my-panel .section-title { color: var(--color-accent-cyan); }
*/

/* Section title inside a section-header */
.section-header .section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
  flex: 1;
}

/* Toggle icon for collapsible sections */
.section-toggle-icon {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Section count badge */
.section-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  min-width: 1.5rem;
  text-align: center;
}

/* ============================================================================
   Section Heading - larger heading variant
   ============================================================================ */

.section-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .section-header--interactive,
  .section-toggle-icon {
    transition: none;
  }
}
/**
 * Condition Badge Component
 * =========================
 * D&D 5e condition status badges with type-specific color coding.
 * Consolidates duplicate .condition-badge definitions from 5+ organism files.
 *
 * Usage:
 *   <span class="condition-badge condition-badge--poisoned">
 *     <span class="condition-badge__icon">...</span>
 *     <span class="condition-badge__name">Poisoned</span>
 *   </span>
 */

/* ============================================================================
   Base Condition Badge
   ============================================================================ */

.condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 12px;
  background: var(--color-bg-elevated, #1a1a1a);
  border: 1px solid var(--color-border-default, #333);
  color: var(--color-text-secondary, #999);
  min-height: 24px; /* Touch-friendly even at small size */
}

.condition-badge__icon {
  font-size: 0.875rem;
  line-height: 1;
}

.condition-badge__name {
  line-height: 1;
}

/* Interactive badges (hoverable in combat tracker, etc.) */
.condition-badge--interactive {
  cursor: help;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.condition-badge--interactive:hover,
.condition-badge--interactive:focus {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Duration indicator */
.condition-badge .condition-duration {
  font-size: 0.625rem;
  opacity: 0.8;
  margin-left: 0.125rem;
}

/* Enter animation */
@keyframes condition-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.condition-badge--entering {
  animation: condition-enter 0.2s ease-out;
}

/* ============================================================================
   Condition Type Colors
   ============================================================================ */

.condition-badge--poisoned {
  background: rgba(139, 195, 74, 0.15);
  border-color: #8bc34a;
  color: #aed581;
}

.condition-badge--stunned {
  background: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
  color: #ffd54f;
}

.condition-badge--paralyzed {
  background: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
  color: #ef5350;
}

.condition-badge--concentrating {
  background: rgba(33, 150, 243, 0.15);
  border-color: #2196f3;
  color: #64b5f6;
}

.condition-badge--blessed {
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
  color: #ffeb3b;
}

.condition-badge--prone {
  background: rgba(158, 158, 158, 0.15);
  border-color: #9e9e9e;
  color: #bdbdbd;
}

.condition-badge--blinded {
  background: rgba(75, 85, 99, 0.4);
  border-color: #6b7280;
  color: #d1d5db;
}

.condition-badge--frightened {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #c4b5fd;
}

.condition-badge--charmed {
  background: rgba(244, 114, 182, 0.15);
  border-color: #f472b6;
  color: #f9a8d4;
}

.condition-badge--restrained {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #fde047;
}

.condition-badge--incapacitated {
  background: rgba(107, 114, 128, 0.3);
  border-color: #6b7280;
  color: #9ca3af;
}

.condition-badge--invisible {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #a5b4fc;
  border-style: dashed;
}

.condition-badge--deafened {
  background: rgba(156, 163, 175, 0.15);
  border-color: #9ca3af;
  color: #d1d5db;
}

.condition-badge--grappled {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

.condition-badge--petrified {
  background: rgba(120, 113, 108, 0.25);
  border-color: #78716c;
  color: #a8a29e;
}

/* ============================================================================
   Desktop: More compact badges
   ============================================================================ */

@media (min-width: 1024px) {
  .condition-badge {
    min-height: auto;
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .condition-badge--entering {
    animation: none;
  }

  .condition-badge--interactive {
    transition: none;
  }
}
/**
 * Card Component
 * ==============
 * Shared card container for creation cards, quest cards, item cards, NPC cards.
 * Mobile-first with touch-friendly sizing.
 *
 * Usage:
 *   <div class="card card--selectable">
 *     <div class="card__header">...</div>
 *     <div class="card__body">...</div>
 *     <div class="card__footer">...</div>
 *   </div>
 */

/* ============================================================================
   Base Card
   ============================================================================ */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* ============================================================================
   Card Sections
   ============================================================================ */

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.card__body {
  padding: var(--space-3) var(--space-4);
  flex: 1;
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-xl);
}

/* ============================================================================
   Selectable Card (interactive)
   ============================================================================ */

.card--selectable {
  cursor: pointer;
  min-height: 48px; /* Touch target */
}

.card--selectable:hover {
  border-color: var(--color-border-focus);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ============================================================================
   Selected Card
   ============================================================================ */

.card--selected {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary),
              0 2px 8px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

/* ============================================================================
   Disabled Card
   ============================================================================ */

.card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* ============================================================================
   Card Accent Variants (left border color)
   ============================================================================ */

.card--accent-primary {
  border-left: 3px solid var(--color-accent-primary);
}

.card--accent-success {
  border-left: 3px solid var(--color-accent-secondary);
}

.card--accent-warning {
  border-left: 3px solid var(--color-accent-warning);
}

.card--accent-danger {
  border-left: 3px solid var(--color-accent-error);
}

.card--accent-magic {
  border-left: 3px solid var(--color-accent-purple);
}

/* ============================================================================
   Desktop: Grid-friendly cards with hover glow
   ============================================================================ */

@media (min-width: 1024px) {
  .card--selectable:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 1px var(--color-border-focus);
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}
/**
 * List Component
 * ==============
 * Shared list and list-item styles for menu items, option lists,
 * spell lists, inventory rows, etc.
 * Mobile-first with 48px minimum touch targets.
 *
 * Usage:
 *   <ul class="list">
 *     <li class="list-item list-item--selectable">
 *       <span class="list-item__icon">...</span>
 *       <span class="list-item__content">
 *         <span class="list-item__title">Item Name</span>
 *         <span class="list-item__subtitle">Description</span>
 *       </span>
 *       <span class="list-item__trailing">...</span>
 *     </li>
 *   </ul>
 */

/* ============================================================================
   Base List
   ============================================================================ */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Bordered variant - dividers between items */
.list--bordered .list-item + .list-item {
  border-top: 1px solid var(--color-border-subtle);
}

/* Compact variant - less padding */
.list--compact .list-item {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
}

/* ============================================================================
   List Item
   ============================================================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: 48px; /* Touch target */
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================================================
   List Item Sections
   ============================================================================ */

.list-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  color: var(--color-text-muted);
}

.list-item__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ============================================================================
   Selectable List Items
   ============================================================================ */

.list-item--selectable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.list-item--selectable:hover {
  background: var(--color-bg-tertiary);
}

.list-item--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

/* ============================================================================
   Active List Item
   ============================================================================ */

.list-item--active {
  background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
  color: var(--color-accent-primary);
}

.list-item--active .list-item__icon {
  color: var(--color-accent-primary);
}

/* ============================================================================
   Disabled List Item
   ============================================================================ */

.list-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   Desktop: Compact rows
   ============================================================================ */

@media (min-width: 1024px) {
  .list-item {
    min-height: 36px;
    padding: var(--space-1-5) var(--space-3);
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .list-item--selectable {
    transition: none;
  }
}
/* ==========================================================================
 * Roll Menu Component
 * Click dropdown for dice roll options with advantage/disadvantage
 * Matches the terminal D&D dark theme aesthetic
 * Mobile-friendly with 44px tap targets
 * ========================================================================== */

/* Rollable items indicator */
.rollable {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-sm);
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
}

.rollable:active {
  transform: scale(0.98);
}

/* Roll Action Menu Backdrop (click-outside-to-close) */
.cs-roll-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Roll Action Menu - Floating contextual menu */
.cs-roll-action-menu {
  position: fixed;
  min-width: 200px;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: rollMenuFadeIn 0.12s ease-out;
}

@keyframes rollMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Menu Header */
.cs-roll-action-menu-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-1)) 0 var(--space-1) 0;
}

/* Modifier badge in header */
.cs-roll-modifier-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
}

/* Roll Action Buttons */
.cs-roll-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px; /* Mobile-friendly tap target */
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.cs-roll-action-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.cs-roll-action-btn:active {
  transform: scale(0.98);
  background: rgba(97, 175, 239, 0.15);
}

/* Button icon (dice notation) */
.cs-roll-action-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* Advantage button styling */
.cs-roll-action-btn--advantage .cs-roll-action-btn-icon {
  color: var(--color-accent-secondary);
  border-color: rgba(152, 195, 121, 0.3);
}

.cs-roll-action-btn--advantage:hover {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-roll-action-btn--advantage:hover .cs-roll-action-btn-icon {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.4);
}

/* Disadvantage button styling */
.cs-roll-action-btn--disadvantage .cs-roll-action-btn-icon {
  color: var(--color-accent-error);
  border-color: rgba(224, 108, 117, 0.3);
}

.cs-roll-action-btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

.cs-roll-action-btn--disadvantage:hover .cs-roll-action-btn-icon {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.4);
}

/* Keyboard focus indicator */
.cs-roll-action-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: rgba(97, 175, 239, 0.1);
}

/* Separator between normal roll and adv/dis */
.cs-roll-action-btn--advantage {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: calc(var(--space-2) + var(--space-1));
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .cs-roll-action-menu {
    min-width: 180px;
    max-width: calc(100vw - 20px);
  }

  .cs-roll-action-btn {
    min-height: 48px; /* Slightly larger on mobile */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .rollable:active {
    transform: none;
  }

  .cs-roll-action-menu {
    animation: none;
  }

  @keyframes rollMenuFadeIn {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
}
/* ==========================================================================
 * Effects Display Component
 * Styles for active effects (buffs/debuffs) on character sheet and game log
 * ========================================================================== */

/* Game Log specific - ADV/DIS badges */
.gl-adv-badge,
.gl-dis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-adv-badge {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--accent-success, #4ade80);
}

.gl-dis-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-danger, #ef4444);
}

/* Game Log - Effects display row */
.gl-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.gl-effect-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(147, 112, 219, 0.15);
  border: 1px solid rgba(147, 112, 219, 0.3);
  border-radius: 4px;
  color: var(--accent-magic, #9370db);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Game Log - Modifier breakdown */
.gl-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.gl-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.gl-breakdown-source {
  color: var(--text-muted, #888);
}

.gl-breakdown-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.gl-breakdown-positive {
  color: var(--accent-success, #4ade80);
}

.gl-breakdown-negative {
  color: var(--accent-danger, #ef4444);
}

.gl-breakdown-dice {
  color: var(--accent-warning, #fbbf24);
}

/* Character Sheet - Active Effects Panel */
.cs-effects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-effects-empty {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: 8px 0;
}

.cs-effect-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: border-color 0.15s ease;
}

.cs-effect-item:hover {
  border-color: var(--accent-primary, #4a9eff);
}

.cs-effect-item.buff {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.cs-effect-item.debuff {
  border-left: 3px solid var(--accent-danger, #ef4444);
}

.cs-effect-item.concentration {
  border-left: 3px solid var(--accent-warning, #fbbf24);
}

.cs-effect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 4px;
  flex-shrink: 0;
}

.cs-effect-icon svg {
  width: 16px;
  height: 16px;
}

.cs-effect-content {
  flex: 1;
  min-width: 0;
}

.cs-effect-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.cs-effect-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary, #e0e0e0);
}

.cs-effect-conc-badge {
  padding: 1px 4px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
  text-transform: uppercase;
}

.cs-effect-source {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}

.cs-effect-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-xs);
}

.cs-effect-bonus {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(74, 158, 255, 0.1);
  border-radius: 3px;
  color: var(--accent-primary, #4a9eff);
  font-family: 'JetBrains Mono', monospace;
}

.cs-effect-duration {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 3px;
  color: var(--text-secondary, #888);
}

.cs-effect-affects {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(147, 112, 219, 0.1);
  border-radius: 3px;
  color: var(--accent-magic, #9370db);
}

/* Advantage/Disadvantage indicators on effects */
.cs-effect-advantage,
.cs-effect-disadvantage {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.cs-effect-advantage {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
}

.cs-effect-disadvantage {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .cs-effect-item {
    flex-direction: column;
    gap: 6px;
  }

  .cs-effect-icon {
    width: 24px;
    height: 24px;
  }

  .cs-effect-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
 * State Change Animations (Cross-Panel Synchronization)
 * Provides visual feedback when character state changes
 * ========================================================================== */

/* HP Bar state change animations */
.cs-hp-bar,
.cs-hp-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-hp-bar.hp-damaged,
.cs-hp-display.hp-damaged {
  animation: hp-damage-flash 1.5s ease;
}

.cs-hp-bar.hp-healed,
.cs-hp-display.hp-healed {
  animation: hp-heal-flash 1.5s ease;
}

@keyframes hp-damage-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  }
}

@keyframes hp-heal-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  }
}

/* Condition badge state change animations */
.cs-condition-badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-condition-badge.condition-added {
  animation: condition-appear 1.5s ease;
}

.cs-condition-badge.condition-pulse {
  animation: condition-pulse 2s ease;
}

@keyframes condition-appear {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  30% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes condition-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--accent-warning, #fbbf24);
  }
  50% {
    box-shadow: 0 0 10px 3px var(--accent-warning, #fbbf24);
  }
}

/* Exhaustion display animations */
.cs-exhaustion-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-exhaustion-display.exhaustion-increased {
  animation: exhaustion-increase 1.5s ease;
}

.cs-exhaustion-display.exhaustion-decreased {
  animation: exhaustion-decrease 1.5s ease;
}

@keyframes exhaustion-increase {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
}

@keyframes exhaustion-decrease {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
  }
}

/* Disabled action state (stunned, paralyzed, etc.) */
.rollable.action-disabled,
.cs-skill-item.action-disabled,
.cs-ability-score.action-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(50%);
}

/* No spell slots available */
.cs-spell-chip.no-slots:not(.cantrip),
.cs-spell-item.no-slots:not(.cantrip) {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}

/* ==========================================================================
 * Action Confirmation Animations
 * Visual feedback for successful/failed user actions
 * ========================================================================== */

.action-confirmed {
  animation: actionConfirmedPulse 0.5s ease-out;
}

.action-error {
  animation: actionErrorShake 0.5s ease-out;
}

@keyframes actionConfirmedPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

@keyframes actionErrorShake {
  0%, 100% {
    transform: translateX(0);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .action-confirmed,
  .action-error {
    animation: none;
  }

  .action-confirmed {
    outline: 2px solid rgba(74, 222, 128, 0.6);
    outline-offset: 2px;
  }

  .action-error {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
  }
}
/* ==========================================================================
 * Skill Check Display Component
 * Styles for passive and active skill check entries in the game log
 * ========================================================================== */

/* ========================================
 * BASE SKILL CHECK ENTRY
 * ======================================== */

.gl-entry.skill_check {
  border-left: 3px solid var(--color-accent-primary);
  position: relative;
}

.gl-entry.skill_check .gl-icon {
  color: var(--color-accent-primary);
}

/* ========================================
 * PASSIVE VS ACTIVE VARIANTS
 * ======================================== */

/* Passive Checks - Blue/Perception theme */
.gl-entry.skill_check.passive {
  border-left-color: var(--color-accent-primary);
  background: linear-gradient(
    90deg,
    rgba(97, 175, 239, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.passive .gl-icon {
  color: var(--color-accent-primary);
}

/* Active Checks - Standard interactive styling */
.gl-entry.skill_check.active {
  border-left-color: var(--color-accent-secondary);
  background: linear-gradient(
    90deg,
    rgba(152, 195, 121, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.active .gl-icon {
  color: var(--color-accent-secondary);
}

/* ========================================
 * SUCCESS/FAILURE STATES
 * ======================================== */

.gl-entry.skill_check.success {
  border-left-color: var(--color-accent-secondary);
}

.gl-entry.skill_check.success .gl-icon {
  color: var(--color-accent-secondary);
}

.gl-entry.skill_check.failure {
  border-left-color: var(--color-accent-error);
  background: linear-gradient(
    90deg,
    rgba(224, 108, 117, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.failure .gl-icon {
  color: var(--color-accent-error);
}

/* ========================================
 * CHECK TYPE BADGES
 * ======================================== */

.gl-check-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-check-type-badge.passive {
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  color: var(--color-accent-primary);
}

.gl-check-type-badge.passive::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-eye);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-eye);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.gl-check-type-badge.active {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-check-type-badge.active::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * RESULT BADGES
 * ======================================== */

.gl-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.gl-result-badge.success {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-result-badge.success::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.gl-result-badge.failure {
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  color: var(--color-accent-error);
}

.gl-result-badge.failure::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-x);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-x);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * NATURAL 20 / NATURAL 1 (CRITICAL) STYLING
 * ======================================== */

.gl-entry.skill_check.natural-20 {
  border-left-color: var(--color-gold);
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.1) 0%,
    var(--color-bg-secondary) 50%
  );
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  animation: criticalGlow 2s ease-in-out infinite;
}

.gl-entry.skill_check.natural-20 .gl-icon {
  color: var(--color-gold);
}

.gl-entry.skill_check.natural-20 .gl-result {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

@keyframes criticalGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
  }
}

.gl-entry.skill_check.natural-1 {
  border-left-color: #8b0000;
  background: linear-gradient(
    90deg,
    rgba(139, 0, 0, 0.15) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.natural-1 .gl-icon {
  color: #8b0000;
}

.gl-entry.skill_check.natural-1 .gl-result {
  color: #8b0000;
}

/* Critical badges */
.gl-nat20-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: nat20Pulse 1.5s ease-in-out infinite;
}

@keyframes nat20Pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.gl-nat1-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid #8b0000;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #dc143c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * SKILL CHECK INFO ROW
 * ======================================== */

.gl-check-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.gl-skill-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.gl-check-dc {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.gl-check-dc::before {
  content: "DC ";
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.gl-margin {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.gl-margin.positive {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.gl-margin.positive::before {
  content: "+";
}

.gl-margin.negative {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

/* ========================================
 * ROLL BREAKDOWN
 * ======================================== */

.gl-roll-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.gl-roll-breakdown .roll-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.gl-roll-breakdown .modifier {
  color: var(--color-accent-primary);
}

.gl-roll-breakdown .modifier.positive::before {
  content: "+";
}

.gl-roll-breakdown .total {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  padding-left: 6px;
  border-left: 1px solid var(--color-border-default);
}

/* ========================================
 * MODIFIER BREAKDOWN DISPLAY
 * Shows detailed breakdown like "DEX[+3] + Prof[+2]"
 * ======================================== */

.gl-mod-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--color-accent-primary);
}

.gl-mod-part {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gl-mod-part:hover {
  background: rgba(97, 175, 239, 0.2);
  border-color: rgba(97, 175, 239, 0.4);
  color: var(--color-text-primary);
}

/* Modifier part type-specific colors */
.gl-mod-part[title*="Proficiency"],
.gl-mod-part[title*="proficiency"] {
  background: rgba(152, 195, 121, 0.1);
  border-color: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
}

.gl-mod-part[title*="Proficiency"]:hover,
.gl-mod-part[title*="proficiency"]:hover {
  background: rgba(152, 195, 121, 0.2);
  border-color: rgba(152, 195, 121, 0.4);
}

.gl-mod-part[title*="Expertise"],
.gl-mod-part[title*="expertise"] {
  background: rgba(229, 192, 123, 0.1);
  border-color: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-warning);
}

.gl-mod-part[title*="Expertise"]:hover,
.gl-mod-part[title*="expertise"]:hover {
  background: rgba(229, 192, 123, 0.2);
  border-color: rgba(229, 192, 123, 0.4);
}

.gl-mod-part[title*="Equipment"],
.gl-mod-part[title*="equipment"],
.gl-mod-part[title*="Magic"] {
  background: rgba(198, 120, 221, 0.1);
  border-color: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-purple);
}

.gl-mod-part[title*="Equipment"]:hover,
.gl-mod-part[title*="equipment"]:hover,
.gl-mod-part[title*="Magic"]:hover {
  background: rgba(198, 120, 221, 0.2);
  border-color: rgba(198, 120, 221, 0.4);
}

.gl-mod-part[title*="Effects"],
.gl-mod-part[title*="effects"] {
  background: rgba(86, 182, 194, 0.1);
  border-color: rgba(86, 182, 194, 0.2);
  color: var(--color-accent-cyan);
}

.gl-mod-part[title*="Effects"]:hover,
.gl-mod-part[title*="effects"]:hover {
  background: rgba(86, 182, 194, 0.2);
  border-color: rgba(86, 182, 194, 0.4);
}

/* Plus sign between parts */
.gl-mod-display > .gl-mod-part:not(:last-child)::after {
  content: "+";
  margin-left: 4px;
  color: var(--color-text-muted);
  font-weight: normal;
}

/* ========================================
 * TEMP HP ABSORBED DISPLAY
 * Shows when temporary HP absorbs damage (D&D 5e PHB p.198)
 * ======================================== */

.gl-temp-hp-absorbed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg,
    rgba(86, 182, 194, 0.15) 0%,
    rgba(86, 182, 194, 0.08) 100%
  );
  border: 1px solid rgba(86, 182, 194, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-accent-cyan);
}

.gl-temp-hp-icon {
  font-size: var(--font-size-md);
  filter: drop-shadow(0 0 2px rgba(86, 182, 194, 0.5));
}

.gl-temp-hp-text {
  font-weight: var(--font-weight-medium);
}

/* Animate temp HP absorption for visual feedback */
.gl-temp-hp-absorbed {
  animation: tempHpAbsorb 0.5s ease-out;
}

@keyframes tempHpAbsorb {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gl-temp-hp-absorbed {
    animation: none;
  }
}

/* ========================================
 * AC TOOLTIP AND ATTACK BREAKDOWN
 * Shows detailed AC breakdown on hover (D&D 5e PHB p.14)
 * ======================================== */

.gl-attack-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.gl-ac {
  cursor: help;
  padding: 2px 6px;
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid rgba(224, 108, 117, 0.2);
  border-bottom: 1px dotted var(--color-accent-error);
  border-radius: var(--radius-sm);
  color: var(--color-accent-error);
  font-weight: var(--font-weight-bold);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  /* Enable native multiline tooltip with white-space */
  white-space: pre-line;
}

.gl-ac:hover {
  background: rgba(224, 108, 117, 0.2);
  border-color: rgba(224, 108, 117, 0.4);
  color: var(--color-text-primary);
  transform: scale(1.05);
}

/* Attack result badges */
.gl-attack-result {
  font-weight: var(--font-weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

.gl-attack-result.hit {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-attack-result.miss {
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  color: var(--color-accent-error);
}

/* Natural 20/1 styling for attack rolls */
.gl-attack-breakdown .gl-die-result.natural-20 {
  color: var(--color-gold);
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  font-weight: var(--font-weight-bold);
}

.gl-attack-breakdown .gl-die-result.natural-1 {
  color: #8b0000;
  font-weight: var(--font-weight-bold);
}

.gl-attack-breakdown .gl-die-result.natural-high {
  color: var(--color-accent-secondary);
}

.gl-attack-breakdown .gl-die-result.natural-low {
  color: var(--color-accent-warning);
}

/* Critical hit/fumble attack results */
.gl-attack-result.hit:has(~ .gl-die-result.natural-20),
.gl-attack-breakdown:has(.gl-die-result.natural-20) .gl-attack-result.hit {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border-color: var(--color-gold);
  color: var(--color-gold);
  animation: critPulse 1s ease-in-out infinite;
}

@keyframes critPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.gl-attack-breakdown:has(.gl-die-result.natural-1) .gl-attack-result.miss {
  background: rgba(139, 0, 0, 0.2);
  border-color: #8b0000;
  color: #dc143c;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .gl-attack-breakdown {
    flex-direction: column;
    align-items: flex-start;
  }

  .gl-attack-result {
    margin-top: 4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gl-attack-breakdown:has(.gl-die-result.natural-20) .gl-attack-result.hit {
    animation: none;
  }
}

/* ========================================
 * ROLL-FOR-MORE BUTTON
 * ======================================== */

.gl-roll-for-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.gl-roll-for-more:hover:not(:disabled) {
  background: rgba(97, 175, 239, 0.2);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.gl-roll-for-more:active:not(:disabled) {
  transform: translateY(0);
}

.gl-roll-for-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gl-roll-for-more::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * DM-ONLY VISIBILITY
 * ======================================== */

.gl-entry.gl-dm-only {
  border-left-style: dashed;
  position: relative;
}

.gl-entry.gl-dm-only::after {
  content: "DM";
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Crown icon for DM badge */
.gl-dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-purple);
}

.gl-dm-badge::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-crown);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-crown);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Hide DM-only entries from non-DM view */
body:not(.dm-mode) .gl-entry.gl-dm-only {
  display: none;
}

/* Alternative: show placeholder for hidden checks */
body:not(.dm-mode) .gl-entry.gl-hidden-check {
  opacity: 0.5;
  background: var(--color-bg-tertiary);
  border-left-color: var(--color-border-default);
}

body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-body,
body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-check-info {
  display: none;
}

body:not(.dm-mode) .gl-entry.gl-hidden-check::after {
  content: "The DM made a secret check...";
  display: block;
  padding: 4px 8px;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ========================================
 * PASSIVE SCORE DISPLAY
 * ======================================== */

.gl-passive-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.gl-passive-score::before {
  content: "Passive ";
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * CAN DIG DEEPER INDICATOR
 * ======================================== */

.gl-can-dig-deeper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(229, 192, 123, 0.1);
  border: 1px dashed rgba(229, 192, 123, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
}

.gl-can-dig-deeper::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  mask-image: var(--icon-lightbulb);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-lightbulb);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * RESPONSIVE ADJUSTMENTS
 * ======================================== */

@media (max-width: 480px) {
  .gl-check-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .gl-roll-breakdown {
    flex-wrap: wrap;
  }

  .gl-roll-for-more {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .gl-entry.skill_check.natural-20 {
    animation: none;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  }

  .gl-nat20-badge {
    animation: none;
  }
}
/**
 * Skeleton Loading States
 * =======================
 * Shimmer animations and loading placeholders for panels and content.
 * Uses CSS custom properties for theming consistency.
 */

/* ============================================================================
   Base Skeleton Styles
   ============================================================================ */

.skeleton-container {
  padding: 1rem;
  animation: skeleton-fade-in 0.2s ease-out;
}

@keyframes skeleton-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Base skeleton element with shimmer */
.skeleton-line,
.skeleton-title,
.skeleton-avatar,
.skeleton-icon,
.skeleton-badge,
.skeleton-button,
.skeleton-stat-box,
.skeleton-ability-score,
.skeleton-grid-item,
.skeleton-card-image,
.skeleton-checkbox,
.skeleton-initiative-order,
.skeleton-initiative-hp {
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #1a1a2e) 25%,
    var(--bg-tertiary, #252540) 50%,
    var(--bg-secondary, #1a1a2e) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-title,
  .skeleton-avatar,
  .skeleton-icon,
  .skeleton-badge,
  .skeleton-button,
  .skeleton-stat-box,
  .skeleton-ability-score,
  .skeleton-grid-item,
  .skeleton-card-image,
  .skeleton-checkbox,
  .skeleton-initiative-order,
  .skeleton-initiative-hp {
    animation: none;
    background: var(--bg-secondary, #1a1a2e);
  }
}

/* ============================================================================
   Skeleton Line Variants
   ============================================================================ */

.skeleton-line {
  height: 0.875rem;
  margin-bottom: 0.625rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line--title {
  height: 1.25rem;
  width: 60%;
  margin-bottom: 0.75rem;
}

.skeleton-line--name {
  height: 1.5rem;
  width: 70%;
}

.skeleton-line--subtitle {
  height: 0.75rem;
  width: 50%;
  margin-top: 0.5rem;
}

.skeleton-line--meta {
  height: 0.625rem;
  width: 40%;
}

/* ============================================================================
   Panel Skeleton
   ============================================================================ */

.skeleton-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.skeleton-title {
  height: 1.25rem;
  width: 40%;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #333);
}

.skeleton-button {
  height: 2rem;
  width: 5rem;
  border-radius: 4px;
}

.skeleton-button--small {
  width: 3.5rem;
}

/* ============================================================================
   Character Stats Skeleton
   ============================================================================ */

.skeleton-stats-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.skeleton-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.skeleton-name-block {
  flex: 1;
}

.skeleton-vitals {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.skeleton-stat-box {
  flex: 1;
  height: 3rem;
  border-radius: 6px;
}

.skeleton-abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.skeleton-ability-score {
  height: 3.5rem;
  border-radius: 6px;
}

/* ============================================================================
   List Skeleton
   ============================================================================ */

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ============================================================================
   Card Skeleton
   ============================================================================ */

.skeleton-card {
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-card-image {
  height: 8rem;
  border-radius: 0;
}

.skeleton-card-content {
  padding: 1rem;
}

/* ============================================================================
   Combat Tracker Skeleton
   ============================================================================ */

.skeleton-combat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.skeleton-badge {
  width: 4rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.skeleton-initiative-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skeleton-initiative-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.skeleton-initiative-order {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-initiative-name {
  flex: 1;
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--bg-tertiary, #252540) 25%,
    var(--bg-secondary, #1a1a2e) 50%,
    var(--bg-tertiary, #252540) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-initiative-hp {
  width: 3rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.skeleton-combat-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* ============================================================================
   Tooltip Skeleton
   ============================================================================ */

.skeleton-tooltip {
  padding: 0.75rem;
  min-width: 12rem;
}

.skeleton-tooltip-meta {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* ============================================================================
   Narrative Skeleton
   ============================================================================ */

.skeleton-narrative {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-message {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-message--dm {
  margin-right: 2rem;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.skeleton-message--player {
  margin-left: 2rem;
  text-align: right;
}

.skeleton-message--player .skeleton-line {
  margin-left: auto;
}

/* ============================================================================
   Grid Skeleton
   ============================================================================ */

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(var(--skeleton-columns, 3), 1fr);
  gap: 0.75rem;
}

.skeleton-grid-item {
  aspect-ratio: 1;
  border-radius: 6px;
}

/* ============================================================================
   Quest Log Skeleton
   ============================================================================ */

.skeleton-quest-log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-quest {
  padding: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.skeleton-quest--secondary {
  opacity: 0.6;
  border-left-color: var(--text-muted, #888);
}

.skeleton-quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.skeleton-quest-objectives {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

.skeleton-objective {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skeleton-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ============================================================================
   Loading State Utility
   ============================================================================ */

.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}
/**
 * Unified Renderer Styles
 * =======================
 * Single source of truth for all dynamic rendering:
 * - Tooltips, menus, cards (entity interactions)
 * - Selection grids (choices)
 * - Segments (narrative)
 * - Interactive elements (rolls, actions)
 */

/* ===========================================================================
   Shared
   =========================================================================== */

.unified-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  background: transparent;
}

.unified-loading {
  position: fixed;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-muted);
}

.unified-loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: unified-spin 0.8s linear infinite;
}

@keyframes unified-spin {
  to { transform: rotate(360deg); }
}

/* ===========================================================================
   Tooltip
   =========================================================================== */

.unified-tooltip {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  max-width: 300px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.3));
  font-size: var(--font-size-sm, 13px);
  line-height: 1.4;
  pointer-events: none;
  animation: unified-fade-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.unified-tooltip--below {
  animation-name: unified-fade-in-below;
}

@keyframes unified-fade-in-below {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.unified-tooltip__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1, 4px);
}

.unified-tooltip__title {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.unified-tooltip__subtitle {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
  font-style: italic;
}

.unified-tooltip__body {
  color: var(--text-secondary, #abb2bf);
}

/* ===========================================================================
   Menu
   =========================================================================== */

.unified-menu {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  min-width: 180px;
  max-width: 240px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.4));
  overflow: hidden;
  animation: unified-menu-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-menu-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* When menu flips above the click point */
.unified-menu--above {
  animation-name: unified-menu-in-above;
}

@keyframes unified-menu-in-above {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-menu__header {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-weight: 600;
  font-size: var(--font-size-sm, 13px);
  color: var(--text-primary, #e5e5e5);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.unified-menu__divider {
  height: 1px;
  margin: var(--space-1, 4px) 0;
  background: var(--border-color, #3a3f4b);
}

.unified-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: none;
  background: transparent;
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--timing-instant) var(--ease-default);
}

.unified-menu__item:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
}

.unified-menu__item--danger {
  color: var(--color-error, #cf6068);
}

.unified-menu__item--danger:hover {
  background: var(--color-error-bg, rgba(207, 96, 104, 0.15));
}

.unified-menu__icon {
  display: flex;
  width: 16px;
  height: 16px;
  color: var(--text-muted, #888);
}

.unified-menu__item:hover .unified-menu__icon {
  color: inherit;
}

/* ===========================================================================
   Card
   =========================================================================== */

.unified-card {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: unified-card-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-card-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-card--sm { width: 280px; max-height: 320px; }
.unified-card--md { width: 360px; max-height: 480px; }
.unified-card--lg { width: 480px; max-height: 600px; }

.unified-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-color);
}

.unified-card__header-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
}

.unified-card__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-primary-bg);
  border-radius: var(--radius-md);
  color: var(--accent-primary);
  flex-shrink: 0;
}

.unified-card__titles {
  flex: 1;
  min-width: 0;
}

.unified-card__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.unified-card__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
}

.unified-card__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.unified-card__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.unified-card__body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.unified-card__description {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  line-height: 1.5;
}

.unified-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.unified-card__stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.unified-card__stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.unified-card__stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.unified-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-color);
  background: var(--surface-secondary);
}

.unified-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--timing-instant) var(--ease-default), color var(--timing-instant) var(--ease-default), border-color var(--timing-instant) var(--ease-default);
}

.unified-card__action:hover {
  background: var(--surface-hover);
}

.unified-card__action--primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-card__action--primary:hover {
  background: var(--accent-primary-hover);
}

.unified-card__action--danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.unified-card__action--danger:hover {
  background: var(--color-error-bg);
}

/* Type variants */
.unified-card--npc .unified-card__type-icon { background: var(--color-entity-npc-bg); color: var(--color-entity-npc); }
.unified-card--item .unified-card__type-icon { background: var(--color-entity-item-bg); color: var(--color-entity-item); }
.unified-card--spell .unified-card__type-icon { background: var(--color-entity-spell-bg); color: var(--color-entity-spell); }
.unified-card--location .unified-card__type-icon { background: var(--color-entity-location-bg); color: var(--color-entity-location); }
.unified-card--condition .unified-card__type-icon { background: var(--color-entity-condition-bg); color: var(--color-entity-condition); }

/* ===========================================================================
   Selection Grid
   =========================================================================== */

.unified-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.unified-selection__prompt {
  padding: var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-style: italic;
}

.unified-selection__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.unified-selection__filter {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-selection__filter:hover {
  border-color: var(--accent-primary);
}

.unified-selection__filter--active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-selection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.unified-selection__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-elevated);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
}

.unified-selection__card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.unified-selection__card--selected {
  border-color: var(--accent-primary);
  background: var(--accent-primary-bg);
}

.unified-selection__card--selected::after {
  content: '✓';
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: var(--accent-primary-contrast);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: bold;
}

.unified-selection__info {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  z-index: var(--z-base);
}

.unified-selection__info:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-selection__name {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.unified-selection__desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.unified-selection__badge {
  position: absolute;
  top: calc(-1 * var(--space-1));
  right: var(--space-3);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.unified-selection__badge--beginner { background: var(--color-success-bg); color: var(--color-success); }
.unified-selection__badge--recommended { background: var(--accent-primary-bg); color: var(--accent-primary); }
.unified-selection__badge--dm-suggested { background: var(--color-warning-bg); color: var(--color-warning); }

/* ===========================================================================
   Segments (Narrative)
   =========================================================================== */

.unified-segment {
  margin: var(--space-3) 0;
}

.unified-segment--dialogue {
  padding-left: var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--accent-primary, var(--color-accent-primary)) 50%, transparent);
}

.unified-segment__speaker {
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: var(--space-1);
}

.unified-segment__content {
  color: var(--text-primary);
  line-height: var(--line-height-narrative, 1.75);
}

.unified-segment__content--dialogue {
  font-style: italic;
}

.unified-segment__content--narration {
  color: var(--text-secondary);
}

.unified-segment__content--action {
  color: var(--text-primary);
  font-weight: 500;
}

.unified-segment__content--perception {
  color: var(--color-info);
  padding: var(--space-2);
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
}

/* Entity links in content */
.unified-entity-link {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

.unified-entity-link:hover {
  text-decoration-style: solid;
}

/* ===========================================================================
   Roll Prompt
   =========================================================================== */

.unified-roll-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.unified-roll-prompt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.unified-roll-prompt__skill {
  font-weight: 600;
  color: var(--text-primary);
}

.unified-roll-prompt__dc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.unified-roll-prompt__reason {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.unified-roll-prompt__actions {
  display: flex;
  gap: var(--space-2);
}

.unified-roll-prompt__btn {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--timing-instant) var(--ease-default), color var(--timing-instant) var(--ease-default), border-color var(--timing-instant) var(--ease-default);
}

.unified-roll-prompt__btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

/* ===========================================================================
   Quick Actions
   =========================================================================== */

.unified-quick-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.unified-quick-actions::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .unified-quick-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-1-5);
    padding: var(--space-1);
  }
  .unified-quick-action { flex-shrink: 0; min-width: 0; }
}

.unified-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 32px; /* Touch accessibility - minimum tap target */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-quick-action:hover {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

.unified-quick-action svg {
  width: 14px;
  height: 14px;
}

/* ===========================================================================
   Inline Selection (within narrative text)
   Wiki-link style: highlighted text, not buttons
   =========================================================================== */

.unified-inline-selection {
  display: inline;
}

.inline-selection-options {
  display: inline;
}

/* Wiki-link style: colored text with dotted underline */
.inline-selection-option {
  display: inline;
  padding: 0 2px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #90a959; /* Wiki-link green */
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--timing-fast), background var(--timing-fast);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.inline-selection-option:hover {
  color: #b8d974;
  background: rgba(144, 169, 89, 0.15);
  text-decoration-style: solid;
}

.inline-selection-divider {
  color: var(--text-muted);
  padding: 0 2px;
  opacity: 0.5;
}

/* Selected state - bold and highlighted */
.inline-selection-option--selected {
  color: #b8d974;
  background: rgba(144, 169, 89, 0.2);
  font-weight: 600;
  text-decoration-style: solid;
}

.inline-selection-option--selected:hover {
  background: rgba(144, 169, 89, 0.25);
  cursor: pointer;
}

/* Dimmed state for unselected options after a selection is made */
.inline-selection-option--dimmed {
  opacity: 0.5;
  color: var(--text-muted);
}

.inline-selection-option--dimmed:hover {
  opacity: 1;
  color: #90a959;
}

/* "more..." link styling */
.inline-selection-more {
  font-style: italic;
  color: var(--text-muted);
  text-decoration-style: dashed;
}

.inline-selection-more:hover {
  color: #90a959;
  text-decoration-style: solid;
}

/* ===========================================================================
   Roll Menu (skill/ability/save rolls with advantage/disadvantage)
   =========================================================================== */

.unified-roll-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: rgba(0, 0, 0, 0.4);
}

.unified-roll-menu {
  position: fixed;
  z-index: calc(var(--z-boot) + 1);
  min-width: 220px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", monospace);
  overflow: hidden;
  animation: unified-roll-menu-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-roll-menu-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.unified-roll-menu--above {
  animation-name: unified-roll-menu-in-above;
}

@keyframes unified-roll-menu-in-above {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-roll-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary, #abb2bf);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.unified-roll-menu__title {
  /* Inherits from header */
}

.unified-roll-menu__badge {
  font-size: var(--font-size-sm);
  padding: 2px 8px;
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: 4px;
  color: #61afef;
}

.unified-roll-menu__options {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unified-roll-menu__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-secondary, #282c34);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: 6px;
  color: var(--text-secondary, #abb2bf);
  font-size: var(--font-size-base);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
  /* Mobile-friendly tap target */
  min-height: 44px;
}

.unified-roll-menu__btn:hover {
  background: rgba(97, 175, 239, 0.12);
  border-color: #61afef;
  transform: translateX(2px);
}

.unified-roll-menu__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 4px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #4a5568);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #61afef;
}

.unified-roll-menu__btn-label {
  flex: 1;
  text-align: left;
}

/* Advantage variant */
.unified-roll-menu__btn--advantage {
  border-color: rgba(152, 195, 121, 0.3);
  color: #98c379;
}

.unified-roll-menu__btn--advantage .unified-roll-menu__btn-icon {
  background: rgba(152, 195, 121, 0.1);
  border-color: rgba(152, 195, 121, 0.4);
  color: #98c379;
}

.unified-roll-menu__btn--advantage:hover {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.5);
}

/* Disadvantage variant */
.unified-roll-menu__btn--disadvantage {
  border-color: rgba(224, 108, 117, 0.3);
  color: #e06c75;
}

.unified-roll-menu__btn--disadvantage .unified-roll-menu__btn-icon {
  background: rgba(224, 108, 117, 0.1);
  border-color: rgba(224, 108, 117, 0.4);
  color: #e06c75;
}

.unified-roll-menu__btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.5);
}

/* Sources section (shows what grants advantage/disadvantage) */
.unified-roll-menu__sources {
  padding: 8px 12px;
  border-top: 1px solid var(--border-color, #3a3f4b);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unified-roll-menu__source {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted, #6b7280);
}

.unified-roll-menu__source-icon {
  font-weight: bold;
  width: 12px;
}

.unified-roll-menu__source--advantage {
  color: #98c379;
}

.unified-roll-menu__source--disadvantage {
  color: #e06c75;
}

/* ===========================================================================
   Modal (Full-screen overlay for announcements, custom content)
   =========================================================================== */

.unified-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: unified-modal-backdrop-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.unified-modal {
  position: fixed;
  z-index: calc(var(--z-boot) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  padding: var(--space-4, 16px);
  animation: unified-modal-in var(--timing-normal) var(--ease-out);
}

@keyframes unified-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.unified-modal__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px); /* Mobile Safari */
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Size variants */
.unified-modal--small .unified-modal__card { max-width: 400px; }
.unified-modal--default .unified-modal__card { max-width: 560px; }
.unified-modal--large .unified-modal__card { max-width: 720px; }
.unified-modal--fullscreen .unified-modal__card {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px); /* Mobile Safari */
}

.unified-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
  flex-shrink: 0;
}

.unified-modal__title-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  flex: 1;
}

.unified-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent-primary-bg, rgba(251, 191, 36, 0.15));
  border-radius: var(--radius-md, 8px);
  color: var(--accent-primary, #fbbf24);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.unified-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.unified-modal__subtitle {
  margin: var(--space-1, 4px) 0 0;
  font-size: var(--font-size-sm, 13px);
  color: var(--text-muted, #888);
  font-style: italic;
}

.unified-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  font-size: var(--font-size-3xl);
  line-height: 1;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default);
  flex-shrink: 0;
}

.unified-modal__close:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #e5e5e5);
}

.unified-modal__body {
  flex: 1;
  padding: var(--space-4, 16px);
  overflow-y: auto;
  color: var(--text-secondary, #abb2bf);
  line-height: 1.6;
}

.unified-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-secondary, #282c34);
  border-top: 1px solid var(--border-color, #3a3f4b);
  flex-shrink: 0;
}

.unified-modal__footer--hidden {
  display: none;
}

.unified-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-primary, #1e2127);
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-modal__btn:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--accent-primary, #fbbf24);
}

.unified-modal__btn--primary {
  background: var(--accent-primary, #fbbf24);
  border-color: var(--accent-primary, #fbbf24);
  color: var(--accent-primary-contrast, #000);
}

.unified-modal__btn--primary:hover {
  background: var(--accent-primary-hover, #f59e0b);
}

/* Modal action buttons (used by setButtons) */
.unified-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: transparent;
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #abb2bf);
  font-size: var(--font-size-sm, 13px);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.unified-modal__action:hover:not(:disabled) {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--accent-primary, #fbbf24);
}

.unified-modal__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.unified-modal__action--primary {
  background: var(--accent-primary, #fbbf24);
  border-color: var(--accent-primary, #fbbf24);
  color: var(--accent-primary-contrast, #000);
}

.unified-modal__action--primary:hover:not(:disabled) {
  background: var(--accent-primary-hover, #f59e0b);
}

.unified-modal__action--danger {
  border-color: var(--color-danger, #e74c3c);
  color: var(--color-danger, #e74c3c);
}

.unified-modal__action--danger:hover:not(:disabled) {
  background: var(--color-danger, #e74c3c);
  color: var(--text-on-danger, #fff);
}

/* Loading state for action buttons */
.unified-modal__action--loading {
  position: relative;
  pointer-events: none;
}

.unified-modal__action--loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: unified-spin 0.8s linear infinite;
  margin-right: var(--space-2, 8px);
}

.unified-modal__action--loading .unified-modal__action-text {
  opacity: 0.7;
}

/* ===========================================================================
   VTT Battle Map (ASCII tactical maps)
   =========================================================================== */

.vtt-map {
  margin: var(--space-3, 12px) 0;
  padding: 0;
  background: var(--surface-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.vtt-map-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #252536);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.vtt-map-icon {
  font-size: var(--font-size-xl);
}

.vtt-map-title {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
}

.vtt-map-dimensions {
  padding: 2px 8px;
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: 4px;
  color: #61afef;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.vtt-map-tokens {
  padding: 2px 8px;
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  border-radius: 4px;
  color: #98c379;
  font-size: var(--font-size-sm);
}

.vtt-map-grid {
  margin: 0;
  padding: var(--space-3, 12px);
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", "Cascadia Code", monospace);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--text-secondary, #abb2bf);
  background: var(--surface-primary, #0d1117);
  white-space: pre;
  overflow-x: auto;
  /* Ensure consistent character width for ASCII alignment */
  letter-spacing: 0;
}

/* ASCII map character highlighting */

/* Border/grid characters - subtle, low contrast */
.vtt-border {
  color: #4a4a5a;
}

/* Coordinate labels (row letters, column numbers) */
.vtt-coord {
  color: #6a7080;
  font-weight: 500;
}

/* Player tokens - bright cyan/teal */
.vtt-player {
  color: #56d4dd;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(86, 212, 221, 0.5);
}

/* Enemy tokens - red/orange */
.vtt-enemy {
  color: #e06c75;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(224, 108, 117, 0.4);
}

/* Empty floor cells */
.vtt-floor {
  color: #3a3f4b;
}

/* Wall characters */
.vtt-wall {
  color: #7a8090;
}

/* Legend section */
.vtt-map-legend {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #252536);
  border-top: 1px solid var(--border-color, #3a3f4b);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  line-height: 1.6;
}

.vtt-legend-header {
  color: var(--text-primary, #e5e5e5);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.vtt-player-name {
  color: #56d4dd;
}

.vtt-enemy-name {
  color: #e06c75;
}

/* ===========================================================================
   Mobile Touch Target Improvements
   Increase tap targets to WCAG 44px minimum on mobile devices
   =========================================================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Quick action buttons - increase touch target */
  .unified-quick-action {
    min-height: 44px;
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--font-size-md);
  }

  .unified-quick-action svg {
    width: 18px;
    height: 18px;
  }

  /* Inline selection options - increase tap area with padding */
  .inline-selection-option {
    padding: var(--space-1) var(--space-2);
    margin: 0 var(--space-1);
    border-radius: var(--radius-sm);
  }

  /* Roll menu options - ensure touch friendly */
  .unified-roll-option {
    min-height: 44px;
    padding: var(--space-3);
  }

  /* Entity action menu items */
  .unified-entity-actions button,
  .unified-entity-action {
    min-height: 44px;
    padding: var(--space-3);
  }
}
/**
 * Empty State Styles
 * ==================
 * Contextual empty state messages for panels with no content.
 * Provides helpful guidance rather than blank space.
 */

/* ============================================================================
   Base Empty State
   ============================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 12rem;
  animation: empty-state-fade-in 0.3s ease-out;
}

@keyframes empty-state-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .empty-state {
    animation: none;
  }
}

/* ============================================================================
   Icon
   ============================================================================ */

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--bg-tertiary, #252540);
  color: var(--text-muted, #888);
  opacity: 0.6;
}

.empty-state__icon svg {
  width: 2rem;
  height: 2rem;
}

/* ============================================================================
   Text Content
   ============================================================================ */

.empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  letter-spacing: -0.01em;
}

.empty-state__subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  max-width: 28ch;
  line-height: 1.5;
}

/* ============================================================================
   Hints List
   ============================================================================ */

.empty-state__hints {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: 24rem;
}

.empty-state__hint {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
  line-height: 1.4;
}

.empty-state__hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color, #8b5cf6);
  opacity: 0.5;
}

/* ============================================================================
   Action Button
   ============================================================================ */

.empty-state__action {
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--accent-color, #8b5cf6);
  background: transparent;
  color: var(--accent-color, #8b5cf6);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.empty-state__action:hover {
  background: var(--accent-color, #8b5cf6);
  color: var(--bg-primary, #0d0d1a);
}

.empty-state__action:focus-visible {
  outline: 2px solid var(--accent-color, #8b5cf6);
  outline-offset: 2px;
}

/* ============================================================================
   Welcome Variant
   ============================================================================ */

.empty-state--welcome {
  min-height: 16rem;
  padding: 2.5rem 2rem;
}

.empty-state--welcome .empty-state__title {
  font-size: 1.5rem;
  color: var(--accent-color, #8b5cf6);
}

.empty-state--welcome .empty-state__subtitle {
  max-width: 36ch;
  font-size: 1rem;
}

.empty-state__quick-start {
  width: 100%;
  max-width: 24rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  text-align: left;
}

.empty-state__quick-start h4 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

/* ============================================================================
   Container Utility
   ============================================================================ */

.has-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   Compact Variant (for smaller panels)
   ============================================================================ */

.empty-state--compact {
  padding: 1rem;
  min-height: 8rem;
}

.empty-state--compact .empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
}

.empty-state--compact .empty-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.empty-state--compact .empty-state__title {
  font-size: 0.9375rem;
}

.empty-state--compact .empty-state__subtitle {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

.empty-state--compact .empty-state__hints {
  display: none;
}

/* ============================================================================
   Inline Variant (for inline messages within panels)
   ============================================================================ */

.empty-state--inline {
  flex-direction: row;
  text-align: left;
  padding: 1rem;
  min-height: auto;
  gap: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.empty-state--inline .empty-state__icon {
  width: 2rem;
  height: 2rem;
  margin: 0;
  background: transparent;
}

.empty-state--inline .empty-state__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-state--inline .empty-state__title {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.empty-state--inline .empty-state__subtitle {
  font-size: 0.8125rem;
  margin: 0;
}

.empty-state--inline .empty-state__content {
  flex: 1;
}

/* ============================================================================
   Mobile Touch Target for Action Button
   ============================================================================ */

/* Mobile: ensure action button meets 44px touch target */
@media (max-width: 1023px) {
  .empty-state__action {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop: auto-width action button */
@media (min-width: 1024px) {
  .empty-state__action {
    width: auto;
  }
}
/**
 * Shortcuts Overlay Styles
 * ========================
 * Modal overlay for keyboard shortcuts reference.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.shortcuts-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.shortcuts-overlay--visible {
  opacity: 1;
}

.shortcuts-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.shortcuts-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.shortcuts-overlay--visible .shortcuts-modal {
  transform: scale(1) translateY(0);
}

.shortcuts-overlay--closing .shortcuts-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shortcuts-overlay,
  .shortcuts-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shortcuts-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.shortcuts-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================================================
   Sections
   ============================================================================ */

.shortcuts-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.shortcuts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.shortcuts-item__keys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.shortcuts-item__plus {
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  margin: 0 0.125rem;
}

.shortcuts-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.shortcuts-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__hint {
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .shortcuts-modal {
    width: 95%;
    max-height: 90vh;
  }

  .shortcuts-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .shortcuts-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * F1 Contextual Help Overlay Styles
 * ==================================
 * Modal overlay for room-specific help content.
 * Triggered by F1 key anywhere in the app.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.f1-help-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.f1-help-overlay--visible {
  opacity: 1;
}

.f1-help-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.f1-help-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.f1-help-overlay--visible .f1-help-modal {
  transform: scale(1) translateY(0);
}

.f1-help-overlay--closing .f1-help-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f1-help-overlay,
  .f1-help-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.f1-help-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.f1-help-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.f1-help-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.f1-help-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.f1-help-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.f1-help-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Overview text at top */
.f1-help-modal__overview {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

/* ============================================================================
   Sections
   ============================================================================ */

.f1-help-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.f1-help-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Help Items (action + description)
   ============================================================================ */

.f1-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.f1-help-item__action {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-color, #8b5cf6);
  flex-shrink: 0;
}

.f1-help-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Tips Section
   ============================================================================ */

.f1-help-tips {
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  padding: 1rem;
}

.f1-help-tips .f1-help-section__title {
  color: var(--success-color, #4ade80);
}

.f1-help-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.f1-help-tips li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin-bottom: 0.25rem;
}

.f1-help-tips li:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   Footer
   ============================================================================ */

.f1-help-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.f1-help-modal__footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .f1-help-modal {
    width: 95%;
    max-height: 90vh;
  }

  .f1-help-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .f1-help-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * Clipboard Component Styles
 * ==========================
 * Visual feedback for copy-to-clipboard actions.
 */

/* ========================================
 * COPY BUTTON
 * Styled copy button with icon
 * ======================================== */

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.copy-btn:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

.copy-btn:active {
  transform: scale(0.95);
}

.copy-btn__icon {
  font-size: 0.875rem;
}

/* ========================================
 * FEEDBACK STATES
 * Visual feedback when copy succeeds/fails
 * ======================================== */

.clipboard-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
  animation: clipboard-pulse 0.3s ease-out;
}

.clipboard-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
  animation: clipboard-shake 0.3s ease-out;
}

@keyframes clipboard-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes clipboard-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* ========================================
 * INLINE COPY ICON
 * Small icon that appears on hover
 * ======================================== */

.copyable {
  position: relative;
  cursor: pointer;
}

.copyable::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.copyable:hover::after {
  opacity: 0.6;
}

.copyable:active::after {
  opacity: 1;
}

/* ========================================
 * COPY TOOLTIP
 * Shows "Copied!" on successful copy
 * ======================================== */

.copy-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--color-success, #22c55e);
  color: white;
  font-size: 0.6875rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: copy-tooltip-enter 0.2s ease-out forwards;
}

.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-success, #22c55e);
}

@keyframes copy-tooltip-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ========================================
 * COPY CONTEXT MENU ITEM
 * Styled for context menus
 * ======================================== */

.context-menu__item--copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.context-menu__item--copy::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  font-size: 0.875rem;
}

/* ========================================
 * STAT BLOCK COPY
 * For copying character stats, spell info, etc.
 * ======================================== */

.stat-block-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.stat-block:hover .stat-block-copy {
  opacity: 1;
}

.stat-block-copy:hover {
  background: var(--terminal-bg, #0a0a0a);
  color: var(--terminal-text-primary, #e0e0e0);
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .clipboard-success,
  .clipboard-error {
    animation: none;
  }

  .copy-tooltip {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}
/**
 * Help Tooltip Styles
 * ===================
 * Styles for D&D glossary term tooltips.
 */

/* ========================================
 * TERM HIGHLIGHTING
 * ======================================== */

.help-term {
  position: relative;
  border-bottom: 1px dotted var(--color-primary, #4a90e2);
  color: inherit;
  cursor: help;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.help-term:hover,
.help-term:focus {
  border-bottom-style: solid;
  color: var(--color-primary, #4a90e2);
  outline: none;
}

.help-term:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auto-linked terms (less prominent) */
.help-term--auto {
  border-bottom-color: var(--terminal-text-muted, #888);
}

.help-term--auto:hover,
.help-term--auto:focus {
  border-bottom-color: var(--color-primary, #4a90e2);
}

/* ========================================
 * TOOLTIP
 * ======================================== */

.help-tooltip {
  position: fixed;
  z-index: var(--z-sky);
  max-width: 320px;
  min-width: 200px;
  padding: 0.75rem;
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: help-tooltip-enter 0.15s ease-out;
  font-size: 0.875rem;
  line-height: 1.5;
}

@keyframes help-tooltip-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Arrow pointer */
.help-tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--terminal-border, #333);
}

/* Tooltip above element */
.help-tooltip--above::after {
  top: auto;
  bottom: -6px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip--above::before {
  top: auto;
  bottom: -8px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-border, #333);
}

/* ========================================
 * TOOLTIP CONTENT
 * ======================================== */

.help-tooltip__header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.help-tooltip__term {
  font-weight: 600;
  color: var(--color-primary, #4a90e2);
  font-size: 1rem;
}

.help-tooltip__definition {
  margin: 0 0 0.5rem 0;
  color: var(--terminal-text-primary, #e0e0e0);
}

.help-tooltip__example {
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.8125rem;
}

.help-tooltip__example em {
  color: var(--terminal-text-muted, #888);
  font-style: normal;
}

/* ========================================
 * RELATED TERMS
 * ======================================== */

.help-tooltip__related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--terminal-border, #333);
}

.help-tooltip__related-label {
  width: 100%;
  font-size: 0.75rem;
  color: var(--terminal-text-muted, #888);
  margin-bottom: 0.25rem;
}

.help-tooltip__related-term {
  padding: 0.125rem 0.5rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.help-tooltip__related-term:hover,
.help-tooltip__related-term:focus {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
  outline: none;
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .help-tooltip {
    animation: none;
  }
}
/*
 * OOC Adventures Section
 * ======================
 * Styles for the adventure posting board in the OOC sidebar.
 * Players can post "Seeking Adventure" or "Offering Adventure" notices.
 */

/* ===========================================
 * Adventures Section in OOC Sidebar
 * =========================================== */

.ooc-adventures-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ooc-adventure-buttons {
  display: flex;
  gap: var(--space-2);
}

.ooc-adventure-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-size: var(--text-xs);
}

.ooc-adventure-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-btn:active {
  transform: scale(0.98);
}

.ooc-adventure-btn__icon {
  font-size: var(--text-lg);
}

.ooc-adventure-btn__label {
  color: var(--text-secondary);
}

.ooc-adventure-btn--seeking:hover {
  border-color: var(--color-info);
}

.ooc-adventure-btn--offering:hover {
  border-color: var(--color-warning);
}

/* ===========================================
 * Adventure Board (list of posts)
 * =========================================== */

.ooc-adventure-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.ooc-empty-board {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
  margin: 0;
}

/* ===========================================
 * Adventure Card
 * =========================================== */

.ooc-adventure-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.ooc-adventure-card--seeking {
  border-left: 3px solid var(--color-info);
}

.ooc-adventure-card--offering {
  border-left: 3px solid var(--color-warning);
}

.ooc-adventure-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ooc-adventure-card__type-icon {
  font-size: var(--text-sm);
}

.ooc-adventure-card__type-label {
  font-weight: 600;
  color: var(--text-primary);
}

.ooc-adventure-card__author {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.ooc-adventure-card__body {
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.ooc-adventure-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
}

.ooc-adventure-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ooc-adventure-card__btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-card__btn--respond:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.ooc-adventure-card__btn--remove {
  margin-left: auto;
  padding: var(--space-1);
}

.ooc-adventure-card__btn--remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.ooc-adventure-card__btn-icon {
  font-size: var(--text-xs);
}

/* ===========================================
 * Adventure Post Modal
 * =========================================== */

.adventure-post-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: Min(400px, 90vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.adventure-post-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.adventure-post-dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.adventure-post-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.adventure-post-dialog__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.adventure-post-dialog__icon {
  font-size: var(--text-xl);
}

.adventure-post-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post-dialog__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===========================================
 * Adventure Post Form
 * =========================================== */

.adventure-post__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adventure-post__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.adventure-post__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.adventure-post__textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.adventure-post__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.adventure-post__textarea::placeholder {
  color: var(--text-muted);
}

.adventure-post__char-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

.adventure-post__char-count--warning {
  color: var(--color-warning);
}

/* ===========================================
 * Adventure Post Footer
 * =========================================== */

.adventure-post-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.adventure-post__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post__btn--secondary {
  background: transparent;
  color: var(--text-secondary);
}

.adventure-post__btn--secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.adventure-post__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.adventure-post__btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.adventure-post__btn--primary:active {
  transform: scale(0.98);
}
/**
 * Mobile Panel Styles
 * ===================
 * Animations and visual feedback for mobile panel navigation.
 * Used by mobile_panel_controller.js for swipe gestures.
 */

/* ========================================
 * Panel Transition Animations
 * ======================================== */

/* Exit animation - slide out left */
.mobile-panel--exit-left {
  animation: mobilePanelExitLeft 0.15s ease-out forwards;
}

/* Exit animation - slide out right */
.mobile-panel--exit-right {
  animation: mobilePanelExitRight 0.15s ease-out forwards;
}

/* Enter animation - slide in from left */
.mobile-panel--enter-left {
  animation: mobilePanelEnterLeft 0.25s ease-out forwards;
}

/* Enter animation - slide in from right */
.mobile-panel--enter-right {
  animation: mobilePanelEnterRight 0.25s ease-out forwards;
}

@keyframes mobilePanelExitLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

@keyframes mobilePanelExitRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30%);
  }
}

@keyframes mobilePanelEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mobilePanelEnterRight {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
 * Edge Bounce Feedback
 * ======================================== */

.mobile-panel--bounce-left {
  animation: mobilePanelBounceLeft 0.3s ease-out;
}

.mobile-panel--bounce-right {
  animation: mobilePanelBounceRight 0.3s ease-out;
}

@keyframes mobilePanelBounceLeft {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(15px);
  }
  60% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes mobilePanelBounceRight {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-15px);
  }
  60% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ========================================
 * Swipe Progress Indicator
 * ======================================== */

.mobile-swipe-indicator {
  --swipe-progress: 0;

  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: calc(var(--swipe-progress) * 0.9);
  z-index: var(--z-notification);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.1s ease-out;
}

.mobile-swipe-indicator--left {
  right: var(--space-4);
}

.mobile-swipe-indicator--right {
  left: var(--space-4);
}

.mobile-swipe-indicator--disabled {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  opacity: calc(var(--swipe-progress) * 0.3);
}

/* Icon arrows */
.mobile-swipe-indicator--left::before {
  content: '→';
  margin-right: var(--space-2);
}

.mobile-swipe-indicator--right::before {
  content: '←';
  margin-right: var(--space-2);
}

/* ========================================
 * Touch Feedback States
 * ======================================== */

/* Active touch state on buttons */
@media (hover: none) and (pointer: coarse) {
  .mobile-panel-switcher__btn:active {
    transform: scale(0.95);
    background: var(--color-bg-elevated);
  }

  .mobile-panel-switcher__btn.active:active {
    transform: scale(0.95);
  }
}

/* ========================================
 * Pull-to-Navigate Hint
 * ======================================== */

.mobile-nav-hint {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-hint--visible {
  opacity: 1;
}

.mobile-nav-hint__icon {
  display: inline-block;
  margin: 0 var(--space-1);
}

/* ========================================
 * Panel Pagination Dots
 * ======================================== */

.mobile-panel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.mobile-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-default);
  transition: background 0.2s ease;
}

.mobile-panel-dot--active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
}

/* ========================================
 * Safe Area Support (Notched Phones)
 * ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-panel-switcher {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure modals don't get cut off */
  .mobile-mode .detail-modal,
  .mobile-mode .unified-modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ========================================
 * Landscape Orientation
 * ======================================== */

@media (orientation: landscape) and (max-height: 500px) {
  .mobile-panel-switcher {
    padding: 2px 8px;
  }

  .mobile-panel-switcher__btn {
    min-height: 36px;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
  }

  .mobile-panel-switcher__icon {
    display: none; /* Hide icons in cramped landscape mode */
  }
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .mobile-panel--exit-left,
  .mobile-panel--exit-right,
  .mobile-panel--enter-left,
  .mobile-panel--enter-right,
  .mobile-panel--bounce-left,
  .mobile-panel--bounce-right {
    animation: none;
  }

  .mobile-swipe-indicator {
    transition: none;
    opacity: 0.8;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .mobile-panel-switcher__btn {
    border-width: 2px;
  }

  .mobile-panel-switcher__btn.active {
    border-color: white;
    outline: 2px solid white;
    outline-offset: 2px;
  }

  .mobile-swipe-indicator {
    border-width: 2px;
  }
}
/**
 * Mobile Full-Screen Panel Takeover
 * ==================================
 * Panels open as full-screen overlays with a back button on mobile.
 * Slides in from right, swipe-right-to-go-back to dismiss.
 * Panel content is unchanged; only the container changes.
 *
 * Only active on mobile (<1024px). Desktop is unaffected.
 */

/* ========================================
 * Backdrop
 * Semi-transparent overlay behind the panel
 * ======================================== */

.mobile-bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration-slow) ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-sheet-backdrop.open {
  opacity: 1;
}

/* ========================================
 * Full-Screen Panel Overlay
 * ======================================== */

.mobile-bottom-sheet {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile Safari */
  z-index: var(--z-sheet);
  transform: translateX(100%);
  transition: transform var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-bg-primary);
  border-radius: 0;
  box-shadow: -4px 0 var(--radius-xl) rgba(0, 0, 0, 0.3);
  overflow: hidden;
  flex-direction: column;
  /* Safe area padding for notched phones */
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-sheet.open {
  transform: translateX(0);
}

/* Swipe-right-to-close: JS sets --swipe-offset during drag */
.mobile-bottom-sheet.swiping {
  transition: none;
  transform: translateX(var(--swipe-offset, 0px));
}

/* ========================================
 * Back Button Header
 * Top bar with back arrow and panel title
 * ======================================== */

.mobile-bottom-sheet__back-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-sheet__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-bottom-sheet__back-btn:active {
  background: var(--color-bg-tertiary);
  transform: scale(0.96);
}

.mobile-bottom-sheet__back-arrow {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.mobile-bottom-sheet__panel-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
 * Drag Handle (hidden in fullscreen mode, kept for compatibility)
 * ======================================== */

.mobile-bottom-sheet__handle {
  display: none;
}

/* ========================================
 * Panel Content
 * Scrollable area for the panel content
 * ======================================== */

.mobile-bottom-sheet__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Ensure panels inside the overlay fill it properly */
.mobile-bottom-sheet__content .grid-panel,
.mobile-bottom-sheet__content .split-panel {
  display: flex;
  flex: 1;
  opacity: 1;
  transform: none;
  min-height: 100%;
}

/* Injected content from inline panel pop-out */
.mobile-bottom-sheet__injected {
  padding: var(--spacing-md);
  min-height: 100%;
}

/* Hide panel headers inside overlay (the back header is enough) */
.mobile-bottom-sheet__content .grid-panel__header,
.mobile-bottom-sheet__content .split-panel__header {
  display: none;
}

/* ========================================
 * Only display on mobile
 * ======================================== */

@media (max-width: 1023px) {
  .mobile-bottom-sheet {
    display: flex;
  }

  /* Backdrop: always present for transition but MUST NOT block touch events
     when closed. Without pointer-events:none, the invisible backdrop
     (opacity:0, position:fixed, inset:0) intercepts ALL taps (#1268). */
  .mobile-bottom-sheet-backdrop {
    display: flex;
    flex-direction: column;
    pointer-events: none;
  }

  .mobile-bottom-sheet-backdrop.open {
    pointer-events: auto;
  }
}

@media (min-width: 1024px) {
  .mobile-bottom-sheet,
  .mobile-bottom-sheet-backdrop {
    display: none;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-sheet {
    transition: none;
  }

  .mobile-bottom-sheet-backdrop {
    transition: none;
  }
}
/**
 * Hamburger Menu - Mobile Escape Hatches
 * =======================================
 * Slide-out navigation menu for mobile users providing quick access
 * to Settings, Help, Profile, Tech Support, and Return to Lobby.
 *
 * Hidden on desktop (>=768px). Slides in from the right edge.
 */

/* ========================================
 * Hamburger Trigger Button
 * ======================================== */

.hamburger-menu__trigger {
  display: none;
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
  z-index: calc(var(--z-modal) + 10);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.hamburger-menu__trigger:hover,
.hamburger-menu__trigger:active {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.hamburger-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.hamburger-menu__trigger[aria-expanded="true"] {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Backdrop Overlay
 * ======================================== */

.hamburger-menu__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  /* #2089: Explicit fallback ensures full-screen dark backdrop even if
     --overlay-heavy token is missing or unresolved. */
  background: var(--overlay-heavy, rgba(0, 0, 0, 0.6));
  z-index: calc(var(--z-modal) + 11);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal, 0.2s) ease;
  -webkit-tap-highlight-color: transparent;
  /* Backdrop blur adds depth separation between menu and content */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hamburger-menu__backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * Slide-out Panel
 * ======================================== */

.hamburger-menu__panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: calc(var(--z-modal) + 12);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-default);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: env(safe-area-inset-right, 0px);
  flex-direction: column;
}

.hamburger-menu__panel--open {
  transform: translateX(0);
}

/* ========================================
 * Panel Header
 * ======================================== */

.hamburger-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--color-border-subtle);
}

.hamburger-menu__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.hamburger-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.hamburger-menu__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.hamburger-menu__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================
 * Menu Items
 * ======================================== */

.hamburger-menu__items {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}

.hamburger-menu__item {
  margin: 0;
  padding: 0;
}

.hamburger-menu__item-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.hamburger-menu__item-btn:hover,
.hamburger-menu__item-btn:active {
  background: var(--color-bg-hover);
}

.hamburger-menu__item-btn:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.hamburger-menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.hamburger-menu__item-icon svg {
  width: 18px;
  height: 18px;
}

.hamburger-menu__item-label {
  flex: 1;
  min-width: 0;
}

/* Separator between groups */
.hamburger-menu__separator {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) var(--space-4);
}

/* Danger/exit items (Return to Lobby) */
.hamburger-menu__item-btn--danger {
  color: var(--color-accent-warning);
}

.hamburger-menu__item-btn--danger .hamburger-menu__item-icon {
  color: var(--color-accent-warning);
}

/* Warning items (Restart Character Creation) */
.hamburger-menu__item-btn--warning {
  color: var(--color-accent-gold, #f0a500);
}

.hamburger-menu__item-btn--warning .hamburger-menu__item-icon {
  color: var(--color-accent-gold, #f0a500);
}

/* Room-conditional items: hidden by default, JS reveals when in matching room */
[data-room-visible] {
  display: none;
}

[data-room-visible].hamburger-menu__item--visible {
  display: list-item;
}

/* ========================================
 * Mobile-only Visibility
 * ======================================== */

@media (max-width: 767px) {
  .hamburger-menu__trigger {
    display: flex;
  }

  .hamburger-menu__backdrop {
    display: block;
  }

  .hamburger-menu__panel {
    display: flex;
  }
}

/* Desktop: ensure everything stays hidden */
@media (min-width: 768px) {
  .hamburger-menu__trigger,
  .hamburger-menu__backdrop,
  .hamburger-menu__panel {
    display: none;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hamburger-menu__panel {
    transition: none;
  }

  .hamburger-menu__backdrop {
    transition: none;
  }

  .hamburger-menu__trigger {
    transition: none;
  }

  .hamburger-menu__item-btn {
    transition: none;
  }
}
/* ========================================
 * Entity Action Menu
 * ========================================
 * Contextual action popup for clickable entities in narrative.
 * Shows when clicking wiki-links (NPCs, locations, items, etc.)
 */

.entity-action-menu {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 180px;
  max-width: 280px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.1);
  overflow: hidden;
  animation: entityMenuFadeIn 0.15s ease-out;
}

@keyframes entityMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header with entity name */
.entity-action-menu__header {
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  color: #ffd700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider between action groups */
.entity-action-menu__divider {
  height: 1px;
  margin: 4px 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Action button */
.entity-action-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #e0e0e0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.entity-action-menu__item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
}

.entity-action-menu__item:active {
  background: rgba(255, 215, 0, 0.2);
  transform: scale(0.98);
}

/* Icon in action item */
.entity-action-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: var(--font-size-md);
}

/* Type-specific styling for attack action */
.entity-action-menu__item[data-action="attack"] {
  color: #f87171;
}

.entity-action-menu__item[data-action="attack"]:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

/* Type-specific styling for skill checks */
.entity-action-menu__item[data-action="skill_check"] {
  color: #fcd34d;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
}

.entity-action-menu__item[data-action="skill_check"]:hover {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}

/* View details action (secondary) */
.entity-action-menu__item[data-action="inspect"] {
  color: #9ca3af;
  font-size: var(--font-size-sm);
}

.entity-action-menu__item[data-action="inspect"]:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.05);
}

/* Keyboard shortcut hint (right-aligned) */
.entity-action-menu__shortcut {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--color-text-disabled) 30%, transparent);
  border-radius: 3px;
  line-height: 1.4;
}

/* Focus state for keyboard navigation */
.entity-action-menu__item:focus-visible {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
  outline: 1px solid rgba(255, 215, 0, 0.4);
  outline-offset: -1px;
}

/* Submenu indicator arrow */
.entity-action-menu__item--has-submenu::after {
  content: '\u25B8';
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
}

.entity-action-menu__item--has-submenu:hover::after {
  color: var(--color-accent-warning);
}

/* Disabled action */
.entity-action-menu__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
 * Drag & Drop Visual Feedback
 * ======================================== */

/* Drop zone highlight when dragging over valid targets */
.dnd-drop-zone {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dnd-drop-zone--active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
  border-color: var(--color-accent-primary);
}

.dnd-drop-zone--valid {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-accent-secondary) 60%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--color-accent-secondary) 15%, transparent);
}

.dnd-drop-zone--invalid {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
}

/* Ghost element for dragged items */
.dnd-drag-ghost {
  opacity: 0.85;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: var(--z-ceiling);
}

/* Source element while being dragged */
.dnd-dragging-source {
  opacity: 0.3;
}

/* Mobile adjustments - WCAG 44px touch targets */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .entity-action-menu {
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }

  .entity-action-menu__header {
    padding: 14px 16px;
  }

  .entity-action-menu__item {
    min-height: 44px;
    padding: 12px 16px;
    font-size: var(--font-size-md);
  }

  .entity-action-menu__icon {
    width: 24px;
    font-size: var(--font-size-lg);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .entity-action-menu {
    animation: none;
  }
}
/*
 * Name Selection Component
 * ========================
 * Inline name selection during character creation.
 * Features: suggestion cards, custom input, refresh button.
 */

.name-selection-inline {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin: var(--space-md) 0;
  max-width: 600px;
}

.name-selection__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.name-selection__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.name-selection__suggest-btn {
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.name-selection__suggest-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.name-selection__suggest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.name-selection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 500px) {
  .name-selection__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.name-selection__card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name-selection__card:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.name-selection__card--selected {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.name-selection__card--selected:hover:not(:disabled) {
  background: var(--color-accent-primary);
  transform: translateY(-1px);
}

.name-selection__card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.name-selection__input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.name-selection__input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.name-selection__input::placeholder {
  color: var(--color-text-muted);
}

.name-selection__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.name-selection__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.name-selection__confirm-btn {
  background: var(--color-accent-secondary);
  border: none;
  border-radius: 4px;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.name-selection__confirm-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.name-selection__confirm-btn:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Confirmed state - subtle visual feedback */
.name-selection--confirmed {
  opacity: 0.7;
  pointer-events: none;
}

.name-selection--confirmed .name-selection__confirm-btn {
  background: var(--color-accent-secondary);
  color: var(--color-text-inverse);
}

/*
 * Name Custom Input Row
 * =====================
 * Appears below masonry name cards in the new unified selection flow.
 * Provides custom name input and "suggest new" functionality.
 */

.name-custom-input-row {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 800px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.name-custom-input-row__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.name-custom-input-row__input-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.name-custom-input-row__input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.name-custom-input-row__input::placeholder {
  color: var(--color-text-muted);
}

.name-custom-input-row__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.name-custom-input-row__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.name-custom-input-row__confirm-btn {
  background: var(--color-accent-secondary);
  border: none;
  border-radius: 4px;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.name-custom-input-row__confirm-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.name-custom-input-row__confirm-btn:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Confirmed state */
.name-custom-input-row--confirmed {
  opacity: 0.7;
  pointer-events: none;
}
/* Novel Discovery Notification Styles
 * Used for emergent achievement notifications (James Bond quip system)
 */

.novel-discovery {
  --discovery-color: var(--color-text-muted);
  --discovery-border: var(--color-border);
  --discovery-bg: var(--color-surface-elevated);

  background: var(--discovery-bg);
  border: 1px solid var(--discovery-border);
  border-left: 3px solid var(--discovery-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin: var(--spacing-sm) 0;
  animation: discovery-appear 0.5s ease-out;
}

@keyframes discovery-appear {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Rarity variants */
.novel-discovery--mythic {
  --discovery-color: #ff4081;
  --discovery-border: rgba(255, 64, 129, 0.5);
  --discovery-bg: rgba(255, 64, 129, 0.08);
  animation: discovery-appear 0.5s ease-out, mythic-shimmer 3s ease-in-out infinite;
}

.novel-discovery--legendary {
  --discovery-color: #ffd700;
  --discovery-border: rgba(255, 215, 0, 0.5);
  --discovery-bg: rgba(255, 215, 0, 0.08);
}

.novel-discovery--epic {
  --discovery-color: #9c27b0;
  --discovery-border: rgba(156, 39, 176, 0.5);
  --discovery-bg: rgba(156, 39, 176, 0.08);
}

.novel-discovery--rare {
  --discovery-color: #2196f3;
  --discovery-border: rgba(33, 150, 243, 0.5);
  --discovery-bg: rgba(33, 150, 243, 0.08);
}

.novel-discovery--common {
  --discovery-color: #4caf50;
  --discovery-border: rgba(76, 175, 80, 0.3);
  --discovery-bg: rgba(76, 175, 80, 0.05);
}

.novel-discovery--trivial {
  --discovery-color: var(--color-text-muted);
  --discovery-border: var(--color-border);
  --discovery-bg: var(--color-surface);
}

@keyframes mythic-shimmer {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 64, 129, 0.5);
  }
}

.novel-discovery__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.novel-discovery__icon {
  color: var(--discovery-color);
  font-size: var(--font-size-md);
}

.novel-discovery__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.novel-discovery__first-badge {
  background: var(--discovery-color);
  color: var(--color-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: auto;
}

.novel-discovery__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--discovery-color);
  margin-bottom: var(--spacing-xs);
}

.novel-discovery__description {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.novel-discovery__quip {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.novel-discovery__character {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

/* Pack reveal styles (for next-login card animation) */
.novel-discovery-pack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.novel-discovery-pack__header {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

.novel-discovery-pack__count {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.novel-discovery-pack__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}
/* ==========================================================================
 * Equipment Comparison Tooltip
 * Shows stat deltas when comparing equipment items
 * ========================================================================== */

.equipment-comparison {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 240px;
  max-width: 320px;
  background: var(--color-bg-elevated, #2a2a4a);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: var(--space-3, 12px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-fast, 0.15s) ease-out, transform var(--transition-fast, 0.15s) ease-out;
  pointer-events: auto;
}

.equipment-comparison--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.equipment-comparison__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
}

.equipment-comparison__header--new {
  justify-content: space-between;
}

.equipment-comparison__item-name {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-primary, #6366f1);
  font-size: var(--font-size-base, 14px);
}

.equipment-comparison__vs {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

.equipment-comparison__equipped-name {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #a0a0c0);
  font-size: var(--font-size-base, 14px);
}

.equipment-comparison__new-label {
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}

/* Stats Grid */
.equipment-comparison__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.equipment-comparison__stat {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3, 12px);
  font-size: var(--font-size-sm, 12px);
}

.equipment-comparison__stat-label {
  color: var(--color-text-muted, #888);
}

.equipment-comparison__stat-value {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: var(--font-weight-medium, 500);
  text-align: right;
  min-width: 60px;
}

/* Delta Indicator */
.equipment-comparison__delta {
  min-width: 50px;
  text-align: right;
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.equipment-comparison__delta--positive {
  color: var(--accent-success, #4ade80);
}

.equipment-comparison__delta--positive::before {
  content: "↑ ";
}

.equipment-comparison__delta--negative {
  color: var(--accent-danger, #ef4444);
}

.equipment-comparison__delta--negative::before {
  content: "↓ ";
}

/* Verdict */
.equipment-comparison__verdict {
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  text-align: center;
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 6px);
}

.equipment-comparison__verdict--better {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.equipment-comparison__verdict--worse {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.equipment-comparison__verdict--neutral {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* ==========================================================================
 * Equipment Comparison Panel (in-panel mode)
 * Grid panel variant for side-by-side comparison in inventory/loot flows
 * ========================================================================== */

.equipment-comparison-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equipment-comparison-panel__header {
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
}

.equipment-comparison-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e0e0e0);
}

.equipment-comparison-panel__title .svg-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-primary, #6366f1);
}

.equipment-comparison-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.equipment-comparison-panel__columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}

.equipment-comparison-panel__column {
  min-width: 0;
}

.equipment-comparison-panel__divider {
  display: flex;
  align-items: center;
  padding: 0 var(--space-1, 4px);
}

.equipment-comparison-panel__vs {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

.equipment-comparison-panel__stats {
  margin-bottom: var(--space-3, 12px);
}

.equipment-comparison-panel__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-default, #3a3a5a);
}

/* Panel modal closing animation */
.equipment-comparison-modal--closing {
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s) ease-out;
}

/* Item column styling (shared between tooltip and panel) */
.equipment-comparison__item-column {
  padding: var(--space-2, 8px);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.03));
}

.equipment-comparison__item-column--equipped {
  border-left: 2px solid var(--accent-primary, #6366f1);
}

.equipment-comparison__item-header {
  margin-bottom: var(--space-2, 8px);
}

.equipment-comparison__equipped-badge {
  display: inline-block;
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  margin-top: var(--space-1, 4px);
}

.equipment-comparison__item-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.equipment-comparison__meta-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm, 12px);
}

.equipment-comparison__meta-label {
  color: var(--color-text-muted, #888);
}

.equipment-comparison__meta-value {
  color: var(--color-text-secondary, #a0a0c0);
}

.equipment-comparison__empty {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
}

/* Properties tags */
.equipment-comparison__properties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
}

.equipment-comparison__property {
  font-size: var(--font-size-xs, 10px);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #a0a0c0);
}

.equipment-comparison__property--magic {
  color: var(--accent-info, #60a5fa);
  background: rgba(96, 165, 250, 0.1);
}

.equipment-comparison__property--cursed {
  color: var(--accent-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.equipment-comparison__property--attuned {
  color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
}

.equipment-comparison__property--attunement {
  color: var(--accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.equipment-comparison__property--charges {
  color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

/* Stat grid for panel mode */
.equipment-comparison__stat-header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted, #888);
}

.equipment-comparison__stat-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  font-size: var(--font-size-sm, 12px);
  align-items: center;
}

.equipment-comparison__stat-row:nth-child(even) {
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.02));
  border-radius: var(--radius-sm, 4px);
  padding-left: var(--space-1, 4px);
  padding-right: var(--space-1, 4px);
}

.equipment-comparison__no-stats {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
}

/* Rarity color coding */
.equipment-comparison__rarity--common { color: var(--color-text-secondary, #a0a0c0); }
.equipment-comparison__rarity--uncommon { color: var(--accent-success, #4ade80); }
.equipment-comparison__rarity--rare { color: var(--accent-info, #60a5fa); }
.equipment-comparison__rarity--very_rare { color: var(--accent-primary, #6366f1); }
.equipment-comparison__rarity--legendary { color: var(--accent-warning, #f59e0b); }
.equipment-comparison__rarity--artifact { color: var(--accent-danger, #ef4444); }

/* Mobile adjustments */
@media (max-width: 640px) {
  .equipment-comparison {
    max-width: calc(100vw - 32px);
    min-width: 200px;
  }

  .equipment-comparison-panel__columns {
    grid-template-columns: 1fr;
  }

  .equipment-comparison-panel__divider {
    justify-content: center;
    padding: var(--space-1, 4px) 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .equipment-comparison {
    transition: opacity 0.1s ease;
    transform: none;
  }
}
/* Equipment Sets Component */
/* Quick-swap equipment loadouts for characters */
/* Class prefix: equipment-set__ (hyphen, not underscore) to match Stimulus controller */

.equipment-set {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.equipment-set__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-set__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.equipment-set__title svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* List Container */
.equipment-set__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-sm);
  min-height: 40px;
}

/* Loading State (rendered by JS) */
.equipment-set__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.equipment-set__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: equipment-set-spin 0.8s linear infinite;
}

@keyframes equipment-set-spin {
  to { transform: rotate(360deg); }
}

/* Empty State (rendered by JS) */
.equipment-set__empty {
  text-align: center;
  padding: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.equipment-set__empty p {
  margin: 0;
}

/* Individual Set Item (rendered by JS) */
.equipment-set__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-set__item:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary-muted, var(--color-border));
}

.equipment-set__item--active {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-input-bg));
}

/* Activate Button */
.equipment-set__activate-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
  min-width: 0;
}

.equipment-set__activate-btn:hover:not(:disabled) {
  color: var(--color-primary);
}

.equipment-set__activate-btn:disabled {
  cursor: default;
}

.equipment-set__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.equipment-set__icon svg {
  width: 14px;
  height: 14px;
}

.equipment-set__item--active .equipment-set__icon {
  color: var(--color-success);
}

.equipment-set__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.equipment-set__count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Delete Button */
.equipment-set__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.equipment-set__item:hover .equipment-set__delete-btn {
  opacity: 1;
}

.equipment-set__delete-btn:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-error, #fff);
}

.equipment-set__delete-btn svg {
  width: 12px;
  height: 12px;
}

/* Create New Set */
.equipment-set__create {
  display: flex;
  gap: var(--spacing-xs);
}

.equipment-set__name-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  min-width: 0;
}

.equipment-set__name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.equipment-set__name-input::placeholder {
  color: var(--color-text-muted);
}

.equipment-set__create-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-success);
  color: var(--color-on-success, #fff);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.equipment-set__create-btn:hover {
  filter: brightness(1.1);
}

.equipment-set__create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.equipment-set__create-btn svg {
  width: 12px;
  height: 12px;
}

/* Responsive */
@media (max-width: 400px) {
  .equipment-set__create {
    flex-direction: column;
  }

  .equipment-set__create-btn {
    justify-content: center;
  }
}
/**
 * Rich Tooltip Styles
 * ===================
 * Unified tooltip system for displaying rich contextual information.
 * Supports: terms, abilities, skills, items, spells, conditions, features.
 */

/* ========================================
 * TRIGGER ELEMENT
 * ======================================== */

.rich-tooltip-trigger {
  position: relative;
  border-bottom: 1px dotted var(--color-accent-primary, #5a9fd8);
  color: inherit;
  cursor: help;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.rich-tooltip-trigger:hover,
.rich-tooltip-trigger:focus {
  border-bottom-style: solid;
  color: var(--color-accent-primary, #5a9fd8);
  outline: none;
}

.rich-tooltip-trigger:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Touch devices: tap highlight */
@media (hover: none) {
  .rich-tooltip-trigger {
    border-bottom-style: solid;
    border-bottom-width: 2px;
  }
}

/* ========================================
 * TOOLTIP BASE
 * ======================================== */

.rich-tooltip {
  position: fixed;
  z-index: var(--z-sky-above);
  min-width: 240px;
  max-width: 360px;
  padding: var(--space-3, 12px);
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--elevation-floating);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: auto;
}

.rich-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Position modifiers */
.rich-tooltip--above {
  transform: translateY(-4px);
}

.rich-tooltip--above.rich-tooltip--visible {
  transform: translateY(0);
}

.rich-tooltip--left {
  transform: translateX(-4px);
}

.rich-tooltip--left.rich-tooltip--visible {
  transform: translateX(0);
}

.rich-tooltip--right {
  transform: translateX(4px);
}

.rich-tooltip--right.rich-tooltip--visible {
  transform: translateX(0);
}

/* ========================================
 * TOOLTIP HEADER
 * ======================================== */

.rich-tooltip__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--terminal-border, #333);
}

.rich-tooltip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-primary-alpha, rgba(90, 159, 216, 0.15));
  border: 1px solid var(--color-accent-primary, #5a9fd8);
  border-radius: var(--radius-md, 6px);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__title {
  flex: 1;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-primary, #5a9fd8);
  font-size: var(--font-size-base, 1rem);
}

.rich-tooltip__subtitle {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * TOOLTIP CONTENT
 * ======================================== */

.rich-tooltip__description {
  margin: 0 0 var(--space-3, 12px) 0;
  color: var(--terminal-text-primary, #e0e0e0);
}

/* Stats grid */
.rich-tooltip__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2, 8px);
}

.rich-tooltip__stat-label {
  color: var(--terminal-text-muted, #888);
  font-size: var(--font-size-xs, 0.75rem);
  flex-shrink: 0;
}

.rich-tooltip__stat-value {
  color: var(--terminal-text-primary, #e0e0e0);
  font-weight: var(--font-weight-medium, 500);
  text-align: right;
  font-size: var(--font-size-sm, 0.875rem);
}

.rich-tooltip__stat-value--positive {
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__stat-value--negative {
  color: var(--accent-danger, #ef4444);
}

/* Effects list */
.rich-tooltip__effects {
  margin: 0 0 var(--space-3, 12px) 0;
  padding: 0;
  list-style: none;
}

.rich-tooltip__effect {
  position: relative;
  padding-left: var(--space-3, 12px);
  margin-bottom: var(--space-1, 4px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
}

.rich-tooltip__effect::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terminal-text-muted, #888);
}

/* Effect types */
.rich-tooltip__effect--positive::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--negative::before {
  background: var(--accent-danger, #ef4444);
}

.rich-tooltip__effect--neutral::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--combat::before {
  background: var(--accent-danger, #ef4444);
}

.rich-tooltip__effect--defense::before {
  background: var(--accent-info, #38bdf8);
}

.rich-tooltip__effect--magic::before {
  background: var(--accent-magic, #a855f7);
}

.rich-tooltip__effect--utility::before,
.rich-tooltip__effect--exploration::before,
.rich-tooltip__effect--social::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--movement::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--note::before {
  background: var(--terminal-text-muted, #888);
}

.rich-tooltip__effect--property::before {
  background: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__effect--attunement::before {
  background: var(--accent-magic, #a855f7);
}

.rich-tooltip__effect--concentration::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--ritual::before {
  background: var(--accent-info, #38bdf8);
}

.rich-tooltip__effect--knowledge::before,
.rich-tooltip__effect--downtime::before {
  background: var(--terminal-text-muted, #888);
}

.rich-tooltip__effect--healing::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--investigation::before {
  background: var(--accent-info, #38bdf8);
}

/* Example section */
.rich-tooltip__example {
  padding: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm, 4px);
  color: var(--terminal-text-secondary, #999);
  font-size: var(--font-size-xs, 0.75rem);
  font-style: italic;
  margin-bottom: var(--space-3, 12px);
}

.rich-tooltip__example-label {
  color: var(--terminal-text-muted, #888);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
}

/* Related items */
.rich-tooltip__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 4px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--terminal-border, #333);
}

.rich-tooltip__related-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  margin-right: var(--space-1, 4px);
}

.rich-tooltip__related-item {
  padding: 2px 6px;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: var(--radius-full, 9999px);
  color: var(--terminal-text-secondary, #999);
  font-size: var(--font-size-xs, 0.75rem);
}

/* ========================================
 * PROPERTY BADGES
 * ======================================== */

.rich-tooltip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-3, 12px);
}

.rich-tooltip__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  color: var(--terminal-text-secondary, #999);
}

/* Badge color variants for weapon properties */
.rich-tooltip__badge--finesse {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__badge--versatile {
  background: rgba(90, 159, 216, 0.15);
  border-color: rgba(90, 159, 216, 0.4);
  color: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__badge--heavy {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--accent-danger, #ef4444);
}

.rich-tooltip__badge--light {
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.4);
  color: var(--accent-warning, #facc15);
}

.rich-tooltip__badge--twohanded {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--accent-magic, #a855f7);
}

.rich-tooltip__badge--reach {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--accent-info, #38bdf8);
}

.rich-tooltip__badge--thrown {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}

.rich-tooltip__badge--loading {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
}

.rich-tooltip__badge--ammunition {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
}

.rich-tooltip__badge--special {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--accent-magic, #a855f7);
}

.rich-tooltip__badge--silvered,
.rich-tooltip__badge--adamantine {
  background: rgba(226, 232, 240, 0.15);
  border-color: rgba(226, 232, 240, 0.4);
  color: #e2e8f0;
}

/* ========================================
 * UPCAST / AT HIGHER LEVELS SECTION
 * ======================================== */

.rich-tooltip__upcast {
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__upcast-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-magic, #a855f7);
  margin-bottom: var(--space-1, 4px);
}

.rich-tooltip__upcast-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
  line-height: 1.4;
}

/* ========================================
 * DM-ONLY SECTION (Future)
 * ======================================== */

.rich-tooltip__dm-section {
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__dm-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-danger, #ef4444);
  margin-bottom: var(--space-1, 4px);
}

.rich-tooltip__dm-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
  line-height: 1.4;
}

/* ========================================
 * COMPARISON SECTION
 * ======================================== */

.rich-tooltip__comparison {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--terminal-border, #333);
}

.rich-tooltip__comparison-header {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  text-align: center;
  margin-bottom: var(--space-2, 8px);
}

.rich-tooltip__comparison-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.rich-tooltip__comparison-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1, 4px) 0;
}

.rich-tooltip__comparison-label {
  color: var(--terminal-text-muted, #888);
  font-size: var(--font-size-xs, 0.75rem);
}

.rich-tooltip__delta {
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.rich-tooltip__delta--positive {
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__delta--positive::before {
  content: "\2191 "; /* Up arrow */
}

.rich-tooltip__delta--negative {
  color: var(--accent-danger, #ef4444);
}

.rich-tooltip__delta--negative::before {
  content: "\2193 "; /* Down arrow */
}

/* Verdict */
.rich-tooltip__verdict {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  text-align: center;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__verdict--better {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.rich-tooltip__verdict--worse {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.rich-tooltip__verdict--neutral {
  background: rgba(90, 159, 216, 0.15);
  color: var(--color-accent-primary, #5a9fd8);
  border: 1px solid rgba(90, 159, 216, 0.3);
}

/* ========================================
 * TYPE-SPECIFIC STYLES
 * ======================================== */

/* Ability scores */
.rich-tooltip--ability .rich-tooltip__header {
  border-bottom-color: var(--color-accent-primary, #5a9fd8);
}

/* Skills */
.rich-tooltip--skill .rich-tooltip__stats {
  background: rgba(90, 159, 216, 0.1);
}

/* Conditions */
.rich-tooltip--condition .rich-tooltip__header {
  border-bottom-color: var(--accent-danger, #ef4444);
}

.rich-tooltip--condition .rich-tooltip__title {
  color: var(--accent-danger, #ef4444);
}

/* Spells */
.rich-tooltip--spell .rich-tooltip__header {
  border-bottom-color: var(--accent-magic, #a855f7);
}

.rich-tooltip--spell .rich-tooltip__title {
  color: var(--accent-magic, #a855f7);
}

/* Items */
.rich-tooltip--item .rich-tooltip__header {
  border-bottom-color: var(--accent-success, #4ade80);
}

/* Features */
.rich-tooltip--feature .rich-tooltip__header {
  border-bottom-color: var(--accent-warning, #facc15);
}

.rich-tooltip--feature .rich-tooltip__title {
  color: var(--accent-warning, #facc15);
}

/* ========================================
 * MOBILE & TOUCH
 * ======================================== */

@media (max-width: 640px) {
  .rich-tooltip {
    max-width: calc(100vw - 32px);
    min-width: 200px;
    font-size: var(--font-size-base, 1rem);
  }

  .rich-tooltip__stats {
    gap: var(--space-1, 4px);
  }

  .rich-tooltip__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .rich-tooltip__stat-value {
    text-align: left;
  }
}

/* Touch devices - larger tap targets */
@media (hover: none) {
  .rich-tooltip__related-item {
    padding: 4px 10px;
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rich-tooltip {
    transition: opacity 0.1s ease;
    transform: none;
  }

  .rich-tooltip--visible {
    transform: none;
  }
}

/* ========================================
 * DARK/LIGHT THEME VARIANTS
 * ======================================== */

[data-theme="light"] .rich-tooltip {
  background: var(--terminal-bg-elevated, #ffffff);
  border-color: var(--terminal-border, #ddd);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .rich-tooltip__stats {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .rich-tooltip__example {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .rich-tooltip__related-item {
  background: var(--terminal-bg, #f8f8f8);
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rich-tooltip {
    transition: opacity 0.05s ease;
    transform: none;
  }

  .rich-tooltip--visible {
    transform: none;
  }

  .rich-tooltip--above,
  .rich-tooltip--left,
  .rich-tooltip--right {
    transform: none;
  }

  .rich-tooltip--above.rich-tooltip--visible,
  .rich-tooltip--left.rich-tooltip--visible,
  .rich-tooltip--right.rich-tooltip--visible {
    transform: none;
  }
}
/**
 * Ability Hexagon Component
 * ==========================
 * Hexagonal radar chart visualization for D&D 5e ability scores.
 * Provides an alternative view to the traditional grid layout.
 */

/* ========================================
 * View Container
 * ======================================== */

/* ========================================
 * Container
 * ======================================== */

.ability-hexagon {
  width: 100%;
  max-width: 320px; /* Increased from 260px — gives the hex display more room to breathe */
  margin: 0 auto;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

.ability-hexagon__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
 * Grid Lines & Axes
 * ======================================== */

.ability-hexagon__grid-line {
  transition: opacity 0.2s ease;
}

.ability-hexagon__grid-line:hover {
  opacity: 0.5;
}

.ability-hexagon__axis {
  pointer-events: none;
}

/* ========================================
 * Character Data Area
 * ======================================== */

.ability-hexagon__character-area {
  transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}

.ability-hexagon:hover .ability-hexagon__character-area {
  fill-opacity: 0.3;
  stroke-width: 3;
}

/* ========================================
 * Vertices (Ability Score Points)
 * ======================================== */

.ability-hexagon__vertex {
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.ability-hexagon__vertex:hover {
  r: 8;
  fill: var(--color-accent-warning);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--color-accent-warning));
}

.ability-hexagon__vertex:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  r: 8;
}

.ability-hexagon__vertex:active {
  r: 7;
  fill: var(--color-accent-primary);
}

/* ========================================
 * Labels
 * ======================================== */

.ability-hexagon__label-group {
  pointer-events: none;
  user-select: none;
}

.ability-hexagon__label-abbr {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ability-hexagon__label-score {
  font-family: var(--font-mono);
}

.ability-hexagon__label-mod {
  font-family: var(--font-mono);
}

/* ========================================
 * Responsive Sizing
 * ======================================== */

@media (max-width: 768px) {
  .ability-hexagon {
    /* Keep max-width constrained on mobile - don't expand to 100% */
    max-width: 280px;
    padding: var(--space-1);
  }
}

@media (max-width: 480px) {
  .ability-hexagon {
    max-width: 240px;
  }

  .ability-hexagon__label-abbr {
    font-size: 8px;
  }

  .ability-hexagon__label-score {
    font-size: 10px;
  }

  .ability-hexagon__label-mod {
    font-size: 8px;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ability-hexagon__character-area,
  .ability-hexagon__vertex {
    transition: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .ability-hexagon {
    border: 2px solid var(--color-accent-primary);
  }

  .ability-hexagon__grid-line {
    stroke-width: 2;
    opacity: 0.5;
  }

  .ability-hexagon__character-area {
    fill-opacity: 0.4;
    stroke-width: 3;
  }

  .ability-hexagon__vertex {
    stroke-width: 3;
  }
}

/* ========================================
 * Dark Mode Enhancements
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .ability-hexagon__character-area {
    fill-opacity: 0.25;
  }

  .ability-hexagon__vertex {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .ability-hexagon {
    break-inside: avoid;
    border: 1px solid #000;
    background: #fff;
  }

  .ability-hexagon__character-area {
    fill: #ccc;
    fill-opacity: 0.3;
    stroke: #000;
    stroke-width: 2;
  }

  .ability-hexagon__grid-line {
    stroke: #666;
  }

  .ability-hexagon__vertex {
    fill: #000;
    stroke: #fff;
  }

  .ability-hexagon__label-abbr,
  .ability-hexagon__label-score,
  .ability-hexagon__label-mod {
    fill: #000;
  }
}
/**
 * Active Quest Widget
 * ===================
 * Right sidebar widget showing active quest objectives with collapsible details.
 * Uses Phase 1 design tokens from: terminal/_tokens.css
 *
 * Features:
 * - Compact by default, expandable for details
 * - Max 3 objectives with progress indicators
 * - Mark objectives complete button
 * - Clear visual hierarchy (quest → objectives → progress)
 * - Mobile responsive
 * - WCAG AA compliant
 *
 * Target Metrics:
 * - Quest objective awareness: +60%
 * - Quest completion rate: +25%
 * - Navigation to quest log: -40%
 */

/* ========================================
 * Base Layout
 * ======================================== */

.active-quest-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-padding);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

/* ========================================
 * Header
 * ======================================== */

.active-quest-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.active-quest-widget__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.active-quest-widget__icon {
  font-size: var(--font-size-base);
  color: var(--color-entity-quest);
}

.active-quest-widget__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-size: var(--font-size-xs);
}

.active-quest-widget__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.active-quest-widget__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================
 * Quest Title Section
 * ======================================== */

.active-quest__quest-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-entity-quest);
  margin: 0;
  line-height: var(--line-height-tight);
}

/* ========================================
 * Progress Bar
 * ======================================== */

.active-quest__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.active-quest__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-quest__progress-text {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.active-quest__progress-bar-container {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.active-quest__progress-bar {
  height: 100%;
  background: var(--color-entity-quest);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
  min-width: 2px;
}

/* ========================================
 * Objectives List
 * ======================================== */

.active-quest__objectives {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.active-quest__objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.active-quest__objective-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 4px;
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  color: transparent;
}

.active-quest__objective-check:hover:not(:disabled) {
  border-color: var(--color-entity-quest);
  background: var(--color-entity-quest-bg);
}

.active-quest__objective-check:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.active-quest__objective-check:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.active-quest__objective--completed .active-quest__objective-check {
  background: var(--color-entity-quest);
  border-color: var(--color-entity-quest);
  color: var(--color-bg-primary);
}

.active-quest__objective-text {
  flex: 1;
  word-wrap: break-word;
}

.active-quest__objective--completed .active-quest__objective-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.active-quest__objective-progress {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Animation for newly completed objectives */
.active-quest__objective--just-completed {
  animation: objective-complete 0.4s ease-out;
}

@keyframes objective-complete {
  0% { background: transparent; }
  50% { background: var(--color-entity-quest-bg); }
  100% { background: transparent; }
}

/* ========================================
 * Collapsible Details
 * ======================================== */

.active-quest__details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.active-quest__details-toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.active-quest__details-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.active-quest__expand-icon {
  transition: transform var(--transition-fast);
  font-size: var(--font-size-xs);
}

.active-quest__details--expanded .active-quest__expand-icon {
  transform: rotate(180deg);
}

.active-quest__details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-normal),
              opacity var(--transition-normal);
}

.active-quest__details--expanded {
  max-height: 500px;
  opacity: 1;
  margin-top: var(--space-2);
}

.active-quest__details-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

/* ========================================
 * Detail Sections
 * ======================================== */

.active-quest__detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.active-quest__detail-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.active-quest__detail-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ========================================
 * Rewards
 * ======================================== */

.active-quest__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.active-quest__reward {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.active-quest__reward--gold {
  color: var(--color-gold);
}

.active-quest__reward--gold::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8860b 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.active-quest__reward--xp {
  color: var(--color-accent-primary);
}

.active-quest__reward--xp::before {
  content: '★';
  font-size: 0.9em;
}

.active-quest__reward--item {
  color: var(--color-accent-warning);
}

.active-quest__reward--item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

/* ========================================
 * Footer Actions
 * ======================================== */

.active-quest__footer {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.active-quest__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.active-quest__view-all:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.active-quest__view-all:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================
 * Empty State
 * ======================================== */

.active-quest__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.active-quest__empty-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-text-muted);
  opacity: 0.5;
}

.active-quest__empty-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.active-quest__empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* ========================================
 * Loading Skeleton
 * ======================================== */

.active-quest__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-padding);
}

.active-quest__skeleton-line {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.5s infinite;
}

.active-quest__skeleton-line--title {
  height: 16px;
  width: 70%;
}

.active-quest__skeleton-line--short {
  width: 80%;
}

.active-quest__skeleton-line--medium {
  width: 90%;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .active-quest-widget {
    padding: var(--space-3);
  }

  .active-quest__objective {
    font-size: var(--font-size-sm);
  }

  .active-quest__details-content {
    padding: var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .active-quest__progress-bar {
    transition: none;
  }

  .active-quest__expand-icon {
    transition: none;
  }

  .active-quest__details {
    transition: none;
  }

  .active-quest__objective--just-completed {
    animation: none;
  }

  .active-quest__skeleton-line {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode Support
 * ======================================== */

@media (prefers-contrast: high) {
  .active-quest__objective-check {
    border-width: 3px;
  }

  .active-quest__progress-bar-container {
    border: 1px solid currentColor;
  }

  .active-quest__details-toggle {
    border-width: 2px;
  }
}
/**
 * Command Palette Styles
 * ======================
 * VS Code-style command palette (Cmd+K / Ctrl+K) for quick command access.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.command-palette-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  transform: none;
}

.command-palette-overlay--visible {
  opacity: 1;
}

.command-palette-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Palette Container
   ============================================================================ */

.command-palette {
  width: 90%;
  max-width: 560px;
  max-height: 60vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.15s ease-out;
}

.command-palette-overlay--visible .command-palette {
  transform: scale(1) translateY(0);
}

.command-palette-overlay--closing .command-palette {
  transform: scale(0.96) translateY(-10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .command-palette-overlay,
  .command-palette {
    transition: none;
  }
}

/* ============================================================================
   Header / Search
   ============================================================================ */

.command-palette__header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
}

.command-palette__search-wrapper:focus-within {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.command-palette__search-wrapper svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.command-palette__search-icon {
  font-size: 1rem;
  color: var(--text-muted, #888);
}

.command-palette__search {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary, #e5e5e5);
  outline: none;
}

.command-palette__search::placeholder {
  color: var(--text-muted, #888);
}

.command-palette__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Command List
   ============================================================================ */

.command-palette__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.875rem;
}

/* ============================================================================
   Command Item
   ============================================================================ */

.command-palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.command-palette__item:hover {
  background: var(--bg-tertiary, #252540);
}

.command-palette__item--selected {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected:hover {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected .command-palette__item-name,
.command-palette__item--selected .command-palette__item-description,
.command-palette__item--selected .command-palette__item-category {
  color: white;
}

.command-palette__item--selected .command-palette__item-icon {
  color: rgba(255, 255, 255, 0.9);
}

.command-palette__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--accent-color, #8b5cf6);
}

.command-palette__item-icon svg {
  width: 1rem;
  height: 1rem;
}

.command-palette__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__item-name {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
}

.command-palette__item-description {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette__item-category {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border-radius: 3px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.command-palette__footer {
  display: flex;
  justify-content: center;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__footer-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.command-palette__footer-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .command-palette-overlay {
    padding-top: 5vh;
  }

  .command-palette {
    width: 95%;
    max-height: 70vh;
  }

  .command-palette__item-description {
    display: none;
  }

  .command-palette__item-content {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ============================================================================
   Fuzzy Match Highlights
   ============================================================================ */

.command-palette__highlight {
  background: rgba(139, 92, 246, 0.3);
  color: var(--accent-color, #a78bfa);
  border-radius: 2px;
  padding: 0 1px;
}

.command-palette__item--selected .command-palette__highlight {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ============================================================================
   Scrollbar
   ============================================================================ */

.command-palette__list::-webkit-scrollbar {
  width: 6px;
}

.command-palette__list::-webkit-scrollbar-track {
  background: transparent;
}

.command-palette__list::-webkit-scrollbar-thumb {
  background: var(--border-color, #333);
  border-radius: 3px;
}

.command-palette__list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #555);
}
/*
 * D&D 5e Damage Type Badges
 * ==========================
 * Visual distinction for all 13 damage types with PHB-accurate colors.
 *
 * Usage:
 *   <span class="damage-badge damage-badge--fire">Fire</span>
 *   <span class="damage-badge damage-badge--cold">Cold</span>
 *
 * Data attribute variant:
 *   <span class="damage-badge" data-damage-type="fire">Fire</span>
 */

.damage-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* Fire Damage */
.damage-badge--fire,
.damage-badge[data-damage-type="fire"] {
  background: color-mix(in srgb, var(--dmg-fire) 15%, transparent);
  color: var(--dmg-fire);
  border: 1px solid var(--dmg-fire);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-fire) 20%, transparent);
}

.damage-badge--fire:hover,
.damage-badge[data-damage-type="fire"]:hover {
  background: color-mix(in srgb, var(--dmg-fire) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-fire) 40%, transparent);
}

/* Cold Damage */
.damage-badge--cold,
.damage-badge[data-damage-type="cold"] {
  background: color-mix(in srgb, var(--dmg-cold) 15%, transparent);
  color: var(--dmg-cold);
  border: 1px solid var(--dmg-cold);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-cold) 20%, transparent);
}

.damage-badge--cold:hover,
.damage-badge[data-damage-type="cold"]:hover {
  background: color-mix(in srgb, var(--dmg-cold) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-cold) 40%, transparent);
}

/* Lightning Damage */
.damage-badge--lightning,
.damage-badge[data-damage-type="lightning"] {
  background: color-mix(in srgb, var(--dmg-lightning) 15%, transparent);
  color: var(--dmg-lightning);
  border: 1px solid var(--dmg-lightning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-lightning) 20%, transparent);
}

.damage-badge--lightning:hover,
.damage-badge[data-damage-type="lightning"]:hover {
  background: color-mix(in srgb, var(--dmg-lightning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-lightning) 40%, transparent);
}

/* Acid Damage */
.damage-badge--acid,
.damage-badge[data-damage-type="acid"] {
  background: color-mix(in srgb, var(--dmg-acid) 15%, transparent);
  color: var(--dmg-acid);
  border: 1px solid var(--dmg-acid);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-acid) 20%, transparent);
}

.damage-badge--acid:hover,
.damage-badge[data-damage-type="acid"]:hover {
  background: color-mix(in srgb, var(--dmg-acid) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-acid) 40%, transparent);
}

/* Poison Damage */
.damage-badge--poison,
.damage-badge[data-damage-type="poison"] {
  background: color-mix(in srgb, var(--dmg-poison) 15%, transparent);
  color: var(--dmg-poison);
  border: 1px solid var(--dmg-poison);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-poison) 20%, transparent);
}

.damage-badge--poison:hover,
.damage-badge[data-damage-type="poison"]:hover {
  background: color-mix(in srgb, var(--dmg-poison) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-poison) 40%, transparent);
}

/* Necrotic Damage */
.damage-badge--necrotic,
.damage-badge[data-damage-type="necrotic"] {
  background: color-mix(in srgb, var(--dmg-necrotic) 15%, transparent);
  color: var(--dmg-necrotic);
  border: 1px solid var(--dmg-necrotic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-necrotic) 20%, transparent);
}

.damage-badge--necrotic:hover,
.damage-badge[data-damage-type="necrotic"]:hover {
  background: color-mix(in srgb, var(--dmg-necrotic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-necrotic) 40%, transparent);
}

/* Radiant Damage */
.damage-badge--radiant,
.damage-badge[data-damage-type="radiant"] {
  background: color-mix(in srgb, var(--dmg-radiant) 15%, transparent);
  color: var(--dmg-radiant);
  border: 1px solid var(--dmg-radiant);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-radiant) 20%, transparent);
}

.damage-badge--radiant:hover,
.damage-badge[data-damage-type="radiant"]:hover {
  background: color-mix(in srgb, var(--dmg-radiant) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-radiant) 40%, transparent);
}

/* Force Damage */
.damage-badge--force,
.damage-badge[data-damage-type="force"] {
  background: color-mix(in srgb, var(--dmg-force) 15%, transparent);
  color: var(--dmg-force);
  border: 1px solid var(--dmg-force);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-force) 20%, transparent);
}

.damage-badge--force:hover,
.damage-badge[data-damage-type="force"]:hover {
  background: color-mix(in srgb, var(--dmg-force) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-force) 40%, transparent);
}

/* Psychic Damage */
.damage-badge--psychic,
.damage-badge[data-damage-type="psychic"] {
  background: color-mix(in srgb, var(--dmg-psychic) 15%, transparent);
  color: var(--dmg-psychic);
  border: 1px solid var(--dmg-psychic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-psychic) 20%, transparent);
}

.damage-badge--psychic:hover,
.damage-badge[data-damage-type="psychic"]:hover {
  background: color-mix(in srgb, var(--dmg-psychic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-psychic) 40%, transparent);
}

/* Thunder Damage */
.damage-badge--thunder,
.damage-badge[data-damage-type="thunder"] {
  background: color-mix(in srgb, var(--dmg-thunder) 15%, transparent);
  color: var(--dmg-thunder);
  border: 1px solid var(--dmg-thunder);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-thunder) 20%, transparent);
}

.damage-badge--thunder:hover,
.damage-badge[data-damage-type="thunder"]:hover {
  background: color-mix(in srgb, var(--dmg-thunder) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-thunder) 40%, transparent);
}

/* Bludgeoning Damage */
.damage-badge--bludgeoning,
.damage-badge[data-damage-type="bludgeoning"] {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 15%, transparent);
  color: var(--dmg-bludgeoning);
  border: 1px solid var(--dmg-bludgeoning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-bludgeoning) 20%, transparent);
}

.damage-badge--bludgeoning:hover,
.damage-badge[data-damage-type="bludgeoning"]:hover {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-bludgeoning) 40%, transparent);
}

/* Piercing Damage */
.damage-badge--piercing,
.damage-badge[data-damage-type="piercing"] {
  background: color-mix(in srgb, var(--dmg-piercing) 15%, transparent);
  color: var(--dmg-piercing);
  border: 1px solid var(--dmg-piercing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-piercing) 20%, transparent);
}

.damage-badge--piercing:hover,
.damage-badge[data-damage-type="piercing"]:hover {
  background: color-mix(in srgb, var(--dmg-piercing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-piercing) 40%, transparent);
}

/* Slashing Damage */
.damage-badge--slashing,
.damage-badge[data-damage-type="slashing"] {
  background: color-mix(in srgb, var(--dmg-slashing) 15%, transparent);
  color: var(--dmg-slashing);
  border: 1px solid var(--dmg-slashing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-slashing) 20%, transparent);
}

.damage-badge--slashing:hover,
.damage-badge[data-damage-type="slashing"]:hover {
  background: color-mix(in srgb, var(--dmg-slashing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-slashing) 40%, transparent);
}

/* Size Variants */
.damage-badge--sm {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 9px;
}

.damage-badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Accessibility: Focus states */
.damage-badge:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/*
 * D&D Decorative Borders (Rick Rubin Pass)
 * =========================================
 * Simplified from ornamental corner brackets to clean gradient borders.
 * Fantasy feel preserved through color, not chrome.
 *
 * Variants:
 *   .dnd-border--gold      Gold/amber (character sheets, achievements)
 *   .dnd-border--stone     Gray stone (dungeon/combat panels)
 *   .dnd-border--parchment Warm tan (narrative, lore, quests)
 *   .dnd-border--magic     Purple/blue (spell panels)
 *   .dnd-border--wooden    Brown (inventory, merchant)
 *   .dnd-border--filigree  Top/bottom gradient lines
 */

/* ========================================
 * Gold Border — character sheets, achievements
 * ======================================== */

.dnd-border--gold {
  border: 1px solid color-mix(in srgb, var(--color-gold, #e8c44a) 40%, transparent);
}

/* ========================================
 * Stone Border — combat, dungeon panels
 * ======================================== */

.dnd-border--stone {
  border: 1px solid color-mix(in srgb, #787878 30%, transparent);
}

/* ========================================
 * Parchment Border — narrative, lore, quests
 * ======================================== */

.dnd-border--parchment {
  border: 1px solid color-mix(in srgb, var(--color-accent-warning, #d4b06e) 25%, transparent);
}

/* ========================================
 * Magic Border — spellbook, spell panels
 * ======================================== */

.dnd-border--magic {
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 35%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-purple) 10%, transparent);
}

/* ========================================
 * Wooden Border — inventory, merchant panels
 * ======================================== */

.dnd-border--wooden {
  border: 1px solid color-mix(in srgb, var(--color-accent-orange, #c08a58) 30%, transparent);
}

/* ========================================
 * Filigree Border — top/bottom ornamental
 * ======================================== */

.dnd-border--filigree {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================
 * Divider Ornaments
 * ======================================== */

.dnd-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default) 20%,
    var(--color-border-default) 80%,
    transparent
  );
  margin: var(--space-5) 0;
}

/* Simple gradient divider */
.dnd-divider--simple {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default),
    transparent
  );
  margin: var(--space-4) 0;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-border--magic {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
  }
}
/**
 * Filter Chips Component
 * ======================
 * Reusable filter chip buttons for inventory and other list panels.
 * Provides category filtering with keyboard navigation support.
 */

/* ========================================
 * Controls Container
 * ======================================== */

.inventory-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

/* ========================================
 * Filter Chips
 * ======================================== */

.filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.filter-chip:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.filter-chip:active {
  transform: translateY(0);
}

.filter-chip.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  z-index: var(--z-raised);
}

/* Keyboard navigation hint */
.filter-chip::before {
  content: '';
  margin-right: 0.25rem;
}

/* ========================================
 * Sort Dropdown
 * ======================================== */

.inventory-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.inventory-sort-select {
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-5); /* Extra space for arrow */
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

.inventory-sort-select:hover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-bg-tertiary);
}

.inventory-sort-select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.inventory-sort-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--space-2);
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .inventory-controls {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .filter-chips {
    gap: var(--space-1-5);
  }

  .filter-chip {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-xs);
  }

  .inventory-sort {
    width: 100%;
    margin-left: 0;
  }

  .inventory-sort-select {
    flex: 1;
    font-size: var(--font-size-xs);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .filter-chip {
    transition: none;
  }

  .filter-chip:hover {
    transform: none;
  }

  .filter-chip:active {
    transform: none;
  }
}

/* ========================================
 * Dark Mode Adjustments
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .inventory-sort-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  }
}

/* ========================================
 * Animation for filter changes
 * ======================================== */

@keyframes filter-chip-activate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.filter-chip.active {
  animation: filter-chip-activate 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip.active {
    animation: none;
  }
}

/* ========================================
 * Search Highlighting
 * ======================================== */

.search-highlight {
  background: color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  color: var(--color-accent-warning);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
}
/**
 * HP Bar Dramatic Enhancement
 * ============================
 * Phase 4 P2-13: Dramatic HP bar with state-based gradients, sheen effects, and critical pulse
 *
 * HP States:
 * - Healthy (>60%): Calm green gradient
 * - Wounded (25-60%): Warning orange gradient
 * - Critical (≤25%): URGENT red gradient with pulse animation
 *
 * Success Criteria:
 * - HP awareness +60%
 * - Combat tension +1.5 points
 * - Critical HP feels urgent
 */

/* ========================================
 * HP Bar Container (used in multiple contexts)
 * ======================================== */

.cs-hp-bar {
  width: 100%;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-2);
  position: relative;
}

/* Alternate styling for tabbed character sheet */
.cs-hp-bar:not(.cs-hp-bar__fill) {
  height: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
 * HP Bar Fill - Base Styles
 * ======================================== */

.cs-hp-bar__fill,
.cs-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  position: relative;
  transform-origin: left;
  transition: transform var(--transition-normal, 0.3s ease),
              background-color var(--transition-normal, 0.3s ease),
              opacity var(--transition-normal, 0.3s ease);

  /* Default gradient (will be overridden by state classes) */
  background: linear-gradient(
    90deg,
    var(--hp-color-start, #2ECC71),
    var(--hp-color-end, #27AE60)
  );
}

/* ========================================
 * Sheen Effect on Leading Edge
 * ======================================== */

.cs-hp-bar__fill::after,
.cs-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* ========================================
 * HP State Classes - Healthy (>60%)
 * ======================================== */

.cs-hp-bar__fill--healthy,
.cs-hp-fill--healthy {
  --hp-color-start: #2ECC71;
  --hp-color-end: #27AE60;
  background: linear-gradient(
    90deg,
    var(--hp-color-start),
    var(--hp-color-end)
  );
}

/* ========================================
 * HP State Classes - Wounded (25-60%)
 * ======================================== */

.cs-hp-bar__fill--wounded,
.cs-hp-fill--wounded {
  --hp-color-start: #F39C12;
  --hp-color-end: #E67E22;
  background: linear-gradient(
    90deg,
    var(--hp-color-start),
    var(--hp-color-end)
  );
}

/* ========================================
 * HP State Classes - Critical (≤25%)
 * URGENT with pulse animation
 * ======================================== */

.cs-hp-bar__fill--critical,
.cs-hp-fill--critical {
  --hp-color-start: #E74C3C;
  --hp-color-end: #C0392B;
  background: linear-gradient(
    90deg,
    var(--hp-color-start),
    var(--hp-color-end)
  );
  animation: criticalPulse 0.8s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.4);
  }
}

/* ========================================
 * Legacy Class Support (for backward compatibility)
 * ======================================== */

.cs-hp-bar__fill--low {
  /* Alias for critical state */
  --hp-color-start: #E74C3C;
  --hp-color-end: #C0392B;
  background: linear-gradient(
    90deg,
    var(--hp-color-start),
    var(--hp-color-end)
  );
  animation: criticalPulse 0.8s ease-in-out infinite;
}

.cs-hp-bar__fill--medium {
  /* Alias for wounded state */
  --hp-color-start: #F39C12;
  --hp-color-end: #E67E22;
  background: linear-gradient(
    90deg,
    var(--hp-color-start),
    var(--hp-color-end)
  );
}

/* ========================================
 * Combat Quickview HP Bar Variants
 * ======================================== */

.cs-quickview-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left;
  transition: transform 0.5s ease;
  position: relative;
}

.cs-hp-healthy {
  background: linear-gradient(90deg, #2ECC71, #27AE60);
}

.cs-hp-injured {
  background: linear-gradient(90deg, #F39C12, #E67E22);
}

.cs-hp-critical {
  background: linear-gradient(90deg, #E74C3C, #C0392B);
  animation: criticalPulse 0.8s ease-in-out infinite;
}

/* Add sheen to quickview bars as well */
.cs-quickview-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  border-radius: 0 3px 3px 0;
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-hp-bar__fill--critical,
  .cs-hp-fill--critical,
  .cs-hp-bar__fill--low,
  .cs-hp-critical {
    animation: none;
  }

  .cs-hp-bar__fill,
  .cs-hp-fill,
  .cs-quickview-hp-fill {
    transition: transform 0.1s linear;
  }
}

/* ========================================
 * High Contrast Mode Support
 * ======================================== */

@media (prefers-contrast: high) {
  .cs-hp-bar__fill::after,
  .cs-hp-fill::after,
  .cs-quickview-hp-fill::after {
    /* Reduce sheen intensity in high contrast mode */
    opacity: 0.5;
  }
}

/* ========================================
 * HP Flash Effects (damage/healing feedback)
 * Phase 4 P2-13: Smooth transitions and visual feedback
 * ======================================== */

.hp-bar--flash-damage,
.cs-hp-bar__fill--flash-damage,
.cs-hp-fill--flash-damage {
  animation: hpFlashDamage 0.4s ease-out;
}

.hp-bar--flash-heal,
.cs-hp-bar__fill--flash-heal,
.cs-hp-fill--flash-heal {
  animation: hpFlashHeal 0.4s ease-out;
}

@keyframes hpFlashDamage {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.8);
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(0.6);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

@keyframes hpFlashHeal {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.5);
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

/* ========================================
 * HP Flyout Numbers (floating damage/heal)
 * ======================================== */

.hp-flyout {
  position: absolute;
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  z-index: var(--z-panel);
  white-space: nowrap;
}

.hp-flyout--damage {
  color: #E74C3C;
}

.hp-flyout--heal {
  color: #2ECC71;
}

.hp-flyout--animating {
  animation: hpFlyoutUp 1.5s ease-out forwards;
}

@keyframes hpFlyoutUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.2);
  }
  30% {
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px) scale(0.8);
  }
}

/* Large flyout variant for dramatic damage/healing */
.hp-flyout--large {
  font-size: 1.5rem;
}

.hp-flyout--large.hp-flyout--animating {
  animation: hpFlyoutUpLarge 2s ease-out forwards;
}

@keyframes hpFlyoutUpLarge {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.3);
  }
  25% {
    transform: translate(-50%, -30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.7);
  }
}

/* ========================================
 * HP Bar Container Enhancements
 * Ensures container can position flyouts
 * ======================================== */

.hp-bar-container,
.cs-hp-bar,
.cs-hp-wrapper {
  position: relative;
}

/* ========================================
 * Combat Tracker HP Bar Enhancements
 * ======================================== */

.combat-tracker .hp-bar {
  transition: transform 0.5s ease-out,
              background-color 0.3s ease;
}

/* ========================================
 * Reduced Motion Support for Flash/Flyout
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hp-bar--flash-damage,
  .hp-bar--flash-heal,
  .cs-hp-bar__fill--flash-damage,
  .cs-hp-bar__fill--flash-heal,
  .cs-hp-fill--flash-damage,
  .cs-hp-fill--flash-heal {
    animation: none;
  }

  .hp-flyout--animating {
    animation: hpFlyoutFade 1s ease-out forwards;
  }

  @keyframes hpFlyoutFade {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
/*
 * Illuminated Drop Caps
 * =====================
 * Medieval manuscript-style drop caps for narrative text.
 * Applies ::first-letter styling to marked paragraphs.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Drop Cap Base
 * ======================================== */

/* Apply to narrative paragraphs for illuminated first letter */
.dnd-drop-cap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding: 0.05em 0.1em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* ========================================
 * Color Variants
 * ======================================== */

/* Arcane/magical text */
.dnd-drop-cap--arcane::first-letter {
  color: var(--color-accent-purple);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
}

/* Nature/druidic text */
.dnd-drop-cap--nature::first-letter {
  color: var(--color-accent-secondary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

/* Divine/celestial text */
.dnd-drop-cap--divine::first-letter {
  color: var(--color-accent-primary);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Infernal/dark text */
.dnd-drop-cap--infernal::first-letter {
  color: var(--color-accent-error);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
}

/* ========================================
 * Size Variants
 * ======================================== */

.dnd-drop-cap--small::first-letter {
  font-size: 2.2em;
}

.dnd-drop-cap--large::first-letter {
  font-size: 4em;
  line-height: 0.75;
}

/* ========================================
 * Auto-apply to narrative scene descriptions
 * ======================================== */

/* First paragraph of a scene gets a drop cap automatically */
.narrative-scene > p:first-child::first-letter,
.narrative-entry.scene-start > p:first-child::first-letter {
  float: left;
  font-size: 2.8em;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-drop-cap::first-letter,
  .dnd-drop-cap--arcane::first-letter,
  .dnd-drop-cap--nature::first-letter,
  .dnd-drop-cap--divine::first-letter,
  .dnd-drop-cap--infernal::first-letter,
  .narrative-scene > p:first-child::first-letter,
  .narrative-entry.scene-start > p:first-child::first-letter {
    text-shadow: none;
  }
}
/**
 * Inline Configurator Styles
 *
 * Provides a compact inline selector UI for narrative hook actions
 * that require configuration (spell selection, weapon selection, etc.)
 */

.inline-configurator {
  position: fixed;
  z-index: var(--z-dropdown, 1000);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.inline-configurator--open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.inline-configurator__panel {
  background: var(--surface-elevated, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 4px);
  box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.4));
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}

.inline-configurator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: var(--surface-secondary, #252542);
  border-bottom: 1px solid var(--border-color, #333);
}

.inline-configurator__title {
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.inline-configurator__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  margin-left: var(--space-xs, 8px);
}

.inline-configurator__close:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #e0e0e0);
}

.inline-configurator__close svg {
  width: 14px;
  height: 14px;
}

.inline-configurator__options {
  padding: var(--space-xs, 8px);
  max-height: 280px;
  overflow-y: auto;
}

.inline-configurator__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease;
  text-align: left;
  gap: var(--space-xs, 8px);
}

.inline-configurator__option:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
}

.inline-configurator__option:active {
  background: var(--surface-active, rgba(255, 255, 255, 0.15));
}

.inline-configurator__option + .inline-configurator__option {
  margin-top: 2px;
}

.inline-configurator__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-secondary, #252542);
  border-radius: var(--radius-sm, 4px);
  color: var(--accent-color, #6366f1);
  flex-shrink: 0;
}

.inline-configurator__option-icon svg {
  width: 16px;
  height: 16px;
}

.inline-configurator__option-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.inline-configurator__option-label {
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-configurator__option-sublabel {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spell-specific styling */
.inline-configurator__option--cantrip .inline-configurator__option-icon {
  background: var(--surface-success-subtle, rgba(16, 185, 129, 0.15));
  color: var(--text-success, #10b981);
}

.inline-configurator__option--level-1 .inline-configurator__option-icon,
.inline-configurator__option--level-2 .inline-configurator__option-icon {
  background: var(--surface-info-subtle, rgba(59, 130, 246, 0.15));
  color: var(--text-info, #3b82f6);
}

.inline-configurator__option--level-3 .inline-configurator__option-icon,
.inline-configurator__option--level-4 .inline-configurator__option-icon {
  background: var(--surface-warning-subtle, rgba(245, 158, 11, 0.15));
  color: var(--text-warning, #f59e0b);
}

.inline-configurator__option--level-5 .inline-configurator__option-icon,
.inline-configurator__option--level-6 .inline-configurator__option-icon,
.inline-configurator__option--level-7 .inline-configurator__option-icon,
.inline-configurator__option--level-8 .inline-configurator__option-icon,
.inline-configurator__option--level-9 .inline-configurator__option-icon {
  background: var(--surface-accent-subtle, rgba(139, 92, 246, 0.15));
  color: var(--accent-color, #8b5cf6);
}

/* Custom option styling */
.inline-configurator__option--custom {
  border-top: 1px solid var(--border-color-subtle, rgba(255, 255, 255, 0.1));
  margin-top: var(--space-xs, 8px);
  padding-top: var(--space-sm, 12px);
}

.inline-configurator__option--custom .inline-configurator__option-icon {
  background: var(--surface-muted, rgba(255, 255, 255, 0.05));
  color: var(--text-muted, #888);
}

/* Loading state */
.inline-configurator__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg, 24px);
  color: var(--text-muted, #888);
}

.inline-configurator__loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--accent-color, #6366f1);
  border-radius: 50%;
  animation: inline-configurator-spin 0.8s linear infinite;
  margin-right: var(--space-xs, 8px);
}

@keyframes inline-configurator-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty state */
.inline-configurator__empty {
  padding: var(--space-md, 16px);
  text-align: center;
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm, 13px);
}

/* Scrollbar styling */
.inline-configurator__options::-webkit-scrollbar {
  width: 6px;
}

.inline-configurator__options::-webkit-scrollbar-track {
  background: transparent;
}

.inline-configurator__options::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
}

.inline-configurator__options::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.3));
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .inline-configurator__panel {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }

  .inline-configurator__options {
    max-height: 220px;
  }
}
/**
 * Keyboard Shortcuts Modal Styles
 * ================================
 * Phase 2: P1-5 - Comprehensive Keyboard Shortcuts System
 *
 * Modal overlay for keyboard shortcuts reference with search functionality.
 * Follows Phase 1 design system for typography and spacing.
 */

/* ============================================================================
   Modal Backdrop
   ============================================================================ */

.keyboard-shortcuts-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky); /* Higher than shortcuts-overlay (ceiling) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.keyboard-shortcuts-modal--visible {
  opacity: 1;
}

.keyboard-shortcuts-modal--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Content Container
   ============================================================================ */

.keyboard-shortcuts-modal__content {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.keyboard-shortcuts-modal--visible .keyboard-shortcuts-modal__content {
  transform: scale(1) translateY(0);
}

.keyboard-shortcuts-modal--closing .keyboard-shortcuts-modal__content {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .keyboard-shortcuts-modal,
  .keyboard-shortcuts-modal__content {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.keyboard-shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent-primary, #61afef);
}

.keyboard-shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.keyboard-shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.keyboard-shortcuts-modal__close:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.keyboard-shortcuts-modal__close:focus {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.keyboard-shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Search
   ============================================================================ */

.keyboard-shortcuts-modal__search {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border-bottom: 1px solid var(--color-border-default, #333);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__search-input {
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.keyboard-shortcuts-modal__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.1);
}

.keyboard-shortcuts-modal__search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* ============================================================================
   Body / Content
   ============================================================================ */

.keyboard-shortcuts-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

/* Custom scrollbar for modal body */
.keyboard-shortcuts-modal__body::-webkit-scrollbar {
  width: 8px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #1a1a2e);
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb {
  background: var(--color-border-default, #333);
  border-radius: 4px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888);
}

/* ============================================================================
   Sections
   ============================================================================ */

.keyboard-shortcuts-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.keyboard-shortcuts-section__title {
  margin: 0;
  padding-bottom: var(--space-2, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-primary, #61afef);
  border-bottom: 1px solid var(--color-border-default, #333);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.keyboard-shortcut-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.keyboard-shortcut-item:hover {
  background: var(--color-bg-tertiary, #252540);
  border-color: var(--color-border-hover, #444);
}

.keyboard-shortcut-item__keys {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  flex-shrink: 0;
}

.keyboard-shortcut-item__plus {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0 var(--space-1, 0.25rem);
}

.keyboard-shortcut-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  text-align: right;
  min-width: 0;
}

.keyboard-shortcut-item__description {
  font-size: var(--font-size-base, 0.9375rem);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcut-item__context {
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #888);
  font-style: italic;
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.keyboard-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2, 0.5rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Pressed state effect on hover */
.keyboard-shortcut-item:hover .keyboard-shortcut-key {
  border-bottom-width: 1px;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Footer
   ============================================================================ */

.keyboard-shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-top: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__hint {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-2, 0.5rem);
  margin: 0 var(--space-1, 0.25rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .keyboard-shortcuts-modal__content {
    width: 95%;
    max-height: 95vh;
  }

  .keyboard-shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
  }

  .keyboard-shortcut-item__info {
    text-align: left;
  }

  .keyboard-shortcut-key {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: var(--font-size-xs, 0.8125rem);
  }
}

/* ============================================================================
   Visual Hints on Buttons
   ============================================================================ */

.keyboard-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-left: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.8125rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  color: var(--color-text-muted, #888);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show hint on parent hover */
button:hover .keyboard-hint,
.input-line:hover .keyboard-hint {
  opacity: 1;
}

.keyboard-hint__key {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Focus visible for keyboard navigation */
.keyboard-shortcuts-modal *:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .keyboard-shortcuts-modal {
    border: 2px solid currentColor;
  }

  .keyboard-shortcut-key {
    border: 2px solid currentColor;
  }
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Lobby Menu - Inline navigation choices
 *
 * Renders lobby navigation options inline in the narrative,
 * replacing the old carousel/quick actions pattern with
 * a cleaner, more integrated menu experience.
 */

/* Container */
.lobby-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  padding: var(--space-4, 16px);
  animation: lobbyMenuFadeIn var(--timing-normal) var(--ease-out);
}

@keyframes lobbyMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header */
.lobby-menu__header {
  text-align: center;
  margin-bottom: var(--space-2, 8px);
}

.lobby-menu__greeting {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1, 4px);
}

.lobby-menu__subtitle {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

/* Section */
.lobby-menu__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.lobby-menu__section-title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions Grid */
.lobby-menu__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}

.lobby-menu__action {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.lobby-menu__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  transform: translateX(2px);
}

.lobby-menu__action:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.lobby-menu__action--primary {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.lobby-menu__action--primary:hover {
  filter: brightness(1.1);
  transform: translateX(2px);
}

.lobby-menu__action--primary .lobby-menu__action-icon {
  background: rgba(0, 0, 0, 0.2);
  color: currentColor;
}

.lobby-menu__action--primary .lobby-menu__action-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Action Icon */
.lobby-menu__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--color-accent-primary);
}

.lobby-menu__action-icon svg {
  width: 18px;
  height: 18px;
}

/* Action Content */
.lobby-menu__action-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-menu__action-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__action--primary .lobby-menu__action-label {
  color: inherit;
}

.lobby-menu__action-desc {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Characters List */
.lobby-menu__characters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.lobby-menu__character {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.lobby-menu__character:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

.lobby-menu__character:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Character Avatar */
.lobby-menu__character-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--color-text-muted);
}

.lobby-menu__character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-menu__character-avatar svg {
  width: 20px;
  height: 20px;
}

/* Character Info */
.lobby-menu__character-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lobby-menu__character-name {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__character-details {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

/* Character Arrow */
.lobby-menu__character-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--timing-fast) var(--ease-default);
}

.lobby-menu__character-arrow svg {
  width: 16px;
  height: 16px;
}

.lobby-menu__character:hover .lobby-menu__character-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary);
}

/* Preset Section - Quick Play Heroes */
.lobby-menu__section--presets {
  background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
  border: 1px solid var(--color-accent-primary);
  border-radius: 8px;
  padding: var(--space-4, 16px);
  position: relative;
  overflow: hidden;
}

.lobby-menu__section--presets::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary, var(--color-accent-primary)));
}

.lobby-menu__section--presets .lobby-menu__section-title {
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.lobby-menu__section-subtitle {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  margin-top: var(--space-1, 4px);
}

/* Preset Swipe Stack */
.lobby-menu__swipe-stack {
  position: relative;
  width: 100%;
  min-height: 200px;
  margin-top: var(--space-3, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Override character-swipe-card sizing within lobby context */
.lobby-menu__swipe-stack .character-swipe-card {
  position: absolute;
  width: 280px;
  max-width: 90%;
  padding: var(--space-4, 16px);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-subtle);
  border-radius: 8px;
  cursor: grab;
  will-change: transform;
}

.lobby-menu__swipe-stack .character-swipe-card:active {
  cursor: grabbing;
}

/* Swipe hint arrows below the stack */
.lobby-menu__swipe-hint {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-4, 16px) 0;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  opacity: 0.7;
}

.lobby-menu__swipe-hint-skip {
  color: var(--color-danger, #e06c75);
}

.lobby-menu__swipe-hint-play {
  color: var(--color-success, #98c379);
}

/* Responsive swipe stack */
@media (max-width: 480px) {
  .lobby-menu__swipe-stack {
    min-height: 180px;
  }

  .lobby-menu__swipe-stack .character-swipe-card {
    width: 240px;
  }
}

/* Empty State */
.lobby-menu__empty {
  text-align: center;
  padding: var(--space-6, 24px);
  color: var(--color-text-muted);
}

.lobby-menu__empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-2, 8px);
  opacity: 0.5;
}

.lobby-menu__empty-text {
  font-size: var(--font-size-sm, 14px);
}

/* Responsive */
@media (max-width: 480px) {
  .lobby-menu__actions {
    grid-template-columns: 1fr;
  }

  .lobby-menu__action {
    padding: var(--space-3, 12px);
  }

  .lobby-menu__action-icon {
    width: 32px;
    height: 32px;
  }

  .lobby-menu__action-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Animation delays for staggered entry */
.lobby-menu__action:nth-child(1) { animation-delay: 0.05s; }
.lobby-menu__action:nth-child(2) { animation-delay: 0.1s; }
.lobby-menu__action:nth-child(3) { animation-delay: 0.15s; }
.lobby-menu__action:nth-child(4) { animation-delay: 0.2s; }

.lobby-menu__character:nth-child(1) { animation-delay: 0.1s; }
.lobby-menu__character:nth-child(2) { animation-delay: 0.15s; }
.lobby-menu__character:nth-child(3) { animation-delay: 0.2s; }
.lobby-menu__character:nth-child(4) { animation-delay: 0.25s; }
.lobby-menu__character:nth-child(5) { animation-delay: 0.3s; }
.lobby-menu__character:nth-child(6) { animation-delay: 0.35s; }

.lobby-menu__action,
.lobby-menu__character {
  animation: lobbyItemSlideIn var(--timing-normal) var(--ease-out) backwards;
}

@keyframes lobbyItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Parchment Textures
 * ==================
 * Aged paper and parchment background effects for narrative content.
 * Uses CSS gradients for performance (no image assets needed).
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Parchment
 * ======================================== */

/* Subtle aged paper effect for text panels */
.dnd-parchment {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 40%,
      color-mix(in srgb, var(--color-accent-warning) 2%, var(--color-bg-secondary)) 60%,
      var(--color-bg-secondary)
    );
  position: relative;
}

/* Subtle edge darkening for depth */
.dnd-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 30px color-mix(in srgb, #000 8%, transparent),
    inset 0 0 10px color-mix(in srgb, #000 4%, transparent);
  border-radius: inherit;
}

/* ========================================
 * Texture Variants
 * ======================================== */

/* Old parchment - more yellow/aged look */
.dnd-parchment--aged {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-accent-warning) 6%, var(--color-bg-secondary)),
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)) 30%,
      var(--color-bg-secondary) 50%,
      color-mix(in srgb, var(--color-accent-warning) 4%, var(--color-bg-secondary)) 70%,
      color-mix(in srgb, var(--color-accent-orange) 3%, var(--color-bg-secondary))
    );
}

/* Dark parchment - for DM notes, quest logs */
.dnd-parchment--dark {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-purple) 3%, var(--color-bg-primary)),
      var(--color-bg-primary) 50%,
      color-mix(in srgb, var(--color-accent-purple) 2%, var(--color-bg-primary))
    );
}

/* Magical scroll - for spell descriptions */
.dnd-parchment--magical {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 15%,
      var(--color-bg-secondary) 85%,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary))
    );
}

/* ========================================
 * Sepia Overlay
 * ======================================== */

/* Sepia tone filter for narrative readout areas */
.dnd-sepia {
  filter: sepia(5%) saturate(95%);
}

.dnd-sepia--strong {
  filter: sepia(12%) saturate(90%);
}

/* ========================================
 * Torn Edge Effect
 * ======================================== */

/* Torn bottom edge for quest notes */
.dnd-torn-edge {
  position: relative;
  padding-bottom: var(--space-4);
}

.dnd-torn-edge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-bg-primary) 3%,
    transparent 5%,
    var(--color-bg-primary) 8%,
    transparent 12%,
    var(--color-bg-primary) 15%,
    transparent 18%,
    var(--color-bg-primary) 22%,
    transparent 25%,
    var(--color-bg-primary) 30%,
    transparent 33%,
    var(--color-bg-primary) 38%,
    transparent 42%,
    var(--color-bg-primary) 45%,
    transparent 50%,
    var(--color-bg-primary) 53%,
    transparent 58%,
    var(--color-bg-primary) 62%,
    transparent 65%,
    var(--color-bg-primary) 70%,
    transparent 73%,
    var(--color-bg-primary) 78%,
    transparent 82%,
    var(--color-bg-primary) 85%,
    transparent 90%,
    var(--color-bg-primary) 93%,
    transparent 97%,
    var(--color-bg-primary) 100%
  );
}

/* ========================================
 * Reduced Motion / Accessibility
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-sepia,
  .dnd-sepia--strong {
    filter: none;
  }
}
/**
 * Custom Focus Indicators for Accessibility
 * ==========================================
 * Task #285: Standardized focus indicator utilities for WCAG 2.1 AAA compliance.
 *
 * Design Philosophy:
 * - Dual-ring pattern: solid outline + glow shadow for maximum visibility
 * - Consistent use of design tokens
 * - Utility classes for easy application across components
 * - Context-aware variants (gold for terminal default, semantic colors for states)
 *
 * Usage:
 * - Apply .focus-ring to elements for standard gold focus (terminal theme)
 * - Apply .focus-ring-gold for terminal-themed gold focus (alias for .focus-ring)
 * - Apply .focus-ring-inset for inset focus (buttons, cards)
 * - Use .focus-scale for interactive cards that should scale on focus
 */

/* ========================================
 * FOCUS DESIGN TOKENS
 * Extended from _tokens.css
 * ======================================== */

:root {
  /* Focus ring colors — primary is gold to match terminal theme */
  --focus-color-primary: var(--focus-ring-color, #ffd700);
  --focus-color-gold: var(--focus-ring-color, #ffd700);
  --focus-color-success: var(--color-accent-secondary, #98c379);
  --focus-color-danger: var(--color-accent-error, #e06c75);
  --focus-color-purple: var(--color-accent-purple, #c678dd);

  /* Focus ring glow alphas */
  --focus-glow-alpha: 0.25;
  --focus-glow-alpha-strong: 0.35;

  /* Focus ring sizes */
  --focus-ring-width: 3px;
  --focus-ring-width-lg: 4px;
  --focus-ring-glow-spread: 5px;
  --focus-ring-glow-spread-lg: 7px;

  /* Focus ring offsets */
  --focus-offset-default: 2px;
  --focus-offset-inset: -2px;
  --focus-offset-tight: 1px;

  /* Composite focus ring values */
  --focus-ring-primary: 0 0 0 var(--focus-ring-width) var(--focus-color-primary),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-gold-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-gold),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-success-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-success),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(152, 195, 121, var(--focus-glow-alpha));
  --focus-ring-danger-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-danger),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(224, 108, 117, var(--focus-glow-alpha));
}

/* ========================================
 * BASE FOCUS UTILITIES
 * Apply these classes for consistent focus styling
 * ======================================== */

/**
 * Standard gold focus ring (terminal theme)
 * Use for: forms, links, general interactive elements
 */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-primary);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Gold focus ring - Terminal theme
 * Use for: terminal UI, game elements, cards, panels
 */
.focus-ring-gold:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Success focus ring - Green
 * Use for: confirm buttons, success actions
 */
.focus-ring-success:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-success);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(152, 195, 121, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Danger focus ring - Red
 * Use for: delete buttons, destructive actions
 */
.focus-ring-danger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-danger);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Purple focus ring - Magic/DM theme
 * Use for: DM controls, magic-related UI
 */
.focus-ring-purple:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-purple);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(198, 120, 221, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/* ========================================
 * FOCUS RING SIZE VARIANTS
 * ======================================== */

/**
 * Large focus ring - More prominent
 * Use for: important CTAs, modal focuses
 */
.focus-ring-lg:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread-lg)
    rgba(255, 215, 0, var(--focus-glow-alpha-strong));
}

/**
 * Small focus ring - Subtle
 * Use for: inline elements, chips, badges
 */
.focus-ring-sm:focus-visible {
  outline-width: 2px;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* ========================================
 * FOCUS RING POSITION VARIANTS
 * ======================================== */

/**
 * Inset focus ring
 * Use for: buttons, cards with borders
 */
.focus-ring-inset:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

/**
 * Tight focus ring - Closer to element
 * Use for: form inputs, compact elements
 */
.focus-ring-tight:focus-visible {
  outline-offset: var(--focus-offset-tight);
}

/**
 * No offset - Directly on element border
 * Use for: chips, badges, small buttons
 */
.focus-ring-flush:focus-visible {
  outline-offset: 0;
}

/* ========================================
 * FOCUS BEHAVIOR MODIFIERS
 * ======================================== */

/**
 * Focus with scale transform
 * Use for: selection cards, clickable items
 */
.focus-scale:focus-visible {
  transform: translateY(-2px) scale(1.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/**
 * Focus with left border indicator
 * Use for: menu items, list items
 */
.focus-left-indicator:focus-visible {
  outline: none;
  background: var(--color-bg-hover, rgba(255, 215, 0, 0.1));
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Focus with background highlight
 * Use for: list items, selectable rows
 */
.focus-highlight:focus-visible {
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Dashed focus ring - for containers/panels
 * Use for: tab panels, content regions
 */
.focus-ring-dashed:focus-visible {
  outline-style: dashed;
}

/* ========================================
 * FOCUS-WITHIN UTILITIES
 * For containers that should highlight when child is focused
 * ======================================== */

/**
 * Container focus glow - gold
 * Use for: panels, cards with interactive children
 */
.focus-within-glow:focus-within {
  box-shadow: 0 0 0 3px var(--focus-color-gold),
    0 0 0 6px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Container focus border - subtle
 * Use for: form groups, sections
 */
.focus-within-border:focus-within {
  border-color: var(--focus-color-gold);
}

/* ========================================
 * SEMANTIC FOCUS STATES
 * Context-aware focus styling
 * ======================================== */

/**
 * Error state focus
 * Use for: invalid form fields
 */
.focus-error:focus-visible,
[aria-invalid="true"]:focus-visible {
  outline-color: var(--focus-color-danger);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
}

/**
 * Selected state focus
 * Use for: selected items that receive focus
 */
.focus-selected:focus-visible,
[aria-selected="true"]:focus-visible {
  outline-color: var(--focus-color-gold);
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Current/active state focus
 * Use for: current page, active tab
 */
.focus-current:focus-visible,
[aria-current]:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  outline-color: var(--focus-color-gold);
}

/* ========================================
 * SPECIFIC ELEMENT FOCUS PATTERNS
 * Consistent focus for common elements
 * ======================================== */

/**
 * Button focus pattern
 */
.btn-focus:focus-visible,
.focus-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
      rgba(255, 215, 0, var(--focus-glow-alpha)),
    0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Card focus pattern - with subtle lift
 */
.card-focus:focus-visible,
.focus-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3),
    0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  transform: translateX(4px);
  z-index: var(--z-sticky);
}

/**
 * Input focus pattern
 */
.input-focus:focus-visible,
.focus-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-tight);
  border-color: var(--focus-color-gold);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Tab focus pattern
 */
.tab-focus:focus-visible,
.focus-tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-inset);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Menu item focus pattern
 */
.menu-focus:focus-visible,
.focus-menu-item:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Chip/badge focus pattern
 */
.chip-focus:focus-visible,
.focus-chip:focus-visible {
  outline: 2px solid var(--focus-color-gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25);
  z-index: var(--z-sticky);
}

/* ========================================
 * ROVING TABINDEX SUPPORT
 * Focus for items managed with roving tabindex
 * ======================================== */

[data-focus-group] [tabindex="-1"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  z-index: var(--z-sticky);
}

/* ========================================
 * ACCESSIBILITY MODE OVERRIDES
 * ======================================== */

/* High Contrast Mode */
@media (prefers-contrast: more) {
  :root {
    --focus-ring-width: 4px;
    --focus-glow-alpha: 0.4;
    --focus-ring-glow-spread: 6px;
  }

  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline: 4px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .focus-left-indicator:focus-visible {
    outline: 4px solid Highlight;
    box-shadow: none;
    background: Canvas;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    border-color: Highlight;
    transform: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .focus-scale:focus-visible {
    transform: none;
    transition: none;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    transform: none;
  }
}

/* Touch Devices - Reduced glow intensity */
@media (hover: none) and (pointer: coarse) {
  :root {
    --focus-glow-alpha: 0.15;
    --focus-ring-glow-spread: 3px;
  }
}

/* Dark Mode Adjustments (already dark by default, but ensure vibrancy) */
@media (prefers-color-scheme: dark) {
  :root {
    --focus-ring-color: #ffed4e; /* Slightly brighter gold for dark backgrounds */
    --focus-color-primary: #ffed4e;
    --focus-color-gold: #ffed4e;
  }
}

/* ========================================
 * UTILITY HELPERS
 * ======================================== */

/**
 * Remove default focus styling (use with caution)
 * Only use when providing custom focus indicators
 */
.focus-none:focus-visible {
  outline: none;
  box-shadow: none;
}

/**
 * Ensure focus visible above overlays
 */
.focus-overlay:focus-visible {
  z-index: var(--z-floating-above);
}

/**
 * Focus ring for light backgrounds
 * Use for: modals, light-themed sections
 */
.focus-ring-light:focus-visible {
  outline-color: var(--color-bg-primary, #1a1a1a);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(26, 26, 26, 0.3);
}
/**
 * XP Animation Styles
 * ==================
 * Animated XP gain notifications, progress bars, and level-up celebrations.
 */

/* Container for floating XP numbers */
.xp-animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-ceiling);
  overflow: hidden;
}

/* Floating +XP number */
.xp-floater {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  transform: translate(-50%, 0);
  opacity: 0;
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
  text-shadow:
    0 0 8px var(--xp-glow, rgba(255, 215, 0, 0.6)),
    0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.xp-floater--animating {
  animation: xp-float-up 2.5s ease-out forwards;
}

.xp-floater--levelup {
  font-size: 1.5rem;
  color: var(--xp-levelup-color, #ff6b6b);
}

.xp-floater__icon {
  font-size: 1.4em;
}

.xp-floater__amount {
  letter-spacing: 0.05em;
}

.xp-floater__levelup {
  display: block;
  font-size: 0.7em;
  color: var(--xp-levelup-color, #ff6b6b);
  animation: xp-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes xp-float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.1);
  }
  30% {
    transform: translate(-50%, -40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(0.8);
  }
}

@keyframes xp-pulse {
  from {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--xp-glow, rgba(255, 107, 107, 0.6)),
      0 0 16px var(--xp-glow, rgba(255, 107, 107, 0.4));
  }
  to {
    transform: scale(1.05);
    text-shadow:
      0 0 12px var(--xp-glow, rgba(255, 107, 107, 0.8)),
      0 0 24px var(--xp-glow, rgba(255, 107, 107, 0.6));
  }
}

/* XP Progress Bar */
.xp-progress {
  height: 6px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.xp-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--xp-bar-start, #8b5cf6) 0%,
    var(--xp-bar-end, #ffd700) 100%
  );
  border-radius: 3px;
  transition: width 0.3s ease-out;
  position: relative;
}

.xp-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: xp-shimmer 2s infinite linear;
  opacity: 0;
}

.xp-progress--flash .xp-progress__fill::after {
  opacity: 1;
}

@keyframes xp-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* XP Counter animation */
.xp-counter--animating {
  animation: xp-counter-pulse 0.15s ease-in-out infinite alternate;
  color: var(--xp-color, #ffd700);
}

@keyframes xp-counter-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Level Up Celebration Overlay */
.xp-levelup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.xp-levelup-overlay--visible {
  opacity: 1;
}

.xp-levelup-overlay--fading {
  opacity: 0;
}

.xp-levelup-content {
  text-align: center;
  transform: scale(0.5);
  opacity: 0;
  animation: xp-levelup-entrance 0.5s ease-out forwards;
}

.xp-levelup-overlay--visible .xp-levelup-content {
  animation-play-state: running;
}

@keyframes xp-levelup-entrance {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.xp-levelup-icon {
  font-size: 4rem;
  animation: xp-levelup-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

.xp-levelup-text {
  font-family: var(--font-heading, var(--font-mono, monospace));
  font-size: 3rem;
  font-weight: bold;
  color: var(--xp-levelup-color, #ffd700);
  text-shadow:
    0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
    0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
    0 4px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.1em;
  animation: xp-levelup-glow 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-glow {
  from {
    text-shadow:
      0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
      0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
  to {
    text-shadow:
      0 0 30px var(--xp-levelup-glow, rgba(255, 215, 0, 1)),
      0 0 60px var(--xp-levelup-glow, rgba(255, 215, 0, 0.7)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

.xp-levelup-level {
  font-family: var(--font-mono, monospace);
  font-size: 2rem;
  color: var(--text-1, #e0e0e0);
  margin-top: var(--space-sm, 8px);
}

.xp-levelup-name {
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  color: var(--text-2, #a0a0a0);
  margin-top: var(--space-xs, 4px);
}

/* Inline XP display in character status */
.xp-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--text-2, #a0a0a0);
}

.xp-display__label {
  color: var(--text-3, #666);
}

.xp-display__value {
  color: var(--xp-color, #ffd700);
  font-weight: 500;
}

.xp-display__next {
  color: var(--text-3, #666);
  font-size: 0.8em;
}

/* Compact XP bar for status area */
.xp-bar-compact {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-size: 0.75rem;
}

.xp-bar-compact__bar {
  flex: 1;
  height: 4px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}

.xp-bar-compact__fill {
  height: 100%;
  background: var(--xp-color, #ffd700);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.xp-bar-compact__text {
  color: var(--text-3, #666);
  white-space: nowrap;
}

/* Tool result XP display */
.tool-result-item.xp-gain {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  );
  border-left: 3px solid var(--xp-color, #ffd700);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border-radius: 4px;
}

.tool-result-item.xp-gain .xp-gain__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
}

.tool-result-item.xp-gain .xp-gain__icon {
  font-size: 1.5em;
}

.tool-result-item.xp-gain .xp-gain__amount {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
}

.tool-result-item.xp-gain .xp-gain__reason {
  color: var(--text-2, #a0a0a0);
  font-size: 0.9rem;
}

.tool-result-item.xp-gain--levelup {
  border-left-color: var(--xp-levelup-color, #ff6b6b);
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.15) 0%,
    rgba(255, 215, 0, 0.15) 100%
  );
}

.tool-result-item.xp-gain--levelup .xp-gain__levelup {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  margin-top: var(--space-xs, 4px);
  padding-top: var(--space-xs, 4px);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--xp-levelup-color, #ff6b6b);
  font-weight: bold;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .xp-floater--animating {
    animation: xp-float-up-reduced 2s ease-out forwards;
  }

  @keyframes xp-float-up-reduced {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .xp-levelup-content {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }

  .xp-levelup-icon,
  .xp-levelup-text,
  .xp-floater__levelup,
  .xp-counter--animating {
    animation: none;
  }

  .xp-progress__fill::after {
    animation: none;
  }
}
/**
 * Level-Up Celebration Effect
 * ===========================
 * Celebratory visual effects when a character levels up.
 * Features particles, glow effects, and non-intrusive animations.
 *
 * Accessibility: All animations respect prefers-reduced-motion
 */

/* ========================================
 * CELEBRATION CONTAINER
 * ======================================== */

.level-up-celebration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-sky);
  overflow: hidden;
}

.level-up-celebration--active {
  animation: celebration-backdrop 3s ease-out forwards;
}

@keyframes celebration-backdrop {
  0% {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.15), transparent 60%);
  }
  50% {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.25), transparent 70%);
  }
  100% {
    background: transparent;
  }
}

/* ========================================
 * BANNER ANNOUNCEMENT
 * ======================================== */

.level-up-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  text-align: center;
  opacity: 0;
  animation: banner-entrance 2.5s ease-out forwards;
}

@keyframes banner-entrance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15) rotate(3deg);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
  }
  35% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9) translateY(-30px);
  }
}

.level-up-banner__icon {
  font-size: 4rem;
  display: block;
  animation: icon-bounce 0.4s ease-in-out infinite alternate;
  margin-bottom: var(--space-sm, 8px);
}

@keyframes icon-bounce {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-8px) scale(1.05);
  }
}

.level-up-banner__title {
  font-family: var(--font-heading, var(--font-mono, monospace));
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.9),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 215, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.6);
  animation: title-glow 0.4s ease-in-out infinite alternate;
}

@keyframes title-glow {
  from {
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.9),
      0 0 40px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
  to {
    text-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 50px rgba(255, 215, 0, 0.8),
      0 0 80px rgba(255, 215, 0, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
}

.level-up-banner__level {
  font-family: var(--font-mono, monospace);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-1, #fff);
  margin-top: var(--space-xs, 4px);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.level-up-banner__name {
  font-family: var(--font-mono, monospace);
  font-size: 1.3rem;
  color: var(--text-2, #ccc);
  margin-top: var(--space-xs, 4px);
  opacity: 0.9;
}

/* ========================================
 * PARTICLE SYSTEM
 * ======================================== */

.level-up-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.level-up-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
}

/* Star shape particles */
.level-up-particle--star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  background: var(--color-gold, #ffd700);
  width: 16px;
  height: 16px;
}

/* Circle particles */
.level-up-particle--circle {
  border-radius: 50%;
  background: var(--accent-secondary, #22c55e);
  width: 10px;
  height: 10px;
}

/* Diamond particles */
.level-up-particle--diamond {
  width: 10px;
  height: 10px;
  background: var(--accent-purple, #8b5cf6);
  transform: rotate(45deg);
}

/* Spark particles (small and bright) */
.level-up-particle--spark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.8);
}

/* Particle animation - burst outward */
.level-up-particle--animating {
  animation: particle-burst 2s ease-out forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(var(--particle-x, 0), var(--particle-y, 0)) scale(1.5) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(var(--particle-x, 0) * 2.5),
      calc(var(--particle-y, 0) * 2.5 + 100px)
    ) scale(0.5) rotate(360deg);
  }
}

/* Color variations for particles */
.level-up-particle--gold { background: #ffd700; }
.level-up-particle--amber { background: #f59e0b; }
.level-up-particle--green { background: #22c55e; }
.level-up-particle--purple { background: #8b5cf6; }
.level-up-particle--cyan { background: #06b6d4; }
.level-up-particle--white { background: #ffffff; }

/* ========================================
 * GLOW RING EFFECT
 * ======================================== */

.level-up-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--color-gold, #ffd700);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(255, 215, 0, 0.3);
}

.level-up-glow-ring--animating {
  animation: ring-expand 1.5s ease-out forwards;
}

@keyframes ring-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    border-width: 6px;
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(2);
    border-width: 3px;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
    border-width: 1px;
  }
}

/* Multiple rings with stagger */
.level-up-glow-ring:nth-child(2) {
  animation-delay: 0.15s;
}

.level-up-glow-ring:nth-child(3) {
  animation-delay: 0.3s;
}

/* ========================================
 * CONFETTI EFFECT (falling from top)
 * ======================================== */

.level-up-confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.level-up-confetti {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0;
}

.level-up-confetti--square {
  border-radius: 2px;
}

.level-up-confetti--circle {
  border-radius: 50%;
}

.level-up-confetti--ribbon {
  width: 8px;
  height: 20px;
  border-radius: 1px;
}

.level-up-confetti--animating {
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg) scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 50px)) rotate(720deg) scale(0.6);
  }
}

/* Staggered delays for natural falling effect */
.level-up-confetti:nth-child(odd) {
  animation-duration: 2.8s;
}

.level-up-confetti:nth-child(3n) {
  animation-duration: 3.2s;
}

.level-up-confetti:nth-child(5n) {
  animation-timing-function: ease-in-out;
}

/* ========================================
 * SCREEN FLASH
 * ======================================== */

.level-up-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 215, 0, 0.5),
    transparent 60%
  );
  opacity: 0;
  animation: flash-burst 0.5s ease-out forwards;
}

@keyframes flash-burst {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* ========================================
 * SUBTLE MODE (for non-intrusive display)
 * ======================================== */

.level-up-celebration--subtle .level-up-banner {
  top: 20%;
  transform: translate(-50%, 0) scale(0);
}

.level-up-celebration--subtle .level-up-banner__title {
  font-size: 2rem;
}

.level-up-celebration--subtle .level-up-banner__level {
  font-size: 1.5rem;
}

.level-up-celebration--subtle .level-up-banner__icon {
  font-size: 2.5rem;
}

.level-up-celebration--subtle .level-up-glow-ring {
  max-width: 200px;
  max-height: 200px;
}

.level-up-celebration--subtle .level-up-particles {
  top: 25%;
}

/* ========================================
 * NOTIFICATION BAR (inline alternative)
 * ======================================== */

.level-up-notification {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.95) 0%,
    rgba(255, 165, 0, 0.95) 100%
  );
  color: #1a1a1a;
  padding: var(--space-sm, 8px) var(--space-lg, 24px);
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  box-shadow:
    0 4px 20px rgba(255, 215, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sky-above);
  opacity: 0;
}

.level-up-notification--visible {
  animation: notification-slide 3s ease-out forwards;
}

@keyframes notification-slide {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

.level-up-notification__icon {
  font-size: 1.4em;
  animation: notification-icon-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes notification-icon-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

.level-up-notification__text {
  letter-spacing: 0.05em;
}

/* ========================================
 * ACCESSIBILITY: Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .level-up-celebration--active,
  .level-up-banner,
  .level-up-banner__icon,
  .level-up-banner__title,
  .level-up-particle--animating,
  .level-up-glow-ring--animating,
  .level-up-confetti--animating,
  .level-up-flash,
  .level-up-notification--visible,
  .level-up-notification__icon {
    animation: none;
  }

  /* Show content statically without animation */
  .level-up-banner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .level-up-notification--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Add a subtle border/indicator instead of animations */
  .level-up-celebration--active {
    background: rgba(255, 215, 0, 0.1);
  }

  /* Fade out after delay for reduced motion users */
  .level-up-celebration {
    transition: opacity 0.5s ease-out 2s;
  }

  .level-up-celebration--fading {
    opacity: 0;
  }
}

/* ========================================
 * HIGH CONTRAST MODE
 * ======================================== */

@media (prefers-contrast: high) {
  .level-up-banner__title {
    color: #fff;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    -webkit-text-stroke: 1px #000;
  }

  .level-up-notification {
    background: #ffd700;
    border: 2px solid #000;
  }
}
/**
 * Death Save Dramatic Overlay
 * ===========================
 * Full-screen dramatic death save experience with D20 roll animation,
 * progressive tension, and special effects for critical results.
 *
 * D&D 5e Death Saves:
 * - 10+ = success, <10 = failure
 * - Nat 20 = regain 1 HP, wake up
 * - Nat 1 = 2 failures
 * - 3 successes = stable
 * - 3 failures = death
 */

/* ============================================
 * OVERLAY CONTAINER
 * ============================================ */

.death-save-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(20, 0, 0, 0.95) 100%
  );
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.death-save-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Vignette effect - danger closing in */
.death-save-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(139, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  animation: vignette-pulse 2s ease-in-out infinite;
}

@keyframes vignette-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ============================================
 * CHARACTER INFO HEADER
 * ============================================ */

.death-save-overlay__header {
  position: absolute;
  top: 2rem;
  text-align: center;
  animation: header-fade-in 0.5s ease-out 0.2s both;
}

@keyframes header-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-overlay__character-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-danger-light, #ff6b6b);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  margin: 0 0 0.5rem 0;
}

.death-save-overlay__status {
  font-size: 1rem;
  color: var(--terminal-text-muted, #888);
  font-style: italic;
  letter-spacing: 0.1em;
}

/* ============================================
 * D20 ROLL DISPLAY
 * ============================================ */

.death-save-d20 {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 2rem;
}

.death-save-d20__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  color: white;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: 50%;
  border: 4px solid var(--terminal-border, #444);
  box-shadow:
    0 0 40px rgba(255, 0, 0, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Rolling animation */
.death-save-d20--rolling .death-save-d20__face {
  animation: d20-spin 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes d20-spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: rotateX(360deg) rotateY(180deg) scale(1.1);
  }
  40% {
    transform: rotateX(720deg) rotateY(360deg) scale(1);
  }
  60% {
    transform: rotateX(1080deg) rotateY(540deg) scale(1.05);
  }
  80% {
    transform: rotateX(1440deg) rotateY(720deg) scale(1);
  }
  100% {
    transform: rotateX(1800deg) rotateY(900deg) scale(1);
  }
}

/* Result reveal animation */
.death-save-d20--revealed .death-save-d20__face {
  animation: d20-reveal 0.4s ease-out;
}

@keyframes d20-reveal {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Result-specific styling */
.death-save-d20--success .death-save-d20__face {
  border-color: var(--color-success, #22c55e);
  box-shadow:
    0 0 60px rgba(34, 197, 94, 0.5),
    inset 0 0 30px rgba(34, 197, 94, 0.2);
  color: var(--color-success, #22c55e);
}

.death-save-d20--failure .death-save-d20__face {
  border-color: var(--color-danger, #ef4444);
  box-shadow:
    0 0 60px rgba(239, 68, 68, 0.5),
    inset 0 0 30px rgba(239, 68, 68, 0.2);
  color: var(--color-danger, #ef4444);
}

.death-save-d20--nat20 .death-save-d20__face {
  border-color: var(--color-gold, #ffd700);
  background: linear-gradient(135deg, #4a3f00, #2a2500);
  box-shadow:
    0 0 80px rgba(255, 215, 0, 0.6),
    inset 0 0 30px rgba(255, 215, 0, 0.3);
  color: var(--color-gold, #ffd700);
  animation: nat20-glow 0.5s ease-out, nat20-pulse 1s ease-in-out infinite 0.5s;
}

@keyframes nat20-glow {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes nat20-pulse {
  0%, 100% {
    box-shadow:
      0 0 80px rgba(255, 215, 0, 0.6),
      inset 0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 120px rgba(255, 215, 0, 0.8),
      inset 0 0 50px rgba(255, 215, 0, 0.5);
  }
}

.death-save-d20--nat1 .death-save-d20__face {
  border-color: var(--color-danger, #ef4444);
  background: linear-gradient(135deg, #4a0000, #2a0000);
  box-shadow:
    0 0 100px rgba(239, 68, 68, 0.7),
    inset 0 0 40px rgba(239, 68, 68, 0.4);
  color: var(--color-danger, #ef4444);
  animation: nat1-shake 0.5s ease-out;
}

@keyframes nat1-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* ============================================
 * DEATH SAVE TRACKER BOXES
 * ============================================ */

.death-save-overlay__tracker {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  animation: tracker-fade-in 0.5s ease-out 0.3s both;
}

@keyframes tracker-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.death-save-track__label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--terminal-text-muted, #888);
}

.death-save-track--successes .death-save-track__label {
  color: var(--color-success, #22c55e);
}

.death-save-track--failures .death-save-track__label {
  color: var(--color-danger, #ef4444);
}

.death-save-track__boxes {
  display: flex;
  gap: 0.5rem;
}

.death-save-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 2px solid var(--terminal-border, #444);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* Success boxes */
.death-save-track--successes .death-save-box--filled {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success-light, #4ade80);
  color: white;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
  animation: box-fill-success 0.4s ease-out;
}

@keyframes box-fill-success {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.death-save-track--successes .death-save-box--filled::after {
  content: '\2713'; /* Checkmark */
  font-weight: bold;
}

/* Failure boxes */
.death-save-track--failures .death-save-box--filled {
  background: var(--color-danger, #ef4444);
  border-color: var(--color-danger-light, #f87171);
  color: white;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  animation: box-fill-failure 0.4s ease-out;
}

@keyframes box-fill-failure {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.death-save-track--failures .death-save-box--filled::after {
  content: '\2717'; /* X mark */
  font-weight: bold;
}

/* New box animation - just filled this roll */
.death-save-box--new {
  animation: box-new-pulse 0.6s ease-out;
}

@keyframes box-new-pulse {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
}

/* ============================================
 * RESULT MESSAGE
 * ============================================ */

.death-save-overlay__result {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-align: center;
  animation: result-appear 0.4s ease-out 0.5s both;
}

@keyframes result-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.death-save-overlay__result--success {
  color: var(--color-success, #22c55e);
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.death-save-overlay__result--failure {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.death-save-overlay__result--nat20 {
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
  animation: result-appear 0.4s ease-out 0.5s both, nat20-text-pulse 1s ease-in-out infinite 0.9s;
}

@keyframes nat20-text-pulse {
  0%, 100% {
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 50px rgba(255, 215, 0, 1);
    transform: scale(1.05);
  }
}

.death-save-overlay__result--nat1 {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
}

.death-save-overlay__result--stabilized {
  color: var(--color-success, #22c55e);
  text-shadow: 0 0 40px rgba(34, 197, 94, 0.6);
}

.death-save-overlay__result--death {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  animation: result-appear 0.4s ease-out 0.5s both, death-pulse 1.5s ease-in-out infinite 0.9s;
}

@keyframes death-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 60px rgba(239, 68, 68, 1);
  }
}

/* Sub-message for additional info */
.death-save-overlay__submessage {
  font-size: 1rem;
  color: var(--terminal-text-secondary, #aaa);
  text-align: center;
  animation: result-appear 0.4s ease-out 0.7s both;
}

.death-save-overlay__submessage--hp {
  color: var(--color-success, #22c55e);
}

/* ============================================
 * CONTINUE BUTTON
 * ============================================ */

.death-save-overlay__continue {
  margin-top: 2rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terminal-text-primary, #e0e0e0);
  background: transparent;
  border: 2px solid var(--terminal-border, #555);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  animation: button-appear 0.4s ease-out 0.8s both;
}

@keyframes button-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-overlay__continue:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary-light, #6ba4e8);
}

.death-save-overlay__continue:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
}

/* ============================================
 * SPECIAL OUTCOME OVERLAYS
 * ============================================ */

/* Stabilized - peaceful glow */
.death-save-overlay--stabilized {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 20, 0, 0.85) 0%,
    rgba(0, 40, 0, 0.95) 100%
  );
}

.death-save-overlay--stabilized::before {
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(34, 197, 94, 0.2) 100%
  );
  animation: stabilized-pulse 3s ease-in-out infinite;
}

@keyframes stabilized-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Natural 20 - golden triumph */
.death-save-overlay--nat20 {
  background: radial-gradient(
    ellipse at center,
    rgba(30, 25, 0, 0.85) 0%,
    rgba(20, 15, 0, 0.95) 100%
  );
}

.death-save-overlay--nat20::before {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.15) 0%,
    transparent 60%
  );
  animation: none;
}

/* Particle burst for nat 20 */
.death-save-overlay--nat20::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    transparent 70%
  );
  animation: nat20-burst 1s ease-out;
  pointer-events: none;
}

@keyframes nat20-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* Death - darkening doom */
.death-save-overlay--death {
  background: radial-gradient(
    ellipse at center,
    rgba(20, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.98) 100%
  );
}

.death-save-overlay--death::before {
  background: radial-gradient(
    ellipse at center,
    transparent 20%,
    rgba(139, 0, 0, 0.6) 100%
  );
  animation: death-vignette 2s ease-in-out infinite;
}

@keyframes death-vignette {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* ============================================
 * PROGRESSIVE TENSION STATES
 * More failures = more intense visuals
 * ============================================ */

/* 1 failure - mild warning */
.death-save-overlay[data-failures="1"] {
  --danger-intensity: 0.3;
}

/* 2 failures - high danger */
.death-save-overlay[data-failures="2"] {
  --danger-intensity: 0.6;
}

.death-save-overlay[data-failures="2"]::before {
  animation: vignette-pulse 1.5s ease-in-out infinite;
}

/* Screen shake on critical failure */
.death-save-overlay--screen-shake {
  animation: screen-shake 0.5s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, -4px); }
  20% { transform: translate(8px, 4px); }
  30% { transform: translate(-6px, 2px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* ============================================
 * ADVANTAGE/DISADVANTAGE INDICATORS
 * ============================================ */

.death-save-overlay__modifier {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  animation: modifier-appear 0.4s ease-out;
}

@keyframes modifier-appear {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.death-save-overlay__modifier--advantage {
  left: 2rem;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.death-save-overlay__modifier--disadvantage {
  right: 2rem;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

/* Multiple rolls display for advantage/disadvantage */
.death-save-overlay__rolls {
  font-size: 0.875rem;
  color: var(--terminal-text-muted, #888);
  margin-top: 0.5rem;
  text-align: center;
}

.death-save-overlay__rolls span {
  font-family: var(--font-mono, monospace);
  padding: 0.25rem 0.5rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-radius: 3px;
  margin: 0 0.25rem;
}

.death-save-overlay__rolls span.used {
  color: var(--terminal-text-primary, #e0e0e0);
  border: 1px solid var(--terminal-border, #444);
}

.death-save-overlay__rolls span.discarded {
  color: var(--terminal-text-muted, #888);
  text-decoration: line-through;
  opacity: 0.6;
}

/* ============================================
 * ACCESSIBILITY & REDUCED MOTION
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .death-save-overlay,
  .death-save-overlay::before,
  .death-save-d20__face,
  .death-save-d20--rolling .death-save-d20__face,
  .death-save-d20--revealed .death-save-d20__face,
  .death-save-d20--nat20 .death-save-d20__face,
  .death-save-d20--nat1 .death-save-d20__face,
  .death-save-box--filled,
  .death-save-box--new,
  .death-save-overlay__result,
  .death-save-overlay__result--nat20,
  .death-save-overlay__result--death,
  .death-save-overlay--screen-shake,
  .death-save-overlay__continue,
  .death-save-overlay__modifier,
  .death-save-overlay--nat20::after {
    animation: none;
    transition: opacity 0.3s ease;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .death-save-overlay {
    background: Canvas;
    border: 3px solid CanvasText;
  }

  .death-save-d20__face {
    border: 3px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .death-save-box {
    border: 2px solid CanvasText;
  }

  .death-save-box--filled {
    background: Highlight;
    color: HighlightText;
  }
}

/* ============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================ */

@media (max-width: 480px) {
  .death-save-d20 {
    width: 120px;
    height: 120px;
  }

  .death-save-d20__face {
    font-size: 3rem;
  }

  .death-save-overlay__tracker {
    gap: 1.5rem;
  }

  .death-save-box {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .death-save-overlay__result {
    font-size: 1.25rem;
  }

  .death-save-overlay__character-name {
    font-size: 1.25rem;
  }

  .death-save-overlay__modifier {
    position: static;
    transform: none;
    margin-bottom: 1rem;
  }
}
/* ==========================================================================
 * Combat Round Log Panel Component
 * Chronological combat event log grouped by round
 * ========================================================================== */

.combat-round-log-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-mono);
}

/* Header */
.combat-round-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-round-log-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.combat-round-log-title-icon {
  font-size: 1.2em;
}

.combat-round-log-controls {
  display: flex;
  gap: var(--space-2);
}

.combat-round-log-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.combat-round-log-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: rgba(255, 255, 255, 0.05);
}

.combat-round-log-btn svg {
  width: 14px;
  height: 14px;
}

/* Filter panel */
.combat-round-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.combat-round-log-filter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.combat-round-log-filter input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.filter-icon {
  font-size: var(--font-size-sm);
}

.filter-icon--damage { color: #ef4444; }
.filter-icon--healing { color: #22c55e; }
.filter-icon--condition { color: #f59e0b; }
.filter-icon--turn { color: #3b82f6; }
.filter-icon--death { color: #8b5cf6; }

/* Status indicator */
.combat-round-log-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator--inactive {
  background: var(--color-text-muted);
}

.status-indicator--active {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: pulse-green 2s ease-in-out infinite;
}

.status-indicator--ended {
  background: #6b7280;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.status-text {
  color: var(--color-text-secondary);
}

/* List container */
.combat-round-log-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Empty state */
.combat-round-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.combat-round-log-empty-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.combat-round-log-empty-text {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.combat-round-log-empty-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Round containers */
.combat-log-round {
  margin-bottom: var(--space-4);
}

.combat-log-round-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.round-number {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.round-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--color-accent), transparent);
}

.combat-log-round-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Event entries */
.combat-log-event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.combat-log-event:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Event type colors */
.combat-log-event--damage {
  border-left-color: #ef4444;
}

.combat-log-event--healing {
  border-left-color: #22c55e;
}

.combat-log-event--condition {
  border-left-color: #f59e0b;
}

.combat-log-event--turn {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.combat-log-event--death {
  border-left-color: #8b5cf6;
}

.combat-log-event--combat-start,
.combat-log-event--combat-end {
  border-left-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.1);
}

.combat-log-event--critical {
  background: rgba(239, 68, 68, 0.15);
  border-left-width: 4px;
}

/* Event time */
.event-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 60px;
}

/* Event icon */
.event-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-icon svg {
  width: 14px;
  height: 14px;
}

.combat-log-event--damage .event-icon { color: #ef4444; }
.combat-log-event--healing .event-icon { color: #22c55e; }
.combat-log-event--condition .event-icon { color: #f59e0b; }
.combat-log-event--turn .event-icon { color: #3b82f6; }
.combat-log-event--death .event-icon { color: #8b5cf6; }
.combat-log-event--combat-start .event-icon,
.combat-log-event--combat-end .event-icon { color: var(--color-accent); }

/* Event description */
.event-description {
  flex: 1;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Event value */
.event-value {
  font-weight: var(--font-weight-bold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.event-value--damage {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.event-value--healing {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

/* New entry animation */
.combat-log-event--new {
  animation: eventSlideIn 0.3s ease-out;
  background: rgba(255, 215, 0, 0.15);
}

@keyframes eventSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
    background: rgba(255, 215, 0, 0.3);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    background: rgba(255, 215, 0, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combat-log-event--new {
    animation: none;
  }

  .status-indicator--active {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .combat-log-event {
    flex-wrap: wrap;
  }

  .event-time {
    width: 100%;
    margin-bottom: var(--space-1);
  }

  .event-value {
    margin-left: auto;
  }
}
/* ==========================================================================
 * Dice History Panel Component
 * Shows chronological roll history with breakdown and context
 * Part of the Interactive Narrative system
 * ========================================================================== */

.dice-history-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-mono);
}

/* Header */
.dice-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.dice-history-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.dice-history-title-icon {
  font-size: 1.2em;
}

.dice-history-clear-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dice-history-clear-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: rgba(255, 255, 255, 0.05);
}

/* List container */
.dice-history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Empty state */
.dice-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.dice-history-empty-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.dice-history-empty-text {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.dice-history-empty-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Roll entry */
.dice-history-entry {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-subtle);
  transition: background 0.2s ease, color 0.2s ease;
}

.dice-history-entry:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Success/failure border colors */
.dice-history-entry[data-success="true"] {
  border-left-color: #22c55e;
}

.dice-history-entry[data-success="false"] {
  border-left-color: #ef4444;
}

/* Entry header */
.dice-history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.dice-history-entry-type {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dice-history-entry-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Breakdown */
.dice-history-entry-breakdown {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.dice-history-entry-expression {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.dice-history-entry-arrow {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-dice {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
}

.dice-history-entry-modifier {
  color: var(--color-text-muted);
}

.dice-history-entry-equals {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-total {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.dice-history-entry[data-success="true"] .dice-history-entry-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.dice-history-entry[data-success="false"] .dice-history-entry-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.dice-history-entry-outcome {
  margin-left: var(--space-1);
  font-weight: bold;
}

.dice-history-entry[data-success="true"] .dice-history-entry-outcome {
  color: #22c55e;
}

.dice-history-entry[data-success="false"] .dice-history-entry-outcome {
  color: #ef4444;
}

/* Reason/context */
.dice-history-entry-reason {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* New entry animation */
.dice-history-entry--new {
  animation: rollEntrySlideIn 0.3s ease-out;
  background: rgba(255, 215, 0, 0.15);
}

@keyframes rollEntrySlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    background: rgba(255, 215, 0, 0.3);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 215, 0, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dice-history-entry--new {
    animation: none;
  }
}
/**
 * Bloodied Indicator Styles
 * =========================
 * Visual indicator for enemies at 50% HP or below.
 * D&D 5e convention to help players gauge enemy health.
 */

/* ========================================
 * Combatant Health State Classes
 * ======================================== */

.combatant--healthy {
  /* Default state, no special styling */
}

.combatant--injured {
  --combatant-accent: var(--color-warning, #F59E0B);
}

.combatant--bloodied {
  --combatant-accent: var(--color-danger, #EF4444);
  position: relative;
}

.combatant--critical {
  --combatant-accent: var(--color-accent-error, #DC2626);
  position: relative;
}

.combatant--downed {
  --combatant-accent: var(--color-muted, #6B7280);
  opacity: 0.6;
}

/* ========================================
 * Bloodied Visual Effects
 * ======================================== */

/* Red pulsing glow for bloodied enemies */
.combatant--bloodied::before,
.combatant--critical::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: transparent;
  border: 2px solid var(--combatant-accent);
  animation: bloodied-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes bloodied-pulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 5px var(--combatant-accent);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }
}

/* Critical state - faster pulse */
.combatant--critical::before {
  animation: critical-pulse 1s ease-in-out infinite;
}

@keyframes critical-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 8px var(--combatant-accent);
    border-color: var(--combatant-accent);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px var(--combatant-accent), 0 0 30px rgba(220, 38, 38, 0.3);
    border-color: #FF6B6B;
  }
}

/* ========================================
 * Bloodied Label/Badge
 * ======================================== */

.bloodied-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-danger, #EF4444);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sticky);
  animation: bloodied-badge-appear 0.3s ease-out;
}

@keyframes bloodied-badge-appear {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-5px);
  }
  60% {
    transform: scale(1.1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bloodied-indicator--critical {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  animation: critical-badge-flash 0.8s ease-in-out infinite;
}

@keyframes critical-badge-flash {
  0%, 100% {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    background: linear-gradient(135deg, #FF6B6B, #EF4444);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Combat Tracker Integration
 * ======================================== */

/* Bloodied row highlight in combat tracker */
.combat-tracker__row.combatant--bloodied,
.initiative-tracker__entry.combatant--bloodied {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
}

.combat-tracker__row.combatant--critical,
.initiative-tracker__entry.combatant--critical {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, transparent 100%);
}

/* HP bar color changes */
.combatant--bloodied .hp-bar,
.combatant--bloodied .cs-hp-fill {
  background: linear-gradient(90deg, #EF4444, #DC2626);
}

.combatant--critical .hp-bar,
.combatant--critical .cs-hp-fill {
  background: linear-gradient(90deg, #DC2626, #991B1B);
  animation: hp-bar-critical-flash 0.8s ease-in-out infinite;
}

@keyframes hp-bar-critical-flash {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* ========================================
 * Inline Combatant Card Styling
 * ======================================== */

.combatant-card.combatant--bloodied {
  border-left: 3px solid var(--color-danger, #EF4444);
}

.combatant-card.combatant--critical {
  border-left: 3px solid var(--color-accent-error, #DC2626);
  box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.2);
}

/* Health status text */
.combatant-card__health-status {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  margin-left: var(--space-2, 8px);
}

.combatant-card__health-status--bloodied {
  color: var(--color-danger, #EF4444);
}

.combatant-card__health-status--critical {
  color: var(--color-accent-error, #DC2626);
  animation: critical-text-flash 1s ease-in-out infinite;
}

@keyframes critical-text-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .combatant--bloodied::before,
  .combatant--critical::before,
  .bloodied-indicator,
  .bloodied-indicator--critical,
  .combatant--critical .hp-bar,
  .combatant--critical .cs-hp-fill,
  .combatant-card__health-status--critical {
    animation: none;
  }

  /* Static visual indicators instead of animation */
  .combatant--bloodied::before {
    opacity: 0.6;
    box-shadow: 0 0 10px var(--combatant-accent);
  }

  .combatant--critical::before {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }

  .bloodied-indicator {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .combatant--bloodied::before,
  .combatant--critical::before {
    border-width: 3px;
  }

  .bloodied-indicator {
    font-size: var(--font-size-xs, 11px);
    padding: 3px 8px;
  }
}
/**
 * Concentration Indicator Styles
 * ==============================
 * Visual indicator for active concentration spells.
 * D&D 5e concentration tracking with break button.
 */

/* ========================================
 * Main Indicator Container
 * ======================================== */

.concentration-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  box-shadow:
    0 0 10px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: concentration-appear 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

@keyframes concentration-appear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
  }
  60% {
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle magic shimmer effect */
.concentration-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: concentration-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes concentration-shimmer {
  0%, 100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(50%);
  }
}

/* ========================================
 * Icon with Pulse Animation
 * ======================================== */

.concentration-indicator__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.concentration-indicator__pulse {
  width: 100%;
  height: 100%;
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

@keyframes concentration-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }
}

/* ========================================
 * Label Content
 * ======================================== */

.concentration-indicator__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.concentration-indicator__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
}

.concentration-indicator__duration {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-violet-400, #A78BFA);
  opacity: 0.8;
}

/* ========================================
 * Break Concentration Button
 * ======================================== */

.concentration-indicator__break {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: var(--space-1, 4px);
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-red-400, #F87171);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.concentration-indicator__break:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.6);
  color: var(--color-red-300, #FCA5A5);
  transform: scale(1.1);
}

.concentration-indicator__break:focus-visible {
  outline: 2px solid var(--color-red-400, #F87171);
  outline-offset: 2px;
}

.concentration-indicator__break:active {
  transform: scale(0.95);
}

.concentration-indicator__break svg {
  width: 12px;
  height: 12px;
}

/* ========================================
 * Toast Customizations
 * ======================================== */

.toast--concentration {
  --toast-accent: var(--color-violet-500, #8B5CF6);
  border-left-color: var(--color-violet-500, #8B5CF6);
}

.toast--concentration-broken {
  --toast-accent: var(--color-amber-500, #F59E0B);
  border-left-color: var(--color-amber-500, #F59E0B);
}

.toast--concentration-check {
  --toast-accent: var(--color-red-500, #EF4444);
  border-left-color: var(--color-red-500, #EF4444);
  animation: toast-urgent-pulse 0.5s ease-in-out 2;
}

@keyframes toast-urgent-pulse {
  0%, 100% {
    box-shadow: var(--toast-shadow, 0 4px 6px rgba(0, 0, 0, 0.3));
  }
  50% {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
 * Character Sheet Integration
 * ======================================== */

.character-sheet__header .concentration-indicator {
  margin-left: auto;
}

/* Status bar integration */
.status-bar__right .concentration-indicator {
  margin-right: var(--space-2, 8px);
}

/* Combat tracker integration */
.combat-tracker__header .concentration-indicator {
  font-size: var(--font-size-xs, 11px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
}

.combat-tracker__header .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.combat-tracker__header .concentration-indicator__break {
  width: 14px;
  height: 14px;
}

.combat-tracker__header .concentration-indicator__break svg {
  width: 10px;
  height: 10px;
}

/* ========================================
 * Compact/Mobile Variant
 * ======================================== */

.concentration-indicator--compact {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
}

.concentration-indicator--compact .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.concentration-indicator--compact .concentration-indicator__duration {
  display: none;
}

@media (max-width: 640px) {
  .concentration-indicator {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--font-size-xs, 11px);
  }

  .concentration-indicator .concentration-indicator__icon {
    width: 16px;
    height: 16px;
  }

  .concentration-indicator .concentration-indicator__duration {
    display: none;
  }
}

/* ========================================
 * Concentration Warning State
 * (when save is required)
 * ======================================== */

.concentration-indicator--warning {
  border-color: rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 100%
  );
  animation: concentration-warning-pulse 0.5s ease-in-out infinite;
}

@keyframes concentration-warning-pulse {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .concentration-indicator,
  .concentration-indicator__pulse,
  .concentration-indicator--warning,
  .toast--concentration-check {
    animation: none;
  }

  .concentration-indicator::before {
    animation: none;
    display: none;
  }

  .concentration-indicator__pulse {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }

  .concentration-indicator--warning {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .concentration-indicator {
    border-width: 2px;
    background: rgba(139, 92, 246, 0.25);
  }

  .concentration-indicator__spell {
    font-weight: 700;
  }

  .concentration-indicator__break {
    border-width: 2px;
  }
}

/* ========================================
 * Dark/Light Theme Adjustments
 * ======================================== */

[data-theme="light"] .concentration-indicator {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-indicator__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-indicator__duration {
  color: var(--color-violet-600, #7C3AED);
}

[data-theme="light"] .concentration-indicator__pulse {
  color: var(--color-violet-600, #7C3AED);
}

/* ========================================
 * Status Bar Widget Version
 * Compact persistent indicator in status bar
 * ======================================== */

.status-widget--concentration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  animation: concentration-widget-appear 0.3s ease-out;
}

@keyframes concentration-widget-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.concentration-widget__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.concentration-widget__pulse {
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

.concentration-widget__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover state for widget */
.status-widget--concentration:hover {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(168, 85, 247, 0.15) 100%
  );
  border-color: rgba(139, 92, 246, 0.6);
}

/* Mobile: more compact */
@media (max-width: 640px) {
  .status-widget--concentration {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 11px);
    gap: 4px;
  }

  .concentration-widget__pulse {
    width: 12px;
    height: 12px;
  }

  .concentration-widget__spell {
    max-width: 100px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .status-widget--concentration {
    animation: none;
  }

  .concentration-widget__pulse {
    animation: none;
  }
}

/* Light theme */
[data-theme="light"] .status-widget--concentration {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-widget__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-widget__pulse {
  color: var(--color-violet-600, #7C3AED);
}
/**
 * Spell Slot Widget
 * =================
 * Task #307: Compact spell slot visual tracker for status bar.
 *
 * Design:
 * - Horizontal layout showing all spell levels with pips
 * - Purple gem aesthetic matching spellbook
 * - Compact size suitable for status bar
 * - Real-time updates via WebSocket events
 */

/* Widget Container */
.spell-slot-widget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 28px;
}

.spell-slot-widget:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-purple);
}

.spell-slot-widget:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 2px;
}

/* Widget Label */
.spell-slot-widget__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Slots Container - All Levels */
.spell-slot-widget__slots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Individual Slot Level Group */
.spell-slot-widget__level {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Level Number Label */
.spell-slot-widget__level-num {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  min-width: 10px;
  text-align: center;
}

/* Pips Container */
.spell-slot-widget__pips {
  display: flex;
  gap: 2px;
}

/* Individual Pip */
.spell-slot-widget__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Filled Pip - Available Slot */
.spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 4px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Expended Pip - Used Slot */
.spell-slot-widget__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Summary Text (alternative compact view) */
.spell-slot-widget__summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.spell-slot-widget__summary-total {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Expanded Popover View
 * ======================================== */

.spell-slot-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.spell-slot-widget--expanded .spell-slot-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.spell-slot-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.spell-slot-popover__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Full Slot Grid in Popover */
.spell-slot-popover__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.spell-slot-popover__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.spell-slot-popover__level {
  min-width: 50px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-popover__pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spell-slot-popover__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 6px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-slot-popover__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-slot-popover__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 30px;
  text-align: right;
}

/* Empty State */
.spell-slot-widget--empty {
  opacity: 0.6;
  cursor: default;
}

.spell-slot-widget--empty:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

/* ========================================
 * Slot Usage Animation
 * ======================================== */

.spell-slot-widget__pip--using {
  animation: pipUsed 0.5s ease-out;
}

@keyframes pipUsed {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(198, 120, 221, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }
}

/* Slot Restoration Animation */
.spell-slot-widget__pip--restoring {
  animation: pipRestored 0.5s ease-out;
}

@keyframes pipRestored {
  0% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
 * Warlock Pact Magic Variant
 * ======================================== */

.spell-slot-widget--pact-magic .spell-slot-widget__label {
  color: var(--color-accent-cyan);
}

.spell-slot-widget--pact-magic .spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(86, 182, 194, 1),
    rgba(34, 139, 150, 0.8)
  );
  box-shadow:
    0 0 4px rgba(86, 182, 194, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

/* On smaller screens, show only summary */
@media (max-width: 768px) {
  .spell-slot-widget__slots {
    display: none;
  }

  .spell-slot-widget__summary {
    display: block;
  }
}

@media (min-width: 769px) {
  .spell-slot-widget__summary {
    display: none;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .spell-slot-widget,
  .spell-slot-widget__pip,
  .spell-slot-popover,
  .spell-slot-popover__pip {
    transition: none;
  }

  .spell-slot-popover__pip--filled,
  .spell-slot-widget__pip--using,
  .spell-slot-widget__pip--restoring {
    animation: none;
  }
}

/* ========================================
 * Gem Sparkle Animation (shared with spellbook)
 * ======================================== */

/**
 * Scroll to Latest Button
 * =======================
 * Floating button that appears when user scrolls up in narrative.
 * Allows quick return to most recent messages.
 * Designed to be unobtrusive - small, translucent, and out of the way.
 */

/* ========================================
 * Main Button Styles
 * ======================================== */

.scroll-to-latest {
  position: absolute;
  bottom: calc(var(--space-4, 16px) + 60px); /* Above input area */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--z-overlay, 50);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px 12px;

  background: var(--color-surface-elevated, #1F2937);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  color: var(--color-text-secondary, #9CA3AF);
  font-size: var(--font-size-2xs, 11px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.scroll-to-latest.visible {
  opacity: 0.7;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.scroll-to-latest:hover {
  opacity: 1;
  color: var(--color-text-primary, #F9FAFB);
  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.15));
}

.scroll-to-latest:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  opacity: 1;
}

.scroll-to-latest:active {
  transform: translateX(-50%) translateY(1px);
  opacity: 1;
}

/* ========================================
 * Icon Styles
 * ======================================== */

.scroll-to-latest__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.scroll-to-latest:hover .scroll-to-latest__icon {
  opacity: 1;
}

.scroll-to-latest__icon svg {
  width: 100%;
  height: 100%;
}

/* ========================================
 * Text Label
 * ======================================== */

.scroll-to-latest__text {
  line-height: 1;
}

/* ========================================
 * Badge Variant (with unread count)
 * ======================================== */

.scroll-to-latest__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-1, 4px);
  margin-left: 2px;

  background: var(--color-primary, #3B82F6);
  border-radius: var(--radius-full, 9999px);

  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  color: white;
}

.scroll-to-latest:hover .scroll-to-latest__badge {
  background: white;
  color: var(--color-primary, #3B82F6);
}

/* ========================================
 * Compact Mobile Variant
 * ======================================== */

@media (max-width: 480px) {
  .scroll-to-latest {
    padding: 4px 10px;
    bottom: calc(var(--space-3, 12px) + 50px);
  }

  .scroll-to-latest__text {
    display: none;
  }

  .scroll-to-latest__icon {
    width: 14px;
    height: 14px;
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest {
    transition: none;
  }

  .scroll-to-latest.visible {
    transform: translateX(-50%);
  }

  .scroll-to-latest:active {
    transform: translateX(-50%);
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .scroll-to-latest {
    border-width: 2px;
    font-weight: 600;
  }

  .scroll-to-latest.visible {
    opacity: 1;
  }
}

/* ========================================
 * Light Theme
 * ======================================== */

[data-theme="light"] .scroll-to-latest {
  background: var(--color-surface, #FFFFFF);
  border-color: var(--color-border, rgba(0, 0, 0, 0.08));
  color: var(--color-text-secondary, #6B7280);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .scroll-to-latest:hover {
  color: var(--color-text-primary, #111827);
  border-color: var(--color-border, rgba(0, 0, 0, 0.15));
}
/* ============================================
 * Play Mode Indicator Styles
 * ============================================
 * Compact display for multiplayer play mode with
 * scene type badges, turn timer, and preset indicators.
 */

/* Main Container */
.play-mode-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Play Mode Badge */
.play-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.play-mode-badge.realtime {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.play-mode-badge.turn_based {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.play-mode-badge.async {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.play-mode-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.play-mode-label {
  font-weight: var(--font-weight-medium);
}

.play-mode-turn,
.play-mode-queue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
}

/* Async queue ready count styling */
.play-mode-queue {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Turn-based current turn styling */
.play-mode-turn {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Scene Type Badge */
.scene-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.scene-type-badge.combat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.scene-type-badge.exploration {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.scene-type-badge.social {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.scene-type-badge.puzzle {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.scene-type-badge.cutscene {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.scene-type-badge.rest {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.scene-type-badge.travel {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Turn Timer */
.turn-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.turn-timer.hidden {
  display: none;
}

.timer-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.timer-display {
  min-width: 3ch;
  text-align: center;
}

.timer-display.timer-warning {
  color: #eab308;
  animation: pulse-warning 1s ease-in-out infinite;
}

.timer-display.timer-critical {
  color: #ef4444;
  animation: pulse-critical 0.5s ease-in-out infinite;
}

.timer-display.timer-expired {
  color: #ef4444;
  opacity: 0.6;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Preset Badge */
.preset-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.preset-badge.casual_async {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.preset-badge.intense_combat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.preset-badge.relaxed_exploration {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.preset-badge.balanced {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

/* Your Turn Indicator */
.your-turn-indicator {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
  animation: your-turn-pulse 1.5s ease-in-out infinite;
}

.your-turn-indicator.hidden {
  display: none;
}

@keyframes your-turn-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.7);
    transform: scale(1.02);
  }
}

/* Waiting For Indicator */
.waiting-for-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius-md);
  color: #eab308;
  font-size: var(--font-size-sm);
  animation: waiting-pulse 2s ease-in-out infinite;
}

.waiting-for-indicator.hidden {
  display: none;
}

.waiting-for-indicator .waiting-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  animation: waiting-spin 3s linear infinite;
}

.waiting-for-indicator .waiting-text {
  font-weight: var(--font-weight-medium);
}

.waiting-for-indicator .waiting-text strong {
  color: #fbbf24;
  font-weight: var(--font-weight-bold);
}

@keyframes waiting-pulse {
  0%, 100% {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
  }
  50% {
    background: rgba(234, 179, 8, 0.25);
    border-color: rgba(234, 179, 8, 0.6);
  }
}

@keyframes waiting-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Play Mode Actions */
.play-mode-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

/* Dropdown Menus */
.play-mode-menu,
.preset-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 200px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.play-mode-menu.hidden,
.preset-menu.hidden {
  display: none;
}

.menu-header {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.play-mode-option,
.preset-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.play-mode-option:hover,
.preset-option:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.play-mode-option.active,
.preset-option.active {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.mode-desc,
.preset-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Turn Status Bar (in party panel) */
.turn-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

/* In-flight / Pending Actions List */
.pending-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.pending-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.pending-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.pending-action-item .action-character {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.pending-action-item .action-type {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.pending-action-item .action-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.pending-action-item .action-status.pending {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.pending-action-item .action-status.processing {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.pending-action-item .action-status.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.pending-actions-empty {
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.turn-number {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.turn-status-waiting {
  color: var(--color-text-muted);
}

.turn-status-allready {
  color: #22c55e;
}

.turn-status-processing {
  color: #3b82f6;
}

.submission-progress {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.progress-segment {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}

.progress-segment.filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.turn-timer-display {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.turn-timer-display.timer-low {
  color: #ef4444;
}

/* Member Action Badge */
.member-action-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.member-action-badge.badge-waiting {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.member-action-badge.badge-ready {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.member-action-badge.badge-acting {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.member-action-badge.badge-done {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

/* Their Turn Highlight */
.party-member-card.their-turn {
  border-left: 3px solid var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.05);
}

/* Read-only Sheet (party member view) */
.ro-sheet {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.ro-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ro-sheet__race {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ro-sheet__class {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ro-sheet__bg {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ro-sheet__condition {
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.ro-sheet__stats-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ro-sheet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  flex: 1;
}

.ro-sheet__stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.ro-sheet__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ro-sheet__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.ro-sheet__ability-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.ro-sheet__ability-mod {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.ro-sheet__ability-score {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__section {
  margin-bottom: var(--space-4);
}

.ro-sheet__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.ro-sheet__skill {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__skill.proficient {
  color: var(--color-text-primary);
}

.ro-sheet__skill-prof {
  color: var(--color-accent-primary);
}

.ro-sheet__skill-bonus {
  font-weight: var(--font-weight-semibold);
  min-width: 2.5ch;
}

.ro-sheet__equipment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ro-sheet__equip-item {
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.ro-sheet__none {
  color: var(--color-text-muted);
  font-style: italic;
}

.ro-sheet__feature {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__feature:last-child {
  border-bottom: none;
}

.ro-sheet__feature-name {
  color: var(--color-text-primary);
}

.ro-sheet__feature-level {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.ro-sheet__spell-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ro-sheet__spell-group {
  margin-bottom: var(--space-1);
}

.ro-sheet__spell-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* Loading state */
.sheet-loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

/* ============================================
 * Play Mode Indicator within Party Status Panel
 * ============================================ */

/* Full play mode indicator in party panel context */
.panel-party-status .play-mode-indicator {
  position: relative;
  flex-wrap: wrap;
  margin: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

/* Simple play mode indicator (JS-populated fallback) */
.play-mode-indicator-simple {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.play-mode-indicator-simple:empty {
  display: none;
}

.play-mode-indicator-simple .mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.play-mode-indicator-simple .mode-badge.realtime {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.play-mode-indicator-simple .mode-badge.turn_based {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.play-mode-indicator-simple .mode-badge.async {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

/* ============================================
 * Turn Status Banner
 * ============================================
 * Prominent banner above input showing whose turn it is
 */

.turn-status-banner {
  margin: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.turn-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.turn-banner.hidden {
  display: none;
}

/* Your Turn - Green, attention-grabbing */
.turn-banner--your-turn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.25) 100%);
  border: 2px solid #22c55e;
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  animation: your-turn-glow 2s ease-in-out infinite;
}

.turn-banner--your-turn .turn-banner__icon {
  font-size: 1.5em;
  animation: sword-swing 1s ease-in-out infinite;
}

.turn-banner--your-turn .turn-banner__text {
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes your-turn-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
  }
}

@keyframes sword-swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* Flash animation when turn starts */
.turn-banner--flash {
  animation: turn-flash 0.5s ease-out 3;
}

@keyframes turn-flash {
  0%, 100% {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.25) 100%);
  }
  50% {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(22, 163, 74, 0.5) 100%);
    transform: scale(1.02);
  }
}

/* Waiting for another player - Amber */
.turn-banner--waiting {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.15) 100%);
  border: 2px solid rgba(234, 179, 8, 0.5);
  color: #eab308;
}

.turn-banner--waiting .turn-banner__icon {
  animation: waiting-rotate 3s linear infinite;
}

.turn-banner--waiting .turn-banner__text strong {
  color: #fbbf24;
  font-weight: var(--font-weight-bold);
}

@keyframes waiting-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Urgency states for long turns */
.turn-banner--urgent {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
}

.turn-banner--critical {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
  animation: critical-pulse 0.5s ease-in-out infinite;
}

@keyframes critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.turn-banner__elapsed {
  margin-left: auto;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  min-width: 4ch;
  text-align: center;
}

/* ============================================
 * Input Blocking Overlay
 * ============================================
 * Shown when it's not the player's turn
 */

/* position:relative for the input-blocked overlay containing block.
   On mobile (<768px), .input-area uses position:sticky instead
   (see mobile_enhancements.css), which also establishes a
   containing block for the absolute overlay. */
@media (min-width: 769px) {
  .input-area {
    position: relative;
  }
}

.input-blocked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  z-index: var(--z-sticky);
  cursor: not-allowed;
}

.input-blocked-overlay.hidden {
  display: none;
}

.input-blocked-overlay__text {
  padding: var(--space-2) var(--space-4);
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius-md);
  color: #eab308;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  animation: overlay-pulse 2s ease-in-out infinite;
}

@keyframes overlay-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Responsive adjustments for play mode indicator */
@media (max-width: 768px) {
  .play-mode-indicator {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-mode-actions {
    margin-left: 0;
    margin-top: var(--space-2);
    width: 100%;
  }

  .play-mode-menu,
  .preset-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    overflow-y: auto;
  }
}
/* ========================================
 * UI Pointer - Contextual Hints System
 * Used by AI DM to guide players to UI elements
 * ======================================== */

.ui-pointer {
  position: fixed;
  /* Floating UI layer (1000) — above panels and popovers but below modal overlays.
   * Tutorial pointers shouldn't obscure boot sequence or command palette (--z-sky=10000).
   * Part of the #2169 z-token consolidation followed through in tutorial revival (#2278). */
  z-index: var(--z-floating);
  max-width: 280px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
  pointer-events: auto;
}

.ui-pointer--visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-pointer--hiding {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* ========================================
 * Tooltip Style (default)
 * ======================================== */

.ui-pointer--tooltip {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(229, 192, 123, 0.12) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-pointer--tooltip .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow positions */
.ui-pointer--tooltip[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="left"] .ui-pointer__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="right"] .ui-pointer__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgba(255, 215, 0, 0.3);
}

/* ========================================
 * Arrow Style (prominent pointing)
 * ======================================== */

.ui-pointer--arrow {
  padding: var(--space-2) var(--space-3);
  background: var(--color-gold);
  color: var(--color-bg-dark);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.ui-pointer--arrow .ui-pointer__text {
  color: var(--color-bg-dark);
  font-weight: 600;
}

.ui-pointer--arrow .ui-pointer__button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
  color: var(--color-bg-dark);
}

.ui-pointer--arrow .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.ui-pointer--arrow[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--color-gold);
}

.ui-pointer--arrow[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--color-gold);
}

/* ========================================
 * Spotlight Style (dims surroundings)
 * ======================================== */

.ui-pointer--spotlight {
  padding: var(--space-3);
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.ui-pointer--spotlight::before {
  content: '';
  position: fixed;
  top: var(--spotlight-top, 0);
  left: var(--spotlight-left, 0);
  width: var(--spotlight-width, 100px);
  height: var(--spotlight-height, 50px);
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.7),
    0 0 20px 5px rgba(255, 215, 0, 0.3);
  pointer-events: none;
}

.ui-pointer-spotlight-target {
  position: relative;
  /* One layer above the pointer so the highlighted target stays visible. */
  z-index: var(--z-floating-above);
}

/* ========================================
 * Pulse Style (gentle attention)
 * ======================================== */

.ui-pointer--pulse {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(100, 200, 255, 0.15) 0%,
    rgba(150, 220, 255, 0.1) 100%
  );
  border: 1px solid rgba(100, 200, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.ui-pointer-pulse-target {
  animation: ui-pointer-pulse-target 2s ease-in-out infinite;
}

@keyframes ui-pointer-pulse-target {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(100, 200, 255, 0);
  }
}

/* ========================================
 * Content Elements
 * ======================================== */

.ui-pointer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-pointer__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.ui-pointer__button {
  align-self: flex-end;
  padding: var(--space-1-5) var(--space-3);
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ui-pointer__button:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.ui-pointer__button:active {
  transform: scale(0.98);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ui-pointer {
    transition: opacity 0.1s ease-out;
    transform: none;
  }

  .ui-pointer--visible {
    transform: none;
  }

  .ui-pointer-pulse-target {
    animation: none;
    box-shadow: 0 0 0 3px rgba(100, 200, 255, 0.5);
  }
}

/* ========================================
 * Mobile Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .ui-pointer {
    max-width: calc(100vw - 32px);
  }

  .ui-pointer__text {
    font-size: var(--font-size-xs);
  }
}
/**
 * Context-Aware Theming
 * ======================
 * Phase 4 P2-14: Dynamic theme shifts based on game context
 *
 * Usage:
 *   <div data-context="combat">...</div>
 *   <div data-context="rest">...</div>
 *   <div data-context="dungeon">...</div>
 *   <div data-context="social">...</div>
 */

/* ========================================
 * COMBAT CONTEXT
 * Red/orange aggressive theme
 * ======================================== */

[data-context="combat"] {
  --context-accent: var(--color-accent-error);
  --context-glow: 0 0 12px rgba(224, 108, 117, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-error) 40%, var(--color-border-default));
  --context-bg-tint: rgba(224, 108, 117, 0.03);
}

[data-context="combat"] .panel,
[data-context="combat"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 60px var(--context-bg-tint);
}

[data-context="combat"] .panel-header {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-error) 8%, transparent),
    transparent
  );
}

/* Combat pulse animation for emphasis */
[data-context="combat"] .combat-indicator {
  animation: combatPulse 2s ease-in-out infinite;
}

@keyframes combatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; filter: brightness(1.2); }
}

/* ========================================
 * REST/TAVERN CONTEXT
 * Warm golden theme
 * ======================================== */

[data-context="rest"],
[data-context="tavern"] {
  --context-accent: var(--color-gold);
  --context-glow: 0 0 12px rgba(255, 215, 0, 0.3);
  --context-border: color-mix(in srgb, var(--color-gold) 30%, var(--color-border-default));
  --context-bg-tint: rgba(255, 215, 0, 0.02);
}

[data-context="rest"] .panel,
[data-context="tavern"] .panel,
[data-context="rest"] .narrative-panel,
[data-context="tavern"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Cozy flicker effect for tavern */
[data-context="tavern"] .narrative-entry--dm::before {
  animation: tavernFlicker 4s ease-in-out infinite;
}

@keyframes tavernFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* ========================================
 * DUNGEON/EXPLORATION CONTEXT
 * Cool blue/cyan mysterious theme
 * ======================================== */

[data-context="dungeon"],
[data-context="exploration"] {
  --context-accent: var(--color-accent-cyan);
  --context-glow: 0 0 12px rgba(86, 182, 194, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-cyan) 30%, var(--color-border-default));
  --context-bg-tint: rgba(86, 182, 194, 0.02);
}

[data-context="dungeon"] .panel,
[data-context="exploration"] .panel,
[data-context="dungeon"] .narrative-panel,
[data-context="exploration"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Subtle mystery effect */
[data-context="dungeon"] .narrative-entry--dm {
  text-shadow: 0 0 20px rgba(86, 182, 194, 0.1);
}

/* ========================================
 * SOCIAL/DIALOGUE CONTEXT
 * Purple/warm social theme
 * ======================================== */

[data-context="social"],
[data-context="dialogue"] {
  --context-accent: var(--color-accent-purple);
  --context-glow: 0 0 12px rgba(198, 120, 221, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-border-default));
  --context-bg-tint: rgba(198, 120, 221, 0.02);
}

[data-context="social"] .panel,
[data-context="dialogue"] .panel {
  border-color: var(--context-border);
}

/* ========================================
 * DANGER/BOSS CONTEXT
 * Deep red ominous theme
 * ======================================== */

[data-context="danger"],
[data-context="boss"] {
  --context-accent: #8B0000;
  --context-glow: 0 0 20px rgba(139, 0, 0, 0.5);
  --context-border: color-mix(in srgb, #8B0000 50%, var(--color-border-default));
  --context-bg-tint: rgba(139, 0, 0, 0.04);
}

[data-context="danger"] .panel,
[data-context="boss"] .panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 100px var(--context-bg-tint);
}

/* Ominous pulsing for boss encounters */
[data-context="boss"] .narrative-panel {
  animation: bossOmen 3s ease-in-out infinite;
}

@keyframes bossOmen {
  0%, 100% {
    box-shadow: inset 0 0 100px rgba(139, 0, 0, 0.04);
  }
  50% {
    box-shadow: inset 0 0 120px rgba(139, 0, 0, 0.08);
  }
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  [data-context] .combat-indicator,
  [data-context="tavern"] .narrative-entry--dm::before,
  [data-context="boss"] .narrative-panel {
    animation: none;
  }
}
/* ============================================================================
 * ENCOUNTER DIFFICULTY INDICATOR
 * ============================================================================
 * Visual indicator showing the difficulty level of combat encounters
 * Based on D&D 5e encounter building rules (DMG p.82)
 *
 * Task #312: Encounter Difficulty Indicator
 * --------------------------------------------------------------------------*/

/* Difficulty badge in combat panel header */
.difficulty-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.difficulty-indicator__icon {
  font-size: 14px;
  line-height: 1;
}

.difficulty-indicator__label {
  line-height: 1;
}

/* Difficulty levels with color coding */
.difficulty-indicator--trivial {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-secondary, #9CA3AF);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.difficulty-indicator--easy {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22C55E);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.difficulty-indicator--medium {
  background: rgba(234, 179, 8, 0.15);
  color: var(--color-warning, #EAB308);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.difficulty-indicator--hard {
  background: rgba(249, 115, 22, 0.15);
  color: var(--color-orange, #F97316);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.difficulty-indicator--deadly {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger, #EF4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: deadly-pulse 2s ease-in-out infinite;
}

/* Pulsing animation for deadly encounters */
@keyframes deadly-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
  }
}

/* Tooltip for additional context */
.difficulty-indicator[title] {
  cursor: help;
}

/* Combat header integration */
.combat__header {
  position: relative;
}

.combat__difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .difficulty-indicator {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 10px);
    gap: 4px;
  }

  .difficulty-indicator__icon {
    font-size: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .difficulty-indicator--deadly {
    animation: none;
  }

  .difficulty-indicator {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .difficulty-indicator {
    border-width: 2px;
  }

  .difficulty-indicator--trivial {
    background: rgba(107, 114, 128, 0.25);
  }

  .difficulty-indicator--easy {
    background: rgba(34, 197, 94, 0.25);
  }

  .difficulty-indicator--medium {
    background: rgba(234, 179, 8, 0.25);
  }

  .difficulty-indicator--hard {
    background: rgba(249, 115, 22, 0.25);
  }

  .difficulty-indicator--deadly {
    background: rgba(239, 68, 68, 0.25);
  }
}
/**
 * Shell Selector Component
 * ========================
 * Dropdown for switching between UI shells (DOS, MUD, OS/2, etc.)
 */

.shell-selector {
  position: relative;
  display: inline-flex;
}

/* Trigger Button */
.shell-selector__trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--text-secondary, #999);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shell-selector__trigger:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--accent-color, #8b5cf6);
}

.shell-selector__trigger[aria-expanded="true"] {
  background: var(--bg-tertiary, #252540);
  border-color: var(--accent-color, #8b5cf6);
}

.shell-selector__icon {
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  color: var(--accent-color, #8b5cf6);
}

.shell-selector__name {
  font-weight: 500;
}

.shell-selector__chevron {
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.shell-selector__trigger[aria-expanded="true"] .shell-selector__chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu - opens downward by default (for top status bar) */
.shell-selector__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.shell-selector__dropdown[data-visible="true"],
.dropdown--open .shell-selector__dropdown,
.shell-selector__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* When status bar is at bottom (DOS shells), dropdown opens upward */
[data-shell="dos386"] .shell-selector__dropdown,
[data-shell="dos-gui"] .shell-selector__dropdown,
[data-shell="mud"] .shell-selector__dropdown {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(8px);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}

[data-shell="dos386"] .shell-selector__dropdown.open,
[data-shell="dos-gui"] .shell-selector__dropdown.open,
[data-shell="mud"] .shell-selector__dropdown.open {
  transform: translateY(0);
}

/* Header */
.shell-selector__header {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.shell-selector__header-text {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
}

/* Options */
.shell-selector__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #999);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.shell-selector__option:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e0e0e0);
}

.shell-selector__option.active {
  background: var(--accent-color-alpha, rgba(139, 92, 246, 0.15));
  color: var(--accent-color, #8b5cf6);
}

.shell-selector__option-icon {
  width: 1.5rem;
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  color: var(--accent-color, #8b5cf6);
  text-align: center;
}

.shell-selector__option-name {
  font-weight: 500;
  flex-shrink: 0;
}

.shell-selector__option-desc {
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  margin-left: auto;
}

/* Footer */
.shell-selector__footer {
  padding: 0.375rem 0.75rem;
  border-top: 1px solid var(--border-color, #333);
}

.shell-selector__footer-text {
  font-size: 0.625rem;
  font-style: italic;
  color: var(--text-muted, #888);
}

/* Shell-specific styling for the selector itself */
[data-shell="dos386"] .shell-selector__trigger {
  font-family: var(--font-mono, monospace);
}

[data-shell="dos386"] .shell-selector__icon {
  color: var(--shell-fg, #00ff00);
}

[data-shell="os2"] .shell-selector__trigger {
  border-width: 2px;
  border-style: solid;
  border-color: var(--bevel-light, #fff) var(--bevel-dark, #404040) var(--bevel-dark, #404040) var(--bevel-light, #fff);
  border-radius: 0;
}

[data-shell="wow"] .shell-selector__trigger {
  background: linear-gradient(180deg, #4a4a4a 0%, #2a2a2a 100%);
  border-color: var(--shell-border-gold, #8b7355);
}
/*
 * CRT Effects (legacy location)
 * ==============================
 * Moved to terminal/effects/_crt.css (Task #966).
 * This file is kept for Sprockets require compatibility.
 * All CRT styles now live in effects/_crt.css and are
 * imported via terminal/terminal.css @import.
 *
 * This file intentionally left empty to avoid duplication.
 */
/**
 * Context Bubble
 * ==============
 * Floating bubble showing AI context gathering progress.
 * Appears above the chat input during context collection.
 *
 * States:
 * - Planning: Shows analyzing message
 * - Querying: Shows list of queries with status indicators
 * - Complete: Collapses to summary with token count
 *
 * Uses Phase 1 design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Container
 * ======================================== */

.context-bubble {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  max-width: 100%;
  overflow: hidden;
}

.context-bubble--visible {
  display: flex;
}

/* Phases for theming */
.context-bubble[data-phase="planning"] {
  border-color: var(--color-accent-primary);
}

.context-bubble[data-phase="querying"] {
  border-color: var(--color-accent-warning);
}

.context-bubble[data-phase="complete"] {
  border-color: var(--color-accent-success);
}

/* ========================================
 * Header / Summary
 * ======================================== */

.context-bubble__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.context-bubble__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.context-bubble__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.context-bubble[data-phase="planning"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-search) no-repeat center / contain;
}

.context-bubble[data-phase="querying"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-books) no-repeat center / contain;
}

.context-bubble[data-phase="complete"] .context-bubble__icon::before {
  content: '✓';
}

.context-bubble__status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__token-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================
 * Expand/Collapse Toggle
 * ======================================== */

.context-bubble__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.context-bubble__toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.context-bubble__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.context-bubble__toggle-icon {
  transition: transform var(--transition-fast);
  font-size: var(--font-size-xs);
}

.context-bubble--collapsed .context-bubble__toggle-icon {
  transform: rotate(180deg);
}

/* ========================================
 * Task List
 * ======================================== */

.context-bubble__task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
  max-height: 200px;
  overflow-y: auto;
}

.context-bubble--collapsed .context-bubble__task-list {
  display: none;
}

.context-bubble__task {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.context-bubble__task--pending {
  color: var(--color-text-muted);
}

.context-bubble__task--running {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.context-bubble__task--complete {
  color: var(--color-text-secondary);
}

.context-bubble__task--failed {
  color: var(--color-accent-error);
}

.context-bubble__task-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

.context-bubble__task--running .context-bubble__task-icon {
  animation: pulse 1s ease-in-out infinite;
}

.context-bubble__task-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__task-tokens {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-success);
  flex-shrink: 0;
}

.context-bubble__task-error {
  font-size: var(--font-size-xs);
  color: var(--color-accent-error);
  flex-shrink: 0;
}

/* ========================================
 * Animations
 * ======================================== */

/* Entry animation */
.context-bubble--visible {
  animation: bubble-enter 0.2s ease-out;
}

@keyframes bubble-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
 * Placement Variants
 * ======================================== */

/* Above chat input (default) */
.context-bubble--above-input {
  position: relative;
}

/* Inside narrative panel (as bubble) */
.context-bubble--inline {
  margin: var(--space-2) 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* In a tray above input */
.context-bubble--tray {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .context-bubble {
    padding: var(--space-2);
  }

  .context-bubble__summary {
    font-size: var(--font-size-xs);
  }

  .context-bubble__task-list {
    max-height: 150px;
  }

  .context-bubble__task {
    font-size: var(--font-size-xs);
    padding: var(--space-1);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .context-bubble {
    transition: none;
  }

  .context-bubble--visible {
    animation: none;
  }

  .context-bubble__toggle-icon {
    transition: none;
  }

  .context-bubble__task--running .context-bubble__task-icon {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .context-bubble {
    border-width: 2px;
  }

  .context-bubble__task--running {
    border: 1px solid currentColor;
  }
}
/*
 * Icon Picker Component
 * =====================
 * A searchable grid component for selecting SVG icons.
 * Designed with the terminal aesthetic in mind.
 */

/* ========================================
 * WRAPPER & BASE
 * ======================================== */

.icon-picker-wrapper {
  width: 100%;
}

.icon-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-height: 400px;
  overflow: hidden;
}

.icon-picker--compact {
  max-height: 280px;
}

.icon-picker--compact .icon-picker__grid {
  max-height: 180px;
}

.icon-picker--compact .icon-picker__icon {
  padding: var(--space-1, 4px);
}

.icon-picker--compact .icon-picker__icon-name {
  display: none;
}

/* ========================================
 * SEARCH INPUT
 * ======================================== */

.icon-picker__search {
  position: relative;
  flex-shrink: 0;
}

.icon-picker__search-input {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  padding-left: var(--space-8, 32px);
  background: var(--color-bg-tertiary, #3d3d3d);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  transition: border-color var(--transition-fast, 100ms ease);
}

.icon-picker__search-input:focus {
  outline: none;
  border-color: var(--color-border-focus, #61afef);
}

.icon-picker__search-input::placeholder {
  color: var(--color-text-muted, #888888);
}

.icon-picker__search-icon {
  position: absolute;
  left: var(--space-2, 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted, #888888);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
 * CATEGORY FILTER
 * ======================================== */

.icon-picker__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  flex-shrink: 0;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid var(--color-border-subtle, #333333);
}

.icon-picker__category-btn {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  white-space: nowrap;
}

.icon-picker__category-btn:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.icon-picker__category-btn--active {
  color: var(--color-accent-primary, #61afef);
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
}

.icon-picker__category-btn--active:hover {
  color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
}

/* ========================================
 * ICON GRID
 * ======================================== */

.icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  overflow-y: auto;
  max-height: 260px;
  flex: 1;
  background: var(--color-bg-secondary, #2d2d2d);
  border-radius: var(--radius-md, 4px);
}

/* Scrollbar styling */
.icon-picker__grid::-webkit-scrollbar {
  width: 6px;
}

.icon-picker__grid::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle, #555555);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888888);
}

/* ========================================
 * ICON BUTTONS
 * ======================================== */

.icon-picker__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px);
  background: var(--color-bg-elevated, #404040);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  min-height: 60px;
}

.icon-picker__icon:hover {
  border-color: var(--color-border-focus, #61afef);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
  transform: translateY(-1px);
}

.icon-picker__icon:active {
  transform: translateY(0);
}

.icon-picker__icon--selected {
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
  box-shadow: 0 0 0 1px var(--color-accent-primary, #61afef);
}

.icon-picker__icon--selected:hover {
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.2));
}

.icon-picker__icon--selected .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary, #e0e0e0);
  transition: color var(--transition-fast, 100ms ease);
}

.icon-picker__icon-svg svg {
  width: 20px;
  height: 20px;
}

.icon-picker__icon:hover .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-picker__icon:hover .icon-picker__icon-name {
  color: var(--color-text-secondary, #bbbbbb);
}

.icon-picker__icon--selected .icon-picker__icon-name {
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.icon-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
  grid-column: 1 / -1;
  color: var(--color-text-muted, #888888);
}

.icon-picker__empty-icon {
  opacity: 0.5;
}

.icon-picker__empty-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__empty-text {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

/* ========================================
 * SELECTED PREVIEW
 * ======================================== */

.icon-picker__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-md, 4px);
  flex-shrink: 0;
}

.icon-picker__preview--empty {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-color: var(--color-border-subtle, #333333);
}

.icon-picker__preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__preview-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__preview-name {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.icon-picker__preview-hint {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #888888);
  font-style: italic;
}

.icon-picker__preview-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1, 4px);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease);
}

.icon-picker__preview-clear:hover {
  color: var(--color-accent-error, #e06c75);
  background: rgba(224, 108, 117, 0.1);
}

.icon-picker__preview-clear svg {
  width: 14px;
  height: 14px;
}

/* ========================================
 * MODAL INTEGRATION
 * ======================================== */

.icon-picker-modal {
  padding: var(--space-4, 16px);
  background: var(--color-bg-elevated, #404040);
  border-radius: var(--radius-lg, 8px);
  max-width: 480px;
  width: 100%;
}

.icon-picker-modal .icon-picker__grid {
  max-height: 300px;
}

/* ========================================
 * INLINE INTEGRATION (for tab settings)
 * ======================================== */

.icon-picker--inline {
  padding: 0;
}

.icon-picker--inline .icon-picker__grid {
  max-height: 200px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon {
  min-height: 48px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon-svg svg {
  width: 18px;
  height: 18px;
}

.icon-picker--inline .icon-picker__categories {
  padding: 0;
  border-bottom: none;
  margin-bottom: var(--space-1, 4px);
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .icon-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--space-1, 4px);
  }

  .icon-picker__icon {
    min-height: 48px;
    padding: var(--space-1, 4px);
  }

  .icon-picker__icon-name {
    display: none;
  }

  .icon-picker__categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .icon-picker__category-btn {
    flex-shrink: 0;
  }
}
/* Hologram Viewport — 3D scene overlay for the terminal */

.hologram-viewport {
  position: absolute;
  inset: 0;
  z-index: var(--z-scroll-btn);
  background: var(--color-bg-primary, #0a0a0f);
  display: none;
  overflow: hidden;
}

.hologram-viewport--active {
  display: block;
}

/* Three.js canvas fills the viewport */
.hologram-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Active state for toggle button */
.hologram-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
}

/* Ensure main zone has relative positioning for the absolute overlay */
.zone--main {
  position: relative;
}
/**
 * Contextual Action Chips
 * =======================
 * Proactive action suggestions that appear near the terminal input.
 * These chips suggest contextually relevant actions based on game state.
 */

/* Container for the chips row */
.contextual-chips-container {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.contextual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}

/* Section label - subtle hint */
.contextual-chips__label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
  opacity: 0.7;
}

/* Empty state - hidden */
.contextual-chips-container[hidden] {
  display: none;
}

/* Hide in lobby - quick actions replace contextual chips */
.lobby-split-container .contextual-chips-container {
  display: none;
}

/* ==========================================================================
   Individual Chip
   ========================================================================== */

.contextual-chip {
  /* Color theming via custom properties (set inline by JS) */
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 99, 102, 241;

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Touch target: 44px minimum height (8px + 8px padding + ~13px font + line height) */
  padding: var(--space-2) var(--space-3);
  min-height: 36px; /* Combined with padding gets us to ~44px touchable area */
  border: 1px solid rgba(var(--chip-color-rgb), 0.3);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.12) 0%,
    rgba(var(--chip-color-rgb), 0.04) 100%
  );
  color: var(--chip-color);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;

  /* Entrance animation */
  animation: chipEnter 0.2s ease-out;
}

.contextual-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.2) 0%,
    rgba(var(--chip-color-rgb), 0.12) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
  transform: translateY(-1px);
}

.contextual-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--chip-color);
}

.contextual-chip:active,
.contextual-chip--executing {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
}

/* Chip icon */
.contextual-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.contextual-chip__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Chip label */
.contextual-chip__label {
  line-height: 1.2;
}

/* ==========================================================================
   Category Variants
   ========================================================================== */

/* Combat - Red/Orange for urgency */
.contextual-chip--combat {
  --chip-color: #ef4444;
  --chip-color-rgb: 239, 68, 68;
}

/* Exploration - Green for discovery */
.contextual-chip--exploration {
  --chip-color: #22c55e;
  --chip-color-rgb: 34, 197, 94;
}

/* Social - Blue for interaction */
.contextual-chip--social {
  --chip-color: #3b82f6;
  --chip-color-rgb: 59, 130, 246;
}

/* Shopping - Amber for commerce */
.contextual-chip--shopping {
  --chip-color: #f59e0b;
  --chip-color-rgb: 245, 158, 11;
}

/* Rest - Purple for recovery */
.contextual-chip--rest {
  --chip-color: #8b5cf6;
  --chip-color-rgb: 139, 92, 246;
}

/* Survival - Pink for urgency/health */
.contextual-chip--survival {
  --chip-color: #ec4899;
  --chip-color-rgb: 236, 72, 153;
}

/* Navigation - Indigo for movement */
.contextual-chip--navigation {
  --chip-color: #6366f1;
  --chip-color-rgb: 99, 102, 241;
}

/* Creation - Teal for building */
.contextual-chip--creation {
  --chip-color: #14b8a6;
  --chip-color-rgb: 20, 184, 166;
}

/* Mental - Purple for psychological */
.contextual-chip--mental {
  --chip-color: #a855f7;
  --chip-color-rgb: 168, 85, 247;
}

/* Hotbar - Subtle gray for utility actions */
.contextual-chip--hotbar {
  --chip-color: #6b7280;
  --chip-color-rgb: 107, 114, 128;

  /* Slightly more subtle appearance */
  border-style: dashed;
  opacity: 0.9;
}

.contextual-chip--hotbar:hover {
  opacity: 1;
  border-style: solid;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .contextual-chips {
    gap: var(--space-1);
  }

  /* Keep min-height for touch targets - only reduce padding slightly */
  .contextual-chip {
    padding: var(--space-1-5) var(--space-2);
    min-height: 36px; /* Maintain 44px touch target */
    font-size: 0.75rem;
  }

  .contextual-chips__label {
    font-size: 0.625rem;
  }

  .contextual-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .contextual-chip__icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ==========================================================================
   Mobile Quick Action Pills
   Horizontal scrollable strip above input — replaces flex-wrap layout on mobile.
   Swipeable when >4 actions. Collapses to icon-only when keyboard is open.
   ========================================================================== */

@media (max-width: 768px) {
  /* Container: flush with input, no vertical margin waste */
  .contextual-chips-container {
    padding: 0 var(--space-2);
    margin-bottom: var(--space-1);
  }

  /* Strip layout: single row, horizontal scroll, no wrapping */
  .contextual-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    padding: var(--space-1) 0;
    gap: var(--space-2);
  }

  .contextual-chips::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Hide the "Try" label on mobile — pills are self-explanatory */
  .contextual-chips__label {
    display: none;
  }

  /* Pills: chat-style suggested replies */
  .contextual-chip {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  /* Enable scroll snapping for precise swipe stops */
  .contextual-chips {
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--space-2);
  }

  /* Fade hint on right edge when scrollable (overflow indicator) */
  .contextual-chips-container {
    position: relative;
  }

  .contextual-chips-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-bg-primary, #1a1a2e));
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-fast);
    z-index: var(--z-raised);
  }

  /* Hide fade when scrolled to end */
  .contextual-chips-container.scrolled-end::after {
    opacity: 0;
  }

  /* Keyboard open: collapse to icon-only pills */
  .mobile-keyboard-open .contextual-chips-container {
    margin-bottom: 0;
  }

  .mobile-keyboard-open .contextual-chips {
    gap: var(--space-1);
    padding: 2px 0;
  }

  .mobile-keyboard-open .contextual-chip {
    padding: var(--space-1) var(--space-2);
    min-height: 32px;
  }

  .mobile-keyboard-open .contextual-chip__label {
    display: none;
  }

  .mobile-keyboard-open .contextual-chip__icon {
    width: 1rem;
    height: 1rem;
  }

  /* When icon-only, chips without icons show first letter as fallback */
  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) {
    max-width: 40px;
    overflow: hidden;
    text-overflow: clip;
  }

  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) .contextual-chip__label {
    display: block;
    max-width: 1ch;
    overflow: hidden;
  }
}

/* ==========================================================================
   Animation
   ========================================================================== */

/* Entrance animation for chips */
@keyframes chipEnter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered entrance for multiple chips (offset by 1 for label) */
.contextual-chip:nth-of-type(1) { animation-delay: 0ms; }
.contextual-chip:nth-of-type(2) { animation-delay: 30ms; }
.contextual-chip:nth-of-type(3) { animation-delay: 60ms; }
.contextual-chip:nth-of-type(4) { animation-delay: 90ms; }
.contextual-chip:nth-of-type(5) { animation-delay: 120ms; }
.contextual-chip:nth-of-type(6) { animation-delay: 150ms; }
.contextual-chip:nth-of-type(7) { animation-delay: 180ms; }
.contextual-chip:nth-of-type(8) { animation-delay: 210ms; }
.contextual-chip:nth-of-type(9) { animation-delay: 240ms; }
.contextual-chip:nth-of-type(10) { animation-delay: 270ms; }

@keyframes chipPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.4);
  }
}

/* Priority chips get a subtle pulse */
.contextual-chip--priority {
  animation: chipPulse 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contextual-chip {
    transition: none;
    animation: none;
  }

  .contextual-chip--priority {
    animation: none;
  }
}
/**
 * Achievement Celebration Modal
 * ===============================
 * Animated celebration modal that appears when achievements are unlocked.
 * Features confetti, sparkles, and dramatic reveal animations.
 */

/* ========================================
 * Modal Variant
 * ======================================== */

.unified-modal--achievement-celebration {
  animation: achievementReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes achievementReveal {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.unified-modal--achievement-celebration .unified-modal__card {
  background: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    color-mix(in srgb, var(--color-bg-primary) 95%, gold 5%) 100%
  );
  border: 2px solid color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, gold 20%, transparent);
}

.unified-modal--achievement-celebration .unified-modal__header {
  text-align: center;
  border-bottom: 2px solid color-mix(in srgb, gold 40%, var(--color-border-default) 60%);
}

.unified-modal--achievement-celebration .unified-modal__title {
  color: color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.unified-modal--achievement-celebration .unified-modal__subtitle {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-top: var(--space-2);
  font-style: italic;
}

/* ========================================
 * Content Layout
 * ======================================== */

.achievement-celebration__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.achievement-celebration__icon-large {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--space-4);
  animation: iconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.achievement-celebration__sparkles {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
  opacity: 0.8;
}

.achievement-celebration__sparkles {
  animation: sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

.achievement-celebration__message {
  font-size: 1.25rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text-primary) 90%, gold 10%);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* ========================================
 * View All CTA
 * ======================================== */

.achievement-celebration__view-all {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid color-mix(in srgb, gold 50%, var(--color-border-default) 50%);
  border-radius: var(--radius-md, 4px);
  color: color-mix(in srgb, var(--color-text-secondary) 80%, gold 20%);
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.achievement-celebration__view-all:hover {
  border-color: color-mix(in srgb, gold 70%, var(--color-border-default) 30%);
  color: color-mix(in srgb, var(--color-text-primary) 80%, gold 20%);
}

/* ========================================
 * Confetti Animation
 * ======================================== */

.achievement-celebration__confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-raised);
}

.achievement-celebration__confetto {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: confettiFall 3s ease-out forwards;
  opacity: 1;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
 * Backdrop Enhancement
 * ======================================== */

.unified-modal--achievement-celebration + .unified-modal__backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .achievement-celebration__icon-large {
    font-size: 4rem;
  }

  .achievement-celebration__message {
    font-size: 1rem;
  }

  .unified-modal--achievement-celebration .unified-modal__title {
    font-size: 1.5rem;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .unified-modal--achievement-celebration,
  .achievement-celebration__icon-large,
  .achievement-celebration__sparkles,
  .achievement-celebration__confetto {
    animation: none;
  }

  .achievement-celebration__confetti {
    display: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .unified-modal--achievement-celebration .unified-modal__card {
    border-width: 3px;
    border-color: var(--color-accent-primary);
  }

  .achievement-celebration__icon-large {
    filter: none;
  }
}
/* ==========================================================================
 * Combat Target Picker
 * Popover for selecting combat targets from initiative order.
 * Single mode (attack): click to select. Multi mode (spell): checkboxes.
 * Follows _roll_menu.css patterns for positioning and styling.
 * ========================================================================== */

/* Backdrop - click-outside-to-close */
.combat-target-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Popover container */
.combat-target-picker {
  position: fixed;
  min-width: 260px;
  max-width: 360px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: combatTargetPickerFadeIn 0.12s ease-out;
  overflow: hidden;
}

@keyframes combatTargetPickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.combat-target-picker__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

/* Custom target input */
.combat-target-picker__custom {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.combat-target-picker__input:focus {
  border-color: var(--color-border-focus);
}

.combat-target-picker__input::placeholder {
  color: var(--color-text-muted);
}

/* Target list */
.combat-target-picker__list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Empty state */
.combat-target-picker__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Individual target item */
.combat-target-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.combat-target-picker__item:hover,
.combat-target-picker__item--focused {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.combat-target-picker__item:active {
  background: rgba(97, 175, 239, 0.15);
}

.combat-target-picker__item--selected {
  background: rgba(97, 175, 239, 0.12);
  color: var(--color-text-primary);
}

.combat-target-picker__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Checkbox (multi mode) */
.combat-target-picker__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-primary);
  pointer-events: none;
}

/* Portrait */
.combat-target-picker__portrait {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.combat-target-picker__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name */
.combat-target-picker__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

/* HP indicator */
.combat-target-picker__hp {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.combat-target-picker__hp-bar {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hp--healthy .combat-target-picker__hp-bar {
  background: var(--color-accent-secondary, #98c379);
}

.hp--wounded .combat-target-picker__hp-bar {
  background: var(--color-accent-warning, #e5c07b);
}

.hp--critical .combat-target-picker__hp-bar {
  background: var(--color-accent-error, #e06c75);
}

.combat-target-picker__hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Type indicator */
.combat-target-picker__type {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Footer with confirm button (multi mode) */
.combat-target-picker__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__confirm {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.combat-target-picker__confirm:hover:not(:disabled) {
  opacity: 0.9;
}

.combat-target-picker__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .combat-target-picker {
    min-width: unset;
    max-width: unset;
    left: 8px;
    right: 8px;
    width: auto;
  }

  .combat-target-picker__item {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combat-target-picker {
    animation: none;
  }
}
/* ========================================
 * Expandable Text
 * Inline expandable text with typewriter reveals
 * ======================================== */

.expandable-text {
  display: inline;
  cursor: pointer;
}

.expandable-text--expanded {
  cursor: default;
}

.expandable-text__summary {
  display: inline;
}

.expandable-text__indicator {
  display: inline;
  color: var(--color-gold, #d4af37);
  font-weight: bold;
  opacity: 0.8;
  animation: indicatorPulse 1.5s ease-in-out infinite;
}

.expandable-text--expanded .expandable-text__indicator,
.expandable-text--expanding .expandable-text__indicator {
  display: none;
}

.expandable-text__expansion {
  color: var(--color-text, #e0e0e0);
}

/* Click/hover hint styling */
.expandable-text:not(.expandable-text--expanded):hover .expandable-text__indicator {
  opacity: 1;
  color: var(--color-gold-bright, #ffd700);
}

.expandable-text:not(.expandable-text--expanded):focus {
  outline: 2px solid var(--color-gold, #d4af37);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subtle underline hint for clickable text */
.expandable-text:not(.expandable-text--expanded) .expandable-text__summary {
  border-bottom: 1px dashed var(--color-text-secondary, #808080);
}

.expandable-text--expanded .expandable-text__summary {
  border-bottom: none;
}

/* Indicator pulse animation */
@keyframes indicatorPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .expandable-text__indicator {
    animation: none;
    opacity: 0.8;
  }
}
/* Handout Viewer - Lightbox overlay for DM-revealed handouts */

.handout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.handout-overlay--visible {
  opacity: 1;
}

.handout-modal {
  background: var(--terminal-bg, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
}

.handout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--terminal-text, #e0e0e0);
  font-family: inherit;
}

.handout-close-btn {
  background: none;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.handout-close-btn:hover {
  color: var(--terminal-text, #e0e0e0);
}

.handout-description {
  padding: 8px 16px;
  margin: 0;
  color: var(--terminal-text-muted, #888);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handout-content-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.handout-content-pdf {
  width: 80vw;
  height: 80vh;
  border: none;
  border-radius: 4px;
}

.handout-content-unsupported {
  color: var(--terminal-text-muted, #888);
  font-style: italic;
}
/**
 * Info Indicator Component
 * ========================
 * Subtle info icon showing that an element has a tooltip/more information.
 * Helps users discover interactive elements.
 *
 * Usage:
 *   <span class="has-info" data-controller="rich-tooltip" ...>
 *     AC <span class="info-indicator">i</span>
 *   </span>
 */

/* ========================================
 * Container for elements with info
 * ======================================== */

.has-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ========================================
 * Info Indicator Icon
 * ======================================== */

.info-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  opacity: 0.6;
  transition: opacity var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
  flex-shrink: 0;
}

/* ========================================
 * Hover/Focus States
 * ======================================== */

.has-info:hover .info-indicator,
.has-info:focus .info-indicator,
.has-info:focus-within .info-indicator {
  opacity: 1;
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-subtle));
}

/* ========================================
 * Active Tooltip State
 * ======================================== */

.has-info[aria-expanded="true"] .info-indicator {
  opacity: 1;
  color: var(--color-bg-primary);
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Size Variants
 * ======================================== */

/* Small - for compact layouts */
.info-indicator--sm {
  width: 12px;
  height: 12px;
  font-size: 9px;
}

/* Large - for headers and primary stats */
.info-indicator--lg {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

/* ========================================
 * Icon Variants
 * ======================================== */

/* Question mark variant */
.info-indicator--question::after {
  content: "?";
}

/* Help variant (book icon) */
.info-indicator--help::after {
  content: "?";
}

/* Default is "i" for information */
.info-indicator:not(.info-indicator--question):not(.info-indicator--help)::after {
  content: "i";
}

/* Clear any existing text content */
.info-indicator {
  text-indent: -9999px;
  overflow: hidden;
}

.info-indicator::after {
  text-indent: 0;
  display: block;
}

/* ========================================
 * Touch Device Adjustments
 * ======================================== */

@media (hover: none) {
  .info-indicator {
    width: 20px;
    height: 20px;
    font-size: 12px;
    opacity: 0.8;
  }

  .info-indicator--sm {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .info-indicator--lg {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* ========================================
 * Inline with labels (stat labels, etc)
 * ======================================== */

.cs-stat__label .info-indicator,
.cs-section__title .info-indicator,
.cs-ability__label .info-indicator {
  margin-left: var(--space-1);
  vertical-align: middle;
}

/* ========================================
 * Stat Chip Integration
 * ======================================== */

.stat-chip .info-indicator {
  margin-left: var(--space-1);
}

/* ========================================
 * Condition Badge Integration
 * ======================================== */

.cs-condition .info-indicator {
  margin-left: 2px;
  width: 12px;
  height: 12px;
  font-size: 8px;
}

.cs-condition:hover .info-indicator {
  color: var(--color-accent-warning);
  border-color: var(--color-accent-warning);
}

/* ========================================
 * Gear Item Integration
 * ======================================== */

.cs-item__name .info-indicator {
  margin-left: var(--space-1);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .info-indicator {
    transition: none;
  }
}
/* ========================================
 * Loading Filler
 * Shows contextual tips while AI generates response.
 * Tips cycle one at a time (chyron/ticker) — no stacking.
 * Attached to the .dm-responding-bar, below the main status row.
 * ======================================== */

/* Container sits inside the DM responding bar as a second row */
.loading-filler {
  width: 100%;
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid rgba(168, 85, 247, 0.2);
}

/* Single visible slot — only one tip shows at a time */
.loading-filler__ticker {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0a0a0);
  min-height: 1.4em; /* Reserve space to prevent layout shift on swap */
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.loading-filler__ticker--visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-filler__icon {
  flex-shrink: 0;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
  opacity: 0.8;
}

.loading-filler__content {
  flex: 1;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Accessibility: Respect reduced motion — show tip without transition */
@media (prefers-reduced-motion: reduce) {
  .loading-filler__ticker {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .loading-filler__ticker--visible {
    opacity: 1;
    transform: none;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .loading-filler__ticker {
  color: rgba(200, 180, 255, 0.7);
}

/* Light theme adjustments */
[data-theme="light"] .loading-filler__ticker {
  color: var(--color-text-secondary, #666);
}
/**
 * Proficiency Chip Component
 * ==========================
 * Replaces tiny 8px proficiency dots with tappable chips showing
 * proficiency status + modifier for improved usability.
 *
 * States:
 * - Not proficient: Hollow dot, muted, no modifier shown
 * - Proficient: Filled dot, accent color, +modifier
 * - Expert: Double filled dots, gold glow, +modifier
 *
 * Usage:
 *   <button class="proficiency-chip proficiency-chip--proficient">
 *     <span class="proficiency-chip__dots">●</span>
 *     <span class="proficiency-chip__modifier">+5</span>
 *   </button>
 */

/* ========================================
 * Base Chip
 * ======================================== */

.proficiency-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}

.proficiency-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.proficiency-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.proficiency-chip:active {
  transform: scale(0.96);
}

/* ========================================
 * Proficiency Dots
 * ======================================== */

.proficiency-chip__dots {
  font-size: var(--font-size-sm);
  line-height: 1;
  letter-spacing: -1px;
}

.proficiency-chip__modifier {
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * Not Proficient (default)
 * ======================================== */

/* Default state shows hollow dot and muted modifier */
.proficiency-chip .proficiency-chip__dots::before {
  content: "○";
}

.proficiency-chip .proficiency-chip__modifier {
  color: var(--color-text-muted);
}

/* ========================================
 * Proficient State
 * ======================================== */

.proficiency-chip--proficient {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
  color: var(--color-accent-primary);
}

.proficiency-chip--proficient:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-bg-tertiary));
  border-color: var(--color-accent-primary);
}

.proficiency-chip--proficient .proficiency-chip__dots::before {
  content: "●";
}

.proficiency-chip--proficient .proficiency-chip__modifier {
  color: var(--color-accent-primary);
}

/* ========================================
 * Expert State (double proficiency)
 * ======================================== */

.proficiency-chip--expert {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-gold) 50%, var(--color-border-default));
  color: var(--color-gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-gold) 30%, transparent);
}

.proficiency-chip--expert:hover {
  background: color-mix(in srgb, var(--color-gold) 25%, var(--color-bg-tertiary));
  border-color: var(--color-gold);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-gold) 50%, transparent);
}

.proficiency-chip--expert .proficiency-chip__dots::before {
  content: "●●";
  letter-spacing: -2px;
}

.proficiency-chip--expert .proficiency-chip__modifier {
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Compact Variant (for dense lists)
 * ======================================== */

.proficiency-chip--compact {
  min-width: 36px;
  min-height: 28px;
  padding: 2px var(--space-1);
  font-size: var(--font-size-xs);
}

.proficiency-chip--compact .proficiency-chip__dots {
  font-size: var(--font-size-xs);
}

/* ========================================
 * Touch Device Adjustments
 * ======================================== */

@media (hover: none) {
  .proficiency-chip {
    min-width: 48px;
    min-height: 44px;
    padding: var(--space-2);
  }

  .proficiency-chip--compact {
    min-width: 44px;
    min-height: 40px;
  }
}

/* ========================================
 * Context-specific adjustments
 * ======================================== */

/* Inside save rows - slightly compact */
.cs-save .proficiency-chip {
  min-width: 50px;
}

/* Inside skill rows */
.cs-skill .proficiency-chip {
  min-width: 50px;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .proficiency-chip {
    transition: none;
  }

  .proficiency-chip:active {
    transform: none;
  }
}
/* ==========================================================================
 * Roll Overlay Component
 * Positioned overlay for click-to-roll interactions (perception checks, etc.)
 * Part of the Interactive Narrative system
 * ========================================================================== */

/* Backdrop (click-outside-to-close) */
.roll-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Main Overlay */
.roll-overlay {
  position: fixed;
  width: 280px;
  background: linear-gradient(135deg,
    rgba(30, 30, 40, 0.98) 0%,
    rgba(20, 20, 30, 0.99) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.roll-overlay--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.roll-overlay--hiding {
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
}

/* Header */
.roll-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 215, 0, 0.1);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.roll-overlay__icon {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.roll-overlay__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roll-overlay__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-overlay__dc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Dice Display */
.roll-overlay__dice-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 60px;
}

.roll-overlay__dice {
  font-size: var(--font-size-4xl);
  animation: diceIdle 2s ease-in-out infinite;
}

@keyframes diceIdle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.roll-overlay__expression {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-text-primary);
}

/* Rolling Animation */
.roll-overlay__dice-display--rolling .roll-overlay__dice {
  animation: diceRolling 0.15s linear infinite;
}

.roll-overlay__dice-display--rolling .roll-overlay__expression {
  animation: expressionFlash 0.1s linear infinite;
}

@keyframes diceRolling {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes expressionFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Roll Result Display */
.roll-overlay__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  animation: resultReveal 0.3s ease-out;
}

@keyframes resultReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.roll-overlay__result-dice {
  font-weight: bold;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-modifier {
  color: var(--color-text-secondary);
}

.roll-overlay__result-equals {
  color: var(--color-text-muted);
}

.roll-overlay__result-total {
  font-weight: bold;
  font-size: var(--font-size-2xl);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-icon {
  font-size: var(--font-size-lg);
  margin-left: var(--space-1);
}

.roll-overlay__result--success .roll-overlay__result-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
}

.roll-overlay__result--success .roll-overlay__result-icon {
  color: #22c55e;
}

.roll-overlay__result--failure .roll-overlay__result-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.roll-overlay__result--failure .roll-overlay__result-icon {
  color: #ef4444;
}

/* Actions */
.roll-overlay__actions {
  padding: 0 var(--space-4) var(--space-3);
}

.roll-overlay__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.roll-overlay__btn--roll {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%);
  border: 2px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  animation: rollBtnGlow 2s ease-in-out infinite;
}

@keyframes rollBtnGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.2);
  }
}

.roll-overlay__btn--roll:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.25) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.35);
}

.roll-overlay__btn--roll:active {
  transform: translateY(0);
}

.roll-overlay__btn-icon {
  font-size: var(--font-size-lg);
}

/* Hint */
.roll-overlay__hint {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Skill-specific theming */
.roll-overlay[data-skill="perception"] {
  --skill-color: #3b82f6;
}

.roll-overlay[data-skill="insight"] {
  --skill-color: #8b5cf6;
}

.roll-overlay[data-skill="investigation"] {
  --skill-color: #10b981;
}

.roll-overlay[data-skill="perception"] .roll-overlay__header,
.roll-overlay[data-skill="insight"] .roll-overlay__header,
.roll-overlay[data-skill="investigation"] .roll-overlay__header {
  background: linear-gradient(135deg, rgba(var(--skill-color), 0.15) 0%, transparent 100%);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .roll-overlay {
    width: calc(100vw - 40px);
    max-width: 300px;
  }

  .roll-overlay__btn {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .roll-overlay {
    transition: opacity 0.1s ease;
    transform: none;
  }

  .roll-overlay--visible,
  .roll-overlay--hiding {
    transform: none;
  }

  .roll-overlay__dice {
    animation: none;
  }

  .roll-overlay__btn--roll {
    animation: none;
  }

  .roll-overlay__dice-display--rolling .roll-overlay__dice,
  .roll-overlay__dice-display--rolling .roll-overlay__expression {
    animation: none;
  }
}
/**
 * Scene Divider Component
 * ========================
 * Visual chapter breaks between dramatic scenes in the narrative.
 * D&D-themed ornamental divider with fading gradient lines,
 * a central diamond badge, and a crossed-swords icon.
 *
 * Structure:
 *   .scene-divider
 *     .scene-divider__line--left   (fading ornamental line)
 *     .scene-divider__content      (central badge)
 *       .scene-divider__icon
 *       .scene-divider__text
 *         .scene-divider__location (optional)
 *         .scene-divider__activity
 *     .scene-divider__line--right  (fading ornamental line)
 *     .scene-divider__description  (optional transition prose)
 */

/* ========================================
 * Container
 * ======================================== */

.scene-divider {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
  position: relative;
  animation: sceneDividerReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sceneDividerReveal {
  from {
    opacity: 0;
    transform: scaleX(0.85);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ========================================
 * Ornamental Lines
 * Gradient fades from center badge outward to transparent edges,
 * creating the look of parchment ink trailing off the page.
 * ======================================== */

.scene-divider__line {
  flex: 1;
  position: relative;
  height: 0;
  min-width: 40px;

  /* Double-line effect: a thin top rule and a thin bottom rule */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  overflow: visible;
}

/* The main ornamental line */
.scene-divider__line::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.7;
}

/* The decorative dot-dash inner rule */
.scene-divider__line::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0px,
    var(--color-accent-primary, #c8a96e) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Left line: fades from transparent on the left to full color at center */
.scene-divider__line--left::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.2) 20%,
    var(--color-accent-primary, #c8a96e) 100%
  );
}

.scene-divider__line--left::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.15) 25%,
    rgba(200, 169, 110, 0.3) 100%
  );
  background-image: none;
}

/* Right line: fades from full color at center to transparent on the right */
.scene-divider__line--right::before {
  background: linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0%,
    rgba(200, 169, 110, 0.2) 80%,
    transparent 100%
  );
}

.scene-divider__line--right::after {
  background: linear-gradient(
    90deg,
    rgba(200, 169, 110, 0.3) 0%,
    rgba(200, 169, 110, 0.15) 75%,
    transparent 100%
  );
  background-image: none;
}

/* ========================================
 * Diamond Badge
 * The central ornament. Uses a rotated square (clip-path diamond)
 * so the border corners create the classic D&D chapter break look.
 * ======================================== */

.scene-divider__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  position: relative;

  /* Diamond border via clip-path on a pseudo-element */
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(200, 169, 110, 0.08);
  white-space: nowrap;
  flex-shrink: 0;

  /* Corner diamonds — CSS-only using box-shadow on a tiny rotated pseudo */
}

/* Corner accent diamonds on the badge */
.scene-divider__content::before,
.scene-divider__content::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -3px;
}

.scene-divider__content::before {
  left: -4px;
}

.scene-divider__content::after {
  right: -4px;
}

/* ========================================
 * Icon — Crossed Swords / Chapter Mark
 * ======================================== */

.scene-divider__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-accent-primary, #c8a96e);
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(200, 169, 110, 0.5));
  flex-shrink: 0;
}

/* ========================================
 * Text Content
 * ======================================== */

.scene-divider__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-divider__location {
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-primary, #c8a96e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.scene-divider__activity {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #888);
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ========================================
 * Optional Description (transition prose)
 * Appears below the full divider line on its own row
 * ======================================== */

.scene-divider__description {
  flex-basis: 100%;
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-secondary, #aaa);
  border-left: 2px solid var(--color-accent-primary, #c8a96e);
  opacity: 0.85;
  line-height: 1.5;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 640px) {
  .scene-divider {
    padding: var(--space-4) var(--space-2);
    gap: var(--space-2);
  }

  /* Hide gradient lines on small screens — the badge stands alone */
  .scene-divider__line {
    display: none;
  }

  .scene-divider__content {
    padding: var(--space-2) var(--space-3);
  }

  .scene-divider__location {
    font-size: 0.75rem;
  }

  .scene-divider__activity {
    font-size: 0.625rem;
  }

  .scene-divider__description {
    margin: var(--space-2) 0 0;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .scene-divider {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .scene-divider__content {
    border-width: 2px;
  }

  .scene-divider__line::before {
    opacity: 1;
    height: 2px;
  }

  .scene-divider__line::after {
    opacity: 0.7;
  }

  .scene-divider__icon {
    opacity: 1;
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .scene-divider {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: var(--space-3) 0;
    animation: none;
  }

  .scene-divider__line::before {
    background: #000;
    opacity: 0.5;
  }

  .scene-divider__line::after {
    display: none;
  }

  .scene-divider__content {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
  }

  .scene-divider__content::before,
  .scene-divider__content::after {
    background: #fff;
    border-color: #000;
  }

  .scene-divider__icon {
    color: #000;
  }

  .scene-divider__location {
    color: #000;
  }

  .scene-divider__activity {
    color: #444;
  }

  .scene-divider__description {
    color: #444;
    border-left-color: #000;
  }
}
/**
 * Screenplay Format Component
 * ===========================
 * Cinematic screenplay-style formatting for narrative content.
 * Transforms in-game content (NPC speech, DM narration, scenes) into
 * professional screenplay layout while preserving terminal style for
 * system messages.
 *
 * Layout Reference:
 * ┌─────────────────────────────────────────────────────────────┐
 * │ INT. THE RUSTY ANCHOR - EVENING           [Perception +2]  │  ← Slug line + margin notes
 * ├─────────────────────────────────────────────────────────────┤
 * │     The tavern is thick with pipe smoke...                  │  ← Action/description
 * │                                                             │
 * │                      BARTENDER                              │  ← Character name (centered)
 * │              (wiping a glass, suspicious)                   │  ← Parenthetical
 * │          They're here. I knew they'd come.                  │  ← Dialogue (centered)
 * ├─────────────────────────────────────────────────────────────┤
 * │ ⚙ System: Roll Perception DC 14                            │  ← System message (terminal style)
 * └─────────────────────────────────────────────────────────────┘
 */

/* ========================================
 * Screenplay Mode Container
 * ======================================== */

.screenplay-mode {
  --screenplay-max-width: 65ch;
  --screenplay-action-indent: 1.5rem;
  --screenplay-dialogue-width: 65%;
  --screenplay-character-spacing: 0.1em;
  --screenplay-slug-height: 2px;
}

/* ========================================
 * Scene Header (Slug Line)
 * Professional screenplay slug line format
 * ======================================== */

.screenplay-mode .scene-divider,
.screenplay-scene-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  margin: var(--space-4) 0 var(--space-3);
  border-bottom: var(--screenplay-slug-height) solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  animation: none;
  gap: var(--space-4);
  position: relative;
}

/* Remove the default scene divider decorations in screenplay mode */
.screenplay-mode .scene-divider__line,
.screenplay-mode .scene-divider__content {
  display: none;
}

/* Show slug line content instead */
.screenplay-mode .scene-divider::before {
  content: attr(data-slug);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.screenplay-slug {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.screenplay-slug__prefix {
  color: var(--color-accent-primary);
  margin-right: var(--space-1);
}

.screenplay-slug__location {
  color: var(--color-text-primary);
}

.screenplay-slug__time {
  color: var(--color-text-tertiary);
  margin-left: var(--space-2);
}

/* ========================================
 * Margin Notes (Float Right)
 * Contextual info: perception bonuses, time, NPCs
 * ======================================== */

.screenplay-margin-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.screenplay-margin-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.screenplay-margin-note--perception {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.screenplay-margin-note--time {
  color: var(--color-accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.screenplay-margin-note--combat {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.screenplay-margin-note--npcs {
  color: var(--retro-purple, #7B68EE);
  background: rgba(123, 104, 238, 0.1);
}

/* ========================================
 * Action Lines (DM Narration)
 * Indented prose describing the scene
 * ======================================== */

.screenplay-mode .narrative-entry.dm,
.screenplay-mode .dm-narration,
.screenplay-action {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-2) var(--screenplay-action-indent);
  padding-right: var(--screenplay-action-indent);
  max-width: var(--screenplay-max-width);
  margin: var(--space-2) auto;
  line-height: 1.7;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  text-align: left;
}

.screenplay-mode .narrative-entry.dm:hover,
.screenplay-mode .dm-narration:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Remove border-left styling from DM entries in screenplay mode */
.screenplay-mode .narrative-entry.dm {
  border-left: none;
  background: transparent;
}

/* Action line paragraphs */
.screenplay-action p,
.screenplay-mode .dm-narration p {
  margin: 0 0 var(--space-3);
  text-indent: 0;
}

.screenplay-action p:last-child,
.screenplay-mode .dm-narration p:last-child {
  margin-bottom: 0;
}

/* ========================================
 * NPC Dialogue (Screenplay Format)
 * Centered character name, parenthetical, dialogue
 * ======================================== */

.screenplay-mode .npc-dialogue,
.screenplay-dialogue {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-3) 0;
  text-align: center;
  position: relative;
}

/* Remove the glow effect in screenplay mode */
.screenplay-mode .npc-dialogue::before {
  display: none;
}

/* Character Name (centered, uppercase) */
.screenplay-mode .npc-header,
.screenplay-character-name {
  display: block;
  text-align: center;
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-avatar {
  display: none;
}

.screenplay-mode .npc-name,
.screenplay-character-name__text {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--screenplay-character-spacing);
  color: var(--npc-color, var(--color-text-secondary));
  margin-bottom: 0;
}

/* Hide mood badge in screenplay mode - mood shown via parenthetical */
.screenplay-mode .npc-mood {
  display: none;
}

/* Parenthetical (emotion/action cue) */
.screenplay-mode .npc-dialogue[data-emotion],
.screenplay-parenthetical {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-dialogue[data-emotion]::after {
  content: '(' attr(data-emotion) ')';
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-parenthetical::before {
  content: '(';
}

.screenplay-parenthetical::after {
  content: ')';
}

/* Dialogue Block (centered, narrower) */
.screenplay-mode .npc-speech-bubble,
.screenplay-dialogue-content {
  max-width: var(--screenplay-dialogue-width);
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 0;
}

.screenplay-mode .npc-speech-bubble--spoken {
  padding-left: 0;
}

.screenplay-mode .npc-speech-bubble--spoken::before {
  display: none;
}

.screenplay-mode .npc-speech-bubble p {
  margin: 0;
  text-align: center;
}

/* Inner segments in dialogue */
.screenplay-mode .npc-beat {
  font-style: italic;
  color: var(--color-text-muted);
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-line {
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
  display: block;
  margin: var(--space-1) 0;
}

/* ========================================
 * Transition Lines
 * Scene transitions like CUT TO:, FADE OUT:
 * ======================================== */

.screenplay-transition {
  text-align: right;
  padding: var(--space-4) var(--screenplay-action-indent);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.screenplay-transition::after {
  content: ':';
}

/* ========================================
 * System Messages (Terminal Style Preserved)
 * Rolls, mechanics, meta information
 * ======================================== */

.screenplay-mode .narrative-entry.system,
.screenplay-system {
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.3));
  border-left: 3px solid var(--color-accent-info, #3b82f6);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: left;
  max-width: none;
}

.screenplay-mode .narrative-entry.system::before {
  content: none;
}

.screenplay-system__icon {
  margin-right: var(--space-2);
  opacity: 0.7;
}

/* Roll results in screenplay mode */
.screenplay-mode .roll-result,
.screenplay-mode .pending-roll {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

/* ========================================
 * Player Input (Terminal Style)
 * ======================================== */

.screenplay-mode .narrative-entry.player {
  background: transparent;
  border-left: 2px solid var(--color-accent-secondary);
  padding-left: calc(var(--space-3) + 1.2em);
  max-width: none;
  margin: var(--space-2) 0;
  text-align: left;
}

.screenplay-mode .narrative-entry.player::before {
  content: '>';
  position: absolute;
  left: var(--space-3);
  color: var(--color-accent-secondary);
  font-weight: bold;
  opacity: 0.5;
}

/* ========================================
 * Perception Content (Hybrid Style)
 * Revealed perception uses screenplay action style
 * ======================================== */

.screenplay-mode .perception-revealed {
  padding: var(--space-2) var(--screenplay-action-indent);
  max-width: var(--screenplay-max-width);
  margin: var(--space-2) auto;
  border-left: 3px solid var(--skill-color, #3b82f6);
  background: var(--skill-color-faded, rgba(59, 130, 246, 0.08));
}

/* Hidden perception keeps terminal style */
.screenplay-mode .perception-hidden {
  font-family: var(--font-mono);
  max-width: none;
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .screenplay-mode {
    --screenplay-action-indent: var(--space-3);
    --screenplay-dialogue-width: 85%;
    --screenplay-max-width: 100%;
  }

  .screenplay-scene-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .screenplay-margin-notes {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .screenplay-mode .npc-name,
  .screenplay-character-name__text {
    font-size: var(--font-size-xs);
  }

  .screenplay-mode .npc-speech-bubble,
  .screenplay-dialogue-content {
    max-width: 95%;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .screenplay-scene-header,
  .screenplay-mode .scene-divider {
    animation: none;
    transition: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .screenplay-scene-header {
    border-bottom-width: 3px;
    border-bottom-color: var(--color-text-primary);
  }

  .screenplay-mode .npc-name,
  .screenplay-character-name__text {
    font-weight: 700;
  }

  .screenplay-margin-note {
    border: 1px solid currentColor;
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .screenplay-mode {
    --screenplay-action-indent: 1.5in;
    --screenplay-dialogue-width: 3.5in;
  }

  .screenplay-scene-header {
    page-break-after: avoid;
    border-bottom-color: #000;
  }

  .screenplay-mode .npc-dialogue,
  .screenplay-dialogue {
    page-break-inside: avoid;
  }

  .screenplay-margin-notes {
    display: none;
  }

  .screenplay-mode .narrative-entry.system,
  .screenplay-system {
    background: #f5f5f5;
    border-left-color: #666;
  }
}

/* ========================================
 * Lobby Scene (Welcome Experience)
 * Cassette futurism — terminal boot sequence
 * ======================================== */

.lobby-scene {
  padding: var(--space-4);
  max-width: 50ch;
  animation: lobbySceneFadeIn 0.6s ease-out;
}

@keyframes lobbySceneFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Boot sequence lines */
.lobby-scene__boot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-scene__boot-line {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  animation: bootLineReveal 0.3s ease-out backwards;
}

.lobby-scene__boot-line:nth-child(1) {
  animation-delay: 0.1s;
}

.lobby-scene__boot-line:nth-child(2) {
  animation-delay: 0.4s;
}

@keyframes bootLineReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Greeting block */
.lobby-scene__greeting {
  animation: greetingReveal 0.4s ease-out 0.7s backwards;
}

@keyframes greetingReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lobby-scene__status {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary, #fbbf24);
  margin: 0 0 var(--space-3) 0;
}

.lobby-scene__welcome {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.lobby-scene__character-name {
  color: var(--color-accent-primary, #fbbf24);
  font-weight: 600;
}

.lobby-scene__prompt {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Action Cards (Create/Load options) */
.lobby-scene__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  margin: var(--space-6) auto var(--space-4);
  animation: actionsReveal 0.5s ease-out 0.5s backwards;
}

@keyframes actionsReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reset button styles when using semantic <button> for a11y */
button.lobby-scene__action,
.lobby-scene__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}

.lobby-scene__action:hover {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.1) 0%,
    rgba(251, 191, 36, 0.05) 100%
  );
  border-color: rgba(251, 191, 36, 0.3);
  transform: translateX(4px);
}

.lobby-scene__action:active {
  transform: translateY(1px);
  opacity: 0.9;
}

.lobby-scene__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-accent-primary, #fbbf24);
  flex-shrink: 0;
}

.lobby-scene__action-icon svg {
  width: 18px;
  height: 18px;
}

.lobby-scene__action-text {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
}

.lobby-scene__action-cmd {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 640px) {
  .lobby-scene {
    padding: var(--space-3);
  }

  .lobby-scene__actions {
    max-width: 100%;
  }

  .lobby-scene__action {
    padding: var(--space-2-5) var(--space-3);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .lobby-scene,
  .lobby-scene__boot-line,
  .lobby-scene__greeting,
  .lobby-scene__actions {
    animation: none;
  }

  .lobby-scene__action:hover {
    transform: none;
  }
}
/* ========================================
 * Spell Slot Picker Modal
 * ========================================
 * Modal dialog for selecting spell slot level
 * when casting AoE spells from VTT
 */

.spell-slot-picker {
  padding: 0;
  border: 1px solid var(--color-accent-primary, #3498db);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  color: var(--color-text, #fff);
  max-width: 320px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.spell-slot-picker::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.spell-slot-picker__content {
  padding: var(--space-4, 16px);
}

.spell-slot-picker__title {
  margin: 0 0 var(--space-1, 4px) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-primary, #3498db);
}

.spell-slot-picker__subtitle {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #a0a0a0);
}

.spell-slot-picker__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-4, 16px);
}

.spell-slot-picker__slot-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a40);
  border: 1px solid var(--color-border, #3a3a50);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text, #fff);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.spell-slot-picker__slot-btn:hover {
  background: var(--color-bg-hover, #3a3a50);
  border-color: var(--color-accent-primary, #3498db);
}

.spell-slot-picker__slot-btn:focus {
  outline: 2px solid var(--color-accent-primary, #3498db);
  outline-offset: 2px;
}

.spell-slot-picker__level {
  flex: 0 0 80px;
  font-weight: 500;
  color: var(--color-text, #fff);
}

.spell-slot-picker__pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-picker__pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #4a4a60);
  border: 1px solid var(--color-border, #5a5a70);
}

.spell-slot-picker__pip--filled {
  background: var(--color-spell-slot, #9b59b6);
  border-color: var(--color-spell-slot, #9b59b6);
  box-shadow: 0 0 4px var(--color-spell-slot, #9b59b6);
}

.spell-slot-picker__count {
  flex: 0 0 40px;
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #a0a0a0);
}

.spell-slot-picker__actions {
  display: flex;
  justify-content: flex-end;
}

.spell-slot-picker__cancel {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: transparent;
  border: 1px solid var(--color-border, #3a3a50);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-secondary, #a0a0a0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spell-slot-picker__cancel:hover {
  background: var(--color-bg-secondary, #2a2a40);
  color: var(--color-text, #fff);
}

/* ========================================
 * Reduced Motion
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  .spell-slot-picker__slot-btn,
  .spell-slot-picker__cancel {
    transition: none;
  }
}
/* ========================================
 * Typewriter Effect
 * Character-by-character dramatic text reveals
 * ======================================== */

.typewriter--active {
  /* Ensure visibility during typing */
  min-height: 1em;
}

/* Blinking cursor */
.typewriter__cursor {
  display: inline;
  color: var(--color-gold, #d4af37);
  font-weight: bold;
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Completed state - subtle fade in for final appearance */
.typewriter--complete {
  animation: typewriterComplete 0.3s ease-out;
}

@keyframes typewriterComplete {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .typewriter__cursor {
    animation: none;
    opacity: 1;
  }

  .typewriter--complete {
    animation: none;
  }
}
/* ========================================
 * Boot Sequence Overlay
 * Full-screen retro terminal startup animation
 * Includes CRT turn-on effect before typewriter starts
 * ======================================== */

.boot-sequence__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-sky);
  background-color: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2rem 3rem;
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

/* CRT turn-on animation — plays before typewriter text appears.
 * A bright horizontal line expands from the center via a ::before pseudo-element.
 * The overlay itself stays solid black (no clip-path!) so the terminal content
 * behind it is NEVER visible during the animation. */
.boot-sequence__overlay--crt-on::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  background-color: #fff;
  animation: crt-turn-on 0.8s ease-out forwards;
}

@keyframes crt-turn-on {
  0% {
    clip-path: inset(49.5% 0 49.5% 0);
    opacity: 0.8;
  }
  30% {
    clip-path: inset(40% 0 40% 0);
    opacity: 0.5;
  }
  60% {
    clip-path: inset(10% 0 10% 0);
    opacity: 0.2;
  }
  80% {
    clip-path: inset(2% 0 2% 0);
    opacity: 0.1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
}

.boot-sequence__overlay--fading {
  opacity: 0;
  pointer-events: none;
}

/* Output container */
.boot-sequence__output {
  max-width: 720px;
  width: 100%;
}

/* Individual boot line */
.boot-sequence__line {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-accent-secondary, #8ab56e);
  white-space: pre;
  min-height: 1.8em;
}

/* System initialization lines */
.boot-sequence__line--system {
  color: var(--color-accent-secondary, #8ab56e);
}

/* Info lines */
.boot-sequence__line--info {
  color: var(--color-text-secondary, #a0a0a0);
}

/* Ready line - bright and prominent */
.boot-sequence__line--ready {
  color: var(--color-gold, #e8c44a);
  font-weight: bold;
  margin-top: 0.5em;
}

/* Blinking block cursor */
.boot-sequence__cursor {
  display: inline;
  color: var(--color-accent-secondary, #8ab56e);
  animation: boot-cursor-blink 0.7s step-end infinite;
}

@keyframes boot-cursor-blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Skip hint at bottom */
.boot-sequence__skip-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  color: var(--color-text-disabled, #666666);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  animation: boot-hint-fade-in 1.5s ease-in forwards;
  opacity: 0;
}

@keyframes boot-hint-fade-in {
  0%, 60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* CRT scanline effect on the overlay for extra retro feel */
.boot-sequence__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .boot-sequence__cursor {
    animation: none;
    opacity: 1;
  }

  .boot-sequence__overlay {
    transition: none;
  }

  .boot-sequence__overlay--crt-on::before {
    animation: none;
    opacity: 0;
  }

  .boot-sequence__skip-hint {
    animation: none;
    opacity: 1;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .boot-sequence__overlay {
    padding: 1.5rem 1rem;
  }

  .boot-sequence__line {
    font-size: 0.875rem;
  }
}
/* ===========================================
 * Optimistic Room Transition
 * ===========================================
 * Immediate visual feedback when a room navigation
 * click is fired, before the WebSocket round-trip
 * confirms. Resolves automatically when the real
 * room_changed broadcast arrives.
 */

/* --- Body-level cursor & click prevention --- */
body.room-transitioning .grid-layout-wrapper {
  cursor: progress;
  pointer-events: none;
}

/* --- Portal overlay (fixed fullscreen) --- */
.optimistic-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Expanding ring --- */
.optimistic-portal__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: portalExpand 0.4s ease-out forwards;
  box-shadow:
    0 0 30px 8px rgba(138, 43, 226, 0.4),
    0 0 60px 16px rgba(138, 43, 226, 0.2),
    inset 0 0 20px 4px rgba(186, 85, 255, 0.3);
  border: 2px solid rgba(186, 85, 255, 0.6);
  background: transparent;
}

@keyframes portalExpand {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    width: 120vmax;
    height: 120vmax;
    opacity: 0;
  }
}

/* --- Vignette darkening from edges --- */
.optimistic-portal__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 0;
  animation: vignetteIn 0.25s ease-out forwards;
}

@keyframes vignetteIn {
  to {
    opacity: 1;
  }
}

/* --- Room name label --- */
.optimistic-portal__label {
  position: relative;
  z-index: var(--z-raised);
  color: var(--color-gold, #d4a843);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  text-shadow: 0 0 12px rgba(212, 168, 67, 0.5);
  opacity: 0;
  transform: scale(0.95);
  animation: labelAppear 0.25s ease-out forwards;
}

/* Shimmer effect during loading */
.optimistic-portal__label::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: labelShimmer 1.5s ease-in-out 0.4s infinite;
}

@keyframes labelAppear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes labelShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* --- "Taking longer" message --- */
.optimistic-portal__slow-message {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted, #888);
  font-size: 0.875rem;
  opacity: 0;
  animation: slowMessageAppear 0.3s ease-out forwards;
}

@keyframes slowMessageAppear {
  to { opacity: 0.8; }
}

/* --- Panel pre-fade --- */
.grid-panel.optimistic-fading {
  opacity: 0.3;
  transform: scale(0.97);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.grid-panel.optimistic-restoring {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

/* ===========================================
 * Phase 3: Progressive Narrative Reveal
 * ===========================================
 * Applied to narrative entries arriving during or
 * shortly after a room transition. Content is revealed
 * top-to-bottom with a scan-line mask, creating the
 * impression that the room description is materializing.
 *
 * Phases timeline:
 *   Phase 1 (0-400ms): Portal expand + vignette
 *   Phase 2 (400-800ms): Room name label + shimmer
 *   Phase 3 (800ms+): Narrative content scan-line reveal
 */

/* --- Narrative reveal (scan-line mask) --- */
.narrative-reveal {
  animation: narrativeReveal 1.2s ease-out forwards;
}

@keyframes narrativeReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.4;
  }
  10% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}

/* Scan-line accent — a subtle horizontal highlight that
   sweeps down the content in sync with the clip reveal */
.narrative-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.6) 30%,
    rgba(186, 85, 255, 0.4) 70%,
    transparent 100%
  );
  animation: scanLineDown 1.2s ease-out forwards;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes scanLineDown {
  0% {
    top: 0;
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Stagger delay for successive entries — each subsequent
   narrative entry in a room reveal starts slightly later,
   creating a cascading materialization effect */
.narrative-reveal:nth-child(1) { animation-delay: 0ms; }
.narrative-reveal:nth-child(2) { animation-delay: 150ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(3) { animation-delay: 300ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(4) { animation-delay: 450ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(5) { animation-delay: 600ms; clip-path: inset(0 0 100% 0); }

/* Ensure the entry is positioned for the ::before scan-line */
.narrative-reveal {
  position: relative;
}

/* ===========================================
 * Scene Transitions (within same room)
 * ===========================================
 * Lighter visual treatment than room transitions.
 * Uses slide instead of portal for semantic distinction.
 */

.optimistic-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel-chrome);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: sceneOverlayIn 0.2s ease-out forwards;
}

@keyframes sceneOverlayIn {
  to { opacity: 1; }
}

.optimistic-scene__label {
  color: var(--color-text, #e8e8e8);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-border, #444);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  animation: sceneLabelSlide 0.25s ease-out 0.1s forwards;
}

@keyframes sceneLabelSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scene icon (activity-specific) */
.optimistic-scene__icon {
  margin-right: 0.5rem;
  opacity: 0.8;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .optimistic-portal__ring {
    animation: none;
    display: none;
  }

  .optimistic-portal__vignette {
    animation: none;
    opacity: 0.4;
  }

  .optimistic-portal__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .optimistic-portal__label::after {
    animation: none;
    display: none;
  }

  .optimistic-portal__slow-message {
    animation: none;
    opacity: 0.8;
  }

  .grid-panel.optimistic-fading {
    transition: none;
    opacity: 0.3;
    transform: none;
  }

  .grid-panel.optimistic-restoring {
    transition: none;
  }

  .optimistic-scene {
    animation: none;
    opacity: 1;
  }

  .optimistic-scene__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Phase 3: Narrative reveal — simple fade instead of scan-line */
  .narrative-reveal {
    animation: narrativeRevealReduced 0.3s ease-out forwards;
  }

  .narrative-reveal::before {
    animation: none;
    display: none;
  }
}

@keyframes narrativeRevealReduced {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===========================================
 * Mobile Optimizations (#718)
 * ===========================================
 * Faster animations on mobile where screen real estate is limited
 * and users expect snappier interactions. Uses CSS custom properties
 * set by transition_timing.js syncCssTimingProperties().
 */

@media (max-width: 1023px) {
  /* Faster portal ring expansion on mobile */
  .optimistic-portal__ring {
    animation-duration: 0.25s;
  }

  /* Faster vignette on mobile */
  .optimistic-portal__vignette {
    animation-duration: 0.15s;
  }

  /* Faster label appearance on mobile */
  .optimistic-portal__label {
    animation-duration: 0.15s;
    font-size: 1.2rem;
  }

  /* Skip shimmer on mobile — saves GPU cycles */
  .optimistic-portal__label::after {
    display: none;
  }

  /* Faster panel fading on mobile */
  .grid-panel.optimistic-fading {
    transition-duration: 0.2s;
  }

  .grid-panel.optimistic-restoring {
    transition-duration: 0.2s;
  }

  /* Faster scene overlay on mobile */
  .optimistic-scene {
    animation-duration: 0.12s;
  }

  .optimistic-scene__label {
    animation-duration: 0.15s;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  /* Shorter narrative reveal on mobile */
  .narrative-reveal {
    animation-duration: 0.6s;
  }

  /* Reduce stagger delays on mobile */
  .narrative-reveal:nth-child(2) { animation-delay: 80ms; }
  .narrative-reveal:nth-child(3) { animation-delay: 160ms; }
  .narrative-reveal:nth-child(4) { animation-delay: 240ms; }
  .narrative-reveal:nth-child(5) { animation-delay: 320ms; }

  /* Simpler scan-line on mobile */
  .narrative-reveal::before {
    animation-duration: 0.6s;
  }
}
/*
 * Cyberpunk / Retro-Futuristic Terminal Effects
 * ==============================================
 * Layered CRT-inspired visual effects for the terminal:
 *   1. Animated scan-line overlay (CSS-only, very subtle)
 *   2. Swing-down entrance for narrative segments
 *   3. Glow effects on interactive elements
 *   4. Boot sequence enhancement (green phosphor)
 *   5. Room transition flicker
 *
 * All effects are purely cosmetic and respect prefers-reduced-motion.
 * Uses existing design tokens from _tokens.css.
 *
 * Activation: Always on (subtle enough to be ambient).
 * The CRT effects system (effects/_crt.css) is a separate opt-in toggle;
 * this file provides a lighter always-on cyberpunk texture layer.
 */

/* ========================================
 * CUSTOM PROPERTIES
 * Tuning knobs for cyberpunk effects
 * ======================================== */
:root {
  --cyber-scanline-opacity: 0.025;
  --cyber-scanline-speed: 60s;
  --cyber-glow-color: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 25%, transparent);
  --cyber-glow-color-strong: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 40%, transparent);
  --cyber-glow-color-input: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 25%, transparent);
  --cyber-swing-duration: 400ms;
  --cyber-flicker-duration: 200ms;
}

/* ========================================
 * 1. SCAN-LINE OVERLAY
 * Subtle repeating horizontal lines that
 * drift slowly down the screen. Gives the
 * terminal a CRT phosphor texture without
 * being distracting.
 * ======================================== */
.terminal-container::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background:
    /* Static scan-line texture */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 4px
    );
  animation: cyberScanlineDrift var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

/* Animated moving scan-line: a single brighter band
   that sweeps top-to-bottom over the full viewport */
.terminal-container::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.03) 48%,
    rgba(255, 255, 255, 0.015) 50%,
    rgba(0, 0, 0, 0.03) 52%,
    transparent 55%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: cyberScanlineSweep var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

@keyframes cyberScanlineDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

@keyframes cyberScanlineSweep {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

/* ========================================
 * 2. SWING-DOWN ENTRANCE
 * Narrative segments "swing in" from above
 * with a subtle perspective rotation, as if
 * dropping from a monitor bezel.
 * ======================================== */
@keyframes swingDown {
  from {
    transform: perspective(800px) rotateX(-15deg) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: perspective(800px) rotateX(0) translateY(0);
    opacity: 1;
  }
}

/* Apply swing-down to new narrative segments.
   The .narrative-segment base in _retro_narrative.css sets
   opacity:0 + segmentReveal; we override that animation
   with the more dramatic swingDown for the cyberpunk feel.
   Uses the same stagger delays already defined there. */
.narrative-segment {
  animation-name: swingDown;
  animation-duration: var(--cyber-swing-duration);
  animation-timing-function: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  animation-fill-mode: forwards;
  transform-origin: top center;
}

/* ========================================
 * 3. GLOW EFFECTS
 * Subtle cyan/blue glow on interactive
 * elements for that neon-terminal feel.
 * ======================================== */

/* Input field focus glow */
.input-field:focus {
  box-shadow: 0 0 8px var(--cyber-glow-color-input);
}

/* Input line border glow on focus */
.input-line:focus-within {
  box-shadow: 0 0 6px var(--cyber-glow-color-input);
}

/* Active channel tab indicator glow */
.channel-tab--active {
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color, var(--color-accent-primary)) 20%, transparent);
}

/* Toast notification glow border */
.toast--visible {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 8px color-mix(in srgb, var(--toast-border-color, var(--color-accent-primary)) 20%, transparent);
}

/* Celebration toast already has a strong glow; intensify slightly */
.toast--celebration.toast--visible {
  box-shadow:
    0 4px 24px rgba(251, 191, 36, 0.3),
    0 0 40px rgba(251, 191, 36, 0.15),
    0 0 12px color-mix(in srgb, var(--color-accent-warning) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Prompt character glow (the > or $ before input) */
.input-area:focus-within .input-prompt {
  text-shadow: 0 0 4px var(--cyber-glow-color-input);
}

/* ========================================
 * 4. BOOT SEQUENCE ENHANCEMENT
 * Green phosphor aesthetic during boot:
 * brighter green, subtle text-shadow glow.
 * ======================================== */
.boot-sequence__overlay {
  /* Reinforce dark background */
  background-color: #0a0a0a;
}

.boot-sequence__line {
  text-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-secondary, #8ab56e) 40%, transparent);
}

.boot-sequence__line--system {
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-secondary, #8ab56e) 50%, transparent);
}

.boot-sequence__line--ready {
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-gold, #e8c44a) 50%, transparent);
}

.boot-sequence__cursor {
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-secondary, #8ab56e) 60%, transparent);
}

/* ========================================
 * 5. ROOM TRANSITION FLICKER
 * Brief opacity dip when switching rooms,
 * simulating a CRT display mode-change.
 * Applied via JS adding .cyber-room-transition
 * to .terminal-container.
 * ======================================== */
@keyframes cyberRoomFlicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.97; }
  40%  { opacity: 1; }
  60%  { opacity: 0.98; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

.terminal-container.cyber-room-transition {
  animation: cyberRoomFlicker var(--cyber-flicker-duration) ease-out;
}

/* ========================================
 * 6. HOLOGRAPHIC SHIMMER
 * Subtle gradient sweep across cards on hover.
 * Applies to detail-cards, creation-cards, and
 * any element with .cyber-shimmer class.
 * ======================================== */
@keyframes cyberShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.cyber-shimmer,
.detail-card:hover,
.creation-card:hover {
  background-image: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: cyberShimmer 2s ease-in-out;
}

/* ========================================
 * 7. DATA-STREAM TRANSITION
 * Vertical reveal effect for state changes.
 * Content appears to materialize line-by-line
 * like data rendering on a terminal.
 * ======================================== */
@keyframes cyberDataStream {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.cyber-data-stream {
  animation: cyberDataStream 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================
 * 8. SCAN-LINE REVEAL
 * Content reveals with a horizontal scan-line
 * moving down. For room transitions and major
 * UI state changes.
 * ======================================== */
@keyframes cyberScanReveal {
  0% {
    mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
  }
  100% {
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
  }
}

.cyber-scan-reveal {
  animation: cyberScanReveal 0.6s ease-out forwards;
}

/* ========================================
 * 9. FADE-GLOW ENTRANCE
 * Elements fade in with a brief glow pulse.
 * Lighter alternative to swing-down for less
 * dramatic content like panel headers.
 * ======================================== */
@keyframes cyberFadeGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 8px var(--cyber-glow-color);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 4px var(--cyber-glow-color);
  }
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

.cyber-fade-glow {
  animation: cyberFadeGlow 0.5s ease-out forwards;
}

/* ========================================
 * 10. CRT EFFECTS DECONFLICT
 * When the full CRT system is toggled on
 * (effects/_crt.css), hide the cyberpunk
 * scan-line overlay to avoid double-stacking.
 * Glow and swing effects remain active.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container::after,
html[data-crt-effects="on"] .terminal-container::before,
body.crt-enabled .terminal-container::after,
body.crt-enabled .terminal-container::before {
  display: none;
}

/* ========================================
 * 7. PREFERS-REDUCED-MOTION
 * Disable scan-lines and swing animation.
 * Keep subtle static glow effects only.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Remove scan-line overlays entirely */
  .terminal-container::after,
  .terminal-container::before {
    animation: none;
    background: none;
    display: none;
  }

  /* Revert swing-down to simple instant appear */
  .narrative-segment {
    animation-name: none;
    opacity: 1;
    transform: none;
  }

  /* Remove room transition flicker */
  .terminal-container.cyber-room-transition {
    animation: none;
  }

  /* Disable shimmer, data-stream, scan-reveal */
  .cyber-shimmer,
  .detail-card:hover,
  .creation-card:hover {
    animation: none;
    background-image: none;
  }

  .cyber-data-stream,
  .cyber-scan-reveal,
  .cyber-fade-glow {
    animation: none;
    opacity: 1;
  }

  /* Glow effects remain (static, no animation) */
}
/*
 * Plan Preview Card - [plan] mode action preview
 * ===============================================
 * Displayed when a player sends a [plan] message.
 * Shows mechanical consequences and AI flavor before committing.
 * Quick action buttons (Do it / Nevermind) control commit/dismiss.
 */

/* ========================================
 * CARD CONTAINER
 * ======================================== */

.plan-preview-card {
  margin: var(--space-3, 0.75rem) 0;
  background: var(--color-bg-secondary, #2a2a3e);
  border: 1px solid var(--color-accent-warning, #e5c07b);
  border-left: 3px solid var(--color-accent-warning, #e5c07b);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  animation: plan-preview-enter 0.2s ease-out;
}

/* ========================================
 * HEADER
 * ======================================== */

.plan-preview-header {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(229, 192, 123, 0.1);
  border-bottom: 1px solid var(--color-border-subtle, #333);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-accent-warning, #e5c07b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
 * MECHANICAL SUMMARY
 * ======================================== */

.plan-preview-mechanical {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-relaxed, 1.65);
  border-bottom: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * AI FLAVOR TEXT
 * ======================================== */

.plan-preview-flavor {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  line-height: var(--line-height-relaxed, 1.65);
  font-style: italic;
}

/* ========================================
 * NARRATIVE PREVIEW
 * ======================================== */

.plan-preview-narrative {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  line-height: var(--line-height-relaxed, 1.65);
  border-top: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes plan-preview-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .plan-preview-card {
    animation: none;
  }
}
/**
 * Minimap Styles
 * ==============
 * Persistent corner minimap showing the current room wireframe.
 * Semi-transparent overlay in the bottom-right corner.
 */

.minimap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 240px;
  height: 240px;
  z-index: var(--z-panel);
  border: 1px solid var(--terminal-border, #3e4451);
  border-radius: var(--radius-sm, 0.25rem);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 0 12px rgba(97, 175, 239, 0.15);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.minimap--hidden {
  opacity: 0;
  pointer-events: none;
}

.minimap__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@media (max-width: 600px) {
  .minimap {
    width: 160px;
    height: 160px;
    bottom: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .minimap {
    transition: none;
  }
}
/*
 * CRT / Phosphor Visual Effects
 * ==============================
 * Optional retro CRT monitor aesthetic: scanlines, phosphor glow,
 * screen curvature, subtle flicker, and edge vignette.
 *
 * Activation:
 *   html[data-crt-effects="on"]   (primary, toggled via Settings)
 *   body.crt-enabled              (alternative class-based toggle)
 *
 * Independent of theme -- adapts via --color-accent-primary.
 * Toggle via Settings > CRT Effects.
 *
 * Performance notes:
 *   - Overlays use position:fixed + pointer-events:none (composited)
 *   - Animations use transform/opacity only (GPU-composited)
 *   - will-change scoped to animated elements only
 *   - Flicker uses CSS animation, no JS setInterval needed
 */

/* ========================================
 * CRT CUSTOM PROPERTIES
 * Tuning knobs for all effects
 * ======================================== */
html[data-crt-effects="on"],
body.crt-enabled {
  --crt-scanline-opacity: 0.03;
  --crt-scanline-size: 4px;
  --crt-scanline-drift-duration: 12s;
  --crt-vignette-strength: 0.15;
  --crt-glow-color: color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
  --crt-glow-color-strong: color-mix(in srgb, var(--color-accent-primary) 60%, transparent);
  --crt-curvature-radius: 12px;
  --crt-flicker-duration: 0.03s;
}

/* ========================================
 * SCANLINES
 * Subtle horizontal line overlay via pseudo-element
 * ======================================== */
html[data-crt-effects="on"]::before,
body.crt-enabled::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) var(--crt-scanline-size)
  );
  will-change: background-position;
  animation: crt-scanline-drift var(--crt-scanline-drift-duration) linear infinite;
}

@keyframes crt-scanline-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 var(--crt-scanline-size); }
}

/* ========================================
 * SCREEN EDGE VIGNETTE
 * Darkened edges like a real CRT tube
 * ======================================== */
html[data-crt-effects="on"]::after,
body.crt-enabled::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, var(--crt-vignette-strength)) 100%
  );
}

/* ========================================
 * SCREEN CURVATURE
 * Slight barrel distortion via border-radius on the
 * main terminal container. Purely cosmetic -- does not
 * affect layout or interaction hit-testing.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container,
body.crt-enabled .terminal-container {
  border-radius: var(--crt-curvature-radius);
  overflow: hidden;
}

/* Softer curvature for the full page body */
html[data-crt-effects="on"] body,
body.crt-enabled {
  perspective: 1200px;
}

html[data-crt-effects="on"] .terminal-show,
body.crt-enabled .terminal-show {
  /* Curvature: subtle barrel distortion feel */
  transform: perspective(1200px) translateZ(0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.15),
    inset 0 0 120px rgba(0, 0, 0, 0.05);
  /* Flicker: very subtle brightness oscillation (0.03s period) */
  animation: crt-flicker var(--crt-flicker-duration) infinite;
  will-change: opacity;
}

/* ========================================
 * PHOSPHOR GLOW
 * Green/amber-tinted text-shadow on key elements.
 * Uses theme accent color so it adapts to any theme.
 * ======================================== */
html[data-crt-effects="on"] .narrative-output,
body.crt-enabled .narrative-output {
  text-shadow:
    0 0 1px var(--crt-glow-color);
}

html[data-crt-effects="on"] .input-field,
body.crt-enabled .input-field {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

html[data-crt-effects="on"] .input-prompt,
body.crt-enabled .input-prompt {
  text-shadow:
    0 0 2px var(--crt-glow-color);
}

/* Input line glow on focus */
html[data-crt-effects="on"] .input-line:focus-within,
body.crt-enabled .input-line:focus-within {
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

@keyframes crt-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.995; }
  100% { opacity: 1; }
}

/* ========================================
 * BOOT OVERLAY STYLING
 * Theme-aware colors for boot sequence
 * ======================================== */
html[data-crt-effects="on"] .shell-boot--dos_boot,
body.crt-enabled .shell-boot--dos_boot {
  background: var(--color-bg-primary, #0a0a0a);
  color: var(--color-accent-primary, #00e0e0);
}

html[data-crt-effects="on"] .shell-boot--dos_boot .boot-terminal,
body.crt-enabled .shell-boot--dos_boot .boot-terminal {
  font-family: var(--font-family-mono, 'IBM Plex Mono', 'Fira Code', monospace);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ========================================
 * NEOTERM-SPECIFIC ENHANCEMENTS
 * Stronger glow when paired with neoterm theme
 * ======================================== */
html[data-theme="neoterm"][data-crt-effects="on"] .narrative-output {
  text-shadow:
    0 0 1px rgba(0, 180, 180, 0.5);
}

html[data-theme="neoterm"][data-crt-effects="on"] .input-prompt {
  text-shadow:
    0 0 2px rgba(0, 180, 180, 0.4);
}

/* Amber highlight for system messages in neoterm */
html[data-theme="neoterm"][data-crt-effects="on"] .entry--system {
  text-shadow:
    0 0 1px rgba(180, 180, 0, 0.4);
}

/* ========================================
 * CRT SHUTDOWN (Logout Sequence)
 * Classic TV-off: white flash -> collapse to line -> dot -> fade
 * ======================================== */
.crt-shutdown {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-top);
  pointer-events: all;
  background: #ffffff;
  animation: crt-shutdown 1.2s ease-in forwards;
}

.crt-shutdown__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
  opacity: 0;
  animation: crt-shutdown-line 0.8s 0.4s ease-out forwards;
}

.crt-shutdown__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: crt-shutdown-dot 0.6s 0.9s ease-out forwards;
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.8),
    0 0 20px 4px rgba(255, 255, 255, 0.4);
}

@keyframes crt-shutdown {
  0% {
    background: rgba(255, 255, 255, 0.9);
  }
  15% {
    background: rgba(255, 255, 255, 0.7);
  }
  30% {
    background: rgba(0, 0, 0, 0.95);
  }
  100% {
    background: #000000;
  }
}

@keyframes crt-shutdown-line {
  0% {
    opacity: 1;
    height: 3px;
    box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.6);
  }
  60% {
    opacity: 1;
    height: 2px;
  }
  100% {
    opacity: 0;
    height: 1px;
  }
}

@keyframes crt-shutdown-dot {
  0% {
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  50% {
    opacity: 0.8;
    width: 4px;
    height: 4px;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* ========================================
 * REDUCED MOTION
 * Disable ALL CRT animations for accessibility.
 * Static overlays (scanlines, vignette, glow) remain.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-crt-effects="on"]::before,
  body.crt-enabled::before {
    animation: none;
  }

  html[data-crt-effects="on"] .terminal-show,
  body.crt-enabled .terminal-show {
    animation: none;
    will-change: auto;
  }

  .crt-shutdown {
    animation: crt-shutdown-reduced 0.4s ease-out forwards;
  }

  .crt-shutdown__line,
  .crt-shutdown__dot {
    display: none;
  }

  @keyframes crt-shutdown-reduced {
    0% { background: rgba(255, 255, 255, 0.5); }
    100% { background: #000000; }
  }
}
/**
 * Shell Base CSS
 * ==============
 * Shared CSS variables and base styles inherited by all shells.
 * These variables are the foundation that each shell overrides.
 *
 * Loaded BEFORE any shell-specific CSS to provide defaults.
 */

/* =============================================================================
   Default Shell Variables
   All shells can override these in their own CSS files
   ============================================================================= */

:root {
  /* Background colors */
  --shell-bg: var(--color-bg-primary, #1a1a2e);
  --shell-bg-secondary: var(--color-bg-secondary, #0f0f1a);
  --shell-bg-tertiary: var(--color-bg-tertiary, #252545);

  /* Text colors */
  --shell-fg: var(--color-text-primary, #e0e0e0);
  --shell-fg-dim: var(--color-text-secondary, #888);
  --shell-fg-bright: var(--color-text-primary, #fff);

  /* Accent and borders */
  --shell-accent: var(--color-accent-primary, #61afef);
  --shell-accent-dim: var(--color-accent-secondary, #4080b0);
  --shell-border: var(--color-border, #333);

  /* Selection colors */
  --shell-selection-bg: var(--color-accent-primary, #61afef);
  --shell-selection-fg: var(--color-bg-primary, #1a1a2e);

  /* Font stacks */
  --shell-font-mono: var(--font-mono, "Fira Code", "JetBrains Mono", monospace);
  --shell-font-heading: var(--font-heading, "Cinzel", "Georgia", serif);
  --shell-font-body: var(--font-body, "Spectral", "Georgia", serif);

  /* Status bar */
  --shell-status-bar-position: top;
  --shell-status-bar-height: 36px;
  --shell-status-bar-bg: var(--shell-bg-secondary);
  --shell-status-bar-fg: var(--shell-fg);
  --shell-status-bar-border: var(--shell-border);

  /* Layout */
  --shell-layout-type: grid_container;
  --shell-container-padding: 1rem;
  --shell-panel-gap: 1rem;

  /* Animation speeds */
  --shell-transition-fast: 150ms;
  --shell-transition-normal: 300ms;
  --shell-transition-slow: 500ms;

  /* Z-index layers */
  --shell-z-content: 1;
  --shell-z-panels: 100;
  --shell-z-floating: 500;
  --shell-z-overlay: 1000;
  --shell-z-boot: 2000;
  --shell-z-effects: 9000;
}

/* =============================================================================
   Status Bar Shell-Aware Positioning
   ============================================================================= */

/* Bottom-positioned status bar for DOS/MUD shells */
[data-shell="dos386"] .status-bar,
[data-shell="mud"] .status-bar,
[data-shell="dos-gui"] .status-bar {
  position: fixed;
  bottom: 0;
  top: auto;
  border-top: 1px solid var(--shell-border);
  border-bottom: none;
}

/* Adjust main content when status bar is at bottom */
[data-shell="dos386"] .terminal-container,
[data-shell="mud"] .terminal-container,
[data-shell="dos-gui"] .terminal-container {
  padding-bottom: calc(var(--shell-status-bar-height) + 1rem);
  padding-top: 1rem;
}

/* =============================================================================
   Layout Strategy Classes
   Applied by ShellLayoutManager
   ============================================================================= */

/* Single Viewport Layout (DOS, MUD) */
.shell-layout--single-viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.shell-layout--single-viewport .shell-viewport {
  flex: 1;
  overflow-y: auto;
  padding: var(--shell-container-padding);
}

/* Split Container Layout (Terminal default) */
.shell-layout--split-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr minmax(200px, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--shell-panel-gap);
  height: 100vh;
}

/* Fullscreen Overlay Layout (VTT, WoW) */
.shell-layout--fullscreen-overlay {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.shell-layout--fullscreen-overlay .shell-canvas {
  position: absolute;
  inset: 0;
}

.shell-layout--fullscreen-overlay .shell-overlay-zone {
  position: absolute;
  z-index: var(--shell-z-panels);
}

/* Floating Windows Layout (OS/2) */
.shell-layout--floating-windows {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--shell-bg);
  overflow: hidden;
}

/* Page Layout (Script mode) */
.shell-layout--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fffef5;
  padding: 1in 0;
}

.shell-layout--page .shell-page {
  width: 8.5in;
  max-width: calc(100vw - 2rem);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1in;
  padding-left: 1.5in;
  min-height: 11in;
}

/* =============================================================================
   Boot Sequence Overlays
   ============================================================================= */

.shell-boot {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-boot--dos_boot {
  background: #000;
  color: #aaaaaa;
  font-family: "IBM Plex Mono", "Perfect DOS VGA 437", monospace;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

.shell-boot--dos_boot .boot-terminal {
  color: #aaaaaa;
  font-size: 16px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.shell-boot--dos_boot .boot-terminal div {
  margin-bottom: 0.2em;
}

.shell-boot--os2_boot {
  background: #000080;
  color: #fff;
  flex-direction: column;
}

.shell-boot--os2_boot .boot-logo {
  margin-bottom: 2rem;
}

.shell-boot--os2_boot .boot-progress {
  width: 300px;
  text-align: center;
}

.shell-boot--os2_boot .boot-progress__bar {
  height: 20px;
  background: linear-gradient(90deg, #0080ff 0%, #00ffff 100%);
  border: 2px inset #ccc;
}

.shell-boot--telnet {
  background: #000;
  color: #c0c0c0;
  font-family: monospace;
}

/* Shutdown overlays */
.shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shutdown-overlay--dos {
  background: #000;
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
}

.shutdown-overlay--dos .shutdown-terminal {
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  text-align: center;
}

.shutdown-overlay--os2 {
  background: #000080;
  color: #fff;
}

/* =============================================================================
   Utility Classes for Shell Content
   ============================================================================= */

/* Hide in specific shells */
[data-shell="dos386"] .hide-in-dos,
[data-shell="mud"] .hide-in-mud,
[data-shell="script"] .hide-in-script {
  display: none !important;
}

/* Show only in specific shells */
.show-in-dos { display: none !important; }
[data-shell="dos386"] .show-in-dos { display: block !important; }

.show-in-script { display: none !important; }
[data-shell="script"] .show-in-script { display: block !important; }

/* Chrome visibility (hide decorative elements in certain shells) */
[data-shell="dos386"] .decorative-chrome,
[data-shell="mud"] .decorative-chrome,
[data-shell="script"] .decorative-chrome {
  display: none !important;
}

/* =============================================================================
   Desktop Icons and Taskbar - Hidden by Default
   Only shown in windowed shells (dos-gui, os2) via their specific CSS
   ============================================================================= */

.shell-desktop,
.shell-taskbar {
  display: none !important;
}
/* Terminal Layout
 * ================
 * Core layout styles for the terminal application.
 * Extracted from inline styles in layouts/terminal.html.erb
 */

/* Legacy variables are aliased in _tokens.css.
 * Do NOT re-declare them here — the canonical values
 * live in _tokens.css :root and must remain the single
 * source of truth to avoid color drift.
 * See _tokens.css "Legacy aliases" section.
 */

* {
  box-sizing: border-box;
}

/* Global utility: hide elements via classList.add('hidden').
 * Used by 50+ JS controllers (239 call sites). Without this rule,
 * classList.add('hidden') is a no-op and elements remain visible. */
.hidden {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base, 14px);
  line-height: var(--line-height-normal, 1.5);
  height: 100vh;              /* Fallback for older browsers */
  height: 100dvh;             /* Dynamic viewport height - accounts for browser chrome */
  overflow: hidden;
}

.terminal-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* Safe area insets for notched/rounded-corner devices */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Status Bar */
.status-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Split Layout System */
.split-layout-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-container {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-container.split-horizontal {
  flex-direction: row;
}

.split-container.split-vertical {
  flex-direction: column;
}

.split-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.split-panel--active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.split-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  min-height: 28px;
}

.split-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.split-panel__title {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.split-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.split-panel:hover .split-panel__actions,
.split-panel--active .split-panel__actions {
  opacity: 1;
}

.split-panel__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.split-panel__action:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.split-panel__action--close:hover {
  background: var(--accent-error);
  color: white;
}

.split-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.split-divider {
  flex-shrink: 0;
  background: var(--border-color);
  position: relative;
  z-index: var(--z-sticky);
}

.split-horizontal > .split-divider {
  width: 4px;
  height: 100%;
  cursor: col-resize;
}

.split-vertical > .split-divider {
  width: 100%;
  height: 4px;
  cursor: row-resize;
}

.split-divider:hover {
  background: var(--accent-primary);
}

.status-bar .character-info {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.status-bar .character-name {
  color: var(--accent-primary);
  font-weight: 500;
}

.status-bar .hp-display {
  color: var(--accent-secondary);
}

.status-bar .hp-display.low {
  color: var(--accent-warning);
}

.status-bar .hp-display.critical {
  color: var(--accent-error);
}

.status-bar .session-info {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Main Content Area */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Narrative Panel */
.narrative-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  min-width: 0;
}

/* narrative-panel-content layout is defined in organisms/_narrative_panel.css */

/* Magic Effects Canvas Overlay */
.magic-effects-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-sticky);
}

.magic-effects-canvas.active {
  opacity: 1;
}

/* narrative-output layout is defined in organisms/_narrative_panel.css */

/* Scrollbar styling now handled by _ux_refinements.css */
/* Legacy webkit overrides for narrative panel */
.narrative-output::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
}

.narrative-output::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, var(--bg-primary));
}

.narrative-output::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, var(--bg-tertiary));
  border-radius: var(--scrollbar-thumb-radius, 4px);
}

.narrative-output::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color, var(--bg-elevated));
}

/* Narrative Entry Types */
.narrative-entry {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  border-left: 1px solid transparent;
}

.narrative-entry.dm {
  border-left-color: var(--accent-purple);
}

.narrative-entry.system {
  border-left-color: var(--accent-warning);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.narrative-entry.roll {
  border-left-color: var(--accent-primary);
  background: var(--bg-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.narrative-entry.error {
  border-left-color: var(--accent-error);
  color: var(--accent-error);
}

/* Clickable Elements in Narrative */
.clickable {
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.clickable:hover {
  color: var(--accent-secondary);
  text-decoration-style: solid;
}

.clickable[data-type="npc"] {
  color: var(--accent-purple);
}

.clickable[data-type="item"] {
  color: var(--accent-warning);
}

.clickable[data-type="location"] {
  color: var(--accent-secondary);
}

/* Tooltip for memory hints */
.tooltip {
  position: absolute;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  max-width: 300px;
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.tooltip .hint-source {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* Map Panel */
.map-panel {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

.map-panel.hidden {
  display: none;
}

.map-header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-header .map-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.map-controls {
  display: flex;
  gap: var(--space-1);
}

.map-controls button {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.map-controls button:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.map-controls button.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.map-display {
  flex: 1;
  overflow: auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-ascii {
  white-space: pre;
  font-size: var(--font-size-sm);
  line-height: 1.2;
  color: var(--text-primary);
}

.map-canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Input Area */
.input-area {
  border-top: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-4);
  /* Safe area padding for notched phones (home indicator) */
  padding-bottom: var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-secondary);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.input-area:focus-within {
  background: var(--bg-secondary);
  border-top-color: var(--color-border-subtle, #333);
}

.input-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.input-prompt {
  color: var(--accent-secondary);
  font-weight: 500;
  transition: color var(--transition-fast, 100ms);
}

.input-area:focus-within .input-prompt {
  color: var(--accent-primary);
}

.input-field {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  outline: none;
  caret-color: var(--accent-primary);
}

.input-field::placeholder {
  color: var(--text-muted);
  transition: opacity var(--transition-fast, 100ms);
}

.input-field:focus::placeholder {
  opacity: 0.5;
}

/* Input submitting state - disabled during message send */
.input-field:disabled,
.input-field.terminal-input--submitting {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.input-line:has(.terminal-input--submitting) .input-prompt {
  opacity: 0.5;
}

/* Context Menu */
.context-menu {
  position: absolute;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  min-width: 150px;
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.context-menu-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.context-menu-item:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-1) 0;
}

/* Loading indicator */
.loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--text-muted);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: terminal-layout-spin 1s linear infinite;
}

@keyframes terminal-layout-spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .map-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 350px;
    z-index: var(--z-panel);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .map-panel.visible {
    transform: translateX(0);
  }

  .cs-ability-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* iPad Pro (1024px portrait, 1366px landscape) and similar tablets */
@media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* Touch device in tablet size range - larger touch targets */
  .split-panel__action {
    width: 36px;
    height: 36px;
  }

  .split-horizontal > .split-divider {
    width: 8px;
  }

  .split-vertical > .split-divider {
    height: 8px;
  }
}

/* ========================================
 * Character Sheet Styles
 * ======================================== */

.character-sheet {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Character Header */
.cs-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.cs-level {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Tab Navigation */
.cs-tab-nav {
  display: flex;
  gap: var(--space-0-5);
  padding: 0 0 var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-3);
}

.cs-tab-btn {
  flex: 1;
  padding: var(--space-1-5) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-tab-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.cs-tab-btn.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-primary);
  font-weight: 600;
}

/* Tab Content */
.cs-tab-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}

.cs-tab-content.hidden {
  display: none;
}

.cs-tab-content::-webkit-scrollbar {
  width: 6px;
}

.cs-tab-content::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.cs-tab-content::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Section Styling */
.cs-section {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: var(--radius-md);
}

.cs-section-header {
  color: var(--accent-purple);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

/* Stats Grid */
.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.cs-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.cs-stat-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.cs-stat-value {
  color: var(--accent-primary);
  font-weight: bold;
  font-size: var(--font-size-sm);
}

/* HP Bar */
.cs-hp-bar {
  position: relative;
  height: var(--space-6);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.cs-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-error) 0%, var(--accent-secondary) 100%);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.cs-hp-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--text-primary);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

/* Ability Score Grid */
.cs-ability-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.cs-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1) var(--space-0-5);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast);
}

.cs-ability-item.rollable {
  cursor: pointer;
}

.cs-ability-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: scale(1.02);
}

.cs-ability-item.rollable:hover .cs-ability-abbr,
.cs-ability-item.rollable:hover .cs-ability-score,
.cs-ability-item.rollable:hover .cs-ability-mod {
  color: var(--bg-primary);
}

.cs-ability-abbr {
  color: var(--text-secondary, #aaa);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cs-ability-score {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}

.cs-ability-mod {
  color: var(--accent-primary, #7c3aed);
  font-size: 0.75rem;
  margin-top: 2px;
}

/* Saving Throws */
.cs-saves-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.cs-save-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.cs-save-item.rollable {
  cursor: pointer;
}

.cs-save-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.cs-save-item.rollable:hover .cs-save-name,
.cs-save-item.rollable:hover .cs-save-mod {
  color: var(--bg-primary);
}

.cs-save-name {
  color: var(--text-secondary);
  flex: 1;
}

.cs-save-mod {
  color: var(--accent-primary);
  font-weight: bold;
}

/* Proficiency Dot */
.cs-proficiency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
}

.cs-proficiency-dot.proficient {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

/* Skills List */
.cs-skills-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.cs-skill-item.rollable {
  cursor: pointer;
}

.cs-skill-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.cs-skill-item.rollable:hover .cs-skill-name,
.cs-skill-item.rollable:hover .cs-skill-ability,
.cs-skill-item.rollable:hover .cs-skill-mod {
  color: var(--bg-primary);
}

.cs-skill-name {
  color: var(--text-primary);
  flex: 1;
}

.cs-skill-ability {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-skill-mod {
  color: var(--accent-primary);
  font-weight: bold;
  min-width: 24px;
  text-align: right;
}

/* Dynamic skill rendering (from character_sheet_controller.js) */
.cs-skill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cs-skill--proficient .cs-skill-prof {
  color: var(--accent-primary);
}

.cs-skill-prof {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.cs-skill-name {
  flex: 1;
  color: var(--text-primary);
}

.cs-skill-bonus {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--accent-primary);
  min-width: 28px;
  text-align: right;
}

/* Clickable skills for dice rolling */
.cs-skill--clickable {
  cursor: pointer;
  user-select: none;
}

.cs-skill--clickable:hover {
  background: var(--bg-hover, rgba(124, 58, 237, 0.15));
  border-color: var(--accent-primary);
}

.cs-skill--clickable:active {
  background: var(--bg-active, rgba(124, 58, 237, 0.25));
}

.cs-skill--clickable:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Currency */
.cs-currency-grid {
  display: flex;
  gap: var(--space-3);
}

.cs-currency-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-currency-label {
  color: var(--accent-warning);
  font-size: var(--font-size-xs);
  font-weight: bold;
}

.cs-currency-value {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: bold;
}

/* Inventory */
.cs-inventory-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-inventory-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.cs-inventory-item.equipped {
  border-left: 2px solid var(--accent-secondary);
}

.cs-item-icon {
  color: var(--accent-warning);
}

.cs-item-name {
  color: var(--text-primary);
  flex: 1;
}

.cs-item-qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Gear Groups */
.cs-gear-group {
  margin-bottom: var(--space-2);
}

.cs-gear-group__label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  margin-bottom: 4px;
}

.cs-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}

.cs-item__name {
  color: var(--text-primary);
  flex: 1;
}

.cs-item__qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-item__badge {
  display: inline-block;
  padding: 0 4px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 2px;
  background: var(--accent-secondary, #4a9);
  color: var(--bg-primary, #111);
}

.cs-item__badge--attuned {
  background: var(--accent-magic, #a4f);
}

.cs-item__stat {
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* Rarity coloring */
.cs-item--uncommon .cs-item__name { color: var(--rarity-uncommon); }
.cs-item--rare .cs-item__name { color: var(--rarity-rare); }
.cs-item--very_rare .cs-item__name { color: var(--rarity-very-rare); }
.cs-item--legendary .cs-item__name { color: var(--rarity-legendary); }
.cs-item--artifact .cs-item__name { color: var(--rarity-artifact); }

/* Gear item action button */
.cs-item__action-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: var(--font-size-sm);
  line-height: 1;
  border-radius: 2px;
  flex-shrink: 0;
}
.cs-item:hover .cs-item__action-btn {
  display: inline-flex;
}
.cs-item__action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* Optimistic Update Indicators */
.cs-inventory-item.optimistic-pending {
  border-left: 2px solid var(--accent-warning);
  animation: pulse-pending 1s ease-in-out infinite;
}

.cs-inventory-item.optimistic-dropping {
  transition: opacity 0.3s ease-out;
}

.cs-item-pending-indicator {
  color: var(--accent-warning);
  font-size: var(--font-size-xs);
  margin-left: 4px;
  animation: pulse-pending 0.8s ease-in-out infinite;
}

.cs-inventory-item.rollback-shake {
  animation: shake-rollback 0.4s ease-in-out;
}

@keyframes shake-rollback {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Details */
.cs-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.cs-detail-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}

.cs-detail-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.cs-detail-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Personality */
.cs-personality-item {
  margin-bottom: var(--space-2-5);
}

.cs-personality-label {
  color: var(--accent-purple);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cs-personality-value {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* Conditions */
.cs-conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cs-condition-badge {
  padding: var(--space-0-5) var(--space-2);
  background: var(--accent-error);
  color: var(--bg-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
}

/* Empty state */
.cs-empty-text {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-5);
  font-style: italic;
}

/* ========================================
   Scene Tab Styles
   ======================================== */

.cs-scene-container {
  padding: 0 4px;
}

.cs-scene-location {
  background: rgba(124, 58, 237, 0.07);
  border-left: 2px solid var(--accent-purple);
  padding: var(--space-2-5) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.cs-scene-location-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1-5);
}

.cs-scene-location-name {
  font-size: var(--font-size-md);
  font-weight: bold;
  color: var(--text-primary);
}

.cs-scene-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-1-5) 0;
  line-height: 1.4;
}

.cs-scene-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.cs-scene-visits {
  font-style: italic;
}

.cs-scene-activity {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--overlay-white-subtle);
  border-radius: var(--radius-md);
}

.cs-scene-activity-row {
  display: flex;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-1-5);
}

.cs-scene-objective {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.cs-scene-section {
  margin-bottom: var(--space-4);
}

.cs-scene-npcs,
.cs-scene-objects {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-scene-npc,
.cs-scene-object {
  background: var(--overlay-white-subtle);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  border-left: 1px solid var(--accent-purple);
}

.cs-scene-npc--hostile {
  border-left-color: var(--accent-error);
  background: rgba(239, 68, 68, 0.05);
}

.cs-scene-object--canonical {
  border-left-color: var(--accent-success);
  background: rgba(34, 197, 94, 0.05);
}

.cs-scene-object--temporary {
  border-left-color: var(--text-muted);
  opacity: 0.85;
}

.cs-scene-npc-header,
.cs-scene-object-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.cs-scene-npc-name,
.cs-scene-object-name {
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--text-primary);
}

.cs-scene-npc-desc,
.cs-scene-object-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-1) 0;
  line-height: 1.3;
}

.cs-npc-stats {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: monospace;
}

.cs-scene-mentions {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Scene badges - reuse admin badge styles */
.cs-badge {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.cs-badge--primary {
  background: var(--accent-purple);
  color: white;
}

.cs-badge--secondary {
  background: rgba(124, 58, 237, 0.2);
  color: var(--accent-purple);
}

.cs-badge--success {
  background: rgba(34, 197, 94, 0.2);
  color: var(--accent-success);
}

.cs-badge--danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--accent-error);
}

.cs-badge--warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-warning);
}

.cs-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.cs-badge--muted {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

/* Small button for canonize action */
.cs-btn--small {
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.cs-btn--outline {
  background: transparent;
  border: 1px solid var(--accent-purple);
  color: var(--accent-purple);
  border-radius: var(--radius-sm);
  transition: background var(--transition-normal), color var(--transition-normal);
}

.cs-btn--outline:hover:not(:disabled) {
  background: var(--accent-purple);
  color: white;
}

.cs-btn--outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*
 * Mobile Accessibility Fixes
 * ============================
 * Fixes for mobile usability issues identified in E2E testing:
 * 1. Character sheet text < 12px font size
 * 2. Turn queue submit button < 44px touch target
 * 3. Modal close buttons < 44px touch target
 *
 * WCAG 2.1 AA Guidelines:
 * - Minimum font size: 12px for readability
 * - Minimum touch target: 44x44px (AAA: 48x48px)
 *
 * NOTE: This file loads late in the cascade, so its selectors win naturally
 * without needing !important. Do not move it earlier in the bundle.
 */

/* ========================================
 * ISSUE 1: Character Sheet Font Sizes
 * ======================================== */

/* Override all font sizes below 12px in panels to meet WCAG minimum */
.eb-mode-label,
.eb-item-desc,
.eb-item-type,
.equipment-modal__item-type,
.ec-mode-toggle,
.ec-section-title,
.ec-empty small,
.ec-item-meta,
.ec-item-choice-label,
.ec-pack-toggle,
.ec-pack-meta,
.ec-pack-count,
.ec-pack-content-qty {
  font-size: 12px;
}

/* Character sheet specific overrides */
.character-sheet .cs-stat-value,
.character-sheet .cs-ability-mod,
.character-sheet .cs-skill-bonus,
.character-sheet .cs-item-name,
.character-sheet .cs-detail-label {
  font-size: 12px;
}

/* Ensure all badges and chips meet minimum */
.badge--sm,
.chip--sm,
.condition-badge,
.status-indicator {
  font-size: 12px;
  padding: 4px 8px;
}

/* ========================================
 * ISSUE 2: Turn Queue Submit Button
 * ======================================== */

/* Ensure submit buttons meet 44x44px minimum touch target */
.panel-turn-queue .btn,
.panel-turn-queue button[type="submit"],
.turn-queue-body .btn--primary,
.turn-queue-body .submitBtn,
button[data-turn-queue-target="submitBtn"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Turn queue specific buttons */
.turn-queue-body .btn-small,
.turn-queue-body .btn--secondary {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Action controls in turn queue */
.action-controls button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

/* ========================================
 * ISSUE 3: Modal Close Buttons
 * ======================================== */

/* Detail modal close button */
.detail-modal__close {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  font-size: 20px; /* Larger icon for better visibility */
}

/* Character select modal close button */
.character-select-modal__close,
.modal-close,
.modal__close-btn,
.panel-close,
.floating-panel__close {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Ensure close button icons are visible */
.detail-modal__close svg,
.modal-close svg,
.panel-close svg {
  width: 20px;
  height: 20px;
}

/* ========================================
 * GENERAL: All Buttons on Mobile
 * ======================================== */

@media (max-width: 768px) {
  /* Ensure ALL buttons meet touch target minimum on mobile */
  .btn,
  button:not(.tab-btn):not(.chip):not(.badge) {
    min-height: 44px;
    min-width: 44px;
  }

  /* Small buttons need explicit override */
  .btn--sm,
  .btn-small,
  .btn.small {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    font-size: 12px;
  }

  /* Ensure text within small buttons doesn't shrink below 12px */
  .btn--sm *,
  .btn-small *,
  .btn.small * {
    font-size: inherit;
  }

  /* Icon-only buttons still need size */
  .btn--icon,
  button[aria-label]:not([aria-label=""]) {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }

  /* Form inputs need better touch targets too */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 12px;
    font-size: 14px;
  }

  /* Touch-friendly spacing between interactive elements */
  .form-group button + button,
  .action-controls button + button,
  .btn-group .btn + .btn {
    margin-left: 8px;
  }
}

/* ========================================
 * VERY SMALL SCREENS (< 375px)
 * ======================================== */

@media (max-width: 375px) {
  /* Ensure critical text never goes below 12px */
  body,
  .character-sheet,
  .panel-turn-queue,
  .detail-modal {
    font-size: 12px;
  }

  /* Stack buttons vertically on very small screens */
  .form-actions,
  .action-controls,
  .btn-group {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button,
  .action-controls button,
  .btn-group .btn {
    width: 100%;
    margin: 0;
  }
}

/* ========================================
 * ISSUE 4: Narrative Input Too Narrow on Mobile (#1450)
 * _terminal_layout.css applies 16px (space-4) horizontal padding to
 * .input-area on all viewports and .grid-layout-container has 4px
 * padding. On mobile these waste horizontal space; override here
 * (last in cascade) to guarantee the input fills >= 90vw.
 * ======================================== */

@media (max-width: 768px) {
  /* Remove grid gap padding — single-column layout uses full viewport width */
  .grid-layout-container {
    padding: 0;
  }

  /* Tighter horizontal padding for the input bar */
  .input-area {
    padding-left: var(--space-2);
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: var(--space-2);
    padding-right: env(safe-area-inset-right, 8px);
  }
}

/* ========================================
 * ACCESSIBILITY: Focus States
 * ======================================== */

/* Ensure focus is visible on all interactive elements */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* High contrast focus for modal close buttons */
.detail-modal__close:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--color-accent-warning);
  outline-offset: 2px;
}
/*
 * Terminal D&D - Core Bundled Stylesheet
 * =======================================
 * Core styles loaded on every terminal page.
 * Feature-specific CSS is lazy-loaded on demand.
 *
 * 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        8. Panels             9. Components
 * 10. Terminal layout (must be last)
 */

/* ===========================================
 * 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
 * =========================================== */


















































































/* Lazy-loaded: D3 dice animation CSS moved to dm_tools.css bundle (Phase 1 Task 2) */
/* require terminal/organisms/_dice_animation */












































/* Duplicate imports removed (already loaded above) */

/* ===========================================
 * 8. PANELS
 * =========================================== */











/* ===========================================
 * 9. COMPONENTS
 * Lazy-loaded components are in separate bundles:
 *   creator_studio.css, dm_tools.css, debug.css
 * =========================================== */























































/* Lazy-loaded: Three.js overlay CSS loaded on demand (Phase 1 Task 2) */
/* require terminal/components/_threejs_overlay */






















/* ===========================================
 * 10. TERMINAL LAYOUT (Must be last)
 * =========================================== */