/* DEEP OCEAN (AQUARIUM) THEME */
[data-theme="deepocean"] {
    --bg-color: #001220;
    --text-color: #aeeeff;
    --ui-bg: rgba(0, 20, 40, 0.85);
    --border-color: #00aaff;
    --accent-color: #00ffcc;

    /* Colors */
    --c-ocean: #005073;
    --c-cyan: #00aaff;
    --c-coral: #ff7f50;

    /* Base Notes (Bubbles) */
    --n-norm-bg: rgba(0, 170, 255, 0.2);
    --n-norm-border: var(--c-cyan);
    --n-norm-shadow: 0 0 10px rgba(0, 170, 255, 0.5), inset 0 0 5px #fff;

    /* Special Notes */
    --n-doub-bg: rgba(255, 127, 80, 0.2);
    --n-doub-border: var(--c-coral);
    --n-doub-shadow: 0 0 10px rgba(255, 127, 80, 0.5), inset 0 0 5px #fff;

    --n-rev-bg: rgba(0, 255, 204, 0.2);
    --n-rev-border: #00ffcc;
    --n-rev-shadow: 0 0 10px rgba(0, 255, 204, 0.5), inset 0 0 5px #fff;

    --n-hold-bg: rgba(255, 255, 136, 0.2);
    --n-hold-border: #ffff88;
    --n-hold-shadow: 0 0 10px rgba(255, 255, 136, 0.5), inset 0 0 5px #fff;
    --n-hold-grad: rgba(255, 255, 136, 0.4);

    --n-bnce-bg: rgba(255, 85, 170, 0.2);
    --n-bnce-border: #ff55aa;
    --n-bnce-shadow: 0 0 10px rgba(255, 85, 170, 0.5), inset 0 0 5px #fff;

    --c-perfect: #00ffcc;
    --c-great: #aeeeff;
    --c-good: #ffcc00;
    --c-bad: #ff6600;
    --c-miss: #ff0000;
    --c-wrong: #ff0000;
    --c-ouch: #ff0000;
    --c-deadly: #ff0000;
    --c-reverse: #00ffcc;
    --c-bounce: #ff55aa;
    --c-hold: #ffff88;
    --c-slider: var(--c-cyan);
}

[data-theme="deepocean"][data-palette="coral"] {
    --n-norm-bg: rgba(255, 127, 80, 0.2);
    --n-norm-border: var(--c-coral);
    --n-norm-shadow: 0 0 10px rgba(255, 127, 80, 0.5), inset 0 0 5px #fff;
    --n-doub-bg: rgba(0, 170, 255, 0.2);
    --n-doub-border: var(--c-cyan);
    --n-doub-shadow: 0 0 10px rgba(0, 170, 255, 0.5), inset 0 0 5px #fff;
}

body[data-theme="deepocean"] {
    background: radial-gradient(circle at center, #002240 0%, #000a14 100%);
}

/* Water Ripple / Caustics Background overlay */
body[data-theme="deepocean"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(0, 170, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(0, 255, 204, 0.05) 0%, transparent 50%);
    z-index: -2;
    animation: drift 10s ease-in-out infinite alternate;
}

@keyframes drift {
    0% {
        transform: scale(1) translate(0px, 0px);
    }

    100% {
        transform: scale(1.1) translate(20px, 10px);
    }
}

/* UI Wobble */
@keyframes underwater-wobble {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(1deg);
    }
}

[data-theme="deepocean"] .sub-menu-panel,
[data-theme="deepocean"] .diff-card,
[data-theme="deepocean"] .mod-card {
    border-radius: 15px;
    border: 1px solid rgba(0, 170, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 50, 80, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

[data-theme="deepocean"] .mod-card:hover {
    animation: underwater-wobble 2s ease-in-out infinite;
}

/* Whirlpool animation when disk spins */
[data-theme="deepocean"] .circle-wrapper {
    border: 4px solid rgba(0, 170, 255, 0.3);
    border-radius: 50%;
    box-shadow: inset 0 0 30px rgba(0, 170, 255, 0.2), 0 0 20px rgba(0, 50, 80, 0.5);
    background: radial-gradient(circle at center, rgba(0, 170, 255, 0.1) 0%, transparent 70%);
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

[data-theme="deepocean"] .stick {
    border-radius: 20px;
    background: linear-gradient(to top, transparent, var(--n-norm-border));
    box-shadow: 0 0 10px var(--n-norm-border);
}

/* Bubble Notes */
[data-theme="deepocean"] .mark {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--n-norm-border);
    box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.3), inset 2px 2px 6px rgba(255, 255, 255, 0.7), 0 0 10px var(--n-norm-border);
}

[data-theme="deepocean"] .mark.double-mark {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--n-doub-border);
    box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.3), inset 2px 2px 6px rgba(255, 255, 255, 0.7), 0 0 10px var(--n-doub-border);
}

[data-theme="deepocean"] .mark.reverse-mark {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--c-reverse);
    box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.3), inset 2px 2px 6px rgba(255, 255, 255, 0.7), 0 0 10px var(--c-reverse);
}

[data-theme="deepocean"] .mark.bounce-mark {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--c-bounce);
    box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.3), inset 2px 2px 6px rgba(255, 255, 255, 0.7), 0 0 10px var(--c-bounce);
}