/* Temas por juego: naranja (Pokémon) · lila (Riftbound) */

body.game-pokemon {
    --brand: #f97316;
    --brand-hover: #ea580c;
    --brand-deep: #c2410c;
    --brand-light: #fb923c;
    --brand-pale: #fdba74;
    --brand-rgb: 249 115 22;
    --brand-soft: #fff7ed;
    --brand-ink: #9a3412;
    --accent: #f59e0b;
    --accent-strong: #d97706;
    --color-header-bg: #ea580c;
    --color-footer-bg: #9a3412;
}

body.game-riftbound {
    --brand: #8b5cf6;
    --brand-hover: #7c3aed;
    --brand-deep: #6d28d9;
    --brand-light: #a78bfa;
    --brand-pale: #c4b5fd;
    --brand-rgb: 139 92 246;
    --brand-soft: #ede9fe;
    --brand-ink: #5b21b6;
    --accent: #a78bfa;
    --accent-strong: #7c3aed;
    --color-header-bg: #7c3aed;
    --color-footer-bg: #4c1d95;
    --color-primary-bg: #ede9fe;
    --surface-muted: #ede9fe;
    --color-nav-link-hover: #ddd6fe;
    --color-settings-bg: #ede9fe;
}

/* ── Cabecera ── */
body.game-riftbound .header-background {
    background: linear-gradient(to right, #5b21b6, #7c3aed, #4c1d95) !important;
    opacity: 0.95;
}

body.game-riftbound .modern-logo .logo-text {
    background: linear-gradient(to right, #e9d5ff, #c4b5fd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.game-riftbound #gamePreviewBanner {
    display: none !important;
}

#gamePreviewBanner {
    display: none;
}

#gameSwitcherWrap {
    display: none;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

#gameSwitcherWrap.is-visible {
    display: inline-flex;
}

#gameSwitcher {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.5rem;
    border-radius: 0.45rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    background: rgb(0 0 0 / 0.2);
    color: inherit;
    max-width: 9rem;
}

body.game-riftbound .modern-login-btn,
body.game-riftbound .modern-logout-btn {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover)) !important;
}

body.game-riftbound .modern-login-btn:hover,
body.game-riftbound .modern-logout-btn:hover {
    background: linear-gradient(135deg, var(--brand-hover), var(--brand-deep)) !important;
    box-shadow: 0 4px 15px rgb(139 92 246 / 0.4);
}

body.game-riftbound .footer-bg {
    background-color: var(--color-footer-bg) !important;
}

body.game-riftbound .footer-bg img[alt="Pokéball"] {
    display: none;
}

body.game-riftbound footer a:hover {
    color: var(--brand-light) !important;
}

@media (max-width: 640px) {
    #gameSwitcher {
        max-width: 7rem;
        font-size: 0.68rem;
    }
}

/* ── Utilidades portada (usan --brand del juego activo) ── */
.tcg-accent-text {
    color: var(--brand-hover);
}

.dark .tcg-accent-text,
body.dark-mode .tcg-accent-text {
    color: var(--brand-light);
}

.tcg-accent-stat {
    color: var(--brand);
}

.tcg-landing-premium-banner {
    border-color: rgb(from var(--brand) r g b / 0.45);
    border-width: 1px;
    border-style: solid;
    background: linear-gradient(
        to right,
        rgb(from var(--brand) r g b / 0.1),
        rgb(from var(--accent) r g b / 0.1)
    );
}

.dark .tcg-landing-premium-banner,
body.dark-mode .tcg-landing-premium-banner {
    border-color: rgb(from var(--brand) r g b / 0.45);
    background: linear-gradient(
        to right,
        rgb(from var(--brand) r g b / 0.28),
        rgb(from var(--accent) r g b / 0.18)
    );
}

/* Fallback si el navegador no soporta relative color syntax */
@supports not (color: rgb(from white r g b)) {
    .tcg-landing-premium-banner {
        border-color: #fdba74;
        background: linear-gradient(to right, rgb(249 115 22 / 0.1), rgb(245 158 11 / 0.1));
    }

    body.game-riftbound .tcg-landing-premium-banner {
        border-color: #c4b5fd;
        background: linear-gradient(to right, rgb(139 92 246 / 0.12), rgb(167 139 250 / 0.1));
    }

    body.dark-mode.game-riftbound .tcg-landing-premium-banner,
    .dark body.game-riftbound .tcg-landing-premium-banner {
        border-color: #7c3aed;
        background: linear-gradient(to right, rgb(91 33 182 / 0.35), rgb(124 58 237 / 0.22));
    }
}

.tcg-premium-section {
    background: transparent;
}

@supports not (color: rgb(from white r g b)) {
    .tcg-premium-section {
        background: transparent;
    }

    body.game-riftbound .tcg-premium-section {
        background: transparent;
    }

    body.dark-mode.game-riftbound .tcg-premium-section,
    .dark body.game-riftbound .tcg-premium-section {
        background: transparent;
    }
}

.tcg-landing-cta-section {
    background: linear-gradient(to right, var(--brand), var(--accent));
}

.dark .tcg-landing-cta-section,
body.dark-mode .tcg-landing-cta-section {
    background: linear-gradient(to right, var(--brand-hover), var(--accent-strong));
}

.tcg-premium-pill {
    background: linear-gradient(to right, var(--brand), var(--accent));
    color: #fff;
}

.tcg-btn-accent-solid {
    background: linear-gradient(to right, var(--brand), var(--accent));
    color: #fff;
}

.tcg-btn-accent-solid:hover {
    background: linear-gradient(to right, var(--brand-hover), var(--accent-strong));
}

.tcg-btn-accent-outline {
    color: var(--brand-hover);
    border: 2px solid rgb(from var(--brand) r g b / 0.45);
    background: #fff;
}

.dark .tcg-btn-accent-outline,
body.dark-mode .tcg-btn-accent-outline {
    color: var(--brand-light);
    border-color: rgb(from var(--brand) r g b / 0.55);
    background: rgb(31 41 55);
}

@supports not (color: rgb(from white r g b)) {
    .tcg-btn-accent-outline {
        border-color: #fdba74;
    }

    body.game-riftbound .tcg-btn-accent-outline {
        border-color: #a78bfa;
    }
}

.tcg-cta-btn-primary {
    background: #fff;
    color: var(--brand-hover);
}

.tcg-cta-btn-primary:hover {
    background: #f3f4f6;
}

.tcg-cta-btn-secondary {
    background: var(--brand-ink);
    color: #fff;
}

.tcg-cta-btn-secondary:hover {
    filter: brightness(1.08);
}

.tcg-feature-panel--accent {
    border: 1px solid rgb(from var(--brand) r g b / 0.28);
    background: linear-gradient(
        to right,
        rgb(from var(--brand-soft) r g b / 0.95),
        rgb(from var(--accent) r g b / 0.12)
    );
}

.dark .tcg-feature-panel--accent,
body.dark-mode .tcg-feature-panel--accent {
    border-color: rgb(from var(--brand) r g b / 0.35);
    background: linear-gradient(
        to right,
        rgb(from var(--brand) r g b / 0.18),
        rgb(from var(--accent) r g b / 0.12)
    );
}

@supports not (color: rgb(from white r g b)) {
    .tcg-feature-panel--accent {
        border-color: #fed7aa;
        background: linear-gradient(to right, #fff7ed, rgb(245 158 11 / 0.08));
    }

    body.game-riftbound .tcg-feature-panel--accent {
        border-color: #c4b5fd;
        background: linear-gradient(to right, #ede9fe, rgb(167 139 250 / 0.12));
    }

    body.dark-mode.game-riftbound .tcg-feature-panel--accent,
    .dark body.game-riftbound .tcg-feature-panel--accent {
        border-color: #6d28d9;
        background: linear-gradient(to right, rgb(91 33 182 / 0.22), rgb(124 58 237 / 0.14));
    }
}

.tcg-accent-pill {
    background: var(--brand);
    color: #fff;
}

.tcg-premium-plan-card {
    background: linear-gradient(to bottom right, var(--brand), var(--accent));
    color: #fff;
}

.tcg-premium-plan-card .tcg-premium-plan-card__note {
    color: rgb(255 255 255 / 0.78);
}

/* Pasos «Cómo funciona» — Pokémon conserva variación; Riftbound todo lila */
body.game-pokemon .tcg-step-badge--1 {
    background: linear-gradient(to right, #f97316, #f59e0b);
}

body.game-pokemon .tcg-step-badge--2 {
    background: linear-gradient(to right, #ec4899, #f97316);
}

body.game-pokemon .tcg-step-badge--3 {
    background: linear-gradient(to right, #f97316, #eab308);
}

body.game-pokemon .tcg-step-badge--4 {
    background: linear-gradient(to right, #eab308, #22c55e);
}

body.game-riftbound .tcg-step-badge--1,
body.game-riftbound .tcg-step-badge--2,
body.game-riftbound .tcg-step-badge--3,
body.game-riftbound .tcg-step-badge--4 {
    background: linear-gradient(to right, var(--brand-hover), var(--accent));
}

.tcg-step-badge--1,
.tcg-step-badge--2,
.tcg-step-badge--3,
.tcg-step-badge--4 {
    color: #fff;
}

/* ── Riftbound: remapeo acentos Tailwind (HTML + JS dinámico) ── */

body.game-riftbound .text-orange-50 { color: var(--brand-soft) !important; }
body.game-riftbound .text-orange-100 { color: #ddd6fe !important; }
body.game-riftbound .text-orange-200 { color: #ddd6fe !important; }
body.game-riftbound .text-orange-300 { color: var(--brand-light) !important; }
body.game-riftbound .text-orange-400 { color: var(--brand-light) !important; }
body.game-riftbound .text-orange-500 { color: var(--brand) !important; }
body.game-riftbound .text-orange-600 { color: var(--brand-hover) !important; }
body.game-riftbound .text-orange-700 { color: var(--brand-deep) !important; }
body.game-riftbound .text-orange-800 { color: var(--brand-ink) !important; }

body.game-riftbound .bg-orange-50 { background-color: var(--brand-soft) !important; }
body.game-riftbound .bg-orange-100 { background-color: #ddd6fe !important; }
body.game-riftbound .bg-orange-500 { background-color: var(--brand) !important; }
body.game-riftbound .bg-orange-600 { background-color: var(--brand-hover) !important; }
body.game-riftbound .bg-orange-700 { background-color: var(--brand-deep) !important; }

body.game-riftbound .border-orange-200 { border-color: #c4b5fd !important; }
body.game-riftbound .border-orange-300 { border-color: var(--brand-light) !important; }
body.game-riftbound .border-orange-500 { border-color: var(--brand) !important; }

body.game-riftbound .hover\:bg-orange-100:hover { background-color: #ddd6fe !important; }
body.game-riftbound .hover\:bg-orange-500:hover { background-color: var(--brand) !important; }
body.game-riftbound .hover\:bg-orange-600:hover { background-color: var(--brand-hover) !important; }
body.game-riftbound .active\:bg-orange-700:active { background-color: var(--brand-deep) !important; }
body.game-riftbound .hover\:bg-orange-700:hover { background-color: var(--brand-deep) !important; }
body.game-riftbound .hover\:bg-orange-900:hover { background-color: #4c1d95 !important; }
body.game-riftbound .hover\:bg-orange-50:hover { background-color: var(--brand-soft) !important; }
body.game-riftbound .hover\:border-orange-300:hover { border-color: var(--brand-light) !important; }
body.game-riftbound .hover\:border-orange-400:hover { border-color: var(--brand-light) !important; }
body.game-riftbound .hover\:text-orange-400:hover { color: var(--brand-light) !important; }
body.game-riftbound .hover\:text-orange-600:hover { color: var(--brand-hover) !important; }

body.game-riftbound .bg-orange-500\/15 { background-color: rgb(var(--brand-rgb) / 0.15) !important; }
body.game-riftbound .hover\:bg-orange-500\/25:hover { background-color: rgb(var(--brand-rgb) / 0.25) !important; }
body.game-riftbound .bg-orange-900\/20 { background-color: rgb(76 29 149 / 0.2) !important; }
body.game-riftbound .bg-orange-900\/30 { background-color: rgb(76 29 149 / 0.3) !important; }
body.game-riftbound .border-orange-200\/60 { border-color: rgb(196 181 253 / 0.6) !important; }
body.game-riftbound .border-orange-800\/40 { border-color: rgb(91 33 182 / 0.4) !important; }
body.game-riftbound .border-orange-800\/60 { border-color: rgb(91 33 182 / 0.6) !important; }

body.game-riftbound .ring-orange-400,
body.game-riftbound .ring-orange-500 { --tw-ring-color: rgb(var(--brand-rgb) / 0.55) !important; }
body.game-riftbound .focus\:ring-orange-400:focus { --tw-ring-color: rgb(var(--brand-rgb) / 0.55) !important; }
body.game-riftbound input.text-orange-500 { accent-color: var(--brand) !important; }

body.game-riftbound .from-orange-50 { --tw-gradient-from: var(--brand-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(237 233 254 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .from-orange-100 { --tw-gradient-from: #ddd6fe var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(221 214 254 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .from-orange-500 { --tw-gradient-from: var(--brand) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(var(--brand-rgb) / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .from-orange-600 { --tw-gradient-from: var(--brand-hover) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(var(--brand-rgb) / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .from-orange-900 { --tw-gradient-from: #4c1d95 var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

body.game-riftbound .to-orange-50 { --tw-gradient-to: var(--brand-soft) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-orange-100 { --tw-gradient-to: #ddd6fe var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-orange-500 { --tw-gradient-to: var(--brand) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-orange-600 { --tw-gradient-to: var(--brand-hover) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-orange-700 { --tw-gradient-to: var(--brand-deep) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-orange-900 { --tw-gradient-to: #4c1d95 var(--tw-gradient-to-position) !important; }

body.game-riftbound .via-amber-500 { --tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--accent) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

body.game-riftbound .to-amber-50 { --tw-gradient-to: var(--brand-soft) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-amber-100 { --tw-gradient-to: #ddd6fe var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-amber-400 { --tw-gradient-to: var(--brand-light) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-amber-500 { --tw-gradient-to: var(--accent) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-amber-600 { --tw-gradient-to: var(--accent-strong) var(--tw-gradient-to-position) !important; }
body.game-riftbound .to-amber-900 { --tw-gradient-to: #4c1d95 var(--tw-gradient-to-position) !important; }

body.game-riftbound .from-amber-50 { --tw-gradient-from: var(--brand-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(237 233 254 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .from-amber-100 { --tw-gradient-from: #ddd6fe var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(221 214 254 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }

body.game-riftbound .hover\:from-orange-600:hover { --tw-gradient-from: var(--brand-hover) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(var(--brand-rgb) / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .hover\:to-amber-600:hover { --tw-gradient-to: var(--accent-strong) var(--tw-gradient-to-position) !important; }

body.game-riftbound .dark\:text-orange-200:is(.dark *) { color: #ddd6fe !important; }
body.game-riftbound .dark\:text-orange-300:is(.dark *) { color: var(--brand-light) !important; }
body.game-riftbound .dark\:text-orange-400:is(.dark *) { color: var(--brand-light) !important; }
body.game-riftbound .dark\:text-orange-500:is(.dark *) { color: var(--brand) !important; }

body.game-riftbound .dark\:bg-orange-900:is(.dark *) { background-color: #4c1d95 !important; }
body.game-riftbound .dark\:bg-orange-900\/20:is(.dark *) { background-color: rgb(76 29 149 / 0.2) !important; }
body.game-riftbound .dark\:bg-orange-900\/30:is(.dark *) { background-color: rgb(76 29 149 / 0.3) !important; }

body.game-riftbound .dark\:border-orange-600:is(.dark *) { border-color: var(--brand-hover) !important; }
body.game-riftbound .dark\:border-orange-700:is(.dark *) { border-color: var(--brand-deep) !important; }
body.game-riftbound .dark\:border-orange-800:is(.dark *) { border-color: #5b21b6 !important; }
body.game-riftbound .dark\:border-orange-800\/60:is(.dark *) { border-color: rgb(91 33 182 / 0.6) !important; }
body.game-riftbound .dark\:hover\:border-orange-400:hover:is(.dark *) { border-color: var(--brand-light) !important; }

body.game-riftbound .dark\:from-orange-900\/20:is(.dark *) { --tw-gradient-from: rgb(76 29 149 / 0.2) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(76 29 149 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
body.game-riftbound .dark\:to-orange-900\/20:is(.dark *) { --tw-gradient-to: rgb(76 29 149 / 0.2) var(--tw-gradient-to-position) !important; }
body.game-riftbound .dark\:to-orange-900\/30:is(.dark *) { --tw-gradient-to: rgb(76 29 149 / 0.3) var(--tw-gradient-to-position) !important; }
body.game-riftbound .dark\:to-amber-900\/20:is(.dark *) { --tw-gradient-to: rgb(76 29 149 / 0.2) var(--tw-gradient-to-position) !important; }

body.game-riftbound .dark\:hover\:bg-orange-900:hover:is(.dark *) { background-color: #4c1d95 !important; }

/* Amber usado como acento secundario en badges premium / variantes */
body.game-riftbound .text-amber-400 { color: var(--brand-light) !important; }
body.game-riftbound .text-amber-600 { color: var(--brand-hover) !important; }
body.game-riftbound .text-amber-800 { color: var(--brand-ink) !important; }
body.game-riftbound .bg-amber-100 { background-color: #ddd6fe !important; }
body.game-riftbound .bg-amber-200 { background-color: #c4b5fd !important; }
body.game-riftbound .border-amber-200 { border-color: #c4b5fd !important; }
body.game-riftbound .dark\:text-amber-200:is(.dark *) { color: #ddd6fe !important; }
body.game-riftbound .dark\:bg-amber-900\/30:is(.dark *) { background-color: rgb(76 29 149 / 0.3) !important; }
body.game-riftbound .dark\:bg-amber-900\/40:is(.dark *) { background-color: rgb(76 29 149 / 0.4) !important; }

/* Pestañas activas con clases Tailwind en HTML estático */
body.game-riftbound .profile-tab.active,
body.game-riftbound .trade-tab.active,
body.game-riftbound .help-tab.active,
body.game-riftbound .inbox-tab.active,
body.game-riftbound .profile-collection-subtab.active {
    color: var(--brand-hover) !important;
    border-bottom-color: var(--brand) !important;
}

/* Loader global */
body.game-riftbound .loader {
    border-top-color: var(--brand) !important;
}