/* SYNTHWAVE / RETRO 80s THEME */
[data-theme="synthwave"] {
    --bg-color: #110022;
    --text-color: #00ffff;
    --ui-bg: rgba(17, 0, 34, 0.85);
    --border-color: #ff00ff;
    --accent-color: #ff007f;

    /* Colors */
    --c-cyan: #00ffff;
    --c-pink: #ff00ff;
    --c-orange: #ff7f00;

    /* Base Notes */
    --n-norm-bg: rgba(255, 0, 255, 0.2);
    --n-norm-border: var(--c-cyan);
    --n-norm-shadow: 0 0 10px var(--c-cyan), 0 0 20px var(--c-pink);

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

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

    --n-hold-bg: #ffff00;
    --n-hold-border: transparent;
    --n-hold-shadow: 0 0 15px #ffff00;
    --n-hold-grad: rgba(255, 255, 0, 0.4);

    --n-bnce-bg: var(--c-pink);
    --n-bnce-border: transparent;
    --n-bnce-shadow: 0 0 15px var(--c-pink);

    --c-perfect: #00ffff;
    --c-great: #ff00ff;
    --c-good: #ffaa00;
    --c-bad: #ff0055;
    --c-miss: #ff0000;
    --c-wrong: #ff0000;
    --c-ouch: #ff0000;
    --c-deadly: #ff0000;
    --c-reverse: #00ffaa;
    --c-bounce: var(--c-pink);
    --c-hold: #ffff00;
    --c-slider: var(--c-cyan);
}

[data-theme="synthwave"][data-palette="miami"] {
    --n-norm-bg: rgba(0, 255, 255, 0.2);
    --n-norm-border: var(--c-pink);
    --n-norm-shadow: 0 0 10px var(--c-pink), 0 0 20px var(--c-cyan);
    --n-doub-bg: #ffff00;
    --n-doub-shadow: 0 0 15px #ffff00;
}

/* Background 3D Grid */
body[data-theme="synthwave"]::before {
    content: '';
    position: fixed;
    bottom: -50%;
    left: -50%;
    width: 200%;
    height: 150%;
    background-image:
        linear-gradient(to right, rgba(255, 0, 255, 0.2) 1px, transparent 1px),
        linear-gradient(to top, rgba(255, 0, 255, 0.2) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(500px) rotateX(60deg);
    animation: grid-move 5s linear infinite;
    z-index: -2;
    pointer-events: none;
}

@keyframes grid-move {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 50px;
    }
}

/* Sunset Sun */
body[data-theme="synthwave"]::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    width: 600px;
    height: 600px;
    background: linear-gradient(to bottom, #ffea00 0%, #ff007f 50%, transparent 50%);
    border-radius: 50%;
    z-index: -3;
    pointer-events: none;
    opacity: 0.15;
    box-shadow: 0 0 100px #ff007f;
}

/* Central Disks - Neon Radar */
[data-theme="synthwave"] .circle-wrapper {
    border: 2px solid var(--c-pink);
    box-shadow: 0 0 20px var(--c-pink), inset 0 0 40px rgba(255, 0, 255, 0.2);
    background: repeating-radial-gradient(transparent,
            transparent 20px,
            rgba(0, 255, 255, 0.1) 21px,
            rgba(0, 255, 255, 0.1) 22px);
}

[data-theme="synthwave"] .stick {
    background: linear-gradient(to top, transparent, var(--c-cyan));
    box-shadow: none;
    width: 4px;
}

[data-theme="synthwave"] .inner-circle {
    background: var(--c-pink);
    box-shadow: 0 0 15px var(--c-cyan);
}

[data-theme="synthwave"] .mark {
    border-radius: 0;
    /* Square retro notes */
    transform: translate(-50%, -50%) rotate(45deg);
    /* Diamond shape */
}