/* ═══════════════════════════════════════════════════════════════
   RUNIC THEME: Astral Void
   "Among the infinite stars."
   Kosmisches Weltraum-Thema mit Sternennebel, Pulsaren
   und galaktischen Partikeleffekten
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] {
    /* ── PRIMITIVE HUES ───────────────────────────────────────── */
    --hue-primary:   270;     /* Violett */
    --hue-accent:    190;     /* Cyan-Blau */
    --hue-gm:        320;     /* Magenta */
    --hue-danger:    0;       /* Rot */
    --hue-warning:   45;      /* Gold */
    --hue-success:   150;     /* Grün */
    --hue-toxicity:  116;     /* Toxizität */
    --hue-neutral:   220;     /* Kühles Blau */

    /* ── SÄTTIGUNG & HELLIGKEIT ───────────────────────────────── */
    --sat-primary:   80%;
    --lit-primary:   60%;
    --lit-primary-hover: 68%;

    --sat-accent:    90%;
    --lit-accent:    60%;
    --lit-accent-hover: 68%;

    --sat-gm:        85%;
    --lit-gm:        60%;
    --lit-gm-text:   70%;

    --sat-danger:    85%;
    --lit-danger:    55%;

    --sat-warning:   90%;
    --lit-warning:   55%;

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

    --lightness-bg:  2%;      /* Tiefschwarz */

    /* ── BORDER RADIUS ────────────────────────────────────────── */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     12px;
    --radius-xl:     16px;
    --radius-2xl:    24px;

    /* ── TYPOGRAPHY ───────────────────────────────────────────── */
    --font-sans:     'Exo 2', 'Orbitron', sans-serif;

    /* ── TRANSITIONS ──────────────────────────────────────────── */
    --duration-150:  150ms;
    --duration-250:  250ms;
    --duration-300:  300ms;

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

    /* ── SHADOWS ──────────────────────────────────────────────── */
    --shadow-glow-primary: 0 0 20px hsl(270 80% 60% / 0.6);
    --shadow-glow-accent:  0 0 25px hsl(190 90% 60% / 0.7);
    --shadow-glow-gold:    0 0 20px hsl(45 90% 55% / 0.6);

    /* ── ICON FÄRBUNG ─────────────────────────────────────────── */
    --icon-color:  hsl(190 90% 60%);
    --icon-filter: brightness(0) saturate(100%) invert(67%) sepia(59%) saturate(500%) hue-rotate(165deg) brightness(110%);
    --icon-filter-bright: brightness(0) saturate(100%) invert(67%) sepia(59%) saturate(500%) hue-rotate(165deg) brightness(150%);

    /* ── COSMIC COLORS ────────────────────────────────────────── */
    --star-color:   hsl(45 80% 85% / 0.8);
    --nebula-1:     hsl(270 70% 25% / 0.4);
    --nebula-2:     hsl(190 70% 20% / 0.3);
    --nebula-3:     hsl(320 70% 25% / 0.3);
    --pulsar-glow:  hsl(190 100% 70% / 0.6);

    /* ── HINTERGRÜNDE ─────────────────────────────────────────── */
    --bg-page:          hsl(270 50% 2%);
    --bg-primary:       hsl(270 40% 5%);
    --bg-secondary:     hsl(270 35% 8% / 0.85);
    --bg-tertiary:      hsl(270 30% 6% / 0.95);
    --bg-card:          hsl(270 35% 8% / 0.92);
    --bg-hover:         hsl(270 35% 12% / 0.5);
    --bg-input:         hsl(270 30% 10%);

    --surface-elevated: hsl(270 35% 12%);
    --surface-overlay:  hsl(270 40% 14%);
    --surface-panel:    hsl(270 30% 10%);

    /* ── TEXT ─────────────────────────────────────────────────── */
    --text-primary:   hsl(190 70% 75%);   /* Haupttext - konsistent */
    --text-secondary: hsl(190 60% 60%);  /* Sekundärtext */
    --text-muted:    hsl(270 50% 45% / 0.65);  /* Gedämpfter Text */
    --text-label:    hsl(190 70% 65%);    /* Label/Überschriften klein */

    /* ── RAHMEN ───────────────────────────────────────────────── */
    --border-color:  hsl(270 70% 50% / 0.15);
    --border-subtle: hsl(270 70% 50% / 0.08);
    --border-strong: hsl(270 70% 50% / 0.35);

    /* ── TOOLTIPS ─────────────────────────────────────────────── */
    --color-tooltip-bg:         hsl(270 50% 5%);
    --color-tooltip-highlight:  hsl(45 90% 70%);
    --color-tooltip-effect-bg:  hsla(270 80% 60% / 0.1);
    --color-tooltip-text:       hsl(190 60% 80%);
    --color-tooltip-label:      hsl(190 80% 65%);
    --color-tooltip-muted:      hsl(270 40% 55%);
    --color-tooltip-dim:        hsl(270 30% 45%);
    --color-tooltip-pos:        hsl(150 70% 60%);
    --color-tooltip-neg:        hsl(0 80% 60%);
    --color-tooltip-separator:  hsl(270 70% 50% / 0.25);
    --color-tooltip-section-bg: hsl(270 40% 8% / 0.9);

    /* ── ITEM QUALITY COLORS ─────────────────────────────────── */
    --quality-0-color1:  rgb(60, 60, 80);
    --quality-0-color2:  rgb(40, 40, 55);
    --quality-1-color1:  rgb(150, 155, 200);
    --quality-1-color2:  rgb(110, 115, 160);
    --quality-2-color1:  rgb(100, 255, 180);
    --quality-2-color2:  rgb(60, 200, 130);
    --quality-3-color1:  rgb(100, 200, 255);
    --quality-3-color2:  rgb(60, 160, 210);
    --quality-4-color1:  rgb(180, 100, 255);
    --quality-4-color2:  rgb(140, 60, 210);
    --quality-5-color1:  rgb(255, 220, 100);
    --quality-5-color2:  rgb(220, 175, 60);
    --quality-6-color1:  rgb(255, 80, 100);
    --quality-6-color2:  rgb(210, 40, 60);
    --quality-7-color1:  rgb(255, 150, 255);
    --quality-7-color2:  rgb(200, 50, 255);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – ANIMATIONEN
   ═══════════════════════════════════════════════════════════════ */

/* Pulsar - rhythmisches Blinken wie ein echter Pulsar */
@keyframes pulsarPulse {
    0%, 100% {
        opacity: 1;
        text-shadow:
            0 0 10px hsl(190 100% 70% / 0.7),
            0 0 25px hsl(190 100% 70% / 0.4),
            0 0 50px hsl(190 100% 60% / 0.2);
    }
    10% {
        opacity: 0.6;
        text-shadow: 0 0 5px hsl(190 100% 50% / 0.3);
    }
    12% {
        opacity: 1;
        text-shadow:
            0 0 20px hsl(190 100% 80% / 0.9),
            0 0 40px hsl(190 100% 70% / 0.6),
            0 0 80px hsl(190 100% 60% / 0.3);
    }
    15% {
        opacity: 0.85;
        text-shadow:
            0 0 12px hsl(190 100% 70% / 0.7),
            0 0 30px hsl(190 100% 70% / 0.4);
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 10px hsl(190 100% 70% / 0.7),
            0 0 25px hsl(190 100% 70% / 0.4),
            0 0 50px hsl(190 100% 60% / 0.2);
    }
    52% {
        opacity: 0.5;
        text-shadow: 0 0 3px hsl(190 100% 40% / 0.2);
    }
    55% {
        opacity: 1;
        text-shadow:
            0 0 15px hsl(190 100% 75% / 0.8),
            0 0 35px hsl(190 100% 65% / 0.5);
    }
}

/* Sternenfunken */
@keyframes starSparkle {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Galactic Swirl für Navigation */
@keyframes galacticSwirl {
    0%, 100% {
        box-shadow:
            0 2px 0 0 hsl(270 80% 60% / 0.5),
            0 0 30px hsl(270 70% 50% / 0.15);
    }
    50% {
        box-shadow:
            0 2px 0 0 hsl(190 90% 60% / 0.7),
            0 0 50px hsl(190 80% 50% / 0.25);
    }
}

/* Warp-Drive für Hover-Effekte */
@keyframes warpDrive {
    0% { transform: translateZ(0); }
    50% { transform: translateZ(10px) scale(1.02); }
    100% { transform: translateZ(0); }
}

/* Asteroid Field für Ränder */
@keyframes asteroidFloat {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(5px) rotate(2deg); }
    75% { transform: translateX(-5px) rotate(-2deg); }
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – GLOBAL BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] body {
    background-color: hsl(270 50% 2%);
    background-image:
        /* Sternenfeld Schicht 1 - Kleine Sterne */
        radial-gradient(1px 1px at 20px 30px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 40px 70px, hsl(190 60% 85% / 0.8), transparent),
        radial-gradient(1px 1px at 50px 160px, hsl(45 80% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, hsl(270 70% 90% / 0.8), transparent),
        radial-gradient(1px 1px at 130px 80px, hsl(45 80% 85% / 0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, hsl(190 60% 90% / 0.9), transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, hsl(45 80% 95% / 0.8), transparent),
        radial-gradient(1px 1px at 220px 150px, hsl(320 70% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 260px 90px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 300px 180px, hsl(190 60% 88% / 0.8), transparent),
        /* Sternenfeld Schicht 2 - Mittlere Sterne */
        radial-gradient(2px 2px at 100px 200px, hsl(45 80% 90% / 0.7), transparent),
        radial-gradient(2px 2px at 180px 250px, hsl(190 70% 88% / 0.6), transparent),
        radial-gradient(1.5px 1.5px at 250px 280px, hsl(270 70% 92% / 0.8), transparent),
        radial-gradient(2px 2px at 320px 220px, hsl(45 80% 88% / 0.7), transparent),
        /* Nebel-Schichten */
        radial-gradient(ellipse 80% 60% at 20% 30%, hsl(270 70% 25% / 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 70%, hsl(190 70% 20% / 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 60% 20%, hsl(320 70% 25% / 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 40% 80%, hsl(45 50% 20% / 0.15) 0%, transparent 70%),
        /* Subtile Galaxie-Spirale */
        conic-gradient(from 0deg at 50% 50%, transparent 0deg, hsl(270 50% 15% / 0.1) 30deg, transparent 60deg, hsl(190 50% 15% / 0.08) 120deg, transparent 180deg, hsl(320 50% 15% / 0.1) 240deg, transparent 300deg);
    background-size:
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        400px 400px,
        600px 600px,
        600px 600px,
        600px 600px,
        600px 600px,
        100% 100%;
    background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed, fixed;
}

/* Partikel-Effekt (blockiert keine Interaktionen) */
[data-theme="astral-void"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, hsl(45 90% 90% / 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 35% 55%, hsl(190 80% 85% / 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 55% 15%, hsl(270 70% 90% / 0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 45%, hsl(45 80% 88% / 0.4) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 75%, hsl(190 70% 90% / 0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 85%, hsl(320 70% 88% / 0.5) 0%, transparent 100%),
        radial-gradient(2px 2px at 65% 65%, hsl(45 90% 92% / 0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 35%, hsl(190 80% 88% / 0.6) 0%, transparent 100%);
    background-size: 400px 400px;
    animation: starFloat 60s linear infinite;
}

@keyframes starFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-400px); }
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] h1,
[data-theme="astral-void"] h2,
[data-theme="astral-void"] h3 {
    color: var(--text-primary);
    text-shadow:
        0 0 10px hsl(190 100% 60% / 0.5),
        0 0 25px hsl(190 100% 50% / 0.3),
        0 0 50px hsl(270 80% 50% / 0.2);
    letter-spacing: 0.05em;
    animation: pulsarPulse 6s ease-in-out infinite;
}

[data-theme="astral-void"] h4,
[data-theme="astral-void"] h5,
[data-theme="astral-void"] h6 {
    color: hsl(270 80% 65%);
    text-shadow: 0 0 10px hsl(270 100% 50% / 0.4);
    letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – MODAL
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .modal {
    border: 1px solid hsl(270 80% 50% / 0.3);
    box-shadow:
        0 0 30px hsl(270 80% 50% / 0.15),
        0 0 60px hsl(190 90% 50% / 0.1),
        inset 0 0 30px hsl(270 70% 30% / 0.05);
    background: linear-gradient(135deg,
        hsl(270 50% 5% / 0.97),
        hsl(270 40% 8% / 0.99));
    position: relative;
}

/* Kosmischer Staub im Modal */
[data-theme="astral-void"] .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, hsl(270 70% 60% / 0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, hsl(190 70% 60% / 0.08) 0%, transparent 15%),
        radial-gradient(circle at 60% 20%, hsl(45 70% 60% / 0.05) 0%, transparent 10%);
    pointer-events: none;
    opacity: 0.5;
}

[data-theme="astral-void"] .modal-header {
    background: linear-gradient(135deg,
        hsl(270 80% 50% / 0.15),
        transparent);
    border-bottom: 1px solid hsl(270 80% 50% / 0.25);
}

[data-theme="astral-void"] .modal-title {
    color: var(--text-primary);
    text-shadow:
        0 0 15px hsl(190 100% 60% / 0.6),
        0 0 30px hsl(270 80% 50% / 0.3);
    letter-spacing: 0.05em;
}

[data-theme="astral-void"] .modal-footer {
    border-top: 1px solid hsl(270 80% 50% / 0.2);
    background: hsl(270 50% 5% / 0.9);
}

[data-theme="astral-void"] .modal-close {
    color: hsl(190 80% 60% / 0.7);
}

[data-theme="astral-void"] .modal-close:hover {
    background: hsl(190 90% 50% / 0.15);
    color: hsl(190 100% 70%);
    box-shadow: 0 0 15px hsl(190 100% 60% / 0.4);
}

[data-theme="astral-void"] .modal-danger {
    border-color: hsl(0 80% 50%);
    box-shadow: 0 0 20px hsl(0 80% 50% / 0.2);
}

[data-theme="astral-void"] .modal-gm {
    border-color: hsl(320 80% 60%);
    box-shadow: 0 0 20px hsl(320 80% 60% / 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – BUTTONS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .btn-primary {
    background: linear-gradient(135deg,
        hsl(270 80% 55%),
        hsl(270 80% 45%));
    box-shadow:
        0 0 15px hsl(270 80% 50% / 0.4),
        inset 0 0 10px hsl(0 0% 100% / 0.1);
    color: hsl(45 90% 95%);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-shadow: 0 0 10px hsl(270 80% 50% / 0.5);
}

[data-theme="astral-void"] .btn-primary:hover {
    background: linear-gradient(135deg,
        hsl(270 90% 65%),
        hsl(270 90% 55%));
    box-shadow:
        0 0 30px hsl(270 80% 60% / 0.6),
        0 0 60px hsl(190 90% 50% / 0.3),
        inset 0 0 15px hsl(0 0% 100% / 0.15);
    transform: translateY(-2px);
}

[data-theme="astral-void"] .btn-secondary {
    border-color: hsl(190 80% 50% / 0.4);
    color: var(--text-primary);
    background: hsl(190 50% 10% / 0.5);
    letter-spacing: 0.03em;
}

[data-theme="astral-void"] .btn-secondary:hover {
    background: hsl(190 80% 50% / 0.15);
    border-color: hsl(190 90% 60%);
    color: hsl(190 100% 75%);
    box-shadow: 0 0 20px hsl(190 90% 50% / 0.4);
}

[data-theme="astral-void"] .btn-danger {
    background: linear-gradient(135deg,
        hsl(0 80% 50%),
        hsl(0 80% 40%));
    box-shadow: 0 0 15px hsl(0 80% 50% / 0.4);
    letter-spacing: 0.03em;
}

[data-theme="astral-void"] .btn-danger:hover {
    box-shadow:
        0 0 30px hsl(0 80% 55% / 0.6),
        0 0 60px hsl(0 80% 50% / 0.3);
}

[data-theme="astral-void"] .btn-gm {
    background: linear-gradient(135deg,
        hsl(320 80% 55%),
        hsl(320 80% 45%));
    box-shadow: 0 0 15px hsl(320 80% 55% / 0.4);
    letter-spacing: 0.03em;
}

[data-theme="astral-void"] .btn-gm:hover {
    box-shadow:
        0 0 30px hsl(320 80% 60% / 0.6),
        0 0 60px hsl(320 80% 50% / 0.3);
}

[data-theme="astral-void"] .btn-ghost {
    color: hsl(190 80% 60%);
}

[data-theme="astral-void"] .btn-ghost:hover {
    background: hsl(190 80% 50% / 0.1);
    box-shadow: 0 0 15px hsl(190 90% 50% / 0.2);
}

[data-theme="astral-void"] .tab-btn {
    background: hsl(270 40% 10% / 0.85);
    border-color: hsl(270 70% 40% / 0.3);
}

[data-theme="astral-void"] .tab-btn:hover {
    background: hsl(270 50% 15% / 0.9);
    border-color: hsl(270 80% 50% / 0.5);
    box-shadow: 0 0 15px hsl(270 80% 50% / 0.25);
}

[data-theme="astral-void"] .tab-btn.active {
    background: linear-gradient(135deg,
        hsl(270 80% 50%),
        hsl(190 90% 50%));
    border-color: hsl(190 100% 60%);
    box-shadow:
        0 0 25px hsl(270 80% 55% / 0.5),
        0 0 50px hsl(190 90% 50% / 0.3);
    color: hsl(45 90% 95%);
}

[data-theme="astral-void"] .tab-btn.combat-active {
    background: linear-gradient(135deg,
        hsl(0 80% 50%),
        hsl(0 80% 40%)) !important;
    border-color: hsl(0 90% 55%) !important;
    box-shadow: 0 0 25px hsl(0 80% 55% / 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – CARDS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .card {
    border: 1px solid hsl(270 70% 45% / 0.2);
    box-shadow:
        0 0 20px hsl(270 70% 40% / 0.1),
        inset 0 0 20px hsl(270 60% 30% / 0.03);
    background: linear-gradient(135deg,
        hsl(270 40% 8% / 0.92),
        hsl(270 35% 12% / 0.96));
    position: relative;
    transition: all var(--duration-300) var(--ease-out);
}

/* Glow-Linie oben */
[data-theme="astral-void"] .card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        hsl(190 80% 60% / 0.6),
        hsl(270 80% 60% / 0.4),
        transparent);
    pointer-events: none;
}

[data-theme="astral-void"] .card:hover {
    border-color: hsl(270 80% 55% / 0.4);
    box-shadow:
        0 0 35px hsl(270 80% 50% / 0.2),
        0 0 70px hsl(190 90% 50% / 0.1),
        inset 0 0 25px hsl(270 70% 40% / 0.05);
    transform: translateY(-3px);
}

[data-theme="astral-void"] .card:hover::before {
    background: linear-gradient(90deg,
        transparent,
        hsl(190 100% 70%),
        hsl(270 100% 70%),
        transparent);
}

[data-theme="astral-void"] .card-gm {
    border-color: hsl(320 80% 55% / 0.4);
    box-shadow: 0 0 25px hsl(320 80% 55% / 0.2);
}

[data-theme="astral-void"] .card-glass {
    background: linear-gradient(135deg,
        hsl(270 40% 10% / 0.6),
        hsl(270 35% 15% / 0.75));
    border-color: hsl(270 70% 45% / 0.2);
    backdrop-filter: blur(10px);
}

[data-theme="astral-void"] .character-card {
    background: linear-gradient(135deg,
        hsl(270 40% 8% / 0.96),
        hsl(270 35% 12% / 0.99));
    border: 1px solid hsl(270 70% 45% / 0.2);
    position: relative;
}

[data-theme="astral-void"] .character-card::before {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, hsl(190 80% 60% / 0.5), transparent);
    pointer-events: none;
}

[data-theme="astral-void"] .character-card:hover {
    border-color: hsl(190 80% 55% / 0.4);
    box-shadow: 0 0 35px hsl(190 80% 50% / 0.2);
}

[data-theme="astral-void"] .character-card-avatar {
    border: 2px solid hsl(270 80% 50% / 0.4);
    box-shadow:
        0 0 0 1px hsl(190 80% 50% / 0.2),
        0 0 15px hsl(270 80% 50% / 0.3);
}

[data-theme="astral-void"] .character-card:hover .character-card-avatar {
    border-color: hsl(190 100% 65%);
    box-shadow:
        0 0 0 1px hsl(190 90% 60% / 0.4),
        0 0 25px hsl(190 80% 60% / 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – FORMS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .input,
[data-theme="astral-void"] .select,
[data-theme="astral-void"] .textarea {
    border-color: hsl(270 70% 45% / 0.3);
    background: hsl(270 35% 8% / 0.8);
    color: var(--text-primary);
    caret-color: hsl(190 100% 65%);
}

[data-theme="astral-void"] .input:hover:not(:disabled):not(:focus),
[data-theme="astral-void"] .select:hover:not(:disabled):not(:focus) {
    border-color: hsl(270 80% 55% / 0.5);
}

[data-theme="astral-void"] .input:focus,
[data-theme="astral-void"] .select:focus,
[data-theme="astral-void"] .textarea:focus {
    border-color: hsl(190 100% 60%);
    background: hsl(190 50% 12% / 0.9);
    box-shadow:
        0 0 20px hsl(190 90% 50% / 0.3),
        inset 0 0 10px hsl(190 70% 30% / 0.05);
    color: var(--text-primary);
}

[data-theme="astral-void"] .input-error {
    border-color: hsl(0 80% 50%);
}

[data-theme="astral-void"] .checkbox:checked,
[data-theme="astral-void"] .radio:checked {
    background: hsl(190 100% 55%);
    border-color: hsl(190 100% 55%);
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.5);
}

[data-theme="astral-void"] .toggle:checked {
    background: hsl(190 100% 55%);
    border-color: hsl(190 100% 55%);
}

[data-theme="astral-void"] .range {
    background: hsl(270 60% 20%);
}

[data-theme="astral-void"] .range::-webkit-slider-thumb {
    background: linear-gradient(135deg, hsl(270 80% 55%), hsl(190 90% 55%));
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.6);
}

[data-theme="astral-void"] .range::-moz-range-thumb {
    background: linear-gradient(135deg, hsl(270 80% 55%), hsl(190 90% 55%));
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – TABLES
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] table {
    background: linear-gradient(135deg,
        hsl(270 40% 6% / 0.92),
        hsl(270 35% 10% / 0.96));
    border: 1px solid hsl(270 70% 40% / 0.2);
}

[data-theme="astral-void"] th {
    background: linear-gradient(135deg,
        hsl(270 80% 50% / 0.2),
        hsl(190 80% 50% / 0.15));
    border-bottom: 1px solid hsl(270 80% 50% / 0.3);
    color: var(--text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.78em;
    text-shadow: 0 0 10px hsl(190 100% 60% / 0.5);
}

[data-theme="astral-void"] tr:hover {
    background: hsl(270 80% 50% / 0.08);
}

[data-theme="astral-void"] td {
    border-bottom: 1px solid hsl(270 70% 40% / 0.1);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – WIDGETS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .widget-tile {
    background: linear-gradient(135deg,
        hsl(270 40% 10% / 0.85),
        hsl(270 35% 15% / 0.9));
    border: 1px solid hsl(270 70% 45% / 0.2);
    box-shadow: 0 0 15px hsl(270 70% 40% / 0.1);
    position: relative;
}

[data-theme="astral-void"] .widget-tile::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent hsl(190 80% 50% / 0.4) transparent transparent;
    pointer-events: none;
    transition: all var(--duration-250);
}

[data-theme="astral-void"] .widget-tile:hover {
    border-color: hsl(270 80% 55% / 0.5);
    box-shadow:
        0 0 30px hsl(270 80% 50% / 0.2),
        0 0 60px hsl(190 90% 50% / 0.1);
}

[data-theme="astral-void"] .widget-tile:hover::after {
    border-color: transparent hsl(190 100% 65%) transparent transparent;
}

[data-theme="astral-void"] .widget-tile[data-widget-type="attack"] {
    background: linear-gradient(135deg,
        hsl(0 60% 20% / 0.2),
        hsl(0 50% 25% / 0.25));
    border-color: hsl(0 70% 45% / 0.3);
}

[data-theme="astral-void"] .widget-tile[data-widget-type="attack"]:hover {
    box-shadow: 0 0 30px hsl(0 70% 50% / 0.25);
}

[data-theme="astral-void"] .widget-title {
    color: var(--text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75em;
    text-shadow: 0 0 8px hsl(190 100% 50% / 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .navigation-bar {
    background: linear-gradient(180deg,
        hsl(270 50% 5% / 0.99),
        hsl(270 45% 8% / 0.96));
    border-bottom: 1px solid hsl(270 80% 50% / 0.25);
    animation: galacticSwirl 8s ease-in-out infinite;
}

[data-theme="astral-void"] .tab_btn {
    background: hsl(270 40% 10% / 0.85);
    border-color: hsl(270 70% 40% / 0.3);
}

[data-theme="astral-void"] .tab_btn:hover {
    background: hsl(270 50% 15% / 0.9);
    border-color: hsl(270 80% 55% / 0.5);
    box-shadow: 0 0 20px hsl(270 80% 50% / 0.3);
}

[data-theme="astral-void"] .navigation-bar .icon {
    filter: var(--icon-filter)
            drop-shadow(0 0 4px hsl(190 90% 60% / 0.5));
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – BADGES & CHIPS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .badge,
[data-theme="astral-void"] .chip,
[data-theme="astral-void"] .tag {
    background: hsl(270 80% 50% / 0.12);
    border: 1px solid hsl(270 80% 50% / 0.4);
    color: var(--text-primary);
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 0 8px hsl(270 80% 50% / 0.2);
}

[data-theme="astral-void"] .badge-primary,
[data-theme="astral-void"] .chip-primary {
    background: linear-gradient(135deg,
        hsl(270 80% 50% / 0.2),
        hsl(190 80% 50% / 0.15));
    border-color: hsl(190 90% 60% / 0.6);
    color: hsl(190 100% 75%);
}

[data-theme="astral-void"] .badge-danger,
[data-theme="astral-void"] .chip-danger {
    background: hsl(0 70% 45% / 0.15);
    border-color: hsl(0 80% 55% / 0.5);
    color: hsl(0 90% 70%);
    box-shadow: 0 0 8px hsl(0 80% 50% / 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – PROGRESS BARS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .progress-container,
[data-theme="astral-void"] .progress,
[data-theme="astral-void"] progress {
    background: hsl(270 40% 6% / 0.9);
    border: 1px solid hsl(270 80% 50% / 0.5);
    box-shadow:
        0 0 10px hsl(270 80% 50% / 0.2),
        inset 0 0 8px hsl(0 0% 0% / 0.5);
}

[data-theme="astral-void"] #healthText,
[data-theme="astral-void"] #magicText,
[data-theme="astral-void"] #enduranceText {
    color: hsl(190 100% 80%);
    text-shadow:
        0 0 8px hsl(190 100% 60% / 0.9),
        0 0 20px hsl(190 100% 50% / 0.5);
    font-weight: 700;
    letter-spacing: 0.05em;
    animation: pulsarPulse 4s ease-in-out infinite;
}

[data-theme="astral-void"] .progress-fill,
[data-theme="astral-void"] .bar-fill {
    background: linear-gradient(90deg,
        hsl(270 80% 40%),
        hsl(190 90% 55%));
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.6);
}

[data-theme="astral-void"] .health-bar {
    background: linear-gradient(90deg,
        hsl(150 70% 35%),
        hsl(150 80% 50%));
    box-shadow: 0 0 12px hsl(150 80% 55% / 0.6);
}

[data-theme="astral-void"] .magic-bar {
    background: linear-gradient(90deg,
        hsl(270 80% 35%),
        hsl(190 90% 55%));
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.6);
}

[data-theme="astral-void"] .endurance-bar {
    background: linear-gradient(90deg,
        hsl(45 80% 35%),
        hsl(45 90% 55%));
    box-shadow: 0 0 12px hsl(45 90% 60% / 0.6);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – TOOLTIPS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .tooltip,
[data-theme="astral-void"] .unified-tooltip,
[data-theme="astral-void"] .basic-tooltip,
[data-theme="astral-void"] .tooltiptext,
[data-theme="astral-void"] .itooltip,
[data-theme="astral-void"] .skilltooltip,
[data-theme="astral-void"] .attrtooltip,
[data-theme="astral-void"] .stattooltip,
[data-theme="astral-void"] #item-tooltip {
    background: linear-gradient(135deg,
        hsl(270 50% 5% / 0.98),
        hsl(270 40% 8% / 0.98));
    border: 1px solid hsl(270 80% 50% / 0.45);
    color: var(--text-primary);
    box-shadow:
        0 0 25px hsl(270 80% 50% / 0.2),
        0 0 50px hsl(190 90% 50% / 0.1),
        inset 0 0 15px hsl(270 70% 30% / 0.05);
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .tooltip::before,
[data-theme="astral-void"] .unified-tooltip::before,
[data-theme="astral-void"] .itooltip::before,
[data-theme="astral-void"] .skilltooltip::before,
[data-theme="astral-void"] .attrtooltip::before,
[data-theme="astral-void"] .stattooltip::before,
[data-theme="astral-void"] #item-tooltip::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 12px; height: 12px;
    border-top: 2px solid hsl(190 100% 65%);
    border-left: 2px solid hsl(190 100% 65%);
    pointer-events: none;
    z-index: 1;
}

[data-theme="astral-void"] .tooltip::after,
[data-theme="astral-void"] .unified-tooltip::after,
[data-theme="astral-void"] .itooltip::after,
[data-theme="astral-void"] .skilltooltip::after,
[data-theme="astral-void"] .attrtooltip::after,
[data-theme="astral-void"] .stattooltip::after,
[data-theme="astral-void"] #item-tooltip::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 12px; height: 12px;
    border-bottom: 2px solid hsl(270 100% 65%);
    border-right: 2px solid hsl(270 100% 65%);
    pointer-events: none;
    z-index: 1;
}

[data-theme="astral-void"] .tooltip-title,
[data-theme="astral-void"] .itooltip-title,
[data-theme="astral-void"] .skilltooltip-title,
[data-theme="astral-void"] .attrtooltip-title,
[data-theme="astral-void"] .stattooltip-title,
[data-theme="astral-void"] .unified-tooltip .tooltip-title {
    color: hsl(45 90% 70%) !important;
    text-shadow:
        0 0 12px hsl(45 90% 60% / 0.7),
        0 0 25px hsl(270 80% 50% / 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

[data-theme="astral-void"] .itooltip-description,
[data-theme="astral-void"] .skilltooltip-description,
[data-theme="astral-void"] .attrtooltip-description,
[data-theme="astral-void"] .unified-tooltip .tooltip-description,
[data-theme="astral-void"] #item-tooltip div[style*="font-size: 14px"] {
    color: var(--text-muted);
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

[data-theme="astral-void"] .tt-section {
    background: hsl(270 40% 8% / 0.9);
    border-left: 2px solid hsl(270 80% 50% / 0.4);
    font-size: 0.8rem;
}

[data-theme="astral-void"] .tt-row {
    color: var(--text-primary);
    font-size: 0.8rem;
}

[data-theme="astral-void"] .tt-row-sm {
    color: var(--text-primary);
    font-size: 0.73rem;
}

[data-theme="astral-void"] .tt-dim {
    color: var(--text-muted);
    font-size: 0.7rem;
}

[data-theme="astral-void"] .tt-total-label {
    color: hsl(45 90% 70%);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[data-theme="astral-void"] .tt-total-value {
    color: hsl(45 90% 70%);
    text-shadow: 0 0 10px hsl(45 90% 60% / 0.6);
    font-weight: 700;
}

[data-theme="astral-void"] .tt-sep-accent {
    border-top: 1px solid hsl(270 80% 50% / 0.35);
    box-shadow: 0 0 8px hsl(270 80% 50% / 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – CHARACTER & LOGIN
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .character-item {
    background: linear-gradient(135deg,
        hsl(270 40% 10% / 0.88),
        hsl(270 35% 15% / 0.92));
    border-color: hsl(270 70% 45% / 0.2);
}

[data-theme="astral-void"] .character-item:hover {
    border-color: hsl(270 80% 55% / 0.4);
    box-shadow: 0 0 25px hsl(270 80% 50% / 0.2);
}

[data-theme="astral-void"] .character-info h3 {
    color: var(--text-primary);
    text-shadow: 0 0 10px hsl(190 100% 50% / 0.4);
}

[data-theme="astral-void"] .login-container {
    background: linear-gradient(135deg,
        hsl(270 50% 5% / 0.98),
        hsl(270 40% 8% / 0.96));
    border: 1px solid hsl(270 80% 50% / 0.35);
    box-shadow:
        0 0 50px hsl(270 80% 50% / 0.15),
        0 0 100px hsl(190 90% 50% / 0.08),
        inset 0 0 40px hsl(270 70% 30% / 0.05);
    animation: pulsarPulse 5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .login-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, hsl(270 70% 50% / 0.1) 0%, transparent 30%),
        radial-gradient(circle at 70% 80%, hsl(190 70% 50% / 0.08) 0%, transparent 25%);
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – ATTRIBUTE CARDS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .attribute-cards-container {
    background: linear-gradient(135deg,
        hsl(270 40% 6% / 0.5),
        hsl(270 35% 10% / 0.5));
}

[data-theme="astral-void"] .attribute-card {
    background: linear-gradient(135deg,
        hsl(270 40% 8% / 0.92),
        hsl(270 35% 12% / 0.96));
    border: 1px solid hsl(270 70% 45% / 0.2);
    position: relative;
}

[data-theme="astral-void"] .attribute-card::before {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 0 10px 10px;
    border-color: transparent transparent hsl(190 80% 50% / 0.3) transparent;
    pointer-events: none;
    transition: all var(--duration-250);
}

[data-theme="astral-void"] .attribute-card:hover {
    border-color: hsl(270 80% 55% / 0.45);
    box-shadow:
        0 0 30px hsl(270 80% 50% / 0.2),
        inset 0 0 15px hsl(270 70% 40% / 0.05);
}

[data-theme="astral-void"] .attribute-card:hover::before {
    border-color: transparent transparent hsl(190 100% 65%) transparent;
}

[data-theme="astral-void"] .attribute-name {
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8em;
    text-shadow: 0 0 8px hsl(190 100% 50% / 0.4);
}

[data-theme="astral-void"] .attribute-icon-container {
    background: linear-gradient(135deg,
        hsl(270 80% 50% / 0.15),
        hsl(190 80% 50% / 0.1));
    color: hsl(190 100% 65%);
    border: 1px solid hsl(270 80% 50% / 0.3);
    box-shadow:
        0 0 10px hsl(190 100% 60% / 0.25),
        inset 0 0 8px hsl(190 70% 30% / 0.1);
    animation: pulsarPulse 5s ease-in-out infinite;
}

[data-theme="astral-void"] .attribute-value {
    color: hsl(190 100% 70%);
    text-shadow:
        0 0 12px hsl(190 100% 60% / 0.6),
        0 0 25px hsl(190 100% 50% / 0.3);
    font-weight: 700;
}

[data-theme="astral-void"] .attribute-bonus {
    background: hsl(150 70% 45% / 0.15);
    color: hsl(150 90% 65%);
    border-radius: 0;
}

[data-theme="astral-void"] .attribute-subskills {
    background: hsl(270 35% 10% / 0.85);
    border: 1px solid hsl(270 70% 40% / 0.2);
}

[data-theme="astral-void"] .subskill-item {
    border-bottom-color: hsl(270 70% 40% / 0.12);
}

[data-theme="astral-void"] .subskill-name {
    color: var(--text-primary);
    font-size: 0.85em;
    text-shadow: 0 0 6px hsl(190 100% 50% / 0.3);
}

[data-theme="astral-void"] .subskill-effect {
    color: var(--text-primary);
}

[data-theme="astral-void"] .roll-button {
    background: linear-gradient(135deg,
        hsl(270 80% 50%),
        hsl(190 90% 50%));
    border: none;
    color: hsl(45 90% 95%);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    box-shadow: 0 0 15px hsl(270 80% 50% / 0.4);
}

[data-theme="astral-void"] .roll-button:hover {
    box-shadow:
        0 0 25px hsl(270 80% 60% / 0.6),
        0 0 50px hsl(190 90% 50% / 0.4);
}

[data-theme="astral-void"] .roll-result {
    background: hsl(270 40% 10% / 0.88);
    color: hsl(190 100% 70%);
    border: 1px solid hsl(270 80% 50% / 0.3);
    text-shadow: 0 0 10px hsl(190 100% 60% / 0.5);
    border-radius: 0;
}

[data-theme="astral-void"] .roll-result:not(:empty) {
    box-shadow:
        0 0 20px hsl(270 80% 50% / 0.35),
        0 0 50px hsl(190 90% 50% / 0.15),
        inset 0 0 15px hsl(270 70% 40% / 0.08);
    animation: pulsarPulse 3s ease-in-out infinite;
}

[data-theme="astral-void"] .attribute-card.physical {
    border-left: 2px solid hsl(150 80% 50%);
}

[data-theme="astral-void"] .attribute-card.mental {
    border-left: 2px solid hsl(190 90% 60%);
}

[data-theme="astral-void"] .attribute-card.social {
    border-left: 2px solid hsl(45 90% 60%);
}

[data-theme="astral-void"] .attribute-card.special {
    border-left: 2px solid hsl(320 80% 60%);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – CHAR-NAME PULSAR
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] #charNameLabel,
[data-theme="astral-void"] .character-info h3,
[data-theme="astral-void"] .character-name,
[data-theme="astral-void"] .char-name,
[data-theme="astral-void"] .character-card .name,
[data-theme="astral-void"] .character-card h3,
[data-theme="astral-void"] .character-card h4 {
    color: hsl(190 100% 70%);
    text-shadow:
        0 0 12px hsl(190 100% 60% / 0.6),
        0 0 30px hsl(190 100% 50% / 0.35),
        0 0 50px hsl(270 80% 50% / 0.2);
    animation: pulsarPulse 5s ease-in-out infinite;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

[data-theme="astral-void"] .character-item:nth-child(2) .character-info h3,
[data-theme="astral-void"] .character-item:nth-child(2) .character-name {
    animation-delay: -1.5s;
}

[data-theme="astral-void"] .character-item:nth-child(3) .character-info h3,
[data-theme="astral-void"] .character-item:nth-child(3) .character-name {
    animation-delay: -3s;
}

[data-theme="astral-void"] .character-item:nth-child(4) .character-info h3,
[data-theme="astral-void"] .character-item:nth-child(4) .character-name {
    animation-delay: -2s;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – SCROLLBARS & SELECTION
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] ::-webkit-scrollbar-track {
    background: hsl(270 40% 5% / 0.6);
}

[data-theme="astral-void"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        hsl(270 80% 50% / 0.4),
        hsl(190 80% 50% / 0.3));
    border: 1px solid hsl(270 80% 50% / 0.5);
}

[data-theme="astral-void"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        hsl(270 90% 60%),
        hsl(190 90% 60%));
    box-shadow: 0 0 12px hsl(190 100% 60% / 0.4);
}

[data-theme="astral-void"] ::selection {
    background: hsl(270 80% 50% / 0.4);
    color: hsl(45 90% 95%);
}

[data-theme="astral-void"] ::-moz-selection {
    background: hsl(270 80% 50% / 0.4);
    color: hsl(45 90% 95%);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – GLOW UTILITIES
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] .glow-primary {
    box-shadow:
        0 0 25px hsl(270 80% 55% / 0.5),
        0 0 50px hsl(190 90% 50% / 0.3);
}

[data-theme="astral-void"] .glow-accent {
    box-shadow:
        0 0 25px hsl(190 90% 60% / 0.5),
        0 0 50px hsl(270 80% 50% / 0.3);
}

[data-theme="astral-void"] .glow-danger {
    box-shadow: 0 0 25px hsl(0 80% 55% / 0.5);
}

[data-theme="astral-void"] .glow-gm {
    box-shadow: 0 0 25px hsl(320 80% 60% / 0.5);
}

[data-theme="astral-void"] .neon-violet,
[data-theme="astral-void"] .text-neon {
    color: hsl(270 90% 70%);
    text-shadow:
        0 0 10px hsl(270 100% 60% / 0.7),
        0 0 25px hsl(270 100% 50% / 0.4);
}

[data-theme="astral-void"] .neon-cyan {
    color: hsl(190 100% 70%);
    text-shadow:
        0 0 10px hsl(190 100% 60% / 0.7),
        0 0 25px hsl(190 100% 50% / 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – SELECT / DROPDOWNS
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] select,
[data-theme="astral-void"] .select,
[data-theme="astral-void"] .form-select,
[data-theme="astral-void"] .equipment-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: hsl(270 35% 8% / 0.8);
    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='%2300c0ff' 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.5rem center;
    background-size: 14px;
    border: 1px solid hsl(270 70% 45% / 0.3);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    padding: 0.3rem 1.8rem 0.3rem 0.5rem;
    outline: none;
    cursor: pointer;
    transition: border-color var(--duration-150), box-shadow var(--duration-150);
}

[data-theme="astral-void"] select:hover:not(:disabled),
[data-theme="astral-void"] .select:hover:not(:disabled),
[data-theme="astral-void"] .form-select:hover:not(:disabled),
[data-theme="astral-void"] .equipment-select:hover:not(:disabled) {
    border-color: hsl(270 80% 55% / 0.5);
}

[data-theme="astral-void"] select:focus,
[data-theme="astral-void"] .select:focus,
[data-theme="astral-void"] .form-select:focus,
[data-theme="astral-void"] .equipment-select:focus {
    border-color: hsl(190 100% 60%);
    box-shadow: 0 0 0 3px hsl(190 90% 50% / 0.2), 0 0 20px hsl(190 90% 50% / 0.2);
}

[data-theme="astral-void"] select:disabled,
[data-theme="astral-void"] .select:disabled,
[data-theme="astral-void"] .form-select:disabled,
[data-theme="astral-void"] .equipment-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[data-theme="astral-void"] select option {
    background-color: hsl(270 40% 8%);
    color: var(--text-primary);
}

[data-theme="astral-void"] select option:checked {
    background-color: hsl(270 50% 20%);
    color: hsl(190 100% 75%);
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – ARCANE SPHERE EFFEKTE
   ═══════════════════════════════════════════════════════════════ */

/* Zentraler Vortex - Portal in eine andere Dimension */
[data-theme="astral-void"] .navigation-bar {
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .navigation-bar::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 600px; height: 600px;
    transform: translate(-50%, -50%);
    background: 
        radial-gradient(ellipse at center,
            hsl(270 80% 30% / 0.15) 0%,
            hsl(190 70% 25% / 0.1) 30%,
            hsl(320 70% 20% / 0.05) 50%,
            transparent 70%),
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            hsl(270 80% 60% / 0.1) 30deg,
            transparent 60deg,
            hsl(190 80% 60% / 0.1) 120deg,
            transparent 180deg,
            hsl(45 80% 60% / 0.1) 240deg,
            transparent 300deg);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: vortexSpin 30s linear infinite;
}

[data-theme="astral-void"] .navigation-bar > * {
    position: relative;
    z-index: 1;
}

@keyframes vortexSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Orbiting Arcane Spheres */
[data-theme="astral-void"] .navigation-bar::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 500px; height: 500px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: 
        radial-gradient(circle at 50% 0%, 
            hsl(270 100% 70% / 0.6) 0%, 
            hsl(190 100% 60% / 0.3) 4px, 
            transparent 5px),
        radial-gradient(circle at 100% 50%, 
            hsl(45 100% 70% / 0.6) 0%, 
            hsl(45 100% 60% / 0.3) 4px, 
            transparent 5px),
        radial-gradient(circle at 50% 100%, 
            hsl(320 100% 70% / 0.6) 0%, 
            hsl(320 100% 60% / 0.3) 4px, 
            transparent 5px),
        radial-gradient(circle at 0% 50%, 
            hsl(190 100% 70% / 0.6) 0%, 
            hsl(190 100% 60% / 0.3) 4px, 
            transparent 5px);
    border-radius: 50%;
    animation: orbitSpheres 20s linear infinite;
}

@keyframes orbitSpheres {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Schwebende Runen im Hintergrund */
[data-theme="astral-void"] body {
    position: relative;
}

@keyframes floatingRune {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) rotate(90deg) scale(1.1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px) rotate(180deg) scale(1);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-30px) rotate(270deg) scale(1.15);
        opacity: 0.7;
    }
}

[data-theme="astral-void"] .page-wrapper::before {
    content: '⛤ ☤ ✧ ⛧ ⚝ ⚹ ✦ ⛤ ☤ ✧ ⛧ ⚝ ⚹';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    font-size: 20px;
    color: hsl(270 80% 50% / 0.15);
    word-spacing: 80px;
    line-height: 150px;
    text-align: justify;
    animation: floatingRune 15s ease-in-out infinite;
    overflow: hidden;
}

/* Arcane Sigil Overlay */
@keyframes sigilPulse {
    0%, 100% { opacity: 0.03; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.08; transform: scale(1.1) rotate(180deg); }
}

[data-theme="astral-void"] .page-wrapper::after {
    content: '◈';
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 600px;
    color: hsl(270 80% 50% / 0.05);
    pointer-events: none;
    z-index: 0;
    animation: sigilPulse 10s ease-in-out infinite;
    text-shadow:
        0 0 100px hsl(270 80% 50% / 0.1),
        0 0 200px hsl(190 80% 50% / 0.05);
}

/* Energy Tendrils */
@keyframes tendrilWave {
    0%, 100% {
        transform: rotate(-5deg) scaleY(1);
        opacity: 0.3;
    }
    50% {
        transform: rotate(5deg) scaleY(1.1);
        opacity: 0.6;
    }
}

[data-theme="astral-void"] .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    width: 100%;
    background: 
        linear-gradient(90deg,
            transparent 0%,
            hsl(270 80% 50% / 0.05) 20%,
            hsl(190 80% 50% / 0.08) 50%,
            hsl(270 80% 50% / 0.05) 80%,
            transparent 100%);
    transform: rotate(-5deg) scaleY(1);
    pointer-events: none;
    animation: tendrilWave 4s ease-in-out infinite;
    transform-origin: top center;
}

/* Cosmic Dust Particles */
@keyframes cosmicDust {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translateX(100px) translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

/* Aurora-Cosmic-Gradient am oberen Rand */
[data-theme="astral-void"] body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 300px;
    pointer-events: none;
    z-index: 9998;
    background: linear-gradient(
        180deg,
        hsl(270 80% 50% / 0.15) 0%,
        hsl(190 70% 50% / 0.1) 30%,
        hsl(45 70% 50% / 0.08) 50%,
        hsl(320 70% 50% / 0.05) 70%,
        transparent 100%
    );
    animation: auroraShift 20s ease-in-out infinite;
}

@keyframes auroraShift {
    0%, 100% { opacity: 0.6; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.2); }
}

/* Meteor Shower – gelegentliche Sternschnuppen */
@keyframes meteorShower {
    0% {
        transform: translateX(-100px) translateY(-100px);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px));
        opacity: 0;
    }
}

[data-theme="astral-void"] body:hover::before {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, hsl(45 90% 90% / 0.9) 0%, transparent 100%),
        radial-gradient(2px 2px at 35% 55%, hsl(190 80% 95% / 0.8) 0%, transparent 100%),
        radial-gradient(2.5px 2.5px at 55% 15%, hsl(270 70% 95% / 0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 45%, hsl(45 80% 88% / 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 85% 75%, hsl(190 70% 95% / 0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 25% 85%, hsl(320 70% 88% / 0.7) 0%, transparent 100%),
        radial-gradient(2px 2px at 65% 65%, hsl(45 90% 92% / 0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 35%, hsl(190 80% 88% / 0.9) 0%, transparent 100%);
}

/* Pulsierender Glow auf Cards */
[data-theme="astral-void"] .card {
    animation: cardPulse 4s ease-in-out infinite;
}

@keyframes cardPulse {
    0%, 100% {
        box-shadow:
            0 0 20px hsl(270 70% 40% / 0.1),
            0 0 40px hsl(190 80% 40% / 0.05),
            inset 0 0 20px hsl(270 60% 30% / 0.03);
    }
    50% {
        box-shadow:
            0 0 30px hsl(270 70% 50% / 0.2),
            0 0 60px hsl(190 80% 50% / 0.1),
            inset 0 0 30px hsl(270 60% 40% / 0.05);
    }
}

[data-theme="astral-void"] .card:hover {
    animation: none;
}

/* Buttons mit Star-Twinkle beim Hover */
[data-theme="astral-void"] .btn-primary::before,
[data-theme="astral-void"] .btn-secondary::before,
[data-theme="astral-void"] .btn-ghost::before {
    content: '✦ ✧ ✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0;
    color: hsl(45 90% 80%);
    text-shadow: 0 0 10px hsl(190 100% 70%);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
}

[data-theme="astral-void"] .btn-primary:hover::before,
[data-theme="astral-void"] .btn-secondary:hover::before,
[data-theme="astral-void"] .btn-ghost:hover::before {
    font-size: 12px;
    opacity: 0.8;
    animation: twinkleSpin 1s linear infinite;
}

@keyframes twinkleSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); letter-spacing: 0; }
    50% { transform: translate(-50%, -50%) rotate(180deg); letter-spacing: 5px; }
    100% { transform: translate(-50%, -50%) rotate(360deg); letter-spacing: 0; }
}

/* Input Focus – Cosmic Ripple */
[data-theme="astral-void"] .input:focus,
[data-theme="astral-void"] .textarea:focus,
[data-theme="astral-void"] select:focus {
    position: relative;
    animation: cosmicRipple 1s ease-out;
}

@keyframes cosmicRipple {
    0% {
        box-shadow:
            0 0 0 0 hsl(190 100% 60% / 0.4),
            0 0 20px hsl(190 90% 50% / 0.3),
            inset 0 0 10px hsl(190 70% 30% / 0.05);
    }
    100% {
        box-shadow:
            0 0 0 8px hsl(190 100% 60% / 0),
            0 0 20px hsl(190 90% 50% / 0.3),
            inset 0 0 10px hsl(190 70% 30% / 0.05);
    }
}

/* Modal – Rotating Cosmic Border */
[data-theme="astral-void"] .modal {
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .modal::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(
        from 0deg,
        hsl(270 80% 60% / 0.3),
        hsl(190 80% 60% / 0.3),
        hsl(45 80% 60% / 0.3),
        hsl(320 80% 60% / 0.3),
        hsl(270 80% 60% / 0.3)
    );
    z-index: -1;
    animation: borderRotate 8s linear infinite;
    border-radius: inherit;
}

@keyframes borderRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Tooltips – Stardust Effect */
[data-theme="astral-void"] .tooltip::before,
[data-theme="astral-void"] .unified-tooltip::before,
[data-theme="astral-void"] .itooltip::before {
    content: '✦';
    position: absolute;
    top: 2px; left: 2px;
    font-size: 8px;
    color: hsl(45 90% 70%);
    animation: stardust 2s ease-in-out infinite;
}

[data-theme="astral-void"] .tooltip::after,
[data-theme="astral-void"] .unified-tooltip::after,
[data-theme="astral-void"] .itooltip::after {
    content: '✦';
    position: absolute;
    bottom: 2px; right: 2px;
    font-size: 8px;
    color: var(--text-primary);
    animation: stardust 2s ease-in-out infinite reverse;
}

@keyframes stardust {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Tab-Buttons – Galactic Glow */
[data-theme="astral-void"] .tab-btn.active {
    position: relative;
    animation: galacticPulse 2s ease-in-out infinite;
}

@keyframes galacticPulse {
    0%, 100% {
        box-shadow:
            0 0 25px hsl(270 80% 55% / 0.5),
            0 0 50px hsl(190 90% 50% / 0.3),
            0 0 80px hsl(45 80% 50% / 0.2);
    }
    50% {
        box-shadow:
            0 0 35px hsl(270 80% 65% / 0.7),
            0 0 70px hsl(190 90% 60% / 0.5),
            0 0 100px hsl(45 80% 60% / 0.3);
    }
}

/* Badges – Pulsing Glow */
[data-theme="astral-void"] .badge,
[data-theme="astral-void"] .chip {
    animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {
    0%, 100% { box-shadow: 0 0 8px hsl(270 80% 50% / 0.2); }
    50% { box-shadow: 0 0 15px hsl(190 80% 60% / 0.4); }
}

/* Progress Bars – Energy Flow */
[data-theme="astral-void"] .progress-fill,
[data-theme="astral-void"] .bar-fill {
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .progress-fill::after,
[data-theme="astral-void"] .bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        hsl(0 0% 100% / 0.3),
        transparent
    );
    animation: energyFlow 2s linear infinite;
}

@keyframes energyFlow {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Links – Star Trail on Hover */
[data-theme="astral-void"] a:hover {
    text-shadow:
        0 0 10px hsl(190 100% 60% / 0.7),
        0 0 20px hsl(270 80% 50% / 0.4);
    position: relative;
}

[data-theme="astral-void"] a::after {
    content: '✧';
    position: absolute;
    font-size: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

[data-theme="astral-void"] a:hover::after {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 4px;
    animation: starPop 0.5s ease-out;
}

@keyframes starPop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.5) rotate(90deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
}

/* Cursor Glow Effect */
[data-theme="astral-void"] *:hover {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%2300c0ff' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%2300c0ff' opacity='0.8'/%3E%3C/svg%3E"), auto;
}

/* Select Dropdown – Cosmic Arrow Animation */
[data-theme="astral-void"] select:hover,
[data-theme="astral-void"] .select:hover {
    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='%2300c0ff' 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"),
                      radial-gradient(circle at 90% 50%, hsl(190 100% 60% / 0.2) 0%, transparent 50%);
}

/* Attribute Cards – Orbital Effect */
[data-theme="astral-void"] .attribute-card {
    position: relative;
}

[data-theme="astral-void"] .attribute-card::before {
    content: '';
    position: absolute;
    top: -5px; right: -5px;
    width: 10px; height: 10px;
    background: hsl(45 90% 70%);
    border-radius: 50%;
    box-shadow:
        0 0 10px hsl(45 90% 70%),
        0 0 20px hsl(45 90% 70% / 0.5);
    animation: orbitalDot 4s linear infinite;
}

@keyframes orbitalDot {
    0% { transform: rotate(0deg) translateX(5px) rotate(0deg); opacity: 1; }
    50% { opacity: 0.5; }
    100% { transform: rotate(360deg) translateX(5px) rotate(-360deg); opacity: 1; }
}

/* Subtle Grid Overlay */
[data-theme="astral-void"] .card,
[data-theme="astral-void"] .modal,
[data-theme="astral-void"] .widget-tile {
    background-image:
        linear-gradient(hsl(270 70% 50% / 0.02) 1px, transparent 1px),
        linear-gradient(90deg, hsl(270 70% 50% / 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Focus Ring – Cosmic */
[data-theme="astral-void"] *:focus-visible {
    outline: 2px solid hsl(190 100% 60%);
    outline-offset: 2px;
    box-shadow:
        0 0 15px hsl(190 100% 60% / 0.4),
        0 0 30px hsl(270 80% 50% / 0.2);
}

/* Scrollbar – Star Track */
[data-theme="astral-void"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="astral-void"] ::-webkit-scrollbar-track {
    background:
        linear-gradient(180deg,
            hsl(270 40% 5% / 0.6),
            hsl(190 40% 5% / 0.4));
    background-image:
        linear-gradient(hsl(270 40% 5% / 0.6), hsl(190 40% 5% / 0.4)),
        radial-gradient(circle at 50% 0%, hsl(190 80% 50% / 0.3) 0%, transparent 50%);
    background-size: 100% 100%, 100% 20px;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – ARCANE SPHERE ZUSÄTZLICHE EFFEKTE
   ═══════════════════════════════════════════════════════════════ */

/* Schwebende kosmische Kugeln */
@keyframes floatOrb {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-30px) translateX(10px) scale(1.1);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-15px) translateX(-5px) scale(0.95);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-40px) translateX(15px) scale(1.05);
        opacity: 0.8;
    }
}

/* Arcane Portal Ringe */
@keyframes portalRing {
    0% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg) scale(2);
        opacity: 0;
    }
}

/* Mystischer Nebel */
@keyframes mysticMist {
    0%, 100% {
        transform: translateX(-5%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(5%) scale(1.1);
        opacity: 0.5;
    }
}

/* Ley Line Energy */
@keyframes leyLine {
    0%, 100% {
        stroke-dashoffset: 1000;
        opacity: 0.2;
    }
    50% {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
}

/* Crystal Shatter Effect */
@keyframes crystalShatter {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5) rotate(180deg);
        opacity: 0;
    }
}

/* Schwebende Partikel */
@keyframes particleFloat {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Energy Core Pulse */
@keyframes corePulse {
    0%, 100% {
        box-shadow:
            inset 0 0 30px hsl(270 80% 50% / 0.3),
            0 0 50px hsl(270 80% 50% / 0.2),
            0 0 80px hsl(190 80% 50% / 0.1);
    }
    50% {
        box-shadow:
            inset 0 0 50px hsl(190 100% 60% / 0.4),
            0 0 80px hsl(270 100% 60% / 0.3),
            0 0 120px hsl(45 80% 50% / 0.2);
    }
}

/* Arcane Circle Rotation */
@keyframes arcaneRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes arcaneRotateReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Magischer Glitch */
@keyframes magicGlitch {
    0%, 100% {
        transform: translate(0);
        filter: none;
    }
    20% {
        transform: translate(-2px, 2px);
        filter: hue-rotate(90deg);
    }
    40% {
        transform: translate(2px, -2px);
        filter: hue-rotate(180deg);
    }
    60% {
        transform: translate(-1px, -1px);
        filter: hue-rotate(270deg);
    }
    80% {
        transform: translate(1px, 1px);
        filter: hue-rotate(0deg);
    }
}

/* Sternenregen */
@keyframes starRain {
    0% {
        transform: translateY(-100%) translateX(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% {
        transform: translateY(100vh) translateX(50px);
        opacity: 0;
    }
}

/* Ethereal Glow */
@keyframes etherealGlow {
    0%, 100% {
        text-shadow:
            0 0 5px currentColor,
            0 0 10px currentColor,
            0 0 20px currentColor;
    }
    50% {
        text-shadow:
            0 0 10px currentColor,
            0 0 20px currentColor,
            0 0 40px currentColor,
            0 0 80px currentColor;
    }
}

/* Portal Warp Effect für Inputs */
[data-theme="astral-void"] .input:focus,
[data-theme="astral-void"] textarea:focus {
    position: relative;
    animation: portalWarp 2s ease-in-out infinite;
}

@keyframes portalWarp {
    0%, 100% {
        box-shadow:
            0 0 20px hsl(270 80% 50% / 0.4),
            0 0 40px hsl(190 80% 50% / 0.3),
            inset 0 0 20px hsl(270 70% 30% / 0.1);
    }
    33% {
        box-shadow:
            0 0 30px hsl(190 100% 60% / 0.5),
            0 0 60px hsl(45 80% 50% / 0.4),
            inset 0 0 30px hsl(190 70% 30% / 0.15);
    }
    66% {
        box-shadow:
            0 0 25px hsl(320 80% 50% / 0.45),
            0 0 50px hsl(270 100% 60% / 0.35),
            inset 0 0 25px hsl(320 70% 30% / 0.12);
    }
}

/* Modal – Teleport Effect */
[data-theme="astral-void"] .modal {
    animation: modalTeleport 0.5s ease-out;
    transform-origin: center center;
}

@keyframes modalTeleport {
    0% {
        transform: scale(0.8) translateY(-50px);
        opacity: 0;
        filter: blur(10px);
    }
    50% {
        filter: blur(5px);
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Button – Mana Charge Effect */
[data-theme="astral-void"] .btn-primary,
[data-theme="astral-void"] .btn-secondary,
[data-theme="astral-void"] .btn-gm {
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .btn-primary::after,
[data-theme="astral-void"] .btn-secondary::after,
[data-theme="astral-void"] .btn-gm::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: radial-gradient(circle,
        hsl(190 100% 70% / 0.6) 0%,
        transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    pointer-events: none;
}

[data-theme="astral-void"] .btn-primary:hover::after,
[data-theme="astral-void"] .btn-secondary:hover::after,
[data-theme="astral-void"] .btn-gm:hover::after {
    width: 300px; height: 300px;
}

/* Card – Hover Portal Effect */
[data-theme="astral-void"] .card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-theme="astral-void"] .card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow:
        0 20px 40px hsl(270 80% 50% / 0.3),
        0 0 60px hsl(190 80% 50% / 0.2),
        inset 0 0 30px hsl(270 70% 40% / 0.1);
}

/* Tabs – Constellation Connection */
[data-theme="astral-void"] .tab-btn.active::before {
    content: '';
    position: absolute;
    top: -2px; left: 50%;
    width: 6px; height: 6px;
    background: hsl(45 100% 70%);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow:
        0 0 10px hsl(45 100% 70%),
        0 0 20px hsl(45 100% 60% / 0.5);
    animation: constellationPulse 2s ease-in-out infinite;
}

@keyframes constellationPulse {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50% { transform: translateX(-50%) scale(1.5); opacity: 0.7; }
}

/* Progress – Mana Flow */
[data-theme="astral-void"] .progress-fill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        hsl(0 0% 100% / 0.4) 50%,
        transparent 100%
    );
    animation: manaFlow 1.5s ease-in-out infinite;
}

@keyframes manaFlow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

/* Widgets – Arcane Glyph */
[data-theme="astral-void"] .widget-tile::before {
    content: '✧';
    position: absolute;
    top: 5px; right: 5px;
    font-size: 10px;
    color: hsl(270 80% 60% / 0.5);
    animation: glyphSpin 10s linear infinite;
}

@keyframes glyphSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Login – Magical Gateway */
[data-theme="astral-void"] .login-container {
    position: relative;
}

[data-theme="astral-void"] .login-container::before {
    content: '';
    position: absolute;
    inset: -50px;
    background: 
        conic-gradient(from 0deg at 50% 50%,
            hsl(270 80% 50% / 0.1) 0deg,
            transparent 60deg,
            hsl(190 80% 50% / 0.1) 120deg,
            transparent 180deg,
            hsl(45 80% 50% / 0.1) 240deg,
            transparent 300deg,
            hsl(270 80% 50% / 0.1) 360deg);
    animation: arcaneRotate 20s linear infinite;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}

[data-theme="astral-void"] .login-container::after {
    content: '';
    position: absolute;
    inset: -30px;
    background: 
        conic-gradient(from 180deg at 50% 50%,
            hsl(320 80% 50% / 0.1) 0deg,
            transparent 60deg,
            hsl(45 80% 50% / 0.1) 120deg,
            transparent 180deg,
            hsl(190 80% 50% / 0.1) 240deg,
            transparent 300deg,
            hsl(320 80% 50% / 0.1) 360deg);
    animation: arcaneRotateReverse 15s linear infinite;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}

/* Character Name – Astral Projection */
[data-theme="astral-void"] #charNameLabel,
[data-theme="astral-void"] .character-name,
[data-theme="astral-void"] .char-name {
    position: relative;
    animation: astralProjection 3s ease-in-out infinite;
}

@keyframes astralProjection {
    0%, 100% {
        text-shadow:
            0 0 12px hsl(190 100% 60% / 0.6),
            0 0 30px hsl(190 100% 50% / 0.35),
            0 0 50px hsl(270 80% 50% / 0.2);
        transform: translateX(0);
    }
    25% {
        text-shadow:
            0 0 20px hsl(190 100% 70% / 0.8),
            0 0 40px hsl(190 100% 60% / 0.5),
            0 0 60px hsl(45 80% 50% / 0.3);
    }
    75% {
        text-shadow:
            0 0 15px hsl(270 100% 70% / 0.7),
            0 0 35px hsl(270 100% 60% / 0.4),
            0 0 55px hsl(320 80% 50% / 0.25);
    }
}

/* Attribute Card – Energy Orbiting */
[data-theme="astral-void"] .attribute-card {
    position: relative;
}

[data-theme="astral-void"] .attribute-card::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 80px; height: 80px;
    transform: translate(-50%, -50%);
    border: 1px solid hsl(270 80% 50% / 0.2);
    border-radius: 50%;
    animation: orbitRing 6s linear infinite;
    pointer-events: none;
}

@keyframes orbitRing {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg); }
}

/* Links – Warp Trail */
[data-theme="astral-void"] a {
    position: relative;
    transition: all 0.3s ease;
}

[data-theme="astral-void"] a::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg,
        transparent,
        hsl(190 100% 60% / 0.6),
        transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

[data-theme="astral-void"] a:hover::before {
    transform: scaleX(1);
}

/* Badge – Magical Rune Mark */
[data-theme="astral-void"] .badge::before,
[data-theme="astral-void"] .chip::before,
[data-theme="astral-void"] .tag::before {
    content: '◈';
    margin-right: 4px;
    font-size: 0.8em;
    opacity: 0.7;
}

/* Subtle Scanlines für CRT-Arcane-Feeling */
[data-theme="astral-void"] body::before {
    background: repeating-linear-gradient(
        0deg,
        hsl(270 50% 2% / 0.02) 0px,
        hsl(270 50% 2% / 0.02) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 9997;
}

/* ═══════════════════════════════════════════════════════════════════════
   ASTRAL VOID – TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] h1,
[data-theme="astral-void"] h2,
[data-theme="astral-void"] h3 {
    color: hsl(190 100% 80%);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow:
        0 0 8px hsl(190 100% 60% / 0.6),
        0 0 20px hsl(190 100% 50% / 0.4),
        0 0 40px hsl(270 80% 50% / 0.25);
    border-bottom: 1px solid hsl(270 70% 50% / 0.3);
    padding-bottom: var(--space-2);
    animation: headerGlow 4s ease-in-out infinite;
}

[data-theme="astral-void"] h4,
[data-theme="astral-void"] h5,
[data-theme="astral-void"] h6 {
    color: hsl(270 80% 70%);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow:
        0 0 6px hsl(270 100% 60% / 0.5),
        0 0 15px hsl(270 100% 50% / 0.3);
    border-bottom: 1px solid hsl(270 70% 40% / 0.2);
    padding-bottom: var(--space-1);
}

@keyframes headerGlow {
    0%, 100% {
        text-shadow:
            0 0 8px hsl(190 100% 60% / 0.6),
            0 0 20px hsl(190 100% 50% / 0.4),
            0 0 40px hsl(270 80% 50% / 0.25);
    }
    50% {
        text-shadow:
            0 0 12px hsl(190 100% 70% / 0.8),
            0 0 30px hsl(190 100% 60% / 0.5),
            0 0 55px hsl(270 80% 60% / 0.35);
    }
}

[data-theme="astral-void"] .tab_btn.active-tab .tab_Icon {
    filter: var(--icon-filter-bright);
}

[data-theme="astral-void"] .navigation-bar .icon,
[data-theme="astral-void"] .tab_btn:hover .icon,
[data-theme="astral-void"] .tab-btn:hover .icon,
[data-theme="astral-void"] .tab-btn .icon,
[data-theme="astral-void"] .tab-btn.active .icon,
[data-theme="astral-void"] .tab_btn .icon,
[data-theme="astral-void"] .tab_btn.active .icon,
[data-theme="astral-void"] .btn-icon .icon,
[data-theme="astral-void"] .btn .icon,
[data-theme="astral-void"] .modal-close .icon,
[data-theme="astral-void"] .widget-card-icon .icon,
[data-theme="astral-void"] .file-label .icon,
[data-theme="astral-void"] .btn-fab .icon,
[data-theme="astral-void"] .skill-widget-icon .icon,
[data-theme="astral-void"] .skill-icon-container .icon,
[data-theme="astral-void"] .widget-icon,
[data-theme="astral-void"] .activity-icon,
[data-theme="astral-void"] .add-icon,
[data-theme="astral-void"] .icon-themed,
[data-theme="astral-void"] .icon,
[data-theme="astral-void"] .tab_Icon,
[data-theme="astral-void"] .bereich-icon {
    filter: var(--icon-filter);
}

[data-theme="astral-void"] .skill-widget-icon {
    background-color: hsl(270 60% 15%);
}

[data-theme="astral-void"] .skill-icon-container img,
[data-theme="astral-void"] .activity-icon-container img,
[data-theme="astral-void"] .activity-icon,
[data-theme="astral-void"] .widget-icon,
[data-theme="astral-void"] .widget-tile .activity-icon,
[data-theme="astral-void"] .widget-tile:hover .activity-icon {
    filter: var(--icon-filter) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ASTRAL VOID – EXTRA COSMIC ATMOSPHERE
   ═══════════════════════════════════════════════════════════════ */

[data-theme="astral-void"] body {
    background-image:
        radial-gradient(ellipse at 20% 30%, hsl(270 70% 20% / 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, hsl(190 70% 15% / 0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, hsl(320 60% 18% / 0.08) 0%, transparent 45%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='starNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23starNoise)' opacity='0.05'/%3E%3C/svg%3E"),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 1px,
            hsl(270 50% 2% / 0.015) 1px,
            transparent 2px
        );
    background-size: 100%, 100%, 100%, 200px 200px, 3px 3px;
    background-attachment: fixed;
    position: relative;
}

[data-theme="astral-void"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: 
        radial-gradient(ellipse at 15% 25%, hsla(270 100% 70% / 0.03) 0%, transparent 35%),
        radial-gradient(ellipse at 85% 75%, hsla(190 100% 70% / 0.02) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 50%, hsla(320 100% 70% / 0.02) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

/* Pulsating Stars Background */
@keyframes starPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

[data-theme="astral-void"] .star-field {
    position: fixed;
    inset: 0;
    background-image: 
        radial-gradient(1px 1px at 10% 20%, hsl(45 80% 85% / 0.6) 50%, transparent 50%),
        radial-gradient(1px 1px at 30% 60%, hsl(45 80% 85% / 0.4) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 55% 15%, hsl(190 80% 85% / 0.5) 50%, transparent 50%),
        radial-gradient(1px 1px at 70% 40%, hsl(45 80% 85% / 0.6) 50%, transparent 50%),
        radial-gradient(1px 1px at 90% 80%, hsl(190 80% 85% / 0.4) 50%, transparent 50%),
        radial-gradient(1.5px 1.5px at 25% 85%, hsl(270 80% 85% / 0.5) 50%, transparent 50%),
        radial-gradient(1px 1px at 45% 45%, hsl(320 80% 85% / 0.6) 50%, transparent 50%),
        radial-gradient(1px 1px at 65% 25%, hsl(45 80% 85% / 0.3) 50%, transparent 50%);
    background-size: 250px 250px;
    animation: starPulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: -2;
}

/* Enhanced Modal with Cosmic Glow */
[data-theme="astral-void"] .modal {
    border: 1px solid hsl(270 70% 50% / 0.4);
    box-shadow:
        0 0 30px hsla(270 80% 60% / 0.15),
        0 0 60px hsla(190 90% 60% / 0.08),
        inset 0 0 30px hsla(270 80% 60% / 0.03);
    background: linear-gradient(180deg,
        hsl(270 50% 4% / 0.98) 0%,
        hsl(270 40% 6% / 0.99) 100%);
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, hsla(270 100% 70% / 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 70% 80%, hsla(190 100% 70% / 0.03) 0%, transparent 35%);
    pointer-events: none;
}

/* Enhanced Cards with Cosmic Border */
[data-theme="astral-void"] .card {
    border: 1px solid hsl(270 70% 40% / 0.25);
    box-shadow:
        0 0 15px hsla(270 80% 60% / 0.08),
        inset 0 0 20px hsla(270 80% 60% / 0.02);
    background: linear-gradient(180deg,
        hsl(270 40% 6% / 0.95) 0%,
        hsl(270 35% 8% / 0.98) 100%);
}

[data-theme="astral-void"] .card::before {
    background: linear-gradient(90deg,
        transparent,
        hsl(270 80% 60% / 0.4),
        hsl(190 100% 60% / 0.3),
        transparent);
}

/* Character Card Cosmic Enhancement */
[data-theme="astral-void"] .character-card {
    background: linear-gradient(180deg,
        hsl(270 45% 5% / 0.98) 0%,
        hsl(270 35% 8% / 0.99) 100%);
    border: 1px solid hsl(270 70% 45% / 0.3);
    position: relative;
}

[data-theme="astral-void"] .character-card::before {
    background: linear-gradient(90deg,
        transparent,
        hsl(270 80% 60% / 0.5),
        hsl(190 100% 60% / 0.35),
        transparent);
}

[data-theme="astral-void"] .character-card-avatar {
    border: 2px solid hsl(270 70% 50% / 0.5);
    box-shadow:
        0 0 0 1px hsla(270 80% 60% / 0.2),
        0 0 15px hsla(270 80% 60% / 0.3);
}

/* Enhanced Buttons */
[data-theme="astral-void"] .btn-primary {
    background: linear-gradient(180deg,
        hsl(270 70% 45%) 0%,
        hsl(270 60% 35%) 100%);
    border: 1px solid hsl(190 100% 60% / 0.5);
    box-shadow:
        0 0 15px hsla(270 80% 60% / 0.25),
        inset 0 0 12px hsla(190 100% 60% / 0.08);
}

[data-theme="astral-void"] .btn-primary:hover {
    background: linear-gradient(180deg,
        hsl(270 70% 55%) 0%,
        hsl(270 60% 45%) 100%);
    box-shadow:
        0 0 25px hsla(270 80% 60% / 0.45),
        0 0 50px hsla(190 90% 60% / 0.2),
        inset 0 0 18px hsla(190 100% 60% / 0.12);
}

/* Enhanced Progress Bars */
[data-theme="astral-void"] .progress-container,
[data-theme="astral-void"] .progress,
[data-theme="astral-void"] progress {
    background: hsl(270 30% 10%);
    border: 1px solid hsl(270 70% 40% / 0.4);
    box-shadow:
        0 0 8px hsla(270 80% 60% / 0.15),
        inset 0 0 5px hsla(0 0% 0% / 0.5);
}

[data-theme="astral-void"] .progress-fill,
[data-theme="astral-void"] .bar-fill {
    background: linear-gradient(90deg,
        hsl(270 80% 45%),
        hsl(190 100% 60%));
    box-shadow: 0 0 10px hsla(270 80% 60% / 0.5);
}

[data-theme="astral-void"] .health-bar {
    background: linear-gradient(90deg,
        hsl(270 80% 40%),
        hsl(320 70% 50%));
    box-shadow: 0 0 10px hsla(320 80% 50% / 0.5);
}

[data-theme="astral-void"] .magic-bar {
    background: linear-gradient(90deg,
        hsl(190 80% 40%),
        hsl(270 70% 55%));
    box-shadow: 0 0 10px hsla(190 100% 60% / 0.5);
}

/* Enhanced Widget Tiles */
[data-theme="astral-void"] .widget-tile {
    background: linear-gradient(180deg,
        hsl(270 35% 8% / 0.92) 0%,
        hsl(270 30% 10% / 0.96) 100%);
    border: 1px solid hsl(270 70% 40% / 0.2);
    box-shadow: 0 0 12px hsla(270 80% 60% / 0.06);
}

[data-theme="astral-void"] .widget-tile:hover {
    border-color: hsl(270 70% 50% / 0.45);
    box-shadow:
        0 0 20px hsla(270 80% 60% / 0.18),
        inset 0 0 15px hsla(270 80% 60% / 0.04);
}

/* Enhanced Tooltips */
[data-theme="astral-void"] .tooltip,
[data-theme="astral-void"] .unified-tooltip,
[data-theme="astral-void"] .itooltip,
[data-theme="astral-void"] .skilltooltip,
[data-theme="astral-void"] #item-tooltip {
    background-color: hsl(270 50% 5%);
    border: 1px solid hsl(270 70% 50% / 0.45);
    box-shadow:
        0 0 20px hsla(270 80% 60% / 0.2),
        0 0 45px hsla(190 90% 60% / 0.08),
        inset 0 0 15px hsla(270 80% 60% / 0.03);
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .tooltip::before,
[data-theme="astral-void"] .unified-tooltip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, hsla(270 100% 70% / 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 70%, hsla(190 100% 70% / 0.03) 0%, transparent 35%);
    pointer-events: none;
}

/* Enhanced Attribute Cards */
[data-theme="astral-void"] .attribute-card {
    background: linear-gradient(180deg,
        hsl(270 40% 6% / 0.95) 0%,
        hsl(270 35% 8% / 0.98) 100%);
    border: 1px solid hsl(270 70% 40% / 0.25);
}

[data-theme="astral-void"] .attribute-card:hover {
    border-color: hsl(270 70% 55% / 0.5);
    box-shadow:
        0 0 20px hsla(270 80% 60% / 0.2),
        inset 0 0 15px hsla(270 80% 60% / 0.03);
}

[data-theme="astral-void"] .attribute-icon-container {
    background: linear-gradient(135deg,
        hsl(270 60% 15%) 0%,
        hsl(190 70% 12%) 100%);
    border: 1px solid hsl(270 70% 45% / 0.35);
    box-shadow:
        0 0 8px hsla(270 80% 60% / 0.2),
        inset 0 0 6px hsla(0 0% 0% / 0.3);
}

/* Enhanced Roll Button with Cosmic Energy */
[data-theme="astral-void"] .roll-button {
    background: linear-gradient(180deg,
        hsl(270 60% 20%) 0%,
        hsl(270 50% 15%) 100%);
    border: 1px solid hsl(190 100% 60% / 0.5);
    box-shadow:
        0 0 12px hsla(270 80% 60% / 0.2),
        inset 0 0 8px hsla(190 100% 60% / 0.05);
}

[data-theme="astral-void"] .roll-button:hover {
    background: linear-gradient(180deg,
        hsl(270 65% 30%) 0%,
        hsl(270 55% 22%) 100%);
    box-shadow:
        0 0 20px hsla(270 80% 60% / 0.4),
        0 0 40px hsla(190 90% 60% / 0.15),
        inset 0 0 15px hsla(190 100% 60% / 0.08);
}

[data-theme="astral-void"] .roll-result {
    background: hsl(270 35% 8% / 0.92);
    border: 1px solid hsl(270 70% 45% / 0.35);
    box-shadow:
        0 0 12px hsla(270 80% 60% / 0.15),
        inset 0 0 10px hsla(0 0% 0% / 0.3);
}

[data-theme="astral-void"] .roll-result:not(:empty) {
    box-shadow:
        0 0 18px hsla(270 80% 60% / 0.35),
        0 0 40px hsla(190 90% 60% / 0.15),
        inset 0 0 12px hsla(190 100% 60% / 0.06);
}

/* Login Container Cosmic Enhancement */
[data-theme="astral-void"] .login-container {
    background: linear-gradient(180deg,
        hsl(270 50% 4% / 0.98) 0%,
        hsl(270 40% 6% / 0.99) 100%);
    border: 1px solid hsl(270 70% 50% / 0.5);
    box-shadow:
        0 0 40px hsla(270 80% 60% / 0.15),
        0 0 80px hsla(190 90% 60% / 0.08),
        inset 0 0 30px hsla(270 80% 60% / 0.03);
    position: relative;
    overflow: hidden;
}

[data-theme="astral-void"] .login-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 30% 20%, hsla(270 100% 70% / 0.06) 0%, transparent 45%),
        radial-gradient(ellipse at 70% 80%, hsla(190 100% 70% / 0.04) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, hsla(320 100% 70% / 0.03) 0%, transparent 35%);
    pointer-events: none;
}

/* Enhanced Scrollbars */
[data-theme="astral-void"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
        hsl(270 60% 25%) 0%,
        hsl(270 50% 20%) 100%);
    border: 1px solid hsl(270 70% 45% / 0.4);
    box-shadow: 0 0 8px hsla(270 80% 60% / 0.25);
}

/* ==========================================================================
   ASTRAL VOID REVERENCE UPLIFT
   Keep palette, deepen the mystery.
   ========================================================================= */

@keyframes astralVeil {
    0%, 100% {
        opacity: 0.34;
        transform: translateX(0) translateY(0) scale(1);
    }
    50% {
        opacity: 0.52;
        transform: translateX(1.5%) translateY(-1%) scale(1.03);
    }
}

@keyframes eventHorizon {
    0%, 100% {
        opacity: 0.16;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.28;
        transform: scale(1.04);
    }
}

@keyframes voidShimmer {
    0% {
        transform: translateX(-140%) skewX(-18deg);
        opacity: 0;
    }
    20% {
        opacity: 0.42;
    }
    100% {
        transform: translateX(280%) skewX(-18deg);
        opacity: 0;
    }
}

@keyframes runeDrift {
    0%, 100% {
        opacity: 0.18;
        transform: translateY(0);
    }
    50% {
        opacity: 0.34;
        transform: translateY(-4px);
    }
}

@keyframes arcaneMist {
    0%, 100% {
        opacity: 0.34;
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        opacity: 0.5;
        transform: translate3d(1.5%, -1%, 0) scale(1.03);
    }
    66% {
        opacity: 0.42;
        transform: translate3d(-1%, 1.2%, 0) scale(1.05);
    }
}

body[data-theme="astral-void"] {
    background-image:
        radial-gradient(circle at 50% 42%, hsl(190 100% 70% / 0.08) 0%, transparent 18%),
        radial-gradient(circle at 50% 42%, hsl(270 100% 70% / 0.12) 0%, transparent 28%),
        radial-gradient(circle at 18% 18%, hsl(270 80% 25% / 0.42) 0%, transparent 30%),
        radial-gradient(circle at 82% 72%, hsl(190 80% 20% / 0.34) 0%, transparent 28%),
        radial-gradient(circle at 64% 16%, hsl(320 70% 22% / 0.22) 0%, transparent 20%),
        conic-gradient(from 0deg at 50% 50%, transparent 0deg, hsl(270 50% 15% / 0.12) 40deg, transparent 82deg, hsl(190 50% 15% / 0.1) 148deg, transparent 220deg, hsl(320 50% 15% / 0.12) 286deg, transparent 360deg),
        radial-gradient(1px 1px at 20px 30px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 40px 70px, hsl(190 60% 85% / 0.8), transparent),
        radial-gradient(1px 1px at 50px 160px, hsl(45 80% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, hsl(270 70% 90% / 0.8), transparent),
        radial-gradient(1px 1px at 130px 80px, hsl(45 80% 85% / 0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, hsl(190 60% 90% / 0.9), transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, hsl(45 80% 95% / 0.8), transparent),
        radial-gradient(1px 1px at 220px 150px, hsl(320 70% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 260px 90px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 300px 180px, hsl(190 60% 88% / 0.8), transparent),
        radial-gradient(2px 2px at 100px 200px, hsl(45 80% 90% / 0.7), transparent),
        radial-gradient(2px 2px at 180px 250px, hsl(190 70% 88% / 0.6), transparent),
        radial-gradient(1.5px 1.5px at 250px 280px, hsl(270 70% 92% / 0.8), transparent),
        radial-gradient(2px 2px at 320px 220px, hsl(45 80% 88% / 0.7), transparent),
        radial-gradient(ellipse 80% 60% at 20% 30%, hsl(270 70% 25% / 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 70%, hsl(190 70% 20% / 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 60% 20%, hsl(320 70% 25% / 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 40% 80%, hsl(45 50% 20% / 0.15) 0%, transparent 70%);
}

body[data-theme="astral-void"]::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 44%, hsl(190 100% 70% / 0.08) 0%, transparent 14%),
        radial-gradient(circle at 50% 44%, hsl(270 100% 70% / 0.1) 0%, transparent 24%),
        linear-gradient(135deg, transparent 0%, hsl(270 100% 80% / 0.05) 42%, transparent 62%);
    mix-blend-mode: screen;
    animation: eventHorizon 14s ease-in-out infinite;
}

body[data-theme="astral-void"] .app-shell::before,
body[data-theme="astral-void"] #main::before,
body[data-theme="astral-void"] .character-sheet::before,
body[data-theme="astral-void"] #div_page_container::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 36% 28% at 18% 32%, hsl(270 100% 68% / 0.12) 0%, transparent 72%),
        radial-gradient(ellipse 42% 30% at 78% 26%, hsl(190 100% 68% / 0.1) 0%, transparent 74%),
        radial-gradient(ellipse 34% 24% at 58% 74%, hsl(320 86% 66% / 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 48% 34% at 42% 46%, hsl(250 90% 70% / 0.08) 0%, transparent 76%),
        radial-gradient(ellipse 54% 32% at 52% 52%, hsl(190 90% 74% / 0.05) 0%, transparent 78%);
    filter: blur(28px) saturate(120%);
    mix-blend-mode: screen;
    animation: arcaneMist 24s ease-in-out infinite;
}

[data-theme="astral-void"] body::before {
    animation: starFloat 60s linear infinite, astralVeil 18s ease-in-out infinite;
}

[data-theme="astral-void"] .card,
[data-theme="astral-void"] .card-glass,
[data-theme="astral-void"] .character-card,
[data-theme="astral-void"] .widget-tile,
[data-theme="astral-void"] .attribute-card,
[data-theme="astral-void"] .character-item,
[data-theme="astral-void"] .login-container,
[data-theme="astral-void"] .modal,
[data-theme="astral-void"] .story-note-item,
[data-theme="astral-void"] .spell-tile,
[data-theme="astral-void"] .buff-tile,
[data-theme="astral-void"] .item-tile,
[data-theme="astral-void"] .currency-tile {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, hsl(270 38% 10% / 0.78), transparent 24%),
        linear-gradient(135deg, hsl(270 38% 7% / 0.96), hsl(242 26% 10% / 0.98) 54%, hsl(275 28% 12% / 0.98) 100%);
    border: 1px solid hsl(270 70% 45% / 0.24);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 78% / 0.08),
        inset 0 -28px 40px hsl(0 0% 0% / 0.22),
        0 20px 38px hsl(0 0% 0% / 0.34),
        0 0 34px hsl(270 80% 50% / 0.1);
}

[data-theme="astral-void"] .card::before,
[data-theme="astral-void"] .card-glass::before,
[data-theme="astral-void"] .character-card::before,
[data-theme="astral-void"] .widget-tile::before,
[data-theme="astral-void"] .attribute-card::before,
[data-theme="astral-void"] .character-item::before,
[data-theme="astral-void"] .login-container::before,
[data-theme="astral-void"] .modal::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 16%, hsl(190 100% 70% / 0.08), transparent 24%),
        radial-gradient(circle at 82% 24%, hsl(270 100% 74% / 0.08), transparent 20%),
        radial-gradient(circle at 52% 82%, hsl(320 80% 66% / 0.05), transparent 24%);
    pointer-events: none;
}

[data-theme="astral-void"] .card::after,
[data-theme="astral-void"] .character-card::after,
[data-theme="astral-void"] .widget-tile::after,
[data-theme="astral-void"] .attribute-card::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    background: linear-gradient(
        90deg,
        transparent,
        hsl(190 100% 92% / 0.08) 26%,
        hsl(190 100% 88% / 0.36) 48%,
        hsl(270 100% 80% / 0.18) 60%,
        transparent
    );
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
    pointer-events: none;
}

[data-theme="astral-void"] .card:hover,
[data-theme="astral-void"] .card-glass:hover,
[data-theme="astral-void"] .character-card:hover,
[data-theme="astral-void"] .widget-tile:hover,
[data-theme="astral-void"] .attribute-card:hover,
[data-theme="astral-void"] .character-item:hover,
[data-theme="astral-void"] .story-note-item:hover,
[data-theme="astral-void"] .spell-tile:hover,
[data-theme="astral-void"] .buff-tile:hover,
[data-theme="astral-void"] .item-tile:hover,
[data-theme="astral-void"] .currency-tile:hover {
    border-color: hsl(190 90% 60% / 0.38);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 78% / 0.14),
        inset 0 -28px 40px hsl(0 0% 0% / 0.24),
        0 24px 44px hsl(0 0% 0% / 0.38),
        0 0 44px hsl(270 80% 52% / 0.16),
        0 0 80px hsl(190 90% 52% / 0.08);
}

[data-theme="astral-void"] .card:hover::after,
[data-theme="astral-void"] .character-card:hover::after,
[data-theme="astral-void"] .widget-tile:hover::after,
[data-theme="astral-void"] .attribute-card:hover::after {
    animation: voidShimmer 1.2s ease-out forwards;
}

[data-theme="astral-void"] h1,
[data-theme="astral-void"] h2,
[data-theme="astral-void"] h3 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow:
        0 0 12px hsl(190 100% 66% / 0.48),
        0 0 32px hsl(190 100% 56% / 0.26),
        0 0 68px hsl(270 90% 56% / 0.18);
}

[data-theme="astral-void"] h4,
[data-theme="astral-void"] h5,
[data-theme="astral-void"] h6,
[data-theme="astral-void"] .widget-title,
[data-theme="astral-void"] .modal-title {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

[data-theme="astral-void"] .widget-title::after,
[data-theme="astral-void"] .modal-title::after {
    content: ' ✦';
    color: hsl(45 90% 76% / 0.78);
    animation: runeDrift 5s ease-in-out infinite;
}

[data-theme="astral-void"] .navigation-bar,
[data-theme="astral-void"] #div_top_navigation,
[data-theme="astral-void"] #div_right_navigation {
    background:
        linear-gradient(180deg, hsl(270 54% 5% / 0.99), hsl(248 32% 9% / 0.96));
    border-bottom: 1px solid hsl(270 80% 50% / 0.25);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 74% / 0.08),
        0 0 30px hsl(270 80% 50% / 0.12);
    animation: galacticSwirl 8s ease-in-out infinite;
}

[data-theme="astral-void"] .tab_btn,
[data-theme="astral-void"] .tab-btn,
[data-theme="astral-void"] .nav-icon-btn,
[data-theme="astral-void"] .tab_btn_vertical {
    background:
        linear-gradient(180deg, hsl(266 40% 12% / 0.92), hsl(246 26% 10% / 0.95));
    border-color: hsl(270 70% 40% / 0.34);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 76% / 0.06),
        0 10px 18px hsl(0 0% 0% / 0.22);
}

[data-theme="astral-void"] .tab_btn:hover,
[data-theme="astral-void"] .tab-btn:hover,
[data-theme="astral-void"] .nav-icon-btn:hover,
[data-theme="astral-void"] .tab_btn_vertical:hover {
    background:
        linear-gradient(180deg, hsl(270 48% 16% / 0.94), hsl(248 30% 12% / 0.96));
    border-color: hsl(190 90% 60% / 0.48);
    box-shadow:
        0 0 24px hsl(270 80% 50% / 0.22),
        0 0 54px hsl(190 90% 50% / 0.1);
}

[data-theme="astral-void"] .tab_btn.active,
[data-theme="astral-void"] .tab_btn.active-tab,
[data-theme="astral-void"] .tab-btn.active,
[data-theme="astral-void"] .nav-icon-btn.active,
[data-theme="astral-void"] .tab_btn_vertical.active {
    background:
        radial-gradient(circle at 30% 22%, hsl(190 100% 82% / 0.18) 0%, transparent 32%),
        linear-gradient(135deg, hsl(270 80% 50%), hsl(190 90% 50%));
    border-color: hsl(190 100% 60%);
    box-shadow:
        0 0 28px hsl(270 80% 55% / 0.5),
        0 0 60px hsl(190 90% 50% / 0.24);
}

[data-theme="astral-void"] .modal,
[data-theme="astral-void"] .gm-image-modal,
[data-theme="astral-void"] .combat-modal,
[data-theme="astral-void"] .edit-modal-container {
    background:
        linear-gradient(180deg, hsl(270 48% 6% / 0.98), hsl(245 26% 10% / 0.99));
    border: 1px solid hsl(270 80% 50% / 0.34);
    box-shadow:
        0 0 40px hsl(270 80% 50% / 0.16),
        0 0 80px hsl(190 90% 50% / 0.08),
        inset 0 0 30px hsl(270 70% 30% / 0.06);
}

[data-theme="astral-void"] .modal-header {
    background:
        linear-gradient(90deg, hsl(270 80% 50% / 0.16), transparent 60%),
        linear-gradient(180deg, hsl(246 24% 14% / 0.98), hsl(270 34% 10% / 0.94));
}

[data-theme="astral-void"] .tooltip,
[data-theme="astral-void"] .unified-tooltip,
[data-theme="astral-void"] .itooltip,
[data-theme="astral-void"] .skilltooltip,
[data-theme="astral-void"] .attrtooltip,
[data-theme="astral-void"] .stattooltip,
[data-theme="astral-void"] #item-tooltip {
    background:
        linear-gradient(180deg, hsl(270 50% 6% / 0.98), hsl(246 24% 10% / 0.98));
    border: 1px solid hsl(270 70% 50% / 0.46);
    box-shadow:
        0 0 20px hsl(270 80% 60% / 0.22),
        0 0 50px hsl(190 90% 60% / 0.08),
        inset 0 0 18px hsl(270 80% 60% / 0.04);
}

[data-theme="astral-void"] .widget-tile[data-widget-type="attack"] {
    background:
        linear-gradient(180deg, hsl(0 42% 12% / 0.82), hsl(270 24% 12% / 0.94));
    border-color: hsl(0 70% 45% / 0.32);
}

[data-theme="astral-void"] .widget-tile[data-widget-type="skill"] {
    background:
        linear-gradient(180deg, hsl(224 28% 12% / 0.82), hsl(270 28% 12% / 0.94));
}

[data-theme="astral-void"] .widget-tile[data-widget-type="activity"] {
    background:
        linear-gradient(180deg, hsl(270 34% 10% / 0.84), hsl(252 24% 12% / 0.96));
}

[data-theme="astral-void"] .login-container {
    box-shadow:
        0 0 44px hsl(270 80% 60% / 0.16),
        0 0 90px hsl(190 90% 60% / 0.08),
        inset 0 0 34px hsl(270 80% 60% / 0.04);
}

/* ==========================================================================
   ASTRAL VOID ARCANE MANA OVERRIDES
   Lifted, magical, luminous, less oppressive.
   ========================================================================= */

[data-theme="astral-void"] {
    --bg-page: hsl(262 56% 5%);
    --bg-primary: hsl(264 44% 9%);
    --bg-secondary: hsl(264 38% 14% / 0.88);
    --bg-tertiary: hsl(262 34% 12% / 0.95);
    --bg-card: hsl(264 36% 14% / 0.92);
    --bg-hover: hsl(264 40% 20% / 0.56);
    --bg-input: hsl(264 30% 16%);
    --surface-elevated: hsl(264 34% 18%);
    --surface-overlay: hsl(264 38% 20%);
    --surface-panel: hsl(264 30% 16%);
    --text-primary: hsl(192 86% 84%);
    --text-secondary: hsl(192 72% 72%);
    --text-muted: hsl(262 48% 66% / 0.8);
    --text-label: hsl(190 84% 74%);
    --border-color: hsl(270 76% 60% / 0.22);
    --border-subtle: hsl(270 76% 60% / 0.1);
    --border-strong: hsl(190 82% 62% / 0.42);
    --color-tooltip-bg: hsl(264 44% 12%);
    --color-tooltip-text: hsl(192 78% 84%);
    --color-tooltip-label: hsl(190 84% 72%);
    --color-tooltip-muted: hsl(262 42% 66%);
    --color-tooltip-dim: hsl(262 30% 54%);
}

body[data-theme="astral-void"] {
    background-image:
        radial-gradient(circle at 50% 40%, hsl(190 100% 72% / 0.16) 0%, transparent 18%),
        radial-gradient(circle at 50% 40%, hsl(270 100% 74% / 0.22) 0%, transparent 32%),
        radial-gradient(circle at 22% 20%, hsl(270 82% 28% / 0.46) 0%, transparent 30%),
        radial-gradient(circle at 78% 72%, hsl(190 82% 24% / 0.38) 0%, transparent 30%),
        radial-gradient(circle at 62% 18%, hsl(320 68% 28% / 0.2) 0%, transparent 18%),
        conic-gradient(from 0deg at 50% 50%, transparent 0deg, hsl(270 56% 18% / 0.12) 46deg, transparent 88deg, hsl(190 54% 18% / 0.1) 154deg, transparent 226deg, hsl(320 54% 18% / 0.1) 294deg, transparent 360deg),
        radial-gradient(1px 1px at 20px 30px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 40px 70px, hsl(190 60% 85% / 0.8), transparent),
        radial-gradient(1px 1px at 50px 160px, hsl(45 80% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, hsl(270 70% 90% / 0.8), transparent),
        radial-gradient(1px 1px at 130px 80px, hsl(45 80% 85% / 0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, hsl(190 60% 90% / 0.9), transparent),
        radial-gradient(1.5px 1.5px at 200px 50px, hsl(45 80% 95% / 0.8), transparent),
        radial-gradient(1px 1px at 220px 150px, hsl(320 70% 90% / 0.7), transparent),
        radial-gradient(1px 1px at 260px 90px, hsl(45 80% 85% / 0.9), transparent),
        radial-gradient(1px 1px at 300px 180px, hsl(190 60% 88% / 0.8), transparent),
        radial-gradient(ellipse 80% 60% at 20% 30%, hsl(270 70% 25% / 0.35) 0%, transparent 70%),
        radial-gradient(ellipse 60% 80% at 80% 70%, hsl(190 70% 20% / 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 70% 50% at 60% 20%, hsl(320 70% 25% / 0.25) 0%, transparent 60%);
}

[data-theme="astral-void"] .card,
[data-theme="astral-void"] .card-glass,
[data-theme="astral-void"] .character-card,
[data-theme="astral-void"] .widget-tile,
[data-theme="astral-void"] .attribute-card,
[data-theme="astral-void"] .character-item,
[data-theme="astral-void"] .login-container,
[data-theme="astral-void"] .modal,
[data-theme="astral-void"] .story-note-item,
[data-theme="astral-void"] .spell-tile,
[data-theme="astral-void"] .buff-tile,
[data-theme="astral-void"] .item-tile,
[data-theme="astral-void"] .currency-tile {
    background:
        linear-gradient(180deg, hsl(270 44% 16% / 0.72), transparent 24%),
        linear-gradient(135deg, hsl(264 42% 12% / 0.96), hsl(244 28% 16% / 0.98) 52%, hsl(276 30% 18% / 0.98) 100%);
    border-color: hsl(270 78% 62% / 0.28);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 84% / 0.12),
        inset 0 -18px 28px hsl(0 0% 0% / 0.16),
        0 18px 34px hsl(0 0% 0% / 0.28),
        0 0 34px hsl(270 80% 56% / 0.12),
        0 0 70px hsl(190 90% 56% / 0.06);
}

[data-theme="astral-void"] .card:hover,
[data-theme="astral-void"] .card-glass:hover,
[data-theme="astral-void"] .character-card:hover,
[data-theme="astral-void"] .widget-tile:hover,
[data-theme="astral-void"] .attribute-card:hover,
[data-theme="astral-void"] .character-item:hover,
[data-theme="astral-void"] .story-note-item:hover,
[data-theme="astral-void"] .spell-tile:hover,
[data-theme="astral-void"] .buff-tile:hover,
[data-theme="astral-void"] .item-tile:hover,
[data-theme="astral-void"] .currency-tile:hover {
    border-color: hsl(190 90% 64% / 0.46);
    box-shadow:
        inset 0 1px 0 hsl(190 100% 88% / 0.16),
        0 22px 40px hsl(0 0% 0% / 0.3),
        0 0 42px hsl(270 84% 60% / 0.2),
        0 0 90px hsl(190 96% 62% / 0.1);
}

[data-theme="astral-void"] .modal,
[data-theme="astral-void"] .gm-image-modal,
[data-theme="astral-void"] .combat-modal,
[data-theme="astral-void"] .edit-modal-container,
[data-theme="astral-void"] .tooltip,
[data-theme="astral-void"] .unified-tooltip,
[data-theme="astral-void"] .itooltip,
[data-theme="astral-void"] .skilltooltip,
[data-theme="astral-void"] .attrtooltip,
[data-theme="astral-void"] .stattooltip,
[data-theme="astral-void"] #item-tooltip {
    background:
        linear-gradient(180deg, hsl(266 48% 12% / 0.98), hsl(244 26% 16% / 0.98));
    box-shadow:
        0 0 26px hsl(270 84% 60% / 0.2),
        0 0 60px hsl(190 96% 62% / 0.08),
        inset 0 0 20px hsl(190 90% 60% / 0.04);
}

[data-theme="astral-void"] .btn-primary,
[data-theme="astral-void"] .tab-btn.active,
[data-theme="astral-void"] .tab_btn.active,
[data-theme="astral-void"] .tab_btn.active-tab,
[data-theme="astral-void"] .nav-icon-btn.active,
[data-theme="astral-void"] .tab_btn_vertical.active {
    background:
        radial-gradient(circle at 28% 24%, hsl(190 100% 82% / 0.22) 0%, transparent 30%),
        linear-gradient(135deg, hsl(272 86% 60%), hsl(190 92% 60%));
    box-shadow:
        0 0 30px hsl(270 88% 62% / 0.42),
        0 0 68px hsl(190 96% 62% / 0.24);
}

[data-theme="astral-void"] h1,
[data-theme="astral-void"] h2,
[data-theme="astral-void"] h3 {
    text-shadow:
        0 0 14px hsl(190 100% 70% / 0.56),
        0 0 34px hsl(190 100% 62% / 0.28),
        0 0 72px hsl(270 90% 62% / 0.18);
}
[data-theme="astral-void"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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