/* ==========================================================================
   THEME SYSTEM - RENEGADE NOTES
   ========================================================================== */

/* 1. Base Variables (Default / Dark Mode) */
:root {
    --bg-primary: #0a0a0a;
    --bg-secondary: #140505;
    --text: #e0e0e0;
    --text-muted: #888888;
    --accent: #ff3333;
    --accent-glow: rgba(255, 51, 51, 0.5);
    --border: #330000;
    --card-bg: rgba(20, 5, 5, 0.8);
    --glass-bg: rgba(10, 10, 10, 0.8);
    --modal-overlay: rgba(0, 0, 0, 0.85);

    /* Font Families */
    --font-primary: 'Inter', sans-serif;
    --font-punk: 'Bangers', cursive;
    --font-marker: 'Permanent Marker', cursive;
}

/* 2. Light Theme */
[data-theme="light"] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --text: #1a1a1a;
    --text-muted: #666666;
    --accent: #cc0000;
    --accent-glow: rgba(204, 0, 0, 0.3);
    --border: #ffcccc;
    --card-bg: rgba(255, 255, 255, 0.9);
    --glass-bg: rgba(255, 255, 255, 0.8);
    --modal-overlay: rgba(255, 255, 255, 0.85);
}

/* 3. King of Spades Theme (Pink/Purple) */
[data-theme="king-of-spades"] {
    --bg-primary: #0f0514;
    --bg-secondary: #1a0a24;
    --text: #f0e6ff;
    --text-muted: #bdaecf;
    --accent: #d946ef;
    /* Neon Pink/Purple */
    --accent-glow: rgba(217, 70, 239, 0.5);
    --border: #4a1d5c;
    --card-bg: rgba(26, 10, 36, 0.85);
    --glass-bg: rgba(15, 5, 20, 0.9);

    background-image: linear-gradient(rgba(15, 5, 20, 0.85), rgba(15, 5, 20, 0.9)), url('../assets/themes/bg_king.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 4. Arcify Theme (Yellow/Gold/Lightning) */
[data-theme="arcify"] {
    --bg-primary: #121008;
    --bg-secondary: #1c180a;
    --text: #fffbe6;
    --text-muted: #cfc8ab;
    --accent: #fbbf24;
    /* Amber/Gold */
    --accent-glow: rgba(251, 191, 36, 0.5);
    --border: #4d3e12;
    --card-bg: rgba(28, 24, 10, 0.9);
    --glass-bg: rgba(18, 16, 8, 0.9);

    background-image: linear-gradient(rgba(18, 16, 8, 0.8), rgba(18, 16, 8, 0.9)), url('../assets/themes/bg_arcify.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 5. The Man in Red Theme (Red/White - Updated) */
[data-theme="man-in-red"] {
    --bg-primary: #1a0505;
    --bg-secondary: #2b0a0a;
    --text: #ffffff;
    --text-muted: #ffcccc;
    --accent: #ff0000;
    /* Pure Red */
    --accent-glow: rgba(255, 0, 0, 0.7);
    --border: #cc0000;
    --card-bg: rgba(40, 5, 5, 0.9);
    --glass-bg: rgba(20, 0, 0, 0.95);

    background-image: linear-gradient(rgba(45, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('../assets/themes/bg_man_in_red.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 6. Ghost Theme (Silver/White/Metal) */
[data-theme="ghost"] {
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --text: #ffffff;
    --text-muted: #a0a0a5;
    --accent: #d1d1d6;
    /* Silver/Chrome */
    --accent-glow: rgba(255, 255, 255, 0.4);
    --border: #636366;
    --card-bg: rgba(44, 44, 46, 0.85);
    --glass-bg: rgba(28, 28, 30, 0.9);

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('../assets/themes/bg_ghost.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* 7. Reaper Theme (Dark/Fog/Scythe) */
[data-theme="reaper"] {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --text: #d4d4d4;
    --text-muted: #555555;
    --accent: #555555;
    /* Dark Steel */
    --accent-glow: rgba(100, 100, 100, 0.3);
    --border: #333333;
    --card-bg: rgba(10, 10, 10, 0.95);
    --glass-bg: rgba(0, 0, 0, 0.98);

    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.95)), url('../assets/themes/bg_reaper.png');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Theme Grid in Settings */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.theme-option {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    aspect-ratio: 16/9;
}

.theme-option.active {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
    transform: scale(1.05);
}

.theme-option:hover {
    transform: translateY(-2px);
}

.theme-preview {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.theme-label {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.75rem;
    padding: 6px;
    text-align: center;
    font-family: var(--font-primary);
}

/* Theme Previews */
.theme-preview.light {
    background: #f5f5f5;
    border: 4px solid #fff;
}

.theme-preview.dark {
    background: #0a0a0a;
    border: 4px solid #333;
}

.theme-preview.king {
    background-image: url('../assets/themes/bg_king.png');
}

.theme-preview.arcify {
    background-image: url('../assets/themes/bg_arcify.png');
}

.theme-preview.red {
    background-image: url('../assets/themes/bg_man_in_red.png');
}

.theme-preview.ghost {
    background-image: url('../assets/themes/bg_ghost.png');
}

.theme-preview.reaper {
    background-image: url('../assets/themes/bg_reaper.png');
}

/* FX Animations */
@keyframes scytheSlash {
    0% {
        transform: translateX(100vw) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translateX(0) rotate(-20deg);
        opacity: 1;
    }

    100% {
        transform: translateX(-100vw) rotate(-45deg);
        opacity: 0;
    }
}

.fx-scythe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    background-image: url('../assets/fx/scythe.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: scytheSlash 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.fx-gunshot-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
    z-index: 9999;
    background-image: url('../assets/fx/gunshot.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: fadeInOut 0.8s ease-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    10% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-5px, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(5px, 0);
    }
}

.screen-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}