/* CYBERPUNK 2077 THEME (Neon Blade) */
[data-theme="cyberpunk"] {
    --bg-color: #0a0a0c;
    --text-color: #eaff00;
    /* Neon Yellow */
    --ui-bg: rgba(0, 0, 0, 0.85);
    --border-color: #00e5ff;
    /* Cyan */
    --accent-color: #ff0055;
    /* Hot Magenta */

    --circle-bg: repeating-linear-gradient(45deg, #0a0a0c 0, #0a0a0c 10px, #111115 10px, #111115 20px);
    --circle-border: #00e5ff;
    --circle-border-width: 8px;
    --inner-bg: #000000;
    --inner-border: #ff0055;
    --stick-color: #eaff00;
    --stick-width: 8px;

    --shadow-outer: 0 0 30px rgba(0, 229, 255, 0.4), inset 0 0 50px rgba(255, 0, 85, 0.2);
    --shadow-inner: 0 0 20px rgba(255, 0, 85, 0.5), inset 0 0 15px rgba(0, 229, 255, 0.3);
    --shadow-stick: 0 0 15px #eaff00, 0 0 30px rgba(234, 255, 0, 0.5);

    --ui-text-color: #eaff00;
    --ui-text-shadow: 0 0 10px rgba(234, 255, 0, 0.8), 2px 2px 0px rgba(255, 0, 85, 0.8);

    /* Default (Neon Yellow) */
    --c-yellow: #eaff00;
    --c-cyan: #00e5ff;
    --c-magenta: #ff0055;

    /* Base Notes */
    --n-norm-bg: var(--c-cyan);
    --n-norm-border: var(--c-yellow);
    --n-norm-shadow: 0 0 15px var(--c-cyan), 0 0 30px var(--c-cyan);

    /* Special Notes */
    --n-doub-bg: var(--c-magenta);
    --n-doub-border: transparent;
    --n-doub-shadow: 0 0 15px var(--c-magenta);

    --n-rev-bg: #00ff66;
    --n-rev-border: white;
    --n-rev-shadow: 0 0 15px #00ff66;

    --n-hold-bg: var(--c-yellow);
    --n-hold-border: transparent;
    --n-hold-shadow: 0 0 15px var(--c-yellow);
    --n-hold-grad: rgba(234, 255, 0, 0.4);

    --n-bnce-bg: #ff00ff;
    --n-bnce-border: white;
    --n-bnce-shadow: 0 0 15px #ff00ff;

    --c-perfect: #00ff66;
    --c-great: var(--c-yellow);
    --c-good: #ffaa00;
    --c-bad: #ff5500;
    --c-miss: #ff0000;
    --c-wrong: #ff0000;
    --c-ouch: #ff0000;
    --c-deadly: #ff0000;
    --c-reverse: #00ff66;
    --c-bounce: #ff00ff;
    --c-hold: var(--c-yellow);
}

[data-theme="cyberpunk"] body,
body[data-theme="cyberpunk"] {
    background-color: var(--bg-color);
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.03) 0px, rgba(0, 229, 255, 0.03) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(255, 0, 85, 0.02) 0px, rgba(255, 0, 85, 0.02) 1px, transparent 1px, transparent 4px);
}

[data-theme="cyberpunk"][data-palette="magenta"] {
    --n-norm-bg: var(--c-yellow);
    --n-norm-border: var(--c-magenta);
    --n-norm-shadow: 0 0 15px var(--c-yellow), 0 0 30px var(--c-yellow);
    --n-doub-bg: var(--c-cyan);
    --n-doub-shadow: 0 0 15px var(--c-cyan);
}

/* Katana Stick */
[data-theme="cyberpunk"] .stick {
    background: #fff;
    box-shadow: 0 0 10px var(--n-norm-border), 0 0 20px var(--n-norm-border), 0 0 30px var(--n-norm-border);
    border-radius: 4px;
}

[data-theme="cyberpunk"] .circle-wrapper {
    border: 3px solid rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.1) inset;
}

[data-theme="cyberpunk"] .menu-overlay,
[data-theme="cyberpunk"] .sub-menu-panel,
[data-theme="cyberpunk"] .pause-menu {
    border: 2px solid var(--border-color);
    background: var(--ui-bg);
    box-shadow: 4px 4px 0px var(--accent-color);
    border-radius: 0;
}

[data-theme="cyberpunk"] .menu-btn {
    border-radius: 0;
    border: 2px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 2px;
    box-shadow: 4px 4px 0px var(--accent-color);
    transition: all 0.1s;
}

[data-theme="cyberpunk"] .menu-btn:hover {
    background: var(--border-color);
    color: #000;
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--accent-color);
}

/* Chromatic Aberration on Miss */
@keyframes glitch-aberration {
    0% {
        transform: translate(0);
        filter: drop-shadow(0 0 0 red) drop-shadow(0 0 0 cyan);
    }

    20% {
        transform: translate(-5px, 2px);
        filter: drop-shadow(-5px 0 0 red) drop-shadow(5px 0 0 cyan);
    }

    40% {
        transform: translate(5px, -2px);
        filter: drop-shadow(5px 0 0 red) drop-shadow(-5px 0 0 cyan);
    }

    60% {
        transform: translate(-2px, 5px);
        filter: drop-shadow(-2px 0 0 red) drop-shadow(2px 0 0 cyan);
    }

    80% {
        transform: translate(2px, -5px);
        filter: drop-shadow(2px 0 0 red) drop-shadow(-2px 0 0 cyan);
    }

    100% {
        transform: translate(0);
        filter: drop-shadow(0 0 0 red) drop-shadow(0 0 0 cyan);
    }
}

[data-theme="cyberpunk"] .glitch-active {
    animation: glitch-aberration 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

[data-theme="cyberpunk"] .feedback-text {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 900;
    text-transform: uppercase;
}