/* ==========================================================================
   RUNIC THEME: Nightmare Reforged
   Ash, iron, faded vellum, moonlit stone, and restrained ember light.
   ========================================================================= */

[data-theme="nightmare"] {
    /* Core hue system */
    --hue-primary: 28;
    --hue-accent: 195;
    --hue-gm: 356;
    --hue-danger: 4;
    --hue-warning: 31;
    --hue-success: 138;
    --hue-toxicity: 88;
    --hue-neutral: 24;

    --sat-primary: 72%;
    --lit-primary: 56%;
    --lit-primary-hover: 63%;

    --sat-accent: 22%;
    --lit-accent: 68%;
    --lit-accent-hover: 74%;

    --sat-gm: 54%;
    --lit-gm: 52%;
    --lit-gm-text: 72%;

    --sat-danger: 58%;
    --lit-danger: 52%;
    --lit-danger-hover: 59%;

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

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

    --sat-toxicity: 46%;
    --lit-toxicity: 50%;

    --lightness-bg: 6%;

    /* Form and timing */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 18px;

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

    --duration-75: 100ms;
    --duration-150: 180ms;
    --duration-250: 280ms;
    --duration-300: 360ms;
    --duration-400: 560ms;

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

    /* Theme identity */
    --ember-core: hsl(28 78% 60%);
    --ember-soft: hsl(31 52% 70%);
    --moon-silver: hsl(205 16% 74%);
    --ash-bone: hsl(34 18% 82%);
    --rust-blood: hsl(4 48% 44%);
    --void-stone: hsl(220 16% 7%);
    --iron-dark: hsl(24 13% 14%);
    --iron-mid: hsl(28 10% 24%);
    --vellum-dim: hsl(34 16% 68%);

    /* Surfaces */
    --bg-page: hsl(220 18% 6%);
    --bg-primary: hsl(24 15% 9%);
    --bg-secondary: hsl(24 12% 11% / 0.88);
    --bg-tertiary: hsl(24 10% 14% / 0.95);
    --bg-card: hsl(24 12% 11% / 0.92);
    --bg-hover: hsl(28 16% 18% / 0.5);
    --bg-input: hsl(25 10% 12%);

    --surface-elevated: hsl(24 12% 14%);
    --surface-overlay: hsl(24 11% 16% / 0.96);
    --surface-panel: hsl(24 10% 12% / 0.96);

    /* Text */
    --text-primary: hsl(34 24% 84%);
    --text-secondary: hsl(32 14% 66%);
    --text-label: hsl(33 22% 76%);
    --text-light: hsl(38 28% 90%);
    --text-muted: hsl(28 10% 54% / 0.8);

    /* Borders and shadows */
    --border-color: hsl(31 22% 30% / 0.52);
    --border-subtle: hsl(29 14% 24% / 0.5);
    --border-strong: hsl(29 34% 44% / 0.7);

    --shadow-glow-primary:
        0 0 18px hsl(28 80% 58% / 0.18),
        0 0 40px hsl(18 70% 38% / 0.08);
    --shadow-glow-accent:
        0 0 18px hsl(205 22% 74% / 0.14);
    --shadow-glow-danger:
        0 0 20px hsl(4 58% 44% / 0.18);
    --shadow-glow-gold:
        0 0 18px hsl(36 54% 62% / 0.2);

    /* Icons */
    --icon-color: hsl(31 35% 72%);
    --icon-filter: brightness(0) saturate(100%) invert(84%) sepia(9%)
        saturate(706%) hue-rotate(341deg) brightness(90%) contrast(88%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(28 80% 58% / 0.22);

    --color-tooltip-bg: hsl(22 15% 11% / 0.98);
    --color-tooltip-highlight: hsl(31 72% 66%);
    --color-tooltip-effect-bg: hsl(28 55% 54% / 0.08);
    --color-tooltip-text: hsl(34 20% 82%);
    --color-tooltip-label: hsl(33 30% 76%);
    --color-tooltip-muted: hsl(29 12% 61%);
    --color-tooltip-dim: hsl(28 10% 49%);
    --color-tooltip-pos: hsl(140 28% 60%);
    --color-tooltip-neg: hsl(4 48% 56%);
    --color-tooltip-separator: hsl(29 24% 30% / 0.6);
    --color-tooltip-section-bg: hsl(24 12% 16% / 0.88);

    /* Quality colors */
    --quality-0-color1: rgb(102, 96, 91);
    --quality-0-color2: rgb(58, 54, 50);
    --quality-1-color1: rgb(177, 170, 156);
    --quality-1-color2: rgb(122, 116, 105);
    --quality-2-color1: rgb(90, 133, 112);
    --quality-2-color2: rgb(55, 88, 73);
    --quality-3-color1: rgb(93, 116, 149);
    --quality-3-color2: rgb(53, 72, 100);
    --quality-4-color1: rgb(119, 104, 154);
    --quality-4-color2: rgb(71, 59, 101);
    --quality-5-color1: rgb(202, 137, 73);
    --quality-5-color2: rgb(120, 71, 34);
    --quality-6-color1: rgb(146, 62, 58);
    --quality-6-color2: rgb(90, 34, 31);
    --quality-7-color1: rgb(177, 182, 197);
    --quality-7-color2: rgb(92, 100, 117);

    /* Spell / element system */
    --element-fire-bg: hsl(18 26% 14%);
    --element-fire-border: hsl(18 52% 44% / 0.7);
    --element-fire-hover: hsl(18 30% 18%);
    --element-fire-glow: hsl(18 72% 46% / 0.16);

    --element-water-bg: hsl(210 16% 14%);
    --element-water-border: hsl(204 24% 46% / 0.64);
    --element-water-hover: hsl(210 20% 18%);
    --element-water-glow: hsl(204 42% 54% / 0.13);

    --element-earth-bg: hsl(30 14% 14%);
    --element-earth-border: hsl(34 25% 42% / 0.65);
    --element-earth-hover: hsl(30 16% 18%);
    --element-earth-glow: hsl(34 32% 48% / 0.12);

    --element-wind-bg: hsl(194 12% 15%);
    --element-wind-border: hsl(192 18% 58% / 0.55);
    --element-wind-hover: hsl(194 14% 18%);
    --element-wind-glow: hsl(192 22% 64% / 0.12);

    --element-light-bg: hsl(34 18% 16%);
    --element-light-border: hsl(36 42% 64% / 0.68);
    --element-light-hover: hsl(34 20% 20%);
    --element-light-glow: hsl(36 55% 66% / 0.14);

    --element-shadow-bg: hsl(245 12% 12%);
    --element-shadow-border: hsl(250 16% 42% / 0.6);
    --element-shadow-hover: hsl(245 12% 16%);
    --element-shadow-glow: hsl(250 28% 58% / 0.13);

    --element-death-bg: hsl(6 16% 12%);
    --element-death-border: hsl(4 42% 42% / 0.66);
    --element-death-hover: hsl(6 20% 16%);
    --element-death-glow: hsl(4 52% 48% / 0.14);

    --element-life-bg: hsl(128 12% 15%);
    --element-life-border: hsl(138 24% 48% / 0.64);
    --element-life-hover: hsl(128 14% 18%);
    --element-life-glow: hsl(138 34% 54% / 0.13);

    --element-arcane-bg: hsl(258 14% 14%);
    --element-arcane-border: hsl(258 28% 54% / 0.64);
    --element-arcane-hover: hsl(258 16% 18%);
    --element-arcane-glow: hsl(258 34% 60% / 0.14);

    --element-mind-bg: hsl(214 14% 14%);
    --element-mind-border: hsl(214 22% 52% / 0.6);
    --element-mind-hover: hsl(214 16% 18%);
    --element-mind-glow: hsl(214 30% 58% / 0.13);

    --element-physical-bg: hsl(22 12% 14%);
    --element-physical-border: hsl(28 26% 44% / 0.64);
    --element-physical-hover: hsl(22 14% 18%);
    --element-physical-glow: hsl(28 34% 52% / 0.13);

    --spell-temp-bg: hsl(28 14% 13%);
    --spell-temp-border: hsl(30 34% 40% / 0.8);
    --spell-temp-hover-bg: hsl(28 16% 16%);
    --spell-temp-hover-glow: hsl(30 40% 54% / 0.14);
    --spell-temp-badge-bg: hsl(28 66% 54%);
    --spell-temp-header-bg: hsl(26 12% 16%);
    --spell-temp-header-hover-bg: hsl(26 14% 20%);
    --spell-tile-hover-bg: hsl(27 14% 16%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(24 12% 12%);
    --item-tile-border: hsl(30 18% 30% / 0.64);
    --item-tile-add-bg: hsl(24 10% 11%);
    --item-tile-add-border: hsl(31 16% 26% / 0.7);
    --item-tile-add-hover: hsl(26 12% 16%);
    --item-tile-add-border-hover: hsl(30 28% 42% / 0.85);

    --weight-display-bg: hsl(24 10% 12%);
    --weight-ok-color: hsl(140 24% 58%);
    --weight-warn-color: hsl(31 66% 60%);
    --weight-crit-color: hsl(4 48% 54%);
    --weight-bar-track-bg: hsl(25 10% 19%);

    --currency-tile-bg: hsl(24 12% 12%);
    --currency-tile-border: hsl(30 18% 28% / 0.65);
    --currency-tile-hover-bg: hsl(27 14% 17%);
    --currency-tile-hover-shadow: hsl(30 64% 54% / 0.15);
    --currency-quantity-bg: hsl(28 52% 22%);
    --currency-add-bg: hsl(24 10% 11%);
    --currency-add-border: hsl(31 18% 25% / 0.7);
    --currency-add-hover-bg: hsl(27 14% 16%);
    --currency-add-hover-border: hsl(31 34% 42% / 0.8);

    --color-buff-tile-bg: hsl(24 12% 12%);
    --color-buff-tile-border: hsl(138 18% 34% / 0.62);
    --color-buff-tile-hover: hsl(24 12% 16%);
    --color-buff-tile-glow: hsl(138 30% 54% / 0.12);
    --color-debuff-tile-bg: hsl(24 12% 12%);
    --color-debuff-tile-border: hsl(4 28% 34% / 0.68);
    --color-debuff-tile-hover: hsl(24 12% 16%);
    --color-debuff-tile-glow: hsl(4 40% 52% / 0.13);
    --color-neutral-tile-bg: hsl(24 12% 12%);
    --color-neutral-tile-border: hsl(30 14% 28% / 0.62);
    --color-neutral-tile-hover: hsl(24 12% 16%);
    --color-neutral-tile-glow: hsl(30 20% 46% / 0.1);
    --color-buff-indicator: hsl(138 28% 60%);
    --color-debuff-indicator: hsl(4 42% 56%);

    /* Common status colors */
    --color-heal: hsl(138 30% 58%);
    --color-gold: hsl(31 70% 60%);
}

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

@keyframes emberPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px hsl(30 22% 32% / 0.45),
            0 0 18px hsl(28 82% 56% / 0.08);
    }
    50% {
        box-shadow:
            0 0 0 1px hsl(30 28% 40% / 0.7),
            0 0 24px hsl(28 82% 56% / 0.16),
            0 0 44px hsl(12 60% 34% / 0.08);
    }
}

@keyframes emberText {
    0%, 100% {
        text-shadow: 0 0 0 hsl(28 80% 58% / 0);
    }
    50% {
        text-shadow:
            0 0 10px hsl(28 80% 58% / 0.18),
            0 0 22px hsl(14 52% 40% / 0.1);
    }
}

@keyframes runeShiver {
    0%, 100% {
        opacity: 0.22;
        transform: translateY(0);
    }
    50% {
        opacity: 0.42;
        transform: translateY(-1px);
    }
}

@keyframes ashSweep {
    0% {
        transform: translate3d(-2%, 0, 0);
        opacity: 0.2;
    }
    50% {
        transform: translate3d(2%, -1%, 0);
        opacity: 0.32;
    }
    100% {
        transform: translate3d(-2%, 0, 0);
        opacity: 0.2;
    }
}

@keyframes bonfireBreath {
    0%, 100% {
        box-shadow:
            0 0 12px hsl(28 80% 56% / 0.16),
            0 0 28px hsl(16 70% 38% / 0.06);
    }
    45% {
        box-shadow:
            0 0 22px hsl(28 84% 58% / 0.22),
            0 0 44px hsl(16 74% 38% / 0.1);
    }
}

/* ==========================================================================
   Global background and media
   ========================================================================= */

[data-theme="nightmare"] body {
    background-color: var(--bg-page);
    background-image:
        radial-gradient(circle at 50% 18%, hsl(28 46% 12% / 0.2), transparent 30%),
        radial-gradient(circle at 18% 82%, hsl(208 18% 18% / 0.18), transparent 32%),
        radial-gradient(circle at 82% 12%, hsl(6 24% 13% / 0.1), transparent 28%),
        linear-gradient(180deg, hsl(220 14% 7%) 0%, hsl(24 14% 8%) 40%, hsl(18 16% 7%) 100%);
    background-attachment: fixed;
    background-size: 100%, 100%, 100%, 100%;
}

[data-theme="nightmare"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, hsl(34 12% 80% / 0.015), transparent 30%),
        repeating-linear-gradient(
            135deg,
            transparent 0 18px,
            hsl(36 12% 70% / 0.02) 18px 19px
        );
    pointer-events: none;
    z-index: var(--z-base, 0);
    animation: ashSweep 14s ease-in-out infinite;
}

[data-theme="nightmare"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, transparent 52%, hsl(0 0% 0% / 0.56) 100%),
        linear-gradient(180deg, hsl(0 0% 0% / 0.08), transparent 18%, transparent 82%, hsl(0 0% 0% / 0.14));
    pointer-events: none;
    z-index: var(--z-max, 9999);
}

[data-theme="nightmare"] img {
    filter: saturate(0.78) brightness(0.84) contrast(1.08);
}

[data-theme="nightmare"] .icon-themed,
[data-theme="nightmare"] .icon,
[data-theme="nightmare"] .spell-icon,
[data-theme="nightmare"] .resistance-icon,
[data-theme="nightmare"] .currency-icon,
[data-theme="nightmare"] .buff-icon,
[data-theme="nightmare"] .action-btn,
[data-theme="nightmare"] .newspaper-icon {
    filter: var(--icon-filter);
}

[data-theme="nightmare"] .logo,
[data-theme="nightmare"] img[src*="logo"] {
    filter:
        brightness(0.9)
        saturate(0.85)
        drop-shadow(0 0 12px hsl(28 78% 58% / 0.22))
        drop-shadow(0 0 30px hsl(12 68% 34% / 0.1));
}

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

[data-theme="nightmare"] h1,
[data-theme="nightmare"] h2,
[data-theme="nightmare"] h3 {
    color: hsl(34 28% 86%);
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 hsl(0 0% 0% / 0.8);
    animation: emberText 8s ease-in-out infinite;
}

[data-theme="nightmare"] h4,
[data-theme="nightmare"] h5,
[data-theme="nightmare"] h6 {
    color: hsl(31 26% 76%);
    font-family: var(--font-sans);
    letter-spacing: 0.05em;
}

[data-theme="nightmare"] .character-info h3,
[data-theme="nightmare"] .character-name,
[data-theme="nightmare"] .story-note-title {
    color: hsl(36 28% 88%);
}

[data-theme="nightmare"] .widget-title,
[data-theme="nightmare"] .attribute-name,
[data-theme="nightmare"] .subskill-name,
[data-theme="nightmare"] .discipline-header,
[data-theme="nightmare"] .modal-title {
    font-family: var(--font-sans);
    letter-spacing: 0.06em;
}

/* ==========================================================================
   Core surfaces
   ========================================================================= */

[data-theme="nightmare"] .card,
[data-theme="nightmare"] .card-glass,
[data-theme="nightmare"] .character-card,
[data-theme="nightmare"] .widget-tile,
[data-theme="nightmare"] .attribute-card,
[data-theme="nightmare"] .character-item,
[data-theme="nightmare"] .login-container,
[data-theme="nightmare"] .modal,
[data-theme="nightmare"] .story-note-item,
[data-theme="nightmare"] .spell-tile,
[data-theme="nightmare"] .buff-tile,
[data-theme="nightmare"] .item-tile,
[data-theme="nightmare"] .currency-tile {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, hsl(33 10% 18% / 0.1), transparent 26%),
        linear-gradient(135deg, hsl(24 12% 13% / 0.96), hsl(20 10% 10% / 0.97));
    border: 1px solid var(--border-color);
    box-shadow:
        inset 0 1px 0 hsl(33 16% 50% / 0.08),
        inset 0 -18px 30px hsl(0 0% 0% / 0.16),
        0 14px 28px hsl(0 0% 0% / 0.24);
}

[data-theme="nightmare"] .card::before,
[data-theme="nightmare"] .card-glass::before,
[data-theme="nightmare"] .character-card::before,
[data-theme="nightmare"] .widget-tile::before,
[data-theme="nightmare"] .attribute-card::before,
[data-theme="nightmare"] .character-item::before,
[data-theme="nightmare"] .login-container::before,
[data-theme="nightmare"] .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0 3%, hsl(35 18% 76% / 0.05) 3% 3.5%, transparent 3.5% 96.5%, hsl(35 18% 76% / 0.05) 96.5% 97%, transparent 97% 100%),
        linear-gradient(180deg, transparent 0 4%, hsl(35 18% 76% / 0.04) 4% 4.5%, transparent 4.5% 95.5%, hsl(35 18% 76% / 0.04) 95.5% 96%, transparent 96% 100%);
    pointer-events: none;
}

[data-theme="nightmare"] .card:hover,
[data-theme="nightmare"] .card-glass:hover,
[data-theme="nightmare"] .character-card:hover,
[data-theme="nightmare"] .widget-tile:hover,
[data-theme="nightmare"] .attribute-card:hover,
[data-theme="nightmare"] .character-item:hover,
[data-theme="nightmare"] .story-note-item:hover,
[data-theme="nightmare"] .spell-tile:hover,
[data-theme="nightmare"] .buff-tile:hover,
[data-theme="nightmare"] .item-tile:hover,
[data-theme="nightmare"] .currency-tile:hover {
    border-color: var(--border-strong);
    box-shadow:
        inset 0 1px 0 hsl(34 22% 58% / 0.14),
        inset 0 -18px 30px hsl(0 0% 0% / 0.18),
        0 18px 36px hsl(0 0% 0% / 0.28),
        0 0 24px hsl(28 70% 54% / 0.08);
}

[data-theme="nightmare"] .card-gm,
[data-theme="nightmare"] .modal-gm {
    border-color: hsl(356 36% 40% / 0.82);
    box-shadow:
        inset 0 1px 0 hsl(356 26% 56% / 0.12),
        0 16px 32px hsl(0 0% 0% / 0.26),
        0 0 24px hsl(356 40% 38% / 0.1);
}

/* ==========================================================================
   Buttons, tabs, toggles
   ========================================================================= */

[data-theme="nightmare"] .btn-primary,
[data-theme="nightmare"] .roll-button,
[data-theme="nightmare"] .save-note-btn {
    background:
        linear-gradient(180deg, hsl(30 50% 30%), hsl(24 42% 20%)),
        linear-gradient(135deg, hsl(31 68% 58%), hsl(18 58% 38%));
    color: hsl(38 38% 92%);
    border: 1px solid hsl(31 42% 46% / 0.92);
    box-shadow:
        inset 0 1px 0 hsl(36 40% 74% / 0.22),
        inset 0 -1px 0 hsl(12 42% 18% / 0.3),
        0 10px 20px hsl(0 0% 0% / 0.2),
        0 0 18px hsl(28 74% 54% / 0.12);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

[data-theme="nightmare"] .btn-primary:hover,
[data-theme="nightmare"] .roll-button:hover,
[data-theme="nightmare"] .save-note-btn:hover {
    border-color: hsl(31 58% 58%);
    box-shadow:
        inset 0 1px 0 hsl(36 46% 78% / 0.24),
        0 14px 24px hsl(0 0% 0% / 0.24),
        0 0 24px hsl(28 78% 58% / 0.2);
    transform: translateY(-1px);
}

[data-theme="nightmare"] .btn-secondary,
[data-theme="nightmare"] .btn-ghost,
[data-theme="nightmare"] .tab-btn,
[data-theme="nightmare"] .tab_btn,
[data-theme="nightmare"] .twohanded-toggle {
    background:
        linear-gradient(180deg, hsl(26 10% 18%), hsl(24 10% 12%));
    color: hsl(33 20% 78%);
    border: 1px solid hsl(30 18% 30% / 0.74);
    box-shadow:
        inset 0 1px 0 hsl(34 14% 54% / 0.08),
        0 8px 16px hsl(0 0% 0% / 0.16);
}

[data-theme="nightmare"] .btn-secondary:hover,
[data-theme="nightmare"] .btn-ghost:hover,
[data-theme="nightmare"] .tab-btn:hover,
[data-theme="nightmare"] .tab_btn:hover,
[data-theme="nightmare"] .twohanded-toggle:hover {
    color: hsl(37 28% 86%);
    border-color: hsl(31 30% 42% / 0.86);
    background:
        linear-gradient(180deg, hsl(27 12% 21%), hsl(25 10% 14%));
}

[data-theme="nightmare"] .tab-btn.active,
[data-theme="nightmare"] .tab_btn.active,
[data-theme="nightmare"] .twohanded-toggle.active {
    color: hsl(38 42% 92%);
    border-color: hsl(31 40% 50% / 0.96);
    background:
        linear-gradient(180deg, hsl(28 28% 26%), hsl(22 22% 15%));
    animation: emberPulse 4s ease-in-out infinite;
}

[data-theme="nightmare"] .tab-btn.active .icon,
[data-theme="nightmare"] .tab_btn.active .icon,
[data-theme="nightmare"] .twohanded-toggle.active .twohanded-toggle-icon {
    filter:
        brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(650%)
        hue-rotate(333deg) brightness(102%) contrast(94%);
}

[data-theme="nightmare"] .tab-btn.combat-active {
    border-color: hsl(4 38% 44% / 0.95) !important;
    background:
        linear-gradient(180deg, hsl(4 26% 24%), hsl(0 24% 15%)) !important;
    box-shadow:
        inset 0 1px 0 hsl(2 28% 58% / 0.12),
        0 0 20px hsl(4 48% 44% / 0.16) !important;
}

[data-theme="nightmare"] .btn-danger,
[data-theme="nightmare"] .btn-gm,
[data-theme="nightmare"] .delete-spell-btn,
[data-theme="nightmare"] .remove-buff-btn,
[data-theme="nightmare"] .delete-story-note-btn {
    background: linear-gradient(180deg, hsl(4 30% 22%), hsl(0 24% 14%));
    color: hsl(8 24% 82%);
    border: 1px solid hsl(4 34% 40% / 0.78);
    box-shadow: 0 0 18px hsl(4 48% 44% / 0.08);
}

[data-theme="nightmare"] .btn-danger:hover,
[data-theme="nightmare"] .btn-gm:hover,
[data-theme="nightmare"] .delete-spell-btn:hover,
[data-theme="nightmare"] .remove-buff-btn:hover,
[data-theme="nightmare"] .delete-story-note-btn:hover {
    border-color: hsl(4 42% 52% / 0.94);
    color: hsl(12 28% 88%);
    box-shadow: 0 0 22px hsl(4 48% 44% / 0.16);
}

[data-theme="nightmare"] .edit-story-note-btn {
    background: linear-gradient(180deg, hsl(214 12% 20%), hsl(214 12% 14%));
    color: hsl(205 14% 84%);
    border: 1px solid hsl(205 18% 38% / 0.74);
}

[data-theme="nightmare"] .edit-story-note-btn:hover {
    border-color: hsl(205 24% 48% / 0.9);
    box-shadow: 0 0 18px hsl(205 18% 68% / 0.1);
}

/* ==========================================================================
   Forms and selects
   ========================================================================= */

[data-theme="nightmare"] .input,
[data-theme="nightmare"] .select,
[data-theme="nightmare"] .textarea,
[data-theme="nightmare"] select,
[data-theme="nightmare"] .form-select,
[data-theme="nightmare"] .equipment-select {
    appearance: none;
    -webkit-appearance: none;
    background:
        linear-gradient(180deg, hsl(25 9% 15%), hsl(24 9% 11%));
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: inset 0 1px 0 hsl(34 12% 52% / 0.06);
}

[data-theme="nightmare"] select,
[data-theme="nightmare"] .select,
[data-theme="nightmare"] .form-select,
[data-theme="nightmare"] .equipment-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c4ab8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 14px;
    padding-right: 1.9rem;
}

[data-theme="nightmare"] .input:hover:not(:disabled):not(:focus),
[data-theme="nightmare"] .select:hover:not(:disabled):not(:focus),
[data-theme="nightmare"] .textarea:hover:not(:disabled):not(:focus),
[data-theme="nightmare"] select:hover:not(:disabled),
[data-theme="nightmare"] .form-select:hover:not(:disabled),
[data-theme="nightmare"] .equipment-select:hover:not(:disabled) {
    border-color: hsl(30 24% 38% / 0.82);
}

[data-theme="nightmare"] .input:focus,
[data-theme="nightmare"] .select:focus,
[data-theme="nightmare"] .textarea:focus,
[data-theme="nightmare"] select:focus,
[data-theme="nightmare"] .form-select:focus,
[data-theme="nightmare"] .equipment-select:focus {
    border-color: hsl(31 44% 52% / 0.96);
    box-shadow:
        0 0 0 3px var(--color-focus-ring),
        0 0 18px hsl(28 72% 54% / 0.08);
    outline: none;
}

[data-theme="nightmare"] .input-error {
    border-color: hsl(4 42% 48% / 0.92);
}

[data-theme="nightmare"] .input-success {
    border-color: hsl(138 24% 44% / 0.9);
}

[data-theme="nightmare"] .checkbox:checked,
[data-theme="nightmare"] .radio:checked,
[data-theme="nightmare"] .toggle:checked {
    background: linear-gradient(180deg, hsl(31 62% 54%), hsl(21 52% 40%));
    border-color: hsl(30 36% 48%);
    box-shadow: 0 0 14px hsl(28 72% 54% / 0.12);
}

[data-theme="nightmare"] .toggle:checked::after {
    background: hsl(24 12% 11%);
}

[data-theme="nightmare"] .range {
    background: linear-gradient(90deg, hsl(30 16% 18%), hsl(30 14% 24%));
}

[data-theme="nightmare"] .range::-webkit-slider-thumb,
[data-theme="nightmare"] .range::-moz-range-thumb {
    background: linear-gradient(180deg, hsl(31 68% 58%), hsl(18 58% 38%));
    box-shadow: 0 0 12px hsl(28 72% 54% / 0.16);
}

[data-theme="nightmare"] select option {
    background-color: hsl(24 10% 11%);
    color: var(--text-primary);
}

/* ==========================================================================
   Modal and tooltip
   ========================================================================= */

[data-theme="nightmare"] .modal {
    background:
        radial-gradient(circle at top, hsl(30 34% 18% / 0.18), transparent 24%),
        linear-gradient(135deg, hsl(25 13% 14% / 0.98), hsl(18 11% 11% / 0.98));
    border-color: hsl(30 22% 36% / 0.78);
    box-shadow:
        0 22px 48px hsl(0 0% 0% / 0.42),
        0 0 26px hsl(28 70% 54% / 0.08);
}

[data-theme="nightmare"] .modal-header,
[data-theme="nightmare"] .modal-footer {
    background: linear-gradient(180deg, hsl(28 12% 18% / 0.66), hsl(24 10% 13% / 0.32));
    border-color: var(--border-color);
}

[data-theme="nightmare"] .modal-close {
    color: var(--text-secondary);
}

[data-theme="nightmare"] .modal-close:hover {
    color: var(--text-light);
    background: hsl(28 24% 22% / 0.46);
}

[data-theme="nightmare"] .modal-danger {
    border-color: hsl(4 36% 42% / 0.86);
}

[data-theme="nightmare"] .tooltip,
[data-theme="nightmare"] .unified-tooltip,
[data-theme="nightmare"] .basic-tooltip,
[data-theme="nightmare"] .itooltip,
[data-theme="nightmare"] .skilltooltip,
[data-theme="nightmare"] .attrtooltip,
[data-theme="nightmare"] .stattooltip,
[data-theme="nightmare"] #item-tooltip,
[data-theme="nightmare"] .buff-tooltip,
[data-theme="nightmare"] .twohanded-tooltip {
    background:
        linear-gradient(180deg, hsl(34 14% 18% / 0.16), transparent 24%),
        linear-gradient(135deg, var(--color-tooltip-bg), hsl(24 11% 13% / 0.98));
    color: var(--color-tooltip-text);
    border: 1px solid var(--color-tooltip-separator);
    box-shadow:
        0 16px 38px hsl(0 0% 0% / 0.36),
        0 0 20px hsl(28 72% 54% / 0.06);
}

[data-theme="nightmare"] .tooltip h3,
[data-theme="nightmare"] .buff-tooltip h3 {
    color: var(--color-tooltip-highlight);
}

/* ==========================================================================
   Tables, navigation, generic layout
   ========================================================================= */

[data-theme="nightmare"] table,
[data-theme="nightmare"] .equipment-table {
    width: 100%;
    border-collapse: collapse;
    background: linear-gradient(180deg, hsl(24 10% 12%), hsl(20 10% 10%));
    border: 1px solid var(--border-color);
}

[data-theme="nightmare"] th,
[data-theme="nightmare"] .equipment-table th {
    background: linear-gradient(180deg, hsl(28 18% 20%), hsl(24 16% 15%));
    color: hsl(35 26% 82%);
    border-bottom: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

[data-theme="nightmare"] td,
[data-theme="nightmare"] .equipment-table td {
    border-bottom: 1px solid hsl(30 12% 22% / 0.5);
}

[data-theme="nightmare"] tr:hover td,
[data-theme="nightmare"] .equipment-table tr:hover td {
    background: hsl(28 16% 18% / 0.5);
}

[data-theme="nightmare"] .navigation-bar {
    background:
        linear-gradient(180deg, hsl(24 10% 13% / 0.98), hsl(22 10% 10% / 0.98));
    border-bottom: 1px solid var(--border-color);
    box-shadow:
        inset 0 -1px 0 hsl(34 18% 48% / 0.06),
        0 12px 28px hsl(0 0% 0% / 0.24);
}

[data-theme="nightmare"] .navigation-bar .icon {
    filter: var(--icon-filter);
}

[data-theme="nightmare"] .attribute-cards-container {
    background: linear-gradient(180deg, hsl(25 10% 12% / 0.48), hsl(24 8% 8% / 0.16));
}

[data-theme="nightmare"] .attribute-subskills {
    background: linear-gradient(180deg, hsl(25 10% 12% / 0.88), hsl(22 10% 10% / 0.92));
    border: 1px solid var(--border-subtle);
}

[data-theme="nightmare"] .subskill-item {
    border-bottom: 1px solid hsl(29 12% 22% / 0.52);
}

[data-theme="nightmare"] .subskill-name {
    color: hsl(205 14% 78%);
}

[data-theme="nightmare"] .subskill-effect,
[data-theme="nightmare"] .story-description,
[data-theme="nightmare"] .story-description-only {
    color: var(--text-secondary);
}

[data-theme="nightmare"] .attribute-icon-container {
    background:
        radial-gradient(circle at 50% 32%, hsl(31 42% 46% / 0.18), transparent 54%),
        linear-gradient(180deg, hsl(24 10% 18%), hsl(20 10% 12%));
    color: hsl(32 34% 74%);
    box-shadow:
        inset 0 0 0 1px hsl(32 24% 38% / 0.52),
        0 0 16px hsl(28 70% 54% / 0.06);
}

[data-theme="nightmare"] .attribute-value,
[data-theme="nightmare"] .info-value,
[data-theme="nightmare"] .roll-result {
    color: hsl(34 30% 88%) !important;
}

[data-theme="nightmare"] .attribute-bonus {
    background: hsl(138 20% 24%);
    color: hsl(138 28% 74%);
}

[data-theme="nightmare"] .attribute-card.physical {
    border-left: 3px solid hsl(4 34% 42%);
}

[data-theme="nightmare"] .attribute-card.mental {
    border-left: 3px solid hsl(220 18% 48%);
}

[data-theme="nightmare"] .attribute-card.social {
    border-left: 3px solid hsl(30 34% 46%);
}

[data-theme="nightmare"] .attribute-card.special {
    border-left: 3px solid hsl(255 18% 54%);
}

[data-theme="nightmare"] .roll-result:not(:empty) {
    background:
        radial-gradient(circle at 50% 40%, hsl(28 72% 54% / 0.12), transparent 58%),
        linear-gradient(180deg, hsl(24 10% 16%), hsl(20 10% 11%));
    border: 1px solid hsl(31 30% 38% / 0.72);
    animation: bonfireBreath 3.4s ease-in-out infinite;
}

/* ==========================================================================
   Character cards and login
   ========================================================================= */

[data-theme="nightmare"] .character-card-avatar,
[data-theme="nightmare"] .portrait {
    border: 1px solid hsl(32 18% 34% / 0.78);
    box-shadow:
        inset 0 0 0 1px hsl(34 18% 66% / 0.06),
        0 10px 24px hsl(0 0% 0% / 0.28);
    filter: saturate(0.72) brightness(0.8) contrast(1.06);
}

[data-theme="nightmare"] .character-card:hover .character-card-avatar,
[data-theme="nightmare"] .character-card:hover .portrait {
    border-color: hsl(32 28% 44% / 0.9);
    box-shadow:
        inset 0 0 0 1px hsl(34 28% 72% / 0.08),
        0 12px 28px hsl(0 0% 0% / 0.32),
        0 0 20px hsl(28 70% 54% / 0.08);
}

[data-theme="nightmare"] .character-item::before,
[data-theme="nightmare"] .character-card::after,
[data-theme="nightmare"] .attribute-card::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 0.75rem;
    width: 18px;
    height: 18px;
    background:
        linear-gradient(45deg, transparent 42%, hsl(34 18% 76% / 0.22) 48%, transparent 54%),
        linear-gradient(-45deg, transparent 42%, hsl(34 18% 76% / 0.22) 48%, transparent 54%);
    opacity: 0.26;
    pointer-events: none;
    animation: runeShiver 9s ease-in-out infinite;
}

[data-theme="nightmare"] .login-container {
    background:
        radial-gradient(circle at 50% 0, hsl(28 56% 18% / 0.14), transparent 24%),
        linear-gradient(135deg, hsl(24 12% 13% / 0.98), hsl(18 10% 10% / 0.98));
}

/* ==========================================================================
   Widgets and stats
   ========================================================================= */

[data-theme="nightmare"] .widget-tile[data-widget-type="attack"] {
    border-color: hsl(4 34% 40% / 0.8);
    background:
        linear-gradient(180deg, hsl(4 20% 18% / 0.34), transparent 35%),
        linear-gradient(135deg, hsl(22 12% 12% / 0.96), hsl(8 12% 11% / 0.98));
}

[data-theme="nightmare"] .widget-tile[data-widget-type="skill"] {
    border-color: hsl(214 18% 40% / 0.78);
    background:
        linear-gradient(180deg, hsl(214 20% 20% / 0.22), transparent 35%),
        linear-gradient(135deg, hsl(24 12% 12% / 0.96), hsl(214 10% 11% / 0.98));
}

[data-theme="nightmare"] .widget-tile[data-widget-type="activity"] {
    border-color: hsl(30 28% 42% / 0.82);
    background:
        linear-gradient(180deg, hsl(30 34% 22% / 0.22), transparent 35%),
        linear-gradient(135deg, hsl(24 12% 12% / 0.96), hsl(22 10% 11% / 0.98));
}

[data-theme="nightmare"] .stat-item {
    background: linear-gradient(180deg, hsl(24 10% 14%), hsl(20 10% 10%)) !important;
    border: 1px solid var(--border-subtle);
}

[data-theme="nightmare"] .stat-item:hover {
    background: linear-gradient(180deg, hsl(27 12% 18%), hsl(22 10% 12%)) !important;
}

[data-theme="nightmare"] .talent-item {
    background-color: hsl(24 10% 13%) !important;
    border-left-color: hsl(30 28% 42%) !important;
}

[data-theme="nightmare"] .talent-item > div:last-child {
    background-color: hsl(26 10% 20%) !important;
}

[data-theme="nightmare"] .talent-item > div:last-child > div {
    background: linear-gradient(90deg, hsl(30 54% 54%), hsl(18 54% 40%)) !important;
}

/* ==========================================================================
   Inventory, currency, weight
   ========================================================================= */

[data-theme="nightmare"] .item-tile {
    background: linear-gradient(180deg, hsl(24 11% 14%), hsl(20 10% 11%));
    color: var(--text-primary);
}

[data-theme="nightmare"] .item-tile.quality-0,
[data-theme="nightmare"] .quality-0 {
    border-color: hsl(28 10% 26% / 0.72);
}

[data-theme="nightmare"] .quality-1 {
    border-color: hsl(35 12% 42% / 0.74);
}

[data-theme="nightmare"] .quality-2 {
    border-color: hsl(138 18% 36% / 0.76);
}

[data-theme="nightmare"] .quality-3 {
    border-color: hsl(214 22% 40% / 0.78);
}

[data-theme="nightmare"] .quality-4 {
    border-color: hsl(258 20% 42% / 0.8);
}

[data-theme="nightmare"] .quality-5 {
    border-color: hsl(30 40% 46% / 0.84);
    box-shadow: 0 0 18px hsl(28 72% 54% / 0.08);
}

[data-theme="nightmare"] .quality-6 {
    border-color: hsl(4 34% 40% / 0.82);
}

[data-theme="nightmare"] .quality-7 {
    border-color: hsl(205 18% 48% / 0.82);
    box-shadow: 0 0 18px hsl(205 18% 72% / 0.08);
}

[data-theme="nightmare"] .icon-quality-0,
[data-theme="nightmare"] .icon-quality-1,
[data-theme="nightmare"] .icon-quality-2,
[data-theme="nightmare"] .icon-quality-3,
[data-theme="nightmare"] .icon-quality-4,
[data-theme="nightmare"] .icon-quality-5,
[data-theme="nightmare"] .icon-quality-6,
[data-theme="nightmare"] .icon-quality-7,
[data-theme="nightmare"] .equipped-indicator-icon {
    background-color: hsl(31 32% 50%);
}

[data-theme="nightmare"] .item-name,
[data-theme="nightmare"] .currency-name,
[data-theme="nightmare"] .spell-name,
[data-theme="nightmare"] .buff-name {
    color: hsl(35 20% 84%);
}

[data-theme="nightmare"] .item-quantity,
[data-theme="nightmare"] .currency-quantity,
[data-theme="nightmare"] .spell-cost,
[data-theme="nightmare"] .buff-duration {
    background: linear-gradient(180deg, hsl(30 28% 24%), hsl(24 24% 18%));
    color: hsl(38 26% 88%);
    border: 1px solid hsl(30 28% 36% / 0.78);
    box-shadow: inset 0 1px 0 hsl(35 18% 70% / 0.08);
}

[data-theme="nightmare"] .action-buttons {
    background: hsl(24 10% 12% / 0.96);
    border: 1px solid var(--border-color);
    box-shadow: 0 14px 26px hsl(0 0% 0% / 0.24);
}

[data-theme="nightmare"] .weight-progress-container {
    background: hsl(25 10% 18%);
    border: 1px solid hsl(30 16% 28% / 0.74);
}

[data-theme="nightmare"] .weight-progress-bar.weight-ok {
    background: linear-gradient(90deg, hsl(138 24% 44%), hsl(138 28% 58%)) !important;
}

[data-theme="nightmare"] .weight-progress-bar.weight-warn {
    background: linear-gradient(90deg, hsl(30 48% 42%), hsl(31 68% 58%)) !important;
}

[data-theme="nightmare"] .weight-progress-bar.weight-crit {
    background: linear-gradient(90deg, hsl(4 34% 38%), hsl(4 48% 52%)) !important;
}

[data-theme="nightmare"] .weight-value.weight-ok {
    color: var(--weight-ok-color);
}

[data-theme="nightmare"] .weight-value.weight-warn {
    color: var(--weight-warn-color);
}

[data-theme="nightmare"] .weight-value.weight-crit {
    color: var(--weight-crit-color);
}

/* ==========================================================================
   Spells and buffs
   ========================================================================= */

[data-theme="nightmare"] .spell-tile {
    background: linear-gradient(180deg, hsl(24 11% 14%), hsl(20 10% 11%));
}

[data-theme="nightmare"] .spell-tile.temp-spell {
    border-color: var(--spell-temp-border) !important;
    background:
        linear-gradient(180deg, hsl(30 18% 18% / 0.22), transparent 38%),
        linear-gradient(180deg, var(--spell-temp-bg), hsl(20 10% 11%)) !important;
}

[data-theme="nightmare"] .spell-tile.temp-spell:hover {
    background:
        linear-gradient(180deg, hsl(30 20% 22% / 0.24), transparent 38%),
        linear-gradient(180deg, var(--spell-temp-hover-bg), hsl(20 10% 12%)) !important;
}

[data-theme="nightmare"] .discipline-header {
    background: linear-gradient(180deg, hsl(26 12% 18%), hsl(24 10% 13%));
    color: hsl(35 22% 82%);
    border: 1px solid var(--border-color);
}

[data-theme="nightmare"] .discipline-header:hover {
    border-color: var(--border-strong);
}

[data-theme="nightmare"] .temp-badge {
    background: linear-gradient(180deg, hsl(31 58% 56%), hsl(22 52% 42%));
    color: hsl(38 30% 92%);
    box-shadow: 0 0 16px hsl(28 72% 54% / 0.14);
}

[data-theme="nightmare"] .spell-progress,
[data-theme="nightmare"] .buff-description {
    color: var(--text-secondary);
}

[data-theme="nightmare"] .buff-tile {
    color: var(--text-primary);
}

[data-theme="nightmare"] .buff-tile.buff,
[data-theme="nightmare"] .buff-tile[data-type="buff"] {
    border-color: var(--color-buff-tile-border);
}

[data-theme="nightmare"] .buff-tile.debuff,
[data-theme="nightmare"] .buff-tile[data-type="debuff"] {
    border-color: var(--color-debuff-tile-border);
}

/* ==========================================================================
   Story notes and notes button
   ========================================================================= */

[data-theme="nightmare"] #sn-tab-btn-notes,
[data-theme="nightmare"] #sn-tab-btn-npcs {
    color: hsl(34 20% 80%) !important;
    border-bottom-color: transparent !important;
}

[data-theme="nightmare"] .story-note-icon {
    filter: var(--icon-filter);
    border-color: var(--border-color);
}

[data-theme="nightmare"] .story-image {
    filter: saturate(0.72) brightness(0.82) contrast(1.05);
    border-color: var(--border-color);
}

[data-theme="nightmare"] .save-note-btn img {
    filter: var(--icon-filter);
}

/* ==========================================================================
   Utility effects
   ========================================================================= */

[data-theme="nightmare"] .glow-primary,
[data-theme="nightmare"] .bonfire-glow {
    animation: bonfireBreath 3s ease-in-out infinite;
}

[data-theme="nightmare"] .glow-accent,
[data-theme="nightmare"] .dark-aura {
    box-shadow: 0 0 20px hsl(205 18% 72% / 0.12);
}

[data-theme="nightmare"] .glow-danger,
[data-theme="nightmare"] .glow-gm {
    box-shadow: 0 0 20px hsl(4 48% 44% / 0.14);
}

[data-theme="nightmare"] ::selection,
[data-theme="nightmare"] ::-moz-selection {
    background: hsl(28 62% 46% / 0.24);
    color: hsl(38 28% 92%);
}

[data-theme="nightmare"] ::-webkit-scrollbar-track {
    background: hsl(24 10% 10%);
}

[data-theme="nightmare"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, hsl(30 20% 26%), hsl(24 16% 18%));
    border: 1px solid hsl(30 18% 34% / 0.72);
}

[data-theme="nightmare"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, hsl(31 24% 32%), hsl(24 18% 20%));
}

[data-theme="nightmare"] canvas {
    filter: saturate(0.8) brightness(0.78) contrast(1.08);
}
[data-theme="nightmare"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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