/* ==========================================================================
   RUNIC THEME: Dragon Fire Reforged
   Sunset gold, ember copper, twilight violet, charred wood, and royal flame.
   ========================================================================= */

[data-theme="dragon-fire"] {
    /* Core hue system */
    --hue-primary: 18;
    --hue-accent: 44;
    --hue-gm: 298;
    --hue-danger: 4;
    --hue-warning: 36;
    --hue-success: 126;
    --hue-toxicity: 84;
    --hue-neutral: 22;

    --sat-primary: 66%;
    --lit-primary: 42%;
    --lit-primary-hover: 48%;

    --sat-accent: 78%;
    --lit-accent: 60%;
    --lit-accent-hover: 66%;

    --sat-gm: 34%;
    --lit-gm: 58%;
    --lit-gm-text: 94%;

    --sat-danger: 60%;
    --lit-danger: 48%;
    --lit-danger-hover: 54%;

    --sat-warning: 74%;
    --lit-warning: 56%;

    --sat-success: 34%;
    --lit-success: 38%;

    --sat-toxicity: 72%;
    --lit-toxicity: 58%;

    --lightness-bg: 10%;

    /* Form and timing */
    --radius-sm: 5px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;

    --font-sans: 'Cormorant Garamond', 'Cinzel', 'Georgia', serif;
    --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    --duration-75: 100ms;
    --duration-150: 180ms;
    --duration-250: 300ms;
    --duration-300: 380ms;
    --duration-400: 660ms;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Identity */
    --sun-core: hsl(46 94% 72%);
    --sun-haze: hsl(34 90% 66%);
    --ember-copper: hsl(18 62% 46%);
    --ember-bright: hsl(20 84% 58%);
    --twilight-violet: hsl(292 20% 44%);
    --royal-plum: hsl(308 24% 30%);
    --charcoal-bark: hsl(18 20% 14%);
    --oak-shadow: hsl(20 18% 20%);
    --rose-ash: hsl(338 24% 72%);
    --smoke-lilac: hsl(286 14% 70%);

    /* Surfaces */
    --bg-page: hsl(328 24% 16%);
    --bg-primary: hsl(16 22% 14%);
    --bg-secondary: hsl(16 18% 18% / 0.9);
    --bg-tertiary: hsl(18 18% 22% / 0.94);
    --bg-card: hsl(22 22% 20% / 0.92);
    --bg-hover: hsl(24 30% 30% / 0.58);
    --bg-input: hsl(20 20% 19%);

    --surface-elevated: hsl(22 24% 24%);
    --surface-overlay: hsl(20 22% 22% / 0.98);
    --surface-panel: hsl(24 24% 22% / 0.96);

    /* Text */
    --text-primary: hsl(36 62% 90%);
    --text-secondary: hsl(20 32% 74%);
    --text-label: hsl(38 78% 72%);
    --text-light: hsl(44 96% 97%);
    --text-muted: hsl(336 20% 74% / 0.78);

    /* Borders and shadows */
    --border-color: hsl(28 46% 54% / 0.42);
    --border-subtle: hsl(298 18% 54% / 0.24);
    --border-strong: hsl(40 72% 62% / 0.72);

    --shadow-glow-primary:
        0 12px 30px hsl(18 72% 32% / 0.28),
        0 0 40px hsl(32 84% 58% / 0.14);
    --shadow-glow-accent:
        0 12px 28px hsl(44 88% 66% / 0.24);
    --shadow-glow-danger:
        0 10px 28px hsl(4 62% 44% / 0.18);
    --shadow-glow-gold:
        0 10px 26px hsl(44 94% 68% / 0.3);

    /* Icons */
    --icon-color: hsl(40 84% 68%);
    --icon-filter: brightness(0) saturate(100%) invert(81%) sepia(27%)
        saturate(945%) hue-rotate(340deg) brightness(102%) contrast(94%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(42 90% 66% / 0.32);

    --color-tooltip-bg: hsl(18 20% 18% / 0.98);
    --color-tooltip-highlight: hsl(42 90% 70%);
    --color-tooltip-effect-bg: hsl(18 72% 56% / 0.12);
    --color-tooltip-text: hsl(34 62% 88%);
    --color-tooltip-label: hsl(36 74% 72%);
    --color-tooltip-muted: hsl(332 18% 72%);
    --color-tooltip-dim: hsl(320 12% 60%);
    --color-tooltip-pos: hsl(128 34% 62%);
    --color-tooltip-neg: hsl(5 70% 62%);
    --color-tooltip-separator: hsl(34 52% 56% / 0.38);
    --color-tooltip-section-bg: hsl(20 20% 24% / 0.9);

    /* Quality colors */
    --quality-0-color1: rgb(133, 113, 100);
    --quality-0-color2: rgb(91, 74, 64);
    --quality-1-color1: rgb(236, 216, 187);
    --quality-1-color2: rgb(188, 154, 116);
    --quality-2-color1: rgb(224, 139, 90);
    --quality-2-color2: rgb(170, 94, 54);
    --quality-3-color1: rgb(220, 116, 129);
    --quality-3-color2: rgb(157, 70, 89);
    --quality-4-color1: rgb(176, 128, 193);
    --quality-4-color2: rgb(120, 82, 143);
    --quality-5-color1: rgb(245, 197, 92);
    --quality-5-color2: rgb(188, 129, 40);
    --quality-6-color1: rgb(212, 82, 69);
    --quality-6-color2: rgb(151, 42, 33);
    --quality-7-color1: rgb(255, 228, 164);
    --quality-7-color2: rgb(224, 162, 74);

    /* Spell / element system */
    --element-fire-bg: hsl(18 42% 24% / 0.78);
    --element-fire-border: hsl(18 70% 54% / 0.68);
    --element-fire-hover: hsl(18 46% 30% / 0.92);
    --element-fire-glow: hsl(18 84% 58% / 0.18);

    --element-water-bg: hsl(244 18% 24% / 0.78);
    --element-water-border: hsl(232 34% 60% / 0.56);
    --element-water-hover: hsl(244 20% 30% / 0.9);
    --element-water-glow: hsl(228 42% 62% / 0.16);

    --element-earth-bg: hsl(28 22% 24% / 0.8);
    --element-earth-border: hsl(30 36% 52% / 0.58);
    --element-earth-hover: hsl(28 26% 30% / 0.9);
    --element-earth-glow: hsl(30 42% 56% / 0.14);

    --element-wind-bg: hsl(300 12% 26% / 0.76);
    --element-wind-border: hsl(292 22% 60% / 0.52);
    --element-wind-hover: hsl(300 16% 31% / 0.88);
    --element-wind-glow: hsl(292 30% 66% / 0.14);

    --element-light-bg: hsl(42 72% 26% / 0.82);
    --element-light-border: hsl(44 76% 66% / 0.66);
    --element-light-hover: hsl(42 78% 32% / 0.94);
    --element-light-glow: hsl(46 94% 72% / 0.24);

    --element-shadow-bg: hsl(316 18% 20% / 0.8);
    --element-shadow-border: hsl(304 26% 54% / 0.56);
    --element-shadow-hover: hsl(316 20% 26% / 0.9);
    --element-shadow-glow: hsl(300 28% 60% / 0.16);

    --element-death-bg: hsl(350 24% 22% / 0.8);
    --element-death-border: hsl(356 40% 56% / 0.6);
    --element-death-hover: hsl(350 26% 28% / 0.9);
    --element-death-glow: hsl(356 44% 58% / 0.16);

    --element-life-bg: hsl(120 18% 24% / 0.8);
    --element-life-border: hsl(126 28% 52% / 0.56);
    --element-life-hover: hsl(120 20% 30% / 0.9);
    --element-life-glow: hsl(126 30% 56% / 0.16);

    --element-arcane-bg: hsl(286 24% 24% / 0.82);
    --element-arcane-border: hsl(286 34% 62% / 0.58);
    --element-arcane-hover: hsl(286 28% 30% / 0.92);
    --element-arcane-glow: hsl(286 40% 66% / 0.18);

    --element-mind-bg: hsl(266 18% 24% / 0.8);
    --element-mind-border: hsl(264 26% 58% / 0.56);
    --element-mind-hover: hsl(266 20% 30% / 0.9);
    --element-mind-glow: hsl(264 30% 62% / 0.16);

    --element-physical-bg: hsl(24 26% 24% / 0.82);
    --element-physical-border: hsl(28 44% 56% / 0.58);
    --element-physical-hover: hsl(24 28% 30% / 0.92);
    --element-physical-glow: hsl(28 54% 58% / 0.16);

    --spell-temp-bg: hsl(20 22% 24%);
    --spell-temp-border: hsl(34 48% 54% / 0.78);
    --spell-temp-hover-bg: hsl(22 28% 30%);
    --spell-temp-hover-glow: hsl(42 90% 68% / 0.16);
    --spell-temp-badge-bg: hsl(18 70% 50%);
    --spell-temp-header-bg: hsl(22 22% 28%);
    --spell-temp-header-hover-bg: hsl(22 26% 33%);
    --spell-tile-hover-bg: hsl(22 28% 30%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(24 24% 22%);
    --item-tile-border: hsl(30 34% 48% / 0.62);
    --item-tile-add-bg: hsl(22 22% 20%);
    --item-tile-add-border: hsl(298 16% 48% / 0.42);
    --item-tile-add-hover: hsl(24 28% 28%);
    --item-tile-add-border-hover: hsl(40 72% 60% / 0.8);

    --weight-display-bg: hsl(20 22% 22%);
    --weight-ok-color: hsl(128 34% 62%);
    --weight-warn-color: hsl(38 84% 66%);
    --weight-crit-color: hsl(5 68% 60%);
    --weight-bar-track-bg: hsl(20 14% 28%);

    --currency-tile-bg: hsl(24 24% 22%);
    --currency-tile-border: hsl(34 36% 52% / 0.62);
    --currency-tile-hover-bg: hsl(24 30% 28%);
    --currency-tile-hover-shadow: hsl(42 90% 70% / 0.2);
    --currency-quantity-bg: hsl(26 48% 30%);
    --currency-add-bg: hsl(22 22% 20%);
    --currency-add-border: hsl(298 16% 48% / 0.42);
    --currency-add-hover-bg: hsl(24 28% 28%);
    --currency-add-hover-border: hsl(40 72% 60% / 0.8);

    --color-buff-tile-bg: hsl(122 18% 22%);
    --color-buff-tile-border: hsl(126 28% 48% / 0.54);
    --color-buff-tile-hover: hsl(122 20% 28%);
    --color-buff-tile-glow: hsl(126 30% 56% / 0.14);
    --color-debuff-tile-bg: hsl(4 20% 22%);
    --color-debuff-tile-border: hsl(4 38% 54% / 0.58);
    --color-debuff-tile-hover: hsl(4 24% 28%);
    --color-debuff-tile-glow: hsl(4 42% 58% / 0.14);
    --color-neutral-tile-bg: hsl(22 20% 22%);
    --color-neutral-tile-border: hsl(32 28% 48% / 0.5);
    --color-neutral-tile-hover: hsl(24 28% 28%);
    --color-neutral-tile-glow: hsl(42 64% 68% / 0.12);
    --color-buff-indicator: hsl(126 34% 62%);
    --color-debuff-indicator: hsl(5 66% 62%);

    /* Common status colors */
    --color-heal: hsl(126 34% 62%);
    --color-gold: hsl(42 90% 64%);
}

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

@keyframes emberCrown {
    0%, 100% {
        box-shadow:
            0 0 0 1px hsl(34 48% 58% / 0.28),
            0 14px 30px hsl(18 68% 26% / 0.24),
            0 0 22px hsl(42 90% 68% / 0.12);
    }
    50% {
        box-shadow:
            0 0 0 1px hsl(40 74% 66% / 0.42),
            0 18px 34px hsl(18 72% 30% / 0.28),
            0 0 30px hsl(44 96% 72% / 0.18);
    }
}

@keyframes horizonPulse {
    0%, 100% {
        opacity: 0.18;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.34;
        transform: translateY(-1%) scale(1.02);
    }
}

@keyframes duskDrift {
    0%, 100% {
        opacity: 0.22;
        transform: translateX(0);
    }
    50% {
        opacity: 0.38;
        transform: translateX(1.5%);
    }
}

@keyframes sparkRise {
    0% {
        transform: translateY(6px) scale(0.96);
        opacity: 0.06;
    }
    50% {
        transform: translateY(-6px) scale(1.04);
        opacity: 0.18;
    }
    100% {
        transform: translateY(-12px) scale(0.98);
        opacity: 0.05;
    }
}

/* ==========================================================================
   Foundation
   ========================================================================= */

body[data-theme="dragon-fire"] {
    color: var(--text-primary);
    background:
        radial-gradient(circle at 16% 82%, hsl(46 98% 62% / 0.74) 0%, hsl(34 84% 46% / 0.44) 16%, transparent 34%),
        radial-gradient(circle at 24% 56%, hsl(338 46% 68% / 0.3) 0%, transparent 28%),
        radial-gradient(circle at 78% 24%, hsl(288 20% 44% / 0.34) 0%, transparent 30%),
        linear-gradient(180deg, hsl(294 18% 44%) 0%, hsl(334 22% 28%) 26%, hsl(18 24% 20%) 58%, hsl(18 22% 12%) 100%);
}

body[data-theme="dragon-fire"]::before,
body[data-theme="dragon-fire"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
}

body[data-theme="dragon-fire"]::before {
    background:
        linear-gradient(0deg, hsl(18 78% 22% / 0.42) 0%, transparent 26%),
        linear-gradient(94deg,
            transparent 0%,
            hsl(40 100% 84% / 0.36) 16%,
            hsl(32 92% 66% / 0.18) 28%,
            transparent 44%);
    mix-blend-mode: screen;
    animation: horizonPulse 12s ease-in-out infinite;
}

body[data-theme="dragon-fire"]::after {
    background:
        radial-gradient(circle at 18% 76%, hsl(44 100% 84% / 0.18) 0 2px, transparent 2px 100%),
        radial-gradient(circle at 30% 70%, hsl(30 92% 66% / 0.14) 0 1.5px, transparent 1.5px 100%),
        radial-gradient(circle at 82% 26%, hsl(316 38% 78% / 0.12) 0 2px, transparent 2px 100%);
    background-size: 200px 200px, 240px 240px, 260px 260px;
    opacity: 0.72;
    animation: sparkRise 10s ease-in-out infinite;
}

[data-theme="dragon-fire"] h1,
[data-theme="dragon-fire"] h2,
[data-theme="dragon-fire"] h3,
[data-theme="dragon-fire"] h4,
[data-theme="dragon-fire"] h5,
[data-theme="dragon-fire"] h6 {
    color: hsl(42 96% 82%);
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
    text-shadow:
        0 1px 0 hsl(18 32% 16% / 0.9),
        0 0 18px hsl(32 90% 60% / 0.12);
}

[data-theme="dragon-fire"] .title,
[data-theme="dragon-fire"] .section-title,
[data-theme="dragon-fire"] .modal-header h3,
[data-theme="dragon-fire"] .edit-modal-title {
    color: hsl(42 94% 80%);
}

[data-theme="dragon-fire"] strong,
[data-theme="dragon-fire"] b,
[data-theme="dragon-fire"] label,
[data-theme="dragon-fire"] .label {
    color: var(--text-label);
}

[data-theme="dragon-fire"] a {
    color: hsl(36 92% 74%);
}

[data-theme="dragon-fire"] a:hover {
    color: hsl(334 54% 82%);
}

/* ==========================================================================
   Shared surfaces
   ========================================================================= */

[data-theme="dragon-fire"] .card,
[data-theme="dragon-fire"] .panel,
[data-theme="dragon-fire"] .content-panel,
[data-theme="dragon-fire"] .sheet-block,
[data-theme="dragon-fire"] .wiki-block,
[data-theme="dragon-fire"] .monster-card,
[data-theme="dragon-fire"] .loot-card,
[data-theme="dragon-fire"] .combat-card,
[data-theme="dragon-fire"] .gm-panel,
[data-theme="dragon-fire"] .inventory-section,
[data-theme="dragon-fire"] .equipment-section,
[data-theme="dragon-fire"] .spellbook-section,
[data-theme="dragon-fire"] .rule-section,
[data-theme="dragon-fire"] .desktop-window,
[data-theme="dragon-fire"] .window-content,
[data-theme="dragon-fire"] .window-panel,
[data-theme="dragon-fire"] .attr-container,
[data-theme="dragon-fire"] .resource-panel,
[data-theme="dragon-fire"] .notes-box {
    background:
        linear-gradient(180deg, hsl(24 26% 24% / 0.96) 0%, hsl(18 22% 18% / 0.98) 100%);
    border: 1px solid var(--border-color);
    box-shadow:
        0 1px 0 hsl(42 94% 82% / 0.08) inset,
        0 20px 38px hsl(10 28% 6% / 0.34),
        0 6px 18px hsl(300 18% 16% / 0.14);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

[data-theme="dragon-fire"] .card::before,
[data-theme="dragon-fire"] .panel::before,
[data-theme="dragon-fire"] .content-panel::before,
[data-theme="dragon-fire"] .desktop-window::before,
[data-theme="dragon-fire"] .window-panel::before,
[data-theme="dragon-fire"] .inventory-section::before,
[data-theme="dragon-fire"] .equipment-section::before,
[data-theme="dragon-fire"] .spellbook-section::before,
[data-theme="dragon-fire"] .rule-section::before,
[data-theme="dragon-fire"] .notes-box::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, hsl(46 96% 76% / 0.12), transparent 24%),
        linear-gradient(180deg, hsl(308 22% 46% / 0.08) 0%, transparent 34%, hsl(18 70% 24% / 0.12) 100%);
}

[data-theme="dragon-fire"] .card:hover,
[data-theme="dragon-fire"] .panel:hover,
[data-theme="dragon-fire"] .content-panel:hover,
[data-theme="dragon-fire"] .desktop-window:hover,
[data-theme="dragon-fire"] .window-panel:hover {
    border-color: hsl(40 70% 62% / 0.8);
    box-shadow:
        0 1px 0 hsl(42 96% 84% / 0.12) inset,
        0 22px 42px hsl(10 30% 6% / 0.38),
        0 0 0 1px hsl(42 92% 70% / 0.14),
        0 0 26px hsl(24 86% 46% / 0.1);
}

/* ==========================================================================
   Buttons and controls
   ========================================================================= */

[data-theme="dragon-fire"] button,
[data-theme="dragon-fire"] .btn,
[data-theme="dragon-fire"] input[type="button"],
[data-theme="dragon-fire"] input[type="submit"],
[data-theme="dragon-fire"] .btn-modal,
[data-theme="dragon-fire"] .modal button {
    color: hsl(34 90% 96%);
    background:
        linear-gradient(180deg, hsl(18 66% 46%) 0%, hsl(14 58% 34%) 100%);
    border: 1px solid hsl(12 42% 24% / 0.9);
    border-radius: 999px;
    box-shadow:
        0 1px 0 hsl(42 92% 84% / 0.18) inset,
        0 10px 20px hsl(12 54% 12% / 0.28),
        0 0 0 1px hsl(42 74% 58% / 0.12);
    text-shadow: 0 1px 1px hsl(12 38% 12% / 0.4);
    transition:
        transform var(--duration-150) var(--ease-out),
        box-shadow var(--duration-250) var(--ease-out),
        background var(--duration-250) var(--ease-out),
        border-color var(--duration-150) var(--ease-out);
}

[data-theme="dragon-fire"] button:hover,
[data-theme="dragon-fire"] .btn:hover,
[data-theme="dragon-fire"] input[type="button"]:hover,
[data-theme="dragon-fire"] input[type="submit"]:hover,
[data-theme="dragon-fire"] .btn-modal:hover,
[data-theme="dragon-fire"] .modal button:hover {
    transform: translateY(-1px);
    background:
        linear-gradient(180deg, hsl(44 92% 70%) 0%, hsl(24 84% 56%) 100%);
    border-color: hsl(28 44% 34% / 0.92);
    box-shadow:
        0 1px 0 hsl(48 100% 90% / 0.34) inset,
        0 14px 26px hsl(18 54% 14% / 0.28),
        0 0 24px hsl(42 92% 72% / 0.18);
    color: hsl(18 38% 18%);
    text-shadow: none;
}

[data-theme="dragon-fire"] button:active,
[data-theme="dragon-fire"] .btn:active,
[data-theme="dragon-fire"] input[type="button"]:active,
[data-theme="dragon-fire"] input[type="submit"]:active,
[data-theme="dragon-fire"] .btn-modal:active,
[data-theme="dragon-fire"] .modal button:active {
    transform: translateY(0);
}

[data-theme="dragon-fire"] button:focus-visible,
[data-theme="dragon-fire"] .btn:focus-visible,
[data-theme="dragon-fire"] input:focus-visible,
[data-theme="dragon-fire"] select:focus-visible,
[data-theme="dragon-fire"] textarea:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px hsl(28 40% 18% / 0.96),
        0 0 0 5px var(--color-focus-ring);
}

[data-theme="dragon-fire"] input,
[data-theme="dragon-fire"] select,
[data-theme="dragon-fire"] textarea,
[data-theme="dragon-fire"] .modal-input,
[data-theme="dragon-fire"] .edit-modal-container input,
[data-theme="dragon-fire"] .edit-modal-container select,
[data-theme="dragon-fire"] .edit-modal-container textarea {
    background:
        linear-gradient(180deg, hsl(24 24% 26%) 0%, hsl(18 18% 20%) 100%);
    border: 1px solid hsl(30 30% 48% / 0.58);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    box-shadow:
        0 1px 0 hsl(42 92% 82% / 0.06) inset,
        0 8px 16px hsl(8 20% 8% / 0.16);
}

[data-theme="dragon-fire"] input:hover,
[data-theme="dragon-fire"] select:hover,
[data-theme="dragon-fire"] textarea:hover,
[data-theme="dragon-fire"] .modal-input:hover {
    border-color: hsl(38 64% 60% / 0.72);
}

[data-theme="dragon-fire"] input::placeholder,
[data-theme="dragon-fire"] textarea::placeholder {
    color: hsl(330 16% 74% / 0.72);
}

/* ==========================================================================
   Navigation and icon bars
   ========================================================================= */

[data-theme="dragon-fire"] #div_top_navigation,
[data-theme="dragon-fire"] #div_right_navigation {
    background:
        linear-gradient(180deg, hsl(18 20% 18% / 0.96) 0%, hsl(14 22% 12% / 0.96) 100%);
    border-color: hsl(30 34% 42% / 0.4);
    box-shadow:
        0 1px 0 hsl(42 88% 72% / 0.08) inset,
        0 20px 40px hsl(4 24% 6% / 0.36);
}

[data-theme="dragon-fire"] #div_iconbar_left,
[data-theme="dragon-fire"] #div_iconbar_right {
    background:
        linear-gradient(180deg, hsl(22 22% 18% / 0.94) 0%, hsl(16 20% 14% / 0.94) 100%);
    border: 1px solid hsl(28 32% 42% / 0.42);
    box-shadow:
        0 1px 0 hsl(42 90% 72% / 0.06) inset,
        0 18px 32px hsl(4 24% 6% / 0.3);
}

[data-theme="dragon-fire"] .tab_btn,
[data-theme="dragon-fire"] .nav-icon-btn,
[data-theme="dragon-fire"] .tab_btn_vertical {
    background:
        radial-gradient(circle at 30% 26%, hsl(46 100% 78% / 0.08) 0%, transparent 34%),
        linear-gradient(180deg, hsl(22 26% 22%) 0%, hsl(16 22% 16%) 100%);
    border: 1px solid hsl(28 30% 38% / 0.7);
    box-shadow:
        0 1px 0 hsl(42 92% 80% / 0.08) inset,
        0 10px 18px hsl(4 24% 6% / 0.24);
    transition:
        transform var(--duration-150) var(--ease-out),
        box-shadow var(--duration-250) var(--ease-out),
        background var(--duration-250) var(--ease-out),
        border-color var(--duration-150) var(--ease-out);
}

[data-theme="dragon-fire"] .tab_btn:hover,
[data-theme="dragon-fire"] .nav-icon-btn:hover,
[data-theme="dragon-fire"] .tab_btn_vertical:hover {
    transform: translateY(-1px);
    border-color: hsl(40 72% 62% / 0.76);
    box-shadow:
        0 1px 0 hsl(44 98% 84% / 0.14) inset,
        0 14px 24px hsl(4 24% 6% / 0.28),
        0 0 18px hsl(24 88% 52% / 0.12);
}

[data-theme="dragon-fire"] .tab_btn.active-tab,
[data-theme="dragon-fire"] .nav-icon-btn.active,
[data-theme="dragon-fire"] .tab_btn_vertical.active,
[data-theme="dragon-fire"] #navi-btn-combat.tab_btn.combat-active,
[data-theme="dragon-fire"] #edit_btn_nav.active {
    background:
        radial-gradient(circle at 28% 24%, hsl(50 100% 82% / 0.34) 0%, transparent 34%),
        linear-gradient(180deg, hsl(46 92% 72%) 0%, hsl(22 78% 56%) 100%);
    border-color: hsl(28 46% 34% / 0.88);
    box-shadow:
        0 1px 0 hsl(48 100% 90% / 0.36) inset,
        0 0 0 1px hsl(42 92% 74% / 0.18),
        0 16px 28px hsl(10 42% 12% / 0.3),
        0 0 30px hsl(40 98% 70% / 0.18);
    animation: emberCrown 5.4s ease-in-out infinite;
}

[data-theme="dragon-fire"] .tab_Icon,
[data-theme="dragon-fire"] .tab_btn img,
[data-theme="dragon-fire"] .nav-icon-btn img,
[data-theme="dragon-fire"] #div_iconbar_left img,
[data-theme="dragon-fire"] #div_iconbar_right img {
    filter: var(--icon-filter);
    opacity: 0.98;
    transition:
        filter var(--duration-150) var(--ease-out),
        transform var(--duration-150) var(--ease-out),
        opacity var(--duration-150) var(--ease-out);
}

[data-theme="dragon-fire"] .tab_btn:hover .tab_Icon,
[data-theme="dragon-fire"] .tab_btn:hover img,
[data-theme="dragon-fire"] .nav-icon-btn:hover img,
[data-theme="dragon-fire"] #div_iconbar_left button:hover img,
[data-theme="dragon-fire"] #div_iconbar_right button:hover img {
    filter: brightness(0) saturate(100%) invert(92%) sepia(24%) saturate(857%)
        hue-rotate(322deg) brightness(105%) contrast(96%);
    transform: scale(1.03);
}

[data-theme="dragon-fire"] .tab_btn.active-tab .tab_Icon,
[data-theme="dragon-fire"] .tab_btn.active-tab img,
[data-theme="dragon-fire"] .nav-icon-btn.active img,
[data-theme="dragon-fire"] #navi-btn-combat.tab_btn.combat-active .navi-icon,
[data-theme="dragon-fire"] #navi-btn-combat.tab_btn.combat-active img,
[data-theme="dragon-fire"] #edit_btn_nav.active img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(16%) saturate(1518%)
        hue-rotate(348deg) brightness(87%) contrast(92%);
}

/* ==========================================================================
   Tables, lists, tabs
   ========================================================================= */

[data-theme="dragon-fire"] table,
[data-theme="dragon-fire"] .equipment-table {
    background: hsl(22 22% 20% / 0.94);
    border: 1px solid hsl(30 34% 46% / 0.56);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 1px 0 hsl(44 92% 82% / 0.06) inset,
        0 16px 30px hsl(6 24% 6% / 0.22);
}

[data-theme="dragon-fire"] th,
[data-theme="dragon-fire"] .equipment-table th {
    background:
        linear-gradient(180deg, hsl(306 18% 32%) 0%, hsl(18 54% 28%) 100%);
    color: hsl(42 96% 92%);
    border-color: hsl(24 30% 24% / 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-theme="dragon-fire"] td,
[data-theme="dragon-fire"] .equipment-table td {
    border-color: hsl(26 24% 34% / 0.44);
    color: var(--text-primary);
}

[data-theme="dragon-fire"] tr:nth-child(even) td {
    background: hsl(300 14% 24% / 0.18);
}

[data-theme="dragon-fire"] tr:hover td {
    background: hsl(30 70% 40% / 0.22);
}

[data-theme="dragon-fire"] .tab,
[data-theme="dragon-fire"] .sheet-tab,
[data-theme="dragon-fire"] .wiki-tab {
    background: hsl(22 18% 22%);
    border: 1px solid hsl(28 28% 44% / 0.54);
    color: var(--text-secondary);
}

[data-theme="dragon-fire"] .tab.active,
[data-theme="dragon-fire"] .sheet-tab.active,
[data-theme="dragon-fire"] .wiki-tab.active {
    background:
        linear-gradient(180deg, hsl(44 92% 72%) 0%, hsl(22 80% 56%) 100%);
    color: hsl(18 40% 18%);
    border-color: hsl(24 42% 34% / 0.84);
}

/* ==========================================================================
   Tooltips and modals
   ========================================================================= */

[data-theme="dragon-fire"] .itooltip,
[data-theme="dragon-fire"] .skilltooltip,
[data-theme="dragon-fire"] .attrtooltip,
[data-theme="dragon-fire"] #item-tooltip,
[data-theme="dragon-fire"] #resistanceTooltip,
[data-theme="dragon-fire"] #currencyTooltip,
[data-theme="dragon-fire"] .basic-tooltip,
[data-theme="dragon-fire"] .tooltiptext,
[data-theme="dragon-fire"] .unified-tooltip,
[data-theme="dragon-fire"] .stattooltip,
[data-theme="dragon-fire"] .twohanded-tooltip {
    background:
        linear-gradient(180deg, hsl(24 24% 24% / 0.98) 0%, hsl(18 20% 18% / 0.98) 100%) !important;
    border: 1px solid hsl(34 40% 54% / 0.62) !important;
    color: var(--color-tooltip-text) !important;
    box-shadow:
        0 1px 0 hsl(44 96% 84% / 0.08) inset,
        0 20px 34px hsl(4 24% 6% / 0.28),
        0 0 0 1px hsl(304 22% 58% / 0.08);
    backdrop-filter: blur(8px);
}

[data-theme="dragon-fire"] .itooltip-title,
[data-theme="dragon-fire"] .skilltooltip-title,
[data-theme="dragon-fire"] .attrtooltip-title,
[data-theme="dragon-fire"] .stattooltip-title,
[data-theme="dragon-fire"] .tooltip-title {
    color: var(--color-tooltip-highlight);
}

[data-theme="dragon-fire"] .itooltip-effects,
[data-theme="dragon-fire"] .skilltooltip-value-details,
[data-theme="dragon-fire"] .attrtooltip-value-details,
[data-theme="dragon-fire"] .tooltip-content {
    background: var(--color-tooltip-section-bg);
    border-color: var(--color-tooltip-separator);
}

[data-theme="dragon-fire"] .modal,
[data-theme="dragon-fire"] .gm-image-modal,
[data-theme="dragon-fire"] .combat-modal,
[data-theme="dragon-fire"] .edit-modal-container {
    background:
        linear-gradient(180deg, hsl(24 24% 24% / 0.98) 0%, hsl(18 20% 18% / 0.98) 100%);
    border: 1px solid hsl(34 40% 54% / 0.66);
    border-radius: var(--radius-2xl);
    box-shadow:
        0 1px 0 hsl(42 96% 84% / 0.1) inset,
        0 26px 50px hsl(4 24% 6% / 0.36),
        0 0 0 1px hsl(304 22% 56% / 0.08);
}

[data-theme="dragon-fire"] .modal-header,
[data-theme="dragon-fire"] .edit-modal-header {
    background:
        linear-gradient(180deg, hsl(300 18% 34% / 0.64) 0%, hsl(24 40% 28% / 0.78) 100%);
    border-bottom: 1px solid hsl(34 34% 48% / 0.42);
}

[data-theme="dragon-fire"] .modal-group-title,
[data-theme="dragon-fire"] .modal-header h3,
[data-theme="dragon-fire"] .edit-modal-title {
    color: hsl(42 94% 82%);
}

[data-theme="dragon-fire"] .modal-footer,
[data-theme="dragon-fire"] .edit-modal-footer {
    border-top: 1px solid hsl(34 30% 46% / 0.34);
}

[data-theme="dragon-fire"] #combat-overlay,
[data-theme="dragon-fire"] .edit-modal-overlay {
    background:
        radial-gradient(circle at 24% 82%, hsl(42 96% 70% / 0.08), transparent 30%),
        hsl(8 24% 8% / 0.66);
    backdrop-filter: blur(8px);
}

/* ==========================================================================
   Inventory, resources, buffs
   ========================================================================= */

[data-theme="dragon-fire"] .inventory-slot,
[data-theme="dragon-fire"] .item-slot,
[data-theme="dragon-fire"] .inventory-item,
[data-theme="dragon-fire"] .currency-tile,
[data-theme="dragon-fire"] .buff-tile,
[data-theme="dragon-fire"] .debuff-tile,
[data-theme="dragon-fire"] .neutral-tile,
[data-theme="dragon-fire"] .spell-template,
[data-theme="dragon-fire"] .spell-tile,
[data-theme="dragon-fire"] .resource-tile,
[data-theme="dragon-fire"] .attribute-card {
    background:
        linear-gradient(180deg, hsl(24 24% 24%) 0%, hsl(18 18% 18%) 100%);
    border: 1px solid hsl(30 34% 48% / 0.6);
    border-radius: var(--radius-lg);
    box-shadow:
        0 1px 0 hsl(42 98% 84% / 0.06) inset,
        0 12px 24px hsl(4 24% 6% / 0.2);
}

[data-theme="dragon-fire"] .inventory-slot:hover,
[data-theme="dragon-fire"] .item-slot:hover,
[data-theme="dragon-fire"] .inventory-item:hover,
[data-theme="dragon-fire"] .currency-tile:hover,
[data-theme="dragon-fire"] .spell-template:hover,
[data-theme="dragon-fire"] .spell-tile:hover,
[data-theme="dragon-fire"] .attribute-card:hover {
    border-color: hsl(40 72% 62% / 0.78);
    box-shadow:
        0 1px 0 hsl(46 100% 88% / 0.08) inset,
        0 16px 28px hsl(4 24% 6% / 0.24),
        0 0 20px hsl(24 84% 50% / 0.12);
}

[data-theme="dragon-fire"] #tab_inventory .inventory-slot.empty,
[data-theme="dragon-fire"] .add-item-slot,
[data-theme="dragon-fire"] .currency-add,
[data-theme="dragon-fire"] .add-buff-slot {
    background:
        repeating-linear-gradient(
            135deg,
            hsl(20 18% 20%),
            hsl(20 18% 20%) 10px,
            hsl(292 12% 24%) 10px,
            hsl(292 12% 24%) 20px
        );
    border-style: dashed;
}

[data-theme="dragon-fire"] .weight-display,
[data-theme="dragon-fire"] .carry-weight,
[data-theme="dragon-fire"] .encumbrance-box {
    background:
        linear-gradient(180deg, hsl(22 22% 24%) 0%, hsl(18 18% 19%) 100%);
    border: 1px solid hsl(30 34% 46% / 0.56);
    color: var(--text-primary);
}

[data-theme="dragon-fire"] .weight-bar,
[data-theme="dragon-fire"] .encumbrance-bar {
    background: var(--weight-bar-track-bg);
}

[data-theme="dragon-fire"] .weight-fill,
[data-theme="dragon-fire"] .encumbrance-fill {
    background:
        linear-gradient(90deg, hsl(18 72% 48%) 0%, hsl(46 94% 68%) 100%);
}

/* ==========================================================================
   Character sheet and portrait framing
   ========================================================================= */

[data-theme="dragon-fire"] .char-sheet-main,
[data-theme="dragon-fire"] .portrait-panel,
[data-theme="dragon-fire"] .character-portrait,
[data-theme="dragon-fire"] .profile-panel {
    background:
        linear-gradient(180deg, hsl(24 24% 24%) 0%, hsl(18 18% 18%) 100%);
    border-color: hsl(32 38% 50% / 0.62);
    box-shadow:
        0 1px 0 hsl(44 96% 84% / 0.08) inset,
        0 20px 38px hsl(4 24% 6% / 0.28);
}

[data-theme="dragon-fire"] .character-portrait img,
[data-theme="dragon-fire"] .portrait-frame img {
    border-radius: calc(var(--radius-xl) - 4px);
    filter: saturate(1.06) contrast(1.04) brightness(1.02);
}

[data-theme="dragon-fire"] .level-badge,
[data-theme="dragon-fire"] .resource-badge,
[data-theme="dragon-fire"] .stat-badge {
    background:
        linear-gradient(180deg, hsl(44 92% 76%) 0%, hsl(24 72% 58%) 100%);
    border: 1px solid hsl(28 46% 36% / 0.74);
    color: hsl(18 40% 18%);
    box-shadow:
        0 1px 0 hsl(48 100% 90% / 0.34) inset,
        0 10px 22px hsl(18 42% 12% / 0.22);
}

/* ==========================================================================
   Combat and HUD accents
   ========================================================================= */

[data-theme="dragon-fire"] .combat-panel,
[data-theme="dragon-fire"] .initiative-panel,
[data-theme="dragon-fire"] .hud-panel,
[data-theme="dragon-fire"] .dice-panel,
[data-theme="dragon-fire"] .status-panel {
    background:
        linear-gradient(180deg, hsl(20 22% 18% / 0.96) 0%, hsl(12 22% 12% / 0.96) 100%);
    border: 1px solid hsl(30 34% 42% / 0.44);
    color: hsl(38 80% 92%);
    box-shadow:
        0 1px 0 hsl(44 90% 74% / 0.06) inset,
        0 18px 34px hsl(4 24% 6% / 0.3);
}

[data-theme="dragon-fire"] .roll-result,
[data-theme="dragon-fire"] .combat-highlight,
[data-theme="dragon-fire"] .status-pill.active {
    background:
        linear-gradient(180deg, hsl(46 94% 72%) 0%, hsl(20 84% 56%) 100%);
    color: hsl(18 40% 18%);
    border: 1px solid hsl(28 44% 34% / 0.82);
    box-shadow:
        0 1px 0 hsl(48 100% 90% / 0.38) inset,
        0 10px 22px hsl(18 42% 12% / 0.2);
}

[data-theme="dragon-fire"] .widget-tile .dice-result,
[data-theme="dragon-fire"] .widget-tile .attack-result,
[data-theme="dragon-fire"] .widget-tile .activity-display[id*="_attack_"] {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
}

[data-theme="dragon-fire"] .widget-tile .dice-value,
[data-theme="dragon-fire"] .widget-tile .attack-damage-value,
[data-theme="dragon-fire"] .widget-tile .attack-roll-value {
    color: hsl(42 96% 84%);
    text-shadow:
        0 0 12px hsl(34 90% 60% / 0.28),
        0 1px 0 hsl(14 42% 16% / 0.8);
}

[data-theme="dragon-fire"] .widget-tile .dice-sides,
[data-theme="dragon-fire"] .widget-tile .attack-damage-label,
[data-theme="dragon-fire"] .widget-tile .attack-roll-label,
[data-theme="dragon-fire"] .widget-tile .activity-name {
    color: hsl(26 42% 78%);
}

[data-theme="dragon-fire"] .hp-bar-fill {
    background: linear-gradient(90deg, hsl(5 68% 52%) 0%, hsl(22 84% 56%) 100%);
}

[data-theme="dragon-fire"] .mana-bar-fill,
[data-theme="dragon-fire"] .energy-bar-fill {
    background: linear-gradient(90deg, hsl(284 28% 50%) 0%, hsl(314 30% 66%) 100%);
}

[data-theme="dragon-fire"] .stamina-bar-fill {
    background: linear-gradient(90deg, hsl(34 82% 58%) 0%, hsl(48 98% 74%) 100%);
}

/* ==========================================================================
   Utility and microdetails
   ========================================================================= */

[data-theme="dragon-fire"] hr,
[data-theme="dragon-fire"] .divider {
    border: none;
    height: 1px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            hsl(300 16% 52% / 0.18) 14%,
            hsl(42 88% 70% / 0.58) 50%,
            hsl(300 16% 52% / 0.18) 86%,
            transparent 100%);
}

[data-theme="dragon-fire"] .highlight,
[data-theme="dragon-fire"] .text-highlight,
[data-theme="dragon-fire"] .rarity-legendary {
    color: hsl(44 96% 72%);
    text-shadow: 0 0 14px hsl(42 96% 70% / 0.22);
}

[data-theme="dragon-fire"] .muted,
[data-theme="dragon-fire"] .secondary-text,
[data-theme="dragon-fire"] .hint {
    color: var(--text-muted);
}

[data-theme="dragon-fire"] .scroll-area::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, hsl(18 66% 44%) 0%, hsl(42 90% 64%) 100%);
    border-radius: 999px;
}

[data-theme="dragon-fire"] .scroll-area::-webkit-scrollbar-track {
    background: hsl(16 18% 18%);
}

[data-theme="dragon-fire"] .icon-themed,
[data-theme="dragon-fire"] img.icon-themed {
    filter: var(--icon-filter);
}

[data-theme="dragon-fire"] .glow,
[data-theme="dragon-fire"] .active-glow,
[data-theme="dragon-fire"] .is-selected {
    box-shadow:
        0 0 0 1px hsl(42 88% 68% / 0.26),
        0 0 22px hsl(24 84% 52% / 0.16);
}

[data-theme="dragon-fire"] .ember-accent::after,
[data-theme="dragon-fire"] .sun-spark::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 14px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background:
        radial-gradient(circle, hsl(50 100% 90%) 0%, hsl(36 94% 68%) 42%, transparent 72%);
    box-shadow: 0 0 16px hsl(40 96% 70% / 0.3);
    animation: duskDrift 7s ease-in-out infinite;
    pointer-events: none;
}

/* ==========================================================================
   Mobile polish
   ========================================================================= */

@media (max-width: 768px) {
    body[data-theme="dragon-fire"]::before {
        opacity: 0.84;
    }

    [data-theme="dragon-fire"] #div_top_navigation,
    [data-theme="dragon-fire"] #div_right_navigation,
    [data-theme="dragon-fire"] #div_iconbar_left,
    [data-theme="dragon-fire"] #div_iconbar_right {
        background:
            linear-gradient(180deg, hsl(20 22% 16% / 0.96) 0%, hsl(12 22% 11% / 0.96) 100%);
    }

    [data-theme="dragon-fire"] .modal,
    [data-theme="dragon-fire"] .gm-image-modal,
    [data-theme="dragon-fire"] .combat-modal,
    [data-theme="dragon-fire"] .edit-modal-container {
        border-radius: var(--radius-xl);
    }
}
[data-theme="dragon-fire"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

[data-theme="dragon-fire"] .toxicity-bar {
    background: var(--gradient-toxicity-resource) !important;
    box-shadow: var(--shadow-glow-toxicity) !important;
}

[data-theme="dragon-fire"] #toxicityText {
    color: var(--text-light);
}