/* =========================================
   ZEN GARDEN THEME (DELUXE)
   ========================================= */
[data-theme="zengarden"] {
    --bg-color: #dbe4d3;
    --circle-bg: radial-gradient(circle at center, rgba(232, 240, 225, 0.9) 0%, rgba(209, 224, 197, 0.95) 100%);
    --circle-border: #4a5d23;
    --circle-border-width: 6px;
    --inner-bg: #f9fbf7;
    --inner-border: #4a5d23;
    --stick-color: #5c4033;
    --stick-width: 8px;

    /* Complex, layered smooth shadows for a deeper 3D feel */
    --shadow-outer: 0 10px 30px rgba(74, 93, 35, 0.3), 0 0 40px rgba(163, 194, 147, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.9);
    --shadow-inner: 0 5px 15px rgba(255, 255, 255, 0.9), inset 0 0 15px rgba(74, 93, 35, 0.3);
    --shadow-stick: 0 4px 15px rgba(92, 64, 51, 0.5), 0 0 20px rgba(255, 255, 255, 0.6);
    --ui-text-color: #2c3e18;
    --ui-text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9), 0 0 10px rgba(255, 255, 255, 0.5);

    /* Enhanced 3D Notes with Gradients */
    --n-norm-bg: radial-gradient(circle at 30% 30%, #a3c293 0%, #6b8e23 100%);
    --n-norm-border: #ffffff;
    --n-norm-shadow: 0 5px 15px rgba(107, 142, 35, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.2);
    --n-doub-bg: radial-gradient(circle at 30% 30%, #8fbc8f 0%, #556b2f 100%);
    --n-doub-border: #ffffff;
    --n-doub-shadow: 0 5px 15px rgba(85, 107, 47, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.2);
    --n-hold-bg: radial-gradient(circle at 30% 30%, #e8c39e 0%, #d4a373 100%);
    --n-hold-border: #ffffff;
    --n-hold-shadow: 0 5px 15px rgba(212, 163, 115, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.2);
    --n-hold-grad: rgba(212, 163, 115, 0.5);
    --n-rev-bg: radial-gradient(circle at 30% 30%, #dcd1a5 0%, #c2b280 100%);
    --n-rev-border: #ffffff;
    --n-rev-shadow: 0 5px 15px rgba(194, 178, 128, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.2);

    --c-perfect: #6b8e23;
    --c-great: #a3c293;
    --c-good: #d4a373;
    --c-miss: #d1e0c5;
    --c-wrong: #d1e0c5;
    --c-ouch: #d1e0c5;
    --c-deadly: #d1e0c5;
    --c-reverse: #6b8e23;
    --c-bounce: #a3c293;
    --c-hold: #d4a373;
}

/* Base Body Animations for Zen Garden */
[data-theme="zengarden"] body,
body[data-theme="zengarden"] {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 40%),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 20px);
    background-size: 200% 200%;
    animation: zenScroll 30s ease-in-out infinite alternate;
}

@keyframes zenScroll {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

#main-container .circle-wrapper[data-theme="zengarden"],
[data-theme="zengarden"] .circle-wrapper {
    box-shadow: var(--shadow-outer);
    border-style: solid;
    /* Add subtle pulsating glow to circle wrapper */
    animation: zenPulse 6s ease-in-out infinite alternate;
}

@keyframes zenPulse {
    0% {
        filter: brightness(1);
    }

    100% {
        filter: brightness(1.05) drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
    }
}

[data-theme="zengarden"] .inner-circle {
    box-shadow: var(--shadow-inner);
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
}

/* --- ZEN GARDEN PALETTE: Bamboo Grove (Green/Wood) --- */
[data-palette="bamboo"][data-theme="zengarden"],
body[data-theme="zengarden"][data-palette="bamboo"] {
    --circle-bg: repeating-linear-gradient(90deg, #dce6d2 0px, #dce6d2 10px, #cddbbf 10px, #cddbbf 20px);
    --circle-border: #3b4d1b;
    --inner-border: #6b8e23;
    --stick-color: linear-gradient(to right, #8b5a2b, #a0522d);
}

body[data-theme="zengarden"][data-palette="bamboo"] {
    background-image:
        repeating-linear-gradient(to bottom, rgba(107, 142, 35, 0.05) 0px, rgba(107, 142, 35, 0.05) 4px, transparent 4px, transparent 20px),
        linear-gradient(135deg, #e8f0e1 0%, #d1e0c5 100%);
    animation: zenScrollBamboo 40s linear infinite;
}

@keyframes zenScrollBamboo {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 100px 200px;
    }
}

/* --- ZEN GARDEN PALETTE: Sakura (Pink/Spring) --- */
[data-palette="sakura"][data-theme="zengarden"],
body[data-theme="zengarden"][data-palette="sakura"] {
    --bg-color: #ffe6ea;
    --circle-bg: radial-gradient(circle at center, #fff0f5 0%, #ffc0cb 100%);
    --circle-border: #ff69b4;
    --inner-bg: #fffafa;
    --inner-border: #ffb6c1;
    --stick-color: #ff1493;

    --shadow-outer: 0 10px 40px rgba(255, 105, 180, 0.3), inset 0 0 20px rgba(255, 255, 255, 1);
    --shadow-inner: 0 0 20px rgba(255, 182, 193, 0.6), inset 0 0 15px rgba(255, 105, 180, 0.2);
    --shadow-stick: 0 4px 15px rgba(255, 20, 147, 0.5), 0 0 25px rgba(255, 255, 255, 0.9);

    --ui-text-color: #db2777;
    --ui-text-shadow: 0 2px 4px rgba(255, 255, 255, 0.9), 0 0 15px rgba(255, 192, 203, 0.8);

    --n-norm-bg: radial-gradient(circle at 30% 30%, #ffb6c1 0%, #ff69b4 100%);
    --n-norm-shadow: 0 5px 15px rgba(255, 105, 180, 0.6), inset -2px -2px 10px rgba(0, 0, 0, 0.1);
    --n-doub-bg: radial-gradient(circle at 30% 30%, #ffc0cb 0%, #db7093 100%);
    --n-doub-shadow: 0 5px 15px rgba(219, 112, 147, 0.6);
    --n-hold-bg: radial-gradient(circle at 30% 30%, #dda0dd 0%, #da70d6 100%);
    --n-hold-shadow: 0 5px 15px rgba(218, 112, 214, 0.6);
    --n-hold-grad: rgba(218, 112, 214, 0.5);
    --n-rev-bg: radial-gradient(circle at 30% 30%, #ffffe0 0%, #fafad2 100%);
    --n-rev-shadow: 0 5px 15px rgba(250, 250, 210, 0.6);

    --c-perfect: #ff69b4;
    --c-great: #ffb6c1;
    --c-good: #da70d6;
    --c-miss: #ffc0cb;
    --c-wrong: #ffc0cb;
    --c-ouch: #ffc0cb;
    --c-deadly: #ffc0cb;
    --c-reverse: #ff69b4;
    --c-bounce: #ffb6c1;
    --c-hold: #da70d6;
}

body[data-theme="zengarden"][data-palette="sakura"] {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 182, 193, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 105, 180, 0.2) 0%, transparent 50%),
        linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%);
    animation: zenScrollSakura 25s ease-in-out infinite alternate;
}

@keyframes zenScrollSakura {
    0% {
        background-size: 100% 100%;
        background-position: 0% 0%;
    }

    100% {
        background-size: 150% 150%;
        background-position: 100% 100%;
    }
}

/* --- ZEN GARDEN PALETTE: River Stone (Slate/Neutral) --- */
[data-palette="stone"][data-theme="zengarden"],
body[data-theme="zengarden"][data-palette="stone"] {
    --bg-color: #2c3e50;
    --circle-bg: repeating-radial-gradient(circle at center, #34495e 0, #34495e 10px, #2c3e50 10px, #2c3e50 20px);
    --circle-border: #7f8c8d;
    --inner-bg: #ecf0f1;
    --inner-border: #95a5a6;
    --stick-color: linear-gradient(to right, #bdc3c7, #ecf0f1);

    --shadow-outer: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.5);
    --shadow-inner: 0 5px 20px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(189, 195, 199, 0.8);
    --shadow-stick: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(236, 240, 241, 0.6);

    --ui-text-color: #ecf0f1;
    --ui-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);

    /* High contrast notes for dark background */
    --n-norm-bg: radial-gradient(circle at 30% 30%, #ecf0f1 0%, #bdc3c7 100%);
    --n-norm-border: #2c3e50;
    --n-norm-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 15px rgba(236, 240, 241, 0.5);

    --n-doub-bg: radial-gradient(circle at 30% 30%, #3498db 0%, #2980b9 100%);
    --n-doub-border: #ecf0f1;
    --n-doub-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 15px rgba(52, 152, 219, 0.5);

    --n-hold-bg: radial-gradient(circle at 30% 30%, #e67e22 0%, #d35400 100%);
    --n-hold-border: #ecf0f1;
    --n-hold-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 15px rgba(230, 126, 34, 0.5);
    --n-hold-grad: rgba(230, 126, 34, 0.4);

    --n-rev-bg: radial-gradient(circle at 30% 30%, #1abc9c 0%, #16a085 100%);
    --n-rev-border: #ecf0f1;
    --n-rev-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 15px rgba(26, 188, 156, 0.5);

    --c-perfect: #bdc3c7;
    --c-great: #ecf0f1;
    --c-good: #d35400;
    --c-miss: #34495e;
    --c-wrong: #34495e;
    --c-ouch: #34495e;
    --c-deadly: #34495e;
    --c-reverse: #bdc3c7;
    --c-bounce: #ecf0f1;
    --c-hold: #d35400;
}

body[data-theme="zengarden"][data-palette="stone"] {
    background-image:
        linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    /* Gentle ripple simulation */
    animation: zenScrollStone 20s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@keyframes zenScrollStone {
    0% {
        filter: contrast(1) brightness(1);
    }

    100% {
        filter: contrast(1.1) brightness(1.2);
    }
}

/* --- ZEN GARDEN PALETTE: Koi Pond (Deep Blue / Bright Orange) --- */
[data-palette="koi"][data-theme="zengarden"],
body[data-theme="zengarden"][data-palette="koi"] {
    --bg-color: #0d1b2a;
    --circle-bg: radial-gradient(circle at center, #1b263b 0%, #0d1b2a 100%);
    --circle-border: #415a77;
    --inner-bg: #e0e1dd;
    --inner-border: #ff7e00;
    --stick-color: #ff9100;

    /* Intensely glowing underwater elements */
    --shadow-outer: 0 10px 50px rgba(13, 27, 42, 0.9), inset 0 0 40px rgba(65, 90, 119, 0.8);
    --shadow-inner: 0 0 30px rgba(255, 126, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.2);
    --shadow-stick: 0 0 25px rgba(255, 145, 0, 0.9), 0 0 50px rgba(255, 126, 0, 0.5);

    --ui-text-color: #ff9100;
    --ui-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 15px #ff7e00;

    --n-norm-bg: radial-gradient(circle at 30% 30%, #ffb347 0%, #ff7e00 100%);
    --n-norm-border: #ffffff;
    --n-norm-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 126, 0, 0.9);

    --n-doub-bg: radial-gradient(circle at 30% 30%, #e0e1dd 0%, #778da9 100%);
    --n-doub-border: #ff7e00;
    --n-doub-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 25px rgba(224, 225, 221, 0.7);

    --n-hold-bg: radial-gradient(circle at 30% 30%, #415a77 0%, #1b263b 100%);
    --n-hold-border: #ff7e00;
    --n-hold-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 25px rgba(65, 90, 119, 0.9);
    --n-hold-grad: rgba(65, 90, 119, 0.5);

    --n-rev-bg: radial-gradient(circle at 30% 30%, #ffffff 0%, #e0e1dd 100%);
    --n-rev-border: #ff7e00;
    --n-rev-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 255, 255, 0.8);
}

body[data-theme="zengarden"][data-palette="koi"] {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(65, 90, 119, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 70% 80%, rgba(27, 38, 59, 0.5) 0%, transparent 60%),
        linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
    animation: zenScrollKoi 15s ease-in-out infinite alternate;
}

@keyframes zenScrollKoi {
    0% {
        background-position: 0% 0%;
        filter: hue-rotate(0deg);
    }

    100% {
        background-position: 100% 100%;
        filter: hue-rotate(15deg);
    }
}