/* ===== Identidade visual por jogo =====
   Escopo via atributo [data-game] — no <body> das rotas /customize/<game>
   e no card do widget de demonstração (#heroWidget) da home. O
   customizador (customizer.js / mug_renderer.py) continua 100%
   game-agnóstico; só a "pele" das páginas muda aqui. */

body[data-game="lol"] .customize-hero h1,
body[data-game="lol"] .customize-hero h2,
#heroWidget[data-game="lol"] .hero-game-tab {
    font-family: 'Cinzel', serif;
}

body[data-game="valorant"] .customize-hero h1,
body[data-game="valorant"] .customize-hero h2,
#heroWidget[data-game="valorant"] .hero-game-tab {
    font-family: 'Teko', sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* ---- League of Legends: hextech dourado/ciano sobre navy ---- */
body[data-game="lol"] .customize-hero {
    background: linear-gradient(160deg, #0A1428 0%, #0F2340 100%);
    border-bottom: 1px solid rgba(200,155,60,0.35);
}
body[data-game="lol"] .customize-hero::after {
    content: '';
    display: block;
    width: 110px;
    height: 8px;
    margin: 16px auto 0;
    background-image: repeating-linear-gradient(135deg, rgba(200,155,60,0.85) 0 6px, transparent 6px 12px);
}
body[data-game="lol"] .customize-hero h1 { color: #F0E6D2; }
body[data-game="lol"] .customize-hero .badge {
    background-color: #C89B3C !important;
    color: #0A1428 !important;
}
body[data-game="lol"] .btn-brand {
    background-color: #C89B3C;
    border-color: #C89B3C;
    color: #0A1428;
}
body[data-game="lol"] .btn-brand:hover {
    background-color: #b3872f;
    border-color: #b3872f;
    color: #0A1428;
}
body[data-game="lol"] .edge-toolbar .btn.active,
body[data-game="lol"] .manual-toolbar .btn-success {
    background-color: #0AC8B9 !important;
    border-color: #0AC8B9 !important;
    color: #0A1428 !important;
}
body[data-game="lol"] .badge.bg-brand-blue {
    background-color: #0AC8B9 !important;
    color: #0A1428 !important;
}

/* ---- Valorant: vermelho anguloso sobre preto quase puro ---- */
body[data-game="valorant"] .customize-hero {
    background: #0F1923;
    border-bottom: 3px solid #FF4655;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 94%);
    padding-bottom: 3.25rem !important;
}
body[data-game="valorant"] .customize-hero h1 { color: #ECE8E1; }
body[data-game="valorant"] .customize-hero .badge {
    background-color: #FF4655 !important;
    color: #ECE8E1 !important;
    border-radius: 0 !important;
}
body[data-game="valorant"] .btn,
body[data-game="valorant"] .card,
body[data-game="valorant"] .form-select,
body[data-game="valorant"] .form-control {
    border-radius: 2px !important;
}
body[data-game="valorant"] .btn-brand {
    background-color: #FF4655;
    border-color: #FF4655;
    color: #ECE8E1;
}
body[data-game="valorant"] .btn-brand:hover {
    background-color: #e33245;
    border-color: #e33245;
    color: #ECE8E1;
}
body[data-game="valorant"] .edge-toolbar .btn.active,
body[data-game="valorant"] .manual-toolbar .btn-success {
    background-color: #FF4655 !important;
    border-color: #FF4655 !important;
    color: #ECE8E1 !important;
}
body[data-game="valorant"] .badge.bg-brand-blue {
    background-color: #ECE8E1 !important;
    color: #0F1923 !important;
    border-radius: 0 !important;
}

/* ---- Hero widget (home): mesma linguagem visual, só no card de demo ---- */
.hero-widget-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    transition: border-color 0.25s ease, background 0.25s ease;
}
#heroWidget[data-game="lol"] {
    border-color: rgba(200,155,60,0.4);
    background: linear-gradient(160deg, rgba(200,155,60,0.09), rgba(10,200,185,0.05));
}
#heroWidget[data-game="valorant"] {
    border-color: rgba(255,70,85,0.4);
    background: linear-gradient(160deg, rgba(255,70,85,0.1), rgba(15,25,35,0.4));
}

.hero-game-tabs {
    display: flex;
    gap: 0.5rem;
}
.hero-game-tab {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    color: rgba(255,255,255,0.75);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.hero-game-tab:hover {
    border-color: rgba(255,255,255,0.4);
    color: #fff;
}
.hero-game-tab.active[data-game="lol"] {
    background-color: rgba(200,155,60,0.2);
    border-color: #C89B3C;
    color: #F0E6D2;
}
.hero-game-tab.active[data-game="valorant"] {
    background-color: rgba(255,70,85,0.2);
    border-color: #FF4655;
    color: #ECE8E1;
}

/* ---- Cards de jogo na landing de personalização (/customize) ---- */
.game-pick-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    border: 2px solid transparent !important;
}
.game-pick-card:hover {
    transform: translateY(-3px);
}
.game-pick-card[data-game="lol"]:hover {
    border-color: #C89B3C !important;
    box-shadow: 0 10px 26px rgba(200,155,60,0.2);
}
.game-pick-card[data-game="valorant"]:hover {
    border-color: #FF4655 !important;
    box-shadow: 0 10px 26px rgba(255,70,85,0.2);
}

/* ---- Passo a passo Shopee (home) ---- */
.steps-row {
    position: relative;
}
@media (min-width: 768px) {
    .steps-row::before {
        content: '';
        position: absolute;
        top: 3.15rem;
        left: 18%;
        right: 18%;
        height: 2px;
        background-image: repeating-linear-gradient(90deg, var(--brand-gray) 0 8px, transparent 8px 16px);
        opacity: 0.5;
        z-index: 0;
    }
    .steps-row > [class*="col-"] {
        position: relative;
        z-index: 1;
    }
}
.step-badge {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    font-weight: 700;
}