/* ===== SYNTHWAVE THEME ===== */
body.theme-synthwave {
    --text-color: #f0d0ff;
    --bg-color: #0a0018;
    --wrapper-bg: rgba(12, 0, 24, 0.97);
    --header-bg: #110022;
    --header-gradient: linear-gradient(135deg, #200040, #080012);
    --menu-bg: #0e0020;
    --menu-gradient: linear-gradient(145deg, #1a0038, #090016);
    --content-bg: #0d0022;
    --border-color: #ff00aa;
    --border-light: #aa0070;
    --btn-bg: #1e0040;
    --btn-hover: #2e0060;
    --link-hover-bg: #4400aa;
    --link-hover-color: #ffffff;
    --footer-bg: #080010;
    --footer-gradient: linear-gradient(180deg, #0e0022, #030008);
    --shadow-color: rgba(255, 0, 170, 0.4);
    --input-bg: #120028;
    --input-text: #f0d0ff;
    --panel-bg: rgba(16, 0, 32, 0.99);
    --border-color-rgb: 255, 0, 170;
    --accent: #ff00aa;
    --accent-dim: rgba(255, 0, 170, 0.1);
    --card-bg: rgba(10, 0, 22, 0.93);
    --card-bg-hover: rgba(18, 0, 36, 0.97);

    background: var(--bg-color);
    background-image: linear-gradient(180deg, #0a0018 0%, #12002a 50%, #0a0018 100%);
}

body.theme-synthwave .wrapper {
    background: var(--wrapper-bg);
    border-left: 1px solid rgba(255, 0, 170, 0.5);
    border-right: 1px solid rgba(255, 0, 170, 0.5);
    border-bottom: 1px solid rgba(255, 0, 170, 0.5);
    box-shadow: 0 0 60px rgba(255, 0, 170, 0.08), 0 0 120px rgba(0, 200, 255, 0.04);
}

body.theme-synthwave .mafia-header {
    background: var(--header-gradient);
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 30px rgba(255, 0, 170, 0.25), 0 4px 60px rgba(0, 200, 255, 0.1);
}

body.theme-synthwave .shiny-title {
    background: linear-gradient(90deg, #ff00aa, #00ccff, #ff00aa);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: synthGradient 6s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 0, 170, 0.6));
}

@keyframes synthGradient {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

body.theme-synthwave .welcome { color: var(--text-color); border-right-color: var(--border-color); }

body.theme-synthwave .header-link,
body.theme-synthwave .header-btn {
    background: var(--btn-bg);
    border: 1px solid rgba(255, 0, 170, 0.5);
    color: var(--text-color);
    box-shadow: 0 0 8px rgba(255, 0, 170, 0.15);
}
body.theme-synthwave .header-link:hover,
body.theme-synthwave .header-btn:hover {
    background: var(--btn-hover);
    color: #00ccff;
    border-color: #00ccff;
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.3);
}

body.theme-synthwave .currency-display {
    background: var(--btn-bg);
    border: 1px solid rgba(255, 0, 170, 0.4);
    color: var(--text-color);
}

body.theme-synthwave .mafia-menu {
    background: var(--menu-gradient);
    border-right: 1px solid rgba(255, 0, 170, 0.4);
}
body.theme-synthwave .mafia-menu li.menu-section {
    color: #ff00aa;
    border-bottom: 1px solid rgba(255, 0, 170, 0.2);
    text-shadow: 0 0 8px rgba(255, 0, 170, 0.5);
}
body.theme-synthwave .mafia-menu li a { color: var(--text-color); }
body.theme-synthwave .mafia-menu li a:hover,
body.theme-synthwave .mafia-menu li a.active {
    background: rgba(255, 0, 170, 0.1);
    border-left: 3px solid #00ccff;
    color: #00ccff;
    text-shadow: 0 0 8px rgba(0, 204, 255, 0.5);
}

body.theme-synthwave .content {
    background: var(--content-bg);
    color: var(--text-color);
}
body.theme-synthwave .content h1,
body.theme-synthwave .content h2,
body.theme-synthwave .content h3 {
    color: #00ccff;
    border-bottom: 1px solid rgba(0, 204, 255, 0.25);
    text-shadow: 0 0 15px rgba(0, 204, 255, 0.4);
}

body.theme-synthwave .mafia-footer {
    background: var(--footer-gradient);
    color: var(--text-color);
    border-top: 1px solid rgba(255, 0, 170, 0.4);
}

body.theme-synthwave .btn-mafia {
    background: linear-gradient(145deg, #2a0058, #1a003a);
    border: 1px solid rgba(255, 0, 170, 0.5);
    color: var(--text-color);
    box-shadow: 0 0 10px rgba(255, 0, 170, 0.15), 0 2px 0 #050005;
}
body.theme-synthwave .btn-mafia:hover:not(:disabled) {
    background: linear-gradient(145deg, #3e0080, #2a005a);
    border-color: #00ccff;
    color: #00ccff;
    box-shadow: 0 0 18px rgba(0, 204, 255, 0.3), 0 2px 0 #050005;
}

body.theme-synthwave .btn-small {
    background: var(--btn-bg);
    color: var(--text-color);
    border: 1px solid rgba(255, 0, 170, 0.4);
}
body.theme-synthwave .btn-small:hover { background: var(--btn-hover); color: #00ccff; }

body.theme-synthwave .form-container {
    background: var(--menu-bg);
    border: 1px solid rgba(255, 0, 170, 0.4);
}
body.theme-synthwave .form-group label { color: var(--text-color); }
body.theme-synthwave .form-group input {
    background: var(--input-bg);
    border: 1px solid rgba(255, 0, 170, 0.3);
    color: var(--input-text);
}
body.theme-synthwave .form-group input:focus {
    border-color: #00ccff;
    box-shadow: 0 0 10px rgba(0, 204, 255, 0.25);
}

body.theme-synthwave .game-area {
    background: var(--content-bg);
    border: 1px solid rgba(255, 0, 170, 0.35);
}

body.theme-synthwave .bet-label { color: #ff00aa !important; }

body.theme-synthwave .theme-swatch { border-color: rgba(255, 0, 170, 0.3); color: var(--text-color); background: var(--card-bg); }
body.theme-synthwave .theme-swatch:hover { border-color: #ff00aa; color: #ff00aa; box-shadow: 0 0 10px rgba(255, 0, 170, 0.3); }
body.theme-synthwave .theme-swatch.active { border-color: #00ccff; color: #00ccff; background: rgba(0, 204, 255, 0.08); box-shadow: 0 0 12px rgba(0, 204, 255, 0.25); }

/* ===== RETRO MOVING GRID ===== */
body.theme-synthwave .content {
    background-image:
        linear-gradient(rgba(255,0,170,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,255,0.06) 1px, transparent 1px);
    background-size: 50px 50px;
    will-change: background-position;
    animation: synth-grid 12s linear infinite;
}
@keyframes synth-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 50px 50px, 50px 50px; }
}
