/** * Terminal D&D Design Tokens — Colors & Spacing * ================================================ * Color palette, background/text/accent colors, spacing scale, * border radius, and foundational visual variables. */ /* FOUC Prevention: Show body once CSS is loaded */ body.css-loading { visibility: visible; } :root { /* ======================================== * COLOR PALETTE * ======================================== */ /* Background Colors */ --color-bg-primary: #1a1a1a; --color-bg-secondary: #2d2d2d; --color-bg-tertiary: #3d3d3d; --color-bg-elevated: #404040; --color-bg-hover: #4a4a4a; /* Text Colors - WCAG AA compliant (4.5:1 minimum contrast on #1a1a1a) */ --color-text-primary: #e0e0e0; /* 11.5:1 contrast */ --color-text-secondary: #a0a0a0; /* 6.6:1 contrast */ --color-text-muted: #888888; /* 5.9:1 contrast - bumped from #666 for AA compliance */ --color-text-disabled: #666666; /* 4.2:1 - use only for disabled/decorative elements */ --color-text-inverse: #1a1a1a; /* Accent Colors - Slightly muted for easier viewing */ /* Primary interactive accent — phosphor-terminal green (#8029). Reuses the * canonical success green (--color-success #4ade80) so the terminal identity * is a single phosphor palette, not One-Dark blue. Contrast ≈10:1 on * #1a1a1a (WCAG AAA). Blue-named semantics (info, xp) are preserved via * --color-accent-blue / --color-accent-info below, which stay #5a9fd8. */ --color-accent-primary: #4ade80; /* Phosphor green - interactive elements */ --color-accent-secondary: #8ab56e; /* Green - success, HP, nature */ --color-accent-warning: #d4b06e; /* Gold - warnings, items */ --color-accent-error: #cf6068; /* Red - errors, damage */ --color-accent-purple: #b56cc8; /* Purple - DM, magic */ --color-accent-orange: #c08a58; /* Orange - evocation, factions */ --color-accent-cyan: #4da8b5; /* Cyan - necromancy, water */ /* Semantic status colors — base success token. Consumers already fall back * to #4ade80 (e.g. var(--color-success, #4ade80)); defining it here keeps * those panels green and fixes consumers WITHOUT a fallback (lobby_browser * DM-online dot rendered colorless before this). #4264 / #7752. */ --color-success: #4ade80; /* Green — success, online status */ /* 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 — WCAG AA non-text contrast (1.4.11, ≥3:1 on #1a1a1a). * default/primary #6a6a6a = 3.22:1 (raised from #404040 = 1.68:1, #8024). */ --color-border-default: #6a6a6a; --color-border-primary: #6a6a6a; --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: #5a8a5a; /* Raised from #2F4F2F — WCAG AA ≥4.5:1 on #1a1a1a */ --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: #5a8a5a; /* Raised from #2F4F2F — WCAG AA ≥4.5:1 on #1a1a1a */ --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); /* WCAG-AA-tuned muted text for the ~#1a1a1a sign-in surface (6.19:1); * extracted from sessions/new.html.erb inline #9a9a9a literals (#8247). */ --text-muted-aa: #9a9a9a; --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); /* Blue-named alias pinned to the literal One-Dark blue so blue-specific * consumers (info chips, xp) stay blue after the primary accent went * phosphor-green (#8029). Was var(--color-accent-primary). */ --color-accent-blue: #5a9fd8; --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 — #7a7a7a = 4.06:1 on #1a1a1a, kept above * --color-border-default (#6a6a6a) to preserve strong>default hierarchy (#8024). */ --color-border-strong: #7a7a7a; /* 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); /* Tinted accent overlays — subtle backgrounds for success/error surfaces. * Extracted from sessions/new.html.erb inline styles (#8247) so views * reference the token layer instead of re-declaring the rgba literal. */ --overlay-success-subtle: rgba(152, 195, 121, 0.1); /* accent-secondary @ 10% */ --overlay-error-subtle: rgba(224, 108, 117, 0.1); /* accent-error @ 10% */ /* Spacing aliases (semantic names) */ --space-xs: var(--space-1); --space-sm: var(--space-2); --space-md: var(--space-4); --space-lg: var(--space-6); --space-xl: var(--space-8); } /** * Terminal D&D Design Tokens — Typography, Animation, Z-Index * ============================================================ * Font families/sizes/weights, animation timings, shadows, * elevation system, transitions, and z-index scale. */ :root { /* ======================================== * TYPOGRAPHY * ======================================== */ /* Font Families */ --font-mono: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace; --font-family-mono: var(--font-mono); --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-script: 'Courier New', Courier, 'Liberation Mono', monospace; /* Fantasy Typography - D&D themed fonts */ --font-heading: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; --font-body: 'Spectral', Georgia, 'Times New Roman', Times, serif; --font-fantasy-fallback: Georgia, 'Times New Roman', serif; /* Font Sizes - Phase 1: Enhanced scale for readability */ --font-size-2xs: 10px; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; /* 13px → 14px: Reduces eye strain */ --font-size-md: 15px; /* 14px → 15px: Better hierarchy */ --font-size-lg: 17px; /* 16px → 17px: Enhanced readability */ --font-size-xl: 18px; --font-size-2xl: 20px; --font-size-3xl: 24px; --font-size-4xl: 32px; --font-size-5xl: 48px; /* Heading sizes - Typographic scale (1.25 ratio for classical proportions) */ --font-size-h1: 2rem; /* 32px - Page titles, major section headers */ --font-size-h2: 1.625rem; /* 26px - Section headers */ --font-size-h3: 1.3rem; /* ~21px - Subsection headers */ --font-size-h4: 1.125rem; /* 18px - Card/panel headers */ --font-size-h5: 1rem; /* 16px - Minor headers */ --font-size-h6: 0.875rem; /* 14px - Smallest headers */ /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-narrative: 1.75; /* Phase 2: Generous line-height for calm reading */ --line-height-relaxed: 1.75; /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ======================================== * SPACING SCALE (4px base unit, harmonized) * ======================================== */ --space-half: 2px; /* Alias for 0.5 units (used by turn rhythm) */ --space-0-5: 2px; /* 0.5 units */ --space-1: 4px; /* 1 unit - base */ --space-1-5: 6px; /* 1.5 units */ --space-2: 8px; /* 2 units */ --space-2-5: 10px; /* 2.5 units */ --space-3: 12px; /* 3 units */ --space-3-5: 14px; /* 3.5 units */ --space-4: 16px; /* 4 units */ --space-5: 20px; /* 5 units */ --space-6: 24px; /* 6 units */ --space-8: 32px; /* 8 units */ --space-10: 40px; /* 10 units */ --space-12: 48px; /* 12 units */ --space-16: 64px; /* 16 units */ --space-20: 80px; /* 20 units */ /* ======================================== * BORDER RADIUS (sharper for flat UI) * ======================================== */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 4px; --radius-full: 9999px; /* ======================================== * ANIMATION & TRANSITION TIMING * ======================================== */ /* Base animation speeds (controlled by data-animation-speed attribute) */ --animation-speed-multiplier: 1; /* Default: normal speed */ /* Duration tokens */ --duration-instant: calc(50ms * var(--animation-speed-multiplier)); --duration-fast: calc(150ms * var(--animation-speed-multiplier)); --duration-normal: calc(300ms * var(--animation-speed-multiplier)); --duration-slow: calc(500ms * var(--animation-speed-multiplier)); --duration-slower: calc(800ms * var(--animation-speed-multiplier)); --duration-dramatic: calc(1000ms * var(--animation-speed-multiplier)); /* Timing aliases (semantic names for component authors) * Map to --duration-* tokens above. Use these in component CSS. */ --timing-instant: var(--duration-instant); /* 50ms - Hover states, toggles */ --timing-fast: var(--duration-fast); /* 150ms - Button transitions, small state changes */ --timing-normal: var(--duration-normal); /* 300ms - Panel open/close, card transitions */ --timing-slow: var(--duration-slow); /* 500ms - Page transitions, complex animations */ --timing-dramatic: var(--duration-dramatic); /* 1000ms - Boot sequence, celebrations */ /* Easing functions */ --ease-default: ease; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================== * SHADOWS (removed for flat UI, keep glow for effects) * ======================================== */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none; --shadow-glow: 0 0 6px rgba(90, 159, 216, 0.2); --shadow-glow-success: 0 0 6px rgba(138, 181, 110, 0.2); --shadow-glow-warning: 0 0 6px rgba(212, 176, 110, 0.2); --shadow-glow-error: 0 0 6px rgba(207, 96, 104, 0.2); --shadow-glow-gold: 0 0 6px rgba(232, 196, 74, 0.2); --shadow-glow-purple: 0 0 6px rgba(181, 108, 200, 0.2); /* Subtle glow variants (6px, lower intensity) */ --shadow-glow-sm: 0 0 6px rgba(90, 159, 216, 0.2); --shadow-glow-sm-gold: 0 0 6px rgba(232, 196, 74, 0.15); /* ======================================== * ELEVATION SYSTEM (Phase 2 P1-6) * Subtle elevation with flat borders + shadows for depth * ======================================== */ --elevation-base: 0 0 0 1px var(--color-border-subtle); --elevation-raised: 0 0 0 1px var(--color-border-subtle); --elevation-floating: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--color-border-default); --elevation-modal: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-border-default); /* Focus Ring (for accessibility - WCAG 2.1 AAA compliance with dual ring) * Canonical focus color is gold (#ffd700) to match terminal theme. * --focus-ring-color is the single token all focus indicators should reference. */ --focus-ring-color: #ffd700; --focus-ring: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.25); --focus-ring-gold: 0 0 0 3px var(--focus-ring-color), 0 0 0 6px rgba(255, 215, 0, 0.2); --focus-ring-offset: 2px; /* ======================================== * TRANSITIONS * ======================================== */ --transition-fast: 100ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; --transition-resize: 150ms ease-out; --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); --transition-panel-slide: 250ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out-back: var(--ease-spring); /* ======================================== * Z-INDEX SCALE * * Single source of truth for all z-index values. * Merged from _elevation.css (#2186). Keep in sync with * app/javascript/lib/elevation.ts. * * Usage: .my-modal { z-index: var(--z-modal); } * * The pre-commit ratchet (z_index_literals in .ratchet.yml) blocks new * raw z-index numbers. Existing literals are grandfathered via the * baseline and the count can only decrease. * ======================================== */ /* --- Layer below: behind the parent's content (requires isolation: isolate * on the parent stacking context to avoid escaping). Use sparingly — * intended for true background layers like the hologram viewport (#4220). */ --z-behind: -1; /* --- Layer 0: Document flow — no special stacking --- */ --z-base: 0; --z-raised: 1; /* Just above siblings (card faces, image layers) */ --z-above: 2; /* Second layer in a local stack (badges, overlays within cards) */ --z-float: 5; /* Floating within a component (badges, decorative elements) */ /* --- Layer 1: Sticky / pinned — headers, nav bars, scroll controls --- */ --z-sticky: 10; /* Sticky headers, focus rings, narrative entries */ --z-sticky-above: 15; /* Above sticky (channel panes, canvas overlays) */ --z-docked: 20; /* Docked elements (tab headers, loot modal layers) */ --z-note: 30; /* Sticky notes above narrative content */ --z-note-active: 40; /* Active/dragged sticky note */ --z-scroll-anchor: 45; /* Scroll anchor indicators */ --z-narrative-loading: 45; /* Narrative loading bar (above panels, below modals/toasts) */ --z-scroll-btn: 50; /* Scroll-to-latest buttons */ /* --- Layer 2: Panels — sidebars, side panels, the main grid layout --- */ --z-panel: 100; --z-panel-active: 110; --z-panel-chrome: 150; /* Panel chrome, VTT token overlays */ /* --- Layer 3: Overlays — semi-transparent dimmers, focus traps --- */ --z-overlay: 200; --z-fixed: 250; /* Fixed-position elements (legacy, retained for compat) */ /* --- Layer 4: Postit / sheets — float over panels, under modals --- */ --z-sheet: 300; /* Bottom sheets, slide-up panels */ --z-modal-backdrop: 300; /* Modal backdrop dimmer */ --z-postit: 300; /* Postit notes above panels */ /* --- Layer 5: Modals — dialog boxes, confirmation prompts --- */ --z-modal: 400; --z-modal-overlay: 410; /* --- Layer 6: Toasts / tooltips --- */ --z-toast: 500; --z-tooltip: 500; /* Tooltips (same layer as toasts) */ /* --- Layer 7: Loading — full-screen loading overlays --- */ --z-loading: 600; /* --- Layer 8: Popover / floating UI — dropdowns, floating panels --- */ --z-dropdown: 900; /* Token spawner dropdowns */ --z-popover: 999; /* Popovers below floating panels */ --z-floating: 1000; /* Floating panels, tooltips, modals */ --z-floating-above: 1001; /* Controls above floating panels */ --z-floating-controls: 1010; /* Floating panel resize handles */ --z-notification: 1100; /* DM control notifications, form overlays */ --z-warning: 1200; /* DM warnings, toast overlays */ /* --- Layer 9: Dev tools / debug / full-screen effects --- */ --z-devtools: 9000; --z-fx: 9990; /* CRT / cyberpunk visual effects */ --z-fx-glass: 9995; /* Glass fracture overlay */ --z-curtain: 9997; /* Curtain behind top-level UI (dice backdrop) */ --z-ceiling: 9999; /* Top-level overlays (panel palette, death saves) */ --z-sky: 10000; /* Above everything (boot sequence, command palette) */ --z-sky-above: 10001; /* Controls on top of sky-level overlays */ --z-boot: 10000; /* Boot sequence (alias for --z-sky) */ /* --- Layer 10: Combat / roll overlays — absolute topmost --- */ --z-combat-overlay: 99998; /* Combat target picker backdrop */ --z-combat-top: 99999; /* Roll overlays, combat target picker */ --z-skip-link: 99999; /* Skip links — must be above everything when focused */ } /** * Terminal D&D Design Tokens — Components & Media * ================================================ * Layout split system, narrative components, theming, chips, * scrollbars, animations, skeleton loading, SVG icons, * dark mode overrides, and reduced motion preferences. */ :root { /* ======================================== * LAYOUT - SPLIT SYSTEM * ======================================== */ /* Split Container */ --split-divider-size: 8px; --split-divider-hover-color: var(--color-accent-primary); --panel-min-width: 200px; --panel-min-height: 150px; /* Responsive Breakpoints (documentation anchors — CSS can't use vars in @media) * Authoritative values live in app/javascript/lib/breakpoints.js * Keep these in sync when changing breakpoint thresholds. */ --bp-mobile: 768px; /* 0–767 = mobile (1 col) */ --bp-tablet: 1024px; /* 768–1023 = tablet (8 cols) */ --bp-desktop: 1440px; /* 1024–1439 = desktop (12 cols), 1440+ = wide (12 cols) */ /* Grid Container */ --grid-columns: 12; --grid-gap: 4px; --grid-resize-handle-size: 16px; /* Status Bar */ --status-bar-height: 38px; --status-bar-padding: var(--space-1-5) var(--space-4); /* DM Responding Bar — compact height used to displace narrative header rows * so channel-tabs and narrative-filters are never occluded when bar is active. * Formula: host-padding(8) + bar-pad-top(12) + icon-row(24) + bar-pad-bottom(12) = 56px. * See _loading.css §"DM Bar Displacement" and organisms/narrative/_layout.css. */ --dm-bar-compact-height: 56px; /* Side Panel */ --panel-width-default: 380px; --panel-width-min: 280px; --panel-width-max: 600px; /* Input Area */ --input-height: 40px; --input-padding: var(--space-2) var(--space-3); /* Total visual height of the input-area chrome: top-pad(8) + input-line(40) + bottom-pad(8). * Used to anchor dm-responding-bar-host above the input row (#5076). */ --input-area-height: 56px; /* ======================================== * COMPONENTS - NARRATIVE (tightened for flat UI) * ======================================== */ /* Phase 2 (Rick Rubin): Generous spacing for readability and calm */ --narrative-entry-spacing: var(--space-6); /* 16px → 24px: Breathing room between entries */ --narrative-border-width: 0; --narrative-padding: var(--space-5); /* 12px → 20px: More padding around narrative */ /* Phase 1: Semantic spacing tokens for consistent application */ --panel-padding: var(--space-4); /* 16px: Standard panel internal padding */ --section-spacing: var(--space-8); /* 32px: Between major sections */ /* Entry Type Colors */ --color-entry-dm: var(--color-accent-purple); --color-entry-player: var(--color-accent-primary); --color-entry-system: var(--color-accent-warning); --color-entry-error: var(--color-accent-error); --color-entry-roll: var(--color-accent-primary); --color-entry-combat: var(--color-accent-error); --color-entry-npc: var(--color-accent-purple); --color-entry-item: var(--color-accent-warning); --color-entry-location: var(--color-accent-secondary); /* ======================================== * CONTEXT-AWARE THEMING (Phase 4 P2-14) * Theme shifts based on game context * ======================================== */ /* Default context colors (overridden by data-context attributes) */ --context-accent: var(--color-accent-primary); --context-glow: var(--shadow-glow); --context-border: var(--color-border-default); /* ======================================== * COMPONENTS - CHIPS & BADGES * ======================================== */ --chip-height: 28px; --chip-padding: var(--space-1) var(--space-3); --chip-gap: var(--space-2); --chip-border-radius: var(--radius-md); --badge-height: 20px; --badge-padding: var(--space-1) var(--space-2); --badge-font-size: var(--font-size-xs); /* ======================================== * COMPONENTS - TRAYS * ======================================== */ --tray-padding: var(--space-3); --tray-gap: var(--space-2); --tray-border-radius: var(--radius-lg); /* ======================================== * CANVAS EFFECTS * ======================================== */ --effect-ambient-opacity: 0.3; --effect-feedback-opacity: 0.8; --effect-particle-count: 100; /* ======================================== * SCROLLBAR * ======================================== */ --scrollbar-width: 8px; --scrollbar-width-thin: 6px; --scrollbar-track-color: var(--color-bg-primary); /* Thumb was `var(--color-bg-tertiary)` — a "subtle surface elevation" token, * not an accessible-contrast token. It happens to equal the track color's * near-neighbor in every theme's lightness ramp, which is why every themed * override historically failed WCAG 3:1 (#9846). This fallback only paints * when no html[data-theme] override applies (e.g. pre-hydration); every * themed override (user_themes/_base.css, _contrast_retro.css, * user_typography/_high_contrast.css) now sets its own >=3:1-verified * thumb color independently — see spec/audits/scrollbar_contrast_checker_spec.rb. */ --scrollbar-thumb-color: #767676; --scrollbar-thumb-hover-color: #797979; --scrollbar-thumb-radius: 4px; /* ======================================== * MICRO-INTERACTIONS * ======================================== */ --interaction-scale-hover: 1.01; --interaction-scale-active: 0.99; --interaction-glow-focus: 0 0 0 2px rgba(90, 159, 216, 0.25); --interaction-glow-success: 0 0 0 2px rgba(138, 181, 110, 0.25); --interaction-glow-error: 0 0 0 2px rgba(207, 96, 104, 0.25); /* ======================================== * SKELETON LOADING * ======================================== */ --skeleton-base-color: var(--color-bg-tertiary); --skeleton-shine-color: var(--color-bg-elevated); --skeleton-animation-duration: 1.5s; /* ======================================== * GHOST/TRANSPARENT PANEL SYSTEM * Variable opacity with hover substantiation * ======================================== */ /* Ghost opacity levels (ethereal → phantom) */ --ghost-opacity-ethereal: 0.15; /* Most transparent - barely visible */ --ghost-opacity-wisp: 0.35; /* Slightly visible */ --ghost-opacity-shade: 0.55; /* Default - balanced visibility */ --ghost-opacity-phantom: 0.75; /* Nearly solid */ /* Numbered aliases for 4-level cycle (Phase 1 ghost toggle) */ --ghost-opacity-0: 1.0; /* Level 0: fully opaque (off) */ --ghost-opacity-1: 0.7; /* Level 1: light ghost */ --ghost-opacity-2: 0.4; /* Level 2: medium ghost */ --ghost-opacity-3: 0.15; /* Level 3: heavy ghost */ /* Hover substantiation boost */ --ghost-hover-opacity-boost: 0.4; /* Ghost visual effects */ --ghost-blur-subtle: 4px; --ghost-blur-strong: 8px; --ghost-transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* Ghost text shadow for readability */ --ghost-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); /* ======================================== * SVG ICON MASKS (for CSS pseudo-element icons) * Use with: mask-image: var(--icon-NAME); * ======================================== */ /* Status/Feedback Icons */ --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20,6 9,17 4,12'/%3E%3C/svg%3E"); --icon-x: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); --icon-alert-triangle: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); --icon-info: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E"); /* D&D/Game Icons */ --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='20' height='20' rx='2'/%3E%3Ccircle cx='8' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='8' r='1.5' fill='currentColor'/%3E%3Ccircle cx='8' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='16' cy='16' r='1.5' fill='currentColor'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='currentColor'/%3E%3C/svg%3E"); --icon-sword: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5'/%3E%3Cpath d='M13 19l6-6'/%3E%3Cpath d='M16 16l4 4'/%3E%3Cpath d='M19 21l2-2'/%3E%3C/svg%3E"); --icon-shield: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); --icon-crown: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); /* Navigation Icons */ --icon-chevron-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9,18 15,12 9,6'/%3E%3C/svg%3E"); --icon-chevron-down: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E"); --icon-arrow-right: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12,5 19,12 12,19'/%3E%3C/svg%3E"); --icon-arrow-left: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12,19 5,12 12,5'/%3E%3C/svg%3E"); --icon-play: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='5,3 19,12 5,21 5,3'/%3E%3C/svg%3E"); --icon-zap: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='13,2 3,14 12,14 11,22 21,10 12,10 13,2'/%3E%3C/svg%3E"); /* UI Icons */ --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --icon-timer: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2 2'/%3E%3Cpath d='M5 3l2 2'/%3E%3Cpath d='M19 3l-2 2'/%3E%3Cpath d='M12 5V3'/%3E%3Cpath d='M10 2h4'/%3E%3C/svg%3E"); --icon-map-pin: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); --icon-trophy: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9H4.5a2.5 2.5 0 010-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 000-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0012 0V2z'/%3E%3C/svg%3E"); --icon-sparkles: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3z'/%3E%3Cpath d='M5 19l.5 1.5L7 21l-1.5.5L5 23l-.5-1.5L3 21l1.5-.5L5 19z'/%3E%3Cpath d='M19 5l.5 1.5L21 7l-1.5.5L19 9l-.5-1.5L17 7l1.5-.5L19 5z'/%3E%3C/svg%3E"); --icon-lightbulb: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z'/%3E%3C/svg%3E"); /* Dot/Bullet icon */ --icon-dot: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); /* Dice icon (d20) */ --icon-dice: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); /* Additional SVG icons for CSS pseudo-element replacement */ --icon-globe: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z'/%3E%3C/svg%3E"); --icon-user: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a8.38 8.38 0 0113 0'/%3E%3C/svg%3E"); --icon-users: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E"); --icon-chat: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E"); --icon-clipboard: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'/%3E%3C/svg%3E"); --icon-scroll: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 21h12a2 2 0 002-2v-2H10v2a2 2 0 11-4 0V5a2 2 0 10-4 0v2h12a2 2 0 012 2v10'/%3E%3C/svg%3E"); --icon-eye: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); --icon-lock: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E"); --icon-gem: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 3h12l4 6-10 13L2 9z'/%3E%3Cpath d='M2 9h20'/%3E%3Cpath d='M12 22L6 9l3-6'/%3E%3Cpath d='M12 22l6-13-3-6'/%3E%3C/svg%3E"); --icon-swords: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 17.5L3 6V3h3l11.5 11.5M13 19l6-6M16 16l4 4M19 21l2-2M9.5 17.5L21 6V3h-3L6.5 14.5M11 19l-6-6M8 16l-4 4M5 21l-2-2'/%3E%3C/svg%3E"); --icon-gear: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); --icon-heart: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z'/%3E%3C/svg%3E"); --icon-warning: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); --icon-leaf: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 20A7 7 0 019.8 6.9C15.5 4.9 17 3.5 20 2c0 3-1.5 6-3 8 1 1 2 3 2 5a7 7 0 01-7 7z'/%3E%3Cpath d='M5 20c2-2 5-3.5 8-4'/%3E%3C/svg%3E"); --icon-cloud: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z'/%3E%3C/svg%3E"); --icon-musical-note: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); --icon-books: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 016.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='10' x2='14' y2='10'/%3E%3C/svg%3E"); } /* ======================================== * DARK MODE OVERRIDES (if ever needed) * ======================================== */ @media (prefers-color-scheme: dark) { :root { /* Already dark by default */ } } /* ======================================== * REDUCED MOTION * ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --animation-speed-multiplier: 0; --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; --transition-resize: 0ms; --transition-bounce: 0ms; --ease-out-back: ease; --effect-ambient-opacity: 0; --effect-particle-count: 0; } /* Covered by accessibility.css @media (prefers-reduced-motion: reduce) * rule */ } /** * Terminal D&D Design Tokens — Import Hub * ========================================== * Single source of truth for all design variables. * Import this file first in any terminal-related stylesheet. * * Decomposed into focused files under tokens/ for maintainability. */ /* * Timing Design Tokens * ==================== * Centralized animation/transition timing values. * Replaces hardcoded duration values across the codebase. * * Migration is INCREMENTAL: not all files have been migrated yet. * When editing a CSS file, replace hardcoded durations with these tokens. * * Duration mapping guide: * 0ms -> var(--timing-instant) * 50ms -> var(--timing-instant) * 100-200ms -> var(--timing-fast) * 250-350ms -> var(--timing-normal) * 400-600ms -> var(--timing-slow) * 700-1000ms -> var(--timing-dramatic) * 1000ms+ -> var(--timing-glacial) * * NOTE: The canonical --timing-* and --duration-* tokens are defined in * terminal/_tokens.css (lines 296-370) with --animation-speed-multiplier * support and reduced-motion handling. This file adds supplemental tokens * that extend that system (--timing-glacial, --ease-bounce, shorthand * transitions) without duplicating the base definitions. */ :root { /* ======================================== * SUPPLEMENTAL DURATION TOKENS * Extends the base timing scale in _tokens.css * ======================================== */ /* Glacial — very long animations (boot sequences, epic celebrations, confetti) */ --duration-glacial: calc(1200ms * var(--animation-speed-multiplier)); --timing-glacial: var(--duration-glacial); /* ======================================== * SUPPLEMENTAL EASING TOKENS * Extends the base easing set in _tokens.css * ======================================== */ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ======================================== * SHORTHAND TRANSITION TOKENS * Pre-composed transition values for common patterns. * Use these to replace "transition: all 0.15s ease" one-liners. * ======================================== */ --transition-timing-fast: var(--timing-fast) var(--ease-default); --transition-timing-normal: var(--timing-normal) var(--ease-default); --transition-timing-slow: var(--timing-slow) var(--ease-default); } /* ======================================== * REDUCED MOTION * Supplements the global reduced-motion rules in _tokens.css * ======================================== */ @media (prefers-reduced-motion: reduce) { :root { --duration-glacial: 0ms; } } /* * Z-INDEX ELEVATION SYSTEM — REDIRECTED * * All z-index tokens have been consolidated into: * app/assets/stylesheets/terminal/_tokens.css * * This file is kept as a no-op so existing `require terminal/base/_elevation` * directives don't break. It defines nothing; _tokens.css is the single * source of truth for all --z-* custom properties. * * Keep in sync with: app/javascript/lib/elevation.ts * * See #2186 for the consolidation rationale. */ /* * Shared Keyframes * ================ * Consolidated animation keyframes used across multiple components. * Import this ONCE; individual component files should NOT redefine these. * * Naming convention: generic keyframes only. Component-specific keyframes * remain in their component file. */ /* ======================================== * Spinner / Loading * ======================================== */ @keyframes spin { to { transform: rotate(360deg); } } /* ======================================== * Pulse (opacity) * ======================================== */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ======================================== * Fade In * ======================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ======================================== * Skeleton Loading Shimmer * ======================================== */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ======================================== * Slide In (from bottom) * ======================================== */ @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== * Slide Out (to bottom) — the exit half of slideIn * ======================================== * #9862: `dev_inspector_controller.js:380` sets * `toast.style.animation = 'slideOut 0.3s ease'` on every toast dismissal, and * no `@keyframes slideOut` existed anywhere (control: `slideIn` resolved in 3 * files), so the toast vanished with no exit animation. Mirrors slideIn above so * the pair reads as one motion. */ @keyframes slideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(10px); } } /* ======================================== * Slide Up * ======================================== */ @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== * Gem Sparkle (selection cards, etc.) * ======================================== */ @keyframes gemSparkle { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 0.6; transform: scale(1); } } /* ======================================== * Notification Slide In * ======================================== */ @keyframes notification-slide-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== * Masonry Spin (alias for spin, used by masonry cards) * ======================================== */ @keyframes masonry-spin { to { transform: rotate(360deg); } } /* ======================================== * Pulse Pending (opacity pulse) * ======================================== */ @keyframes pulse-pending { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /** * Accessibility — Screen Reader, Focus, Skip Links, Motion, Colorblind, High Contrast, Touch, Text & Color Contrast */ /** * Accessibility Utilities * ======================= * WCAG 2.1 AA compliant accessibility utilities. * * Includes: * - Screen reader utilities * - Focus management styles * - Reduced motion support * - High contrast support * - Skip links */ /* ======================================== * SCREEN READER UTILITIES * ======================================== */ /* Visually hidden but accessible to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* sr-only-focusable removed — class never applied in HTML (#6031) */ /* 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 scroll effects */ .scroll-animation { transform: none; } } /* motion-safe removed — class never applied in HTML (#6031) */ /* ======================================== * COLORBLIND MODES * CSS filters to simulate color vision for different types of colorblindness * Based on research from colorblindness.com and Coblis simulator * ======================================== */ /* Protanopia (Red-blind) - Most common form, ~1% of males * Difficulty distinguishing red/green, red appears darker */ [data-colorblind-mode="protanopia"] { filter: url('#protanopia-filter'); } /* Deuteranopia (Green-blind) - Common, ~1% of males * Difficulty distinguishing red/green, similar to protanopia */ [data-colorblind-mode="deuteranopia"] { filter: url('#deuteranopia-filter'); } /* Tritanopia (Blue-blind) - Rare, ~0.001% * Difficulty distinguishing blue/yellow */ [data-colorblind-mode="tritanopia"] { filter: url('#tritanopia-filter'); } /* Achromatopsia (Complete colorblindness) - Very rare * No color vision, only grayscale */ [data-colorblind-mode="achromatopsia"] { filter: grayscale(100%); } /* Fallback filters using CSS matrix transforms * These provide approximate simulation when SVG filters aren't available */ @supports not (filter: url('#protanopia-filter')) { [data-colorblind-mode="protanopia"] { filter: contrast(0.8) saturate(0.7) hue-rotate(-10deg); } [data-colorblind-mode="deuteranopia"] { filter: contrast(0.8) saturate(0.7) hue-rotate(10deg); } [data-colorblind-mode="tritanopia"] { filter: contrast(0.9) saturate(0.6) hue-rotate(180deg); } } /* ======================================== * HIGH CONTRAST MODE * Support for Windows High Contrast mode * ======================================== */ @media (forced-colors: active) { /* Ensure borders are visible */ .btn, .panel, .card, .modal, input, select, textarea { border: 1px solid CanvasText; } /* Ensure focus is visible */ :focus-visible { outline: 4px solid Highlight; outline-offset: 2px; } /* Ensure links are distinguishable */ a { text-decoration: underline; } /* Icons should use system colors */ svg { fill: currentColor; } } /* ======================================== * TOUCH TARGETS * Minimum 44x44px for touch accessibility * ======================================== */ .touch-target { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Larger touch target for mobile */ @media (pointer: coarse) { .btn, button, [role="button"], a:not(.text-link) { min-height: 44px; min-width: 44px; } /* Increase spacing between clickable items */ .clickable-list > * { padding-top: 0.75rem; padding-bottom: 0.75rem; } } /* ======================================== * TEXT SIZING * Support for user font size preferences * ======================================== */ /* Don't prevent text scaling */ html { -webkit-text-size-adjust: 100%; } /* Use rem for text that should scale with user preferences */ .text-scalable { font-size: 1rem; line-height: 1.5; } /* ======================================== * COLOR CONTRAST UTILITIES * For maintaining WCAG AA compliance * ======================================== */ /* High contrast text on dark backgrounds */ .text-high-contrast { color: var(--terminal-text-primary, #e0e0e0); text-shadow: none; } /* Ensure link visibility */ .link-visible { color: var(--color-primary, #4a90e2); text-decoration: underline; text-underline-offset: 2px; } .link-visible:hover { text-decoration-thickness: 2px; } /* ======================================== * SEMANTIC STATES * Visual indicators for interactive states * ======================================== */ /* Disabled state */ [disabled], .disabled, [aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Selected state */ [aria-selected="true"], .selected { background: var(--selection-bg, rgba(74, 144, 226, 0.2)); border-color: var(--color-primary, #4a90e2); } /* Current/active state */ [aria-current="true"], [aria-current="page"], .current { font-weight: 600; border-left: 3px solid var(--color-primary, #4a90e2); padding-left: calc(1rem - 3px); } /* Expanded state indicator */ [aria-expanded="true"] .expand-icon { transform: rotate(180deg); } /* ======================================== * ERROR AND VALIDATION STATES * ======================================== */ /* Error state */ [aria-invalid="true"], .has-error { border-color: var(--color-error, #cf6068); } [aria-invalid="true"]:focus-visible, .has-error:focus-visible { outline: 3px solid var(--color-error, #cf6068); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.3); position: relative; z-index: var(--z-sticky); } /* Error message */ .error-message, [role="alert"] { color: var(--color-error, #cf6068); font-size: 0.875rem; } /* Required field indicator */ .required::after { content: ' *'; color: var(--color-error, #cf6068); } /** * Accessibility — Loading, Dialog, Terminal Focus, Keyboard Navigation, Skip Links, Keyboard Shortcut Hints & High Contrast Enhancements */ /* ======================================== * LOADING STATES * ======================================== */ [aria-busy="true"] { cursor: wait; opacity: 0.7; } /* ======================================== * DIALOG/MODAL ACCESSIBILITY * ======================================== */ /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } /* Modal backdrop should not receive focus */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay-medium-plus); z-index: var(--z-popover); } /* Modal should be centered and focusable. * * #7103: .unified-modal is excluded — it supplies its own full-viewport * flex centering (position: fixed; inset: 0; display: flex) in * unified_renderer/_modal_map.css. When #6148 added role="dialog" to the * unified-modal wrapper for AT semantics, this fallback's * translate(-50%, -50%) leaked through (.unified-modal declares top/left * via inset but no transform), shifting the whole wrapper up-left by half * the viewport and clipping the achievement-unlock popup off the left * screen edge. :where() keeps specificity at 0,1,0 so this rule remains a * same-weight fallback for dialogs without their own positioning. */ [role="dialog"]:where(:not(.unified-modal)), [role="alertdialog"]:where(:not(.unified-modal)) { 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. #9862 dropped the dead `.split-panel:focus-within` half. `.panel` IS emitted (8 partials under app/views/terminal/panels/), so the rule stays live; the docked `.grid-panel` gets its keyboard ring from `.grid-panel:focus-visible` (grid_container/_animations.css:291) instead. */ .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 { background: Highlight; } .btn, button { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; } .btn:hover, button:hover { border-color: Highlight; } .panel-header { border-bottom: 2px solid CanvasText; } .status-bar { border-bottom: 2px solid CanvasText; } } /* ======================================== * ANIMATION SAFETY * ======================================== */ /* Animation speed control via data-animation-speed attribute */ [data-animation-speed="none"] { --animation-speed-multiplier: 0; } [data-animation-speed="none"] *, [data-animation-speed="none"] *::before, [data-animation-speed="none"] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } [data-animation-speed="slow"] { --animation-speed-multiplier: 2; } [data-animation-speed="normal"] { --animation-speed-multiplier: 1; } [data-animation-speed="fast"] { --animation-speed-multiplier: 0.5; } /* User preference to disable animations */ .no-animations *, .no-animations *::before, .no-animations *::after { animation: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { .typing-indicator, .thinking-indicator, .loading-spinner, .pulse, .bounce { animation: none; } .typing-indicator span, .thinking-indicator__dots span { opacity: 1; } } /* ======================================== * NARRATIVE SEGMENT ACCESSIBILITY * Styles specific to narrative segments * ======================================== */ /* Interactive perception checks - enhanced focus */ .perception-interactive:focus-visible { outline: 3px dashed var(--color-gold, #ffd700); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2); background-color: rgba(255, 215, 0, 0.05); } /* Selection segment radio buttons */ .inline-selection-option:focus-visible { outline: 3px solid var(--color-gold, #ffd700); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2); } /* Roll result segment focus */ .roll-result:focus-within { outline: 3px solid var(--color-gold, #ffd700); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2); } /* NPC dialogue - article focus */ .npc-dialogue:focus-within { outline: 2px solid var(--color-gold, #ffd700); outline-offset: 2px; } /* Decorative elements hidden from screen readers */ .pixel-portrait[aria-hidden="true"], .action-icon[aria-hidden="true"], .perception-icon[aria-hidden="true"], .roll-icon[aria-hidden="true"] { speak: none; } /* Selection dividers hidden from screen readers */ .inline-selection-divider[aria-hidden="true"] { speak: none; } /* Touch target sizing for narrative interactions */ @media (pointer: coarse) { .perception-interactive, .inline-selection-option, .narrative-segment [role="button"] { min-height: 44px; min-width: 44px; } .perception-interactive { padding: var(--space-3, 0.75rem); } .inline-selection-option { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); } } /* High contrast mode for narrative segments */ @media (prefers-contrast: high) { .narrative-segment { border: 2px solid currentColor; } .perception-hidden, .perception-interactive { border: 2px dashed currentColor; } .roll-result { border: 2px solid currentColor; } .npc-dialogue { border: 2px solid currentColor; } .perception-badge, .roll-badge { border: 2px solid currentColor; } .inline-selection-option { border: 2px solid currentColor; } } /** * Accessibility — Animation Safety, Narrative Segments & ARIA Live Regions */ /* ======================================== * SPRINT 6 SEGMENT ACCESSIBILITY * Accessibility for new segment types * ======================================== */ /* Ambient Segment - ARIA and focus */ .ambient-segment { /* Ambient sounds should be live regions for updates */ } .ambient-segment[role="status"] { /* Status role ensures screen readers announce changes */ } .ambient-segment::before { /* Hide decorative musical note from screen readers */ speak: none; } /* Time Segment - Time announcements */ .time-segment[role="status"] { /* Time changes announced as status updates */ } .time-segment .time-icon { speak: none; } /* Secret Segment - DM-only content */ .secret-segment[aria-hidden="true"] { /* Hidden from players, but still accessible to DM screen readers */ } .secret-segment:focus-visible { outline: 3px dashed var(--retro-red, #DC143C); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(220, 20, 60, 0.2); } .secret-segment::before { /* Lock icon decorative */ speak: none; } /* Map Position Segment - Location announcements */ .map-position-segment[role="status"] { /* Position changes announced */ } .map-position-segment:focus-visible { outline: 3px solid var(--retro-green, #32CD32); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(50, 205, 50, 0.2); } .map-position-segment .position-icon { speak: none; } /* Combat Log Segment - Combat announcements */ .combat-log-segment[role="log"] { /* Log role for sequential combat events */ } .combat-log-segment:focus-visible { outline: 3px solid var(--retro-red, #DC143C); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(220, 20, 60, 0.2); } .combat-entry[role="listitem"] { /* Each combat entry is a list item */ } /* Roll Result Segment - Dice roll announcements */ .roll-result-segment[role="status"] { /* Roll results announced to screen readers */ } .roll-result-segment:focus-visible { outline: 3px solid var(--retro-gold, #FFD700); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2); } .roll-dice-display { /* Dice icon is decorative, value announced via aria-label */ } /* Pixel Portrait accessibility */ .pixel-portrait[role="img"] { /* Treated as an image with alt text */ } .pixel-portrait canvas { /* Canvas should have role="presentation" if decorative */ } /* High contrast for new segments */ @media (prefers-contrast: high) { .ambient-segment { border: 2px solid currentColor; } .time-segment { border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .secret-segment { border: 2px dashed currentColor; } .map-position-segment { border: 2px solid currentColor; } .combat-log-segment { border: 2px solid currentColor; } .combat-entry { border-bottom: 1px solid currentColor; } .roll-result-segment { border: 2px solid currentColor; } .roll-dice-display { border: 2px solid currentColor; } .pixel-portrait { border: 2px solid currentColor; } } /* Forced colors (Windows High Contrast) for new segments */ @media (forced-colors: active) { .ambient-segment { border: 2px solid CanvasText; background: Canvas; } .time-segment { border-color: Highlight; background: Canvas; } .secret-segment { border: 2px dashed Mark; background: Canvas; } .map-position-segment { border: 2px solid LinkText; background: Canvas; } .combat-log-segment { border: 2px solid Mark; background: Canvas; } .roll-result-segment { border: 2px solid Highlight; background: Canvas; } .roll-dice-display { border: 2px solid CanvasText; background: ButtonFace; color: ButtonText; } .pixel-portrait { border: 2px solid CanvasText; } } /* Touch targets for new segments */ @media (pointer: coarse) { .ambient-segment, .time-segment, .map-position-segment, .roll-result-segment { min-height: 44px; padding: var(--space-3, 0.75rem); } .combat-entry { min-height: 44px; padding: var(--space-2, 0.5rem) 0; } } /* Reduced motion for new segment animations */ @media (prefers-reduced-motion: reduce) { .ambient-segment::before { animation: none; opacity: 0.8; } .npc-dialogue.npc-first-meeting .pixel-portrait { animation: none; } .roll-result-segment[data-outcome="critical"] { animation: none; } .roll-result-segment[data-outcome="critical"] .roll-dice-display { animation: none; } .roll-result-segment[data-outcome="fumble"] .roll-dice-display { animation: none; } .combat-entry[data-type="critical"] { animation: none; } } /* Screen reader only labels for segment types */ .segment-sr-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ======================================== * NARRATIVE SEGMENT ARIA LIVE REGIONS * ======================================== */ /* Combat events should be announced assertively */ .combat-log-segment[aria-live="assertive"] { /* Critical combat events */ } /* Roll results should be announced politely */ .roll-result-segment[aria-live="polite"] { /* Dice roll results */ } /* Time changes should be announced politely */ .time-segment[aria-live="polite"] { /* Time passage */ } /* Ambient changes announced politely */ .ambient-segment[aria-live="polite"] { /* Atmosphere changes */ } /* Position changes announced politely */ .map-position-segment[aria-live="polite"] { /* Location updates */ } /** * Accessibility Styles — Import Hub * =================================== * Screen reader utilities, focus management, skip links, reduced motion, * colorblind modes, high contrast, keyboard navigation and ARIA live regions. * * Decomposed into focused files under accessibility/ for maintainability. */ /** * Colorblind Modes — Protanopia * ================================ * Metadata and protanopia (red-blind) token remapping. */ /** * Colorblind Display Modes * ======================== * Token-level color remapping for three common color vision deficiencies. * * Strategy: remap CSS custom properties on the element so every * consumer of those tokens inherits the corrected palette automatically. * No broad CSS filter is used — per-token overrides preserve luminance and * maintain WCAG AA contrast on the dark terminal background (#1a1a1a). * * Activation: * html[data-colorblind-mode="protanopia"] — red-blind * html[data-colorblind-mode="deuteranopia"] — green-blind * html[data-colorblind-mode="tritanopia"] — blue-blind * * Toggled by TypographySettingsController → typography_settings_controller.js * which writes document.documentElement.dataset.colorblindMode = mode. * * Composition with high-contrast mode: * These overrides apply at the html element level and remap the same token * set that html[data-high-contrast="true"] overrides. When both are active, * the last-declared rule wins for tokens they share. The high-contrast * selector in _user_typography.css is declared after this file in terminal.css, * so high-contrast colours take precedence — but we retain the shape/meaning * cues added here (texture patterns and ARIA labels) which survive any filter. * * References: * - Colour Universal Design (CUD) guidelines — Masataka Okabe & Kei Ito * - WCAG 2.2 Success Criterion 1.4.1 (Use of Color — Level A) * - WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum — Level AA) * - Coblis Colour Blindness Simulator (https://www.color-blindness.com/coblis-color-blindness-simulator/) * * Design philosophy (RPG metaphor): * Every hero deserves to read the battlefield clearly. These modes are not * "simulation" filters — they are full palette swaps, like choosing a * different UI skin that keeps every status indicator legible for your * particular vision profile. * * Coverage per mode: * - Accent colors (primary, secondary, warning, error, purple, orange, cyan) * - HP bar states (full, mid, low) * - Entity type colors (npc, location, item, creature, spell, quest, faction) * - Entry type colors (dm, player, system, error, roll, combat, npc, item, location) * - Status semantic colors (success, warning, info backgrounds and text) * - Damage type colors (fire, cold, acid, poison, slashing, radiant, etc.) * - Spell school colors (evocation, transmutation, conjuration, etc.) * - HP bar fill states (healthy, wounded, critical — direct color values) * - Speech bubble colors * - Glow / shadow variants */ /* ============================================================ * PROTANOPIA (Red-blind) * ~1% of males. Cannot distinguish red from green. * Red appears as a muted brown/olive; bright red is invisible. * * Remapping strategy: * Red → Blue (#4a90d9 family) — clearly distinct to protanopes * Green → Orange (#d97a1a family) — retains the "warm success" feel * but shifts to a hue protanopes see as distinctly different * from the blue used for errors/danger. * All other hues are kept; luminance is preserved. * * CUD palette base: #0072B2 (blue), #E69F00 (orange), #009E73 (bluegreen), * #CC79A7 (pink), #56B4E9 (sky blue), #F0E442 (yellow) * ============================================================ */ html[data-colorblind-mode="protanopia"] { /* ---- Accent tokens ---- */ /* primary (blue) is already safe — keep */ --color-accent-primary: #5a9fd8; /* blue — unchanged, safe */ --color-accent-secondary: #d97a1a; /* green → warm orange (CUD #E69F00 adjusted for dark bg) */ --color-accent-warning: #f0d040; /* gold → bright yellow, higher luminance */ --color-accent-error: #4a90d9; /* red → distinct blue (CUD #0072B2) */ --color-accent-purple: #cc79a7; /* purple → pink-purple (CUD safe) */ --color-accent-orange: #d97a1a; /* orange — kept (safe hue) */ --color-accent-cyan: #56b4e9; /* cyan — kept (CUD sky blue) */ /* ---- HP / vital status ---- */ --color-hp-full: #d97a1a; /* green HP → orange (warm, distinct from blue danger) */ --color-hp-mid: #f0d040; /* gold HP — bumped to bright yellow */ --color-hp-low: #4a90d9; /* red danger → blue (maximum urgency hue for protanope) */ /* ---- Entity type colors ---- */ --color-entity-npc: #56b4e9; /* cyan — CUD sky blue */ --color-entity-location: #d97a1a; /* green → orange */ --color-entity-item: #f0d040; /* gold — bright yellow */ --color-entity-creature: #4a90d9; /* red → blue */ --color-entity-spell: #cc79a7; /* purple → pink-purple (CUD) */ --color-entity-quest: #5a9fd8; /* blue — unchanged */ --color-entity-faction: #d97a1a; /* orange — safe */ --color-entity-lore: #abb2bf; /* grey — unchanged */ /* Entity backgrounds */ --color-entity-creature-bg: rgba(74, 144, 217, 0.15); /* blue tint */ --color-entity-spell-bg: rgba(204, 121, 167, 0.15); /* pink-purple */ --color-entity-quest-bg: rgba(90, 159, 216, 0.15); /* blue */ --color-entity-location-glow: 0 0 8px rgba(217, 122, 26, 0.3); /* orange glow */ /* ---- Narrative entry type colors ---- */ --color-entry-dm: #cc79a7; /* purple → pink-purple */ --color-entry-player: #5a9fd8; /* blue — unchanged */ --color-entry-system: #f0d040; /* gold → yellow */ --color-entry-error: #4a90d9; /* red → blue */ --color-entry-roll: #5a9fd8; /* blue — unchanged */ --color-entry-combat: #4a90d9; /* red → blue */ --color-entry-npc: #cc79a7; /* purple → pink-purple */ --color-entry-item: #f0d040; /* gold → yellow */ --color-entry-location: #d97a1a; /* green → orange */ /* ---- Status / semantic backgrounds ---- */ --color-success-bg: rgba(217, 122, 26, 0.15); /* orange tint for "success" */ --color-success-text: #d97a1a; --color-warning-bg: rgba(240, 208, 64, 0.15); --color-warning-text: #f0d040; --color-info-bg: rgba(90, 159, 216, 0.15); --color-info-text: #5a9fd8; /* Semantic aliases */ --color-accent-green: #d97a1a; /* follow secondary remap */ --color-accent-success: #d97a1a; --color-accent-red: #4a90d9; /* follow error remap */ /* ---- Damage type colors ---- */ --dmg-fire: #4a90d9; /* orange-red → blue (fire now reads as "cold-blue" but is distinct) */ --dmg-cold: #56b4e9; /* sky blue — unchanged */ --dmg-lightning: #f0d040; /* gold — unchanged */ --dmg-acid: #d97a1a; /* yellow-green → orange */ --dmg-poison: #9370db; /* purple — unchanged */ --dmg-necrotic: #4d5a4d; /* dark green → dark grey-blue */ --dmg-radiant: #fffacd; /* pale yellow — unchanged */ --dmg-force: #cc79a7; /* orchid → pink-purple */ --dmg-psychic: #cc79a7; /* magenta → pink-purple (distinct from blue) */ --dmg-thunder: #5a9fd8; /* steel blue — unchanged */ --dmg-bludgeoning: #8b6333; /* saddle brown — slight hue shift, safe */ --dmg-piercing: #c0c0c0; /* silver — unchanged */ --dmg-slashing: #4a90d9; /* crimson → blue */ /* ---- Spell school colors ---- */ --spell-abjuration: #5a9fd8; /* steel blue — unchanged */ --spell-conjuration: #9370db; /* purple — unchanged */ --spell-divination: #56b4e9; /* sky blue — unchanged */ --spell-enchantment: #cc79a7; /* pink → pink-purple */ --spell-evocation: #4a90d9; /* orange-red → blue */ --spell-illusion: #cc79a7; /* orchid → pink-purple */ --spell-necromancy: #4d5a4d; /* dark green → dark grey */ --spell-transmutation:#d97a1a; /* lime green → orange */ /* ---- HP bar fill gradient endpoints (used in _hp_bar.css) ---- */ --hp-color-healthy-start: #d97a1a; --hp-color-healthy-end: #b86a10; --hp-color-wounded-start: #f0d040; --hp-color-wounded-end: #c8aa20; --hp-color-critical-start:#4a90d9; --hp-color-critical-end: #2e6fbb; /* ---- Speech bubbles ---- */ --bubble-player-bg: rgba(217, 122, 26, 0.12); /* orange player bubble */ --bubble-player-border: rgba(217, 122, 26, 0.35); --bubble-dm-bg: rgba(204, 121, 167, 0.08); /* pink-purple DM bubble */ --bubble-dm-border: rgba(204, 121, 167, 0.4); /* ---- Glow shadows (sync with accent) ---- */ --shadow-glow: 0 0 8px rgba(90, 159, 216, 0.3); --shadow-glow-success: 0 0 8px rgba(217, 122, 26, 0.3); --shadow-glow-warning: 0 0 8px rgba(240, 208, 64, 0.3); --shadow-glow-error: 0 0 8px rgba(74, 144, 217, 0.3); } /** * Colorblind Modes — Deuteranopia and Tritanopia * ================================================= * Deuteranopia (green-blind) and tritanopia (blue-blind) token remapping. */ /* ============================================================ * DEUTERANOPIA (Green-blind) * ~1% of males. Cannot distinguish red from green. * Similar confusion range to protanopia but shifted slightly. * Green is invisible; red appears as a brownish yellow. * * Remapping strategy: identical safe-color targets to protanopia * because the confusion pair (red/green) is the same. * Slight luminance differences vs. protanopia for the green * substitutes to help the subset of dichromats who have atypical * spectral sensitivity curves. * ============================================================ */ html[data-colorblind-mode="deuteranopia"] { /* ---- Accent tokens ---- */ --color-accent-primary: #5a9fd8; /* blue — unchanged */ --color-accent-secondary: #e08a00; /* green → amber-orange (slightly warmer than protanopia) */ --color-accent-warning: #f5db50; /* gold → warm yellow */ --color-accent-error: #3a7fc1; /* red → medium blue */ --color-accent-purple: #cc79a7; /* purple → pink-purple */ --color-accent-orange: #e08a00; /* orange — kept / unified with secondary */ --color-accent-cyan: #56b4e9; /* cyan — CUD sky blue */ /* ---- HP / vital status ---- */ --color-hp-full: #e08a00; /* green → amber */ --color-hp-mid: #f5db50; /* gold → warm yellow */ --color-hp-low: #3a7fc1; /* red → blue */ /* ---- Entity type colors ---- */ --color-entity-npc: #56b4e9; --color-entity-location: #e08a00; /* green → amber */ --color-entity-item: #f5db50; /* gold → warm yellow */ --color-entity-creature: #3a7fc1; /* red → blue */ --color-entity-spell: #cc79a7; /* purple → pink-purple */ --color-entity-quest: #5a9fd8; --color-entity-faction: #e08a00; --color-entity-lore: #abb2bf; /* Entity backgrounds */ --color-entity-creature-bg: rgba(58, 127, 193, 0.15); --color-entity-spell-bg: rgba(204, 121, 167, 0.15); --color-entity-quest-bg: rgba(90, 159, 216, 0.15); --color-entity-location-glow: 0 0 8px rgba(224, 138, 0, 0.3); /* ---- Narrative entry type colors ---- */ --color-entry-dm: #cc79a7; --color-entry-player: #5a9fd8; --color-entry-system: #f5db50; --color-entry-error: #3a7fc1; --color-entry-roll: #5a9fd8; --color-entry-combat: #3a7fc1; --color-entry-npc: #cc79a7; --color-entry-item: #f5db50; --color-entry-location: #e08a00; /* ---- Status / semantic backgrounds ---- */ --color-success-bg: rgba(224, 138, 0, 0.15); --color-success-text: #e08a00; --color-warning-bg: rgba(245, 219, 80, 0.15); --color-warning-text: #f5db50; --color-info-bg: rgba(90, 159, 216, 0.15); --color-info-text: #5a9fd8; --color-accent-green: #e08a00; --color-accent-success: #e08a00; --color-accent-red: #3a7fc1; /* ---- Damage type colors ---- */ --dmg-fire: #3a7fc1; --dmg-cold: #56b4e9; --dmg-lightning: #f5db50; --dmg-acid: #e08a00; --dmg-poison: #9370db; --dmg-necrotic: #4a5050; --dmg-radiant: #fffacd; --dmg-force: #cc79a7; --dmg-psychic: #cc79a7; --dmg-thunder: #5a9fd8; --dmg-bludgeoning: #8b6333; --dmg-piercing: #c0c0c0; --dmg-slashing: #3a7fc1; /* ---- Spell school colors ---- */ --spell-abjuration: #5a9fd8; --spell-conjuration: #9370db; --spell-divination: #56b4e9; --spell-enchantment: #cc79a7; --spell-evocation: #3a7fc1; --spell-illusion: #cc79a7; --spell-necromancy: #4a5050; --spell-transmutation:#e08a00; /* ---- HP bar fill gradient endpoints ---- */ --hp-color-healthy-start: #e08a00; --hp-color-healthy-end: #c07200; --hp-color-wounded-start: #f5db50; --hp-color-wounded-end: #d0b830; --hp-color-critical-start:#3a7fc1; --hp-color-critical-end: #2260a0; /* ---- Speech bubbles ---- */ --bubble-player-bg: rgba(224, 138, 0, 0.12); --bubble-player-border: rgba(224, 138, 0, 0.35); --bubble-dm-bg: rgba(204, 121, 167, 0.08); --bubble-dm-border: rgba(204, 121, 167, 0.4); /* ---- Glow shadows ---- */ --shadow-glow: 0 0 8px rgba(90, 159, 216, 0.3); --shadow-glow-success: 0 0 8px rgba(224, 138, 0, 0.3); --shadow-glow-warning: 0 0 8px rgba(245, 219, 80, 0.3); --shadow-glow-error: 0 0 8px rgba(58, 127, 193, 0.3); } /* ============================================================ * TRITANOPIA (Blue-blind) * ~0.001% prevalence. Cannot distinguish blue from yellow/green. * Blue appears as green; yellow appears as pink/red. * * Remapping strategy: * Blue → Red (#d94040 family) — clearly distinct to tritanopes * Cyan → Red-adjacent (#d94040) or warm pink * Yellow/Gold → Cyan (#00b4c8) — safe cool hue * Green stays green (tritanopes see green well) * Red stays red (safe for tritanopes) * Orange stays orange (safe) * ============================================================ */ html[data-colorblind-mode="tritanopia"] { /* ---- Accent tokens ---- */ --color-accent-primary: #d94040; /* blue → red (tritanopes see red clearly) */ --color-accent-secondary: #8ab56e; /* green — unchanged (safe) */ --color-accent-warning: #00b4c8; /* gold/yellow → cyan (safe for tritanopes) */ --color-accent-error: #d94040; /* red — unchanged and clearly visible */ --color-accent-purple: #c04080; /* purple → rose/pink (not blue-dependent) */ --color-accent-orange: #c08a58; /* orange — unchanged (safe) */ --color-accent-cyan: #d94040; /* cyan (blue family) → red */ /* ---- HP / vital status ---- */ --color-hp-full: #8ab56e; /* green — unchanged */ --color-hp-mid: #00b4c8; /* gold → cyan */ --color-hp-low: #d94040; /* red — unchanged (tritanopes see red fine) */ /* ---- Entity type colors ---- */ --color-entity-npc: #d94040; /* cyan → red */ --color-entity-location: #8ab56e; /* green — unchanged */ --color-entity-item: #00b4c8; /* gold → cyan */ --color-entity-creature: #d94040; /* red — unchanged */ --color-entity-spell: #c04080; /* purple → rose */ --color-entity-quest: #d94040; /* blue → red */ --color-entity-faction: #c08a58; /* orange — unchanged */ --color-entity-lore: #abb2bf; /* grey — unchanged */ /* Entity backgrounds */ --color-entity-creature-bg: rgba(217, 64, 64, 0.15); --color-entity-spell-bg: rgba(192, 64, 128, 0.15); --color-entity-quest-bg: rgba(217, 64, 64, 0.15); --color-entity-location-glow: 0 0 8px rgba(138, 181, 110, 0.3); /* ---- Narrative entry type colors ---- */ --color-entry-dm: #c04080; /* purple → rose */ --color-entry-player: #d94040; /* blue → red */ --color-entry-system: #00b4c8; /* gold → cyan */ --color-entry-error: #d94040; /* red — unchanged */ --color-entry-roll: #d94040; /* blue → red */ --color-entry-combat: #d94040; /* red — unchanged */ --color-entry-npc: #c04080; /* purple → rose */ --color-entry-item: #00b4c8; /* gold → cyan */ --color-entry-location: #8ab56e; /* green — unchanged */ /* ---- Status / semantic backgrounds ---- */ --color-success-bg: rgba(138, 181, 110, 0.15); /* green — unchanged */ --color-success-text: #8ab56e; --color-warning-bg: rgba(0, 180, 200, 0.15); /* cyan warning */ --color-warning-text: #00b4c8; --color-info-bg: rgba(217, 64, 64, 0.15); /* red info */ --color-info-text: #d94040; --color-accent-green: #8ab56e; /* unchanged */ --color-accent-success: #8ab56e; --color-accent-red: #d94040; /* unchanged */ /* ---- Damage type colors ---- */ --dmg-fire: #d94040; /* orange-red — kept (safe) */ --dmg-cold: #d94040; /* sky blue → red (blue family remapped) */ --dmg-lightning: #00b4c8; /* gold → cyan */ --dmg-acid: #8ab56e; /* yellow-green → green (safe) */ --dmg-poison: #c04080; /* purple → rose */ --dmg-necrotic: #2f4f2f; /* dark green — unchanged */ --dmg-radiant: #d0d0c0; /* lemon chiffon → near-white (yellow → pale grey) */ --dmg-force: #c04080; /* orchid → rose */ --dmg-psychic: #c04080; /* magenta → rose-pink */ --dmg-thunder: #d94040; /* steel blue → red */ --dmg-bludgeoning: #8b4513; /* saddle brown — unchanged */ --dmg-piercing: #c0c0c0; /* silver — unchanged */ --dmg-slashing: #d94040; /* crimson — unchanged (safe) */ /* ---- Spell school colors ---- */ --spell-abjuration: #d94040; /* steel blue → red */ --spell-conjuration: #c04080; /* purple → rose */ --spell-divination: #d94040; /* sky blue → red */ --spell-enchantment: #c04080; /* light pink → rose */ --spell-evocation: #d94040; /* orange-red — unchanged */ --spell-illusion: #c04080; /* orchid → rose */ --spell-necromancy: #2f4f2f; /* dark green — unchanged */ --spell-transmutation:#8ab56e; /* lime green → green (safe) */ /* ---- HP bar fill gradient endpoints ---- */ --hp-color-healthy-start: #8ab56e; --hp-color-healthy-end: #6a9850; --hp-color-wounded-start: #00b4c8; --hp-color-wounded-end: #008fa0; --hp-color-critical-start:#d94040; --hp-color-critical-end: #b82020; /* ---- Speech bubbles ---- */ --bubble-player-bg: rgba(138, 181, 110, 0.12); /* green player */ --bubble-player-border: rgba(138, 181, 110, 0.35); --bubble-dm-bg: rgba(192, 64, 128, 0.08); /* rose DM */ --bubble-dm-border: rgba(192, 64, 128, 0.4); /* ---- Glow shadows ---- */ --shadow-glow: 0 0 8px rgba(217, 64, 64, 0.3); --shadow-glow-success: 0 0 8px rgba(138, 181, 110, 0.3); --shadow-glow-warning: 0 0 8px rgba(0, 180, 200, 0.3); --shadow-glow-error: 0 0 8px rgba(217, 64, 64, 0.3); } /** * Colorblind Modes — HP Bar Overrides * ===================================== * HP bar fill color overrides for all colorblind modes. */ /* ============================================================ * HP BAR STATE OVERRIDES — per-mode * _hp_bar.css uses hard-coded gradient values on state classes * (.cs-hp-bar__fill--healthy, --injured, --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--injured, html[data-colorblind-mode="protanopia"] .cs-hp-fill--injured { --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 { --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 { --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--injured, html[data-colorblind-mode="deuteranopia"] .cs-hp-fill--injured { --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 { --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 { --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--injured, html[data-colorblind-mode="tritanopia"] .cs-hp-fill--injured { --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 { --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 { --hp-color-start: #00b4c8; --hp-color-end: #008fa0; background: linear-gradient(90deg, var(--hp-color-start), var(--hp-color-end)); } /* ============================================================ * @media (prefers-contrast: more) COMPOSITION * When the OS requests high contrast AND a colorblind mode is active, * push the remapped colours to maximum luminance while keeping the * same safe-hue substitutions. This avoids clobbering the colorblind * remaps with the generic high-contrast white/yellow palette. * ============================================================ */ @media (prefers-contrast: more) { html[data-colorblind-mode="protanopia"] { --color-accent-primary: #7cc0ff; /* bright blue */ --color-accent-secondary: #ffaa40; /* bright orange */ --color-accent-warning: #ffed70; /* bright yellow */ --color-accent-error: #7cc0ff; /* bright blue for danger */ --color-hp-full: #ffaa40; --color-hp-mid: #ffed70; --color-hp-low: #7cc0ff; --color-entity-creature: #7cc0ff; --color-entity-location: #ffaa40; } html[data-colorblind-mode="deuteranopia"] { --color-accent-primary: #7cc0ff; --color-accent-secondary: #ffbb50; --color-accent-warning: #ffee80; --color-accent-error: #7cc0ff; --color-hp-full: #ffbb50; --color-hp-mid: #ffee80; --color-hp-low: #7cc0ff; --color-entity-creature: #7cc0ff; --color-entity-location: #ffbb50; } html[data-colorblind-mode="tritanopia"] { --color-accent-primary: #ff6060; /* bright red */ --color-accent-secondary: #a8d890; /* bright green */ --color-accent-warning: #40d8e8; /* bright cyan */ --color-accent-error: #ff6060; /* bright red */ --color-hp-full: #a8d890; --color-hp-mid: #40d8e8; --color-hp-low: #ff6060; --color-entity-creature: #ff6060; --color-entity-location: #a8d890; } } /** * Colorblind Display Modes — Import Hub * ======================================== * Accessible color remapping for protanopia, deuteranopia, and tritanopia. * * Decomposed into focused files under colorblind_modes/ for maintainability. */ /** * Mobile Enhancements — Viewport, Input, Filters, Chat Bar, Scroll, Tooltips, Modals & Character Sheet */ /** * Mobile Enhancements * =================== * Additional responsive optimizations for mobile devices. * Complements _mobile_accessibility_fixes.css with UX improvements. */ /* ======================================== * VIEWPORT & SCALING * ======================================== */ @media (max-width: 768px) { /* Prevent horizontal overflow on mobile */ html, body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Prevent iOS text auto-resize without inflating root font-size. The 16px input override (below) prevents iOS zoom on focus. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } } /* ======================================== * NARRATIVE INPUT AREA * ======================================== */ @media (max-width: 768px) { /* Input area on mobile — compact but touch-friendly */ .narrative-input { min-height: 44px; font-size: 16px; /* Prevent iOS zoom */ padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); } /* Touch-friendly send button */ .narrative-input-container .btn, .narrative-send-btn, button[type="submit"] { min-width: 60px; min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--font-size-md); } /* Input container spacing — tighter on mobile */ .narrative-input-container, .terminal-input-area { padding: var(--space-1) var(--space-2); gap: var(--space-1); } /* Suggestions need more touch space */ .quick-action-btn { min-height: 44px; padding: var(--space-3) var(--space-4); font-size: var(--font-size-md); border-radius: var(--radius-md); } } /* ======================================== * COMPACT FILTER BAR ON SMALL PHONES * Reduces filter bar height while keeping channel tabs accessible. * ======================================== */ @media (max-width: 767px) { .mobile-bottom-sheet-mode .narrative-filters { padding: 2px 4px; gap: 2px; min-height: 0; overflow-x: auto; scrollbar-width: none; } .mobile-bottom-sheet-mode .narrative-filters::-webkit-scrollbar { display: none; } .mobile-bottom-sheet-mode .narrative-filters .nf-btn { padding: 2px 8px; font-size: var(--font-size-xs); min-height: 28px; /* Keep 44px touch target via transparent hit area */ position: relative; } .mobile-bottom-sheet-mode .narrative-filters .nf-btn::before { content: ''; position: absolute; inset: -8px -4px; /* Expand touch target to 44px while visual stays compact */ } } /* ======================================== * CHAT-STYLE INPUT BAR (Mobile Only) * Transforms the terminal input into a modern * chat-app input bar with rounded corners and * integrated send button on mobile devices. * ======================================== */ @media (max-width: 768px) { /* Chat-style input container — rounded pill shape */ .input-area { padding: var(--space-2) var(--space-3); padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); border-top: none; background: var(--bg-secondary); } .input-line { background: var(--bg-primary, #1e1e2e); border: 1px solid var(--color-border-subtle, #333); border-radius: var(--radius-full, 9999px); padding: var(--space-1) var(--space-2); gap: var(--space-2); transition: border-color var(--transition-fast, 100ms); } .input-line:focus-within { border-color: var(--accent-primary, #61afef); } /* Hide the terminal prompt on mobile for chat feel */ .input-prompt { display: none; } /* Input field fills available space */ .input-field { font-size: 16px; /* Prevent iOS zoom */ min-height: 44px; /* WCAG 2.5.5 touch target (was 40px, bumped to match mobile_accessibility_fixes) */ padding: var(--space-1) var(--space-2); } /* Show the mobile send button */ .mobile-send-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--accent-primary, #61afef); color: var(--bg-primary, #1e1e2e); border: none; font-size: var(--font-size-lg, 18px); cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-fast, 100ms), transform var(--transition-fast, 100ms); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .mobile-send-btn:active { background: var(--accent-secondary, #56b6c2); transform: scale(0.92); } /* Disabled (empty input / in-flight): dim it so the accent circle doesn't keep reading as tappable. (mobile UX audit) */ .mobile-send-btn:disabled { opacity: 0.4; cursor: default; } } /* Hide mobile send button on desktop */ .mobile-send-btn { display: none; } /* ======================================== * SCROLL CONTAINERS * ======================================== */ @media (max-width: 768px) { /* Smooth momentum scrolling on iOS */ /* #9862: `.split-panel__content` had no producer; ported to the live docked scroller `.grid-panel__content` so momentum scrolling is actually applied. */ .narrative-box, .grid-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; } } /* ======================================== * 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 */ .ability-score-box { min-height: 64px; padding: var(--space-3); } /* Larger inventory items */ .inventory__item, .equipment-slot { min-height: 52px; padding: var(--space-3); } } /* ======================================== * COMBAT PANEL MOBILE * ======================================== */ @media (max-width: 768px) { /* Stack combatant cards */ .combat-tracker__list { display: flex; flex-direction: column; gap: var(--space-2); } /* Bigger initiative badges */ .initiative-badge { min-width: 40px; min-height: 40px; font-size: var(--font-size-lg); } } /** * Mobile Enhancements — Combat, Quest Log, Dice, Spellbook, Dropdowns & Input Visibility */ /* ======================================== * COMBAT ACTION DASHBOARD MOBILE - Phase 3 P2-4 * ======================================== */ @media (max-width: 768px) { /* Fixed bottom positioning for combat dashboard */ .combat-action-dashboard { position: fixed; bottom: 0; left: 0; right: 0; max-height: 60vh; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); z-index: var(--z-sticky); } /* Ensure footer has safe area padding */ .combat-action-dashboard__footer { padding-bottom: calc(var(--panel-padding) + env(safe-area-inset-bottom, 16px)); } /* Increase combat action button touch targets to 64px */ .combat-action-btn { min-height: 64px; padding: var(--space-4); font-size: var(--font-size-md); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Larger end turn button for critical action */ .end-turn-btn { min-height: 72px; font-size: var(--font-size-lg); padding: var(--space-5); touch-action: manipulation; } /* Make action slots more tappable */ .action-slot { min-height: 64px; padding: var(--space-4); } /* Ensure adequate spacing for touch targets */ .action-list { gap: var(--space-3); } /* Action icons larger for easier recognition */ .action-icon { font-size: var(--font-size-2xl); } /* Swipe gesture hints for horizontal action scrolling */ .action-list { position: relative; } /* Only show swipe hints when there's overflow */ .action-list.has-overflow::before, .action-list.has-overflow::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: var(--font-size-2xl); color: var(--color-text-muted); opacity: 0.3; pointer-events: none; z-index: var(--z-raised); animation: swipeHint 2s ease-in-out infinite; text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); } .action-list.has-overflow::before { content: '←'; left: var(--space-2); } .action-list.has-overflow::after { content: '→'; right: var(--space-2); } @keyframes swipeHint { 0%, 100% { opacity: 0.2; transform: translateY(-50%) translateX(0); } 50% { opacity: 0.4; transform: translateY(-50%) translateX(4px); } } /* Hide swipe hints when scrolling */ .action-list.scrolling::before, .action-list.scrolling::after { display: none; } /* Enable horizontal scrolling for actions if needed */ .action-list { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .action-list::-webkit-scrollbar { display: none; } /* Prevent double-tap zoom on combat buttons */ .combat-action-btn, .end-turn-btn, .action-slot { touch-action: manipulation; } /* Increase spell gem touch targets */ .spell-gem { width: 20px; height: 20px; } /* Better touch feedback for combat actions */ .combat-action-btn:active { transform: scale(0.97); background: var(--color-bg-hover, rgba(255, 255, 255, 0.1)); } .end-turn-btn:active { transform: scale(0.98); } } /* ======================================== * QUEST LOG MOBILE * ======================================== */ @media (max-width: 768px) { /* Stack quest cards */ .quest-log__quests { display: flex; flex-direction: column; gap: var(--space-3); } /* Larger objective checkboxes */ .objective-checkbox { width: 24px; height: 24px; min-width: 24px; border-radius: var(--radius-sm); } /* Better objective spacing */ .quest-objective { min-height: 44px; padding: var(--space-2) var(--space-3); } } /* ======================================== * DICE ROLLING MOBILE * ======================================== */ @media (max-width: 768px) { /* Larger dice buttons */ .roll-menu__dice-btn, .dice-btn { min-width: 56px; min-height: 56px; font-size: var(--font-size-xl); border-radius: var(--radius-lg); } /* Grid layout for dice buttons */ .roll-menu__dice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } /* Larger roll results */ .roll-result { font-size: var(--font-size-3xl); padding: var(--space-4); } } /* ======================================== * SPELLBOOK MOBILE * ======================================== */ @media (max-width: 768px) { /* Larger spell slot indicators */ .spell-slot { min-width: 44px; min-height: 44px; } /* Better spell card layout */ .spell-card { padding: var(--space-3); } /* Larger cast buttons */ .spell-cast-btn { min-height: 48px; font-size: var(--font-size-md); } } /* ======================================== * DROPDOWN MENUS MOBILE * ======================================== */ @media (max-width: 768px) { /* Full-width dropdowns on mobile */ .dropdown-menu, .panel-dropdown__menu { position: fixed; bottom: 0; left: 0; right: 0; top: auto; max-height: 60vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 16px); } /* Larger dropdown items */ .dropdown-item, .panel-dropdown__item { min-height: 52px; padding: var(--space-4); font-size: var(--font-size-lg); } /* Add backdrop */ .dropdown-backdrop { position: fixed; inset: 0; background: var(--overlay-medium-plus); z-index: calc(var(--z-dropdown) - 1); } } /* Status bar mobile rules extracted to organisms/status_bar/_mobile.css (#5124) */ /* ======================================== * MOBILE INPUT BAR VISIBILITY * Ensure the input bar is always visible at the * bottom of the screen on mobile devices. * * Root cause: .narrative-main uses a flex column with * overflow:hidden. Intermediate elements between * .narrative-output and .input-area (ambient gutter, * world ticker, quick actions, TTS player, etc.) can * consume enough vertical space to push the input * below the clipped boundary. On phones this makes * the input bar invisible. * * Fix (#5119): on mobile, pin .input-area with position:fixed so it is * visible regardless of which panel is active. The narrative content needs * padding-bottom equal to the input bar height so it scrolls fully above * the fixed bar. * * CONSOLIDATION: the .input-area position:fixed declaration AND the * .narrative-main { overflow-y:auto } scroll-container declaration that used to * live here were REMOVED. Two issues: (1) the .input-area z-index here was 300 * (--z-sheet) while organisms/narrative/_input.css uses 301, a conflict; and * (2) making .narrative-main a scroll container re-introduced the nested-scroll * bug (two momentum-scroll ancestors). The single authoritative input-bar * positioning model (position:fixed; bottom:0; z-index 301) now lives ONLY in * organisms/narrative/_input.css @media (max-width:767px), and .narrative-output * is the sole scroll container. See _input.css and organisms/narrative/_mobile.css. * ======================================== */ /* ======================================== * 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: 767px) { /* Ambient gutter: compact on mobile, allow shrinking */ .ambient-gutter { flex-shrink: 1; max-height: 40px; overflow: hidden; } /* World ticker: single line on mobile */ .world-ticker { flex-shrink: 1; max-height: 28px; overflow: hidden; } /* TTS audio player: compact on mobile */ .tts-audio-player { flex-shrink: 1; max-height: 44px; overflow: hidden; } /* Sticky notes layer: hide on mobile to save space */ .sticky-notes-layer { max-height: 0; overflow: hidden; } /* Scroll-to-latest button: fixed position so it doesn't consume layout space */ .scroll-to-latest { position: fixed; bottom: 80px; right: 12px; z-index: var(--z-panel); } /* Ensure narrative output gets minimum height so it's never fully squished. min-height: 30vh guarantees at least 30% of the viewport for narrative content even when intermediate elements are present. */ .narrative-output { min-height: 30vh; } } /** * Mobile Enhancements — Compression, Keyboard State, Small Screens & Touch Optimizations */ /* ======================================== * MOBILE KEYBOARD OPEN STATE * When the virtual keyboard is open, maximize * content space by hiding non-essential chrome. * Triggered by MobileKeyboardManager via * .mobile-keyboard-open class. * ======================================== */ @media (max-width: 767px) { /* Hide status bar when keyboard is open */ .mobile-keyboard-open .status-bar { display: none; } /* Collapse contextual chips and quick actions to compact strip */ .mobile-keyboard-open .contextual-chips { max-height: 36px; overflow-y: hidden; } .mobile-keyboard-open .quick-actions-container { padding-top: 2px; padding-bottom: 2px; } /* Hide hamburger menu trigger */ .mobile-keyboard-open .hamburger-menu__trigger { display: none; } /* Ensure input stays above keyboard. Fixed position already pins it to the viewport; MobileKeyboardManager sets --mobile-keyboard-offset on the element so it rises above the virtual keyboard (#5119). Reinforce z-index and background. */ .mobile-keyboard-open .input-area { /* #6342 — this higher-specificity rule must REINFORCE the #5123 bump, not flatten it: var(--z-sheet) alone (300) ties the bottom-sheet, and the later-in-DOM sheet then paints over the composer while typing. Match the #5123 calc so the composer stays above the sheet (301). */ z-index: calc(var(--z-sheet) + 1); 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. #9862 dropped a dead `.split-panel__content` member here rather than porting it: `.grid-panel__content` is the live scroller, but re-pointing this would change the type size of EVERY docked panel on mobile — a design change, not a restoration. `.narrative-box` keeps the rule live. Tracked as residual below. */ .narrative-box { 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-save-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) { /* 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 removed — class never applied in HTML (#6031) */ } /* ======================================== * MOBILE CHAT BUBBLES * DM messages left-aligned, player messages right-aligned. * Only applies at mobile breakpoint — desktop unchanged. * ======================================== */ @media (max-width: 768px) { /* Enable flex column on the narrative container so align-self works */ .narrative-output { display: flex; flex-direction: column; } /* Shared bubble base — override default narrative-entry border-left */ .narrative-entry.dm, .narrative-entry.player { border-left: none; border-radius: var(--radius-lg, 12px); padding: var(--space-3, 0.75rem) var(--space-4, 1rem); max-width: 85%; position: relative; } /* DM bubble — left-aligned with accent background */ .narrative-entry.dm { align-self: flex-start; margin-right: auto; background: rgba(139, 69, 19, 0.12); border: 1px solid rgba(210, 180, 140, 0.2); border-bottom-left-radius: var(--radius-sm, 4px); } .narrative-entry.dm:hover { background: rgba(139, 69, 19, 0.18); } /* Remove the divider pseudo-element between consecutive DM entries */ .narrative-entry.dm + .narrative-entry.dm::after { display: none; } /* Player bubble — right-aligned with distinct background */ .narrative-entry.player { align-self: flex-end; margin-left: auto; background: rgba(65, 105, 225, 0.15); border: 1px solid rgba(65, 105, 225, 0.25); border-bottom-right-radius: var(--radius-sm, 4px); } /* Hide the terminal '>' prompt on mobile — bubbles are self-evident */ .narrative-entry.player::before { display: none; } /* Reset padding-left that desktop uses for the '>' prompt */ .narrative-entry.player { padding-left: var(--space-4, 1rem); } /* Queued player messages inherit bubble style */ .narrative-entry.player.queued-message { border-style: dashed; } } /** * Mobile Enhancements — Import Hub * ================================== * Additional responsive optimizations for mobile devices. * * Decomposed into focused files under mobile_enhancements/ for maintainability. */ /* * Mobile Overflow Fixes (#2086-#2094) * ==================================== * Targeted fixes for CSS overflow issues on 390px mobile viewports. * Must load AFTER all component CSS so overrides cascade correctly. * * Issues addressed: * - #2092: Status bar actions zone overflows viewport right edge * - #2093: Split panel min-widths force >390px combined width * - #2087: Toast notifications overlap the input area * - #2088: Input placeholder text overflows on narrow screens * - #2086: Tab bar horizontal overflow with many panel tabs */ /* ======================================== * #2092: STATUS BAR ACTIONS ZONE OVERFLOW * Allow actions zone to shrink so it doesn't push past the right * edge (~29px observed overflow on 390px viewport). * ======================================== */ @media (max-width: 480px) { .status-bar__zone--actions { flex-shrink: 1; min-width: 0; overflow: hidden; } } /* ======================================== * #2093: SPLIT PANEL MIN-WIDTHS ON MOBILE * Override min-width: 250px / 300px on split panels so they * don't force combined widths >390px. On mobile, only one panel * is visible at a time (via mobile-active). * ======================================== */ @media (max-width: 767px) { .split-panel--left, .split-panel--right { min-width: 0; } } /* ======================================== * #2087: TOAST WRAPPER ABOVE INPUT ON MOBILE * Position toasts above the input area so mode toasts and * gameplay notifications don't overlap the text input. * Input area is ~80px + safe-area-inset on mobile. * ======================================== */ @media (max-width: 767px) { .toast-wrapper { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); right: var(--space-2, 8px); left: var(--space-2, 8px); } .toast-wrapper .toast-container { align-items: stretch; /* Full-width toasts on mobile */ } .toast { max-width: none; } } /* ======================================== * #2088: INPUT PLACEHOLDER TRUNCATION * Long placeholder text like * "Type /create to start, or describe who you want to be..." * overflows on narrow screens. Truncate with ellipsis. * ======================================== */ @media (max-width: 480px) { .input-field { /* #8031: min-width:0 lets the flex input shrink below its intrinsic content width. Without it the input keeps its default min-width:auto, overflows the input-line, and the placeholder is hard-clipped mid-word by the parent instead of ellipsizing. This is the load-bearing property that makes the text-overflow rule below actually take effect. */ min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } /* ======================================== * #2086: TAB BAR HORIZONTAL OVERFLOW * Ensure smooth horizontal scrolling on narrow viewports. * Hide tab labels on phones, show icon-only tabs to fit * more panels within 390px without horizontal overflow. * ======================================== */ @media (max-width: 768px) { .mobile-panel-switcher { flex-wrap: nowrap; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .mobile-panel-switcher__btn { scroll-snap-align: start; } } @media (max-width: 480px) { .mobile-panel-switcher__label { display: none; } .mobile-panel-switcher__btn { padding: 4px 10px; min-width: 44px; /* Square icon buttons */ justify-content: center; } } /** * Mobile Touch Target Fixes * ========================= * WCAG 2.1 AA requires 44x44px minimum touch targets. * This file contains targeted overrides for elements that * fall below the minimum on mobile viewports. */ /* Split panel action buttons: base is 18x18px, expand on touch devices */ @media (max-width: 1023px) { .split-panel__action { min-width: 44px; min-height: 44px; } } @media (max-width: 768px) { /* Hamburger menu close button — 32px → 44px */ .hamburger-menu__close { width: 44px; height: 44px; min-width: 44px; min-height: 44px; } /* Voice mic button — add 44px minimum touch target. #4268 finding 7.3: voice-mic + mobile-send-btn coexist on the right edge of the input at mobile breakpoints. Explicit flex-shrink:0 + min-width prevents either button from collapsing at the 375px viewport (smallest target). The voice-input-wrapper inherits these so the wrapper doesn't squish either. */ .input-area .voice-mic-btn { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .input-area .voice-input-wrapper { flex-shrink: 0; } /* Map control buttons — add minimum touch dimensions */ .map-controls button { min-width: 44px; min-height: 44px; } /* WCAG 2.5.5 touch-target FLOOR for combat / quick-action buttons. This is the exact selector union prodplay-combat-mobile.spec.js:659 asserts. Placed here (section 2: BASE/FOUNDATION, ~30KB into the CSS bundle) because terminal.css is 3.6MB and Chromium stops applying rules past ~3MB. The !important floor in _mobile_accessibility_fixes.css at byte 3.65MB is never reached. !important is intentional — a WCAG accessibility minimum must not be overridable by component-level padding reductions or .mobile-keyboard-open collapse rules. Recurring e2e gate failure (#5437 / #5499). */ .quick-action, .quick-action-btn, .unified-quick-action, .action-chip, .inline-actions button, [data-quick-action] { min-height: 44px !important; min-width: 44px !important; } } /** * UX Refinements — Base Styles * ============================== * Scrollbar support, button normalization, input focus states, * skeleton loading, and micro-interactions. */ /** * UX Refinements * ============== * Enhanced user experience improvements including: * - Cross-browser scrollbar support * - Input focus states and feedback * - Skeleton loading states * - Micro-interactions * - Touch feedback enhancements */ /* ======================================== * CROSS-BROWSER SCROLLBAR SUPPORT * ======================================== */ /* * Standard scrollbar-color/scrollbar-width properties, declared once on :root * (NOT `*`, #9846). `scrollbar-color`/`scrollbar-width` are inherited CSS * properties — declaring them on the universal selector re-specified a value * directly on every single DOM node instead of letting inheritance carry it * down. That mattered: once an element has ANY non-auto scrollbar-color * (inherited or direct), Chromium/Firefox use the standards-based scrollbar * renderer for that element and never consult `::-webkit-scrollbar*` rules — * so a `*` declaration silently defeated every deliberate per-surface webkit * scrollbar rule elsewhere in the app (grid_container/_panel_base.css, * split_container/_base.css, organisms/_world_map.css, etc.), none of which * could ever render. Scoping to :root preserves the exact same inherited * default everywhere while leaving room for a surface to opt out via its own * `scrollbar-color: auto` if it ever needs true webkit-pseudo-element control. */ :root { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color); } /* NOTE: no ::-webkit-scrollbar* block here (removed #9846) — this file picks * the standard scrollbar-color/scrollbar-width mechanism as the SOLE * mechanism (DECISION #9846). The webkit-pseudo-element blocks previously * here were unreachable dead code: any element with a non-auto * scrollbar-color (which is every element, via the :root inheritance above) * is rendered by the standards path in current Chromium/Firefox, so * ::-webkit-scrollbar/-track/-thumb rules never painted. Per-surface * ::-webkit-scrollbar* rules in OTHER files are equally dead but were left * alone to avoid scope creep beyond coord task #9846. */ /* #9862 removed the `.scrollbar-thin` / `.scrollbar-hidden` opt-in utilities * that lived here. Neither had a single producer anywhere in the repository — * not a template, not a Stimulus controller, not a spec or e2e fixture, and not * via string interpolation (checked against `class_names`/`token_list` helpers * and every `classList.add`/template-literal class site). Their * ::-webkit-scrollbar halves were dead a second time over, for the #9846 reason * noted above: a non-auto `scrollbar-color` inherited from :root routes every * element through the standards path, so the webkit pseudo-elements never * painted. Re-add them WITH a caller if a surface ever needs them; do not * re-add them speculatively. */ /* ======================================== * BUTTON NORMALIZATION (#4329) * Strip UA defaults (Arial / 13.3333px / light-gray bg) from all