/* ==========================================================================
   RUNIC THEME: Abyssal Reforged
   Pressure-black trenches, ghost corals, cold brine, and bioluminescent dread.
   ========================================================================= */

[data-theme="abyssal"] {
    /* Core hue system */
    --hue-primary: 196;
    --hue-accent: 176;
    --hue-gm: 278;
    --hue-danger: 350;
    --hue-warning: 42;
    --hue-success: 162;
    --hue-toxicity: 118;
    --hue-neutral: 214;

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

    --sat-accent: 84%;
    --lit-accent: 58%;
    --lit-accent-hover: 64%;

    --sat-gm: 36%;
    --lit-gm: 56%;
    --lit-gm-text: 94%;

    --sat-danger: 64%;
    --lit-danger: 46%;
    --lit-danger-hover: 52%;

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

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

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

    --lightness-bg: 4%;

    /* Form and timing */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 30px;

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

    --duration-75: 110ms;
    --duration-150: 190ms;
    --duration-250: 320ms;
    --duration-300: 420ms;
    --duration-400: 780ms;

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

    /* Identity */
    --trench-black: hsl(220 38% 4%);
    --pressure-void: hsl(214 34% 7%);
    --brine-deep: hsl(206 40% 12%);
    --brine-mid: hsl(198 44% 18%);
    --cold-slate: hsl(210 20% 24%);
    --reef-shadow: hsl(256 18% 20%);
    --ghost-coral: hsl(278 24% 64%);
    --abyss-teal: hsl(184 82% 52%);
    --glow-mint: hsl(168 86% 64%);
    --phosphor-blue: hsl(194 88% 66%);
    --foam-pale: hsl(184 34% 84%);
    --bone-sand: hsl(44 32% 74%);
    --blood-kelp: hsl(350 54% 42%);

    /* Surfaces */
    --bg-page: hsl(220 34% 5%);
    --bg-primary: hsl(214 34% 8%);
    --bg-secondary: hsl(210 30% 10% / 0.92);
    --bg-tertiary: hsl(208 28% 14% / 0.96);
    --bg-card: hsl(210 26% 12% / 0.94);
    --bg-hover: hsl(196 34% 20% / 0.56);
    --bg-input: hsl(212 30% 10%);

    --surface-elevated: hsl(208 28% 16%);
    --surface-overlay: hsl(212 30% 12% / 0.98);
    --surface-panel: hsl(210 28% 14% / 0.96);

    /* Text */
    --text-primary: hsl(184 28% 86%);
    --text-secondary: hsl(192 20% 72%);
    --text-label: hsl(178 72% 66%);
    --text-light: hsl(182 48% 96%);
    --text-muted: hsl(204 14% 58% / 0.82);

    /* Borders and shadows */
    --border-color: hsl(188 44% 44% / 0.34);
    --border-subtle: hsl(204 18% 44% / 0.24);
    --border-strong: hsl(178 72% 58% / 0.68);

    --shadow-glow-primary:
        0 14px 34px hsl(212 48% 6% / 0.46),
        0 0 30px hsl(194 84% 58% / 0.12);
    --shadow-glow-accent:
        0 12px 28px hsl(176 86% 60% / 0.22);
    --shadow-glow-danger:
        0 10px 24px hsl(350 54% 42% / 0.18);
    --shadow-glow-gold:
        0 0 22px hsl(42 68% 62% / 0.16);

    /* Icons */
    --icon-color: hsl(178 78% 66%);
    --icon-filter: brightness(0) saturate(100%) invert(84%) sepia(28%)
        saturate(1144%) hue-rotate(124deg) brightness(96%) contrast(93%);

    /* Focus and tooltip */
    --color-focus-ring: hsl(178 84% 60% / 0.28);

    --color-tooltip-bg: hsl(214 34% 10% / 0.98);
    --color-tooltip-highlight: hsl(178 84% 66%);
    --color-tooltip-effect-bg: hsl(184 82% 52% / 0.12);
    --color-tooltip-text: hsl(184 24% 86%);
    --color-tooltip-label: hsl(182 34% 72%);
    --color-tooltip-muted: hsl(204 14% 60%);
    --color-tooltip-dim: hsl(206 10% 48%);
    --color-tooltip-pos: hsl(162 52% 56%);
    --color-tooltip-neg: hsl(350 58% 58%);
    --color-tooltip-separator: hsl(188 42% 48% / 0.38);
    --color-tooltip-section-bg: hsl(210 28% 16% / 0.88);

    /* Quality colors */
    --quality-0-color1: rgb(96, 104, 118);
    --quality-0-color2: rgb(60, 66, 78);
    --quality-1-color1: rgb(188, 202, 210);
    --quality-1-color2: rgb(128, 142, 150);
    --quality-2-color1: rgb(108, 226, 198);
    --quality-2-color2: rgb(58, 172, 148);
    --quality-3-color1: rgb(96, 196, 240);
    --quality-3-color2: rgb(52, 146, 194);
    --quality-4-color1: rgb(170, 142, 220);
    --quality-4-color2: rgb(118, 92, 172);
    --quality-5-color1: rgb(224, 206, 118);
    --quality-5-color2: rgb(176, 146, 68);
    --quality-6-color1: rgb(206, 92, 112);
    --quality-6-color2: rgb(152, 50, 70);
    --quality-7-color1: rgb(166, 248, 236);
    --quality-7-color2: rgb(120, 214, 255);

    /* Spell / element system */
    --element-fire-bg: hsl(350 22% 18% / 0.82);
    --element-fire-border: hsl(354 44% 52% / 0.58);
    --element-fire-hover: hsl(350 26% 22% / 0.92);
    --element-fire-glow: hsl(354 54% 56% / 0.16);

    --element-water-bg: hsl(196 30% 18% / 0.84);
    --element-water-border: hsl(194 52% 58% / 0.62);
    --element-water-hover: hsl(196 36% 24% / 0.94);
    --element-water-glow: hsl(194 72% 64% / 0.22);

    --element-earth-bg: hsl(42 18% 18% / 0.82);
    --element-earth-border: hsl(42 28% 46% / 0.56);
    --element-earth-hover: hsl(42 22% 22% / 0.92);
    --element-earth-glow: hsl(42 36% 56% / 0.14);

    --element-wind-bg: hsl(186 18% 20% / 0.8);
    --element-wind-border: hsl(184 32% 52% / 0.54);
    --element-wind-hover: hsl(186 24% 24% / 0.9);
    --element-wind-glow: hsl(184 42% 58% / 0.16);

    --element-light-bg: hsl(50 24% 20% / 0.8);
    --element-light-border: hsl(48 50% 58% / 0.6);
    --element-light-hover: hsl(50 28% 24% / 0.92);
    --element-light-glow: hsl(48 62% 64% / 0.18);

    --element-shadow-bg: hsl(262 22% 18% / 0.82);
    --element-shadow-border: hsl(268 34% 52% / 0.56);
    --element-shadow-hover: hsl(262 26% 22% / 0.92);
    --element-shadow-glow: hsl(268 40% 60% / 0.16);

    --element-death-bg: hsl(330 18% 18% / 0.82);
    --element-death-border: hsl(334 34% 50% / 0.56);
    --element-death-hover: hsl(330 22% 22% / 0.92);
    --element-death-glow: hsl(334 40% 58% / 0.16);

    --element-life-bg: hsl(156 18% 18% / 0.82);
    --element-life-border: hsl(162 34% 52% / 0.56);
    --element-life-hover: hsl(156 22% 22% / 0.92);
    --element-life-glow: hsl(162 40% 60% / 0.18);

    --element-arcane-bg: hsl(276 20% 18% / 0.84);
    --element-arcane-border: hsl(278 38% 56% / 0.58);
    --element-arcane-hover: hsl(276 24% 24% / 0.94);
    --element-arcane-glow: hsl(278 42% 62% / 0.18);

    --element-mind-bg: hsl(220 20% 18% / 0.82);
    --element-mind-border: hsl(220 34% 56% / 0.56);
    --element-mind-hover: hsl(220 24% 24% / 0.92);
    --element-mind-glow: hsl(220 40% 62% / 0.16);

    --element-physical-bg: hsl(206 14% 18% / 0.84);
    --element-physical-border: hsl(206 22% 46% / 0.5);
    --element-physical-hover: hsl(206 18% 24% / 0.94);
    --element-physical-glow: hsl(206 28% 56% / 0.14);

    --spell-temp-bg: hsl(214 28% 16%);
    --spell-temp-border: hsl(184 42% 54% / 0.78);
    --spell-temp-hover-bg: hsl(210 34% 20%);
    --spell-temp-hover-glow: hsl(184 72% 60% / 0.18);
    --spell-temp-badge-bg: hsl(184 82% 44%);
    --spell-temp-header-bg: hsl(210 26% 18%);
    --spell-temp-header-hover-bg: hsl(206 28% 22%);
    --spell-tile-hover-bg: hsl(206 28% 22%);

    /* Inventory / currency / buffs */
    --item-tile-base: hsl(210 22% 16%);
    --item-tile-border: hsl(188 26% 46% / 0.58);
    --item-tile-add-bg: hsl(210 20% 14%);
    --item-tile-add-border: hsl(206 18% 44% / 0.54);
    --item-tile-add-hover: hsl(204 26% 20%);
    --item-tile-add-border-hover: hsl(178 52% 56% / 0.78);

    --weight-display-bg: hsl(210 20% 14%);
    --weight-ok-color: hsl(162 48% 54%);
    --weight-warn-color: hsl(42 68% 58%);
    --weight-crit-color: hsl(350 58% 56%);
    --weight-bar-track-bg: hsl(208 14% 22%);

    --currency-tile-bg: hsl(210 22% 16%);
    --currency-tile-border: hsl(188 24% 44% / 0.6);
    --currency-tile-hover-bg: hsl(204 28% 20%);
    --currency-tile-hover-shadow: hsl(184 70% 60% / 0.16);
    --currency-quantity-bg: hsl(206 28% 22%);
    --currency-add-bg: hsl(210 20% 14%);
    --currency-add-border: hsl(206 18% 44% / 0.54);
    --currency-add-hover-bg: hsl(204 26% 20%);
    --currency-add-hover-border: hsl(178 52% 56% / 0.78);

    --color-buff-tile-bg: hsl(160 18% 18%);
    --color-buff-tile-border: hsl(162 32% 50% / 0.54);
    --color-buff-tile-hover: hsl(162 22% 22%);
    --color-buff-tile-glow: hsl(162 42% 58% / 0.14);
    --color-debuff-tile-bg: hsl(350 16% 18%);
    --color-debuff-tile-border: hsl(350 34% 50% / 0.56);
    --color-debuff-tile-hover: hsl(350 22% 22%);
    --color-debuff-tile-glow: hsl(350 40% 56% / 0.14);
    --color-neutral-tile-bg: hsl(208 16% 18%);
    --color-neutral-tile-border: hsl(206 22% 44% / 0.5);
    --color-neutral-tile-hover: hsl(206 20% 22%);
    --color-neutral-tile-glow: hsl(184 34% 56% / 0.12);
    --color-buff-indicator: hsl(162 48% 54%);
    --color-debuff-indicator: hsl(350 58% 56%);

    /* Common status colors */
    --color-heal: hsl(162 48% 54%);
    --color-gold: hsl(42 62% 60%);
    --color-amber: hsl(36 72% 58%);
    --color-amber-ui: hsl(36 72% 58%);
    --color-crit: hsl(350 58% 56%);
    --border-gold: hsl(42 52% 58% / 0.44);

    /* Overlays */
    --overlay-heavy: hsl(220 34% 4% / 0.82);
    --overlay-dark: hsl(216 24% 8% / 0.58);
    --overlay-medium: hsl(212 20% 10% / 0.32);
    --overlay-light: hsl(208 18% 12% / 0.14);
    --overlay-subtle: hsl(206 16% 12% / 0.08);
}

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

@keyframes abyssGlow {
    0%, 100% {
        box-shadow:
            0 0 0 1px hsl(188 32% 42% / 0.18),
            0 10px 24px hsl(220 46% 4% / 0.42);
    }
    50% {
        box-shadow:
            0 0 0 1px hsl(178 72% 56% / 0.34),
            0 18px 34px hsl(220 48% 4% / 0.5),
            0 0 26px hsl(184 82% 52% / 0.14);
    }
}

@keyframes trenchDrift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes brineSweep {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 160px 80px, -180px 120px, 120px -100px; }
}

/* ==========================================================================
   Global Atmosphere
   ========================================================================= */

[data-theme="abyssal"] body,
[data-theme="abyssal"] .page-content,
[data-theme="abyssal"] .main-content,
[data-theme="abyssal"] .content-wrapper {
    background:
        radial-gradient(circle at top, hsl(194 70% 16% / 0.22), transparent 24%),
        radial-gradient(circle at 18% 22%, hsl(278 38% 22% / 0.18), transparent 22%),
        radial-gradient(circle at 80% 12%, hsl(176 76% 18% / 0.14), transparent 18%),
        linear-gradient(180deg, hsl(214 40% 8%), hsl(220 34% 5%) 38%, hsl(222 38% 4%) 100%);
    color: var(--text-primary);
}

[data-theme="abyssal"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 28%, hsl(178 82% 60% / 0.1) 0 1px, transparent 2px),
        radial-gradient(circle at 78% 18%, hsl(194 88% 66% / 0.08) 0 1px, transparent 2px),
        radial-gradient(circle at 64% 72%, hsl(278 28% 66% / 0.06) 0 1.5px, transparent 3px);
    background-size: 220px 220px, 280px 280px, 340px 340px;
    animation: brineSweep 36s linear infinite;
    opacity: 0.6;
    z-index: 0;
}

[data-theme="abyssal"] .navigation-bar,
[data-theme="abyssal"] .content-box,
[data-theme="abyssal"] .dashboard-panel,
[data-theme="abyssal"] .modal-content,
[data-theme="abyssal"] .character-sheet-panel,
[data-theme="abyssal"] .inventory-section {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   Shared Panels
   ========================================================================= */

[data-theme="abyssal"] .content-box,
[data-theme="abyssal"] .dashboard-panel,
[data-theme="abyssal"] .modal-content,
[data-theme="abyssal"] .equipment-panel,
[data-theme="abyssal"] .inventory-section,
[data-theme="abyssal"] .spell-tooltip,
[data-theme="abyssal"] .login-container,
[data-theme="abyssal"] .widget-tile,
[data-theme="abyssal"] .character-item,
[data-theme="abyssal"] .attribute-card,
[data-theme="abyssal"] .bereich-tile,
[data-theme="abyssal"] .spell-tile,
[data-theme="abyssal"] .resistance-tile {
    background:
        linear-gradient(180deg, hsl(210 28% 16% / 0.96), hsl(214 30% 10% / 0.96));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow:
        0 16px 34px hsl(220 46% 4% / 0.44),
        inset 0 1px 0 hsl(184 24% 84% / 0.06);
}

[data-theme="abyssal"] .content-box::before,
[data-theme="abyssal"] .dashboard-panel::before,
[data-theme="abyssal"] .modal-content::before,
[data-theme="abyssal"] .widget-tile::before,
[data-theme="abyssal"] .character-item::before,
[data-theme="abyssal"] .attribute-card::before,
[data-theme="abyssal"] .login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, hsl(184 40% 72% / 0.05), transparent 22%),
        radial-gradient(circle at top right, hsl(184 82% 52% / 0.08), transparent 26%);
}

[data-theme="abyssal"] .content-box:hover,
[data-theme="abyssal"] .dashboard-panel:hover,
[data-theme="abyssal"] .widget-tile:hover,
[data-theme="abyssal"] .character-item:hover,
[data-theme="abyssal"] .attribute-card:hover,
[data-theme="abyssal"] .bereich-tile:hover,
[data-theme="abyssal"] .spell-tile:hover {
    border-color: var(--border-strong);
    animation: abyssGlow 3.4s ease-in-out infinite;
}

/* ==========================================================================
   Typography and Icons
   ========================================================================= */

[data-theme="abyssal"] h1,
[data-theme="abyssal"] h2,
[data-theme="abyssal"] h3,
[data-theme="abyssal"] .widget-title,
[data-theme="abyssal"] .character-info h3,
[data-theme="abyssal"] .bereich-title,
[data-theme="abyssal"] .attribute-name {
    color: hsl(180 52% 82%);
    text-shadow: 0 0 14px hsl(184 82% 52% / 0.14);
}

[data-theme="abyssal"] .icon-themed,
[data-theme="abyssal"] .spell-icon,
[data-theme="abyssal"] .resistance-icon,
[data-theme="abyssal"] .currency-icon,
[data-theme="abyssal"] .buff-icon,
[data-theme="abyssal"] .tab_Icon,
[data-theme="abyssal"] .tab_btn img,
[data-theme="abyssal"] .nav-icon-btn img,
[data-theme="abyssal"] #div_iconbar_left img,
[data-theme="abyssal"] #div_iconbar_right img {
    filter: var(--icon-filter);
}

/* ==========================================================================
   Category Headers
   ========================================================================= */

[data-theme="abyssal"] .discipline-header,
[data-theme="abyssal"] .info-category-header,
[data-theme="abyssal"] .info-subcategory-header,
[data-theme="abyssal"] .itemtype-header {
    background:
        linear-gradient(135deg, hsl(206 34% 18%), hsl(214 28% 12%));
    color: hsl(178 52% 78%) !important;
    border: 1px solid hsl(188 34% 40% / 0.48);
    border-radius: var(--radius-lg);
}

[data-theme="abyssal"] .discipline-header:hover,
[data-theme="abyssal"] .info-category-header:hover,
[data-theme="abyssal"] .itemtype-header:hover {
    background:
        linear-gradient(135deg, hsl(198 38% 20%), hsl(210 30% 14%));
}

[data-theme="abyssal"] .subskill-item.passive {
    background: hsl(210 22% 18% / 0.64) !important;
}

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

[data-theme="abyssal"] .navigation-bar,
[data-theme="abyssal"] .tab-top-navigation {
    background:
        linear-gradient(180deg, hsl(214 34% 9% / 0.98), hsl(220 34% 5% / 0.98));
    border-bottom: 1px solid hsl(184 42% 48% / 0.42);
    box-shadow:
        0 12px 28px hsl(220 46% 4% / 0.48),
        inset 0 1px 0 hsl(184 20% 72% / 0.08);
}

[data-theme="abyssal"] .tab_btn,
[data-theme="abyssal"] .tab_btn_vertical,
[data-theme="abyssal"] .tab-buttons .tab-btn,
[data-theme="abyssal"] .tab-navigation .tab-btn,
[data-theme="abyssal"] .tab_btn_horizontal,
[data-theme="abyssal"] .tab_btn_original {
    background:
        linear-gradient(180deg, hsl(208 26% 18%), hsl(214 30% 10%)) !important;
    border: 1px solid hsl(188 24% 42% / 0.48) !important;
    color: hsl(188 28% 78%) !important;
    box-shadow:
        inset 0 1px 0 hsl(184 26% 82% / 0.06),
        0 8px 18px hsl(220 42% 4% / 0.28);
}

[data-theme="abyssal"] .tab_btn:hover,
[data-theme="abyssal"] .tab_btn_vertical:hover,
[data-theme="abyssal"] .tab-buttons .tab-btn:hover,
[data-theme="abyssal"] .tab-navigation .tab-btn:hover,
[data-theme="abyssal"] .tab_btn_horizontal:hover,
[data-theme="abyssal"] .tab_btn_original:hover {
    background:
        linear-gradient(180deg, hsl(198 32% 22%), hsl(210 32% 14%)) !important;
    border-color: hsl(178 54% 54% / 0.62) !important;
    box-shadow:
        0 10px 22px hsl(220 42% 4% / 0.32),
        0 0 16px hsl(184 82% 52% / 0.1);
}

[data-theme="abyssal"] .tab_btn.active,
[data-theme="abyssal"] .tab_btn.active-tab,
[data-theme="abyssal"] .tab_btn_vertical.active,
[data-theme="abyssal"] .tab-buttons .tab-btn.active,
[data-theme="abyssal"] .tab-navigation .tab-btn.active,
[data-theme="abyssal"] .tab_btn_horizontal.active,
[data-theme="abyssal"] .tab_btn_horizontal.main-tab,
[data-theme="abyssal"] .tab_btn_horizontal.main-tab.active,
[data-theme="abyssal"] .tab_btn_original.active,
[data-theme="abyssal"] #navi-btn-combat.tab_btn.combat-active {
    background:
        linear-gradient(135deg, hsl(184 82% 42%), hsl(196 72% 36%)) !important;
    border-color: hsl(182 72% 72%) !important;
    color: hsl(184 50% 96%) !important;
    box-shadow:
        0 0 0 3px hsl(184 82% 52% / 0.16),
        0 14px 28px hsl(220 42% 4% / 0.34),
        0 0 22px hsl(184 82% 52% / 0.18) !important;
}

[data-theme="abyssal"] .tab_btn.active-tab .tab_Icon,
[data-theme="abyssal"] .tab_btn.active-tab img,
[data-theme="abyssal"] .tab_btn_vertical.active img,
[data-theme="abyssal"] .tab-buttons .tab-btn.active .tab_Icon,
[data-theme="abyssal"] .tab-navigation .tab-btn.active .tab_Icon,
[data-theme="abyssal"] .tab_btn_horizontal.active img,
[data-theme="abyssal"] .tab_btn_horizontal.main-tab img,
[data-theme="abyssal"] .tab_btn_original.active img,
[data-theme="abyssal"] #navi-btn-combat.tab_btn.combat-active img {
    filter:
        brightness(0) saturate(100%) invert(100%) sepia(6%)
        saturate(462%) hue-rotate(169deg) brightness(102%) contrast(96%) !important;
}

/* ==========================================================================
   Buttons and Inputs
   ========================================================================= */

[data-theme="abyssal"] button,
[data-theme="abyssal"] .btn,
[data-theme="abyssal"] .roll-button,
[data-theme="abyssal"] input[type="button"],
[data-theme="abyssal"] input[type="submit"] {
    background:
        linear-gradient(135deg, hsl(184 72% 34%), hsl(198 68% 26%));
    color: hsl(184 50% 96%);
    border: 1px solid hsl(184 52% 54% / 0.72);
    border-radius: var(--radius-lg);
    box-shadow:
        0 10px 22px hsl(220 42% 4% / 0.32),
        inset 0 1px 0 hsl(184 24% 86% / 0.1);
}

[data-theme="abyssal"] button:hover,
[data-theme="abyssal"] .btn:hover,
[data-theme="abyssal"] .roll-button:hover,
[data-theme="abyssal"] input[type="button"]:hover,
[data-theme="abyssal"] input[type="submit"]:hover {
    background:
        linear-gradient(135deg, hsl(178 78% 40%), hsl(194 72% 30%));
    box-shadow:
        0 14px 28px hsl(220 42% 4% / 0.36),
        0 0 20px hsl(184 82% 52% / 0.14);
}

[data-theme="abyssal"] input,
[data-theme="abyssal"] textarea,
[data-theme="abyssal"] select,
[data-theme="abyssal"] .select,
[data-theme="abyssal"] .form-select,
[data-theme="abyssal"] .equipment-select {
    background:
        linear-gradient(180deg, hsl(212 30% 12%), hsl(214 26% 9%));
    border: 1px solid hsl(188 22% 42% / 0.46);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 hsl(184 18% 78% / 0.06);
}

[data-theme="abyssal"] input:focus,
[data-theme="abyssal"] textarea:focus,
[data-theme="abyssal"] select:focus,
[data-theme="abyssal"] .select:focus,
[data-theme="abyssal"] .form-select:focus,
[data-theme="abyssal"] .equipment-select:focus {
    border-color: hsl(178 72% 56%);
    box-shadow:
        0 0 0 4px var(--color-focus-ring),
        0 0 18px hsl(184 82% 52% / 0.12);
    outline: none;
}

/* ==========================================================================
   Tables
   ========================================================================= */

[data-theme="abyssal"] table {
    background: hsl(214 26% 10% / 0.96);
    border: 1px solid hsl(188 20% 38% / 0.28);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

[data-theme="abyssal"] th {
    background: hsl(206 28% 18% / 0.92);
    color: hsl(182 40% 78%);
}

[data-theme="abyssal"] td {
    background: hsl(214 24% 11% / 0.92);
    color: var(--text-primary);
    border-bottom: 1px solid hsl(188 20% 36% / 0.14);
}

[data-theme="abyssal"] tr:hover td {
    background: hsl(204 28% 15% / 0.96);
}

/* ==========================================================================
   Cards, Widgets, Login
   ========================================================================= */

[data-theme="abyssal"] .widget-tile,
[data-theme="abyssal"] .character-item {
    overflow: hidden;
}

[data-theme="abyssal"] .character-item:hover,
[data-theme="abyssal"] .widget-tile:hover {
    transform: translateY(-3px);
}

[data-theme="abyssal"] .character-item::after,
[data-theme="abyssal"] .widget-tile::after,
[data-theme="abyssal"] .login-container::after {
    content: '';
    position: absolute;
    inset: auto 18px 16px auto;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle, hsl(178 84% 72%), hsl(184 82% 52%) 65%, transparent 100%);
    box-shadow:
        18px -8px 0 -3px hsl(194 88% 66% / 0.64),
        -8px 14px 0 -4px hsl(278 24% 64% / 0.52);
}

[data-theme="abyssal"] .login-container {
    border-radius: var(--radius-2xl);
}

/* ==========================================================================
   Attribute Cards and Stats
   ========================================================================= */

[data-theme="abyssal"] .attribute-cards-container {
    background:
        linear-gradient(180deg, hsl(214 26% 12% / 0.4), hsl(208 22% 10% / 0.4));
    border-radius: var(--radius-2xl);
}

[data-theme="abyssal"] .attribute-icon-container {
    background:
        linear-gradient(135deg, hsl(206 28% 20%), hsl(184 30% 16%));
    color: hsl(182 44% 78%);
}

[data-theme="abyssal"] .attribute-value,
[data-theme="abyssal"] .stat-value,
[data-theme="abyssal"] .tt-total-label,
[data-theme="abyssal"] .tt-total-value {
    color: hsl(178 72% 66%);
}

[data-theme="abyssal"] .attribute-bonus {
    background: hsl(160 22% 20%);
    color: hsl(162 42% 66%);
}

[data-theme="abyssal"] .attribute-subskills,
[data-theme="abyssal"] .roll-result {
    background: hsl(214 24% 10% / 0.86);
    border: 1px solid hsl(188 20% 38% / 0.24);
    border-radius: var(--radius-lg);
}

[data-theme="abyssal"] .subskill-item {
    border-bottom-color: hsl(188 18% 34% / 0.16);
}

[data-theme="abyssal"] .subskill-name {
    color: hsl(182 52% 74%);
}

[data-theme="abyssal"] .subskill-effect,
[data-theme="abyssal"] .stat-label {
    color: hsl(196 18% 68%);
}

[data-theme="abyssal"] .attribute-card.physical {
    border-left-color: hsl(162 42% 52%);
}

[data-theme="abyssal"] .attribute-card.mental {
    border-left-color: hsl(194 62% 58%);
}

[data-theme="abyssal"] .attribute-card.social {
    border-left-color: hsl(42 52% 58%);
}

[data-theme="abyssal"] .attribute-card.special {
    border-left-color: hsl(276 34% 56%);
}

[data-theme="abyssal"] .stat-item {
    background: hsl(210 22% 14% / 0.9);
    border: 1px solid hsl(188 18% 36% / 0.26);
    border-radius: var(--radius-lg);
}

[data-theme="abyssal"] .stat-item:hover {
    background: hsl(206 24% 18% / 0.94);
}

/* ==========================================================================
   Inventory, Spellbook, Resistances
   ========================================================================= */

[data-theme="abyssal"] .currency-tile,
[data-theme="abyssal"] .resistance-tile,
[data-theme="abyssal"] .buff-tile,
[data-theme="abyssal"] .inventory-slot,
[data-theme="abyssal"] .inventory-item {
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 hsl(184 20% 80% / 0.05);
}

[data-theme="abyssal"] .currency-add-icon {
    color: hsl(178 72% 66%);
}

[data-theme="abyssal"] .buff-duration {
    background-color: hsl(208 22% 20% / 0.72);
    color: hsl(188 24% 74%);
}

[data-theme="abyssal"] .no-buffs-message,
[data-theme="abyssal"] .resistance-stat-label {
    color: hsl(202 14% 58%);
}

[data-theme="abyssal"] .equipped-indicator-icon {
    background-color: hsl(178 72% 46%);
    filter: drop-shadow(0 0 6px hsl(178 82% 52% / 0.44));
}

[data-theme="abyssal"] .spell-tile.temp-spell {
    border-color: var(--spell-temp-border) !important;
    background:
        linear-gradient(180deg, var(--spell-temp-bg), hsl(214 28% 12%)) !important;
}

[data-theme="abyssal"] .spell-tile.temp-spell:hover {
    background:
        linear-gradient(180deg, var(--spell-temp-hover-bg), hsl(212 30% 14%)) !important;
}

[data-theme="abyssal"] .spell-name,
[data-theme="abyssal"] .spell-progress {
    color: hsl(184 28% 84%);
}

[data-theme="abyssal"] .spell-cost {
    color: hsl(42 40% 64%);
}

/* ==========================================================================
   Bars and Progress
   ========================================================================= */

[data-theme="abyssal"] .progress-container,
[data-theme="abyssal"] .bar-track,
[data-theme="abyssal"] .resource-bar,
[data-theme="abyssal"] .weight-bar-container {
    background:
        linear-gradient(180deg, hsl(214 24% 14%), hsl(220 24% 8%)) !important;
    border: 1px solid hsl(188 20% 34% / 0.42) !important;
    border-radius: 999px !important;
    box-shadow:
        inset 0 2px 6px hsl(220 42% 4% / 0.44),
        inset 0 1px 0 hsl(184 18% 76% / 0.04);
}

[data-theme="abyssal"] #healthText,
[data-theme="abyssal"] #magicText,
[data-theme="abyssal"] #enduranceText {
    color: hsl(184 20% 88%);
    text-shadow: 0 0 10px hsl(220 42% 4% / 0.6);
}

[data-theme="abyssal"] .progress-bar,
[data-theme="abyssal"] .progress-fill,
[data-theme="abyssal"] .bar-fill {
    border-radius: 999px !important;
    overflow: hidden;
}

[data-theme="abyssal"] .health-bar,
[data-theme="abyssal"] .hp-bar-fill {
    background:
        linear-gradient(90deg, hsl(330 26% 28%) 0%, hsl(350 54% 42%) 50%, hsl(8 62% 58%) 100%) !important;
    box-shadow: 0 0 14px hsl(350 54% 42% / 0.16) !important;
}

[data-theme="abyssal"] .magic-bar,
[data-theme="abyssal"] .mana-bar-fill,
[data-theme="abyssal"] .energy-bar-fill {
    background:
        linear-gradient(90deg, hsl(204 58% 34%) 0%, hsl(194 88% 46%) 56%, hsl(184 82% 60%) 100%) !important;
    box-shadow: 0 0 16px hsl(194 88% 46% / 0.18) !important;
}

[data-theme="abyssal"] .endurance-bar,
[data-theme="abyssal"] .stamina-bar-fill {
    background:
        linear-gradient(90deg, hsl(42 44% 38%) 0%, hsl(42 62% 54%) 55%, hsl(56 52% 68%) 100%) !important;
    box-shadow: 0 0 14px hsl(42 62% 54% / 0.14) !important;
}

[data-theme="abyssal"] .weight-progress-bar.weight-ok,
[data-theme="abyssal"] .weight-fill,
[data-theme="abyssal"] .encumbrance-fill {
    background:
        linear-gradient(90deg, hsl(162 42% 38%) 0%, hsl(178 72% 56%) 100%) !important;
}

[data-theme="abyssal"] .weight-progress-bar.weight-warn {
    background:
        linear-gradient(90deg, hsl(38 52% 40%) 0%, hsl(46 68% 58%) 100%) !important;
}

[data-theme="abyssal"] .weight-progress-bar.weight-crit {
    background:
        linear-gradient(90deg, hsl(344 34% 32%) 0%, hsl(350 58% 54%) 100%) !important;
}

/* ==========================================================================
   Tooltips
   ========================================================================= */

[data-theme="abyssal"] .unified-tooltip,
[data-theme="abyssal"] .spell-tooltip,
[data-theme="abyssal"] #item-tooltip {
    background:
        linear-gradient(180deg, hsl(214 34% 12% / 0.98), hsl(220 34% 8% / 0.98));
    border: 1px solid hsl(188 28% 42% / 0.5);
    border-radius: var(--radius-xl);
    color: var(--color-tooltip-text);
    box-shadow:
        0 20px 42px hsl(220 46% 4% / 0.52),
        0 0 18px hsl(184 82% 52% / 0.08);
}

[data-theme="abyssal"] .itooltip-title,
[data-theme="abyssal"] .skilltooltip-title,
[data-theme="abyssal"] .attrtooltip-title,
[data-theme="abyssal"] .stattooltip-title,
[data-theme="abyssal"] .unified-tooltip .tooltip-title {
    color: hsl(178 82% 70%) !important;
}

[data-theme="abyssal"] .tt-section {
    background: hsl(210 24% 16% / 0.72);
    border-radius: var(--radius-md);
}

[data-theme="abyssal"] .tt-sep-accent {
    border-top-color: hsl(178 72% 58%);
}

/* ==========================================================================
   Toggles and Controls
   ========================================================================= */

[data-theme="abyssal"] .twohanded-toggle {
    background: transparent !important;
    border: 2px solid hsl(188 28% 48%);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 hsl(184 18% 76% / 0.05);
}

[data-theme="abyssal"] .twohanded-toggle:hover {
    background: hsl(184 32% 18% / 0.32) !important;
    border-color: hsl(178 72% 56%);
    box-shadow: 0 0 14px hsl(184 82% 52% / 0.12);
}

[data-theme="abyssal"] .twohanded-toggle.active {
    background:
        linear-gradient(135deg, hsl(184 82% 42%), hsl(196 72% 36%)) !important;
    border-color: hsl(182 72% 72%);
    box-shadow:
        0 0 0 3px hsl(184 82% 52% / 0.16),
        0 0 18px hsl(184 82% 52% / 0.16);
}

[data-theme="abyssal"] .twohanded-toggle.active .twohanded-toggle-icon {
    filter:
        brightness(0) saturate(100%) invert(100%) sepia(6%)
        saturate(462%) hue-rotate(169deg) brightness(102%) contrast(96%) !important;
}

/* ==========================================================================
   Scrollbars and Selection
   ========================================================================= */

[data-theme="abyssal"] ::-webkit-scrollbar-track {
    background: hsl(214 22% 10%);
    border-radius: 999px;
}

[data-theme="abyssal"] ::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, hsl(198 40% 28%), hsl(184 52% 36%));
    border-radius: 999px;
    border: 2px solid hsl(214 24% 10%);
}

[data-theme="abyssal"] ::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, hsl(196 46% 34%), hsl(178 62% 42%));
}

[data-theme="abyssal"] ::selection {
    background: hsl(184 52% 44% / 0.34);
    color: hsl(184 28% 92%);
}

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

[data-theme="abyssal"] hr,
[data-theme="abyssal"] .divider {
    border: none;
    border-top: 1px solid hsl(188 20% 34% / 0.28);
}
[data-theme="abyssal"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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