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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* ========================================
   * 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.
     .token-status was removed in #4267 (panel audit 6.4). */
  .status-bar .session-clock,
  .status-bar .spectator-indicator__label,
  .status-bar .lock-status {
    display: none;
  }

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

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

  /* Map control buttons — add minimum touch dimensions */
  .map-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}
/**
 * UX Refinements
 * ==============
 * Enhanced user experience improvements including:
 * - Cross-browser scrollbar support
 * - Input focus states and feedback
 * - Skeleton loading states
 * - Micro-interactions
 * - Touch feedback enhancements
 */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ========================================
 * 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 removed in #4267 (panel audit 6.4). */
  .dm-persona,
  .breadcrumb__segment,
  .room-indicator,
  .world-indicator,
  .difficulty-indicator,
  .session-menu-btn {
    transition-property: transform, opacity;
    transition-duration: 100ms;
  }

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

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

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

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

  /* Covered by accessibility.css @media (prefers-reduced-motion: reduce) * rule */
}
/*
 * User Typography 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;
  }
}

/* Touch tooltip portal — JS fallback for hover-less devices (touch_tooltip_controller.js) */
.touch-tooltip {
  position: absolute;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-inverse, #1a1a1a);
  color: var(--color-text-inverse, #ffffff);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 13px);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 250px;
  text-align: center;
  box-shadow: var(--elevation-floating);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  z-index: var(--z-floating, 9000);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.touch-tooltip--visible {
  opacity: 1;
}
/*
 * Detail Card - Base Styles
 * =========================
 * Reusable card component for displaying detailed information.
 * Used by three UX patterns: inline expand, slide-in panel, and modal.
 *
 * BEM Structure:
 * - .detail-card (block)
 * - .detail-card__header, __body, __traits (elements)
 * - .detail-card--inline, --panel, --modal (modifiers)
 */

/* ========================================
 * BASE CARD STRUCTURE
 * ======================================== */

.detail-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

/* Header — flat, no background differentiation */
.detail-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.detail-card__icon {
  font-size: 1.75em;
  flex-shrink: 0;
}

.detail-card__header-content {
  flex: 1;
  min-width: 0;
}

.detail-card__title {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-size: var(--font-size-md);
  line-height: var(--line-height-tight);
  margin: 0;
}

.detail-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
  margin-top: var(--space-1);
}

.detail-card__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.detail-card__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

/* Body */
.detail-card__body {
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.detail-card__body p {
  margin: 0 0 var(--space-3) 0;
}

.detail-card__body p:last-child {
  margin-bottom: 0;
}

.detail-card__body strong {
  color: var(--color-accent-primary);
}

/* Traits/Features List */
.detail-card__traits {
  padding: 0 var(--space-4) var(--space-4);
}

.detail-card__traits-title {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.detail-card__trait-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-card__trait-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-card__trait-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-warning);
  font-size: var(--font-size-sm);
}

.detail-card__trait-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: var(--line-height-relaxed);
}

/* Footer (for actions) — flat, no background */
.detail-card__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.detail-card__action {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
}

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

.detail-card__action--primary {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-accent-primary);
}

.detail-card__action--primary:hover {
  background: #7bc4f8;
  border-color: #7bc4f8;
}

/* ========================================
 * PATTERN VARIANTS
 * ======================================== */

/* Inline expand (inside narrative) */
.detail-card--inline {
  margin: var(--space-2) 0;
  border-left: 3px solid var(--color-accent-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  animation: detailCardExpandIn 0.3s ease;
}

.detail-card--inline .detail-card__header {
  padding: var(--space-2) var(--space-3);
}

.detail-card--inline .detail-card__body {
  padding: var(--space-3);
}

/* Panel variant (inside reference panel) */
.detail-card--panel {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
}

.detail-card--panel:last-child {
  border-bottom: none;
}

/* Modal variant (inside modal overlay) */
.detail-card--modal {
  max-width: 500px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}

/* ========================================
 * TYPE VARIANTS (by content type)
 * ======================================== */

.detail-card--npc .detail-card__title {
  color: var(--color-accent-purple);
}

.detail-card--npc .detail-card--inline {
  border-left-color: var(--color-accent-purple);
}

.detail-card--location .detail-card__title {
  color: var(--color-accent-secondary);
}

.detail-card--location.detail-card--inline {
  border-left-color: var(--color-accent-secondary);
}

.detail-card--item .detail-card__title {
  color: var(--color-accent-warning);
}

.detail-card--item.detail-card--inline {
  border-left-color: var(--color-accent-warning);
}

.detail-card--creature .detail-card__title {
  color: var(--color-accent-error);
}

.detail-card--creature.detail-card--inline {
  border-left-color: var(--color-accent-error);
}

.detail-card--spell .detail-card__title {
  color: var(--color-accent-purple);
}

.detail-card--spell.detail-card--inline {
  border-left-color: var(--color-accent-purple);
}

.detail-card--lore .detail-card__title {
  color: var(--color-text-primary);
}

.detail-card--lore.detail-card--inline {
  border-left-color: var(--color-text-muted);
}

/* ========================================
 * NARRATIVE KEYWORDS (clickable text)
 * ======================================== */

.narrative-keyword {
  color: var(--color-accent-primary);
  cursor: pointer;
  border-bottom: 1px dotted var(--color-accent-primary);
  transition: color var(--transition-fast);
}

.narrative-keyword:hover {
  color: #7bc4f8;
  border-bottom-style: solid;
}

.narrative-keyword--npc {
  color: var(--color-accent-purple);
  border-bottom-color: var(--color-accent-purple);
}

.narrative-keyword--npc:hover {
  color: #d9a0ed;
}

.narrative-keyword--location {
  color: var(--color-accent-secondary);
  border-bottom-color: var(--color-accent-secondary);
}

.narrative-keyword--location:hover {
  color: #b5d9a1;
}

.narrative-keyword--item {
  color: var(--color-accent-warning);
  border-bottom-color: var(--color-accent-warning);
}

.narrative-keyword--item:hover {
  color: #f0d391;
}

.narrative-keyword--creature {
  color: var(--color-accent-error);
  border-bottom-color: var(--color-accent-error);
}

.narrative-keyword--creature:hover {
  color: #ea8f96;
}

.narrative-keyword--spell {
  color: var(--color-accent-purple);
  border-bottom-color: var(--color-accent-purple);
}

.narrative-keyword--expanded {
  background: var(--color-bg-tertiary);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  border-bottom: none;
}

/* Inline expansion container */
.narrative-keyword__expansion {
  display: block;
  margin: var(--space-2) 0;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.detail-card--loading .detail-card__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: var(--color-text-muted);
}

.detail-card__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: detailCardSpin 0.8s linear infinite;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes detailCardExpandIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
  }
}

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

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .detail-card--inline {
    animation: none;
  }

  .detail-card__spinner {
    animation: none;
  }
}
/* SVG Icon Styles
 * ==========================================================================
 * Consistent styling for monochrome stroke-based SVG icons.
 * Icons inherit color from parent text color.
 * ========================================================================== */

.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex-shrink: 0;
}

.svg-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants */
.svg-icon--xs {
  width: 0.75em;
  height: 0.75em;
}

.svg-icon--sm {
  width: 0.875em;
  height: 0.875em;
}

.svg-icon--md {
  width: 1em;
  height: 1em;
}

.svg-icon--lg {
  width: 1.25em;
  height: 1.25em;
}

.svg-icon--xl {
  width: 1.5em;
  height: 1.5em;
}

/* Fixed pixel sizes for specific contexts */
.svg-icon--14 {
  width: 14px;
  height: 14px;
}

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

.svg-icon--20 {
  width: 20px;
  height: 20px;
}

.svg-icon--24 {
  width: 24px;
  height: 24px;
}

/* Icon with text spacing */
.svg-icon + span,
span + .svg-icon {
  margin-left: 0.35em;
}

/* Button icon styling */
.btn .svg-icon,
button .svg-icon {
  margin-right: 0.35em;
}

/* Panel header icons */
.panel-header .svg-icon,
.section-header .svg-icon {
  margin-right: 0.5em;
  opacity: 0.8;
}

/* Tab icons */
.tab-icon .svg-icon {
  width: 16px;
  height: 16px;
}

/* Status indicators */
.status-icon .svg-icon {
  width: 12px;
  height: 12px;
}

/* Character class icons - slightly larger */
.class-icon .svg-icon {
  width: 1.25em;
  height: 1.25em;
}

/* Lobby action button icons (matches _lobby.css) */
.lobby-action-icon .svg-icon,
.lobby-action-icon svg {
  width: 14px;
  height: 14px;
}
/* System Notification Styles
 * Used for admin broadcasts and deployment notifications
 */

.system-notification {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
  border-radius: 4px;
  border-left: 4px solid var(--primary);
  background: var(--bg-secondary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  animation: notification-slide-in 0.3s ease-out;
}

.system-notification--info {
  border-left-color: var(--info, #3498db);
  background: rgba(52, 152, 219, 0.1);
}

.system-notification--success {
  border-left-color: var(--success, #2ecc71);
  background: rgba(46, 204, 113, 0.1);
}

.system-notification--warning {
  border-left-color: var(--warning, #f39c12);
  background: rgba(243, 156, 18, 0.1);
}

.system-notification--error {
  border-left-color: var(--error, #e74c3c);
  background: rgba(231, 76, 60, 0.1);
}

.system-notification__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.system-notification__message {
  flex: 1;
  color: var(--text-primary);
}

.system-notification__action {
  padding: 0.35rem 0.75rem;
  background: var(--primary);
  color: var(--bg-primary);
  border: none;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.system-notification__action:hover {
  background: var(--primary-hover, var(--primary));
  filter: brightness(1.1);
}

.system-notification__dismiss {
  padding: 0.25rem 0.5rem;
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.system-notification__dismiss:hover {
  opacity: 1;
}

/* ========================================
 * GAME INVITE NOTIFICATION
 * Floating notification for friend game invites
 * ======================================== */

.game-invite-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-ceiling);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 360px;
  pointer-events: none;
}

.game-invite-notification {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--color-bg-primary, #0d0d0d);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 12px rgba(97, 175, 239, 0.2);
  font-family: var(--font-mono);
  animation: game-invite-slide-in 0.3s ease-out;
  pointer-events: all;
}

@keyframes game-invite-slide-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.game-invite-notification__content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.game-invite-notification__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border-radius: 50%;
  color: var(--color-accent-primary, #61afef);
}

.game-invite-notification__icon svg {
  width: 20px;
  height: 20px;
}

.game-invite-notification__text {
  flex: 1;
  min-width: 0;
}

.game-invite-notification__title {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-accent-primary, #61afef);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.game-invite-notification__message {
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: 0.25rem;
}

.game-invite-notification__details {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #808080);
}

.game-invite-notification__actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.game-invite-notification__join {
  flex: 1;
}

.game-invite-notification__dismiss {
  flex: 0;
}
/*
 * Pending Roll Animation
 * ======================
 * Highlights skills/abilities in character sheet when the AI DM
 * requests a roll from the player.
 */

/* Base pending roll highlight */
.pending-roll {
  animation: pending-roll-pulse 1.5s ease-in-out infinite;
  border: 2px solid var(--color-accent, #f5c542);
  box-shadow: 0 0 10px var(--color-accent, #f5c542),
              0 0 20px rgba(245, 197, 66, 0.3);
  position: relative;
  z-index: var(--z-sticky);
}

/* Pulse animation */
@keyframes pending-roll-pulse {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px var(--color-accent, #f5c542),
                0 0 20px rgba(245, 197, 66, 0.3);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--color-accent, #f5c542),
                0 0 30px rgba(245, 197, 66, 0.5);
  }
}

/* Skill items with pending roll */
.cs-skill.pending-roll,
.cs-save.pending-roll,
.cs-save-chip.pending-roll {
  border-radius: 4px;
  background-color: rgba(245, 197, 66, 0.1);
}

/* Make the skill name pop */
.pending-roll .cs-skill-name,
.pending-roll .cs-save__name,
.pending-roll .cs-save-chip__abbr {
  color: var(--color-accent, #f5c542);
  font-weight: bold;
}

/* Roll request prompt styling (for narrative panel) */
.roll-request-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  margin: var(--spacing-sm, 8px) 0;
  background: rgba(245, 197, 66, 0.1);
  border: 1px solid var(--color-accent, #f5c542);
  border-radius: 6px;
  text-align: center;
}

.roll-request-icon {
  font-size: 1.5em;
}

.roll-request-message {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 500;
}

.roll-request-hint {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 0.85em;
  font-style: italic;
}

/* Passive check styling */
.passive-check {
  opacity: 0.9;
  font-style: italic;
}

/* Legacy indicator used in pending-roll context */
.passive-check-indicator {
  color: var(--color-text-secondary, #a0a0a0);
  margin-right: var(--spacing-xs, 4px);
}

/* Narrative passive-check annotation segment (#4187)
 * The check *mechanism* (e.g. "Passive Perception: 14").
 * Intentionally uses passive-check-indicator class instead of perception-revealed
 * so the Discoveries filter tab (.perception-revealed selector) never picks it up. */
.narrative-segment.passive-check-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: 0.85em;
  color: var(--color-text-muted, #a0a0a0);
  font-style: italic;
  opacity: 0.7;
}

.passive-check-icon {
  opacity: 0.5;
  flex-shrink: 0;
}

.passive-check-label {
  color: var(--color-text-secondary, #a0a0a0);
}
/* ==========================================================================
 * 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);
}

/* State-driven visibility (preferred over inline style mutations) */
.panel-search__count--hidden {
  display: none;
}

/* ========================================
 * VARIANTS
 * Different sizes and contexts
 * ======================================== */

/* Compact variant for tight spaces */
.panel-search--compact {
  padding: 0.375rem 0.5rem;
}

.panel-search--compact .panel-search__input {
  font-size: 0.8125rem;
}

.panel-search--compact .panel-search__icon {
  font-size: 0.75rem;
}

/* Full-width variant */
.panel-search--full {
  width: 100%;
}

/* Inline variant (no border, blends into header) */
.panel-search--inline {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--terminal-border, #333);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.panel-search--inline:focus-within {
  border-color: var(--color-primary, #4a90e2);
  box-shadow: 0 1px 0 0 var(--color-primary, #4a90e2);
}

/* ========================================
 * FILTER TAGS
 * Optional quick filter buttons
 * ======================================== */

.panel-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.panel-search__filter-tag {
  padding: 0.25rem 0.5rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.panel-search__filter-tag:hover {
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

.panel-search__filter-tag--active {
  background: var(--color-primary-dark, #1a2a4a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
}

/* ========================================
 * ACCESSIBILITY
 * ======================================== */

/* Screen reader announcement for result count */
.panel-search__sr-count {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .panel-search__empty {
    animation: none;
  }
}
/*
 * Atomic: Display Formats
 * =======================
 * CSS for narrative display format variants.
 * Each format transforms how narrative entries appear.
 *
 * Formats:
 * - NARRATIVE (default): Full rich segments with styling
 * - SCRIPT: Screenplay format with speaker prefixes
 * - COMPACT: Single-line summaries with icons
 * - HUD: Card layout for metadata channels
 * - TIMELINE: Timestamped chronological view
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * NARRATIVE FORMAT (default)
 * Full rich rendering - no changes needed
 * ======================================== */

.narrative-entry.format-narrative {
  /* Default styling, no modifications */
}

/* ========================================
 * SCRIPT FORMAT
 * Screenplay style with speaker prefixes
 * ======================================== */

.narrative-entry.format-script {
  padding-left: 120px;
  position: relative;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.narrative-entry.format-script::before {
  content: attr(data-speaker) ":";
  position: absolute;
  left: var(--space-3);
  width: 100px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide decorative elements in script format */
.narrative-entry.format-script .npc-portrait,
.narrative-entry.format-script .npc-header,
.narrative-entry.format-script .dm-info-panel,
.narrative-entry.format-script .inline-actions {
  display: none;
}

/* Flatten dialogue content */
.narrative-entry.format-script .npc-dialogue {
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.narrative-entry.format-script .npc-dialogue-content,
.narrative-entry.format-script .dialogue-segment {
  display: inline;
  font-style: italic;
}

/* Script format for different entry types */
.narrative-entry.format-script.player::before {
  color: var(--color-accent-secondary, #38bdf8);
}

.narrative-entry.format-script.dm::before {
  color: var(--color-text-secondary, #a0a0a0);
}

.narrative-entry.format-script.system::before {
  color: var(--color-text-muted, #888);
}

/* ========================================
 * COMPACT FORMAT
 * Single-line summaries with icons
 * ======================================== */

.narrative-entry.format-compact {
  padding: var(--space-1-5) var(--space-3);
  padding-left: 36px;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  line-height: 1.4;
}

.narrative-entry.format-compact::before {
  content: attr(data-icon);
  position: absolute;
  left: var(--space-3);
  width: 20px;
  text-align: center;
  font-size: var(--font-size-sm);
}

/* Hide decorative/complex elements in compact format */
.narrative-entry.format-compact .npc-portrait,
.narrative-entry.format-compact .npc-header,
.narrative-entry.format-compact .dm-info-panel,
.narrative-entry.format-compact .inline-actions,
.narrative-entry.format-compact .narrative-entry__copy {
  display: none;
}

/* Make content inline */
.narrative-entry.format-compact .npc-dialogue,
.narrative-entry.format-compact .narrative-segment,
.narrative-entry.format-compact p {
  display: inline;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
}

.narrative-entry.format-compact br {
  display: none;
}

/* Compact format hover - show full content */
.narrative-entry.format-compact:hover {
  white-space: normal;
  overflow: visible;
  background: var(--color-bg-tertiary);
  z-index: var(--z-raised);
}

/* ========================================
 * HUD FORMAT
 * Card/panel layout for metadata
 * ======================================== */

.narrative-entry.format-hud {
  display: inline-flex;
  flex-direction: column;
  width: calc(50% - var(--space-2));
  margin: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  vertical-align: top;
  box-shadow: var(--elevation-base);
}

.narrative-entry.format-hud::before {
  content: attr(data-icon) " " attr(data-category);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Hide decorative elements in HUD format */
.narrative-entry.format-hud .dm-info-panel,
.narrative-entry.format-hud .inline-actions,
.narrative-entry.format-hud .narrative-entry__copy {
  display: none;
}

.narrative-entry.format-hud .npc-portrait,
.narrative-entry.format-hud .npc-header {
  display: none;
}

/* Full width for single cards */
@media (max-width: 600px) {
  .narrative-entry.format-hud {
    width: 100%;
    margin: var(--space-1) 0;
  }
}

/* ========================================
 * TIMELINE FORMAT
 * Timestamped chronological view
 * ======================================== */

.narrative-entry.format-timeline {
  padding-left: 100px;
  position: relative;
  margin-left: 40px;
  border-left: 2px solid var(--color-border-default);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  min-height: 32px;
}

/* Timestamp before element */
.narrative-entry.format-timeline::before {
  content: attr(data-timestamp);
  position: absolute;
  left: -90px;
  width: 70px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  padding-right: var(--space-2);
}

/* Timeline node dot */
.narrative-entry.format-timeline::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-gold, #ffd700);
  border-radius: 50%;
}

/* Hide decorative elements in timeline format */
.narrative-entry.format-timeline .dm-info-panel,
.narrative-entry.format-timeline .inline-actions {
  display: none;
}

/* Timeline format variations by type */
.narrative-entry.format-timeline.player::after {
  border-color: var(--color-accent-secondary, #38bdf8);
  background: var(--color-accent-secondary, #38bdf8);
}

.narrative-entry.format-timeline.combat::after,
.narrative-entry.format-timeline[data-category="combat"]::after {
  border-color: var(--color-accent-error, #ef4444);
  background: var(--color-accent-error, #ef4444);
}

.narrative-entry.format-timeline[data-category="magic"]::after {
  border-color: var(--color-accent-magic, #9370db);
  background: var(--color-accent-magic, #9370db);
}

.narrative-entry.format-timeline[data-category="dice"]::after {
  border-color: var(--color-accent-warning, #fbbf24);
}

.narrative-entry.format-timeline.system::after,
.narrative-entry.format-timeline[data-category="system"]::after {
  border-color: var(--color-text-muted, #888);
  background: var(--color-text-muted, #888);
}

/* First entry in timeline - no connecting line above */
.narrative-entry.format-timeline:first-child {
  border-left-color: transparent;
}

.narrative-entry.format-timeline:first-child::before {
  content: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.format-compact:hover {
    /* No transition needed */
  }
}

/* ========================================
 * Mobile Adjustments
 * ======================================== */

@media (max-width: 768px) {
  /* Script format - narrower speaker column */
  .narrative-entry.format-script {
    padding-left: 80px;
  }

  .narrative-entry.format-script::before {
    width: 65px;
  }

  /* Timeline format - stack vertically */
  .narrative-entry.format-timeline {
    padding-left: 20px;
    margin-left: 20px;
  }

  .narrative-entry.format-timeline::before {
    position: static;
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
    margin-bottom: var(--space-1);
  }

  .narrative-entry.format-timeline::after {
    left: -15px;
  }

  /* Compact format - allow wrapping on mobile */
  .narrative-entry.format-compact {
    white-space: normal;
  }
}
/*
 * Atom: Post-it Note
 * ==================
 * Reusable clickable note cards for progressive reveal UI.
 * Click a post-it to type its command into the input bar.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Usage:
 *   render 'terminal/atoms/postit', title: "Your Heroes", body: "View characters",
 *     color: :yellow, command: "/characters", dismissible: true
 */

/* ========================================
 * Base Post-it
 * ======================================== */

.postit {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 180px;
  padding: 14px 14px 12px;
  border-radius: var(--postit-radius);
  box-shadow: var(--postit-shadow);
  cursor: pointer;
  transition: transform var(--timing-fast) var(--ease-default), box-shadow var(--timing-fast) var(--ease-default), opacity var(--timing-normal) var(--ease-default);
  user-select: none;
  z-index: var(--z-raised);
}

.postit:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.5);
}

.postit:active {
  transform: scale(0.98);
}

/* ========================================
 * Color Variants
 * ======================================== */

.postit--yellow {
  background: var(--postit-yellow);
  color: var(--postit-yellow-text);
}

.postit--blue {
  background: var(--postit-blue);
  color: var(--postit-blue-text);
}

.postit--green {
  background: var(--postit-green);
  color: var(--postit-green-text);
}

.postit--pink {
  background: var(--postit-pink);
  color: var(--postit-pink-text);
}

/* ========================================
 * Typography
 * ======================================== */

.postit__title {
  font-family: var(--postit-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.postit__body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.75;
  margin: 0;
}

.postit__command {
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.5;
  margin-top: var(--space-1);
}

/* ========================================
 * Decorations (tape & pin)
 * ======================================== */

.postit__tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 1px;
  pointer-events: none;
}

.postit__pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 5px 5px, #ef5350, #b71c1c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* ========================================
 * Dismiss Button
 * ======================================== */

.postit__dismiss {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--timing-fast) var(--ease-default);
  font-size: 14px;
  line-height: 1;
  color: inherit;
  padding: 0;
}

.postit:hover .postit__dismiss {
  opacity: 0.5;
}

.postit__dismiss:hover {
  opacity: 1;
}

/* ========================================
 * Animations
 * ======================================== */

/* Dismiss: note falls off screen */
.postit--falling {
  transform: translateY(120vh) rotate(15deg);
  opacity: 0;
  transition: transform var(--timing-dramatic) var(--ease-in), opacity var(--timing-dramatic) var(--ease-in);
  pointer-events: none;
}

/* Progressive reveal entrance */
.postit--entering {
  opacity: 0;
  transform: translateY(10px);
  animation: postitReveal var(--timing-normal) var(--ease-out) forwards;
}

/* Floating postits: entrance animation preserves the scattered rotation */
.postit-group--floating .postit--entering {
  opacity: 0;
  transform: rotate(var(--note-rotate, 0deg)) translateY(10px);
  animation: postitRevealRotated var(--timing-normal) var(--ease-out) forwards;
}

@keyframes postitReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes postitRevealRotated {
  to {
    opacity: 1;
    transform: rotate(var(--note-rotate, 0deg)) translateY(0);
  }
}

/* Staggered entrance delays */
.postit--delay-1 { animation-delay: var(--progressive-delay-1); }
.postit--delay-2 { animation-delay: var(--progressive-delay-2); }
.postit--delay-3 { animation-delay: var(--progressive-delay-3); }
.postit--delay-4 { animation-delay: var(--progressive-delay-4); }
.postit--delay-5 { animation-delay: var(--progressive-delay-5); }

/* ========================================
 * Layout: Post-it Group
 * ======================================== */

/* Default inline layout (creator studio, etc.) */
.postit-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  justify-content: center;
}

/* Floating layout — "stuck on the monitor" above everything.
 * Postits scatter across the viewport like physical sticky notes
 * haphazardly placed on a monitor. Visible in lobby room only.
 *
 * Rendered outside .terminal-zones in show.html.erb to avoid
 * stacking context burial from zone overflow/layout hierarchy. */
/* STRUCTURAL: Rendered in #postit-portal (direct body child) to escape all stacking contexts.
 * isolation:isolate creates an explicit stacking context so z-index works predictably
 * even if an ancestor somehow gets a transform/perspective applied. */
.postit-group--floating {
  position: fixed;
  inset: 0;
  z-index: var(--z-notification); /* Above panels/modals, below CRT effects */
  isolation: isolate;
  padding: 0;
  pointer-events: none; /* Let clicks pass through the container gap */
  display: block; /* No flexbox — children use absolute positioning */
}

/* #3731 1/5: Eager-strip floating postits from lobby first paint.
 * The DOM stays (so #3734 chip-row affordance map can summon them); only the
 * default visibility flips. Removing `postit-group--stripped` reveals them. */
.postit-group--floating.postit-group--stripped {
  display: none;
}

.postit-group--floating .postit {
  position: absolute;
  pointer-events: auto; /* Re-enable clicks on the notes themselves */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.postit-group--floating .postit:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.4);
}

/* Scattered placement — each nth-child gets a unique position on screen.
 * Positions chosen to look haphazard: corners, edges, off-center. */
.postit-group--floating .postit:nth-child(1) { top: 8%;  left: 6%;  --note-rotate: -3deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(2) { top: 12%; right: 8%; --note-rotate: 2deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(3) { top: 35%; left: 3%;  --note-rotate: 4deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(4) { top: 28%; right: 5%; --note-rotate: -2deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(5) { bottom: 22%; left: 8%; --note-rotate: 1deg;  transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(6) { bottom: 18%; right: 4%; --note-rotate: -4deg; transform: rotate(var(--note-rotate)); }
.postit-group--floating .postit:nth-child(7) { top: 55%; left: 5%;  --note-rotate: 3deg;  transform: rotate(var(--note-rotate)); }

/* Hover lifts the note slightly and resets rotation */
.postit-group--floating .postit:hover {
  z-index: var(--z-above);
}

/* Mobile (<768px) — hide post-it card stack entirely (#4276).
 * Per JP: don't compact/stack, fully remove from layout flow on narrow
 * viewports. Covers both the inline group layout and the floating cluster.
 * The `.postit` atom itself is also hidden defensively in case it appears
 * outside a known group wrapper. Desktop layout (≥768px) is untouched. */
@media (max-width: 767px) {
  .postit-group,
  .postit-group--floating,
  .postit {
    display: none !important;
  }
}

/* ========================================
 * Rotation Variants (for visual variety)
 * ======================================== */

.postit--tilt-left  { --note-rotate: -2deg; transform: rotate(var(--note-rotate)); }
.postit--tilt-right { --note-rotate: 2deg;  transform: rotate(var(--note-rotate)); }
.postit--tilt-left:hover  { transform: rotate(var(--note-rotate)) scale(1.04); }
.postit--tilt-right:hover { transform: rotate(var(--note-rotate)) scale(1.04); }

/* Floating postits use nth-child rotation — hover lifts while preserving tilt */
.postit-group--floating .postit:hover { transform: rotate(var(--note-rotate, 0deg)) scale(1.04); }

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

@media (prefers-reduced-motion: reduce) {
  .postit--entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .postit--falling {
    transition: opacity var(--timing-fast) var(--ease-default);
    transform: none;
  }
}
/*
 * Atom: Sticky Note
 * =================
 * Draggable parchment-style player notes that float in the narrative panel.
 * Created via /note command, persisted to CharacterNote.metadata.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Container
 * ======================================== */

.sticky-notes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-note); /* Above narrative-output content, below overlays (scroll-to-latest=50) */
}

/* ========================================
 * Base Sticky Note
 * ======================================== */

.sticky-note {
  position: absolute;
  width: 200px;
  min-height: 80px;
  border-radius: 3px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  user-select: none;
  transition: box-shadow var(--timing-fast) var(--ease-default), opacity var(--timing-normal) var(--ease-default);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  z-index: var(--z-note);
}

.sticky-note:hover {
  box-shadow: 3px 5px 14px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.3);
}

.sticky-note--dragging {
  box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.6);
  opacity: 0.9;
  z-index: var(--z-note-active); /* Above other notes, below scroll-to-latest (50) */
}

/* ========================================
 * Color Variants
 * ======================================== */

.sticky-note--gold {
  background: #f5e6c8;
  color: #4a3b2a;
}

.sticky-note--gold .sticky-note__header {
  background: #e8d4a8;
  border-bottom: 1px solid #d4c090;
}

.sticky-note--blue {
  background: #c8daf5;
  color: #2a3b5a;
}

.sticky-note--blue .sticky-note__header {
  background: #a8c4e8;
  border-bottom: 1px solid #90aed4;
}

.sticky-note--green {
  background: #c8f0d0;
  color: #2a4a30;
}

.sticky-note--green .sticky-note__header {
  background: #a8d8b0;
  border-bottom: 1px solid #90c498;
}

.sticky-note--red {
  background: #f5cec8;
  color: #5a2a2a;
}

.sticky-note--red .sticky-note__header {
  background: #e8b0a8;
  border-bottom: 1px solid #d49890;
}

/* ========================================
 * Header (drag handle)
 * ======================================== */

.sticky-note__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
  cursor: grab;
  border-radius: 3px 3px 0 0;
  min-height: 24px;
  gap: 4px;
}

.sticky-note__header:active {
  cursor: grabbing;
}

.sticky-note__drag-hint {
  font-size: 10px;
  opacity: 0.5;
  letter-spacing: 1px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sticky-note__actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.sticky-note__btn {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 13px;
  line-height: 1;
  color: inherit;
  padding: 0;
  border-radius: 2px;
  transition: opacity var(--timing-instant) var(--ease-default), background var(--timing-instant) var(--ease-default);
}

.sticky-note__btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* ========================================
 * Body
 * ======================================== */

.sticky-note__body {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 1;
}

.sticky-note--minimized .sticky-note__body {
  display: none;
}

/* ========================================
 * Footer
 * ======================================== */

.sticky-note__footer {
  padding: 2px 10px 6px;
  font-size: 10px;
  opacity: 0.4;
  text-align: right;
}

.sticky-note--minimized .sticky-note__footer {
  display: none;
}

/* ========================================
 * Minimized State
 * ======================================== */

.sticky-note--minimized {
  min-height: auto;
  width: 160px;
}

/* ========================================
 * Animations
 * ======================================== */

.sticky-note--entering {
  opacity: 0;
  transform: scale(0.9);
  animation: stickyNoteReveal var(--timing-normal) var(--ease-out) forwards;
}

@keyframes stickyNoteReveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.sticky-note--dismissing {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity var(--timing-normal) var(--ease-default), transform var(--timing-normal) var(--ease-default);
  pointer-events: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .sticky-note--entering {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .sticky-note--dismissing {
    transition: opacity var(--timing-instant) var(--ease-default);
    transform: none;
  }
}
/* =============================================================================
   Autocomplete Dropdown
   ============================================================================= */

.autocomplete-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: var(--elevation-floating);
  z-index: var(--z-dropdown);
  margin-bottom: var(--space-0-5);
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.autocomplete-item:hover,
.autocomplete-item.selected {
  background: var(--overlay-white-light);
}

.autocomplete-item.selected {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  border-left: 2px solid var(--color-accent-primary);
  padding-left: var(--space-2-5);
}

.autocomplete-icon {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  opacity: 0.7;
}

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

.autocomplete-type {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-0-5) var(--space-1-5);
  background: var(--overlay-white-subtle);
  border-radius: var(--radius-sm);
}

/* Scrollbar styling */
.autocomplete-dropdown::-webkit-scrollbar {
  width: 6px;
}

.autocomplete-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.autocomplete-dropdown::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--scrollbar-thumb-radius);
}

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

/* Hint text when dropdown is shown */
.autocomplete-hint {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--overlay-light);
}

.autocomplete-hint kbd {
  display: inline-block;
  padding: 1px var(--space-1);
  font-size: var(--font-size-xs);
  background: var(--overlay-white-light);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-0-5);
}
/*
 * Atomic Design: Molecules
 * ========================
 * Combinations of atoms: tab-nav, input-line, selection-tray, etc.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Tab Navigation
 * ======================================== */

.tab-nav {
  display: flex;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}

/* ========================================
 * Input Line
 * ======================================== */

.input-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.input-prompt {
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  -webkit-user-select: none;
  user-select: none;
}

.input-field {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.input-field::placeholder {
  color: var(--color-text-muted);
}

.input-field:focus {
  outline: none;
}

/* Focus state for the line */
.input-line:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Message Queue Indicator
 * Shows pending messages awaiting server response
 * ======================================== */

.message-queue-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.message-queue-indicator[hidden] {
  display: none;
}

.message-queue-indicator__icon {
  display: flex;
  align-items: center;
  animation: spin 1s linear infinite;
}

.message-queue-indicator__icon svg {
  width: 16px;
  height: 16px;
}

.message-queue-indicator__text {
  font-family: var(--font-mono);
}

.message-queue-indicator__count {
  font-weight: var(--font-weight-bold);
}

@keyframes queuePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* ========================================
 * Chat Mode Selector
 * Button-based mode selector (like DM channel mode)
 * ======================================== */

.chat-mode-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-right: var(--space-2);
  background: var(--color-bg-tertiary, #111);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.chat-mode-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--color-text-muted, #888);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.chat-mode-btn:hover {
  background: var(--color-bg-hover, #1a1a1a);
  color: var(--color-text-primary, #fff);
}

.chat-mode-btn--active {
  background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  border-color: var(--color-accent-primary, #7c3aed);
  color: var(--color-accent-primary, #7c3aed);
}

.chat-mode-btn__icon {
  font-size: 14px;
  line-height: 1;
}

.chat-mode-btn__label {
  font-weight: 500;
}

/* Keyboard hint */
.chat-mode-hint {
  display: flex;
  align-items: center;
  padding: 0 6px;
  color: var(--color-text-muted);
}

.chat-mode-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

/* Hide labels on small screens, keep icons */
@media (max-width: 768px) {
  .chat-mode-btn__label {
    display: none;
  }

  .chat-mode-btn {
    padding: 6px;
  }

  .chat-mode-hint {
    display: none;
  }
}

/* Legacy indicator (deprecated, kept for compatibility) */
.chat-mode-indicator {
  display: none;
}

/* ========================================
 * Selection Tray
 * ======================================== */

.selection-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.send-selections-btn {
  flex-shrink: 0;
  align-self: flex-end;
}

/* Tray Variants */
.selection-tray--spell {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 5%, var(--color-bg-secondary));
}

.selection-tray--equipment {
  border-color: var(--color-accent-warning);
  background: color-mix(in srgb, var(--color-accent-warning) 5%, var(--color-bg-secondary));
}

/* ========================================
 * Initiative Entry
 * ======================================== */

.initiative-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.initiative-entry--current {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary);
}

.initiative-entry--npc {
  border-left: 3px solid var(--color-accent-error);
}

.initiative-roll {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.initiative-entry--current .initiative-roll {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.participant-name {
  flex: 1;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ========================================
 * Stat Group
 * ======================================== */

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

.stat-group__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.stat-group__values {
  display: flex;
  gap: var(--space-4);
}

/* Layout Variants */
.stat-group--horizontal .stat-group__values {
  flex-direction: row;
  flex-wrap: wrap;
}

.stat-group--vertical .stat-group__values {
  flex-direction: column;
  gap: var(--space-1);
}

.stat-group--grid .stat-group__values {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2);
}

/* ========================================
 * Action Group
 * ======================================== */

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

.action-group__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.action-group__buttons {
  display: flex;
  gap: var(--space-2);
}

/* Layout Variants */
.action-group--horizontal .action-group__buttons {
  flex-direction: row;
  flex-wrap: wrap;
}

.action-group--vertical .action-group__buttons {
  flex-direction: column;
}

/* ========================================
 * Suggestions Panel
 * ======================================== */

.suggestions-panel {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
  overflow: hidden;
}

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

.suggestions-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
}

.suggestions-close {
  padding: var(--space-1);
  font-size: var(--font-size-xs);
}

.suggestions-content {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.suggestions-footer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.suggestion-custom-input {
  flex: 1;
}

.suggestion-batch-btn {
  flex-shrink: 0;
}

/* ========================================
 * Initiative List (container)
 * ======================================== */

.initiative-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ========================================
 * DM Guidance Panel
 * ======================================== */

.dm-guidance {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.dm-guidance--compact {
  padding: var(--space-2);
  gap: var(--space-1);
}

/* Proactive Tip */
.dm-guidance__tip {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary)),
    color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-secondary))
  );
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  animation: tipSlideIn 0.3s ease-out;
}

.dm-guidance__tip--visible {
  display: flex;
}

.dm-guidance__tip-icon {
  flex-shrink: 0;
  font-size: var(--font-size-lg);
}

.dm-guidance__tip-content {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.dm-guidance__tip-dismiss {
  flex-shrink: 0;
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-lg);
  line-height: 1;
  transition: color var(--transition-fast);
}

.dm-guidance__tip-dismiss:hover {
  color: var(--color-text-primary);
}

/* Ask Section */
.dm-guidance__ask-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dm-guidance__ask-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  align-self: flex-start;
}

.dm-guidance__ask-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.dm-guidance__ask-btn--active {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.dm-guidance__ask-icon {
  font-size: var(--font-size-base);
}

.dm-guidance__ask-text {
  font-weight: var(--font-weight-medium);
}

/* Question Area */
.dm-guidance__question-area {
  display: none;
  align-items: center;
  gap: var(--space-2);
  animation: questionSlideIn 0.2s ease-out;
}

.dm-guidance__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dm-guidance__input::placeholder {
  color: var(--color-text-muted);
}

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

.dm-guidance__submit-btn {
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dm-guidance__submit-btn:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 85%, white);
}

/* Answer Area */
.dm-guidance__answer-area {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border: 1px solid var(--color-accent-secondary);
  border-radius: var(--radius-md);
  animation: answerFadeIn 0.3s ease-out;
}

.dm-guidance__answer-area--visible {
  display: flex;
}

.dm-guidance__answer-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dm-guidance__answer-icon {
  font-size: var(--font-size-lg);
}

.dm-guidance__answer-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dm-guidance__answer-content {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* Suggestion Chips */
.dm-guidance__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dm-guidance__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.dm-guidance__chip:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.dm-guidance__chip-icon {
  font-size: var(--font-size-sm);
}

.dm-guidance__chip-label {
  white-space: nowrap;
}

/* Loading Indicator */
.dm-guidance__loading {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}

.dm-guidance__loading-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  animation: loadingPulse 1.5s ease-in-out infinite;
}

/* Animations */
@keyframes tipSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

/* ========================================
 * Message Mode Chip (#2847)
 * Inline badge shown on player echo when a turn-rhythm prefix is present.
 * ======================================== */

.message-mode-chip {
  display: inline-block;
  padding: 0 var(--space-1, 4px);
  margin-right: var(--space-1, 4px);
  border-radius: var(--radius-sm, 3px);
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: baseline;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--color-text-secondary);
}

.message-mode-chip--act {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef9a9a;
}

.message-mode-chip--whisper,
.message-mode-chip--think {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.message-mode-chip--ask,
.message-mode-chip--plan {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.35);
  color: #93c5fd;
}

.message-mode-chip--ready,
.message-mode-chip--react {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

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

@media (prefers-reduced-motion: reduce) {
  .initiative-entry,
  .input-line,
  .dm-guidance__tip,
  .dm-guidance__question-area,
  .dm-guidance__answer-area,
  .dm-guidance__loading-text {
    transition: none;
    animation: none;
  }
}
/**
 * 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;
}

/* Subdued underlying D&D class name (e.g. "Fighter" beneath "Warrior").
 * Helps players coming from D&D knowledge find the canonical class. (#4264 / 3.1) */
.quick-start-panel .archetype-class {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted, #7f848e);
  opacity: 0.75;
  margin-top: 1px;
}

/* Mobile: clamp long onboarding descriptions to 2 lines so cards stay
 * predictable in height. CSS-only via line-clamp — no JS needed. (#4264 / 3.2) */
@media (max-width: 768px) {
  .quick-start-panel .archetype-onboarding {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/*
 * Molecule: Roll Result
 * =====================
 * Visual dice roll display with outcome indicators.
 * Used by RollResultSegment for attack rolls, saves, skill checks, etc.
 */

/* ========================================
 * Roll Result Container
 * ======================================== */

.roll-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--overlay-dark);
  border: 1px solid var(--overlay-gold-light);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  margin: var(--space-2) 0;
}

/* Outcome-based border colors */
.roll-result.roll-critical_success {
  border-color: var(--color-success);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
}

.roll-result.roll-success {
  border-color: var(--color-success);
}

.roll-result.roll-failure {
  border-color: var(--color-error);
  opacity: 0.9;
}

.roll-result.roll-critical_failure {
  border-color: var(--color-error);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
}

/* ========================================
 * Roll Header
 * ======================================== */

.roll-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.roll-icon {
  font-size: var(--font-size-lg);
}

.roll-type {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-gold);
}

.roll-character {
  color: var(--color-text-primary);
  font-weight: 500;
}

.roll-badge {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roll-badge-advantage {
  background: rgba(34, 197, 94, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.roll-badge-disadvantage {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-error);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ========================================
 * Dice Display
 * ======================================== */

.roll-dice-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--font-size-base);
}

.roll-formula {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.roll-equals {
  color: var(--color-text-muted);
}

.roll-dice {
  display: flex;
  gap: var(--space-1);
}

.roll-die {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-1-5);
  background: var(--overlay-light);
  border: 2px solid var(--overlay-gold-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Natural 20 */
.roll-die.die-critical {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 165, 0, 0.3));
  border-color: var(--color-gold);
  color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  animation: die-glow 1.5s ease-in-out infinite alternate;
}

/* Natural 1 */
.roll-die.die-fumble {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.3));
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Used die (advantage/disadvantage) */
.roll-die.die-used {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.1);
}

/* Discarded die (advantage/disadvantage) */
.roll-die.die-discarded {
  opacity: 0.4;
  text-decoration: line-through;
  border-style: dashed;
}

@keyframes die-glow {
  from {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  }
  to {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
  }
}

.roll-modifier {
  font-weight: 600;
  color: var(--color-text-secondary);
}

.roll-total-label {
  color: var(--color-text-muted);
}

.roll-total {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  padding: var(--space-1) var(--space-2);
  background: var(--overlay-gold-light);
  border-radius: var(--radius-sm);
}

/* Outcome-based total colors */
.roll-critical_success .roll-total {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.2);
}

.roll-success .roll-total {
  color: var(--color-success);
}

.roll-failure .roll-total {
  color: var(--color-error);
}

.roll-critical_failure .roll-total {
  color: var(--color-error);
  background: rgba(239, 68, 68, 0.2);
}

/* ========================================
 * Result Bar
 * ======================================== */

.roll-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--overlay-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.roll-dc {
  color: var(--color-text-muted);
  font-weight: 500;
}

.roll-outcome-label {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.roll-critical_success .roll-outcome-label {
  color: var(--color-success);
}

.roll-success .roll-outcome-label {
  color: var(--color-success);
}

.roll-failure .roll-outcome-label {
  color: var(--color-error);
}

.roll-critical_failure .roll-outcome-label {
  color: var(--color-error);
}

.roll-outcome-icon {
  font-size: var(--font-size-base);
}

/* ========================================
 * Narrative Text
 * ======================================== */

.roll-narrative {
  padding-top: var(--space-2);
  border-top: 1px solid var(--overlay-gold-light);
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.roll-narrative p {
  margin: 0;
}

/* ========================================
 * Check Type Specific Styling
 * ======================================== */

.roll-type-attack .roll-type {
  color: var(--color-combat, #ef4444);
}

.roll-type-save .roll-type {
  color: var(--color-warning, #f59e0b);
}

.roll-type-damage .roll-total {
  color: var(--color-combat, #ef4444);
}

.roll-type-healing .roll-total {
  color: var(--color-success);
}

.roll-type-initiative .roll-type {
  color: var(--color-info, #3b82f6);
}

/* ========================================
 * Compact Mode (for inline display)
 * ======================================== */

.roll-result.roll-compact {
  flex-direction: row;
  align-items: center;
  padding: var(--space-2);
  gap: var(--space-3);
}

.roll-result.roll-compact .roll-header {
  display: none;
}

.roll-result.roll-compact .roll-dice-display {
  font-size: var(--font-size-sm);
}

.roll-result.roll-compact .roll-die {
  min-width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
}

.roll-result.roll-compact .roll-total {
  font-size: var(--font-size-base);
  padding: var(--space-0-5) var(--space-1-5);
}

.roll-result.roll-compact .roll-result-bar {
  display: none;
}

.roll-result.roll-compact .roll-narrative {
  border-top: none;
  padding-top: 0;
}

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

@media (max-width: 480px) {
  .roll-dice-display {
    flex-direction: column;
    align-items: flex-start;
  }

  .roll-result-bar {
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
  }
}
/*
 * Mobile HP Pill
 * ==============
 * Compact HP indicator shown in the status bar on mobile/tablet.
 * Only visible when in the game room (<1024px viewport).
 *
 * Extracted from _status_bar.css to respect file-size caps.
 * Uses design tokens from: terminal/_tokens.css
 */

.mobile-hp-pill {
  display: none; /* Hidden by default; shown via JS + media query */
}

@media (max-width: 1023px) {
  .mobile-hp-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 12px);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
  }

  .mobile-hp-pill--healthy {
    color: var(--accent-secondary, #98c379);
    background: rgba(152, 195, 121, 0.12);
    border-color: rgba(152, 195, 121, 0.25);
  }

  .mobile-hp-pill--injured {
    color: var(--accent-warning, #e5c07b);
    background: rgba(229, 192, 123, 0.12);
    border-color: rgba(229, 192, 123, 0.25);
  }

  .mobile-hp-pill--critical {
    color: var(--accent-error, #e06c75);
    background: rgba(224, 108, 117, 0.15);
    border-color: rgba(224, 108, 117, 0.3);
  }

  @keyframes mobileHpPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* Only animate when user hasn't requested reduced motion */
  @media (prefers-reduced-motion: no-preference) {
    .mobile-hp-pill--critical {
      animation: mobileHpPulse 1.5s ease-in-out infinite;
    }
  }

  .mobile-hp-pill__icon {
    font-size: var(--font-size-xs);
    line-height: 1;
  }

  .mobile-hp-pill__value {
    line-height: 1;
  }
}

/* Hide pill on desktop — stats visible in character sheet panel */
@media (min-width: 1024px) {
  .mobile-hp-pill {
    display: none;
  }
}
/* ========================================
 * Character Creation Layout
 * Split Panel Layout (Narrative Left + Banner/Wizard Right)
 * Extracted from _grid_container.css (#2637) to respect file-size caps.
 * ======================================== */

.character-creation-layout {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Left: Narrative/Guidance panel - 60% */
.character-creation-layout .lobby-left-panel {
  flex: 0.6 1 0%;
  min-width: 250px;
  min-height: 0;
}

/* Right: Banner + Wizard panels - 40% */
.character-creation-layout .lobby-right-panels {
  flex: 0.4 1 0%;
  display: flex;
  flex-direction: column;
  min-width: 250px;
  min-height: 0;
}

/* Main content area below banner and hotbar */
.character-creation-layout .lobby-right-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.creation-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Phone (<=767px): Stack narrative and wizard panels vertically.
   Narrative stays visible (eliminates dead-space per #2575); the right
   panels are HIDDEN at this width — wizard/banner/overview open via
   bottom-sheet overlays controlled by mobile_panel_controller (#2637).
   See the (max-width: 767px) block below for right-panel display:none.
   Synced with mobile-panel controller breakpoint (768px). */
@media (max-width: 767px) {
  .character-creation-layout .lobby-split-container {
    flex-direction: column;
    flex: 1;
    height: 100%;
    /* Allow vertical scroll when stacked content exceeds viewport */
    overflow-y: auto;
  }

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

  /* Narrative (left panel) always visible on mobile — overrides
     auto-mobile-mode .grid-panel { display: none } which would otherwise
     hide it until JS adds mobile-active or mobile-bottom-sheet-mode (#1070).
     Must match specificity of .grid-layout-wrapper.auto-mobile-mode .grid-panel (0-3-0). */
  .character-creation-layout.auto-mobile-mode .lobby-left-panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 0;
  }
}

/* Tablet (768-1023px): COMPRESSED DESKTOP — right-panels stay side-by-side
   with narrative, just with tighter padding + smaller min-widths to fit.
   Per #4150, JP design call (2026-04-30) resolving #2988: tablet should be
   "compressed desktop", NOT mobile drawer/stack. Right-panels (banner +
   character overview + wizard cards) remain visible alongside narrative
   instead of stacking below it.

   Touch targets stay >=44px (governed by _grid_container.css max-width:1023px
   block). Column divider stays visible (and is widened to 10px on touch via
   _grid_container.css). */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Keep horizontal split — do NOT collapse to column. */
  .character-creation-layout .lobby-split-container {
    flex-direction: row;
    flex: 1;
    height: auto;
    overflow: hidden;
  }

  /* Narrative gets a slightly larger share so the wizard side is compressed
     but still legible. min-width drops so it can shrink to ~190px on the
     narrowest tablet (768px) and still leave room for ~280px of right-panel.
     Override desktop's 250px floor. */
  .character-creation-layout .lobby-left-panel {
    flex: 0.55 1 0%;
    min-width: 190px;
  }

  /* Right panels stay visible alongside narrative. Compress min-width from
     250px (desktop) to 220px so we fit 768px viewport with the divider +
     narrative min-width. Inner padding from child panels handles the rest. */
  .character-creation-layout .lobby-right-panels {
    flex: 0.45 1 0%;
    min-width: 220px;
    width: auto;
  }

  /* Tighten the split-container gutter so we don't waste px on tablet. */
  .character-creation-layout .lobby-split-container {
    padding: var(--space-1, 4px);
    gap: var(--space-1, 4px);
  }
}

/* Phone (<768px): hide right-panels so narrative fills screen. Wizard/
   overview/banner open via bottom-sheet overlays controlled by JS.
   Tablet (768-1023px) shows compressed-desktop right-panels via the
   (min-width: 768px) and (max-width: 1023px) block above (#4150). */
@media (max-width: 767px) {
  .character-creation-layout .lobby-right-panels {
    display: none;
  }

  /* #3716: Collapse the empty black void below the chat input on phones.
     The (max-width: 767px) block above sets .lobby-left-panel to
     `flex: 1 0 auto`, which makes the panel sized by its CONTENT (cards +
     input area). When that content is short (e.g. ability-method picker,
     ~40-50% of viewport), the panel doesn't grow to fill
     .lobby-split-container, leaving a 50%+ void of dead space below the
     sticky input.

     On phones the wizard right-panels are hidden, so .lobby-left-panel
     is the only stacked child. Switching to `flex: 1 1 0%` makes the
     panel size from the PARENT height (which is constrained by
     .lobby-split-container -> .grid-layout-wrapper -> .zone--main),
     pushing the input to the bottom of the available viewport and
     letting narrative-output expand into the empty area above it.

     Also disable overflow-y on the split-container itself: with no
     stacked siblings on phones there's nothing to scroll at the
     container level. .narrative-main owns the internal scroll context
     (required for the sticky input-area; see _mobile_first.css).

     Tablet (768-1023px) uses compressed-desktop side-by-side layout
     (#4150) — this rule is phone-only and does not affect tablets. */
  .character-creation-layout.auto-mobile-mode .lobby-left-panel {
    flex: 1 1 0%;
  }

  .character-creation-layout .lobby-split-container {
    overflow: hidden;
  }
}
/*
 * Split Container Layout
 * ======================
 * Two-panel split layout with draggable divider.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Architecture:
 * - Two side-by-side panels with a draggable divider
 * - Split ratio controlled via CSS custom property --split-ratio
 * - Southpaw mode reverses visual order via flex-direction
 * - Responsive collapse at mobile breakpoint
 */

/* ========================================
 * Grid Layout Wrapper
 * ======================================== */

.grid-layout-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Room Transition Animations
   Duration synced from JS via --t-fade custom property (transition_timing.js).
   Fallback to 300ms if CSS custom property not yet initialized. */
.grid-layout-wrapper.room-transition-out {
  animation: fadeOut var(--t-fade, 300ms) ease-out forwards;
}

.grid-layout-wrapper.room-transition-in {
  animation: fadeIn var(--t-fade, 300ms) ease-in forwards;
}

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

/* ========================================
 * Split Layout Container
 * ======================================== */

.grid-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  gap: 0;
  padding: var(--grid-gap, 4px);
}

/* Southpaw mode: reverses visual panel order */
.grid-layout-container.split-layout--southpaw {
  flex-direction: row-reverse;
}

/* ========================================
 * Split Panels
 * ======================================== */

.split-panel--left {
  flex: var(--split-ratio, 0.65) 1 0%;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.split-panel--right {
  flex: calc(1 - var(--split-ratio, 0.65)) 1 0%;
  min-width: 300px; /* Increased from 250px to give stat-hex (260px max-width) adequate room */
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Stacked right panel (top + bottom) */
.split-panel--right.split-panel--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.split-panel--right-top {
  flex: var(--right-split, 0.5) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 80px; /* Smaller min for reference panel */
  overflow: hidden;
}

.split-panel--right-bottom {
  flex: calc(1 - var(--right-split, 0.5)) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 200px; /* Larger min for character sheet - needs more space */
  overflow: hidden;
}

/* Stacked solo panel (top + bottom, no left/right split) - used in character creation */
.split-panel--solo.split-panel--stacked {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
}

.split-panel--left-top {
  flex: var(--left-split, 0.4) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 80px;
  overflow: hidden;
}

.split-panel--left-bottom {
  flex: calc(1 - var(--left-split, 0.4)) 1 0%;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  overflow: hidden;
}

/* Horizontal divider for stacked panels */
.split-divider--horizontal {
  width: 100%;
  height: 6px;
  flex-shrink: 0;
  cursor: row-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.split-divider--horizontal:hover,
.split-divider--horizontal.split-divider--dragging {
  background: var(--color-accent-primary);
}

.split-divider--horizontal .split-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.split-divider--horizontal:hover .split-divider__handle,
.split-divider--horizontal.split-divider--dragging .split-divider__handle {
  opacity: 1;
}

/* Body state during horizontal divider drag */
body.split-dragging-vertical {
  cursor: row-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging-vertical * {
  cursor: row-resize !important;
}

/* Single panel mode (no right panel) */
.split-panel--left.split-panel--solo {
  flex: 1;
  min-width: 0;
}

/* Tab menu panel (Battle.net style) */
.split-panel--right.split-panel--with-tab-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.split-panel--with-tab-menu .room-tab-menu {
  flex-shrink: 0;
}

.split-panel--with-tab-menu .room-tab-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.split-panel--with-tab-menu .grid-panel {
  flex: 1;
  min-height: 0;
}

/* ========================================
 * Split Divider
 * ======================================== */

.split-divider {
  width: 6px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--color-border-primary);
  position: relative;
  z-index: var(--z-above);
  transition: background var(--timing-fast);
}

.split-divider:hover,
.split-divider--dragging {
  background: var(--color-accent-primary);
}

.split-divider__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--timing-fast);
}

.split-divider:hover .split-divider__handle,
.split-divider--dragging .split-divider__handle {
  opacity: 1;
}

/* Body state during divider drag */
body.split-dragging {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Grid Panel (Card)
 * ======================================== */

.grid-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-primary);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  position: relative;
  /* Prevent flash: panels hidden until JS marks them as initialized */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--timing-normal) var(--ease-out), transform var(--timing-normal) var(--ease-out);
}

/* Show panel once initialized by JavaScript */
.grid-panel.initialized,
.grid-panel--active {
  opacity: 1;
  transform: translateY(0);
}

/* Allow dropdown submenus to escape panel bounds */
.grid-panel:has(.panel-dropdown__menu.open) {
  overflow: visible;
  z-index: var(--z-dropdown, 1000);
}

.grid-layout-container:has(.panel-dropdown__menu.open) {
  overflow: visible;
}

/* Active/focused panel - visible indicator */
.grid-panel--active {
  background: var(--color-bg-secondary);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  z-index: var(--z-raised);
}

/* Zoomed panel */
.grid-panel--zoomed {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  border-radius: 0;
  border: none;
}

/* ========================================
 * Panel Header
 * ======================================== */

.grid-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  flex-shrink: 0;
  min-height: 24px;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.grid-panel__header:active {
  cursor: grabbing;
}

.grid-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

/* Reset h2 heading used for a11y hierarchy — keep visual consistency */
h2.grid-panel__title,
.grid-panel__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
  margin: 0;
  padding: 0;
  line-height: inherit;
}

/* Focused panel header highlight */
.grid-panel--active .grid-panel__header {
  background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-secondary));
}

.grid-panel--active .grid-panel__title {
  color: var(--color-accent-primary);
}

/* ========================================
 * Panel Actions
 * ======================================== */

.grid-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.grid-panel:hover .grid-panel__actions,
.grid-panel--active .grid-panel__actions {
  opacity: 1;
}

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

.grid-panel__action:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.grid-panel__action--close:hover {
  background: var(--color-accent-error);
  color: white;
}

/* ========================================
 * Panel Content
 * ======================================== */

.grid-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

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

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

.grid-panel__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-md);
}

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

/* ========================================
 * Panel Drag and Drop (Swap)
 * ======================================== */

.grid-panel--dragging {
  opacity: 0.6;
  z-index: var(--z-panel);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transform: scale(1.01);
}

.grid-panel--drag-over {
  outline: 2px dashed var(--color-accent-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-primary));
}

body.grid-panel-dragging {
  cursor: grabbing;
}

body.grid-panel-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Prefix Indicator (Ctrl+B)
 * ======================================== */

.grid-prefix-indicator {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.grid-prefix-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
 * Empty State (all panels floating)
 * ======================================== */

.grid-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 200px;
  padding: var(--space-8);
  color: var(--color-text-muted);
  text-align: center;
  animation: gridEmptyFadeIn var(--timing-normal) var(--ease-out);
}

.grid-empty-state__icon {
  font-size: var(--font-size-5xl);
  opacity: 0.2;
  margin-bottom: var(--space-3);
}

.grid-empty-state__text {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: var(--space-2);
}

.grid-empty-state__hint {
  font-size: var(--font-size-xs);
  opacity: 0.35;
}

.grid-empty-state__hint kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

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

@media (prefers-reduced-motion: reduce) {
  .grid-empty-state {
    animation: none;
  }
}

/* ========================================
 * Empty Panel Placeholder
 * ======================================== */

.grid-panel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.grid-panel__placeholder-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.grid-panel__placeholder-text {
  font-size: var(--font-size-sm);
}

/* ========================================
 * Notification
 * ======================================== */

.grid-notification {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-warning, #f59e0b);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}

.grid-notification.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========================================
 * Protected Panel Indicator
 * ======================================== */

.grid-panel--protected .grid-panel__header {
  border-left: 2px solid var(--color-accent-warning, #f59e0b);
}

/* ========================================
 * Panel Transition Animations
 * ======================================== */

.grid-panel--exiting {
  animation: gridPanelFadeOut var(--timing-fast) var(--ease-out) forwards;
  pointer-events: none;
}

.grid-panel--entering {
  animation: gridPanelFadeIn var(--timing-normal) var(--ease-out) forwards;
}

.grid-panel__content--exiting {
  animation: gridContentFadeOut var(--timing-fast) var(--ease-out) forwards;
  pointer-events: none;
}

.grid-panel__content--entering {
  animation: gridContentFadeIn var(--timing-fast) var(--ease-out) forwards;
}

@keyframes gridPanelFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes gridPanelFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

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

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

/* ========================================
 * FLIP Panel Slide Animations
 * Ghost clones used by PanelAnimator for exit animations
 * ======================================== */

.panel-animator__ghost {
  position: absolute;
  pointer-events: none;
  z-index: var(--z-sticky);
  will-change: transform, opacity;
  contain: strict;
  overflow: hidden;
}

/* Ensure container is a positioning context during animations */
.grid-layout-container {
  position: relative;
}

/* Tab content needs positioning for ghost clones during tab switches */
.room-tab-content {
  position: relative;
  overflow: hidden;
}

/* ========================================
 * Panel Update Highlight
 * ======================================== */

.grid-panel--highlight-update {
  animation: grid-panel-update-flash var(--timing-slow) var(--ease-out);
}

@keyframes grid-panel-update-flash {
  0% { box-shadow: inset 0 0 0 1px var(--color-accent-primary); }
  100% { box-shadow: none; }
}

.grid-panel__update-badge {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  animation: grid-badge-pulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes grid-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========================================
 * Panel AI DM Hint Highlights
 * Applied by grid_container_controller#highlightPanel when the AI DM
 * draws attention to a panel (e.g. "check your inventory").
 * Class pattern: grid-panel--highlight-{style}
 * Ported from split-panel--highlight-* in _panels.css (#1391)
 * ======================================== */

/* Pulse - pulsing glow for general attention hints */
.grid-panel--highlight-pulse {
  animation: grid-panel-pulse var(--timing-slow) var(--ease-in-out) 3;
}

@keyframes grid-panel-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-primary) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
  }
}

/* Glow - soft sustained aura, used for "look at this" hints */
.grid-panel--highlight-glow {
  animation: grid-panel-glow 1s ease-in-out infinite alternate;
}

@keyframes grid-panel-glow {
  from {
    box-shadow:
      0 0 5px color-mix(in srgb, var(--color-accent-primary) 30%, transparent),
      0 0 10px color-mix(in srgb, var(--color-accent-primary) 20%, transparent),
      0 0 15px color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
  }
  to {
    box-shadow:
      0 0 10px color-mix(in srgb, var(--color-accent-primary) 50%, transparent),
      0 0 20px color-mix(in srgb, var(--color-accent-primary) 30%, transparent),
      0 0 30px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  }
}

/* Border - quick warning-coloured border flash */
.grid-panel--highlight-border {
  animation: grid-panel-border-flash var(--timing-normal) var(--ease-out) 2;
}

@keyframes grid-panel-border-flash {
  0% {
    box-shadow: inset 0 0 0 1px transparent;
  }
  50% {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent-warning) 30%, transparent),
                0 0 0 2px color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
  }
  100% {
    box-shadow: inset 0 0 0 2px var(--color-accent-warning);
  }
}

/* Shake - horizontal jitter for urgent attention */
.grid-panel--highlight-shake {
  animation: grid-panel-shake var(--timing-normal) var(--ease-in-out) 2;
}

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

/* Combat - red pulse for combat-relevant alerts */
.grid-panel--highlight-combat {
  animation: grid-panel-combat var(--timing-slow) var(--ease-in-out) 3;
}

@keyframes grid-panel-combat {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-error) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
  }
}

/* Success - green glow for positive events and rewards */
.grid-panel--highlight-success {
  animation: grid-panel-success var(--timing-slow) var(--ease-in-out) 2;
}

@keyframes grid-panel-success {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-success) 0%, transparent);
  }
  50% {
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-success) 50%, transparent);
  }
}

/* Panel Tooltip - floating message injected by AI DM highlight command */
.grid-panel__tooltip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-tooltip, 500);
  animation: grid-panel-tooltip-fade-in var(--timing-fast) var(--ease-out);
  pointer-events: none;
}

.grid-panel__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--color-accent-primary);
}

@keyframes grid-panel-tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-90%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%);
  }
}

/* ========================================
 * Focus-Visible (Keyboard Navigation)
 * ======================================== */

.grid-panel:focus-visible {
  outline: 2px solid var(--color-border-focus, var(--color-accent-primary));
  outline-offset: -2px;
}

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

/* Mobile + Tablet: compact headers and touch targets */
@media (max-width: 1023px) {
  .grid-panel__header {
    padding: var(--space-1);
  }

  .grid-panel__title {
    font-size: var(--font-size-xs);
  }

  .grid-panel__action {
    width: 44px;  /* WCAG touch target */
    height: 44px;
    font-size: var(--font-size-base);
  }

  /* Hide divider on mobile since we use single-panel mode */
  .split-divider {
    display: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .grid-panel,
  .split-divider,
  .grid-prefix-indicator {
    transition: none;
  }

  .grid-panel--exiting,
  .grid-panel--entering,
  .grid-panel__content--exiting,
  .grid-panel__content--entering,
  .grid-panel--highlight-update,
  .grid-panel__tooltip {
    animation: none;
  }

  .grid-panel__update-badge {
    animation: none;
  }

  /* AI DM hint highlights: disable animations, use static outlines instead */
  .grid-panel--highlight-pulse,
  .grid-panel--highlight-glow {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-primary);
  }

  .grid-panel--highlight-border {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--color-accent-warning);
  }

  .grid-panel--highlight-shake {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--color-accent-primary);
  }

  .grid-panel--highlight-combat {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-error);
  }

  .grid-panel--highlight-success {
    animation: none;
    box-shadow: 0 0 0 2px var(--color-accent-success);
  }

  /* FLIP ghost animations disabled */
  .panel-animator__ghost {
    display: none;
  }
}

/* ========================================
 * Panel Dropdown Menu
 * ======================================== */

.panel-dropdown {
  position: relative;
}

.grid-panel__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.grid-panel__dropdown-trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.grid-panel__dropdown-trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

/* Row span badge in dropdown menu */
.panel-dropdown__badge {
  padding: 0 4px;
  font-size: var(--font-size-xs);
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* ========================================
 * Mobile Panel Switcher
 * ======================================== */

.grid-layout-wrapper.mobile-mode {
  flex-direction: column;
}

.grid-layout-wrapper.mobile-mode .mobile-panel-switcher {
  display: flex;
}

.grid-layout-wrapper.mobile-mode .grid-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Hide all panels except active in mobile */
.grid-layout-wrapper.mobile-mode .grid-panel {
  display: none;
}

.grid-layout-wrapper.mobile-mode .grid-panel.mobile-active {
  display: flex;
  flex: 1;
}

/* Auto-mobile breakpoint — synced with mobile_panel_controller 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 extracted to ./_creation_layout.css (#2637) */
/*
 * Lobby Narrative Layout
 * ======================
 * Extracted from _grid_container.css (#2091) to respect file-size caps.
 *
 * Two-part layout: narrative panel (full-width on mobile) + campaigns
 * sidebar (hidden on mobile, shown via hamburger menu overlay).
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Lobby Narrative Layout (Narrative + Open Campaigns sidebar)
 * ======================================== */

.lobby-narrative-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: var(--grid-gap, 4px);
}

/* ========================================
 * Lobby With Banner Layout (#2200)
 * Banner sits above the two-column content (narrative + sidebar).
 * Stacks vertically: banner on top, columns below.
 * ======================================== */

.lobby-with-banner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.lobby-with-banner > .lobby-banner {
  flex-shrink: 0;
}

.lobby-content-columns {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  gap: var(--grid-gap, 4px);
}

.lobby-narrative-full {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: var(--grid-gap, 4px);
}

.lobby-campaigns-sidebar {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-width: 260px;
  max-width: 380px;
  min-height: 0;
  padding: var(--grid-gap, 4px);
}

/* ========================================
 * #3731 1/5: Eager-strip the campaigns sidebar from first paint.
 * The sidebar stays in the DOM (server-rendered) so #3732 LobbyCommandRouter
 * + #3733 pop-out wiring can summon it on demand without a re-render.
 *
 * `lobby-campaigns-sidebar--stripped` hides at first paint (display:none beats
 * the desktop default flex). Adding `lobby-sidebar--open` (existing summon
 * class used by hamburger menu) wins via higher specificity and reveals it
 * inline on desktop / overlay on mobile (existing rules below in @media).
 * ======================================== */
.lobby-campaigns-sidebar--stripped {
  display: none;
}

/* Summon: --open beats --stripped on desktop; mobile overlay rules below
   already use --open with higher specificity (.grid-layout-wrapper.…). */
.lobby-campaigns-sidebar--stripped.lobby-sidebar--open {
  display: flex;
}

/* ========================================
 * Auto-Mobile Override for Lobby
 * Ensures narrative panel is visible and sidebar is hidden on mobile.
 * Must be in a @media block matching auto-mobile-mode breakpoint (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.
     Specificity must beat the auto-mobile-mode `display:none` rule
     (.grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-campaigns-sidebar,
     which is 0-4-0) — otherwise on small viewports (iOS Safari ~320px) the
     auto-mobile-mode rule wins and the sidebar either stays hidden or
     collapses to a 1-char-wide column because `display:none` beats the
     overlay `display:flex` and width rules (#2573). Adding
     `.grid-layout-wrapper` + `.auto-mobile-mode` brings this selector
     to 0-5-0, guaranteeing the overlay paints correctly. */
  .grid-layout-wrapper.lobby-narrative-layout.auto-mobile-mode .lobby-campaigns-sidebar.lobby-sidebar--open,
  .grid-layout-wrapper.lobby-with-banner.auto-mobile-mode .lobby-campaigns-sidebar.lobby-sidebar--open,
  .lobby-narrative-layout .lobby-campaigns-sidebar.lobby-sidebar--open,
  .lobby-with-banner .lobby-campaigns-sidebar.lobby-sidebar--open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    max-width: none;
    min-width: 0;
    z-index: var(--z-modal, 100);
    background: var(--color-bg-primary);
    padding: var(--space-4);
    padding-top: calc(var(--space-4) + 48px); /* Room for close button */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: sidebarSlideIn 0.25s ease-out;
    box-sizing: border-box;
  }

  /* Close button for sidebar overlay */
  .lobby-sidebar__close {
    position: fixed;
    top: var(--space-2);
    right: var(--space-2);
    z-index: calc(var(--z-modal, 100) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .lobby-sidebar__close:hover,
  .lobby-sidebar__close:active {
    background: var(--color-bg-elevated);
    border-color: var(--color-accent-primary);
  }

  @keyframes sidebarSlideIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
/*
 * Mobile-First Layout System
 * ==========================
 * Phase 2, Task 5 of the frontend architecture reset.
 *
 * DEFAULT layout (no media query) is mobile: single column, full-width narrative.
 * Tablet and desktop are progressive enhancements via min-width queries.
 *
 * Breakpoints (synced with app/javascript/lib/breakpoints.js):
 * - Mobile:  0 - 767px   (default — no query needed)
 * - Tablet:  768px+       (min-width: 768px)
 * - Desktop: 1024px+      (min-width: 1024px)
 * - Wide:    1440px+      (min-width: 1440px)
 *
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Integration with Existing Grid System
 * ======================================== */

/*
 * The existing .grid-layout-wrapper, .grid-layout-container, and room-specific
 * layouts (lobby-narrative-layout, character-creation-layout, etc.) continue to
 * work as-is. The active mobile-first wrapper is .grid-layout-wrapper.mf-layout
 * (12 wrappers in _grid_layout.html.erb).
 *
 * NOTE (#3709): The previous .mobile-first-layout BEM block (~108 LOC) was
 * deleted on 2026-04-24 — it had zero consumers in app/, e2e/, or public/.
 * Real implementation lives in .mf-layout below.
 *
 * For views already using .grid-layout-wrapper, the mobile-first behavior is
 * handled by the existing max-width queries in _grid_container.css. This file
 * provides the clean min-width foundation for NEW views and for gradual migration.
 */

/* ========================================
 * Mobile-First Overrides for grid-layout-wrapper
 * These enhance the existing wrapper with mobile-first defaults.
 * Applied when .grid-layout-wrapper also has .mf-layout.
 * ======================================== */

.grid-layout-wrapper.mf-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* #2575: Mobile — wrapper must fill its flex parent (.zone--main), NOT the full
   viewport. The parent is already sized to viewport minus status-bar + hotbar.
   Using 100dvh on mobile makes the wrapper taller than its parent, pushing the
   sticky input-area + ~40-50% of flex content into the hidden overflow region
   below the hotbar. This manifests as dead black void between the last visible
   narrative content and the bottom of the screen.

   Scoped to <=767px so desktop layouts (which are sized by outer flex containers
   anyway) are unaffected. 100% resolves against the flex parent's computed
   height, which is the actual visible space. */
@media (max-width: 767px) {
  .grid-layout-wrapper.mf-layout {
    height: 100%;
    min-height: 0;
  }
}

/* On mobile, narrative fills viewport; panels are bottom-sheet only */
.grid-layout-wrapper.mf-layout .grid-layout-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Hide the split divider on mobile — no side-by-side panels */
.grid-layout-wrapper.mf-layout .split-divider {
  display: none;
}

/* Narrative panel takes full width on mobile */
.grid-layout-wrapper.mf-layout .split-panel--left {
  flex: 1;
  min-width: 0;
}

/* Right panel hidden on mobile — JS opens via bottom sheet */
.grid-layout-wrapper.mf-layout .split-panel--right {
  display: none;
}

/* --- Tablet: restore two-panel split --- */
@media (min-width: 768px) {
  .grid-layout-wrapper.mf-layout .grid-layout-container {
    flex-direction: row;
  }

  .grid-layout-wrapper.mf-layout .split-divider {
    display: block;
  }

  .grid-layout-wrapper.mf-layout .split-panel--left {
    flex: var(--split-ratio, 0.65) 1 0%;
    min-width: 250px;
  }

  .grid-layout-wrapper.mf-layout .split-panel--right {
    display: flex;
    flex: calc(1 - var(--split-ratio, 0.65)) 1 0%;
    min-width: 300px;
  }
}

/* ========================================
 * Narrative Panel Flex Chain (Mobile)
 * Ensures the full height chain works on mobile:
 *   .grid-panel (flex: 1, display: flex, flex-direction: column)
 *     .grid-panel__content (flex: 1, display: flex, flex-direction: column)
 *       .narrative-panel-content (flex: 1, display: flex, flex-direction: column)
 *         .narrative-main (flex: 1, display: flex, flex-direction: column)
 *           .narrative-output (flex: 1, overflow-y: auto)
 *           .input-area (flex-shrink: 0, pinned to bottom)
 * ======================================== */

/* Grid panel containing narrative: must be flex column to pass height down */
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-key="narrative"],
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-type="narrative"] {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* grid-panel__content must also be flex column so .narrative-panel-content's
   flex:1 actually constrains its height. Without this, grid-panel__content
   uses block flow, narrative-panel-content gets height:auto (content-sized),
   and the input-area scrolls off-screen on mobile (#1736). */
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-key="narrative"] > .grid-panel__content,
.grid-layout-wrapper.mf-layout .grid-panel[data-panel-type="narrative"] > .grid-panel__content {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* narrative-main handles scrolling, not this container */
}

/* Narrative panel content: flex column to fill grid-panel */
.grid-layout-wrapper.mf-layout .narrative-panel-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: auto; /* Override height:100% which breaks flex */
  max-height: none; /* Override max-height:100% which breaks flex */
}

/* Narrative main: flex column for output + input stacking.
   overflow-y:auto makes this the scroll container on mobile so
   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.
 * ======================================== */

/* ========================================
 * Compact Status Bar on Mobile
 * Status bar compresses to a thin line on small screens.
 *
 * NOTE: Compact status bar styles are already defined in
 * base/mobile_enhancements.css under STATUS BAR MOBILE.
 * The mf-layout class inherits those styles automatically.
 * ======================================== */

/* ========================================
 * Viewport Height Fix
 * 100dvh (dynamic viewport height) is the correct unit for
 * mobile browsers where the address bar changes size.
 * Already applied via 100dvh above and in _terminal_layout.css.
 * ======================================== */

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

@media (prefers-reduced-motion: reduce) {
  .grid-layout-wrapper.mf-layout {
    transition: none;
  }
}
/*
 * Mobile Viewport Fixes
 * =======================================
 * Prevents horizontal scroll, layout/typography/keyboard fixes for mobile.
 * Keeps large files (_grid_container.css, mobile_enhancements.css) under LOC cap.
 */

@media (max-width: 767px) {
  /* Split panels: remove min-width that forces 556px combined minimum.
     Desktop: left 250px + right 300px + divider = 556px overflow on mobile. */
  .split-panel--left {
    min-width: 0;
  }

  .split-panel--right {
    min-width: 0;
  }
}

/* Map panel safe-area for notched / home-indicator devices */
@media (max-width: 768px) {
  .map-panel.visible {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Creation step labels — override 0.65rem (9.1px) fallback to 11px minimum */
@media (max-width: 768px) {
  .creation-progress__step-label,
  .creation-progress__step-optional {
    font-size: 11px;
  }
}

/* Creation grid — allow vertical scrolling when stacked on mobile */
/* #4324: was 700px (drift); canonical mobile max is 767px */
@media (max-width: 767px) {
  .creation-grid {
    overflow-y: auto;
    max-height: 100%;
  }
}

/* Scroll-to-latest — account for mobile keyboard height */
@media (max-width: 768px) {
  .scroll-to-latest {
    bottom: calc(80px + var(--mobile-keyboard-height, 0px));
  }
}

/* Combat dashboard — leave room for input area on mobile */
@media (max-width: 768px) {
  .combat-action-dashboard {
    max-height: calc(60vh - var(--mobile-keyboard-height, 0px));
    bottom: var(--mobile-keyboard-height, 0px);
  }
}
/*
 * Split Container Layout
 * ======================
 * tmux-like split panel system with resizable dividers.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Split Layout Wrapper
 * ======================================== */

.split-layout-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* ========================================
 * Split Container
 * ======================================== */

.split-container {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-container.split-horizontal {
  flex-direction: row;
}

.split-container.split-vertical {
  flex-direction: column;
}

/* Zoomed state - hide siblings */
.split-container--zoomed .split-child:not(:has(.split-panel--zoomed)) {
  display: none;
}

.split-container--zoomed .split-divider {
  display: none;
}

/* ========================================
 * Split Child (wrapper for panel or nested split)
 * ======================================== */

.split-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: flex var(--transition-resize);
}

/* ========================================
 * Split Divider
 * ======================================== */

.split-divider {
  flex-shrink: 0;
  background: var(--color-border-subtle);
  transition: background var(--transition-fast);
  position: relative;
  z-index: var(--z-dropdown);
}

/* Horizontal split = vertical divider (|) */
.split-horizontal > .split-divider {
  width: var(--split-divider-size);
  height: 100%;
  cursor: col-resize;
}

/* Vertical split = horizontal divider (—) */
.split-vertical > .split-divider {
  width: 100%;
  height: var(--split-divider-size);
  cursor: row-resize;
}

/* Grip indicator for vertical divider (|) */
.split-horizontal > .split-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  border-radius: 2px;
  background: var(--color-text-disabled);
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

/* Grip indicator for horizontal divider (—) */
.split-vertical > .split-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-text-disabled);
  opacity: 0.5;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

/* Hover state */
.split-divider:hover {
  background: color-mix(in srgb, var(--split-divider-hover-color) 30%, transparent);
}

.split-divider:hover::before {
  opacity: 1;
  background: var(--split-divider-hover-color);
}

/* Dragging state */
.split-divider--dragging {
  background: color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.split-divider--dragging::before {
  opacity: 1;
  background: var(--color-accent-primary);
}

/* Body state during drag */
body.split-dragging {
  cursor: col-resize;
  -webkit-user-select: none;
  user-select: none;
}

body.split-dragging * {
  cursor: inherit !important;
}

/* ========================================
 * Split Panel
 * ======================================== */

.split-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--color-bg-primary);
  overflow: hidden;
  box-shadow: var(--elevation-raised);
  /* Prevent flash: panels hidden until JS marks them as initialized */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

/* Show panel once initialized by JavaScript */
.split-panel.initialized,
.split-panel--active {
  opacity: 1;
  transform: translateY(0);
}

/* Active/focused panel - visible indicator */
.split-panel--active {
  background: var(--color-bg-secondary);
  box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  z-index: var(--z-raised);
}

/* Zoomed panel */
.split-panel--zoomed {
  position: fixed;
  top: var(--status-bar-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  border-radius: 0;
  border: none;
}

/* ========================================
 * Panel Header
 * ======================================== */

.split-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  flex-shrink: 0;
  min-height: 24px;
}

.split-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.split-panel__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

/* Focused panel header highlight */
.split-panel--active .split-panel__header {
  background: color-mix(in srgb, var(--color-accent-primary) 6%, var(--color-bg-secondary));
}

.split-panel--active .split-panel__title {
  color: var(--color-accent-primary);
}

/* ========================================
 * Panel Actions
 * ======================================== */

.split-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.split-panel:hover .split-panel__actions,
.split-panel--active .split-panel__actions {
  opacity: 1;
}

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

.split-panel__action:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.split-panel__action--close:hover {
  background: var(--color-accent-error);
  color: white;
}

/* ========================================
 * Panel Content
 * ======================================== */

.split-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

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

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

.split-panel__content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: var(--radius-md);
}

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

/* ========================================
 * Prefix Indicator
 * ======================================== */

.split-prefix-indicator {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.split-prefix-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
 * Empty Panel Placeholder
 * ======================================== */

.split-panel__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6);
  color: var(--color-text-muted);
  text-align: center;
}

.split-panel__placeholder-icon {
  font-size: var(--font-size-5xl);
  margin-bottom: var(--space-4);
  opacity: 0.3;
}

.split-panel__placeholder-text {
  font-size: var(--font-size-sm);
}

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

@media (max-width: 768px) {
  .split-panel__header {
    padding: var(--space-1);
  }

  .split-panel__title {
    font-size: var(--font-size-xs);
  }

  .split-panel__action {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs);
  }
}

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

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

  .split-panel,
  .split-divider,
  .split-prefix-indicator {
    transition: none;
  }
}

/* ========================================
 * Split Notification (Bug 1.2 Fix)
 * ======================================== */

.split-notification {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-warning, #f59e0b);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  opacity: 0;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: var(--z-notification);
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
  text-align: center;
}

.split-notification.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Touch-friendly dividers on mobile/tablet */
@media (max-width: 768px) {
  .split-horizontal > .split-divider {
    width: 16px;  /* Touch-friendly width */
  }

  .split-vertical > .split-divider {
    height: 16px;  /* Touch-friendly height */
  }

  /* Always show grip handle on touch devices */
  .split-divider::before {
    opacity: 0.8;
  }

  .split-divider:active::before {
    opacity: 1;
    background: var(--color-accent-primary);
  }

  /* Increase panel action button size for touch */
  .split-panel__action {
    width: 44px;   /* WCAG minimum (was 18px) */
    height: 44px;
  }
}

/* Panel Dropdown Menu — extracted to terminal/layout/_panel_dropdown.css (#4477) */

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

/* ========================================
 * 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;
  }
}
/* ========================================
 * Panel Dropdown Menu
 * ========================================
 * Extracted from _split_container.css (#4477) to keep that file under the
 * 1000-LOC pre-commit cap. Owns the dropdown menu pattern shared between
 * docked grid panels (.split-panel__dropdown-trigger) and floating panels
 * (.floating-panel__dropdown-trigger — see _floating_panel.css).
 */

.panel-dropdown {
  position: relative;
}

.split-panel__dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.split-panel__dropdown-trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.split-panel__dropdown-trigger:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.panel-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: var(--z-dropdown, 1000);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2px);
  transition: opacity 0.12s ease-out,
              transform 0.12s ease-out,
              visibility 0.12s ease-out;
}

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

/*
 * Flip-up modifier (#4477) — applied by dropdown_controller#_maybeFlipUp when
 * the natural downward menu would clip below the viewport. Anchors to the
 * bottom of the trigger so the menu opens upward instead.
 */
.panel-dropdown__menu--flip-up {
  top: auto;
  bottom: 100%;
  transform: translateY(2px);
}

.panel-dropdown__menu--flip-up.open {
  transform: translateY(0);
}

.panel-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.panel-dropdown__item:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.panel-dropdown__item--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.panel-dropdown__item--disabled:hover {
  background: transparent;
  color: var(--color-text-secondary);
}

.panel-dropdown__item--has-submenu {
  position: relative;
}

.panel-dropdown__icon {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.panel-dropdown__chevron {
  margin-left: auto;
  color: var(--color-text-muted);
}

.panel-dropdown__divider {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--color-border-subtle);
}

.panel-dropdown__shortcut {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
}

/* Submenu container */
.panel-dropdown__submenu-container {
  position: relative;
}

.panel-dropdown__submenu {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 160px;
  max-height: 500px; /* Increased from 300px to show all workshop panels */
  overflow-y: auto;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: calc(var(--z-dropdown, 1000) + 1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast),
              transform var(--transition-fast),
              visibility var(--transition-fast);
}

.panel-dropdown__submenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Keep submenu open when hovering */
.panel-dropdown__submenu-container:hover .panel-dropdown__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Flip submenu to left if near right edge */
.split-panel:last-child .panel-dropdown__submenu,
.panel-dropdown--flip-submenu .panel-dropdown__submenu {
  left: auto;
  right: 100%;
  transform: translateX(4px);
}

.split-panel:last-child .panel-dropdown__submenu.open,
.panel-dropdown--flip-submenu .panel-dropdown__submenu.open,
.split-panel:last-child .panel-dropdown__submenu-container:hover .panel-dropdown__submenu,
.panel-dropdown--flip-submenu .panel-dropdown__submenu-container:hover .panel-dropdown__submenu {
  transform: translateX(0);
}

/* Scrollbar styling for submenu */
.panel-dropdown__submenu::-webkit-scrollbar {
  width: 6px;
}

.panel-dropdown__submenu::-webkit-scrollbar-track {
  background: transparent;
}

.panel-dropdown__submenu::-webkit-scrollbar-thumb {
  background: var(--color-border-default);
  border-radius: 3px;
}

.panel-dropdown__submenu::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-subtle);
}

/* Mobile: larger tap targets */
@media (max-width: 768px) {
  .split-panel__dropdown-trigger {
    width: 44px;
    height: 44px;
  }

  .panel-dropdown__item {
    min-height: 44px;
  }

  .panel-dropdown__menu {
    min-width: 200px;
  }

  /* Stack submenus below parent on mobile */
  .panel-dropdown__submenu {
    position: relative;
    left: 0;
    right: auto;
    margin-left: var(--space-3);
    border: none;
    box-shadow: none;
    max-height: none;
  }

  .panel-dropdown__submenu.open {
    transform: none;
  }
}
/* Achievements Panel */

.achievements-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.achievements-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-header);
}

.achievements-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.achievements-panel__title svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-gold);
}

.achievements-panel__stats {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.achievements-panel__stats-divider {
  color: var(--color-text-muted);
}

/* Filters */
.achievements-panel__filters {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.achievements-panel__filter {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.achievements-panel__filter:hover {
  background: var(--color-background-hover);
  border-color: var(--color-border-hover);
}

.achievements-panel__filter.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-primary);
}

/* Content */
.achievements-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

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

/* Section grouping */
.achievements-panel__section {
  margin-bottom: var(--space-3);
}

.achievements-panel__section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.achievements-panel__section-icon {
  font-size: var(--font-size-md);
}

.achievements-panel__section-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.achievements-panel__section-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.achievements-panel__section-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Achievement Card */
.achievements-panel__card {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel-bg);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.achievements-panel__card:hover {
  border-color: var(--color-border-hover);
  background: var(--color-background-hover);
}

.achievements-panel__card--earned {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-panel-bg));
}

.achievements-panel__card--earned:hover {
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-panel-bg));
}

.achievements-panel__card--locked {
  opacity: 0.7;
}

.achievements-panel__card--locked .achievements-panel__icon {
  filter: grayscale(1);
}

/* Card Icon */
.achievements-panel__card-icon {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-background-subtle);
}

.achievements-panel__icon {
  font-size: 1.5rem;
}

.achievements-panel__earned-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-success);
  color: white;
  font-size: 10px;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Card Content */
.achievements-panel__card-content {
  flex: 1;
  min-width: 0;
}

.achievements-panel__card-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.achievements-panel__card-description {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.achievements-panel__card-date {
  margin-top: var(--space-1);
  font-size: 10px;
  color: var(--color-text-muted);
}

/* Card Progress Bar (cumulative achievements) */
.achievements-panel__card-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.achievements-panel__card-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary, var(--color-background-subtle));
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.achievements-panel__card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-gold, #f59e0b), var(--color-accent-gold-light, #fcd34d));
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease-out;
  min-width: 0;
}

.achievements-panel__card-progress-text {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Hidden Achievement Mystery Cards
 * ===================================
 * Players see a locked silhouette for hidden achievements they haven't earned.
 * This acts as a "quest hook" — proof that secrets exist without spoiling them.
 */

.achievements-panel__hidden-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 8%, var(--color-panel-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 25%, transparent);
  font-size: var(--font-size-xs);
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 90%, var(--color-text-primary));
  font-style: italic;
}

.achievements-panel__hidden-banner::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23f59e0b' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  opacity: 0.9;
}

/* Mystery card — the locked slot for a hidden unearned achievement */
.achievements-panel__card--mystery {
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 20%, var(--color-border));
  background: color-mix(in srgb, var(--color-background-subtle) 60%, var(--color-panel-bg));
  opacity: 0.75;
  cursor: default;
}

.achievements-panel__card--mystery:hover {
  /* Mystery cards don't invite the same hover treatment as real achievements */
  border-color: color-mix(in srgb, var(--color-warning, #f59e0b) 35%, var(--color-border));
  background: color-mix(in srgb, var(--color-background-subtle) 60%, var(--color-panel-bg));
  transform: none;
}

/* Mystery card icon container — slightly dimmed with a distinct treatment */
.achievements-panel__card-icon--mystery {
  background: color-mix(in srgb, var(--color-background-subtle) 80%, transparent);
}

/* Lock icon inside mystery card */
.achievements-panel__icon--mystery {
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--color-warning, #f59e0b) 60%, var(--color-text-muted));
  filter: none; /* Override the grayscale from --locked modifier on parent */
}

.achievements-panel__icon--mystery svg {
  width: 20px;
  height: 20px;
}

/* Mystery card text — styled to look redacted/secret */
.achievements-panel__card-name--mystery {
  color: var(--color-text-muted);
  font-style: italic;
  letter-spacing: 0.025em;
}

.achievements-panel__card-description--mystery {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  opacity: 0.8;
}

/* Error state */
.achievements-panel__error {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

.achievements-panel__error p {
  margin-bottom: var(--space-2);
}

/* Legacy support for old .achievements class */
.achievements {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.achievements__header {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.achievements__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

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

.achievements__footer {
  padding: var(--space-2);
  border-top: 1px solid var(--color-border);
}
/**
 * Activity Timeline Panel (#4229)
 * ================================
 * PaperTrail-driven activity feed. Mounted in admin HUD, character sheet,
 * and campaign overview. Inherits surface from `.surface-panel`.
 */

.activity-timeline-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 480px;
  overflow-y: auto;
}

.activity-timeline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

.activity-timeline-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.activity-timeline-panel__icon {
  font-size: 1.1em;
}

.activity-timeline-panel__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg-primary);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  min-width: 1.5rem;
  text-align: center;
}

.activity-timeline-panel__empty {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
  text-align: center;
}

.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.activity-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border-left: 3px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.activity-item--create {
  border-left-color: var(--color-success, #2ecc71);
}

.activity-item--update {
  border-left-color: var(--color-info, #3498db);
}

.activity-item--destroy {
  border-left-color: var(--color-danger, #e74c3c);
}

.activity-item__icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

.activity-item__content {
  flex: 1;
  min-width: 0;
}

.activity-item__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-1);
}

.activity-item__event-type {
  color: var(--color-text-primary);
}

.activity-item__entity-type {
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
}

.activity-item__link {
  color: var(--color-link, var(--color-text-primary));
  text-decoration: underline;
  text-decoration-style: dotted;
}

.activity-item__deleted {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
}

.activity-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.activity-item__summary {
  margin: var(--space-1) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}
/**
 * Image Gallery 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;
}

/* ========================================
 * Lightbox Tag Editor (#3798)
 * ======================================== */

.image-gallery-lightbox__tag-editor {
  position: absolute;
  bottom: calc(var(--space-4, 1rem) + 4rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--terminal-radius-md, 8px);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  max-width: 80vw;
  z-index: var(--z-above, 2);
}

.image-gallery-lightbox__tag-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  margin-bottom: var(--space-1, 0.25rem);
}

.image-gallery-lightbox__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  min-height: 1.5rem;
}

.image-gallery-lightbox__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: 0.1em 0.5em;
  background: rgba(78, 205, 196, 0.15);
  border: 1px solid rgba(78, 205, 196, 0.4);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery-lightbox__tag-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  font-size: 0.85em;
}

.image-gallery-lightbox__tag-remove:hover {
  opacity: 1;
}

.image-gallery-lightbox__tag-form {
  display: flex;
  gap: var(--space-1, 0.25rem);
  margin-top: var(--space-1, 0.25rem);
}

.image-gallery-lightbox__tag-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}

.image-gallery-lightbox__tag-input:focus {
  outline: 2px solid var(--terminal-accent, var(--color-accent, #4ecdc4));
  outline-offset: -1px;
}

.image-gallery-lightbox__tag-add {
  background: rgba(78, 205, 196, 0.2);
  border: 1px solid rgba(78, 205, 196, 0.4);
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  cursor: pointer;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: 1rem;
  line-height: 1;
}

.image-gallery-lightbox__tag-add:hover {
  background: rgba(78, 205, 196, 0.3);
}

.image-gallery-lightbox__tag-error {
  font-size: 0.7rem;
  color: var(--terminal-error, var(--color-error, #ff6b6b));
  margin-top: var(--space-1, 0.25rem);
}

/* ========================================
 * Filter Bar
 * ======================================== */

.image-gallery__filters {
  flex-shrink: 0;
  padding: var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.1));
}

.image-gallery__filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: flex-end;
}

.image-gallery__filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  min-width: 0;
}

.image-gallery__filter--tags {
  flex: 2;
  min-width: 120px;
}

.image-gallery__filter--date {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--space-1, 0.25rem);
  flex-wrap: wrap;
}

.image-gallery__filter--date .image-gallery__filter-label {
  align-self: flex-end;
  margin-bottom: 0.25rem;
}

.image-gallery__filter--search {
  flex: 2;
  min-width: 120px;
}

.image-gallery__filter-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.image-gallery__filter-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  width: 100%;
  min-width: 60px;
}

.image-gallery__filter-input:focus {
  outline: 2px solid var(--terminal-accent, var(--color-accent, #4ecdc4));
  outline-offset: -1px;
  border-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__filter-input[type="date"] {
  color-scheme: dark;
  min-width: 120px;
}

.image-gallery__filter-input[type="search"]::-webkit-search-cancel-button {
  filter: invert(0.6);
}

.image-gallery__filter-clear {
  flex-shrink: 0;
  align-self: flex-end;
  background: transparent;
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  cursor: pointer;
  font-size: 0.7rem;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.image-gallery__filter-clear:hover {
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  border-color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

/* ========================================
 * Tag Chips (filter bar)
 * ======================================== */

.image-gallery__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 0.25rem);
  min-height: 1rem;
}

.image-gallery__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.1em 0.4em;
  background: rgba(78, 205, 196, 0.12);
  border: 1px solid rgba(78, 205, 196, 0.35);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.6;
  font-size: 0.9em;
}

.image-gallery__chip-remove:hover {
  opacity: 1;
}

/* ========================================
 * Per-Image Actions (hover action bar)
 * ======================================== */

.image-gallery__item-actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 2px;
  padding: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-gallery__item:hover .image-gallery__item-actions,
.image-gallery__item:focus-within .image-gallery__item-actions {
  opacity: 1;
}

.image-gallery__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--terminal-radius-sm, 4px);
  background: rgba(0, 0, 0, 0.7);
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  cursor: pointer;
  font-size: 0.7rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}

.image-gallery__action:hover {
  background: rgba(0, 0, 0, 0.9);
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}

.image-gallery__action--favorite {
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.image-gallery__item.is-favorited .image-gallery__action--favorite {
  color: #ffd700;
}

.image-gallery__action--delete:hover {
  background: rgba(255, 60, 60, 0.7);
  color: #fff;
}

/* ========================================
 * Per-Image Tag Chips (on thumbnail card)
 * ======================================== */

.image-gallery__item-tags {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px 4px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.image-gallery__item-tag {
  display: inline-block;
  padding: 0.05em 0.35em;
  background: rgba(78, 205, 196, 0.2);
  border-radius: 2px;
  font-size: 0.55rem;
  color: var(--terminal-accent, var(--color-accent, #4ecdc4));
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-gallery__item-tag--more {
  background: rgba(255, 255, 255, 0.1);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

/* ========================================
 * Load More Button
 * ======================================== */

.image-gallery__load-more-wrapper {
  display: flex;
  justify-content: center;
  padding: var(--space-2, 0.5rem);
}

.image-gallery__load-more {
  background: transparent;
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-sm, 4px);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  cursor: pointer;
  font-size: 0.75rem;
  padding: var(--space-1, 0.25rem) var(--space-4, 1rem);
  transition: color 0.15s, border-color 0.15s;
}

.image-gallery__load-more:hover {
  color: var(--terminal-text, var(--color-text, #e0e0e0));
  border-color: var(--terminal-accent, var(--color-accent, #4ecdc4));
}
/**
 * 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;
  }
}
/**
 * Combat Tracker — State Classes
 * ==============================
 * BEM `--hidden` state modifiers for the combat tracker subpanels.
 * Toggled by combat_tracker_controller.js and lib/combat_tracker/* helpers
 * via classList.add/remove instead of inline style mutations (#4259).
 */

.combat-header--hidden { display: none; }
.initiative-list--hidden { display: none; }
.initiative-wheel-container--hidden { display: none; }
.next-up--hidden { display: none; }
.damage-history--hidden { display: none; }
.combat-empty-state--hidden { display: none; }
.action-economy--hidden { display: none; }
.combat-actions--hidden { display: none; }
/**
 * Combat Tracker — Action Hierarchy
 * =================================
 * Visual hierarchy for the quick-combat action grid (#4271, finding 10.3).
 *
 * Layout:
 *   1. Primary Attack button (full-width, danger-colored, dominant)
 *   2. Secondary 2x2 grid: Dash / Dodge / Disengage / Use Item
 *   3. <details> "More actions" disclosure: Help / Hide / Ready
 *   4. End Turn footer (visually weighty — second only to Attack)
 *
 * Promote/demote via CSS overrides on the existing combat-actions__*
 * BEM scope so the original styles in _combat_tracker.css remain
 * the baseline. This file ships incremental hierarchy on top.
 */

/* Primary action row (Attack) — visually dominant, full-width button. */
.combat-actions__primary {
  margin-bottom: 0.5rem;
}

.combat-actions__btn--primary {
  width: 100%;
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--color-danger-dark, #4a1a1a);
  border: 1px solid var(--color-danger, #ef4444);
  color: var(--color-danger-light, #fca5a5);
  font-weight: 600;
}

.combat-actions__btn--primary:hover:not(:disabled) {
  background: var(--color-danger, #ef4444);
  color: white;
  transform: translateY(-1px);
}

.combat-actions__btn--primary svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 1;
}

.combat-actions__btn--primary .combat-actions__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Secondary 2x2 grid (Dash / Dodge / Disengage / Use Item). */
.combat-actions__grid--secondary {
  grid-template-columns: repeat(2, 1fr);
}

/* "More" disclosure for less-frequent actions (Help / Hide / Ready). */
.combat-actions__more {
  margin-top: 0.5rem;
}

.combat-actions__more-toggle {
  list-style: none;
  cursor: pointer;
  padding: 0.375rem 0.5rem;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--terminal-text-muted, #888);
  border: 1px dashed var(--terminal-border, #333);
  border-radius: 4px;
  text-align: center;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.combat-actions__more-toggle::-webkit-details-marker {
  display: none;
}

.combat-actions__more-toggle:hover {
  color: var(--terminal-text-primary, #e0e0e0);
  border-color: var(--terminal-border-hover, #444);
}

.combat-actions__more[open] .combat-actions__more-toggle {
  margin-bottom: 0.5rem;
  color: var(--terminal-text-primary, #e0e0e0);
  border-style: solid;
}

.combat-actions__grid--more {
  grid-template-columns: repeat(3, 1fr);
}

/* End Turn — weight-up. Second-most-dominant action after Attack. */
.combat-actions .combat-actions__end-turn {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--terminal-border, #333);
}

.combat-actions .combat-actions__btn--end-turn {
  padding: 0.75rem;
  font-weight: 600;
}

.combat-actions .combat-actions__btn--end-turn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.combat-actions .combat-actions__btn--end-turn svg {
  width: 1.125rem;
  height: 1.125rem;
  opacity: 1;
}

.combat-actions .combat-actions__btn--end-turn .combat-actions__label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Responsive: collapse the More grid to 2 columns on smaller screens. */
@media (max-width: 480px) {
  .combat-actions__grid--more {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*
 * Guest Gate Organism (#440)
 * ==========================
 * Loading/connecting page shown to unauthenticated visitors.
 * Includes progress animation and timeout error state.
 * Uses design tokens from: terminal/_tokens.css
 */

.guest-gate-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-primary, #1a1a1a);
  padding: 1rem;
}

.guest-gate-content {
  text-align: center;
  max-width: 400px;
  width: 100%;
}

.guest-gate-message {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 1.125rem;
  font-family: var(--font-mono, monospace);
  margin: 0 0 1.5rem;
}

.guest-gate-dots {
  display: inline-block;
  min-width: 1.5em;
  text-align: left;
}

/* Indeterminate progress bar */
.guest-gate-progress {
  width: 200px;
  height: 3px;
  background: var(--color-bg-tertiary, #3d3d3d);
  border-radius: 2px;
  margin: 0 auto 1.5rem;
  overflow: hidden;
}

.guest-gate-progress__bar {
  width: 40%;
  height: 100%;
  background: var(--color-accent-primary, #5a9fd8);
  border-radius: 2px;
  animation: guest-gate-progress-slide 1.5s ease-in-out infinite;
}

@keyframes guest-gate-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Error state (shown after timeout) */
.guest-gate-error {
  animation: guest-gate-fade-in 0.3s ease-out;
}

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

.guest-gate-error__message {
  color: var(--color-accent-warning, #d4b06e);
  font-size: 0.9375rem;
  margin: 0 0 1rem;
}

.guest-gate-error__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.guest-gate-error__button {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.guest-gate-error__button:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 85%, white);
}

.guest-gate-error__button:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.guest-gate-error__sign-in {
  color: var(--color-accent-primary, #5a9fd8);
  font-size: 0.875rem;
  font-family: var(--font-mono, monospace);
  text-decoration: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--color-accent-primary, #5a9fd8);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.guest-gate-error__sign-in:hover {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
}

.guest-gate-error__sign-in:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.guest-gate-noscript {
  color: var(--color-accent-warning, #d4b06e);
  font-size: 0.875rem;
  margin-top: 1rem;
}
/**
 * Inventory Panel
 * ===============
 * Displays character inventory with rarity-based styling.
 * Uses design tokens from: terminal/_tokens.css
 */

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

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

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

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

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

.inventory__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.inventory__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Capacity Display
 * ======================================== */

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

.inventory__capacity-bar {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.inventory__capacity-fill {
  height: 100%;
  background: var(--color-accent-secondary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background-color var(--transition-normal);
}

.inventory__capacity-fill--warning {
  background: var(--color-accent-warning);
}

.inventory__capacity-fill--full {
  background: var(--color-accent-error);
}

/* ========================================
 * Item List
 * ======================================== */

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

.inventory__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Category Sections (dynamically rendered)
 * ======================================== */

.inventory__category {
  margin-bottom: var(--space-4);
}

.inventory__category:last-child {
  margin-bottom: 0;
}

.inventory__category-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

/* ========================================
 * Item Card
 * ======================================== */

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

.inventory__item:hover {
  background: var(--color-bg-tertiary);
  transform: translateY(-1px);
}

.inventory__item:active {
  transform: translateY(0);
}

.inventory__item:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
  position: relative;
}

/* ========================================
 * State Modifiers
 * ======================================== */

.inventory__item--equipped {
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-secondary) 30%, var(--color-border-default));
}

.inventory__item--attuned {
  background: color-mix(in srgb, var(--color-accent-purple) 10%, var(--color-bg-secondary));
  border-color: color-mix(in srgb, var(--color-accent-purple) 30%, var(--color-border-default));
}

/* ========================================
 * Rarity Variants (via data-rarity attribute)
 *
 * Refactor (#4260, XC-3): Most rarities now signal via a text-color badge
 * (`.inventory__item-rarity`) rather than a left-border accent. Two tiers
 * keep the load-bearing left-border treatment because they signal
 * exceptional / dangerous loot the player must not miss:
 *   - legendary  (gold border + tinted bg)
 *   - artifact   (red border + tinted bg — danger/cursed)
 * Color values for all six tiers are unchanged; only the SHAPE of the
 * common/uncommon/rare/very-rare signal moved from border to text color.
 * ======================================== */

/* Hover boosts for rarities that no longer carry a left-border accent —
 * the rarity color is preserved on the full border + glow on interaction. */
.inventory__item[data-rarity="uncommon"]:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: var(--shadow-glow-success);
}

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

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

/* Legendary — left-border KEPT (load-bearing UX for top-tier loot) */
.inventory__item[data-rarity="legendary"] {
  border-left: 3px solid var(--color-gold);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    var(--color-bg-secondary) 100%
  );
}

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

/* Artifact — left-border KEPT (semantic danger / cursed signal) */
.inventory__item[data-rarity="artifact"] {
  border-left: 3px solid var(--color-accent-error);
  background: linear-gradient(
    135deg,
    rgba(224, 108, 117, 0.05) 0%,
    var(--color-bg-secondary) 100%
  );
}

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

/* ========================================
 * Rarity Text Badge
 *
 * Inline text-color signal — preserves rarity color values without piling
 * another distinct left-border idiom into the panel. Renders next to the
 * item name when present (data-rarity is also queryable for sort/filter).
 * ======================================== */

.inventory__item-rarity {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.inventory__item[data-rarity="common"] .inventory__item-rarity {
  color: var(--color-text-muted);
}

.inventory__item[data-rarity="uncommon"] .inventory__item-rarity {
  color: var(--color-accent-secondary);
}

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

.inventory__item[data-rarity="very_rare"] .inventory__item-rarity,
.inventory__item[data-rarity="very-rare"] .inventory__item-rarity {
  color: var(--color-accent-purple);
}

.inventory__item[data-rarity="legendary"] .inventory__item-rarity {
  color: var(--color-gold);
}

.inventory__item[data-rarity="artifact"] .inventory__item-rarity {
  color: var(--color-accent-error);
}

/* ========================================
 * Item Icon
 * ======================================== */

.inventory__item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.inventory__item-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
}

/* ========================================
 * Item Info
 * ======================================== */

.inventory__item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.inventory__item-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.inventory__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.inventory__item-badge--equipped {
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-primary));
  color: var(--color-accent-secondary);
}

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

/* ========================================
 * Item Actions
 * ======================================== */

.inventory__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

/* Primary action always visible */
.inventory__item-actions .item-action--primary,
.inventory__item-actions__primary {
  opacity: 1;
}

/* Secondary actions hidden by default */
.inventory__item-actions .item-action--secondary,
.inventory__item-actions__secondary {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

/* Show secondary on hover or focus */
.inventory__item:hover .inventory__item-actions .item-action--secondary,
.inventory__item:focus-within .inventory__item-actions .item-action--secondary,
.inventory__item:hover .inventory__item-actions__secondary,
.inventory__item:focus-within .inventory__item-actions__secondary {
  opacity: 1;
}

/* Legacy: hide all actions on non-interactive state */
.inventory__item-actions--hide-on-idle {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.inventory__item:hover .inventory__item-actions--hide-on-idle,
.inventory__item:focus-within .inventory__item-actions--hide-on-idle {
  opacity: 1;
}

/* ========================================
 * Item Meta (legacy support)
 * ======================================== */

.inventory-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.inventory-item__quantity {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.inventory-item__weight {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Weight Display
 * ======================================== */

.inventory__weight {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inventory__weight--encumbered {
  color: var(--color-accent-warning);
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * Gold Display
 * ======================================== */

.inventory__gold {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
}

/* Styled gold coin icon (replaces emoji for consistency) */
.inventory__gold-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8860b 100%);
  border-radius: 50%;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: #1a1a1a;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 1px 2px rgba(0, 0, 0, 0.3);
}

.inventory__gold-icon::after {
  content: 'G';
}

/* Fallback if no icon element present */
.inventory__gold:not(:has(.inventory__gold-icon))::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8860b 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

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

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

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

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

  .inventory__item-icon {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-base);
  }

  /* All actions visible on small screens */
  .inventory__item-actions,
  .inventory__item-actions .item-action--secondary,
  .inventory__item-actions__secondary {
    opacity: 1;
  }
}

/* Touch device: always show all actions */
@media (hover: none) {
  .inventory__item-actions,
  .inventory__item-actions .item-action--secondary,
  .inventory__item-actions__secondary,
  .inventory__item-actions--hide-on-idle {
    opacity: 0.85;
  }
}

/* ========================================
 * Loading States
 * ======================================== */

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

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

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

/* ----------------------------------------
 * Skeleton — item card shape (9.4)
 * Mirrors the .inventory__item structure so the loading state
 * does not jump to a different layout when items arrive.
 * ---------------------------------------- */

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

.inventory__skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-text-muted);
  border-radius: var(--radius-md);
}

.inventory__skeleton-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.inventory__skeleton-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.inventory__skeleton-name {
  height: 14px;
  margin-bottom: 0;
}

.inventory__skeleton-meta {
  height: 10px;
  margin-bottom: 0;
}

.inventory__skeleton-badge {
  width: 28px;
  height: 18px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* ========================================
 * Inline Search Shortcut Hint (9.3)
 * "Press / to search" — visible until first use.
 * ======================================== */

.panel-search-hint {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle, var(--color-border-default));
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.panel-search-hint__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  background: var(--color-bg-tertiary, var(--color-bg-elevated, #1a1a1a));
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #999);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.panel-search-hint--hidden {
  display: none;
}

/* ========================================
 * Drag and Drop States
 * ======================================== */

.inventory__item--dragging {
  opacity: 0.5;
  transform: scale(0.98);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.inventory__item--drag-over {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-secondary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.inventory__drop-zone {
  border: 2px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.inventory__drop-zone--active {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 5%, transparent);
  color: var(--color-accent-primary);
}

/* ========================================
 * Item Interaction Enhancements
 * ======================================== */

/* Equip animation */
.inventory__item--equipping {
  animation: inventory-equip 0.4s ease-out;
}

@keyframes inventory-equip {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-secondary)); }
  100% { transform: scale(1); }
}

/* Use item animation */
.inventory__item--using {
  animation: inventory-use 0.3s ease-out;
}

@keyframes inventory-use {
  0% { opacity: 1; }
  50% { opacity: 0.6; transform: translateX(4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Item removal animation */
.inventory__item--removing {
  animation: inventory-remove 0.3s ease-out forwards;
}

@keyframes inventory-remove {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-20px); height: 0; padding: 0; margin: 0; }
}

/* Item addition animation */
.inventory__item--new {
  animation: inventory-add 0.4s ease-out;
}

@keyframes inventory-add {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ========================================
 * 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 List (Content tab — read-only summary, #3969)
   Canonical management lives at /dm/worlds; profile shows truncated preview.
   ========================================== */

.profile-world-list {
  list-style: none;
  margin: 0 0 var(--profile-spacing-md) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-xs);
}

.profile-world-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--profile-spacing-sm) var(--profile-spacing-md);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--profile-card-radius);
}

.profile-world-list__name {
  font-weight: 600;
  color: var(--color-accent-purple);
}

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

.profile-world-list__status--published {
  background: rgba(152, 195, 121, 0.15);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.profile-world-list__status--draft {
  background: rgba(229, 192, 123, 0.15);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.profile-tab-section__action {
  margin-top: var(--profile-spacing-md);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================
   Activity Feed
   ========================================== */

.profile-activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--profile-spacing-sm);
}

.profile-activity-item {
  display: flex;
  gap: var(--profile-spacing-md);
  padding: var(--profile-spacing-md);
  background: var(--color-bg-elevated);
  border-radius: var(--profile-card-radius);
  border-left: 4px solid var(--color-border-default);
  transition: background var(--profile-transition), color var(--profile-transition);
}

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

.profile-activity-item--session { border-left-color: var(--color-accent-primary); }
.profile-activity-item--achievement { border-left-color: var(--color-accent-warning); }
.profile-activity-item--level-up { border-left-color: var(--color-accent-secondary); }
.profile-activity-item--combat { border-left-color: var(--color-accent-error); }

.profile-activity-item__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.profile-activity-item__content {
  flex: 1;
  min-width: 0;
}

.profile-activity-item__title {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  font-weight: 500;
}

.profile-activity-item__detail {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.profile-activity-item__time {
  flex-shrink: 0;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  padding: 4px 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

/* ==========================================
   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;
}
/*
 * Profile Calendar Tab
 * --------------------
 * Styles for app/views/profile/tabs/_calendar.html.erb
 * Extracted from inline <style> block (#3989) — verbatim move,
 * no token substitution. Token migration is a follow-up task.
 */

  .profile-calendar-links {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 8px;
  }

  .calendar-link-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .calendar-link-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
  }

  .calendar-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.15s;
  }

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

  .calendar-link-icon {
    font-size: 12px;
  }

  .calendar-link-campaign {
    font-size: 11px;
    padding: 3px 8px;
  }

  .calendar-link-more {
    font-size: 11px;
    color: var(--text-muted);
  }

  .profile-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .profile-session-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-elevated);
    border-radius: 6px;
    border-left: 3px solid var(--accent-primary);
  }

  .profile-session-link {
    color: var(--text-primary);
    text-decoration: none;
  }

  .profile-session-link:hover {
    color: var(--accent-primary);
  }

  .event-status-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
  }

  .event-status-draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
  }

  .event-status-ready {
    background: rgba(var(--accent-success-rgb, 34, 197, 94), 0.15);
    color: var(--accent-success, #22c55e);
  }

  .event-status-in_progress {
    background: rgba(var(--accent-warning-rgb, 234, 179, 8), 0.15);
    color: var(--accent-warning, #eab308);
  }

  .profile-calendar-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
  }

  @media (max-width: 768px) {
    .profile-calendar-layout {
      grid-template-columns: 1fr;
    }
  }

  .profile-calendar__mini {
    background: var(--bg-elevated);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid var(--border-color);
  }

  .mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .mini-cal-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    border-radius: 4px;
  }

  .mini-cal-nav:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .mini-cal-month {
    font-weight: 500;
    font-size: 14px;
  }

  .mini-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 8px;
  }

  .mini-cal-weekday {
    font-size: 10px;
    color: var(--text-muted);
    padding: 4px;
  }

  .mini-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .mini-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 50%;
    margin: 0 auto;
    cursor: default;
  }

  .mini-cal-day.other-month {
    color: var(--text-muted);
  }

  .mini-cal-day.today {
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-weight: 600;
  }

  .mini-cal-day.has-event {
    position: relative;
  }

  .mini-cal-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--accent-warning);
    border-radius: 50%;
  }

  .profile-calendar__events {
    min-width: 0;
  }

  .events-section-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
  }

  .profile-events-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .profile-event-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: 8px;
    border-left: 3px solid;
  }

  .profile-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
  }

  .event-day {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
  }

  .event-month {
    font-size: 10px;
    color: var(--text-secondary);
    text-transform: uppercase;
  }

  .profile-event-details {
    flex: 1;
    min-width: 0;
  }

  .profile-event-title {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
  }

  .profile-event-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-secondary);
  }

  .event-type-badge {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .event-campaign-badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
  }

  .profile-event-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 6px;
  }

  .profile-no-events {
    text-align: center;
    padding: 24px;
    color: var(--text-secondary);
    font-size: 13px;
  }

  .profile-no-events-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
  }

  .announcements-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }

  .announcements-header .events-section-title {
    flex: 1;
    margin-bottom: 0;
  }

  .announcements-view-all {
    font-size: 11px;
    color: var(--accent-primary);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 8px;
  }

  .announcements-view-all:hover {
    text-decoration: underline;
  }

  .profile-announcements-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }

  .profile-announcement-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
  }

  .profile-announcement-item:hover {
    background: var(--bg-elevated);
  }

  .announcement-date {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 50px;
  }

  .announcement-content {
    flex: 1;
    min-width: 0;
  }

  .announcement-title {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 4px;
  }

  .announcement-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }

  .announcement-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
  }

  .announcement-tag .announcement-tag-icon {
    display: inline-flex;
    width: 10px;
    height: 10px;
  }

  .announcement-tag .announcement-tag-icon svg {
    width: 10px;
    height: 10px;
  }

  .announcement-summary {
    font-size: 12px;
    color: var(--text-secondary);
  }

  .announcement-full {
    display: none;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .announcement-full strong {
    color: var(--text-primary);
  }

  .announcement-full code {
    background: var(--bg-primary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
  }

  .announcement-expand-icon {
    font-size: 16px;
    color: var(--text-muted);
    transition: transform 0.15s;
    align-self: center;
  }

  .profile-announcement-item.expanded .announcement-summary {
    display: none;
  }

  .profile-announcement-item.expanded .announcement-full {
    display: block;
  }

  .profile-announcement-item.expanded .announcement-expand-icon {
    transform: rotate(90deg);
  }
/**
 * Quest Log Panel
 * ===============
 * 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 — Dm Persona
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 110–225 (116 LOC)
 */

/* DM Persona Molecule - Context-based DM avatar + personality (merged) */
.dm-persona {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  cursor: pointer;
  position: relative;
  overflow: visible;
  /* Button reset for element change from div to button */
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Subtle glow effect on hover */
.dm-persona::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, transparent 0%, var(--persona-color, var(--color-accent-primary)) 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: -1;
}

.dm-persona:hover {
  background: var(--color-bg-hover);
}

.dm-persona:hover::before {
  opacity: 0.08;
}

.dm-persona:hover .dm-persona__avatar {
  transform: scale(1.02);
}

/* Guest state - non-interactive, cursor help for tooltip only */
.dm-persona--guest {
  cursor: help;
  opacity: 0.85;
}

.dm-persona--guest:hover {
  transform: none;
  background: var(--color-bg-tertiary);
}

.dm-persona--guest:hover::before {
  opacity: 0;
}

.dm-persona__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  image-rendering: pixelated; /* Keep pixel art crisp */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.dm-persona__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--persona-color, var(--color-text-primary));
}

/* Persona-specific accent borders */
.dm-persona[data-persona="guide"] {
  border-left: 2px solid var(--color-accent-warning);
}

.dm-persona[data-persona="mentor"] {
  border-left: 2px solid var(--color-accent-primary);
}

.dm-persona[data-persona="scribe"] {
  border-left: 2px solid var(--color-accent-purple);
}

.dm-persona[data-persona="narrator"] {
  border-left: 2px solid var(--color-accent-secondary);
}

.dm-persona[data-persona="arbiter"] {
  border-left: 2px solid var(--color-accent-error);
}

.dm-persona[data-persona="artificer"] {
  border-left: 2px solid var(--color-accent-warning);
}

.dm-persona[data-persona="merchant"] {
  border-left: 2px solid var(--color-accent-warning);
}

/* Responsive: hide name on small screens */
@media (max-width: 768px) {
  .dm-persona__name {
    display: none;
  }

  .dm-persona {
    padding: var(--space-1) var(--space-2);
  }
}

/*
 * Status Bar — Breadcrumb
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 226–422 (197 LOC)
 */

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.breadcrumb__separator {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  opacity: 0.6;
  flex-shrink: 0;
  user-select: none;
}

.breadcrumb__segment {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border: none;
  font-family: var(--font-family-mono);
  min-width: 0;
  transition: background var(--transition-fast);
}

/* Character/Identity Indicator */
.breadcrumb__segment--character {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
  gap: var(--space-2);
}

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

.breadcrumb__segment--character:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.breadcrumb__avatar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.breadcrumb__avatar {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.breadcrumb__avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
}

/* User Indicator (non-clickable) */
.breadcrumb__segment--user {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  cursor: default;
}

.breadcrumb__segment--campaign {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

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

.breadcrumb__segment--campaign:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.breadcrumb__segment--world {
  flex-shrink: 0;
  cursor: help;
  border-left: 1px solid var(--color-accent-primary);
}

.breadcrumb__segment--world:hover {
  background: var(--color-bg-hover);
}

.breadcrumb__segment--location {
  cursor: help;
  border-left: 1px solid var(--color-accent-success, #4ade80);
  min-width: 0;
}

.breadcrumb__segment--location:hover {
  background: var(--color-bg-hover);
}

.breadcrumb__segment--room {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

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

.breadcrumb__icon {
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.breadcrumb__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Campaign label - constrained width with ellipsis */
.breadcrumb__label--campaign {
  max-width: 180px;
}

@media (max-width: 1024px) {
  .breadcrumb__label--campaign {
    max-width: 120px;
  }
}

@media (max-width: 768px) {
  .breadcrumb__label--campaign {
    max-width: 100px;
  }
}

.breadcrumb__phase {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
  border-radius: var(--radius-sm);
  text-transform: capitalize;
  flex-shrink: 0;
}

.breadcrumb__room-wrapper {
  position: relative;
}

/* Mobile (<640px): collapse to rightmost segment only */
@media (max-width: 640px) {
  .breadcrumb__segment--campaign,
  .breadcrumb__segment--world,
  .breadcrumb__separator {
    display: none;
  }

  .breadcrumb__phase {
    display: none;
  }
}
/*
 * Status Bar — Room Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 424–766 (343 LOC)
 */

/* Room Indicator Molecule */
.room-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.room-indicator:hover {
  background: var(--color-bg-hover);
}

.room-indicator .room-icon {
  font-size: var(--font-size-lg);
}

.room-indicator .room-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

.room-indicator .room-type-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Room Menu - Clickable room indicator with dropdown */
.room-menu {
  position: relative;
}

.room-indicator--clickable {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.room-indicator--clickable:hover {
  border-color: var(--color-accent-primary);
}

.room-indicator--clickable:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* room-chevron styles consolidated in unified chevron section above */

.room-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  /* Enhanced shadow with subtle accent glow */
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  /* Smooth bounce easing for polish */
  transition: opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
}

.room-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Backdrop scrim when room menu is open */
.room-menu::before {
  content: '';
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-dropdown) - 1);
}

.room-menu:has(.room-menu__dropdown.open)::before {
  display: block;
}

/* Allow submenu flyout to overflow when open */
.room-menu__dropdown:has(.room-menu__submenu.open) {
  overflow-y: visible;
}

.room-menu__section {
  padding: var(--space-2) 0;
}

/* Wrapper for each submenu trigger + menu pair - provides positioning context */
.room-menu__submenu-wrapper {
  position: relative;
}

.room-menu__section-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.room-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;  /* WCAG touch target */
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
  position: relative;
  overflow: hidden;
}

/* Accent bar indicator for hover */
.room-menu__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent-primary);
  transform: scaleY(0);
  transition: transform var(--transition-fast);
}

.room-menu__item:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
}

.room-menu__item:hover:not(:disabled)::before {
  transform: scaleY(1);
}

.room-menu__item--current {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.room-menu__item--current::before {
  transform: scaleY(1);
  box-shadow: 0 0 6px var(--color-accent-primary);
}

.room-menu__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.room-menu__badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Soft badge for rooms requiring character selection */
.room-menu__badge--soft {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: calc(var(--font-size-xs) * 0.9);
  text-transform: none;
}

/* Subtle styling for rooms that need character selection */
.room-menu__item--needs-character {
  opacity: 0.85;
}

.room-menu__item--needs-character:hover {
  opacity: 1;
}

.room-menu__reason {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-warning-subtle, rgba(251, 191, 36, 0.2));
  color: var(--color-accent-warning);
  border: 1px solid var(--color-accent-warning);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* Campaign role badges */
.room-menu__role-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.room-menu__role-badge.role-badge--dm,
.room-menu__role-badge.role-badge--co_dm {
  background: var(--overlay-purple-subtle, rgba(139, 92, 246, 0.2));
  color: var(--color-accent-info, var(--color-accent-purple));
}

.room-menu__role-badge.role-badge--player {
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
}

/* Empty state for campaigns */
.room-menu__empty {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-style: italic;
  text-align: center;
}

.room-menu__divider {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-1) 0;
}

.room-menu__submenu-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;  /* WCAG touch target */
  cursor: pointer;
  transition: background var(--transition-fast);
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
}

.room-menu__submenu-trigger:hover {
  background: var(--color-bg-tertiary);
}

.room-menu__value {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.room-menu__submenu {
  display: none;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: calc(var(--z-dropdown) + 1);  /* Above parent dropdown */
}

.room-menu__submenu.open {
  display: block;
}

/* Desktop: submenu appears to the right */
@media (min-width: 641px) {
  .room-menu__submenu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: var(--space-2);
    min-width: 180px;
  }
}

/* Mobile: submenu appears inline below */
@media (max-width: 640px) {
  .room-menu__submenu {
    position: static;
    margin-top: var(--space-1);
    margin-bottom: var(--space-1);
  }
}

.room-menu__submenu .room-menu__item {
  font-size: var(--font-size-xs);
}

/* Mobile: Room menu centered */
@media (max-width: 640px) {
  .room-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
  }

  .room-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }

  /* Allow overflow when submenu is open so static submenu can display */
  .room-menu__dropdown:has(.room-menu__submenu.open) {
    overflow-y: visible;
  }
}
/*
 * Status Bar — Campaign Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 767–880 (114 LOC)
 */


/* Campaign Menu - Dropdown for campaign segment */
.campaign-menu {
  position: relative;
}

.breadcrumb__campaign-wrapper {
  position: relative;
}

/* campaign-chevron styles consolidated in unified chevron section above */

.campaign-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 200px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  transition: opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
}

.campaign-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Backdrop scrim when campaign menu is open */
.campaign-menu::before {
  content: '';
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-dropdown) - 1);
}

.campaign-menu:has(.campaign-menu__dropdown.open)::before {
  display: block;
}

.campaign-menu__section {
  padding: var(--space-2) 0;
}

.campaign-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
}

.campaign-menu__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-accent-primary);
  transform: scaleY(0);
  transition: transform var(--transition-fast);
}

.campaign-menu__item:hover {
  background: var(--color-bg-tertiary);
}

.campaign-menu__item:hover::before {
  transform: scaleY(1);
}

/* Mobile: Campaign menu centered */
@media (max-width: 640px) {
  .campaign-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .campaign-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Location Detail
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 881–929 (49 LOC)
 */

/* Location Detail - legacy standalone styles (now rendered as breadcrumb segment) */
.location-detail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 2px solid var(--color-accent-success, #4ade80);
  font-size: var(--font-size-sm);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.location-detail:hover {
  background: var(--color-bg-hover);
}

.location-detail__name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.location-detail__phase {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--overlay-success-subtle, rgba(74, 222, 128, 0.2));
  color: var(--color-accent-success, var(--color-accent-secondary));
  border-radius: var(--radius-sm);
  text-transform: capitalize;
}

/* Responsive: collapse location detail on small screens */
@media (max-width: 768px) {
  .location-detail__phase {
    display: none;
  }
}

@media (max-width: 480px) {
  .room-indicator .room-name {
    display: none;
  }

  .location-detail {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }
}
/*
 * Status Bar — World Indicator
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 930–949 (20 LOC)
 */


/* World Indicator Molecule */
.world-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: help;
  transition: background var(--transition-fast);
  border-left: 2px solid var(--color-accent-primary);
}

.world-indicator:hover {
  background: var(--color-bg-hover);
}

/*
 * Status Bar — World Menu Dropdown
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1135–1249 (115 LOC)
 */

/* World Menu Dropdown */
.world-menu {
  position: relative;
}

.world-indicator--clickable {
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.world-indicator--clickable:hover {
  border-color: var(--color-accent-primary);
}

.world-indicator--clickable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* world-chevron styles consolidated in unified chevron section above */

.world-menu__dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 220px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: color var(--timing-fast) var(--ease-out), opacity var(--timing-fast) var(--ease-out), transform var(--timing-fast) var(--ease-out), box-shadow var(--timing-fast) var(--ease-out);
}

.world-menu__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.world-menu__section {
  padding: var(--space-2) 0;
}

.world-menu__section-title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.world-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.world-menu__item:hover {
  background: var(--color-bg-tertiary);
}

.world-menu__item--current {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.world-menu__badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Mobile: Center world menu dropdown */
@media (max-width: 640px) {
  .world-menu__dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .world-menu__dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Character Info
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1250–1364 (115 LOC)
 */

/* Character Info Molecule */
.status-bar .character-info {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.status-bar .character-name {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
}

.status-bar .hp-display {
  color: var(--color-hp-full);
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

.status-bar .hp-display.low {
  color: var(--color-hp-mid);
}

.status-bar .hp-display.critical {
  color: var(--color-hp-low);
}

/* HP change animations (cross-panel sync) */
.status-bar .hp-display.hp-damaged {
  animation: status-hp-damage 1.5s ease;
}

.status-bar .hp-display.hp-healed {
  animation: status-hp-heal 1.5s ease;
}

@keyframes status-hp-damage {
  0%, 100% {
    text-shadow: none;
  }
  25%, 75% {
    color: var(--color-accent-error);
    text-shadow: 0 0 8px var(--overlay-error-glow, rgba(239, 68, 68, 0.6));
  }
}

@keyframes status-hp-heal {
  0%, 100% {
    text-shadow: none;
  }
  25%, 75% {
    color: var(--color-accent-secondary);
    text-shadow: 0 0 8px var(--overlay-success-glow, rgba(34, 197, 94, 0.6));
  }
}

/* ============================================
 * Enhanced Visual Hierarchy (#4380, #4391)
 * Makes critical info (HP, character name) more scannable.
 * Uses design tokens throughout — no raw rgba hex.
 * ============================================ */

/* Enhanced character info container */
.status-bar .character-info {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-muted, rgba(90, 159, 216, 0.3));
  border-radius: var(--radius-md);
  box-shadow: 0 0 8px var(--color-accent-subtle, rgba(90, 159, 216, 0.1));
}

/* Make character name more prominent */
.status-bar .character-name {
  font-size: var(--font-size-md);
  text-shadow: 0 0 6px var(--color-accent-subtle, rgba(90, 159, 216, 0.3));
}

/* Enhanced HP display with stat cell styling */
.status-bar .hp-display {
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
}

/* Progressive HP warning states with enhanced visuals */
.status-bar .hp-display.low {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.25);
}

.status-bar .hp-display.critical {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
  animation: critical-hp-pulse 1.5s ease-in-out infinite;
}

@keyframes critical-hp-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
  }
  50% {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.6);
  }
}

/* Secondary stats (AC, Level) get muted treatment */
.status-bar .character-info [data-status-bar-target="acDisplay"],
.status-bar .character-info [data-status-bar-target="levelDisplay"] {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  opacity: 0.85;
}

/*
 * Status Bar — Lock Status
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1365–1414 (50 LOC)
 */

/* Lock Status Molecule - Icon-only display with tooltip */
.lock-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: help;
  transition: background var(--transition-fast);
}

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

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

.lock-status .lock-text {
  /* Hidden by default - icon + tooltip is sufficient */
  display: none;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lock-status[data-locked="true"] {
  color: var(--color-accent-warning);
}

.lock-status[data-locked="false"] {
  /* Hide lock status when character is editable (not locked) */
  display: none;
}

/* ============================================
 * Simplified Status Bar (User Feedback Round 3)
 * Hide all character stats - available in character sheet panel
 * Status bar focuses on navigation and system info only
 * ============================================ */

/* Hide entire character-info section - all stats in character sheet panel */
.status-bar .character-info {
  display: none;
}

/*
 * Status Bar — Difficulty Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1529–1665 (137 LOC)
 */

/* Difficulty Menu Container */
.difficulty-menu {
  position: relative;
}

/* Difficulty Indicator Molecule */
.difficulty-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

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

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

.difficulty-indicator .difficulty-icon {
  font-size: var(--font-size-md);
}

.difficulty-indicator .difficulty-name {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* difficulty-chevron styles consolidated in unified chevron section above */

.difficulty-indicator[data-difficulty="story"] {
  color: var(--color-accent-secondary);
}

.difficulty-indicator[data-difficulty="balanced"] {
  color: var(--color-text-secondary);
}

.difficulty-indicator[data-difficulty="challenging"] {
  color: var(--color-accent-warning);
}

.difficulty-indicator[data-difficulty="hardcore"] {
  color: var(--color-accent-danger, #dc3545);
}

/* Difficulty Dropdown */
.difficulty-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 280px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background var(--timing-fast) var(--ease-out), color var(--timing-fast) var(--ease-out), border-color var(--timing-fast) var(--ease-out), opacity var(--timing-fast) var(--ease-out);
  padding: var(--space-2) 0;
}

.difficulty-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.difficulty-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast);
}

.difficulty-option:hover:not(.active) {
  background: var(--color-bg-tertiary);
}

.difficulty-option.active {
  background: var(--color-bg-hover);
  border-left: 3px solid var(--color-accent-primary);
}

.difficulty-option-icon {
  display: inline;
}

.difficulty-option-name {
  font-weight: var(--font-weight-medium);
}

.difficulty-option-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Mobile: Center difficulty dropdown */
@media (max-width: 640px) {
  .difficulty-dropdown {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    max-width: 90vw;
  }

  .difficulty-dropdown.open {
    transform: translateX(-50%) translateY(0);
  }
}

/*
 * Status Bar — Toolbar
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 950–1134 (185 LOC)
 */

/* ========================================
 * Toolbar Icon Buttons (Unified Style)
 * Help, Feedback, and other icon-only toolbar buttons
 * ======================================== */

.toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  /* #4391: --color-text-primary for WCAG AA contrast on dark button bg */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

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

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

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

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

/* Spectator Mode Indicator */
.spectator-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  border: 1px solid var(--color-info, #3b82f6);
  border-radius: var(--radius-full);
  color: var(--color-info, #3b82f6);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.spectator-indicator .svg-icon {
  width: 12px;
  height: 12px;
}

.spectator-indicator__label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 640px) {
  .spectator-indicator__label {
    display: none;
  }
}

.help-icon-btn,
.feedback-icon-btn,
.panels-icon-btn,
.hologram-toggle-btn,
.xr-mode-btn,
.friends-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  /* #4391: raised from --color-text-secondary (#a0a0a0, ~2.8:1 on bg-tertiary)
     to --color-text-primary (#e0e0e0, ~9.2:1) for WCAG AA icon contrast. */
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  /* #3882: include transform so :active scale(0.95) eases, not snaps. */
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* B8: 44x44 touch targets on coarse-pointer mid-viewport (mobile/tablet, not phone-sized) */
@media (pointer: coarse) and (min-width: 481px) {
  .help-icon-btn, .feedback-icon-btn, .panels-icon-btn,
  .hologram-toggle-btn, .xr-mode-btn, .ghost-toggle-btn,
  .friends-icon-btn, .focus-mode-toggle {
    min-width: 44px; min-height: 44px;
  }
}

.help-icon-btn .svg-icon,
.feedback-icon-btn .svg-icon,
.panels-icon-btn .svg-icon,
.hologram-toggle-btn .svg-icon,
.xr-mode-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.help-icon-btn:hover,
.feedback-icon-btn:hover,
.panels-icon-btn:hover,
.hologram-toggle-btn:hover,
.xr-mode-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.help-icon-btn:focus-visible,
.feedback-icon-btn:focus-visible,
.panels-icon-btn:focus-visible,
.hologram-toggle-btn:focus-visible,
.xr-mode-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.help-icon-btn:active,
.feedback-icon-btn:active,
.panels-icon-btn:active,
.hologram-toggle-btn:active,
.xr-mode-btn:active {
  transform: scale(0.95);
}

/* B2: Sighted on-state for hologram toggle (aria-pressed reflective) */
.hologram-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Panels button first-visit hint dot */
.panels-icon-btn {
  position: relative;
}

.panels-icon-btn--new::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: var(--color-accent-primary, #7c3aed);
  border-radius: 50%;
  animation: panels-hint-pulse 2s ease-in-out infinite;
}

@keyframes panels-hint-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}

/* Ghost toggle styles extracted to terminal/components/_ghost_toggle.css (#3870)
 * to keep this organism file under the size cap. */

.world-indicator .world-icon {
  font-size: var(--font-size-md);
}

.world-indicator .world-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Status Bar — Session Menu
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1666–1853 (188 LOC)
 */

/* Session Menu Molecule (Dropdown) */
.session-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

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

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

.session-menu-btn .session-title {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* session-menu chevron styles consolidated in unified chevron section above */

.session-menu-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 180px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.session-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.session-menu-dropdown .menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.session-menu-dropdown .menu-item:first-child {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.session-menu-dropdown .menu-item:last-child {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.session-menu-dropdown .menu-item:hover {
  background: var(--color-bg-hover);
}

.session-menu-dropdown .menu-icon {
  width: 16px;
  text-align: center;
  color: var(--color-accent-primary);
  font-family: var(--font-family-mono);
}

.session-menu-dropdown .menu-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-1) 0;
}

/* Submenu for difficulty selection */
.menu-submenu {
  position: relative;
}

.menu-submenu .menu-item {
  justify-content: space-between;
}

.menu-submenu .submenu-chevron {
  opacity: 0.6;
  margin-left: auto;
}

.submenu-dropdown {
  position: absolute;
  right: calc(100% + var(--space-1));
  top: 0;
  min-width: 140px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
  z-index: calc(var(--z-dropdown) + 1);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.submenu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.submenu-dropdown .menu-item.active {
  background: var(--color-bg-hover);
  color: var(--color-accent-primary);
}

.submenu-dropdown .menu-item.active::before {
  content: '✓';
  position: absolute;
  right: var(--space-2);
  font-size: var(--font-size-xs);
}

/* Highlighted menu item - for CTAs like "Get Full Access" */
.menu-item--highlight {
  background: linear-gradient(135deg, var(--overlay-purple-subtle, rgba(139, 92, 246, 0.15)), var(--overlay-indigo-subtle, rgba(99, 102, 241, 0.1)));
  color: var(--color-accent-purple);
  border-left: 3px solid var(--color-accent-purple);
  font-weight: var(--font-weight-semibold);
}

.menu-item--highlight:hover {
  background: linear-gradient(135deg, var(--overlay-purple-medium, rgba(139, 92, 246, 0.25)), var(--overlay-indigo-medium, rgba(99, 102, 241, 0.2)));
  color: var(--color-accent-purple-light, var(--color-accent-purple));
}

.menu-item--highlight .menu-icon {
  color: var(--color-accent-purple);
}

/* Badge for menu items (e.g., unread announcements) */
.menu-badge {
  display: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

.menu-badge[data-count]:not([data-count=""]):not([data-count="0"]) {
  display: inline-block;
}

.session-clock {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/*
 * Status Bar — Dm Mode Toggle
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1854–1936 (83 LOC)
 */

/* Help Icon Button - styles consolidated above in toolbar-icon-btn section */

/* DM Mode Toggle Button */
.dm-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-left: var(--space-2);
}

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

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

.dm-mode-toggle__icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast);
}

.dm-mode-toggle__label {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Active state - DM Mode is ON */
.dm-mode-toggle--active {
  background: linear-gradient(135deg, var(--overlay-warning-subtle, rgba(251, 191, 36, 0.2)), var(--overlay-warning-subtle-alt, rgba(245, 158, 11, 0.15)));
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
  box-shadow: 0 0 12px var(--overlay-warning-glow, rgba(251, 191, 36, 0.3));
}

.dm-mode-toggle--active:hover {
  background: linear-gradient(135deg, var(--overlay-warning-medium, rgba(251, 191, 36, 0.3)), var(--overlay-warning-medium-alt, rgba(245, 158, 11, 0.25)));
  box-shadow: 0 0 16px var(--overlay-warning-glow-strong, rgba(251, 191, 36, 0.4));
}

.dm-mode-toggle--active .dm-mode-toggle__icon {
  animation: dm-crown-pulse 2s ease-in-out infinite;
}

@keyframes dm-crown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive: hide label on small screens */
@media (max-width: 768px) {
  .dm-mode-toggle__label {
    display: none;
  }

  .dm-mode-toggle {
    padding: var(--space-1) var(--space-2);
  }
}

@media (max-width: 480px) {
  .dm-mode-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
  }
}

/*
 * Status Bar — Modes
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 1937–2220 (284 LOC)
 */

/* ==================================================
   GUIDED MODE TOGGLE
   ================================================== */

.guided-mode-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-left: var(--space-2);
}

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

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

.guided-mode-toggle__icon {
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast);
}

.guided-mode-toggle__label {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Active state - Guided Mode is ON */
.guided-mode-toggle--active {
  background: linear-gradient(135deg, var(--overlay-primary-subtle, rgba(139, 92, 246, 0.2)), var(--overlay-primary-subtle-alt, rgba(124, 58, 237, 0.15)));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  box-shadow: 0 0 12px var(--overlay-primary-glow, rgba(139, 92, 246, 0.3));
}

.guided-mode-toggle--active:hover {
  background: linear-gradient(135deg, var(--overlay-primary-medium, rgba(139, 92, 246, 0.3)), var(--overlay-primary-medium-alt, rgba(124, 58, 237, 0.25)));
  box-shadow: 0 0 16px var(--overlay-primary-glow-strong, rgba(139, 92, 246, 0.4));
}

.guided-mode-toggle--active .guided-mode-toggle__icon {
  animation: guided-book-pulse 2s ease-in-out infinite;
}

@keyframes guided-book-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Responsive: hide label on small screens */
@media (max-width: 768px) {
  .guided-mode-toggle__label {
    display: none;
  }

  .guided-mode-toggle {
    padding: var(--space-1) var(--space-2);
  }
}

@media (max-width: 480px) {
  .guided-mode-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
    justify-content: center;
  }
}

/* Hover states only on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .feedback-icon-btn:hover {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--overlay-secondary-glow, rgba(96, 165, 250, 0.3));
  }

  .help-icon-btn:hover {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(1.05);
    box-shadow: 0 2px 8px var(--overlay-accent-glow, rgba(139, 92, 246, 0.3));
  }

  .session-menu-btn:hover {
    background: var(--color-bg-hover);
  }

  .menu-item:hover {
    background: var(--color-bg-hover);
    color: var(--color-accent-primary);
  }
}

/* Touch devices: Show feedback on tap */
@media (hover: none), (pointer: coarse) {
  .feedback-icon-btn:active {
    border-color: var(--color-accent-secondary);
    color: var(--color-accent-secondary);
    transform: scale(0.95);
  }

  .help-icon-btn:active {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
    transform: scale(0.95);
  }

  .menu-item:active {
    background: var(--color-bg-hover);
  }
}

/* Mobile HP Pill — extracted to molecules/_mobile_hp_pill.css */

/* #2090: Hide "Menu" text label on all mobile viewports, keep just the icon.
   Saves ~40px of horizontal space in the status bar. */
@media (max-width: 767px) {
  .session-title {
    display: none;
  }

  .session-menu-btn {
    padding: var(--space-1) var(--space-2);
  }
}

/* Mobile bottom-sheet mode: compact status bar (28px) */
@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .status-bar {
    height: 28px;
    min-height: 28px;
    padding: 2px 8px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* Hide secondary actions zone items except session menu and token status.
     Token status kept visible for guest users to see remaining budget (#1286). */
  .mobile-bottom-sheet-mode .status-bar__zone--actions .toolbar-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .help-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .feedback-icon-btn,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .difficulty-menu,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .dm-mode-toggle,
  .mobile-bottom-sheet-mode .status-bar__zone--actions .guided-mode-toggle {
    display: none;
  }

  /* Compact breadcrumb segments */
  .mobile-bottom-sheet-mode .breadcrumb__segment {
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
  }

  .mobile-bottom-sheet-mode .dm-persona__avatar {
    width: 22px;
    height: 22px;
  }
}

/* Tablet/small screens: hide lowest-priority toolbar buttons */
@media (max-width: 640px) {
  /* Hide nice-to-have buttons; keep menu, settings, focus mode */
  .hologram-toggle-btn,
  .xr-mode-btn,
  .ghost-toggle-btn,
  .shell-selector {
    display: none;
  }

  /* Collapse spectator label to icon-only */
  .spectator-indicator__label {
    display: none;
  }
}

/* Mobile: Compact 28px status bar - icons only on small screens */
@media (max-width: 480px) {
  .status-bar {
    height: 28px;
    min-height: 28px;
    padding: 2px 6px;
    gap: 4px;
    flex-wrap: nowrap;
    overflow: hidden;
  }

  /* AGGRESSIVE: Hide secondary elements entirely.
     NOTE: .token-status widget was removed in #4267; milestone display
     now lives elsewhere. */
  .location-detail,
  .world-indicator,
  .lock-status,
  .difficulty-menu,
  .feedback-icon-btn,
  .help-icon-btn,
  .friends-icon-btn,
  .hologram-toggle-btn,
  .xr-mode-btn,
  .ghost-toggle-btn,
  .shell-selector,
  .session-clock {
    display: none;
  }

  /* Hide text labels, show icons only */
  .room-name,
  .room-type-badge,
  .dm-persona__name,
  .difficulty-name,
  .lock-text {
    display: none;
  }

  /* Character info: keep name and HP only */
  .status-bar .character-info [data-status-bar-target="acDisplay"],
  .status-bar .character-info [data-status-bar-target="levelDisplay"] {
    display: none;
  }

  /* Compact icons for 28px bar */
  .room-icon,
  .world-icon,
  .difficulty-icon,
  .lock-icon {
    font-size: var(--font-size-md);
  }

  /* Character info: keep name, condense stats */
  .character-info {
    gap: 6px;
    font-size: var(--font-size-xs);
  }

  /* Session menu: icon only */
  .session-title {
    display: none;
  }

  .session-menu-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 4px;
  }

  /* Panel tab dropdown trigger: compact for 28px */
  .panel-tab-dropdown__trigger-label {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-tab-dropdown__chevron {
    width: 8px;
    height: 8px;
  }
}

/* Focus-mode toggle styles extracted to terminal/components/_focus_mode_toggle.css
 * to keep this organism file under the size cap. */

/*
 * Status Bar — Focus Mode
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2221–2372 (152 LOC)
 */

/* ========================================
 * Focus Mode Active State
 * Hides most UI for distraction-free reading
 * ======================================== */

.terminal-container--focus-mode .status-bar {
  height: 32px;
  padding: 2px 8px;
}

.terminal-container--focus-mode .status-bar > *:not(.session-menu):not(.focus-mode-toggle) {
  display: none;
}

.terminal-container--focus-mode .mobile-panel-switcher {
  display: none;
}

/* ========================================
 * Mobile Dropdowns: Bottom Sheet Style (Polish Priority 4.1)
 * Native mobile app feel with slide-up animation
 * ======================================== */
@media (max-width: 640px) {
  /* Session menu as bottom sheet on mobile */
  .session-menu-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    padding-bottom: 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .session-menu-dropdown.open {
    transform: translateY(0);
  }

  /* Add drag handle indicator */
  .session-menu-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 12px auto 16px;
    opacity: 0.6;
  }

  /* Larger touch targets for session menu on mobile */
  .session-menu-dropdown .menu-item {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  /* Settings submenu: bottom sheet style on mobile */
  .submenu-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .submenu-dropdown.open {
    transform: translateY(0);
  }

  /* Add a handle indicator for bottom sheet */
  .submenu-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 8px auto 12px;
    opacity: 0.6;
  }

  /* Larger touch targets for submenu items on mobile */
  .submenu-dropdown .menu-item {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  .submenu-dropdown .submenu-section-title {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
  }

  /* Difficulty dropdown as bottom sheet on mobile */
  .difficulty-dropdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: translateY(100%);
    max-width: 100vw;
    max-height: 70vh;
    overflow-y: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    padding-bottom: 16px;
    padding-bottom: env(safe-area-inset-bottom, 16px);
    box-shadow:
      0 -4px 12px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(124, 58, 237, 0.2);
    transition: transform var(--timing-normal) var(--ease-in-out);
  }

  .difficulty-dropdown.open {
    transform: translateY(0);
  }

  .difficulty-dropdown::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--color-border-default);
    border-radius: 2px;
    margin: 12px auto 16px;
    opacity: 0.6;
  }
}

/*
 * Status Bar — Death Banner
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2373–2461 (89 LOC)
 */

/* ========================================
 * Death/Unconscious Banner
 * ======================================== */

.death-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: linear-gradient(135deg, var(--overlay-danger-medium, rgba(220, 38, 38, 0.25)), var(--overlay-danger-subtle, rgba(185, 28, 28, 0.2)));
  border: 2px solid var(--color-accent-danger, var(--color-accent-error));
  border-radius: var(--radius-md);
  color: var(--color-accent-danger, var(--color-accent-error));
  font-family: var(--font-family-mono);
  animation: death-banner-pulse 2s ease-in-out infinite;
}

.death-banner--visible {
  display: flex;
}

.death-banner[hidden] {
  display: none;
}

.death-banner__icon {
  font-size: var(--font-size-xl);
  animation: death-icon-shake var(--timing-slow) ease-in-out;
}

.death-banner__text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.death-banner__saves {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  opacity: 0.9;
}

.death-banner__successes {
  color: var(--color-accent-success, var(--color-accent-secondary));
}

.death-banner__failures {
  color: var(--color-accent-danger, var(--color-accent-error));
}

@keyframes death-banner-pulse {
  0%, 100% {
    box-shadow: 0 0 8px var(--overlay-danger-glow, rgba(220, 38, 38, 0.3));
  }
  50% {
    box-shadow: 0 0 16px var(--overlay-danger-glow-strong, rgba(220, 38, 38, 0.6));
  }
}

@keyframes death-icon-shake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

/* Mobile: death banner spans full width */
@media (max-width: 640px) {
  .death-banner {
    position: fixed;
    top: var(--status-bar-height, 48px);
    left: 0;
    right: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    justify-content: center;
    z-index: calc(var(--z-dropdown) / 2); /* Below dropdowns, above content */
    padding: var(--space-2);
  }

  .death-banner__text {
    font-size: var(--font-size-xs);
  }
}

/*
 * Status Bar — Status Widgets
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2462–2543 (82 LOC)
 */

/* Status Widget Container — dynamic widgets registered by panels.
 * Status-zone wrappers live in components/_status_zones.css (#3882). */

.status-widget-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.status-widget-container:empty {
  display: none;
}

/* Individual status widgets */
.status-widget {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  cursor: pointer;
}

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

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

.status-widget__label {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.status-widget__value {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
}

/* Widget variants */
.status-widget--combat {
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.status-widget--combat:hover {
  border-color: var(--color-accent-warning);
  box-shadow: 0 0 8px var(--overlay-warning-glow, rgba(251, 191, 36, 0.3));
}

.status-widget--danger {
  border-color: var(--color-accent-error);
  color: var(--color-accent-error);
}

.status-widget--danger:hover {
  border-color: var(--color-accent-error);
  box-shadow: 0 0 8px var(--overlay-error-glow, rgba(239, 68, 68, 0.3));
}

.status-widget--success {
  border-color: var(--color-accent-success, var(--color-accent-secondary));
  color: var(--color-accent-success, var(--color-accent-secondary));
}

/* Mobile: hide widgets to save space */
@media (max-width: 640px) {
  .status-widget-container {
    display: none;
  }
}

/*
 * Status Bar — Panel Tab Dropdown
 * Extracted from terminal/organisms/_status_bar.css (#4252)
 * Source lines 2544–2685 (142 LOC)
 */

/* ============================================================
   Panel Tab Dropdown — status bar dropdown to switch right panel
   ============================================================ */

.breadcrumb__panel-tab-wrapper {
  position: relative;
}

.breadcrumb__segment--panel-tab {
  cursor: pointer;
  border: 1px solid transparent;
  color: var(--color-accent-primary);
  flex-shrink: 0;
  gap: var(--space-2);
}

.breadcrumb__segment--panel-tab:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.breadcrumb__segment--panel-tab:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.panel-tab-dropdown__trigger-icon {
  display: flex;
  align-items: center;
}

.panel-tab-dropdown__trigger-icon svg {
  width: 14px;
  height: 14px;
}

.panel-tab-dropdown__trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.panel-tab-dropdown__chevron {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform var(--timing-fast), opacity var(--timing-fast);
}

.panel-tab-dropdown:has(.panel-tab-dropdown__menu.open) .panel-tab-dropdown__chevron {
  opacity: 0.9;
  transform: rotate(180deg);
}

.panel-tab-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 180px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px); /* #3882 standardized open animation */
  transform-origin: top left;
  transition: background var(--timing-fast) var(--ease-spring), color var(--timing-fast) var(--ease-spring), border-color var(--timing-fast) var(--ease-spring), opacity var(--timing-fast) var(--ease-spring), transform var(--timing-fast) var(--ease-spring);
  padding: var(--space-1) 0;
}

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

.panel-tab-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--timing-instant);
}

.panel-tab-dropdown__item:hover {
  background: var(--color-bg-hover);
}

.panel-tab-dropdown__item-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.panel-tab-dropdown__item-icon svg {
  width: 16px;
  height: 16px;
}

.panel-tab-dropdown__item-label {
  flex: 1;
}

.panel-tab-dropdown__item--highlight {
  color: var(--color-accent-primary);
  font-weight: bold;
}

.panel-tab-dropdown__divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-1) 0;
}

/* Danger modifier — destructive items (Reset Session) in warning colour */
.panel-tab-dropdown__item--danger {
  color: var(--color-accent-error, #cf6068);
}

.panel-tab-dropdown__item--danger:hover {
  background: rgba(207, 96, 104, 0.12);
  color: var(--color-accent-error, #cf6068);
}

.panel-tab-dropdown__item--danger .panel-tab-dropdown__item-icon {
  color: var(--color-accent-error, #cf6068);
}

/* Session More — collapsible sub-section for session management controls
   (#4391: hides Reset Session / New Session Tab behind one extra click) */
.panel-tab-dropdown__session-more {
  list-style: none;
}

.panel-tab-dropdown__session-more summary {
  list-style: none;
  cursor: pointer;
}

.panel-tab-dropdown__session-more summary::-webkit-details-marker {
  display: none;
}

.panel-tab-dropdown__session-more summary::marker {
  content: '';
}

.panel-tab-dropdown__session-more-toggle {
  justify-content: flex-start;
}

.panel-tab-dropdown__session-more-chevron {
  margin-left: auto;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform var(--timing-fast);
}

.panel-tab-dropdown__session-more[open] .panel-tab-dropdown__session-more-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

.panel-tab-dropdown__session-more-body {
  padding-left: var(--space-2);
  border-left: 2px solid var(--color-border-subtle);
  margin: var(--space-1) var(--space-2);
}

/* Mobile: full-width dropdown */
@media (max-width: 640px) {
  .panel-tab-dropdown__menu {
    position: fixed;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 36px;
    min-width: 200px;
  }

  .panel-tab-dropdown__menu.open {
    transform: translateX(-50%) translateY(0);
  }
}
/*
 * Status Bar Organism — Import Hub
 * ================================
 * Top-level status display showing room, character, lock state, and session info.
 * Uses design tokens from: terminal/_tokens.css
 *
 * Decomposed into focused files under status_bar/ for maintainability (#4252).
 * This parent retains only the cross-cutting container, chevron, and zone styles
 * shared by every sub-area; everything else lives in a sibling file.
 *
 * IMPORTANT: Sprockets `*= require` directives are only honored inside the
 * leading comment block (before any CSS rule). When the sub-area requires
 * lived at the bottom of this file (post-decomposition #4252), they were
 * silently ignored — the dropdown / room-menu / panel-tab-dropdown / session-
 * menu styles never made it into production CSS for ~2 days, which is why the
 * room dropdown rendered as always-visible (no `opacity: 0; visibility: hidden`
 * baseline). Keep these directives in this header comment.
 *


















 */

/* ========================================
 * Status Bar Container
 * ======================================== */

.status-bar {
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--status-bar-padding);
  /* iOS safe area support for iPhone notch */
  /* Use fallback pattern for SassC compatibility */
  padding-top: 8px;
  padding-top: env(safe-area-inset-top, 8px);
  padding-left: 16px;
  padding-left: env(safe-area-inset-left, 16px);
  padding-right: 16px;
  padding-right: env(safe-area-inset-right, 16px);
  height: var(--status-bar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-3);
}

/* ========================================
 * Dropdown Chevrons (Unified Subtle Style)
 * All dropdown indicators use this base style
 * ======================================== */

.room-chevron,
.campaign-chevron,
.world-chevron,
.difficulty-chevron,
.session-menu-btn .chevron-icon,
.menu-submenu .submenu-chevron {
  opacity: 0.35;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

/* Show chevrons on hover */
.breadcrumb__segment:hover .room-chevron,
.breadcrumb__segment:hover .campaign-chevron,
.world-indicator:hover .world-chevron,
.difficulty-indicator:hover .difficulty-chevron,
.session-menu-btn:hover .chevron-icon,
.menu-submenu:hover .submenu-chevron {
  opacity: 0.7;
}

/* Rotate chevrons when dropdown is open */
.room-menu:has(.room-menu__dropdown.open) .room-chevron,
.campaign-menu:has(.campaign-menu__dropdown.open) .campaign-chevron,
.world-menu:has(.world-menu__dropdown.open) .world-chevron,
.difficulty-menu:has(.difficulty-dropdown.open) .difficulty-chevron,
.session-menu:has(.session-menu-dropdown.open) .chevron-icon {
  opacity: 0.9;
  transform: rotate(180deg);
}

/* ========================================
 * Status Bar Zones (3-zone layout)
 * Zone 1 (nav): Identity + breadcrumb navigation
 * Zone 2 (status): Dynamic widgets, party badges
 * Zone 3 (actions): Toolbar buttons + session menu
 * ======================================== */

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

.status-bar__zone--nav {
  flex: 1;
  min-width: 0; /* Allow truncation */
}

.status-bar__zone--status {
  flex-shrink: 0;
}

.status-bar__zone--actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* #4447: Right zone — wraps character info + toolbar icons into one desktop row.
   On desktop: character info sits left of toolbar icons in a single flex row.
   On mobile (≤768px): character info is hidden via JS; only toolbar icons show. */
.status-bar__zone--right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* #2092: On narrow viewports, allow actions zone to shrink and clip overflow
   so it doesn't push past the right edge (observed ~29px overflow on 390px). */
@media (max-width: 480px) {
  .status-bar__zone--actions {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
}

/* Mobile (≤768px): hide character info inside zone--right; mobile-hp-pill
   in the breadcrumb zone provides compact health display instead.
   Also allow zone--right to shrink on narrow viewports. */
@media (max-width: 768px) {
  .status-bar__zone--right .character-info {
    display: none !important;
  }

  .status-bar__zone--right {
    flex-shrink: 1;
    min-width: 0;
  }
}

/* Mobile: collapse status zone */
@media (max-width: 640px) {
  .status-bar__zone--status {
    display: none;
  }
}

/* Sub-area imports moved to the leading comment header (Sprockets only honors
 * directives there). See file header for the full list. */
/*
 * Narrative Panel: Layout
 * =======================
 * Container structure, filter bar, and scrollable output area.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Narrative Panel Content Container
 * ======================================== */

.narrative-panel-content {
  display: flex;
  flex-direction: row;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  background: var(--color-bg-primary);
  position: relative;
}

/*
 * Override parent overflow:auto so the narrative panel handles its own
 * scrolling internally (via narrative-output overflow-y:auto).
 */
.split-panel__content:has(.narrative-panel-content) {
  overflow: hidden;
}

/* Main content area (takes remaining space after sidebar) */
.narrative-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* ========================================
 * Narrative Filter Bar
 * ======================================== */

.narrative-filters {
  display: flex;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* #2574: Mobile — horizontal swipe/scroll for tab row (Combat/Dialogue clipped at 320px).
 * Specificity 0,2,0 beats sibling `.narrative-filters` rules in _turn_queue.css
 * and any earlier mobile declarations that get clobbered by later cascade layers.
 * scroll-snap-type keeps tabs aligned at their edges; -webkit-overflow-scrolling gives
 * iOS momentum; scrollbar is hidden visually but swipe remains functional.
 *
 * #2638: Also reserve right-side padding so the fixed hamburger menu (40×40 at
 * top/right space-2) doesn't overlap the last scroll-snapped tab. Add a visual
 * right-edge fade to signal that more tabs exist past the visible edge. */
@media (max-width: 767px) {
  .narrative-panel-content .narrative-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Reserve ~56px on the right so the fixed hamburger (40px + space-2 margin)
       doesn't clip the rightmost tab. Use scroll-padding so scroll-snap respects
       the reserved zone. Base padding preserved via var(--space-3). */
    padding-right: calc(var(--space-3) + 56px);
    scroll-padding-right: 56px;
    /* Right-edge fade affordance — signals horizontal scrollability.
       Rendered via mask-image so content underneath remains interactive. */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  }

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

  .narrative-panel-content .narrative-filters .nf-btn {
    flex-shrink: 0;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}

.nf-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nf-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  color: var(--color-text-primary);
  border-color: rgba(255, 215, 0, 0.2);
}

.nf-btn.nf-active {
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold);
  border-color: rgba(255, 215, 0, 0.3);
}

.nf-btn svg {
  width: 12px;
  height: 12px;
}

/* Dynamic filter buttons (Discoveries, Personal) */
.nf-btn.nf-dynamic {
  gap: 3px;
}

.nf-btn.nf-dynamic .nf-icon {
  font-size: var(--font-size-xs);
  line-height: 1;
}

.nf-btn.nf-dynamic .nf-label {
  font-size: var(--font-size-xs);
}

/* Count badge for dynamic filters */
.nf-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold);
  border-radius: var(--radius-sm);
  margin-left: 2px;
}

.nf-btn.nf-active .nf-count {
  background: var(--overlay-white-medium);
  color: inherit;
}

.nf-count:empty {
  display: none;
}

/* Discoveries filter - blue theme (perception) */
.nf-btn[data-filter="discoveries"].nf-active {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.nf-btn[data-filter="discoveries"].nf-active .nf-count {
  background: rgba(59, 130, 246, 0.3);
}

/* Personal filter - purple theme (character-specific) */
.nf-btn[data-filter="personal"].nf-active {
  background: rgba(147, 51, 234, 0.15);
  color: #c084fc;
  border-color: rgba(147, 51, 234, 0.3);
}

.nf-btn[data-filter="personal"].nf-active .nf-count {
  background: rgba(147, 51, 234, 0.3);
}

/* ========================================
 * Narrative Output (scrollable story area)
 * ======================================== */

.narrative-output {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--narrative-padding) var(--space-6);
  background: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-narrative);
  color: var(--color-text-primary);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.2) rgba(0, 0, 0, 0.15);
}

.narrative-output::-webkit-scrollbar {
  width: 8px;
}

.narrative-output::-webkit-scrollbar-track {
  background: var(--overlay-light);
  border-radius: var(--radius-sm);
}

.narrative-output::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.25);
  border-radius: var(--radius-sm);
}

.narrative-output::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.4);
}
/*
 * Narrative Panel: Entry Base
 * ============================
 * Base narrative entry styles, actions (copy, bookmark, TTS),
 * channel config hover icon, and channel config popover.
 */

/* ========================================
 * Narrative Entry Base Styles
 * ======================================== */

.narrative-entry {
  margin-bottom: var(--narrative-entry-spacing);
  padding: var(--space-2) var(--space-3);
  border-radius: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
  animation: entrySlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  transition: background var(--transition-fast);
  /* #3919: Wall-of-text legibility — relaxed line-height applies to all entry
     types (was previously DM-only). Base value used by short single-line
     entries too; shorter values can override per-type. */
  line-height: var(--line-height-narrative);
}

.narrative-entry--restored {
  animation: none;
}

.narrative-entry:hover {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

/* Entry Actions Container */
.narrative-entry__actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  z-index: var(--z-sticky);
}

.narrative-entry:hover .narrative-entry__actions {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__actions:focus-within {
  opacity: 1;
  visibility: visible;
}

/* Copy Button */
.narrative-entry__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* Legacy: Copy button outside actions container */
.narrative-entry > .narrative-entry__copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
  z-index: var(--z-sticky);
}

.narrative-entry:hover > .narrative-entry__copy {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__copy:hover {
  background: var(--color-primary, #3B82F6);
  border-color: var(--color-primary, #3B82F6);
  color: white;
}

.narrative-entry__copy:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

.narrative-entry > .narrative-entry__copy:focus-visible {
  opacity: 1;
  visibility: visible;
}

.narrative-entry__copy.copied {
  background: var(--color-success, #22C55E);
  border-color: var(--color-success, #22C55E);
  color: white;
}

/* Bookmark Button (in actions container) */
.narrative-entry__actions .narrative-bookmark__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.narrative-entry__actions .narrative-bookmark__btn:hover {
  background: rgba(212, 165, 116, 0.2);
  border-color: var(--color-accent-gold, #d4a574);
  color: var(--color-accent-gold, #d4a574);
}

.narrative-entry__actions .narrative-bookmark__btn--active {
  color: var(--color-accent-gold, #d4a574);
}

.narrative-entry__actions .narrative-bookmark__btn--active svg {
  fill: currentColor;
}

.narrative-entry__actions .narrative-bookmark__btn--active:hover {
  color: var(--color-danger, #dc2626);
}

.narrative-entry__actions .narrative-bookmark__btn:focus-visible {
  outline: 2px solid var(--color-accent-gold, #d4a574);
  outline-offset: 2px;
}

/* TTS Play Button (in actions container) */
.narrative-entry__actions .narrative-tts__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.narrative-entry__actions .narrative-tts__btn:hover {
  background: rgba(100, 180, 255, 0.2);
  border-color: var(--color-primary, #3B82F6);
  color: var(--color-primary, #3B82F6);
}

.narrative-entry__actions .narrative-tts__btn--loading {
  color: var(--color-text-muted);
  cursor: wait;
}

.narrative-entry__actions .narrative-tts__btn--loading svg {
  animation: tts-pulse 1s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.narrative-entry__actions .narrative-tts__btn--active {
  color: var(--color-primary, #3B82F6);
}

.narrative-entry__actions .narrative-tts__btn--active svg {
  fill: currentColor;
}

.narrative-entry__actions .narrative-tts__btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

/* Bookmarked entry indicator */
.narrative-entry--bookmarked {
  border-left: 2px solid var(--color-accent-gold, #d4a574);
}

/* ========================================
 * Layer 1 / Layer 2 Narrative Bubbles (#3503)
 * ----------------------------------------
 * --neutral: Layer 1, party-shared, third-person, observable
 *            facts only. Muted gray left border, no badge.
 * --personal: Layer 2, per-character, second-person,
 *             perception-filtered. Accent-colored left border
 *             plus character initial badge slot.
 * __personalizing: transient loading hint embedded in a dm_neutral
 *             bubble while Layer 2 (dm_personal) is in flight.
 *             Removed from the DOM when dm_personal arrives (#4405).
 *             Must be visually distinct from narrative prose so
 *             it is never mistaken for DM-authored content.
 * Modifiers only — base .narrative-entry styles untouched.
 * ======================================== */

.narrative-entry--neutral {
  border-left: 3px solid var(--color-text-muted, #888);
  padding-left: var(--space-3);
}

.narrative-entry--personal {
  border-left: 3px solid var(--color-accent-primary, #5a9fd8);
  padding-left: calc(var(--space-3) + 28px);
  position: relative;
}

/* Transient Layer 2 loading hint (#4405 fix — was unstyled, rendering as
 * plain narrative text). Display as a small muted italicised footer line
 * so it is clearly non-narrative while Layer 2 generation is in flight.
 * Removed from the DOM by removeIndicatorFor() when dm_personal arrives. */
.narrative-entry__personalizing {
  display: block;
  margin-top: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  font-style: italic;
  color: var(--color-text-muted, #888);
  opacity: 0.7;
  user-select: none;
  pointer-events: none;
  /* Soft pulse so the hint reads as "in progress", not as narrative text */
  animation: personalizingPulse 1.4s ease-in-out infinite;
}

@keyframes personalizingPulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.35; }
}

.narrative-entry__personal-badge {
  position: absolute;
  left: var(--space-2);
  top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-bg-secondary, #2d2d2d);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0;
  user-select: none;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .narrative-entry--personal {
    padding-left: calc(var(--space-3) + 24px);
  }

  .narrative-entry__personal-badge {
    width: 18px;
    height: 18px;
    font-size: var(--font-size-2xs, 10px);
    left: var(--space-1-5);
  }
}

/* ========================================
 * Channel Config Hover Icon (left side)
 * ======================================== */

.channel-config-icon {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted, #888);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease;
  z-index: var(--z-sticky);
  font-size: 0;
  line-height: 0;
}

.channel-config-icon svg {
  width: 12px;
  height: 12px;
}

.narrative-entry:hover .channel-config-icon {
  opacity: 1;
  visibility: visible;
}

.channel-config-icon:hover {
  background: var(--color-bg-secondary, #252545);
  border-color: var(--color-border, #3a3a5a);
  color: var(--color-text-primary, #e0e0e0);
}

.channel-config-icon:focus-visible {
  opacity: 1;
  visibility: visible;
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

.channel-config-icon--touch-visible {
  opacity: 1;
  visibility: visible;
}

/* ========================================
 * Channel Config Popover
 * ======================================== */

.channel-config-popover {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 180px;
  max-width: 240px;
  background: var(--color-bg-secondary, #252545);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-modal, 0 4px 16px rgba(0, 0, 0, 0.5));
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 13px);
  opacity: 0;
  transform: translateX(-4px);
  animation: channelPopoverIn 0.15s ease forwards;
}

@keyframes channelPopoverIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.channel-config-popover__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.channel-config-popover__icon {
  font-size: var(--font-size-md, 14px);
  line-height: 1;
}

.channel-config-popover__label {
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-text-primary, #e0e0e0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: var(--font-size-xs, 11px);
}

.channel-config-popover__body {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.channel-config-popover__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  color: var(--color-text-secondary, #b0b0b0);
}

.channel-config-popover__toggle input[type="checkbox"] {
  accent-color: var(--color-gold, #ffd700);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.channel-config-popover__toggle-label {
  font-size: var(--font-size-sm, 13px);
}

.channel-config-popover__configure {
  display: block;
  width: 100%;
  padding: var(--space-1-5) 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border, #3a3a5a);
  color: var(--color-accent-primary, #4a9eff);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}

.channel-config-popover__configure:hover {
  color: var(--color-text-primary, #e0e0e0);
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry__actions,
  .narrative-entry__copy,
  .narrative-entry__actions .narrative-bookmark__btn,
  .narrative-entry__actions .narrative-tts__btn,
  .narrative-entry__actions .narrative-snapshot__btn,
  .channel-config-icon,
  .channel-config-popover {
    transition: none;
    animation: none;
  }
}

/* #3919: Wall-of-text legibility — paragraph spacing tightened to prevent
   multi-paragraph DM narration from collapsing into a single block.
   Token: var(--space-3) = 12px (~0.75em) gives clear visual separation.
   :last-child rule preserves compact rendering for short single-paragraph
   responses (no trailing gap). */
.narrative-entry p {
  margin: 0 0 var(--space-3);
  max-width: 72ch;
}

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

/* Multi-paragraph readability: ensure consecutive narrative paragraphs
   never butt up against each other (defensive — covers cases where p tags
   are wrapped in containers like span/div with classes). */
.narrative-entry p + p {
  margin-top: var(--space-3);
}

.narrative-entry code {
  background: var(--color-bg-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
}

/*
 * Narrative 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: var(--color-entity-spell-bg);
  color: var(--color-entity-spell);
}

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

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

.narrative-entry.lore {
  background: var(--color-info-bg);
  font-style: italic;
  color: var(--color-accent-info);
}

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

.narrative-entry.player_chat,
.narrative-entry.player-chat {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-accent-cyan);
  padding-left: var(--space-4);
  margin-left: var(--space-4);
  font-style: italic;
  color: var(--color-text-primary);
}

.narrative-entry.player_chat:hover,
.narrative-entry.player-chat:hover {
  box-shadow: inset 0 1px 0 var(--overlay-white-subtle);
}

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

.lobby-chat-sender {
  color: var(--color-accent-secondary);
  font-weight: 600;
  font-style: normal;
  margin-right: var(--space-2);
}

/* ========================================
 * Entry Type: Gallery Image Shared
 * ======================================== */

.narrative-entry .gallery-share-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.narrative-entry .gallery-share-caption {
  color: var(--color-text-secondary);
  font-style: italic;
  display: block;
  margin-top: var(--space-1);
}

.narrative-entry .gallery-share-link {
  display: inline-block;
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity 0.2s ease;
  max-width: 200px;
}

.narrative-entry .gallery-share-link:hover {
  opacity: 0.85;
}

.narrative-entry .gallery-share-thumbnail {
  display: block;
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  object-fit: cover;
}

/* ========================================
 * Entry Type: Reflex Response
 * ======================================== */

.narrative-entry.reflex-response {
  background: transparent;
  border-left: 2px solid rgba(255, 215, 0, 0.3);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  opacity: 0.85;
}

.narrative-entry.reflex-response .reflex-text {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.narrative-entry.reflex-response:hover {
  transform: none;
}

.narrative-entry.animate-fade-in {
  animation: reflexFadeIn 0.2s ease-out;
}

@keyframes reflexFadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 0.85; transform: translateY(0); }
}

/* ========================================
 * Entry Type: Character Thought
 * ======================================== */

.narrative-entry.character-thought {
  background: var(--color-entity-spell-bg);
  border-left: 2px solid var(--color-accent-purple);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  opacity: 0.9;
}

.narrative-entry.character-thought .thought-text {
  color: var(--color-entity-spell);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.narrative-entry.character-thought:hover {
  transform: none;
  opacity: 1;
}

.narrative-entry.character-thought.thought-memory {
  border-left-color: var(--color-warning-emphasis);
  background: var(--color-warning-subtle);
}

.narrative-entry.character-thought.thought-memory .thought-text {
  color: var(--color-warning-fg);
}

.narrative-entry.character-thought.thought-situation {
  border-left-color: var(--color-text-muted);
  background: var(--overlay-white-subtle);
}

.narrative-entry.character-thought.thought-situation .thought-text {
  color: var(--color-text-secondary);
}

.narrative-entry.character-thought.thought-suggestion {
  border-left-color: var(--color-success-emphasis);
  background: var(--color-success-subtle);
}

.narrative-entry.character-thought.thought-suggestion .thought-text {
  color: var(--color-success-fg);
}

.narrative-entry.character-thought.thought-creation {
  border-left-color: var(--color-accent-cyan);
  background: var(--color-entity-npc-bg);
}

.narrative-entry.character-thought.thought-creation .thought-text {
  color: var(--color-entity-npc);
}

.narrative-entry.animate-thought-in {
  animation: thoughtFadeIn 0.3s ease-out;
}

@keyframes thoughtFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 0.9; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.animate-thought-in {
    animation: none;
  }
}

/* ========================================
 * Entry Type: Confirmation
 * ======================================== */

.narrative-entry.confirmation {
  background: transparent;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin-bottom: var(--space-1, 4px);
  animation: confirmationFadeIn 0.2s ease-out;
}

.narrative-entry.confirmation:hover {
  background: transparent;
}

.confirmation-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  background: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 12px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

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

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

.confirmation-badge__next {
  color: var(--color-text-muted);
  font-style: italic;
  opacity: 0.8;
}

.confirmation-badge__separator {
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.confirmation {
    animation: none;
  }
}

/* ========================================
 * Connection Lost Prompt
 * ======================================== */

.connection-lost-prompt {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--color-danger-subtle);
  border: 2px solid var(--color-accent-error);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
}

.connection-lost-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.connection-lost-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-accent-error);
  animation: pulse-warning 2s ease-in-out infinite;
}

.connection-lost-message {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.connection-lost-refresh {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-error);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-fg-on-emphasis);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--transition-normal);
}

.connection-lost-refresh:hover {
  background: var(--color-danger-emphasis);
}

.connection-lost-refresh:active {
  background: var(--color-danger-muted);
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .connection-lost-icon {
    animation: none;
  }
}

/* ========================================
 * Markdown Tables
 * ======================================== */

.narrative-entry table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-3) 0;
  font-size: var(--font-size-sm);
  background: var(--overlay-light-plus);
  border: 1px solid var(--overlay-gold-medium);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.narrative-entry thead {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.15), rgba(184, 134, 11, 0.1));
}

.narrative-entry th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: bold;
  color: #ffd700;
  border-bottom: 2px solid rgba(255, 215, 0, 0.4);
  white-space: nowrap;
}

.narrative-entry td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
  color: var(--color-text-primary);
}

.narrative-entry tbody tr:last-child td {
  border-bottom: none;
}

.narrative-entry tbody tr:nth-child(even) {
  background: rgba(255, 215, 0, 0.03);
}

.narrative-entry tbody tr:hover {
  background: rgba(255, 215, 0, 0.08);
}

.narrative-entry.dm table {
  background: rgba(139, 69, 19, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
}

.narrative-entry.dm thead {
  background: linear-gradient(180deg, rgba(139, 69, 19, 0.2), rgba(160, 82, 45, 0.15));
}

.narrative-entry.combat table {
  border-color: rgba(220, 20, 60, 0.4);
}

.narrative-entry.combat thead {
  background: linear-gradient(180deg, rgba(220, 20, 60, 0.2), rgba(139, 0, 0, 0.15));
}

.narrative-entry.combat th {
  color: #ff6b6b;
  border-bottom-color: rgba(220, 20, 60, 0.4);
}

.narrative-entry.combat td {
  border-bottom-color: rgba(220, 20, 60, 0.15);
}

/* ========================================
 * Dice Roll Display
 * ======================================== */

.dice-result {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: bold;
}

.dice-result.critical {
  background: rgba(52, 211, 153, 0.2);
  border-color: #34d399;
  color: #34d399;
  animation: criticalGlow 0.5s ease-out;
}

.dice-result.fumble {
  background: rgba(220, 20, 60, 0.2);
  border-color: #dc143c;
  color: #dc143c;
}

@keyframes criticalGlow {
  0% { box-shadow: 0 0 20px rgba(52, 211, 153, 0.8); }
  100% { box-shadow: 0 0 5px rgba(52, 211, 153, 0.3); }
}

/* ========================================
 * Streaming Narrative Entry
 * ======================================== */

.narrative-entry.streaming {
  padding: var(--space-2) var(--space-3);
  white-space: pre-wrap;
  word-break: break-word;
}

.narrative-entry.streaming .streaming-text::after {
  content: '\2588';
  animation: streaming-blink 1s step-end infinite;
  color: var(--color-gold);
}

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

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

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

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

.narrative-entry.stream-enhancing::after {
  content: 'Enhancing...';
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 10px;
  font-style: italic;
  color: var(--color-gold);
  opacity: 0.9;
  z-index: var(--z-sticky);
  animation: enhancingPulse 1s ease-in-out infinite;
}

@keyframes enhancingPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.narrative-entry.stream-enhancing::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15) 25%, rgba(255, 215, 100, 0.25) 50%, rgba(212, 175, 55, 0.15) 75%, transparent);
  animation: shimmerWave 0.6s ease-in-out forwards;
  pointer-events: none;
  z-index: var(--z-sticky);
}

@keyframes shimmerWave {
  0% { left: -100%; }
  100% { left: 100%; }
}

.narrative-entry.stream-enhanced {
  animation: enhanceGlow 0.4s ease-out;
}

@keyframes enhanceGlow {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4); }
  50% { box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.2); }
  100% { box-shadow: none; }
}

.narrative-entry.streaming.stream-fade-out {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.narrative-entry.stream-replaced {
  animation: streamReplaceFadeIn 0.3s ease-out;
}

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

@media (prefers-reduced-motion: reduce) {
  .narrative-entry.streaming.stream-fade-out {
    transition: none;
    opacity: 0;
  }
  .narrative-entry.stream-replaced {
    animation: none;
  }
  .narrative-entry.stream-enhancing::before {
    animation: none;
    display: none;
  }
  .narrative-entry.stream-enhancing::after {
    animation: none;
    opacity: 0.8;
  }
  .narrative-entry.stream-enhanced {
    animation: none;
  }
}

/* ========================================
 * Extractable Segment Pin Button
 * ======================================== */

[data-extractable="true"] {
  position: relative;
}

.segment-extract-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: var(--overlay-heavy);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  z-index: var(--z-float);
}

[data-extractable="true"]:hover .segment-extract-btn {
  display: flex;
  opacity: 0.7;
}

.segment-extract-btn:hover {
  opacity: 1;
  color: var(--color-accent-primary);
  background: var(--overlay-white-subtle);
  border-color: var(--color-accent-primary);
}

.segment--extracted {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.narrative-extract-panel {
  padding: 8px 12px;
}

.narrative-extract-panel__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

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

/* ========================================
 * Voice Input Mic Button
 * ======================================== */

.input-area .voice-input-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.input-area .voice-mic-btn {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.input-area .voice-mic-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.input-area .voice-mic-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.input-area .voice-mic-btn.voice-active {
  background: var(--color-danger-subtle);
  border-color: var(--color-danger-fg);
  color: var(--color-danger-fg);
  animation: voice-pulse 1.5s ease-in-out infinite;
}

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

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

.input-area input[type="text"]:focus-visible,
.input-area textarea:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

/* Mobile: compact input area */
@media (max-width: 767px) {
  .mobile-bottom-sheet-mode .input-area {
    padding: var(--space-2);
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: env(safe-area-inset-right, 8px);
    padding-bottom: env(safe-area-inset-bottom, 8px);
    gap: var(--space-1);
  }
}

/* ========================================
 * Selection Trays (spell, equipment, etc.)
 * ======================================== */

.selection-tray,
.equipment-tray,
.spell-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  animation: traySlideUp 0.3s ease-out;
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1;
}

.send-selections-btn {
  flex-shrink: 0;
  align-self: flex-end;
}

.spell-tray {
  border-color: var(--color-accent-purple);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-purple) 10%, transparent), color-mix(in srgb, var(--color-accent-purple) 5%, transparent));
}

.equipment-tray {
  border-color: var(--color-accent-warning);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-warning) 10%, transparent), color-mix(in srgb, var(--color-accent-warning) 5%, transparent));
}

/* State-driven visibility (preferred over inline style mutations) */
.selection-tray--hidden,
.equipment-tray--hidden {
  display: none;
}

/* Drop-target highlight when an image is being dragged from the gallery
   (#3797 — drag-into-narrative). The class is toggled by
   terminal--narrative-drop on dragover/dragleave. */
.input-area--drop-target {
  background: var(--accent-primary-soft, rgba(255, 191, 0, 0.08));
  outline: 2px dashed var(--accent-primary, #ffbf00);
  outline-offset: -4px;
}

/* ========================================
 * Input-area DM co-pilot mode bar (#4598)
 * Three-pill toggle [Chat | Plan | Auto] in the input area Zone E.
 * Only rendered when has_dm_powers. Managed by channel_tabs_controller.
 * ======================================== */

.input-area-dm-mode {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.input-area-dm-mode__label {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.input-area-dm-mode__pills {
  display: flex;
  gap: 0.25rem;
}

.input-area-dm-mode__pill {
  padding: 0.1875rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.6875rem;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default),
              color var(--timing-fast) var(--ease-default),
              border-color var(--timing-fast) var(--ease-default);
}

.input-area-dm-mode__pill:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.input-area-dm-mode__pill--active {
  background: var(--dm-accent-bg, #2a2a0d);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
  color: var(--dm-accent-color, var(--color-channel-dm));
}

.input-area-dm-mode__hint {
  font-size: 0.5625rem;
  color: var(--text-muted, #888);
  margin-left: auto;
}

.input-area-dm-mode__hint kbd {
  display: inline-block;
  padding: 0.0625rem 0.1875rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--border-color, #333);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
}

/* Mobile: hide hint text to save space */
@media (max-width: 767px) {
  .input-area-dm-mode__hint {
    display: none;
  }
}
/*
 * Narrative 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
 * ======================================== */

/* Persistent host that survives seamless room transitions (#2989, #4425).
   Lives in show.html.erb outside .terminal-zones / .grid-layout-wrapper so
   room_transition_coordinator._swapDOM cannot destroy it mid-request.

   Positioned as an UPPER GUTTER pinned just below the status bar so it can
   never occlude the chat input or the hint line at the bottom of the
   viewport. The pipeline-progress step list flows as a normal child below
   the status row (see _pipeline_progress.css §"Merged layout") so the bar
   expands DOWNWARD over the top of the narrative scroll area when the DM
   is thinking — which is recoverable (scrollable content) rather than
   destructive (typing surface). The host itself is pointer-inert (no
   visual); only the child bar is shown via its own display rules. */
.dm-responding-bar-host {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--status-bar-height, 48px); /* upper gutter beneath the status bar */
  z-index: var(--z-narrative-loading); /* above panels, below modals/toasts */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: var(--space-2, 8px) var(--space-4, 16px) 0;
  pointer-events: none; /* child bar re-enables for retry-button interaction */
}

/* When no dm-responding-bar child is present, collapse padding so the host
   doesn't reserve vertical space at the top of the viewport. */
.dm-responding-bar-host:not(:has(.dm-responding-bar)) {
  padding-top: 0;
  padding-bottom: 0;
}

.dm-responding-bar-host > .dm-responding-bar {
  pointer-events: auto; /* retry button + dismiss-on-click need to work */
}

/* Pipeline-progress-host is moved inside .dm-responding-bar at runtime;
   pointer-events flow through from the bar's own auto rule. This rule
   guards the legacy case where the host sits directly in the bar-host
   (between turns, before the bar is created). */
.dm-responding-bar-host > .pipeline-progress-host:not([hidden]) {
  pointer-events: auto;
}

.dm-responding-bar {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15), rgba(168, 85, 247, 0.2) 50%, rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: dmRespondingPulse 2s ease-in-out infinite;
}

.dm-responding-bar__status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.dm-responding-bar--visible {
  display: flex;
  animation: dmRespondingEnter 0.3s ease-out, dmRespondingPulse 2s ease-in-out 0.3s infinite;
}

/* Hide contextual tip/hint chips while the DM-responding bar is visible
   so they don't stack on top of the loading state (#2848). */
.dm-responding-bar--visible ~ .contextual-chips-container {
  display: none !important;
}

.dm-responding-bar--hiding {
  display: flex;
  animation: dmRespondingExit 0.2s ease-in forwards;
}

.dm-responding-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.dm-responding-bar__icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold, #ffd700);
  animation: dmRespondingQuill 1.5s ease-in-out infinite;
}

.dm-responding-bar__text {
  font-family: var(--font-serif);
  font-size: var(--font-size-base);
  font-style: italic;
  color: var(--color-text-primary);
  letter-spacing: 0.3px;
}

.dm-responding-bar__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-1);
}

.dm-responding-bar__dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold, #ffd700);
  border-radius: 50%;
  animation: dmRespondingDot 1.4s ease-in-out infinite;
}

.dm-responding-bar__dot:nth-child(1) { animation-delay: 0s; }
.dm-responding-bar__dot:nth-child(2) { animation-delay: 0.2s; }
.dm-responding-bar__dot:nth-child(3) { animation-delay: 0.4s; }

.dm-responding-bar__stage {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* Extended wait state */
.dm-responding-bar--extended {
  background: linear-gradient(90deg, rgba(100, 100, 100, 0.15), rgba(120, 120, 120, 0.2) 50%, rgba(100, 100, 100, 0.15));
  border-color: rgba(150, 150, 150, 0.4);
}

.dm-responding-bar--extended .dm-responding-bar__dot {
  background: var(--color-text-muted);
}

.dm-responding-bar--extended .dm-responding-bar__icon svg {
  color: var(--color-text-muted);
}

/* Error/timeout state */
.dm-responding-bar--error {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.15), rgba(239, 68, 68, 0.2) 50%, rgba(220, 38, 38, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
  animation: dmRespondingEnter 0.3s ease-out;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.dm-responding-bar--error .dm-responding-bar__icon--error svg {
  color: var(--color-error, #cf6068);
  animation: none;
}

.dm-responding-bar--error .dm-responding-bar__text {
  color: var(--color-error, #cf6068);
  font-style: normal;
}

/* Retry button inside error bar (#1796) */
.dm-responding-bar__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error, #cf6068);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.dm-responding-bar__retry-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
}

.dm-responding-bar__retry-btn:focus-visible {
  outline: 2px solid var(--color-error, #cf6068);
  outline-offset: 2px;
}

.dm-responding-bar__retry-icon svg {
  width: 16px;
  height: 16px;
}

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

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

@keyframes dmRespondingPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
  50% { box-shadow: 0 0 30px rgba(168, 85, 247, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}

@keyframes dmRespondingQuill {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes dmRespondingDot {
  0%, 80%, 100% { opacity: 0.4; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-responding-bar,
  .dm-responding-bar--visible {
    animation: none;
  }
  .dm-responding-bar__icon svg {
    animation: none;
  }
  .dm-responding-bar__dot {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}

@media (max-width: 768px) {
  .dm-responding-bar {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
  }
  .dm-responding-bar__status-row {
    gap: var(--space-1-5);
  }
  .dm-responding-bar__icon {
    width: 18px;
    height: 18px;
  }
  .dm-responding-bar__icon svg {
    width: 14px;
    height: 14px;
  }
  .dm-responding-bar__text {
    font-size: var(--font-size-xs);
  }
  .dm-responding-bar__dots {
    gap: 3px;
  }
  .dm-responding-bar__dot {
    width: 4px;
    height: 4px;
  }
  .dm-responding-bar__stage {
    display: none;
  }
}

/* ========================================
 * DM Thinking Indicator (Legacy - #1348)
 * ========================================
 * Deprecated: Inline dm_thinking indicators are no longer created.
 * All thinking/processing feedback now uses the unified DM Responding
 * Bar above. These styles are retained for backward compat with any
 * cached DOM or stale server responses.
 * ======================================== */

.dm-thinking-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
  border-left: 3px solid var(--color-accent, #8b5cf6);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  animation: dm-thinking-fade-in 0.3s ease-out;
}

.dm-thinking-indicator__icon {
  font-size: 1.25rem;
  animation: dm-thinking-quill 2s ease-in-out infinite;
}

.dm-thinking-indicator__text {
  font-style: italic;
  letter-spacing: 0.3px;
}

.dm-thinking-indicator__dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 2px;
}

.dm-thinking-indicator__dot {
  width: 4px;
  height: 4px;
  background: var(--color-text-muted);
  border-radius: 50%;
  animation: dm-thinking-pulse 1.4s ease-in-out infinite;
}

.dm-thinking-indicator__dot:nth-child(1) { animation-delay: 0s; }
.dm-thinking-indicator__dot:nth-child(2) { animation-delay: 0.2s; }
.dm-thinking-indicator__dot:nth-child(3) { animation-delay: 0.4s; }

.dm-thinking-indicator__timer {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs);
  font-style: normal;
  color: var(--color-text-muted);
  opacity: 0.7;
  margin-left: var(--space-2);
  min-width: 2.5em;
  text-align: right;
}

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

@keyframes dm-thinking-quill {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes dm-thinking-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-thinking-indicator {
    animation: none;
  }
  .dm-thinking-indicator__icon {
    animation: none;
  }
  .dm-thinking-indicator__dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ========================================
 * Enhanced AI Loading States
 * ======================================== */

.thinking-indicator__stage {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.thinking-indicator__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.8), rgba(255, 215, 0, 0.4) 50%, rgba(255, 215, 0, 0.8));
  background-size: 200% 100%;
  animation: progressShimmer 1.5s ease-in-out infinite;
  width: 0%;
  transition: width 0.5s ease-out;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.thinking-indicator__stage[data-stage="thinking"] ~ .thinking-indicator__progress { width: 0%; }
.thinking-indicator__stage[data-stage="understanding"] ~ .thinking-indicator__progress { width: 15%; }
.thinking-indicator__stage[data-stage="planning"] ~ .thinking-indicator__progress { width: 35%; }
.thinking-indicator__stage[data-stage="generating"] ~ .thinking-indicator__progress { width: 55%; }
.thinking-indicator__stage[data-stage="executing"] ~ .thinking-indicator__progress { width: 75%; }

.thinking-indicator__stage[data-stage="extended"] ~ .thinking-indicator__progress {
  width: 85%;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.8), rgba(245, 158, 11, 0.4) 50%, rgba(245, 158, 11, 0.8));
}

.thinking-indicator__stage[data-stage="delayed"] ~ .thinking-indicator__progress {
  width: 95%;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.3) 50%, rgba(239, 68, 68, 0.6));
}

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

.thinking-indicator--extended {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.thinking-indicator--extended .thinking-indicator__text {
  color: #f59e0b;
}

.thinking-indicator--extended .thinking-indicator__dots span {
  background: #f59e0b;
}

/* ========================================
 * Context-Aware Thinking Messages
 * ======================================== */

.thinking-indicator__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid rgba(255, 215, 0, 0.2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.thinking-indicator__context-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.thinking-indicator__context-icon--dice::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--combat::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.92 5L5 7l6 6-6 6 1.92 2 6-6.06L19 21l1.92-2-6-6 6-6L19 5l-6.08 5.94L6.92 5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M6.92 5L5 7l6 6-6 6 1.92 2 6-6.06L19 21l1.92-2-6-6 6-6L19 5l-6.08 5.94L6.92 5z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--dialogue::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-icon--memory::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.thinking-indicator__context-text {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
 * Streaming Text Animation
 * ======================================== */

.streaming-text {
  position: relative;
}

.streaming-text--active::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--color-gold, #ffd700);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

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

.streaming-word {
  display: inline;
  animation: wordReveal 0.1s ease-out forwards;
  opacity: 0;
}

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

/* ========================================
 * Connection Status Bar (#2642)
 * ========================================
 * Distinct from the DM responding bar — thinner,
 * blue/teal tones, purely informational.
 * Shows during initial connect and reconnection.
 * ======================================== */

.connection-status-bar {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-1-5) var(--space-3);
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.1), rgba(45, 212, 191, 0.15) 50%, rgba(56, 189, 248, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1-5);
}

.connection-status-bar--visible {
  display: flex;
  animation: connectionBarEnter 0.25s ease-out;
}

.connection-status-bar--hiding {
  display: flex;
  animation: connectionBarExit 0.2s ease-in forwards;
}

.connection-status-bar__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.connection-status-bar__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.8;
}

.connection-status-bar__icon svg {
  width: 14px;
  height: 14px;
  color: rgba(56, 189, 248, 0.9);
  animation: connectionPulseIcon 2s ease-in-out infinite;
}

.connection-status-bar__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  letter-spacing: 0.3px;
}

.connection-status-bar__dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.connection-status-bar__dot {
  width: 4px;
  height: 4px;
  background: rgba(56, 189, 248, 0.7);
  border-radius: 50%;
  animation: connectionDotPulse 1.4s ease-in-out infinite;
}

.connection-status-bar__dot:nth-child(1) { animation-delay: 0s; }
.connection-status-bar__dot:nth-child(2) { animation-delay: 0.2s; }
.connection-status-bar__dot:nth-child(3) { animation-delay: 0.4s; }

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

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

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

@keyframes connectionDotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .connection-status-bar--visible {
    animation: none;
  }
  .connection-status-bar__icon svg {
    animation: none;
    opacity: 0.8;
  }
  .connection-status-bar__dot {
    animation: none;
    opacity: 0.6;
  }
}

@media (max-width: 768px) {
  .connection-status-bar {
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-1);
  }
  .connection-status-bar__content {
    gap: var(--space-1);
  }
  .connection-status-bar__icon svg {
    width: 12px;
    height: 12px;
  }
  .connection-status-bar__text {
    font-size: 0.7rem;
  }
  .connection-status-bar__dot {
    width: 3px;
    height: 3px;
  }
}
/*
 * Narrative 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.
     #3707/#3750: this rule is the authoritative hide for the narrative
     panel filter strip at <768px. Specificity 0,1,0 — it relies on the
     turn-queue rule remaining scoped to `.panel-turn-queue` (otherwise
     same-specificity, source-after `display: flex` would re-override).
     Regression coverage: e2e/tests/mobile/narrative-tab-overflow.spec.js. */
  .narrative-filters {
    display: none;
  }

  /* #1581: Hide grid panel header for the narrative panel on mobile.
     The title/icon/dropdown eat ~32px of precious vertical space. */
  .grid-panel[data-panel-type="narrative"] > .grid-panel__header {
    display: none;
  }

}

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

/* ========================================
 * #2638: Narrow mobile viewports (<400px)
 * ========================================
 * At 360px–399px the compact mode-selector's "Act" label + tooltip
 * ("Click or press \ to change mode") steal enough horizontal space
 * to truncate the input placeholder mid-word. Collapse to icon-only
 * and hide the tooltip (the kbd shortcut remains discoverable via
 * the button's aria-label / title). The tooltip still renders on
 * wider viewports where it fits.
 */
@media (max-width: 399px) {
  /* Icon-only mode chip — compact tap target, label visually hidden */
  .mode-selector--compact .mode-selector__btn {
    padding: 4px;
    min-width: 32px;
    justify-content: center;
  }

  /* Visually hide the label but keep it in the a11y tree so screen
     readers still announce the current mode. */
  .mode-selector--compact .mode-selector__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* Hide the educational tooltip — "Click or press \ to change mode" —
     so it doesn't overlay the input or steal layout space. Keyboard
     shortcut remains wired; button title attribute still exposes it. */
  .mode-selector--compact .mode-selector__tooltip {
    display: none;
  }
}
/*
 * Organism: Narrative Panel
 * =========================
 * The main story/narrative area with input field at the bottom.
 * Enhanced with D&D theming and immersive visual effects.
 *
 * Split into focused modules under narrative/:
 *   _layout.css       — Container, filter bar, scrollable output
 *   _entry.css        — Base entry styles, actions, channel config
 *   _entry_types.css  — DM, player, system, combat, tool entry types
 *   _entry_content.css — Magic, lore, chat, tables, streaming, voice
 *   _input.css        — Input bar, selection trays
 *   _loading.css      — Loading spinner, typing, AI thinking, DM responding
 *   _animations.css   — Segment entrance animations, shared keyframes
 *   _scroll.css       — New messages indicator, scroll-to-bottom
 *   _wiki_links.css   — Entity links, skill opportunities, narrative hooks
 *   _perception.css   — Knowledge-exclusive, perception checks, multiplayer
 *   _speech_bubbles.css — Speech bubbles, voice styles, emotion badges
 *   _screenplay.css   — Script/screenplay mode, display toggle, DM insights
 *   _tabs.css         — Dynamic tabs, panes, selection cards, quick actions
 *   _transitions.css  — Room transitions, breadcrumbs, enrichment, gutter
 *   _mobile.css       — Tablet/mobile responsive, bottom sheet, focus mode
 */
















/* ==========================================================================
   Ambient Gutter
   Holodeck Phase 1 — Atmospheric Rendering Layer (Task #947)

   Persistent, low-prominence rendering zone for environmental atmosphere.
   Ambient segments route here rather than into the main narrative stream,
   creating visual information hierarchy — world texture without interrupting
   the narrative flow.

   The ambient gutter is the game's "breathing" — it shows the world is alive
   without demanding the player's full attention.
   ========================================================================== */

/* ----------------------------------------
 * Ambient Gutter Zone
 * Persistent strip below narrative output
 * ---------------------------------------- */

.ambient-gutter {
  position: relative;
  max-height: 140px;
  overflow: hidden;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin: 0 var(--space-2, 8px);
  opacity: 0.65;
  font-size: var(--font-size-xs, 0.75rem);
  line-height: 1.5;
  transition: opacity 0.3s ease;
  /* Non-interactive by default — world texture, not actionable content */
  pointer-events: none;
}

/* Reveal fully on hover to allow reading */
.ambient-gutter:hover {
  opacity: 0.85;
  pointer-events: auto;
}

/* Collapse entirely when empty — no phantom space */
.ambient-gutter:empty {
  display: none;
}

/* ----------------------------------------
 * Individual Ambient Entries
 * ---------------------------------------- */

.ambient-gutter__entry {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin-bottom: var(--space-1, 4px);
  border-left: 2px solid rgba(34, 139, 34, 0.25);
  border-radius: var(--radius-sm, 2px);
  background: linear-gradient(
    135deg,
    rgba(34, 139, 34, 0.04) 0%,
    rgba(46, 125, 50, 0.02) 100%
  );
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.4s ease-out;
}

/* Entrance animation — entries materialize softly */
.ambient-gutter__entry--entering {
  opacity: 0;
  transform: translateY(6px);
}

/* Exit animation — oldest entries fade upward */
.ambient-gutter__entry--fading {
  opacity: 0;
  transform: translateY(-4px);
}

/* Sense-type icon */
.ambient-gutter__entry .ambient-gutter__icon {
  margin-right: var(--space-1, 4px);
  font-style: normal;
  opacity: 0.7;
}

/* Texture variant (gold accent — for noteworthy atmospheric details) */
.ambient-gutter__entry--texture {
  border-left-color: rgba(212, 175, 55, 0.25);
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.04) 0%,
    rgba(180, 140, 40, 0.02) 100%
  );
}

/* ----------------------------------------
 * Responsive: Collapse on narrow viewports
 * On mobile, ambient entries become inline
 * spans rather than a dedicated gutter zone
 * ---------------------------------------- */

@media (max-width: 640px) {
  .ambient-gutter {
    max-height: 80px;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    margin: 0;
    font-size: 0.7rem;
  }

  .ambient-gutter__entry {
    padding: var(--space-half, 2px) var(--space-1, 4px);
    margin-bottom: 2px;
    border-left-width: 1px;
  }
}

/* ----------------------------------------
 * Reduced Motion
 * ---------------------------------------- */

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

  .ambient-gutter__entry--entering {
    opacity: 1;
    transform: none;
  }

  .ambient-gutter__entry--fading {
    opacity: 0;
  }
}

/* ==========================================================================
   Inline Ambient Narrative Entries (#2668)
   Supersedes the ambient-gutter zone for the streaming render path — ambient
   segments now flow inline in the narrative scroll with a distinct but
   readable treatment. JP feedback 2026-04-15: "environmental ambience is
   pretty good, I like their styling but a bit hard to read; maybe just
   include them in the regular narrative."
   ========================================================================== */

.narrative-entry--ambient {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin: var(--space-1, 4px) 0;
  border-left: 2px solid rgba(120, 160, 120, 0.55);
  border-radius: var(--radius-sm, 2px);
  background: linear-gradient(
    135deg,
    rgba(70, 120, 70, 0.08) 0%,
    rgba(60, 100, 60, 0.04) 100%
  );
  /* Full opacity + readable color — previous gutter used 0.65 opacity + tertiary
     color which was WCAG fail. This reads as secondary-text-italic. */
  opacity: 1;
  color: var(--color-text-secondary, #c0c0c0);
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.5;
  transition: opacity 0.4s ease-out, transform 0.3s ease-out;
}

.narrative-entry--ambient.narrative-entry--entering {
  opacity: 0;
  transform: translateY(4px);
}

.narrative-ambient__label {
  display: inline-block;
  margin-right: var(--space-2, 8px);
  padding: 0 var(--space-1, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(140, 180, 140, 0.9);
  border: 1px solid rgba(140, 180, 140, 0.3);
  border-radius: var(--radius-sm, 2px);
  vertical-align: baseline;
}

.narrative-ambient__entity {
  display: inline-block;
  margin-right: var(--space-1, 4px);
  font-style: normal;
  font-weight: 500;
  color: var(--color-text-primary, #e0e0e0);
}

.narrative-ambient__text {
  /* italic from parent — text carries the atmosphere */
}

/* Texture variant — gold accent for noteworthy atmospheric details */
.narrative-entry--ambient-texture {
  border-left-color: rgba(212, 175, 90, 0.55);
  background: linear-gradient(
    135deg,
    rgba(180, 140, 40, 0.08) 0%,
    rgba(150, 110, 30, 0.04) 100%
  );
}

.narrative-entry--ambient-texture .narrative-ambient__label {
  color: rgba(220, 190, 120, 0.9);
  border-color: rgba(220, 190, 120, 0.3);
}

/* Speculative variant — cooler tone for inference/sense cues */
.narrative-entry--ambient-speculative {
  border-left-color: rgba(140, 170, 210, 0.55);
  background: linear-gradient(
    135deg,
    rgba(90, 120, 160, 0.08) 0%,
    rgba(70, 100, 140, 0.04) 100%
  );
}

.narrative-entry--ambient-speculative .narrative-ambient__label {
  color: rgba(170, 195, 225, 0.9);
  border-color: rgba(170, 195, 225, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .narrative-entry--ambient {
    transition: none;
  }
  .narrative-entry--ambient.narrative-entry--entering {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Segment Visual Weight Tiers
   Holodeck Phase 1 — Segment Visual Weight (Task #948)

   Assigns visual prominence tiers to segment types rendered in the main
   narrative stream. Uses data-segment-tier attribute set by the Ruby
   ResponseBroadcaster and applied by the NarrativeRendererController.

   Tier hierarchy (most → least prominent):
     Primary      narration, npc_dialogue, action
     Environmental ambient, time, position (fallback when gutter unavailable)
     Mechanical   roll_result, combat_log
     Contextual   hook, secret, expandable (subtle, collapsed by default)
   ========================================================================== */

/* Primary tier: narrative core — full weight, default styling */
[data-segment-tier="primary"] {
  /* No overrides — inherits default narrative styling */
}

/* Environmental tier: atmospheric texture rendered in main stream
 * (fallback when the ambient gutter is unavailable or viewport is narrow) */
[data-segment-tier="environmental"],
[data-segment-tier="ambient"] {
  opacity: 0.6;
  font-size: 0.9em;
  font-style: italic;
}

/* Mechanical tier: dice rolls, combat events, system messages
 * Compact monospace layout that doesn't interrupt narrative rhythm */
[data-segment-tier="mechanical"] {
  font-size: 0.85em;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 2px);
  background: rgba(128, 128, 128, 0.06);
  font-family: var(--font-mono, monospace);
}

/* Contextual tier: hooks, secrets, expandables
 * Subtle presence — available if player seeks it, invisible if they don't */
[data-segment-tier="contextual"] {
  opacity: 0.75;
  font-size: 0.9em;
  border-left: 2px solid rgba(139, 92, 246, 0.3);
  padding-left: var(--space-2, 8px);
  font-style: italic;
  color: var(--color-text-secondary, #9CA3AF);
}

/* Collapsed-by-default for contextual segments */
[data-segment-tier="contextual"][data-collapsed="true"] {
  cursor: pointer;
  overflow: hidden;
  max-height: 1.5em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

[data-segment-tier="contextual"][data-collapsed="true"]:hover {
  max-height: none;
  white-space: normal;
  text-overflow: initial;
  opacity: 0.9;
}
/* ==========================================================================
   World Ticker
   Speculative Narration Phase 1 — Ambient Flavor Text Strip

   A persistent, single-line strip of scrolling low-priority flavor text.
   Sits between the ambient gutter and the scroll-to-latest button.
   Cycles one line at a time with a fade transition.

   Think "Barrens chat" — the world murmurs in the background.
   ========================================================================== */

.world-ticker {
  position: relative;
  padding: var(--space-1, 4px) var(--space-3, 12px);
  margin: 0 var(--space-2, 8px);
  opacity: 0.4;
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Reveal on hover */
.world-ticker:hover {
  opacity: 0.65;
  pointer-events: auto;
}

/* Hide when empty or disabled */
.world-ticker[hidden],
.world-ticker:empty {
  display: none;
}

/* The cycling line */
.world-ticker__line {
  display: inline;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-style: italic;
  transition: opacity 0.4s ease;
}

/* Fade-out during line transition */
.world-ticker__line--fading {
  opacity: 0;
}

/* Entity label on gutter entries (speculative content attribution) */
.ambient-gutter__entity {
  font-size: 0.65rem;
  font-style: normal;
  opacity: 0.5;
  margin-right: var(--space-1, 4px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Speculative layer variant (blue-tinted accent) */
.ambient-gutter__entry--speculative {
  border-left-color: rgba(59, 130, 246, 0.25);
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.04) 0%,
    rgba(37, 99, 235, 0.02) 100%
  );
}

/* ----------------------------------------
 * Responsive: Hide on narrow viewports
 * ---------------------------------------- */

@media (max-width: 640px) {
  .world-ticker {
    display: none;
  }
}

/* ----------------------------------------
 * Reduced Motion
 * ---------------------------------------- */

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

  .world-ticker__line--fading {
    opacity: 0;
  }
}
/* Channel Tabs - Unified message routing UI
 *
 * Replaces DM toggle + chat mode dropdown with a single channel paradigm.
 * Each channel is a separate message stream with different AI behavior.
 */

/* Wrapper for channel tabs + quick tools - sits at top of narrative-main */
.channel-tabs-wrapper {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Respect HTML `hidden` attribute — `display: flex` above otherwise wins
 * over the UA `[hidden] { display: none }` rule, which let the room-gated
 * DEBUG tab leak into lobby/character_creation for admins (#4255). */
.channel-tabs-wrapper[hidden] {
  display: none;
}

/* Horizontal tier tabs - top of narrative panel.
 *
 * #4266: vertical footprint is the dominant complaint (audit 5.2). Drop the
 * bottom-border separator so the tier-tabs row visually merges with the
 * channel-tabs row beneath it, and tighten vertical padding. The two rows
 * still share a single `--color-bg-secondary` background, so removing the
 * divider yields one continuous control strip instead of two stacked bars.
 */
.channel-tier-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  padding: 0.125rem 0.25rem;
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.channel-tier-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.625rem;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
  writing-mode: horizontal-tb;
  white-space: nowrap;
}

.channel-tier-tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.channel-tier-tab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.channel-tier-tab.channel-tab--active {
  background: var(--accent-bg, var(--color-accent-bg));
  border-color: var(--accent-color, var(--color-accent-primary));
  color: var(--accent-color, var(--color-accent-primary));
}

/* Tier-specific active colors — sourced from --color-channel-* tokens
 * (#4266 / audit 5.4) so all channel hues live in _tokens.css. */
.channel-tier-tab[data-tier="core"].channel-tab--active {
  --accent-color: var(--color-channel-adventure);
  --accent-bg: var(--color-channel-adventure-bg);
}

.channel-tier-tab[data-tier="game"].channel-tab--active {
  --accent-color: var(--color-channel-creative);
  --accent-bg: var(--color-channel-creative-bg);
}

.channel-tier-tab[data-tier="both"].channel-tab--active {
  --accent-color: var(--color-channel-ooc);
  --accent-bg: var(--color-channel-ooc-bg);
}

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

/* Active tier tab gets bolder weight + heavier letter-spacing so the
 * differentiation isn't color-only (#4266 / audit 5.3). */
.channel-tier-tab.channel-tab--active {
  font-weight: 800;
  letter-spacing: 0.075em;
}

.channel-tier-tab__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.25rem;
}

.channel-tier-tab__icon .svg-icon {
  width: 0.75rem;
  height: 0.75rem;
}

.channel-tier-tab__label {
  font-size: 0.625rem;
}

/* Hide vertical tier tabs on very small screens, show horizontal instead */
@media (max-width: 480px) {
  .channel-tier-tabs {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .channel-tabs-wrapper {
    flex-direction: column;
  }
}

/* Story mode toggle removed from UI - guided/freeform accessible via /guided command */

/* Main channel tabs container.
 *
 * #3879: tightened vertical padding so the header doesn't take ~3 row-heights
 * when the only content is the empty dynamic-tabs slot. With the FREE MODE
 * toggle removed (#3879), this row is often empty for non-DM players in
 * non-game rooms — let it compact to a near-zero footer.
 *
 * #4266: shaved another row of vertical chrome by removing the
 * tier-tabs/channel-tabs internal divider (see .channel-tier-tabs above).
 * The remaining bottom-border on this row still separates the channel
 * controls from the narrative output below.
 */
.channel-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
  flex: 1;
  min-height: 0;
}

/* When the only child of .channel-tabs that has any rendered content is the
 * empty dynamic-tabs slot (and the hidden separator), collapse padding.
 * Uses :has() — supported by all modern browsers (Chromium 105+, Safari 15.4+,
 * Firefox 121+). On older browsers the row keeps its compact 0.25rem padding,
 * which is still smaller than the previous 0.5rem.
 */
.channel-tabs:has(> .nf-dynamic-tabs:empty):not(:has(.dm-mode-indicator)):not(:has(.story-mode-toggle)) {
  padding: 0;
  border-bottom: none;
}

/* Individual channel tab (#1554: border-bottom style to distinguish from filter bar) */
.channel-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-muted, #888);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.channel-tab:hover {
  background: transparent;
  color: var(--color-text-primary);
  border-bottom-color: var(--accent-color, rgba(255, 255, 255, 0.3));
}

.channel-tab:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.channel-tab--active {
  background: transparent;
  border-bottom-color: var(--accent-color, var(--color-accent-primary));
  color: var(--accent-color, var(--color-accent-primary));
}

/* Channel-specific colors — sourced from --color-channel-* tokens
 * (#4266 / audit 5.4). Add a token here when introducing a new channel. */
.channel-tab[data-channel="adventure"].channel-tab--active {
  --accent-color: var(--color-channel-adventure);
  --accent-bg: var(--color-channel-adventure-bg);
}

.channel-tab[data-channel="ooc"].channel-tab--active {
  --accent-color: var(--color-channel-ooc);
  --accent-bg: var(--color-channel-ooc-bg);
}

.channel-tab[data-channel="dm"].channel-tab--active {
  --accent-color: var(--color-channel-dm);
  --accent-bg: var(--color-channel-dm-bg);
}

.channel-tab[data-channel="creative"].channel-tab--active {
  --accent-color: var(--color-channel-creative);
  --accent-bg: var(--color-channel-creative-bg);
}

/* Active channel tab gets bolder weight in addition to color so the
 * signal isn't color-only (#4266 / audit 5.3). The icon (rendered via
 * svg_icon in the partial) provides the second non-color signal. */
.channel-tab.channel-tab--active {
  font-weight: 700;
}

/* Channel tab icon */
.channel-tab__icon {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
}

.channel-tab__icon .svg-icon {
  width: 1em;
  height: 1em;
}

/* Channel tab label */
.channel-tab__label {
  /* label hidden on small screens via media query below */
}

@media (max-width: 480px) {
  .channel-tab__label {
    display: none;
  }
}

/* DM tab only visible when user has DM powers */
.channel-tab--dm-only {
  display: none;
}

.channel-tabs[data-has-dm-powers="true"] .channel-tab--dm-only {
  display: inline-flex;
}

/* DM Channel Mode Indicator */
.dm-mode-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-secondary);
  border-radius: 4px;
}

.dm-mode-indicator__label {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.dm-mode-buttons {
  display: flex;
  gap: 0.25rem;
}

.dm-mode-btn {
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.dm-mode-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.dm-mode-btn--active {
  background: var(--dm-accent-bg, #2a2a0d);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Mode-specific icons */
.dm-mode-btn[data-mode="chat"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-chat) no-repeat center / contain;
}

.dm-mode-btn[data-mode="plan"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
}

.dm-mode-btn[data-mode="auto"] .dm-mode-btn__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-zap);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-zap);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Shift+Tab hint */
.dm-mode-hint {
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  margin-left: 0.5rem;
}

.dm-mode-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.25rem;
  background: var(--color-bg-hover);
  border: 1px solid var(--border-color, #333);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
}

/* Quick tool buttons for DM channel */
.dm-quick-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
}

/* Respect hidden attribute (CSS display overrides it otherwise) */
.dm-quick-tools[hidden],
.dm-mode-indicator[hidden] {
  display: none;
}

.dm-quick-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.dm-quick-tool-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--dm-accent-color, var(--color-channel-dm));
}

.dm-quick-tool-btn__icon {
  font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .channel-tabs {
    padding: 0.375rem;
  }

  .channel-tab {
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
  }

  .dm-mode-indicator {
    flex-wrap: wrap;
  }

  .dm-mode-hint {
    display: none;
  }
}

/* Animation for channel switching */
@keyframes channel-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

.channel-tab--switching {
  animation: channel-pulse var(--timing-normal) var(--ease-default);
}

/* DM panes / pending-actions queue styles previously lived here; extracted to
 * organisms/_dm_panes.css in #4266 to keep this file under the 1000 LOC cap. */

/* Story Mode Toggle CSS removed in #3879 — toggle button no longer rendered
 * in the narrative header (use /guided slash command). Channel tabs spec
 * still creates the element programmatically to verify controller logic;
 * those tests don't depend on visual styling. */

/* ============================================================================
 * DEBUG tier visual feedback
 * ----------------------------------------------------------------------------
 * When the admin clicks the DEBUG tier tab, the channel-tabs controller adds
 * `narrative-panel--debug-tier` to the narrative panel root. The controller
 * also adds `narrative-panel--tier-empty` when the active tier filters out
 * every entry — used here to surface a "no entries" hint instead of a blank
 * panel (which previously made the click look like a no-op).
 * ============================================================================ */

.narrative-panel--debug-tier {
  /* Subtle orange border accent matching the DEBUG tab active colour */
  box-shadow: inset 0 0 0 1px var(--debug-tier-accent-soft);
}

/* Q18: Surface a sighted text label when debug tier is active so the
 * orange border isn't the only signal that the channel filter is on. */
.narrative-panel--debug-tier::before {
  content: "DEBUG channels visible";
  display: block;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--debug-tier-accent);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.narrative-panel--tier-empty .narrative-output::after {
  content: attr(data-empty-tier-hint);
  display: block;
  padding: var(--space-3, 12px);
  margin: var(--space-2, 8px);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-align: center;
}

.narrative-panel--debug-tier.narrative-panel--tier-empty .narrative-output::after {
  border-color: var(--debug-tier-accent-soft);
  color: var(--debug-tier-accent-muted);
}

/* B7: Reduced-motion — silence channel tab transitions and pulse animation. */
@media (prefers-reduced-motion: reduce) {
  .channel-tab--switching, .channel-tier-tab, .channel-tab,
  .channel-tab-badge, .channel-tier-tab-badge { animation: none !important; transition: none !important; }
}
/* DM Panes — DM-only content panes that overlay the narrative panel
 * when a sidebar tab is selected.
 *
 * Extracted from _channel_tabs.css (#4266) so the channel-tabs file
 * stays under the 1000 LOC cap. These rules are unrelated to channel
 * tabs themselves — they style the .dm-content-pane / .dm-panes-container
 * layout, the per-pane content wrappers (scene / live / npcs / tools /
 * cards / ai / prep / control), and the pending-actions queue items.
 */

/* DM Content Panes - shown in main content area when sidebar tabs selected */
.dm-content-pane {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-docked);
  background: var(--color-bg-secondary);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.dm-content-pane[hidden] {
  display: none;
}

/* Pane header */
.dm-content-pane__header {
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-content-pane__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Pane body */
.dm-content-pane__body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

/* Override dm-control styles when in main pane */
.dm-control-pane .dm-control-panel {
  height: 100%;
  background: transparent;
}

.dm-control-pane .dm-control-header {
  display: none; /* Header is redundant - tab already identifies this */
}

/* ========================================
 * DM Panes Container (wraps all DM panes for shared controller)
 * ======================================== */

/* Container is absolutely positioned to not affect normal document flow.
   Individual panes inside are also absolute and overlay when shown. */
.dm-panes-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Allow clicks through when no pane visible */
  z-index: var(--z-sticky-above); /* Below panes (docked) but above narrative */
}

/* Re-enable pointer events on actual pane content */
.dm-panes-container .dm-content-pane {
  pointer-events: auto;
}

/* ========================================
 * DM Pane Content Wrappers
 * ======================================== */

.dm-pane-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Scene Pane */
.dm-scene-pane-content .dm-narrate-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-scene-pane-content .dm-scene-info {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-scene-pane-content .dm-scene-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Live Pane */
.dm-live-pane-content .dm-live-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
  font-size: 1rem;
}

.dm-live-pane-content .dm-action-queue,
.dm-live-pane-content .dm-turn-control,
.dm-live-pane-content .dm-session-state {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-live-pane-content .dm-action-queue-header,
.dm-live-pane-content .dm-turn-control-header,
.dm-live-pane-content .dm-session-state-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-live-pane-content .dm-action-queue-header h5,
.dm-live-pane-content .dm-turn-control-header h5,
.dm-live-pane-content .dm-session-state-header h5 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dm-live-pane-content .dm-action-queue-count {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: var(--dm-accent-color, var(--color-channel-dm));
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
}

.dm-live-pane-content .dm-turn-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dm-live-pane-content .dm-state-item {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.dm-live-pane-content .dm-state-item .state-label {
  color: var(--text-muted, #888);
}

.dm-live-pane-content .dm-state-item .state-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.dm-live-pane-content .dm-status--active {
  color: var(--color-accent-secondary);
}

.dm-live-pane-content .dm-exit-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.dm-live-pane-content .dm-exit-btn {
  width: 100%;
}

/* NPCs Pane */
.dm-npcs-pane-content .dm-npc-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

.dm-npcs-pane-content .dm-npc-list {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  min-height: 100px;
}

.dm-npcs-pane-content .dm-npc-quick-add {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-npcs-pane-content .dm-quick-add-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
}

.dm-npcs-pane-content .dm-quick-add-row {
  display: flex;
  gap: 0.5rem;
}

.dm-npcs-pane-content .dm-npc-name-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.dm-npcs-pane-content .dm-npc-name-input:focus {
  outline: none;
  border-color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Tools Pane */
.dm-tools-pane-content .dm-tools-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

/* Cards Pane */
.dm-cards-pane-content .dm-cards-header h4 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  color: var(--dm-accent-color, var(--color-channel-dm));
}

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

/* Prep Pane - uses existing prep styles from dm_control */
.dm-prep-pane-content .dm-prep-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Control Pane - merged scene + live */
.dm-control-pane-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dm-control-pane-content .dm-narrate-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dm-control-pane-content .dm-scene-info {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-control-pane-content .dm-scene-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dm-control-pane-content .dm-action-queue,
.dm-control-pane-content .dm-turn-control,
.dm-control-pane-content .dm-session-state {
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
}

.dm-control-pane-content .dm-action-queue-header,
.dm-control-pane-content .dm-turn-control-header,
.dm-control-pane-content .dm-session-state-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.dm-control-pane-content .dm-action-queue-header h5,
.dm-control-pane-content .dm-turn-control-header h5,
.dm-control-pane-content .dm-session-state-header h5 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.dm-control-pane-content .dm-action-queue-count {
  margin-left: auto;
  padding: 0.125rem 0.375rem;
  background: var(--dm-accent-color, var(--color-channel-dm));
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 3px;
}

.dm-control-pane-content .dm-turn-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.dm-control-pane-content .dm-state-item {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.875rem;
}

.dm-control-pane-content .dm-state-item .state-label {
  color: var(--text-muted, #888);
}

.dm-control-pane-content .dm-state-item .state-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.dm-control-pane-content .dm-status--active {
  color: var(--color-accent-secondary);
}

.dm-control-pane-content .dm-exit-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.dm-control-pane-content .dm-exit-btn {
  width: 100%;
}

/* ========================================
 * Pending Actions Queue Items
 * ======================================== */

.dm-pending-action-item {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  background: var(--color-bg-elevated);
  border: 1px solid var(--border-color, #333);
  border-radius: 6px;
  transition: opacity var(--timing-normal) var(--ease-default), transform var(--timing-normal) var(--ease-default);
}

.dm-pending-action-item--removing {
  opacity: 0;
  transform: translateX(10px);
}

/* Risk level variants
 * Refactor (#4260, XC-3): caution and danger now signal via background
 * tint + the existing `.dm-pending-action-badge--*` chip rather than a
 * left-border accent. `--critical` retains the left-border because it is
 * the load-bearing severity signal — at-a-glance "stop the world" cue
 * for the DM queue. */
.dm-pending-action-item--caution {
  background: rgba(245, 158, 11, 0.08);
}

.dm-pending-action-item--danger {
  background: rgba(239, 68, 68, 0.1);
}

.dm-pending-action-item--critical {
  border-left: 3px solid #dc2626;
  background: rgba(220, 38, 38, 0.15);
}

.dm-pending-action-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.dm-pending-action-tool {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.dm-pending-action-badge {
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
}

.dm-pending-action-badge--warning {
  background: var(--color-accent-warning);
  color: #000;
}

.dm-pending-action-badge--caution {
  background: var(--color-accent-warning);
  color: #000;
}

.dm-pending-action-badge--danger {
  background: var(--color-accent-error);
  color: #fff;
}

.dm-pending-action-badge--critical {
  background: #dc2626;
  color: #fff;
}

.dm-pending-action-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  font-family: var(--font-mono);
}

.dm-pending-action-description {
  font-size: 0.8125rem;
  color: var(--text-muted, #aaa);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.dm-pending-action-warning {
  font-size: 0.8125rem;
  color: var(--color-accent-warning);
  font-style: italic;
  margin-bottom: 0.5rem;
  padding: 0.375rem;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 4px;
}

.dm-pending-action-actions {
  display: flex;
  gap: 0.5rem;
}

.dm-pending-action-btn {
  flex: 1;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity var(--timing-fast) var(--ease-default), background-color var(--timing-fast) var(--ease-default);
}

.dm-pending-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dm-pending-action-btn--approve {
  background: var(--color-accent-secondary);
  color: #fff;
}

.dm-pending-action-btn--approve:hover:not(:disabled) {
  background: #16a34a;
}

.dm-pending-action-btn--reject {
  background: var(--bg-secondary, #2a2a2a);
  color: var(--text-muted, #aaa);
  border: 1px solid var(--border-color, #444);
}

.dm-pending-action-btn--reject:hover:not(:disabled) {
  background: var(--color-accent-error);
  color: #fff;
  border-color: var(--color-accent-error);
}

/* Active count indicator */
.dm-action-queue-count--active {
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0);
  }
}
/* Inspect Panel - Slide-in entity detail panel
 *
 * Shows detailed information about entities when clicked.
 * Slides in from the right side of the screen.
 */

/* ==========================================================================
   Backdrop
   ========================================================================== */

.inspect-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: var(--z-floating);
  pointer-events: none;
}

.inspect-panel__backdrop--visible {
  background: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* ==========================================================================
   Panel Container
   ========================================================================== */

.inspect-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  max-width: 90vw;
  background: var(--bg-primary, #1e1e1e);
  border-left: 1px solid var(--border-color, #3e3e3e);
  display: flex;
  flex-direction: column;
  z-index: var(--z-floating-above);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.inspect-panel--open {
  transform: translateX(0);
}

.inspect-panel--closing {
  transform: translateX(100%);
}

/* ==========================================================================
   Header
   ========================================================================== */

.inspect-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, #3e3e3e);
  background: var(--bg-secondary, #252526);
}

.inspect-panel__header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.inspect-panel__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(97, 175, 239, 0.1);
  color: var(--accent-primary, #61afef);
  flex-shrink: 0;
}

.inspect-panel__type-icon svg {
  width: 20px;
  height: 20px;
}

.inspect-panel__titles {
  flex: 1;
  min-width: 0;
}

.inspect-panel__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inspect-panel__type-label {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inspect-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.inspect-panel__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #fff);
}

.inspect-panel__close svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Body
   ========================================================================== */

.inspect-panel__body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

.inspect-panel__subtitle {
  margin: 0 0 12px 0;
  font-size: 0.9rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

.inspect-panel__description {
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-primary, #fff);
}

/* ==========================================================================
   Stats Grid
   ========================================================================== */

.inspect-panel__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.inspect-panel__stat {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 6px;
  border: 1px solid var(--border-color, #3e3e3e);
}

.inspect-panel__stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.inspect-panel__stat-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

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

.inspect-panel__section {
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color, #3e3e3e);
}

.inspect-panel__section-title {
  margin: 0 0 8px 0;
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Relationship badge */
.inspect-panel__relationship {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
}

.inspect-panel__relationship--friendly {
  background: rgba(152, 195, 121, 0.2);
  color: var(--accent-secondary, #98c379);
}

.inspect-panel__relationship--neutral {
  background: rgba(150, 150, 150, 0.2);
  color: var(--text-secondary, #888);
}

.inspect-panel__relationship--hostile {
  background: rgba(224, 108, 117, 0.2);
  color: var(--accent-error, #e06c75);
}

.inspect-panel__notes {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary, #888);
  font-style: italic;
}

/* Tags */
.inspect-panel__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspect-panel__tag {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(97, 175, 239, 0.15);
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--accent-primary, #61afef);
}

/* Components */
.inspect-panel__components {
  font-size: 0.9rem;
  color: var(--text-primary, #fff);
  font-family: var(--font-mono, 'Fira Code', monospace);
}

/* List */
.inspect-panel__list {
  margin: 0;
  padding: 0 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-primary, #fff);
}

.inspect-panel__list li {
  margin-bottom: 4px;
}

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

.inspect-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary, #888);
  gap: 12px;
}

.inspect-panel__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(97, 175, 239, 0.2);
  border-top-color: var(--accent-primary, #61afef);
  border-radius: 50%;
  animation: inspect-panel-spin 0.8s linear infinite;
}

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

/* ==========================================================================
   Footer Actions
   ========================================================================== */

.inspect-panel__footer {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-color, #3e3e3e);
  background: var(--bg-secondary, #252526);
}

.inspect-panel__action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border-color, #3e3e3e);
  border-radius: 6px;
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-primary, #fff);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inspect-panel__action:hover {
  background: var(--bg-primary, #1e1e1e);
  border-color: var(--accent-primary, #61afef);
}

.inspect-panel__action svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.inspect-panel__action--primary {
  background: linear-gradient(
    180deg,
    rgba(97, 175, 239, 0.2) 0%,
    rgba(97, 175, 239, 0.1) 100%
  );
  border-color: rgba(97, 175, 239, 0.4);
  color: var(--accent-primary, #61afef);
}

.inspect-panel__action--primary:hover {
  background: linear-gradient(
    180deg,
    rgba(97, 175, 239, 0.3) 0%,
    rgba(97, 175, 239, 0.15) 100%
  );
  border-color: var(--accent-primary, #61afef);
}

/* ==========================================================================
   Type-specific Styling
   ========================================================================== */

/* NPC */
.inspect-panel--npc .inspect-panel__type-icon {
  background: rgba(8, 145, 178, 0.15);
  color: #22d3ee;
}

/* Location */
.inspect-panel--location .inspect-panel__type-icon {
  background: rgba(22, 163, 106, 0.15);
  color: #4ade80;
}

/* Item */
.inspect-panel--item .inspect-panel__type-icon {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}

/* Spell */
.inspect-panel--spell .inspect-panel__type-icon {
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

/* Creature/Monster */
.inspect-panel--creature .inspect-panel__type-icon,
.inspect-panel--monster .inspect-panel__type-icon {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ==========================================================================
   Action States
   ========================================================================== */

.inspect-panel__action--success {
  background: rgba(152, 195, 121, 0.2);
  border-color: var(--accent-secondary, #98c379);
  color: var(--accent-secondary, #98c379);
}

.inspect-panel__action--success:hover {
  background: rgba(152, 195, 121, 0.3);
  border-color: var(--accent-secondary, #98c379);
}

.inspect-panel__action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   Error State
   ========================================================================== */

.inspect-panel__error {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  border-radius: 6px;
  color: var(--accent-error, #e06c75);
  font-size: 0.85rem;
  animation: inspect-panel-error-fade-in 0.2s ease;
}

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

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

@media (max-width: 480px) {
  .inspect-panel {
    width: 100%;
    max-width: none;
  }
}
/*
 * Gap HUD Organism
 * ================
 * Persistent corner HUD that accumulates system-response-to-gap hints
 * (e.g., compound-command suggestions from the composition gap detector).
 *
 * Uses design tokens from: terminal/_tokens.css
 *   - z-index: --z-notification (1100) — above panels, below modals.
 *   - colors: terminal palette tokens
 *   - spacing: --space-2/3/4
 *
 * Positioning
 * - Desktop: fixed bottom-right, above any floating dock padding.
 * - Mobile: smaller badge, anchored above the message input via
 *   safe-area-aware offset. The expanded panel never exceeds 60vh so
 *   it cannot fully cover the input area.
 */

.gap-hud {
  position: fixed;
  right: 16px;
  /* Sit above the standard floating dock / message input gutter. */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-notification, 1100);
  pointer-events: none; /* children opt back in */
  max-width: min(360px, calc(100vw - 32px));
  font-family: var(--font-mono, monospace);
}

.gap-hud[data-empty="true"][data-expanded="false"] {
  display: none;
}

/* ── Collapsed badge ─────────────────────────────────────────────── */

.gap-hud__badge {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  background: var(--color-bg-primary, #0b0f0b);
  color: var(--color-text-primary, #9cf0a6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.gap-hud__badge:hover,
.gap-hud__badge:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  outline: none;
}

.gap-hud__badge-icon {
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}

.gap-hud__badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-accent-warning, #e0a800);
  color: var(--color-bg-primary, #0b0f0b);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ── Expanded panel ──────────────────────────────────────────────── */

.gap-hud__panel {
  pointer-events: auto;
  width: min(360px, calc(100vw - 32px));
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  background: var(--color-bg-primary, #0b0f0b);
  color: var(--color-text-primary, #9cf0a6);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.gap-hud__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(120, 200, 140, 0.25));
  background: rgba(255, 255, 255, 0.02);
}

.gap-hud__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #7fb98a);
}

.gap-hud__actions {
  display: inline-flex;
  gap: 6px;
}

.gap-hud__action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #7fb98a);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}

.gap-hud__action-btn:hover,
.gap-hud__action-btn:focus-visible {
  border-color: var(--color-border-subtle, rgba(120, 200, 140, 0.35));
  color: var(--color-text-primary, #9cf0a6);
  outline: none;
}

.gap-hud__close {
  font-size: 18px;
  line-height: 1;
  padding: 0 8px;
}

.gap-hud__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.gap-hud__empty {
  padding: var(--space-3, 12px);
  color: var(--color-text-muted, #5c8266);
  font-size: 12px;
  text-align: center;
}

.gap-hud__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid rgba(120, 200, 140, 0.12);
  font-size: 13px;
  line-height: 1.4;
}

.gap-hud__item:last-child {
  border-bottom: none;
}

.gap-hud__item[data-unseen="true"] {
  background: rgba(224, 168, 0, 0.06);
  border-left: 2px solid var(--color-accent-warning, #e0a800);
}

.gap-hud__item-body {
  flex: 1 1 auto;
  color: var(--color-text-primary, #9cf0a6);
  word-break: break-word;
}

.gap-hud__dismiss {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--color-text-muted, #5c8266);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}

.gap-hud__dismiss:hover,
.gap-hud__dismiss:focus-visible {
  color: var(--color-text-primary, #9cf0a6);
  outline: none;
}

/* ── Mobile tuning ───────────────────────────────────────────────── */

@media (max-width: 640px) {
  .gap-hud {
    right: 8px;
    /* Raise further to clear the mobile input + keyboard safe area. */
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    max-width: calc(100vw - 16px);
  }

  .gap-hud__badge {
    width: 36px;
    height: 36px;
  }

  .gap-hud__panel {
    /* Smaller cap on mobile so it never fully covers the input. */
    max-height: min(50vh, 360px);
    width: calc(100vw - 16px);
  }
}
/* ========================================
 * Inline Action Chips
 * ========================================
 * Clickable action buttons embedded within narrative content.
 * Players can click these to take common actions quickly.
 */

/* Container for action chips */
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--overlay-white-light);
}

/* #4426: When inline-actions is the sole/first content of a narrative entry
 * (e.g. merchant Browse/Sell chips with no narrative text above them),
 * show a subtle section header so the chips have visible context rather
 * than appearing as bare unsourced buttons. */
.narrative-entry > .inline-actions:first-child,
.narrative-entry > .inline-actions.animate-in:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.narrative-entry > .inline-actions:first-child::before,
.narrative-entry > .inline-actions.animate-in:first-child::before {
  content: 'Quick actions';
  display: block;
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--overlay-white-light);
}

/* Individual action chip - D&D themed golden accent */
.action-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, rgba(255, 215, 0, 0.02) 100%);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  box-shadow: 0 2px 4px var(--overlay-light);
  text-shadow: 0 1px 2px var(--overlay-light-plus);
}

.action-chip:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 215, 0, 0.08) 100%);
  border-color: rgba(255, 215, 0, 0.5);
  color: var(--color-gold);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--overlay-light-plus), 0 0 15px rgba(255, 215, 0, 0.15);
}

.action-chip:active {
  transform: translateY(0);
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.12) 100%);
  box-shadow: 0 2px 6px var(--overlay-light-plus);
}

/* Icon within chip */
.action-chip__icon {
  font-size: 1.1em;
}

/* ========================================
 * Action Type Variants
 * ========================================
 */

/* Combat actions - red tint */
.action-chip--combat,
.action-chip--attack {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.08);
}

.action-chip--combat:hover,
.action-chip--attack:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* Defense actions - blue tint */
.action-chip--defend,
.action-chip--defensive {
  border-color: rgba(59, 130, 246, 0.3);
  background: rgba(59, 130, 246, 0.08);
}

.action-chip--defend:hover,
.action-chip--defensive:hover {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

/* Talk/social actions - yellow tint */
.action-chip--talk,
.action-chip--social {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.action-chip--talk:hover,
.action-chip--social:hover {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* Explore/investigate actions - green tint */
.action-chip--explore,
.action-chip--investigate {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.08);
}

.action-chip--explore:hover,
.action-chip--investigate:hover {
  border-color: rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}

/* Magic actions - purple tint */
.action-chip--magic,
.action-chip--spell {
  border-color: rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
}

.action-chip--magic:hover,
.action-chip--spell:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: rgba(168, 85, 247, 0.15);
  color: #c4b5fd;
}

/* Skill roll actions - D&D dice themed with golden glow */
.action-chip--skill-roll {
  border-color: rgba(255, 215, 0, 0.4);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(218, 165, 32, 0.08) 100%
  );
  box-shadow: 0 2px 6px var(--overlay-light), var(--shadow-glow-sm-gold);
  position: relative;
  overflow: hidden;
}

.action-chip--skill-roll::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--overlay-gold-light) 50%,
    transparent 100%
  );
  animation: skillRollShimmer 3s ease-in-out infinite;
}

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

.action-chip--skill-roll:hover {
  border-color: rgba(255, 215, 0, 0.7);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.25) 0%,
    rgba(218, 165, 32, 0.15) 100%
  );
  color: var(--color-gold);
  box-shadow: 0 4px 12px var(--overlay-light-plus), 0 0 20px rgba(255, 215, 0, 0.25);
  transform: translateY(-2px) scale(1.02);
}

.action-chip--skill-roll:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 6px var(--overlay-light-plus), 0 0 8px rgba(255, 215, 0, 0.15);
}

.action-chip--skill-roll .action-chip__icon {
  animation: diceWiggle 2s ease-in-out infinite;
}

@keyframes diceWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

/* ========================================
 * Roll Prompt CTA
 * ========================================
 * Contextual prompts for dice rolls
 */

.roll-cta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(245, 158, 11, 0.06);
  border: 1px dashed rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-md);
}

.roll-cta__prompt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.roll-cta__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  background: rgba(245, 158, 11, 0.1);
  color: #fcd34d;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.roll-cta__button:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.6);
  transform: scale(1.02);
}

.roll-cta__button:active {
  transform: scale(0.98);
}

.roll-cta__button .dice-icon {
  font-size: 1.2em;
}

/* ========================================
 * Animation
 * ========================================
 */

.inline-actions.animate-in .action-chip {
  animation: chipSlideIn 0.2s ease-out;
  animation-fill-mode: backwards;
}

.inline-actions.animate-in .action-chip:nth-child(1) { animation-delay: 0ms; }
.inline-actions.animate-in .action-chip:nth-child(2) { animation-delay: 50ms; }
.inline-actions.animate-in .action-chip:nth-child(3) { animation-delay: 100ms; }
.inline-actions.animate-in .action-chip:nth-child(4) { animation-delay: 150ms; }

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

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .inline-actions.animate-in .action-chip {
    animation: none;
  }
}

/* ========================================
 * Mobile Adjustments
 * ========================================
 */

@media (max-width: 640px) {
  .inline-actions {
    gap: var(--space-1);
  }

  .action-chip {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .roll-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
}
/* Inline Character Select — swipe cards rendered in narrative area */

.inline-character-select {
  display: flex;
  justify-content: center;
  padding: var(--space-lg) 0;
}

.inline-select__wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  max-width: 340px;
  width: 100%;
}

/* Card stack — reuses .swipe-card from character_gallery */
.inline-select__card-stack {
  position: relative;
  width: 320px;
  max-width: 100%;
  height: 420px;
}

.inline-select__card-stack .swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.inline-select__card-stack .swipe-card:active {
  cursor: grabbing;
}

/* Stack depth effect */
.inline-select__card-stack .swipe-card[data-stack-position="0"] {
  z-index: var(--z-above);
}

.inline-select__card-stack .swipe-card[data-stack-position="1"] {
  z-index: var(--z-raised);
  transform: scale(0.95) translateY(8px);
  opacity: 0.7;
}

.inline-select__card-stack .swipe-card[data-stack-position="2"] {
  z-index: var(--z-base);
  transform: scale(0.9) translateY(16px);
  opacity: 0.4;
}

/* Action buttons */
.inline-select__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
}

.inline-select__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.inline-select__btn:hover {
  background: var(--color-surface-hover);
}

.inline-select__btn--skip {
  border-color: var(--color-danger-muted);
}

.inline-select__btn--skip:hover {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}

.inline-select__btn--select {
  border-color: var(--color-success-muted);
}

.inline-select__btn--select:hover {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.inline-select__btn-icon {
  font-size: var(--text-lg);
  line-height: 1;
}

/* Hint text */
.inline-select__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Empty state */
.inline-select__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
}

/* Resolved animation — fade out when character selected */
.inline-select--resolved {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* ============================================================
   Continue-As Consent Prompt (#4377)
   "Resume <name>?" with [Yes] [Choose different] [Start fresh]
   ============================================================ */

.continue-as-prompt {
  display: flex;
  justify-content: center;
  padding: var(--space-md) 0;
}

.continue-as__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface, #1a1a2e);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-lg, 8px);
  padding: var(--space-lg, 1.5rem) var(--space-xl, 2rem);
  max-width: 380px;
  width: 100%;
  animation: continueAsSlideIn 0.25s ease-out;
}

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

.continue-as__question {
  margin: 0;
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  text-align: center;
}

.continue-as__question strong {
  color: var(--color-accent, #9f7aea);
  font-weight: 600;
}

.continue-as__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs, 0.5rem);
  justify-content: center;
  margin-top: var(--space-xs, 0.5rem);
}

.continue-as__btn {
  padding: var(--space-xs, 0.5rem) var(--space-md, 1rem);
  border-radius: var(--radius-md, 6px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.continue-as__btn--yes {
  background: var(--color-accent, #9f7aea);
  color: #fff;
  border-color: var(--color-accent, #9f7aea);
}

.continue-as__btn--yes:hover {
  background: var(--color-accent-hover, #805ad5);
  border-color: var(--color-accent-hover, #805ad5);
}

.continue-as__btn--choose {
  background: transparent;
  color: var(--color-text-secondary, #a0aec0);
  border-color: var(--color-border, rgba(255, 255, 255, 0.2));
}

.continue-as__btn--choose:hover {
  background: var(--color-surface-hover, rgba(255, 255, 255, 0.05));
  color: var(--color-text-primary, #e0e0e0);
}

.continue-as__btn--fresh {
  background: transparent;
  color: var(--color-text-muted, #718096);
  border-color: transparent;
  font-size: var(--font-size-xs, 0.75rem);
}

.continue-as__btn--fresh:hover {
  color: var(--color-text-secondary, #a0aec0);
}

/* "Always do this" — persists auto_resume_consent=always (#4377) */
.continue-as__btn--always {
  background: transparent;
  color: var(--color-text-muted, #718096);
  border-color: transparent;
  font-size: var(--font-size-xs, 0.75rem);
}

.continue-as__btn--always:hover {
  color: var(--color-text-secondary, #a0aec0);
}

/* Resolved state (fade-out on selection) */
.continue-as--resolved {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
/*
 * Organism: Inline Panel
 * ======================
 * Panels rendered inline within the narrative flow.
 * Part of the command-driven panel lifecycle system.
 *
 * User types /sheet -> panel appears inline with pop-out controls
 */

/* ========================================
 * Inline Panel Container
 * ======================================== */

.inline-panel {
  --inline-panel-border: var(--color-accent-primary);
  --inline-panel-bg: var(--color-bg-elevated);
  --inline-panel-header-bg: var(--color-bg-tertiary);

  background: var(--inline-panel-bg);
  border: 1px solid var(--inline-panel-border);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  overflow: hidden;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.inline-panel:hover {
  border-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

/* ========================================
 * Inline Panel Header
 * ======================================== */

.inline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--inline-panel-header-bg);
  border-bottom: 1px solid var(--color-border-subtle);
}

.inline-panel__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inline-panel__controls,
.inline-panel__actions {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.inline-panel__btn,
.inline-panel__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inline-panel__btn:hover,
.inline-panel__action-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.inline-panel__btn--popout:hover {
  color: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.inline-panel__btn--dock:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.inline-panel__btn--dismiss:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* ========================================
 * Inline Panel Content
 * ======================================== */

.inline-panel__content {
  padding: var(--space-3);
  max-height: 400px;
  overflow-y: auto;
}

/* Reset some panel styles when rendered inline */
.inline-panel__content .split-panel__header,
.inline-panel__content .panel-header {
  display: none; /* Header is handled by inline-panel__header */
}

.inline-panel__content .split-panel__content {
  border: none;
  padding: 0;
}

/* ========================================
 * Inline Panel Footer
 * ======================================== */

.inline-panel__footer {
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-bg-tertiary);
  border-top: 1px solid var(--color-border-subtle);
}

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

/* ========================================
 * Inline Panel Animations
 * ======================================== */

/* Entry animation */
.inline-panel {
  animation: inlinePanelEnter 0.3s ease;
}

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

/* Pop-out animation */
.inline-panel--popping-out {
  animation: inlinePanelPopOut 0.3s ease forwards;
}

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

/* Dock animation */
.inline-panel--docking {
  animation: inlinePanelDock 0.3s ease forwards;
}

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

/* Dismiss animation */
.inline-panel--dismissing {
  animation: inlinePanelDismiss 0.2s ease forwards;
}

@keyframes inlinePanelDismiss {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

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

.inline-panel--loading {
  pointer-events: none;
}

.inline-panel--loading .inline-panel__content {
  min-height: 120px;
}

.inline-panel__loading-hint {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
  animation: inlinePanelLoadingPulse 1.5s ease-in-out infinite;
}

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

/* Content reveal after skeleton replaced */
.inline-panel__content--reveal {
  animation: inlinePanelContentReveal 0.3s ease-out;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .inline-panel,
  .inline-panel--popping-out,
  .inline-panel--docking,
  .inline-panel--dismissing,
  .inline-panel__content--reveal {
    animation: none;
    transition: opacity 0.15s ease;
  }

  .inline-panel--popping-out,
  .inline-panel--docking,
  .inline-panel--dismissing {
    opacity: 0;
  }

  .inline-panel__loading-hint {
    animation: none;
  }
}

/* ========================================
 * Mobile Styles
 * ======================================== */

@media (max-width: 768px) {
  .inline-panel__content {
    max-height: 300px;
  }

  .inline-panel__header {
    padding: var(--space-1-5) var(--space-2);
  }

  .inline-panel__footer {
    padding: var(--space-1) var(--space-2);
  }

  .inline-panel__hint {
    font-size: 10px;
  }
}

/* ========================================
 * Inline Character Sheet
 * ======================================== */

.inline-character-sheet {
  font-family: var(--font-mono);
}

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

.inline-character-sheet__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.inline-character-sheet__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-character-sheet__level {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.inline-character-sheet__vitals {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.inline-character-sheet__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-base);
}

.inline-character-sheet__hp .hp-current {
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
}

.inline-character-sheet__ac {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.inline-character-sheet__ac strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

/* Ability Scores Grid — Hexagonal */
.inline-character-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  justify-items: center;
}

.inline-ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

/* Hexagonal variant for inline abilities */
.inline-ability--hex {
  --hex-size: 56px;
  position: relative;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  justify-content: center;
  border: none;
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.inline-ability--hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-border-subtle);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.inline-ability--hex::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--color-bg-tertiary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.inline-ability--hex:hover {
  transform: scale(1.08);
}

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

.inline-ability__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* Modifier: prominent center display */
.inline-ability__modifier {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  line-height: 1.2;
}

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

/* Quick Stats Row */
.inline-character-sheet__quick-stats {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

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

.quick-stat__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.quick-stat__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Conditions */
.inline-character-sheet__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

/* Base condition-badge styles from components/_condition_badge.css */
.inline-character-sheet__conditions .condition-badge {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 10px;
}

/* Expand Hint */
.inline-character-sheet__expand-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Empty State */
.inline-character-sheet--empty {
  text-align: center;
  padding: var(--space-4);
}

.inline-character-sheet--empty p {
  margin-bottom: var(--space-3);
  color: var(--color-text-secondary);
}

/* Mobile: Stack abilities into 3-column honeycomb */
@media (max-width: 480px) {
  .inline-character-sheet__abilities {
    grid-template-columns: repeat(3, 1fr);
  }

  .inline-ability--hex {
    --hex-size: 50px;
  }

  .inline-character-sheet__quick-stats {
    flex-wrap: wrap;
  }
}

/* ========================================
 * Inline Inventory
 * ======================================== */

.inline-inventory {
  font-family: var(--font-mono);
}

.inline-inventory__currency {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-inventory__gold {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--font-weight-bold);
  color: var(--color-warning);
}

.inline-inventory__stats {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.inline-inventory__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  /* #3547: scroll inside panel instead of overflowing when >6 items. */
  max-height: 168px;
  overflow-y: auto;
}

.inline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.inline-item:hover {
  border-color: var(--color-accent-primary);
}

.inline-item__icon {
  font-size: var(--font-size-lg);
}

.inline-item__name {
  font-size: 10px;
  color: var(--color-text-secondary);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-item__qty {
  font-size: 9px;
  color: var(--color-text-muted);
}

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

.inline-category {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-hover);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  /* #3547: prevent mid-word clipping of long category labels. */
  white-space: nowrap;
  min-width: max-content;
}

.inline-inventory__hint,
.inline-spellbook__hint,
.inline-equipment__hint,
.inline-combat__hint,
.inline-party__hint,
.inline-quests__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-2);
}

.inline-inventory--empty,
.inline-spellbook--empty,
.inline-equipment--empty,
.inline-combat--empty,
.inline-party--empty,
.inline-quests--empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

/* ========================================
 * Inline Spellbook
 * ======================================== */

.inline-spellbook {
  font-family: var(--font-mono);
}

.inline-spellbook__stats {
  display: flex;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

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

.inline-stat__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.inline-stat__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-spellbook__slots {
  margin-bottom: var(--space-2);
}

.inline-spellbook__slots-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: block;
}

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

.inline-slot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.inline-slot__level {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  width: 1.2em;
  text-align: right;
}

.inline-slot__pips {
  display: flex;
  gap: 2px;
}

.inline-slot__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
}

.inline-slot__pip--filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.inline-spellbook__concentration {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5);
  background: var(--color-info-muted);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-spellbook__concentration .concentration-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inline-spellbook__concentration .concentration-spell {
  font-weight: var(--font-weight-bold);
  color: var(--color-info);
}

.inline-spellbook__prepared,
.inline-spellbook__known {
  margin-bottom: var(--space-2);
}

.inline-spellbook__prepared-label,
.inline-spellbook__known-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: block;
}

.inline-spells-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.inline-spell {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.inline-spell--more {
  background: var(--color-bg-hover);
  font-style: italic;
}

/* ========================================
 * Inline Equipment
 * ======================================== */

.inline-equipment {
  font-family: var(--font-mono);
}

.inline-equipment__ac {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-equipment__ac .ac-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.inline-equipment__ac .ac-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-equipment__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}

.inline-eq-row {
  display: flex;
  gap: var(--space-2);
}

.inline-eq-slot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.inline-eq-slot__label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  min-width: 40px;
}

.inline-eq-slot__item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-eq-slot__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.inline-eq-row--accessories {
  align-items: center;
}

.inline-eq-accessories-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.inline-eq-accessories-list {
  display: flex;
  gap: var(--space-0-5);
}

.inline-eq-accessory {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

.inline-equipment__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ========================================
 * Inline Combat Tracker
 * ======================================== */

.inline-combat {
  font-family: var(--font-mono);
}

.inline-combat__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-combat__round {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}

.inline-combat__difficulty {
  font-size: 10px;
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-combat__difficulty--easy {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.inline-combat__difficulty--medium {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.inline-combat__difficulty--hard {
  background: var(--color-danger-muted);
  color: var(--color-danger);
}

.inline-combat__difficulty--deadly {
  background: var(--color-danger);
  color: white;
}

.inline-combat__current-turn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-combat__current-turn .turn-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.inline-combat__current-turn .turn-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-combat__current-turn .turn-name--you {
  color: var(--color-accent-primary);
}

.inline-combat__initiative {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.inline-init-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
}

.inline-init-entry--active {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
}

.inline-init-entry--you {
  border-color: var(--color-success);
}

.inline-init-entry__pos {
  font-size: 10px;
  color: var(--color-text-muted);
  width: 1.5em;
  text-align: center;
}

.inline-init-entry__name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-init-entry__hp {
  width: 50px;
}

.inline-hp-bar {
  display: block;
  height: 4px;
  background: linear-gradient(to right, var(--color-success) var(--hp-pct), var(--color-bg-tertiary) var(--hp-pct));
  border-radius: 2px;
}

.inline-init-more {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.inline-combat__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.action-pip {
  font-size: var(--font-size-sm);
  padding: var(--space-0-5) var(--space-1);
  background: var(--color-bg-hover);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
}

/* ========================================
 * Inline Party
 * ======================================== */

.inline-party {
  font-family: var(--font-mono);
}

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

.inline-party__count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-party__members {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  margin-bottom: var(--space-2);
}

.inline-party-member {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.inline-party-member--you {
  border-color: var(--color-accent-primary);
}

.inline-party-member__identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.inline-party-member__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.inline-party-member__class {
  font-size: 10px;
  color: var(--color-text-muted);
}

.inline-party-member__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.inline-hp-bar-container {
  width: 40px;
  height: 6px;
  background: var(--color-bg-hover);
  border-radius: 3px;
  overflow: hidden;
}

.inline-hp-bar-fill {
  height: 100%;
  width: 100%;
  background: var(--color-success);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.inline-hp-text {
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 40px;
}

.inline-party-member__conditions {
  display: flex;
  gap: var(--space-0-5);
}

.inline-condition {
  font-size: 9px;
  padding: 2px 4px;
  background: var(--color-warning-muted);
  color: var(--color-warning);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-party__more {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

.inline-party__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Inline Quests
 * ======================================== */

.inline-quests {
  font-family: var(--font-mono);
}

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

.inline-quests__count {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.inline-quests__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.inline-quest {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
}

.inline-quest__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.inline-quest__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-quest__priority {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inline-quest__priority--main {
  background: var(--color-accent-primary);
  color: white;
}

.inline-quest__priority--side {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
}

.inline-quest__objectives {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  margin-bottom: var(--space-1);
}

.inline-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.inline-objective__check {
  color: var(--color-text-muted);
}

.inline-objective--completed {
  color: var(--color-success);
}

.inline-objective--completed .inline-objective__check {
  color: var(--color-success);
}

.inline-quest__description {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.inline-quest__meta {
  display: flex;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--color-text-muted);
}

.inline-quests__more,
.inline-quests__completed {
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1);
}

/* ========================================
 * Inline VTT/Map
 * ======================================== */

.inline-vtt {
  font-family: var(--font-mono);
}

.inline-vtt__location {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}

.inline-vtt__location-icon {
  font-size: var(--font-size-lg);
}

.inline-vtt__location-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.inline-vtt__preview {
  margin-bottom: var(--space-2);
}

.inline-vtt__coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--color-bg-tertiary);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  gap: var(--space-1);
}

.inline-vtt__coming-soon-icon .svg-icon {
  width: 24px;
  height: 24px;
  opacity: 0.5;
}

.inline-vtt__coming-soon-text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.inline-vtt__coming-soon-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.inline-vtt__coming-soon-hint kbd {
  font-family: var(--font-family-mono, monospace);
  background: var(--color-bg-hover);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.inline-vtt__combat-info,
.inline-vtt__npc-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1-5);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.inline-vtt__combat-info {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-muted);
}

.inline-vtt__combat-info .combat-status {
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}


.inline-vtt__hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
  margin-top: var(--space-2);
}

.inline-vtt--empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

/* ========================================
 * Mobile Adjustments for Inline Panels
 * ======================================== */

@media (max-width: 480px) {
  .inline-inventory__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .inline-spellbook__stats {
    flex-wrap: wrap;
  }

  .inline-eq-row {
    flex-direction: column;
  }

  .inline-party-member {
    flex-wrap: wrap;
  }

  .inline-party-member__hp {
    width: 100%;
    margin-top: var(--space-1);
  }

  .inline-hp-bar-container {
    flex: 1;
  }
}
/*
 * Organism: Lobby Inline Panel (#4185)
 * ====================================
 * Chrome for the slash-command panels rendered by `lib/lobby/command_router.ts`
 * (`/characters`, `/campaigns`, `/lobbies`, `/presets`).
 *
 * Without these rules the panel container, header, body and (critically) the
 * `__swipe-stack` mount used by `/presets` had no styles at all — the swipe
 * cards inside use `position: absolute`, so the stack collapsed to 0 height
 * and only the portrait gradient + Quick Start badge were visible. Players
 * saw a tall purple void with no name, class, race, or hook copy (#4185).
 */

.lobby-inline-panel {
  display: flex;
  flex-direction: column;
  margin: var(--space-3) 0;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: inlinePanelEnter 0.3s ease;
}

.lobby-inline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.lobby-inline-panel__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lobby-inline-panel__actions {
  display: flex;
  gap: var(--space-1);
}

.lobby-inline-panel__btn {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lobby-inline-panel__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.lobby-inline-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.lobby-inline-panel__hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

.lobby-inline-panel__hint--presets {
  font-style: italic;
  color: var(--color-text-secondary);
}

.lobby-inline-panel__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ========================================
 * Swipe stack mount for /presets (#4185)
 *
 * Cards inside use `position: absolute` (see _character_gallery.css ".swipe-card")
 * so the stack must be `position: relative` AND have a deterministic height
 * for cards to render.  Without this rule the stack collapsed to 0 height
 * and only the 130px portrait section was visible — the screenshot symptom.
 * ======================================== */

.lobby-inline-panel__swipe-stack {
  position: relative;
  width: 100%;
  /* Card body needs ~280px to fit portrait (130px) + name/class/stats/hook
     without scroll-clipping the hook copy.  Mobile scales down below. */
  min-height: 360px;
  max-width: 360px;
  margin: 0 auto;
  padding: var(--space-2) 0;
  perspective: 1000px;
  overflow: visible;
}

/* Mobile: shrink the panel chrome and the stack height so the card fits a
   single viewport without forcing the player to scroll past empty space. */
@media (max-width: 640px) {
  .lobby-inline-panel {
    margin: var(--space-2) 0;
  }

  .lobby-inline-panel__header {
    padding: var(--space-1-5) var(--space-2);
  }

  .lobby-inline-panel__body {
    padding: var(--space-2);
  }

  .lobby-inline-panel__swipe-stack {
    min-height: 320px;
    max-width: 100%;
  }
}

/* Even narrower phones: keep the card visible without overflowing the
   viewport. */
@media (max-width: 380px) {
  .lobby-inline-panel__swipe-stack {
    min-height: 300px;
  }
}

/* ========================================
 * Loading skeleton for /presets swipe stack (#4458)
 *
 * Shown while waiting for terminal:random_heroes to arrive. Replaced by
 * the swipe cards on success, or by __presets-status on empty/error.
 * ======================================== */

.lobby-inline-panel__presets-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  color: var(--color-text-muted);
}

.lobby-inline-panel__presets-loading-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ========================================
 * Empty / error state notices for /presets swipe stack (#4458)
 *
 * `data-lobby-presets-status="empty"` → "No presets available"
 * `data-lobby-presets-status="error"` → "Failed to load — retry"
 *
 * Distinct colors so players can distinguish a content gap from a
 * connection failure at a glance.
 * ======================================== */

.lobby-inline-panel__presets-status {
  margin: 0;
  padding: var(--space-4) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: center;
}

.lobby-inline-panel__presets-status[data-lobby-presets-status="empty"] {
  color: var(--color-text-muted);
}

.lobby-inline-panel__presets-status[data-lobby-presets-status="error"] {
  color: var(--color-status-error, var(--color-text-danger, #e57373));
}
/*
 * Retro Narrative 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;
}

/* Character labels: cap multi-word names (e.g. "Glorokdin Bramblenarrow") at
 * one line with ellipsis. Full name remains in the button's `title=` attr
 * for tooltip access. Scoped to --character so NPC/item/target/spell labels
 * are unaffected (#4013, redesign tracked in #4014). */
.choice-card--character .choice-card__label {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Active character marker (#4015): mirrors the lobby's "Continue Playing"
 * green-success accent so the picker visually links back to that CTA.
 * Modifier sits on the wrapper only, so #4014's card redesign won't collide.
 * Distinct from .choice-card--disposition-* (NPC) and .choice-card--rarity-*
 * (item) to avoid any state confusion. */
button.choice-card--character.choice-card--active {
  border-left-color: var(--color-accent-success, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.10) 0%,
    rgba(34, 197, 94, 0.02) 100%
  );
}

button.choice-card--character.choice-card--active:hover {
  border-left-color: var(--color-accent-success, #22c55e);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.55);
}

.choice-card__active-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-sm, 4px);
}

/* Option Cards - Generic choices */
button.choice-card--option {
  border-left: 3px solid #4ade80;
}

button.choice-card--option:hover {
  border-left-color: #86efac;
}

/* Style variants for option cards */
button.choice-card--primary {
  border-left-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

button.choice-card--primary:hover {
  border-left-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.2);
}

button.choice-card--danger {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
}

button.choice-card--danger:hover {
  border-left-color: #f87171;
  background: rgba(220, 38, 38, 0.2);
}

/* Carousel variant styling */
.character-carousel--target {
  border-color: rgba(220, 38, 38, 0.4);
}

.character-carousel--item {
  border-color: rgba(245, 158, 11, 0.4);
}

.character-carousel--spell {
  border-color: rgba(139, 92, 246, 0.4);
}

.character-carousel--option {
  border-color: rgba(74, 222, 128, 0.4);
}

/* Responsive adjustments for choice cards */
@media (max-width: 480px) {
  button.choice-card {
    min-width: 120px;
    padding: 0.75rem;
  }

  .choice-card__label {
    font-size: var(--font-size-base);
  }

  .choice-card__meta,
  .choice-card__description {
    font-size: var(--font-size-xs);
  }
}

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

/* Pending rows are redundant with the horizontal co-progress-stages strip
   above — hide them entirely so the overview shows only the active step
   plus already-completed selections (#2637-followup). */
.co-choice--pending {
  display: none;
}

.co-choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-secondary, #888);
}

.co-choice--complete .co-choice-icon {
  color: var(--accent-success, #4ade80);
}

.co-choice-label {
  font-weight: 500;
  min-width: 80px;
}

.co-choice-value {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary, #888);
}

.co-choice--complete .co-choice-value {
  color: var(--text-primary, #e0e0e0);
}

.co-check {
  display: flex;
  color: var(--accent-success, #4ade80);
}

.co-pending {
  font-style: italic;
  color: var(--text-muted, #888);
}

.co-svg {
  width: 16px;
  height: 16px;
}

.co-svg--check {
  width: 14px;
  height: 14px;
}

/* Hints Section */
.co-hints {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.2);
  border-radius: 6px;
  margin-top: 8px;
}

.co-hint-icon {
  display: flex;
  color: var(--accent-primary, #4a9eff);
  flex-shrink: 0;
}

.co-hint-text {
  font-size: var(--font-size-base);
  line-height: 1.4;
  color: var(--text-primary, #e0e0e0);
}

/* Tab styling for creation phase */
.sp-tab-btn:disabled {
  cursor: default;
  opacity: 0.8;
}

/* Mobile breakpoints
 * #2984: Full mobile layout pass — previously only font-size was tweaked,
 * which left horizontal overflow + tiny touch targets on 360-480px viewports.
 * Goals:
 *   (a) Stats readable (≥12px) — clamp font shrinks.
 *   (b) No horizontal scroll on 360px — container max-width 100%, stages wrap.
 *   (c) Touch targets ≥44×44 — tab buttons and interactive surfaces.
 *   (d) Content readable without squish — vertical stack on narrow screens.
 */
@media (max-width: 767px) {
  .character-overview,
  .character-overview-container {
    max-width: 100%;
    overflow-x: hidden;
  }

  .co-container {
    padding: 12px;
  }

  .co-progress-stages {
    flex-wrap: wrap;
    gap: 4px;
    row-gap: 4px;
  }

  .co-choice {
    font-size: 0.9em;
    min-height: 44px;
  }

  .co-choice-value {
    flex-wrap: wrap;
    min-width: 0;
    word-break: break-word;
  }

  /* Tab buttons are the primary interactive surface into this panel —
   * ensure WCAG 2.5.5 / iOS HIG 44pt touch minimum. */
  .sp-tab-btn {
    min-height: 44px;
  }
}

@media (max-width: 479px) {
  .co-container {
    padding: 10px;
    gap: 12px;
  }

  /* Clamp floor at 12px so stat labels stay readable on small screens
   * (0.85em × 14px base ≈ 11.9px; raise floor explicitly). */
  .co-choice {
    font-size: clamp(12px, 0.85em, 14px);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px;
  }

  .co-choice-label {
    min-width: 0;
  }

  .co-choice-value {
    margin-left: 0;
    justify-content: flex-start;
    text-align: left;
    max-width: 100%;
  }

  .co-progress-stages {
    font-size: clamp(11px, var(--font-size-xs), 12px);
  }

  .co-hints {
    padding: 10px;
  }

  .co-hint-text {
    font-size: clamp(12px, var(--font-size-base), 14px);
  }
}

@media (max-width: 399px) {
  .co-container {
    padding: 8px;
    gap: 10px;
  }

  /* Keep 12px floor even at the tightest viewport. */
  .co-choice {
    font-size: clamp(12px, 0.8em, 13px);
    padding: 8px;
  }
}
/* Game Log Panel
 * ========================================================================== */
/* Game Log Panel Styles */
.game-log-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary, #1a1a2e);
  color: var(--text-primary, #e0e0e0);
}

/* Filter Bar */
.gl-filters {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: var(--bg-secondary, #252545);
  border-bottom: 1px solid var(--border-color, #3a3a5a);
  flex-shrink: 0;
}

.gl-filter-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: transparent;
  color: var(--text-secondary, #888);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  user-select: none;  /* Prevent text selection on tap */
  -webkit-user-select: none;  /* Safari/iOS */
  -webkit-tap-highlight-color: transparent;  /* Remove tap highlight flash */
}

.gl-filter-btn:hover {
  background: var(--bg-hover, #2a2a4a);
  color: var(--text-primary, #e0e0e0);
}

.gl-filter-btn.gl-filter-active {
  background: var(--accent-primary, #4a9eff);
  color: #fff;
  border-color: var(--accent-primary, #4a9eff);
}

.gl-filter-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #4a9eff);
  outline-offset: 2px;
}

.gl-filter-icon {
  width: 12px;
  height: 12px;
}

/* Mobile touch target sizing for game log filters */
@media (max-width: 1024px) {
  .gl-filter-btn {
    min-height: 44px;  /* WCAG minimum */
    min-width: 44px;  /* Square touch target */
    padding: var(--space-2, 8px) var(--space-3, 12px);
  }
}

/* Entries Container */
.gl-entries {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scroll-behavior: smooth;
}

/* Empty State */
.gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  color: var(--text-muted, #888);
  padding: 24px;
}

.gl-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.gl-empty p {
  font-size: var(--font-size-base);
  margin: 0;
}

/* Log Entry */
.gl-entry {
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  font-size: var(--font-size-sm);
  animation: glEntrySlide 0.2s ease-out;
}

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

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

/* Entry Header */
.gl-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.gl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.gl-svg-icon {
  width: 18px;
  height: 18px;
}

.gl-result {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--accent-success, #4ade80);
}

.gl-time {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

/* Entry Body */
.gl-body {
  padding-left: 32px;
}

.gl-message {
  color: var(--text-primary, #e0e0e0);
  line-height: 1.4;
}

/* Details Section */
.gl-details {
  margin-top: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
}

.gl-details summary {
  cursor: pointer;
  color: var(--accent-primary, #4a9eff);
}

.gl-details summary:hover {
  text-decoration: underline;
}

.gl-dice, .gl-modifier, .gl-detail-content {
  padding: 4px 0;
  font-family: var(--font-mono, monospace);
}

/* Advantage/Disadvantage dice display */
.gl-dice-adv-dis {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gl-dice-label {
  font-weight: bold;
  color: var(--color-text-secondary, #888);
  font-size: 0.9em;
}

.gl-dice-kept {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 1.1em;
}

.gl-dice-kept.gl-adv {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary, #98c379);
  border: 1px solid rgba(152, 195, 121, 0.4);
}

.gl-dice-kept.gl-dis {
  background: rgba(224, 108, 117, 0.2);
  color: var(--color-accent-error, #e06c75);
  border: 1px solid rgba(224, 108, 117, 0.4);
}

.gl-dice-discarded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.95em;
  color: var(--color-text-muted, #888);
  background: rgba(128, 128, 128, 0.1);
  text-decoration: line-through;
  opacity: 0.6;
}

/* Entry Type Variations */
.gl-entry.dice_roll {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.gl-entry.dice_roll .gl-icon {
  color: var(--accent-success, #4ade80);
}

.gl-entry.combat {
  border-left: 3px solid var(--accent-danger, #f87171);
}

.gl-entry.combat .gl-icon {
  color: var(--accent-danger, #f87171);
}

.gl-entry.inventory {
  border-left: 3px solid var(--accent-warning, #fbbf24);
}

.gl-entry.inventory .gl-icon {
  color: var(--accent-warning, #fbbf24);
}

.gl-entry.character {
  border-left: 3px solid var(--accent-info, #60a5fa);
}

.gl-entry.character .gl-icon {
  color: var(--accent-info, #60a5fa);
}

.gl-entry.general {
  border-left: 3px solid var(--border-color, #3a3a5a);
}

/* Scrollbar */
.gl-entries::-webkit-scrollbar {
  width: 6px;
}

.gl-entries::-webkit-scrollbar-track {
  background: transparent;
}

.gl-entries::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

.gl-entries::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #888);
}
/* ==========================================================================
 * Panel Highlight Animations (AI DM Panel Tools)
 * Used by highlight_panel tool to draw player attention
 * ========================================================================== */

/* Pulse Effect - Pulsing border animation */
.split-panel--highlight-pulse {
  animation: panelPulse 0.6s ease-in-out 3;
}

@keyframes panelPulse {
  0%, 100% {
    border-color: var(--accent-primary, #4a9eff);
    box-shadow: 0 0 0 0 rgba(74, 158, 255, 0);
  }
  50% {
    border-color: var(--accent-primary, #4a9eff);
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.3);
  }
}

/* Glow Effect - Soft glowing aura */
.split-panel--highlight-glow {
  animation: panelGlow 1s ease-in-out infinite alternate;
}

@keyframes panelGlow {
  from {
    box-shadow:
      0 0 5px rgba(74, 158, 255, 0.3),
      0 0 10px rgba(74, 158, 255, 0.2),
      0 0 15px rgba(74, 158, 255, 0.1);
  }
  to {
    box-shadow:
      0 0 10px rgba(74, 158, 255, 0.5),
      0 0 20px rgba(74, 158, 255, 0.3),
      0 0 30px rgba(74, 158, 255, 0.2);
  }
}

/* Border Effect - Quick border flash */
.split-panel--highlight-border {
  animation: panelBorderFlash 0.3s ease-out 2;
}

@keyframes panelBorderFlash {
  0% {
    border-color: var(--border-color, #3a3a5a);
  }
  50% {
    border-color: var(--accent-warning, #fbbf24);
    box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.3);
  }
  100% {
    border-color: var(--accent-warning, #fbbf24);
  }
}

/* Shake Effect - Attention-grabbing shake */
.split-panel--highlight-shake {
  animation: panelShake 0.4s ease-in-out 2;
}

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

/* Combat Effect - Red pulsing for combat alerts */
.split-panel--highlight-combat {
  animation: panelCombat 0.5s ease-in-out 3;
}

@keyframes panelCombat {
  0%, 100% {
    border-color: var(--accent-danger, #f87171);
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0);
  }
  50% {
    border-color: var(--accent-danger, #f87171);
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.4);
  }
}

/* Success Effect - Green glow for positive events */
.split-panel--highlight-success {
  animation: panelSuccess 0.6s ease-in-out 2;
}

@keyframes panelSuccess {
  0%, 100% {
    border-color: var(--accent-success, #4ade80);
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
  50% {
    border-color: var(--accent-success, #4ade80);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  }
}

/* Update Effect - Subtle flash for data synchronization */
.split-panel--highlight-update {
  animation: panelUpdate 0.4s ease-out 1;
}

@keyframes panelUpdate {
  0% {
    background-color: inherit;
  }
  30% {
    background-color: rgba(74, 158, 255, 0.08);
  }
  100% {
    background-color: inherit;
  }
}

/* Update Badge - Shows in panel header when data updated */
.split-panel__update-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: var(--accent-primary, #4a9eff);
  border-radius: 50%;
  animation: updateBadgePulse 0.6s ease-out 2;
  pointer-events: none;
  z-index: var(--z-sticky);
}

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

/* Panel Tooltip - Floating message from AI DM */
.split-panel__tooltip {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  padding: 8px 12px;
  background: var(--bg-elevated, #2a2a4a);
  border: 1px solid var(--accent-primary, #4a9eff);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-floating);
  animation: tooltipFadeIn 0.2s ease-out;
  pointer-events: none;
}

.split-panel__tooltip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent-primary, #4a9eff);
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-90%);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(-100%);
  }
}

/* Tooltip variants */
.split-panel__tooltip--warning {
  border-color: var(--accent-warning, #fbbf24);
}

.split-panel__tooltip--warning::after {
  border-top-color: var(--accent-warning, #fbbf24);
}

.split-panel__tooltip--danger {
  border-color: var(--accent-danger, #f87171);
}

.split-panel__tooltip--danger::after {
  border-top-color: var(--accent-danger, #f87171);
}

.split-panel__tooltip--success {
  border-color: var(--accent-success, #4ade80);
}

.split-panel__tooltip--success::after {
  border-top-color: var(--accent-success, #4ade80);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .split-panel--highlight-pulse,
  .split-panel--highlight-glow,
  .split-panel--highlight-border,
  .split-panel--highlight-shake,
  .split-panel--highlight-combat,
  .split-panel--highlight-success {
    animation: none;
  }

  .split-panel--highlight-pulse,
  .split-panel--highlight-glow {
    box-shadow: 0 0 0 2px var(--accent-primary, #4a9eff);
  }

  .split-panel--highlight-border {
    border-color: var(--accent-warning, #fbbf24);
  }

  .split-panel--highlight-combat {
    border-color: var(--accent-danger, #f87171);
  }

  .split-panel--highlight-success {
    border-color: var(--accent-success, #4ade80);
  }
}

/* ==========================================================================
 * Creation Pane Highlight Support
 * Ensure highlight animations work on character creation panes
 * ========================================================================== */

.creation-pane.split-panel--highlight-pulse,
.creation-pane.split-panel--highlight-glow,
.creation-pane.split-panel--highlight-border,
.creation-pane.split-panel--highlight-shake {
  animation-duration: 1.5s;
  animation-iteration-count: 2;
}
/* ==========================================================================
 * Character Creation Accordion (Panel-First UX)
 * Collapsible sections for race, class, background, etc.
 * ========================================================================== */

.sp-creation-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

/* Individual accordion section */
.sp-creation-section {
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sp-creation-section:hover {
  border-color: var(--accent-primary, #4a9eff);
}

/* Section states */
.sp-creation-section.completed {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.sp-creation-section.active {
  border-color: var(--accent-primary, #4a9eff);
  box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.2);
}

.sp-creation-section.locked {
  opacity: 0.5;
  pointer-events: none;
}

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

/* Section header (always visible) */
.sp-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.sp-section-header:hover {
  background: var(--bg-hover, #2a2a4a);
}

.sp-section-icon {
  font-size: var(--font-size-xl);
  width: 24px;
  text-align: center;
}

.sp-section-title {
  flex: 1;
  font-weight: 500;
  font-size: var(--font-size-base);
}

.sp-section-value {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-creation-section.completed .sp-section-value {
  color: var(--accent-success, #4ade80);
}

.sp-section-toggle {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  transition: transform 0.2s ease;
}

.sp-creation-section.expanded .sp-section-toggle {
  transform: rotate(180deg);
}

.sp-section-check {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-md);
}

/* Section options container (collapsible) */
.sp-section-options {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.sp-creation-section.expanded .sp-section-options {
  /* Expand to full natural height — parent panel handles scrolling.
     Removes nested scroll that trapped mouse wheel events (#1343). */
  max-height: none;
  overflow-y: visible;
  border-top-color: var(--border-color, #3a3a5a);
}

/* Options grid */
.sp-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 12px;
}

/* Option card */
.sp-option-card {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.sp-option-card:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.sp-option-card.selected {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.sp-option-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: 6px;
}

.sp-option-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: 2px;
}

.sp-option-preview {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  line-height: 1.3;
}

/* Option list (alternative to grid) */
.sp-options-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.sp-option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sp-option-row:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.sp-option-row.selected {
  border-color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

.sp-option-row-info {
  flex: 1;
  min-width: 0;
}

.sp-option-row-name {
  font-size: var(--font-size-base);
  font-weight: 500;
}

.sp-option-row-desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-option-row-check {
  color: var(--accent-success, #4ade80);
  font-size: var(--font-size-lg);
}

/* Scrollbar for options */
.sp-section-options::-webkit-scrollbar {
  width: 6px;
}

.sp-section-options::-webkit-scrollbar-track {
  background: transparent;
}

.sp-section-options::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5a);
  border-radius: 3px;
}

/* Create Character Button (shown when complete) */
.sp-create-character-section {
  margin-top: 12px;
  padding: 12px;
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid var(--accent-success, #4ade80);
  border-radius: 6px;
  text-align: center;
}

.sp-create-btn {
  width: 100%;
  padding: 12px 20px;
  background: var(--accent-success, #4ade80);
  border: none;
  border-radius: 6px;
  color: #1a1a2e;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-create-btn:hover {
  background: #5be890;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}

.sp-create-btn:active {
  transform: translateY(0);
}

/* Reduced motion for accordion */
@media (prefers-reduced-motion: reduce) {
  .sp-section-options {
    transition: none;
  }

  .sp-section-toggle {
    transition: none;
  }
}

/* ========================================
   Cumulative Character Preview (Phase 6)
   ======================================== */

.cp-sheet {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  font-size: var(--font-size-base);
}

.cp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted, #888);
}

.cp-empty-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: 12px;
  opacity: 0.5;
}

.cp-header {
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle, #333);
}

.cp-name {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-identity {
  color: var(--text-secondary, #aaa);
  margin-top: 4px;
}

.cp-placeholder {
  color: var(--text-muted, #888);
  font-style: italic;
}

.cp-level {
  color: var(--accent-primary, #60a5fa);
  margin-left: 8px;
}

.cp-section {
  background: var(--bg-elevated, #1a1a2e);
  border-radius: 6px;
  padding: 10px;
}

.cp-section-title {
  font-weight: bold;
  color: var(--accent-primary, #60a5fa);
  margin-bottom: 8px;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.cp-ability {
  text-align: center;
  padding: 6px;
  background: var(--bg-surface, #252540);
  border-radius: 4px;
  position: relative;
}

.cp-ability--boosted {
  border: 1px solid var(--accent-success, #4ade80);
}

.cp-ability-name {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

.cp-ability-score {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-ability-mod {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
}

.cp-ability-bonus {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: var(--font-size-xs);
  color: var(--accent-success, #4ade80);
  font-weight: bold;
}

.cp-ability-source {
  margin-top: 8px;
  font-size: var(--font-size-sm);
  color: var(--accent-success, #4ade80);
  text-align: center;
}

.cp-abilities-pending {
  text-align: center;
  padding: 8px;
}

/* Vitals */
.cp-vitals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cp-vital {
  text-align: center;
}

.cp-vital-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

.cp-vital-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--text-primary, #e0e0e0);
}

.cp-vital-note {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
}

/* Proficiencies */
.cp-prof-row {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--font-size-sm);
}

.cp-prof-label {
  color: var(--text-muted, #888);
  min-width: 60px;
}

.cp-prof-value {
  color: var(--text-primary, #e0e0e0);
}

/* Traits & Features (#2941)
   -----------------------------------------------------------
   `.cp-traits` / `.cp-features` are the list containers emitted by
   creation_preview_controller.js for the dynamically-rendered Traits (race)
   and Features (class level 1) blocks. The per-item `.cp-trait` / `.cp-feature`
   styles below are shared so both blocks render identically. */
.cp-traits, .cp-features {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-trait, .cp-feature {
  margin-bottom: 6px;
  padding: 4px 6px;
  background: var(--bg-surface, #252540);
  border-radius: 4px;
}

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

.cp-trait-desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-top: 2px;
  line-height: 1.4;
}

/* Racial bonus "source" badge on ability chips (#2941).
   The base +N number is already styled by `.preview-ability__bonus` in
   organisms/_creation_preview.css; here we style just the inline source label
   (e.g. "Racial") that explains *why* the score is boosted. */
.preview-ability__bonus-source {
  display: inline-block;
  margin-left: 2px;
  font-size: var(--font-size-2xs, 0.7rem);
  font-weight: 400;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Equipment */
.cp-equipment-count {
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #aaa);
}

/* Form Mode: Create Character Button */
.cp-create-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  margin-top: auto;
  border-top: 1px solid var(--border-subtle, #333);
  background: var(--bg-elevated, #252540);
}

.create-character-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font-size: var(--font-size-md);
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bg-base, #0a0a0f);
  background: linear-gradient(135deg, var(--accent-success, #34d399) 0%, var(--accent-primary, #60a5fa) 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 8px rgba(52, 211, 153, 0.3);
}

.create-character-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(52, 211, 153, 0.4);
}

.create-character-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(52, 211, 153, 0.2);
}

.create-character-btn .btn--icon {
  font-size: var(--font-size-xl);
}

.create-character-btn .btn-text {
  flex: 1;
  text-align: center;
}

.create-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  text-align: center;
  font-style: italic;
}

/* ============================================
   6-PANE CHARACTER CREATION GRID
   ============================================
   tmux-style grid layout for character creation.
   Replaces the split layout during character creation phase.
   Layout:
   ┌─────────────────┬─────────────────┬─────────────────┐
   │  AI/Narrative   │  Selection Pane │ Character Prev  │
   │  (DM dialogue)  │ Race→Class→Bg   │ (live preview)  │
   │                 │  (dynamic)      │                 │
   ├─────────────────┼─────────────────┼─────────────────┤
   │ Abilities/Skills│    Equipment    │     Spells      │
   │  (point buy,    │  (choices grid) │  (cantrips +    │
   │   skill picks)  │                 │   known spells) │
   └─────────────────┴─────────────────┴─────────────────┘
*/

.creation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
  width: 100%;
  padding: 4px;
  background: var(--bg-base, #0a0a0f);
  box-sizing: border-box;
}

.creation-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, #1a1a2e);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  overflow: hidden;
  min-height: 0; /* Allow shrinking in grid */
}

.creation-pane .pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-elevated, #252540);
  border-bottom: 1px solid var(--border-subtle, #333);
  flex-shrink: 0;
}

.creation-pane .pane-title {
  font-size: var(--font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary, #60a5fa);
}

.creation-pane .pane-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--accent-primary, #60a5fa);
  color: var(--bg-base, #0a0a0f);
  border-radius: 10px;
  font-weight: 600;
}

.creation-pane .pane-badge:empty {
  display: none;
}

.creation-pane .pane-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  min-height: 0; /* Allow shrinking */
}

.creation-pane .pane-placeholder {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 20px;
}

/* Error fallback UI for creation pane render failures */
.creation-pane .pane-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--error-color, #cc6666);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 20px;
}

.creation-pane .pane-error .error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error-bg, rgba(204, 102, 102, 0.2));
  color: var(--error-color, #cc6666);
  font-weight: bold;
  font-size: var(--font-size-sm);
}

.creation-pane .pane-error .error-text {
  font-style: italic;
}

/* Narrative Pane - DM dialogue and input */
.pane-narrative {
  display: flex;
  flex-direction: column;
}

.pane-narrative .pane-content {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.pane-narrative .narrative-box {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pane-narrative .narrative-output {
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.pane-narrative .narrative-input-area {
  flex-shrink: 0;
  border-top: 1px solid var(--border-subtle, #333);
  padding: 8px;
  background: var(--bg-elevated, #252540);
}

/* Selection Pane - Race/Class/Background options */
.pane-selection .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 8px;
}

/* Option cards for race/class/background selection */
.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  background: var(--bg-elevated, #252540);
  border: 1px solid var(--border-subtle, #333);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: center;
  min-height: 60px;
}

.option-card:hover {
  background: var(--bg-hover, #2a2a45);
  border-color: var(--accent-primary, #60a5fa);
  transform: translateY(-1px);
}

.option-card.selected {
  background: var(--accent-primary-dim, #1e3a5f);
  border-color: var(--accent-primary, #60a5fa);
}

.option-card .option-name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.option-card .option-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-top: 4px;
}

/* Preview Pane - Live character sheet */
.pane-preview .pane-content {
  padding: 8px;
}

/* Abilities Pane - Point buy and skills */
.pane-abilities .pane-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
}

/* Equipment Pane */
.pane-equipment .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  align-content: start;
  padding: 8px;
}

/* Spells Pane */
.pane-spells .pane-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  align-content: start;
  padding: 8px;
}

/* Complete badge shown when core selections are done */
.selection-complete-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.selection-complete-badge .checkmark {
  font-size: var(--font-size-4xl);
  color: var(--accent-success, #4ade80);
  margin-bottom: 8px;
}

.selection-complete-badge .complete-text {
  font-size: var(--font-size-md);
  color: var(--text-primary, #e0e0e0);
  font-weight: 600;
}

.selection-complete-badge .selections-summary {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  margin-top: 8px;
}

/* Responsive: Stack on narrower screens */
@media (max-width: 1100px) {
  .creation-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
}

/* Mobile: Single column with prioritized layout */
/* #4324: was 700px (drift); canonical mobile max is 767px */
@media (max-width: 767px) {
  .creation-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;  /* Allow panes to size naturally */
    gap: 8px;  /* Increased spacing for touch targets */
    padding: 8px;
  }

  /* Narrative pane - primary (taller for conversation) */
  .pane-narrative {
    min-height: 300px;
    max-height: 50vh;  /* Don't dominate entire screen */
  }

  /* Selection pane - important (expandable) */
  .pane-selection {
    min-height: 200px;
  }

  /* Preview pane - compact summary */
  .pane-preview {
    min-height: 150px;
    max-height: 200px;
  }

  /* Secondary panes - collapsed by default, expandable */
  .pane-abilities,
  .pane-equipment,
  .pane-spells {
    min-height: 60px;  /* Just show header when collapsed */
  }

  /* Make pane headers tappable to expand/collapse on mobile */
  .creation-pane .pane-header {
    cursor: pointer;
    padding: 12px 16px;  /* Larger touch target */
    -webkit-user-select: none;
    user-select: none;
  }

  .creation-pane .pane-header::after {
    content: '▼';
    font-size: var(--font-size-xs);
    color: var(--text-muted, #888);
    margin-left: auto;
  }

  /* Collapsed state for secondary panes */
  .creation-pane.collapsed .pane-content {
    display: none;
  }

  .creation-pane.collapsed .pane-header::after {
    content: '';
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    background-color: currentColor;
    mask-image: var(--icon-play);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-image: var(--icon-play);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
  }

  /* Increase touch targets for mobile */
  .creation-pane .chip,
  .creation-pane button {
    min-height: 44px;  /* WCAG minimum touch target */
    padding: 12px 16px;
  }

  /* Stack ability score controls vertically */
  .ability-row {
    flex-direction: column;
    gap: 8px;
  }
}


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

/* Landscape phone / small tablet band (640-767px): prefer 2 columns over
   the ≤767px 1-col rule so landscape phone viewports (e.g. 720x1024) don't
   get an awkward single tall column. See coord #2980 / squish audit #2682. */
@media (min-width: 640px) and (max-width: 767px) {
  .masonry-options {
    column-count: 2;
  }
}

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

/* Responsive: Short/landscape phones (400-479px) — tighten preview so controls remain visible */
@media (min-width: 400px) and (max-width: 479px) {
  .wizard-preview {
    max-height: 160px;
  }
}

/* Responsive: Very small viewports (<400px) — preview shrinks to leave room for content */
@media (max-width: 399px) {
  .creation-wizard {
    grid-template-rows: auto 1fr;
  }

  .wizard-preview {
    max-height: 120px;
  }
}

/* ==========================================================================
 * DM Warning Panel - Risky Action Confirmation
 * Shows when player attempts risky actions (attacking friendlies, etc.)
 * ========================================================================== */

.dm-warning-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 480px;
  background: var(--bg-elevated, #1e1e2e);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: var(--z-warning);
  animation: warningPanelSlideIn 0.25s ease-out;
  overflow: hidden;
}

@keyframes warningPanelSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Warning header with severity color */
.dm-warning-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #3a3a5a);
}

.dm-warning-icon {
  font-size: var(--font-size-3xl);
  flex-shrink: 0;
}

.dm-warning-title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.dm-warning-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: var(--font-size-2xl);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s ease;
}

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

/* Warning body content */
.dm-warning-body {
  padding: 20px;
}

.dm-warning-message {
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 16px;
}

/* Consequences list */
.dm-warning-consequences {
  margin-bottom: 16px;
}

.dm-warning-consequences-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dm-warning-consequences-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dm-warning-consequences-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary, #aaa);
}

.dm-warning-consequences-list li::before {
  content: '•';
  color: var(--accent-danger, #f87171);
}

/* Alternatives section */
.dm-warning-alternatives {
  margin-bottom: 16px;
  padding: 12px;
  background: var(--bg-secondary, #252545);
  border-radius: 6px;
}

.dm-warning-alternatives-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.dm-warning-alternative-btn {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dm-warning-alternative-btn:last-child {
  margin-bottom: 0;
}

.dm-warning-alternative-btn:hover {
  border-color: var(--accent-primary, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

/* Warning actions (confirm/cancel) */
.dm-warning-actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-color, #3a3a5a);
  background: var(--bg-secondary, #252545);
}

.dm-warning-cancel-btn {
  flex: 1;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dm-warning-cancel-btn:hover {
  background: var(--bg-hover, #2a2a4a);
  color: var(--text-primary, #e0e0e0);
  border-color: var(--text-muted, #888);
}

.dm-warning-confirm-btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ==========================================================================
 * Severity-Based Styling
 * ========================================================================== */

/* CAUTION - Yellow/Warning theme */
.dm-warning-panel.warning-caution {
  border: 2px solid var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-caution .dm-warning-header {
  background: rgba(251, 191, 36, 0.1);
  border-bottom-color: rgba(251, 191, 36, 0.3);
}

.dm-warning-panel.warning-caution .dm-warning-icon {
  color: var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-caution .dm-warning-confirm-btn {
  background: var(--accent-warning, #fbbf24);
  color: #1a1a2e;
}

.dm-warning-panel.warning-caution .dm-warning-confirm-btn:hover {
  background: #eab308;
}

.dm-warning-panel.warning-caution .dm-warning-consequences-list li::before {
  color: var(--accent-warning, #fbbf24);
}

/* DANGER - Red/Danger theme */
.dm-warning-panel.warning-danger {
  border: 2px solid var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-danger .dm-warning-header {
  background: rgba(248, 113, 113, 0.1);
  border-bottom-color: rgba(248, 113, 113, 0.3);
}

.dm-warning-panel.warning-danger .dm-warning-icon {
  color: var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-danger .dm-warning-confirm-btn {
  background: var(--accent-danger, #f87171);
  color: #fff;
}

.dm-warning-panel.warning-danger .dm-warning-confirm-btn:hover {
  background: #ef4444;
}

/* CRITICAL - Purple/Critical theme with shake animation */
.dm-warning-panel.warning-critical {
  border: 2px solid #a855f7;
  animation: warningPanelSlideIn 0.25s ease-out, criticalPulse 2s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(168, 85, 247, 0);
  }
  50% {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(168, 85, 247, 0.4);
  }
}

.dm-warning-panel.warning-critical .dm-warning-header {
  background: rgba(168, 85, 247, 0.15);
  border-bottom-color: rgba(168, 85, 247, 0.3);
}

.dm-warning-panel.warning-critical .dm-warning-icon {
  color: #a855f7;
  animation: criticalShake 0.5s ease-in-out infinite;
}

@keyframes criticalShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.dm-warning-panel.warning-critical .dm-warning-confirm-btn {
  background: #a855f7;
  color: #fff;
}

.dm-warning-panel.warning-critical .dm-warning-confirm-btn:hover {
  background: #9333ea;
}

.dm-warning-panel.warning-critical .dm-warning-consequences-list li::before {
  color: #a855f7;
}

/* Warning overlay backdrop */
.dm-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-warning);
  animation: overlayFadeIn 0.2s ease-out;
}

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

/* Expiration timer */
.dm-warning-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #888);
  padding: 8px 20px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.dm-warning-timer-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 2px;
  overflow: hidden;
}

.dm-warning-timer-fill {
  height: 100%;
  background: var(--accent-primary, #4a9eff);
  transition: width 1s linear;
}

.dm-warning-panel.warning-caution .dm-warning-timer-fill {
  background: var(--accent-warning, #fbbf24);
}

.dm-warning-panel.warning-danger .dm-warning-timer-fill {
  background: var(--accent-danger, #f87171);
}

.dm-warning-panel.warning-critical .dm-warning-timer-fill {
  background: #a855f7;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .dm-warning-panel,
  .dm-warning-overlay {
    animation: none;
  }

  .dm-warning-panel.warning-critical {
    animation: none;
  }

  .dm-warning-panel.warning-critical .dm-warning-icon {
    animation: none;
  }
}

/* ========================================
   Suggestions Panel
   ======================================== */

/* Main container for suggestions panel */
.suggestions-panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4, 16px);
  gap: var(--space-4, 16px);
  background: var(--bg-secondary, #16161f);
}

/* Header section */
.suggestions-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-color, #333);
}

.suggestions-header .panel-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}

.suggestions-header .panel-subtitle {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  margin: 0;
}

/* Scrollable suggestions list */
.suggestions-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) 0;
}

/* Individual suggestion item */
.suggestion-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-3, 12px);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-raised, #1f1f3a);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  gap: var(--space-2, 8px);
}

.suggestion-item:hover {
  border-color: var(--primary, #7c3aed);
  background: var(--surface-hover, #252540);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.suggestion-item.selected {
  border-color: var(--primary, #7c3aed);
  background: var(--surface-hover, #252540);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

/* Suggestion header row with icon, action, and checkbox */
.suggestion-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

.suggestion-icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.suggestion-action {
  flex: 1;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
}

.suggestion-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary, #7c3aed);
}

/* Example suggestions */
.suggestion-examples {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  padding-left: var(--space-8, 36px); /* Align with action text */
  line-height: 1.4;
}

.suggestion-example-link {
  color: var(--primary, #7c3aed);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.2s ease;
}

.suggestion-example-link:hover {
  color: var(--primary-light, #9f67ff);
  text-decoration: none;
}

/* Footer with batch button and custom input */
.suggestions-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--border-color, #333);
}

.suggestion-batch-btn {
  width: 100%;
  padding: var(--space-3, 12px);
  background: var(--primary, #7c3aed);
  color: white;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.suggestion-batch-btn:hover {
  background: var(--primary-dark, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
}

.suggestion-batch-btn:active {
  transform: translateY(0);
}

.suggestion-custom-input {
  width: 100%;
  padding: var(--space-3, 12px);
  background: var(--bg-tertiary, #1f1f3a);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.suggestion-custom-input:focus {
  outline: none;
  border-color: var(--primary, #7c3aed);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.suggestion-custom-input::placeholder {
  color: var(--text-muted, #888);
}

/* Empty state */
.suggestions-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 200px;
  text-align: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
}

.suggestions-empty-state p {
  margin: 0;
  color: var(--text-primary, #e0e0e0);
}

.suggestions-empty-state .text-muted {
  font-size: var(--font-size-base);
  color: var(--text-muted, #888);
  max-width: 300px;
  line-height: 1.5;
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .suggestions-panel-content {
    padding: var(--space-3, 12px);
  }

  .suggestion-item {
    padding: var(--space-2, 8px);
  }

  .suggestion-examples {
    padding-left: var(--space-6, 24px);
  }
}

/* ==========================================================================
 * Panel Component Styles — Import Hub
 * Split into focused files under panels/ for maintainability (Phase 3 Task 8)
 * Original: 6,569 LOC -> 14 files, largest 783 LOC
 * ========================================================================== */

/* Equipment panels */




/* Choice card system */




/* Game panels */




/* Character creation flow */







/* DM tools */


/*
 * Terminal Error Page Organism (#437)
 * ====================================
 * Styled error page replacing raw plain-text error responses.
 * Uses design tokens from: terminal/_tokens.css
 */

.terminal-error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-primary, #1a1a1a);
  padding: 1rem;
}

.terminal-error-content {
  text-align: center;
  max-width: 440px;
  width: 100%;
}

.terminal-error-icon {
  color: var(--color-accent-warning, #d4b06e);
  margin-bottom: 1.25rem;
}

.terminal-error-title {
  color: var(--color-text-primary, #e0e0e0);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.terminal-error-message {
  color: var(--color-text-secondary, #a0a0a0);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.terminal-error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.terminal-error-button {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}

.terminal-error-button--primary {
  background: var(--color-accent-primary, #5a9fd8);
  color: var(--color-text-inverse, #1a1a1a);
}

.terminal-error-button--primary:hover {
  background: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 85%, white);
}

.terminal-error-button--secondary {
  background: transparent;
  color: var(--color-text-secondary, #a0a0a0);
  border: 1px solid var(--color-border-default, #404040);
}

.terminal-error-button--secondary:hover {
  background: var(--color-bg-secondary, #2d2d2d);
  color: var(--color-text-primary, #e0e0e0);
}

.terminal-error-button:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}
/*
 * Terminal Show Page Styles
 * Extracted from app/views/terminal/show.html.erb inline styles
 * Organized by component and using design tokens from _tokens.css
 */

/* ========================================
   ROOM INDICATOR STYLES
   ======================================== */

.room-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  font-weight: var(--font-weight-medium);
  margin-right: var(--space-3);
}

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

.room-name {
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

/* Room-specific colors */
.room-indicator[data-room="lobby"],
.room-indicator[data-room="character_creation"] {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--color-accent-primary);
}

.room-indicator[data-room="combat"] {
  background: rgba(239, 68, 68, 0.2);
  border-color: var(--color-accent-error);
  animation: pulse 2s infinite;
}

.room-indicator[data-room="tavern"],
.room-indicator[data-room="town"],
.room-indicator[data-room="wilderness"],
.room-indicator[data-room="dungeon"] {
  background: rgba(34, 197, 94, 0.2);
  border-color: var(--color-accent-secondary);
}

/* ========================================
   LOCK STATUS BADGE STYLES
   ======================================== */

.lock-status {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--duration-normal), transform var(--duration-normal);
  margin-left: var(--space-3);
}

.lock-status[data-locked="false"] {
  background: rgba(34, 197, 94, 0.2);
}

.lock-status[data-locked="true"] {
  background: rgba(234, 179, 8, 0.2);
}

.lock-icon {
  font-size: var(--font-size-lg);
  filter: drop-shadow(0 0 2px currentColor);
}

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

/* ========================================
   PENDING ACTIONS PANEL STYLES
   ======================================== */

.pending-actions-panel {
  position: fixed;
  bottom: 120px;
  right: 20px;
  width: 320px;
  max-height: 350px;
  overflow-y: auto;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-accent-warning);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  z-index: var(--z-floating);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
  animation: slideInRight var(--duration-normal) ease-out;
}

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

.pending-actions-panel.has-pending {
  animation: slideInRight var(--duration-normal) ease-out, pendingPulse 2s ease-in-out 0.3s;
}

@keyframes pendingPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(245, 158, 11, 0.6); }
}

.pending-header {
  color: var(--color-accent-warning);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.pending-header::before {
  content: '⚠️';
  font-size: var(--font-size-lg);
}

.pending-action {
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.pending-description {
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.pending-reason {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-bottom: var(--space-2);
}

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

.approve-btn, .reject-btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.approve-btn {
  background: var(--color-accent-secondary);
  color: white;
}

.approve-btn:hover {
  background: color-mix(in srgb, var(--color-accent-secondary) 80%, black);
}

.reject-btn {
  background: var(--color-accent-error);
  color: white;
}

.reject-btn:hover {
  background: var(--color-danger-emphasis);
}

/* Rejection Dialog Inline */
.reject-dialog {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
}

.reject-dialog-header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-error);
  margin-bottom: var(--space-2);
}

.reject-reason-input {
  width: 100%;
  padding: var(--space-2) var(--space-2-5);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-2);
}

.reject-reason-input:focus {
  outline: none;
  border-color: var(--color-accent-error);
  background: rgba(0, 0, 0, 0.5);
}

.reject-dialog-buttons {
  display: flex;
  gap: var(--space-2);
}

.confirm-reject-btn {
  flex: 1;
  padding: var(--space-1-5) var(--space-3);
  background: var(--color-accent-error);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.confirm-reject-btn:hover {
  background: var(--color-danger-emphasis);
}

.cancel-reject-btn {
  padding: var(--space-1-5) var(--space-3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-xs);
}

.cancel-reject-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--color-text-primary);
}

/* ========================================
   SUGGESTIONS PANEL STYLES
   ======================================== */

.suggestions-panel {
  margin-top: var(--space-4);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  animation: slideIn var(--duration-normal) ease-out;
}

.suggestions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-accent-primary);
}

.suggestions-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

.suggestions-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

.suggestions-close:hover {
  color: var(--color-text-primary);
}

.suggestions-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.suggestion-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  position: relative;
}

.suggestion-item:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: var(--color-accent-primary);
  transform: translateX(4px);
}

.suggestion-item.selected {
  background: rgba(124, 58, 237, 0.3);
  border-color: var(--color-accent-primary);
  border-width: 2px;
}

.suggestion-item.selected::before {
  content: '✓';
  position: absolute;
  right: var(--space-2);
  top: var(--space-2);
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

.suggestion-header-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1-5);
}

.suggestion-icon {
  font-size: var(--font-size-2xl);
  flex-shrink: 0;
}

.suggestion-action {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  flex: 1;
}

.suggestion-checkbox {
  margin-left: auto;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.suggestion-examples {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  margin-left: 26px;
  font-style: italic;
}

.suggestion-example-link {
  color: var(--color-accent-purple);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}

.suggestion-example-link:hover {
  color: var(--color-accent-primary);
  text-decoration: underline;
}

.suggestions-footer {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(124, 58, 237, 0.3);
}

.suggestion-batch-btn {
  flex: 1;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
  transition: background var(--duration-fast);
}

.suggestion-batch-btn:hover {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
}

.suggestion-custom-input {
  flex: 2;
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.suggestion-custom-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  background: rgba(0, 0, 0, 0.5);
}

.suggestion-custom-input::placeholder {
  color: var(--color-text-muted);
}

/* ========================================
   NARRATIVE & SIDE PANEL LAYOUT
   ======================================== */

.narrative-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

.side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-accent-primary);
}

.side-panel-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

.side-panel-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

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

.side-panel-content {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* Terminal-style content formatting */
.side-panel-content pre {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.side-panel-content .stat-block {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: var(--radius-sm);
}

.side-panel-content .stat-header {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-accent-primary);
  padding-bottom: var(--space-1);
}

.side-panel-content .stat-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}

.side-panel-content .stat-row:last-child {
  border-bottom: none;
}

.side-panel-content .stat-label {
  color: var(--color-text-muted);
}

.side-panel-content .stat-value {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

/* ========================================
   SIDE PANEL TAB NAVIGATION
   ======================================== */

.sp-tab-nav {
  display: flex;
  gap: var(--space-0-5);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-darker);
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

/* .sp-tab-btn rules live in _side_panel_tabs.css (#4194 — terminal bundle SSOT) */

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

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

/* Side Panel Section Headers */
.sp-section-header {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

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

/* ========================================
   SIDE PANEL STATS TAB
   ======================================== */

.sp-stats { }

.sp-core-stats {
  margin-bottom: var(--space-3);
}

.sp-hp-bar {
  position: relative;
  height: 24px;
  background: rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.sp-hp-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-error), var(--color-danger-emphasis));
  transform-origin: left;
  transition: transform var(--duration-normal);
}

.sp-hp-text {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 24px;
  color: white;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xs);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.sp-stat-row {
  display: flex;
  justify-content: space-around;
  gap: var(--space-2);
}

.sp-stat-item {
  text-align: center;
  padding: var(--space-2) var(--space-3);
  background: rgba(124, 58, 237, 0.1);
  border-radius: var(--radius-sm);
  flex: 1;
}

.sp-stat-value {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.sp-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Ability Scores Grid */
.sp-abilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1-5);
}

.sp-ability-item {
  text-align: center;
  padding: var(--space-2) var(--space-1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.sp-ability-item.proficient {
  border-color: var(--color-accent-primary);
  background: rgba(124, 58, 237, 0.1);
}

.sp-ability-name {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

.sp-ability-score {
  display: block;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.sp-ability-mod {
  display: block;
  font-size: var(--font-size-md);
  color: var(--color-accent-purple);
}

/* Saving Throws */
.sp-saves-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.sp-save-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

.sp-save-item.proficient {
  background: rgba(124, 58, 237, 0.1);
}

.sp-save-prof {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-save-item.proficient .sp-save-prof {
  color: var(--color-accent-primary);
}

.sp-save-name {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-save-mod {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* ========================================
   SIDE PANEL SKILLS TAB
   ======================================== */

.sp-skills { }

.sp-skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.sp-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-2);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast);
}

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

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

.sp-skill-prof {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-skill-item.proficient .sp-skill-prof {
  color: var(--color-accent-primary);
}

.sp-skill-name {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

.sp-skill-mod {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* ========================================
   SIDE PANEL DETAILS TAB
   ======================================== */

.sp-details { }

.sp-detail-section {
  margin-bottom: var(--space-4);
}

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

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

.sp-detail-value {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
}

.sp-feature-block {
  padding: var(--space-2);
  background: rgba(124, 58, 237, 0.05);
  border-left: 2px solid var(--color-accent-primary);
  margin: var(--space-2) 0;
}

.sp-feature-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  margin-bottom: var(--space-1);
}

.sp-feature-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.sp-personality-item {
  margin: var(--space-1-5) 0;
}

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

.sp-personality-value {
  display: block;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-top: var(--space-0-5);
}

/* Placeholder and Empty States */
.sp-placeholder, .sp-empty-text {
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-5);
  font-size: var(--font-size-xs);
}

/* ========================================
   TOOL RESULTS PANEL (GAME LOG)
   ======================================== */

.tool-results-panel {
  display: none; /* Game log is now in the side panel tabs */
}

.tool-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-accent-primary);
}

.tool-panel-title {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  text-transform: uppercase;
}

.tool-panel-close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--font-size-3xl);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color var(--duration-fast);
}

.tool-panel-close:hover {
  color: var(--color-text-primary);
}

.tool-panel-content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

/* Tool result item */
.tool-result-item {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

/* Category colors */
.tool-result-item.dice_roll {
  border-left-color: var(--color-accent-primary); /* Blue */
}

.tool-result-item.combat {
  border-left-color: var(--color-accent-error);
}

.tool-result-item.inventory {
  border-left-color: var(--color-accent-secondary);
}

.tool-result-item.character {
  border-left-color: var(--color-accent-warning);
}

/* Dice roll component */
.dice-roll-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5);
  background: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-sm);
}

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

.roll-result {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.roll-breakdown {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.roll-breakdown summary {
  cursor: pointer;
  user-select: none;
  color: var(--color-accent-purple);
}

.roll-breakdown summary:hover {
  color: var(--color-accent-primary);
}

.roll-breakdown[open] summary {
  margin-bottom: var(--space-1-5);
}

.roll-formula, .roll-dice {
  padding: var(--space-0-5) 0;
  color: var(--color-text-muted);
}

/* Combat results */
.combat-result {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.combat-result .icon {
  font-size: var(--font-size-md);
}

.damage-value {
  color: var(--color-accent-error);
  font-weight: var(--font-weight-bold);
}

.healing-value {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

/* Inventory results */
.inventory-result {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.inventory-result .icon {
  font-size: var(--font-size-md);
}

/* Character update results */
.character-update-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-change {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-xs);
}

.stat-change-arrow {
  color: var(--color-text-muted);
}

.stat-change-old {
  color: var(--color-accent-error);
}

.stat-change-new {
  color: var(--color-accent-secondary);
}

/* Category section header */
.tool-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1-5) var(--space-2);
  background: rgba(124, 58, 237, 0.1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  cursor: pointer;
  user-select: none;
}

.tool-category-header:hover {
  background: rgba(124, 58, 237, 0.2);
}

.tool-category-icon {
  font-size: var(--font-size-md);
}

.tool-category-count {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Collapsible sections */
.tool-category-content {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height var(--duration-normal);
}

.tool-category-content.collapsed {
  max-height: 0;
}

/* ========================================
   SIDE PANEL GAME LOG STYLES
   ======================================== */

.sp-game-log {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-2);
}

.sp-log-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 150px;
}

.sp-log-item {
  margin-bottom: var(--space-2-5);
  padding: var(--space-2) var(--space-2-5);
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.sp-log-item.dice_roll {
  border-left-color: var(--color-accent-primary);
}

.sp-log-item.combat {
  border-left-color: var(--color-accent-error);
}

.sp-log-item.inventory {
  border-left-color: var(--color-accent-secondary);
}

.sp-log-item.character {
  border-left-color: var(--color-accent-warning);
}

.sp-log-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sp-log-icon {
  font-size: var(--font-size-md);
  flex-shrink: 0;
}

.sp-log-result {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.sp-log-breakdown {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sp-log-breakdown summary {
  cursor: pointer;
  user-select: none;
  color: var(--color-accent-purple);
}

.sp-log-breakdown summary:hover {
  color: var(--color-accent-primary);
}

.sp-log-breakdown[open] summary {
  margin-bottom: var(--space-1);
}

.sp-log-dice, .sp-log-formula {
  padding: var(--space-0-5) 0;
  color: var(--color-text-muted);
}

.sp-log-message {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
   CSS GRID LAYOUT FOR TERMINAL
   ======================================== */

.terminal-grid {
  display: grid;
  grid-template-columns: 1fr 8px var(--panel-width-default);
  height: calc(100vh - 60px);
  overflow: hidden;
}

.narrative-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 300px;
}

.panel-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: var(--panel-width-min);
  max-width: var(--panel-width-max);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-default);
}

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

/* Draggable Divider */
.grid-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  background: var(--color-bg-primary);
  transition: background var(--duration-fast);
}

.grid-divider:hover,
.grid-divider.dragging {
  background: var(--color-accent-primary);
}

.divider-handle {
  width: 4px;
  height: 40px;
  background: var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}

.grid-divider:hover .divider-handle,
.grid-divider.dragging .divider-handle {
  background: var(--color-text-primary);
}

/* Responsive: Collapse on narrow screens */
@media (max-width: 768px) {
  .terminal-grid {
    grid-template-columns: 1fr;
  }

  .grid-divider {
    display: none;
  }

  .panel-column {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: var(--z-panel);
    transform: translateX(100%);
    transition: transform var(--duration-normal);
  }

  .panel-column.visible {
    transform: translateX(0);
  }

  /* Mobile toggle button */
  .mobile-panel-toggle {
    display: block;
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--color-accent-primary);
    color: white;
    border: none;
    font-size: var(--font-size-2xl);
    cursor: pointer;
    z-index: var(--z-panel);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

@media (min-width: 769px) {
  .mobile-panel-toggle {
    display: none;
  }
}

.panel-column .side-panel {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  border-left: none;
  z-index: auto;
}

.panel-column .side-panel.hidden {
  display: block; /* Override - panel visibility controlled by .panel-column */
}

/* ========================================
   EQUIPMENT SELECTION UI STYLES
   ======================================== */

.equipment-selection-panel {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
  border: 2px solid rgba(34, 197, 94, 0.5);
  border-radius: var(--radius-lg);
  animation: slideIn var(--duration-normal) ease-out;
}

.equipment-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(34, 197, 94, 0.3);
}

.equipment-icon {
  font-size: var(--font-size-3xl);
}

.equipment-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  flex: 1;
}

.equipment-class {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

.equipment-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.equipment-group {
  padding: var(--space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid rgba(34, 197, 94, 0.5);
}

.group-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2-5);
}

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

.equipment-option {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2-5) var(--space-3-5);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  text-align: left;
}

.equipment-option:hover {
  border-color: var(--color-accent-secondary);
  background: rgba(34, 197, 94, 0.1);
  transform: translateX(4px);
}

.equipment-option.selected {
  background: rgba(34, 197, 94, 0.3);
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.equipment-option.selected::after {
  content: '✓';
  margin-left: auto;
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
}

.option-letter {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  min-width: 28px;
}

.option-desc {
  flex: 1;
  color: var(--color-text-primary);
}

/* Equipment Tray (sticky bottom bar) */
.equipment-tray {
  display: none;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  background: linear-gradient(90deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.15) 100%);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md);
  animation: slideIn var(--duration-fast) ease-out;
}

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

.equipment-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-accent-secondary);
  font-family: var(--font-mono);
}

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

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

.send-equipment-btn:disabled,
.send-equipment-btn.disabled {
  background: rgba(34, 197, 94, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* Responsive equipment styles */
@media (max-width: 600px) {
  .equipment-tray {
    flex-direction: column;
    gap: var(--space-2);
  }

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

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


/* ========================================
   HIDDEN STATE UTILITIES
   Extracted from inline styles in show.html.erb
   ======================================== */

.pending-actions-panel.initially-hidden,
.character-status-panel.initially-hidden,
.tooltip.initially-hidden,
.threejs-dice-overlay.initially-hidden,
.context-menu.initially-hidden {
  display: none;
}

/* ========================================
   TOAST WRAPPER POSITIONING
   Fixed container for toast notifications
   ======================================== */

.toast-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: var(--z-sky);
  pointer-events: none;
}

/* Toast container inside wrapper handles pointer events */
.toast-wrapper .toast-container {
  pointer-events: auto;
}
/**
 * Side Panel Tabs (.sp-tab-btn)
 * =============================
 * Pill-style tab buttons used in side panels — character sheet
 * (Stats / Powers / Gear), session planner, and other tablist UIs.
 *
 * History (#4194):
 *   #3898 consolidated these rules to application.css as the SSOT, but the
 *   terminal layout only loads terminal.css, not application.css. That left
 *   Stats/Powers/Gear tabs rendering as default browser <button>s (gray
 *   squares with no terminal aesthetic). Restored here so the terminal
 *   bundle has its own SSOT for these classes.
 *
 * Cascade notes:
 *   - .sp-tab-btn--popout (in character_sheet/_base.css) overrides flex:1
 *     with flex:0 0 auto + margin-left:auto for the right-edge icon button.
 *   - .sp-tab-nav layout lives in _terminal_show.css (the wrapping flex row);
 *     align-items added here so the popout icon button stays centered with
 *     the tab pills in the row.
 */

.sp-tab-nav {
  align-items: center;
}

.sp-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-muted, #888);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--duration-fast, 150ms),
              color var(--duration-fast, 150ms),
              border-color var(--duration-fast, 150ms);
}

.sp-tab-btn:hover {
  background: rgba(90, 159, 216, 0.12);
  color: var(--color-text-primary, #e0e0e0);
}

.sp-tab-btn.active,
.sp-tab-btn[aria-selected="true"] {
  background: rgba(90, 159, 216, 0.22);
  border-color: var(--color-accent-primary, #5a9fd8);
  color: var(--color-accent-primary, #5a9fd8);
  font-weight: var(--font-weight-bold, 700);
}

.sp-tab-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #5a9fd8);
  outline-offset: 2px;
}

.sp-tab-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Wiki link tab — anchor that visually matches a tab */
.sp-tab-btn--link {
  text-decoration: none;
}

/* Mobile touch target sizing (WCAG 2.5.5 / iOS HIG 44pt minimum) */
@media (max-width: 768px) {
  .sp-tab-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-2);
  }
}
/*
 * Workshop 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);
  }
}

/* Compact variant for landscape phones / large portrait phones (480-639px) */
@media (min-width: 480px) and (max-width: 639px) {
  .world-selector {
    padding: var(--space-3);
  }

  .world-selector__menu {
    padding: var(--space-2) 0;
  }

  .world-selector__subtitle {
    margin-bottom: var(--space-4);
  }

  .world-selector__option {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }

  .world-selector__option:hover,
  .world-selector__option--focused {
    transform: none;
  }

  .world-selector__option-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .world-selector__submenu {
    margin-left: var(--space-6);
  }

  .world-selector__preset-option {
    padding: var(--space-2) var(--space-3);
  }

  .world-selector__preset-option:hover,
  .world-selector__preset-option--focused {
    transform: none;
  }

  .world-selector__preset-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .world-selector__presets-panel {
    padding: var(--space-3);
  }
}

/* Accessibility - respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .world-selector {
    animation: none;
  }

  .world-selector__option,
  .world-selector__preset-option,
  .world-selector__option-key,
  .world-selector__submenu-option {
    transition: none;
    transform: none;
    animation: none;
  }

  .world-selector__option:hover,
  .world-selector__preset-option:hover {
    transform: none;
  }

  .world-selector__cursor {
    animation: none;
    opacity: 1;
  }

  .world-selector__presets-panel {
    animation: none;
  }

  /* Disable logo animations */
  .world-selector__logo-dice,
  .world-selector__logo-bracket {
    animation: none;
    opacity: 1;
  }

  .world-selector__dice-shape {
    animation: none;
  }
}
/* World Orb Selector - 3D wireframe world selection */

.world-orb-selector {
  position: relative;
  background-color: var(--color-bg-primary);
  min-height: 100%;
  padding: var(--space-6);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: worldOrbFadeIn 0.4s ease-out;
}

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

/* Header */
.world-orb-selector__header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.world-orb-selector__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  text-shadow: 0 0 20px rgba(97, 175, 239, 0.3);
  margin: 0 0 var(--space-2);
}

.world-orb-selector__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.world-orb-selector__cursor {
  display: inline-block;
  width: 0.6rem;
  height: 1rem;
  background-color: var(--color-accent-primary);
  animation: worldOrbBlink 1s step-end infinite;
  vertical-align: middle;
  margin-left: var(--space-1);
}

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

/* 3D Viewport */
.world-orb-selector__viewport {
  width: 100%;
  max-width: 800px;
  height: 280px;
  position: relative;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a0a0f;
}

.world-orb-selector__viewport canvas,
.world-orb-selector__fallback-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Detail Card */
.world-orb-selector__details {
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-4);
}

.world-orb-selector__detail-card {
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  animation: worldOrbDetailSlide 0.3s ease-out;
}

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

.world-orb-selector__detail-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-1);
}

.world-orb-selector__detail-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 0 var(--space-2);
}

.world-orb-selector__detail-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-2);
}

.world-orb-selector__detail-players {
  font-size: var(--font-size-xs);
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-medium);
}

/* Confirm Button */
.world-orb-selector__actions {
  margin-top: var(--space-4);
}

.world-orb-selector__confirm {
  padding: var(--space-3) var(--space-8);
  background: transparent;
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: not-allowed;
  transition: border-color var(--transition-normal),
              color var(--transition-normal),
              box-shadow var(--transition-normal),
              background var(--transition-normal);
}

.world-orb-selector__confirm--active,
.world-orb-selector__confirm:not(:disabled) {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  cursor: pointer;
}

.world-orb-selector__confirm--active:hover,
.world-orb-selector__confirm:not(:disabled):hover {
  background: rgba(97, 175, 239, 0.1);
  box-shadow: 0 0 16px rgba(97, 175, 239, 0.3);
}

/* Footer */
.world-orb-selector__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.world-orb-selector__footer-key {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(97, 175, 239, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .world-orb-selector {
    padding: var(--space-4);
  }

  .world-orb-selector__viewport {
    height: 200px;
  }

  .world-orb-selector__title {
    font-size: var(--font-size-xl);
  }
}

/* Narrow mobile (<480px): tighten viewport so orbs render without overflow.
   Promoted-to-default in #3751. Prior 480-639px fixes (#2687, #2985) handled
   the next-tier-up; this rule closes the bottom gap so guests on narrow
   phones see the orb selector clipped neither at the viewport box nor at
   the column the orb sits in. */
@media (max-width: 479px) {
  .world-orb-selector {
    padding: var(--space-3);
  }

  .world-orb-selector__viewport {
    height: 160px;
    max-width: 100%;
  }

  .world-orb-selector__title {
    font-size: var(--font-size-lg);
    letter-spacing: 0.1em;
  }

  .world-orb-selector__details {
    max-width: 100%;
  }

  .world-orb-selector__confirm {
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
  }

  .world-orb-selector__footer {
    font-size: var(--font-size-xs);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .world-orb-selector {
    animation: none;
  }

  .world-orb-selector__detail-card {
    animation: none;
  }

  .world-orb-selector__cursor {
    animation: none;
    opacity: 1;
  }

  .world-orb-selector__confirm {
    transition: none;
  }
}
/* Character Swipe Selector - Tinder-style character card selection */

.character-swipe-selector {
  position: relative;
  background-color: var(--color-bg-primary);
  min-height: 100%;
  padding: var(--space-6);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: charSwipeFadeIn 0.4s ease-out;
}

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

/* Header */
.character-swipe-selector__header {
  text-align: center;
  margin-bottom: var(--space-4);
}

.character-swipe-selector__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-primary);
  text-shadow: 0 0 20px rgba(97, 175, 239, 0.3);
  margin: 0 0 var(--space-2);
}

.character-swipe-selector__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.character-swipe-selector__counter {
  display: inline-block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Card Stack Container */
.character-swipe-selector__stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 420px;
  margin: var(--space-2) 0;
  outline: none;
}

/* Individual Swipe Card */
.character-swipe-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5);
  user-select: none;
  touch-action: none;
  cursor: grab;
  will-change: transform;
}

.character-swipe-card:active {
  cursor: grabbing;
}

.character-swipe-card[data-stack-position="0"] {
  border-color: var(--color-border-focus);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
              0 0 0 1px var(--color-border-subtle);
}

/* Swipe Overlays */
.character-swipe-card__overlay {
  position: absolute;
  top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  border: 3px solid;
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: var(--z-sticky);
  pointer-events: none;
}

.character-swipe-card__overlay--select {
  right: var(--space-4);
  color: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
  transform: rotate(12deg);
}

.character-swipe-card__overlay--skip {
  left: var(--space-4);
  color: var(--color-accent-error);
  border-color: var(--color-accent-error);
  transform: rotate(-12deg);
}

/* Avatar */
.character-swipe-card__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--accent-color, var(--color-accent-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);
  margin-bottom: var(--space-3);
  background: rgba(97, 175, 239, 0.05);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent-color, var(--color-accent-primary)) 30%, transparent);
}

.character-swipe-card__initial {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--accent-color, var(--color-accent-primary));
}

/* Info */
.character-swipe-card__info {
  text-align: center;
  margin-bottom: var(--space-3);
}

.character-swipe-card__name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-swipe-card__class {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--accent-color, var(--color-accent-primary));
  font-weight: var(--font-weight-medium);
}

.character-swipe-card__level {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Stats Grid */
.character-swipe-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 240px;
  margin-bottom: var(--space-3);
}

.character-swipe-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.character-swipe-card__stat-label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.character-swipe-card__stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Backstory */
.character-swipe-card__backstory {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  text-align: center;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Create New Card */
.character-swipe-card--create-new {
  border-style: dashed;
  border-color: var(--color-border-subtle);
  justify-content: center;
}

.character-swipe-card--create-new:hover {
  border-color: var(--color-accent-primary);
}

.character-swipe-card__create-icon {
  font-size: 48px;
  color: var(--color-accent-primary);
  opacity: 0.6;
  margin-bottom: var(--space-2);
}

/* Action Buttons */
.character-swipe-selector__actions {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-3);
}

.character-swipe-selector__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border-subtle);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-mono);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

.character-swipe-selector__action--skip {
  color: var(--color-accent-error);
}

.character-swipe-selector__action--skip:hover {
  border-color: var(--color-accent-error);
  box-shadow: 0 0 12px rgba(224, 108, 117, 0.3);
  transform: scale(1.1);
}

.character-swipe-selector__action--select {
  color: var(--color-accent-secondary);
}

.character-swipe-selector__action--select:hover {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 12px rgba(152, 195, 121, 0.3);
  transform: scale(1.1);
}

.character-swipe-selector__action-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
}

.character-swipe-selector__action-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Empty State */
.character-swipe-selector__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8);
}

.character-swipe-selector__empty-icon {
  font-size: 48px;
  color: var(--color-text-muted);
  opacity: 0.4;
}

.character-swipe-selector__empty-text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin: 0;
}

.character-swipe-selector__create-btn {
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 2px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.character-swipe-selector__create-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  box-shadow: 0 0 12px rgba(97, 175, 239, 0.3);
}

/* Hint Footer */
.character-swipe-selector__hint {
  margin-top: auto;
  padding-top: var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.character-swipe-selector__hint-key {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(97, 175, 239, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
  .character-swipe-selector {
    padding: var(--space-4);
  }

  .character-swipe-selector__stack {
    max-width: 280px;
    height: 380px;
  }

  .character-swipe-selector__title {
    font-size: var(--font-size-xl);
  }

  .character-swipe-card {
    padding: var(--space-4);
  }

  .character-swipe-card__avatar {
    width: 64px;
    height: 64px;
  }

  .character-swipe-card__initial {
    font-size: var(--font-size-2xl);
  }

  .character-swipe-selector__action {
    width: 56px;
    height: 56px;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .character-swipe-selector {
    animation: none;
  }

  .character-swipe-card {
    transition: none !important;
    will-change: auto;
  }

  .character-swipe-selector__action {
    transition: none;
  }

  .character-swipe-selector__create-btn {
    transition: none;
  }
}
/*
 * Guest Limit Modal Organism
 * ==========================
 * Modal displayed when guest users reach their token limit.
 * Includes invite code redemption form and token usage display.
 * Uses design tokens from: terminal/_tokens.css
 */

/* Modal Container */
.guest-limit-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
}

.guest-limit-modal.visible {
  opacity: 1;
  visibility: visible;
}

/* Backdrop */
.guest-limit-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Modal Content */
.guest-limit-content {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 420px;
  width: 90%;
  box-shadow: 0 8px 32px var(--overlay-medium);
  transform: translateY(-20px);
  transition: transform var(--transition-normal);
}

.guest-limit-modal.visible .guest-limit-content {
  transform: translateY(0);
}

/* Title */
.guest-limit-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-warning);
  margin: 0 0 var(--space-3);
  text-align: center;
}

/* Message */
.guest-limit-message {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: 1.5;
  margin: 0 0 var(--space-4);
  text-align: center;
}

/* Token Usage Display */
.token-usage-display {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.token-bar {
  height: 8px;
  background: var(--color-bg-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.token-bar-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal), background-color var(--transition-fast);
}

.token-bar-fill.warning {
  background: var(--color-accent-warning);
}

.token-bar-fill.critical {
  background: var(--color-accent-error);
}

.token-usage-text {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-family-mono);
}

/* Invite Code Section */
.invite-code-section {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

.invite-code-section p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3);
  text-align: center;
}

.invite-code-input-group {
  display: flex;
  gap: var(--space-2);
}

.invite-code-input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.invite-code-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 139, 92, 246), 0.2);
}

.invite-code-input::placeholder {
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: normal;
}

.invite-code-submit {
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.invite-code-submit:hover:not(:disabled) {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
}

.invite-code-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Error and Success Messages */
.guest-limit-error {
  color: var(--color-accent-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  text-align: center;
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-error) 10%, transparent);
  border-radius: var(--radius-sm);
}

.guest-limit-success {
  color: var(--color-accent-secondary);
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  text-align: center;
  padding: var(--space-2);
  background: rgba(var(--color-accent-secondary-rgb, 34, 197, 94), 0.1);
  border-radius: var(--radius-sm);
}

/* Footer */
.guest-limit-footer {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.guest-limit-signup-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.guest-limit-signup-btn:hover {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

.guest-limit-signup-btn:active {
  transform: translateY(0);
}

.guest-limit-footer-secondary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.guest-limit-footer-divider {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.guest-limit-signin-link {
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.guest-limit-signin-link:hover {
  color: var(--color-accent-primary-hover, #7c3aed);
  text-decoration: underline;
}

.guest-limit-close {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.guest-limit-close:hover {
  color: var(--color-text-secondary);
}

/* Status Bar Token Status Molecule — REMOVED (#4267, panel audit 6.4).
 * The .token-status widget was deleted from the status bar; these milestone
 * colors moved with it. The guest-limit modal carries the consequential
 * signal (read-only mode + invite-code prompt) without leaking raw counts. */

/* Read-only mode indicator on input */
.terminal-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-tertiary);
}

.terminal-input:disabled::placeholder {
  color: var(--color-accent-warning);
}

/* Guest Cap Exceeded Page
   =======================
   Full-page display when guest creation is blocked due to cap */

.guest-cap-exceeded-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
  background: var(--color-bg-primary);
}

.guest-cap-exceeded-page .guest-limit-content {
  max-width: 480px;
  animation: fadeInUp 0.5s ease-out;
}

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

.cap-status-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.cap-status-icon {
  color: var(--color-accent-warning);
}

.cap-status-text {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  text-align: center;
}

.guest-limit-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.action-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.action-divider::before,
.action-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border-default);
}

.signin-section {
  display: flex;
  justify-content: center;
}

.signin-button {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-6);
  color: var(--color-accent-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.signin-button:hover {
  background: var(--color-accent-primary);
  color: var(--color-text-on-accent, #fff);
}

.invite-code-form {
  width: 100%;
}

.footer-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  line-height: 1.5;
}

/* Token Breakdown Modal
   =====================
   Detailed token usage modal */

.token-breakdown-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sky);
  background: var(--overlay-dark);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal), visibility var(--transition-normal);
  transform: none;
}

.token-breakdown-modal.active {
  opacity: 1;
  visibility: visible;
}

.token-breakdown-content {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px var(--overlay-medium);
  transform: translateY(-20px) scale(0.95);
  transition: transform var(--transition-normal);
}

.token-breakdown-modal.active .token-breakdown-content {
  transform: translateY(0) scale(1);
}

.token-breakdown-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.token-breakdown-content .modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.token-breakdown-content .modal-close {
  background: transparent;
  border: none;
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
  transition: color var(--transition-fast);
}

.token-breakdown-content .modal-close:hover {
  color: var(--color-text-primary);
}

/* Token Meter */
.token-breakdown-content .token-meter {
  margin-bottom: var(--space-4);
}

.token-breakdown-content .meter-track {
  height: 12px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.token-breakdown-content .meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

/* Note: Old .meter-fill.warning and .meter-fill.critical removed - no longer using percentage-based warnings */

.token-breakdown-content .meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}

/* Breakdown Stats */
.token-breakdown-content .breakdown-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.token-breakdown-content .stat {
  text-align: center;
}

.token-breakdown-content .stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.token-breakdown-content .stat-value {
  display: block;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  color: var(--color-text-primary);
}

/* Token Explainer */
.token-breakdown-content .token-explainer {
  margin-bottom: var(--space-4);
}

.token-breakdown-content .token-explainer h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.token-breakdown-content .token-explainer p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.token-breakdown-content .model-info,
.token-breakdown-content .cost-info {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-right: var(--space-2);
}

.token-breakdown-content .model-label,
.token-breakdown-content .cost-label {
  color: var(--color-text-muted);
}

/* Upgrade CTA */
.token-breakdown-content .upgrade-cta {
  text-align: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-default);
}

.token-breakdown-content .upgrade-cta p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.token-breakdown-content .btn--primary {
  display: inline-block;
  background: var(--color-accent-primary);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  color: var(--color-text-on-accent, #fff);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.token-breakdown-content .btn--primary:hover {
  background: var(--color-accent-primary-hover, #7c3aed);
  transform: translateY(-1px);
}

.token-breakdown-content .btn--primary:active {
  transform: translateY(0);
}

/* Milestone Progress Track */
.token-breakdown-content .milestone-progress {
  margin: var(--space-4) 0;
}

.token-breakdown-content .milestone-progress h4 {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.token-breakdown-content .milestone-track {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.token-breakdown-content .milestone-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  opacity: 0.4;
  transition: color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
}

.token-breakdown-content .milestone-marker.achieved {
  opacity: 1;
  transform: scale(1.1);
}

.token-breakdown-content .milestone-icon {
  font-size: var(--font-size-xl);
}

.token-breakdown-content .milestone-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Stat value emphasis for total */
.token-breakdown-content .stat--primary .stat-value {
  font-size: var(--font-size-xl);
  color: var(--color-accent-primary);
}

/* ========================================
   Guest Badge (Status Bar)
   ======================================== */

.guest-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.guest-badge:hover {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

.guest-badge__icon {
  font-size: var(--font-size-sm);
}

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

/* Responsive: hide text on small screens */
@media (max-width: 768px) {
  .guest-badge__text {
    display: none;
  }

  .guest-badge {
    padding: var(--space-1);
  }
}

/* ==========================================================================
   Party Badge - Multiplayer indicator in status bar
   ========================================================================== */

.party-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(20, 184, 166, 0.3);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.party-badge:hover {
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.25), rgba(6, 182, 212, 0.15));
  border-color: rgba(20, 184, 166, 0.5);
  transform: translateY(-1px);
}

.party-badge__icon {
  font-size: var(--font-size-sm);
}

.party-badge__text {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  color: var(--color-party-teal, #14b8a6);
  text-transform: uppercase;
}

.party-badge__indicator {
  font-size: var(--font-size-xs);
  color: var(--color-party-teal, #14b8a6);
  animation: pulse-indicator 1.5s ease-in-out infinite;
}

/* State-driven visibility (preferred over inline style mutations) */
.party-badge__indicator--hidden {
  display: none;
}

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

/* Processing state - pulsing animation when party members are typing */
.party-badge--processing {
  animation: party-processing-pulse 1.5s ease-in-out infinite;
}

@keyframes party-processing-pulse {
  0%, 100% {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.15), rgba(6, 182, 212, 0.1));
    border-color: rgba(20, 184, 166, 0.3);
  }
  50% {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(6, 182, 212, 0.2));
    border-color: rgba(20, 184, 166, 0.6);
  }
}

/* Responsive: hide text on small screens */
@media (max-width: 768px) {
  .party-badge__text {
    display: none;
  }

  .party-badge {
    padding: var(--space-1);
  }

  .party-badge__indicator {
    display: none;
  }
}

/* ==========================================================================
   Turn Indicator Badge - Whose turn is it in turn-based mode
   ========================================================================== */

.turn-indicator-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  cursor: help;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--font-mono);
}

.turn-indicator-badge.hidden {
  display: none;
}

/* Your Turn - Prominent green with glow */
.turn-indicator-badge--your-turn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(22, 163, 74, 0.2));
  border: 2px solid #22c55e;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  animation: turn-badge-glow 1.5s ease-in-out infinite;
}

.turn-indicator-badge--your-turn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(22, 163, 74, 0.3));
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.6);
}

.turn-indicator-badge--your-turn .turn-indicator-badge__text {
  color: #22c55e;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

@keyframes turn-badge-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.5);
  }
}

/* Flash when turn changes to you */
.turn-indicator-badge--flash {
  animation: turn-badge-flash 0.4s ease-out 3;
}

@keyframes turn-badge-flash {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.3);
  }
}

/* Waiting for another player - Subtle amber */
.turn-indicator-badge--waiting {
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.turn-indicator-badge--waiting:hover {
  background: rgba(234, 179, 8, 0.25);
  border-color: rgba(234, 179, 8, 0.6);
}

.turn-indicator-badge--waiting .turn-indicator-badge__icon {
  animation: turn-waiting-spin 3s linear infinite;
}

.turn-indicator-badge--waiting .turn-indicator-badge__text {
  color: #eab308;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  letter-spacing: 0.05em;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes turn-waiting-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.turn-indicator-badge__icon {
  font-size: var(--font-size-sm);
}

.turn-indicator-badge__text {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

/* Responsive: simplify on small screens */
@media (max-width: 768px) {
  .turn-indicator-badge__text {
    display: none;
  }

  .turn-indicator-badge {
    padding: var(--space-1);
  }

  .turn-indicator-badge--your-turn {
    /* Keep the icon visible but make it more prominent */
    font-size: var(--font-size-base);
  }
}
/*
 * Organism: Landing Post-its
 * ==========================
 * Informational sticky notes shown on first session visit to the terminal,
 * alongside the boot sequence. Ported from the former landing page.
 *
 * Used by: app/views/terminal/_landing_postits.html.erb
 * Controlled by: app/javascript/controllers/terminal/landing_postits_controller.js
 *
 * Distinct from:
 *   - .postit (atom) — used by _floating_postits for lobby action cards
 *   - .sticky-note  — used by other surface components
 */

/* ── Container (fixed viewport wrapper) ── */
.landing-postits {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  pointer-events: none; /* children opt in */
}

/* ── Sticky Notes on Monitor ── */
.monitor-note {
  --note-rotate: 0deg;
  position: fixed;
  z-index: var(--z-panel-active);
  width: 180px;
  padding: 14px 14px 12px;
  border-radius: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--note-rotate));
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  pointer-events: auto;
}

.monitor-note:hover {
  transform: rotate(var(--note-rotate)) scale(1.03);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
}

/* Note falling-off animation when its modal closes */
.monitor-note--falling {
  transition: transform 0.6s ease-in, opacity 0.6s ease-in;
  transform: translateY(120vh) rotate(15deg) !important;
  opacity: 0;
  pointer-events: none;
}

/* Note colors */
.note--yellow { background: #fff9c4; color: #3e3a00; }
.note--blue   { background: #bbdefb; color: #0d2744; }
.note--green  { background: #c8e6c9; color: #1b3a1c; }
.note--pink   { background: #f8bbd0; color: #3e1929; }

/* Tape decoration */
.note-tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 60px;
  height: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(200, 200, 200, 0.3);
  z-index: var(--z-raised);
}

/* Pin decoration */
.note-pin {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 5px 5px, #ef5350, #b71c1c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  z-index: var(--z-raised);
}

.monitor-note__title {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 4px;
}

.monitor-note__teaser {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.75;
}

/* ── Note Modals ── */
.note-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-panel-active);
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.note-modal-backdrop--hidden {
  display: none;
}

.note-modal {
  position: relative;
  max-width: 480px;
  width: 90%;
  padding: 32px 28px 28px;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.note-modal--yellow { background: #fff9c4; color: #3e3a00; }
.note-modal--blue   { background: #bbdefb; color: #0d2744; }
.note-modal--green  { background: #c8e6c9; color: #1b3a1c; }
.note-modal--pink   { background: #f8bbd0; color: #3e1929; }

/* State-driven visibility (preferred over inline style mutations) */
.note-modal--hidden {
  display: none;
}

.monitor-note--hidden {
  display: none;
}

.note-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  line-height: 1;
  padding: 4px;
}

.note-modal__close:hover { opacity: 1; }

.note-heading {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
  line-height: 1.3;
}

.note-body {
  font-family: 'Segoe Print', 'Comic Sans MS', 'Marker Felt', cursive;
  font-size: 15px;
  line-height: 1.65;
}

.note-body p { margin-bottom: 10px; }
.note-body p:last-child { margin-bottom: 0; }

.note-body ol {
  padding-left: 22px;
  margin: 8px 0;
}

.note-body ol li {
  margin-bottom: 6px;
}

.note-body strong {
  font-weight: 700;
}

/* ── Responsive ── */

/* Mobile (<768px) — hide post-its entirely (#4276).
 * On narrow viewports the scattered inline-positioned notes overlap the boot
 * text and each other; rather than reflow, we remove them from the layout
 * flow per JP. The DOM still mounts (controller no-ops gracefully when no
 * .monitor-note children render), so the modal backdrop and any future
 * reveal hook remain available. Desktop layout above 768px is untouched. */
@media (max-width: 767px) {
  .landing-postits,
  .monitor-note,
  .note-modal-backdrop {
    display: none !important;
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .monitor-note--falling {
    transition: none;
  }
}
/**
 * Help 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);
}
/*
 * Campaign selection empty state (#3908)
 * --------------------------------------
 * Rendered when `/load` (or `/campaigns`) is invoked by a user with no
 * campaigns. Replaces the silent bail in the prior auto-broadcast flow with
 * an explicit "create your first campaign" CTA.
 *
 * Co-located here rather than _campaign.css because that file is at the
 * 2000-LOC hard cap; new campaign-selection styles must extract.
 */

.campaign-selection__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-align: center;
}

.campaign-selection__empty-message {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.campaign-selection__create-button {
  appearance: none;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-strong, var(--color-border-default));
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.campaign-selection__create-button:hover,
.campaign-selection__create-button:focus-visible {
  background: var(--color-accent, var(--color-bg-primary));
  border-color: var(--color-accent, var(--color-border-strong, var(--color-border-default)));
  color: var(--color-text-on-accent, var(--color-text-primary));
  outline: none;
}
/**
 * Spellbook Panel
 * ===============
 * 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 */
}
/*
 * Uploaded Asset Modal (#3864)
 * =============================
 * Drag-drop / file-picker modal for POST /api/v1/uploaded_assets.
 * Mirrors the visual language of the clarification modal (terminal-themed,
 * mobile-friendly with full-bleed sheet on small screens).
 */

.uploaded-asset-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal, 1000);
  animation: uploaded-asset-modal-backdrop-enter 0.2s ease-out;
}

.uploaded-asset-modal__backdrop.hidden {
  display: none;
}

.uploaded-asset-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content, 1001);
  max-width: 560px;
  width: calc(100% - var(--space-8, 2rem));
  max-height: calc(100vh - var(--space-8, 2rem));
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.2);
  animation: uploaded-asset-modal-enter 0.2s ease-out;
  overflow: hidden;
}

.uploaded-asset-modal.hidden {
  display: none;
}

.uploaded-asset-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-bottom: 1px solid var(--color-border-default, #444);
}

.uploaded-asset-modal__title {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-md, 0.9375rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary, #aaa);
  font-size: var(--font-size-xl, 1.25rem);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 3px);
}

.uploaded-asset-modal__close:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: rgba(255, 255, 255, 0.05);
}

.uploaded-asset-modal__close:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.uploaded-asset-modal__body {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  overflow-y: auto;
}

.uploaded-asset-modal__caps-hint {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.uploaded-asset-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.uploaded-asset-modal__field-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.uploaded-asset-modal__kind-select,
.uploaded-asset-modal__caption {
  background: var(--color-bg-tertiary, #282840);
  border: 1px solid var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.uploaded-asset-modal__kind-select:focus,
.uploaded-asset-modal__caption:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  min-height: 140px;
  padding: var(--space-5, 1.25rem);
  background: rgba(97, 175, 239, 0.04);
  border: 2px dashed var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.uploaded-asset-modal__drop-zone:hover,
.uploaded-asset-modal__drop-zone:focus-visible {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.10);
  outline: none;
}

.uploaded-asset-modal__drop-zone--hot {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.18);
}

.uploaded-asset-modal__drop-icon {
  width: 36px;
  height: 36px;
  color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__drop-text {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__drop-link {
  color: var(--color-accent-primary, #61afef);
  text-decoration: underline;
}

.uploaded-asset-modal__drop-text--touch {
  display: none;
}

.uploaded-asset-modal__preview {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  padding: var(--space-3, 0.75rem);
  background: var(--color-bg-tertiary, #282840);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border-subtle, #333);
}

.uploaded-asset-modal__preview-image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-sm, 3px);
  background: var(--color-bg-secondary, #2a2a3e);
  flex-shrink: 0;
}

.uploaded-asset-modal__preview-meta {
  flex: 1;
  min-width: 0;
}

.uploaded-asset-modal__preview-name {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uploaded-asset-modal__preview-size {
  margin: var(--space-1, 0.25rem) 0 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
}

.uploaded-asset-modal__error,
.uploaded-asset-modal__rate-limit {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-md, 6px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
}

.uploaded-asset-modal__error {
  background: rgba(224, 108, 117, 0.12);
  border: 1px solid rgba(224, 108, 117, 0.4);
  color: var(--color-error, #e06c75);
}

.uploaded-asset-modal__rate-limit {
  background: rgba(229, 192, 123, 0.12);
  border: 1px solid rgba(229, 192, 123, 0.4);
  color: var(--color-warning, #e5c07b);
}

.uploaded-asset-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-top: 1px solid var(--color-border-default, #444);
}

.uploaded-asset-modal__button {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border-default, #444);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.uploaded-asset-modal__button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.uploaded-asset-modal__button--secondary {
  background: transparent;
  color: var(--color-text-secondary, #aaa);
}

.uploaded-asset-modal__button--secondary:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary, #e0e0e0);
}

.uploaded-asset-modal__button--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  border-color: var(--color-accent-primary, #61afef);
}

.uploaded-asset-modal__button--primary:hover:not([disabled]) {
  background: var(--color-accent-primary-hover, #4d97d6);
  border-color: var(--color-accent-primary-hover, #4d97d6);
}

.uploaded-asset-modal__button--primary:focus-visible,
.uploaded-asset-modal__button--secondary:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

@keyframes uploaded-asset-modal-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(-8px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) translateY(0); }
}

@keyframes uploaded-asset-modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Mobile / touch — bottom-sheet layout, picker fallback. */
@media (max-width: 768px) {
  .uploaded-asset-modal {
    max-width: 100%;
    width: 100%;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    max-height: 90vh;
    animation: uploaded-asset-modal-enter-mobile 0.25s ease-out;
  }

  @keyframes uploaded-asset-modal-enter-mobile {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (hover: none) and (pointer: coarse) {
  .uploaded-asset-modal__drop-text--desktop { display: none; }
  .uploaded-asset-modal__drop-text--touch { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .uploaded-asset-modal,
  .uploaded-asset-modal__backdrop {
    animation: none;
  }
  .uploaded-asset-modal__drop-zone,
  .uploaded-asset-modal__button {
    transition: none;
  }
}
/* LLM API Keys Settings Component */

.llm-keys {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-md);
}

.llm-keys__list {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-sm);
}

.llm-keys__loading {
  color: var(--terminal-text-muted);
  font-style: italic;
  padding: var(--terminal-spacing-md);
  text-align: center;
}

.llm-keys__empty {
  color: var(--terminal-text-muted);
  padding: var(--terminal-spacing-lg);
  text-align: center;
  border: 1px dashed var(--terminal-border);
  border-radius: var(--terminal-radius);
}

.llm-keys__error-state {
  color: var(--terminal-error);
  padding: var(--terminal-spacing-md);
  text-align: center;
}

/* Individual Key Item */
.llm-key-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--terminal-spacing-md);
  padding: var(--terminal-spacing-sm) var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius);
}

@media (max-width: 768px) {
  .llm-key-item {
    grid-template-columns: 1fr;
    gap: var(--terminal-spacing-sm);
  }
}

.llm-key-item__info {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  flex-wrap: wrap;
}

.llm-key-item__provider {
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--terminal-radius-sm);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.llm-key-item__provider--anthropic {
  background: rgba(209, 179, 141, 0.2);
  color: #d1b38d;
}

.llm-key-item__provider--openai {
  background: rgba(16, 163, 127, 0.2);
  color: #10a37f;
}

.llm-key-item__provider--gemini {
  background: rgba(66, 133, 244, 0.2);
  color: #4285f4;
}

.llm-key-item__label {
  color: var(--terminal-text);
  font-weight: 500;
}

.llm-key-item__masked {
  color: var(--terminal-text-muted);
  font-family: monospace;
  font-size: 0.875rem;
}

.llm-key-item__status {
  display: flex;
  align-items: center;
}

.llm-key-item__status-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--terminal-radius-sm);
}

.llm-key-item__status-badge--valid {
  background: rgba(34, 197, 94, 0.2);
  color: var(--terminal-success);
}

.llm-key-item__status-badge--invalid {
  background: rgba(239, 68, 68, 0.2);
  color: var(--terminal-error);
}

.llm-key-item__status-badge--pending {
  background: rgba(234, 179, 8, 0.2);
  color: var(--terminal-warning);
}

.llm-key-item__usage {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.llm-key-item__actions {
  display: flex;
  gap: var(--terminal-spacing-xs);
}

/* Add Form */
.llm-keys__add-form {
  padding: var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius);
}

.llm-keys__form-title {
  margin: 0 0 var(--terminal-spacing-md) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text);
}

.llm-keys__field {
  margin-bottom: var(--terminal-spacing-md);
}

.llm-keys__field label {
  display: block;
  margin-bottom: var(--terminal-spacing-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--terminal-text-muted);
}

.llm-keys__field select,
.llm-keys__field input {
  width: 100%;
  padding: var(--terminal-spacing-sm);
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-sm);
  color: var(--terminal-text);
  font-size: 0.875rem;
}

.llm-keys__field select:focus,
.llm-keys__field input:focus {
  outline: none;
  border-color: var(--terminal-accent);
}

.llm-keys__hint {
  display: block;
  margin-top: var(--terminal-spacing-xs);
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.llm-keys__actions {
  display: flex;
  gap: var(--terminal-spacing-sm);
  margin-top: var(--terminal-spacing-md);
}

.llm-keys__error {
  margin-top: var(--terminal-spacing-md);
  padding: var(--terminal-spacing-sm);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--terminal-error);
  border-radius: var(--terminal-radius-sm);
  color: var(--terminal-error);
  font-size: 0.875rem;
}

/* Footer */
.llm-keys__footer {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-sm);
  align-items: flex-start;
}

.llm-keys__note {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
  margin: 0;
}
/* Highlight pulse animation for carousel when scrolled to */
.character-carousel-container.highlight-pulse {
  animation: carouselPulse 0.5s ease-out 3;
}

@keyframes carouselPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.4);
  }
}

/* Prompt Input Modal (for entering invite codes, etc.)
 * ========================================================================== */
.prompt-input-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
  animation: overlayFadeIn 0.2s ease;
}

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

.prompt-input-modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 40px var(--overlay-medium-plus);
  animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.prompt-input-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 1rem;
  text-align: center;
}

.prompt-input-field {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 1.125rem;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-subtle);
  border-radius: 6px;
  color: var(--color-text-primary);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.2s ease;
}

.prompt-input-field:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px var(--overlay-white-light);
}

.prompt-input-field::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.prompt-input-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.prompt-input-actions .btn {
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.prompt-input-actions .btn--secondary {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

.prompt-input-actions .btn--secondary:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-secondary);
}

.prompt-input-actions .btn--primary {
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-text-primary);
}

.prompt-input-actions .btn--primary:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  filter: brightness(0.85);
  transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .prompt-input-modal {
    padding: 1.25rem;
  }

  .prompt-input-field {
    font-size: 1rem;
    padding: 0.75rem;
  }
}

/* ========================================
 * Welcome Experience
 * Landing page polish for new users
 * ======================================== */

.lobby-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-8, 32px);
  text-align: center;
  animation: lobbyFadeIn 0.5s ease-out;
}

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

.lobby-welcome__greeting {
  font-size: var(--font-size-2xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2, 8px);
  animation: greetingSlideIn 0.4s ease-out 0.1s backwards;
}

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

.lobby-welcome__subtitle {
  font-size: var(--font-size-base, 16px);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8, 32px);
  animation: greetingSlideIn 0.4s ease-out 0.2s backwards;
}

/* Quick action cards */
.lobby-welcome__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 16px);
  max-width: 600px;
  width: 100%;
}

.lobby-welcome__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-5, 20px);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 12px);
  cursor: pointer;
  transition: background var(--transition-normal, 0.2s), border-color var(--transition-normal, 0.2s), opacity var(--transition-normal, 0.2s), transform var(--transition-normal, 0.2s);
  animation: actionCardSlideUp 0.4s ease-out backwards;
}

.lobby-welcome__action:nth-child(1) { animation-delay: 0.3s; }
.lobby-welcome__action:nth-child(2) { animation-delay: 0.4s; }
.lobby-welcome__action:nth-child(3) { animation-delay: 0.5s; }

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

.lobby-welcome__action:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

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

.lobby-welcome__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-bg-tertiary);
  border-radius: 50%;
  font-size: var(--font-size-xl, 20px);
  transition: transform var(--transition-fast, 0.15s);
}

.lobby-welcome__action:hover .lobby-welcome__action-icon {
  transform: scale(1.1);
}

.lobby-welcome__action-title {
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.lobby-welcome__action-desc {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Session info banner */
.lobby-session-info {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4, 16px);
}

.lobby-session-info__icon {
  width: 20px;
  height: 20px;
  background: var(--color-accent-success, #22c55e);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.lobby-session-info__text {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-accent-success, #22c55e);
}

/* Returning player welcome */
.lobby-welcome--returning .lobby-welcome__greeting::after {
  content: ' 👋';
}

/* New player welcome */
.lobby-welcome--new .lobby-welcome__action--primary {
  border-color: var(--color-accent-primary);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(124, 58, 237, 0.05));
}

.lobby-welcome--new .lobby-welcome__action--primary .lobby-welcome__action-icon {
  background: var(--color-accent-primary);
  color: white;
}

/* Recent character quick-resume */
.lobby-recent-character {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
  margin-top: var(--space-6, 24px);
  max-width: 400px;
  width: 100%;
}

.lobby-recent-character:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.lobby-recent-character__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-bg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg, 18px);
}

.lobby-recent-character__info {
  flex: 1;
  text-align: left;
}

.lobby-recent-character__name {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  font-size: var(--font-size-base, 16px);
}

.lobby-recent-character__details {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

.lobby-recent-character__continue {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium, 500);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .lobby-welcome,
  .lobby-welcome__greeting,
  .lobby-welcome__subtitle,
  .lobby-welcome__action {
    animation: none;
  }

  .lobby-welcome__action:hover {
    transform: none;
  }

  .lobby-welcome__action:hover .lobby-welcome__action-icon {
    transform: none;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .lobby-welcome {
    padding: var(--space-4, 16px);
  }

  .lobby-welcome__actions {
    grid-template-columns: 1fr;
  }

  .lobby-welcome__action {
    flex-direction: row;
    text-align: left;
    padding: var(--space-4, 16px);
  }

  .lobby-welcome__action-icon {
    width: 40px;
    height: 40px;
  }
}
/* Lobby Banner - Battle.net-inspired welcome banner
 * ========================================================================== */

.lobby-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  min-height: auto;
  background: linear-gradient(
    135deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 100%
  );
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* Welcome message with ASCII dragon */
.lobby-banner__welcome {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.lobby-banner__welcome--ascii {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4, 16px);
}

/* ASCII Dragon Art */
.lobby-banner__dragon {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  line-height: 1.15;
  color: var(--color-text-muted);
  margin: 0;
  white-space: pre;
  flex-shrink: 0;
  opacity: 0.7;
}

/* SVG Dragon */
.lobby-banner__welcome--svg {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4, 16px);
}

.lobby-banner__dragon-svg {
  display: inline-flex;
  width: 80px;
  height: 48px;
  color: var(--color-text-muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.lobby-banner__dragon-svg svg {
  width: 100%;
  height: 100%;
}

.lobby-banner__greeting-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  padding-top: var(--space-2, 8px);
}

.lobby-banner__greeting {
  margin: 0;
  font-size: var(--font-size-base, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.lobby-banner__subtitle {
  margin: 0;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* Quick Command Suggestions
 * Affordance map (#3734 4/5): the chip row is the visible map of available
 * lobby commands now that the eager surfaces are stripped (#3731). Each chip
 * dispatches the same command the slash surface uses through
 * LobbyCommandRouter (#3732). We deliberately allow the row to wrap so all
 * 7 chips remain reachable at every viewport — discoverability over
 * compactness. */
.lobby-banner__quick-commands {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-top: var(--space-2, 8px);
  flex-wrap: wrap;
  /* Belt-and-suspenders: prevent any horizontal scroll spillover even when
     a single chip's title attribute or focus ring would otherwise nudge the
     row past its container. */
  max-width: 100%;
  min-width: 0;
}

.lobby-banner__quick-label {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium, 500);
}

.lobby-banner__quick-cmd {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: var(--font-size-xs, 12px);
  padding: var(--space-0-5, 2px) var(--space-2, 8px);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent-primary);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
  line-height: 1.4;
}

.lobby-banner__quick-cmd:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--color-accent-primary);
}

.lobby-banner__quick-cmd:active {
  background: rgba(251, 191, 36, 0.25);
}

/* Quick Play Prompt — prominent CTA for last-played character */
.lobby-banner__quick-play-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.15) 0%,
    rgba(34, 197, 94, 0.05) 100%
  );
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md, 8px);
  animation: resumePromptSlideIn 0.3s ease-out;
}

.quick-play-prompt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 8px);
  background: rgba(34, 197, 94, 0.2);
  color: var(--color-accent-success, #22c55e);
  flex-shrink: 0;
}

.quick-play-prompt__icon svg {
  width: 18px;
  height: 18px;
}

.quick-play-prompt__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-0-5, 2px);
}

.quick-play-prompt__title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent-success, #22c55e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quick-play-prompt__character {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-play-prompt__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.quick-play-prompt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: var(--space-1-5, 6px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
  border: none;
}

.quick-play-prompt__btn svg {
  width: 14px;
  height: 14px;
}

.quick-play-prompt__btn--play {
  background: var(--color-accent-success, #22c55e);
  color: white;
}

.quick-play-prompt__btn--play:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.quick-play-prompt__btn--play:active {
  transform: translateY(0);
}

/* Resume Incomplete Character Prompt */
.lobby-banner__resume-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.15) 0%,
    rgba(124, 58, 237, 0.05) 100%
  );
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-md, 8px);
  animation: resumePromptSlideIn 0.3s ease-out;
}

/* Draft-state modifier (#4263 finding 2.3) — visually distinguishes the
   in-progress character creation strip from the solid "Continue Playing"
   strip above. Dashed border signals "unfinished", lower-saturation fill
   signals "rough draft", and the inline "Draft" badge gives the explicit
   state label so the two strips are never confusable at a glance. */
.lobby-banner__resume-prompt--draft {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.08) 0%,
    rgba(124, 58, 237, 0.03) 100%
  );
  border: 1px dashed rgba(124, 58, 237, 0.5);
}

.resume-prompt__badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1-5, 6px);
  padding: 1px var(--space-1-5, 6px);
  font-size: 10px;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-accent-primary);
  background: rgba(124, 58, 237, 0.15);
  border: 1px dashed rgba(124, 58, 237, 0.5);
  border-radius: var(--radius-sm, 4px);
  vertical-align: middle;
  line-height: 1.2;
}

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

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

.resume-prompt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md, 8px);
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-accent-primary);
  flex-shrink: 0;
}

.resume-prompt__icon svg {
  width: 18px;
  height: 18px;
}

.resume-prompt__content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--space-0-5, 2px);
}

.resume-prompt__title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.resume-prompt__character {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.resume-prompt__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}

.resume-prompt__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  padding: var(--space-1-5, 6px) var(--space-3, 12px);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), transform var(--transition-fast, 0.15s);
  border: none;
  background: transparent;
}

.resume-prompt__btn svg {
  width: 14px;
  height: 14px;
}

.resume-prompt__btn--resume {
  background: var(--color-accent-primary);
  color: white;
}

.resume-prompt__btn--resume:hover {
  background: var(--color-accent-primary-hover, #6d28d9);
  transform: translateY(-1px);
}

.resume-prompt__btn--resume:active {
  transform: translateY(0);
}

.resume-prompt__btn--discard {
  padding: var(--space-1-5, 6px);
  color: var(--color-text-muted);
}

.resume-prompt__btn--discard:hover {
  color: var(--color-accent-error);
  background: rgba(239, 68, 68, 0.1);
}

/* Announcements Slot */
.lobby-banner__announcements {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

/* State-driven visibility (preferred over inline style mutations) */
.lobby-banner__announcements--hidden {
  display: none;
}

.lobby-banner__announcement {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

.lobby-banner__announcement--info {
  border-left: 3px solid var(--color-accent-info, #3b82f6);
}

.lobby-banner__announcement--success {
  border-left: 3px solid var(--color-accent-success, #22c55e);
}

.lobby-banner__announcement--warning {
  border-left: 3px solid var(--color-accent-warning, #f59e0b);
}

/* Context-specific banner backgrounds */
.lobby-banner--combat {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(239, 68, 68, 0.05) 100%
  );
  border-bottom-color: rgba(239, 68, 68, 0.3);
}

.lobby-banner--character_creation {
  background: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.15) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border-bottom-color: rgba(124, 58, 237, 0.3);
  min-height: auto;
  max-height: none;
  padding: var(--space-3, 12px) var(--space-4, 16px);
}

.lobby-banner--exploration {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(34, 197, 94, 0.05) 100%
  );
  border-bottom-color: rgba(34, 197, 94, 0.3);
}

/* Character Creation Header */
.lobby-banner__creation-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.creation-header__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
}

.creation-header__title {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.creation-header__subtitle {
  font-size: var(--font-size-sm, 14px);
  font-style: italic;
  color: var(--color-accent-primary);
  opacity: 0.8;
}

/* Character Creation Step Summary (in header, replaces duplicate progress bar) */
.creation-header__step-summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  margin-top: var(--space-1, 4px);
}

.creation-header__step-text {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.creation-header__step-count {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * Sticky Mobile Step Indicator
 * Shows "Step N of M: Description" on mobile
 * within the creation-progress component
 * ======================================== */

.creation-progress__mobile-step {
  display: none;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  text-align: center;
  padding-top: var(--space-1, 4px);
}

.creation-progress__mobile-step-text {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: 500;
}

@media (max-width: 640px) {
  .creation-progress__mobile-step {
    display: block;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    animation: none;
  }

  .quick-play-prompt__btn--play:hover,
  .resume-prompt__btn--resume:hover {
    transform: none;
  }
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .lobby-banner {
    padding: var(--space-3, 12px);
    max-height: none;
  }

  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    flex-wrap: wrap;
  }

  .quick-play-prompt__content,
  .resume-prompt__content {
    flex-basis: calc(100% - 44px);
  }

  .quick-play-prompt__actions,
  .resume-prompt__actions {
    margin-left: auto;
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: var(--space-2, 8px);
  }
}

/* ========================================
 * Mobile compaction (#3705, #3706, #3748)
 * Below 768px:
 *   - Banner total height target: ≤72px (#3748 — both lobby + creation contexts)
 *   - Icon shrinks from 80×48 SVG to 24×24 inline
 *   - Subtitle hidden
 *   - Quick-cmds inlined into a single horizontally-scrollable row
 *     (was wrapped to multiple rows pre-#3748 — wrapping pushed banner to
 *     ~92-120px, well over the 72px cap. Horizontal scroll keeps every chip
 *     reachable via swipe while collapsing to one ~28px row.)
 *   - Duplicate "Your Heroes / Quick Start" post-it cards hidden
 *     (slash-commands /characters and /presets remain in input)
 *   - Character-creation banner: title row only (no separate step summary
 *     row), smaller font; step summary still rendered below banner via
 *     creation-progress component.
 *
 * Regression guards:
 *   - e2e/tests/mobile/lobby-banner-postit-hide.spec.js (#3749)
 *   - e2e/tests/mobile/lobby-banner-height.spec.js (#3748)
 * ======================================== */
@media (max-width: 767px) {
  .lobby-banner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    min-height: 0;
    max-height: 72px;
    overflow: hidden;
  }

  /* Override the .lobby-banner--character_creation desktop padding so the
     creation context also honors the 72px cap (#3748). The desktop rule at
     line ~407 has equal specificity but loses on source order — we re-declare
     padding here defensively in case someone re-orders the file. */
  .lobby-banner.lobby-banner--character_creation {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    max-height: 72px;
  }

  /* Greeting row collapses to icon + greeting on one line */
  .lobby-banner__welcome--svg {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 8px);
    min-width: 0;
    flex-wrap: nowrap;
  }

  /* Shrink dragon icon to 24x24 */
  .lobby-banner__dragon-svg {
    width: 24px;
    height: 24px;
  }

  /* Greeting text inline, no padding */
  .lobby-banner__greeting-text {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 8px);
    padding-top: 0;
    min-width: 0;
    overflow: hidden;
  }

  .lobby-banner__greeting {
    font-size: var(--font-size-sm, 14px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Drop subtitle on mobile */
  .lobby-banner__subtitle {
    display: none;
  }

  /* #3748: Single-row chip strip with horizontal scroll.
     Pre-#3748 the row wrapped to 2-3 lines (28px × 3 = 84px), pushing banner
     past 72px. Now the row is nowrap + overflow-x:auto — all 7 chips remain
     tappable via horizontal swipe, the banner stays one chip-row tall (~28px),
     and discoverability is preserved (chips visible at the right edge invite
     the swipe). */
  .lobby-banner__quick-commands {
    flex: 1 1 100%;
    margin-top: 0;
    gap: var(--space-1, 4px);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }

  .lobby-banner__quick-commands::-webkit-scrollbar {
    display: none; /* Chrome/Safari — chips visible at edge are the affordance */
  }

  .lobby-banner__quick-label {
    display: none;
  }

  .lobby-banner__quick-cmd {
    min-height: 24px;
    padding: 0 var(--space-1-5, 6px);
    font-size: 11px;
    flex-shrink: 0; /* Don't compress chips inside the scroll strip */
  }

  /* #3706 / #3749: Hide duplicate post-it CTAs on mobile.
     The quick-cmd chips already cover /characters + /presets via input.
     Regression guard: e2e/tests/mobile/lobby-banner-postit-hide.spec.js. */
  .lobby-banner__quick-play-prompt,
  .lobby-banner__resume-prompt {
    display: none;
  }

  /* #3748: Compact creation-context header.
     Desktop renders title (18px bold) + subtitle italic + step summary +
     step count = ~50-60px of text + 24px padding = ~84+px. At mobile we
     collapse to a single line: title + step count, drop subtitle. The
     creation-progress component below the banner still shows the detailed
     step text via .creation-progress__mobile-step (line ~490). */
  .lobby-banner__creation-header {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin-bottom: 0;
    min-width: 0;
    overflow: hidden;
  }

  .creation-header__title-row {
    align-items: baseline;
    gap: var(--space-2, 8px);
    min-width: 0;
    overflow: hidden;
  }

  .creation-header__title {
    font-size: var(--font-size-base, 16px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .creation-header__subtitle {
    /* Drop the italic subtitle on mobile — title already says "Character
       Creation"; subtitle is decorative. */
    display: none;
  }

  .creation-header__step-summary {
    margin-top: 0;
    flex-shrink: 0;
  }

  .creation-header__step-text {
    /* Step text is still rendered by creation-progress on mobile (see
       .creation-progress__mobile-step at ≤640px). Hide here to avoid
       duplication. */
    display: none;
  }

  .creation-header__step-count {
    font-size: var(--font-size-xs, 12px);
  }
}

/* ========================================
 * #3734 4/5 / #3748: Ultra-narrow viewports (≤480px)
 * Tighten chip padding even further. The 767px rule already establishes a
 * single horizontally-scrollable row (#3748), so this just shrinks the chips
 * and keeps the same overflow-x:auto behavior — the scroll stays inside
 * .lobby-banner__quick-commands and never spills to the document.
 * ======================================== */
@media (max-width: 480px) {
  .lobby-banner__quick-commands {
    /* Force the chip row to its own line beneath the greeting/icon. */
    flex-basis: 100%;
    gap: 4px;
    /* Inherit overflow-x: auto from the 767px rule — chips remain reachable
       via swipe. The banner itself has overflow:hidden + max-height:72px so
       this strip cannot leak outside its column. */
  }

  .lobby-banner__quick-cmd {
    /* Slightly smaller padding so common 4-letter chips like /help fit
       3-per-row at 360px. */
    padding: 0 4px;
    font-size: 10.5px;
    min-height: 24px;
  }
}
/* Image Quota Badge (#3805, redesigned #4256)
 * Visual gauge surfaced in the lobby that shows per-user image generation
 * usage as two stacked segmented progress bars (daily on top, hourly below).
 * Mobile-friendly: collapses caption width and tightens spacing under 480px.
 * Replaced the prior text-strip ("Images: 0/30 today · 0/10 this hour") that
 * looked like debug output. The bars communicate fill at a glance and shift
 * to warm/amber at 80% and to a prominent red at 100% (exceeded).
 * ========================================================================== */

.image-quota-badge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  margin: 0;
  background: var(--color-bg-tertiary, #1a1a1a);
  border-top: 1px solid var(--color-border-subtle, #2a2a2a);
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
  font-size: 0.85rem;
  line-height: 1.4;
  min-height: 28px;
}

.image-quota-badge__icon {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  opacity: 0.65;
  flex-shrink: 0;
}

.image-quota-badge__icon svg {
  width: 100%;
  height: 100%;
}

.image-quota-badge__label {
  color: var(--color-text-tertiary, #888);
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ==========================================================================
 * Visual gauge — two stacked segmented bars (#4256)
 *
 * Each row is a 3-column grid: caption | bar | count. The fill scales by
 * the inline CSS variable `--fill` (a percentage 0-100) and the row-level
 * `data-state` attribute drives color (ok / warning / exceeded). Cascading
 * state classes on the parent badge ensure server-rendered HTML and
 * JS-updated state stay in lockstep.
 * ========================================================================== */

.image-quota-gauge {
  display: flex;
  flex: 1 1 12rem;
  flex-direction: column;
  gap: 4px;
  min-width: 10rem;
  max-width: 22rem;
}

.image-quota-gauge__row {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: 0.72rem;
  line-height: 1;
}

.image-quota-gauge__caption {
  color: var(--color-text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.65rem;
  font-weight: 600;
}

.image-quota-gauge__bar {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--color-border-subtle, #2a2a2a);
  overflow: hidden;
  /* Subtle segmented texture — 8 ticks across the rail, mirrors typical
     hourly cap (10) and dailies divisible by 8. Decorative only. */
  background-image:
    linear-gradient(
      to right,
      transparent calc(12.5% - 1px),
      rgba(255, 255, 255, 0.04) calc(12.5% - 1px),
      rgba(255, 255, 255, 0.04) 12.5%,
      transparent 12.5%
    );
  background-size: 12.5% 100%;
}

.image-quota-gauge__fill {
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: var(--color-accent, #3b82f6);
  border-radius: inherit;
  transition: width 0.35s ease, background-color 0.2s ease;
}

/* Per-row state coloring. Driven by data-state on the row so the daily and
   hourly bars can shift independently (e.g. hour at 100%, day at 40%). */
.image-quota-gauge__row[data-state="ok"] .image-quota-gauge__fill {
  background: var(--color-accent, #3b82f6);
}

.image-quota-gauge__row[data-state="warning"] .image-quota-gauge__fill {
  background: var(--color-warning, #f59e0b);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.image-quota-gauge__row[data-state="exceeded"] .image-quota-gauge__fill {
  background: var(--color-danger, #ef4444);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

/* Pulse the exceeded bar so "cap reached" is unmissable without being noisy. */
@keyframes image-quota-gauge-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}

.image-quota-gauge__row[data-state="exceeded"] .image-quota-gauge__fill {
  animation: image-quota-gauge-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .image-quota-gauge__fill {
    transition: none;
    animation: none !important;
  }
}

.image-quota-gauge__count {
  color: var(--color-text-primary, #ddd);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  white-space: nowrap;
}

.image-quota-gauge__count-sep {
  opacity: 0.45;
  margin: 0 1px;
}

.image-quota-badge__warning {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
 * Panel-resident variant (#4381)
 * When the badge is rendered inside the image-gallery panel rather than as
 * full-bleed lobby chrome, it drops the edge-to-edge borders and gains a
 * rounded card appearance that fits the gallery's vertical layout.
 * ========================================================================== */

.image-quota-badge--in-panel {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
  border-radius: 0;
  margin: 0 0 var(--space-2, 8px) 0;
}

/* Restate the warning/exceeded border overrides for in-panel context so the
   state colors still cascade correctly without the top/side borders. */
.image-quota-badge--in-panel.image-quota-badge--warning {
  border-bottom-color: var(--color-warning, #d97706);
}

.image-quota-badge--in-panel.image-quota-badge--exceeded {
  border-left: 3px solid var(--color-danger, #dc2626);
  border-bottom: 1px solid var(--color-danger, #dc2626);
}

/* State variants */
.image-quota-badge--ok {
  /* default — neutral tint */
}

/* State-driven visibility (preferred over inline style mutations) */
.image-quota-badge--hidden {
  display: none;
}

.image-quota-badge__warning--hidden {
  display: none;
}

.image-quota-badge--warning {
  color: var(--color-text-primary, #ddd);
  border-top-color: var(--color-warning, #d97706);
  border-bottom-color: var(--color-warning, #d97706);
  background: linear-gradient(
    180deg,
    rgba(217, 119, 6, 0.05) 0%,
    var(--color-bg-tertiary, #1a1a1a) 100%
  );
}

.image-quota-badge--warning .image-quota-badge__warning {
  background: var(--color-warning-bg, rgba(217, 119, 6, 0.15));
  color: var(--color-warning, #f59e0b);
  border: 1px solid var(--color-warning, #d97706);
}

.image-quota-badge--exceeded {
  /* Promote exceeded state from a 28px strip into a prominent banner
     (#4269 finding 8.3). Stronger left accent + extra padding makes the
     blocked-generation state clearly noticed without blocking gameplay. */
  color: var(--color-text-primary, #ddd);
  border-top: 1px solid var(--color-danger, #dc2626);
  border-bottom: 1px solid var(--color-danger, #dc2626);
  border-left: 3px solid var(--color-danger, #dc2626);
  padding-top: var(--space-3, 12px);
  padding-bottom: var(--space-3, 12px);
  background: linear-gradient(
    180deg,
    rgba(220, 38, 38, 0.12) 0%,
    var(--color-bg-tertiary, #1a1a1a) 100%
  );
}

.image-quota-badge--exceeded .image-quota-badge__warning {
  background: var(--color-danger-bg, rgba(220, 38, 38, 0.15));
  color: var(--color-danger, #ef4444);
  border: 1px solid var(--color-danger, #dc2626);
  font-weight: 700;
}

/* ==========================================================================
 * Exceeded-state banner detail (#4269 finding 8.3)
 * Renders only when the badge is in --exceeded state. Spans the badge full
 * width below the gauge to explain what's blocked and how to recover.
 * ========================================================================== */

.image-quota-badge__exceeded-detail {
  flex-basis: 100%;
  margin: var(--space-2, 8px) 0 0 0;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-danger-bg, rgba(220, 38, 38, 0.12));
  border: 1px solid var(--color-danger, #dc2626);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-primary, #ddd);
  font-size: 0.82rem;
  line-height: 1.45;
}

.image-quota-badge__exceeded-detail--hidden {
  display: none;
}

.image-quota-badge__exceeded-message {
  margin: 0 0 var(--space-1, 4px) 0;
  color: var(--color-text-primary, #ddd);
}

.image-quota-badge__exceeded-recovery {
  margin: 0;
  color: var(--color-text-secondary, #aaa);
  font-size: 0.78rem;
}

/* ==========================================================================
 * Tier-upgrade CTA (#3862)
 * Visible only when the badge is in --exceeded state. Server-rendered as
 * either a link to /billing (for subscribers) or neutral free-tier text
 * (for non-subscribers). Controller toggles --hidden class.
 * ========================================================================== */

.image-quota-badge__cta {
  flex-basis: 100%;
  margin: var(--space-1, 4px) 0 0 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--color-text-secondary, #aaa);
}

.image-quota-badge__cta--hidden {
  display: none;
}

.image-quota-badge__cta-link {
  color: var(--color-danger, #ef4444);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.image-quota-badge__cta-link:hover,
.image-quota-badge__cta-link:focus-visible {
  color: var(--color-danger-hover, #f87171);
}

.image-quota-badge__cta-text {
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

/* ==========================================================================
 * Pre-generation confirm dialog (#3862)
 * Lightweight modal anchored to the badge but positioned fixed so it's
 * mobile-friendly and not clipped by container overflow.
 * ========================================================================== */

.image-quota-confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 16px);
}

.image-quota-confirm-dialog--hidden {
  display: none;
}

.image-quota-confirm-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.image-quota-confirm-dialog__panel {
  position: relative;
  z-index: var(--z-base);
  max-width: 28rem;
  width: 100%;
  padding: var(--space-4, 16px) var(--space-5, 20px);
  background: var(--color-bg-secondary, #161616);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--color-text-primary, #ddd);
  font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
}

.image-quota-confirm-dialog__title {
  margin: 0 0 var(--space-2, 8px) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary, #ddd);
}

.image-quota-confirm-dialog__message {
  margin: 0 0 var(--space-4, 16px) 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #aaa);
}

.image-quota-confirm-dialog__actions {
  display: flex;
  gap: var(--space-2, 8px);
  justify-content: flex-end;
}

.image-quota-confirm-dialog__btn {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.image-quota-confirm-dialog__btn--cancel {
  background: transparent;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text-secondary, #aaa);
}

.image-quota-confirm-dialog__btn--cancel:hover,
.image-quota-confirm-dialog__btn--cancel:focus-visible {
  border-color: var(--color-border-strong, #555);
  color: var(--color-text-primary, #ddd);
}

.image-quota-confirm-dialog__btn--confirm {
  background: var(--color-accent, #3b82f6);
  border: 1px solid var(--color-accent, #3b82f6);
  color: var(--color-on-accent, #fff);
}

.image-quota-confirm-dialog__btn--confirm:hover,
.image-quota-confirm-dialog__btn--confirm:focus-visible {
  background: var(--color-accent-hover, #2563eb);
  border-color: var(--color-accent-hover, #2563eb);
}

/* Mobile: tighten gauge, stack warning below buckets */
@media (max-width: 480px) {
  .image-quota-badge {
    font-size: 0.78rem;
    padding: var(--space-2, 8px);
    gap: var(--space-1, 4px);
  }

  .image-quota-gauge {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .image-quota-gauge__row {
    grid-template-columns: 2.5rem 1fr auto;
    gap: var(--space-1, 4px);
  }

  .image-quota-gauge__caption {
    font-size: 0.6rem;
  }

  .image-quota-badge__warning {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
  }

  .image-quota-badge__cta {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .image-quota-confirm-dialog__panel {
    max-width: 100%;
  }

  .image-quota-confirm-dialog__actions {
    flex-direction: column-reverse;
  }

  .image-quota-confirm-dialog__btn {
    width: 100%;
  }
}
/* Lobby Browser Panel
 * ====================
 * Subtle, minimal lobby browser (quick-actions style).
 */

.lobby-browser-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
}

/* Global button reset for lobby browser - ensure all buttons are subtle */
.lobby-browser-panel .btn,
.lobby-browser-panel button.btn {
  box-shadow: none;
}

/* Show panel header when in lobby sidebar, hide toolbar */
.lobby-campaigns-sidebar .lobby-browser-panel .panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-browser-panel .panel-toolbar {
  display: none;
}

/* Panel content fills available space and scrolls when form is open */
.lobby-browser-panel .panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* Section Headers - shown in sidebar, hidden when grid panel header shows title */
/* Base section-header from components/_section.css */
.lobby-browser-panel .section-header {
  display: none;
}

.lobby-campaigns-sidebar .lobby-browser-panel .section-header {
  display: flex;
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-2) var(--space-1);
}

/* (section-header SVG styles removed — header is hidden) */

/* Open Lobbies Section */
.open-lobbies-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
  min-height: 0;
}

/* Lobbies List */
.lobbies-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  overflow-y: auto;
  min-height: 0;
}

/* Lobby Card - Subtle Row Style */
.lobby-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px var(--space-2);
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--transition-fast);
}

.lobby-card:hover {
  background: rgba(255, 255, 255, 0.03);
}

.lobby-card:last-child {
  border-bottom: none;
}

.lobby-card__name {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 80px;
  max-width: 120px;
}

.lobby-card__dm {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 60px;
}

.lobby-card__dm-status {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-card__dm-status.dm-status--online {
  background: var(--color-success);
  box-shadow: 0 0 3px var(--color-success);
}

.lobby-card__dm-status.dm-status--offline {
  background: var(--color-text-muted);
}

.lobby-card__dm-name {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lobby-card__details {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.lobby-card__world,
.lobby-card__level,
.lobby-card__players {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.lobby-card__world svg,
.lobby-card__level svg,
.lobby-card__players svg {
  width: 10px;
  height: 10px;
}

.lobby-card__status {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lobby-card__status.status--open {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--color-success);
}

.lobby-card__status.status--in-game {
  background: var(--color-warning-bg, rgba(251, 191, 36, 0.15));
  color: var(--color-warning);
}

/* Visibility Badges */
.lobby-card__visibility {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  font-size: 9px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  white-space: nowrap;
}

.lobby-card__visibility.visibility--spectate {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
}

.lobby-card__visibility.visibility--spectate-only {
  background: var(--color-muted-bg, rgba(107, 114, 128, 0.15));
  color: var(--color-text-muted);
}

.lobby-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Lobby Action Buttons - Subtle ghost-style buttons */
.lobby-action {
  padding: 3px 8px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-muted);
  box-shadow: none;
  font-weight: normal;
}

.lobby-action:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text);
}

.lobby-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-action svg {
  width: 10px;
  height: 10px;
}

/* Join button - gold accent */
.lobby-action--join,
.lobby-action--primary {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.25);
  color: var(--color-gold, #ffd700);
}

.lobby-action--join:hover:not(:disabled),
.lobby-action--primary:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}

/* Spectate button - info blue accent */
.lobby-action--spectate {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.25);
  color: var(--color-info, #3b82f6);
}

.lobby-action--spectate:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

/* Hidden elements in table row mode */
.lobby-card__header,
.lobby-card__badges,
.lobby-card__info,
.lobby-card__message,
.lobby-card__note {
  display: none;
}

/* Skeleton Loading State */
.lobby-skeleton-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lobby-card--skeleton {
  pointer-events: none;
  opacity: 0.6;
}

.lobby-card--skeleton .skeleton-line {
  display: inline-block;
  flex-shrink: 0;
}

/* Skeleton line size variants — scoped to lobby skeleton cards so they don't
   collide with the global .skeleton-line--name variant in components/_skeleton.css.
   Sizes match the design tokens for the corresponding non-skeleton elements. */
.lobby-card--skeleton .skeleton-line--name {
  width: 90px;
  height: 12px;
}

.lobby-card--skeleton .skeleton-line--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.lobby-card--skeleton .skeleton-line--dm-name {
  width: 50px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--world {
  width: 40px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--players {
  width: 30px;
  height: 10px;
}

.lobby-card--skeleton .skeleton-line--badge {
  width: 32px;
  height: 14px;
  border-radius: var(--radius-full, 9999px);
}

.lobby-card--skeleton .skeleton-line--action {
  width: 44px;
  height: 20px;
  border-radius: var(--radius-full, 9999px);
}

/* Empty State */
.lobby-browser-panel .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
}

.lobby-browser-panel .empty-state.hidden {
  display: none;
}

.lobby-browser-panel .empty-state .empty-icon {
  display: none;
}

.lobby-browser-panel .empty-state h4 {
  display: none;
}

.lobby-browser-panel .empty-state p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 11px;
  opacity: 0.7;
}

/* Error State */
.lobby-browser-panel .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-error);
}

.lobby-browser-panel .error-state svg {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
}

.lobby-browser-panel .error-state p {
  margin: 0 0 var(--space-4);
}

/* Footer - subtle */
.lobby-browser-panel .panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: transparent;
  font-size: 9px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

/* Footer Left (for lobby count and last updated) */
.lobby-browser-panel .panel-footer .footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Footer loading state — hide stale "0 lobbies / Updated just now" defaults
   while skeleton loader is showing. Count placeholder ("…") still renders;
   last-updated is hidden until the first successful load. (Finding 4.3) */
.lobby-browser-panel .panel-footer.lobby-browser__footer--loading .lobby-count {
  opacity: 0.5;
}

.lobby-browser-panel .panel-footer.lobby-browser__footer--loading .last-updated {
  display: none;
}

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

/* ──────────────────────────────────────────
   Active-game banner (#4456)
   Shows when player is already in a multiplayer session.
   Hosting: gold/shield accent; guest: blue accent.
   ────────────────────────────────────────── */
.active-game-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-md);
  background: rgba(255, 215, 0, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.18);
  font-size: 11px;
  line-height: 1.4;
}

.active-game-banner__icon {
  flex-shrink: 0;
  color: var(--color-gold, #ffd700);
  opacity: 0.8;
}

.active-game-banner__icon svg {
  width: 14px;
  height: 14px;
}

.active-game-banner__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

.active-game-banner__label {
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.active-game-banner__label--hosting {
  color: var(--color-gold, #ffd700);
}

.active-game-banner__label--guest {
  color: var(--color-info, #3b82f6);
}

.active-game-banner__name {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.active-game-banner__actions {
  flex-shrink: 0;
}

.active-game-banner__go-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.3);
  color: var(--color-gold, #ffd700);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.active-game-banner__go-btn:hover {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  color: var(--color-gold, #ffd700);
  text-decoration: none;
}

.active-game-banner__go-btn svg {
  width: 10px;
  height: 10px;
}

/* Guest variant — blue accent */
.active-game-banner:has(.active-game-banner__label--guest) {
  background: rgba(59, 130, 246, 0.06);
  border-color: rgba(59, 130, 246, 0.18);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__icon {
  color: var(--color-info, #3b82f6);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__go-btn {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  color: var(--color-info, #3b82f6);
}

.active-game-banner:has(.active-game-banner__label--guest) .active-game-banner__go-btn:hover {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.5);
}

/* Hosting badge in lobby cards (#4456) */
.lobby-card--hosting {
  background: rgba(255, 215, 0, 0.04);
  border-left: 2px solid rgba(255, 215, 0, 0.35);
}

.lobby-card__hosting-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  font-size: 8px;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 215, 0, 0.15);
  color: var(--color-gold, #ffd700);
  vertical-align: middle;
}

.lobby-card__hosting-badge svg {
  width: 8px;
  height: 8px;
}

/* Manage button — DM host variant of the Rejoin button */
.lobby-action--manage {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
}

.lobby-action--manage:hover:not(:disabled) {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.35);
}

/* Empty-state hint (inline kbd) */
.lobby-browser-panel .empty-state .empty-state__hint {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 10px;
  color: var(--color-text-muted);
  opacity: 0.7;
}

.lobby-browser-panel .empty-state .empty-state__hint kbd {
  display: inline-block;
  padding: 0 4px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-primary);
}

/* Invite Code Disclosure Toggle */
.invite-code-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.invite-code-toggle {
  cursor: pointer;
  list-style: none;
  user-select: none;
  gap: var(--space-1);
}

/* Remove default disclosure triangle (WebKit + Firefox) */
.invite-code-toggle::-webkit-details-marker {
  display: none;
}

.invite-code-section .invite-code-form {
  padding: var(--space-2);
}

/* Responsive */
@media (max-width: 480px) {
  .lobby-card__details {
    flex-direction: column;
    gap: var(--space-1);
  }

  /* Keep buttons inline but allow wrapping */
  .lobby-card__actions {
    flex-wrap: wrap;
  }

  .create-lobby-form .form-actions {
    flex-direction: column;
  }

  .create-lobby-form .form-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .lobby-browser-panel .panel-footer {
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
  }

  .lobby-browser-panel .panel-footer .footer-left {
    justify-content: space-between;
  }

  .lobby-browser-panel .panel-footer .lobby-action {
    justify-content: center;
  }
}
/* 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;
}

/*
 * #4312: cards inside (`.character-swipe-card`) use `position: absolute`, so
 * the stack itself MUST keep an explicit non-zero height for them to render.
 * Use `min-height` (not just `height`) so a flex parent that compresses its
 * children at narrow viewports (mobile/popout panel) can't shrink the stack
 * below the card-card body height — same root cause as the lobby-inline-panel
 * fix in #4185 (see `_lobby_inline_panel.css`).
 *
 * The probe in #4312 found this element at w=0,h=0 inside `.detail-modal`
 * when the campaign-join modal's preset section was visible on a 725×570
 * viewport. Without the explicit sizing chain, the absolute-positioned cards
 * have no anchor and the player sees a hint header with no cards beneath.
 */
.character-select-modal__swipe-stack {
  position: relative;
  width: 100%;
  max-width: 280px;
  min-height: 340px;
  margin: 0 auto var(--space-2);
  outline: none;
  overflow: visible;
  perspective: 1000px;
  /* #4312: don't let the flex parent compress this below min-height. */
  flex-shrink: 0;
}

.character-select-modal__swipe-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.character-select-modal__swipe-counter {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 3em;
  text-align: center;
}

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

/*
 * #4312: extend mobile-mode breakpoint to 768px (was 600px). The bug repro
 * was a 725×570 viewport — wider than the old 600px cap, but still narrow
 * enough that the campaign-join modal needs the mobile layout. Without this,
 * a 700px tablet/popout viewport got the desktop swipe-stack sizing AND a
 * flex parent that compressed it to zero height.
 */
@media (max-width: 768px) {
  .character-select-modal__swipe-stack {
    max-width: 100%;
    min-height: 320px;
  }
}

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

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

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

  .character-select-modal__campaign-badge {
    max-width: 80px;
  }
}

/*
 * #4312: very narrow phones — keep cards visible without overflowing viewport.
 * Mirrors the lobby-inline-panel breakpoint in `_lobby_inline_panel.css`.
 */
@media (max-width: 380px) {
  .character-select-modal__swipe-stack {
    min-height: 280px;
  }
}
/*
 * Creation Progress 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;
}

/*
 * Float-over-narrative drag affordance (#3903 Phase 5 follow-up).
 * Body-level toggle from floating_panel_controller#startDrag/#stopDrag.
 * Soft-blurs the docked split-panels behind the dragging floater so the
 * user can visually confirm "this is hovering over the layout" without us
 * having to draw an explicit drop region. Reduced-motion users skip the
 * blur entirely (no animation, no perceptual cost worth the GPU spend).
 */
body.floating-panel-dragging .split-panel--left,
body.floating-panel-dragging .split-panel--right {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: backdrop-filter 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  body.floating-panel-dragging .split-panel--left,
  body.floating-panel-dragging .split-panel--right {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
  }
}

.floating-panel--snap-preview {
  background: var(--color-accent-primary);
  opacity: 0.2;
  pointer-events: none;
}

/* Entrance animation */
@keyframes floating-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.floating-panel--entering {
  animation: floating-panel-enter 0.2s ease-out;
}

/* Exit animation */
@keyframes floating-panel-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.floating-panel--exiting {
  animation: floating-panel-exit 0.15s ease-in;
  pointer-events: none;
}

/* Minimize animation */
@keyframes floating-panel-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
}

.floating-panel--minimizing {
  animation: floating-panel-minimize 0.2s ease-in forwards;
}

/* ========================================
 * TOOLTIP (for panel messages)
 * ======================================== */

.floating-panel__tooltip {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-primary);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  z-index: var(--z-floating-above);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

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

/* ========================================
 * MOBILE: DISABLE FLOATING PANELS
 * ======================================== */

/* Mobile breakpoint — synced with lib/breakpoints.js */
@media (max-width: 767px) {
  .floating-panel,
  .floating-dock,
  .floating-panels-container {
    display: none;
  }
}

/* ========================================
 * POP-OUT BUTTON IN SPLIT PANELS
 * ======================================== */

.panel-header__btn--popout {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.split-panel:hover .panel-header__btn--popout {
  opacity: 1;
}

.panel-header__btn--popout:hover {
  color: var(--color-accent-primary);
}

/* ========================================
 * SNAP-TO-EDGE
 * ======================================== */

/* Snap preview overlay */
.floating-panel__snap-preview {
  position: fixed;
  display: none;
  background: rgba(139, 92, 246, 0.15);
  border: 2px dashed rgba(139, 92, 246, 0.6);
  border-radius: var(--panel-border-radius, 8px);
  pointer-events: none;
  z-index: var(--z-curtain);
  animation: snap-preview-pulse 1s ease-in-out infinite;
}

@keyframes snap-preview-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.005);
  }
}

/* Snap preview edge highlights */
.floating-panel__snap-preview[data-edge*="left"] {
  border-left-width: 4px;
  border-left-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="right"] {
  border-right-width: 4px;
  border-right-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="top"] {
  border-top-width: 4px;
  border-top-color: var(--color-accent-primary, #8b5cf6);
}

.floating-panel__snap-preview[data-edge*="bottom"] {
  border-bottom-width: 4px;
  border-bottom-color: var(--color-accent-primary, #8b5cf6);
}

/* Snapping animation */
.floating-panel--snapping {
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

/* Visual feedback when near snap zone */
.floating-panel--dragging {
  opacity: 0.9;
}

/* ========================================
 * DOCK PREVIEW OVERLAY
 * Shows where panel will dock on drop
 * ======================================== */

/* Dock preview overlay (covers half the screen) */
.floating-panel__dock-preview {
  position: fixed;
  display: none;
  background: linear-gradient(
    to bottom,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(59, 130, 246, 0.15) 50%,
    rgba(59, 130, 246, 0.08) 100%
  );
  border: 2px dashed rgba(59, 130, 246, 0.5);
  pointer-events: none;
  z-index: var(--z-curtain);
  animation: dock-preview-pulse 1.2s ease-in-out infinite;
}

@keyframes dock-preview-pulse {
  0%, 100% {
    opacity: 0.7;
    border-color: rgba(59, 130, 246, 0.5);
  }
  50% {
    opacity: 1;
    border-color: rgba(59, 130, 246, 0.8);
  }
}

/* Left dock zone styling */
.floating-panel__dock-preview[data-zone="left"] {
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--color-accent-primary, #3b82f6);
  border-right: none;
  border-radius: 0 12px 12px 0;
}

/* Right dock zone styling */
.floating-panel__dock-preview[data-zone="right"] {
  border-right-width: 4px;
  border-right-style: solid;
  border-right-color: var(--color-accent-primary, #3b82f6);
  border-left: none;
  border-radius: 12px 0 0 12px;
}

/* Dock zone indicator icon (arrow pointing to edge) */
.floating-panel__dock-preview::after {
  content: "⬇";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: rgba(59, 130, 246, 0.8);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.floating-panel__dock-preview[data-zone="left"]::after {
  content: "◀";
  left: 20px;
}

.floating-panel__dock-preview[data-zone="right"]::after {
  content: "▶";
  right: 20px;
}

/* ========================================
 * DOCK PREVIEW OVERLAY (edge-triggered, 120px)
 * Lightweight side-strip shown when dragging within threshold of left/right edge.
 * Complements the broader .floating-panel__dock-preview used for half-screen docking.
 * ======================================== */

.dock-preview-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 120px;
  background: rgba(var(--accent-color-rgb, 100, 150, 255), 0.15);
  border: 2px dashed rgba(var(--accent-color-rgb, 100, 150, 255), 0.5);
  pointer-events: none;
  z-index: var(--z-ceiling);
  transition: opacity 0.15s ease;
}

.dock-preview-overlay--left { left: 0; }
.dock-preview-overlay--right { right: 0; }

/* ========================================
 * GHOST/TRANSPARENT PANELS
 * Variable opacity with hover substantiation
 * ======================================== */

/* Base ghost mode */
.floating-panel--ghost {
  backdrop-filter: blur(var(--ghost-blur-subtle));
  -webkit-backdrop-filter: blur(var(--ghost-blur-subtle));
  transition:
    opacity var(--ghost-transition),
    backdrop-filter var(--ghost-transition),
    box-shadow var(--ghost-transition);
}

/* Ghost level: Ethereal (most transparent) */
.floating-panel--ghost.floating-panel--ghost-ethereal {
  opacity: var(--ghost-opacity-ethereal);
  background: rgba(26, 26, 26, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.floating-panel--ghost.floating-panel--ghost-ethereal:hover {
  opacity: calc(var(--ghost-opacity-ethereal) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Wisp */
.floating-panel--ghost.floating-panel--ghost-wisp {
  opacity: var(--ghost-opacity-wisp);
  background: rgba(26, 26, 26, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.floating-panel--ghost.floating-panel--ghost-wisp:hover {
  opacity: calc(var(--ghost-opacity-wisp) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Shade (default) */
.floating-panel--ghost.floating-panel--ghost-shade {
  opacity: var(--ghost-opacity-shade);
  background: rgba(26, 26, 26, 0.6);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.floating-panel--ghost.floating-panel--ghost-shade:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
}

/* Ghost level: Phantom (nearly solid) */
.floating-panel--ghost.floating-panel--ghost-phantom {
  opacity: var(--ghost-opacity-phantom);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.floating-panel--ghost.floating-panel--ghost-phantom:hover {
  opacity: calc(var(--ghost-opacity-phantom) + var(--ghost-hover-opacity-boost));
}

/* Ghost text styling for readability */
.floating-panel--ghost .floating-panel__title,
.floating-panel--ghost .floating-panel__content {
  text-shadow: var(--ghost-text-shadow);
}

/* Ghost header styling */
.floating-panel--ghost .floating-panel__header {
  background: rgba(45, 45, 45, 0.5);
  border-bottom-color: rgba(64, 64, 64, 0.5);
}

/* Ghost controls remain visible on hover */
.floating-panel--ghost .floating-panel__controls {
  opacity: 0.5;
  transition: opacity var(--ghost-transition);
}

.floating-panel--ghost:hover .floating-panel__controls {
  opacity: 1;
}

/* Ghost button in header */
.floating-panel__btn--ghost {
  position: relative;
}

.floating-panel__btn--ghost.active {
  color: var(--color-accent-cyan);
}

/* Ghost level indicator badge */
.floating-panel__btn--ghost::after {
  content: attr(data-ghost-level);
  position: absolute;
  bottom: -2px;
  right: -2px;
  font-size: 8px;
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--ghost-transition);
}

.floating-panel__btn--ghost.active::after {
  opacity: 1;
}

/* High contrast mode: disable transparency */
@media (prefers-contrast: high) {
  .floating-panel--ghost,
  .floating-panel--ghost.floating-panel--ghost-ethereal,
  .floating-panel--ghost.floating-panel--ghost-wisp,
  .floating-panel--ghost.floating-panel--ghost-shade,
  .floating-panel--ghost.floating-panel--ghost-phantom {
    opacity: 1;
    background: var(--color-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .floating-panel--ghost:hover {
    opacity: 1;
  }
}

/* Reduced motion: instant transitions */
@media (prefers-reduced-motion: reduce) {
  .floating-panel--ghost {
    transition: none;
  }

  .floating-panel--ghost .floating-panel__controls {
    transition: none;
  }

  .floating-dock {
    animation: none;
  }
}

/* ==========================================================================
   Mobile-HUD overlay row (#3721)
   ==========================================================================
   In mobile mode, floating-panel elements whose registry entry sets
   `mobileAlwaysVisible: true` get the `.floating-panel--mobile-hud` class
   applied by `mobile_panel_controller#_tagFloatingPanelsForHud`. They are
   pinned in a compact always-visible row at the top of the viewport above
   the narrative scroll, instead of either (a) sitting as desktop-sized
   position:fixed overlays or (b) being hidden inside the bottom-sheet
   switcher.

   Affected panels (5): turn_status_banner, combat_round_log, equipment_cart,
   location_list, portrait_generator.

   Outside mobile mode (>=768px) `.floating-panel--mobile-hud` has no
   effect — desktop layout is preserved.
   ========================================================================== */
@media (max-width: 767px) {
  .floating-panel.floating-panel--mobile-hud {
    /* Override the desktop position the floating_manager wrote inline,
       and pin to the top of the viewport. CSS specificity (0,2,1) plus
       `!important` is needed because floating_manager sets `top`/`left`
       as inline styles via the position value. */
    position: fixed !important;
    top: env(safe-area-inset-top, 0) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    /* Compact: well under the 60px cap from the task constraints. */
    max-height: 56px;
    min-height: 0;
    min-width: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    z-index: var(--z-floating-above, var(--z-floating));
    overflow: hidden;
  }

  /* Compress header chrome — drag handle / resize / dropdown are not
     useful for a HUD row and would push the content out of view. */
  .floating-panel.floating-panel--mobile-hud .floating-panel__header {
    padding: 2px var(--space-2);
    min-height: 0;
    cursor: default;
    border-bottom: 1px solid var(--color-border-primary);
  }

  .floating-panel.floating-panel--mobile-hud .floating-panel__resize {
    display: none;
  }

  .floating-panel.floating-panel--mobile-hud .floating-panel__content {
    padding: 0 var(--space-2);
    overflow: hidden auto;
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.3;
  }

  /* When several HUD panels are present, stack them vertically up to the
     56px cap each — viewport-fixed positioning means they would otherwise
     overlap. The narrative scroll area below should already account for
     mobile chrome via existing rules in mobile_enhancements.css; we don't
     need an offset here because each HUD panel sets its own `top`. */
  .floating-panel.floating-panel--mobile-hud:nth-of-type(2) {
    top: calc(env(safe-area-inset-top, 0) + 56px) !important;
  }

  .floating-panel.floating-panel--mobile-hud:nth-of-type(3) {
    top: calc(env(safe-area-inset-top, 0) + 112px) !important;
  }
}

/* ==========================================================================
   Pop-out CTA hint (#2671)
   Inline panel partials end with a "Pop out for full X management" hint
   div to advertise the pop-out affordance. When a panel is popped out via
   handleInlinePanelPopout (app/javascript/lib/narrative/inline_panel_renderer.ts),
   the inline panel's innerHTML is copied verbatim into `.floating-panel` —
   so the pop-out CTA travels along and appears circularly in the popped view.
   Each CTA carries a shared marker class `inline-panel__popout-hint` (added
   to 6 inline partials: party, equipment, inventory, quests, combat_tracker,
   character_sheet). Hide it whenever it appears inside a floating panel.
   ========================================================================== */
.floating-panel .inline-panel__popout-hint,
.floating-panel__content .inline-panel__popout-hint {
  display: none;
}
/* ============================================
 * Status Panels (Chat-Driven Sidebar)
 * ============================================
 * Minimal status panels for workshop, DM tools, and campaign creator.
 * All real work happens via chat - these just show status and quick actions.
 */

/* Shared Panel Styles */
.panel-workshop-status,
.panel-dm-status,
.panel-campaign-status {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* Header */
.status-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.status-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.status-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

/* Body */
.status-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.status-section {
  margin-bottom: var(--space-4);
}

.status-section:last-child {
  margin-bottom: 0;
}

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

/* Primary section (drafts) - more prominent styling */
.status-section--primary {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  border-left: 3px solid var(--color-accent-primary);
}

.status-section--primary .section-heading {
  color: var(--color-accent-primary);
}

/* Quick Prompt Buttons */
.quick-prompt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.quick-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quick-prompt-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.quick-prompt-btn.full-width {
  width: 100%;
  justify-content: center;
}

.quick-prompt-btn .btn--icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

/* Browse Buttons */
.browse-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.browse-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

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

.browse-btn .btn--icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

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

.stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

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

/* Item List */
.item-list,
.member-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.item-row,
.member-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.item-row:hover,
.member-row:hover {
  background: var(--color-bg-secondary);
}

.item-icon {
  font-size: var(--font-size-base);
}

.item-name,
.member-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Draft item styling */
.item-row--draft:hover {
  background: rgba(97, 175, 239, 0.1);
}

/* Metadata (time ago) */
.item-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Compact list (for published items) */
.item-list--compact .item-row {
  padding: var(--space-1) var(--space-2);
}

.item-list--compact .item-name {
  font-size: var(--font-size-xs);
}

.member-role {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.member-role.role-dm {
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
}

.member-role.role-co_dm {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

/* Campaign Info */
.campaign-info {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.info-row:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

.info-label {
  color: var(--color-text-muted);
}

.info-value {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Plan Card */
.plan-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.plan-card:hover {
  border-color: var(--color-accent-primary);
}

.plan-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.plan-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.plan-status.status-ready {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.plan-status.status-in_progress {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* Invite Code */
.invite-code-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.invite-code {
  flex: 1;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  background: transparent;
  padding: 0;
}

.copy-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}

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

.copy-btn.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}

.invite-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0 0;
}

/* Friend invite suggestions — compact list below the invite code display.
   Only visible to the current user (own friend graph); server never leaks. */
.invite-friend-suggestions {
  margin-top: var(--space-2);
}

.invite-friend-suggestions__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1) 0;
  font-weight: 500;
}

.invite-friend-suggestions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.invite-friend-suggestions__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 2px 0;
}

.invite-friend-suggestions__name {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-friend-suggestions__copy-btn {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.invite-friend-suggestions__copy-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Browse Buttons */
.browse-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.browse-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

/* Empty State */
.status-panel .empty-state {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-3);
  margin: 0;
}

/* Footer */
.status-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

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

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

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

.sp-tab-btn--popout svg {
  display: block;
  width: 14px;
  height: 14px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .copy-btn__label {
    display: none;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ========================================
 * 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);
  /* Subtle border so the chip outline is always visible, even when bg-tertiary is close to bg-secondary (#4132) */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  transition: background 0.15s, border-color 0.15s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ========================================
 * 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: var(--rarity-artifact);
  background: var(--color-danger-subtle);
}

.cs-achievement--mythic .cs-achievement__name {
  color: var(--rarity-artifact);
}

.cs-achievement--legendary {
  border-left-color: var(--rarity-legendary);
  background: var(--overlay-gold-subtle);
}

.cs-achievement--legendary .cs-achievement__name {
  color: var(--rarity-legendary);
}

.cs-achievement--epic {
  border-left-color: var(--rarity-very-rare);
  background: var(--color-entity-spell-bg);
}

.cs-achievement--epic .cs-achievement__name {
  color: var(--rarity-very-rare);
}

.cs-achievement--rare {
  border-left-color: var(--rarity-rare);
  background: var(--color-info-bg);
}

.cs-achievement--rare .cs-achievement__name {
  color: var(--rarity-rare);
}

.cs-achievement--common {
  border-left-color: var(--rarity-uncommon);
  background: var(--color-success-subtle);
}

.cs-achievement--common .cs-achievement__name {
  color: var(--rarity-uncommon);
}

.cs-achievement--trivial {
  border-left-color: var(--color-border);
}

/* ========================================
 * Stats+Skills section divider (#1205)
 * Visual separator between merged content blocks
 * ======================================== */

.cs-section-divider {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
  margin: var(--space-2, 8px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
}

/* ========================================
 * Overview Tab (#1205)
 * Adventure status at a glance — the party's
 * mini-map equivalent for the character sheet.
 * ======================================== */

.cs-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
}

/* HP section in overview */
.cs-ov-hp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

/* Active conditions in overview */
.cs-ov-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
}

/* Compact 4-stat combat row */
.cs-ov-combat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 4px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

.cs-ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cs-ov-stat-value {
  font-size: var(--font-size-lg, 18px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

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

/* Adventure status rows (location, quests, party) */
.cs-ov-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.15);
}

.cs-ov-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.cs-ov-row--clickable {
  cursor: pointer;
  border-radius: 3px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin: 0 calc(-1 * var(--space-2, 8px));
  transition: background 0.15s ease;
}

.cs-ov-row--clickable:hover,
.cs-ov-row--clickable:focus-visible {
  background: rgba(124, 58, 237, 0.15);
  outline: none;
}

.cs-ov-row--clickable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

.cs-ov-label {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cs-ov-value {
  font-size: var(--font-size-sm, 12px);
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-ov-value--badge {
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-accent-purple);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
}

.cs-ov-value--link {
  color: var(--color-accent-purple);
  font-size: var(--font-size-xs, 11px);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.4);
}

/* Mobile adjustments for overview */
@media (max-width: 1024px) {
  .cs-ov-combat-row {
    gap: var(--space-1, 4px);
  }

  .cs-ov-stat-value {
    font-size: var(--font-size-base, 16px);
  }
}

/* Mobile readability: enforce minimum 12px font on touch devices (#946)
   Sub-12px text is illegible on mobile screens. Stat labels, save abbreviations,
   and chip labels use 8-9px for density on desktop but need to be bumped on mobile. */
@media (max-width: 768px) {
  .cs-mini-stat__label,
  .cs-saves-card__label,
  .cs-save-chip__abbr,
  .stat-chip__label {
    font-size: 11px;
  }
}

/**
 * Character Sheet 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: var(--color-fg-on-emphasis);
}

/* Content Area */
.character-sheet-inline__content {
  min-height: 120px;
}

.character-sheet-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

/* Footer */
.character-sheet-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.character-sheet-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.character-sheet-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Stats Tab
 * ========================================== */

.csi-hp-bar {
  position: relative;
  height: 24px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.csi-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-error), var(--color-accent-warning));
  transform-origin: left;
  transition: transform 0.3s ease;
}

.csi-hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-fg-on-emphasis);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.csi-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.csi-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

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

.csi-stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Conditions */
.csi-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.csi-condition {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-warning-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-warning-emphasis);
  cursor: help;
}

/* Ability Grid */
.csi-ability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

@media (min-width: 600px) {
  .csi-ability-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.csi-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.csi-ability-item:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

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

.csi-ability-abbr {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.csi-ability-score {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.csi-ability-mod {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Skills Tab
 * ========================================== */

.csi-skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-xs);
}

.csi-skill {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.csi-skill--clickable {
  cursor: pointer;
}

.csi-skill--clickable:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

.csi-skill--proficient {
  background: var(--color-success-subtle);
}

.csi-skill-prof {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.csi-skill--proficient .csi-skill-prof {
  color: var(--color-accent-success);
}

.csi-skill-name {
  flex: 1;
  color: var(--text-primary);
}

.csi-skill-bonus {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* ==========================================
 * Powers Tab
 * ========================================== */

.csi-powers-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.csi-features-section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.csi-features-section__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.csi-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.csi-feature__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.csi-feature__icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.csi-feature--class .csi-feature__icon {
  color: var(--color-accent-warning);
}

.csi-feature--racial .csi-feature__icon {
  color: var(--color-accent-purple);
}

.csi-feature--feat .csi-feature__icon {
  color: var(--color-accent-cyan);
}

.csi-feature__name {
  color: var(--text-primary);
  font-weight: 500;
}

.csi-feature__level {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.csi-feature__desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  line-height: 1.4;
}

/* Spells */
.csi-spell-slots {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-slot {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-xs);
}

.csi-cantrips,
.csi-spells-section {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-spells-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-spell {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs);
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  cursor: help;
}

.csi-cantrip {
  color: var(--color-accent-primary);
}

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

.csi-gold {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.csi-inventory-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.csi-gear-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-gear-group__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csi-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border-left: 2px solid var(--border-subtle);
}

.csi-item--common { border-left-color: var(--text-muted); }
.csi-item--uncommon { border-left-color: var(--rarity-uncommon); }
.csi-item--rare { border-left-color: var(--rarity-rare); }
.csi-item--very_rare { border-left-color: var(--rarity-very-rare); }
.csi-item--legendary { border-left-color: var(--rarity-legendary); }
.csi-item--artifact { border-left-color: var(--rarity-artifact); }

.csi-item__name {
  flex: 1;
  color: var(--text-primary);
}

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

.csi-item__badge {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 1px 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-fg-on-emphasis);
}

.csi-item__badge--attuned {
  background: var(--color-accent-warning);
}

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

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

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

  .csi-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .csi-skills-list {
    grid-template-columns: 1fr;
  }

  .character-sheet-inline__filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: thin;
  }
}

/* ============================================================================
 * INVENTORY INLINE PANEL
 * A focused view of just the character's inventory/gear.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.inventory-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.inventory-inline__header {
  margin-bottom: var(--spacing-md);
}

.inventory-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.inventory-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.inventory-inline__icon {
  font-size: 1.25em;
}

.inventory-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.inventory-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inventory-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.inventory-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
  font-weight: 600;
}

.inventory-inline__content {
  min-height: 80px;
}

.inventory-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.inventory-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.inventory-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.inventory-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ============================================================================
 * SPELLS INLINE PANEL
 * A focused view of just the character's spells.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.spells-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.spells-inline__header {
  margin-bottom: var(--spacing-md);
}

.spells-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.spells-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.spells-inline__icon {
  font-size: 1.25em;
}

.spells-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.spells-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spells-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.spells-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.spells-inline__content {
  min-height: 80px;
}

.spells-inline__section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.spells-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.spells-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.spells-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.spells-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* Responsive adjustments for inventory and spells panels */
@media (max-width: 600px) {
  .inventory-inline,
  .spells-inline {
    padding: var(--spacing-sm);
  }
}

/* Honor users who request reduced motion — disable reveal animations and
 * transitions on character sheet inline panels (stats/equipment/spells).
 */
@media (prefers-reduced-motion: reduce) {
  .stats-inline,
  .inventory-inline,
  .spells-inline,
  .csi-card,
  .csi-stat,
  .csi-skill,
  .csi-skill-row,
  .csi-feature,
  .csi-equipment-item,
  .csi-spell-item,
  .csi-collapse,
  .csi-collapse__header {
    animation: none !important;
    transition: none !important;
  }
}
/**
 * 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;
  /* #2575 / #3747 (Slice 0): defensive min-height: 0.
     Flex children default to min-height: auto, which prevents the child from
     shrinking below its intrinsic content height. On mobile this re-introduces
     the dead-space class fixed by #2575 (commit 34a7a5c2f) — if any descendant
     declares an intrinsic height (e.g. 100dvh on a future child), .zone--main
     refuses to shrink and the sticky input-area + ~40-50% of flex content get
     pushed below the visible viewport. min-height: 0 lets the flex chain
     resolve correctly on every viewport. Safe on desktop too — flex parents
     above already constrain the height. Spec: spec/views/zone_main_min_height_spec.rb. */
  min-height: 0;
  overflow: hidden;
}

/* Collapsed state */
.zone--collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Dockable zone sidebar indicator strip (#1555)
 * Shows a thin colored strip on hover when a sidebar zone is collapsed,
 * hinting that a dockable panel zone exists and can be expanded.
 * Desktop-only: the negative-offset pseudo-elements overflow on mobile. */
@media (min-width: 769px) {
  .zone--left.zone--collapsed,
  .zone--right.zone--collapsed {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
  }

  .zone--left.zone--collapsed::before,
  .zone--right.zone--collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
    z-index: var(--z-sticky);
  }

  .zone--left.zone--collapsed::before {
    right: -4px;
  }

  .zone--right.zone--collapsed::before {
    left: -4px;
  }

  .zone--left.zone--collapsed:hover::before,
  .zone--right.zone--collapsed:hover::before {
    background: var(--color-accent-primary, #7c3aed);
  }
}

/* ==========================================
 * Zone Header (for sidebar zones)
 * ========================================== */

.zone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.zone__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zone__actions {
  display: flex;
  gap: var(--spacing-xs);
}

.zone__action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zone__action-btn:hover {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ==========================================
 * Zone Content
 * ========================================== */

.zone__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-sm);
}

/* ==========================================
 * Zone Toggle Handles
 * ========================================== */

.zone-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 48px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.zone-toggle:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
}

.zone-toggle--left {
  right: -16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

.zone-toggle--right {
  left: -16px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}

.zone-toggle__icon {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.zone--collapsed .zone-toggle__icon {
  transform: rotate(180deg);
}

/* ==========================================
 * Center Solo (Fullscreen) Mode
 * ========================================== */

.center-solo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.center-solo-overlay.active {
  opacity: 1;
  visibility: visible;
}

.center-solo__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.center-solo__header {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.center-solo__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.center-solo__close:hover {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
  color: #fff;
}

.center-solo__content {
  flex: 1;
  overflow: hidden;
  padding: var(--spacing-md);
}

/* When center solo is active, hide other UI */
body.center-solo-active .terminal-container > *:not(.center-solo-overlay) {
  opacity: 0.3;
  pointer-events: none;
}

/* ==========================================
 * Zone Resize Handles
 * ========================================== */

.zone-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  z-index: var(--z-float);
}

.zone-resize:hover,
.zone-resize.dragging {
  background: var(--color-accent-primary);
}

.zone-resize--left {
  right: 0;
}

.zone-resize--right {
  left: 0;
}

.zone-resize__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background 0.15s ease;
}

.zone-resize:hover .zone-resize__handle,
.zone-resize.dragging .zone-resize__handle {
  background: #fff;
}

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

@media (max-width: 1024px) {
  /* On tablets, sidebars become overlays */
  .zone--left,
  .zone--right {
    position: fixed;
    top: 60px;
    bottom: 60px;
    z-index: var(--z-panel);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

  .zone--left {
    left: 0;
    border-right: 1px solid var(--border-subtle);
  }

  .zone--right {
    right: 0;
    border-left: 1px solid var(--border-subtle);
  }

  .zone--collapsed {
    transform: translateX(-100%);
  }

  .zone--right.zone--collapsed {
    transform: translateX(100%);
  }

  /* Overlay backdrop when sidebar is open */
  .zone-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-panel);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .zone-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }
}

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

  /* Center solo takes full viewport */
  .center-solo__content {
    padding: var(--spacing-sm);
  }
}

/* ==========================================
 * Portrait-Mode Landscape Hint (#1547)
 * Gentle rotate prompt on VTT/map panels in portrait orientation.
 * Scoped to VTT/map panel containers only — not shown globally.
 * ========================================== */

.portrait-rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 480px) {
  .vtt-panel .portrait-rotate-hint,
  .dungeon-map-panel .portrait-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-secondary, #1a1a2e);
    border-bottom: 1px solid var(--border-subtle, #333);
    color: var(--text-muted, #888);
    font-size: 0.6875rem;
    font-family: var(--font-mono, monospace);
    text-align: center;
    flex-shrink: 0;
    animation: portrait-hint-fade 0.3s ease-out;
    animation-fill-mode: forwards;
  }

  .portrait-rotate-hint__icon {
    display: inline-block;
    transform: rotate(90deg);
    font-size: 0.875rem;
  }
}

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

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Combat Panel
 * ============
 * 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);
}

/* Pending Requests Section */
.friends-modal__requests-section {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, #27272a);
  background: var(--surface-1, #111118);
}

.friends-modal__section-title--requests {
  margin: 0 0 var(--spacing-xs, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-warning, #f59e0b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.friends-modal__requests-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.friends-modal__request {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
}

.friends-modal__action-btn--accept {
  color: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
}

.friends-modal__action-btn--accept:hover:not(:disabled) {
  background-color: var(--color-success, #22c55e);
  color: var(--color-bg-primary);
}

.friends-modal__action-btn--decline {
  color: var(--color-error, #cf6068);
  border-color: var(--color-error, #cf6068);
}

.friends-modal__action-btn--decline:hover:not(:disabled) {
  background-color: var(--color-error, #cf6068);
  color: var(--color-bg-primary);
}

/* Quick Actions */
.friends-modal__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
  border-top: 1px solid var(--border-color, #27272a);
  background-color: var(--surface-1, #111118);
}

.friends-modal__quick-action {
  flex: 1;
  min-width: calc(50% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px);
  background: var(--surface-2, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e4e4e7);
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.friends-modal__quick-action:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-primary, #a855f7);
  background: var(--surface-3, #1f1f26);
}

.friends-modal__quick-action svg {
  width: 14px;
  height: 14px;
}

/* Add Friend Form */
.friends-modal__add-form {
  padding: var(--space-3);
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.friends-modal__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.friends-modal__field {
  margin-bottom: var(--space-2);
}

.friends-modal__input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-sm);
}

.friends-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.friends-modal__form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.friends-modal__btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.friends-modal__btn--cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.friends-modal__btn--cancel:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.friends-modal__btn--primary {
  background: var(--color-primary);
  border: none;
  color: var(--color-bg-primary);
}

.friends-modal__btn--primary:hover {
  opacity: 0.9;
}

/* Status Message */
.friends-modal__status {
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.friends-modal__status--info {
  background-color: var(--color-info-bg, rgba(59, 130, 246, 0.1));
  color: var(--color-info, #3b82f6);
}

.friends-modal__status--success {
  background-color: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--color-success);
}

.friends-modal__status--warning {
  background-color: var(--color-warning-bg, rgba(251, 191, 36, 0.1));
  color: var(--color-warning);
}

.friends-modal__status--error {
  background-color: var(--color-error-bg, rgba(207, 96, 104, 0.1));
  color: var(--color-error);
}

/* Online Count in Header */
.friends-modal__online-count {
  font-size: var(--size-xs);
  color: var(--color-success);
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

/* Away Status */
.friends-modal__friend-activity--away {
  color: var(--color-warning, #f59e0b);
}

/* Loading Skeleton */
.friends-modal__loading {
  padding: var(--space-3);
}

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

.friends-modal__skeleton-item {
  height: 48px;
  background: linear-gradient(
    90deg,
    var(--color-surface-hover) 25%,
    var(--color-surface) 50%,
    var(--color-surface-hover) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Turn Queue Panel
 * ================
 * Multiplayer turn queue with initiative order, player statuses, and NPC markers.
 */

.panel-turn-queue {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

/* Header */
.turn-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.turn-queue-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-lg);
}

.turn-queue-header .mode-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.turn-info {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

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

.turn-number {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* Base section-header/section-title from components/_section.css and atoms/_atoms.css */
.panel-turn-queue .section-header {
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

/* Initiative List */
.initiative-section {
  margin-bottom: var(--spacing-md);
}

.initiative-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.initiative-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  transition: background-color 0.2s ease;
}

.initiative-entry.is-current-turn {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

/* Actor type styling - NPCs get purple theme */
.initiative-entry.actor-npc,
.initiative-entry.actor-dm_puppet {
  border-left: 3px solid var(--color-accent-purple);
  background: var(--color-entity-spell-bg);
}

.initiative-entry.actor-npc .initiative-icon,
.initiative-entry.actor-dm_puppet .initiative-icon {
  color: var(--color-accent-purple);
}

.initiative-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

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

.actor-label {
  font-size: var(--font-size-xs);
  color: var(--color-accent-purple);
  font-style: italic;
  padding: 1px 4px;
  background: var(--color-entity-spell-bg);
  border-radius: var(--radius-sm);
}

.turn-indicator {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

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

/* Player Status List */
.player-status-section {
  margin-bottom: var(--spacing-md);
}

.player-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.player-status-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.status-icon {
  width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
}

.player-name {
  flex: 1;
  font-weight: 500;
}

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

.current-turn-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  text-transform: uppercase;
}

/* Status-specific colors */
.player-status-entry.status-acting {
  background: var(--color-success-bg);
  border-left: 3px solid var(--color-success);
}

.player-status-entry.status-drafting {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
}

.player-status-entry.status-ready {
  background: var(--color-success-bg);
}

.player-status-entry.status-waiting {
  opacity: 0.8;
}

.player-status-entry.status-afk {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
}

.player-status-entry.status-disconnected {
  background: var(--color-error-bg);
  border-left: 3px solid var(--color-error);
  opacity: 0.6;
}

/* Status badge in initiative entries */
.status-badge {
  font-size: var(--font-size-sm);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.status-badge.status-acting { background: var(--color-success-bg); }
.status-badge.status-drafting { background: var(--color-info-bg); }
.status-badge.status-afk { background: var(--color-warning-bg); }
.status-badge.status-disconnected { background: var(--color-error-bg); }

/* Queue Position */
.queue-position-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.queue-position-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.position-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

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

.position-estimate {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Draft Panel */
.draft-panel {
  padding: var(--spacing-md);
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-info);
}

.draft-header {
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.draft-description {
  padding: var(--spacing-sm);
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.draft-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.draft-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.draft-warning.severity-info {
  background: var(--color-info-bg);
}

.draft-warning.severity-caution {
  background: var(--color-warning-bg);
}

.draft-warning.severity-danger {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
}

.draft-warning.severity-critical {
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  animation: warning-pulse 1s ease-in-out infinite;
}

@keyframes warning-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.warning-icon {
  flex-shrink: 0;
}

.warning-message {
  flex: 1;
  font-size: var(--font-size-sm);
}

.draft-quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.draft-action-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.draft-action-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--color-primary);
}

.draft-action-btn[data-action="commit_draft"] {
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  border-color: var(--color-primary);
}

/* Party Member Grid */
.party-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
}

.party-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.party-member-card.is-current-turn {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.party-member-card .member-name {
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.party-member-card .member-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.party-member-card .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.party-member-card.status-submitted .status-indicator {
  background: var(--color-success);
}

.party-member-card.status-acting .status-indicator {
  background: var(--color-primary);
  animation: pulse 1s infinite;
}

/* Countdown Timer */
.turn-queue-timer-section {
  text-align: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.countdown-timer {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.countdown-timer.urgent {
  color: var(--color-warning);
}

.countdown-timer.critical {
  color: var(--color-error);
}

.countdown-timer.pulse {
  animation: countdown-pulse 0.5s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Awaiting Section */
.awaiting-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.awaiting-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.awaiting-list.highlighted {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.awaiting-name {
  padding: 2px 8px;
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.all-ready {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-success);
  font-weight: 500;
}

/* Processing Overlay */
.processing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: var(--z-panel);
}

.processing-overlay.active {
  opacity: 1;
}

.processing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* ========================================
   Mode Tabs (Chat / Plan / Do)
   ======================================== */

.turn-mode-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--spacing-xs);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.turn-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.turn-mode-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.turn-mode-tab.active {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: var(--overlay-gold-subtle);
}

.tab-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-fg-on-emphasis);
  line-height: 1;
}

.turn-mode-cycle-hint {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

.turn-mode-cycle-hint kbd {
  font-family: var(--font-mono, monospace);
  padding: 0 3px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--surface-secondary);
  font-size: var(--font-size-xs);
}

/* ========================================
   Narrative Feed Filters (#3707: scoped — class is shared with narrative panel)
   ======================================== */

.panel-turn-queue .narrative-filters {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
}

.narrative-filter {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.narrative-filter:hover {
  border-color: var(--text-secondary);
}

.narrative-filter.active {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ========================================
   Mode Panels (Chat / Plan / Do content areas)
   ======================================== */

.mode-panel {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
}

/* Chat Mode */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.chat-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.chat-message {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.chat-message__author {
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}

.chat-message__text {
  color: var(--text-primary);
  word-break: break-word;
}

.chat-message--dm {
  background: var(--overlay-gold-subtle);
  border-left: 2px solid var(--color-gold);
  padding-left: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.chat-message--dm .chat-message__author {
  color: var(--color-gold);
}

.chat-input-form {
  display: flex;
  gap: var(--spacing-xs);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.chat-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.chat-send-btn {
  flex-shrink: 0;
}

/* Action Economy Bar (Plan mode) */
.action-economy-bar {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.economy-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.economy-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.economy-indicator {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  position: relative;
  overflow: hidden;
}

.economy-indicator.used {
  background: var(--color-primary);
}

.economy-indicator.available {
  background: var(--color-accent-secondary);
}

/* Planner flair input */
.planner-flair-row {
  margin-top: var(--spacing-xs);
}

.planner-flair-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.planner-flair-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
  color: var(--text-primary);
}

/* Additional planner item types */
.planner-item--action {
  border-left-color: var(--color-accent-primary);
}

.planner-item--bonus_action {
  border-left-color: var(--color-accent-purple);
}

.planner-item--movement {
  border-left-color: var(--color-accent-secondary);
}

.planner-item__type--action {
  background: var(--color-info-bg);
  color: var(--color-accent-primary);
}

.planner-item__type--bonus_action {
  background: var(--color-entity-spell-bg);
  color: var(--color-accent-purple);
}

.planner-item__type--movement {
  background: var(--color-success-bg);
  color: var(--color-accent-secondary);
}

.planner-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coaching Section (Plan mode) */
.coaching-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.coaching-refresh-btn {
  font-size: var(--font-size-xs);
}

.coaching-feedback {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.coaching-empty {
  color: var(--text-secondary);
  font-style: italic;
}

.coaching-text {
  white-space: pre-wrap;
}

/* Do Mode Panel */
.do-review-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.do-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.do-review-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.do-review-item__cost {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.do-review-item__text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.do-review-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.do-economy-summary {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.do-actions {
  padding-top: var(--spacing-sm);
}

.do-submit-btn {
  width: 100%;
  padding: var(--spacing-sm);
  font-weight: 600;
}

/* End Turn Button (shown when it's your turn) */
.end-turn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  font-weight: 600;
  background: var(--color-success);
  border: none;
  color: var(--color-fg-on-emphasis);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.end-turn-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.end-turn-btn svg {
  width: 16px;
  height: 16px;
}

.end-turn-btn.hidden {
  display: none;
}

/* Guardrail Warning (Do mode) */
.guardrail-warning {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
}

.guardrail-header {
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

.guardrail-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.guardrail-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Do waiting state */
.do-waiting {
  padding: var(--spacing-lg);
  text-align: center;
}

.do-waiting-text {
  color: var(--text-secondary);
  font-style: italic;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* DM controls row */
.dm-controls-row {
  display: flex;
  gap: var(--spacing-sm);
}

/* Realtime mode hides turn-based elements */
.panel-turn-queue.realtime-mode .turn-queue-timer-section,
.panel-turn-queue.realtime-mode .queue-list-section,
.panel-turn-queue.realtime-mode .action-form-section {
  display: none;
}

/* ========================================
   Turn Queue Planner (plan-your-turn section)
   ======================================== */

.turn-planner-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.planner-counter {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.planner-form {
  margin-bottom: var(--spacing-sm);
}

.planner-input-row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: stretch;
}

.planner-type-select {
  flex-shrink: 0;
  width: 110px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.planner-submit-btn {
  flex-shrink: 0;
}

/* Queued Items List */
.planner-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.planner-empty {
  padding: var(--spacing-sm);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.planner-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-color);
}

.planner-item--question {
  border-left-color: var(--color-accent-primary);
}

.planner-item--plan {
  border-left-color: var(--color-accent-secondary);
}

.planner-item--investigate {
  border-left-color: var(--color-accent-warning);
}

.planner-item__type {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.planner-item__type--question {
  background: var(--color-info-bg);
  color: var(--color-accent-primary);
}

.planner-item__type--plan {
  background: var(--color-success-bg);
  color: var(--color-accent-secondary);
}

.planner-item__type--investigate {
  background: var(--color-warning-bg);
  color: var(--color-accent-warning);
}

.planner-item__text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-item__remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: 1;
}

.planner-item__remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ========================================
   Observer Summaries (other players' turns)
   ======================================== */

.observer-summaries-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.observer-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
}

.observer-summary {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary, var(--color-primary));
  font-size: var(--font-size-sm);
}

.observer-summary__actor {
  font-weight: 600;
  color: var(--accent-primary, var(--color-primary));
  flex-shrink: 0;
}

.observer-summary__text {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observer-summary__tools {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Observer entry in narrative feed (compact inline summary) */
.observer-narrative-entry {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 2px solid var(--text-secondary);
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  opacity: 0.85;
}
/* Campaign Discovery Panel
 * =========================
 * Browse and search public campaigns to join.
 * Extends campaign card styles from _campaign_list.css
 */

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

.campaign-discovery-panel .panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .panel-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-color, #4a9eff);
}

.campaign-discovery-panel .panel-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary, #888);
}

/* Search Section */
.campaign-discovery-panel .panel-search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--panel-bg-highlight, #1a1a1a);
  border-bottom: 1px solid var(--border-color, #333);
}

.search-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color, #4a9eff);
}

.search-input::placeholder {
  color: var(--text-muted, #888);
}

.btn-search {
  padding: 0.5rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-search:hover {
  background: var(--primary-hover, #3a8eef);
}

.btn-search svg {
  width: 1rem;
  height: 1rem;
}

/* Filters */
.search-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-select,
.filter-input {
  padding: 0.375rem 0.5rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.75rem;
}

.filter-select {
  cursor: pointer;
}

.filter-input {
  flex: 1;
  min-width: 200px;
}

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

.filter-input::placeholder {
  color: var(--text-muted, #888);
}

/* Invite Code Section */
.campaign-discovery__invite-section {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), transparent);
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery__invite-wrapper {
  display: flex;
  gap: 0.5rem;
}

.campaign-discovery__invite-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: var(--input-bg, #0d0d0d);
  border: 2px solid var(--color-gold, #daa520);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campaign-discovery__invite-input:focus {
  outline: none;
  border-color: var(--color-gold, #daa520);
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.campaign-discovery__invite-input::placeholder {
  color: var(--text-muted, #888);
  text-transform: none;
  letter-spacing: normal;
}

.campaign-discovery__invite-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: var(--color-gold, #daa520);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.campaign-discovery__invite-btn:hover {
  background: #f4c430;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.4);
}

.campaign-discovery__invite-btn svg {
  width: 1rem;
  height: 1rem;
}

.campaign-discovery__invite-hint {
  margin: 0.75rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* Campaign List Content */
.campaign-discovery-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.campaign-discovery-panel .campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Discovery-specific campaign card styles */
.campaign-discovery-panel .campaign-card {
  border: 1px solid var(--border-color, #333);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--panel-bg, #1a1a1a);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.campaign-discovery-panel .campaign-card:hover {
  border-color: var(--primary-color, #4a9eff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.campaign-discovery-panel .campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.campaign-discovery-panel .campaign-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .campaign-status {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-discovery-panel .status-recruiting {
  background: var(--success-color, #4ade80);
  color: #000;
}

.campaign-discovery-panel .status-active {
  background: var(--primary-color, #4a9eff);
  color: #000;
}

.campaign-discovery-panel .campaign-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .campaign-description {
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Campaign Tags */
.campaign-discovery-panel .campaign-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.campaign-discovery-panel .campaign-tags .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--primary-color, #4a9eff);
  text-transform: lowercase;
  letter-spacing: 0.025em;
}

.campaign-discovery-panel .campaign-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, #2a2a2a);
}

.campaign-discovery-panel .campaign-activity {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

.campaign-discovery-panel .btn-join {
  padding: 0.375rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.25rem;
  color: #000;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-join:hover:not(:disabled) {
  background: var(--primary-hover, #3a8eef);
}

.campaign-discovery-panel .btn-join:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-join.btn--success {
  background: var(--success-color, #4ade80);
}

/* Loading State */
.campaign-discovery-panel .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--primary-color, #4a9eff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

/* Empty State */
.campaign-discovery-panel .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.campaign-discovery-panel .empty-icon svg {
  width: 3rem;
  height: 3rem;
}

.campaign-discovery-panel .empty-state h4 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Error State */
.campaign-discovery-panel .error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-error, #cf6068);
}

.campaign-discovery-panel .error-state p {
  margin: 0 0 1rem 0;
}

/* Pagination */
.campaign-discovery-panel .panel-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.campaign-discovery-panel .btn-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: var(--panel-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-pagination:hover:not(:disabled) {
  border-color: var(--primary-color, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.campaign-discovery-panel .btn-pagination:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-pagination svg {
  width: 0.875rem;
  height: 0.875rem;
}

.campaign-discovery-panel .page-info {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

/* Hidden utility */
.campaign-discovery-panel .hidden {
  display: none;
}
/**
 * Character Sheet Full Page
 * =========================
 * Traditional D&D 5e character sheet layout with Terminal D&D sections.
 * Designed for out-of-game review and printing.
 */

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

body:has(.character-sheet-page) {
  margin: 0;
  padding: 0;
  background: var(--color-bg-primary);
  overflow-y: auto;
  height: auto;
}

.character-sheet-page {
  min-height: 100vh;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.character-sheet-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ========================================
 * Header Section
 * ======================================== */

.cs-page-header {
  text-align: center;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
}

.cs-page-header__name {
  margin: 0 0 var(--space-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 0.02em;
}

.cs-page-header__subtitle {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.cs-page-header__race::after {
  content: ' ';
}

.cs-page-header__class {
  color: var(--color-accent-warning);
}

.cs-page-header__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-page-meta-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-page-meta-value {
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

/* ========================================
 * Three-Column Main Grid
 * ======================================== */

.cs-main-grid {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

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

/* ========================================
 * Section Styles
 * ======================================== */

.cs-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
}

.cs-section__title {
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-section__title--small {
  font-size: 0.7rem;
}

/* ========================================
 * Ability Scores
 * ======================================== */

/* Ability scores: 3-column honeycomb grid */
.cs-abilities-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  justify-items: center;
}

/* Offset bottom row for honeycomb effect */
.cs-abilities-list .cs-ability-box:nth-child(n+4) {
  margin-top: calc(-1 * var(--space-sm));
}

.cs-ability-box {
  --hex-size: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  cursor: pointer;
}

.cs-ability-box:hover {
  border-color: var(--color-accent-primary);
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Color coding based on ability score ranges (flat, project tokens only) */
.cs-ability-box[data-score-tier="legendary"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-purple);
}

.cs-ability-box[data-score-tier="exceptional"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-primary);
}

.cs-ability-box[data-score-tier="great"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-secondary);
}

.cs-ability-box[data-score-tier="good"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-warning);
}

.cs-ability-box[data-score-tier="average"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}

.cs-ability-box[data-score-tier="poor"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-error);
}

.cs-ability-box__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Modifier: prominent center display */
.cs-ability-box__mod {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* Raw score: smaller below modifier */
.cs-ability-box__score {
  font-size: 0.7rem;
  font-weight: 400;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  line-height: 1;
}

/* ========================================
 * Stat Inline (Proficiency Bonus, etc.)
 * ======================================== */

.cs-stat-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-stat-inline__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-stat-inline__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

/* ========================================
 * Saving Throws & Skills
 * ======================================== */

.cs-saves-list,
.cs-skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-save-item,
.cs-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background 0.15s ease;
}

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

.cs-save-item--proficient,
.cs-skill-item--proficient {
  background: rgba(97, 175, 239, 0.1);
}

.cs-save-item__dot,
.cs-skill-item__dot {
  width: 14px;
  text-align: center;
  font-family: monospace;
  color: var(--color-text-muted);
}

.cs-save-item--proficient .cs-save-item__dot,
.cs-skill-item--proficient .cs-skill-item__dot {
  color: var(--color-accent-primary);
}

.cs-save-item__value,
.cs-skill-item__value {
  width: 28px;
  text-align: right;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-save-item__name,
.cs-skill-item__name {
  color: var(--color-text-secondary);
}

.cs-save-item--proficient .cs-save-item__name,
.cs-skill-item--proficient .cs-skill-item__name {
  color: var(--color-accent-primary);
}

/* ========================================
 * Combat Stats
 * ======================================== */

.cs-combat-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-combat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border-default);
  border-radius: 6px;
}

.cs-combat-stat--ac {
  border-color: var(--color-accent-primary);
}

.cs-combat-stat__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-combat-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ========================================
 * HP Block
 * ======================================== */

.cs-hp-block {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.cs-hp-block__header {
  margin-bottom: var(--space-xs);
}

.cs-hp-block__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-hp-block__values {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

.cs-hp-block__current {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.cs-hp-block__sep {
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.cs-hp-block__max {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-hp-bar {
  height: 8px;
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border-radius: 4px;
  overflow: hidden;
}

.cs-hp-bar__fill {
  height: 100%;
  width: 100%;
  background: #2ECC71;
  border-radius: 4px;
  transform-origin: left;
  transition: transform 0.3s ease;
}

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

.cs-death-saves {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.cs-death-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-death-save-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.cs-death-save-boxes {
  display: flex;
  gap: 4px;
}

.cs-death-save-box {
  width: 16px;
  height: 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 3px;
}

.cs-death-save-box--filled {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
}

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

/* ========================================
 * Tab Navigation
 * ======================================== */

.cs-tab-nav {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cs-tab-nav::-webkit-scrollbar {
  display: none;
}

.cs-tab-btn {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  min-height: 44px;
}

.cs-tab-btn:hover {
  color: var(--color-text-primary);
}

.cs-tab-btn.active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.cs-tab-panels {
  animation: cs-tab-fade-in 0.2s ease;
}

.cs-tab-panels > .hidden {
  display: none;
}

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

/* ========================================
 * Full-Width Sections
 * ======================================== */

.cs-full-width-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-two-column-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Attacks Table
 * ======================================== */

.cs-attacks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cs-attacks-table th {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cs-attacks-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.cs-attacks-table tr:last-child td {
  border-bottom: none;
}

/* ========================================
 * Equipment List
 * ======================================== */

.cs-equipment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-equipment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-equipment-item--equipped {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-equipment-item--unidentified {
  font-style: italic;
  opacity: 0.7;
}

.cs-equipment-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-equipment-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-equipment-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
  font-size: 0.7rem;
}

.cs-equipment-item__sep {
  color: var(--color-text-muted);
}

.cs-equipment-item__damage {
  color: var(--color-accent-error);
  font-weight: 500;
}

/* Equipment badges */
.cs-equipment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-equipment-badge--equipped {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.cs-equipment-badge--attuned {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-purple);
  border: 1px solid rgba(198, 120, 221, 0.3);
}

/* Rarity colors */
.cs-equipment-rarity {
  font-weight: 600;
}

.cs-equipment-rarity--common { color: var(--color-text-muted); }
.cs-equipment-rarity--uncommon { color: var(--color-accent-secondary); }
.cs-equipment-rarity--rare { color: var(--color-accent-primary); }
.cs-equipment-rarity--very-rare { color: var(--color-accent-purple); }
.cs-equipment-rarity--legendary { color: var(--color-accent-warning); }
.cs-equipment-rarity--artifact { color: var(--color-accent-error); }

.cs-equipment-item__qty {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-gold-display {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
}

.cs-gold-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-gold-value {
  color: var(--color-accent-warning);
  font-weight: 600;
}

/* ========================================
 * Features List
 * ======================================== */

.cs-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-feature-item {
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

.cs-feature-item__name {
  display: block;
  font-weight: 600;
  color: var(--color-accent-primary);
  font-size: 0.85rem;
}

.cs-feature-item__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-more-items {
  margin: var(--space-sm) 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

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

.cs-personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.cs-personality-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-personality-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-personality-value {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cs-personality-value--editable {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-bottom: 1px dashed transparent;
}

.cs-personality-value--editable:hover {
  background-color: var(--color-bg-secondary, rgba(255, 255, 255, 0.05));
  border-bottom-color: var(--color-accent, #c0a060);
}

.cs-inline-textarea {
  width: 100%;
  min-height: 40px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-accent, #c0a060);
  border-radius: 2px;
  resize: vertical;
  line-height: 1.4;
}

.cs-inline-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-accent, #c0a060);
}

.cs-personality-source {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

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

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

.cs-prof-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cs-prof-label {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-prof-value {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* ========================================
 * Spells Section
 * ======================================== */

.cs-spells-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

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

.cs-spell-stat__label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cs-spell-stat__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-purple);
}

.cs-spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-spell-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  min-width: 60px;
}

.cs-spell-slot__level {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.cs-spell-slot__uses {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

.cs-spell-list {
  margin-bottom: var(--space-md);
}

.cs-spell-list__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.75rem;
  color: var(--color-accent-purple);
}

.cs-spell-list ul,
.cs-spell-items {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.cs-spell-list li {
  margin-bottom: 4px;
}

/* Enriched spell item layout */
.cs-spell-item {
  padding: var(--space-sm);
  border-radius: 4px;
  margin-bottom: 4px;
  transition: opacity 0.15s ease;
}

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

.cs-spell-item--unprepared {
  opacity: 0.5;
}

.cs-spell-item--prepared {
  opacity: 1;
}

.cs-spell-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-spell-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

.cs-spell-item__meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-spell-item__desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
  font-style: italic;
}

/* Spell badges (Concentration, Ritual) */
.cs-spell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-spell-badge--concentration {
  background: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.cs-spell-badge--ritual {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* Spell school colors */
.cs-spell-school {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
  flex-shrink: 0;
}

.cs-spell-school--evocation { color: var(--color-accent-error); }
.cs-spell-school--abjuration { color: var(--color-accent-primary); }
.cs-spell-school--conjuration { color: var(--color-accent-secondary); }
.cs-spell-school--divination { color: var(--color-accent-warning); }
.cs-spell-school--enchantment { color: var(--color-accent-purple); }
.cs-spell-school--illusion { color: #c678dd; }
.cs-spell-school--necromancy { color: var(--color-text-muted); }
.cs-spell-school--transmutation { color: #d19a66; }

/* ========================================
 * Terminal D&D Divider
 * ======================================== */

.cs-tdd-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.cs-tdd-divider::before,
.cs-tdd-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
}

.cs-tdd-divider__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================
 * Terminal D&D Sections
 * ======================================== */

.cs-tdd-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* TDD Stats Grid */
.cs-tdd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.cs-tdd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-tdd-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

.cs-tdd-stat__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Memories */
.cs-memory-group {
  margin-bottom: var(--space-md);
}

.cs-memory-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-memory-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  font-size: 0.85rem;
}

.cs-memory-list--events .cs-memory-item {
  display: list-item;
  list-style: disc inside;
  color: var(--color-text-secondary);
}

.cs-memory-item__name {
  font-weight: 600;
  color: var(--color-accent-primary);
}

.cs-memory-item__detail {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-memory-item__text {
  color: var(--color-text-secondary);
}

.cs-memory-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

.cs-memory-badge--combat { background: rgba(224, 108, 117, 0.2); color: var(--color-accent-error); }
.cs-memory-badge--social { background: rgba(198, 120, 221, 0.2); color: var(--color-accent-purple); }
.cs-memory-badge--exploration { background: rgba(97, 175, 239, 0.2); color: var(--color-accent-primary); }
.cs-memory-badge--discovery { background: rgba(229, 192, 123, 0.2); color: var(--color-accent-warning); }
.cs-memory-badge--quest { background: rgba(152, 195, 121, 0.2); color: var(--color-accent-secondary); }
.cs-memory-badge--lore { background: rgba(209, 154, 102, 0.2); color: #d19a66; }

/* Quests */
.cs-quest-group {
  margin-bottom: var(--space-md);
}

.cs-quest-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-quest-card {
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--color-accent-warning);
}

.cs-quest-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.cs-quest-card__title {
  font-weight: 600;
  color: var(--color-accent-warning);
}

.cs-quest-card__progress {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-card__desc {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-quest-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-quest-objective--complete {
  color: var(--color-accent-secondary);
}

.cs-quest-objective__check {
  font-family: monospace;
  flex-shrink: 0;
}

.cs-quest-summary {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-quest-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-quest-summary__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

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

/* Error State */
.cs-error-state {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-error);
  border-radius: 12px;
  margin: var(--space-xl) 0;
}

.cs-error-state h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-accent-error);
}

.cs-error-state p {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-text-secondary);
}

/* Empty State */
.cs-empty-state {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

/* ========================================
 * Footer
 * ======================================== */

.cs-page-footer {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-footer__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cs-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cs-footer-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  transform: translateY(-1px);
}

/* ========================================
 * Rollable Elements
 * ======================================== */

.rollable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.2);
}

.rollable:active {
  background: rgba(97, 175, 239, 0.15);
}

/* ========================================
 * Dice Roll Toast
 * ======================================== */

.cs-roll-toast {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-accent-primary);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 8px rgba(97, 175, 239, 0.15);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  text-align: center;
  min-width: 160px;
}

.cs-roll-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
}

.cs-roll-toast--exit {
  opacity: 0;
  transform: translateX(-50%) translateY(-120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Toast header with dice icon and label */
.cs-roll-toast__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cs-roll-toast__dice {
  font-size: 1.2rem;
  line-height: 1;
}

.cs-roll-toast__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Result number - large and prominent */
.cs-roll-toast__result {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.cs-roll-toast__breakdown {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Critical hit toast */
.cs-roll-toast--critical {
  border-color: var(--color-accent-warning);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3);
  animation: cs-toast-critical-pulse 0.8s ease-in-out 0.6s 2;
}

.cs-roll-toast--critical .cs-roll-toast__result {
  color: var(--color-accent-warning);
}

/* Fumble toast */
.cs-roll-toast--fumble {
  border-color: var(--color-accent-error);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(224, 108, 117, 0.3);
  animation: cs-toast-fumble-shake 0.4s ease-out 0.6s;
}

.cs-roll-toast--fumble .cs-roll-toast__result {
  color: var(--color-accent-error);
}

/* Special labels (CRITICAL! / FUMBLE!) */
.cs-roll-toast__special {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.cs-roll-toast__special--critical {
  color: var(--color-accent-warning);
  background: rgba(229, 192, 123, 0.15);
}

.cs-roll-toast__special--fumble {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.15);
}

/* Advantage / Disadvantage badges */
.cs-roll-toast__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-roll-toast__badge--advantage {
  color: var(--color-accent-secondary);
  background: rgba(152, 195, 121, 0.2);
}

.cs-roll-toast__badge--disadvantage {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.2);
}

@keyframes cs-toast-critical-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 28px rgba(229, 192, 123, 0.5); }
}

@keyframes cs-toast-fumble-shake {
  0%, 100% { transform: translateX(-50%) translateY(-100%); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-50% - 4px)) translateY(-100%); }
  20%, 40%, 60%, 80% { transform: translateX(calc(-50% + 4px)) translateY(-100%); }
}

/* ========================================
 * Inline Editing
 * ======================================== */

.cs-hp-block__current,
.cs-gold-value {
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 2px 4px;
  border-radius: 4px;
}

.cs-hp-block__current:hover,
.cs-gold-value:hover {
  background: rgba(97, 175, 239, 0.1);
}

.cs-inline-input {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: inherit;
  padding: 2px 4px;
  text-align: center;
  outline: none;
}

.cs-inline-input:focus {
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.3);
}

/* Flash feedback */
.cs-flash--success {
  animation: cs-flash-green 0.6s ease;
}

.cs-flash--error {
  animation: cs-flash-red 0.6s ease;
}

@keyframes cs-flash-green {
  0%, 100% { background: transparent; }
  50% { background: rgba(152, 195, 121, 0.3); }
}

@keyframes cs-flash-red {
  0%, 100% { background: transparent; }
  50% { background: rgba(224, 108, 117, 0.3); }
}

/* ========================================
 * Death Save Boxes (interactive)
 * ======================================== */

.cs-death-save-box {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cs-death-save-box:hover {
  transform: scale(1.2);
}

/* ========================================
 * Conditions (interactive)
 * ======================================== */

.cs-conditions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.cs-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  border-radius: 12px;
  color: var(--color-accent-error);
  font-size: 0.75rem;
  font-weight: 600;
}

.cs-condition-remove {
  background: none;
  border: none;
  color: var(--color-accent-error);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
}

.cs-condition-remove:hover {
  opacity: 1;
}

.cs-condition-add {
  background: none;
  border: 1px dashed var(--color-border-default);
  border-radius: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-condition-add:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.cs-condition-dropdown {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 4px 8px;
}

/* ========================================
 * Combat Layout
 * ======================================== */

.cs-combat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-combat-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Equipment Groups
 * ======================================== */

.cs-equipment-group {
  margin-bottom: var(--space-md);
}

.cs-equipment-group__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * Spell Level Groups
 * ======================================== */

.cs-spell-level-group {
  margin-bottom: var(--space-md);
}

.cs-spell-level-heading {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

/* ========================================
 * Save Status & Footer Extras
 * ======================================== */

.cs-page-footer__status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.cs-save-status {
  font-size: 0.7rem;
  transition: opacity 0.3s ease;
}

.cs-save-status[data-status="idle"] {
  opacity: 0;
}

.cs-save-status[data-status="saving"] {
  color: var(--color-accent-warning);
  opacity: 1;
}

.cs-save-status[data-status="saved"] {
  color: var(--color-accent-secondary);
  opacity: 1;
}

.cs-save-status[data-status="error"] {
  color: var(--color-accent-error);
  opacity: 1;
}

.cs-keyboard-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .character-sheet-page {
    background: var(--paper-bg);
    color: var(--paper-text);
  }

  .character-sheet-container {
    max-width: none;
    padding: 0.5in;
  }

  /* Show all tabs when printing */
  .cs-tab-nav {
    display: none;
  }

  [data-tab-content].hidden {
    display: block;
  }

  [role="tabpanel"] {
    page-break-inside: avoid;
  }

  /* Hide interactive controls */
  .cs-condition-add,
  .cs-condition-remove,
  .cs-condition-dropdown,
  .cs-page-footer,
  .cs-page-footer__status,
  .cs-roll-toast {
    display: none;
  }

  .cs-page-header,
  .cs-section,
  .cs-combat-stat,
  .cs-hp-block,
  .cs-ability-box,
  .cs-stat-inline,
  .cs-tdd-stat,
  .cs-memory-item,
  .cs-quest-card,
  .cs-equipment-item,
  .cs-feature-item {
    background: var(--paper-bg);
    border-color: var(--paper-border);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .rollable {
    cursor: default;
  }

  .cs-ability-box__mod,
  .cs-stat-inline__value,
  .cs-hp-block__current,
  .cs-combat-stat--ac .cs-combat-stat__value,
  .cs-tdd-stat__value,
  .cs-memory-item__name,
  .cs-quest-card__title,
  .cs-feature-item__name,
  .cs-save-item--proficient .cs-save-item__name,
  .cs-skill-item--proficient .cs-skill-item__name {
    color: var(--paper-text);
    font-weight: bold;
  }

  .cs-page-header__name {
    color: var(--paper-text);
  }

  .cs-tdd-divider__text {
    color: var(--screenplay-muted);
  }

  .cs-tdd-divider::before,
  .cs-tdd-divider::after {
    background: var(--paper-border);
  }
}

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

@media (max-width: 900px) {
  .cs-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cs-column--abilities {
    grid-column: span 2;
  }

  .cs-abilities-list {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
  }

  .cs-abilities-list .cs-ability-box:nth-child(n+4) {
    margin-top: 0;
  }

  .cs-ability-box {
    --hex-size: 72px;
  }

  .cs-tdd-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cs-tab-btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  .cs-combat-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .character-sheet-container {
    padding: var(--space-md);
  }

  .cs-main-grid {
    grid-template-columns: 1fr;
  }

  .cs-column--abilities {
    grid-column: span 1;
  }

  .cs-two-column-row {
    grid-template-columns: 1fr;
  }

  .cs-personality-grid {
    grid-template-columns: 1fr;
  }

  .cs-combat-stats {
    grid-template-columns: 1fr;
  }

  .cs-page-header__subtitle {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cs-page-header__meta {
    flex-direction: column;
    align-items: center;
  }

  .cs-footer-btn {
    flex: 1;
    justify-content: center;
  }
}
/* ============================================
 * 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);
}

.dressing-room__level-control--no-character {
  opacity: 0.6;
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, var(--color-text-primary));
}

.dressing-room__level-display--placeholder {
  color: var(--color-text-secondary, var(--color-text-primary));
  font-style: italic;
}

.dressing-room__level-gate {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, var(--color-text-primary));
}

/* Equipment Grid */
.dressing-room__equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.dressing-room__equipment-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dressing-room__equipment-slot:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}

.dressing-room__equipment-slot--fantasy {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.dressing-room__slot-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.dressing-room__slot-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: center;
  word-break: break-word;
}

.dressing-room__slot-item--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Inventory */
.dressing-room__inventory-search {
  margin-bottom: var(--spacing-sm);
}

.dressing-room__search-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.dressing-room__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dressing-room__inventory-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dressing-room__inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room__inventory-item:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.dressing-room__inventory-item--equipped {
  border-color: var(--color-success);
}

.dressing-room__inventory-item--disabled {
  opacity: 0.5;
  cursor: default;
}

.dressing-room__inventory-item-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dressing-room__inventory-item-quantity {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Fantasy Indicator */
.dressing-room__fantasy-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: 1px solid var(--color-warning);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.dressing-room__fantasy-badge {
  padding: 2px 8px;
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
  border-radius: var(--border-radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.dressing-room__fantasy-count {
  font-weight: 600;
  color: var(--color-warning);
}

.dressing-room__fantasy-label {
  color: var(--color-text-secondary);
}

/* Variant Tree */
.dressing-room__variant-tree {
  max-height: 200px;
  overflow-y: auto;
}

.dressing-room__variant-loading {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-style: italic;
}

.dressing-room__variant-node {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-left: var(--spacing-md);
  border-left: 2px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dressing-room__variant-node:hover {
  background: var(--color-surface-elevated);
}

.dressing-room__variant-node--canonical {
  border-left-color: var(--color-success);
}

.dressing-room__variant-node--current {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-left-color: var(--color-primary);
}

.dressing-room__variant-node--root {
  margin-left: 0;
  border-left: none;
}

.dressing-room__variant-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.dressing-room__variant-level {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.dressing-room__variant-badge {
  font-size: var(--font-size-xs);
  padding: 1px 6px;
  border-radius: var(--border-radius-xs);
}

.dressing-room__variant-badge--canonical {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}

.dressing-room__variant-badge--branch {
  background: var(--color-info);
  color: var(--color-on-info, #fff);
}

.dressing-room__variant-badge--respec {
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
}

/* 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: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.message-queue-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.queue-indicator__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.queue-indicator__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color-text-secondary, #9ca3af);
  border-radius: 50%;
  animation: queue-spin 1s linear infinite;
  flex-shrink: 0;
}

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

.queue-indicator__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.queue-indicator__status {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  font-family: 'Courier New', monospace;
}

.queue-indicator__reason {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-family: 'Courier New', monospace;
}

.queue-indicator__message {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-indicator__message:empty {
  display: none;
}

.queue-indicator__cancel {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.queue-indicator__cancel:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .queue-indicator__content {
    flex-wrap: wrap;
  }

  .queue-indicator__message {
    width: 100%;
    max-width: none;
    order: 1;
    margin-top: 8px;
  }
}
/*
 * NPC Quick Reference Panel
 * ==========================
 * 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;
  }
}
/* ==========================================================================
 * Party Invite Card — structured MP invite panel (#4396)
 *
 * Renders inside the party-manager controller's invite section.
 * Three copy-button rows: URL, invite code, /join command.
 * Extracted from _campaign.css to keep that file under hard cap.
 * ========================================================================== */

.invite-card {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

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

.invite-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

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

.invite-card__uses {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
}

.invite-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.invite-card__row:last-of-type {
  margin-bottom: 0;
}

/* URL row — full-width read-only input */
.invite-card__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Code row — monospace chip */
.invite-card__code {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* /join command row */
.invite-card__command {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-card__copy-btn {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.invite-card__copy-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-focus);
}

.invite-card__copy-btn.copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.invite-card__footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-default);
}

.invite-card__expiry {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/* Character Story 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;
}

/* Re-roll appearance descriptor (#3787). Secondary affordance — toned-down */
/* styling so it doesn't compete with the primary "Generate Portrait" button. */
.portrait-generator__button--reroll {
  background: var(--bg-secondary, var(--bg-tertiary));
  color: var(--text-primary);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
  font-weight: 500;
}

.portrait-generator__button--reroll:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.portrait-generator__status {
  font-size: var(--font-size-xs);
  text-align: center;
  min-height: 1.2em;
  transition: opacity 0.2s ease;
}

.portrait-generator__status--loading {
  color: var(--text-secondary);
  animation: portrait-pulse 1.5s ease-in-out infinite;
}

@keyframes portrait-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.portrait-generator__status--success {
  color: var(--success-color);
}

.portrait-generator__status--error {
  color: var(--error-color);
}

/* Empty state when no character is selected */
.portrait-generator__empty-state {
  text-align: center;
  padding: var(--spacing-sm);
}

.portrait-generator__empty-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Compact variant for inline use */
.portrait-generator--compact {
  flex-direction: row;
  padding: var(--spacing-sm);
}

.portrait-generator--compact .portrait-generator__preview {
  width: 64px;
  height: 64px;
}

.portrait-generator--compact .portrait-generator__controls {
  flex: 1;
  align-items: flex-start;
}

.portrait-generator--compact .portrait-generator__button {
  max-width: none;
  width: auto;
}

/* Character sheet integration */
.character-sheet .portrait-generator {
  margin-bottom: var(--spacing-md);
}
/**
 * Narrative Bookmarks
 * ===================
 * Styles for bookmarking and highlighting narrative moments
 */

/* ============================================
   Bookmark Button (inline with narrative entries)
   ============================================ */

.narrative-bookmark__btn {
  --bookmark-color: var(--color-text-muted);
  --bookmark-active-color: var(--color-gold);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-xl);
  color: var(--bookmark-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

.narrative-bookmark__btn:hover {
  opacity: 1;
  color: var(--bookmark-active-color);
  background: var(--overlay-gold-subtle);
}

.narrative-bookmark__btn--active {
  opacity: 1;
  color: var(--bookmark-active-color);
}

.narrative-bookmark__btn--active:hover {
  color: var(--color-accent-error);
}

.narrative-bookmark__btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Type Selector Popup
   ============================================ */

.narrative-bookmark__type-selector {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 180px;
  padding: 8px 0;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px var(--overlay-light-plus);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__type-selector--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.narrative-bookmark__type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.narrative-bookmark__type-option:hover {
  background: var(--overlay-white-subtle);
}

.narrative-bookmark__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xl);
}

.narrative-bookmark__type-icon--memorable { background: var(--color-entity-npc-bg); color: var(--color-entity-npc); }
.narrative-bookmark__type-icon--epic_moment { background: var(--overlay-gold-light); color: var(--color-gold); }
.narrative-bookmark__type-icon--combat_victory { background: var(--color-entity-creature-bg); color: var(--color-entity-creature); }
.narrative-bookmark__type-icon--funny { background: var(--color-warning-subtle); color: var(--color-accent-warning); }
.narrative-bookmark__type-icon--lore { background: var(--color-entity-spell-bg); color: var(--color-entity-spell); }
.narrative-bookmark__type-icon--custom { background: var(--overlay-white-light); color: var(--color-text-muted); }

/* ============================================
   Bookmarks Panel
   ============================================ */

.bookmarks-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
}

.bookmarks-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}

.bookmarks-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.bookmarks-panel__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
}

.bookmarks-panel__subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Filters */
.bookmarks-panel__filters {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

.bookmarks-panel__filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.bookmarks-panel__filter:hover {
  border-color: var(--color-gold);
  color: var(--color-text-primary);
}

.bookmarks-panel__filter--active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}

/* Content area */
.bookmarks-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Empty state */
.bookmarks-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.bookmarks-panel__empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-gold-subtle);
  border-radius: 50%;
  color: var(--color-gold);
  font-size: 2rem;
}

.bookmarks-panel__empty-icon svg {
  width: 32px;
  height: 32px;
}

.bookmarks-panel__empty-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.bookmarks-panel__empty-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.bookmarks-panel__icon-sample {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-gold);
}

.bookmarks-panel__icon-sample svg {
  width: 14px;
  height: 14px;
}

/* Loading state */
.bookmarks-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-text-muted);
}

.bookmarks-panel__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: bookmarks-spin 0.8s linear infinite;
}

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

/* ============================================
   Bookmark Item
   ============================================ */

.narrative-bookmark__item {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  transition: border-color 0.2s ease;
}

.narrative-bookmark__item:hover {
  border-color: var(--color-gold);
}

.narrative-bookmark__item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.narrative-bookmark__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-entity-npc-bg);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-entity-npc);
}

.narrative-bookmark__character {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.narrative-bookmark__preview {
  margin: 0 0 10px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.narrative-bookmark__note {
  margin: 0 0 10px;
  padding: 10px;
  background: var(--overlay-light);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-muted);
}

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

.narrative-bookmark__item-footer time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.narrative-bookmark__share-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.narrative-bookmark__share-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}

/* ============================================
   Image Section (action buttons & thumbnails)
   ============================================ */

.narrative-bookmark__image-section {
  margin-bottom: 10px;
}

.narrative-bookmark__action-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__action-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}

.narrative-bookmark__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.narrative-bookmark__action-btn:disabled:hover {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.narrative-bookmark__thumbnail {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 1px solid var(--color-border-default);
}

.narrative-bookmark__footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Error state */
.bookmarks-panel__error {
  padding: 12px 20px;
  background: var(--color-danger-subtle);
  color: var(--color-accent-error);
  font-size: 0.875rem;
}

/* ============================================
   Adventure Card (for sharing)
   ============================================ */

.adventure-card {
  --card-accent: var(--color-entity-npc);

  position: relative;
  width: 320px;
  padding: 24px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--card-accent);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px var(--overlay-medium-plus);
  overflow: hidden;
}

.adventure-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent);
}

.adventure-card__header {
  margin-bottom: 16px;
}

.adventure-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-entity-npc-bg);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-accent);
  margin-bottom: 8px;
}

.adventure-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.adventure-card__content {
  margin-bottom: 16px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.adventure-card__character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.adventure-card__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-accent);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-fg-on-emphasis);
}

.adventure-card__character-info {
  flex: 1;
}

.adventure-card__character-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.adventure-card__character-class {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.adventure-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-default);
}

.adventure-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.adventure-card__branding {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
/**
 * 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.
 *
 * Positioning: absolute overlay at the bottom-right of the narrative entry.
 * Hidden by default (opacity 0, pointer-events none); revealed on hover/focus
 * so it doesn't interrupt reading flow. Keyboard-accessible via focus-within.
 *
 * UX Standards Applied:
 * - Touch targets: 44x44px minimum (WCAG 2.5.5)
 * - Focus states: Visible focus indicators
 * - Contrast: Sufficient disabled state contrast
 * - Opacity/visibility used (not display:none) so screen readers find elements
 */

.quality-rating {
  /* Absolute overlay — does NOT affect document flow / reading layout */
  position: absolute;
  bottom: var(--space-1, 4px);
  right: var(--space-2, 8px);
  display: flex;
  align-items: center;
  gap: 2px;
  /* Hidden by default — revealed on hover or keyboard focus */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  /* Prevent click-through when invisible */
  pointer-events: none;
  /* Sit above text but below modals */
  z-index: var(--z-sticky, 10);
}

/* DM entries contain a quality-rating overlay; reserve bottom padding so the
   buttons don't overlap the last line of narrative text. Only applied when
   the widget is present (DM entries only). */
.narrative-entry:has(.quality-rating) {
  padding-bottom: calc(var(--space-2, 8px) + 28px);
}

.narrative-entry:hover .quality-rating,
.quality-rating:focus-within,
.quality-rating--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.quality-rating__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Visual size matches other action buttons (copy, bookmark, TTS) */
  width: 28px;
  height: 28px;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  /* WCAG 2.5.5: extend touch target to 44×44 via pseudo-element */
}

/* Expanded touch target — pseudo-element adds invisible tappable area */
.quality-rating__btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.quality-rating__btn:hover {
  color: var(--color-text, #f9fafb);
  background: rgba(255, 255, 255, 0.1);
}

/* Focus states - visible outline for keyboard navigation */
.quality-rating__btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  color: var(--color-text, #f9fafb);
}

.quality-rating__btn--up:hover,
.quality-rating__btn--up:focus-visible,
.quality-rating__btn--up.quality-rating__btn--active {
  color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
}

.quality-rating__btn--up:focus-visible {
  outline-color: var(--color-success, #22c55e);
}

.quality-rating__btn--down:hover,
.quality-rating__btn--down:focus-visible,
.quality-rating__btn--down.quality-rating__btn--active {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.15);
}

.quality-rating__btn--down:focus-visible {
  outline-color: var(--color-danger, #ef4444);
}

.quality-rating__btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Feedback panel — opens above the rating buttons */
.quality-rating__feedback {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--space-1, 4px);
  z-index: var(--z-panel);
  width: 280px;
  padding: 12px;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-rating__feedback--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quality-rating__feedback-title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.quality-rating__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.quality-rating__category {
  /* Increased padding for better touch targets */
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 12px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__category:hover {
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category--selected {
  background: var(--color-accent, #4ECDC4);
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-surface, #111827);
}

.quality-rating__textarea {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  padding: 8px;
  background: var(--color-surface, #111827);
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text, #f9fafb);
  font-size: 0.8125rem;
  resize: vertical;
}

.quality-rating__textarea:focus {
  outline: none;
  border-color: var(--color-accent, #4ECDC4);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.quality-rating__textarea::placeholder {
  color: var(--color-text-muted, #6b7280);
}

.quality-rating__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.quality-rating__submit {
  padding: 8px 16px;
  min-height: 36px;
  background: var(--color-accent, #4ECDC4);
  border: none;
  border-radius: 4px;
  color: var(--color-surface, #111827);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.quality-rating__submit:hover:not(:disabled) {
  opacity: 0.9;
}

.quality-rating__submit:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
}

.quality-rating__submit:disabled {
  opacity: 0.4;
  background: var(--color-text-muted, #6b7280);
  cursor: not-allowed;
}

.quality-rating__cancel {
  padding: 8px 16px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__cancel:hover {
  color: var(--color-text, #f9fafb);
  border-color: var(--color-text-muted, #9ca3af);
}

.quality-rating__cancel:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .quality-rating,
  .quality-rating__btn,
  .quality-rating__feedback {
    transition: none;
  }
}
/**
 * TTS Audio Player
 * ================
 * Inline audio player bar shown above input area when TTS audio is available.
 */

.tts-audio-player {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-surface-elevated, #1f2937);
  border-top: 1px solid var(--color-border, #374151);
  gap: 8px;
}

.tts-audio-player[hidden] {
  display: none;
}

.tts-audio-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tts-audio-player__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-accent, #4ECDC4);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tts-audio-player__play-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tts-audio-player__play-btn.playing {
  color: var(--color-warning, #f59e0b);
}

.tts-audio-player__play-btn svg {
  width: 20px;
  height: 20px;
}

.tts-audio-player__progress {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
}

.tts-audio-player__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--color-accent, #4ECDC4);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__volume {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
  flex-shrink: 0;
}

.tts-audio-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--color-text-muted, #9ca3af);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #4b5563);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.tts-audio-player__status.audio-available {
  background: var(--color-success, #22c55e);
  animation: tts-pulse 2s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/**
 * OOC 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;
  }
}
/**
 * Selection Panel (shared primitive)
 * ==================================
 * Single source of truth for the purple-gradient selection-panel chrome used
 * by spells, languages, and creation-cards (race/class/background/etc.).
 *
 * Extracted (#4168, narrative shape Phase 4) from three duplicated blocks:
 *   - `.spell-selection-panel` family in `_terminal_show.css:1473-1664`
 *   - `.language-selection-panel` reuse via `creation_languages_controller.js`
 *   - `.creation-options` overlay block (#4166) in `_creation_cards.css`
 *
 * Naming
 * ------
 * Canonical primitive: `.selection-panel` + BEM children
 *   `.selection-panel__header`, `__title`, `__count`, `__grid`,
 *   `.selection-panel__chip`, `.selection-panel__confirm-area`,
 *   `.selection-panel__confirm`.
 *
 * Type modifiers describe what's being chosen and only override what differs:
 *   `.selection-panel--spells`     accents, school-badge palette
 *   `.selection-panel--languages`  accents (script badge supplied inline)
 *   `.selection-panel--race`       card-grid layout (cards, not chips)
 *   `.selection-panel--class`      card-grid layout
 *   (creation-cards categories all use the card-grid behaviour today)
 *
 * Legacy aliases
 * --------------
 * Existing controllers/markup (`creation_spells_controller.js`,
 * `creation_languages_controller.js`) emit literal `.spell-selection-panel`,
 * `.spell-header`, `.spell-grid`, `.spell-chip`, `.spell-confirm-area`,
 * `.spell-confirm-btn`, etc. Likewise `creation_card_html.js` emits
 * `.creation-options`, `.creation-options__header`, etc. To avoid touching ~15
 * call sites across 4+ files in this refactor (and risk regressions), each
 * rule below grouped-selectors the canonical class with the legacy classes,
 * so both spellings render identically. New code should prefer the canonical
 * `.selection-panel` family.
 */

/* ========================================
   PANEL ROOT — quiet chrome (default) + gradient variant (spells)
   ----------------------------------------
   #4273 (audit finding 12.1): the purple gradient + 2px accent border was
   spreading to every selection panel (race, class, background, languages,
   spells). Demoted to the spells-only variant; race/class/etc. inherit the
   quieter base chrome. The shared base remains visually consistent (margin,
   padding, slide-in, accent border) but loses the heavy gradient signal so
   the gradient itself stays a distinctive, single-purpose idiom rather than
   a generic "selection panel" template.
   ======================================== */

.selection-panel,
.spell-selection-panel,
.creation-options {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-lg);
  animation: slideIn var(--duration-normal) ease-out;
}

/* Spells variant retains the original gradient + accent border per JP's
   stated preference (`/ai-slop-check` audit 12.1). One panel type owns the
   distinctive purple-gradient idiom; everything else uses the quiet base. */
.spell-selection-panel,
.selection-panel--spells {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.5);
}

/* `.creation-options` carries extra defensive properties from #1343, #839,
   #2063, #2961 — preserved exactly. Folded back in here as a creation-options
   addendum so the merged primitive doesn't lose them. */
.creation-options {
  /* Cards expand to full natural height — parent panel handles scrolling.
     Removes nested scroll that trapped mouse wheel events (#1343). */
  max-height: none;
  overflow-y: visible;
  /* Keep cards below sticky creation-progress bar (--z-sticky) when
     scrolling within the narrative output area (#839). */
  position: relative;
  z-index: var(--z-raised);
  /* Ensure cards receive pointer events even when narrative-output scroll
     container intercepts them (#2063). */
  pointer-events: auto;
  isolation: isolate;
  /* #2961 / #4257 belt-and-suspenders: root cause was a missing
     `flex-wrap: wrap` on `.creation-options__header` (now fixed above).
     Keeping `min-width: 0` here so any future ancestor flex context that
     forgets `min-width: 0` can't re-trigger the 1ch char-stack via this
     leaf. Cheap and harmless. */
  min-width: 0;
}

.creation-options--selected {
  transition: opacity 0.3s ease;
}

/* Limit-reached flash (creation-cards previously used a different keyframe;
   spell/language panels rely on the `limit-reached` class added/removed in
   JS). Both routes flash the border briefly. */
.creation-options--limit-reached {
  animation: limit-flash 0.3s ease;
}

@keyframes limit-flash {
  /* `to`/`from` use `currentColor`-equivalent transparency so the flash
     resolves back to whatever border is configured on the panel root —
     `.creation-options` (0.3) and `.spell-selection-panel` (0.5) both look
     correct. Previously hard-coded to 0.5 which was wrong for the demoted
     creation-options chrome. */
  0%, 100% { border-color: rgba(139, 92, 246, 0.3); }
  50% { border-color: var(--color-warning-fg, #f59e0b); }
}

/* ========================================
   HEADER ROW — icon, title, count, controls
   ======================================== */

.selection-panel__header,
.spell-header,
.creation-options__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  /* #2961 / #4257 ROOT CAUSE: the header is a row flex container with three
     children: the heading (`__context`), an optional pick-for-me button, and
     an optional count chip. The pick-for-me button has `white-space: nowrap`
     and refuses to shrink. Without `flex-wrap: wrap`, the heading is forced
     to flex-shrink to a sub-`min-content` width on narrow viewports (~400px
     on iOS Safari with the right-panels hidden). When the container is
     narrower than the longest word, `overflow-wrap: break-word` falls
     through to character-by-character wrapping ("c / h / o / o / s / e").
     Allowing the row to wrap lets the button drop to a second line so the
     heading keeps its full width — the structural fix the leaf-level
     `min-width: 0` defenses below were papering over. The peer
     `.spell-header` rule in application.css already had `flex-wrap: wrap`;
     this brings the canonical primitive in line with that rule. */
  flex-wrap: wrap;
  min-width: 0;
}

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

.selection-panel__title,
.spell-title,
.creation-options__context {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* #4273 (audit finding 12.4): the creation-options heading sits on a darker
   neutral panel (since 12.1 demoted the gradient) — purple-on-purple no
   longer applies, but moving the heading to the high-contrast text token is
   still the WCAG AA win. Token measures at 11.5:1 against #14141e per the
   `_tokens.css` annotation; comfortably clears the 4.5:1 AA target. The
   spell variant keeps its purple title (it lives on the gradient, where the
   purple is intentional contrast against the lighter gradient background). */
.creation-options__context {
  color: var(--color-text-primary);
}

/* `.creation-options__context` carries word-wrap defenses from #2961 — kept
   as belt-and-suspenders alongside the structural `flex-wrap: wrap` fix on
   the header above (#4257). Tied to this selector only so the simpler
   spell/language headers stay identical to today's rendering. */
.creation-options__context {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  min-width: 0;
}

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

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

/* `.creation-options__count` is laid out via the footer (justify-content:
   space-between), not pushed by margin-left:auto in the header — drop the
   header-pin for that variant only. */
.creation-options__count {
  margin-left: 0;
}

/* ========================================
   GRID — chip-style (spells/languages) vs card-style (creation-cards)
   ======================================== */

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

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

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

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

/* ========================================
   CHIP — compact selectable item
   (spells, languages — and the .selection-panel--chips modifier)
   ======================================== */

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

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

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

.selection-panel__chip.is-hidden,
.spell-chip.hidden {
  display: none;
}

/* School/script badge — small accent pill inside a chip. The base shape is
   neutral; per-school colors live on .selection-panel--spells (the only
   variant with a real school taxonomy). */
.selection-panel__chip-badge,
.spell-school-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  min-width: 28px;
  text-align: center;
}

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

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

/* ========================================
   CONFIRM AREA + BUTTON
   ======================================== */

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

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

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

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

/* ========================================
   CREATION-OPTIONS variant — card grid + bespoke footer
   The card-grid layout differs from the chip grid (full-width flex columns,
   not auto-fill 180px); rule for `.creation-options__grid` lives in
   `_creation_cards.css` so it stays adjacent to `.creation-card`.
   ======================================== */

.creation-options__footer {
  /* Quieter than the prior bordered row; the panel border + gradient
     already separate the footer visually. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: none;
}

.creation-options__confirm {
  /* Reset native button defaults so the gradient panel chrome does not show
     through the OS button styling on Safari/Firefox. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  padding: var(--space-2-5) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-purple);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

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

.creation-options__confirm--ready {
  opacity: 1;
}

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

/* In multi-select mode, selected cards show checkmark but no spinner */
.creation-options[data-max-select]:not([data-max-select="1"]) .creation-card--selected::after {
  content: '✓';
  border: none;
  animation: none;
}

/* ========================================
   SPELLS modifier — school filter tabs and per-school badge palette
   These are spell-domain data and live on `--spells` only.
   ======================================== */

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

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

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

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

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

/* ========================================
   SPELL TRAY (sticky bottom bar) — kept here because it travels with the
   spells variant, but it's not strictly part of the panel primitive.
   ======================================== */

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

/* Visibility — BEM state class is the canonical mechanism (#4268, finding 7.1).
   The legacy `.hidden` class selector remains for back-compat with any callers
   still toggling generic `.hidden`. New callers should toggle `--hidden`. */
.spell-tray--hidden,
.spell-tray.hidden {
  display: none;
}

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

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

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

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

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

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

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

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

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

  .send-spell-btn {
    width: 100%;
  }
}
/**
 * Creation Cards
 * ==============
 * Interactive option cards for character creation.
 * Rendered in the narrative when AI calls show_creation_options.
 *
 * Panel chrome lives in `_selection_panel.css` (shared with spells/languages
 * via the `.selection-panel` primitive — #4168, narrative shape Phase 4).
 * That file owns:
 *   - `.creation-options` root (quiet base chrome + animation + #1343/#839
 *     /#2063 defenses + #2961 leaf belt-and-suspenders). The heavier purple
 *     gradient + 2px accent border now lives on `.spell-selection-panel`
 *     only (#4273 audit finding 12.1).
 *   - `.creation-options--selected` opacity transition
 *   - `.creation-options__header` flex row with `flex-wrap: wrap`
 *     (#2961/#4257 root cause: row had no flex-wrap, the nowrap pick-for-me
 *     button forced the heading below min-content width → char-stack)
 *   - `.creation-options__context` accent title with #2961 word-wrap belt
 *   - `.creation-options__footer`, `__count`, `__confirm`, `__count--complete`,
 *     `__confirm--disabled`, `__confirm--ready`
 *   - `.creation-options--limit-reached` flash + keyframes
 *
 * This file owns the bits unique to the card-grid variant: search input,
 * source-tinted left borders, the card itself, and the responsive grid.
 */

.creation-options__search {
  margin-bottom: 12px;
}

.creation-options__search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #fff);
  font-size: 13px;
}

.creation-options__search-input:focus {
  outline: none;
  border-color: var(--accent-color, #4f46e5);
}

.creation-options__search-input::placeholder {
  color: var(--text-muted, #888);
}

/* ============================================
   FILTER TOOLBAR
   Category filter buttons above the card grid.
   Allows filtering by source (Core, Expanded, Homebrew).
   ============================================ */

.creation-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.creation-filter__btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  /* #4273 (audit finding 12.3): unify button shape with the creation cards
     below. The toolbar previously used pill buttons (--radius-full / 9999px)
     while the cards underneath used --radius-md — two shape languages on one
     screen. Match the card radius so the toolbar reads as part of the same
     surface family. */
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary, #888);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.creation-filter__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-hover, #555);
  color: var(--text-primary, #fff);
}

.creation-filter__btn--active {
  background: rgba(79, 70, 229, 0.15);
  border-color: var(--accent-color, #4f46e5);
  color: var(--accent-color, #4f46e5);
}

.creation-filter__btn--active:hover {
  background: rgba(79, 70, 229, 0.2);
}

/* ============================================
   COLOR ACCENTS — Source-tinted left border
   Subtle tinted left-border per card source type.
   Preserves the terminal dark theme.
   ============================================ */

.creation-card--source-core {
  border-left: 3px solid rgba(59, 130, 246, 0.4);
}

.creation-card--source-core:hover {
  border-left-color: rgba(59, 130, 246, 0.7);
}

.creation-card--source-expanded {
  border-left: 3px solid rgba(245, 158, 11, 0.4);
}

.creation-card--source-expanded:hover {
  border-left-color: rgba(245, 158, 11, 0.7);
}

.creation-card--source-homebrew {
  border-left: 3px solid rgba(139, 92, 246, 0.4);
}

.creation-card--source-homebrew:hover {
  border-left-color: rgba(139, 92, 246, 0.7);
}

/* Recommended cards keep their green accent — override source border */
.creation-card--recommended {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.creation-card--recommended:hover {
  border-left-color: rgba(16, 185, 129, 0.8);
}

.creation-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Narrow-phone guard (#2683, #2978): minmax(180px) exceeds 375px viewport after
   padding, causing card truncation in the 360-399px band. Tighten the minmax
   floor to 140px and cap it at 100% of container width so the column track
   never forces horizontal overflow below 400px. */
@media (max-width: 399px) {
  .creation-options__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  }
}

/* Card Styles — font-family: inherit picks up var(--font-mono) from .narrative-output,
   matching .masonry-card and .selection-card for consistent typography (#556). */
/* Using button.creation-card for higher specificity than user-agent button styles (#1108). */
button.creation-card,
.creation-card {
  /* Button reset — required for <button> elements to override browser defaults.
     Without appearance:none, Safari/WebKit renders native platform button chrome
     (gray background, system border) over custom styles. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  outline: none;

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  touch-action: manipulation; /* Allow tap-select without conflicting with scroll */
}

.creation-card:hover {
  background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
  border-color: var(--border-hover, #555);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.creation-card:active {
  transform: translateY(0);
}

.creation-card--recommended {
  border-color: var(--success-color, #10b981);
  background-color: rgba(16, 185, 129, 0.06);
  background-image: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(16, 185, 129, 0.02) 100%
  );
}

.creation-card--recommended:hover {
  border-color: var(--success-color-bright, #34d399);
}

.creation-card--selected {
  border-color: var(--accent-color, #4f46e5);
  background-color: rgba(79, 70, 229, 0.15);
}

.creation-card--selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-color, #4f46e5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Thinking state: spinner replaces checkmark while server processes */
.creation-card--thinking::after {
  content: '';
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: creation-card-spin 0.6s linear infinite;
}

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

/* Locked container: immediate pointer-event block + dim unselected cards */
.creation-options--locked {
  pointer-events: none;
}

.creation-options--locked .creation-card:not(.creation-card--selected) {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.creation-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.creation-card__name {
  font-weight: 600;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.creation-card__badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-full, 9999px);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.creation-card__badge--recommended {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-color, #10b981);
}

.creation-card__badge--homebrew {
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple-400, #a78bfa);
}

.creation-card__tagline {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creation-card__highlights {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.creation-card__highlight {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--tag-bg, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #888);
}

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

/* ============================================
   DESKTOP: Enhanced flex grid layout (>= 768px)
   Cards flow 2-3 per row on desktop viewports
   for better visual scanning.
   ============================================ */
@media (min-width: 768px) {
  .creation-options__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .creation-options__grid .creation-card {
    /* Flex items: 2 columns minimum, 3 on wider viewports.
       calc() leaves room for the gap between items. */
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 200px;
  }
}

@media (min-width: 1024px) {
  .creation-options__grid .creation-card {
    /* 3 columns on desktop viewports (#4186) — was 1100px, lowered to
       match the codebase desktop breakpoint convention so 6-card grids
       (alignment) don't render with an empty third column at 1024-1099px. */
    flex: 1 1 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Cards flow naturally; the parent handles all vertical scrolling.
   * Nested scroll was removed — conflicts with parent .narrative-output
   * scroller on mobile (touch events are ambiguous). */
  .creation-options {
    max-height: none;
    overflow-y: visible;
  }
}

/* ============================================
   MOBILE: Full-width list layout (< 768px)
   Cards render as a scrollable list inside the
   bottom sheet, not a grid. Touch targets >= 48px.
   ============================================ */
@media (max-width: 767px) {
  .creation-options__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .creation-options {
    padding: 12px;
    border-radius: var(--radius-md, 8px);
  }

  .creation-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    min-height: 48px;
    /* Remove hover transforms on touch devices */
    transform: none;
  }

  .creation-card:hover {
    transform: none;
    box-shadow: none;
  }

  .creation-card:active {
    background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
    border-color: var(--border-hover, #555);
  }

  .creation-card__header {
    flex: 1;
    min-width: 0;
  }

  .creation-card__name {
    font-size: 14px;
  }

  .creation-card__tagline {
    font-size: 12px;
    -webkit-line-clamp: 1;
    margin-top: 2px;
  }

  .creation-card__highlights {
    margin-top: 2px;
  }

  .creation-card__highlight {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* Checkmark stays right-aligned in row layout */
  .creation-card--selected::after {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Multi-select footer touch-friendly */
  .creation-options__footer {
    padding-top: 10px;
    margin-top: 10px;
  }

  .creation-options__confirm {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
  }

  /* Search input touch-friendly */
  .creation-options__search-input {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Filter buttons: touch-friendly sizing */
  .creation-filter__btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 12px;
  }
}

/* ============================================
   MOBILE INLINE CARD PANEL (< 768px, .mf-layout only)
   #4184: Card scrolls WITH the narrative instead of
   floating as a fixed bottom sheet. The prior bottom-sheet
   pattern (position: fixed; bottom: 0; max-height: 50vh)
   trapped the card behind the sticky composer on iOS Safari
   when ancestor transforms / overflow chains created the
   wrong containing block — players couldn't reach race
   traits, stat bonuses, or the select button.

   The natural inline mobile layout (lines 487-575 above)
   already gives full-width, big-touch-target cards. Letting
   the card flow inside .narrative-output means:
   - Card content scrolls with narrative inside .narrative-main
   - Sticky composer (.input-area, position: sticky bottom: 0)
     stays pinned at viewport bottom and never overlays the card
   - All card contents (traits, bonuses, select CTA) reachable
     by scrolling the same surface that scrolls the narrative

   Desktop layout (>=768px) is unaffected — the fixed-sheet
   pattern only ever applied at <=767px under .mf-layout.
   ============================================ */
@media (max-width: 767px) {
  .mf-layout .creation-options {
    /* Stay in-flow: do NOT use position: fixed. */
    position: relative;
    /* Visual chrome retained — quiet panel background + subtle accent border
       come from the unscoped .creation-options block in _selection_panel.css
       (#4273 demoted gradient to spells-only); we only override layout. */
    border-radius: var(--radius-md, 8px);
    margin: var(--space-3, 12px) 0;
    /* Trailing space so the final card / select button visibly clears the
       sticky composer when scrolled to the bottom. */
    margin-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
    padding: var(--space-3, 12px);
    /* No internal scroll: the parent .narrative-main owns vertical scroll.
       Nested scroll fights touch-event ownership on iOS Safari (#1343, #2942). */
    max-height: none;
    overflow: visible;
    /* Touch action stays default so vertical scroll bubbles to .narrative-main. */
    touch-action: auto;
  }

  /* Category header — prominent at top of card panel */
  .mf-layout .creation-options__context {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-3, 12px);
  }

  /* Wrapper narrative-entry stays in normal flow (no clipping needed
     for inline cards). */
  .mf-layout .narrative-entry:has(.creation-options) {
    position: static;
    overflow: visible;
  }
}

/* #4184: sheet-slide-up / sheet-dismiss / sheet-backdrop-in / sheet-backdrop-out
   keyframes removed along with the bottom-sheet pattern. The card now flows
   inline in the narrative scroll container; the parent .creation-options
   slideIn animation (defined unscoped at the top of this file) provides the
   only entrance motion. The reduced-motion block they powered is no longer
   necessary since no mobile-specific animations remain. */

/* ============================================
   SELECTION STATUS (#1467)
   Brief "Saving your choice..." feedback shown
   while the server processes a card selection.
   ============================================ */

.creation-options__status {
  margin-top: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted, #888);
  text-align: center;
  animation: status-fade-in 0.2s ease;
}

@keyframes status-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .creation-options__status {
    animation: none;
  }
}

/* Animation for card appearance */
@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.creation-options__grid .creation-card {
  animation: card-fade-in 0.2s ease forwards;
}

.creation-options__grid .creation-card:nth-child(1) { animation-delay: 0.02s; }
.creation-options__grid .creation-card:nth-child(2) { animation-delay: 0.04s; }
.creation-options__grid .creation-card:nth-child(3) { animation-delay: 0.06s; }
.creation-options__grid .creation-card:nth-child(4) { animation-delay: 0.08s; }
.creation-options__grid .creation-card:nth-child(5) { animation-delay: 0.10s; }
.creation-options__grid .creation-card:nth-child(6) { animation-delay: 0.12s; }
.creation-options__grid .creation-card:nth-child(7) { animation-delay: 0.14s; }
.creation-options__grid .creation-card:nth-child(8) { animation-delay: 0.16s; }
.creation-options__grid .creation-card:nth-child(9) { animation-delay: 0.18s; }
.creation-options__grid .creation-card:nth-child(10) { animation-delay: 0.20s; }
.creation-options__grid .creation-card:nth-child(11) { animation-delay: 0.22s; }
.creation-options__grid .creation-card:nth-child(12) { animation-delay: 0.24s; }

/* Reduced motion: disable animations, ensure cards are visible */
@media (prefers-reduced-motion: reduce) {
  .creation-options__grid .creation-card {
    animation: none;
    opacity: 1;
  }

  .creation-card--thinking::after {
    animation: none;
    content: '…';
    border: none;
  }

  .creation-options--locked .creation-card:not(.creation-card--selected) {
    transition: none;
  }
}

/* #3846 — disable per-card stagger animation inside the mobile bottom sheet.
 *
 * The sheet itself already animates `sheet-slide-up` (300ms slide + fade) on
 * its parent. Adding a 12-card stagger animation INSIDE that slide creates
 * compounding paint events. Observed 2026-04-27 on iOS Safari (~390x844):
 * the sheet header, filter toolbar, search input, and "Pick for me" button
 * paint, but the race grid below them stays at the keyframe's `from` state
 * (opacity 0, translateY(10px)) — leaving the grid empty even though the
 * cards are in the DOM.
 *
 * Cancelling the per-card animation in the bottom-sheet context is safe:
 * users still see the slide-up motion of the entire sheet, which is the
 * dominant motion at this viewport. The card grid simply paints at full
 * opacity once the sheet finishes sliding up.
 *
 * Scoped to `.mf-layout` + `<= 767px` so desktop / tablet keep the stagger.
 * The complementary JS guard in `lib/creation_card_filters.js#setCardVisibility`
 * forces explicit opacity/transform when the JS filter runs (hides expanded
 * races on initial render); together they cover both rendering paths. */
@media (max-width: 767px) {
  .mf-layout .creation-options__grid .creation-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Selection summary — replaces cards after a choice is made */
.creation-selection-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  border-left: 2px solid var(--accent-color, #4f46e5);
}

.creation-selection-summary__label {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.creation-selection-summary__value {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.narrative-entry--selection-summary {
  margin: 4px 0;
}

/* ============================================
   CHARACTER CREATION ROOM: Click-through fix (#2063)

   During character creation the narrative-output scroll container
   intercepts pointer events on creation cards — Playwright
   reports "click intercepted by narrative-output div".

   Root cause: the scroll container (.narrative-output) with
   overflow-y:auto creates a hit-test surface that sits above
   its children in certain layout configurations (flex column
   with the mf-layout display:flex override). When elementFromPoint
   is called at the card's center coordinates, the scroll
   container itself is returned instead of the child button.

   Fix: in character_creation room only, set pointer-events:none
   on the narrative-output so it passes clicks through, then
   re-enable pointer-events on all direct children. Scroll via
   mouse wheel still works because the scrollable children
   (narrative entries) have pointer-events:auto and propagate
   wheel events to their scroll container parent.

   SCOPE: character_creation room only AND desktop only — game
   room narrative scrolling/clicking is unaffected; mobile
   touch scrolling on the narrative-output (behind the cards-2+
   bottom sheet) is preserved (#3887). On mobile, the scroll
   gesture has to start on .narrative-output itself and would be
   blocked by pointer-events:none — the elementFromPoint bug
   the original rule fixes is a mouse-only hit-test concern.
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  [data-room="character_creation"] .narrative-output {
    pointer-events: none;
  }

  [data-room="character_creation"] .narrative-output > * {
    pointer-events: auto;
  }

  [data-room="character_creation"] .narrative-output .creation-card {
    pointer-events: auto;
  }
}
/* 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, .turn-rhythm.initially-hidden { display: none; }

.autopilot-settings {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-width: 400px;
}

.autopilot-settings__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.autopilot-settings__toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.autopilot-settings__toggle:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.autopilot-settings__toggle.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.autopilot-settings__instructions {
  width: 100%;
  min-height: 80px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  resize: vertical;
}

.autopilot-settings__instructions:focus {
  outline: none;
  border-color: var(--color-accent-emphasis);
}

.autopilot-settings__char-count {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.autopilot-settings__char-count.warning {
  color: var(--color-warning-fg);
}

/* ========================================
 * Autopilot Display
 * ======================================== */

.autopilot-display {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.autopilot-display__actions {
  list-style: none;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
}

.autopilot-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.autopilot-action::before {
  content: '•';
  color: var(--color-accent-fg);
}

.autopilot-display__reasoning {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

.autopilot-display__reasoning .reasoning-label {
  color: var(--color-accent-fg);
  font-weight: var(--font-weight-semibold);
}

.autopilot-display__reasoning .reasoning-text {
  color: var(--color-text-secondary);
  font-style: italic;
}

.autopilot-display.dismissing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
 * Control Buttons
 * ======================================== */

.btn--ready {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success-emphasis);
  color: var(--color-success-fg);
}

.btn--ready:hover {
  background: var(--color-success-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--ready:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--bump {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning-emphasis);
  color: var(--color-warning-fg);
}

.btn--bump:hover {
  background: var(--color-warning-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--autopilot {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.btn--autopilot:hover {
  background: var(--color-accent-emphasis);
  color: var(--color-fg-on-emphasis);
}

/* ========================================
 * Resolution Pending State
 * ======================================== */

.turn-rhythm-panel.resolution-pending {
  border-color: var(--turn-rhythm-resolving-color);
}

.turn-rhythm-panel.resolution-pending .phase-indicator {
  animation: resolution-pending-pulse 2s ease-in-out infinite;
}

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

.resolution-countdown {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.resolution-countdown.hidden {
  display: none;
}

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

@media (max-width: 640px) {
  .turn-rhythm-panel {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .mode-selector {
    gap: var(--space-half);
  }

  .mode-selector__btn {
    padding: var(--space-half) var(--space-1);
    font-size: var(--font-size-2xs);
  }

  .mode-selector__shortcut {
    display: none;
  }

  .action-queue__list {
    max-height: 150px;
  }

  .dm-bump__actions {
    flex-direction: column;
  }

  .autopilot-settings {
    max-width: 100%;
  }
}
/* ==========================================================================
   Workflow Panels
   ========================================================================== */

/* ----------------------------------------
   Workflow Status Panel
   ---------------------------------------- */

.workflow-status-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workflow-status-panel.compact {
  padding: var(--space-2);
  gap: var(--space-1);
}

/* Mode-specific theming */
.workflow-status-panel.workflow-mode-sketch {
  border-left: 3px solid var(--color-warning);
}

.workflow-status-panel.workflow-mode-guided {
  border-left: 3px solid var(--color-primary);
}

.workflow-status-panel.workflow-mode-quick {
  border-left: 3px solid var(--color-success);
}

.workflow-status-panel.workflow-mode-polish {
  border-left: 3px solid var(--color-info);
}

/* Header */
.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-type {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-type svg {
  color: var(--color-primary);
}

.workflow-name {
  font-size: var(--text-sm);
}

.workflow-mode-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: help;
}

.workflow-mode-badge svg {
  width: 12px;
  height: 12px;
}

/* Progress bar */
.workflow-progress-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.workflow-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.workflow-progress-bar .progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

.progress-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Phase indicators */
.workflow-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.phase-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background 0.2s ease, color 0.2s ease;
}

.phase-indicator.phase-complete {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.phase-indicator.phase-current {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

.phase-indicator.phase-pending {
  background: var(--surface-secondary);
  color: var(--text-muted);
}

.phase-indicator.skipped {
  text-decoration: line-through;
  opacity: 0.6;
}

.phase-check,
.phase-current,
.phase-pending {
  font-size: 10px;
}

.phase-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workflow controls */
.workflow-controls {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.workflow-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.workflow-btn:hover:not(:disabled) {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}

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

.workflow-btn svg {
  width: 14px;
  height: 14px;
}

.btn-label {
  display: none;
}

@media (min-width: 640px) {
  .btn-label {
    display: inline;
  }
}

/* Timer */
.workflow-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.workflow-timer svg {
  width: 12px;
  height: 12px;
}

/* ----------------------------------------
   Workflow History Panel
   ---------------------------------------- */

.workflow-history-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

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

.history-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

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

/* Empty state */
.history-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--text-muted);
}

.history-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.history-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* History sections */
.history-section {
  margin-bottom: var(--space-2);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.section-label svg {
  width: 12px;
  height: 12px;
}

/* History list */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.history-entry:hover {
  background: var(--surface-tertiary);
}

.history-entry:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.redo-entry {
  opacity: 0.6;
  border-left: 2px solid var(--color-info);
}

.undo-entry {
  border-left: 2px solid var(--color-primary);
}

.entry-phase {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 60px;
}

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

.entry-time {
  color: var(--text-muted);
  font-size: 10px;
}

.entry-action {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.history-entry:hover .entry-action {
  opacity: 1;
}

.entry-action svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

/* Current marker */
.history-current-marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.marker-line {
  flex: 1;
  height: 1px;
  background: var(--color-primary);
}

.marker-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* History controls */
.history-controls {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}

.history-btn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.history-btn:hover:not(:disabled) {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

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

/* ----------------------------------------
   Mode Switcher (inline component)
   ---------------------------------------- */

.workflow-mode-switcher {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.mode-switch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-switch-btn:hover {
  color: var(--text-secondary);
}

.mode-switch-btn.active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.mode-switch-btn svg {
  width: 12px;
  height: 12px;
}
/*
 * Narrative Annotations
 * =====================
 * Text selection annotations on narrative entries.
 * Includes: popover, highlights, margin indicators.
 */

/* ========================================
 * Annotation Popover (floating above selection)
 * ======================================== */

.annotation-popover {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating);
  padding: var(--space-3);
  min-width: 240px;
  max-width: 360px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  animation: annotationPopoverIn 150ms ease-out;
}

@keyframes annotationPopoverIn {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
  }
}

.annotation-popover__selected-text {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annotation-popover__input {
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  margin-bottom: var(--space-2);
}

.annotation-popover__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(90, 159, 216, 0.2);
}

.annotation-popover__input::placeholder {
  color: var(--color-text-muted);
}

.annotation-popover__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.annotation-popover__btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.annotation-popover__btn--cancel {
  background: transparent;
  color: var(--color-text-muted);
}

.annotation-popover__btn--cancel:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.annotation-popover__btn--save {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.annotation-popover__btn--save:hover {
  filter: brightness(1.1);
}

/* ========================================
 * Annotation Highlight (on annotated text)
 * ======================================== */

.annotation-highlight {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  border-bottom: 1px dashed var(--color-accent-primary);
  border-radius: 2px;
  cursor: help;
  transition: background var(--transition-fast);
}

.annotation-highlight:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Margin Indicator (dot in entry left margin)
 * ======================================== */

.annotation-margin-indicator {
  position: absolute;
  left: -12px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.annotation-margin-indicator:hover {
  opacity: 1;
  transform: scale(1.5);
}

.annotation-margin-indicator--multiple {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Show count as pseudo-element for multiple annotations */
.annotation-margin-indicator--multiple::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  left: 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  line-height: 1;
}

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

@media (prefers-reduced-motion: reduce) {
  .annotation-popover {
    animation: none;
  }

  .annotation-margin-indicator {
    transition: none;
  }

  .annotation-highlight {
    transition: none;
  }
}
/**
 * Moment Capture Component
 * ========================
 * Floating camera button for capturing memorable narrative moments.
 * Positioned top-right of the narrative area, semi-transparent until hover.
 */

/*
 * #3879 — Repositioned from top-right (where it overlapped the channel-tabs
 * row, including the admin DEBUG tier-tab) to bottom-right of the narrative
 * area, just above the input bar. Sits next to scroll-to-latest without
 * crossing any interactive control in the header.
 */
.moment-capture {
  position: absolute;
  bottom: calc(var(--space-4, 16px) + 60px); /* Above input area, matches scroll-to-latest */
  right: var(--space-3, 12px);
  z-index: var(--z-floating);
  pointer-events: auto;
}

.moment-capture__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.moment-capture__button:hover {
  opacity: 1;
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.moment-capture__button:active {
  transform: scale(0.95);
}

.moment-capture__button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Capturing state - pulsing animation */
.moment-capture__button--capturing {
  opacity: 1;
  animation: moment-capture-pulse 0.8s ease-in-out infinite;
}

@keyframes moment-capture-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

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

@keyframes moment-capture-success {
  0% {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    transform: scale(1);
  }
}

/* Icon styling */
.moment-capture__button .svg-icon {
  width: 18px;
  height: 18px;
}

/* Feedback toast — anchored above the button (#3879 reposition). */
.moment-capture__feedback {
  position: absolute;
  bottom: calc(100% + var(--spacing-2));
  right: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  animation: moment-feedback-in 0.2s ease-out;
}

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

.moment-capture__feedback--success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.moment-capture__feedback--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.moment-capture__feedback-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip on hover */
.moment-capture__button[title] {
  position: relative;
}

.moment-capture__button[title]::after {
  content: attr(title);
  position: absolute;
  /* #3879: render above the button (it now sits bottom-right, above input). */
  bottom: calc(100% + var(--spacing-1));
  right: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  /* Keep tooltip narrow so it can't span across the panel into adjacent
     controls (e.g. the DEBUG tier-tab); break long titles instead. */
  max-width: 220px;
  white-space: normal;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
  pointer-events: none;
  z-index: var(--z-raised);
}

.moment-capture__button[title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Position context - ensure parent has position relative */
.narrative-main {
  position: relative;
}

/* ============================================================
 * Prompt Panel - Image prompt display with copy functionality
 * ============================================================ */

.moment-capture__prompt-panel {
  position: absolute;
  /* #3879: anchor above the button (bottom-right placement). */
  bottom: calc(100% + var(--spacing-2));
  right: 0;
  width: 320px;
  max-width: calc(100vw - var(--spacing-6));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: moment-panel-in 0.3s ease-out;
  z-index: calc(var(--z-floating) + 1);
}

@keyframes moment-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.moment-capture__prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-success);
}

.moment-capture__prompt-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.moment-capture__prompt-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Tabs for switching between prompt formats */
.moment-capture__prompt-tabs {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.moment-capture__prompt-tab {
  flex: 1;
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__prompt-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.moment-capture__prompt-tab--active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Prompt content area */
.moment-capture__prompt-contents {
  padding: var(--spacing-2);
}

.moment-capture__prompt-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.moment-capture__prompt-content.hidden {
  display: none;
}

.moment-capture__prompt-text {
  margin: 0;
  padding: var(--spacing-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.moment-capture__copy-btn {
  padding: var(--spacing-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__copy-btn:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}

.moment-capture__copy-btn--success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

/* Footer with help text */
.moment-capture__prompt-footer {
  padding: var(--spacing-2) var(--spacing-3);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.moment-capture__prompt-footer small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .moment-capture__prompt-panel {
    width: calc(100vw - var(--spacing-4));
    right: calc(-100% + 36px + var(--spacing-2));
  }

  .moment-capture__prompt-tabs {
    flex-wrap: wrap;
  }

  .moment-capture__prompt-tab {
    flex: 1 1 calc(50% - var(--spacing-1));
  }
}
/**
 * Imagine Entry
 * =============
 * Inline image entries in the narrative panel from /imagine command.
 * Three states: loading (shimmer), complete (image), error.
 */

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

/* Header meta cluster (#4272 finding 11.1): replaces the player-count tab
   badge after tabs were removed. Player count + status badge sit together
   in the right side of the panel header. */
.campaign-lobby-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lobby-status-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.lobby-status-badge.status--open {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.lobby-status-badge.status--in_game {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.lobby-status-badge.status--closed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}

.player-count-badge {
  font-size: var(--font-size-xs);
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
  color: var(--text-primary);
}

.campaign-lobby-body {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.lobby-section {
  margin-bottom: var(--space-2);
}

/* Player List */
.lobby-player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--timing-instant);
}

.lobby-player:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lobby-player--dm {
  background: rgba(255, 215, 0, 0.08);
}

.lobby-player-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player-status.online {
  background: var(--color-success);
  box-shadow: 0 0 4px var(--color-success);
}

.lobby-player-status.offline {
  background: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.lobby-player-role {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.lobby-player-ready svg {
  width: 14px;
  height: 14px;
}

.lobby-player-ready.ready {
  color: var(--color-success);
}

.lobby-player-ready.not-ready {
  color: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.lobby-player-empty svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.lobby-kick-btn {
  opacity: 0;
  transition: opacity var(--timing-fast);
  padding: 2px 4px;
}

.lobby-player:hover .lobby-kick-btn {
  opacity: 0.6;
}

.lobby-kick-btn:hover {
  opacity: 1;
  color: var(--color-error);
}

/* Skeleton state (#4272 finding 11.2): shaped placeholder rows that match
   the real player-row geometry (status dot + name + ready badge) so the
   list doesn't reflow when real data lands. The base shimmer comes from
   the global .skeleton-line in components/_skeleton.css. */
.lobby-player--skeleton {
  pointer-events: none;
  opacity: 0.7;
}

.lobby-player--skeleton .skeleton-line--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player--skeleton .skeleton-line--name {
  flex: 1;
  height: 12px;
  max-width: 140px;
  border-radius: var(--radius-xs);
}

.lobby-player--skeleton .skeleton-line--ready {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Vary skeleton name widths slightly so the list reads as multiple players
   rather than a uniform stack. */
.lobby-player--skeleton:nth-child(2) .skeleton-line--name {
  max-width: 100px;
}

.lobby-player--skeleton:nth-child(3) .skeleton-line--name {
  max-width: 120px;
}

/* Ready Summary */
.lobby-ready-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.ready-count {
  font-weight: 600;
  color: var(--color-success);
}

.ready-label {
  color: var(--text-muted);
}

/*
 * Lobby status notices (#3764, unified in #4272 finding 11.3).
 *
 * Single component used for both "waiting for DM" and "late joiner" notices.
 * Variant modifiers control palette only — base layout is shared so the
 * two notices read as siblings of one component, not parallel implementations.
 *
 * - .lobby-status-notice--waiting-for-dm: shown when the player is ready,
 *   all players are ready, but the DM hasn't pressed Start Game yet.
 * - .lobby-status-notice--late-joiner: shown when a player joins a campaign
 *   that already transitioned to in_game.
 */
.lobby-status-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.lobby-status-notice.hidden {
  display: none;
}

.lobby-status-notice__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.lobby-status-notice__icon svg {
  width: 16px;
  height: 16px;
}

.lobby-status-notice__body {
  flex: 1;
  min-width: 0;
}

.lobby-status-notice__body strong {
  display: block;
  margin-bottom: 2px;
}

.lobby-status-notice__body p {
  margin: 0;
  color: var(--text-muted);
}

/* Late-joiner — "paused for you" framing, blue/info palette. */
.lobby-status-notice--late-joiner {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.25);
  color: var(--text-primary);
}

.lobby-status-notice--late-joiner .lobby-status-notice__icon {
  color: var(--accent-primary, #60a5fa);
}

.lobby-status-notice--late-joiner .lobby-status-notice__body strong {
  color: var(--accent-primary, #60a5fa);
}

/* Waiting-for-DM — gating warning, amber palette. */
.lobby-status-notice--waiting-for-dm {
  align-items: center;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  color: var(--color-warning, #fbbf24);
}

.lobby-status-notice--waiting-for-dm .lobby-status-notice__icon {
  color: var(--color-warning, #fbbf24);
}

/* Lobby Actions */
.lobby-actions {
  display: flex;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.lobby-actions .btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

.lobby-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-actions .btn-leave {
  flex: 0 0 auto;
}

.lobby-actions .btn-leave:hover {
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
}

/* Settings — inline collapsible (#4272 finding 11.1). Replaces the Settings
   tab. Uses native <details>/<summary> for keyboard + screen-reader support
   without adding an extra Stimulus action. */
.lobby-settings-details {
  margin-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-2);
}

.lobby-settings-summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide default disclosure marker; we draw our own affordance via the icon. */
.lobby-settings-summary::-webkit-details-marker { display: none; }
.lobby-settings-summary::marker { content: ''; }

.lobby-settings-summary:hover,
.lobby-settings-details[open] .lobby-settings-summary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.lobby-settings-summary:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 2px;
}

.lobby-settings-summary__icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--timing-fast) var(--ease-default);
}

.lobby-settings-summary__icon svg {
  width: 12px;
  height: 12px;
}

.lobby-settings-details[open] .lobby-settings-summary__icon {
  transform: rotate(45deg);
}

.lobby-settings-content {
  padding-top: var(--space-2);
}

/* Settings groups (carried over from the previous Settings-tab styles). */
.lobby-settings-group {
  margin-bottom: var(--space-3);
}

.settings-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.settings-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.settings-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.settings-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.settings-buttons {
  display: flex;
  gap: 8px;
}

.settings-buttons .btn {
  padding: 5px 10px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.settings-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

/* Player Settings View */
.lobby-settings-info {
  padding: var(--space-3);
  text-align: center;
}

.settings-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.settings-note svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Pulse animation for start button when ready */
.btn-pulse {
  animation: pulse 1.5s infinite;
}
/**
 * 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;
  }
}

/* ========================================
 * #2685: Narrow mobile viewports (<480px)
 * ========================================
 * The 480px breakpoint above leaves 375–479px (majority of phones in
 * portrait: iPhone SE/12/13 mini/14, Pixel 5) without a compact variant.
 * At this width, the default font sizes + padding cause entity cards
 * to crowd the header label and push descriptions to three lines.
 * This block tightens spacing and drops base font to 0.85rem-equivalent
 * so two-line clamped descriptions and tag rows stay on one row.
 * Matches the density pattern from _mobile.css (<400px) and
 * mobile_enhancements.css (<375px): reduce padding, trim font-size,
 * tighten line-height.
 */
@media (max-width: 479px) {
  .creation-reference-panel__header {
    padding: 0.5rem 0.625rem;
  }

  .creation-reference-panel__title {
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .creation-reference-panel__step-label {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
  }

  .creation-reference-panel__search {
    padding: 0.375rem 0.625rem;
  }

  .creation-reference-panel__tabs {
    padding: 0.375rem 0.625rem;
    gap: 0.1875rem;
  }

  .creation-reference-panel__tab {
    padding: 0.3125rem 0.5625rem;
    font-size: 0.625rem;
  }

  .creation-reference-panel__content {
    padding: 0.3125rem;
  }

  .creation-browser__entities {
    gap: 0.375rem;
  }

  .creation-browser__category {
    margin-bottom: 0.75rem;
  }

  .creation-browser__category-title {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
    margin-bottom: 0.375rem;
  }

  .creation-browser__entity-card {
    gap: 0.5rem;
    padding: 0.4375rem;
  }

  .creation-browser__entity-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
  }

  .creation-browser__entity-icon svg {
    width: 14px;
    height: 14px;
  }

  .creation-browser__entity-name {
    font-size: 0.75rem;
    margin-bottom: 0.1875rem;
  }

  .creation-browser__entity-desc {
    font-size: 0.625rem;
    line-height: 1.35;
  }

  .creation-browser__entity-meta {
    gap: 0.375rem;
    margin-top: 0.25rem;
  }

  .creation-browser__entity-tag {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
  }

  .creation-browser__entity-arrow svg {
    width: 14px;
    height: 14px;
  }

  .creation-reference-panel__empty {
    padding: 1.25rem;
  }

  .creation-reference-panel__empty-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.625rem;
  }

  .creation-reference-panel__empty-icon svg {
    width: 24px;
    height: 24px;
  }

  .creation-reference-panel__empty-text {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .creation-reference-panel__footer {
    padding: 0.375rem 0.625rem;
  }

  .creation-browser__count {
    font-size: 0.625rem;
  }

  /* #2982: Preserve ≥44px touch target at 375-479px (iPhone SE / standard small iOS).
   * Earlier 28×28 sizing violated WCAG 2.5.5 / iOS HIG 44pt minimum. Keep the
   * SVG glyph small for visual density, but expand the button's hit area via
   * min-width/min-height so thumb taps don't miss. */
  .creation-reference-panel__action {
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.375rem;
  }

  .creation-reference-panel__action svg {
    width: 14px;
    height: 14px;
  }

  /* #2982: Tabs are horizontally scrollable but each tab must still clear
   * the 44px touch minimum on its primary tap axis (height). */
  .creation-reference-panel__tab {
    min-height: 32px;
  }

  /* #2982: Entity cards are the primary interactive surface; ensure they
   * meet the 44px minimum height at 375px even with tightened padding. */
  .creation-browser__entity-card {
    min-height: 44px;
  }
}
/* Dungeon Map Panel - terminal-themed exploration map */

.dungeon-map-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

.dungeon-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.dungeon-map-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dungeon-map-controls {
  display: flex;
  gap: 2px;
}

.dungeon-map-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.dungeon-map-btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.dungeon-map-btn:active {
  background: var(--color-bg-active, #333);
}

.dungeon-map-container {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
}

.dungeon-map-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
}

.dungeon-map-empty-state {
  color: var(--color-text-secondary, #888);
  text-align: center;
  padding: var(--space-4, 16px);
}

.dungeon-map-empty-state .empty-state__icon {
  color: var(--color-text-green, #00ff00);
  opacity: 0.6;
}
/* Spatial Map Editor — terminal-themed grid editor for SpatialManifest data */

.spatial-map-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

/* Header */
.spatial-map-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.spatial-map-editor__title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spatial-map-editor__actions {
  display: flex;
  gap: 4px;
}

.spatial-map-editor__btn {
  padding: 2px 8px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.spatial-map-editor__btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.spatial-map-editor__btn--primary {
  border-color: var(--color-text-green, #00ff00);
  color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__btn--primary:hover {
  background: rgba(0, 255, 0, 0.1);
}

/* Toolbar */
.spatial-map-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  flex-wrap: wrap;
}

.spatial-map-editor__dimensions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.spatial-map-editor__label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #aaa);
  display: flex;
  align-items: center;
  gap: 2px;
}

.spatial-map-editor__dim-input {
  width: 40px;
  padding: 1px 4px;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #333);
  border-radius: 2px;
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-align: center;
}

.spatial-map-editor__dim-input:focus {
  outline: none;
  border-color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__tool-group {
  display: flex;
  gap: 2px;
  border-left: 1px solid var(--color-border, #333);
  padding-left: 6px;
}

/* Terrain brush buttons */
.spatial-map-editor__terrain-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.spatial-map-editor__terrain-btn:hover {
  border-color: var(--color-border, #444);
}

.spatial-map-editor__terrain-btn--active {
  border-color: var(--color-text-green, #00ff00);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
}

.spatial-map-editor__terrain-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-text-secondary, #aaa);
}

.spatial-map-editor__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.spatial-map-editor__swatch--stone-floor { background: #3a3a4a; }
.spatial-map-editor__swatch--wall { background: #1a1a2a; }
.spatial-map-editor__swatch--wood-floor { background: #6b4f2a; }
.spatial-map-editor__swatch--water { background: #1a3a6a; }
.spatial-map-editor__swatch--difficult { background: #4a3a2a; }
.spatial-map-editor__swatch--door { background: #8b5a2b; }
.spatial-map-editor__swatch--pillar { background: #5a5a6a; }
.spatial-map-editor__swatch--stairs { background: #4a4a5a; }

/* Canvas area */
.spatial-map-editor__canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  padding: 8px;
}

.spatial-map-editor__canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
}

/* Footer */
.spatial-map-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  background: var(--color-bg-secondary, #111);
  border-top: 1px solid var(--color-border, #2a2a2a);
  min-height: 22px;
}

.spatial-map-editor__cell-info,
.spatial-map-editor__status {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #777);
}

.spatial-map-editor__status {
  color: var(--color-text-green, #00ff00);
}

/* Export textarea */
.spatial-map-editor__export-area {
  width: 100%;
  max-height: 120px;
  padding: 4px 8px;
  background: var(--color-bg-primary, #0a0a0a);
  border: none;
  border-top: 1px solid var(--color-border, #2a2a2a);
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  resize: none;
}

.spatial-map-editor__export-area:focus {
  outline: none;
}
/* ============================================
 * Foreshadowing Panel (DM Terminal Sidebar)
 * ============================================
 * Shows active plot threads, hooks, orbits, and promises.
 * DM-only panel for tracking narrative foreshadowing elements.
 */

.panel-foreshadowing {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* Header */
.foreshadowing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.foreshadowing-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.foreshadowing-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.refresh-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

.refresh-btn.refreshing .refresh-icon {
  animation: spin 1s linear infinite;
}

/* Quick Stats */
.foreshadowing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.foreshadowing-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.foreshadowing-stats .stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.foreshadowing-stats .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Body */
.foreshadowing-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.foreshadowing-section {
  margin-bottom: var(--space-3);
}

.foreshadowing-section:last-child {
  margin-bottom: 0;
}

.foreshadowing-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.foreshadowing-section .section-header:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.foreshadowing-section .section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.section-toggle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.section-content {
  margin-top: var(--space-2);
}

/* Foreshadow Items */
.foreshadow-item {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent-primary);
}

.foreshadow-item:last-child {
  margin-bottom: 0;
}

.item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.item-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 100px;
}

.item-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* Badge colors */
.badge-mystery { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-prophecy { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-revenge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-romance { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.badge-political { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.badge-quest_hook { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-subplot { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.badge-foreshadowing { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-villain_scheme { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-faction_conflict { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-ready { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-active { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

/* Importance stars */
.importance-stars {
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
}

.importance-1 { color: var(--color-text-muted); }
.importance-2 { color: var(--color-text-secondary); }
.importance-3 { color: var(--color-accent-primary); }
.importance-4 { color: #eab308; }
.importance-5 { color: #ef4444; }

/* Item content */
.item-description {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.item-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-style: italic;
}

.hint-label {
  color: var(--color-text-muted);
}

.item-npcs {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.npcs-label {
  color: var(--color-text-muted);
}

.item-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Urgency indicators */
.urgency-indicator {
  font-size: var(--font-size-sm);
}

.urgency-immediate { color: #ef4444; }
.urgency-time_sensitive { color: #eab308; }
.urgency-low { color: var(--color-text-muted); }
.urgency-background { color: var(--color-text-muted); opacity: 0.6; }

/* Hook items */
.hook-item.urgency-immediate {
  border-left-color: #ef4444;
}

.hook-item.urgency-time_sensitive {
  border-left-color: #eab308;
}

.ai-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  margin-left: var(--space-1);
}

/* Orbit progress */
.orbit-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 35px;
}

.orbit-ready {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: #22c55e;
  font-weight: var(--font-weight-medium);
}

/* Promise items */
.promise-direction {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.promise-npc_to_player { border-left-color: #3b82f6; }
.promise-player_to_npc { border-left-color: #22c55e; }
.promise-mutual { border-left-color: #eab308; }

.promise-text {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}

.overdue-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  margin-left: var(--space-1);
}

/* Empty state */
.foreshadowing-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.foreshadowing-empty .empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.foreshadowing-empty .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Footer */
.foreshadowing-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  flex-shrink: 0;
}

.footer-link {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}
/* Party Roster Panel */
/* Compact party member display for character sheet sidebar */

.party-roster {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-xs, 4px) 0;
}

/* Empty state */
.party-roster__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 16px);
  text-align: center;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm, 8px);
  opacity: 0.5;
}

.party-roster__empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.party-roster__empty-message {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  color: var(--color-text-secondary, #9ca3af);
}

.party-roster__empty-hint {
  margin: var(--spacing-xs, 4px) 0 0;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Loading state */
.party-roster__loading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
}

/* Party members list */
.party-roster__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

/* Individual member card */
.party-roster__member {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-sm, 8px);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-sm, 4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.party-roster__member--clickable {
  cursor: pointer;
}

.party-roster__member--clickable:hover {
  border-color: var(--color-text-secondary, #9ca3af);
  box-shadow: 0 0 6px rgba(156, 163, 175, 0.15);
}

.party-roster__member--self {
  border-color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 5%, transparent);
}

/* Member portrait */
.party-roster__portrait {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary, #1f2937);
  border: 2px solid var(--color-border, #374151);
}

.party-roster__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-roster__portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__portrait-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Online indicator on portrait */
.party-roster__online-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted, #6b7280);
  border: 2px solid var(--color-bg-secondary, #1f2937);
}

.party-roster__online-indicator--online {
  background: #22c55e;
}

.party-roster__online-indicator--idle {
  background: #eab308;
}

.party-roster__online-indicator--away {
  background: #6b7280;
}

/* Member info section */
.party-roster__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.party-roster__name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

.party-roster__name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-roster__you-badge {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 15%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Friend icon — small heart shown next to the name of party members who are
   confirmed friends of the viewer. Only visible to the viewer themselves;
   the server only sets is_friend=true for the requesting user's own friend graph. */
.party-roster__friend-badge {
  font-size: 0.65rem;
  color: #e879f9;
  line-height: 1;
  flex-shrink: 0;
  cursor: default;
}

.party-roster__class {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Health status section */
.party-roster__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

/* HP status badge (privacy-aware) */
.party-roster__hp-status {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.party-roster__hp-status--healthy {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.party-roster__hp-status--injured {
  color: #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.party-roster__hp-status--bloodied {
  color: #f97316;
  background: rgba(249, 115, 22, 0.15);
}

.party-roster__hp-status--critical {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-hp-critical 1.5s ease-in-out infinite;
}

.party-roster__hp-status--down {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

@keyframes pulse-hp-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* HP bar for self (shows exact HP) */
.party-roster__hp-bar {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary, #1f2937);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--color-border, #374151);
}

.party-roster__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-roster__hp-fill--healthy {
  background: #22c55e;
}

.party-roster__hp-fill--wounded {
  background: #eab308;
}

.party-roster__hp-fill--critical {
  background: #ef4444;
}

.party-roster__hp-text {
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-secondary, #9ca3af);
}

/* Conditions display */
.party-roster__conditions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 2px;
}

.party-roster__condition {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Condition severity colors */
.party-roster__condition--debuff {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.party-roster__condition--control {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.party-roster__condition--buff {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Party header (optional) */
.party-roster__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-xs, 4px);
  margin-bottom: var(--spacing-xs, 4px);
  border-bottom: 1px solid var(--color-border, #374151);
}

.party-roster__title {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-roster__count {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .party-roster__hp-status--critical {
    animation: none;
  }

  .party-roster__member,
  .party-roster__hp-fill {
    transition: none;
  }
}
/**
 * Session Analytics Panel
 * =======================
 * Displays session statistics, progression charts, and DM metrics.
 * Extracted from inline <style> in terminal/panels/_session_analytics.html.erb.
 */

.session-analytics-panel {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  overflow-y: auto;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.analytics-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.analytics-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.date-range-filters {
  display: flex;
  gap: var(--space-1);
}

.date-range-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.date-range-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.date-range-btn.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Loading */
.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.analytics-loading.hidden,
.analytics-empty.hidden {
  display: none;
}

.session-analytics-panel .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: session-analytics-spin 0.8s linear infinite;
}

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

/* Empty state */
.analytics-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Sections */
.session-analytics-panel .analytics-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.session-analytics-panel .section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Campaign stats grid */
.campaign-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
}

.campaign-stat {
  text-align: center;
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.campaign-stat__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent-primary);
}

.campaign-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Session list */
.session-analytics-panel .session-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

.analytics-session-card {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.analytics-session-card:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.analytics-session-card--selected {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.session-card__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.session-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

.session-card__duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-card__body {
  display: flex;
  gap: var(--space-3);
}

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

.session-analytics-panel .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-analytics-panel .stat-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.session-card__summary {
  margin: var(--space-2) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Progression chart */
.progression-chart-container {
  min-height: 120px;
}

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

.progression-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100px;
  padding: var(--space-2) 0;
}

.progression-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.progression-bar {
  width: 100%;
  min-height: 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height 0.3s ease;
}

.progression-bar--level-up {
  background: linear-gradient(to top, var(--color-accent-primary), var(--color-accent-warning));
}

.level-marker {
  position: absolute;
  top: -16px;
  font-size: 10px;
}

.progression-chart__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Session detail */
.session-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.session-detail__title {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.session-detail__section h5 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.session-detail__section p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Notable moments */
.notable-moments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notable-moment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.moment-icon {
  flex-shrink: 0;
}

.moment-text {
  color: var(--color-text-secondary);
}

.no-moments, .no-data {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* DM metrics */
.dm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.dm-metric {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.dm-metric__value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.dm-metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Tool usage */
.tool-usage-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tool-usage-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

.tool-name {
  color: var(--color-text-secondary);
}

.tool-count {
  color: var(--color-accent-primary);
  font-weight: 500;
}
/**
 * Point Buy & Ability Score Assignment
 * =====================================
 * Styles for all three ability score methods:
 * - Standard Array (click-to-assign)
 * - Roll Dice (click-to-assign)
 * - Point Buy (+/- controls with budget)
 *
 * Source of truth for classes used in:
 *   app/javascript/controllers/terminal/creation_ability_controller.js
 */

/* ========================================
   Ability Panel Theme
   Orange accent for ability score selection
   ======================================== */

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

/* ========================================
   Method Selection Cards
   Three options: Standard Array, Roll, Point Buy
   ======================================== */

.ability-methods-grid.selection-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.ability-method-card.selection-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.05);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
  min-width: auto;
}

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

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

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

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

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

/* Mobile: stack the four siblings (icon / name / description / detail) vertically
   so they don't squeeze into 4 narrow columns on phone-width viewports.
   Original row layout produces "Sta..." truncation + 3-word-wide description
   columns at <420px. */
@media (max-width: 600px) {
  .ability-method-card.selection-card,
  .ability-method-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2, 8px);
  }

  .ability-method-card .card-icon,
  .ability-method-card .method-icon {
    width: auto;
    text-align: left;
  }

  .ability-method-card .card-name,
  .ability-method-card .method-name {
    margin-bottom: 0;
  }
}

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

.ability-method-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: rgba(251, 146, 60, 0.05);
  border: 1px solid rgba(251, 146, 60, 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms ease);
}

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

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

.method-content {
  flex: 1;
}

.method-name {
  font-size: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: #fb923c;
  margin-bottom: var(--space-1, 4px);
}

.method-description {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1, 4px);
}

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

/* ========================================
   Click-to-Assign UI (Standard Array & Roll)
   Value chips + ability slot cards
   ======================================== */

.ability-values-section {
  margin-bottom: var(--space-5, 20px);
}

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

.values-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

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

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

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

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

/* ========================================
   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;
  }
}
/**
 * Creator Studio — Manual Tools Panel Section
 * ============================================
 * Collapsible catalog of all 98 tools available in Creator Studio dashboard
 * mode. Rendered inside the dashboard panel, above the Tips section.
 *
 * See: app/views/terminal/panels/_creator_studio_manual_tools.html.erb
 *      app/javascript/controllers/creator_studio_manual_tools_controller.js
 */

.cs-manual-tools {
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

/* ==========================================================================
 * Section toggle header
 * ========================================================================== */

.cs-manual-tools__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background-color 0.15s ease;
}

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

.cs-manual-tools__toggle-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-manual-tools__count {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  text-transform: none;
  letter-spacing: normal;
}

.cs-manual-tools__toggle-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.cs-manual-tools__toggle--expanded .cs-manual-tools__toggle-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
 * Section body
 * ========================================================================== */

.cs-manual-tools__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cs-manual-tools__body[hidden] {
  display: none;
}

/* ==========================================================================
 * Search input
 * ========================================================================== */

.cs-manual-tools__search {
  display: flex;
  flex-direction: column;
}

.cs-manual-tools__search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.cs-manual-tools__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 122, 162, 247), 0.15);
}

/* ==========================================================================
 * Recent-use chip row
 * ========================================================================== */

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

.cs-manual-tools__recent[hidden] {
  display: none;
}

.cs-manual-tools__recent-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

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

.cs-manual-tools__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-pill, 12px);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

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

/* ==========================================================================
 * Categories
 * ========================================================================== */

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

.cs-manual-tools__category {
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  overflow: hidden;
}

.cs-manual-tools__category[hidden] {
  display: none;
}

.cs-manual-tools__category-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__category-header:hover {
  background: var(--color-bg-tertiary);
}

.cs-manual-tools__category-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.cs-manual-tools__category--open .cs-manual-tools__category-chevron {
  transform: rotate(90deg);
}

.cs-manual-tools__category-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

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

.cs-manual-tools__category-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
}

.cs-manual-tools__category-body[hidden] {
  display: none;
}

/* ==========================================================================
 * Tool rows
 * ========================================================================== */

.cs-manual-tools__row {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.cs-manual-tools__row[hidden] {
  display: none;
}

.cs-manual-tools__row-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__row-header:hover,
.cs-manual-tools__row--open .cs-manual-tools__row-header {
  background: var(--color-bg-tertiary);
}

.cs-manual-tools__tool-name {
  flex-shrink: 0;
  font-family: var(--font-family-mono, monospace);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.cs-manual-tools__tool-desc {
  flex: 1;
  min-width: 0;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-manual-tools__row-body {
  padding: var(--space-2) var(--space-3);
  border-top: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-manual-tools__row-body[hidden] {
  display: none;
}

.cs-manual-tools__tool-desc-full {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.cs-manual-tools__row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-manual-tools__run-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-manual-tools__run-btn:hover,
.cs-manual-tools__run-btn:focus {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  outline: none;
}

.cs-manual-tools__run-btn:disabled,
.cs-manual-tools__run-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text-muted);
}

.cs-manual-tools__pending-notice {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ==========================================================================
 * Schema-driven parameter form (#2958)
 * Mounted inline in the tool row body when `Run` is activated.
 * ========================================================================== */

.cs-manual-tools__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
  border-top: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.05));
}

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

.cs-manual-tools__form-empty {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.cs-manual-tools__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-field--dryrun {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
}

.cs-manual-tools__form-label {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
}

.cs-manual-tools__form-required {
  color: var(--color-accent-warning, #ffb86b);
  font-weight: var(--font-weight-bold);
}

.cs-manual-tools__form-hint {
  font-family: inherit;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.cs-manual-tools__form-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 122, 162, 247), 0.15);
}

.cs-manual-tools__form-input--checkbox {
  width: auto;
  margin: 0;
}

.cs-manual-tools__form-input--object {
  font-family: var(--font-family-mono, monospace);
  resize: vertical;
  min-height: 80px;
}

.cs-manual-tools__form-field--error .cs-manual-tools__form-input {
  border-color: var(--color-accent-danger, #ff5c5c);
  box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.15);
}

.cs-manual-tools__form-error {
  color: var(--color-accent-danger, #ff5c5c);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-error[hidden] {
  display: none;
}

.cs-manual-tools__form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-manual-tools__form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-primary, #7aa2f7);
  border: 1px solid var(--color-accent-primary, #7aa2f7);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cs-manual-tools__form-submit:hover {
  opacity: 0.9;
}

.cs-manual-tools__form-submit:disabled,
.cs-manual-tools__form-submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

.cs-manual-tools__form-banner {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-banner[hidden] {
  display: none;
}

.cs-manual-tools__form-banner--error {
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid rgba(255, 92, 92, 0.3);
  color: var(--color-accent-danger, #ff5c5c);
}

.cs-manual-tools__form-banner--success {
  background: rgba(122, 162, 247, 0.08);
  border: 1px solid rgba(122, 162, 247, 0.25);
  color: var(--color-accent-primary, #7aa2f7);
}

.cs-manual-tools__form-result {
  margin: 0;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.cs-manual-tools__form-result[hidden] {
  display: none;
}

/* ==========================================================================
 * Destructive-tool preview panel (#2959)
 * Rendered inline when a destructive tool's first submit returns a preview
 * payload. Replaces the submit action row until Confirm or Cancel fires.
 * ========================================================================== */

.cs-manual-tools__row--destructive .cs-manual-tools__tool-name {
  color: var(--color-accent-warning, #ffb86b);
}

.cs-manual-tools__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: rgba(255, 184, 107, 0.08);
  border: 1px solid rgba(255, 184, 107, 0.35);
  border-radius: var(--radius-sm);
}

.cs-manual-tools__preview-heading {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning, #ffb86b);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-manual-tools__preview-summary {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.cs-manual-tools__preview-affected {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-manual-tools__preview-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
}

.cs-manual-tools__preview-affected code {
  font-family: var(--font-family-mono, monospace);
  color: var(--color-accent-primary, #7aa2f7);
}

.cs-manual-tools__preview-reversible {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.cs-manual-tools__preview-irreversible {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-accent-danger, #ff5c5c);
  font-weight: var(--font-weight-bold);
}

.cs-manual-tools__preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.cs-manual-tools__preview-confirm {
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-warning, #ffb86b);
  border: 1px solid var(--color-accent-warning, #ffb86b);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cs-manual-tools__preview-confirm:hover,
.cs-manual-tools__preview-confirm:focus {
  opacity: 0.9;
  outline: none;
}

.cs-manual-tools__preview-confirm:disabled,
.cs-manual-tools__preview-confirm[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

.cs-manual-tools__preview-cancel {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__preview-cancel:hover,
.cs-manual-tools__preview-cancel:focus {
  background: var(--color-bg-tertiary);
  outline: none;
}

.cs-manual-tools__preview-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
 * Empty-state (no search matches)
 * ========================================================================== */

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

.cs-manual-tools__empty[hidden] {
  display: none;
}
/* Content Icon Slot — image-flywheel Phase 2 (#3994)
 * Click-to-generate placeholder + rendered icon container, used on
 * Item / Spell / Monster cards that lack a canonical :icon attachment.
 */

.content-icon-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  position: relative;
}

.content-icon-slot__image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  overflow: hidden;
}

.content-icon-slot--sm .content-icon-slot__image {
  width: 32px;
  height: 32px;
}

.content-icon-slot--md .content-icon-slot__image {
  width: 64px;
  height: 64px;
}

.content-icon-slot--lg .content-icon-slot__image {
  width: 128px;
  height: 128px;
}

.content-icon-slot__img,
.content-icon-slot__image .content-icon-generator__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When an icon image is present, the dashed placeholder border is irrelevant. */
.content-icon-slot__image:has(img) {
  border-style: solid;
  border-color: var(--color-border, rgba(255, 255, 255, 0.25));
  background: transparent;
}

.content-icon-slot__generate-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--spacing-2xs, 2px);
  background: transparent;
  border: none;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  font-size: var(--font-size-xs, 11px);
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.content-icon-slot__generate-btn:hover:not([disabled]),
.content-icon-slot__generate-btn:focus-visible:not([disabled]) {
  background: var(--color-surface-3, rgba(255, 255, 255, 0.08));
  color: var(--color-text, rgba(255, 255, 255, 0.92));
  outline: none;
}

.content-icon-slot__generate-btn[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.content-icon-slot__generate-btn[aria-busy="true"] {
  animation: content-icon-slot-pulse 1.4s ease-in-out infinite;
}

.content-icon-slot__generate-icon {
  font-size: 1.6em;
  font-weight: 600;
  line-height: 0.9;
}

.content-icon-slot--sm .content-icon-slot__generate-label {
  display: none;
}

.content-icon-slot__status {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  text-align: center;
  min-height: 1em;
  max-width: 16ch;
}

.content-icon-slot__status[data-state="error"] {
  color: var(--color-danger, #ff6b6b);
}

.content-icon-slot__status[data-state="rate-limited"] {
  color: var(--color-warning, #f5b942);
}

.content-icon-slot__status[data-state="pending"] {
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  font-style: italic;
}

@keyframes content-icon-slot-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .content-icon-slot__generate-btn[aria-busy="true"] {
    animation: none;
  }
}
/**
 * Surface Category Primitives — CONTAINER-IDENTITY scaffolding (#4230)
 * ====================================================================
 * Six `.surface-*` classes that declare which container family a partial
 * belongs to. Each derives its base visual treatment from existing tokens
 * (`--color-bg-*`, `--color-border-*`, `--shadow-*`, `--radius-*`,
 * `--space-*`). No new color values.
 *
 * This is ADDITIVE on top of existing atomic CSS. The classes establish a
 * minimal, predictable baseline so that a future CONTAINER-IDENTITY
 * pre-commit ratchet can require every panel root to declare its category.
 * Specific component classes (`.inventory`, `.spellbook`, `.lobby-modal`,
 * etc.) continue to layer their bespoke styling on top — this layer is the
 * lowest-specificity background, border, and radius default.
 *
 * Zero-specificity contract (#4307 regression fix):
 *   Every selector below is wrapped in `:where(.surface-foo)` so it
 *   evaluates as specificity (0,0,0). ANY concrete single-class selector
 *   (e.g. `.status-bar`, `.inventory`) automatically wins regardless of
 *   source order. This is the canonical CSS pattern for "low-priority
 *   default" and was the original design intent of this file. The first
 *   shipped version (commit ff99128ca) used bare `.surface-*` selectors
 *   which had specificity (0,1,0) — equal to organism roots — and the
 *   later import order silently overrode `.status-bar` (#4307).
 *
 * Categories:
 *   .surface-chat-content   — chat / dialogue / narration scrollback
 *   .surface-panel          — full-width panel body (inventory, party, map)
 *   .surface-floating-panel — modal / drawer / floating overlay panel
 *   .surface-overlay        — full-screen overlay (input-blocked, scene)
 *   .surface-lobby-card     — lobby / landing card surface
 *   .surface-status-zone    — status bar / breadcrumb / chrome surface
 *
 * Visual regression: zero. Concrete component / organism classes have
 * specificity ≥ (0,1,0); the `:where()`-wrapped surface primitives have
 * specificity (0,0,0). The primitives only show through where the
 * concrete class leaves a property unset.
 */

/* Chat / dialogue / narration containers. Slight inset to match the
 * narrative reading pane's calm aesthetic. */
:where(.surface-chat-content) {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--narrative-padding);
  line-height: var(--line-height-narrative);
  box-shadow: var(--elevation-base);
}

/* Full-width panel body (inventory, party, dungeon map, quests, etc.).
 * The dominant in-grid container family. */
:where(.surface-panel) {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--panel-padding);
  box-shadow: var(--elevation-raised);
}

/* Floating / modal / drawer panels. Elevated above panel grid; uses the
 * floating elevation token so dimming/shadow stays consistent with
 * `.floating-panel`'s established treatment. */
:where(.surface-floating-panel) {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-floating);
}

/* Full-screen overlays (input-blocked, scene-transition, modal backdrops).
 * Spans the viewport with a translucent dim so underlying content remains
 * visible but de-emphasized. */
:where(.surface-overlay) {
  position: fixed;
  inset: 0;
  background: var(--overlay-darker);
  color: var(--color-text-primary);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lobby / landing card surfaces. Slightly elevated background to suggest
 * a Battle.net-style card on the lobby canvas. */
:where(.surface-lobby-card) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elevation-raised);
}

/* Status bar / breadcrumb / chrome surfaces. Compact horizontal strip
 * along the top/bottom of the viewport. */
:where(.surface-status-zone) {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--status-bar-padding);
  font-size: var(--font-size-sm);
}
.admin-floating-widget {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: var(--z-notification, 1100);
  width: 288px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #4a9eff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  font-size: var(--font-size-sm, 0.75rem);
}

.admin-floating-widget[data-state="open"] {
  display: flex;
}

/* ── Header ── */

.admin-floating-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-default, #333);
  background: rgba(74, 158, 255, 0.08);
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}

.admin-floating-widget__title {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-primary, #4a9eff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

.admin-floating-widget__close {
  background: none;
  border: none;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.admin-floating-widget__close:hover {
  color: var(--color-text-primary, #fff);
}

/* ── Stat tiles grid ── */

.admin-floating-widget__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border-default, #333);
  border-bottom: 1px solid var(--color-border-default, #333);
}

.admin-floating-widget__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  background: var(--color-bg-secondary, #1a1a2e);
}

.admin-floating-widget__tile-label {
  color: var(--color-text-secondary, #888);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-floating-widget__tile-value {
  color: var(--color-text-primary, #fff);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

/* ── Action buttons ── */

.admin-floating-widget__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.admin-floating-widget__btn {
  width: 100%;
  padding: 6px 10px;
  background: rgba(74, 158, 255, 0.08);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent-primary, #4a9eff);
  cursor: pointer;
  font-size: 0.7rem;
  text-align: center;
  transition: background 0.15s ease;
}

.admin-floating-widget__btn:hover {
  background: rgba(74, 158, 255, 0.18);
}

.admin-floating-widget__btn--danger {
  border-color: rgba(255, 80, 80, 0.4);
  color: var(--bio-accent-danger, #ff5050);
  background: rgba(255, 80, 80, 0.06);
}

.admin-floating-widget__btn--danger:hover {
  background: rgba(255, 80, 80, 0.14);
}
/*
 * Admin HUD Overlay (Slice 1, task #3458; refined #4219)
 * =======================================
 * HUD that literally "descends from the status bar" — the overlay's
 * top edge is anchored to var(--status-bar-height) so the slide
 * animation originates beneath the status bar (the status bar
 * remains visible above the HUD at all times). Z-index sits at
 * --z-overlay (200) so it covers narrative and grid panels but
 * stays UNDER popped-out floating panels (--z-floating: 1000) per
 * the JP reframe: popped panels remain visible during HUD open and
 * after close.
 *
 * Hidden-by-default contract: the HUD partial sets data-state="closed"
 * server-side; CSS uses transform + opacity + pointer-events to keep
 * the element off-canvas without removing it from the document
 * (so the Stimulus controller's listeners stay alive).
 */

.admin-hud {
  position: fixed;
  /* Anchor below the status bar so the slide originates from beneath it. */
  top: var(--status-bar-height, 48px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-overlay, 200);
  pointer-events: none; /* lets clicks fall through when closed */
}

.admin-hud[data-state="open"] {
  pointer-events: auto;
}

/* ── Backdrop ─────────────────────────────────────────────────── */

.admin-hud__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.admin-hud[data-state="open"] .admin-hud__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel (descends from status bar) ─────────────────────────── */

.admin-hud__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #0d0d1a);
  border-bottom: 2px solid var(--color-accent-primary, #4a9eff);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.7);
  transform: translateY(-100%);
  transition: transform 240ms ease-out;
  pointer-events: none;
}

.admin-hud[data-state="open"] .admin-hud__panel {
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Header ───────────────────────────────────────────────────── */

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

.admin-hud__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-primary, #4a9eff);
}

.admin-hud__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-hud__close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 10px;
  border-radius: var(--radius-sm, 4px);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-hud__close:hover,
.admin-hud__close:focus-visible {
  color: var(--color-text-primary, #fff);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-default, #333);
  outline: none;
}

/* ── Slot grid ────────────────────────────────────────────────── */

.admin-hud__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px 16px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-gutter: stable;
}

.admin-hud__slot {
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile: HUD is intentionally heavy; allow it but stack to one column. */
@media (max-width: 768px) {
  .admin-hud__slots {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }
}
/**
 * Pipeline Progress — Merged into DM Responding Bar
 * ==================================================
 * Transient transcript that replaces the silent "AI is thinking..." spinner
 * with legible per-stage lines (Classifying intent..., Reasoning..., Composing
 * narrative..., Done.).
 *
 * Container identity: surface-chat-content (CONTAINER-IDENTITY).
 *
 * Merged layout: #pipeline-progress-host is moved at runtime (by
 * loading_state_manager.ts) from #dm-responding-bar-host into the
 * #dm-responding-bar element itself, so the step list renders within the
 * purple surface rather than as a separate dark-gray popover above it.
 * No absolute positioning needed — it flows below the status row as a normal
 * block child of the bar's flex column.
 *
 * #4390: Default state is COLLAPSED — the step list is hidden until an
 * operation exceeds the min display threshold or the user clicks the header.
 *
 * Visual language is intentionally calm — no glowing animation, no spinner.
 */

.pipeline-progress-host {
  /* Flows inline within .dm-responding-bar (flex column). No absolute
     positioning — the bar's purple border wraps both the status row and
     the step list. surface-chat-content class is removed at render time
     because the bar provides the surface styling. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  max-height: 40vh;
}

.pipeline-progress-host[hidden] {
  display: none;
}

/* When the progress host lives inside .dm-responding-bar (merged layout),
   hide the redundant "DM is working" header row — the bar's own status row
   already carries the title and animated dots. Only the step entries show. */
.dm-responding-bar .pipeline-progress__header {
  display: none;
}

/* Inside the bar, add a subtle top separator before the step list so it
   reads as a secondary section below the status row. */
.dm-responding-bar .pipeline-progress-host:not([hidden]) {
  border-top: 1px solid rgba(168, 85, 247, 0.25);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
}

/* Inside the bar, always expand the step list (no collapse toggle needed —
   the header/toggle is hidden). This matches JP's request: steps visible
   inside the purple surface without a separate expand gesture.
   `!important` is needed to override the UA-stylesheet display:none that
   the `hidden` HTML attribute applies via the browser default. */
.dm-responding-bar .pipeline-progress--active .pipeline-progress__entries {
  display: flex !important;
}

.pipeline-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #aaa);
  letter-spacing: 0.02em;
  /* #4390: make the full header row a click target so users can tap anywhere
     on the pill to expand/collapse, not just the small toggle button. */
  cursor: pointer;
  user-select: none;
}

.pipeline-progress__header:hover {
  color: var(--color-text-primary, #fff);
}

.pipeline-progress__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pipeline-progress__title::before {
  /* Pulsing dot indicates the pipeline is active; pure CSS so no JS lifecycle
     to manage. Removed automatically when host is hidden. */
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary, #a855f7);
  animation: pipelineProgressPulse 1.4s ease-in-out infinite;
}

.pipeline-progress__toggle {
  background: transparent;
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-sm, 4px);
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  padding: 0 var(--space-2, 8px);
  line-height: 1.4;
  min-height: 22px;
}

.pipeline-progress__toggle:hover,
.pipeline-progress__toggle:focus-visible {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  outline: none;
}

.pipeline-progress__entries {
  list-style: none;
  margin: 0;
  padding: var(--space-2, 8px) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  overflow-y: auto;
  max-height: 32vh;
}

.pipeline-progress__entries[hidden] {
  display: none;
}

.pipeline-progress__entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-family: var(--font-family-mono, monospace);
  line-height: 1.4;
  padding: 2px var(--space-1, 4px);
}

.pipeline-progress__icon {
  width: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary, #888);
}

.pipeline-progress__entry[data-state="running"] .pipeline-progress__icon::before {
  content: '·';
  animation: pipelineProgressDot 1s ease-in-out infinite;
  color: var(--color-accent-primary, #a855f7);
}

.pipeline-progress__entry[data-state="completed"] .pipeline-progress__icon::before {
  content: '✓';
  color: var(--color-success, #4ade80);
}

.pipeline-progress__entry[data-state="error"] .pipeline-progress__icon::before {
  content: '✗';
  color: var(--color-danger, #f87171);
}

.pipeline-progress__label {
  color: var(--color-text-primary, #fff);
}

.pipeline-progress__entry[data-state="running"] .pipeline-progress__label {
  color: var(--color-text-secondary, #ccc);
}

.pipeline-progress__entry[data-state="error"] .pipeline-progress__label {
  color: var(--color-danger, #f87171);
}

.pipeline-progress__detail {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.pipeline-progress__duration {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@keyframes pipelineProgressPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.0); }
}

@keyframes pipelineProgressDot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}

/* Accessibility: respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .pipeline-progress__title::before,
  .pipeline-progress__entry[data-state="running"] .pipeline-progress__icon::before {
    animation: none;
  }
}

/* Mobile: smaller font and capped step-list height inside the bar. */
@media (max-width: 640px) {
  .pipeline-progress-host {
    font-size: var(--font-size-xs, 0.75rem);
  }

  .pipeline-progress__entries {
    max-height: 24vh;
  }
}
/*
 * Clarification Modal - Socratic Clarification UI
 * ================================================
 * Displays when player input is ambiguous (confidence < 0.65).
 * Presents 2-3 clarification options instead of guessing.
 *
 * Features:
 * - Keyboard shortcuts (1-9 for options, Escape to cancel)
 * - Touch-friendly on mobile
 * - Auto-hides after selection
 * - Confidence percentage badges
 */

/* ========================================
 * BACKDROP
 * ======================================== */

.clarification-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal, 1000);
  animation: clarification-backdrop-enter 0.2s ease-out;
}

.clarification-backdrop.hidden {
  display: none;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.clarification-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content, 1001);
  max-width: 480px;
  width: calc(100% - var(--space-8, 2rem));
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.2);
  animation: clarification-modal-enter 0.2s ease-out;
  overflow: hidden;
}

.clarification-modal.hidden {
  display: none;
}

/* ========================================
 * HEADER / MESSAGE
 * ======================================== */

.clarification-header {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-bottom: 1px solid var(--color-border-default, #444);
}

.clarification-message {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-md, 0.9375rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  margin: 0;
}

/* ========================================
 * OPTIONS CONTAINER
 * ======================================== */

.clarification-options {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ========================================
 * OPTION BUTTONS
 * ======================================== */

.clarification-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
  background: var(--color-bg-tertiary, #282840);
  border: 1px solid var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.clarification-option:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
              0 0 12px rgba(97, 175, 239, 0.15);
}

.clarification-option:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.clarification-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* ========================================
 * OPTION HEADER
 * ======================================== */

.option-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.option-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  border-radius: var(--radius-full, 50%);
  flex-shrink: 0;
}

.option-description {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  flex: 1;
}

/* ========================================
 * CONFIDENCE BADGE
 * ======================================== */

.option-confidence {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding-left: calc(24px + var(--space-3, 0.75rem));
}

/* ========================================
 * CANCEL SECTION
 * ======================================== */

.clarification-cancel {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #333);
  background: var(--color-bg-secondary, #2a2a3e);
}

.clarification-cancel-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: transparent;
  border: 1px dashed var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.clarification-cancel-button:hover {
  border-color: var(--color-text-secondary, #aaa);
  border-style: solid;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary, #e0e0e0);
}

.clarification-cancel-button:focus-visible {
  outline: 2px solid var(--color-text-secondary, #aaa);
  outline-offset: 2px;
}

.cancel-text {
  font-weight: var(--font-weight-medium, 500);
}

.cancel-hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: var(--color-bg-tertiary, #282840);
  border-radius: var(--radius-sm, 3px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes clarification-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

@keyframes clarification-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
 * RESPONSIVE - MOBILE
 * ======================================== */

@media (max-width: 640px) {
  .clarification-modal {
    max-width: calc(100% - var(--space-4, 1rem));
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: clarification-modal-enter-mobile 0.25s ease-out;
  }

  .clarification-header,
  .clarification-options,
  .clarification-cancel {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }

  .clarification-option {
    padding: var(--space-4, 1rem);
    /* Larger tap targets on mobile */
    min-height: 64px;
  }

  .option-number {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm, 0.875rem);
  }

  .option-description {
    font-size: var(--font-size-md, 0.9375rem);
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========================================
 * RESPONSIVE - TABLET
 * ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  .clarification-modal {
    max-width: 520px;
  }
}

/* ========================================
 * TOUCH DEVICES
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  .clarification-option {
    /* Disable hover transform on touch devices to prevent flicker */
    transform: none;
  }

  .clarification-option:active {
    background: rgba(97, 175, 239, 0.15);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .clarification-modal {
    animation: none;
  }

  .clarification-backdrop {
    animation: none;
  }

  .clarification-option {
    transition: none;
  }

  .clarification-option:hover {
    transform: none;
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

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

@media (prefers-color-scheme: dark) {
  .clarification-modal {
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.7)),
                0 0 40px rgba(97, 175, 239, 0.25);
  }

  .clarification-option:hover {
    background: rgba(97, 175, 239, 0.12);
  }
}
/*
 * Pane Tab Strip
 * ==============
 * Visual treatment for the merged-pane tab strip primitive
 * (lib/pane_tab_strip.ts). Companion to umbrella #3878 panel-flexibility,
 * activated when phase 4 (#3876) drop-onto-header center-zone merges
 * multiple panels into one pane.
 *
 * Conventions reused from _room_tab_menu.css so the merged-pane strip and
 * the existing room-tab strip feel of-a-piece. Notable difference: tabs
 * here are >=44x44 unconditionally (touch-target minimum), since merged
 * panes can appear inside floating layers where the desktop sub-44 size
 * isn't ergonomic.
 */

.pane-tab-strip {
  --pane-tab-bg: var(--surface-darker, #0a0a0a);
  --pane-tab-border: var(--surface-border, rgba(255, 255, 255, 0.1));
  --pane-tab-inactive: var(--text-muted, rgba(255, 255, 255, 0.5));
  --pane-tab-hover: var(--text-secondary, rgba(255, 255, 255, 0.8));
  --pane-tab-active: var(--accent-gold, #d4af37);
  --pane-tab-min-size: 44px;

  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  background: var(--pane-tab-bg);
  border-bottom: 1px solid var(--pane-tab-border);
  z-index: var(--z-sticky, 10);
  /* Allow horizontal scrolling when many panels are merged into one pane. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.pane-tab-strip::-webkit-scrollbar {
  height: 4px;
}

.pane-tab-strip::-webkit-scrollbar-thumb {
  background: var(--pane-tab-border);
  border-radius: 2px;
}

/* Tab Button */
.pane-tab-strip__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--pane-tab-min-size);
  min-height: var(--pane-tab-min-size);
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--pane-tab-inactive);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pane-tab-strip__tab:hover {
  color: var(--pane-tab-hover);
  background: rgba(255, 255, 255, 0.05);
}

.pane-tab-strip__tab:focus-visible {
  outline: 2px solid var(--pane-tab-active);
  outline-offset: 2px;
}

.pane-tab-strip__tab--active {
  color: var(--pane-tab-active);
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
}

.pane-tab-strip__tab--active:hover {
  color: var(--pane-tab-active);
  background: rgba(212, 175, 55, 0.14);
}

/* Active tab indicator strip along bottom edge. */
.pane-tab-strip__tab--active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--pane-tab-active);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

/* Icon */
.pane-tab-strip__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.pane-tab-strip__tab-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* Label — visible alongside icon when there's room, otherwise hidden
 * (icon-only with aria-label / title carrying the name). */
.pane-tab-strip__tab-label {
  margin-left: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Compact variant: hide labels (icon + tooltip pattern, like room-tab-menu). */
.pane-tab-strip--compact .pane-tab-strip__tab-label {
  display: none;
}

/* Mobile: enforce >=44x44 hit targets even on the compact variant, keep
 * labels visible because tooltips are unreliable on touch. */
@media (max-width: 768px) {
  .pane-tab-strip {
    padding: 0.25rem;
    gap: 0.125rem;
  }

  .pane-tab-strip__tab {
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
  }

  .pane-tab-strip__tab-label {
    display: inline;
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .pane-tab-strip__tab-label {
    /* On the smallest screens, show only icons (more tabs visible) but
     * keep aria-label / title for accessibility. */
    display: none;
  }
}
/* ========================================
 * PANE DROP PREVIEW (Phase 4, #3876)
 *
 * Five-zone drop-target overlay shown during panel drag. Painted on top of
 * the layout but never captures pointer events — pointer-events: none is
 * load-bearing so the underlying mousemove keeps firing on the layout.
 *
 * Sizing/positioning is set inline by JS each frame. CSS here only handles
 * the *visual* treatment (color, border, transitions).
 * ======================================== */

.pane-drop-preview {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-overlay, 1000);
  /* Subtle terminal-aesthetic green tint, matching --color-accent-secondary. */
  background-color: rgba(164, 214, 130, 0.18);
  border: 1px dashed var(--color-accent-secondary, #a4d682);
  box-sizing: border-box;
  /* Animate position/size changes between zone switches so the overlay
     glides instead of teleporting when the cursor crosses a zone boundary. */
  transition:
    left 90ms ease-out,
    top 90ms ease-out,
    width 90ms ease-out,
    height 90ms ease-out,
    background-color 120ms ease-out;
  display: none;
}

.pane-drop-preview[data-visible="true"] {
  display: block;
}

/* Per-zone variant emphasis: a thicker, fully-opaque accent border on the
   side of the pane the panel will dock against, mirroring iTerm2's visual
   language. The translucent fill stays subtle. */

.pane-drop-preview[data-zone="top"] {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="bottom"] {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="left"] {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="right"] {
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: var(--color-accent-secondary, #a4d682);
}

/* Center (tab-merge / dock-to-center) uses a fully-dashed border on all sides
   plus a slightly stronger fill to distinguish it from the half-pane variants. */
.pane-drop-preview[data-zone="center"] {
  background-color: rgba(164, 214, 130, 0.22);
  border: 2px dashed var(--color-accent-secondary, #a4d682);
}

/* Occupied-slot replace signal (#4475):
   When a center-zone drop would displace an existing panel (replace + pop-out),
   the overlay switches to an amber warning palette and shows a "REPLACE" label
   via ::after. This gives the user a predictable signal before releasing.
   The canonical behavior is: incoming panel replaces the target, displaced
   panel pops out to floating with a toast notification. */
.pane-drop-preview[data-zone="center"][data-outcome="replace"] {
  background-color: rgba(214, 163, 64, 0.22);
  border: 2px solid var(--color-warning, #d6a340);
  position: relative;
}

.pane-drop-preview[data-zone="center"][data-outcome="replace"]::after {
  content: "REPLACE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-warning, #d6a340);
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}

/* Reduced-motion: skip the glide transition, snap immediately. */
@media (prefers-reduced-motion: reduce) {
  .pane-drop-preview {
    transition: none;
  }
}
/**
 * Section Component
 * =================
 * Shared section header and title styles used across panels.
 * Consolidates duplicate .section-header and .section-title definitions
 * from 9+ organism files into a single mobile-first source of truth.
 *
 * Usage:
 *   <div class="section-header">
 *     <span class="section-toggle-icon">...</span>
 *     <h3 class="section-title">Section Name</h3>
 *     <span class="section-count">3</span>
 *   </div>
 */

/* ============================================================================
   Section Header - clickable/collapsible container
   ============================================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px; /* Touch target */
  background: var(--color-bg-tertiary);
  user-select: none;
}

/* Interactive section headers (collapsible) */
.section-header--interactive {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.section-header--interactive:hover {
  background: var(--color-bg-hover);
}

.section-header--interactive:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

/* Warning variant */
.section-header--warning {
  color: var(--color-accent-warning);
}

/* Section header description text */
.section-header .section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Desktop: compact headers */
@media (min-width: 1024px) {
  .section-header {
    min-height: auto;
    padding: var(--space-1-5) var(--space-3);
  }
}

/* ============================================================================
   Section Title - heading text within sections
   ============================================================================

   Note: Base .section-title is defined in atoms/_atoms.css (line 467).
   This file provides additional section title variants and context modifiers.
   Organisms should scope overrides via their parent class, e.g.:
     .my-panel .section-title { color: var(--color-accent-cyan); }
*/

/* Section title inside a section-header */
.section-header .section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
  flex: 1;
}

/* Toggle icon for collapsible sections */
.section-toggle-icon {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Section count badge */
.section-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  min-width: 1.5rem;
  text-align: center;
}

/* ============================================================================
   Section Heading - larger heading variant
   ============================================================================ */

.section-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .section-header--interactive,
  .section-toggle-icon {
    transition: none;
  }
}
/**
 * Condition Badge Component
 * =========================
 * D&D 5e condition status badges with type-specific color coding.
 * Consolidates duplicate .condition-badge definitions from 5+ organism files.
 *
 * Usage:
 *   <span class="condition-badge condition-badge--poisoned">
 *     <span class="condition-badge__icon">...</span>
 *     <span class="condition-badge__name">Poisoned</span>
 *   </span>
 */

/* ============================================================================
   Base Condition Badge
   ============================================================================ */

.condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 12px;
  background: var(--color-bg-elevated, #1a1a1a);
  border: 1px solid var(--color-border-default, #333);
  color: var(--color-text-secondary, #999);
  min-height: 24px; /* Touch-friendly even at small size */
}

.condition-badge__icon {
  font-size: 0.875rem;
  line-height: 1;
}

.condition-badge__name {
  line-height: 1;
}

/* Interactive badges (hoverable in combat tracker, etc.) */
.condition-badge--interactive {
  cursor: help;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.condition-badge--interactive:hover,
.condition-badge--interactive:focus {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Duration indicator */
.condition-badge .condition-duration {
  font-size: 0.625rem;
  opacity: 0.8;
  margin-left: 0.125rem;
}

/* Enter animation */
@keyframes condition-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.condition-badge--entering {
  animation: condition-enter 0.2s ease-out;
}

/* ============================================================================
   Condition Type Colors
   ============================================================================ */

.condition-badge--poisoned {
  background: rgba(139, 195, 74, 0.15);
  border-color: #8bc34a;
  color: #aed581;
}

.condition-badge--stunned {
  background: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
  color: #ffd54f;
}

.condition-badge--paralyzed {
  background: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
  color: #ef5350;
}

.condition-badge--concentrating {
  background: rgba(33, 150, 243, 0.15);
  border-color: #2196f3;
  color: #64b5f6;
}

.condition-badge--blessed {
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
  color: #ffeb3b;
}

.condition-badge--prone {
  background: rgba(158, 158, 158, 0.15);
  border-color: #9e9e9e;
  color: #bdbdbd;
}

.condition-badge--blinded {
  background: rgba(75, 85, 99, 0.4);
  border-color: #6b7280;
  color: #d1d5db;
}

.condition-badge--frightened {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #c4b5fd;
}

.condition-badge--charmed {
  background: rgba(244, 114, 182, 0.15);
  border-color: #f472b6;
  color: #f9a8d4;
}

.condition-badge--restrained {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #fde047;
}

.condition-badge--incapacitated {
  background: rgba(107, 114, 128, 0.3);
  border-color: #6b7280;
  color: #9ca3af;
}

.condition-badge--invisible {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #a5b4fc;
  border-style: dashed;
}

.condition-badge--deafened {
  background: rgba(156, 163, 175, 0.15);
  border-color: #9ca3af;
  color: #d1d5db;
}

.condition-badge--grappled {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

.condition-badge--petrified {
  background: rgba(120, 113, 108, 0.25);
  border-color: #78716c;
  color: #a8a29e;
}

/* ============================================================================
   Desktop: More compact badges
   ============================================================================ */

@media (min-width: 1024px) {
  .condition-badge {
    min-height: auto;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .condition-badge--entering {
    animation: none;
  }

  .condition-badge--interactive {
    transition: none;
  }
}
/**
 * Card Component
 * ==============
 * Shared card container for creation cards, quest cards, item cards, NPC cards.
 * Mobile-first with touch-friendly sizing.
 *
 * Usage:
 *   <div class="card card--selectable">
 *     <div class="card__header">...</div>
 *     <div class="card__body">...</div>
 *     <div class="card__footer">...</div>
 *   </div>
 */

/* ============================================================================
   Base Card
   ============================================================================ */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* ============================================================================
   Card Sections
   ============================================================================ */

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.card__body {
  padding: var(--space-3) var(--space-4);
  flex: 1;
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-xl);
}

/* ============================================================================
   Selectable Card (interactive)
   ============================================================================ */

.card--selectable {
  cursor: pointer;
  min-height: 48px; /* Touch target */
}

.card--selectable:hover {
  border-color: var(--color-border-focus);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ============================================================================
   Selected Card
   ============================================================================ */

.card--selected {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary),
              0 2px 8px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

/* ============================================================================
   Disabled Card
   ============================================================================ */

.card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* ============================================================================
   Card Accent Variants (left border color)
   ============================================================================ */

.card--accent-primary {
  border-left: 3px solid var(--color-accent-primary);
}

.card--accent-success {
  border-left: 3px solid var(--color-accent-secondary);
}

.card--accent-warning {
  border-left: 3px solid var(--color-accent-warning);
}

.card--accent-danger {
  border-left: 3px solid var(--color-accent-error);
}

.card--accent-magic {
  border-left: 3px solid var(--color-accent-purple);
}

/* ============================================================================
   Desktop: Grid-friendly cards with hover glow
   ============================================================================ */

@media (min-width: 1024px) {
  .card--selectable:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 1px var(--color-border-focus);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}
/**
 * List Component
 * ==============
 * Shared list and list-item styles for menu items, option lists,
 * spell lists, inventory rows, etc.
 * Mobile-first with 48px minimum touch targets.
 *
 * Usage:
 *   <ul class="list">
 *     <li class="list-item list-item--selectable">
 *       <span class="list-item__icon">...</span>
 *       <span class="list-item__content">
 *         <span class="list-item__title">Item Name</span>
 *         <span class="list-item__subtitle">Description</span>
 *       </span>
 *       <span class="list-item__trailing">...</span>
 *     </li>
 *   </ul>
 */

/* ============================================================================
   Base List
   ============================================================================ */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Bordered variant - dividers between items */
.list--bordered .list-item + .list-item {
  border-top: 1px solid var(--color-border-subtle);
}

/* Compact variant - less padding */
.list--compact .list-item {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
}

/* ============================================================================
   List Item
   ============================================================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: 48px; /* Touch target */
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================================================
   List Item Sections
   ============================================================================ */

.list-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  color: var(--color-text-muted);
}

.list-item__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ============================================================================
   Selectable List Items
   ============================================================================ */

.list-item--selectable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.list-item--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

/* ============================================================================
   Active List Item
   ============================================================================ */

.list-item--active {
  background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
  color: var(--color-accent-primary);
}

.list-item--active .list-item__icon {
  color: var(--color-accent-primary);
}

/* ============================================================================
   Disabled List Item
   ============================================================================ */

.list-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   Desktop: Compact rows
   ============================================================================ */

@media (min-width: 1024px) {
  .list-item {
    min-height: 36px;
    padding: var(--space-1-5) var(--space-3);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .list-item--selectable {
    transition: none;
  }
}
/* ==========================================================================
 * Roll Menu Component
 * Click dropdown for dice roll options with advantage/disadvantage
 * Matches the terminal D&D dark theme aesthetic
 * Mobile-friendly with 44px tap targets
 * ========================================================================== */

/* Rollable items indicator */
.rollable {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-sm);
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
}

.rollable:active {
  transform: scale(0.98);
}

/* Roll Action Menu Backdrop (click-outside-to-close) */
.cs-roll-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Roll Action Menu - Floating contextual menu */
.cs-roll-action-menu {
  position: fixed;
  min-width: 200px;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: rollMenuFadeIn 0.12s ease-out;
}

@keyframes rollMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Menu Header */
.cs-roll-action-menu-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-1)) 0 var(--space-1) 0;
}

/* Modifier badge in header */
.cs-roll-modifier-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
}

/* Roll Action Buttons */
.cs-roll-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px; /* Mobile-friendly tap target */
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.cs-roll-action-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.cs-roll-action-btn:active {
  transform: scale(0.98);
  background: rgba(97, 175, 239, 0.15);
}

/* Button icon (dice notation) */
.cs-roll-action-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* Advantage button styling */
.cs-roll-action-btn--advantage .cs-roll-action-btn-icon {
  color: var(--color-accent-secondary);
  border-color: rgba(152, 195, 121, 0.3);
}

.cs-roll-action-btn--advantage:hover {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-roll-action-btn--advantage:hover .cs-roll-action-btn-icon {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.4);
}

/* Disadvantage button styling */
.cs-roll-action-btn--disadvantage .cs-roll-action-btn-icon {
  color: var(--color-accent-error);
  border-color: rgba(224, 108, 117, 0.3);
}

.cs-roll-action-btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

.cs-roll-action-btn--disadvantage:hover .cs-roll-action-btn-icon {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.4);
}

/* Keyboard focus indicator */
.cs-roll-action-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: rgba(97, 175, 239, 0.1);
}

/* Separator between normal roll and adv/dis */
.cs-roll-action-btn--advantage {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: calc(var(--space-2) + var(--space-1));
}

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

  .cs-roll-action-btn {
    min-height: 48px; /* Slightly larger on mobile */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .rollable:active {
    transform: none;
  }

  .cs-roll-action-menu {
    animation: none;
  }

  @keyframes rollMenuFadeIn {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
}
/* ==========================================================================
 * Effects Display Component
 * Styles for active effects (buffs/debuffs) on character sheet and game log
 * ========================================================================== */

/* Game Log specific - ADV/DIS badges */
.gl-adv-badge,
.gl-dis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-adv-badge {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--accent-success, #4ade80);
}

.gl-dis-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-danger, #ef4444);
}

/* Game Log - Effects display row */
.gl-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.gl-effect-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(147, 112, 219, 0.15);
  border: 1px solid rgba(147, 112, 219, 0.3);
  border-radius: 4px;
  color: var(--accent-magic, #9370db);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Game Log - Modifier breakdown */
.gl-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.gl-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.gl-breakdown-source {
  color: var(--text-muted, #888);
}

.gl-breakdown-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.gl-breakdown-positive {
  color: var(--accent-success, #4ade80);
}

.gl-breakdown-negative {
  color: var(--accent-danger, #ef4444);
}

.gl-breakdown-dice {
  color: var(--accent-warning, #fbbf24);
}

/* Character Sheet - Active Effects Panel */
.cs-effects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-effects-empty {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: 8px 0;
}

.cs-effect-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: border-color 0.15s ease;
}

.cs-effect-item:hover {
  border-color: var(--accent-primary, #4a9eff);
}

.cs-effect-item.buff {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.cs-effect-item.debuff {
  border-left: 3px solid var(--accent-danger, #ef4444);
}

.cs-effect-item.concentration {
  border-left: 3px solid var(--accent-warning, #fbbf24);
}

.cs-effect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 4px;
  flex-shrink: 0;
}

.cs-effect-icon svg {
  width: 16px;
  height: 16px;
}

.cs-effect-content {
  flex: 1;
  min-width: 0;
}

.cs-effect-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.cs-effect-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary, #e0e0e0);
}

.cs-effect-conc-badge {
  padding: 1px 4px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
  text-transform: uppercase;
}

.cs-effect-source {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}

.cs-effect-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-xs);
}

.cs-effect-bonus {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(74, 158, 255, 0.1);
  border-radius: 3px;
  color: var(--accent-primary, #4a9eff);
  font-family: 'JetBrains Mono', monospace;
}

.cs-effect-duration {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 3px;
  color: var(--text-secondary, #888);
}

.cs-effect-affects {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(147, 112, 219, 0.1);
  border-radius: 3px;
  color: var(--accent-magic, #9370db);
}

/* Advantage/Disadvantage indicators on effects */
.cs-effect-advantage,
.cs-effect-disadvantage {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.cs-effect-advantage {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
}

.cs-effect-disadvantage {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .cs-effect-item {
    flex-direction: column;
    gap: 6px;
  }

  .cs-effect-icon {
    width: 24px;
    height: 24px;
  }

  .cs-effect-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
 * State Change Animations (Cross-Panel Synchronization)
 * Provides visual feedback when character state changes
 * ========================================================================== */

/* HP Bar state change animations */
.cs-hp-bar,
.cs-hp-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-hp-bar.hp-damaged,
.cs-hp-display.hp-damaged {
  animation: hp-damage-flash 1.5s ease;
}

.cs-hp-bar.hp-healed,
.cs-hp-display.hp-healed {
  animation: hp-heal-flash 1.5s ease;
}

@keyframes hp-damage-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  }
}

@keyframes hp-heal-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  }
}

/* Condition badge state change animations */
.cs-condition-badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-condition-badge.condition-added {
  animation: condition-appear 1.5s ease;
}

.cs-condition-badge.condition-pulse {
  animation: condition-pulse 2s ease;
}

@keyframes condition-appear {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  30% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes condition-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--accent-warning, #fbbf24);
  }
  50% {
    box-shadow: 0 0 10px 3px var(--accent-warning, #fbbf24);
  }
}

/* Exhaustion display animations */
.cs-exhaustion-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-exhaustion-display.exhaustion-increased {
  animation: exhaustion-increase 1.5s ease;
}

.cs-exhaustion-display.exhaustion-decreased {
  animation: exhaustion-decrease 1.5s ease;
}

@keyframes exhaustion-increase {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
}

@keyframes exhaustion-decrease {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
  }
}

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

/* No spell slots available */
.cs-spell-chip.no-slots:not(.cantrip),
.cs-spell-item.no-slots:not(.cantrip) {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}

/* ==========================================================================
 * Action Confirmation Animations
 * Visual feedback for successful/failed user actions
 * ========================================================================== */

.action-confirmed {
  animation: actionConfirmedPulse 0.5s ease-out;
}

.action-error {
  animation: actionErrorShake 0.5s ease-out;
}

@keyframes actionConfirmedPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

@keyframes actionErrorShake {
  0%, 100% {
    transform: translateX(0);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .action-confirmed,
  .action-error {
    animation: none;
  }

  .action-confirmed {
    outline: 2px solid rgba(74, 222, 128, 0.6);
    outline-offset: 2px;
  }

  .action-error {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
  }
}
/* ==========================================================================
 * Skill Check 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);
  }
}
/*
 * Reopen-panel button affordance (#3694)
 *
 * Rendered by app/javascript/lib/renderers/segment_renderer.ts when an
 * action segment's content matches a known panel placeholder
 * ("[Displayed character sheet]" etc.). Clicking re-routes through the
 * standard slash-command path so the panel reopens identically.
 *
 * Lives in its own file so app/assets/stylesheets/terminal/components/
 * _unified_renderer.css stays under the 1000 LOC cap.
 */

.unified-segment__content--reopen-panel {
  display: inline-block;
  background: transparent;
  border: 1px dashed var(--accent-primary, currentColor);
  color: var(--accent-primary, currentColor);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
}

.unified-segment__content--reopen-panel:hover,
.unified-segment__content--reopen-panel:focus-visible {
  background: var(--accent-primary-bg, rgba(255, 255, 255, 0.05));
  outline: none;
}
/**
 * Empty State Styles
 * ==================
 * Contextual empty state messages for panels with no content.
 * Provides helpful guidance rather than blank space.
 */

/* ============================================================================
   Base Empty State
   ============================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 12rem;
  animation: empty-state-fade-in 0.3s ease-out;
}

/* State-driven visibility (preferred over inline style mutations) */
.empty-state--hidden {
  display: none;
}

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .empty-state {
    animation: none;
  }
}

/* ============================================================================
   Icon
   ============================================================================ */

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--bg-tertiary, #252540);
  color: var(--text-muted, #888);
  opacity: 0.6;
}

.empty-state__icon svg {
  width: 2rem;
  height: 2rem;
}

/* ============================================================================
   Text Content
   ============================================================================ */

.empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  letter-spacing: -0.01em;
}

.empty-state__subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  max-width: 28ch;
  line-height: 1.5;
}

/* ============================================================================
   Hints List
   ============================================================================ */

.empty-state__hints {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: 24rem;
}

.empty-state__hint {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
  line-height: 1.4;
}

.empty-state__hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color, #8b5cf6);
  opacity: 0.5;
}

/* ============================================================================
   Action Button
   ============================================================================ */

.empty-state__action {
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--accent-color, #8b5cf6);
  background: transparent;
  color: var(--accent-color, #8b5cf6);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.empty-state__action:hover {
  background: var(--accent-color, #8b5cf6);
  color: var(--bg-primary, #0d0d1a);
}

.empty-state__action:focus-visible {
  outline: 2px solid var(--accent-color, #8b5cf6);
  outline-offset: 2px;
}

/* ============================================================================
   Welcome Variant
   ============================================================================ */

.empty-state--welcome {
  min-height: 16rem;
  padding: 2.5rem 2rem;
}

.empty-state--welcome .empty-state__title {
  font-size: 1.5rem;
  color: var(--accent-color, #8b5cf6);
}

.empty-state--welcome .empty-state__subtitle {
  max-width: 36ch;
  font-size: 1rem;
}

.empty-state__quick-start {
  width: 100%;
  max-width: 24rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  text-align: left;
}

.empty-state__quick-start h4 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

/* ============================================================================
   Container Utility
   ============================================================================ */

.has-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   Compact Variant (for smaller panels)
   ============================================================================ */

.empty-state--compact {
  padding: 1rem;
  min-height: 8rem;
}

.empty-state--compact .empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
}

.empty-state--compact .empty-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.empty-state--compact .empty-state__title {
  font-size: 0.9375rem;
}

.empty-state--compact .empty-state__subtitle {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

.empty-state--compact .empty-state__hints {
  display: none;
}

/* ============================================================================
   Inline Variant (for inline messages within panels)
   ============================================================================ */

.empty-state--inline {
  flex-direction: row;
  text-align: left;
  padding: 1rem;
  min-height: auto;
  gap: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.empty-state--inline .empty-state__icon {
  width: 2rem;
  height: 2rem;
  margin: 0;
  background: transparent;
}

.empty-state--inline .empty-state__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-state--inline .empty-state__title {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.empty-state--inline .empty-state__subtitle {
  font-size: 0.8125rem;
  margin: 0;
}

.empty-state--inline .empty-state__content {
  flex: 1;
}

/* ============================================================================
   Mobile Touch Target for Action Button
   ============================================================================ */

/* Mobile: ensure action button meets 44px touch target */
@media (max-width: 1023px) {
  .empty-state__action {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop: auto-width action button */
@media (min-width: 1024px) {
  .empty-state__action {
    width: auto;
  }
}
/**
 * Shortcuts Overlay Styles
 * ========================
 * Modal overlay for keyboard shortcuts reference.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.shortcuts-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.shortcuts-overlay--visible {
  opacity: 1;
}

.shortcuts-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.shortcuts-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.shortcuts-overlay--visible .shortcuts-modal {
  transform: scale(1) translateY(0);
}

.shortcuts-overlay--closing .shortcuts-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shortcuts-overlay,
  .shortcuts-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shortcuts-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.shortcuts-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

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

.shortcuts-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.shortcuts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.shortcuts-item__keys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.shortcuts-item__plus {
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  margin: 0 0.125rem;
}

.shortcuts-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.shortcuts-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__hint {
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

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

@media (max-width: 640px) {
  .shortcuts-modal {
    width: 95%;
    max-height: 90vh;
  }

  .shortcuts-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .shortcuts-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * F1 Contextual Help Overlay Styles
 * ==================================
 * Modal overlay for room-specific help content.
 * Triggered by F1 key anywhere in the app.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.f1-help-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.f1-help-overlay--visible {
  opacity: 1;
}

.f1-help-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.f1-help-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.f1-help-overlay--visible .f1-help-modal {
  transform: scale(1) translateY(0);
}

.f1-help-overlay--closing .f1-help-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f1-help-overlay,
  .f1-help-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.f1-help-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.f1-help-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.f1-help-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.f1-help-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.f1-help-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.f1-help-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Overview text at top */
.f1-help-modal__overview {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

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

.f1-help-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.f1-help-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Help Items (action + description)
   ============================================================================ */

.f1-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.f1-help-item__action {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-color, #8b5cf6);
  flex-shrink: 0;
}

.f1-help-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Tips Section
   ============================================================================ */

.f1-help-tips {
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  padding: 1rem;
}

.f1-help-tips .f1-help-section__title {
  color: var(--success-color, #4ade80);
}

.f1-help-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.f1-help-tips li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin-bottom: 0.25rem;
}

.f1-help-tips li:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   Footer
   ============================================================================ */

.f1-help-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.f1-help-modal__footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

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

@media (max-width: 640px) {
  .f1-help-modal {
    width: 95%;
    max-height: 90vh;
  }

  .f1-help-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .f1-help-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * Clipboard Component Styles
 * ==========================
 * Visual feedback for copy-to-clipboard actions.
 */

/* ========================================
 * COPY BUTTON
 * Styled copy button with icon
 * ======================================== */

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.copy-btn:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

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

.copy-btn__icon {
  font-size: 0.875rem;
}

/* ========================================
 * FEEDBACK STATES
 * Visual feedback when copy succeeds/fails
 * ======================================== */

.clipboard-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
  animation: clipboard-pulse 0.3s ease-out;
}

.clipboard-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
  animation: clipboard-shake 0.3s ease-out;
}

@keyframes clipboard-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes clipboard-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* ========================================
 * INLINE COPY ICON
 * Small icon that appears on hover
 * ======================================== */

.copyable {
  position: relative;
  cursor: pointer;
}

.copyable::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.copyable:hover::after {
  opacity: 0.6;
}

.copyable:active::after {
  opacity: 1;
}

/* ========================================
 * COPY TOOLTIP
 * Shows "Copied!" on successful copy
 * ======================================== */

.copy-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--color-success, #22c55e);
  color: white;
  font-size: 0.6875rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: copy-tooltip-enter 0.2s ease-out forwards;
}

.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-success, #22c55e);
}

@keyframes copy-tooltip-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ========================================
 * COPY CONTEXT MENU ITEM
 * Styled for context menus
 * ======================================== */

.context-menu__item--copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.context-menu__item--copy::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  font-size: 0.875rem;
}

/* ========================================
 * STAT BLOCK COPY
 * For copying character stats, spell info, etc.
 * ======================================== */

.stat-block-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.stat-block:hover .stat-block-copy {
  opacity: 1;
}

.stat-block-copy:hover {
  background: var(--terminal-bg, #0a0a0a);
  color: var(--terminal-text-primary, #e0e0e0);
}

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

@media (prefers-reduced-motion: reduce) {
  .clipboard-success,
  .clipboard-error {
    animation: none;
  }

  .copy-tooltip {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}
/**
 * Help Tooltip Styles
 * ===================
 * Styles for D&D glossary term tooltips.
 */

/* ========================================
 * TERM HIGHLIGHTING
 * ======================================== */

.help-term {
  position: relative;
  border-bottom: 1px dotted var(--color-primary, #4a90e2);
  color: inherit;
  cursor: help;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.help-term:hover,
.help-term:focus {
  border-bottom-style: solid;
  color: var(--color-primary, #4a90e2);
  outline: none;
}

.help-term:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auto-linked terms (less prominent) */
.help-term--auto {
  border-bottom-color: var(--terminal-text-muted, #888);
}

.help-term--auto:hover,
.help-term--auto:focus {
  border-bottom-color: var(--color-primary, #4a90e2);
}

/* ========================================
 * TOOLTIP
 * ======================================== */

.help-tooltip {
  position: fixed;
  z-index: var(--z-sky);
  max-width: 320px;
  min-width: 200px;
  padding: 0.75rem;
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: help-tooltip-enter 0.15s ease-out;
  font-size: 0.875rem;
  line-height: 1.5;
}

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

/* Arrow pointer */
.help-tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--terminal-border, #333);
}

/* Tooltip above element */
.help-tooltip--above::after {
  top: auto;
  bottom: -6px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip--above::before {
  top: auto;
  bottom: -8px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-border, #333);
}

/* ========================================
 * TOOLTIP CONTENT
 * ======================================== */

.help-tooltip__header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.help-tooltip__term {
  font-weight: 600;
  color: var(--color-primary, #4a90e2);
  font-size: 1rem;
}

.help-tooltip__definition {
  margin: 0 0 0.5rem 0;
  color: var(--terminal-text-primary, #e0e0e0);
}

.help-tooltip__example {
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.8125rem;
}

.help-tooltip__example em {
  color: var(--terminal-text-muted, #888);
  font-style: normal;
}

/* ========================================
 * RELATED TERMS
 * ======================================== */

.help-tooltip__related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--terminal-border, #333);
}

.help-tooltip__related-label {
  width: 100%;
  font-size: 0.75rem;
  color: var(--terminal-text-muted, #888);
  margin-bottom: 0.25rem;
}

.help-tooltip__related-term {
  padding: 0.125rem 0.5rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.help-tooltip__related-term:hover,
.help-tooltip__related-term:focus {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
  outline: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .help-tooltip {
    animation: none;
  }
}
/*
 * OOC Adventures Section
 * ======================
 * Styles for the adventure posting board in the OOC sidebar.
 * Players can post "Seeking Adventure" or "Offering Adventure" notices.
 */

/* ===========================================
 * Adventures Section in OOC Sidebar
 * =========================================== */

.ooc-adventures-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ooc-adventure-buttons {
  display: flex;
  gap: var(--space-2);
}

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

.ooc-adventure-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-btn:active {
  transform: scale(0.98);
}

.ooc-adventure-btn__icon {
  font-size: var(--text-lg);
}

.ooc-adventure-btn__label {
  color: var(--text-secondary);
}

.ooc-adventure-btn--seeking:hover {
  border-color: var(--color-info);
}

.ooc-adventure-btn--offering:hover {
  border-color: var(--color-warning);
}

/* ===========================================
 * Adventure Board (list of posts)
 * =========================================== */

.ooc-adventure-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.ooc-empty-board {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
  margin: 0;
}

/* ===========================================
 * Adventure Card
 * =========================================== */

.ooc-adventure-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.ooc-adventure-card--seeking {
  border-left: 3px solid var(--color-info);
}

.ooc-adventure-card--offering {
  border-left: 3px solid var(--color-warning);
}

.ooc-adventure-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ooc-adventure-card__type-icon {
  font-size: var(--text-sm);
}

.ooc-adventure-card__type-label {
  font-weight: 600;
  color: var(--text-primary);
}

.ooc-adventure-card__author {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.ooc-adventure-card__body {
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.ooc-adventure-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
}

.ooc-adventure-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ooc-adventure-card__btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-card__btn--respond:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.ooc-adventure-card__btn--remove {
  margin-left: auto;
  padding: var(--space-1);
}

.ooc-adventure-card__btn--remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.ooc-adventure-card__btn-icon {
  font-size: var(--text-xs);
}

/* ===========================================
 * Adventure Post Modal
 * =========================================== */

.adventure-post-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: Min(400px, 90vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.adventure-post-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.adventure-post-dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.adventure-post-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.adventure-post-dialog__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.adventure-post-dialog__icon {
  font-size: var(--text-xl);
}

.adventure-post-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post-dialog__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===========================================
 * Adventure Post Form
 * =========================================== */

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

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

.adventure-post__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.adventure-post__textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.adventure-post__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.adventure-post__textarea::placeholder {
  color: var(--text-muted);
}

.adventure-post__char-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

.adventure-post__char-count--warning {
  color: var(--color-warning);
}

/* ===========================================
 * Adventure Post Footer
 * =========================================== */

.adventure-post-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.adventure-post__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post__btn--secondary {
  background: transparent;
  color: var(--text-secondary);
}

.adventure-post__btn--secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.adventure-post__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.adventure-post__btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.adventure-post__btn--primary:active {
  transform: scale(0.98);
}
/**
 * Mobile Panel Styles
 * ===================
 * Animations and visual feedback for mobile panel navigation.
 * Used by mobile_panel_controller.js for swipe gestures.
 */

/* ========================================
 * Panel Transition Animations
 * ======================================== */

/* Exit animation - slide out left */
.mobile-panel--exit-left {
  animation: mobilePanelExitLeft 0.15s ease-out forwards;
}

/* Exit animation - slide out right */
.mobile-panel--exit-right {
  animation: mobilePanelExitRight 0.15s ease-out forwards;
}

/* Enter animation - slide in from left */
.mobile-panel--enter-left {
  animation: mobilePanelEnterLeft 0.25s ease-out forwards;
}

/* Enter animation - slide in from right */
.mobile-panel--enter-right {
  animation: mobilePanelEnterRight 0.25s ease-out forwards;
}

@keyframes mobilePanelExitLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

@keyframes mobilePanelExitRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30%);
  }
}

@keyframes mobilePanelEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mobilePanelEnterRight {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
 * Edge Bounce Feedback
 * ======================================== */

.mobile-panel--bounce-left {
  animation: mobilePanelBounceLeft 0.3s ease-out;
}

.mobile-panel--bounce-right {
  animation: mobilePanelBounceRight 0.3s ease-out;
}

@keyframes mobilePanelBounceLeft {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(15px);
  }
  60% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes mobilePanelBounceRight {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-15px);
  }
  60% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ========================================
 * Swipe Progress Indicator
 * ======================================== */

.mobile-swipe-indicator {
  --swipe-progress: 0;

  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: calc(var(--swipe-progress) * 0.9);
  z-index: var(--z-notification);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.1s ease-out;
}

.mobile-swipe-indicator--left {
  right: var(--space-4);
}

.mobile-swipe-indicator--right {
  left: var(--space-4);
}

.mobile-swipe-indicator--disabled {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  opacity: calc(var(--swipe-progress) * 0.3);
}

/* Icon arrows */
.mobile-swipe-indicator--left::before {
  content: '→';
  margin-right: var(--space-2);
}

.mobile-swipe-indicator--right::before {
  content: '←';
  margin-right: var(--space-2);
}

/* ========================================
 * Touch Feedback States
 * ======================================== */

/* Active touch state on buttons */
@media (hover: none) and (pointer: coarse) {
  .mobile-panel-switcher__btn:active {
    transform: scale(0.95);
    background: var(--color-bg-elevated);
  }

  .mobile-panel-switcher__btn.active:active {
    transform: scale(0.95);
  }
}

/* ========================================
 * Pull-to-Navigate Hint
 * ======================================== */

.mobile-nav-hint {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-hint--visible {
  opacity: 1;
}

.mobile-nav-hint__icon {
  display: inline-block;
  margin: 0 var(--space-1);
}

/* ========================================
 * Panel Pagination Dots
 * ======================================== */

.mobile-panel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.mobile-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-default);
  transition: background 0.2s ease;
}

.mobile-panel-dot--active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
}

/* ========================================
 * Safe Area Support (Notched Phones)
 * ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-panel-switcher {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure modals don't get cut off */
  .mobile-mode .detail-modal,
  .mobile-mode .unified-modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ========================================
 * Landscape Orientation
 * ======================================== */

@media (orientation: landscape) and (max-height: 500px) {
  .mobile-panel-switcher {
    padding: 2px 8px;
  }

  .mobile-panel-switcher__btn {
    min-height: 36px;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
  }

  .mobile-panel-switcher__icon {
    display: none; /* Hide icons in cramped landscape mode */
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .mobile-panel--exit-left,
  .mobile-panel--exit-right,
  .mobile-panel--enter-left,
  .mobile-panel--enter-right,
  .mobile-panel--bounce-left,
  .mobile-panel--bounce-right {
    animation: none;
  }

  .mobile-swipe-indicator {
    transition: none;
    opacity: 0.8;
  }
}

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

@media (prefers-contrast: high) {
  .mobile-panel-switcher__btn {
    border-width: 2px;
  }

  .mobile-panel-switcher__btn.active {
    border-color: white;
    outline: 2px solid white;
    outline-offset: 2px;
  }

  .mobile-swipe-indicator {
    border-width: 2px;
  }
}
/**
 * Mobile 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;
}

/* Typographic hierarchy: small dim uppercase abbr, large bold bright score, smaller accent mod (#4132) */
.ability-hexagon__label-abbr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  fill: var(--color-text-muted);
  opacity: 0.85;
}

.ability-hexagon__label-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  fill: var(--color-text-primary);
}

.ability-hexagon__label-mod {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  fill: var(--color-accent-secondary);
  letter-spacing: 0.02em;
}

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

@media (max-width: 768px) {
  .ability-hexagon {
    /* Keep max-width constrained on mobile - don't expand to 100% */
    max-width: 280px;
    padding: var(--space-1);
  }
}

@media (max-width: 480px) {
  .ability-hexagon {
    max-width: 240px;
  }

  .ability-hexagon__label-abbr {
    font-size: 8px;
  }

  .ability-hexagon__label-score {
    font-size: 10px;
  }

  .ability-hexagon__label-mod {
    font-size: 8px;
  }
}

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

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

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

@media (prefers-contrast: high) {
  .ability-hexagon {
    border: 2px solid var(--color-accent-primary);
  }

  .ability-hexagon__grid-line {
    stroke-width: 2;
    opacity: 0.5;
  }

  .ability-hexagon__character-area {
    fill-opacity: 0.4;
    stroke-width: 3;
  }

  .ability-hexagon__vertex {
    stroke-width: 3;
  }
}

/* ========================================
 * Dark Mode Enhancements
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .ability-hexagon__character-area {
    fill-opacity: 0.25;
  }

  .ability-hexagon__vertex {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .ability-hexagon {
    break-inside: avoid;
    border: 1px solid #000;
    background: #fff;
  }

  .ability-hexagon__character-area {
    fill: #ccc;
    fill-opacity: 0.3;
    stroke: #000;
    stroke-width: 2;
  }

  .ability-hexagon__grid-line {
    stroke: #666;
  }

  .ability-hexagon__vertex {
    fill: #000;
    stroke: #fff;
  }

  .ability-hexagon__label-abbr,
  .ability-hexagon__label-score,
  .ability-hexagon__label-mod {
    fill: #000;
  }
}
/**
 * Active Quest Widget
 * ===================
 * 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;
  }
}
/*
 * Status Zones (#3882, extended #4267)
 * ------------------------------------
 * Group widget categories inside the status-bar centre column with subtle
 * vertical separators so the row reads as session | character | party |
 * system instead of an undifferentiated flat list. Empty zones collapse via
 * :empty so adjacent visible zones get exactly one divider, never two.
 *
 * #4267 (panel audit 6.2): same idiom applied to the right-hand toolbar
 * via .status-toolbar__zone — grouping social / views / config so a logged-in
 * player sees grouped buttons, not 7+ icons in a uniform row.
 *
 * Also hosts polish-pass follow-ups (#3882) that don't logically belong in
 * _status_bar.css: reduced-motion guards for the toolbar's decorative pulse.
 */

/* Centre-column zones (widgets + badges) */
.status-zone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.status-zone:empty {
  display: none;
}

.status-zone + .status-zone:not(:empty) {
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-subtle);
}

/* Right-column toolbar zones (#4267, finding 6.2).
 * Same separator pattern as .status-zone, but tighter padding to keep the
 * toolbar compact. The first zone has no leading divider; each subsequent
 * non-empty zone gets a 1px left border. */
.status-toolbar__zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.status-toolbar__zone:empty {
  display: none;
}

.status-toolbar__zone + .status-toolbar__zone:not(:empty),
.status-toolbar__zone + details.status-toolbar__more:not(:empty),
.spectator-indicator + .status-toolbar__zone:not(:empty) {
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  border-left: 1px solid var(--color-border-subtle);
}

/* On narrow viewports the divider can sum with the toolbar's outer padding
 * to push past the 480px right edge. Hide dividers when actions zone is
 * already shrinking to avoid horizontal overflow. Coheres with the
 * status-bar__zone--actions { overflow: hidden } rule in _status_bar.css. */
@media (max-width: 480px) {
  .status-toolbar__zone + .status-toolbar__zone,
  .status-toolbar__zone + details.status-toolbar__more,
  .spectator-indicator + .status-toolbar__zone {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

/* Reduced-motion guard for the panels first-visit hint dot pulse
 * (decorative; no semantic loss when suppressed). */
@media (prefers-reduced-motion: reduce) {
  .panels-icon-btn--new::after {
    animation: none !important;
  }
}
/*
 * Status Toolbar — More Menu (#4267, panel audit 6.3)
 * ---------------------------------------------------
 * Overflow menu for advanced/experimental status-bar toolbar buttons
 * (3D hologram, XR terminal, focus mode). These were prominent in the
 * top-level toolbar but new players didn't know what they did; collapsed
 * here so the primary toolbar reads social | views | config.
 *
 * Built on native <details>/<summary> for keyboard accessibility:
 *   - Tab focuses the summary
 *   - Enter / Space toggles the details
 *   - Tab moves through child menu items
 *   - Tab past the last item leaves the menu (no focus trap)
 * Plus aria sync + close-on-Escape via toolbar-more Stimulus controller.
 */

.status-toolbar__more {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The summary inherits help-icon-btn sizing/colors so it sits visually in
 * the same row as the other toolbar icons. Strip the default disclosure
 * triangle the browser injects on <summary>. */
.status-toolbar__more-summary {
  list-style: none;
  cursor: pointer;
}

.status-toolbar__more-summary::-webkit-details-marker {
  display: none;
}

.status-toolbar__more-summary::marker {
  content: '';
}

/* Open-state visual: invert colors slightly to mirror the other toolbar
 * toggles' aria-pressed state. */
.status-toolbar__more[open] > .status-toolbar__more-summary {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Drop-down menu surface */
.status-toolbar__more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--color-bg-elevated, var(--color-bg-secondary));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Items: full-width buttons/links, icon-and-label pair so the user actually
 * knows what each toggle does before tapping it. Overrides the original
 * .hologram-toggle-btn / .xr-mode-btn / .focus-mode-toggle 32x32 icon-only
 * styling from _status_bar.css when the element is inside the More menu. */
.status-toolbar__more-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  height: auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.status-toolbar__more-item:hover,
.status-toolbar__more-item:focus-visible {
  background: var(--color-bg-hover);
  color: var(--color-accent-primary);
}

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

.status-toolbar__more-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.status-toolbar__more-item-icon .svg-icon {
  width: 16px;
  height: 16px;
}

.status-toolbar__more-item-label {
  flex: 1;
  min-width: 0;
}

/* Active/pressed state for menuitemcheckbox items (hologram, focus mode). */
.status-toolbar__more-item[aria-checked="true"],
.status-toolbar__more-item[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  color: var(--color-accent-primary);
}

/* When the More-menu wraps a toggle button, the original 32x32 icon-only
 * styling bleeds through; null it out so the row stretches full width. */
.status-toolbar__more-menu .hologram-toggle-btn,
.status-toolbar__more-menu .xr-mode-btn,
.status-toolbar__more-menu .focus-mode-toggle {
  width: 100%;
  height: auto;
  background: transparent;
  border: 1px solid transparent;
}

/* Mobile: overflow menu opens full-width, anchored to the right edge. */
@media (max-width: 480px) {
  .status-toolbar__more-menu {
    right: 0;
    min-width: 180px;
  }
}
/*
 * Status Widget — Unified Visual Idiom (#4267, panel audit 6.5)
 * -------------------------------------------------------------
 * The four status-zone widgets — difficulty dropdown, spell-slot chip,
 * party badge, turn-indicator badge — already shared the same border-radius
 * and inner padding, but each had its own subtle height/box variation, and
 * a player scanning the row couldn't tell at a glance which were clickable
 * (button) vs read-only (badge).
 *
 * This file lays a baseline shape that all four widgets honor (minimum
 * height, identical inner padding, consistent gap between icon + text) and
 * a visible affordance distinction:
 *
 *   - Clickable widgets (rendered as <button>) get cursor: pointer + a
 *     hover lift via translateY(-1px). Already true for difficulty &
 *     spell-slot; this only ratifies the existing pattern.
 *   - Read-only badges (rendered as <div role="status">) keep cursor: help
 *     and don't translate on hover — the elevation cue is reserved for
 *     interactive widgets.
 *
 * NOTE — per the issue's CONSTRAINTS this is a visual-consistency pass
 * only. We do not change interactivity (no badge becomes a button, no
 * button becomes a div). We add a shared shape baseline; widget-specific
 * stylesheets keep their colors and animations.
 */

/* Shared shape baseline — applied to all four status-zone widgets so the
 * row reads as four similar chips, not four ad-hoc shapes. Selectors use
 * the existing widget classes so we don't have to add a new wrapper class
 * everywhere; specificity matches the per-widget rule set. */
.status-zone .difficulty-dropdown-widget__trigger,
.status-zone .spell-slot-widget,
.status-zone .party-badge,
.status-zone .turn-indicator-badge {
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

/* Clickable widgets: cursor + hover lift. The widgets are already <button>
 * elements; this just normalizes the affordance signal so a player can
 * tell at a glance "I can click this." */
.status-zone .difficulty-dropdown-widget__trigger:hover,
.status-zone .spell-slot-widget__compact:hover {
  transform: translateY(-1px);
}

/* Read-only badges: explicit help cursor (already on .party-badge /
 * .turn-indicator-badge in their own files) — repeating here so the
 * pairing with the clickable lift above is legible in one place. */
.status-zone .party-badge,
.status-zone .turn-indicator-badge {
  cursor: help;
}

/* Reduced-motion: drop the hover lift for users who opted out of motion. */
@media (prefers-reduced-motion: reduce) {
  .status-zone .difficulty-dropdown-widget__trigger:hover,
  .status-zone .spell-slot-widget__compact:hover {
    transform: none;
  }
}
/**
 * Command Palette Styles
 * ======================
 * VS Code-style command palette (Cmd+K / Ctrl+K) for quick command access.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.command-palette-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  transform: none;
}

.command-palette-overlay--visible {
  opacity: 1;
}

.command-palette-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Palette Container
   ============================================================================ */

.command-palette {
  width: 90%;
  max-width: 560px;
  max-height: 60vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.15s ease-out;
}

.command-palette-overlay--visible .command-palette {
  transform: scale(1) translateY(0);
}

.command-palette-overlay--closing .command-palette {
  transform: scale(0.96) translateY(-10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .command-palette-overlay,
  .command-palette {
    transition: none;
  }
}

/* ============================================================================
   Header / Search
   ============================================================================ */

.command-palette__header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
}

.command-palette__search-wrapper:focus-within {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.command-palette__search-wrapper svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.command-palette__search-icon {
  font-size: 1rem;
  color: var(--text-muted, #888);
}

.command-palette__search {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary, #e5e5e5);
  outline: none;
}

.command-palette__search::placeholder {
  color: var(--text-muted, #888);
}

.command-palette__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Command List
   ============================================================================ */

.command-palette__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.875rem;
}

/* ============================================================================
   Command Item
   ============================================================================ */

.command-palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.command-palette__item:hover {
  background: var(--bg-tertiary, #252540);
}

.command-palette__item--selected {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected:hover {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected .command-palette__item-name,
.command-palette__item--selected .command-palette__item-description,
.command-palette__item--selected .command-palette__item-category {
  color: white;
}

.command-palette__item--selected .command-palette__item-icon {
  color: rgba(255, 255, 255, 0.9);
}

.command-palette__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--accent-color, #8b5cf6);
}

.command-palette__item-icon svg {
  width: 1rem;
  height: 1rem;
}

.command-palette__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__item-name {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
}

.command-palette__item-description {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette__item-category {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border-radius: 3px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.command-palette__footer {
  display: flex;
  justify-content: center;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__footer-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.command-palette__footer-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

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

@media (max-width: 640px) {
  .command-palette-overlay {
    padding-top: 5vh;
  }

  .command-palette {
    width: 95%;
    max-height: 70vh;
  }

  .command-palette__item-description {
    display: none;
  }

  .command-palette__item-content {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ============================================================================
   Fuzzy Match Highlights
   ============================================================================ */

.command-palette__highlight {
  background: rgba(139, 92, 246, 0.3);
  color: var(--accent-color, #a78bfa);
  border-radius: 2px;
  padding: 0 1px;
}

.command-palette__item--selected .command-palette__highlight {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ============================================================================
   Scrollbar
   ============================================================================ */

.command-palette__list::-webkit-scrollbar {
  width: 6px;
}

.command-palette__list::-webkit-scrollbar-track {
  background: transparent;
}

.command-palette__list::-webkit-scrollbar-thumb {
  background: var(--border-color, #333);
  border-radius: 3px;
}

.command-palette__list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #555);
}
/*
 * D&D 5e Damage Type Badges
 * ==========================
 * Visual distinction for all 13 damage types with PHB-accurate colors.
 *
 * Usage:
 *   <span class="damage-badge damage-badge--fire">Fire</span>
 *   <span class="damage-badge damage-badge--cold">Cold</span>
 *
 * Data attribute variant:
 *   <span class="damage-badge" data-damage-type="fire">Fire</span>
 */

.damage-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* Fire Damage */
.damage-badge--fire,
.damage-badge[data-damage-type="fire"] {
  background: color-mix(in srgb, var(--dmg-fire) 15%, transparent);
  color: var(--dmg-fire);
  border: 1px solid var(--dmg-fire);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-fire) 20%, transparent);
}

.damage-badge--fire:hover,
.damage-badge[data-damage-type="fire"]:hover {
  background: color-mix(in srgb, var(--dmg-fire) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-fire) 40%, transparent);
}

/* Cold Damage */
.damage-badge--cold,
.damage-badge[data-damage-type="cold"] {
  background: color-mix(in srgb, var(--dmg-cold) 15%, transparent);
  color: var(--dmg-cold);
  border: 1px solid var(--dmg-cold);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-cold) 20%, transparent);
}

.damage-badge--cold:hover,
.damage-badge[data-damage-type="cold"]:hover {
  background: color-mix(in srgb, var(--dmg-cold) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-cold) 40%, transparent);
}

/* Lightning Damage */
.damage-badge--lightning,
.damage-badge[data-damage-type="lightning"] {
  background: color-mix(in srgb, var(--dmg-lightning) 15%, transparent);
  color: var(--dmg-lightning);
  border: 1px solid var(--dmg-lightning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-lightning) 20%, transparent);
}

.damage-badge--lightning:hover,
.damage-badge[data-damage-type="lightning"]:hover {
  background: color-mix(in srgb, var(--dmg-lightning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-lightning) 40%, transparent);
}

/* Acid Damage */
.damage-badge--acid,
.damage-badge[data-damage-type="acid"] {
  background: color-mix(in srgb, var(--dmg-acid) 15%, transparent);
  color: var(--dmg-acid);
  border: 1px solid var(--dmg-acid);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-acid) 20%, transparent);
}

.damage-badge--acid:hover,
.damage-badge[data-damage-type="acid"]:hover {
  background: color-mix(in srgb, var(--dmg-acid) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-acid) 40%, transparent);
}

/* Poison Damage */
.damage-badge--poison,
.damage-badge[data-damage-type="poison"] {
  background: color-mix(in srgb, var(--dmg-poison) 15%, transparent);
  color: var(--dmg-poison);
  border: 1px solid var(--dmg-poison);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-poison) 20%, transparent);
}

.damage-badge--poison:hover,
.damage-badge[data-damage-type="poison"]:hover {
  background: color-mix(in srgb, var(--dmg-poison) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-poison) 40%, transparent);
}

/* Necrotic Damage */
.damage-badge--necrotic,
.damage-badge[data-damage-type="necrotic"] {
  background: color-mix(in srgb, var(--dmg-necrotic) 15%, transparent);
  color: var(--dmg-necrotic);
  border: 1px solid var(--dmg-necrotic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-necrotic) 20%, transparent);
}

.damage-badge--necrotic:hover,
.damage-badge[data-damage-type="necrotic"]:hover {
  background: color-mix(in srgb, var(--dmg-necrotic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-necrotic) 40%, transparent);
}

/* Radiant Damage */
.damage-badge--radiant,
.damage-badge[data-damage-type="radiant"] {
  background: color-mix(in srgb, var(--dmg-radiant) 15%, transparent);
  color: var(--dmg-radiant);
  border: 1px solid var(--dmg-radiant);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-radiant) 20%, transparent);
}

.damage-badge--radiant:hover,
.damage-badge[data-damage-type="radiant"]:hover {
  background: color-mix(in srgb, var(--dmg-radiant) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-radiant) 40%, transparent);
}

/* Force Damage */
.damage-badge--force,
.damage-badge[data-damage-type="force"] {
  background: color-mix(in srgb, var(--dmg-force) 15%, transparent);
  color: var(--dmg-force);
  border: 1px solid var(--dmg-force);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-force) 20%, transparent);
}

.damage-badge--force:hover,
.damage-badge[data-damage-type="force"]:hover {
  background: color-mix(in srgb, var(--dmg-force) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-force) 40%, transparent);
}

/* Psychic Damage */
.damage-badge--psychic,
.damage-badge[data-damage-type="psychic"] {
  background: color-mix(in srgb, var(--dmg-psychic) 15%, transparent);
  color: var(--dmg-psychic);
  border: 1px solid var(--dmg-psychic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-psychic) 20%, transparent);
}

.damage-badge--psychic:hover,
.damage-badge[data-damage-type="psychic"]:hover {
  background: color-mix(in srgb, var(--dmg-psychic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-psychic) 40%, transparent);
}

/* Thunder Damage */
.damage-badge--thunder,
.damage-badge[data-damage-type="thunder"] {
  background: color-mix(in srgb, var(--dmg-thunder) 15%, transparent);
  color: var(--dmg-thunder);
  border: 1px solid var(--dmg-thunder);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-thunder) 20%, transparent);
}

.damage-badge--thunder:hover,
.damage-badge[data-damage-type="thunder"]:hover {
  background: color-mix(in srgb, var(--dmg-thunder) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-thunder) 40%, transparent);
}

/* Bludgeoning Damage */
.damage-badge--bludgeoning,
.damage-badge[data-damage-type="bludgeoning"] {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 15%, transparent);
  color: var(--dmg-bludgeoning);
  border: 1px solid var(--dmg-bludgeoning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-bludgeoning) 20%, transparent);
}

.damage-badge--bludgeoning:hover,
.damage-badge[data-damage-type="bludgeoning"]:hover {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-bludgeoning) 40%, transparent);
}

/* Piercing Damage */
.damage-badge--piercing,
.damage-badge[data-damage-type="piercing"] {
  background: color-mix(in srgb, var(--dmg-piercing) 15%, transparent);
  color: var(--dmg-piercing);
  border: 1px solid var(--dmg-piercing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-piercing) 20%, transparent);
}

.damage-badge--piercing:hover,
.damage-badge[data-damage-type="piercing"]:hover {
  background: color-mix(in srgb, var(--dmg-piercing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-piercing) 40%, transparent);
}

/* Slashing Damage */
.damage-badge--slashing,
.damage-badge[data-damage-type="slashing"] {
  background: color-mix(in srgb, var(--dmg-slashing) 15%, transparent);
  color: var(--dmg-slashing);
  border: 1px solid var(--dmg-slashing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-slashing) 20%, transparent);
}

.damage-badge--slashing:hover,
.damage-badge[data-damage-type="slashing"]:hover {
  background: color-mix(in srgb, var(--dmg-slashing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-slashing) 40%, transparent);
}

/* Size Variants */
.damage-badge--sm {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 9px;
}

.damage-badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Accessibility: Focus states */
.damage-badge:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/*
 * D&D Decorative Borders (Rick Rubin Pass)
 * =========================================
 * Simplified from ornamental corner brackets to clean gradient borders.
 * Fantasy feel preserved through color, not chrome.
 *
 * Variants:
 *   .dnd-border--gold      Gold/amber (character sheets, achievements)
 *   .dnd-border--stone     Gray stone (dungeon/combat panels)
 *   .dnd-border--parchment Warm tan (narrative, lore, quests)
 *   .dnd-border--magic     Purple/blue (spell panels)
 *   .dnd-border--wooden    Brown (inventory, merchant)
 *   .dnd-border--filigree  Top/bottom gradient lines
 */

/* ========================================
 * Gold Border — character sheets, achievements
 * ======================================== */

.dnd-border--gold {
  border: 1px solid color-mix(in srgb, var(--color-gold, #e8c44a) 40%, transparent);
}

/* ========================================
 * Stone Border — combat, dungeon panels
 * ======================================== */

.dnd-border--stone {
  border: 1px solid color-mix(in srgb, #787878 30%, transparent);
}

/* ========================================
 * Parchment Border — narrative, lore, quests
 * ======================================== */

.dnd-border--parchment {
  border: 1px solid color-mix(in srgb, var(--color-accent-warning, #d4b06e) 25%, transparent);
}

/* ========================================
 * Magic Border — spellbook, spell panels
 * ======================================== */

.dnd-border--magic {
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 35%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-purple) 10%, transparent);
}

/* ========================================
 * Wooden Border — inventory, merchant panels
 * ======================================== */

.dnd-border--wooden {
  border: 1px solid color-mix(in srgb, var(--color-accent-orange, #c08a58) 30%, transparent);
}

/* ========================================
 * Filigree Border — top/bottom ornamental
 * ======================================== */

.dnd-border--filigree {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================
 * Divider Ornaments
 * ======================================== */

.dnd-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default) 20%,
    var(--color-border-default) 80%,
    transparent
  );
  margin: var(--space-5) 0;
}

/* Simple gradient divider */
.dnd-divider--simple {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default),
    transparent
  );
  margin: var(--space-4) 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .dnd-border--magic {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
  }
}
/**
 * Filter Chips Component
 * ======================
 * Reusable filter chip buttons for inventory and other list panels.
 * Provides category filtering with keyboard navigation support.
 */

/* ========================================
 * Controls Container
 * ======================================== */

.inventory-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

/* ========================================
 * Filter Chips
 * ======================================== */

.filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.filter-chip:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.filter-chip:active {
  transform: translateY(0);
}

.filter-chip.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  z-index: var(--z-raised);
}

/* Keyboard navigation hint */
.filter-chip::before {
  content: '';
  margin-right: 0.25rem;
}

/* ========================================
 * Sort Dropdown
 * ======================================== */

.inventory-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.inventory-sort-select {
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-5); /* Extra space for arrow */
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

.inventory-sort-select:hover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-bg-tertiary);
}

.inventory-sort-select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.inventory-sort-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--space-2);
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */

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

@media (max-width: 768px) {
  .inventory-controls {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .filter-chips {
    gap: var(--space-1-5);
  }

  .filter-chip {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-xs);
  }

  .inventory-sort {
    width: 100%;
    margin-left: 0;
  }

  .inventory-sort-select {
    flex: 1;
    font-size: var(--font-size-xs);
  }
}

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

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

  .filter-chip:hover {
    transform: none;
  }

  .filter-chip:active {
    transform: none;
  }
}

/* ========================================
 * Dark Mode Adjustments
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .inventory-sort-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  }
}

/* ========================================
 * Animation for filter changes
 * ======================================== */

@keyframes filter-chip-activate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.filter-chip.active {
  animation: filter-chip-activate 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip.active {
    animation: none;
  }
}

/* ========================================
 * Search Highlighting
 * ======================================== */

.search-highlight {
  background: color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  color: var(--color-accent-warning);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
}
/**
 * HP Bar Dramatic Enhancement
 * ============================
 * Phase 4 P2-13: Dramatic HP bar with state-based gradients, sheen effects, and critical pulse
 *
 * HP States:
 * - Healthy (>60%): Calm green gradient
 * - Wounded (25-60%): Warning orange gradient
 * - Critical (≤25%): URGENT red gradient with pulse animation
 *
 * Success Criteria:
 * - HP awareness +60%
 * - Combat tension +1.5 points
 * - Critical HP feels urgent
 */

/* ========================================
 * HP Bar Container (used in multiple contexts)
 * ======================================== */

.cs-hp-bar {
  width: 100%;
  height: 8px;
  /* Damage-reveal track: red → amber gradient exposed as the fill shrinks.
     Full HP covers this with solid green; depleting HP reveals the danger zone. */
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-2);
  position: relative;
}

/* Alternate styling for tabbed character sheet */
.cs-hp-bar:not(.cs-hp-bar__fill) {
  height: 12px;
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
 * HP Bar Fill - Base Styles
 * ======================================== */

.cs-hp-bar__fill,
.cs-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  position: relative;
  transform-origin: left;
  transition: transform var(--transition-normal, 0.3s ease),
              background-color var(--transition-normal, 0.3s ease),
              opacity var(--transition-normal, 0.3s ease);

  /* Solid fill — color changes per state class. Gradient lives on the track. */
  background: #2ECC71;
}

/* ========================================
 * Sheen Effect on Leading Edge
 * ======================================== */

.cs-hp-bar__fill::after,
.cs-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* ========================================
 * HP State Classes - Healthy (>60%)
 * ======================================== */

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

/* ========================================
 * HP State Classes - Wounded (25-60%)
 * ======================================== */

.cs-hp-bar__fill--wounded,
.cs-hp-fill--wounded {
  background: #F39C12;
}

/* ========================================
 * HP State Classes - Critical (≤25%)
 * URGENT with pulse animation
 * ======================================== */

.cs-hp-bar__fill--critical,
.cs-hp-fill--critical {
  background: #E74C3C;
  animation: criticalPulse 0.8s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.4);
  }
}

/* ========================================
 * Legacy Class Support (for backward compatibility)
 * ======================================== */

.cs-hp-bar__fill--low {
  /* Alias for critical state */
  background: #E74C3C;
  animation: criticalPulse 0.8s ease-in-out infinite;
}

.cs-hp-bar__fill--medium {
  /* Alias for wounded state */
  background: #F39C12;
}

/* ========================================
 * Combat Quickview HP Bar Variants
 * ======================================== */

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

.cs-hp-healthy {
  background: linear-gradient(90deg, #2ECC71, #27AE60);
}

.cs-hp-injured {
  background: linear-gradient(90deg, #F39C12, #E67E22);
}

.cs-hp-critical {
  background: linear-gradient(90deg, #E74C3C, #C0392B);
  animation: criticalPulse 0.8s ease-in-out infinite;
}

/* Add sheen to quickview bars as well */
.cs-quickview-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  border-radius: 0 3px 3px 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .cs-hp-bar__fill--critical,
  .cs-hp-fill--critical,
  .cs-hp-bar__fill--low,
  .cs-hp-critical {
    animation: none;
  }

  .cs-hp-bar__fill,
  .cs-hp-fill,
  .cs-quickview-hp-fill {
    transition: transform 0.1s linear;
  }
}

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

@media (prefers-contrast: high) {
  .cs-hp-bar__fill::after,
  .cs-hp-fill::after,
  .cs-quickview-hp-fill::after {
    /* Reduce sheen intensity in high contrast mode */
    opacity: 0.5;
  }
}

/* ========================================
 * HP Flash Effects (damage/healing feedback)
 * Phase 4 P2-13: Smooth transitions and visual feedback
 * ======================================== */

.hp-bar--flash-damage,
.cs-hp-bar__fill--flash-damage,
.cs-hp-fill--flash-damage {
  animation: hpFlashDamage 0.4s ease-out;
}

.hp-bar--flash-heal,
.cs-hp-bar__fill--flash-heal,
.cs-hp-fill--flash-heal {
  animation: hpFlashHeal 0.4s ease-out;
}

@keyframes hpFlashDamage {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.8);
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(0.6);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

@keyframes hpFlashHeal {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.5);
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

/* ========================================
 * HP Flyout Numbers (floating damage/heal)
 * ======================================== */

.hp-flyout {
  position: absolute;
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  z-index: var(--z-panel);
  white-space: nowrap;
}

.hp-flyout--damage {
  color: #E74C3C;
}

.hp-flyout--heal {
  color: #2ECC71;
}

.hp-flyout--animating {
  animation: hpFlyoutUp 1.5s ease-out forwards;
}

@keyframes hpFlyoutUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.2);
  }
  30% {
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px) scale(0.8);
  }
}

/* Large flyout variant for dramatic damage/healing */
.hp-flyout--large {
  font-size: 1.5rem;
}

.hp-flyout--large.hp-flyout--animating {
  animation: hpFlyoutUpLarge 2s ease-out forwards;
}

@keyframes hpFlyoutUpLarge {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.3);
  }
  25% {
    transform: translate(-50%, -30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.7);
  }
}

/* ========================================
 * HP Bar Container Enhancements
 * Ensures container can position flyouts
 * ======================================== */

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

/* ========================================
 * Combat Tracker HP Bar Enhancements
 * ======================================== */

.combat-tracker .hp-bar {
  transition: transform 0.5s ease-out,
              background-color 0.3s ease;
}

/* ========================================
 * Reduced Motion Support for Flash/Flyout
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hp-bar--flash-damage,
  .hp-bar--flash-heal,
  .cs-hp-bar__fill--flash-damage,
  .cs-hp-bar__fill--flash-heal,
  .cs-hp-fill--flash-damage,
  .cs-hp-fill--flash-heal {
    animation: none;
  }

  .hp-flyout--animating {
    animation: hpFlyoutFade 1s ease-out forwards;
  }

  @keyframes hpFlyoutFade {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
/*
 * Illuminated Drop Caps
 * =====================
 * Medieval manuscript-style drop caps for narrative text.
 * Applies ::first-letter styling to marked paragraphs.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Drop Cap Base
 * ======================================== */

/* Apply to narrative paragraphs for illuminated first letter */
.dnd-drop-cap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding: 0.05em 0.1em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* ========================================
 * Color Variants
 * ======================================== */

/* Arcane/magical text */
.dnd-drop-cap--arcane::first-letter {
  color: var(--color-accent-purple);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
}

/* Nature/druidic text */
.dnd-drop-cap--nature::first-letter {
  color: var(--color-accent-secondary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

/* Divine/celestial text */
.dnd-drop-cap--divine::first-letter {
  color: var(--color-accent-primary);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Infernal/dark text */
.dnd-drop-cap--infernal::first-letter {
  color: var(--color-accent-error);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
}

/* ========================================
 * Size Variants
 * ======================================== */

.dnd-drop-cap--small::first-letter {
  font-size: 2.2em;
}

.dnd-drop-cap--large::first-letter {
  font-size: 4em;
  line-height: 0.75;
}

/* ========================================
 * Auto-apply to narrative scene descriptions
 * ======================================== */

/* First paragraph of a scene gets a drop cap automatically */
.narrative-scene > p:first-child::first-letter,
.narrative-entry.scene-start > p:first-child::first-letter {
  float: left;
  font-size: 2.8em;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
}

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

@media (prefers-reduced-motion: reduce) {
  .dnd-drop-cap::first-letter,
  .dnd-drop-cap--arcane::first-letter,
  .dnd-drop-cap--nature::first-letter,
  .dnd-drop-cap--divine::first-letter,
  .dnd-drop-cap--infernal::first-letter,
  .narrative-scene > p:first-child::first-letter,
  .narrative-entry.scene-start > p:first-child::first-letter {
    text-shadow: none;
  }
}
/**
 * Inline Configurator Styles
 *
 * Provides a compact inline selector UI for narrative hook actions
 * that require configuration (spell selection, weapon selection, etc.)
 */

.inline-configurator {
  position: fixed;
  z-index: var(--z-dropdown, 1000);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.inline-configurator--open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.inline-configurator__panel {
  background: var(--surface-elevated, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 4px);
  box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.4));
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}

.inline-configurator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: var(--surface-secondary, #252542);
  border-bottom: 1px solid var(--border-color, #333);
}

.inline-configurator__title {
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.inline-configurator__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  margin-left: var(--space-xs, 8px);
}

.inline-configurator__close:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #e0e0e0);
}

.inline-configurator__close svg {
  width: 14px;
  height: 14px;
}

.inline-configurator__options {
  padding: var(--space-xs, 8px);
  max-height: 280px;
  overflow-y: auto;
}

.inline-configurator__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease;
  text-align: left;
  gap: var(--space-xs, 8px);
}

.inline-configurator__option:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
}

.inline-configurator__option:active {
  background: var(--surface-active, rgba(255, 255, 255, 0.15));
}

.inline-configurator__option + .inline-configurator__option {
  margin-top: 2px;
}

.inline-configurator__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-secondary, #252542);
  border-radius: var(--radius-sm, 4px);
  color: var(--accent-color, #6366f1);
  flex-shrink: 0;
}

.inline-configurator__option-icon svg {
  width: 16px;
  height: 16px;
}

.inline-configurator__option-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.inline-configurator__option-label {
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-configurator__option-sublabel {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spell-specific styling */
.inline-configurator__option--cantrip .inline-configurator__option-icon {
  background: var(--surface-success-subtle, rgba(16, 185, 129, 0.15));
  color: var(--text-success, #10b981);
}

.inline-configurator__option--level-1 .inline-configurator__option-icon,
.inline-configurator__option--level-2 .inline-configurator__option-icon {
  background: var(--surface-info-subtle, rgba(59, 130, 246, 0.15));
  color: var(--text-info, #3b82f6);
}

.inline-configurator__option--level-3 .inline-configurator__option-icon,
.inline-configurator__option--level-4 .inline-configurator__option-icon {
  background: var(--surface-warning-subtle, rgba(245, 158, 11, 0.15));
  color: var(--text-warning, #f59e0b);
}

.inline-configurator__option--level-5 .inline-configurator__option-icon,
.inline-configurator__option--level-6 .inline-configurator__option-icon,
.inline-configurator__option--level-7 .inline-configurator__option-icon,
.inline-configurator__option--level-8 .inline-configurator__option-icon,
.inline-configurator__option--level-9 .inline-configurator__option-icon {
  background: var(--surface-accent-subtle, rgba(139, 92, 246, 0.15));
  color: var(--accent-color, #8b5cf6);
}

/* Custom option styling */
.inline-configurator__option--custom {
  border-top: 1px solid var(--border-color-subtle, rgba(255, 255, 255, 0.1));
  margin-top: var(--space-xs, 8px);
  padding-top: var(--space-sm, 12px);
}

.inline-configurator__option--custom .inline-configurator__option-icon {
  background: var(--surface-muted, rgba(255, 255, 255, 0.05));
  color: var(--text-muted, #888);
}

/* Loading state */
.inline-configurator__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg, 24px);
  color: var(--text-muted, #888);
}

.inline-configurator__loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--accent-color, #6366f1);
  border-radius: 50%;
  animation: inline-configurator-spin 0.8s linear infinite;
  margin-right: var(--space-xs, 8px);
}

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

/* Empty state */
.inline-configurator__empty {
  padding: var(--space-md, 16px);
  text-align: center;
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm, 13px);
}

/* Scrollbar styling */
.inline-configurator__options::-webkit-scrollbar {
  width: 6px;
}

.inline-configurator__options::-webkit-scrollbar-track {
  background: transparent;
}

.inline-configurator__options::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
}

.inline-configurator__options::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.3));
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .inline-configurator__panel {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }

  .inline-configurator__options {
    max-height: 220px;
  }
}
/**
 * Keyboard Shortcuts Modal Styles
 * ================================
 * Phase 2: P1-5 - Comprehensive Keyboard Shortcuts System
 *
 * Modal overlay for keyboard shortcuts reference with search functionality.
 * Follows Phase 1 design system for typography and spacing.
 */

/* ============================================================================
   Modal Backdrop
   ============================================================================ */

.keyboard-shortcuts-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky); /* Higher than shortcuts-overlay (ceiling) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.keyboard-shortcuts-modal--visible {
  opacity: 1;
}

.keyboard-shortcuts-modal--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Content Container
   ============================================================================ */

.keyboard-shortcuts-modal__content {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.keyboard-shortcuts-modal--visible .keyboard-shortcuts-modal__content {
  transform: scale(1) translateY(0);
}

.keyboard-shortcuts-modal--closing .keyboard-shortcuts-modal__content {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .keyboard-shortcuts-modal,
  .keyboard-shortcuts-modal__content {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.keyboard-shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent-primary, #61afef);
}

.keyboard-shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.keyboard-shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.keyboard-shortcuts-modal__close:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.keyboard-shortcuts-modal__close:focus {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.keyboard-shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Search
   ============================================================================ */

.keyboard-shortcuts-modal__search {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border-bottom: 1px solid var(--color-border-default, #333);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__search-input {
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.keyboard-shortcuts-modal__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.1);
}

.keyboard-shortcuts-modal__search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* ============================================================================
   Body / Content
   ============================================================================ */

.keyboard-shortcuts-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

/* Custom scrollbar for modal body */
.keyboard-shortcuts-modal__body::-webkit-scrollbar {
  width: 8px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #1a1a2e);
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb {
  background: var(--color-border-default, #333);
  border-radius: 4px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888);
}

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

.keyboard-shortcuts-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.keyboard-shortcuts-section__title {
  margin: 0;
  padding-bottom: var(--space-2, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-primary, #61afef);
  border-bottom: 1px solid var(--color-border-default, #333);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.keyboard-shortcut-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.keyboard-shortcut-item:hover {
  background: var(--color-bg-tertiary, #252540);
  border-color: var(--color-border-hover, #444);
}

.keyboard-shortcut-item__keys {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  flex-shrink: 0;
}

.keyboard-shortcut-item__plus {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0 var(--space-1, 0.25rem);
}

.keyboard-shortcut-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  text-align: right;
  min-width: 0;
}

.keyboard-shortcut-item__description {
  font-size: var(--font-size-base, 0.9375rem);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcut-item__context {
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #888);
  font-style: italic;
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.keyboard-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2, 0.5rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Pressed state effect on hover */
.keyboard-shortcut-item:hover .keyboard-shortcut-key {
  border-bottom-width: 1px;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Footer
   ============================================================================ */

.keyboard-shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-top: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__hint {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-2, 0.5rem);
  margin: 0 var(--space-1, 0.25rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
}

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

@media (max-width: 640px) {
  .keyboard-shortcuts-modal__content {
    width: 95%;
    max-height: 95vh;
  }

  .keyboard-shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
  }

  .keyboard-shortcut-item__info {
    text-align: left;
  }

  .keyboard-shortcut-key {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: var(--font-size-xs, 0.8125rem);
  }
}

/* ============================================================================
   Visual Hints on Buttons
   ============================================================================ */

.keyboard-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-left: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.8125rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  color: var(--color-text-muted, #888);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show hint on parent hover */
button:hover .keyboard-hint,
.input-line:hover .keyboard-hint {
  opacity: 1;
}

.keyboard-hint__key {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Focus visible for keyboard navigation */
.keyboard-shortcuts-modal *:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .keyboard-shortcuts-modal {
    border: 2px solid currentColor;
  }

  .keyboard-shortcut-key {
    border: 2px solid currentColor;
  }
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Lobby Menu - Inline navigation choices
 *
 * Renders lobby navigation options inline in the narrative,
 * replacing the old carousel/quick actions pattern with
 * a cleaner, more integrated menu experience.
 */

/* Container */
.lobby-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  padding: var(--space-4, 16px);
  animation: lobbyMenuFadeIn var(--timing-normal) var(--ease-out);
}

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

/* Header */
.lobby-menu__header {
  text-align: center;
  margin-bottom: var(--space-2, 8px);
}

.lobby-menu__greeting {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1, 4px);
}

.lobby-menu__subtitle {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

/* Section */
.lobby-menu__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.lobby-menu__section-title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions Grid */
.lobby-menu__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}

.lobby-menu__action {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.lobby-menu__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  transform: translateX(2px);
}

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

.lobby-menu__action--primary {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.lobby-menu__action--primary:hover {
  filter: brightness(1.1);
  transform: translateX(2px);
}

.lobby-menu__action--primary .lobby-menu__action-icon {
  background: rgba(0, 0, 0, 0.2);
  color: currentColor;
}

.lobby-menu__action--primary .lobby-menu__action-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Action Icon */
.lobby-menu__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--color-accent-primary);
}

.lobby-menu__action-icon svg {
  width: 18px;
  height: 18px;
}

/* Action Content */
.lobby-menu__action-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-menu__action-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__action--primary .lobby-menu__action-label {
  color: inherit;
}

.lobby-menu__action-desc {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Characters List */
.lobby-menu__characters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.lobby-menu__character {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.lobby-menu__character:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

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

/* Character Avatar */
.lobby-menu__character-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--color-text-muted);
}

.lobby-menu__character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-menu__character-avatar svg {
  width: 20px;
  height: 20px;
}

/* Character Info */
.lobby-menu__character-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lobby-menu__character-name {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__character-details {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

/* Character Arrow */
.lobby-menu__character-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--timing-fast) var(--ease-default);
}

.lobby-menu__character-arrow svg {
  width: 16px;
  height: 16px;
}

.lobby-menu__character:hover .lobby-menu__character-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary);
}

/* Preset Section - Quick Play Heroes */
.lobby-menu__section--presets {
  background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
  border: 1px solid var(--color-accent-primary);
  border-radius: 8px;
  padding: var(--space-4, 16px);
  position: relative;
  overflow: hidden;
}

.lobby-menu__section--presets::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary, var(--color-accent-primary)));
}

.lobby-menu__section--presets .lobby-menu__section-title {
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.lobby-menu__section-subtitle {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  margin-top: var(--space-1, 4px);
}

/* Preset Swipe Stack */
.lobby-menu__swipe-stack {
  position: relative;
  width: 100%;
  min-height: 200px;
  margin-top: var(--space-3, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Override character-swipe-card sizing within lobby context */
.lobby-menu__swipe-stack .character-swipe-card {
  position: absolute;
  width: 280px;
  max-width: 90%;
  padding: var(--space-4, 16px);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-subtle);
  border-radius: 8px;
  cursor: grab;
  will-change: transform;
}

.lobby-menu__swipe-stack .character-swipe-card:active {
  cursor: grabbing;
}

/* Swipe hint arrows below the stack */
.lobby-menu__swipe-hint {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-4, 16px) 0;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  opacity: 0.7;
}

.lobby-menu__swipe-hint-skip {
  color: var(--color-danger, #e06c75);
}

.lobby-menu__swipe-hint-play {
  color: var(--color-success, #98c379);
}

/* Responsive swipe stack */
@media (max-width: 480px) {
  .lobby-menu__swipe-stack {
    min-height: 180px;
  }

  .lobby-menu__swipe-stack .character-swipe-card {
    width: 240px;
  }
}

/* Empty State */
.lobby-menu__empty {
  text-align: center;
  padding: var(--space-6, 24px);
  color: var(--color-text-muted);
}

.lobby-menu__empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-2, 8px);
  opacity: 0.5;
}

.lobby-menu__empty-text {
  font-size: var(--font-size-sm, 14px);
}

/* Responsive */
@media (max-width: 480px) {
  .lobby-menu__actions {
    grid-template-columns: 1fr;
  }

  .lobby-menu__action {
    padding: var(--space-3, 12px);
  }

  .lobby-menu__action-icon {
    width: 32px;
    height: 32px;
  }

  .lobby-menu__action-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Animation delays for staggered entry */
.lobby-menu__action:nth-child(1) { animation-delay: 0.05s; }
.lobby-menu__action:nth-child(2) { animation-delay: 0.1s; }
.lobby-menu__action:nth-child(3) { animation-delay: 0.15s; }
.lobby-menu__action:nth-child(4) { animation-delay: 0.2s; }

.lobby-menu__character:nth-child(1) { animation-delay: 0.1s; }
.lobby-menu__character:nth-child(2) { animation-delay: 0.15s; }
.lobby-menu__character:nth-child(3) { animation-delay: 0.2s; }
.lobby-menu__character:nth-child(4) { animation-delay: 0.25s; }
.lobby-menu__character:nth-child(5) { animation-delay: 0.3s; }
.lobby-menu__character:nth-child(6) { animation-delay: 0.35s; }

.lobby-menu__action,
.lobby-menu__character {
  animation: lobbyItemSlideIn var(--timing-normal) var(--ease-out) backwards;
}

@keyframes lobbyItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Parchment Textures
 * ==================
 * Aged paper and parchment background effects for narrative content.
 * Uses CSS gradients for performance (no image assets needed).
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Parchment
 * ======================================== */

/* Subtle aged paper effect for text panels */
.dnd-parchment {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 40%,
      color-mix(in srgb, var(--color-accent-warning) 2%, var(--color-bg-secondary)) 60%,
      var(--color-bg-secondary)
    );
  position: relative;
}

/* Subtle edge darkening for depth */
.dnd-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 30px color-mix(in srgb, #000 8%, transparent),
    inset 0 0 10px color-mix(in srgb, #000 4%, transparent);
  border-radius: inherit;
}

/* ========================================
 * Texture Variants
 * ======================================== */

/* Old parchment - more yellow/aged look */
.dnd-parchment--aged {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-accent-warning) 6%, var(--color-bg-secondary)),
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)) 30%,
      var(--color-bg-secondary) 50%,
      color-mix(in srgb, var(--color-accent-warning) 4%, var(--color-bg-secondary)) 70%,
      color-mix(in srgb, var(--color-accent-orange) 3%, var(--color-bg-secondary))
    );
}

/* Dark parchment - for DM notes, quest logs */
.dnd-parchment--dark {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-purple) 3%, var(--color-bg-primary)),
      var(--color-bg-primary) 50%,
      color-mix(in srgb, var(--color-accent-purple) 2%, var(--color-bg-primary))
    );
}

/* Magical scroll - for spell descriptions */
.dnd-parchment--magical {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 15%,
      var(--color-bg-secondary) 85%,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary))
    );
}

/* ========================================
 * Sepia Overlay
 * ======================================== */

/* Sepia tone filter for narrative readout areas */
.dnd-sepia {
  filter: sepia(5%) saturate(95%);
}

.dnd-sepia--strong {
  filter: sepia(12%) saturate(90%);
}

/* ========================================
 * Torn Edge Effect
 * ======================================== */

/* Torn bottom edge for quest notes */
.dnd-torn-edge {
  position: relative;
  padding-bottom: var(--space-4);
}

.dnd-torn-edge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-bg-primary) 3%,
    transparent 5%,
    var(--color-bg-primary) 8%,
    transparent 12%,
    var(--color-bg-primary) 15%,
    transparent 18%,
    var(--color-bg-primary) 22%,
    transparent 25%,
    var(--color-bg-primary) 30%,
    transparent 33%,
    var(--color-bg-primary) 38%,
    transparent 42%,
    var(--color-bg-primary) 45%,
    transparent 50%,
    var(--color-bg-primary) 53%,
    transparent 58%,
    var(--color-bg-primary) 62%,
    transparent 65%,
    var(--color-bg-primary) 70%,
    transparent 73%,
    var(--color-bg-primary) 78%,
    transparent 82%,
    var(--color-bg-primary) 85%,
    transparent 90%,
    var(--color-bg-primary) 93%,
    transparent 97%,
    var(--color-bg-primary) 100%
  );
}

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

@media (prefers-reduced-motion: reduce) {
  .dnd-sepia,
  .dnd-sepia--strong {
    filter: none;
  }
}
/**
 * Custom Focus Indicators for Accessibility
 * ==========================================
 * Task #285: Standardized focus indicator utilities for WCAG 2.1 AAA compliance.
 *
 * Design Philosophy:
 * - Dual-ring pattern: solid outline + glow shadow for maximum visibility
 * - Consistent use of design tokens
 * - Utility classes for easy application across components
 * - Context-aware variants (gold for terminal default, semantic colors for states)
 *
 * Usage:
 * - Apply .focus-ring to elements for standard gold focus (terminal theme)
 * - Apply .focus-ring-gold for terminal-themed gold focus (alias for .focus-ring)
 * - Apply .focus-ring-inset for inset focus (buttons, cards)
 * - Use .focus-scale for interactive cards that should scale on focus
 */

/* ========================================
 * FOCUS DESIGN TOKENS
 * Extended from _tokens.css
 * ======================================== */

:root {
  /* Focus ring colors — primary is gold to match terminal theme */
  --focus-color-primary: var(--focus-ring-color, #ffd700);
  --focus-color-gold: var(--focus-ring-color, #ffd700);
  --focus-color-success: var(--color-accent-secondary, #98c379);
  --focus-color-danger: var(--color-accent-error, #e06c75);
  --focus-color-purple: var(--color-accent-purple, #c678dd);

  /* Focus ring glow alphas */
  --focus-glow-alpha: 0.25;
  --focus-glow-alpha-strong: 0.35;

  /* Focus ring sizes */
  --focus-ring-width: 3px;
  --focus-ring-width-lg: 4px;
  --focus-ring-glow-spread: 5px;
  --focus-ring-glow-spread-lg: 7px;

  /* Focus ring offsets */
  --focus-offset-default: 2px;
  --focus-offset-inset: -2px;
  --focus-offset-tight: 1px;

  /* Composite focus ring values */
  --focus-ring-primary: 0 0 0 var(--focus-ring-width) var(--focus-color-primary),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-gold-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-gold),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-success-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-success),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(152, 195, 121, var(--focus-glow-alpha));
  --focus-ring-danger-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-danger),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(224, 108, 117, var(--focus-glow-alpha));
}

/* ========================================
 * BASE FOCUS UTILITIES
 * Apply these classes for consistent focus styling
 * ======================================== */

/**
 * Standard gold focus ring (terminal theme)
 * Use for: forms, links, general interactive elements
 */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-primary);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Gold focus ring - Terminal theme
 * Use for: terminal UI, game elements, cards, panels
 */
.focus-ring-gold:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Success focus ring - Green
 * Use for: confirm buttons, success actions
 */
.focus-ring-success:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-success);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(152, 195, 121, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Danger focus ring - Red
 * Use for: delete buttons, destructive actions
 */
.focus-ring-danger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-danger);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Purple focus ring - Magic/DM theme
 * Use for: DM controls, magic-related UI
 */
.focus-ring-purple:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-purple);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(198, 120, 221, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/* ========================================
 * FOCUS RING SIZE VARIANTS
 * ======================================== */

/**
 * Large focus ring - More prominent
 * Use for: important CTAs, modal focuses
 */
.focus-ring-lg:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread-lg)
    rgba(255, 215, 0, var(--focus-glow-alpha-strong));
}

/**
 * Small focus ring - Subtle
 * Use for: inline elements, chips, badges
 */
.focus-ring-sm:focus-visible {
  outline-width: 2px;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* ========================================
 * FOCUS RING POSITION VARIANTS
 * ======================================== */

/**
 * Inset focus ring
 * Use for: buttons, cards with borders
 */
.focus-ring-inset:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

/**
 * Tight focus ring - Closer to element
 * Use for: form inputs, compact elements
 */
.focus-ring-tight:focus-visible {
  outline-offset: var(--focus-offset-tight);
}

/**
 * No offset - Directly on element border
 * Use for: chips, badges, small buttons
 */
.focus-ring-flush:focus-visible {
  outline-offset: 0;
}

/* ========================================
 * FOCUS BEHAVIOR MODIFIERS
 * ======================================== */

/**
 * Focus with scale transform
 * Use for: selection cards, clickable items
 */
.focus-scale:focus-visible {
  transform: translateY(-2px) scale(1.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/**
 * Focus with left border indicator
 * Use for: menu items, list items
 */
.focus-left-indicator:focus-visible {
  outline: none;
  background: var(--color-bg-hover, rgba(255, 215, 0, 0.1));
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Focus with background highlight
 * Use for: list items, selectable rows
 */
.focus-highlight:focus-visible {
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Dashed focus ring - for containers/panels
 * Use for: tab panels, content regions
 */
.focus-ring-dashed:focus-visible {
  outline-style: dashed;
}

/* ========================================
 * FOCUS-WITHIN UTILITIES
 * For containers that should highlight when child is focused
 * ======================================== */

/**
 * Container focus glow - gold
 * Use for: panels, cards with interactive children
 */
.focus-within-glow:focus-within {
  box-shadow: 0 0 0 3px var(--focus-color-gold),
    0 0 0 6px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Container focus border - subtle
 * Use for: form groups, sections
 */
.focus-within-border:focus-within {
  border-color: var(--focus-color-gold);
}

/* ========================================
 * SEMANTIC FOCUS STATES
 * Context-aware focus styling
 * ======================================== */

/**
 * Error state focus
 * Use for: invalid form fields
 */
.focus-error:focus-visible,
[aria-invalid="true"]:focus-visible {
  outline-color: var(--focus-color-danger);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
}

/**
 * Selected state focus
 * Use for: selected items that receive focus
 */
.focus-selected:focus-visible,
[aria-selected="true"]:focus-visible {
  outline-color: var(--focus-color-gold);
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Current/active state focus
 * Use for: current page, active tab
 */
.focus-current:focus-visible,
[aria-current]:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  outline-color: var(--focus-color-gold);
}

/* ========================================
 * SPECIFIC ELEMENT FOCUS PATTERNS
 * Consistent focus for common elements
 * ======================================== */

/**
 * Button focus pattern
 */
.btn-focus:focus-visible,
.focus-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
      rgba(255, 215, 0, var(--focus-glow-alpha)),
    0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Card focus pattern - with subtle lift
 */
.card-focus:focus-visible,
.focus-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3),
    0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  transform: translateX(4px);
  z-index: var(--z-sticky);
}

/**
 * Input focus pattern
 */
.input-focus:focus-visible,
.focus-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-tight);
  border-color: var(--focus-color-gold);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Tab focus pattern
 */
.tab-focus:focus-visible,
.focus-tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-inset);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Menu item focus pattern
 */
.menu-focus:focus-visible,
.focus-menu-item:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Chip/badge focus pattern
 */
.chip-focus:focus-visible,
.focus-chip:focus-visible {
  outline: 2px solid var(--focus-color-gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25);
  z-index: var(--z-sticky);
}

/* ========================================
 * ROVING TABINDEX SUPPORT
 * Focus for items managed with roving tabindex
 * ======================================== */

[data-focus-group] [tabindex="-1"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  z-index: var(--z-sticky);
}

/* ========================================
 * ACCESSIBILITY MODE OVERRIDES
 * ======================================== */

/* High Contrast Mode */
@media (prefers-contrast: more) {
  :root {
    --focus-ring-width: 4px;
    --focus-glow-alpha: 0.4;
    --focus-ring-glow-spread: 6px;
  }

  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline: 4px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .focus-left-indicator:focus-visible {
    outline: 4px solid Highlight;
    box-shadow: none;
    background: Canvas;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    border-color: Highlight;
    transform: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .focus-scale:focus-visible {
    transform: none;
    transition: none;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    transform: none;
  }
}

/* Touch Devices - Reduced glow intensity */
@media (hover: none) and (pointer: coarse) {
  :root {
    --focus-glow-alpha: 0.15;
    --focus-ring-glow-spread: 3px;
  }
}

/* Dark Mode Adjustments (already dark by default, but ensure vibrancy) */
@media (prefers-color-scheme: dark) {
  :root {
    --focus-ring-color: #ffed4e; /* Slightly brighter gold for dark backgrounds */
    --focus-color-primary: #ffed4e;
    --focus-color-gold: #ffed4e;
  }
}

/* ========================================
 * UTILITY HELPERS
 * ======================================== */

/**
 * Remove default focus styling (use with caution)
 * Only use when providing custom focus indicators
 */
.focus-none:focus-visible {
  outline: none;
  box-shadow: none;
}

/**
 * Ensure focus visible above overlays
 */
.focus-overlay:focus-visible {
  z-index: var(--z-floating-above);
}

/**
 * Focus ring for light backgrounds
 * Use for: modals, light-themed sections
 */
.focus-ring-light:focus-visible {
  outline-color: var(--color-bg-primary, #1a1a1a);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(26, 26, 26, 0.3);
}
/**
 * XP Animation Styles
 * ==================
 * Animated XP gain notifications, progress bars, and level-up celebrations.
 */

/* Container for floating XP numbers */
.xp-animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-ceiling);
  overflow: hidden;
}

/* Floating +XP number */
.xp-floater {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  transform: translate(-50%, 0);
  opacity: 0;
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
  text-shadow:
    0 0 8px var(--xp-glow, rgba(255, 215, 0, 0.6)),
    0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.xp-floater--animating {
  animation: xp-float-up 2.5s ease-out forwards;
}

.xp-floater--levelup {
  font-size: 1.5rem;
  color: var(--xp-levelup-color, #ff6b6b);
}

.xp-floater__icon {
  font-size: 1.4em;
}

.xp-floater__amount {
  letter-spacing: 0.05em;
}

.xp-floater__levelup {
  display: block;
  font-size: 0.7em;
  color: var(--xp-levelup-color, #ff6b6b);
  animation: xp-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes xp-float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.1);
  }
  30% {
    transform: translate(-50%, -40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(0.8);
  }
}

@keyframes xp-pulse {
  from {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--xp-glow, rgba(255, 107, 107, 0.6)),
      0 0 16px var(--xp-glow, rgba(255, 107, 107, 0.4));
  }
  to {
    transform: scale(1.05);
    text-shadow:
      0 0 12px var(--xp-glow, rgba(255, 107, 107, 0.8)),
      0 0 24px var(--xp-glow, rgba(255, 107, 107, 0.6));
  }
}

/* XP Progress Bar */
.xp-progress {
  height: 6px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.xp-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--xp-bar-start, #8b5cf6) 0%,
    var(--xp-bar-end, #ffd700) 100%
  );
  border-radius: 3px;
  transition: width 0.3s ease-out;
  position: relative;
}

.xp-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: xp-shimmer 2s infinite linear;
  opacity: 0;
}

.xp-progress--flash .xp-progress__fill::after {
  opacity: 1;
}

@keyframes xp-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* XP Counter animation */
.xp-counter--animating {
  animation: xp-counter-pulse 0.15s ease-in-out infinite alternate;
  color: var(--xp-color, #ffd700);
}

@keyframes xp-counter-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Level Up Celebration Overlay */
.xp-levelup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.xp-levelup-overlay--visible {
  opacity: 1;
}

.xp-levelup-overlay--fading {
  opacity: 0;
}

.xp-levelup-content {
  text-align: center;
  transform: scale(0.5);
  opacity: 0;
  animation: xp-levelup-entrance 0.5s ease-out forwards;
}

.xp-levelup-overlay--visible .xp-levelup-content {
  animation-play-state: running;
}

@keyframes xp-levelup-entrance {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.xp-levelup-icon {
  font-size: 4rem;
  animation: xp-levelup-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

.xp-levelup-text {
  font-family: var(--font-heading, var(--font-mono, monospace));
  font-size: 3rem;
  font-weight: bold;
  color: var(--xp-levelup-color, #ffd700);
  text-shadow:
    0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
    0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
    0 4px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.1em;
  animation: xp-levelup-glow 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-glow {
  from {
    text-shadow:
      0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
      0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
  to {
    text-shadow:
      0 0 30px var(--xp-levelup-glow, rgba(255, 215, 0, 1)),
      0 0 60px var(--xp-levelup-glow, rgba(255, 215, 0, 0.7)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

.xp-levelup-level {
  font-family: var(--font-mono, monospace);
  font-size: 2rem;
  color: var(--text-1, #e0e0e0);
  margin-top: var(--space-sm, 8px);
}

.xp-levelup-name {
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  color: var(--text-2, #a0a0a0);
  margin-top: var(--space-xs, 4px);
}

/* Inline XP display in character status */
.xp-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--text-2, #a0a0a0);
}

.xp-display__label {
  color: var(--text-3, #666);
}

.xp-display__value {
  color: var(--xp-color, #ffd700);
  font-weight: 500;
}

.xp-display__next {
  color: var(--text-3, #666);
  font-size: 0.8em;
}

/* Compact XP bar for status area */
.xp-bar-compact {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-size: 0.75rem;
}

.xp-bar-compact__bar {
  flex: 1;
  height: 4px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}

.xp-bar-compact__fill {
  height: 100%;
  background: var(--xp-color, #ffd700);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.xp-bar-compact__text {
  color: var(--text-3, #666);
  white-space: nowrap;
}

/* Tool result XP display */
.tool-result-item.xp-gain {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  );
  border-left: 3px solid var(--xp-color, #ffd700);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border-radius: 4px;
}

.tool-result-item.xp-gain .xp-gain__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
}

.tool-result-item.xp-gain .xp-gain__icon {
  font-size: 1.5em;
}

.tool-result-item.xp-gain .xp-gain__amount {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
}

.tool-result-item.xp-gain .xp-gain__reason {
  color: var(--text-2, #a0a0a0);
  font-size: 0.9rem;
}

.tool-result-item.xp-gain--levelup {
  border-left-color: var(--xp-levelup-color, #ff6b6b);
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.15) 0%,
    rgba(255, 215, 0, 0.15) 100%
  );
}

.tool-result-item.xp-gain--levelup .xp-gain__levelup {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  margin-top: var(--space-xs, 4px);
  padding-top: var(--space-xs, 4px);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--xp-levelup-color, #ff6b6b);
  font-weight: bold;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .xp-floater--animating {
    animation: xp-float-up-reduced 2s ease-out forwards;
  }

  @keyframes xp-float-up-reduced {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .xp-levelup-content {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }

  .xp-levelup-icon,
  .xp-levelup-text,
  .xp-floater__levelup,
  .xp-counter--animating {
    animation: none;
  }

  .xp-progress__fill::after {
    animation: none;
  }
}
/**
 * Level-Up Celebration 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;
  }
}
/**
 * Inline narrative image segment (#3789)
 * --------------------------------------
 * Styles for `<figure class="narrative-image narrative-image--{size} narrative-image--{align}">`
 * emitted by lib/renderers/image_segment_renderer.ts.
 *
 * Sizes:  thumb (96px tall), card (240px tall, default), hero (full width)
 * Aligns: left, center (default), right
 *
 * Lightbox modal lives in `.narrative-image-lightbox` overlay appended to <body>.
 */

.narrative-image {
  display: block;
  margin: 0.75rem auto;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--terminal-bg-elev, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--terminal-border, rgba(120, 200, 220, 0.18));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.narrative-image__img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: filter 150ms ease, transform 150ms ease;
}

.narrative-image__img:hover {
  filter: brightness(1.08);
}

.narrative-image__img:focus-visible {
  outline: 2px solid var(--terminal-accent, #6cf);
  outline-offset: 2px;
}

.narrative-image__caption {
  padding: 0.4rem 0.6rem;
  font-size: 0.85em;
  color: var(--terminal-fg-muted, #9bb);
  font-style: italic;
  text-align: center;
  border-top: 1px solid var(--terminal-border, rgba(120, 200, 220, 0.12));
  background: rgba(0, 0, 0, 0.25);
}

/* Size variants */
.narrative-image--thumb {
  max-width: 180px;
}
.narrative-image--thumb .narrative-image__img {
  max-height: 96px;
  object-fit: cover;
}

.narrative-image--card {
  max-width: 420px;
}
.narrative-image--card .narrative-image__img {
  max-height: 320px;
  object-fit: cover;
}

.narrative-image--hero {
  max-width: 100%;
}
.narrative-image--hero .narrative-image__img {
  max-height: 540px;
  object-fit: cover;
}

/* Alignment variants */
.narrative-image--left {
  margin-left: 0;
  margin-right: auto;
}
.narrative-image--center {
  margin-left: auto;
  margin-right: auto;
}
.narrative-image--right {
  margin-left: auto;
  margin-right: 0;
}

/* =====================================================================
 * Lightbox modal
 * =====================================================================
 */

.narrative-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 2rem;
  cursor: zoom-out;
  animation: narrative-image-lightbox-fade-in 150ms ease;
}

.narrative-image-lightbox__img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.7);
  cursor: default;
}

.narrative-image-lightbox__caption {
  margin-top: 0.75rem;
  max-width: 90vw;
  color: var(--terminal-fg, #cde);
  font-size: 0.9em;
  text-align: center;
  font-style: italic;
}

.narrative-image-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.narrative-image-lightbox__close:hover,
.narrative-image-lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  outline: 2px solid var(--terminal-accent, #6cf);
}

body.narrative-image-lightbox-open {
  overflow: hidden;
}

@keyframes narrative-image-lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .narrative-image-lightbox {
    animation: none;
  }
  .narrative-image__img {
    transition: none;
  }
}
/* ==========================================================================
 * Dice History Panel Component
 * Shows chronological roll history with breakdown and context
 * Part of the Interactive Narrative system
 * ========================================================================== */

.dice-history-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-mono);
}

/* Header */
.dice-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.dice-history-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.dice-history-title-icon {
  font-size: 1.2em;
}

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

.dice-history-clear-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: rgba(255, 255, 255, 0.05);
}

/* List container */
.dice-history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Empty state */
.dice-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.dice-history-empty-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.dice-history-empty-text {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.dice-history-empty-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Roll entry */
.dice-history-entry {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-subtle);
  transition: background 0.2s ease, color 0.2s ease;
}

.dice-history-entry:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Success/failure border colors */
.dice-history-entry[data-success="true"] {
  border-left-color: #22c55e;
}

.dice-history-entry[data-success="false"] {
  border-left-color: #ef4444;
}

/* Entry header */
.dice-history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.dice-history-entry-type {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dice-history-entry-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Breakdown */
.dice-history-entry-breakdown {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.dice-history-entry-expression {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.dice-history-entry-arrow {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-dice {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
}

.dice-history-entry-modifier {
  color: var(--color-text-muted);
}

.dice-history-entry-equals {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-total {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.dice-history-entry[data-success="true"] .dice-history-entry-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.dice-history-entry[data-success="false"] .dice-history-entry-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.dice-history-entry-outcome {
  margin-left: var(--space-1);
  font-weight: bold;
}

.dice-history-entry[data-success="true"] .dice-history-entry-outcome {
  color: #22c55e;
}

.dice-history-entry[data-success="false"] .dice-history-entry-outcome {
  color: #ef4444;
}

/* Reason/context */
.dice-history-entry-reason {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* New entry animation */
.dice-history-entry--new {
  animation: rollEntrySlideIn 0.3s ease-out;
  background: rgba(255, 215, 0, 0.15);
}

@keyframes rollEntrySlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    background: rgba(255, 215, 0, 0.3);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 215, 0, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dice-history-entry--new {
    animation: none;
  }
}
/**
 * Bloodied Indicator Styles
 * =========================
 * Visual indicator for enemies at 50% HP or below.
 * D&D 5e convention to help players gauge enemy health.
 */

/* ========================================
 * Combatant Health State Classes
 * ======================================== */

.combatant--healthy {
  /* Default state, no special styling */
}

.combatant--injured {
  --combatant-accent: var(--color-warning, #F59E0B);
}

.combatant--bloodied {
  --combatant-accent: var(--color-danger, #EF4444);
  position: relative;
}

.combatant--critical {
  --combatant-accent: var(--color-accent-error, #DC2626);
  position: relative;
}

.combatant--downed {
  --combatant-accent: var(--color-muted, #6B7280);
  opacity: 0.6;
}

/* ========================================
 * Bloodied Visual Effects
 * ======================================== */

/* Red pulsing glow for bloodied enemies */
.combatant--bloodied::before,
.combatant--critical::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: transparent;
  border: 2px solid var(--combatant-accent);
  animation: bloodied-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes bloodied-pulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 5px var(--combatant-accent);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }
}

/* Critical state - faster pulse */
.combatant--critical::before {
  animation: critical-pulse 1s ease-in-out infinite;
}

@keyframes critical-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 8px var(--combatant-accent);
    border-color: var(--combatant-accent);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px var(--combatant-accent), 0 0 30px rgba(220, 38, 38, 0.3);
    border-color: #FF6B6B;
  }
}

/* ========================================
 * Bloodied Label/Badge
 * ======================================== */

.bloodied-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-danger, #EF4444);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sticky);
  animation: bloodied-badge-appear 0.3s ease-out;
}

@keyframes bloodied-badge-appear {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-5px);
  }
  60% {
    transform: scale(1.1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bloodied-indicator--critical {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  animation: critical-badge-flash 0.8s ease-in-out infinite;
}

@keyframes critical-badge-flash {
  0%, 100% {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    background: linear-gradient(135deg, #FF6B6B, #EF4444);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Combat Tracker Integration
 * ======================================== */

/* Bloodied row highlight in combat tracker */
.combat-tracker__row.combatant--bloodied,
.initiative-tracker__entry.combatant--bloodied {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
}

.combat-tracker__row.combatant--critical,
.initiative-tracker__entry.combatant--critical {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, transparent 100%);
}

/* HP bar color changes */
.combatant--bloodied .hp-bar,
.combatant--bloodied .cs-hp-fill {
  background: linear-gradient(90deg, #EF4444, #DC2626);
}

.combatant--critical .hp-bar,
.combatant--critical .cs-hp-fill {
  background: linear-gradient(90deg, #DC2626, #991B1B);
  animation: hp-bar-critical-flash 0.8s ease-in-out infinite;
}

@keyframes hp-bar-critical-flash {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* ========================================
 * Inline Combatant Card Styling
 * ======================================== */

.combatant-card.combatant--bloodied {
  border-left: 3px solid var(--color-danger, #EF4444);
}

.combatant-card.combatant--critical {
  border-left: 3px solid var(--color-accent-error, #DC2626);
  box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.2);
}

/* Health status text */
.combatant-card__health-status {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  margin-left: var(--space-2, 8px);
}

.combatant-card__health-status--bloodied {
  color: var(--color-danger, #EF4444);
}

.combatant-card__health-status--critical {
  color: var(--color-accent-error, #DC2626);
  animation: critical-text-flash 1s ease-in-out infinite;
}

@keyframes critical-text-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .combatant--bloodied::before,
  .combatant--critical::before,
  .bloodied-indicator,
  .bloodied-indicator--critical,
  .combatant--critical .hp-bar,
  .combatant--critical .cs-hp-fill,
  .combatant-card__health-status--critical {
    animation: none;
  }

  /* Static visual indicators instead of animation */
  .combatant--bloodied::before {
    opacity: 0.6;
    box-shadow: 0 0 10px var(--combatant-accent);
  }

  .combatant--critical::before {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }

  .bloodied-indicator {
    opacity: 1;
    transform: none;
  }
}

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

@media (prefers-contrast: high) {
  .combatant--bloodied::before,
  .combatant--critical::before {
    border-width: 3px;
  }

  .bloodied-indicator {
    font-size: var(--font-size-xs, 11px);
    padding: 3px 8px;
  }
}
/**
 * Concentration Indicator Styles
 * ==============================
 * Visual indicator for active concentration spells.
 * D&D 5e concentration tracking with break button.
 */

/* ========================================
 * Main Indicator Container
 * ======================================== */

.concentration-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  box-shadow:
    0 0 10px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: concentration-appear 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

@keyframes concentration-appear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
  }
  60% {
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle magic shimmer effect */
.concentration-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: concentration-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes concentration-shimmer {
  0%, 100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(50%);
  }
}

/* ========================================
 * Icon with Pulse Animation
 * ======================================== */

.concentration-indicator__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.concentration-indicator__pulse {
  width: 100%;
  height: 100%;
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

@keyframes concentration-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }
}

/* ========================================
 * Label Content
 * ======================================== */

.concentration-indicator__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.concentration-indicator__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
}

.concentration-indicator__duration {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-violet-400, #A78BFA);
  opacity: 0.8;
}

/* ========================================
 * Break Concentration Button
 * ======================================== */

.concentration-indicator__break {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: var(--space-1, 4px);
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-red-400, #F87171);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.concentration-indicator__break:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.6);
  color: var(--color-red-300, #FCA5A5);
  transform: scale(1.1);
}

.concentration-indicator__break:focus-visible {
  outline: 2px solid var(--color-red-400, #F87171);
  outline-offset: 2px;
}

.concentration-indicator__break:active {
  transform: scale(0.95);
}

.concentration-indicator__break svg {
  width: 12px;
  height: 12px;
}

/* ========================================
 * Toast Customizations
 * ======================================== */

.toast--concentration {
  --toast-accent: var(--color-violet-500, #8B5CF6);
  border-left-color: var(--color-violet-500, #8B5CF6);
}

.toast--concentration-broken {
  --toast-accent: var(--color-amber-500, #F59E0B);
  border-left-color: var(--color-amber-500, #F59E0B);
}

.toast--concentration-check {
  --toast-accent: var(--color-red-500, #EF4444);
  border-left-color: var(--color-red-500, #EF4444);
  animation: toast-urgent-pulse 0.5s ease-in-out 2;
}

@keyframes toast-urgent-pulse {
  0%, 100% {
    box-shadow: var(--toast-shadow, 0 4px 6px rgba(0, 0, 0, 0.3));
  }
  50% {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
 * Character Sheet Integration
 * ======================================== */

.character-sheet__header .concentration-indicator {
  margin-left: auto;
}

/* Status bar integration */
.status-bar__right .concentration-indicator {
  margin-right: var(--space-2, 8px);
}

/* Combat tracker integration */
.combat-tracker__header .concentration-indicator {
  font-size: var(--font-size-xs, 11px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
}

.combat-tracker__header .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.combat-tracker__header .concentration-indicator__break {
  width: 14px;
  height: 14px;
}

.combat-tracker__header .concentration-indicator__break svg {
  width: 10px;
  height: 10px;
}

/* ========================================
 * Compact/Mobile Variant
 * ======================================== */

.concentration-indicator--compact {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
}

.concentration-indicator--compact .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.concentration-indicator--compact .concentration-indicator__duration {
  display: none;
}

@media (max-width: 640px) {
  .concentration-indicator {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--font-size-xs, 11px);
  }

  .concentration-indicator .concentration-indicator__icon {
    width: 16px;
    height: 16px;
  }

  .concentration-indicator .concentration-indicator__duration {
    display: none;
  }
}

/* ========================================
 * Concentration Warning State
 * (when save is required)
 * ======================================== */

.concentration-indicator--warning {
  border-color: rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 100%
  );
  animation: concentration-warning-pulse 0.5s ease-in-out infinite;
}

@keyframes concentration-warning-pulse {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .concentration-indicator,
  .concentration-indicator__pulse,
  .concentration-indicator--warning,
  .toast--concentration-check {
    animation: none;
  }

  .concentration-indicator::before {
    animation: none;
    display: none;
  }

  .concentration-indicator__pulse {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }

  .concentration-indicator--warning {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  }
}

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

@media (prefers-contrast: high) {
  .concentration-indicator {
    border-width: 2px;
    background: rgba(139, 92, 246, 0.25);
  }

  .concentration-indicator__spell {
    font-weight: 700;
  }

  .concentration-indicator__break {
    border-width: 2px;
  }
}

/* ========================================
 * Dark/Light Theme Adjustments
 * ======================================== */

[data-theme="light"] .concentration-indicator {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-indicator__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-indicator__duration {
  color: var(--color-violet-600, #7C3AED);
}

[data-theme="light"] .concentration-indicator__pulse {
  color: var(--color-violet-600, #7C3AED);
}

/* ========================================
 * Status Bar Widget Version
 * Compact persistent indicator in status bar
 * ======================================== */

.status-widget--concentration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  animation: concentration-widget-appear 0.3s ease-out;
}

@keyframes concentration-widget-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.concentration-widget__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.concentration-widget__pulse {
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

.concentration-widget__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover state for widget */
.status-widget--concentration:hover {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(168, 85, 247, 0.15) 100%
  );
  border-color: rgba(139, 92, 246, 0.6);
}

/* Mobile: more compact */
@media (max-width: 640px) {
  .status-widget--concentration {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 11px);
    gap: 4px;
  }

  .concentration-widget__pulse {
    width: 12px;
    height: 12px;
  }

  .concentration-widget__spell {
    max-width: 100px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .status-widget--concentration {
    animation: none;
  }

  .concentration-widget__pulse {
    animation: none;
  }
}

/* Light theme */
[data-theme="light"] .status-widget--concentration {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-widget__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-widget__pulse {
  color: var(--color-violet-600, #7C3AED);
}
/**
 * Spell Slot Widget
 * =================
 * Task #307: Compact spell slot visual tracker for status bar.
 *
 * Design:
 * - Horizontal layout showing all spell levels with pips
 * - Purple gem aesthetic matching spellbook
 * - Compact size suitable for status bar
 * - Real-time updates via WebSocket events
 */

/* Widget Container */
.spell-slot-widget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 28px;
}

.spell-slot-widget:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-purple);
}

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

/* Widget Label */
.spell-slot-widget__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Compact trigger row (icon + summary text). Used in the status-bar markup;
 * the popover-grid view lives below. Rendered as a <button> for keyboard
 * accessibility but visually integrates into the spell-slot chip. */
.spell-slot-widget__compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.spell-slot-widget__compact:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* B6: hover + active feedback on the inner button (the chip wrapper has its own
 * hover; the inner element previously had no interactive states of its own). */
.spell-slot-widget__compact:hover {
  color: var(--color-accent-purple);
}

.spell-slot-widget__compact:active {
  transform: scale(0.97);
}

.spell-slot-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-purple);
}

.spell-slot-widget__icon .svg-icon {
  width: 14px;
  height: 14px;
}

/* Slots Container - All Levels */
.spell-slot-widget__slots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Individual Slot Level Group */
.spell-slot-widget__level {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Level Number Label */
.spell-slot-widget__level-num {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  min-width: 10px;
  text-align: center;
}

/* Pips Container */
.spell-slot-widget__pips {
  display: flex;
  gap: 2px;
}

/* Individual Pip */
.spell-slot-widget__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Filled Pip - Available Slot */
.spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 4px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Expended Pip - Used Slot */
.spell-slot-widget__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Summary Text (alternative compact view) */
.spell-slot-widget__summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.spell-slot-widget__summary-total {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Expanded Popover View
 * ======================================== */

.spell-slot-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.spell-slot-widget--expanded .spell-slot-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.spell-slot-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.spell-slot-popover__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Full Slot Grid in Popover */
.spell-slot-popover__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

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

.spell-slot-popover__level {
  min-width: 50px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-popover__pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spell-slot-popover__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 6px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-slot-popover__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-slot-popover__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 30px;
  text-align: right;
}

/* Empty State */
.spell-slot-widget--empty {
  opacity: 0.6;
  cursor: default;
}

.spell-slot-widget--empty:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

/* ========================================
 * Slot Usage Animation
 * ======================================== */

.spell-slot-widget__pip--using {
  animation: pipUsed 0.5s ease-out;
}

@keyframes pipUsed {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(198, 120, 221, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }
}

/* Slot Restoration Animation */
.spell-slot-widget__pip--restoring {
  animation: pipRestored 0.5s ease-out;
}

@keyframes pipRestored {
  0% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
 * Warlock Pact Magic Variant
 * ======================================== */

.spell-slot-widget--pact-magic .spell-slot-widget__label {
  color: var(--color-accent-cyan);
}

.spell-slot-widget--pact-magic .spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(86, 182, 194, 1),
    rgba(34, 139, 150, 0.8)
  );
  box-shadow:
    0 0 4px rgba(86, 182, 194, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

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

/* The compact trigger always shows icon + summary (e.g. "Slots" or "3/5").
 * The expanded `__slots` pip strip is hidden on narrow screens — users open
 * the popover instead. */
.spell-slot-widget__summary {
  display: inline;
}

@media (max-width: 768px) {
  .spell-slot-widget__slots {
    display: none;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .spell-slot-widget,
  .spell-slot-widget__pip,
  .spell-slot-popover,
  .spell-slot-popover__pip {
    transition: none;
  }

  .spell-slot-popover__pip--filled,
  .spell-slot-widget__pip--using,
  .spell-slot-widget__pip--restoring {
    animation: none;
  }
}

/* ========================================
 * Gem Sparkle Animation (shared with spellbook)
 * ======================================== */

/**
 * Scroll to Latest Button
 * =======================
 * Floating button that appears when user scrolls up in narrative.
 * Allows quick return to most recent messages.
 * Designed to be unobtrusive - small, translucent, and out of the way.
 */

/* ========================================
 * Main Button Styles
 * ======================================== */

.scroll-to-latest {
  position: absolute;
  bottom: calc(var(--space-4, 16px) + 60px); /* Above input area */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--z-overlay, 50);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px 12px;

  background: var(--color-surface-elevated, #1F2937);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  color: var(--color-text-secondary, #9CA3AF);
  font-size: var(--font-size-2xs, 11px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.scroll-to-latest.visible {
  opacity: 0.7;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.scroll-to-latest:hover {
  opacity: 1;
  color: var(--color-text-primary, #F9FAFB);
  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.15));
}

.scroll-to-latest:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  opacity: 1;
}

.scroll-to-latest:active {
  transform: translateX(-50%) translateY(1px);
  opacity: 1;
}

/* ========================================
 * Icon Styles
 * ======================================== */

.scroll-to-latest__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.scroll-to-latest:hover .scroll-to-latest__icon {
  opacity: 1;
}

.scroll-to-latest__icon svg {
  width: 100%;
  height: 100%;
}

/* ========================================
 * Text Label
 * ======================================== */

.scroll-to-latest__text {
  line-height: 1;
}

/* ========================================
 * Badge Variant (with unread count)
 * ======================================== */

.scroll-to-latest__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-1, 4px);
  margin-left: 2px;

  background: var(--color-primary, #3B82F6);
  border-radius: var(--radius-full, 9999px);

  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  color: white;
}

.scroll-to-latest:hover .scroll-to-latest__badge {
  background: white;
  color: var(--color-primary, #3B82F6);
}

/* ========================================
 * Compact Mobile Variant
 * ======================================== */

@media (max-width: 480px) {
  .scroll-to-latest {
    padding: 4px 10px;
    bottom: calc(var(--space-3, 12px) + 50px);
  }

  .scroll-to-latest__text {
    display: none;
  }

  .scroll-to-latest__icon {
    width: 14px;
    height: 14px;
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest {
    transition: none;
  }

  .scroll-to-latest.visible {
    transform: translateX(-50%);
  }

  .scroll-to-latest:active {
    transform: translateX(-50%);
  }
}

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

@media (prefers-contrast: high) {
  .scroll-to-latest {
    border-width: 2px;
    font-weight: 600;
  }

  .scroll-to-latest.visible {
    opacity: 1;
  }
}

/* ========================================
 * Light Theme
 * ======================================== */

[data-theme="light"] .scroll-to-latest {
  background: var(--color-surface, #FFFFFF);
  border-color: var(--color-border, rgba(0, 0, 0, 0.08));
  color: var(--color-text-secondary, #6B7280);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .scroll-to-latest:hover {
  color: var(--color-text-primary, #111827);
  border-color: var(--color-border, rgba(0, 0, 0, 0.15));
}
/* ============================================
 * Play Mode 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;
  }
}
/*
 * Spectator-mode overlay (#3776 Phase 2 of #3764).
 * ================================================
 *
 * Reuses the .input-blocked-overlay shell from _play_mode.css but tints
 * to the spectator accent (purple) instead of the wait-your-turn yellow,
 * and adds a compact eye icon. The DM-controlled tooltip on hover
 * explains why the input is read-only ("the DM has to pull you in").
 *
 * Rendered by app/views/terminal/panels/narrative/_input_area.html.erb
 * when session.current_room == 'spectator_view' OR session cannot
 * participate (true spectators + late-joiner-spectators).
 *
 * Server-side enforcement lives in
 * app/channels/concerns/terminal_dm/guards.rb#require_participant!
 * — this file is purely visual.
 */

.input-blocked-overlay--spectator .input-blocked-overlay__text {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  animation: none; /* Static — spectators are not waiting on a turn */
}

.input-blocked-overlay__icon {
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
}

/* BEM `--hidden` state class — canonical mechanism per #4268 finding 7.1.
   Mirrors the `.hidden` rule in _play_mode.css (kept there for back-compat
   with turn_status_controller.js, which toggles generic `.hidden`). New
   callers should toggle `.input-blocked-overlay--hidden`. */
.input-blocked-overlay--hidden {
  display: none;
}
/* ========================================
 * UI Pointer - Contextual Hints System
 * Used by AI DM to guide players to UI elements
 * ======================================== */

.ui-pointer {
  position: fixed;
  /* Floating UI layer (1000) — above panels and popovers but below modal overlays.
   * Tutorial pointers shouldn't obscure boot sequence or command palette (--z-sky=10000).
   * Part of the #2169 z-token consolidation followed through in tutorial revival (#2278). */
  z-index: var(--z-floating);
  max-width: 280px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
  pointer-events: auto;
}

.ui-pointer--visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-pointer--hiding {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* ========================================
 * Tooltip Style (default)
 * ======================================== */

.ui-pointer--tooltip {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(229, 192, 123, 0.12) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-pointer--tooltip .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow positions */
.ui-pointer--tooltip[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="left"] .ui-pointer__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="right"] .ui-pointer__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgba(255, 215, 0, 0.3);
}

/* ========================================
 * Arrow Style (prominent pointing)
 * ======================================== */

.ui-pointer--arrow {
  padding: var(--space-2) var(--space-3);
  background: var(--color-gold);
  color: var(--color-bg-dark);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.ui-pointer--arrow .ui-pointer__text {
  color: var(--color-bg-dark);
  font-weight: 600;
}

.ui-pointer--arrow .ui-pointer__button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
  color: var(--color-bg-dark);
}

.ui-pointer--arrow .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.ui-pointer--arrow[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--color-gold);
}

.ui-pointer--arrow[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--color-gold);
}

/* ========================================
 * Spotlight Style (dims surroundings)
 * ======================================== */

.ui-pointer--spotlight {
  padding: var(--space-3);
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.ui-pointer--spotlight::before {
  content: '';
  position: fixed;
  top: var(--spotlight-top, 0);
  left: var(--spotlight-left, 0);
  width: var(--spotlight-width, 100px);
  height: var(--spotlight-height, 50px);
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.7),
    0 0 20px 5px rgba(255, 215, 0, 0.3);
  pointer-events: none;
}

.ui-pointer-spotlight-target {
  position: relative;
  /* One layer above the pointer so the highlighted target stays visible. */
  z-index: var(--z-floating-above);
}

/* ========================================
 * Pulse Style (gentle attention)
 * ======================================== */

.ui-pointer--pulse {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(100, 200, 255, 0.15) 0%,
    rgba(150, 220, 255, 0.1) 100%
  );
  border: 1px solid rgba(100, 200, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.ui-pointer-pulse-target {
  animation: ui-pointer-pulse-target 2s ease-in-out infinite;
}

@keyframes ui-pointer-pulse-target {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(100, 200, 255, 0);
  }
}

/* ========================================
 * Content Elements
 * ======================================== */

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

.ui-pointer__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.ui-pointer__button {
  align-self: flex-end;
  padding: var(--space-1-5) var(--space-3);
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ui-pointer__button:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.ui-pointer__button:active {
  transform: scale(0.98);
}

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

@media (prefers-reduced-motion: reduce) {
  .ui-pointer {
    transition: opacity 0.1s ease-out;
    transform: none;
  }

  .ui-pointer--visible {
    transform: none;
  }

  .ui-pointer-pulse-target {
    animation: none;
    box-shadow: 0 0 0 3px rgba(100, 200, 255, 0.5);
  }
}

/* ========================================
 * Mobile Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .ui-pointer {
    max-width: calc(100vw - 32px);
  }

  .ui-pointer__text {
    font-size: var(--font-size-xs);
  }
}
/**
 * Context-Aware Theming
 * ======================
 * Phase 4 P2-14: Dynamic theme shifts based on game context
 *
 * Usage:
 *   <div data-context="combat">...</div>
 *   <div data-context="rest">...</div>
 *   <div data-context="dungeon">...</div>
 *   <div data-context="social">...</div>
 */

/* ========================================
 * COMBAT CONTEXT
 * Red/orange aggressive theme
 * ======================================== */

[data-context="combat"] {
  --context-accent: var(--color-accent-error);
  --context-glow: 0 0 12px rgba(224, 108, 117, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-error) 40%, var(--color-border-default));
  --context-bg-tint: rgba(224, 108, 117, 0.03);
}

[data-context="combat"] .panel,
[data-context="combat"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 60px var(--context-bg-tint);
}

[data-context="combat"] .panel-header {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-error) 8%, transparent),
    transparent
  );
}

/* Combat pulse animation for emphasis */
[data-context="combat"] .combat-indicator {
  animation: combatPulse 2s ease-in-out infinite;
}

@keyframes combatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; filter: brightness(1.2); }
}

/* ========================================
 * REST/TAVERN CONTEXT
 * Warm golden theme
 * ======================================== */

[data-context="rest"],
[data-context="tavern"] {
  --context-accent: var(--color-gold);
  --context-glow: 0 0 12px rgba(255, 215, 0, 0.3);
  --context-border: color-mix(in srgb, var(--color-gold) 30%, var(--color-border-default));
  --context-bg-tint: rgba(255, 215, 0, 0.02);
}

[data-context="rest"] .panel,
[data-context="tavern"] .panel,
[data-context="rest"] .narrative-panel,
[data-context="tavern"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Cozy flicker effect for tavern */
[data-context="tavern"] .narrative-entry--dm::before {
  animation: tavernFlicker 4s ease-in-out infinite;
}

@keyframes tavernFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* ========================================
 * DUNGEON/EXPLORATION CONTEXT
 * Cool blue/cyan mysterious theme
 * ======================================== */

[data-context="dungeon"],
[data-context="exploration"] {
  --context-accent: var(--color-accent-cyan);
  --context-glow: 0 0 12px rgba(86, 182, 194, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-cyan) 30%, var(--color-border-default));
  --context-bg-tint: rgba(86, 182, 194, 0.02);
}

[data-context="dungeon"] .panel,
[data-context="exploration"] .panel,
[data-context="dungeon"] .narrative-panel,
[data-context="exploration"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Subtle mystery effect */
[data-context="dungeon"] .narrative-entry--dm {
  text-shadow: 0 0 20px rgba(86, 182, 194, 0.1);
}

/* ========================================
 * SOCIAL/DIALOGUE CONTEXT
 * Purple/warm social theme
 * ======================================== */

[data-context="social"],
[data-context="dialogue"] {
  --context-accent: var(--color-accent-purple);
  --context-glow: 0 0 12px rgba(198, 120, 221, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-border-default));
  --context-bg-tint: rgba(198, 120, 221, 0.02);
}

[data-context="social"] .panel,
[data-context="dialogue"] .panel {
  border-color: var(--context-border);
}

/* ========================================
 * DANGER/BOSS CONTEXT
 * Deep red ominous theme
 * ======================================== */

[data-context="danger"],
[data-context="boss"] {
  --context-accent: #8B0000;
  --context-glow: 0 0 20px rgba(139, 0, 0, 0.5);
  --context-border: color-mix(in srgb, #8B0000 50%, var(--color-border-default));
  --context-bg-tint: rgba(139, 0, 0, 0.04);
}

[data-context="danger"] .panel,
[data-context="boss"] .panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 100px var(--context-bg-tint);
}

/* Ominous pulsing for boss encounters */
[data-context="boss"] .narrative-panel {
  animation: bossOmen 3s ease-in-out infinite;
}

@keyframes bossOmen {
  0%, 100% {
    box-shadow: inset 0 0 100px rgba(139, 0, 0, 0.04);
  }
  50% {
    box-shadow: inset 0 0 120px rgba(139, 0, 0, 0.08);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  [data-context] .combat-indicator,
  [data-context="tavern"] .narrative-entry--dm::before,
  [data-context="boss"] .narrative-panel {
    animation: none;
  }
}
/* ============================================================================
 * ENCOUNTER DIFFICULTY INDICATOR
 * ============================================================================
 * Visual indicator showing the difficulty level of combat encounters
 * Based on D&D 5e encounter building rules (DMG p.82)
 *
 * Task #312: Encounter Difficulty Indicator
 * --------------------------------------------------------------------------*/

/* Difficulty badge in combat panel header */
.difficulty-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.difficulty-indicator__icon {
  font-size: 14px;
  line-height: 1;
}

.difficulty-indicator__label {
  line-height: 1;
}

/* Difficulty levels with color coding */
.difficulty-indicator--trivial {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-secondary, #9CA3AF);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.difficulty-indicator--easy {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22C55E);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.difficulty-indicator--medium {
  background: rgba(234, 179, 8, 0.15);
  color: var(--color-warning, #EAB308);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.difficulty-indicator--hard {
  background: rgba(249, 115, 22, 0.15);
  color: var(--color-orange, #F97316);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.difficulty-indicator--deadly {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger, #EF4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: deadly-pulse 2s ease-in-out infinite;
}

/* Pulsing animation for deadly encounters */
@keyframes deadly-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
  }
}

/* Tooltip for additional context */
.difficulty-indicator[title] {
  cursor: help;
}

/* Combat header integration */
.combat__header {
  position: relative;
}

.combat__difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .difficulty-indicator {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 10px);
    gap: 4px;
  }

  .difficulty-indicator__icon {
    font-size: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .difficulty-indicator--deadly {
    animation: none;
  }

  .difficulty-indicator {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .difficulty-indicator {
    border-width: 2px;
  }

  .difficulty-indicator--trivial {
    background: rgba(107, 114, 128, 0.25);
  }

  .difficulty-indicator--easy {
    background: rgba(34, 197, 94, 0.25);
  }

  .difficulty-indicator--medium {
    background: rgba(234, 179, 8, 0.25);
  }

  .difficulty-indicator--hard {
    background: rgba(249, 115, 22, 0.25);
  }

  .difficulty-indicator--deadly {
    background: rgba(239, 68, 68, 0.25);
  }
}
/**
 * Difficulty Dropdown Widget
 * ==========================
 * Status-bar control for selecting solo-play difficulty (Story / Balanced /
 * Challenging / Hardcore). Renders a chip-style trigger that matches the
 * surrounding `.feedback-icon-btn` / `.panels-icon-btn` aesthetic, plus a
 * popover menu that slides down beneath the trigger.
 *
 * Markup contract (see `terminal/organisms/status_bar/_widgets_and_badges`):
 *   .difficulty-dropdown-widget
 *     .difficulty-dropdown-widget__trigger[data-difficulty="..."]
 *       .difficulty-dropdown-widget__icon
 *       .difficulty-dropdown-widget__name
 *     .difficulty-dropdown[role="menu"]
 *       .difficulty-option[data-difficulty="..."]
 *         .difficulty-name
 *         .difficulty-desc
 *
 * Controller: `app/javascript/controllers/difficulty_dropdown_controller.js`
 * (toggles `.open` on the menu element).
 */

.difficulty-dropdown-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger button — matches status-bar chip aesthetic but wider for label.
 * Q13: drop var() fallbacks (`, 4px` / `, 8px`) — spacing tokens are unconditionally defined.
 * Q17: bump font-size to sm so the active difficulty reads as primary status. */
.difficulty-dropdown-widget__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.difficulty-dropdown-widget__trigger:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Q15: Active-press state — small scale-down for tactile feedback. */
.difficulty-dropdown-widget__trigger:active {
  transform: scale(0.97);
}

.difficulty-dropdown-widget__trigger:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.difficulty-dropdown-widget__trigger[aria-expanded="true"] {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.difficulty-dropdown-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.difficulty-dropdown-widget__icon .svg-icon {
  width: 14px;
  height: 14px;
}

.difficulty-dropdown-widget__name {
  white-space: nowrap;
}

/* Tier-specific tint on the trigger (uses active difficulty data-attribute).
 * Q9: rgb values match project accent tokens (primary / secondary / orange / error)
 * instead of the Tailwind palette these started as. */
.difficulty-dropdown-widget__trigger[data-difficulty="story"] {
  border-color: rgba(90, 159, 216, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="balanced"] {
  border-color: rgba(138, 181, 110, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="challenging"] {
  border-color: rgba(192, 138, 88, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="hardcore"] {
  border-color: rgba(207, 96, 104, 0.5);
}

/* Popover menu — slides down beneath the trigger.
 * Q11: shadow uses elevation token for system consistency.
 * Q12: literal px values replaced with spacing tokens.
 * Q13: var() fallbacks dropped — tokens are unconditionally defined. */
.difficulty-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1-5));
  right: 0;
  z-index: var(--z-dropdown, 120);
  min-width: 240px;
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating, 0 8px 20px rgba(0, 0, 0, 0.4));
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-2) * -1));
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.difficulty-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Dropdown menu items.
 * Q12/Q13: spacing tokens, no var() fallbacks. */
.difficulty-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.difficulty-option:hover {
  background: var(--color-bg-hover);
}

/* B5: Restore an explicit, visible focus ring instead of hover-substitution.
 * outline-offset: -2px keeps the ring inside the option's rounded edge. */
.difficulty-option:focus-visible {
  background: var(--color-bg-hover);
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

.difficulty-option.active {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.difficulty-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.difficulty-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.difficulty-option.active .difficulty-name {
  color: var(--color-accent-primary);
}

/* Q10: Removed no-op `border-left-color` rules on options — the option
 * border was 1px solid transparent so this property never painted.
 * The trigger keeps its tier-tinted full border above as the canonical
 * tier signal; options use background + active state instead. */

/* Mobile/narrow viewport — collapse trigger to icon-only at very narrow widths.
 * Q13: drop var() fallback. */
@media (max-width: 480px) {
  .difficulty-dropdown-widget__trigger {
    padding: 0 var(--space-1);
  }

  .difficulty-dropdown-widget__name {
    display: none;
  }

  .difficulty-dropdown {
    min-width: 220px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .difficulty-dropdown,
  .difficulty-dropdown-widget__trigger,
  .difficulty-option {
    transition: none;
  }
}
/**
 * Ghost Toggle
 * ============
 * Status-bar control for cycling panel transparency
 * (off -> ethereal -> wisp -> shade -> phantom -> off).
 *
 * The Stimulus controller sets `data-ghost-level` on the `.terminal-container`
 * element, so the level overrides below cover both floating panels
 * (`.floating-panel`) and docked grid panels (`.grid-panel`).
 *
 * Extracted from `terminal/organisms/_status_bar.css` (#3870) to keep the
 * status-bar organism within the file-size cap.
 */

.ghost-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  /* #4391: raised from --color-text-secondary (~2.8:1) to --color-text-primary
     (~9.2:1 on bg-tertiary) for WCAG AA icon contrast. */
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

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

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

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

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

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

/* Q16: Per-level visual differentiation so the active ghost tier reads at a glance.
 * Mirrors Stimulus controller's data-terminal--ghost-toggle-level-value attribute. */
.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="ethereal"] {
  background: var(--color-accent-subtle);
  opacity: 0.7;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="wisp"] {
  background: var(--color-accent-subtle);
  opacity: 0.85;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="shade"] {
  background: var(--color-accent-subtle);
  opacity: 1;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="phantom"] {
  background: var(--color-accent-bg);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Ghost Level Overrides on Grid Container
 * Applies to both floating panels and docked grid panels. */
[data-ghost-level="ethereal"] .floating-panel,
[data-ghost-level="ethereal"] .grid-panel {
  opacity: var(--ghost-opacity-ethereal);
  transition: opacity var(--ghost-transition);
}

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

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

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

/* Ghost panels become solid on hover/focus-within so users can read them. */
[data-ghost-level] .floating-panel:hover,
[data-ghost-level] .floating-panel:focus-within,
[data-ghost-level] .grid-panel:hover,
[data-ghost-level] .grid-panel:focus-within {
  opacity: 1;
  transition: opacity var(--ghost-transition);
}

/* B7: Reduced-motion — disable ghost transitions for users who request it. */
@media (prefers-reduced-motion: reduce) {
  [data-ghost-level] .floating-panel,
  [data-ghost-level] .grid-panel,
  .ghost-toggle-btn { transition: none !important; }
}
/**
 * Focus Mode Toggle (Mobile Only)
 * ===============================
 * Status-bar control that toggles a distraction-free reading mode by
 * adding `.terminal-container--focus-mode` to the terminal root, which in
 * turn hides most status-bar children. The toggle itself only renders at
 * mobile/tablet widths.
 *
 * Extracted from `terminal/organisms/_status_bar.css` to keep the
 * status-bar organism within the file-size cap. The focus-mode active
 * container styles (`.terminal-container--focus-mode`) remain in
 * _status_bar.css since they describe the status-bar layout in that mode.
 */

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

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

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

/* Sighted on-state mirrors the aria-pressed attribute set by the controller. */
.focus-mode-toggle[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

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

/* Show focus mode toggle on mobile/tablet */
@media (max-width: 768px) {
  .focus-mode-toggle {
    display: flex;
  }
}
/**
 * Shell Selector Component
 * ========================
 * Dropdown for switching between UI shells (DOS, MUD, OS/2, etc.)
 */

.shell-selector {
  position: relative;
  display: inline-flex;
}

/* Trigger Button */
.shell-selector__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shell-selector__trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-accent-purple);
}

.shell-selector__trigger[aria-expanded="true"] {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-purple);
}

.shell-selector__icon {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-accent-purple);
}

.shell-selector__name {
  font-weight: 500;
}

.shell-selector__chevron {
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.shell-selector__trigger[aria-expanded="true"] .shell-selector__chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu - opens downward by default (for top status bar) */
.shell-selector__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px var(--overlay-medium);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.shell-selector__dropdown[data-visible="true"],
.dropdown--open .shell-selector__dropdown,
.shell-selector__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* When status bar is at bottom (DOS shells), dropdown opens upward */
[data-shell="dos386"] .shell-selector__dropdown,
[data-shell="dos-gui"] .shell-selector__dropdown,
[data-shell="mud"] .shell-selector__dropdown {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(8px);
  box-shadow: 0 -4px 16px var(--overlay-medium);
}

[data-shell="dos386"] .shell-selector__dropdown.open,
[data-shell="dos-gui"] .shell-selector__dropdown.open,
[data-shell="mud"] .shell-selector__dropdown.open {
  transform: translateY(0);
}

/* Header */
.shell-selector__header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}

.shell-selector__header-text {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Options */
.shell-selector__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.shell-selector__option:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.shell-selector__option.active {
  background: var(--color-entity-spell-bg);
  color: var(--color-accent-purple);
}

.shell-selector__option-icon {
  width: 1.5rem;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-accent-purple);
  text-align: center;
}

.shell-selector__option-name {
  font-weight: 500;
  flex-shrink: 0;
}

.shell-selector__option-desc {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Footer */
.shell-selector__footer {
  padding: var(--space-1-5) var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.shell-selector__footer-text {
  font-size: var(--font-size-2xs);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Shell-specific styling for the selector itself */
[data-shell="dos386"] .shell-selector__trigger {
  font-family: var(--font-mono);
}

[data-shell="dos386"] .shell-selector__icon {
  color: var(--shell-fg, #00ff00);
}

[data-shell="os2"] .shell-selector__trigger {
  border-width: 2px;
  border-style: solid;
  border-color: var(--bevel-light, var(--color-text-primary)) var(--bevel-dark, var(--color-bg-elevated)) var(--bevel-dark, var(--color-bg-elevated)) var(--bevel-light, var(--color-text-primary));
  border-radius: 0;
}

[data-shell="wow"] .shell-selector__trigger {
  background: var(--color-bg-tertiary);
  border-color: var(--shell-border-gold, var(--color-gold));
}
/*
 * CRT Effects (legacy location)
 * ==============================
 * Moved to terminal/effects/_crt.css (Task #966).
 * This file is kept for Sprockets require compatibility.
 * All CRT styles now live in effects/_crt.css and are
 * imported via terminal/terminal.css @import.
 *
 * This file intentionally left empty to avoid duplication.
 */
/**
 * Context Bubble
 * ==============
 * Floating bubble showing AI context gathering progress.
 * Appears above the chat input during context collection.
 *
 * States:
 * - Planning: Shows analyzing message
 * - Querying: Shows list of queries with status indicators
 * - Complete: Collapses to summary with token count
 *
 * Uses Phase 1 design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Container
 * ======================================== */

.context-bubble {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  max-width: 100%;
  overflow: hidden;
}

.context-bubble--visible {
  display: flex;
}

/* Phases for theming */
.context-bubble[data-phase="planning"] {
  border-color: var(--color-accent-primary);
}

.context-bubble[data-phase="querying"] {
  border-color: var(--color-accent-warning);
}

.context-bubble[data-phase="complete"] {
  border-color: var(--color-accent-success);
}

/* ========================================
 * Header / Summary
 * ======================================== */

.context-bubble__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.context-bubble__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.context-bubble__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.context-bubble[data-phase="planning"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-search) no-repeat center / contain;
}

.context-bubble[data-phase="querying"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-books) no-repeat center / contain;
}

.context-bubble[data-phase="complete"] .context-bubble__icon::before {
  content: '✓';
}

.context-bubble__status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__token-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================
 * Expand/Collapse Toggle
 * ======================================== */

.context-bubble__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.context-bubble__toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.context-bubble__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.context-bubble__toggle-icon {
  transition: transform var(--transition-fast);
  font-size: var(--font-size-xs);
}

.context-bubble--collapsed .context-bubble__toggle-icon {
  transform: rotate(180deg);
}

/* ========================================
 * Task List
 * ======================================== */

.context-bubble__task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
  max-height: 200px;
  overflow-y: auto;
}

.context-bubble--collapsed .context-bubble__task-list {
  display: none;
}

.context-bubble__task {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.context-bubble__task--pending {
  color: var(--color-text-muted);
}

.context-bubble__task--running {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.context-bubble__task--complete {
  color: var(--color-text-secondary);
}

.context-bubble__task--failed {
  color: var(--color-accent-error);
}

.context-bubble__task-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

.context-bubble__task--running .context-bubble__task-icon {
  animation: pulse 1s ease-in-out infinite;
}

.context-bubble__task-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__task-tokens {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-success);
  flex-shrink: 0;
}

.context-bubble__task-error {
  font-size: var(--font-size-xs);
  color: var(--color-accent-error);
  flex-shrink: 0;
}

/* ========================================
 * Animations
 * ======================================== */

/* Entry animation */
.context-bubble--visible {
  animation: bubble-enter 0.2s ease-out;
}

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

/* ========================================
 * Placement Variants
 * ======================================== */

/* Above chat input (default) */
.context-bubble--above-input {
  position: relative;
}

/* Inside narrative panel (as bubble) */
.context-bubble--inline {
  margin: var(--space-2) 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* In a tray above input */
.context-bubble--tray {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

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

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

  .context-bubble__summary {
    font-size: var(--font-size-xs);
  }

  .context-bubble__task-list {
    max-height: 150px;
  }

  .context-bubble__task {
    font-size: var(--font-size-xs);
    padding: var(--space-1);
  }
}

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

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

  .context-bubble--visible {
    animation: none;
  }

  .context-bubble__toggle-icon {
    transition: none;
  }

  .context-bubble__task--running .context-bubble__task-icon {
    animation: none;
  }
}

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

@media (prefers-contrast: high) {
  .context-bubble {
    border-width: 2px;
  }

  .context-bubble__task--running {
    border: 1px solid currentColor;
  }
}
/*
 * Icon Picker Component
 * =====================
 * A searchable grid component for selecting SVG icons.
 * Designed with the terminal aesthetic in mind.
 */

/* ========================================
 * WRAPPER & BASE
 * ======================================== */

.icon-picker-wrapper {
  width: 100%;
}

.icon-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-height: 400px;
  overflow: hidden;
}

.icon-picker--compact {
  max-height: 280px;
}

.icon-picker--compact .icon-picker__grid {
  max-height: 180px;
}

.icon-picker--compact .icon-picker__icon {
  padding: var(--space-1, 4px);
}

.icon-picker--compact .icon-picker__icon-name {
  display: none;
}

/* ========================================
 * SEARCH INPUT
 * ======================================== */

.icon-picker__search {
  position: relative;
  flex-shrink: 0;
}

.icon-picker__search-input {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  padding-left: var(--space-8, 32px);
  background: var(--color-bg-tertiary, #3d3d3d);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  transition: border-color var(--transition-fast, 100ms ease);
}

.icon-picker__search-input:focus {
  outline: none;
  border-color: var(--color-border-focus, #61afef);
}

.icon-picker__search-input::placeholder {
  color: var(--color-text-muted, #888888);
}

.icon-picker__search-icon {
  position: absolute;
  left: var(--space-2, 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted, #888888);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
 * CATEGORY FILTER
 * ======================================== */

.icon-picker__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  flex-shrink: 0;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid var(--color-border-subtle, #333333);
}

.icon-picker__category-btn {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  white-space: nowrap;
}

.icon-picker__category-btn:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.icon-picker__category-btn--active {
  color: var(--color-accent-primary, #61afef);
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
}

.icon-picker__category-btn--active:hover {
  color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
}

/* ========================================
 * ICON GRID
 * ======================================== */

.icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  overflow-y: auto;
  max-height: 260px;
  flex: 1;
  background: var(--color-bg-secondary, #2d2d2d);
  border-radius: var(--radius-md, 4px);
}

/* Scrollbar styling */
.icon-picker__grid::-webkit-scrollbar {
  width: 6px;
}

.icon-picker__grid::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle, #555555);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888888);
}

/* ========================================
 * ICON BUTTONS
 * ======================================== */

.icon-picker__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px);
  background: var(--color-bg-elevated, #404040);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  min-height: 60px;
}

.icon-picker__icon:hover {
  border-color: var(--color-border-focus, #61afef);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
  transform: translateY(-1px);
}

.icon-picker__icon:active {
  transform: translateY(0);
}

.icon-picker__icon--selected {
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
  box-shadow: 0 0 0 1px var(--color-accent-primary, #61afef);
}

.icon-picker__icon--selected:hover {
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.2));
}

.icon-picker__icon--selected .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary, #e0e0e0);
  transition: color var(--transition-fast, 100ms ease);
}

.icon-picker__icon-svg svg {
  width: 20px;
  height: 20px;
}

.icon-picker__icon:hover .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-picker__icon:hover .icon-picker__icon-name {
  color: var(--color-text-secondary, #bbbbbb);
}

.icon-picker__icon--selected .icon-picker__icon-name {
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.icon-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
  grid-column: 1 / -1;
  color: var(--color-text-muted, #888888);
}

.icon-picker__empty-icon {
  opacity: 0.5;
}

.icon-picker__empty-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__empty-text {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

/* ========================================
 * SELECTED PREVIEW
 * ======================================== */

.icon-picker__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-md, 4px);
  flex-shrink: 0;
}

.icon-picker__preview--empty {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-color: var(--color-border-subtle, #333333);
}

.icon-picker__preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__preview-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__preview-name {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.icon-picker__preview-hint {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #888888);
  font-style: italic;
}

.icon-picker__preview-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1, 4px);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease);
}

.icon-picker__preview-clear:hover {
  color: var(--color-accent-error, #e06c75);
  background: rgba(224, 108, 117, 0.1);
}

.icon-picker__preview-clear svg {
  width: 14px;
  height: 14px;
}

/* ========================================
 * MODAL INTEGRATION
 * ======================================== */

.icon-picker-modal {
  padding: var(--space-4, 16px);
  background: var(--color-bg-elevated, #404040);
  border-radius: var(--radius-lg, 8px);
  max-width: 480px;
  width: 100%;
}

.icon-picker-modal .icon-picker__grid {
  max-height: 300px;
}

/* ========================================
 * INLINE INTEGRATION (for tab settings)
 * ======================================== */

.icon-picker--inline {
  padding: 0;
}

.icon-picker--inline .icon-picker__grid {
  max-height: 200px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon {
  min-height: 48px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon-svg svg {
  width: 18px;
  height: 18px;
}

.icon-picker--inline .icon-picker__categories {
  padding: 0;
  border-bottom: none;
  margin-bottom: var(--space-1, 4px);
}

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

@media (max-width: 480px) {
  .icon-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--space-1, 4px);
  }

  .icon-picker__icon {
    min-height: 48px;
    padding: var(--space-1, 4px);
  }

  .icon-picker__icon-name {
    display: none;
  }

  .icon-picker__categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .icon-picker__category-btn {
    flex-shrink: 0;
  }
}
/* Hologram Viewport — 3D scene background for the terminal
 *
 * EFFECT-DOMAIN-RESPECT (#4220):
 * The hologram is a BACKGROUND layer, not an overlay. It sits behind the grid
 * layout / panels so that:
 *   - In 2D mode, panels remain fully readable above an opaque hologram background.
 *   - In XR/AR mode (body[data-xr-passthrough="true"]), the viewport background
 *     becomes transparent so the real world shows through, while panels stay
 *     readable on top.
 *
 * Previously the viewport used z-index: var(--z-scroll-btn) (50) and an opaque
 * background, which OVER-painted the panels in the main zone (visually
 * collapsing them to a single bg color). Affecting panels was the wrong
 * domain — the effect should only touch the background layer.
 */

.hologram-viewport {
  position: absolute;
  inset: 0;
  /* Behind grid layout content (which flows in normal stacking, z-index: auto).
   * .zone--main uses isolation: isolate (below) to scope this negative index. */
  z-index: var(--z-behind);
  background: var(--color-bg-primary, #0a0a0f);
  display: none;
  overflow: hidden;
}

.hologram-viewport--active {
  display: block;
}

/* AR/XR passthrough: drop the background so the real world shows through.
 * Panels remain at full opacity (they live in the grid layout above). */
body[data-xr-passthrough="true"] .hologram-viewport {
  background: transparent;
}

/* Three.js canvas fills the viewport */
.hologram-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Active state for toggle button */
.hologram-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
}

/* Ensure main zone hosts the absolute background and scopes its stacking
 * context so the hologram's z-index: -1 does not escape behind the zone. */
.zone--main {
  position: relative;
  isolation: isolate;
}
/**
 * Contextual Action Chips
 * =======================
 * Proactive action suggestions that appear near the terminal input.
 * These chips suggest contextually relevant actions based on game state.
 */

/* Container for the chips row */
.contextual-chips-container {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.contextual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}

/* Section label - subtle hint */
.contextual-chips__label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
  opacity: 0.7;
}

/* Empty state - hidden */
.contextual-chips-container[hidden] {
  display: none;
}

/* Hide in lobby - quick actions replace contextual chips */
.lobby-split-container .contextual-chips-container {
  display: none;
}

/* ==========================================================================
   Individual Chip
   ========================================================================== */

.contextual-chip {
  /* Color theming via custom properties (set inline by JS) */
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 99, 102, 241;

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Touch target: 44px minimum height (8px + 8px padding + ~13px font + line height) */
  padding: var(--space-2) var(--space-3);
  min-height: 36px; /* Combined with padding gets us to ~44px touchable area */
  border: 1px solid rgba(var(--chip-color-rgb), 0.3);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.12) 0%,
    rgba(var(--chip-color-rgb), 0.04) 100%
  );
  color: var(--chip-color);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;

  /* Entrance animation */
  animation: chipEnter 0.2s ease-out;
}

.contextual-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.2) 0%,
    rgba(var(--chip-color-rgb), 0.12) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
  transform: translateY(-1px);
}

.contextual-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--chip-color);
}

.contextual-chip:active,
.contextual-chip--executing {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
}

/* Chip icon */
.contextual-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.contextual-chip__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Chip label */
.contextual-chip__label {
  line-height: 1.2;
}

/* ==========================================================================
   Category Variants
   ========================================================================== */

/* Combat - Red/Orange for urgency */
.contextual-chip--combat {
  --chip-color: #ef4444;
  --chip-color-rgb: 239, 68, 68;
}

/* Exploration - Green for discovery */
.contextual-chip--exploration {
  --chip-color: #22c55e;
  --chip-color-rgb: 34, 197, 94;
}

/* Social - Blue for interaction */
.contextual-chip--social {
  --chip-color: #3b82f6;
  --chip-color-rgb: 59, 130, 246;
}

/* Shopping - Amber for commerce */
.contextual-chip--shopping {
  --chip-color: #f59e0b;
  --chip-color-rgb: 245, 158, 11;
}

/* Rest - Purple for recovery */
.contextual-chip--rest {
  --chip-color: #8b5cf6;
  --chip-color-rgb: 139, 92, 246;
}

/* Survival - Pink for urgency/health */
.contextual-chip--survival {
  --chip-color: #ec4899;
  --chip-color-rgb: 236, 72, 153;
}

/* Navigation - Indigo for movement */
.contextual-chip--navigation {
  --chip-color: #6366f1;
  --chip-color-rgb: 99, 102, 241;
}

/* Creation - Teal for building */
.contextual-chip--creation {
  --chip-color: #14b8a6;
  --chip-color-rgb: 20, 184, 166;
}

/* Mental - Purple for psychological */
.contextual-chip--mental {
  --chip-color: #a855f7;
  --chip-color-rgb: 168, 85, 247;
}

/* Hotbar - Subtle gray for utility actions */
.contextual-chip--hotbar {
  --chip-color: #6b7280;
  --chip-color-rgb: 107, 114, 128;

  /* Slightly more subtle appearance */
  border-style: dashed;
  opacity: 0.9;
}

.contextual-chip--hotbar:hover {
  opacity: 1;
  border-style: solid;
}

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

@media (max-width: 640px) {
  .contextual-chips {
    gap: var(--space-1);
  }

  /* Keep min-height for touch targets - only reduce padding slightly */
  .contextual-chip {
    padding: var(--space-1-5) var(--space-2);
    min-height: 36px; /* Maintain 44px touch target */
    font-size: 0.75rem;
  }

  .contextual-chips__label {
    font-size: 0.625rem;
  }

  .contextual-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .contextual-chip__icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ==========================================================================
   Mobile Quick Action Pills
   Horizontal scrollable strip above input — replaces flex-wrap layout on mobile.
   Swipeable when >4 actions. Collapses to icon-only when keyboard is open.
   ========================================================================== */

@media (max-width: 768px) {
  /* Container: flush with input, no vertical margin waste */
  .contextual-chips-container {
    padding: 0 var(--space-2);
    margin-bottom: var(--space-1);
  }

  /* Strip layout: single row, horizontal scroll, no wrapping */
  .contextual-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    padding: var(--space-1) 0;
    gap: var(--space-2);
  }

  .contextual-chips::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Hide the "Try" label on mobile — pills are self-explanatory */
  .contextual-chips__label {
    display: none;
  }

  /* Pills: chat-style suggested replies */
  .contextual-chip {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  /* Enable scroll snapping for precise swipe stops */
  .contextual-chips {
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--space-2);
  }

  /* Fade hint on right edge when scrollable (overflow indicator) */
  .contextual-chips-container {
    position: relative;
  }

  .contextual-chips-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-bg-primary, #1a1a2e));
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-fast);
    z-index: var(--z-raised);
  }

  /* Hide fade when scrolled to end */
  .contextual-chips-container.scrolled-end::after {
    opacity: 0;
  }

  /* Keyboard open: collapse to icon-only pills */
  .mobile-keyboard-open .contextual-chips-container {
    margin-bottom: 0;
  }

  .mobile-keyboard-open .contextual-chips {
    gap: var(--space-1);
    padding: 2px 0;
  }

  .mobile-keyboard-open .contextual-chip {
    padding: var(--space-1) var(--space-2);
    min-height: 32px;
  }

  .mobile-keyboard-open .contextual-chip__label {
    display: none;
  }

  .mobile-keyboard-open .contextual-chip__icon {
    width: 1rem;
    height: 1rem;
  }

  /* When icon-only, chips without icons show first letter as fallback */
  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) {
    max-width: 40px;
    overflow: hidden;
    text-overflow: clip;
  }

  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) .contextual-chip__label {
    display: block;
    max-width: 1ch;
    overflow: hidden;
  }
}

/* ==========================================================================
   Animation
   ========================================================================== */

/* Entrance animation for chips */
@keyframes chipEnter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered entrance for multiple chips (offset by 1 for label) */
.contextual-chip:nth-of-type(1) { animation-delay: 0ms; }
.contextual-chip:nth-of-type(2) { animation-delay: 30ms; }
.contextual-chip:nth-of-type(3) { animation-delay: 60ms; }
.contextual-chip:nth-of-type(4) { animation-delay: 90ms; }
.contextual-chip:nth-of-type(5) { animation-delay: 120ms; }
.contextual-chip:nth-of-type(6) { animation-delay: 150ms; }
.contextual-chip:nth-of-type(7) { animation-delay: 180ms; }
.contextual-chip:nth-of-type(8) { animation-delay: 210ms; }
.contextual-chip:nth-of-type(9) { animation-delay: 240ms; }
.contextual-chip:nth-of-type(10) { animation-delay: 270ms; }

@keyframes chipPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.4);
  }
}

/* Priority chips get a subtle pulse */
.contextual-chip--priority {
  animation: chipPulse 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contextual-chip {
    transition: none;
    animation: none;
  }

  .contextual-chip--priority {
    animation: none;
  }
}
/**
 * Achievement Celebration Modal
 * ===============================
 * Animated celebration modal that appears when achievements are unlocked.
 * Features confetti, sparkles, and dramatic reveal animations.
 */

/* ========================================
 * Modal Variant
 * ======================================== */

.unified-modal--achievement-celebration {
  animation: achievementReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes achievementReveal {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.unified-modal--achievement-celebration .unified-modal__card {
  background: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    color-mix(in srgb, var(--color-bg-primary) 95%, gold 5%) 100%
  );
  border: 2px solid color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, gold 20%, transparent);
}

.unified-modal--achievement-celebration .unified-modal__header {
  text-align: center;
  border-bottom: 2px solid color-mix(in srgb, gold 40%, var(--color-border-default) 60%);
}

.unified-modal--achievement-celebration .unified-modal__title {
  color: color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.unified-modal--achievement-celebration .unified-modal__subtitle {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-top: var(--space-2);
  font-style: italic;
}

/* ========================================
 * Content Layout
 * ======================================== */

.achievement-celebration__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.achievement-celebration__icon-large {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--space-4);
  animation: iconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.achievement-celebration__sparkles {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
  opacity: 0.8;
}

.achievement-celebration__sparkles {
  animation: sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

.achievement-celebration__message {
  font-size: 1.25rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text-primary) 90%, gold 10%);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* ========================================
 * View All CTA
 * ======================================== */

.achievement-celebration__view-all {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid color-mix(in srgb, gold 50%, var(--color-border-default) 50%);
  border-radius: var(--radius-md, 4px);
  color: color-mix(in srgb, var(--color-text-secondary) 80%, gold 20%);
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.achievement-celebration__view-all:hover {
  border-color: color-mix(in srgb, gold 70%, var(--color-border-default) 30%);
  color: color-mix(in srgb, var(--color-text-primary) 80%, gold 20%);
}

/* ========================================
 * Confetti Animation
 * ======================================== */

.achievement-celebration__confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-raised);
}

.achievement-celebration__confetto {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: confettiFall 3s ease-out forwards;
  opacity: 1;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
 * Backdrop Enhancement
 * ======================================== */

.unified-modal--achievement-celebration + .unified-modal__backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

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

@media (max-width: 768px) {
  .achievement-celebration__icon-large {
    font-size: 4rem;
  }

  .achievement-celebration__message {
    font-size: 1rem;
  }

  .unified-modal--achievement-celebration .unified-modal__title {
    font-size: 1.5rem;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .unified-modal--achievement-celebration,
  .achievement-celebration__icon-large,
  .achievement-celebration__sparkles,
  .achievement-celebration__confetto {
    animation: none;
  }

  .achievement-celebration__confetti {
    display: none;
  }
}

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

@media (prefers-contrast: high) {
  .unified-modal--achievement-celebration .unified-modal__card {
    border-width: 3px;
    border-color: var(--color-accent-primary);
  }

  .achievement-celebration__icon-large {
    filter: none;
  }
}
/* ==========================================================================
 * Combat Target Picker
 * Popover for selecting combat targets from initiative order.
 * Single mode (attack): click to select. Multi mode (spell): checkboxes.
 * Follows _roll_menu.css patterns for positioning and styling.
 * ========================================================================== */

/* Backdrop - click-outside-to-close */
.combat-target-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Popover container */
.combat-target-picker {
  position: fixed;
  min-width: 260px;
  max-width: 360px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: combatTargetPickerFadeIn 0.12s ease-out;
  overflow: hidden;
}

@keyframes combatTargetPickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.combat-target-picker__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

/* Custom target input */
.combat-target-picker__custom {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.combat-target-picker__input:focus {
  border-color: var(--color-border-focus);
}

.combat-target-picker__input::placeholder {
  color: var(--color-text-muted);
}

/* Target list */
.combat-target-picker__list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Empty state */
.combat-target-picker__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Individual target item */
.combat-target-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.combat-target-picker__item:hover,
.combat-target-picker__item--focused {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.combat-target-picker__item:active {
  background: rgba(97, 175, 239, 0.15);
}

.combat-target-picker__item--selected {
  background: rgba(97, 175, 239, 0.12);
  color: var(--color-text-primary);
}

.combat-target-picker__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Checkbox (multi mode) */
.combat-target-picker__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-primary);
  pointer-events: none;
}

/* Portrait */
.combat-target-picker__portrait {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.combat-target-picker__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name */
.combat-target-picker__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

/* HP indicator */
.combat-target-picker__hp {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.combat-target-picker__hp-bar {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hp--healthy .combat-target-picker__hp-bar {
  background: var(--color-accent-secondary, #98c379);
}

.hp--wounded .combat-target-picker__hp-bar {
  background: var(--color-accent-warning, #e5c07b);
}

.hp--critical .combat-target-picker__hp-bar {
  background: var(--color-accent-error, #e06c75);
}

.combat-target-picker__hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Type indicator */
.combat-target-picker__type {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Footer with confirm button (multi mode) */
.combat-target-picker__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__confirm {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.combat-target-picker__confirm:hover:not(:disabled) {
  opacity: 0.9;
}

.combat-target-picker__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .combat-target-picker {
    min-width: unset;
    max-width: unset;
    left: 8px;
    right: 8px;
    width: auto;
  }

  .combat-target-picker__item {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combat-target-picker {
    animation: none;
  }
}
/* ========================================
 * Expandable Text
 * Inline expandable text with typewriter reveals
 * ======================================== */

.expandable-text {
  display: inline;
  cursor: pointer;
}

.expandable-text--expanded {
  cursor: default;
}

.expandable-text__summary {
  display: inline;
}

.expandable-text__indicator {
  display: inline;
  color: var(--color-gold, #d4af37);
  font-weight: bold;
  opacity: 0.8;
  animation: indicatorPulse 1.5s ease-in-out infinite;
}

.expandable-text--expanded .expandable-text__indicator,
.expandable-text--expanding .expandable-text__indicator {
  display: none;
}

.expandable-text__expansion {
  color: var(--color-text, #e0e0e0);
}

/* Click/hover hint styling */
.expandable-text:not(.expandable-text--expanded):hover .expandable-text__indicator {
  opacity: 1;
  color: var(--color-gold-bright, #ffd700);
}

.expandable-text:not(.expandable-text--expanded):focus {
  outline: 2px solid var(--color-gold, #d4af37);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subtle underline hint for clickable text */
.expandable-text:not(.expandable-text--expanded) .expandable-text__summary {
  border-bottom: 1px dashed var(--color-text-secondary, #808080);
}

.expandable-text--expanded .expandable-text__summary {
  border-bottom: none;
}

/* Indicator pulse animation */
@keyframes indicatorPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .expandable-text__indicator {
    animation: none;
    opacity: 0.8;
  }
}
/* Handout Viewer - Lightbox overlay for DM-revealed handouts */

.handout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.handout-overlay--visible {
  opacity: 1;
}

.handout-modal {
  background: var(--terminal-bg, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
}

.handout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--terminal-text, #e0e0e0);
  font-family: inherit;
}

.handout-close-btn {
  background: none;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.handout-close-btn:hover {
  color: var(--terminal-text, #e0e0e0);
}

.handout-description {
  padding: 8px 16px;
  margin: 0;
  color: var(--terminal-text-muted, #888);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handout-content-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.handout-content-pdf {
  width: 80vw;
  height: 80vh;
  border: none;
  border-radius: 4px;
}

.handout-content-unsupported {
  color: var(--terminal-text-muted, #888);
  font-style: italic;
}
/* Handout Panel Organism — DM-pushed images (#3857)
 *
 * Renders dm_handout envelopes (lib/contracts/messages/dm_handout.rb) in a
 * popout overlay panel. Distinct from _handout_viewer (legacy revealed
 * handouts: PDFs/images) which handles `terminal:handout-revealed`.
 *
 * Driven by app/javascript/controllers/terminal/handout_panel_controller.js
 * which subscribes to `terminal:dm-handout` and renders into <body>.
 */

.handout-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: var(--z-sky, 9000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  padding: 24px;
}

.handout-panel--visible {
  opacity: 1;
}

.handout-panel__modal {
  background: var(--terminal-bg, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 8px;
  max-width: min(720px, 90vw);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.handout-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--terminal-border, #333);
  background: var(--terminal-bg-elevated, #20203a);
}

.handout-panel__header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.handout-panel__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-color, #8b5cf6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.handout-panel__dm-name {
  color: var(--terminal-text-muted, #aaa);
  font-size: 0.8rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handout-panel__close {
  background: none;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  flex-shrink: 0;
}

.handout-panel__close:hover,
.handout-panel__close:focus {
  color: var(--terminal-text, #e0e0e0);
  outline: none;
}

.handout-panel__body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.handout-panel__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.handout-panel__caption {
  margin: 0;
  color: var(--terminal-text, #e0e0e0);
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}

/* Mobile / narrow viewports — phone breakpoint (#3857). Panel goes full-bleed
 * with smaller padding so the image can use the available width. */
@media (max-width: 768px) {
  .handout-panel {
    padding: 8px;
    align-items: flex-start;
  }

  .handout-panel__modal {
    max-width: 100%;
    max-height: calc(100vh - 16px);
    width: 100%;
    border-radius: 6px;
  }

  .handout-panel__body {
    padding: 12px;
  }

  .handout-panel__image {
    max-height: 60vh;
  }

  .handout-panel__header {
    padding: 8px 12px;
  }

  .handout-panel__dm-name {
    font-size: 0.72rem;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .handout-panel {
    transition: none;
  }
}
/**
 * Info Indicator Component
 * ========================
 * Subtle info icon showing that an element has a tooltip/more information.
 * Helps users discover interactive elements.
 *
 * Usage:
 *   <span class="has-info" data-controller="rich-tooltip" ...>
 *     AC <span class="info-indicator">i</span>
 *   </span>
 */

/* ========================================
 * Container for elements with info
 * ======================================== */

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

/* ========================================
 * Info Indicator Icon
 * ======================================== */

.info-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px; /* Prevent flexbox / clip-path containers from collapsing the badge (#4132) */
  font-size: 10px;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  /* Slightly higher resting opacity so the badge always reads as a chip, not stray text (#4132) */
  opacity: 0.75;
  transition: opacity var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
  flex-shrink: 0;
  /* Defensive: ensure no host-page text-decoration leaks into the badge */
  text-decoration: none;
}

/* ========================================
 * Hover/Focus States
 * ======================================== */

.has-info:hover .info-indicator,
.has-info:focus .info-indicator,
.has-info:focus-within .info-indicator {
  opacity: 1;
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-subtle));
}

/* ========================================
 * Active Tooltip State
 * ======================================== */

.has-info[aria-expanded="true"] .info-indicator {
  opacity: 1;
  color: var(--color-bg-primary);
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Size Variants
 * ======================================== */

/* Small - for compact layouts */
.info-indicator--sm {
  width: 12px;
  height: 12px;
  min-width: 12px; /* Prevent collapse in dense stat rows (#4132) */
  font-size: 9px;
}

/* Large - for headers and primary stats */
.info-indicator--lg {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

/* ========================================
 * Icon Variants
 * ======================================== */

/* Question mark variant */
.info-indicator--question::after {
  content: "?";
}

/* Help variant (book icon) */
.info-indicator--help::after {
  content: "?";
}

/* Default is "i" for information */
.info-indicator:not(.info-indicator--question):not(.info-indicator--help)::after {
  content: "i";
}

/* Clear any existing text content */
.info-indicator {
  text-indent: -9999px;
  overflow: hidden;
}

.info-indicator::after {
  text-indent: 0;
  display: block;
}

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

@media (hover: none) {
  .info-indicator {
    width: 20px;
    height: 20px;
    font-size: 12px;
    opacity: 0.8;
  }

  .info-indicator--sm {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .info-indicator--lg {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* ========================================
 * Inline with labels (stat labels, etc)
 * ======================================== */

.cs-stat__label .info-indicator,
.cs-section__title .info-indicator,
.cs-ability__label .info-indicator {
  margin-left: var(--space-1);
  vertical-align: middle;
}

/* ========================================
 * Stat Chip Integration
 * ======================================== */

.stat-chip .info-indicator {
  margin-left: var(--space-1);
}

/* ========================================
 * Condition Badge Integration
 * ======================================== */

.cs-condition .info-indicator {
  margin-left: 2px;
  width: 12px;
  height: 12px;
  font-size: 8px;
}

.cs-condition:hover .info-indicator {
  color: var(--color-accent-warning);
  border-color: var(--color-accent-warning);
}

/* ========================================
 * Gear Item Integration
 * ======================================== */

.cs-item__name .info-indicator {
  margin-left: var(--space-1);
}

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

@media (prefers-reduced-motion: reduce) {
  .info-indicator {
    transition: none;
  }
}
/* ========================================
 * Loading Filler
 * Shows contextual tips while AI generates response.
 * Tips cycle one at a time (chyron/ticker) — no stacking.
 * Attached to the .dm-responding-bar, below the main status row.
 * ======================================== */

/* Container sits inside the DM responding bar as a second row */
.loading-filler {
  width: 100%;
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid rgba(168, 85, 247, 0.2);
}

/* Single visible slot — only one tip shows at a time */
.loading-filler__ticker {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0a0a0);
  min-height: 1.4em; /* Reserve space to prevent layout shift on swap */
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.loading-filler__ticker--visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-filler__icon {
  flex-shrink: 0;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
  opacity: 0.8;
}

.loading-filler__content {
  flex: 1;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Accessibility: Respect reduced motion — show tip without transition */
@media (prefers-reduced-motion: reduce) {
  .loading-filler__ticker {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .loading-filler__ticker--visible {
    opacity: 1;
    transform: none;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .loading-filler__ticker {
  color: rgba(200, 180, 255, 0.7);
}

/* Light theme adjustments */
[data-theme="light"] .loading-filler__ticker {
  color: var(--color-text-secondary, #666);
}
/**
 * Proficiency Chip Component
 * ==========================
 * Replaces tiny 8px proficiency dots with tappable chips showing
 * proficiency status + modifier for improved usability.
 *
 * States:
 * - Not proficient: Hollow dot, muted, no modifier shown
 * - Proficient: Filled dot, accent color, +modifier
 * - Expert: Double filled dots, gold glow, +modifier
 *
 * Usage:
 *   <button class="proficiency-chip proficiency-chip--proficient">
 *     <span class="proficiency-chip__dots">●</span>
 *     <span class="proficiency-chip__modifier">+5</span>
 *   </button>
 */

/* ========================================
 * Base Chip
 * ======================================== */

.proficiency-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}

.proficiency-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.proficiency-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.proficiency-chip:active {
  transform: scale(0.96);
}

/* ========================================
 * Proficiency Dots
 * ======================================== */

.proficiency-chip__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px; /* Prevent the empty span from collapsing before ::before content paints (#4132) */
  font-size: var(--font-size-base); /* Bumped from --sm so the hollow/filled state reads at a glance */
  line-height: 1;
  letter-spacing: -1px;
}

.proficiency-chip__modifier {
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * Not Proficient (default)
 * ======================================== */

/* Default state shows hollow dot and muted modifier */
.proficiency-chip .proficiency-chip__dots::before {
  content: "○";
}

.proficiency-chip .proficiency-chip__modifier {
  color: var(--color-text-muted);
}

/* ========================================
 * Proficient State
 * ======================================== */

.proficiency-chip--proficient {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
  color: var(--color-accent-primary);
}

.proficiency-chip--proficient:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-bg-tertiary));
  border-color: var(--color-accent-primary);
}

.proficiency-chip--proficient .proficiency-chip__dots::before {
  content: "●";
}

.proficiency-chip--proficient .proficiency-chip__modifier {
  color: var(--color-accent-primary);
}

/* ========================================
 * Expert State (double proficiency)
 * ======================================== */

.proficiency-chip--expert {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-gold) 50%, var(--color-border-default));
  color: var(--color-gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-gold) 30%, transparent);
}

.proficiency-chip--expert:hover {
  background: color-mix(in srgb, var(--color-gold) 25%, var(--color-bg-tertiary));
  border-color: var(--color-gold);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-gold) 50%, transparent);
}

.proficiency-chip--expert .proficiency-chip__dots::before {
  content: "●●";
  letter-spacing: -2px;
}

.proficiency-chip--expert .proficiency-chip__modifier {
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Compact Variant (for dense lists)
 * ======================================== */

.proficiency-chip--compact {
  min-width: 36px;
  min-height: 28px;
  padding: 2px var(--space-1);
  font-size: var(--font-size-xs);
}

.proficiency-chip--compact .proficiency-chip__dots {
  font-size: var(--font-size-xs);
}

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

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

  .proficiency-chip--compact {
    min-width: 44px;
    min-height: 40px;
  }
}

/* ========================================
 * Context-specific adjustments
 * ======================================== */

/* Inside save rows - slightly compact */
.cs-save .proficiency-chip {
  min-width: 50px;
}

/* Inside skill rows */
.cs-skill .proficiency-chip {
  min-width: 50px;
}

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

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

  .proficiency-chip:active {
    transform: none;
  }
}
/* ==========================================================================
 * Roll Overlay Component
 * Positioned overlay for click-to-roll interactions (perception checks, etc.)
 * Part of the Interactive Narrative system
 * ========================================================================== */

/* Backdrop (click-outside-to-close) */
.roll-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Main Overlay */
.roll-overlay {
  position: fixed;
  width: 280px;
  background: linear-gradient(135deg,
    rgba(30, 30, 40, 0.98) 0%,
    rgba(20, 20, 30, 0.99) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.roll-overlay--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.roll-overlay--hiding {
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
}

/* Header */
.roll-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 215, 0, 0.1);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.roll-overlay__icon {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.roll-overlay__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roll-overlay__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-overlay__dc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Dice Display */
.roll-overlay__dice-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 60px;
}

.roll-overlay__dice {
  font-size: var(--font-size-4xl);
  animation: diceIdle 2s ease-in-out infinite;
}

@keyframes diceIdle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.roll-overlay__expression {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-text-primary);
}

/* Rolling Animation */
.roll-overlay__dice-display--rolling .roll-overlay__dice {
  animation: diceRolling 0.15s linear infinite;
}

.roll-overlay__dice-display--rolling .roll-overlay__expression {
  animation: expressionFlash 0.1s linear infinite;
}

@keyframes diceRolling {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

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

/* Roll Result Display */
.roll-overlay__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  animation: resultReveal 0.3s ease-out;
}

@keyframes resultReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.roll-overlay__result-dice {
  font-weight: bold;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-modifier {
  color: var(--color-text-secondary);
}

.roll-overlay__result-equals {
  color: var(--color-text-muted);
}

.roll-overlay__result-total {
  font-weight: bold;
  font-size: var(--font-size-2xl);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-icon {
  font-size: var(--font-size-lg);
  margin-left: var(--space-1);
}

.roll-overlay__result--success .roll-overlay__result-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
}

.roll-overlay__result--success .roll-overlay__result-icon {
  color: #22c55e;
}

.roll-overlay__result--failure .roll-overlay__result-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.roll-overlay__result--failure .roll-overlay__result-icon {
  color: #ef4444;
}

/* Actions */
.roll-overlay__actions {
  padding: 0 var(--space-4) var(--space-3);
}

.roll-overlay__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.roll-overlay__btn--roll {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%);
  border: 2px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  animation: rollBtnGlow 2s ease-in-out infinite;
}

@keyframes rollBtnGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.2);
  }
}

.roll-overlay__btn--roll:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.25) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.35);
}

.roll-overlay__btn--roll:active {
  transform: translateY(0);
}

.roll-overlay__btn-icon {
  font-size: var(--font-size-lg);
}

/* Hint */
.roll-overlay__hint {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Skill-specific theming */
.roll-overlay[data-skill="perception"] {
  --skill-color: #3b82f6;
}

.roll-overlay[data-skill="insight"] {
  --skill-color: #8b5cf6;
}

.roll-overlay[data-skill="investigation"] {
  --skill-color: #10b981;
}

.roll-overlay[data-skill="perception"] .roll-overlay__header,
.roll-overlay[data-skill="insight"] .roll-overlay__header,
.roll-overlay[data-skill="investigation"] .roll-overlay__header {
  background: linear-gradient(135deg, rgba(var(--skill-color), 0.15) 0%, transparent 100%);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .roll-overlay {
    width: calc(100vw - 40px);
    max-width: 300px;
  }

  .roll-overlay__btn {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .roll-overlay {
    transition: opacity 0.1s ease;
    transform: none;
  }

  .roll-overlay--visible,
  .roll-overlay--hiding {
    transform: none;
  }

  .roll-overlay__dice {
    animation: none;
  }

  .roll-overlay__btn--roll {
    animation: none;
  }

  .roll-overlay__dice-display--rolling .roll-overlay__dice,
  .roll-overlay__dice-display--rolling .roll-overlay__expression {
    animation: none;
  }
}
/**
 * Scene Divider Component
 * ========================
 * Visual chapter breaks between dramatic scenes in the narrative.
 * D&D-themed ornamental divider with fading gradient lines,
 * a central diamond badge, and a crossed-swords icon.
 *
 * Structure:
 *   .scene-divider
 *     .scene-divider__line--left   (fading ornamental line)
 *     .scene-divider__content      (central badge)
 *       .scene-divider__icon
 *       .scene-divider__text
 *         .scene-divider__location (optional)
 *         .scene-divider__activity
 *     .scene-divider__line--right  (fading ornamental line)
 *     .scene-divider__description  (optional transition prose)
 */

/* ========================================
 * Container
 * ======================================== */

.scene-divider {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
  position: relative;
  animation: sceneDividerReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sceneDividerReveal {
  from {
    opacity: 0;
    transform: scaleX(0.85);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ========================================
 * Ornamental Lines
 * Gradient fades from center badge outward to transparent edges,
 * creating the look of parchment ink trailing off the page.
 * ======================================== */

.scene-divider__line {
  flex: 1;
  position: relative;
  height: 0;
  min-width: 40px;

  /* Double-line effect: a thin top rule and a thin bottom rule */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  overflow: visible;
}

/* The main ornamental line */
.scene-divider__line::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.7;
}

/* The decorative dot-dash inner rule */
.scene-divider__line::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0px,
    var(--color-accent-primary, #c8a96e) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Left line: fades from transparent on the left to full color at center */
.scene-divider__line--left::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.2) 20%,
    var(--color-accent-primary, #c8a96e) 100%
  );
}

.scene-divider__line--left::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.15) 25%,
    rgba(200, 169, 110, 0.3) 100%
  );
  background-image: none;
}

/* Right line: fades from full color at center to transparent on the right */
.scene-divider__line--right::before {
  background: linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0%,
    rgba(200, 169, 110, 0.2) 80%,
    transparent 100%
  );
}

.scene-divider__line--right::after {
  background: linear-gradient(
    90deg,
    rgba(200, 169, 110, 0.3) 0%,
    rgba(200, 169, 110, 0.15) 75%,
    transparent 100%
  );
  background-image: none;
}

/* ========================================
 * Diamond Badge
 * The central ornament. Uses a rotated square (clip-path diamond)
 * so the border corners create the classic D&D chapter break look.
 * ======================================== */

.scene-divider__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  position: relative;

  /* Diamond border via clip-path on a pseudo-element */
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(200, 169, 110, 0.08);
  white-space: nowrap;
  flex-shrink: 0;

  /* Corner diamonds — CSS-only using box-shadow on a tiny rotated pseudo */
}

/* Corner accent diamonds on the badge */
.scene-divider__content::before,
.scene-divider__content::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -3px;
}

.scene-divider__content::before {
  left: -4px;
}

.scene-divider__content::after {
  right: -4px;
}

/* ========================================
 * Icon — Crossed Swords / Chapter Mark
 * ======================================== */

.scene-divider__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-accent-primary, #c8a96e);
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(200, 169, 110, 0.5));
  flex-shrink: 0;
}

/* ========================================
 * Text Content
 * ======================================== */

.scene-divider__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-divider__location {
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-primary, #c8a96e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.scene-divider__activity {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #888);
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ========================================
 * Optional Description (transition prose)
 * Appears below the full divider line on its own row
 * ======================================== */

.scene-divider__description {
  flex-basis: 100%;
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-secondary, #aaa);
  border-left: 2px solid var(--color-accent-primary, #c8a96e);
  opacity: 0.85;
  line-height: 1.5;
}

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

@media (max-width: 640px) {
  .scene-divider {
    padding: var(--space-4) var(--space-2);
    gap: var(--space-2);
  }

  /* Hide gradient lines on small screens — the badge stands alone */
  .scene-divider__line {
    display: none;
  }

  .scene-divider__content {
    padding: var(--space-2) var(--space-3);
  }

  .scene-divider__location {
    font-size: 0.75rem;
  }

  .scene-divider__activity {
    font-size: 0.625rem;
  }

  .scene-divider__description {
    margin: var(--space-2) 0 0;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .scene-divider {
    animation: none;
  }
}

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

@media (prefers-contrast: high) {
  .scene-divider__content {
    border-width: 2px;
  }

  .scene-divider__line::before {
    opacity: 1;
    height: 2px;
  }

  .scene-divider__line::after {
    opacity: 0.7;
  }

  .scene-divider__icon {
    opacity: 1;
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .scene-divider {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: var(--space-3) 0;
    animation: none;
  }

  .scene-divider__line::before {
    background: #000;
    opacity: 0.5;
  }

  .scene-divider__line::after {
    display: none;
  }

  .scene-divider__content {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
  }

  .scene-divider__content::before,
  .scene-divider__content::after {
    background: #fff;
    border-color: #000;
  }

  .scene-divider__icon {
    color: #000;
  }

  .scene-divider__location {
    color: #000;
  }

  .scene-divider__activity {
    color: #444;
  }

  .scene-divider__description {
    color: #444;
    border-left-color: #000;
  }
}
/**
 * Screenplay Format Component
 * ===========================
 * Cinematic screenplay-style formatting for narrative content.
 * Transforms in-game content (NPC speech, DM narration, scenes) into
 * professional screenplay layout while preserving terminal style for
 * system messages.
 *
 * Layout Reference:
 * ┌─────────────────────────────────────────────────────────────┐
 * │ INT. THE RUSTY ANCHOR - EVENING           [Perception +2]  │  ← Slug line + margin notes
 * ├─────────────────────────────────────────────────────────────┤
 * │     The tavern is thick with pipe smoke...                  │  ← Action/description
 * │                                                             │
 * │                      BARTENDER                              │  ← Character name (centered)
 * │              (wiping a glass, suspicious)                   │  ← Parenthetical
 * │          They're here. I knew they'd come.                  │  ← Dialogue (centered)
 * ├─────────────────────────────────────────────────────────────┤
 * │ ⚙ System: Roll Perception DC 14                            │  ← System message (terminal style)
 * └─────────────────────────────────────────────────────────────┘
 */

/* ========================================
 * Screenplay Mode Container
 * ======================================== */

.screenplay-mode {
  --screenplay-max-width: 65ch;
  --screenplay-action-indent: 1.5rem;
  --screenplay-dialogue-width: 65%;
  --screenplay-character-spacing: 0.1em;
  --screenplay-slug-height: 2px;
}

/* ========================================
 * Scene Header (Slug Line)
 * Professional screenplay slug line format
 * ======================================== */

.screenplay-mode .scene-divider,
.screenplay-scene-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  margin: var(--space-4) 0 var(--space-3);
  border-bottom: var(--screenplay-slug-height) solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  animation: none;
  gap: var(--space-4);
  position: relative;
}

/* Remove the default scene divider decorations in screenplay mode ONLY when a
   `data-slug` attribute is present — i.e. when the divider was authored as a
   slug-line scene header. JS-created dividers from SceneDividerController
   carry no `data-slug` and therefore retain their default decorative content
   (icon + location + activity), which screenplay-mode would otherwise hide.
   Without this scoping the location label was invisible in `game` room
   (#4808 — game is in narrative_controller.js SCREENPLAY_ROOMS, so every
   in-game scene transition rendered a blank divider). */
.screenplay-mode .scene-divider[data-slug] .scene-divider__line,
.screenplay-mode .scene-divider[data-slug] .scene-divider__content {
  display: none;
}

/* Show slug line content instead — only when data-slug is present, otherwise
   the ::before pseudo would render an empty string and add stray padding. */
.screenplay-mode .scene-divider[data-slug]::before {
  content: attr(data-slug);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.screenplay-slug {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.screenplay-slug__prefix {
  color: var(--color-accent-primary);
  margin-right: var(--space-1);
}

.screenplay-slug__location {
  color: var(--color-text-primary);
}

.screenplay-slug__time {
  color: var(--color-text-tertiary);
  margin-left: var(--space-2);
}

/* ========================================
 * Margin Notes (Float Right)
 * Contextual info: perception bonuses, time, NPCs
 * ======================================== */

.screenplay-margin-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.screenplay-margin-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.screenplay-margin-note--perception {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.screenplay-margin-note--time {
  color: var(--color-accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.screenplay-margin-note--combat {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.screenplay-margin-note--npcs {
  color: var(--retro-purple, #7B68EE);
  background: rgba(123, 104, 238, 0.1);
}

/* ========================================
 * Action Lines (DM Narration)
 * Indented prose describing the scene
 * ======================================== */

.screenplay-mode .narrative-entry.dm,
.screenplay-mode .dm-narration,
.screenplay-action {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-2) var(--screenplay-action-indent);
  padding-right: var(--screenplay-action-indent);
  max-width: var(--screenplay-max-width);
  margin: var(--space-2) auto;
  line-height: 1.7;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  text-align: left;
}

.screenplay-mode .narrative-entry.dm:hover,
.screenplay-mode .dm-narration:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Remove border-left styling from DM entries in screenplay mode */
.screenplay-mode .narrative-entry.dm {
  border-left: none;
  background: transparent;
}

/* Action line paragraphs */
.screenplay-action p,
.screenplay-mode .dm-narration p {
  margin: 0 0 var(--space-3);
  text-indent: 0;
}

.screenplay-action p:last-child,
.screenplay-mode .dm-narration p:last-child {
  margin-bottom: 0;
}

/* ========================================
 * NPC Dialogue (Screenplay Format)
 * Centered character name, parenthetical, dialogue
 * ======================================== */

.screenplay-mode .npc-dialogue,
.screenplay-dialogue {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-3) 0;
  text-align: center;
  position: relative;
}

/* Remove the glow effect in screenplay mode */
.screenplay-mode .npc-dialogue::before {
  display: none;
}

/* Character Name (centered, uppercase) */
.screenplay-mode .npc-header,
.screenplay-character-name {
  display: block;
  text-align: center;
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-avatar {
  display: none;
}

.screenplay-mode .npc-name,
.screenplay-character-name__text {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--screenplay-character-spacing);
  color: var(--npc-color, var(--color-text-secondary));
  margin-bottom: 0;
}

/* Hide mood badge in screenplay mode - mood shown via parenthetical */
.screenplay-mode .npc-mood {
  display: none;
}

/* Parenthetical (emotion/action cue) */
.screenplay-mode .npc-dialogue[data-emotion],
.screenplay-parenthetical {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-dialogue[data-emotion]::after {
  content: '(' attr(data-emotion) ')';
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-parenthetical::before {
  content: '(';
}

.screenplay-parenthetical::after {
  content: ')';
}

/* Dialogue Block (centered, narrower) */
.screenplay-mode .npc-speech-bubble,
.screenplay-dialogue-content {
  max-width: var(--screenplay-dialogue-width);
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 0;
}

.screenplay-mode .npc-speech-bubble--spoken {
  padding-left: 0;
}

.screenplay-mode .npc-speech-bubble--spoken::before {
  display: none;
}

.screenplay-mode .npc-speech-bubble p {
  margin: 0;
  text-align: center;
}

/* Inner segments in dialogue */
.screenplay-mode .npc-beat {
  font-style: italic;
  color: var(--color-text-muted);
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-line {
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
  display: block;
  margin: var(--space-1) 0;
}

/* ========================================
 * 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;
  }
}
/* ===========================================
 * Optimistic Room Transition
 * ===========================================
 * Immediate visual feedback when a room navigation
 * click is fired, before the WebSocket round-trip
 * confirms. Resolves automatically when the real
 * room_changed broadcast arrives.
 */

/* --- Body-level cursor & click prevention --- */
body.room-transitioning .grid-layout-wrapper {
  cursor: progress;
  pointer-events: none;
}

/* --- Portal overlay (fixed fullscreen) --- */
.optimistic-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Expanding ring --- */
.optimistic-portal__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: portalExpand 0.4s ease-out forwards;
  box-shadow:
    0 0 30px 8px rgba(138, 43, 226, 0.4),
    0 0 60px 16px rgba(138, 43, 226, 0.2),
    inset 0 0 20px 4px rgba(186, 85, 255, 0.3);
  border: 2px solid rgba(186, 85, 255, 0.6);
  background: transparent;
}

@keyframes portalExpand {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    width: 120vmax;
    height: 120vmax;
    opacity: 0;
  }
}

/* --- Vignette darkening from edges --- */
.optimistic-portal__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 0;
  animation: vignetteIn 0.25s ease-out forwards;
}

@keyframes vignetteIn {
  to {
    opacity: 1;
  }
}

/* --- Room name label --- */
.optimistic-portal__label {
  position: relative;
  z-index: var(--z-raised);
  color: var(--color-gold, #d4a843);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  text-shadow: 0 0 12px rgba(212, 168, 67, 0.5);
  opacity: 0;
  transform: scale(0.95);
  animation: labelAppear 0.25s ease-out forwards;
}

/* Shimmer effect during loading */
.optimistic-portal__label::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: labelShimmer 1.5s ease-in-out 0.4s infinite;
}

@keyframes labelAppear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes labelShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* --- "Taking longer" message --- */
.optimistic-portal__slow-message {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted, #888);
  font-size: 0.875rem;
  opacity: 0;
  animation: slowMessageAppear 0.3s ease-out forwards;
}

@keyframes slowMessageAppear {
  to { opacity: 0.8; }
}

/* --- Panel pre-fade --- */
.grid-panel.optimistic-fading {
  opacity: 0.3;
  transform: scale(0.97);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.grid-panel.optimistic-restoring {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

/* ===========================================
 * Phase 3: Progressive Narrative Reveal
 * ===========================================
 * Applied to narrative entries arriving during or
 * shortly after a room transition. Content is revealed
 * top-to-bottom with a scan-line mask, creating the
 * impression that the room description is materializing.
 *
 * Phases timeline:
 *   Phase 1 (0-400ms): Portal expand + vignette
 *   Phase 2 (400-800ms): Room name label + shimmer
 *   Phase 3 (800ms+): Narrative content scan-line reveal
 */

/* --- Narrative reveal (scan-line mask) --- */
.narrative-reveal {
  animation: narrativeReveal 1.2s ease-out forwards;
}

@keyframes narrativeReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.4;
  }
  10% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}

/* Scan-line accent — a subtle horizontal highlight that
   sweeps down the content in sync with the clip reveal */
.narrative-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.6) 30%,
    rgba(186, 85, 255, 0.4) 70%,
    transparent 100%
  );
  animation: scanLineDown 1.2s ease-out forwards;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes scanLineDown {
  0% {
    top: 0;
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Stagger delay for successive entries — each subsequent
   narrative entry in a room reveal starts slightly later,
   creating a cascading materialization effect */
.narrative-reveal:nth-child(1) { animation-delay: 0ms; }
.narrative-reveal:nth-child(2) { animation-delay: 150ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(3) { animation-delay: 300ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(4) { animation-delay: 450ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(5) { animation-delay: 600ms; clip-path: inset(0 0 100% 0); }

/* Ensure the entry is positioned for the ::before scan-line */
.narrative-reveal {
  position: relative;
}

/* ===========================================
 * Scene Transitions (within same room)
 * ===========================================
 * Lighter visual treatment than room transitions.
 * Uses slide instead of portal for semantic distinction.
 */

.optimistic-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel-chrome);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: sceneOverlayIn 0.2s ease-out forwards;
}

@keyframes sceneOverlayIn {
  to { opacity: 1; }
}

.optimistic-scene__label {
  color: var(--color-text, #e8e8e8);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-border, #444);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  animation: sceneLabelSlide 0.25s ease-out 0.1s forwards;
}

@keyframes sceneLabelSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scene icon (activity-specific) */
.optimistic-scene__icon {
  margin-right: 0.5rem;
  opacity: 0.8;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .optimistic-portal__ring {
    animation: none;
    display: none;
  }

  .optimistic-portal__vignette {
    animation: none;
    opacity: 0.4;
  }

  .optimistic-portal__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .optimistic-portal__label::after {
    animation: none;
    display: none;
  }

  .optimistic-portal__slow-message {
    animation: none;
    opacity: 0.8;
  }

  .grid-panel.optimistic-fading {
    transition: none;
    opacity: 0.3;
    transform: none;
  }

  .grid-panel.optimistic-restoring {
    transition: none;
  }

  .optimistic-scene {
    animation: none;
    opacity: 1;
  }

  .optimistic-scene__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Phase 3: Narrative reveal — simple fade instead of scan-line */
  .narrative-reveal {
    animation: narrativeRevealReduced 0.3s ease-out forwards;
  }

  .narrative-reveal::before {
    animation: none;
    display: none;
  }
}

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

/* ===========================================
 * Mobile Optimizations (#718)
 * ===========================================
 * Faster animations on mobile where screen real estate is limited
 * and users expect snappier interactions. Uses CSS custom properties
 * set by transition_timing.js syncCssTimingProperties().
 */

@media (max-width: 1023px) {
  /* Faster portal ring expansion on mobile */
  .optimistic-portal__ring {
    animation-duration: 0.25s;
  }

  /* Faster vignette on mobile */
  .optimistic-portal__vignette {
    animation-duration: 0.15s;
  }

  /* Faster label appearance on mobile */
  .optimistic-portal__label {
    animation-duration: 0.15s;
    font-size: 1.2rem;
  }

  /* Skip shimmer on mobile — saves GPU cycles */
  .optimistic-portal__label::after {
    display: none;
  }

  /* Faster panel fading on mobile */
  .grid-panel.optimistic-fading {
    transition-duration: 0.2s;
  }

  .grid-panel.optimistic-restoring {
    transition-duration: 0.2s;
  }

  /* Faster scene overlay on mobile */
  .optimistic-scene {
    animation-duration: 0.12s;
  }

  .optimistic-scene__label {
    animation-duration: 0.15s;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  /* Shorter narrative reveal on mobile */
  .narrative-reveal {
    animation-duration: 0.6s;
  }

  /* Reduce stagger delays on mobile */
  .narrative-reveal:nth-child(2) { animation-delay: 80ms; }
  .narrative-reveal:nth-child(3) { animation-delay: 160ms; }
  .narrative-reveal:nth-child(4) { animation-delay: 240ms; }
  .narrative-reveal:nth-child(5) { animation-delay: 320ms; }

  /* Simpler scan-line on mobile */
  .narrative-reveal::before {
    animation-duration: 0.6s;
  }
}
/*
 * Cyberpunk / Retro-Futuristic Terminal Effects
 * ==============================================
 * Layered CRT-inspired visual effects for the terminal:
 *   1. Animated scan-line overlay (CSS-only, very subtle)
 *   2. Swing-down entrance for narrative segments
 *   3. Glow effects on interactive elements
 *   4. Boot sequence enhancement (green phosphor)
 *   5. Room transition flicker
 *
 * All effects are purely cosmetic and respect prefers-reduced-motion.
 * Uses existing design tokens from _tokens.css.
 *
 * Activation: Always on (subtle enough to be ambient).
 * The CRT effects system (effects/_crt.css) is a separate opt-in toggle;
 * this file provides a lighter always-on cyberpunk texture layer.
 */

/* ========================================
 * CUSTOM PROPERTIES
 * Tuning knobs for cyberpunk effects
 * ======================================== */
:root {
  --cyber-scanline-opacity: 0.025;
  --cyber-scanline-speed: 60s;
  --cyber-glow-color: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 25%, transparent);
  --cyber-glow-color-strong: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 40%, transparent);
  --cyber-glow-color-input: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 25%, transparent);
  --cyber-swing-duration: 400ms;
  --cyber-flicker-duration: 200ms;
}

/* ========================================
 * 1. SCAN-LINE OVERLAY
 * Subtle repeating horizontal lines that
 * drift slowly down the screen. Gives the
 * terminal a CRT phosphor texture without
 * being distracting.
 * ======================================== */
.terminal-container::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background:
    /* Static scan-line texture */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 4px
    );
  animation: cyberScanlineDrift var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

/* Animated moving scan-line: a single brighter band
   that sweeps top-to-bottom over the full viewport */
.terminal-container::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.03) 48%,
    rgba(255, 255, 255, 0.015) 50%,
    rgba(0, 0, 0, 0.03) 52%,
    transparent 55%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: cyberScanlineSweep var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

@keyframes cyberScanlineDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

@keyframes cyberScanlineSweep {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

/* ========================================
 * 2. SWING-DOWN ENTRANCE
 * Narrative segments "swing in" from above
 * with a subtle perspective rotation, as if
 * dropping from a monitor bezel.
 * ======================================== */
@keyframes swingDown {
  from {
    transform: perspective(800px) rotateX(-15deg) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: perspective(800px) rotateX(0) translateY(0);
    opacity: 1;
  }
}

/* Apply swing-down to new narrative segments.
   The .narrative-segment base in _retro_narrative.css sets
   opacity:0 + segmentReveal; we override that animation
   with the more dramatic swingDown for the cyberpunk feel.
   Uses the same stagger delays already defined there. */
.narrative-segment {
  animation-name: swingDown;
  animation-duration: var(--cyber-swing-duration);
  animation-timing-function: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  animation-fill-mode: forwards;
  transform-origin: top center;
}

/* ========================================
 * 3. GLOW EFFECTS
 * Subtle cyan/blue glow on interactive
 * elements for that neon-terminal feel.
 * ======================================== */

/* Input field focus glow */
.input-field:focus {
  box-shadow: 0 0 8px var(--cyber-glow-color-input);
}

/* Input line border glow on focus */
.input-line:focus-within {
  box-shadow: 0 0 6px var(--cyber-glow-color-input);
}

/* Active channel tab indicator glow */
.channel-tab--active {
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color, var(--color-accent-primary)) 20%, transparent);
}

/* Toast notification glow border */
.toast--visible {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 8px color-mix(in srgb, var(--toast-border-color, var(--color-accent-primary)) 20%, transparent);
}

/* Celebration toast already has a strong glow; intensify slightly */
.toast--celebration.toast--visible {
  box-shadow:
    0 4px 24px rgba(251, 191, 36, 0.3),
    0 0 40px rgba(251, 191, 36, 0.15),
    0 0 12px color-mix(in srgb, var(--color-accent-warning) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Prompt character glow (the > or $ before input) */
.input-area:focus-within .input-prompt {
  text-shadow: 0 0 4px var(--cyber-glow-color-input);
}

/* ========================================
 * 5. ROOM TRANSITION FLICKER
 * Brief opacity dip when switching rooms,
 * simulating a CRT display mode-change.
 * Applied via JS adding .cyber-room-transition
 * to .terminal-container.
 * ======================================== */
@keyframes cyberRoomFlicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.97; }
  40%  { opacity: 1; }
  60%  { opacity: 0.98; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

.terminal-container.cyber-room-transition {
  animation: cyberRoomFlicker var(--cyber-flicker-duration) ease-out;
}

/* ========================================
 * 6. HOLOGRAPHIC SHIMMER
 * Subtle gradient sweep across cards on hover.
 * Applies to detail-cards, creation-cards, and
 * any element with .cyber-shimmer class.
 * ======================================== */
@keyframes cyberShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.cyber-shimmer,
.detail-card:hover,
.creation-card:hover {
  background-image: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: cyberShimmer 2s ease-in-out;
}

/* ========================================
 * 7. DATA-STREAM TRANSITION
 * Vertical reveal effect for state changes.
 * Content appears to materialize line-by-line
 * like data rendering on a terminal.
 * ======================================== */
@keyframes cyberDataStream {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.cyber-data-stream {
  animation: cyberDataStream 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================
 * 8. SCAN-LINE REVEAL
 * Content reveals with a horizontal scan-line
 * moving down. For room transitions and major
 * UI state changes.
 * ======================================== */
@keyframes cyberScanReveal {
  0% {
    mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
  }
  100% {
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
  }
}

.cyber-scan-reveal {
  animation: cyberScanReveal 0.6s ease-out forwards;
}

/* ========================================
 * 9. FADE-GLOW ENTRANCE
 * Elements fade in with a brief glow pulse.
 * Lighter alternative to swing-down for less
 * dramatic content like panel headers.
 * ======================================== */
@keyframes cyberFadeGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 8px var(--cyber-glow-color);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 4px var(--cyber-glow-color);
  }
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

.cyber-fade-glow {
  animation: cyberFadeGlow 0.5s ease-out forwards;
}

/* ========================================
 * 10. CRT EFFECTS DECONFLICT
 * When the full CRT system is toggled on
 * (effects/_crt.css), hide the cyberpunk
 * scan-line overlay to avoid double-stacking.
 * Glow and swing effects remain active.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container::after,
html[data-crt-effects="on"] .terminal-container::before,
body.crt-enabled .terminal-container::after,
body.crt-enabled .terminal-container::before {
  display: none;
}

/* ========================================
 * 7. PREFERS-REDUCED-MOTION
 * Disable scan-lines and swing animation.
 * Keep subtle static glow effects only.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Remove scan-line overlays entirely */
  .terminal-container::after,
  .terminal-container::before {
    animation: none;
    background: none;
    display: none;
  }

  /* Revert swing-down to simple instant appear */
  .narrative-segment {
    animation-name: none;
    opacity: 1;
    transform: none;
  }

  /* Remove room transition flicker */
  .terminal-container.cyber-room-transition {
    animation: none;
  }

  /* Disable shimmer, data-stream, scan-reveal */
  .cyber-shimmer,
  .detail-card:hover,
  .creation-card:hover {
    animation: none;
    background-image: none;
  }

  .cyber-data-stream,
  .cyber-scan-reveal,
  .cyber-fade-glow {
    animation: none;
    opacity: 1;
  }

  /* Glow effects remain (static, no animation) */
}
/*
 * Plan Preview Card - [plan] mode action preview
 * ===============================================
 * Displayed when a player sends a [plan] message.
 * Shows mechanical consequences and AI flavor before committing.
 * Quick action buttons (Do it / Nevermind) control commit/dismiss.
 */

/* ========================================
 * CARD CONTAINER
 * ======================================== */

.plan-preview-card {
  margin: var(--space-3, 0.75rem) 0;
  background: var(--color-bg-secondary, #2a2a3e);
  border: 1px solid var(--color-accent-warning, #e5c07b);
  border-left: 3px solid var(--color-accent-warning, #e5c07b);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  animation: plan-preview-enter 0.2s ease-out;
}

/* ========================================
 * HEADER
 * ======================================== */

.plan-preview-header {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(229, 192, 123, 0.1);
  border-bottom: 1px solid var(--color-border-subtle, #333);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-accent-warning, #e5c07b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
 * MECHANICAL SUMMARY
 * ======================================== */

.plan-preview-mechanical {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-relaxed, 1.65);
  border-bottom: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * AI FLAVOR TEXT
 * ======================================== */

.plan-preview-flavor {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  line-height: var(--line-height-relaxed, 1.65);
  font-style: italic;
}

/* ========================================
 * NARRATIVE PREVIEW
 * ======================================== */

.plan-preview-narrative {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  line-height: var(--line-height-relaxed, 1.65);
  border-top: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  .plan-preview-card {
    animation: none;
  }
}
/**
 * Player Action Log Panel (#4231 USER-PACING / AFFORDANCE-INTEGRITY)
 * ===================================================================
 * Player's recovery surface — last N actions with status indicators and
 * retry affordance. Distinct from combat `terminal/action_queue_controller`
 * (in-turn-only) — this panel surfaces ALL action history.
 *
 * Container identity: surface-floating-panel. Cohabits with the
 * pipeline-progress bubble (#4228) — they sit on the same edge of the
 * viewport but at distinct y-offsets so neither obscures the other.
 *
 * Visual language: calm. Status dot + small monospace verb + dim source
 * preview + retry button only when failed. No glow, no animation other
 * than the queued/in_flight pulse.
 */

.player-action-log {
  position: fixed;
  right: var(--space-4, 16px);
  /* Sits above the pipeline-progress bubble (which is bottom: 48px) so the
     two cohabit. The action log is a wider strip with retry buttons; the
     pipeline-progress bubble is a transient transcript. */
  bottom: calc(var(--space-12, 48px) + 56px);
  width: min(420px, calc(100vw - var(--space-8, 32px)));
  max-height: 50vh;
  z-index: var(--z-floating, 1000);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* surface-floating-panel provides bg/border/radius/shadow */
}

.player-action-log[hidden] {
  display: none;
}

/* Empty state hides the panel entirely on first session — the panel reveals
   itself only once there's something to show. */
.player-action-log--empty[hidden] {
  display: none;
}

.player-action-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.4));
}

.player-action-log__toggle {
  appearance: none;
  background: none;
  border: 0;
  color: var(--color-text-primary, #ddd);
  font: inherit;
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 0;
  width: 100%;
  text-align: left;
}

.player-action-log__toggle:hover,
.player-action-log__toggle:focus-visible {
  color: var(--color-text-emphasis, #fff);
  outline: none;
}

.player-action-log__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 var(--space-1, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #aaa);
}

/* Collapsed state — only the header is visible; entries are hidden. */
.player-action-log--collapsed .player-action-log__entries,
.player-action-log--collapsed .player-action-log__empty {
  display: none;
}

.player-action-log__entries {
  list-style: none;
  margin: 0;
  padding: var(--space-2, 8px) 0;
  overflow-y: auto;
  flex: 1;
  /* Subtle inner shadow at top/bottom hints there's more to scroll when
     the list overflows. */
}

.player-action-log__empty {
  margin: 0;
  padding: var(--space-3, 12px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.player-action-log__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.04));
}

.player-action-log__entry:last-child {
  border-bottom: 0;
}

/* Status dot — color-coded so the player can scan vertical column quickly. */
.player-action-log__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.4em;
  flex: 0 0 auto;
  background: var(--color-text-tertiary, #888);
}

.player-action-log__entry[data-status="queued"] .player-action-log__status-dot {
  background: var(--color-warning, #f5b042);
  animation: player-action-log-pulse 1.4s ease-in-out infinite;
}

.player-action-log__entry[data-status="in_flight"] .player-action-log__status-dot {
  background: var(--color-info, #4a9eff);
  animation: player-action-log-pulse 1.0s ease-in-out infinite;
}

.player-action-log__entry[data-status="completed"] .player-action-log__status-dot {
  background: var(--color-success, #4ade80);
}

.player-action-log__entry[data-status="failed"] .player-action-log__status-dot {
  background: var(--color-error, #ef4444);
}

@keyframes player-action-log-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .player-action-log__entry[data-status="queued"] .player-action-log__status-dot,
  .player-action-log__entry[data-status="in_flight"] .player-action-log__status-dot {
    animation: none;
  }
}

.player-action-log__body {
  flex: 1 1 auto;
  min-width: 0;
}

.player-action-log__header {
  /* Already styled above */
}

.player-action-log__entry .player-action-log__header {
  /* Override the panel-level header for entry rows */
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  padding: 0;
  border: 0;
  background: transparent;
}

.player-action-log__verb {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #ddd);
}

.player-action-log__status {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, #888);
}

.player-action-log__status[data-status="failed"] {
  color: var(--color-error, #ef4444);
}

.player-action-log__status[data-status="completed"] {
  color: var(--color-success, #4ade80);
}

.player-action-log__duration {
  margin-left: auto;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-variant-numeric: tabular-nums;
}

.player-action-log__source {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-action-log__preview {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.player-action-log__error {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, #ef4444);
  font-style: italic;
}

.player-action-log__retry {
  align-self: flex-start;
  appearance: none;
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.08));
  color: var(--color-text-primary, #ddd);
  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  flex: 0 0 auto;
}

.player-action-log__retry:hover,
.player-action-log__retry:focus-visible {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.12));
  border-color: var(--color-border-emphasis, rgba(255, 255, 255, 0.32));
  outline: none;
}

.player-action-log__retry:active {
  background: var(--color-bg-active, rgba(255, 255, 255, 0.16));
}
/**
 * Session Ledger (#4227 STATE-PARITY-ON-REENTRY / ARRIVAL-LEGIBILITY
 *                       / PROGRESS-AS-CONTENT)
 * ===================================================================
 * The session-ledger is a status-zone item — it descends from the chrome
 * (mounted right after the status bar), NOT a grid panel. Visual treatment
 * follows the surface-status-zone primitive (see #4307); this stylesheet
 * only adds the ledger-specific layout, collapse animation, and per-row
 * structure. No glow, no rainbow gradients, no decorative emoji — calm.
 *
 * Container category: status-zone (CONTAINER-IDENTITY #4230).
 */

.session-ledger {
  /* surface-status-zone primitive supplies bg/border/text-color tokens.
     We add a minimal box layout + collapse animation here. */
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
}

.session-ledger[hidden] {
  display: none;
}

/* === Header (always visible, click target for collapse) === */

.session-ledger__header {
  display: flex;
  align-items: center;
  padding: var(--space-1, 4px) var(--space-3, 12px);
}

.session-ledger__toggle {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  width: 100%;
  text-align: left;
}

.session-ledger__toggle:hover,
.session-ledger__toggle:focus-visible {
  color: var(--color-text-emphasis, #fff);
  outline: none;
}

.session-ledger__toggle:focus-visible {
  /* WCAG: keyboard focus must be visible */
  outline: 2px solid var(--color-focus, rgba(120, 180, 255, 0.6));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.session-ledger__chevron {
  transition: transform 150ms ease-out;
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.7;
}

.session-ledger:not(.session-ledger--collapsed) .session-ledger__chevron {
  transform: rotate(180deg);
}

.session-ledger__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--font-size-xs, 0.75rem);
}

.session-ledger__summary {
  flex: 1 1 auto;
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: var(--space-2, 8px);
}

/* === Body (collapsible) === */

.session-ledger__body {
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.session-ledger__body[hidden] {
  display: none;
}

/* === Grid of label/value rows === */

.session-ledger__grid {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-3, 12px);
  row-gap: var(--space-1, 4px);
  align-items: start;
}

.session-ledger__row {
  display: contents;
}

.session-ledger__row--block {
  /* Block rows (transcript, available actions) span both columns visually
     by giving the value column a wider treatment via the dd. The row is
     still display: contents so the grid handles the layout. */
}

.session-ledger__label {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0;
  padding-top: 2px;
}

.session-ledger__value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.session-ledger__value--phase {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.85;
}

.session-ledger__char-meta {
  margin-left: var(--space-2, 8px);
  opacity: 0.7;
  font-size: var(--font-size-xs, 0.75rem);
}

.session-ledger__room-icon {
  margin-right: var(--space-1, 4px);
  opacity: 0.8;
}

/* === Transcript list === */

.session-ledger__transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-ledger__transcript-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-family-mono, ui-monospace, monospace);
}

.session-ledger__transcript-verb {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-ledger__transcript-status {
  flex: 0 0 auto;
  opacity: 0.6;
  text-transform: lowercase;
}

.session-ledger__transcript-item[data-status="failed"] .session-ledger__transcript-status {
  color: var(--color-status-error, #f88);
  opacity: 1;
}

.session-ledger__transcript-item[data-status="in_flight"] .session-ledger__transcript-status {
  color: var(--color-status-pending, #fc8);
  opacity: 1;
}

/* === Available actions list === */

.session-ledger__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.session-ledger__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px var(--space-2, 8px);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.2));
}

.session-ledger__action-icon {
  opacity: 0.7;
}

/* === Empty states === */

.session-ledger__empty {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.5;
  font-style: italic;
}
/**
 * Minimap Styles
 * ==============
 * Persistent corner minimap showing the current room wireframe.
 * Semi-transparent overlay in the bottom-right corner.
 */

.minimap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 240px;
  height: 240px;
  z-index: var(--z-panel);
  border: 1px solid var(--terminal-border, #3e4451);
  border-radius: var(--radius-sm, 0.25rem);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 0 12px rgba(97, 175, 239, 0.15);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.minimap--hidden {
  opacity: 0;
  pointer-events: none;
}

.minimap__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@media (max-width: 600px) {
  .minimap {
    width: 160px;
    height: 160px;
    bottom: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .minimap {
    transition: none;
  }
}
/*
 * CRT / Phosphor Visual Effects
 * ==============================
 * Optional retro CRT monitor aesthetic: scanlines, phosphor glow,
 * screen curvature, subtle flicker, and edge vignette.
 *
 * Activation:
 *   html[data-crt-effects="on"]   (primary, toggled via Settings)
 *   body.crt-enabled              (alternative class-based toggle)
 *
 * Independent of theme -- adapts via --color-accent-primary.
 * Toggle via Settings > CRT Effects.
 *
 * Performance notes:
 *   - Overlays use position:fixed + pointer-events:none (composited)
 *   - Animations use transform/opacity only (GPU-composited)
 *   - will-change scoped to animated elements only
 *   - Flicker uses CSS animation, no JS setInterval needed
 */

/* ========================================
 * CRT CUSTOM PROPERTIES
 * Tuning knobs for all effects
 * ======================================== */
html[data-crt-effects="on"],
body.crt-enabled {
  --crt-scanline-opacity: 0.03;
  --crt-scanline-size: 4px;
  --crt-scanline-drift-duration: 12s;
  --crt-vignette-strength: 0.15;
  --crt-glow-color: color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
  --crt-glow-color-strong: color-mix(in srgb, var(--color-accent-primary) 60%, transparent);
  --crt-curvature-radius: 12px;
  --crt-flicker-duration: 0.03s;
}

/* ========================================
 * SCANLINES
 * Subtle horizontal line overlay via pseudo-element
 * ======================================== */
html[data-crt-effects="on"]::before,
body.crt-enabled::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) var(--crt-scanline-size)
  );
  will-change: background-position;
  animation: crt-scanline-drift var(--crt-scanline-drift-duration) linear infinite;
}

@keyframes crt-scanline-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 var(--crt-scanline-size); }
}

/* ========================================
 * SCREEN EDGE VIGNETTE
 * Darkened edges like a real CRT tube
 * ======================================== */
html[data-crt-effects="on"]::after,
body.crt-enabled::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, var(--crt-vignette-strength)) 100%
  );
}

/* ========================================
 * SCREEN CURVATURE
 * Slight barrel distortion via border-radius on the
 * main terminal container. Purely cosmetic -- does not
 * affect layout or interaction hit-testing.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container,
body.crt-enabled .terminal-container {
  border-radius: var(--crt-curvature-radius);
  overflow: hidden;
}

/* Softer curvature for the full page body */
html[data-crt-effects="on"] body,
body.crt-enabled {
  perspective: 1200px;
}

html[data-crt-effects="on"] .terminal-show,
body.crt-enabled .terminal-show {
  /* Curvature: subtle barrel distortion feel */
  transform: perspective(1200px) translateZ(0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.15),
    inset 0 0 120px rgba(0, 0, 0, 0.05);
  /* Flicker: very subtle brightness oscillation (0.03s period) */
  animation: crt-flicker var(--crt-flicker-duration) infinite;
  will-change: opacity;
}

/* ========================================
 * PHOSPHOR GLOW
 * Green/amber-tinted text-shadow on key elements.
 * Uses theme accent color so it adapts to any theme.
 * ======================================== */
html[data-crt-effects="on"] .narrative-output,
body.crt-enabled .narrative-output {
  text-shadow:
    0 0 1px var(--crt-glow-color);
}

html[data-crt-effects="on"] .input-field,
body.crt-enabled .input-field {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

html[data-crt-effects="on"] .input-prompt,
body.crt-enabled .input-prompt {
  text-shadow:
    0 0 2px var(--crt-glow-color);
}

/* Input line glow on focus */
html[data-crt-effects="on"] .input-line:focus-within,
body.crt-enabled .input-line:focus-within {
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

@keyframes crt-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.995; }
  100% { opacity: 1; }
}

/* ========================================
 * BOOT OVERLAY STYLING
 * Theme-aware colors for boot sequence
 * ======================================== */
html[data-crt-effects="on"] .shell-boot--dos_boot,
body.crt-enabled .shell-boot--dos_boot {
  background: var(--color-bg-primary, #0a0a0a);
  color: var(--color-accent-primary, #00e0e0);
}

html[data-crt-effects="on"] .shell-boot--dos_boot .boot-terminal,
body.crt-enabled .shell-boot--dos_boot .boot-terminal {
  font-family: var(--font-family-mono, 'IBM Plex Mono', 'Fira Code', monospace);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ========================================
 * NEOTERM-SPECIFIC ENHANCEMENTS
 * Stronger glow when paired with neoterm theme
 * ======================================== */
html[data-theme="neoterm"][data-crt-effects="on"] .narrative-output {
  text-shadow:
    0 0 1px rgba(0, 180, 180, 0.5);
}

html[data-theme="neoterm"][data-crt-effects="on"] .input-prompt {
  text-shadow:
    0 0 2px rgba(0, 180, 180, 0.4);
}

/* Amber highlight for system messages in neoterm */
html[data-theme="neoterm"][data-crt-effects="on"] .entry--system {
  text-shadow:
    0 0 1px rgba(180, 180, 0, 0.4);
}

/* ========================================
 * CRT SHUTDOWN (Logout Sequence)
 * Classic TV-off: white flash -> collapse to line -> dot -> fade
 * ======================================== */
.crt-shutdown {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-top);
  pointer-events: all;
  background: #ffffff;
  animation: crt-shutdown 1.2s ease-in forwards;
}

.crt-shutdown__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
  opacity: 0;
  animation: crt-shutdown-line 0.8s 0.4s ease-out forwards;
}

.crt-shutdown__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: crt-shutdown-dot 0.6s 0.9s ease-out forwards;
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.8),
    0 0 20px 4px rgba(255, 255, 255, 0.4);
}

@keyframes crt-shutdown {
  0% {
    background: rgba(255, 255, 255, 0.9);
  }
  15% {
    background: rgba(255, 255, 255, 0.7);
  }
  30% {
    background: rgba(0, 0, 0, 0.95);
  }
  100% {
    background: #000000;
  }
}

@keyframes crt-shutdown-line {
  0% {
    opacity: 1;
    height: 3px;
    box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.6);
  }
  60% {
    opacity: 1;
    height: 2px;
  }
  100% {
    opacity: 0;
    height: 1px;
  }
}

@keyframes crt-shutdown-dot {
  0% {
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  50% {
    opacity: 0.8;
    width: 4px;
    height: 4px;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* ========================================
 * REDUCED MOTION
 * Disable ALL CRT animations for accessibility.
 * Static overlays (scanlines, vignette, glow) remain.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-crt-effects="on"]::before,
  body.crt-enabled::before {
    animation: none;
  }

  html[data-crt-effects="on"] .terminal-show,
  body.crt-enabled .terminal-show {
    animation: none;
    will-change: auto;
  }

  .crt-shutdown {
    animation: crt-shutdown-reduced 0.4s ease-out forwards;
  }

  .crt-shutdown__line,
  .crt-shutdown__dot {
    display: none;
  }

  @keyframes crt-shutdown-reduced {
    0% { background: rgba(255, 255, 255, 0.5); }
    100% { background: #000000; }
  }
}
/**
 * Shell Base CSS
 * ==============
 * Shared CSS variables and base styles inherited by all shells.
 * These variables are the foundation that each shell overrides.
 *
 * Loaded BEFORE any shell-specific CSS to provide defaults.
 */

/* =============================================================================
   Default Shell Variables
   All shells can override these in their own CSS files
   ============================================================================= */

:root {
  /* Background colors */
  --shell-bg: var(--color-bg-primary, #1a1a2e);
  --shell-bg-secondary: var(--color-bg-secondary, #0f0f1a);
  --shell-bg-tertiary: var(--color-bg-tertiary, #252545);

  /* Text colors */
  --shell-fg: var(--color-text-primary, #e0e0e0);
  --shell-fg-dim: var(--color-text-secondary, #888);
  --shell-fg-bright: var(--color-text-primary, #fff);

  /* Accent and borders */
  --shell-accent: var(--color-accent-primary, #61afef);
  --shell-accent-dim: var(--color-accent-secondary, #4080b0);
  --shell-border: var(--color-border, #333);

  /* Selection colors */
  --shell-selection-bg: var(--color-accent-primary, #61afef);
  --shell-selection-fg: var(--color-bg-primary, #1a1a2e);

  /* Font stacks */
  --shell-font-mono: var(--font-mono, "Fira Code", "JetBrains Mono", monospace);
  --shell-font-heading: var(--font-heading, "Cinzel", "Georgia", serif);
  --shell-font-body: var(--font-body, "Spectral", "Georgia", serif);

  /* Status bar */
  --shell-status-bar-position: top;
  --shell-status-bar-height: 36px;
  --shell-status-bar-bg: var(--shell-bg-secondary);
  --shell-status-bar-fg: var(--shell-fg);
  --shell-status-bar-border: var(--shell-border);

  /* Layout */
  --shell-layout-type: grid_container;
  --shell-container-padding: 1rem;
  --shell-panel-gap: 1rem;

  /* Animation speeds */
  --shell-transition-fast: 150ms;
  --shell-transition-normal: 300ms;
  --shell-transition-slow: 500ms;

  /* Z-index layers */
  --shell-z-content: 1;
  --shell-z-panels: 100;
  --shell-z-floating: 500;
  --shell-z-overlay: 1000;
  --shell-z-boot: 2000;
  --shell-z-effects: 9000;
}

/* =============================================================================
   Status Bar Shell-Aware Positioning
   ============================================================================= */

/* Bottom-positioned status bar for DOS/MUD shells */
[data-shell="dos386"] .status-bar,
[data-shell="mud"] .status-bar,
[data-shell="dos-gui"] .status-bar {
  position: fixed;
  bottom: 0;
  top: auto;
  border-top: 1px solid var(--shell-border);
  border-bottom: none;
}

/* Adjust main content when status bar is at bottom */
[data-shell="dos386"] .terminal-container,
[data-shell="mud"] .terminal-container,
[data-shell="dos-gui"] .terminal-container {
  padding-bottom: calc(var(--shell-status-bar-height) + 1rem);
  padding-top: 1rem;
}

/* =============================================================================
   Layout Strategy Classes
   Applied by ShellLayoutManager
   ============================================================================= */

/* Single Viewport Layout (DOS, MUD) */
.shell-layout--single-viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.shell-layout--single-viewport .shell-viewport {
  flex: 1;
  overflow-y: auto;
  padding: var(--shell-container-padding);
}

/* Split Container Layout (Terminal default) */
.shell-layout--split-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr minmax(200px, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--shell-panel-gap);
  height: 100vh;
}

/* Fullscreen Overlay Layout (VTT, WoW) */
.shell-layout--fullscreen-overlay {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.shell-layout--fullscreen-overlay .shell-canvas {
  position: absolute;
  inset: 0;
}

.shell-layout--fullscreen-overlay .shell-overlay-zone {
  position: absolute;
  z-index: var(--shell-z-panels);
}

/* Floating Windows Layout (OS/2) */
.shell-layout--floating-windows {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--shell-bg);
  overflow: hidden;
}

/* Page Layout (Script mode) */
.shell-layout--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fffef5;
  padding: 1in 0;
}

.shell-layout--page .shell-page {
  width: 8.5in;
  max-width: calc(100vw - 2rem);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1in;
  padding-left: 1.5in;
  min-height: 11in;
}

/* =============================================================================
   Boot Sequence Overlays
   ============================================================================= */

.shell-boot {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-boot--dos_boot {
  background: #000;
  color: #aaaaaa;
  font-family: "IBM Plex Mono", "Perfect DOS VGA 437", monospace;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

.shell-boot--dos_boot .boot-terminal {
  color: #aaaaaa;
  font-size: 16px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.shell-boot--dos_boot .boot-terminal div {
  margin-bottom: 0.2em;
}

.shell-boot--os2_boot {
  background: #000080;
  color: #fff;
  flex-direction: column;
}

.shell-boot--os2_boot .boot-logo {
  margin-bottom: 2rem;
}

.shell-boot--os2_boot .boot-progress {
  width: 300px;
  text-align: center;
}

.shell-boot--os2_boot .boot-progress__bar {
  height: 20px;
  background: linear-gradient(90deg, #0080ff 0%, #00ffff 100%);
  border: 2px inset #ccc;
}

.shell-boot--telnet {
  background: #000;
  color: #c0c0c0;
  font-family: monospace;
}

/* Shutdown overlays */
.shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shutdown-overlay--dos {
  background: #000;
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
}

.shutdown-overlay--dos .shutdown-terminal {
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  text-align: center;
}

.shutdown-overlay--os2 {
  background: #000080;
  color: #fff;
}

/* =============================================================================
   Utility Classes for Shell Content
   ============================================================================= */

/* Hide in specific shells */
[data-shell="dos386"] .hide-in-dos,
[data-shell="mud"] .hide-in-mud,
[data-shell="script"] .hide-in-script {
  display: none !important;
}

/* Show only in specific shells */
.show-in-dos { display: none !important; }
[data-shell="dos386"] .show-in-dos { display: block !important; }

.show-in-script { display: none !important; }
[data-shell="script"] .show-in-script { display: block !important; }

/* Chrome visibility (hide decorative elements in certain shells) */
[data-shell="dos386"] .decorative-chrome,
[data-shell="mud"] .decorative-chrome,
[data-shell="script"] .decorative-chrome {
  display: none !important;
}

/* =============================================================================
   Desktop Icons and Taskbar - Hidden by Default
   Only shown in windowed shells (dos-gui, os2) via their specific CSS
   ============================================================================= */

.shell-desktop,
.shell-taskbar {
  display: none !important;
}
/* Terminal Layout
 * ================
 * Core layout styles for the terminal application.
 * Extracted from inline styles in layouts/terminal.html.erb
 */

/* Legacy variables are aliased in _tokens.css.
 * Do NOT re-declare them here — the canonical values
 * live in _tokens.css :root and must remain the single
 * source of truth to avoid color drift.
 * See _tokens.css "Legacy aliases" section.
 */

* {
  box-sizing: border-box;
}

/* Global utility: hide elements via classList.add('hidden').
 * Used by 50+ JS controllers (239 call sites). Without this rule,
 * classList.add('hidden') is a no-op and elements remain visible. */
.hidden {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base, 14px);
  line-height: var(--line-height-normal, 1.5);
  height: 100vh;              /* Fallback for older browsers */
  height: 100dvh;             /* Dynamic viewport height - accounts for browser chrome */
  overflow: hidden;
}

.terminal-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* Safe area insets for notched/rounded-corner devices */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

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