/* ============================================================
 * THE BEST — stats-site v2 (frontend próprio)
 * ============================================================
 * Tema dark unificado. Vanilla CSS, sem framework.
 * ============================================================ */

:root {
    --bg-0:          #0f0f11;   /* fundo do site */
    --bg-1:          #1a1a1d;   /* navbar / cabeçalhos */
    --bg-2:          #232328;   /* cards */
    --bg-3:          #2c2c33;   /* hover, item ativo de cards */
    --bg-hover:      #38393f;
    --border:        #2a2a30;
    --text:          #ffffff;
    --text-2:        #a8a8b3;   /* secundário */
    --text-3:        #6e6e7a;   /* terciário (placeholders) */
    --green:         #1f9d4d;   /* vitória, ao vivo */
    --green-soft:    rgba(31,157,77,.18);
    --red:           #d8322f;   /* derrota, cartão vermelho */
    --yellow:        #fbbf24;   /* cartão amarelo, alerta */
    --blue:          #2e8bff;   /* mandante */
    --orange:        #ff6a2c;   /* visitante */
    --purple:        #a04bff;   /* destaque (Copa) */
    --gradient-copa: linear-gradient(95deg, #2e8bff 0%, #a04bff 50%, #ff6a2c 100%);
    --shadow-card:   0 4px 20px rgba(0,0,0,.4);
    --radius:        8px;
    --radius-sm:     4px;
    --transition:    .15s ease;
}

/* ====== RESET / BASE ====== */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

img { display: block; max-width: 100%; }

/* Scrollbar consistente */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-hover); }

/* ====== NAVBAR ====== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}

.navbar-inner {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    padding: .55rem 1rem;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 56px;
}

/* Hamburguer (visível só em mobile) — touch target 44px (HIG) */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 10px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-burger span {
    display: block;
    height: 2.2px;
    width: 100%;
    background: var(--text);
    border-radius: 2px;
    transition: var(--transition);
}
.nav-burger:hover { border-color: var(--bg-hover); }
.nav-burger:active { transform: scale(.96); }

/* Drawer mobile (deslizante da esquerda) */
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 200;
    opacity: 0;
    transition: opacity .2s ease;
}
.mobile-drawer-overlay:not([hidden]) { opacity: 1; }

.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    z-index: 201;
    transform: translateX(-105%);
    transition: transform .25s ease;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.mobile-drawer:not([hidden]) { transform: translateX(0); }

.md-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.md-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-size: .85rem;
    color: var(--text-2);
}
.md-close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    flex-shrink: 0;
}
.md-close:hover { border-color: var(--bg-hover); }

.md-actions {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .8rem 1rem;
}
.md-actions .btn-nav {
    width: 100%;
    justify-content: flex-start;
    padding: .7rem 1rem;
    font-size: .82rem;
    border-color: var(--border);
    background-color: var(--bg-2);
}
.md-actions .btn-nav:hover { background-color: var(--bg-3); border-color: var(--bg-hover); }
.md-actions .btn-nav.active { background-color: var(--bg-3); border-color: var(--purple); }
.md-actions .btn-live.active { border-color: var(--green); }
.md-actions .btn-copa.active { border-color: var(--purple); }

/* btn-copa usa background-image (gradient) + background-clip:text pra
 * pintar o texto. Quando definimos background-color no drawer, o texto
 * fica invisível (transparente sobre o cor sólida). Reaplica o gradient
 * como BACKGROUND-IMAGE e mantém background-color só pra borda/contraste
 * (mas o image clip-text passa por cima). */
.md-actions .btn-copa,
.md-actions .btn-copa:hover,
.md-actions .btn-copa.active {
    background-color: var(--bg-2);
    background-image: var(--gradient-copa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.md-actions .btn-copa:hover { background-color: var(--bg-3); border-color: var(--bg-hover); }
.md-section-title {
    padding: .8rem 1rem .35rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-3);
    border-top: 1px solid var(--border);
}
.md-liga-list {
    padding: .2rem .6rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.navbar .brand {
    display: flex;
    align-items: center;
    height: 36px;
}

.navbar .brand img { height: 100%; width: auto; }

.navbar .nav-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    margin-left: 1.5rem;
}

/* Padrão UNIFICADO para os botões do menu — aplica EM QUALQUER LUGAR
 * (navbar desktop OU drawer mobile). Antes era prefixado com `.navbar`
 * o que fazia o drawer mobile renderizar com fundo branco default do
 * browser. Agora os estilos base são standalone. */
.btn-nav { white-space: nowrap; }
.btn-nav {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    color: var(--text-2);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 22px;
    transition: var(--transition);
    cursor: pointer;
    font-family: inherit;
}
.btn-nav:hover {
    color: var(--text);
    border-color: var(--bg-hover);
}
.btn-nav.active {
    color: var(--text);
    border-color: var(--purple);
}

/* Copa do Mundo: texto sempre em gradient (identidade visual permanente).
 * Estados (hover/active) só mexem na BORDA. Background nunca é tocado pra
 * não interferir com o background-clip:text do gradient. */
.btn-copa {
    background-color: transparent;
    background-image: var(--gradient-copa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    border: 2px solid transparent;
}
.btn-copa:hover  { border-color: var(--bg-hover); }
.btn-copa.active { border-color: var(--purple); }

/* Botão AO VIVO AGORA: bola animada + texto branco */
.btn-live {
    color: var(--text);
    background-color: transparent;
    border: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.btn-live .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse 1.6s infinite;
}

/* Bola de futebol rolando no botão "Ao vivo agora" */
.btn-live .live-ball {
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    transform-origin: center;
    animation: rollBall 1.6s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
@keyframes rollBall {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-live .live-ball { animation: none; }
}

.btn-live:hover  { border-color: var(--bg-hover); }
.btn-live.active { border-color: var(--green); }

.navbar .search-wrap {
    position: relative;
    margin-left: auto;
    width: 320px;
    max-width: 50%;
}

.navbar .search-wrap input {
    width: 100%;
    padding: .55rem .85rem .55rem 2.2rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9rem;
    outline: none;
    transition: var(--transition);
}

.navbar .search-wrap input::placeholder { color: var(--text-3); }
.navbar .search-wrap input:focus { border-color: var(--purple); }

.navbar .search-wrap::before {
    content: "🔍";
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    opacity: .7;
    pointer-events: none;
}

#search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 460px;
    overflow-y: auto;
    box-shadow: var(--shadow-card);
    display: none;
}

#search-results.open { display: block; }

.search-section { padding: .4rem 0; }

.search-section-title {
    padding: .35rem .9rem;
    font-size: .7rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.search-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem;
    cursor: pointer;
    transition: background var(--transition);
}

.search-item:hover { background: var(--bg-hover); }

.search-item img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

.search-item .si-name { color: var(--text); font-size: .9rem; }

.search-item .si-meta {
    color: var(--text-3);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.search-state {
    padding: 1rem;
    color: var(--text-3);
    text-align: center;
    font-size: .85rem;
}

/* ====== LIVE TICKER (flutuante, respeita largura do .layout) ====== */
.ticker {
    position: sticky;
    top: 65px;  /* abaixo do navbar com folga */
    z-index: 90;
    display: flex;
    align-items: stretch;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-width: 1440px;
    margin: 12px auto 0;
    width: calc(100% - 2rem);  /* respeita o padding 1rem do .layout */
    box-shadow:
        0 10px 24px rgba(0,0,0,.45),
        0 2px 8px rgba(31,157,77,.18);
}

.ticker[hidden] { display: none; }

.ticker-label {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1.05rem;
    /* 2 camadas: gradient verde POR CIMA de bg sólido (senão carrossel
       passa por trás quando ticker está em modo .ticker-scrolling) */
    background:
        linear-gradient(120deg, rgba(31,157,77,.22), rgba(31,157,77,.08)),
        var(--bg-1);
    color: var(--green);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    text-shadow: 0 0 8px rgba(31,157,77,.45);
    position: relative;
    z-index: 2;  /* fica por cima do .ticker-track quando ele rola */
}

.ticker-label .live-ball {
    display: inline-block;
    font-size: 1.1rem;
    line-height: 1;
    transform-origin: center;
    animation: rollBall 1.6s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
@media (prefers-reduced-motion: reduce) {
    .ticker-label .live-ball { animation: none; }
}

.ticker-track {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
}

.ticker-track::-webkit-scrollbar { display: none; }

.ticker-jogo {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-right: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}

.ticker-jogo:hover { background: var(--bg-3); }

.ticker-jogo img { width: 18px; height: 18px; object-fit: contain; }

.ticker-jogo .tj-time { font-size: .8rem; }
.ticker-jogo .tj-vs { color: var(--text-3); font-size: .75rem; }
.ticker-jogo .tj-placar {
    font-weight: 800;
    color: var(--text);
    font-size: .9rem;
}
.ticker-jogo .tj-min {
    background: var(--green-soft);
    color: var(--green);
    padding: .1rem .4rem;
    border-radius: 8px;
    font-size: .68rem;
    font-weight: 700;
    margin-left: .3rem;
}

/* ====== LAYOUT 3 COLUNAS ======
 * col-right = 460px (não 380px) pra acomodar SEMPRE as 4 tabs do detalhe
 * de jogo (⏱ Eventos · 📊 Stats · 👥 Time A · 👥 Time B) sem corte —
 * independente de o jogo estar aberto ou não. Evita "ressalto" quando
 * o usuário navega entre competições com jogo aberto na col-right. */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr 460px;
    gap: 1rem;
    padding: 1rem;
    max-width: 1480px;
    margin: 0 auto;
    min-height: calc(100vh - 65px);
    /* F-live 25/05: anima Expandir/Colapsar do detalhe do jogo. */
    transition: grid-template-columns .32s cubic-bezier(.4, 0, .2, 1);
}
.col-center, .col-right {
    transition: opacity .22s ease;
}

@media (max-width: 1100px) {
    .layout { grid-template-columns: 220px 1fr; }
    .col-right { display: none; }
}

@media (max-width: 720px) {
    .layout { grid-template-columns: 1fr; padding: .5rem; gap: .5rem; }
    .col-left { display: none; }
    .col-right { display: none; }   /* col-right vai pra full em mobile via #right body class */
    /* Navbar mobile: hamburguer + brand + busca, sem botões */
    .nav-burger { display: flex; }
    #nav-actions-desktop { display: none; }
    .navbar-inner {
        gap: .6rem;
        padding: .5rem .7rem;
    }
    .navbar .brand { height: 30px; }
    .navbar .search-wrap { max-width: 100%; flex: 1; }
    .navbar .search-wrap input { font-size: .82rem; padding: .45rem .7rem; }
}

/* ====== SIDEBAR (col-left) ====== */
.col-left {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    align-self: start;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.sidebar-header {
    padding: .8rem 1rem .55rem;
    border-bottom: 1px solid var(--border);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
}

.liga-list { padding: .35rem 0; }

.liga-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem;
    cursor: pointer;
    transition: background var(--transition);
    border-left: 3px solid transparent;
    position: relative;
}

.liga-item:hover { background: var(--bg-3); }

.liga-item.active {
    background: var(--bg-3);
    border-left-color: var(--purple);
}

/* Container uniforme para logos das competições (resolve casos
 * em que a liga não tem logo oficial ou tem proporção quebrada) */
.liga-item .logo-wrap {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--bg-3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: .72rem;
    font-weight: 800;
    color: var(--text-2);
    letter-spacing: 0;
}

.liga-item .logo-wrap img.logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.liga-item .logo-wrap.fallback img { display: none; }

/* Defensiva: se algum img.logo cair direto no .liga-item (sem wrap),
 * trava em 28×28 — caso clássico foi a bandeira nacional do time favorito
 * vir em tamanho natural e estourar a sidebar. */
.liga-item > img.logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: contain;
    background: var(--bg-3);
    padding: 2px;
    box-sizing: border-box;
}

/* Casos especiais (logos custom) */
.liga-item .logo-wrap.fallback.copa {
    background: var(--gradient-copa);
    color: #fff;
    font-size: 1rem;
}
/* Logo FIFA WC 2026 oficial: emblem é vertical (250×386); cobrir sem cortar */
.liga-item .logo-wrap.copa {
    background: transparent;
    overflow: visible;
}
.liga-item .logo-wrap.copa img.logo-copa {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
}

.liga-item .liga-nome { font-size: .87rem; color: var(--text); }

.liga-item.destaque .liga-nome { font-weight: 700; }

.liga-item .live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 var(--green);
    animation: pulse 1.6s infinite;
    margin-left: auto;
    flex-shrink: 0;
}

/* Estrela de favorito */
.liga-item .fav-btn {
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 0 .15rem;
    font-size: 1rem;
    line-height: 1;
    margin-left: auto;
    transition: var(--transition);
}

.liga-item .fav-btn:hover { color: var(--yellow); }
.liga-item .fav-btn.fav-on { color: var(--yellow); }

.liga-item .live-dot + .fav-btn { margin-left: .4rem; }

/* Seção "Favoritos" no topo da sidebar */
.sidebar-section + .sidebar-section { border-top: 1px solid var(--border); }

.sidebar-favs-empty {
    padding: .65rem .85rem;
    color: var(--text-3);
    font-size: .78rem;
    font-style: italic;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(31,157,77,.6); }
    70%  { box-shadow: 0 0 0 7px rgba(31,157,77,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,157,77,0); }
}

/* ====== CENTRO (col-center) ====== */
.col-center {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
}

.col-right {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    align-self: start;
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

/* Cabeçalho geral de uma "vista" */
.vista-header {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
}

.vista-header img.logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Defensiva GLOBAL — nenhuma img solta pode estourar.
 * As exceções (hero, banners) devem usar classes específicas. */
img { max-width: 100%; }

/* Defensiva — qualquer img dentro de qualquer vista-header */
.vista-header img {
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}
.vista-header img.flag {
    width: 18px !important;
    height: 13px !important;
    max-width: 18px !important;
    max-height: 13px !important;
}

/* Defensiva — bandeirinhas com class="flag" em qualquer lugar nunca > 32px */
img.flag {
    max-width: 32px;
    max-height: 24px;
    object-fit: cover;
}

/* ====== HERO do estádio (foto panorâmica + info overlay) ====== */
.estadio-hero {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%);
    border-bottom: 1px solid var(--border);
}
.estadio-hero.pais-usa { background: linear-gradient(135deg, #102043 0%, #b22234 100%); }
.estadio-hero.pais-mex { background: linear-gradient(135deg, #006847 0%, #ce1126 100%); }
.estadio-hero.pais-can { background: linear-gradient(135deg, #ff0000 0%, #2b0000 100%); }

.estadio-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .6s ease;
    z-index: 0;
}
.estadio-hero-bg.loaded { opacity: .55; }

.estadio-hero-overlay {
    position: relative;
    z-index: 1;
    padding: 1.4rem 1.5rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(0,0,0,.05) 0%,
        rgba(0,0,0,.35) 50%,
        rgba(0,0,0,.75) 100%);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .3rem;
    color: #fff;
}
.estadio-hero-pais {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.85);
}
.estadio-hero-pais img.flag {
    width: 20px !important;
    height: 14px !important;
    object-fit: cover;
    border-radius: 2px;
}
.estadio-hero-nome {
    font-size: 1.85rem;
    font-weight: 800;
    margin: .1rem 0 0;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
    line-height: 1.1;
}
.estadio-hero-cidade {
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.estadio-hero-stats {
    display: flex;
    gap: 1.5rem;
    margin-top: .8rem;
}
.ehs-item { text-align: left; }
.ehs-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.ehs-lbl {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255,255,255,.7);
    margin-top: .15rem;
}

/* Header específico do estádio: bandeira do país em tamanho controlado */
.estadio-header .estadio-flag-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-3);
}
.estadio-header .estadio-flag-wrap img.flag-big {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: cover;
}

/* Header de grupo (cor de barra com base na classe c1/c2/c3) */
.grupo-header { border-left: 4px solid var(--purple); }
.grupo-header.c1 { border-left-color: #ff5e7e; }
.grupo-header.c2 { border-left-color: #5eb1ff; }
.grupo-header.c3 { border-left-color: #5eff9c; }

.grupo-header-times {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    margin-top: .35rem;
}
.grupo-header-time {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--bg-3);
    font-size: .78rem;
    cursor: pointer;
    transition: var(--transition);
}
.grupo-header-time:hover { background: var(--bg-2); }
.grupo-header-time img.flag {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
}

/* Breadcrumb pequeno (voltar pra Copa) */
.breadcrumb {
    padding: .55rem 1.1rem;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    font-size: .78rem;
}
.breadcrumb a {
    color: var(--text-2);
    text-decoration: none;
    transition: var(--transition);
}
.breadcrumb a:hover { color: var(--purple); }

/* ─── "Scoreboard" do Ao Vivo (variante de .hero-pagina) ───
 * Estrutura própria (3 colunas: badge | num | info) em vez do
 * grid padrão do hero-pagina-inner. Padding/background/min-height
 * vêm de .hero-pagina + .hero-pagina.hero-live. */
.live-scoreboard {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 1.4rem;
    /* padding/background/border-bottom herdados de .hero-pagina */
}
.live-scoreboard-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    background: var(--red, #d8322f);
    color: #fff;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: .72rem;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 18px rgba(216,50,47,.55);
    align-self: start;
}
.live-scoreboard-badge .live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    animation: livePulse 1.1s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.85); }
}
.live-scoreboard-num {
    font-size: 4.4rem;
    line-height: 1;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -2px;
    text-shadow: 0 0 30px rgba(216,50,47,.35);
    font-variant-numeric: tabular-nums;
}
.live-scoreboard-info { line-height: 1.3; }
.live-scoreboard-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .3px;
}
.live-scoreboard-meta {
    font-size: .78rem;
    color: var(--text-2);
    margin-top: .25rem;
    letter-spacing: .2px;
}
@media (max-width: 600px) {
    .live-scoreboard { grid-template-columns: auto 1fr; gap: .9rem; }
    .live-scoreboard-num { font-size: 3rem; grid-column: 1 / -1; }
    .live-scoreboard-badge { font-size: .68rem; }
    .live-scoreboard-info { grid-column: 1 / -1; }
}

/* ─── Badge "Feminino" — times/seleções com sufixo " W" da API-Football ─── */
.badge-feminino {
    display: inline-block;
    margin-left: .45rem;
    padding: .08rem .45rem .12rem;
    background: linear-gradient(120deg, #ec4899, #b8336a);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: middle;
    box-shadow: 0 1px 3px rgba(236,72,153,.35);
}

/* ─── Botão "Ver mais jogos" (carrega ligas não-destacadas na mesma tela) ─── */
.jogos-outros-wrap {
    display: flex;
    justify-content: center;
    margin: 1.6rem 1rem 2rem;
}
.btn-ver-mais {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .85rem 1.6rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    font-family: inherit;
}
.btn-ver-mais:hover:not(:disabled) {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(160,75,255,.35);
}
.btn-ver-mais:disabled {
    opacity: .6;
    cursor: progress;
}
.btn-ver-mais-icon {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 800;
    color: var(--purple);
    transition: color .2s;
}
.btn-ver-mais:hover .btn-ver-mais-icon { color: #fff; }
.jogos-outros-lista { animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ─── Botão "Voltar para X" (substitui o breadcrumb em sub-views; sticky no topo) ─── */
.btn-voltar {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: .85rem 1.1rem;
    padding: .55rem 1rem .55rem .75rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 600;
    transition: var(--transition);
    position: sticky;
    top: .5rem;
    z-index: 5;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    width: max-content;
}
.btn-voltar:hover {
    background: var(--purple);
    border-color: var(--purple);
    color: #fff;
    transform: translateX(-2px);
}
.btn-voltar-icon {
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 800;
    transition: transform .2s;
}
.btn-voltar:hover .btn-voltar-icon { transform: translateX(-3px); }
.btn-voltar-text { letter-spacing: .3px; }
@media (max-width: 600px) {
    .btn-voltar { font-size: .8rem; padding: .5rem .85rem .5rem .65rem; margin: .65rem .85rem; }
}

/* CTA "Ver jogos →" no card de estádio */
.estadio-card.clickable {
    cursor: pointer;
    transition: var(--transition);
}
.estadio-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.estadio-card .e-cta {
    margin-top: .55rem;
    font-size: .72rem;
    color: var(--purple);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Header de grupo clicável (com seta) */
.grupo-card-header.clickable {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}
.grupo-card-header.clickable:hover { filter: brightness(1.15); }
.grupo-card-arrow {
    font-size: 1.1rem;
    opacity: .7;
    transition: var(--transition);
}
.grupo-card-header.clickable:hover .grupo-card-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* ====== BRACKET / CHAVEAMENTO ====== */
.bracket-wrap {
    padding: 0 0 1rem;
}
.bracket-cols {
    display: flex;
    flex-wrap: nowrap;
    gap: .8rem;
    padding: .8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.bracket-col {
    flex: 0 0 240px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.bracket-fase-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .55rem .7rem;
    background: var(--bg-1);
    border-radius: 6px;
    border-left: 3px solid var(--purple);
}
.bracket-fase-title .fase-label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.bracket-fase-title .fase-count {
    font-size: .68rem;
    color: var(--text-3);
}
.bracket-empty {
    padding: 1.2rem .8rem;
    text-align: center;
    color: var(--text-3);
    font-size: .78rem;
    font-style: italic;
    background: var(--bg-1);
    border-radius: 6px;
    border: 1px dashed var(--border);
}
.bracket-match {
    padding: .55rem .65rem;
    background: var(--bg-2);
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.bracket-match:hover {
    border-color: var(--purple);
    transform: translateY(-1px);
}
.bracket-match.live { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.bracket-match.done { opacity: .85; }
.bracket-match .bm-data {
    font-size: .68rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.bracket-match.live .bm-data { color: var(--green); font-weight: 700; }
.bracket-match .bm-row {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.bracket-match .bm-logo {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    object-fit: contain;
}
.bracket-match .bm-nome {
    flex: 1;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bracket-match .bm-gol {
    font-weight: 800;
    font-size: .95rem;
    min-width: 1.2rem;
    text-align: right;
}
.bracket-match .bm-row.winner .bm-nome { font-weight: 700; }
.bracket-match .bm-row.loser  { opacity: .55; }
@media (max-width: 900px) {
    .bracket-col { flex: 0 0 88vw; }
}

/* ====== HISTÓRICO do time (ficha + troféus + transferências) ====== */
.historico-wrap { padding: 0 0 1rem; }

.historico-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    padding: .8rem 1rem;
}
.hf-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem .7rem;
    transition: var(--transition);
}
.hf-card:hover { border-color: var(--purple); }
.hf-emoji { font-size: 1.1rem; line-height: 1; }
.hf-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-3);
    margin-top: .25rem;
}
.hf-valor {
    font-size: .92rem;
    font-weight: 700;
    color: var(--text);
    margin-top: .2rem;
}

.trofeus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .7rem;
    padding: .8rem 1rem;
}
.trofeu-card {
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .9rem .9rem 1rem;
    text-align: center;
    position: relative;
    transition: var(--transition);
}
.trofeu-card:hover { transform: translateY(-2px); border-color: var(--purple); }
.trofeu-card.silver {
    background: linear-gradient(135deg, #2c2c33 0%, #3a3a44 100%);
    border-color: #8a8aaa;
}
.trofeu-card.gold {
    background: linear-gradient(135deg, #3a2c10 0%, #5e4a1e 100%);
    border-color: #d4a52a;
    box-shadow: 0 0 18px rgba(212,165,42,.2);
}
.tc-trofeu { font-size: 1.8rem; line-height: 1; }
.trofeu-card.gold .tc-trofeu { filter: drop-shadow(0 0 6px rgba(212,165,42,.6)); }
.tc-comp {
    font-size: .85rem;
    font-weight: 800;
    color: var(--text);
    margin-top: .2rem;
    line-height: 1.2;
}
.tc-pais {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    margin-top: .15rem;
}
.tc-num {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-top: .35rem;
}
.trofeu-card.gold .tc-num { color: #f1c34a; }
.tc-num-lbl {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-3);
}
.tc-anos {
    font-size: .72rem;
    color: var(--text-2);
    margin-top: .35rem;
    line-height: 1.3;
}
.tc-sub {
    font-size: .72rem;
    color: var(--text-3);
    margin-top: .15rem;
}

.transfers-list {
    padding: .3rem 0 .8rem;
}
.transfer-row {
    display: grid;
    grid-template-columns: 30px 1fr 1.4fr 100px 80px;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: .82rem;
}
.transfer-row.in  { border-left: 3px solid var(--green); }
.transfer-row.out { border-left: 3px solid var(--red); }
.tr-seta { font-size: 1.1rem; text-align: center; }
.transfer-row.in  .tr-seta { color: var(--green); }
.transfer-row.out .tr-seta { color: var(--red); }
.tr-player { font-weight: 700; }
.tr-mov   { color: var(--text-2); }
.tr-data  { color: var(--text-3); font-size: .72rem; }
.tr-tipo  { color: var(--text-3); font-size: .68rem; text-transform: uppercase; letter-spacing: .8px; }

@media (max-width: 700px) {
    .transfer-row {
        grid-template-columns: 24px 1fr;
        grid-template-areas:
            "seta player"
            ".    mov"
            ".    data";
        row-gap: .15rem;
    }
    .tr-seta   { grid-area: seta; align-self: start; }
    .tr-player { grid-area: player; }
    .tr-mov    { grid-area: mov; }
    .tr-data   { grid-area: data; }
    .tr-tipo   { display: none; }
}

/* ====== USER CHIP (badge no canto da navbar) ====== */
.user-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .5rem .35rem .7rem;
    margin-left: .6rem;
    border-radius: 999px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    font-size: .78rem;
    cursor: default;
    transition: var(--transition);
}
.user-chip:hover { border-color: var(--purple); }
.user-chip .uc-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}
.user-chip .uc-name {
    font-weight: 700;
    color: var(--text);
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-chip .uc-logout {
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 .25rem;
    transition: var(--transition);
}
.user-chip .uc-logout:hover { color: var(--red); }

.user-chip .uc-tooltip {
    position: absolute;
    right: 0;
    top: calc(100% + .55rem);
    min-width: 220px;
    padding: .8rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .2s, transform .2s;
    z-index: 100;
    text-align: left;
}
.user-chip:hover .uc-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.uc-tooltip .uc-msg {
    font-size: .78rem;
    color: var(--text-2);
    margin-top: .4rem;
}
.uc-tooltip .uc-meta {
    font-size: .68rem;
    color: var(--text-3);
    margin-top: .5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.uc-logout-full {
    margin-top: .6rem;
    width: 100%;
    padding: .45rem .7rem;
    border: 1px solid var(--red);
    color: var(--red);
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    transition: var(--transition);
}
.uc-logout-full:hover {
    background: var(--red);
    color: #fff;
}

/* Overlay loading transient (busca de seleção) */
.loading-overlay {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem 1.6rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    z-index: 9999;
    font-size: .9rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}

.vista-header h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.vista-header .meta {
    font-size: .75rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* Tabs */
.tabs {
    display: flex;
    flex-wrap: nowrap;          /* nunca quebra: tudo em 1 linha */
    overflow-x: auto;           /* scroll horizontal silencioso se não couber */
    scrollbar-width: none;      /* Firefox: sem barra visual */
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-1);
}
.tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

.tab {
    flex: 1 0 auto;            /* não encolhe, mas pode crescer */
    text-align: center;
    padding: .7rem .7rem;
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.tab .tab-escudo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.tab:hover { color: var(--text); }

.tab.active {
    color: var(--text);
    border-bottom-color: var(--purple);
}

/* ====== "JOGOS DE HOJE" — agrupado por liga ====== */
.dia-grupo { border-bottom: 1px solid var(--border); }

.dia-grupo-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1rem;
    background: var(--bg-1);
    cursor: pointer;
    transition: var(--transition);
}

.dia-grupo-header:hover { background: var(--bg-3); }

.dia-grupo-header img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.dia-grupo-header .liga-nome {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
}

.dia-grupo-header .liga-pais {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-left: auto;
}

.jogo-row {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: .8rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: var(--transition);
}

.jogo-row:first-child { border-top: none; }
.jogo-row:hover { background: var(--bg-3); }

.jogo-row.live { border-left: 3px solid var(--green); padding-left: calc(1rem - 3px); }

.jogo-row .jogo-status {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    color: var(--text-2);
}

.jogo-row .jogo-status.s-live { color: var(--green); }
.jogo-row .jogo-status.s-done { color: var(--text-3); }
.jogo-row .jogo-status .live-min { font-size: .9rem; }

.jogo-row .jogo-times {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.jogo-time {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
}

.jogo-time img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.jogo-time-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .87rem;
    color: var(--text);
}

.jogo-time.winner .jogo-time-nome { font-weight: 700; }
.jogo-time.loser .jogo-time-nome { color: var(--text-2); }

.jogo-row .jogo-placar {
    text-align: right;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    min-width: 24px;
}

.jogo-row .jogo-placar.muted { color: var(--text-3); }

/* ====== HERO-PAGINA — banner unificado para TODAS as views ======
 * Anatomia comum: padding 1.4rem, min-height 140px, grid [ícone | conteúdo].
 * Variantes (.hero-copa, .hero-dia-hoje, .hero-dia-amanha, .hero-live)
 * só trocam: background, ícone, paleta do título e bloco "extra" embaixo.
 */
.hero-pagina {
    position: relative;
    padding: 1.4rem 1.4rem 1.2rem;
    min-height: 140px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}
.hero-pagina-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.4rem;
    max-width: 1000px;
    margin: 0 auto;
}
.hero-pagina-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-pagina-icon-emoji {
    font-size: 4.4rem;
    line-height: 1;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
.hero-pagina-content { min-width: 0; }
.hero-pagina-titulo {
    margin: 0 0 .35rem;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1.05;
    color: var(--text);
}
.hero-pagina-info {
    color: var(--text-2);
    font-size: .9rem;
    margin-bottom: .55rem;
}
.hero-pagina-extra {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .95rem;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text);
}

/* — Variante COPA — */
.hero-pagina.hero-copa {
    background:
        radial-gradient(ellipse 70% 80% at 25% 30%, rgba(46,139,255,.30), transparent 70%),
        radial-gradient(ellipse 60% 70% at 75% 65%, rgba(255,106,44,.20), transparent 70%),
        linear-gradient(135deg, #1a0f30, #150a1f);
}
.hero-pagina.hero-copa .hero-pagina-titulo {
    background: var(--gradient-copa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-copa-logo {
    width: 96px;
    height: auto;
    max-height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
.hero-pagina.hero-copa .countdown-copa { color: var(--yellow); }

/* — Variante HOJE (verde→azul) — */
.hero-pagina.hero-dia-hoje {
    background:
        radial-gradient(ellipse 60% 70% at 20% 30%, rgba(31,157,77,.22), transparent 70%),
        radial-gradient(ellipse 60% 70% at 80% 70%, rgba(46,139,255,.18), transparent 70%),
        linear-gradient(135deg, #0f1f17, #0a141d);
}
.hero-pagina.hero-dia-hoje .hero-pagina-titulo {
    background: linear-gradient(120deg, #1f9d4d 0%, #2e8bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* — Variante AMANHÃ (roxo→azul) — */
.hero-pagina.hero-dia-amanha {
    background:
        radial-gradient(ellipse 60% 70% at 20% 30%, rgba(160,75,255,.22), transparent 70%),
        radial-gradient(ellipse 60% 70% at 80% 70%, rgba(46,139,255,.18), transparent 70%),
        linear-gradient(135deg, #1a132a, #0a0f1d);
}
.hero-pagina.hero-dia-amanha .hero-pagina-titulo {
    background: linear-gradient(120deg, #a04bff 0%, #2e8bff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* — Variante LIVE (já usa a estrutura própria do scoreboard, mas herda
   o min-height/padding/border-bottom da .hero-pagina) — */
.hero-pagina.hero-live {
    background: linear-gradient(120deg, rgba(216,50,47,.18) 0%, rgba(0,0,0,0) 55%), var(--bg-1);
}

@media (max-width: 720px) {
    .hero-pagina-inner { grid-template-columns: 1fr; text-align: center; gap: .8rem; }
    .hero-pagina-icon { margin: 0 auto; width: 72px; height: 72px; }
    .hero-pagina-icon-emoji { font-size: 3.4rem; }
    .hero-pagina-titulo { font-size: 1.5rem; }
    .hero-copa-logo { width: 72px; margin: 0 auto; }
    .hero-pagina-extra { font-size: .8rem; padding: .4rem .8rem; }
}

/* ====== ESTATÍSTICAS DO JOGO (template style) ====== */
.stat-row {
    display: grid;
    grid-template-columns: 38px 1fr 38px;
    align-items: center;
    padding: .35rem .8rem;
    gap: .65rem;
}

.stat-row .stat-num {
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
}

.stat-row .stat-bar {
    position: relative;
    height: 5px;
    background: var(--bg-3);
    border-radius: 3px;
    overflow: visible;
}

.stat-row .stat-bar .b-home {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    background: var(--blue);
    border-radius: 3px;
    transform-origin: right center;
}

.stat-row .stat-bar .b-away {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    background: var(--yellow);
    border-radius: 3px;
    transform-origin: left center;
}

.stat-row .stat-label {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .72rem;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.stat-row + .stat-row { margin-top: 1.6rem; }

/* ====== EVENTS (timeline) ====== */
.event-item {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .55rem 1rem;
    border-top: 1px solid var(--border);
}

.event-item .event-min {
    width: 36px;
    text-align: center;
    font-size: .85rem;
    font-weight: 700;
    color: var(--purple);
}

.event-item .event-icon { font-size: 1rem; }

.event-item .event-text {
    font-size: .85rem;
    color: var(--text);
}

.event-item .event-text .player { font-weight: 600; }

.event-item .event-text .secondary {
    color: var(--text-3);
    font-size: .75rem;
}

.event-item.team-home { flex-direction: row; }
.event-item.team-away { flex-direction: row-reverse; text-align: right; }

/* ====== LINEUPS ====== */
.lineup-team { padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.lineup-team:last-child { border-bottom: none; }

.lineup-team h4 {
    margin: 0 0 .5rem;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-2);
}

.lineup-team .formation {
    color: var(--text-3);
    font-size: .75rem;
    margin-left: .4rem;
}

.lineup-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .25rem .8rem;
}

.lineup-player {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    padding: .2rem 0;
}

.lineup-player .lp-nome {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lineup-player .num {
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: var(--bg-3);
    border-radius: 50%;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text);
    flex-shrink: 0;
}

/* Campo visual com fotos na aba Escalações (rendLineups → desenharCampoLineup) */
.campo-lineup-wrap {
    max-width: 320px;
    margin: .6rem auto 1rem;
    padding: .4rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.campo-lineup-wrap .campo-svg.campo-lineup {
    display: block;
    width: 100%;
    height: auto;
}
.campo-jogador { cursor: default; }

/* Jogador no campo via foreignObject. O viewBox do SVG é 100x150, então
 * 1 unidade SVG ≈ 1 "pixel virtual". O conteúdo HTML é escalado junto. */
.campo-jogador-fo { overflow: visible; }
.campo-jogador-html {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: -apple-system, system-ui, sans-serif;
    color: #fff;
    line-height: 1.05;
    text-align: center;
    pointer-events: none;
    user-select: none;
}
.cjf-photo {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    object-fit: cover;
    background: #1b1b1b;
    border: .6px solid rgba(255,255,255,.9);
    box-shadow: 0 0 1px rgba(0,0,0,.6);
    flex-shrink: 0;
}
.cjf-noimg { background: #1b1b1b; }
.campo-jogador-html.is-gk .cjf-photo {
    border-color: #ffd24a;       /* destaca o goleiro */
    box-shadow: 0 0 1px rgba(0,0,0,.6), 0 0 0 .4px #ffd24a;
}
.cjf-num {
    font-size: 4px;
    font-weight: 800;
    margin-top: .8px;
    text-shadow: 0 0 1.5px #000, 0 0 1.5px #000;
}
.cjf-nome {
    font-size: 3px;
    margin-top: .2px;
    text-shadow: 0 0 1.5px #000, 0 0 1.5px #000;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Foto do jogador (cache local em assets/players/<id>.png) */
.player-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-3);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.lineup-player .player-photo.lp-photo { width: 28px; height: 28px; }
.lineup-bench { opacity: .8; }
.lineup-bench .player-photo.lp-photo { width: 24px; height: 24px; }

/* ====== STANDINGS (tabela) ====== */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.standings-table th,
.standings-table td {
    padding: .45rem .55rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.standings-table th {
    background: var(--bg-1);
    color: var(--text-3);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 700;
}

.standings-table td.team-cell { text-align: left; }

.standings-table .team-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.standings-table .team-cell img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.standings-table .rank {
    width: 28px;
    color: var(--text-3);
    font-weight: 700;
}

.standings-table tr.classificado .rank { color: var(--green); }
.standings-table tr.rebaixado .rank   { color: var(--red); }

/* ====== JOGO SELECIONADO (col-right header) ====== */
.match-header {
    padding: 1rem;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}

.match-header .liga-line {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: .55rem;
}

.match-header .liga-line img { width: 14px; height: 14px; object-fit: contain; }

.match-header .placar-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .8rem;
}

.match-header .team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
}

.match-header .team-col img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

.match-header .team-col .team-name {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.1;
}

.match-header .score-col {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.match-header .score-col .small {
    font-size: .65rem;
    color: var(--green);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-top: .3rem;
    text-transform: uppercase;
}

.match-header .info-row {
    margin-top: .65rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: .72rem;
    color: var(--text-3);
}

/* ====== PRÓXIMO JOGO EM DESTAQUE (col-right quando vazia) ====== */
.proximo-card {
    padding: 1.4rem 1rem;
    text-align: center;
}

.proximo-card .pc-label {
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: .8rem;
}

.proximo-card .pc-liga {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .9rem;
    font-size: .78rem;
    color: var(--text-2);
}

.proximo-card .pc-liga img { width: 16px; height: 16px; object-fit: contain; }

.proximo-card .pc-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.proximo-card .pc-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.proximo-card .pc-team img {
    width: 56px; height: 56px; object-fit: contain;
}

.proximo-card .pc-team-name {
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.15;
}

.proximo-card .pc-vs {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-3);
    letter-spacing: 1px;
}

.proximo-card .pc-when {
    color: var(--text-2);
    font-size: .82rem;
    margin-bottom: .6rem;
}

.proximo-card .pc-countdown {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .9rem;
    background: rgba(149,67,224,.15);
    border: 1px solid var(--purple);
    border-radius: 16px;
    color: var(--purple);
    font-weight: 700;
    font-size: .82rem;
}

.proximo-card .pc-venue {
    margin-top: .8rem;
    color: var(--text-3);
    font-size: .75rem;
}

/* ====== TOP SCORERS / ASSISTS ====== */
.top-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
}

.top-col h4 {
    margin: 0 0 .6rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.top-row {
    display: grid;
    grid-template-columns: 22px 32px 1fr auto;
    align-items: center;
    gap: .6rem;
    padding: .5rem;
    border-top: 1px solid var(--border);
}

.top-row:first-of-type { border-top: none; }

.top-row .tp-rank {
    text-align: center;
    font-weight: 700;
    color: var(--text-3);
    font-size: .82rem;
}

.top-row .tp-rank.gold   { color: #fbbf24; }
.top-row .tp-rank.silver { color: #b0b0b8; }
.top-row .tp-rank.bronze { color: #d97706; }

.top-row img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-3);
}

.top-row .tp-name {
    font-size: .85rem;
    color: var(--text);
    line-height: 1.15;
}

.top-row .tp-team {
    font-size: .72rem;
    color: var(--text-3);
}

.top-row .tp-val {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--green);
}

/* Botão de favoritar no header de vista */
/* Botão Favoritar grande (vista-header + team-hero) — padrão pill como .btn-nav */
.vista-header .fav-btn-large,
.team-hero .fav-btn-large {
    margin-left: auto;
    background: transparent;
    border: 2px solid var(--border);
    color: var(--text-2);
    padding: .5rem 1.1rem;
    border-radius: 22px;
    cursor: pointer;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    transition: var(--transition);
    white-space: nowrap;
    line-height: 1;
}
.vista-header .fav-btn-large:hover,
.team-hero .fav-btn-large:hover {
    border-color: var(--yellow);
    color: var(--yellow);
}
.vista-header .fav-btn-large.fav-on,
.team-hero .fav-btn-large.fav-on {
    border-color: var(--yellow);
    color: var(--yellow);
    background: rgba(251,191,36,.10);
}

/* ====== COPA 2026 — GRUPOS (12 cards visuais) ====== */
.copa-grid-grupos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    padding: 1.2rem;
}

.grupo-card {
    background: var(--bg-1);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.grupo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
}

.grupo-card-header {
    padding: .75rem 1rem;
    text-align: center;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Cores alternadas (padrão da imagem do Paulo) */
.grupo-card.c1 .grupo-card-header { background: linear-gradient(95deg, #ff6a2c, #ff9a3c); }
.grupo-card.c2 .grupo-card-header { background: linear-gradient(95deg, #2e8bff, #00c8d4); }
.grupo-card.c3 .grupo-card-header { background: linear-gradient(95deg, #e8377a, #ff4d8a); }

.grupo-times {
    padding: .6rem .8rem;
}

.grupo-time {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .45rem .2rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition);
    cursor: pointer;
    border-radius: 4px;
}

.grupo-time:last-child { border-bottom: none; }
.grupo-time:hover { background: var(--bg-3); }

.grupo-time img.flag,
.grupo-time img.logo {
    width: 22px;
    height: 16px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 2px;
}

.grupo-time img.logo {
    height: 22px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
}

.grupo-time .gt-nome {
    font-size: .85rem;
    color: var(--text);
}

/* ====== COPA 2026 — ESTÁDIOS ====== */
.estadios-intro {
    text-align: center;
    padding: 1.2rem 1rem .4rem;
}

.estadios-intro h3 {
    margin: 0 0 .3rem;
    font-size: 1.05rem;
    background: var(--gradient-copa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.estadios-intro .sub {
    color: var(--text-2);
    font-size: .82rem;
}

.estadios-pais-section {
    padding: .5rem 1rem 1.2rem;
}

.estadios-pais-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem .2rem .55rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: .7rem;
}

.estadios-pais-title img {
    width: 26px; height: 18px;
    object-fit: cover;
    border-radius: 2px;
}

.estadios-pais-title h4 {
    margin: 0;
    font-size: .92rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.estadios-pais-title .count {
    margin-left: auto;
    font-size: .72rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.estadios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .65rem;
}

.estadio-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: 6px;
    padding: .7rem .85rem;
    transition: transform var(--transition), border-left-color var(--transition);
}

.estadio-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--orange);
}

.estadio-card.pais-usa  { border-left-color: #2e8bff; }
.estadio-card.pais-mex  { border-left-color: #fbbf24; }
.estadio-card.pais-can  { border-left-color: #e8377a; }

.estadio-card .e-cidade {
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text);
    margin-bottom: .15rem;
}

.estadio-card .e-nome {
    font-size: .78rem;
    color: var(--text-2);
    margin-bottom: .35rem;
}

.estadio-card .e-capacidade {
    font-size: .72rem;
    color: var(--text-3);
    font-family: monospace;
    letter-spacing: .5px;
}

/* ====== EMPTY / LOADING STATES ====== */
.empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-3);
}

.empty .icon { font-size: 2rem; opacity: .5; margin-bottom: .5rem; }

.loading {
    padding: 2rem;
    text-align: center;
    color: var(--text-2);
    font-size: .85rem;
}

.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-3);
    border-top-color: var(--purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: .5rem;
    vertical-align: middle;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Skeleton */
.skel {
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: 3px;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

/* ====== UTIL ====== */
.text-muted { color: var(--text-3); }
.text-2 { color: var(--text-2); }
.badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 10px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--bg-3);
    color: var(--text);
    letter-spacing: .5px;
}
.badge.live { background: var(--green-soft); color: var(--green); }

/* ====== VIEW STANDALONE BRACKET — seção AO VIVO da Copa ====== */
.bracket-live-sec {
    margin: 2rem 0 1.5rem;
    padding: 1.2rem 1rem;
    background: linear-gradient(180deg, rgba(31,157,77,.08), rgba(31,157,77,.02));
    border: 1px solid rgba(31,157,77,.18);
    border-radius: 12px;
}
.bracket-live-title {
    display: flex; align-items: center; gap: .6rem;
    font-size: .95rem; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 1rem;
}
.bracket-live-grid {
    display: flex; flex-direction: column;
    background: var(--bg-1);
    border-radius: 8px;
    overflow: hidden;
}

/* ====== VIEW NOTÍCIAS ====== */
.noticias-wrap {
    padding: 1rem 0;
}
.noticias-head {
    margin-bottom: 1.5rem;
    padding: 0 .5rem;
}
.noticias-title {
    font-size: 1.4rem; font-weight: 800;
    color: var(--text); margin-bottom: .25rem;
}
.noticias-sub {
    font-size: .78rem; color: var(--text-3);
    letter-spacing: .3px;
}
.noticias-empty {
    padding: 3rem 1rem; text-align: center;
    color: var(--text-3); font-size: .9rem;
}
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.noticia-card {
    display: flex; flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.noticia-card:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.noticia-img {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-3);
}
.noticia-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; opacity: .35;
}
.noticia-body {
    padding: .85rem 1rem 1rem;
    display: flex; flex-direction: column; gap: .35rem;
    flex: 1;
}
.noticia-fonte {
    font-size: .68rem; font-weight: 800;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--green);
}
.noticia-titulo {
    font-size: .95rem; line-height: 1.3;
    font-weight: 700; color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}
.noticia-data {
    font-size: .72rem; color: var(--text-3);
    margin-top: .25rem;
}

/* ====== Botões nav novos (.btn-bracket / .btn-noticias) usam o estilo padrão .btn-nav ====== */

/* ====== PREDIÇÃO inline (L5) — % logo após nome, cor relativa ====== */
.jogo-time .jt-pct {
    margin-left: .5rem;
    font-size: .75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
    color: var(--text-3);
    flex-shrink: 0;
}
.jogo-time .jt-pct:empty { display: none; }       /* sem dado → invisível */
.jogo-time .jt-pct.pct-fav { color: #4ade80; }    /* verde — quem tem MAIS chance */
.jogo-time .jt-pct.pct-und { color: #ef4444; }    /* vermelho — quem tem MENOS chance */
.jogo-time .jt-pct.pct-eq  { color: var(--text-2); }   /* equilíbrio (diff <=3pp) */
.jogo-time .jt-forma {
    margin-left: auto;       /* empurra forma pro fim (depois do nome+pct) */
    display: inline-flex;
    gap: 2px;
}

/* ====== BRACKET FULLSCREEN — botão padrão + layout 2-lados ====== */
.bracket-header { position: relative; }
.bracket-fullscreen-btn {
    position: absolute;
    top: 1rem; right: 1.2rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .9rem;
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 22px;
    color: var(--text-2);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 5;
}
.bracket-fullscreen-btn:hover {
    color: var(--text);
    border-color: var(--purple);
}
.bracket-fullscreen-btn .bfb-label { line-height: 1; }

/* Wrap em fullscreen — cobre tela inteira, com scroll */
.bracket-wrap.bracket-in-fullscreen {
    background: var(--bg-0);
    overflow: auto;
    padding: 1rem 1.5rem 2rem;
    width: 100vw;
    height: 100vh;
}

/* Layout 2-LADOS (Olympics): R16-QF-SF | FINAL | SF-QF-R16 (espelhado).
   Especificidade reforçada com .bracket-wrap pra garantir override de qualquer
   regra herdada de .bracket-tree padrão. */
.bracket-wrap .bracket-tree.bracket-two-sided {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
    align-items: stretch;
    padding: 1rem .5rem;
    min-height: calc(100vh - 220px);
    overflow: visible;
    flex-direction: unset;        /* anula flex herdado */
    scroll-snap-type: none;
}
.bracket-wrap .bracket-two-sided .bs-left,
.bracket-wrap .bracket-two-sided .bs-right {
    display: flex;
    gap: 1rem;
    min-width: 0;
    align-items: stretch;
}
.bracket-wrap .bracket-two-sided .bs-left  { flex-direction: row; }
.bracket-wrap .bracket-two-sided .bs-right { flex-direction: row-reverse; }
.bracket-wrap .bracket-two-sided .bs-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 260px;
}
.bracket-wrap .bracket-two-sided .bracket-round {
    flex: 1 1 0;
    min-width: 0;
}
.bracket-wrap .bracket-two-sided .bracket-round-final { flex: 0 0 250px; }
/* Espelhamento dos labels do lado direito (espelhar bordas/títulos) */
.bracket-wrap .bracket-two-sided .bs-right .br-title { text-align: right; }
/* Linha de conexão entre colunas no modo 2-lados (espelhada na direita) */
.bracket-two-sided .bs-left .bracket-round:not(:last-child)::after,
.bracket-two-sided .bs-right .bracket-round:not(:last-child)::after {
    background-image: linear-gradient(to right,
        transparent 0%, transparent 45%,
        rgba(155,92,255,.18) 50%,
        transparent 55%, transparent 100%);
}

/* =================================================================
   BRACKET / CHAVEAMENTO COPA — visual torneio (estilo Olympics)
   Classes usadas pelo renderBracket() em app.js
   ================================================================= */
.bracket-header {
    text-align: center;
    padding: 1.5rem 1rem .8rem;
}
.bracket-title {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    background: linear-gradient(135deg, #fdd967 0%, #f2b53f 45%, #c98718 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    filter: drop-shadow(0 2px 8px rgba(243,180,63,.25));
}
.bracket-trofeu {
    font-size: 1.7rem;
    -webkit-text-fill-color: initial;
    color: initial;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
.bracket-sub {
    color: var(--text-3);
    font-size: .82rem;
    margin-top: .5rem;
    letter-spacing: .3px;
}

/* === Árvore: colunas horizontais com matches distribuídos === */
.bracket-tree {
    display: flex;
    flex-direction: row;
    align-items: stretch;        /* colunas com mesma altura */
    gap: 1.5rem;
    padding: 1rem .5rem 2rem;
    overflow-x: auto;
    min-height: 640px;
    scroll-snap-type: x mandatory;
}
.bracket-round {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    scroll-snap-align: start;
    position: relative;
}
.bracket-round-final { flex: 0 0 250px; }

/* Linha sutil de conexão horizontal entre colunas (excluindo última) */
.bracket-round:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.5rem; top: 4rem; bottom: 1rem;
    width: 1.5rem;
    background-image: linear-gradient(to right,
        transparent 0%, transparent 45%,
        rgba(155,92,255,.18) 50%,
        transparent 55%, transparent 100%);
    pointer-events: none;
}

/* Header de cada fase */
.br-title {
    padding: .65rem .9rem;
    background: linear-gradient(135deg, rgba(155,92,255,.18) 0%, rgba(155,92,255,.04) 100%);
    border-left: 3px solid var(--purple);
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.br-title-label, .br-title > :first-child {
    font-size: .75rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: var(--text);
}
.br-title-count, .br-title > :last-child:not(:first-child) {
    font-size: .68rem; color: var(--text-3); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Container dos matches da fase — distribui verticalmente */
.br-matches {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: .55rem;
}
.br-matches-final {
    justify-content: center;
    gap: 1rem;
}

/* Slot vazio (sem fixture cadastrada — "TBD") */
.empty-slot {
    background: var(--bg-2);
    border: 1px dashed rgba(255,255,255,.10);
    padding: .85rem .7rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 72px;
    color: var(--text-3);
}
.empty-slot .es-label {
    font-size: .72rem;
    text-align: center;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .8px;
    font-weight: 600;
}
.empty-slot .es-vs {
    font-size: .65rem;
    opacity: .55;
    font-style: italic;
}

/* Modo "ghost" — antes do sorteio, todo o bracket é placeholder */
.bracket-tree-ghost .empty-slot {
    background: var(--bg-1);
    position: relative;
    overflow: hidden;
}
.bracket-tree-ghost .empty-slot::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(110deg,
        transparent 30%,
        rgba(155,92,255,.07) 50%,
        transparent 70%);
    background-size: 200% 100%;
    animation: shimmer 3.5s linear infinite;
    pointer-events: none;
}
.bracket-tree-ghost .br-title { opacity: .7; }
.bracket-tree-ghost .br-title-count { display: none; }

/* Champion preview (final destacada com troféu) */
.champion-preview {
    background: linear-gradient(180deg,
        rgba(243,180,63,.22) 0%,
        rgba(243,180,63,.05) 100%);
    border: 1px solid rgba(243,180,63,.35);
    border-radius: 10px;
    padding: 1.1rem .6rem;
    text-align: center;
    margin-top: .6rem;
    box-shadow: 0 0 30px rgba(243,180,63,.08);
}
.champion-preview.ghost {
    opacity: .65;
    border-style: dashed;
}
.cp-trofeu {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 3px 8px rgba(243,180,63,.4));
}
.cp-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: #f2b53f;
    margin-top: .45rem;
}
.cp-time {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-top: .25rem;
}

/* Label "3º LUGAR" embaixo da final */
.br-third-label {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-3);
    text-align: center;
    margin: .9rem 0 .4rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--border);
}

/* Match card — visual mais limpo e cartão maior */
.bracket-match { min-height: 72px; }
.bracket-match .bm-data {
    font-size: .68rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .15rem;
}
.bracket-match .bm-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .15rem 0;
}
.bracket-match .bm-row.winner { font-weight: 700; }
.bracket-match .bm-row.loser { opacity: .55; }
.bracket-match .bm-gol {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: .85rem;
}

/* Empty wrap (texto único centrado quando NEM o ghost faz sentido) */
.bracket-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-3);
    font-size: .82rem;
    background: var(--bg-1);
    border-radius: 8px;
    border: 1px dashed var(--border);
}

/* ====== Data + hora em jogos NÃO-hoje (jogo-status multi-linha) ====== */
.jogo-status .jogo-status-multi {
    display: flex; flex-direction: column;
    line-height: 1.05; align-items: center;
}
.jogo-status .jogo-status-data {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .3px;
}
.jogo-status .jogo-status-hora {
    font-size: .72rem;
    color: var(--text-2);
    margin-top: 1px;
}

/* ====== Ticker AO VIVO — carrossel rotativo quando excede largura ====== */
.ticker-track.ticker-scrolling {
    flex-wrap: nowrap;
    overflow: visible;
    will-change: transform;
    animation: tickerScroll var(--ticker-dur, 40s) linear infinite;
}
.ticker-track.ticker-scrolling:hover {
    animation-play-state: paused;   /* pausa no hover pra leitura */
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    /* -50% porque duplicamos o conteúdo: percorrer metade = volta ao início idêntico */
    to   { transform: translateX(-50%); }
}

/* ====== BRACKET OVERLAY (sem fullscreen API) ====== */
body.bracket-fs-locked { overflow: hidden; }
.bracket-wrap.bracket-in-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg-0);
    overflow: auto;
    padding: 1rem 1.5rem 2rem;
    width: 100vw; height: 100vh;
    border-radius: 0;
}
.bracket-wrap.bracket-in-fullscreen .bracket-fullscreen-btn {
    position: fixed; top: 1rem; right: 1.5rem; z-index: 210;
    background: var(--bg-1);
}

/* ====== JOGO DETALHE — fica na coluna direita por padrão.
   Botão "Expandir" abre overlay (igual ao bracket).  ====== */
.jogo-detalhe-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 .25rem;
    position: relative;     /* pra absolute do botão Expandir */
}
/* Botão Expandir no canto superior direito da box do jogo */
.jogo-expand-btn {
    position: absolute;
    top: .5rem; right: .5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    background: var(--bg-2);
    border: 2px solid var(--border);
    border-radius: 18px;
    color: var(--text-2);
    font-weight: 700;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 5;
}
.jogo-expand-btn:hover {
    color: var(--text);
    border-color: var(--purple);
}
/* ====== EXPAND: col-right ocupa também o espaço de col-center.
   F-live 25/05: animação suave via grid-template-columns + fade da col-center.
   Mantém 3 tracks em ambos os estados pra animar; 0fr colapsa a coluna do meio. */
body.jogo-expanded .layout      { grid-template-columns: 240px 0fr 1fr; }
body.jogo-expanded .col-center  {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    min-width: 0;
    transition: opacity .12s ease;
}
body.jogo-expanded .col-right   { background: var(--bg-1); }

@media (max-width: 1100px) {
    /* Tablet: sem col-left, jogo ocupa tudo */
    body.jogo-expanded .layout      { grid-template-columns: 0fr 0fr 1fr; }
    body.jogo-expanded .col-left    { opacity: 0; visibility: hidden; pointer-events: none; min-width: 0; overflow: hidden; }
    body.jogo-expanded .col-right   { display: block; }
}
@media (max-width: 720px) {
    /* Mobile: jogo full-screen */
    body.jogo-expanded .layout      { grid-template-columns: 0fr 0fr 1fr; padding: .3rem; gap: 0; }
    body.jogo-expanded .col-right   { display: block; }
}
/* Em modo expandido, o header do jogo ganha mais respiro */
body.jogo-expanded .jogo-detalhe-wrap .match-header .team-col img {
    width: 72px; height: 72px;
}
body.jogo-expanded .jogo-detalhe-wrap .match-header .score-col {
    font-size: 2.6rem;
}
.jogo-detalhe-wrap .tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--border);
    padding: 0 .25rem;
}
.jogo-detalhe-wrap .tabs .tab {
    padding: .6rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-2);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .8px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--transition);
}
.jogo-detalhe-wrap .tabs .tab:hover { color: var(--text); }
.jogo-detalhe-wrap .tabs .tab.active {
    color: var(--text);
    border-bottom-color: var(--purple);
}
.jogo-detalhe-wrap .jogo-tab-content {
    min-height: 320px;
    padding: .5rem .25rem;
}
/* Live indicator vai no canto inf. direito da match-header */
.match-header { position: relative; }
.match-header .jogo-live-indicator {
    position: absolute;
    bottom: .5rem; right: .5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .25rem .55rem;
    background: rgba(31,157,77,.14);
    color: var(--green);
    border-radius: 14px;
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.match-header .jogo-live-indicator .live-ball { font-size: .8rem; }

/* ====== Ficha técnica do time — hero + cards melhorado ====== */
.ficha-hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--bg-2), var(--bg-1));
    border-radius: 10px;
    margin: 0 1rem 1rem;
    border: 1px solid var(--border);
}
.ficha-hero .fh-logo {
    width: 64px; height: 64px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-0);
    border-radius: 50%;
    border: 1px solid var(--border);
    padding: .4rem;
}
.ficha-hero .fh-logo img { width: 100%; height: 100%; object-fit: contain; }
.ficha-hero .fh-info { flex: 1; min-width: 0; }
.ficha-hero .fh-nome {
    font-size: 1.1rem; font-weight: 800;
    color: var(--text); margin-bottom: .15rem;
}
.ficha-hero .fh-code {
    font-size: .65rem; font-weight: 800;
    color: var(--purple); letter-spacing: 2px;
    margin-bottom: .25rem;
}
.ficha-hero .fh-meta {
    display: flex; gap: .8rem; flex-wrap: wrap;
    font-size: .75rem; color: var(--text-2);
}
.ficha-hero .fh-tag {
    background: rgba(243,180,63,.2);
    color: #f3b43f;
    padding: .1rem .45rem;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: .65rem;
}
/* Ficha técnica: cards com head separado e valor destacado */
.hf-card .hf-head {
    display: flex; align-items: center; gap: .4rem;
    margin-bottom: .35rem;
}

/* ====== FORMA — bolinhas V/E/D dos últimos 5 jogos na classificação ====== */
.standings-table .forma-col {
    text-align: center;
    width: 88px;
    min-width: 88px;
}
.standings-table th.forma-col {
    font-size: .68rem;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .8px;
}
.forma-bolinhas {
    display: inline-flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}
.forma-bolinhas .fb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.forma-bolinhas .fb-w { background: #4ade80; }   /* verde — vitória */
.forma-bolinhas .fb-d { background: #94a3b8; }   /* cinza — empate */
.forma-bolinhas .fb-l { background: #ef4444; }   /* vermelho — derrota */

/* ====== TÍTULOS via WIKIPÉDIA — fallback quando API-Football não tem ====== */
.wiki-titles {
    padding: .5rem 1rem 1rem;
}
.wiki-titles .wt-escopo {
    margin: 1.2rem 0 .55rem;
    font-size: .7rem;
    font-weight: 800;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    border-bottom: 1px dashed var(--border);
    padding-bottom: .35rem;
}
.wiki-titles .wt-escopo:first-child { margin-top: 0; }
.wiki-titles .wt-card {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .55rem .8rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: .4rem;
}
.wiki-titles .wt-trofeu { font-size: 1.2rem; line-height: 1.1; flex-shrink: 0; }
.wiki-titles .wt-body { flex: 1; min-width: 0; }
.wiki-titles .wt-comp {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.wiki-titles .wt-meta {
    display: flex; align-items: baseline; gap: .55rem;
    margin-top: .2rem;
}
.wiki-titles .wt-num {
    font-size: .75rem;
    font-weight: 800;
    color: #f3b43f;
}
.wiki-titles .wt-anos {
    font-size: .7rem;
    color: var(--text-3);
    flex: 1; min-width: 0;
    line-height: 1.3;
}

/* ====== TIME — menu fixo (header + tabs sticky) ====== */
.team-menu-fixo {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    margin: 0 -1rem;          /* compensa padding do .col-center */
    padding: 0 1rem;
}
.team-menu-fixo .vista-header { margin-bottom: 0; }
.team-menu-fixo .tabs {
    background: var(--bg-2);
    border-top: 1px solid var(--border);
}
.team-tab-content { padding-top: 1rem; }

/* ====== TIME HERO ÚNICO — estádio bg + máscara forte + escudo + meta
   Padrão pra TODO clube. Substitui o vista-header genérico.  ====== */
.team-hero {
    position: relative;
    background-color: var(--bg-2);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.team-hero .team-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.25rem;
    /* Máscara escura forte sobre o background do estádio pra legibilidade */
    background: linear-gradient(180deg,
        rgba(8,5,15,.78) 0%,
        rgba(8,5,15,.85) 60%,
        rgba(8,5,15,.92) 100%);
    color: #fff;
}
.team-hero.has-image .team-hero-inner {
    background: linear-gradient(180deg,
        rgba(8,5,15,.65) 0%,
        rgba(8,5,15,.80) 60%,
        rgba(8,5,15,.92) 100%);
}
.team-hero .th-escudo {
    width: 110px; height: 110px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    padding: .8rem;
    flex-shrink: 0;
}
.team-hero .th-escudo img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.team-hero .th-corpo { min-width: 0; }
.team-hero .th-nome {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: .25rem;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.team-hero .th-meta {
    font-size: .78rem;
    color: rgba(255,255,255,.78);
    letter-spacing: .3px;
    text-transform: uppercase;
}
.team-hero .th-venue {
    display: flex; align-items: center; gap: .4rem;
    margin-top: .55rem;
    font-size: .9rem;
    font-weight: 700;
}
.team-hero .th-venue-ico { font-size: 1rem; }
.team-hero .th-venue-sub {
    margin-top: .15rem;
    font-size: .72rem;
    color: rgba(255,255,255,.7);
}
.team-hero .th-fav { align-self: start; padding-top: .25rem; }

/* ====== FORMAÇÃO HERO — campo de futebol visual com bolinhas ====== */
.formacao-hero {
    margin: 1rem;
    padding: 1rem;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}
.formacao-hero .fh-titulo { text-align: center; }
.formacao-hero .fh-numero {
    display: block;
    font-size: 2.4rem; font-weight: 800;
    letter-spacing: 2px; line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #4ade80 0%, #5cb6ff 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.formacao-hero .fh-sub {
    display: block; margin-top: .25rem;
    font-size: .72rem; color: var(--text-2);
    letter-spacing: .8px; text-transform: uppercase;
    font-weight: 600;
}
.formacao-hero .campo-svg {
    width: 100%; max-width: 360px; height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.formacao-hero .campo-svg .campo-jog,
.formacao-hero .campo-svg .campo-jog-gk {
    filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.5));
}
.formacao-hero .campo-svg .campo-jog-gk { fill: #fbbf24; }

/* ====== FORMAÇÃO TÁTICA do time (aba ⚽ Formação) ====== */
.formacao-list {
    padding: .5rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.formacao-card {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem .8rem;
}
.formacao-card.formacao-primaria {
    border-color: var(--purple);
    background: linear-gradient(135deg, rgba(155,92,255,.10), var(--bg-2));
}
.formacao-card .fc-head {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; margin-bottom: .45rem;
}
.formacao-card .fc-formation {
    display: flex; align-items: center; gap: .6rem;
}
.formacao-card .fc-num {
    font-size: 1.05rem; font-weight: 800;
    color: var(--text); letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.formacao-card .fc-stats {
    display: flex; align-items: baseline; gap: .55rem;
}
.formacao-card .fc-jogos {
    font-size: .78rem; color: var(--text-2);
}
.formacao-card .fc-pct {
    font-size: .85rem; font-weight: 800;
    color: #4ade80;
    font-variant-numeric: tabular-nums;
}
.formacao-card .fc-bar {
    height: 6px; background: var(--bg-3);
    border-radius: 3px; overflow: hidden;
}
.formacao-card .fc-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #9b5cff, #5cb6ff);
    border-radius: 3px;
    transition: width .4s ease;
}
/* Mini-desenho da formação (gol + linhas de pontinhos) */
.formacao-card .fc-mini {
    display: flex; flex-direction: column; gap: 2px;
    width: 36px; height: 30px; padding: 1px 0;
    justify-content: space-between;
}
.formacao-card .fc-mini-linha {
    display: flex; justify-content: center; gap: 3px;
}
.formacao-card .fc-mini-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--purple);
    box-shadow: 0 0 4px rgba(155,92,255,.5);
}
.formacao-card.formacao-primaria .fc-mini-dot { background: #c4a4ff; }

/* Resumo da temporada (stats abaixo das formações) */
.formacao-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: .5rem;
    padding: .5rem 1rem 1rem;
}
.formacao-resumo .fr-stat {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .65rem .5rem;
    text-align: center;
}
.formacao-resumo .fr-val {
    font-size: 1.4rem; font-weight: 800;
    color: var(--text); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.formacao-resumo .fr-lbl {
    font-size: .65rem; text-transform: uppercase;
    color: var(--text-3); letter-spacing: .8px;
    margin-top: .3rem;
}