/**
 * Developed by: GrounnyDev.com
 * Character / franchise-inspired visual themes
 */

@keyframes theme-web-pulse {
    0%, 100% { opacity: 0.12; }
    50% { opacity: 0.28; }
}

@keyframes theme-miles-glitch {
    0%, 90%, 100% { transform: translate(0); filter: none; }
    92% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); }
    94% { transform: translate(2px, -1px); filter: hue-rotate(-40deg); }
}

@keyframes theme-gta-neon {
    0%, 100% { text-shadow: 0 0 8px rgba(34, 197, 94, 0.5); }
    50% { text-shadow: 0 0 18px rgba(34, 197, 94, 0.85); }
}

@keyframes theme-dust-drift {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    20% { opacity: 0.5; }
    100% { transform: translateY(-80px) translateX(20px); opacity: 0; }
}

@keyframes theme-venom-drip {
    0%, 100% { transform: scaleY(1); opacity: 0.35; }
    50% { transform: scaleY(1.15); opacity: 0.65; }
}

.theme-fx-web {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(33deg, transparent 48%, rgba(220, 38, 38, 0.15) 49%, rgba(220, 38, 38, 0.15) 51%, transparent 52%),
        linear-gradient(-33deg, transparent 48%, rgba(37, 99, 235, 0.12) 49%, rgba(37, 99, 235, 0.12) 51%, transparent 52%);
    background-size: 48px 48px;
    animation: theme-web-pulse 4s ease-in-out infinite;
}

.theme-fx-dust {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(217, 119, 6, 0.55);
    animation: theme-dust-drift linear infinite;
}

.theme-fx-dust:nth-child(1) { left: 15%; bottom: 10%; animation-duration: 9s; }
.theme-fx-dust:nth-child(2) { left: 45%; bottom: 20%; animation-duration: 12s; animation-delay: -3s; }
.theme-fx-dust:nth-child(3) { left: 72%; bottom: 8%; animation-duration: 10s; animation-delay: -5s; }

.theme-fx-venom {
    position: absolute;
    width: 60px;
    height: 120px;
    bottom: -20%;
    border-radius: 50% 50% 40% 40%;
    background: radial-gradient(ellipse at top, rgba(255,255,255,0.08), transparent 70%);
    animation: theme-venom-drip 5s ease-in-out infinite;
}

/* ═══ UNLOCK ═══ */
.unlock-theme-spiderman {
    --theme-primary: #dc2626;
    --theme-accent: #2563eb;
    background: linear-gradient(165deg, #0f172a 0%, #1e3a8a 50%, #1e1b4b 100%) !important;
    color: #e0e7ff !important;
}
.unlock-theme-spiderman .glass-card {
    background: rgba(15, 23, 42, 0.92);
    border: 2px solid rgba(220, 38, 38, 0.45);
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.2);
}
.unlock-theme-spiderman .unlock-btn-primary,
.unlock-theme-spiderman .unlock-btn-gradient {
    background: linear-gradient(135deg, #dc2626, #2563eb);
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.4);
}
.unlock-theme-spiderman .progress-bar-fill {
    background: linear-gradient(90deg, #2563eb, #dc2626);
}

.unlock-theme-miles {
    background: #050505 !important;
    color: #f5f5f5 !important;
}
.unlock-theme-miles .glass-card {
    background: rgba(10, 10, 10, 0.94);
    border: 2px solid rgba(220, 38, 38, 0.5);
    animation: theme-miles-glitch 8s ease-in-out infinite;
}
.unlock-theme-miles .unlock-btn-primary {
    background: linear-gradient(135deg, #dc2626, #14b8a6);
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.35);
}
.unlock-theme-miles .progress-bar-fill {
    background: linear-gradient(90deg, #dc2626, #14b8a6, #a855f7);
    background-size: 200% 100%;
    animation: theme-shimmer-slide 2.5s linear infinite;
}

.unlock-theme-superman {
    background: linear-gradient(180deg, #1e3a8a 0%, #2563eb 40%, #dc2626 100%) !important;
    color: #fef9c3 !important;
}
.unlock-theme-superman .glass-card {
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(250, 204, 21, 0.45);
    backdrop-filter: blur(10px);
}
.unlock-theme-superman .unlock-btn-primary {
    background: linear-gradient(135deg, #dc2626, #facc15);
    color: #1e3a8a;
    font-weight: 800;
    box-shadow: 0 8px 24px rgba(250, 204, 21, 0.4);
}

.unlock-theme-batman {
    background: #030303 !important;
    color: #facc15 !important;
}
.unlock-theme-batman .glass-card {
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(250, 204, 21, 0.35);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}
.unlock-theme-batman .unlock-btn-primary {
    background: linear-gradient(135deg, #1f2937, #facc15);
    color: #0a0a0a;
    font-weight: 800;
}

.unlock-theme-ironman {
    background: linear-gradient(160deg, #1c0a0a, #450a0a, #7f1d1d) !important;
    color: #fef3c7 !important;
}
.unlock-theme-ironman .glass-card {
    background: rgba(30, 10, 10, 0.9);
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.25);
}
.unlock-theme-ironman .unlock-btn-primary {
    background: linear-gradient(135deg, #dc2626, #fbbf24);
    background-size: 200% auto;
    animation: theme-shimmer-slide 3s linear infinite;
    color: #1c0a0a;
    font-weight: 800;
}

.unlock-theme-gta {
    background: linear-gradient(180deg, #0a0a0a 0%, #14532d 100%) !important;
    color: #bbf7d0 !important;
}
.unlock-theme-gta .glass-card {
    background: rgba(0, 0, 0, 0.88);
    border: 2px solid #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25);
}
.unlock-theme-gta .unlock-btn-primary {
    background: #22c55e;
    color: #052e16;
    font-weight: 800;
    animation: theme-gta-neon 2s ease-in-out infinite;
}
.unlock-theme-gta .progress-bar-fill {
    background: linear-gradient(90deg, #22c55e, #eab308);
}

.unlock-theme-reddead {
    background: linear-gradient(180deg, #292524, #78350f, #451a03) !important;
    color: #fde68a !important;
}
.unlock-theme-reddead .glass-card {
    background: rgba(41, 37, 36, 0.92);
    border: 1px solid rgba(217, 119, 6, 0.45);
}
.unlock-theme-reddead .unlock-btn-primary {
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fffbeb;
}

.unlock-theme-reddead2 {
    background: linear-gradient(165deg, #1c1917, #44403c, #78350f) !important;
    color: #fed7aa !important;
}
.unlock-theme-reddead2 .glass-card {
    background: rgba(28, 25, 23, 0.9);
    border: 1px solid rgba(180, 83, 9, 0.5);
}
.unlock-theme-reddead2 .unlock-btn-primary {
    background: linear-gradient(135deg, #ea580c, #b45309);
}

.unlock-theme-venom {
    background: #000 !important;
    color: #e5e7eb !important;
}
.unlock-theme-venom .glass-card {
    background: rgba(15, 15, 15, 0.96);
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
}
.unlock-theme-venom .unlock-btn-primary {
    background: linear-gradient(135deg, #1f2937, #6b7280);
    color: #fff;
}

.unlock-theme-hulk {
    background: linear-gradient(180deg, #052e16, #14532d, #166534) !important;
    color: #dcfce7 !important;
}
.unlock-theme-hulk .glass-card {
    background: rgba(5, 46, 22, 0.9);
    border: 2px solid #22c55e;
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.25);
}
.unlock-theme-hulk .unlock-btn-primary {
    background: linear-gradient(135deg, #16a34a, #4ade80);
    color: #052e16;
    font-weight: 800;
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.45);
}

/* ═══ HOME ═══ */
.home-theme-spiderman { background: linear-gradient(165deg, #0f172a, #1e3a8a) !important; color: #e0e7ff !important; }
.home-theme-spiderman .home-card { background: rgba(15,23,42,0.9); border: 2px solid rgba(220,38,38,0.4); }
.home-theme-spiderman .home-btn-primary { background: linear-gradient(135deg, #dc2626, #2563eb); }
.home-theme-spiderman .home-logo-badge { background: linear-gradient(135deg, #dc2626, #2563eb); }

.home-theme-miles { background: #050505 !important; color: #f5f5f5 !important; }
.home-theme-miles .home-card { border: 2px solid #dc2626; background: rgba(0,0,0,0.92); animation: theme-miles-glitch 10s ease-in-out infinite; }
.home-theme-miles .home-btn-primary { background: linear-gradient(135deg, #dc2626, #14b8a6); }

.home-theme-superman { background: linear-gradient(180deg, #1e40af, #2563eb 50%, #b91c1c) !important; color: #fef9c3 !important; }
.home-theme-superman .home-card { background: rgba(255,255,255,0.1); border: 2px solid #facc15; }
.home-theme-superman .home-btn-primary { background: linear-gradient(135deg, #dc2626, #facc15); color: #1e3a8a; font-weight: 800; }

.home-theme-batman { background: #030303 !important; color: #facc15 !important; }
.home-theme-batman .home-card { background: rgba(10,10,10,0.95); border: 1px solid rgba(250,204,21,0.35); }
.home-theme-batman .home-btn-primary { background: linear-gradient(135deg, #374151, #facc15); color: #000; font-weight: 800; }

.home-theme-ironman { background: linear-gradient(160deg, #1c0a0a, #7f1d1d) !important; color: #fef3c7 !important; }
.home-theme-ironman .home-btn-primary { background: linear-gradient(135deg, #dc2626, #fbbf24); color: #1c0a0a; animation: theme-shimmer-slide 3s linear infinite; background-size: 200% auto; }

.home-theme-gta { background: linear-gradient(180deg, #000, #14532d) !important; color: #86efac !important; }
.home-theme-gta .home-card { border: 2px solid #22c55e; background: rgba(0,0,0,0.85); }
.home-theme-gta .home-btn-primary { background: #22c55e; color: #052e16; font-weight: 800; }

.home-theme-reddead { background: linear-gradient(180deg, #44403c, #78350f) !important; color: #fde68a !important; }
.home-theme-reddead .home-btn-primary { background: linear-gradient(135deg, #b45309, #d97706); }

.home-theme-reddead2 { background: linear-gradient(165deg, #1c1917, #78350f) !important; color: #fed7aa !important; }
.home-theme-reddead2 .home-btn-primary { background: linear-gradient(135deg, #ea580c, #b45309); }

.home-theme-venom { background: #000 !important; color: #e5e7eb !important; }
.home-theme-venom .home-card { border: 1px solid rgba(255,255,255,0.2); background: rgba(10,10,10,0.95); }
.home-theme-venom .home-btn-primary { background: #374151; color: #fff; }

.home-theme-hulk { background: linear-gradient(180deg, #052e16, #166534) !important; color: #dcfce7 !important; }
.home-theme-hulk .home-btn-primary { background: #22c55e; color: #052e16; font-weight: 800; box-shadow: 0 0 20px rgba(34,197,94,0.4); }

/* ═══ MAINTENANCE ═══ */
.maintenance-theme-spiderman { background: linear-gradient(165deg, #0f172a, #1e3a8a) !important; color: #e0e7ff !important; }
.maintenance-theme-spiderman .maintenance-card { border: 2px solid rgba(220,38,38,0.45); background: rgba(15,23,42,0.92); }
.maintenance-theme-spiderman .maintenance-icon-wrap { background: linear-gradient(135deg, #dc2626, #2563eb); }

.maintenance-theme-miles { background: #050505 !important; color: #f5f5f5 !important; }
.maintenance-theme-miles .maintenance-card { border: 2px solid #dc2626; background: rgba(0,0,0,0.94); }

.maintenance-theme-superman { background: linear-gradient(180deg, #1e40af, #b91c1c) !important; color: #fef9c3 !important; }
.maintenance-theme-superman .maintenance-icon-wrap { background: linear-gradient(135deg, #dc2626, #facc15); }

.maintenance-theme-batman { background: #030303 !important; color: #facc15 !important; }
.maintenance-theme-batman .maintenance-icon-wrap { background: #facc15; }
.maintenance-theme-batman .maintenance-icon-wrap i { color: #000; }

.maintenance-theme-ironman { background: linear-gradient(160deg, #1c0a0a, #7f1d1d) !important; color: #fef3c7 !important; }
.maintenance-theme-ironman .maintenance-progress-bar { background: linear-gradient(90deg, #dc2626, #fbbf24); background-size: 200% 100%; animation: theme-shimmer-slide 2s linear infinite; }

.maintenance-theme-gta { background: linear-gradient(180deg, #000, #14532d) !important; color: #86efac !important; }
.maintenance-theme-gta .maintenance-card { border: 2px solid #22c55e; }
.maintenance-theme-gta .maintenance-icon-wrap { background: #22c55e; }
.maintenance-theme-gta .maintenance-icon-wrap i { color: #052e16; }

.maintenance-theme-reddead { background: linear-gradient(180deg, #44403c, #451a03) !important; color: #fde68a !important; }
.maintenance-theme-reddead .maintenance-icon-wrap { background: linear-gradient(135deg, #b45309, #d97706); }

.maintenance-theme-reddead2 { background: linear-gradient(165deg, #1c1917, #78350f) !important; color: #fed7aa !important; }
.maintenance-theme-reddead2 .maintenance-icon-wrap { background: #ea580c; }

.maintenance-theme-venom { background: #000 !important; color: #e5e7eb !important; }
.maintenance-theme-venom .maintenance-card { border: 1px solid rgba(255,255,255,0.2); }

.maintenance-theme-hulk { background: linear-gradient(180deg, #052e16, #166534) !important; color: #dcfce7 !important; }
.maintenance-theme-hulk .maintenance-icon-wrap { background: #22c55e; }
.maintenance-theme-hulk .maintenance-icon-wrap i { color: #052e16; }

/* Picker previews */
.unlock-theme-preview-spiderman { background: linear-gradient(145deg, #1e3a8a, #0f172a); }
.unlock-theme-preview-spiderman .unlock-theme-picker-orbs { background-image: linear-gradient(45deg, rgba(220,38,38,0.2) 25%, transparent 25%), linear-gradient(-45deg, rgba(37,99,235,0.15) 25%, transparent 25%); background-size: 12px 12px; animation: theme-web-pulse 3s ease-in-out infinite; }
.unlock-theme-preview-spiderman .unlock-theme-picker-btn { background: linear-gradient(135deg, #dc2626, #2563eb); }

.unlock-theme-preview-miles { background: #050505; }
.unlock-theme-preview-miles .unlock-theme-picker-btn { background: linear-gradient(135deg, #dc2626, #14b8a6); animation: theme-miles-glitch 6s infinite; }

.unlock-theme-preview-superman { background: linear-gradient(180deg, #2563eb, #dc2626); }
.unlock-theme-preview-superman .unlock-theme-picker-btn { background: linear-gradient(135deg, #dc2626, #facc15); }

.unlock-theme-preview-batman { background: #030303; }
.unlock-theme-preview-batman .unlock-theme-picker-btn { background: linear-gradient(135deg, #374151, #facc15); }

.unlock-theme-preview-ironman { background: linear-gradient(165deg, #450a0a, #7f1d1d); }
.unlock-theme-preview-ironman .unlock-theme-picker-btn { background: linear-gradient(135deg, #dc2626, #fbbf24); }

.unlock-theme-preview-gta { background: linear-gradient(180deg, #000, #14532d); }
.unlock-theme-preview-gta .unlock-theme-picker-btn { background: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.6); }

.unlock-theme-preview-reddead { background: linear-gradient(180deg, #78350f, #451a03); }
.unlock-theme-preview-reddead .unlock-theme-picker-btn { background: #d97706; }

.unlock-theme-preview-reddead2 { background: linear-gradient(165deg, #1c1917, #78350f); }
.unlock-theme-preview-reddead2 .unlock-theme-picker-btn { background: #ea580c; }

.unlock-theme-preview-venom { background: #000; }
.unlock-theme-preview-venom .unlock-theme-picker-btn { background: #4b5563; border: 1px solid rgba(255,255,255,0.3); }

.unlock-theme-preview-hulk { background: linear-gradient(180deg, #052e16, #166534); }
.unlock-theme-preview-hulk .unlock-theme-picker-btn { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.5); }

/* Mini motion in admin picker previews */
.unlock-theme-preview-gta .unlock-theme-picker-mock::after,
.unlock-theme-preview-reddead .unlock-theme-picker-mock::after,
.unlock-theme-preview-reddead2 .unlock-theme-picker-mock::after {
    content: '🚗';
    position: absolute;
    right: 8%;
    bottom: 20%;
    font-size: 0.65rem;
    opacity: 0.7;
    animation: char-gta-rise 4s linear infinite;
    pointer-events: none;
}
.unlock-theme-preview-reddead .unlock-theme-picker-mock::after { content: '🐴'; animation: char-drift-up 5s linear infinite; }
.unlock-theme-preview-reddead2 .unlock-theme-picker-mock::after { content: '🔥'; animation: char-pop-float 2.5s ease-in-out infinite; }
.unlock-theme-preview-spiderman .unlock-theme-picker-orbs { animation: theme-web-pulse 3s ease-in-out infinite; }
.unlock-theme-preview-miles { animation: theme-miles-glitch 8s step-end infinite; }

/* Admin theme picker sections */
.theme-picker-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
.theme-picker-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
}
.dark .theme-picker-section-title { color: #94a3b8; }
.theme-picker-section-character.is-collapsed {
    display: none;
}
.themes-toggle-character-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    margin: 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: 1px dashed #cbd5e1;
    background: transparent;
    color: #475569;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dark .themes-toggle-character-btn {
    border-color: #475569;
    color: #94a3b8;
}
.themes-toggle-character-btn:hover {
    background: rgba(37, 99, 235, 0.06);
    border-color: #2563eb;
    color: #2563eb;
}
.themes-toggle-character-btn[aria-expanded="true"] .themes-toggle-character-icon {
    transform: rotate(180deg);
}
.themes-toggle-character-icon {
    transition: transform 0.25s ease;
    font-size: 0.75rem;
}