/* ═══════════════════════════════════════════════════════════════
   RUNIC THEME: Hologram
   "Wake up, Samurai."
   Vollständige Komponenten-Styles für Cyberpunk Theme
   ═══════════════════════════════════════════════════════════════ */

[data-theme="hologram"] {
    /* ── PRIMITIVE HUES ────────────────────────────────────────── */
    --hue-primary:   55;      /* Neon-Gelb */
    --hue-accent:    185;     /* Cyan */
    --hue-gm:        340;     /* Pink/Rot */
    --hue-danger:    350;     /* Rot-Pink */
    --hue-warning:   55;      /* Gelb */
    --hue-success:   150;     /* Grün */
    --hue-toxicity:  112;     /* Toxizität */
    --hue-neutral:   240;     /* Kühles Blau */

    /* ── SÄTTIGUNG & HELLIGKEIT ───────────────────────────────── */
    --sat-primary:   95%;
    --lit-primary:   50%;
    --lit-primary-hover: 55%;

    --sat-accent:    100%;
    --lit-accent:    50%;
    --lit-accent-hover: 55%;

    --sat-gm:        100%;
    --lit-gm:        50%;
    --lit-gm-text:   70%;

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

    --sat-warning:   95%;
    --lit-warning:   50%;

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

    --lightness-bg:  4%;      /* Sehr dunkel */

    /* ── BORDER RADIUS (eckig, technisch) ─────────────────────── */
    --radius-sm:     0px;
    --radius-md:     2px;
    --radius-lg:     4px;
    --radius-xl:     6px;
    --radius-2xl:    8px;

    /* ── TYPOGRAPHY ───────────────────────────────────────────── */
    --font-sans:     'Rajdhani', 'Segoe UI', 'Arial Narrow', sans-serif;
    --font-mono:     'Share Tech Mono', 'Consolas', monospace;

    /* ── TRANSITIONS (schnell, digital) ──────────────────────── */
    --duration-75:   50ms;
    --duration-150:  100ms;
    --duration-250:  200ms;
    --duration-300:  250ms;
    --duration-400:  400ms;

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

    /* ── SHADOWS (Neon-Glow) ─────────────────────────────────── */
    --shadow-glow-primary: 0 0 20px hsl(55 95% 50% / 0.6);
    --shadow-glow-accent:  0 0 20px hsl(185 100% 50% / 0.7);
    --shadow-glow-danger:  0 0 20px hsl(350 90% 50% / 0.6);
    --shadow-glow-gold:    0 0 20px hsl(55 95% 50% / 0.6);

    /* ── ICONS ───────────────────────────────────────────────── */
    --icon-color:  hsl(185 100% 50%);
    --icon-filter: brightness(0) saturate(100%) invert(73%) sepia(26%) saturate(2278%) hue-rotate(157deg) brightness(118%);

    /* ── GLITCH COLORS ───────────────────────────────────────── */
    --glitch-color-1: hsl(340 100% 50%);
    --glitch-color-2: hsl(185 100% 50%);

    /* ── HINTERGRUND (satt dunkles Blau statt generisches Grau) ─ */
    --bg-page:          hsl(240 35% 4%);
    --bg-primary:       hsl(240 30% 7%);
    --bg-secondary:     hsl(240 28% 10% / 0.85);
    --bg-tertiary:      hsl(240 25% 8% / 0.95);
    --bg-card:          hsl(240 28% 9% / 0.92);
    --bg-hover:         hsl(240 25% 16% / 0.5);
    --bg-input:         hsl(240 25% 11%);

    --surface-elevated: hsl(240 28% 12%);
    --surface-overlay:  hsl(240 28% 14%);
    --surface-panel:    hsl(240 25% 10%);

    /* ── TEXT ────────────────────────────────────────────────── */
    --text-label: hsl(185 70% 70%);
    --text-muted: hsl(185 40% 60% / 0.65);

    /* ── RAHMEN ──────────────────────────────────────────────── */
    --border-color:  hsl(185 100% 50% / 0.12);
    --border-subtle: hsl(185 100% 50% / 0.07);
    --border-strong: hsl(185 100% 50% / 0.28);

    /* ── FOCUS RING ──────────────────────────────────────────── */
    --color-focus-ring: hsl(185 100% 50% / 0.3);

    /* ── TOOLTIPS ────────────────────────────────────────────── */
    --color-tooltip-bg:         hsl(240 40% 5%);
    --color-tooltip-highlight:  hsl(55 95% 62%);
    --color-tooltip-effect-bg:  hsla(55 95% 50% / 0.08);
    --color-tooltip-text:       hsl(185 60% 78%);
    --color-tooltip-label:      hsl(185 80% 65%);
    --color-tooltip-muted:      hsl(185 35% 52%);
    --color-tooltip-dim:        hsl(185 25% 42%);
    --color-tooltip-pos:        hsl(150 80% 55%);
    --color-tooltip-neg:        hsl(350 90% 62%);
    --color-tooltip-separator:  hsl(185 100% 50% / 0.22);
    --color-tooltip-section-bg: hsl(240 40% 9% / 0.9);

    /* ── ITEM QUALITY COLORS ────────────────────────────────── */
    --quality-0-color1:  rgb(85, 88, 105);     /* Terminal-Grau */
    --quality-0-color2:  rgb(55, 58, 72);
    --quality-1-color1:  rgb(200, 210, 225);   /* Chrom */
    --quality-1-color2:  rgb(158, 170, 190);
    --quality-2-color1:  rgb(0, 230, 115);     /* Hacker-Grün */
    --quality-2-color2:  rgb(0, 168, 75);
    --quality-3-color1:  rgb(0, 210, 240);     /* Interface-Cyan */
    --quality-3-color2:  rgb(0, 155, 185);
    --quality-4-color1:  rgb(220, 50, 255);    /* Glitch-Lila */
    --quality-4-color2:  rgb(165, 0, 205);
    --quality-5-color1:  rgb(255, 228, 0);     /* Warngelb */
    --quality-5-color2:  rgb(215, 175, 0);
    --quality-6-color1:  rgb(255, 28, 55);     /* Alert-Rot */
    --quality-6-color2:  rgb(205, 0, 28);
    --quality-7-color1:  rgb(0, 255, 180);     /* Glitch Grün + Magenta */
    --quality-7-color2:  rgb(255, 0, 215);
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – ANIMATIONEN
   ═══════════════════════════════════════════════════════════════ */

/* Gelegentlicher Glitch-Flicker für Überschriften */
@keyframes glitchFlicker {
    0%, 87%, 100% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2);
        transform: none;
    }
    88% {
        text-shadow:
            4px 0 var(--glitch-color-1), -1px 0 var(--glitch-color-2),
            0 0 12px var(--glitch-color-2);
        transform: translateX(-3px) skewX(-2deg);
    }
    89% {
        text-shadow:
            -3px 0 var(--glitch-color-1), 4px 0 var(--glitch-color-2),
            0 0 8px var(--glitch-color-1);
        transform: translateX(3px) skewX(2deg);
    }
    90% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2);
        transform: none;
    }
    93% {
        text-shadow:
            6px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2),
            0 0 16px hsl(55 95% 50% / 0.7);
        transform: translateX(-1px);
    }
    94% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2);
        transform: none;
    }
}

@keyframes neonPulse {
    0%, 100% { box-shadow: 0 0 15px hsla(55 95% 50% / 0.3), 0 0 30px hsla(55 95% 50% / 0.1); }
    50%      { box-shadow: 0 0 30px hsla(55 95% 50% / 0.6), 0 0 60px hsla(55 95% 50% / 0.2); }
}

@keyframes cyanPulse {
    0%, 100% { box-shadow: 0 0 10px hsla(185 100% 50% / 0.3); }
    50%      { box-shadow: 0 0 25px hsla(185 100% 50% / 0.6), 0 0 50px hsla(185 100% 50% / 0.2); }
}

@keyframes scanDown {
    0%   { top: -2px; }
    100% { top: 100%; }
}

@keyframes navGlow {
    0%, 100% { box-shadow: 0 2px 0 0 hsl(55 95% 50% / 0.5), 0 0 20px hsla(55 95% 50% / 0.1); }
    50%      { box-shadow: 0 2px 0 0 hsl(55 95% 50% / 0.9), 0 0 40px hsla(55 95% 50% / 0.2); }
}

/* Char-Namen Glitch – intensiver, kürzerer Zyklus, Farbwechsel */
@keyframes charNameGlitch {
    0%, 78%, 100% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2),
                     0 0 10px hsl(185 100% 50% / 0.4);
        transform: none;
        color: hsl(185 100% 58%);
    }
    79% {
        text-shadow: 5px 0 var(--glitch-color-1), -3px 0 var(--glitch-color-2),
                     0 0 18px var(--glitch-color-2);
        transform: translateX(-5px) skewX(-4deg);
        color: hsl(55 95% 65%);
    }
    80% {
        text-shadow: -5px 0 var(--glitch-color-1), 4px 0 var(--glitch-color-2),
                     0 0 12px var(--glitch-color-1);
        transform: translateX(5px) skewX(3deg);
        color: hsl(340 100% 65%);
    }
    81% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2),
                     0 0 10px hsl(185 100% 50% / 0.4);
        transform: none;
        color: hsl(185 100% 58%);
    }
    85% {
        text-shadow: 10px 0 var(--glitch-color-1), -3px 0 var(--glitch-color-2),
                     0 0 25px hsl(55 95% 55% / 0.9);
        transform: translateX(-2px);
        color: hsl(55 95% 70%);
    }
    86% {
        text-shadow: 2px 0 var(--glitch-color-1), -2px 0 var(--glitch-color-2),
                     0 0 10px hsl(185 100% 50% / 0.4);
        transform: none;
        color: hsl(185 100% 58%);
    }
}

/* Pulsierender Glow für wichtige Werte */
@keyframes valueGlow {
    0%, 100% { text-shadow: 0 0 8px hsl(55 95% 50% / 0.5); }
    50%      { text-shadow: 0 0 16px hsl(55 95% 50% / 0.9), 0 0 30px hsl(55 95% 50% / 0.4); }
}

/* Neon-Flicker für Icons im aktiven Zustand */
@keyframes iconFlicker {
    0%, 92%, 100% { filter: var(--icon-filter); opacity: 1; }
    93%           { opacity: 0.4; }
    94%           { opacity: 1; }
    96%           { opacity: 0.7; }
    97%           { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – GLOBAL BACKGROUND
   ═══════════════════════════════════════════════════════════════ */

/* Circuit-Raster + atmosphärische Tiefe direkt im Body */
[data-theme="hologram"] body {
    background-image:
        /* Atmosphärische Farbzonen */
        radial-gradient(ellipse 60% 50% at 15% 70%, hsla(240 80% 18% / 0.5) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 10%, hsla(185 100% 20% / 0.3) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 60% 90%, hsla(340 80% 15% / 0.2) 0%, transparent 60%),
        /* Circuit-Raster */
        linear-gradient(hsla(185 100% 50% / 0.04) 1px, transparent 1px),
        linear-gradient(90deg, hsla(185 100% 50% / 0.04) 1px, transparent 1px);
    background-color: hsl(240 35% 4%);
    background-size: 100%, 100%, 100%, 40px 40px, 40px 40px;
    background-attachment: fixed;
}

/* Scanlines über allem */
[data-theme="hologram"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent                  0px,
            transparent                  3px,
            hsla(185 100% 50% / 0.06)   3px,
            hsla(185 100% 50% / 0.06)   4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent                  0px,
            transparent                  59px,
            hsla(185 100% 50% / 0.03)   59px,
            hsla(185 100% 50% / 0.03)   60px
        ),
        radial-gradient(
            ellipse at 50% 50%,
            transparent 55%,
            hsla(240 80% 3% / 0.5) 100%
        );
    pointer-events: none;
    z-index: var(--z-max);
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */

[data-theme="hologram"] h1,
[data-theme="hologram"] h2,
[data-theme="hologram"] h3 {
    text-shadow:
        2px 0 var(--glitch-color-1),
        -2px 0 var(--glitch-color-2);
    letter-spacing: var(--tracking-wider);
    animation: glitchFlicker 6s linear infinite;
}

[data-theme="hologram"] h4,
[data-theme="hologram"] h5,
[data-theme="hologram"] h6 {
    color: hsl(185 100% 65%);
    letter-spacing: var(--tracking-wide);
    text-shadow: 0 0 8px hsl(185 100% 50% / 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – KOMPONENTEN-STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── LOGO & IMAGES ────────────────────────────────────────────── */

[data-theme="hologram"] .logo,
[data-theme="hologram"] img[src*="logo"] {
    filter: drop-shadow(0 0 8px hsl(185 100% 50% / 0.6))
            drop-shadow(0 0 20px hsl(55 95% 50% / 0.3));
}

/* ── MODAL ───────────────────────────────────────────────────── */

[data-theme="hologram"] .modal {
    border: 1px solid hsla(55 95% 50% / 0.3);
    box-shadow:
        0 0 10px hsla(55 95% 50% / 0.1),
        inset 0 0 10px hsla(55 95% 50% / 0.05),
        var(--shadow-2xl);
    background: linear-gradient(135deg,
        hsla(240 50% 10% / 0.97),
        hsla(240 50% 15% / 0.99));
    position: relative;
}

[data-theme="hologram"] .modal-header {
    background: linear-gradient(135deg,
        hsla(55 95% 50% / 0.1),
        transparent);
    border-bottom: 1px solid hsla(55 95% 50% / 0.2);
}

[data-theme="hologram"] .modal-title {
    text-shadow:
        2px 0 hsl(340 100% 50%),
        -2px 0 hsl(185 100% 50%);
    letter-spacing: var(--tracking-wide);
    color: hsl(55 95% 60%);
    text-transform: uppercase;
}

[data-theme="hologram"] .modal-footer {
    border-top: 1px solid hsla(55 95% 50% / 0.2);
    background: linear-gradient(135deg,
        hsla(240 50% 10% / 0.9),
        transparent);
}

[data-theme="hologram"] .modal-close {
    color: hsla(185 100% 50% / 0.7);
}

[data-theme="hologram"] .modal-close:hover {
    background: hsla(185 100% 50% / 0.1);
    color: hsl(185 100% 60%);
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.4);
}

[data-theme="hologram"] .modal-danger {
    border-color: hsl(350 90% 50%);
    box-shadow:
        0 0 15px hsla(350 90% 50% / 0.2),
        inset 0 0 10px hsla(350 90% 50% / 0.05);
}

[data-theme="hologram"] .modal-gm {
    border-color: hsl(340 100% 50%);
    box-shadow:
        0 0 15px hsla(340 100% 50% / 0.2),
        inset 0 0 10px hsla(340 100% 50% / 0.05);
}

/* Cyberpunk Modal Corner Accents */
[data-theme="hologram"] .modal::before,
[data-theme="hologram"] .modal::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid hsla(55 95% 50% / 0.6);
    transition: all var(--duration-300) var(--ease-out);
    pointer-events: none;
}

[data-theme="hologram"] .modal::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    border-radius: var(--radius-lg) 0 0 0;
}

[data-theme="hologram"] .modal::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    border-radius: 0 0 var(--radius-lg) 0;
}

[data-theme="hologram"] .modal:hover::before,
[data-theme="hologram"] .modal:hover::after {
    width: 30px;
    height: 30px;
    border-color: hsla(55 95% 50% / 0.9);
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.5);
}

/* Scanline im Modal-Body */
[data-theme="hologram"] .modal-body {
    position: relative;
}

[data-theme="hologram"] .modal-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        hsla(0 0% 0% / 0.05) 2px,
        hsla(0 0% 0% / 0.05) 4px
    );
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */

[data-theme="hologram"] .btn-primary {
    background: linear-gradient(135deg,
        hsl(55 95% 50%),
        hsl(55 90% 42%));
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.3);
    color: hsl(240 50% 8%);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="hologram"] .btn-primary:hover {
    box-shadow:
        0 0 20px hsla(55 95% 50% / 0.5),
        0 0 40px hsla(55 95% 50% / 0.3);
}

[data-theme="hologram"] .btn-secondary {
    border-color: hsla(185 100% 50% / 0.4);
    color: hsl(185 100% 55%);
    background: hsla(185 100% 50% / 0.05);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="hologram"] .btn-secondary:hover {
    background: hsla(185 100% 50% / 0.12);
    border-color: hsla(185 100% 50% / 0.8);
    color: hsl(185 100% 65%);
    box-shadow: 0 0 15px hsla(185 100% 50% / 0.4);
}

[data-theme="hologram"] .btn-danger {
    background: linear-gradient(135deg,
        hsl(350 90% 50%),
        hsl(350 85% 42%));
    box-shadow: 0 0 10px hsla(350 90% 50% / 0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="hologram"] .btn-danger:hover {
    box-shadow:
        0 0 20px hsla(350 90% 50% / 0.5),
        0 0 40px hsla(350 90% 50% / 0.3);
}

[data-theme="hologram"] .btn-gm {
    background: linear-gradient(135deg,
        hsl(340 100% 50%),
        hsl(340 95% 42%));
    box-shadow: 0 0 10px hsla(340 100% 50% / 0.3);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[data-theme="hologram"] .btn-gm:hover {
    box-shadow:
        0 0 20px hsla(340 100% 50% / 0.5),
        0 0 40px hsla(340 100% 50% / 0.3);
}

[data-theme="hologram"] .btn-ghost {
    color: hsl(185 100% 55%);
    letter-spacing: 0.06em;
}

[data-theme="hologram"] .btn-ghost:hover {
    background: hsla(185 100% 50% / 0.1);
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.2);
}

/* Tab Button */
[data-theme="hologram"] .tab-btn {
    background: hsla(240 50% 14% / 0.85);
    border-color: hsla(185 100% 50% / 0.3);
}

[data-theme="hologram"] .tab-btn:hover {
    background: hsla(240 50% 20% / 0.9);
    border-color: hsla(185 100% 50% / 0.6);
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.3);
}

[data-theme="hologram"] .tab-btn.active {
    background: linear-gradient(135deg,
        hsl(55 95% 50%),
        hsl(55 90% 42%));
    border-color: hsl(55 95% 50%);
    box-shadow: 0 0 20px hsla(55 95% 50% / 0.5);
    color: hsl(240 50% 8%);
    font-weight: 700;
}

[data-theme="hologram"] .tab-btn.active .icon {
    filter: brightness(0) invert(0) sepia(1) saturate(3) hue-rotate(10deg);
}

[data-theme="hologram"] .tab-btn.combat-active {
    background: linear-gradient(135deg,
        hsl(350 90% 50%),
        hsl(350 85% 42%)) !important;
    border-color: hsl(350 90% 50%) !important;
    box-shadow: 0 0 20px hsla(350 90% 50% / 0.5);
}

/* ── CARDS ───────────────────────────────────────────────────── */

[data-theme="hologram"] .card {
    border: 1px solid hsla(55 95% 50% / 0.25);
    box-shadow:
        0 0 10px hsla(55 95% 50% / 0.08),
        inset 0 0 10px hsla(55 95% 50% / 0.03);
    background: linear-gradient(135deg,
        hsla(240 40% 10% / 0.92),
        hsla(240 40% 14% / 0.96));
    position: relative;
}

/* Neon-Akzentlinie oben auf jeder Card */
[data-theme="hologram"] .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        hsl(185 100% 55% / 0.7),
        hsl(55 95% 55% / 0.5),
        transparent);
    pointer-events: none;
}

[data-theme="hologram"] .card:hover {
    border-color: hsla(55 95% 50% / 0.55);
    box-shadow:
        0 0 20px hsla(55 95% 50% / 0.18),
        inset 0 0 15px hsla(55 95% 50% / 0.07);
}

[data-theme="hologram"] .card:hover::before {
    background: linear-gradient(90deg,
        transparent,
        hsl(185 100% 55%),
        hsl(55 95% 55%),
        transparent);
}

[data-theme="hologram"] .card-gm {
    border-color: hsl(340 100% 50%);
    box-shadow: 0 0 15px hsla(340 100% 50% / 0.3);
}

[data-theme="hologram"] .card-glass {
    background: linear-gradient(135deg,
        hsla(240 50% 10% / 0.65),
        hsla(240 50% 14% / 0.75));
    border-color: hsla(185 100% 50% / 0.2);
}

/* Character Card */
[data-theme="hologram"] .character-card {
    background: linear-gradient(135deg,
        hsla(240 45% 11% / 0.96),
        hsla(240 45% 15% / 0.99));
    border: 1px solid hsla(185 100% 50% / 0.25);
    position: relative;
}

[data-theme="hologram"] .character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, hsl(185 100% 50% / 0.6), transparent);
    pointer-events: none;
}

[data-theme="hologram"] .character-card:hover {
    border-color: hsla(185 100% 50% / 0.5);
    box-shadow: 0 0 20px hsla(185 100% 50% / 0.2);
}

[data-theme="hologram"] .character-card-avatar {
    border-color: hsla(55 95% 50% / 0.5);
}

[data-theme="hologram"] .character-card:hover .character-card-avatar {
    border-color: hsl(55 95% 50%);
    box-shadow: 0 0 15px hsla(55 95% 50% / 0.4);
}

/* ── FORMS ───────────────────────────────────────────────────── */

[data-theme="hologram"] .input,
[data-theme="hologram"] .select,
[data-theme="hologram"] .textarea {
    border-color: hsla(185 100% 50% / 0.3);
    background: hsla(240 30% 10% / 0.8);
    font-family: var(--font-mono);
}

[data-theme="hologram"] .input:hover:not(:disabled):not(:focus),
[data-theme="hologram"] .select:hover:not(:disabled):not(:focus) {
    border-color: hsla(185 100% 50% / 0.5);
}

[data-theme="hologram"] .input:focus,
[data-theme="hologram"] .select:focus,
[data-theme="hologram"] .textarea:focus {
    border-color: hsl(185 100% 50%);
    background: hsla(185 100% 50% / 0.08);
    box-shadow:
        0 0 15px hsla(185 100% 50% / 0.3),
        inset 0 0 8px hsla(185 100% 50% / 0.04);
}

[data-theme="hologram"] .input-error {
    border-color: hsl(350 90% 50%);
}

[data-theme="hologram"] .input-error:focus {
    box-shadow: 0 0 15px hsla(350 90% 50% / 0.3);
}

[data-theme="hologram"] .input-success {
    border-color: hsl(150 70% 50%);
}

[data-theme="hologram"] .input-success:focus {
    box-shadow: 0 0 15px hsla(150 70% 50% / 0.3);
}

/* Checkbox & Radio */
[data-theme="hologram"] .checkbox:checked,
[data-theme="hologram"] .radio:checked {
    background: hsl(55 95% 50%);
    border-color: hsl(55 95% 50%);
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.5);
}

[data-theme="hologram"] .toggle:checked {
    background: hsl(55 95% 50%);
    border-color: hsl(55 95% 50%);
}

[data-theme="hologram"] .toggle:checked::after {
    background: hsl(240 50% 10%);
}

/* Range Slider */
[data-theme="hologram"] .range {
    background: hsla(185 100% 50% / 0.15);
}

[data-theme="hologram"] .range::-webkit-slider-thumb {
    background: hsl(55 95% 50%);
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.5);
    border-radius: 0;
}

[data-theme="hologram"] .range::-moz-range-thumb {
    background: hsl(55 95% 50%);
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.5);
    border-radius: 0;
}

/* ── TABLES ──────────────────────────────────────────────────── */

[data-theme="hologram"] table {
    background: linear-gradient(135deg,
        hsla(240 45% 10% / 0.92),
        hsla(240 45% 14% / 0.96));
    border: 1px solid hsla(185 100% 50% / 0.2);
}

[data-theme="hologram"] th {
    background: hsla(55 95% 50% / 0.18);
    border-bottom: 1px solid hsla(55 95% 50% / 0.3);
    color: hsl(55 95% 60%);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    font-size: 0.8em;
}

[data-theme="hologram"] tr:hover {
    background: hsla(55 95% 50% / 0.07);
}

[data-theme="hologram"] td {
    border-bottom: 1px solid hsla(185 100% 50% / 0.1);
    font-family: var(--font-mono);
}

/* ── WIDGETS ─────────────────────────────────────────────────── */

[data-theme="hologram"] .widget-tile {
    background: linear-gradient(135deg,
        hsla(240 45% 13% / 0.85),
        hsla(240 45% 18% / 0.9));
    border: 1px solid hsla(185 100% 50% / 0.2);
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.08);
    position: relative;
}

/* Dreieck-Akzent oben rechts */
[data-theme="hologram"] .widget-tile::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 14px 14px 0;
    border-color: transparent hsla(55 95% 50% / 0.45) transparent transparent;
    pointer-events: none;
    transition: border-color var(--duration-250) var(--ease-out);
}

[data-theme="hologram"] .widget-tile:hover {
    border-color: hsla(185 100% 50% / 0.5);
    box-shadow: 0 0 20px hsla(185 100% 50% / 0.2);
}

[data-theme="hologram"] .widget-tile:hover::after {
    border-color: transparent hsl(55 95% 55%) transparent transparent;
}

[data-theme="hologram"] .widget-tile[data-widget-type="attack"] {
    background: linear-gradient(135deg,
        hsla(350 90% 50% / 0.12),
        hsla(350 85% 45% / 0.18));
    border-color: hsla(350 90% 50% / 0.3);
}

[data-theme="hologram"] .widget-tile[data-widget-type="attack"]::after {
    border-color: transparent hsla(350 90% 50% / 0.55) transparent transparent;
}

[data-theme="hologram"] .widget-tile[data-widget-type="attack"]:hover {
    box-shadow: 0 0 20px hsla(350 90% 50% / 0.3);
}

[data-theme="hologram"] .widget-tile[data-widget-type="skill"] {
    background: linear-gradient(135deg,
        hsla(200 70% 50% / 0.12),
        hsla(200 65% 45% / 0.18));
    border-color: hsla(200 70% 50% / 0.3);
}

[data-theme="hologram"] .widget-tile[data-widget-type="skill"]:hover {
    box-shadow: 0 0 20px hsla(200 70% 50% / 0.3);
}

[data-theme="hologram"] .widget-tile[data-widget-type="activity"] {
    background: linear-gradient(135deg,
        hsla(35 100% 50% / 0.12),
        hsla(35 95% 45% / 0.18));
    border-color: hsla(35 100% 50% / 0.3);
}

[data-theme="hologram"] .widget-title {
    color: hsl(185 100% 60%);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75em;
}

/* ── NAVIGATION ──────────────────────────────────────────────── */

[data-theme="hologram"] .navigation-bar {
    background: linear-gradient(180deg,
        hsla(240 50% 7% / 0.99),
        hsla(240 50% 10% / 0.96));
    border-bottom: 1px solid hsla(55 95% 50% / 0.25);
    animation: navGlow 3s ease-in-out infinite;
}

[data-theme="hologram"] .tab_btn {
    background: hsla(240 50% 14% / 0.85);
    border-color: hsla(185 100% 50% / 0.3);
}

[data-theme="hologram"] .tab_btn:hover {
    background: hsla(240 50% 20% / 0.9);
    border-color: hsla(185 100% 50% / 0.6);
    box-shadow: 0 0 15px hsla(185 100% 50% / 0.3);
}

/* ── BADGES & CHIPS ──────────────────────────────────────────── */

[data-theme="hologram"] .badge,
[data-theme="hologram"] .chip,
[data-theme="hologram"] .tag {
    background: hsla(185 100% 50% / 0.12);
    border: 1px solid hsla(185 100% 50% / 0.4);
    color: hsl(185 100% 65%);
    font-family: var(--font-mono);
    font-size: 0.7em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
}

[data-theme="hologram"] .badge-primary,
[data-theme="hologram"] .chip-primary {
    background: hsla(55 95% 50% / 0.18);
    border-color: hsla(55 95% 50% / 0.5);
    color: hsl(55 95% 65%);
}

[data-theme="hologram"] .badge-danger,
[data-theme="hologram"] .chip-danger {
    background: hsla(350 90% 50% / 0.12);
    border-color: hsla(350 90% 50% / 0.4);
    color: hsl(350 90% 65%);
}

/* ── PROGRESS BARS ───────────────────────────────────────────── */

/* Bar-Container: Cyan-Border + Glow */
[data-theme="hologram"] .progress-container,
[data-theme="hologram"] .progress,
[data-theme="hologram"] progress {
    background: hsla(240 50% 8% / 0.9);
    border: 1px solid hsl(185 100% 50% / 0.55);
    box-shadow:
        0 0 8px hsla(185 100% 50% / 0.25),
        inset 0 0 6px hsla(0 0% 0% / 0.4);
    border-radius: 0;
}

/* Bar-Text (HP / MP / ED Werte) */
[data-theme="hologram"] #healthText,
[data-theme="hologram"] #magicText,
[data-theme="hologram"] #enduranceText {
    color: hsl(185 100% 80%);
    text-shadow:
        0 0 6px hsl(185 100% 50% / 0.9),
        0 0 14px hsl(185 100% 50% / 0.5);
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Fill-Bars */
[data-theme="hologram"] .progress-fill,
[data-theme="hologram"] .bar-fill {
    background: linear-gradient(90deg,
        hsl(185 100% 42%),
        hsl(185 100% 58%));
    box-shadow: 0 0 8px hsla(185 100% 50% / 0.6);
}

[data-theme="hologram"] .health-bar {
    background: linear-gradient(90deg,
        hsl(150 80% 35%),
        hsl(150 90% 48%));
    box-shadow: 0 0 10px hsla(150 80% 50% / 0.5);
}

[data-theme="hologram"] .magic-bar {
    background: linear-gradient(90deg,
        hsl(210 90% 40%),
        hsl(185 100% 55%));
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.6);
}

[data-theme="hologram"] .endurance-bar {
    background: linear-gradient(90deg,
        hsl(55 90% 40%),
        hsl(55 95% 55%));
    box-shadow: 0 0 10px hsla(55 95% 50% / 0.6);
}

/* ── TOOLTIPS ─────────────────────────────────────────────────── */

/* Container – alle Tooltip-Varianten */
[data-theme="hologram"] .tooltip,
[data-theme="hologram"] .unified-tooltip,
[data-theme="hologram"] .basic-tooltip,
[data-theme="hologram"] .tooltiptext,
[data-theme="hologram"] .itooltip,
[data-theme="hologram"] .skilltooltip,
[data-theme="hologram"] .attrtooltip,
[data-theme="hologram"] .stattooltip,
[data-theme="hologram"] #item-tooltip {
    background: var(--color-tooltip-bg);
    border: 1px solid hsl(185 100% 50% / 0.45);
    color: var(--color-tooltip-text);
    font-family: var(--font-mono);
    border-radius: 0;
    box-shadow:
        0 0 20px hsla(185 100% 50% / 0.2),
        0 0 50px hsla(185 100% 50% / 0.06),
        inset 0 0 12px hsla(185 100% 50% / 0.03);
    position: relative;
    overflow: hidden;
}

/* Eck-Brackets oben-links & unten-rechts */
[data-theme="hologram"] .tooltip::before,
[data-theme="hologram"] .unified-tooltip::before,
[data-theme="hologram"] .itooltip::before,
[data-theme="hologram"] .skilltooltip::before,
[data-theme="hologram"] .attrtooltip::before,
[data-theme="hologram"] .stattooltip::before,
[data-theme="hologram"] #item-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-top: 2px solid hsl(55 95% 55%);
    border-left: 2px solid hsl(55 95% 55%);
    pointer-events: none;
    z-index: 1;
}

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

/* ── TOOLTIP TITEL ───────────────────────────────────────────── */

[data-theme="hologram"] .tooltip-title,
[data-theme="hologram"] .itooltip-title,
[data-theme="hologram"] .skilltooltip-title,
[data-theme="hologram"] .attrtooltip-title,
[data-theme="hologram"] .stattooltip-title,
[data-theme="hologram"] .unified-tooltip .tooltip-title {
    color: var(--color-tooltip-highlight) !important;
    text-shadow:
        2px 0 var(--glitch-color-1),
        -2px 0 var(--glitch-color-2),
        0 0 10px hsl(55 95% 50% / 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ── TOOLTIP BESCHREIBUNG ────────────────────────────────────── */

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

/* ── TT-ZEILEN & SEKTIONEN ───────────────────────────────────── */

[data-theme="hologram"] .tt-section {
    background: var(--color-tooltip-section-bg);
    border-left: 2px solid hsl(185 100% 50% / 0.4);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

[data-theme="hologram"] .tt-row {
    color: var(--color-tooltip-text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

[data-theme="hologram"] .tt-row-sm {
    color: var(--color-tooltip-label);
    font-family: var(--font-mono);
    font-size: 0.73rem;
}

[data-theme="hologram"] .tt-dim {
    color: var(--color-tooltip-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

/* ── TT TOTAL ────────────────────────────────────────────────── */

[data-theme="hologram"] .tt-total-label {
    color: var(--color-tooltip-highlight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
}

[data-theme="hologram"] .tt-total-value {
    color: var(--color-tooltip-highlight);
    text-shadow: 0 0 8px hsl(55 95% 50% / 0.5);
    font-family: var(--font-mono);
    font-weight: 700;
}

/* ── TT SEPARATOR ────────────────────────────────────────────── */

[data-theme="hologram"] .tt-sep-accent {
    border-top: 1px solid hsl(185 100% 50% / 0.35);
    box-shadow: 0 0 6px hsla(185 100% 50% / 0.2);
}

/* ── CHARACTER ITEM ──────────────────────────────────────────── */

[data-theme="hologram"] .character-item {
    background: linear-gradient(135deg,
        hsla(240 45% 13% / 0.85),
        hsla(240 45% 18% / 0.9));
    border-color: hsla(185 100% 50% / 0.2);
}

[data-theme="hologram"] .character-item:hover {
    border-color: hsla(185 100% 50% / 0.5);
    box-shadow: 0 0 20px hsla(185 100% 50% / 0.2);
}

[data-theme="hologram"] .character-item::before {
    background: linear-gradient(135deg,
        hsla(55 95% 50% / 0.08),
        hsla(185 100% 50% / 0.04));
}

[data-theme="hologram"] .character-info h3 {
    color: hsl(185 100% 55%);
    text-shadow: 0 0 8px hsla(185 100% 50% / 0.4);
}

/* ── LOGIN CONTAINER ─────────────────────────────────────────── */

[data-theme="hologram"] .login-container {
    background: linear-gradient(135deg,
        hsla(240 50% 8% / 0.98),
        hsla(240 50% 12% / 0.96));
    border: 1px solid hsla(55 95% 50% / 0.4);
    box-shadow:
        0 0 40px hsla(55 95% 50% / 0.15),
        0 0 80px hsla(185 100% 50% / 0.08),
        inset 0 0 30px hsla(55 95% 50% / 0.04);
    animation: neonPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Bewegende Scan-Linie über den Login */
[data-theme="hologram"] .login-container::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        hsl(185 100% 55% / 0.8),
        hsl(55 95% 55% / 0.5),
        transparent);
    animation: scanDown 5s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Ecken-Akzent oben rechts */
[data-theme="hologram"] .login-container::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-top: 2px solid hsl(55 95% 55%);
    border-right: 2px solid hsl(55 95% 55%);
    box-shadow: 3px -3px 8px hsl(55 95% 50% / 0.4);
    pointer-events: none;
}

/* ── SCROLLBARS ──────────────────────────────────────────────── */

[data-theme="hologram"] ::-webkit-scrollbar-track {
    background: hsla(240 50% 8% / 0.6);
}

[data-theme="hologram"] ::-webkit-scrollbar-thumb {
    background: hsla(185 100% 50% / 0.3);
    border: 1px solid hsla(185 100% 50% / 0.5);
    border-radius: 0;
}

[data-theme="hologram"] ::-webkit-scrollbar-thumb:hover {
    background: hsla(185 100% 50% / 0.6);
    box-shadow: 0 0 10px hsla(185 100% 50% / 0.4);
}

/* ── UTILITY GLOWS ───────────────────────────────────────────── */

[data-theme="hologram"] .glow-primary {
    box-shadow: 0 0 20px hsla(55 95% 50% / 0.5);
}

[data-theme="hologram"] .glow-accent {
    box-shadow: 0 0 20px hsla(185 100% 50% / 0.5);
}

[data-theme="hologram"] .glow-danger {
    box-shadow: 0 0 20px hsla(350 90% 50% / 0.5);
}

[data-theme="hologram"] .glow-gm {
    box-shadow: 0 0 20px hsla(340 100% 50% / 0.5);
}

/* ── TEXT HIGHLIGHTS ─────────────────────────────────────────── */

[data-theme="hologram"] ::selection {
    background: hsla(185 100% 50% / 0.3);
    color: hsl(0 0% 100%);
}

[data-theme="hologram"] ::-moz-selection {
    background: hsla(185 100% 50% / 0.3);
    color: hsl(0 0% 100%);
}

/* ── ATTRIBUTE CARDS & SUBSKILLS ──────────────────────────────── */

[data-theme="hologram"] .attribute-cards-container {
    background: linear-gradient(135deg,
        hsla(240 45% 8% / 0.5),
        hsla(240 45% 12% / 0.5));
}

[data-theme="hologram"] .attribute-card {
    background: linear-gradient(135deg,
        hsla(240 45% 10% / 0.92),
        hsla(240 45% 14% / 0.96));
    border: 1px solid hsla(55 95% 50% / 0.2);
    position: relative;
}

/* Dreieck-Akzent unten rechts */
[data-theme="hologram"] .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 hsla(185 100% 50% / 0.3) transparent;
    pointer-events: none;
    transition: border-color var(--duration-250) var(--ease-out);
}

[data-theme="hologram"] .attribute-card:hover {
    border-color: hsla(55 95% 50% / 0.5);
    box-shadow:
        0 0 20px hsla(55 95% 50% / 0.18),
        inset 0 0 10px hsla(55 95% 50% / 0.04);
}

[data-theme="hologram"] .attribute-card:hover::before {
    border-color: transparent transparent hsl(185 100% 55% / 0.6) transparent;
}

[data-theme="hologram"] .attribute-name {
    color: hsl(55 95% 60%);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.8em;
}

[data-theme="hologram"] .attribute-icon-container {
    background: hsla(55 95% 50% / 0.15);
    color: hsl(55 95% 50%);
    border: 1px solid hsla(55 95% 50% / 0.3);
    border-radius: 0;
}

[data-theme="hologram"] .attribute-value {
    color: hsl(55 95% 55%);
    text-shadow: 0 0 10px hsl(55 95% 50% / 0.5);
    font-family: var(--font-mono);
}

[data-theme="hologram"] .attribute-bonus {
    background: hsla(150 70% 50% / 0.15);
    color: hsl(150 70% 60%);
    font-family: var(--font-mono);
    border-radius: 0;
}

[data-theme="hologram"] .attribute-subskills {
    background: hsla(240 45% 13% / 0.8);
    border: 1px solid hsla(55 95% 50% / 0.2);
}

[data-theme="hologram"] .subskill-item {
    border-bottom-color: hsla(55 95% 50% / 0.12);
}

[data-theme="hologram"] .subskill-name {
    color: hsl(185 100% 62%);
    font-family: var(--font-mono);
    font-size: 0.85em;
}

[data-theme="hologram"] .subskill-effect {
    color: hsl(185 70% 55%);
    font-family: var(--font-mono);
}

[data-theme="hologram"] .roll-button {
    background: linear-gradient(135deg,
        hsl(55 95% 50%),
        hsl(55 90% 42%));
    border-radius: 0;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: hsl(240 50% 8%);
    font-weight: 700;
}

[data-theme="hologram"] .roll-button:hover {
    background: linear-gradient(135deg,
        hsl(55 95% 55%),
        hsl(55 90% 48%));
    box-shadow: 0 0 15px hsla(55 95% 50% / 0.6);
}

[data-theme="hologram"] .roll-result {
    background: hsla(240 45% 13% / 0.85);
    color: hsl(55 95% 62%);
    border: 1px solid hsla(55 95% 50% / 0.3);
    font-family: var(--font-mono);
    text-shadow: 0 0 8px hsl(55 95% 50% / 0.4);
    border-radius: 0;
}

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

[data-theme="hologram"] .attribute-card.mental {
    border-left: 2px solid hsl(185 100% 50%);
}

[data-theme="hologram"] .attribute-card.social {
    border-left: 2px solid hsl(35 100% 50%);
}

[data-theme="hologram"] .attribute-card.special {
    border-left: 2px solid hsl(340 100% 50%);
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – CHAR-NAME GLITCH
   ═══════════════════════════════════════════════════════════════ */

/* Alle möglichen Char-Name-Elemente erfassen */
[data-theme="hologram"] #charNameLabel,
[data-theme="hologram"] .character-info h3,
[data-theme="hologram"] .character-name,
[data-theme="hologram"] .char-name,
[data-theme="hologram"] .character-card .name,
[data-theme="hologram"] .character-card h3,
[data-theme="hologram"] .character-card h4 {
    color: hsl(185 100% 58%);
    text-shadow:
        2px 0 var(--glitch-color-1),
        -2px 0 var(--glitch-color-2),
        0 0 10px hsl(185 100% 50% / 0.4);
    animation: charNameGlitch 4s linear infinite;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--font-mono);
}

/* Jeder Char-Name etwas versetzt damit nicht alle gleichzeitig glitchen */
[data-theme="hologram"] .character-item:nth-child(2) .character-info h3,
[data-theme="hologram"] .character-item:nth-child(2) .character-name {
    animation-delay: -1.3s;
}

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

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

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – ERWEITERTE GLOW-EFFEKTE
   ═══════════════════════════════════════════════════════════════ */

/* ── NEON TEXT UTILITIES ──────────────────────────────────────── */

[data-theme="hologram"] .neon-yellow,
[data-theme="hologram"] .text-neon {
    color: hsl(55 95% 60%);
    text-shadow:
        0 0 8px hsl(55 95% 50% / 0.7),
        0 0 20px hsl(55 95% 50% / 0.4);
}

[data-theme="hologram"] .neon-cyan {
    color: hsl(185 100% 60%);
    text-shadow:
        0 0 8px hsl(185 100% 50% / 0.7),
        0 0 20px hsl(185 100% 50% / 0.4);
}

[data-theme="hologram"] .neon-pink {
    color: hsl(340 100% 60%);
    text-shadow:
        0 0 8px hsl(340 100% 50% / 0.7),
        0 0 20px hsl(340 100% 50% / 0.4);
}

/* ── ATTRIBUTE WERTE – pulsierender Glow ─────────────────────── */

[data-theme="hologram"] .attribute-value {
    animation: valueGlow 3s ease-in-out infinite;
}

/* ── AVATAR / PORTRAIT GLOW ──────────────────────────────────── */

[data-theme="hologram"] .character-card-avatar,
[data-theme="hologram"] .avatar,
[data-theme="hologram"] .portrait {
    box-shadow:
        0 0 0 1px hsla(55 95% 50% / 0.4),
        0 0 12px hsla(55 95% 50% / 0.3),
        0 0 30px hsla(185 100% 50% / 0.15);
}

[data-theme="hologram"] .character-card:hover .character-card-avatar,
[data-theme="hologram"] .character-card:hover .avatar,
[data-theme="hologram"] .character-card:hover .portrait {
    box-shadow:
        0 0 0 1px hsl(55 95% 50%),
        0 0 20px hsla(55 95% 50% / 0.6),
        0 0 50px hsla(185 100% 50% / 0.3);
}

/* ── ICON GLOW (Navigation, aktive Zustände) ─────────────────── */

[data-theme="hologram"] .tab-btn.active .icon,
[data-theme="hologram"] .tab_btn.active .icon {
    filter: brightness(0) invert(0) sepia(1) saturate(3) hue-rotate(10deg);
    filter: drop-shadow(0 0 6px hsl(55 95% 50%));
    animation: iconFlicker 5s ease-in-out infinite;
}

[data-theme="hologram"] .navigation-bar .icon {
    filter: var(--icon-filter)
            drop-shadow(0 0 4px hsl(185 100% 50% / 0.5));
}

/* ── CARD – verstärkter Outer Glow on Hover ──────────────────── */

[data-theme="hologram"] .card:hover {
    border-color: hsla(55 95% 50% / 0.55);
    box-shadow:
        0 0 20px hsla(55 95% 50% / 0.18),
        0 0 50px hsla(185 100% 50% / 0.08),
        inset 0 0 15px hsla(55 95% 50% / 0.07);
}

/* ── WIDGET TILE – Innerer Glow bei Hover ────────────────────── */

[data-theme="hologram"] .widget-tile:hover {
    border-color: hsla(185 100% 50% / 0.6);
    box-shadow:
        0 0 20px hsla(185 100% 50% / 0.25),
        0 0 50px hsla(185 100% 50% / 0.1),
        inset 0 0 20px hsla(185 100% 50% / 0.06);
}

/* ── ROLL RESULT – Glow wenn Ergebnis angezeigt ──────────────── */

[data-theme="hologram"] .roll-result:not(:empty) {
    box-shadow:
        0 0 15px hsla(55 95% 50% / 0.4),
        0 0 40px hsla(55 95% 50% / 0.15),
        inset 0 0 12px hsla(55 95% 50% / 0.08);
    animation: valueGlow 2s ease-in-out infinite;
}

/* ── NAVIGATION – Tab-Button Icon Glow ───────────────────────── */

[data-theme="hologram"] .tab-btn:hover .icon,
[data-theme="hologram"] .tab_btn:hover .icon {
    filter: var(--icon-filter) drop-shadow(0 0 5px hsl(185 100% 50% / 0.8));
}

/* ── SCROLLBAR THUMB – Glow ──────────────────────────────────── */

[data-theme="hologram"] ::-webkit-scrollbar-thumb {
    box-shadow: 0 0 6px hsla(185 100% 50% / 0.4);
}

/* ── SUBSKILL NAME – subtiler Flicker ───────────────────────── */

[data-theme="hologram"] .subskill-name {
    text-shadow: 0 0 6px hsl(185 100% 50% / 0.35);
}

/* ── ATTRIBUTE ICON CONTAINER – pulsierender Border ──────────── */

[data-theme="hologram"] .attribute-icon-container {
    box-shadow:
        0 0 8px hsla(55 95% 50% / 0.3),
        inset 0 0 6px hsla(55 95% 50% / 0.1);
    animation: valueGlow 4s ease-in-out infinite;
}

/* ── BORDER GLOW UTILITY ──────────────────────────────────────── */

[data-theme="hologram"] .border-glow-yellow {
    border-color: hsl(55 95% 50%);
    box-shadow: 0 0 12px hsla(55 95% 50% / 0.5), inset 0 0 8px hsla(55 95% 50% / 0.1);
}

[data-theme="hologram"] .border-glow-cyan {
    border-color: hsl(185 100% 50%);
    box-shadow: 0 0 12px hsla(185 100% 50% / 0.5), inset 0 0 8px hsla(185 100% 50% / 0.1);
}

[data-theme="hologram"] .border-glow-pink {
    border-color: hsl(340 100% 50%);
    box-shadow: 0 0 12px hsla(340 100% 50% / 0.5), inset 0 0 8px hsla(340 100% 50% / 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – SCAN-ANIMATIONEN
   Hover-triggered auf Karten/Widgets.
   Tooltips: immer aktiv mit 5s Pause zwischen Scans.
   ═══════════════════════════════════════════════════════════════ */

/* Tooltip-Scan via background-position (kein @property nötig) */

/* Einmalige Sweep-Animation für Hover */
@keyframes scanBeamOnce {
    0%    { top: -70px;              opacity: 0; }
    8%    {                           opacity: 1; }
    92%   {                           opacity: 0.9; }
    100%  { top: calc(100% + 70px); opacity: 0; }
}

@keyframes scanBeamOnceX {
    0%    { left: -80px;              opacity: 0; }
    8%    {                            opacity: 1; }
    92%   {                            opacity: 0.9; }
    100%  { left: calc(100% + 80px); opacity: 0; }
}

/* Tooltip-Scan: 2s Sweep + 5s Pause = 7s total */
@keyframes tooltipScanPos {
    0%      { background-position: 0 -60px; }
    28.5%   { background-position: 0 calc(100% + 60px); }
    100%    { background-position: 0 calc(100% + 60px); }
}

/* ── UTILITY KLASSEN: .cyber-scan / .cyber-scan-x ────────────── */

[data-theme="hologram"] .cyber-scan {
    position: relative;
    overflow: hidden;
}

[data-theme="hologram"] .cyber-scan::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -70px; height: 70px;
    background: linear-gradient(180deg,
        transparent                0%,
        hsla(185 100% 55% / 0.06)  30%,
        hsla(185 100% 75% / 0.65)  49%,
        hsl(185 100% 90% / 0.9)    50%,
        hsla(185 100% 75% / 0.65)  51%,
        hsla(185 100% 55% / 0.06)  70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

[data-theme="hologram"] .cyber-scan:hover::after {
    animation: scanBeamOnce 1.8s linear 1 forwards;
}

[data-theme="hologram"] .cyber-scan-x {
    position: relative;
    overflow: hidden;
}

[data-theme="hologram"] .cyber-scan-x::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -80px; width: 80px;
    background: linear-gradient(90deg,
        transparent                0%,
        hsla(55 95% 55% / 0.06)    30%,
        hsla(55 95% 75% / 0.55)    49%,
        hsl(55 95% 90% / 0.85)     50%,
        hsla(55 95% 75% / 0.55)    51%,
        hsla(55 95% 55% / 0.06)    70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

[data-theme="hologram"] .cyber-scan-x:hover::after {
    animation: scanBeamOnceX 1.8s linear 1 forwards;
}

/* ── HOVER-SCAN: Attribute Cards (::after frei) ──────────────── */

[data-theme="hologram"] .attribute-card {
    overflow: hidden;
}

[data-theme="hologram"] .attribute-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -60px; height: 60px;
    background: linear-gradient(180deg,
        transparent                0%,
        hsla(185 100% 55% / 0.04)  30%,
        hsla(185 100% 70% / 0.38)  49%,
        hsl(185 100% 87% / 0.65)   50%,
        hsla(185 100% 70% / 0.38)  51%,
        hsla(185 100% 55% / 0.04)  70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

[data-theme="hologram"] .attribute-card:hover::after {
    animation: scanBeamOnce 1.5s linear 1 forwards;
}

/* ── HOVER-SCAN: Widget Tiles (::before frei) ────────────────── */

[data-theme="hologram"] .widget-tile {
    overflow: hidden;
}

[data-theme="hologram"] .widget-tile::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -55px; height: 55px;
    background: linear-gradient(180deg,
        transparent                0%,
        hsla(185 100% 55% / 0.04)  30%,
        hsla(185 100% 70% / 0.32)  49%,
        hsl(185 100% 87% / 0.58)   50%,
        hsla(185 100% 70% / 0.32)  51%,
        hsla(185 100% 55% / 0.04)  70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

[data-theme="hologram"] .widget-tile:hover::before {
    animation: scanBeamOnce 1.5s linear 1 forwards;
}

/* ── HOVER-SCAN: Character Cards (::after frei) ──────────────── */

[data-theme="hologram"] .character-card {
    overflow: hidden;
}

[data-theme="hologram"] .character-card::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: -55px; height: 55px;
    background: linear-gradient(180deg,
        transparent                0%,
        hsla(55 95% 55% / 0.04)    30%,
        hsla(55 95% 70% / 0.3)     49%,
        hsl(55 95% 87% / 0.55)     50%,
        hsla(55 95% 70% / 0.3)     51%,
        hsla(55 95% 55% / 0.04)    70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

[data-theme="hologram"] .character-card:hover::after {
    animation: scanBeamOnce 1.5s linear 1 forwards;
}

/* ── HOVER-SCAN: Character Items (::after frei) – horizontal ─── */

[data-theme="hologram"] .character-item {
    overflow: hidden;
}

[data-theme="hologram"] .character-item::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -70px; width: 70px;
    background: linear-gradient(90deg,
        transparent                0%,
        hsla(185 100% 55% / 0.03)  30%,
        hsla(185 100% 70% / 0.25)  49%,
        hsl(185 100% 87% / 0.48)   50%,
        hsla(185 100% 70% / 0.25)  51%,
        hsla(185 100% 55% / 0.03)  70%,
        transparent                100%);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

[data-theme="hologram"] .character-item:hover::after {
    animation: scanBeamOnceX 1.3s linear 1 forwards;
}

/* ── TOOLTIP SCAN – immer aktiv, 2s Sweep + 5s Pause ─────────── */
/* background-position animiert einen fixen Gradienten von oben
   nach unten. Kein @property nötig, läuft in allen Browsern.    */

[data-theme="hologram"] .tooltip,
[data-theme="hologram"] .unified-tooltip,
[data-theme="hologram"] .basic-tooltip,
[data-theme="hologram"] .itooltip,
[data-theme="hologram"] .skilltooltip,
[data-theme="hologram"] .attrtooltip,
[data-theme="hologram"] .stattooltip,
[data-theme="hologram"] #item-tooltip {
    background-color: var(--color-tooltip-bg);
    background-image: linear-gradient(180deg,
        transparent                0%,
        hsla(185 100% 65% / 0.12)  20%,
        hsla(185 100% 80% / 0.5)   48%,
        hsl(185 100% 93% / 0.7)    50%,
        hsla(185 100% 80% / 0.5)   52%,
        hsla(185 100% 65% / 0.12)  80%,
        transparent                100%
    );
    background-size: 100% 60px;
    background-repeat: no-repeat;
    background-position: 0 -60px;
    animation: tooltipScanPos 7s linear infinite;
}

/* ── ARMORY ──────────────────────────────────────────────────── */

[data-theme="hologram"] .equipment-table {
    width: 100%;
    border-collapse: collapse;
    background: hsl(240 35% 4%);
    border: 1px solid hsl(185 100% 50% / 0.2);
}

[data-theme="hologram"] .equipment-table th {
    background: hsl(240 35% 6%);
    color: hsl(55 95% 55%);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    border-bottom: 1px solid hsl(55 95% 50% / 0.4);
    padding: 0.5rem var(--space-sm);
}

[data-theme="hologram"] .equipment-table td {
    border-bottom: 1px solid hsl(185 100% 50% / 0.08);
}

[data-theme="hologram"] .equipment-table tr:hover td {
    background: hsl(185 100% 50% / 0.05);
}

/* Alle Select-Elemente im Cyberpunk-Theme */
[data-theme="hologram"] select,
[data-theme="hologram"] .select,
[data-theme="hologram"] .form-select,
[data-theme="hologram"] .equipment-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: hsl(240 30% 7%);
    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='%2300d4ff' 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(185 100% 50% / 0.3);
    color: hsl(185 100% 70%);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.3rem 1.8rem 0.3rem 0.5rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.1s, box-shadow 0.1s;
}

[data-theme="hologram"] select:hover:not(:disabled),
[data-theme="hologram"] .select:hover:not(:disabled),
[data-theme="hologram"] .form-select:hover:not(:disabled),
[data-theme="hologram"] .equipment-select:hover:not(:disabled) {
    border-color: hsl(185 100% 50% / 0.6);
}

[data-theme="hologram"] select:focus,
[data-theme="hologram"] .select:focus,
[data-theme="hologram"] .form-select:focus,
[data-theme="hologram"] .equipment-select:focus {
    border-color: hsl(185 100% 50%);
    box-shadow: 0 0 8px hsl(185 100% 50% / 0.4), inset 0 0 4px hsl(185 100% 50% / 0.1);
}

[data-theme="hologram"] select:disabled,
[data-theme="hologram"] .select:disabled,
[data-theme="hologram"] .form-select:disabled,
[data-theme="hologram"] .equipment-select:disabled {
    background-color: hsl(240 20% 5%);
    color: hsl(185 100% 50% / 0.2);
    border-color: hsl(185 100% 50% / 0.08);
    cursor: not-allowed;
}

/* Option-Elemente (Chromium/Firefox) */
[data-theme="hologram"] select option {
    background-color: hsl(240 35% 8%);
    color: hsl(185 100% 70%);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}

[data-theme="hologram"] select option:checked,
[data-theme="hologram"] select option:hover {
    background-color: hsl(185 100% 50% / 0.15);
    color: hsl(185 100% 90%);
}

[data-theme="hologram"] .twohanded-toggle {
    background: hsl(240 35% 7%);
    border: 2px solid hsl(55 95% 50% / 0.5);
}

[data-theme="hologram"] .twohanded-toggle:hover {
    border-color: hsl(55 95% 50%);
    box-shadow: 0 0 10px hsl(55 95% 50% / 0.5);
}

[data-theme="hologram"] .twohanded-toggle.active {
    background: hsl(55 95% 50%);
    border-color: hsl(55 95% 70%);
    box-shadow:
        0 0 12px hsl(55 95% 50% / 0.6),
        0 0 25px hsl(55 95% 50% / 0.3);
}

[data-theme="hologram"] .twohanded-toggle.active .twohanded-toggle-icon {
    filter: brightness(0) invert(0);
}

[data-theme="hologram"] .twohanded-tooltip {
    background: hsl(240 35% 5%);
    border: 1px solid hsl(185 100% 50% / 0.3);
    color: hsl(185 100% 60%);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════
   CYBERPUNK THEME – HOLOGRAPHIC DISPLAY EFFECTS
   Periodischer Scan-Beam auf Cards. Puls-Flash auf Bildern.
   Canvas: Neon-Boost.
   ═══════════════════════════════════════════════════════════════ */

/* Keyframe: dünne Störlinie – läuft durch, pausiert dann lange */
@keyframes cyberpunkScanLine {
    0%     { top: -2px;              opacity: 0; }
    1%     { opacity: 1; }
    14%    { top: calc(100% + 2px);  opacity: 0.7; }
    16%    { opacity: 0; }
    100%   { top: calc(100% + 2px);  opacity: 0; }
}

/* Scan-Linie: gelegentlich auf allen Cards */
[data-theme="hologram"] .card {
    overflow: hidden;
}

[data-theme="hologram"] .card::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -2px; height: 2px;
    background: linear-gradient(90deg,
        transparent                  0%,
        hsl(185 100% 70% / 0.5)     15%,
        hsl(185 100% 95% / 0.95)    50%,
        hsl(185 100% 70% / 0.5)     85%,
        transparent                  100%);
    box-shadow:
        0 0 4px  hsl(185 100% 70%),
        0 0 12px hsl(185 100% 50% / 0.55);
    pointer-events: none;
    z-index: 3;
    animation: cyberpunkScanLine 11s ease-in-out infinite;
}

/* Icon-themed: Cyan-Filter-Variable beibehalten */
[data-theme="hologram"] .icon-themed {
    filter: var(--icon-filter);
}

/* Canvas (World Views): Originalfarben, leuchtender Neon-Boost */
[data-theme="hologram"] canvas {
    filter: saturate(130%) brightness(1.12) contrast(1.2);
}
[data-theme="hologram"] .toxicity-container {
    border-color: var(--color-toxicity) !important;
}

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

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