/* Futibola.com.br - Estilos Principais */
/* Mobile-first, responsivo e otimizado */

/* ========== Reset e Base ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== Fontes (self-hosted, spec §4.2) ========== */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow/barlow-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow/barlow-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow/barlow-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow/barlow-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow/barlow-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow/barlow-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow/barlow-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow/barlow-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow/barlow-condensed-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow/barlow-condensed-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow/barlow-condensed-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/barlow/barlow-condensed-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    /* Espaçamentos */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Transições */
    --transition: all 0.3s ease;
}

/* ==========================================================================
   Design Tokens 2026 — Estádio Noturno (spec 2026-09-29), escuro por padrão;
   claro via `data-theme="light"`
   Story 1.1: novo sistema visual. Nomes prefixados com `--fb-` para nunca
   colidir com os tokens antigos acima, que permanecem intactos até as
   Stories 1.2–1.5 migrarem as páginas que ainda dependem deles.
   Nenhum token de cor de clube (--club-accent) é declarado aqui (AD-3) —
   cor de clube é escopada por página, fora do escopo desta história.
   ========================================================================== */
:root {
    /* Cores — tema escuro "Estádio Noturno" (padrão para todos; spec §4.1).
       O claro só existe via :root[data-theme="light"] (cookie site_theme). */
    --fb-color-surface-base: #0B1220;
    --fb-color-surface-elevated: #131C2E;
    --fb-color-text-primary: #E6EDF7;
    --fb-color-text-secondary: #8A9BB4;
    --fb-color-border: #1E2A3D;
    --fb-color-ink: #1A2436;
    --fb-color-ink-contrast: #E6EDF7;
    --fb-color-accent: #22C55E;
    --fb-color-accent-contrast: #06210F;
    --fb-color-success: #22C55E;
    --fb-color-warning: #F59E0B;
    --fb-color-danger: #EF4444;
    --fb-color-neutral-draw: #3A4760;

    /* Tipografia — Barlow (corpo/dados) + Barlow Condensed (display), spec §4.2 */
    --fb-font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fb-font-display: 'Barlow Condensed', 'Barlow', 'Arial Narrow', sans-serif;
    --fb-display-weight: 800;
    --fb-display-tracking: 0.01em;
    --fb-display-sm-weight: 700;
    --fb-display-sm-tracking: 0.01em;
    --fb-data-weight: 400;
    --fb-data-label-weight: 700;
    --fb-data-label-size: 12px;
    --fb-data-label-tracking: 0.06em;

    /* Cantos arredondados */
    --fb-radius-sm: 6px;
    --fb-radius-md: 10px;
    --fb-radius-lg: 14px;
    --fb-radius-full: 9999px;

    /* Espaçamentos */
    --fb-space-xs: 6px;
    --fb-space-sm: 10px;
    --fb-space-md: 16px;
    --fb-space-lg: 24px;
    --fb-space-xl: 32px;
    --fb-space-2xl: 46px;
    --fb-space-gutter: 24px;
    --fb-space-card-padding: 18px;
    --fb-space-card-padding-lg: 26px;
    --fb-space-section-padding: 44px;
    --fb-space-section-padding-dense: 36px;

    /* Elevação — sombra não aparece em fundo escuro; borda faz o papel (spec §4.4) */
    --fb-shadow-rest: none;
    --fb-shadow-hover: 0 6px 16px rgba(0, 0, 0, .45);

    /* Barra de navegação inferior fixa (mobile < 768px) */
    --fb-bottom-nav-height: 60px;

    --fb-header-h: 57px; /* altura real gravada por main.js (initPageTabs) */
}

/* Tema claro opcional (cookie site_theme=light → data-theme="light" em <html>,
   emitido por templates/header.php). Sem atributo = escuro. */
:root[data-theme="light"] {
    --fb-color-surface-base: #FFFFFF;
    --fb-color-surface-elevated: #F4F6FA;
    --fb-color-text-primary: #0B1220;
    --fb-color-text-secondary: #51607A;
    --fb-color-border: #DDE3EC;
    --fb-color-ink: #0B1220;
    --fb-color-ink-contrast: #FFFFFF;
    --fb-color-accent: #15803D;
    --fb-color-accent-contrast: #FFFFFF;
    --fb-color-success: #15803D;
    --fb-color-warning: #92400E;
    --fb-color-danger: #B91C1C;
    --fb-color-neutral-draw: #94A3B8;
    --fb-shadow-rest: 0 1px 3px rgba(11, 18, 32, .08);
    --fb-shadow-hover: 0 6px 16px rgba(11, 18, 32, .12);
}

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

body {
    font-family: var(--fb-font-family);
    font-size: 16px;
    line-height: 1.5;
    color: var(--fb-color-text-primary);
    background-color: var(--fb-color-surface-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--fb-color-text-primary);
    text-decoration: none;
    transition: color .15s ease;
}

a:hover {
    color: var(--fb-color-accent);
}

/* Link dentro de texto corrido: sublinhado, para não depender só de cor. */
p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Foco visível padrão do site (spec §4.4). */
:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* ========== Utilities ========== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========== Container ========== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Guarda-corpos contra rolagem horizontal (spec §5.1): filhos de flex/grid
   com min-width:auto não encolhem abaixo do conteúdo e empurram a página.
   Nunca resolver com overflow-x:hidden em html/body — esconde conteúdo e
   quebra position:sticky. */
.container > * {
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

/* ========== Header ========== */
.site-header {
    background: var(--fb-color-surface-base);
    border-bottom: 1px solid var(--fb-color-border);
    padding: var(--fb-space-xs) 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--fb-shadow-rest);
}

.site-header .container {
    /* Habilita a consulta de contêiner usada para recolher o wordmark
       do logo-lockup quando o header não tem largura suficiente. */
    container-type: inline-size;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--fb-space-xs);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--fb-space-xs);
    flex-shrink: 0;
    min-width: 44px; /* alvo de toque 44×44 (spec §4.4): cobre o ícone sozinho (32px)
                         quando o wordmark recolhe (@container <640px) */
    min-height: 44px;
    margin-right: auto;
    font-family: var(--fb-font-family);
    font-size: 1.375rem;
    font-weight: var(--fb-display-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-primary);
}

.logo:hover {
    opacity: .75;
}

.logo svg,
.logo-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--fb-color-text-primary);
}

.logo-wordmark {
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Header estreito: o wordmark completo desaparece antes de truncar,
   restando só a marca (F dentro do anel), evitando o recorte visual do
   texto ("FUT...") que ocorria quando o wordmark ainda tinha
   flex-shrink:1 e a coluna do header ficava apertada entre 768–1150px
   (fase 0, review final). O corte agora é sempre tudo-ou-nada. */
@container (max-width: 640px) {
    .logo-wordmark {
        display: none;
    }
}

/* Faixa apertada do header desktop (768–1149px): o wordmark completo não
   cabe ao lado dos 5 itens de nav + busca + idioma sem espremer algo, então
   soma-se à regra de container acima e recolhe também aqui (viewport, não
   inline-size do container, porque nessa faixa a largura do container já
   acompanha de perto a do viewport). */
@media (min-width: 768px) and (max-width: 1149px) {
    .logo-wordmark {
        display: none;
    }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--fb-space-sm);
    align-items: center;
    flex-shrink: 0;
}

@media (min-width: 900px) {
    .nav-menu {
        gap: var(--fb-space-md);
    }
}

@media (min-width: 1200px) {
    .nav-menu {
        gap: var(--fb-space-lg);
    }
}

.nav-link {
    font-family: var(--fb-font-family);
    color: var(--fb-color-text-secondary);
    font-weight: 600;
    padding: var(--spacing-sm) var(--spacing-sm);
    border-radius: var(--fb-radius-sm);
    transition: color .15s ease;
}

.nav-link:hover {
    background: none;
    color: var(--fb-color-text-primary);
}

.nav-link.active {
    color: var(--fb-color-text-primary);
    font-weight: 800;
}

/* Indicador de item ativo do nav horizontal (sublinhado 2px, nunca cor). */
.desktop-menu .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding-bottom: 6px;
    white-space: nowrap;
}

/* "Comparar Times" tem rótulo curto próprio (menu.compare_short, já usado
   na bottom nav) que passa a valer também no nav horizontal abaixo de
   1200px — nessa faixa "Comparar Times" quebraria em 2 linhas mesmo com
   nowrap (empurraria os outros itens). Acima de 1200px sobra espaço e o
   rótulo completo volta. */
.nav-link-short {
    display: none;
}

@media (max-width: 1199px) {
    .nav-link-full {
        display: none;
    }

    .nav-link-short {
        display: inline;
    }
}

.desktop-menu .nav-link.active {
    border-bottom-color: var(--fb-color-accent);
}

.nav-link:focus-visible,
.bottom-nav-link:focus-visible,
.logo:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-sm);
}

.desktop-menu {
    display: none;
}

/* Botão só de ícone, alvo de toque 44×44 (spec §4.4) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--fb-radius-sm);
    color: var(--fb-color-text-primary);
    cursor: pointer;
}

.icon-btn:hover {
    color: var(--fb-color-accent);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Busca do header — < 1024px: fechada, abre sobre o header inteiro */
.header-search {
    display: none;
}

.header-search.is-open {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    gap: var(--fb-space-xs);
    padding: 0 var(--fb-space-md);
    background: var(--fb-color-surface-base);
}

.header-search-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 var(--fb-space-md);
    font-family: var(--fb-font-family);
    font-size: 16px; /* ≥16px evita zoom automático no iOS */
    color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-elevated);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-md);
}

.header-search-input::placeholder {
    color: var(--fb-color-text-secondary);
}

.header-search-input:focus {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 0;
}

@media (min-width: 768px) {
    .desktop-menu {
        margin-right: auto;
    }

    .logo {
        margin-right: var(--fb-space-lg);
    }
}

@media (min-width: 1024px) {
    .header-search,
    .header-search.is-open {
        display: flex;
        position: static;
        flex: 0 1 220px;
        min-width: 140px;
        padding: 0;
        background: none;
    }

    .header-search-open,
    .header-search-close {
        display: none;
    }
}

/* ========== Barra de Navegação Inferior (< 768px) ==========
   Substitui o nav horizontal do header nessa largura — mesmos 5 itens,
   ícone linear + rótulo. Indicador de ativo migra de border-bottom
   para border-top. Novo seletor,
   `.site-header`/`.main-nav`/`.nav-menu`/`.nav-link`/`.logo` continuam
   intactos para o header horizontal. */
.bottom-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: var(--fb-color-surface-base);
    border-top: 1px solid var(--fb-color-border);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.bottom-nav-item {
    min-width: 0;
}

.bottom-nav-link span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--fb-bottom-nav-height);
    padding: 8px 4px 6px;
    font-family: var(--fb-font-family);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--fb-color-text-secondary);
    border-top: 2px solid transparent;
}

.bottom-nav-link svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.bottom-nav-link:hover {
    color: var(--fb-color-text-primary);
}

.bottom-nav-link.active {
    color: var(--fb-color-accent);
    font-weight: 700;
    border-top-color: var(--fb-color-accent);
}

@media (max-width: 767px) {
    .bottom-nav {
        display: block;
    }

    /* Evita que a barra fixa cubra o rodapé/conteúdo final da página. */
    body {
        padding-bottom: calc(var(--fb-bottom-nav-height) + env(safe-area-inset-bottom, 0));
    }
}

/* ========== Main Content ========== */
.main-content {
    min-height: calc(100vh - 300px);
}

/* ========== Search Form ========== */
.search-input-wrapper {
    position: relative;
    display: flex;
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-full);
    overflow: hidden;
    box-shadow: var(--fb-shadow-rest);
}

.search-input {
    flex: 1;
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    font-family: var(--fb-font-family);
    font-size: 1rem;
    color: var(--fb-color-text-primary);
    background: transparent;
    outline: none;
}

.search-button {
    background: var(--fb-color-accent);
    color: var(--fb-color-accent-contrast);
    border: none;
    padding: 0 var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
}

.search-button:hover {
    opacity: 0.85;
}

/* ========== Buttons ========== */
.btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.5;
}

.btn-primary {
    background: var(--fb-color-accent);
    color: var(--fb-color-accent-contrast);
}

.btn-primary:hover {
    background: var(--fb-color-accent);
    color: var(--fb-color-accent-contrast);
    transform: translateY(-1px);
    box-shadow: var(--fb-shadow-rest);
}

.btn-secondary {
    background: var(--fb-color-surface-base);
    color: var(--fb-color-text-primary);
    border: 1px solid var(--fb-color-border);
}

.btn-secondary:hover {
    background: var(--fb-color-surface-elevated);
    border-color: var(--fb-color-text-secondary);
    transform: translateY(-1px);
    box-shadow: var(--fb-shadow-rest);
}

.btn-success {
    background: var(--fb-color-success);
    color: var(--fb-color-accent-contrast);
}

.btn-success:hover {
    filter: brightness(1.1);
    color: var(--fb-color-accent-contrast);
}

/* ========== Buttons (redesigned scope — Story 1.5) ==========
   Modificador aditivo, mesmo padrão de .section--redesigned. Migra
   .btn/.btn-primary/.btn-secondary para tokens --fb-* SEM tocar as regras
   base acima (472-529), que permanecem compartilhadas com
   404.php/contato.php/jogos.php/comparar.php (ainda não migradas). Aplicado
   por enquanto só às 3 instâncias de views/times.php; reutilizável verbatim
   pelas outras páginas quando suas próprias histórias migrarem. Botão
   primário usa preenchimento sólido `--fb-color-accent` (Task 3 do
   redesign, 2026-09-29: separação de `ink` estrutural vs. ações -- botões
   de ação migraram de `--fb-color-ink` para `--fb-color-accent`, mesmo
   vocabulário de .search-button acima); secundário segue o padrão de borda
   que escurece para `--fb-color-text-primary` no hover, já usado em
   quick-nav-card/efemeride-card. */
.btn--redesigned {
    border-radius: var(--fb-radius-md);
}

.btn-primary--redesigned {
    background: var(--fb-color-accent);
    color: var(--fb-color-accent-contrast);
}

.btn-primary--redesigned:hover {
    background: var(--fb-color-text-primary);
    color: var(--fb-color-accent-contrast);
    transform: translateY(-1px);
    box-shadow: var(--fb-shadow-hover);
}

.btn-secondary--redesigned {
    background: var(--fb-color-surface-base);
    color: var(--fb-color-text-primary);
    border: 1px solid var(--fb-color-border);
}

.btn-secondary--redesigned:hover {
    background: var(--fb-color-surface-elevated);
    border-color: var(--fb-color-text-primary);
    color: var(--fb-color-text-primary);
    transform: translateY(-1px);
    box-shadow: var(--fb-shadow-hover);
}

/* Story 12.1: :focus-visible seguindo o mesmo padrão de .match-card (outline
   2px sólido em --fb-color-accent, offset 2px, radius casado com o do
   próprio botão). Nenhum dos 3 seletores tinha indicador de foco além do
   padrão do navegador. */
.btn--redesigned:focus-visible,
.btn-primary--redesigned:focus-visible,
.btn-secondary--redesigned:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-md);
}

/* ========== Section ========== */
.section {
    padding: var(--spacing-2xl) 0;
}

.section.bg-light {
    background: var(--fb-color-surface-elevated);
}

.section-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--fb-color-text-primary);
}

/* Títulos de seção no registro display (spec §4.2) */
.section-title {
    font-family: var(--fb-font-display);
    font-weight: var(--fb-display-weight);
    letter-spacing: var(--fb-display-tracking);
    text-transform: uppercase;
}

/* ========== Section (redesigned scope — Stories 1.2/1.3) ==========
   Modificador aditivo. Story 1.2 aplicou-o às 2 <section> em escopo
   naquela história ("Melhores Times do Mês", "Navegação Rápida"); Story
   1.3 passou a aplicá-lo também às 4 <section> em escopo de views/jogo.php
   ("Sobre a Partida", "Gols", "Escalações", "Arbitragem"). A base .section/
   .section.bg-light/.section-title/.section-subtitle logo acima foram
   migradas para tokens --fb-* na Task 3 do redesign (2026-09-29) -- o
   motivo original para mantê-las em tokens legados (o `body` nunca
   migrado, permanecendo com fundo estático claro) deixou de existir desde
   que `body` passou a usar --fb-color-surface-base/--fb-color-text-primary
   (Story 1.1/commit dd3000c, tema escuro por padrão). Migrar em-lugar
   agora é seguro; o modificador aditivo --redesigned abaixo permanece só
   por não haver motivo pra removê-lo, não porque a base ainda dependa
   dele para ficar legível no escuro. */
.section--redesigned {
    background: var(--fb-color-surface-base);
}

.section--redesigned.bg-light {
    background: var(--fb-color-surface-elevated);
}

.section--redesigned .section-title {
    font-family: var(--fb-font-family);
    color: var(--fb-color-text-primary);
}

/* ========== Page Title / Subtitle (redesigned scope — Story 1.5) ==========
   .page-title/.page-subtitle são consumidas SEM estilo algum por
   buscar.php/campeonatos.php/contato.php/jogos.php/privacidade.php/
   sobre.php (7 páginas ao todo, incluindo times.php). Só os modificadores
   --redesigned recebem regras aqui — as classes base continuam
   propositalmente sem CSS, para não afetar as 6 páginas ainda não
   migradas. Aplicar `.page-title--redesigned`/`.page-subtitle--redesigned`
   a essas páginas quando suas próprias histórias migrarem. */
.page-title--redesigned {
    font-family: var(--fb-font-family);
    font-size: 2rem;
    font-weight: var(--fb-display-sm-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-sm-tracking);
    color: var(--fb-color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.page-subtitle--redesigned {
    font-family: var(--fb-font-family);
    color: var(--fb-color-text-secondary);
}

/* ========== Jogos Grid ========== */
.jogos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.jogo-card {
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: var(--transition);
    display: block;
    color: var(--fb-color-text-primary);
}

.jogo-card:hover {
    box-shadow: var(--fb-shadow-rest);
    transform: translateY(-2px);
}

/* ========== Jogo Card (redesigned scope — Story 1.5) ==========
   Modificador aditivo, mesmo padrão de .section--redesigned. Story 1.5
   aplica esta classe só em views/time.php ("Últimos Jogos"/"Próximos
   Jogos"); .jogo-card base acima e templates/partials/jogo_card.php (cujo
   <style> embutido também usa tokens --fb-* desde a Task 3) já são
   compartilhadas com home.php/jogos.php nos mesmos tokens -- o modificador
   aditivo permanece só por não haver motivo pra removê-lo. */
.jogos-lista--redesigned .jogo-card {
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-lg);
    color: var(--fb-color-text-primary);
    box-shadow: var(--fb-shadow-rest);
}

.jogos-lista--redesigned .jogo-card:hover {
    box-shadow: var(--fb-shadow-hover);
    transform: translateY(-2px);
}

/* ========== Lista de jogos (redesign fase 1, spec §5.2) ==========
   Linha densa por jogo (templates/partials/jogo_linha.php), agrupada por
   campeonato. Alvo de toque ≥ 44px; nomes truncam com reticências para
   nunca empurrar o placar; barra de confronto = fio de 4px (cor de clube
   é conteúdo, o resumo textual fica em .sr-only). */
.jogos-grupo + .jogos-grupo {
    margin-top: var(--fb-space-md);
}

.jogos-grupo-titulo {
    margin: 0;
    padding: 8px 12px;
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    background: var(--fb-color-surface-elevated);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-md) var(--fb-radius-md) 0 0;
}

.jogos-lista-agrupada {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--fb-color-border);
    border-top: 0;
    border-radius: 0 0 var(--fb-radius-md) var(--fb-radius-md);
}

.jogos-lista-agrupada > li + li {
    border-top: 1px solid var(--fb-color-border);
}

.jogo-linha {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas:
        "tempo times placar"
        "tempo h2h   h2h";
    column-gap: 12px;
    row-gap: 6px;
    align-items: center;
    min-height: 56px;
    padding: 8px 12px;
    color: var(--fb-color-text-primary);
    text-decoration: none;
}

.jogo-linha:hover {
    color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-elevated);
}

.jogo-linha-tempo {
    grid-area: tempo;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fb-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.jogo-linha-tempo.is-ao-vivo {
    color: var(--fb-color-accent);
    font-weight: 700;
}

.jogo-linha-data {
    font-size: 12px;
    font-weight: 500;
}

.jogo-linha-times {
    grid-area: times;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.jogo-linha-time {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.3;
}

.jogo-linha-time.is-destaque {
    font-weight: 700;
}

.jogo-linha-escudo {
    flex: none;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.jogo-linha-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jogo-linha-placar {
    grid-area: placar;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 1.5em;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    color: var(--fb-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.jogo-linha-placar .is-vencedor {
    color: var(--fb-color-text-primary);
    font-weight: 800;
}

.jogo-linha-h2h {
    grid-area: h2h;
    display: flex;
    gap: 1px;
    height: 4px;
    border-radius: 2px;
    overflow: hidden;
}

/* ========== Home (redesign fase 1, spec §5.3) ==========
   Celular: jogos → anúncio → efemérides (carrossel) → em alta.
   ≥1024px: jogos em 2/3; anúncio, efemérides (lista) e em alta no trilho 1/3. */
.home-layout {
    display: grid;
    gap: var(--fb-space-lg);
    padding-block: var(--fb-space-md) var(--fb-space-xl);
}

.home-h1 {
    margin: 0 0 var(--fb-space-xs);
    font-family: var(--fb-font-family);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fb-color-text-secondary);
}

.home-secao-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fb-space-sm);
    margin-bottom: var(--fb-space-sm);
}

.home-secao-head .section-title {
    margin: 0;
}

.home-layout .section-title {
    font-size: 1.375rem;
    margin-bottom: var(--fb-space-sm);
}

.link-ver-todos {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fb-color-accent);
}

.link-ver-todos:hover {
    color: var(--fb-color-accent);
    text-decoration: underline;
}

.efem-rail {
    display: flex;
    gap: var(--fb-space-sm);
    /* Padding em vez de 0 nas laterais: overflow-x: auto cortava o anel de
       foco (offset de 2px) do primeiro/último card (item 6, review final).
       Margem negativa correspondente mantém o alinhamento com o título da
       seção acima, que não tem esse padding. */
    margin: 0 -4px;
    padding: 4px 4px var(--fb-space-xs);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}

.efem-rail > li {
    flex: 0 0 220px;
    scroll-snap-align: start;
}

.efem-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 12px;
    color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-elevated);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-md);
}

.efem-item:hover {
    color: var(--fb-color-text-primary);
    border-color: var(--fb-color-text-secondary);
}

.efem-ano {
    font-family: var(--fb-font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.efem-placar {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.efem-placar img {
    flex: none;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.efem-camp {
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
}

.em-alta-lista {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-md);
}

.em-alta-lista > li + li {
    border-top: 1px solid var(--fb-color-border);
}

.em-alta-item {
    display: grid;
    grid-template-columns: 20px 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 12px;
    color: var(--fb-color-text-primary);
}

.em-alta-item:hover {
    color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-elevated);
}

.em-alta-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.em-alta-pos {
    font-size: 13px;
    font-weight: 700;
    color: var(--fb-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.em-alta-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.em-alta-nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.em-alta-contexto {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.em-alta-valor {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 1024px) {
    .home-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        grid-template-areas:
            "jogos trilho"
            "fim   fim";
        align-items: start;
        column-gap: var(--fb-space-xl);
    }

    .home-jogos { grid-area: jogos; }
    .home-ad-fim { grid-area: fim; }

    /* Trilho: anúncio + efemérides + em alta em coluna única (item 1,
       review final) -- grid-area própria em vez de 3 areas empilhadas na
       mesma linha de .home-jogos, pra altura do trilho não mais depender
       da altura da lista de jogos. Mesmo gap que .home-layout usava entre
       essas linhas (var(--fb-space-lg)). */
    .home-trilho {
        grid-area: trilho;
        display: flex;
        flex-direction: column;
        gap: var(--fb-space-lg);
        min-width: 0;
    }

    .efem-rail {
        flex-direction: column;
        overflow: visible;
        scroll-snap-type: none;
    }

    .efem-rail > li {
        flex: none;
    }
}

/* ========== Match Card (Story 4.2 — "Jogos Relacionados") ==========
   Componente novo e aditivo, distinto de .jogo-card (reservada). Usa só
   tokens --fb-*: escudo + nome de cada time, placar central em tipografia
   display ("A realizar" em data-label quando o jogo ainda não ocorreu),
   meta-linha (competição + data) em data-label. Cartão inteiro clicável,
   hover levanta (translateY(-2px) + sombra de destaque). */
.match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--fb-space-md);
}

.match-card {
    display: block;
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-lg);
    padding: var(--fb-space-card-padding);
    box-shadow: var(--fb-shadow-rest);
    color: var(--fb-color-text-primary);
    transition: box-shadow .2s ease, transform .2s ease;
}

.match-card:hover {
    box-shadow: var(--fb-shadow-hover);
    transform: translateY(-2px);
}

.match-card:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-lg);
}

.match-card-meta {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--fb-space-sm);
    text-align: center;
}

.match-card-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--fb-space-sm);
}

.match-card-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fb-space-xs);
    text-align: center;
    min-width: 0;
}

.match-card-escudo {
    object-fit: contain;
}

.match-card-time-nome {
    font-family: var(--fb-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fb-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.match-card-placar {
    font-family: var(--fb-font-family);
    font-size: 1.5rem;
    font-weight: var(--fb-display-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
    text-align: center;
    white-space: nowrap;
}

.match-card-status {
    display: inline-block;
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
}

/* ========== Edições Relacionadas (Story 4.2 — Campeonato "Outras Edições") ==========
   Links reais (não o <select> existente), reaproveitando o vocabulário de
   borda/hover já usado em inputs e no language-selector — nunca uma cor. */
.edicoes-relacionadas-lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--fb-space-sm);
    padding: 0;
    margin: 0;
}

.edicao-relacionada-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: var(--fb-color-surface-elevated);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-sm);
    padding: var(--fb-space-xs) var(--fb-space-md);
    color: var(--fb-color-text-primary);
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    transition: border-color .2s ease, background-color .2s ease;
}

.edicao-relacionada-link:hover {
    border-color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-base);
}

.edicao-relacionada-link:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-sm);
}

/* ========== Confronto Direto Card (Story 4.3 — perfil de clube expandido) ==========
   .stack-bar/.stack-seg/.stack-legend/.legend-item/.legend-swatch/.form-*
   eram estilos page-scoped dentro do <style> de views/comparar.php; movidos
   aqui verbatim porque templates/partials/confronto_direto_card.php agora
   os reaproveita tanto no modo 'full' (comparar.php) quanto no modo
   'teaser' (Principais Rivais, views/time.php) — nenhuma duplicação de CSS
   entre os dois consumidores. As classes .matchup-* (prefixo), .score-label,
   .total-games e .empty-message do modo 'full' permanecem page-scoped em
   comparar.php (não fazem parte do componente reutilizável). */
.stack-bar {
    display: flex;
    width: 100%;
    height: 30px;
    border-radius: var(--fb-radius-md);
    overflow: hidden;
    border: 1px solid var(--fb-color-border);
    margin-top: var(--spacing-sm);
}

.stack-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.stack-legend {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
    font-size: 0.8125rem;
    color: var(--fb-color-text-secondary);
    flex-wrap: wrap;
    justify-content: center;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-item b {
    color: var(--fb-color-text-primary);
    font-weight: 800;
}

.legend-swatch {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Forma Recente */
.form-block {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--fb-color-border);
    width: 100%;
}

.form-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
}

.form-arrow {
    text-transform: none;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0;
    /* Sem opacity: reduzir um texto já em text-secondary deixava o
       contraste abaixo de 4,5:1 (achado do audit visual da fase 4 --
       jogo-pre e comparar-par, que também usa .form-block). */
    color: var(--fb-color-text-secondary);
}

.form-strip {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.form-dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.35);
}

/* Histórico de Confrontos (Story 13.2/FR34) — lista de 5 confrontos mais
   recentes, aditiva ao modo 'full' do confronto-direto-card. Só renderiza
   quando o chamador passa $historico (só views/jogo.php passa; comparar.php
   nunca passa, então seu HTML segue byte-a-byte idêntico). Cada linha:
   data, placar linkando para o jogo (seta sublinhada), campeonato linkando
   para a edição (sublinhado pontilhado) — DESIGN.md
   components.confronto-direto-card.history-row-link-jogo/-campeonato. */
.historico-block {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--fb-color-border);
    width: 100%;
}

.historico-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 800;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.historico-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.historico-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 6px 0;
    border-bottom: 1px solid var(--fb-color-border);
    font-family: var(--fb-font-family);
}

.historico-row:last-child {
    border-bottom: none;
}

.historico-data {
    flex: 0 0 auto;
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* min-height/display:flex nos dois links (achado do audit visual da fase 4):
   só .historico-jogo-link/.historico-camp-link ficavam abaixo de 44px no
   celular -- exclusivos de views/jogo.php (comparar.php nunca passa
   $historico), então não muda o layout de /comparar. */
.historico-jogo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
    text-decoration: underline;
}

.historico-arrow {
    display: inline-block;
    margin-left: 2px;
}

.historico-camp-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    flex: 0 0 auto;
    max-width: 100%;
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    text-decoration: underline dotted;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========== Confronto Direto Card — variante teaser (Story 4.3) ==========
   Usada só pela seção "Principais Rivais" do perfil de clube. Container
   com os tokens do componente confronto-direto-card do DESIGN.md
   (background/border/radius/padding/shadow); reaproveita .stack-bar/
   .stack-seg acima para o retrospecto — sem Forma Recente (ver Design
   Notes da spec: o teaser é um ponteiro para o comparador, não um
   dashboard de dados). Cartão inteiro clicável, mesmo padrão hover/focus
   de .match-card. */
.confronto-teaser-card {
    display: block;
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-lg);
    padding: var(--fb-space-card-padding-lg);
    box-shadow: var(--fb-shadow-rest);
    color: var(--fb-color-text-primary);
    transition: box-shadow .2s ease, transform .2s ease;
}

.confronto-teaser-card:hover {
    box-shadow: var(--fb-shadow-hover);
    transform: translateY(-2px);
}

.confronto-teaser-card:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-lg);
}

.confronto-teaser-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fb-space-sm);
    margin-bottom: var(--fb-space-sm);
}

.confronto-teaser-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fb-space-xs);
    text-align: center;
    min-width: 0;
    flex: 1;
}

.confronto-teaser-escudo {
    object-fit: contain;
}

.confronto-teaser-nome {
    font-family: var(--fb-font-family);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fb-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.confronto-teaser-x {
    font-family: var(--fb-font-family);
    color: var(--fb-color-text-secondary);
    flex-shrink: 0;
}

.confronto-teaser-total {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    text-align: center;
    color: var(--fb-color-text-secondary);
    margin-top: var(--fb-space-sm);
}

/* ========== Forma Timeline (Story 13.2/FR34-35 — novo partial compartilhado,
   templates/partials/forma_timeline.php, também usado pelas Stories
   13.3/13.6) ==========
   SVG polyline sobre 3 bandas horizontais fixas (Vitória/Empate/Derrota no
   modo 'geral'; Vitória-{timeA}/Empate/Vitória-{timeB} no modo 'confronto'
   — DESIGN.md components.forma-timeline). vector-effect:non-scaling-stroke
   é obrigatório (evita o efeito "ribbon" grosso ao esticar viewBox 0 0 100
   100 sobre um contêiner largo). Pontos e rótulos usam a mesma coordenada X
   centrada por segmento ((i+0.5)/n * 100%) para permanecerem alinhados
   entre o <svg> (posicionamento percentual) e o grid de rótulos abaixo
   (colunas iguais) — rótulo de placar+adversário sempre visível, nunca
   dependente de hover/tooltip (Accessibility Floor). */
.tl-wrap {
    width: 100%;
    /* Abaixo de ~600px a janela de 10 jogos não cabe legível: o componente
       rola dentro de si, nunca a página (spec §5.4). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 599px) {
    .tl-plot,
    .tl-labels {
        min-width: 560px;
    }
}

.tl-empty {
    color: var(--fb-color-text-secondary);
    font-size: 0.875rem;
    text-align: center;
    margin: 0;
    font-family: var(--fb-font-family);
}

.tl-plot {
    position: relative;
    height: 150px;
    margin-bottom: var(--spacing-sm);
}

.tl-band {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    border-top: 1px dashed var(--fb-color-border);
}

.tl-band-vitoria {
    top: 18%;
}

.tl-band-empate {
    top: 50%;
    border-top-style: solid;
}

.tl-band-derrota {
    top: 82%;
}

.tl-band-tag {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    background: var(--fb-color-surface-base);
    padding-right: 6px;
    transform: translateY(-50%);
    width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Escudo do clube no lugar do rótulo de texto (modo 'confronto', quando o
   clube tem escudo cadastrado) -- nunca recorte circular, mesmo padrão
   sitewide já estabelecido (object-fit:contain + rounded.sm). */
.tl-band-crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    transform: translateY(-50%);
    background: var(--fb-color-surface-base);
    border-radius: var(--fb-radius-sm);
    padding: 2px;
}

.tl-svg {
    position: absolute;
    top: 0;
    left: 96px;
    width: calc(100% - 96px);
    height: 100%;
    overflow: visible;
}

.tl-line {
    fill: none;
    stroke: var(--fb-color-text-secondary);
    stroke-opacity: .55;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.tl-points {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 96px;
    right: 0;
}

.tl-point {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--fb-color-surface-base);
    box-shadow: 0 0 0 1.5px var(--fb-color-border);
    transform: translate(-50%, -50%);
}

.tl-labels {
    display: grid;
}

.tl-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 0 2px;
    min-width: 0;
}

.tl-label-score {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 44px;
    min-height: 44px;
    text-decoration: none;
}

.tl-label-score:hover .tl-label-score-num {
    text-decoration: underline;
}

.tl-label-crest {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.tl-label-score-num {
    font-family: var(--fb-font-family);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.tl-label-date {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    white-space: nowrap;
}

.tl-label-sub {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.tl-label-meta {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    color: var(--fb-color-text-secondary);
    opacity: 0.75;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* ========== Forma Dots Compacta (Story 13.6/FR37 — novo partial
   compartilhado, templates/partials/forma_dots_compacta.php, resultado de
   Clube em buscar.php). Variante de ponto do forma-timeline (paleta V/E/D
   genérica, mesmos tokens de .tl-point), sem SVG/bandas/labels -- só uma
   faixa compacta de pontos, prefixo "fd-" pra não colidir com .form-dot
   (Story 4.3, confronto-direto-card, um componente diferente e maior). ========== */
.fd-strip {
    display: flex;
    gap: 4px;
}

.fd-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--fb-color-border);
    flex-shrink: 0;
}

/* ========== Benchmark Bar (Story 13.3/FR35 — novo partial compartilhado,
   templates/partials/benchmark_bar.php, também usado pela Story 13.5 em
   edicao-dashboard-panel) ==========
   Barra dupla "entidade em foco vs. referência", trilha dividida ao centro
   (DESIGN.md components.benchmark-bar) — reaproveita byte-a-byte o padrão
   visual já usado em "Estatísticas Gerais" do Comparador
   (mockups/key-time.html:196-232/486-518). Cada metade preenche a partir do
   centro, proporcional à participação de cada valor na soma dos dois. */
.bmk-wrap {
    width: 100%;
}

.bmk-label {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    text-align: center;
    margin-bottom: var(--fb-space-sm);
}

.bmk-side-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--fb-font-family);
    font-size: 12px; /* era 10px: abaixo do mínimo de acessibilidade (spec §7) */
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--fb-space-xs);
}

.bmk-row {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: center;
    gap: var(--fb-space-sm);
}

.bmk-val {
    font-family: var(--fb-font-family);
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
}

.bmk-val-foco {
    text-align: right;
}

.bmk-val-referencia {
    text-align: left;
}

.bmk-track {
    display: flex;
    width: 100%;
    height: 7px;
    background: var(--fb-color-surface-elevated);
    border-radius: 4px;
    overflow: hidden;
}

.bmk-half {
    flex: 1;
    display: flex;
}

.bmk-half-foco {
    justify-content: flex-end;
}

.bmk-half-referencia {
    justify-content: flex-start;
}

.bmk-fill {
    height: 100%;
}

.bmk-fill-foco {
    background: var(--fb-color-text-primary);
}

.bmk-fill-referencia {
    background: var(--fb-color-neutral-draw);
}

.bmk-sep {
    width: 2px;
    background: var(--fb-color-surface-base);
    z-index: 1;
}

/* ========== Painel da Edição (Story 13.5 — campeonato.php, "Painel da
   Edição", reposicionado após Classificação/Jogos por pedido do usuário;
   DESIGN.md:138-150 componentes.edicao-dashboard-panel) ==========
   6 blocos independentes, cada um omitido (nunca vazio/quebrado) quando
   falta dado: (1) tendência de gols por rodada (Chart.js) + linha de
   referência da mediana do site; (2) comparação com outras edições do
   mesmo campeonato; (3) benchmark vs. mediana do site (reaproveita .bmk-*
   acima); (4) sequência atual do líder; (5) maior goleada da edição vs.
   histórica do campeonato; (6) artilheiros (top 5, compacto). Só tokens
   --fb-* já existentes -- nenhuma classe do mockup (dash-grid/dash-card/
   table.hist/stat-value-large/etc.) existia em style.css antes desta
   Story; nomes prefixados com "edicao-dash-" pra não colidir com nada. */
.edicao-dashboard-panel {
    display: flex;
    flex-direction: column;
    gap: var(--fb-space-lg);
}

.edicao-dash-col {
    display: flex;
    flex-direction: column;
    gap: var(--fb-space-lg);
}

.edicao-dash-card {
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-lg);
    box-shadow: var(--fb-shadow-rest);
    padding: var(--fb-space-lg);
}

.edicao-dash-card-title {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--fb-space-md);
}

/* Ajuste pós-review: legenda sempre visível do ícone de acima/abaixo da
   mediana (Bloco 2) -- o aria-label/title do SVG já cobre leitor de tela,
   mas um visitante em touch/sem hover não tinha como descobrir o que a
   seta significa. */
.edicao-dash-card-subtitle {
    font-family: var(--fb-font-family);
    font-size: 0.75rem;
    color: var(--fb-color-text-secondary);
    margin-top: calc(-1 * var(--fb-space-sm));
    margin-bottom: var(--fb-space-md);
}

/* Bloco 1: gráfico de tendência de gols por rodada (Chart.js via CDN,
   mesmo padrão de views/campeonato-historico.php). trend-line-gols do
   DESIGN.md ({colors.text-primary}, solid) é aplicado via JS na view
   (Chart.js não lê custom properties de CSS sozinho). */
.edicao-dash-chart-container {
    position: relative;
    height: 220px;
}

/* Bloco 2: comparação com outras edições (comparison-table-typography =
   {typography.data}: tabular-nums; comparison-table-current-row =
   {colors.surface-elevated}) */
.edicao-dash-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fb-font-family);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.edicao-dash-table th {
    text-align: left;
    color: var(--fb-color-text-secondary);
    font-weight: var(--fb-data-label-weight);
    font-size: var(--fb-data-label-size);
    text-transform: uppercase;
    letter-spacing: var(--fb-data-label-tracking);
    padding-bottom: var(--fb-space-sm);
    border-bottom: 1px solid var(--fb-color-border);
}

.edicao-dash-table td {
    padding: var(--fb-space-sm) var(--fb-space-xs);
    border-bottom: 1px solid var(--fb-color-border);
    color: var(--fb-color-text-primary);
}

.edicao-dash-table tr.edicao-dash-linha-atual td {
    font-weight: 700;
    background: var(--fb-color-surface-elevated);
}

/* Ajuste pós-review: nome do campeão vira link pra página do clube. */
/* Alvo de toque (fase 3, auditoria visual) -- link de texto corrido virou
   um alvo isolado dentro da célula (nenhum outro texto no entorno), então
   precisa dos 44px mínimos; inline-flex + min-height resolve sem mexer na
   grade/colunas da tabela, só a altura da própria célula no celular. */
.edicao-dash-campeao-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.edicao-dash-campeao-link:hover {
    text-decoration: underline;
}

/* Ajuste pós-review: ícone de acima/abaixo da mediana do site ao lado do
   valor de gols/jogo -- mesmo vocabulário de cor V/E/D (success/danger)
   já usado no resto do site pra indicadores binários. */
.edicao-dash-indicador {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.edicao-dash-indicador-acima {
    color: var(--fb-color-success);
}

.edicao-dash-indicador-abaixo {
    color: var(--fb-color-danger);
}

/* Bloco 4: sequência atual do líder (lider-sequencia-typography =
   {typography.display}, mesmo padrão de registro editorial usado em
   números grandes de destaque pela spec) */
.edicao-dash-stat-value-large {
    font-family: var(--fb-font-family);
    font-size: 2.25rem;
    font-weight: var(--fb-display-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
}

.edicao-dash-stat-caption {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
}

.edicao-dash-leader-info {
    display: flex;
    align-items: center;
    gap: var(--fb-space-sm);
    margin-top: var(--fb-space-sm);
    font-family: var(--fb-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fb-color-text-primary);
}

.edicao-dash-leader-escudo {
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
}

/* Bloco 5: maior goleada da edição vs. histórica do campeonato
   (recorde-grid-background = {colors.surface-elevated},
   recorde-grid-radius = {rounded.md}) */
.edicao-dash-recorde-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--fb-space-md);
    text-align: center;
}

.edicao-dash-recorde-col {
    display: block;
    padding: var(--fb-space-md) var(--fb-space-sm);
    border-radius: var(--fb-radius-md);
    background: var(--fb-color-surface-elevated);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

/* Ajuste pós-review: virou <a> pro jogo da goleada -- feedback de hover
   consistente com o resto do site pra elementos clicáveis. */
.edicao-dash-recorde-col:hover {
    box-shadow: var(--fb-shadow-hover);
    transform: translateY(-2px);
}

.edicao-dash-recorde-col:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    border-radius: var(--fb-radius-md);
}

.edicao-dash-recorde-label {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    margin-bottom: var(--fb-space-xs);
}

.edicao-dash-recorde-valor {
    font-family: var(--fb-font-family);
    font-size: 1.5rem;
    font-weight: var(--fb-display-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-tracking);
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
}

.edicao-dash-recorde-meta {
    font-family: var(--fb-font-family);
    font-size: 0.75rem;
    color: var(--fb-color-text-secondary);
    margin-top: var(--fb-space-xs);
}

/* Bloco 6 (ajuste pós-review): artilheiros, versão compacta (top 5) da
   seção "Artilharia" completa mais abaixo na página -- {typography.data},
   mesma densidade da tabela de comparação de edições. */
.edicao-dash-scorers-list {
    display: flex;
    flex-direction: column;
    gap: var(--fb-space-xs);
}

.edicao-dash-scorer-row {
    display: flex;
    align-items: center;
    gap: var(--fb-space-sm);
    font-family: var(--fb-font-family);
    font-size: 0.8125rem;
    padding: var(--fb-space-xs) 0;
}

.edicao-dash-scorer-row:not(:last-child) {
    border-bottom: 1px solid var(--fb-color-border);
}

.edicao-dash-scorer-pos {
    color: var(--fb-color-text-secondary);
    font-weight: var(--fb-data-label-weight);
    min-width: 22px;
}

.edicao-dash-scorer-nome {
    flex: 1;
    font-weight: 600;
    color: var(--fb-color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edicao-dash-scorer-gols {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--fb-color-text-primary);
}

@media (min-width: 900px) {
    .edicao-dashboard-panel {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

/* ========== Rivais Grid (Story 4.3 — perfil de clube, "Principais Rivais") ========== */
.rivais-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--fb-space-md);
}

.jogo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    color: var(--fb-color-text-secondary);
}

.jogo-campeonato {
    font-weight: 600;
}

.jogo-times {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--spacing-md);
    align-items: center;
}

.time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.time-escudo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.time-nome {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.jogo-placar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.jogo-placar .placar,
.jogo-placar .vs {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fb-color-text-primary);
}

.vs {
    color: var(--fb-color-text-secondary);
    font-weight: 400;
}

/* ========== Stats Grid ========== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.stat-card {
    background: var(--fb-color-surface-base);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--fb-color-accent);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--fb-color-text-secondary);
}

/* ========== Time Header ========== */
/* Texto/escudo fixos em branco de propósito (spec §4.1) -- .time-header
   renderiza sobre gradiente de cor do clube (inline, por página), que não
   reage a tema; um token --fb-* aqui mudaria com o tema e quebraria
   contraste sobre a cor real do clube. */
.time-header {
    color: #FFFFFF;
    padding: var(--spacing-2xl) 0;
}

.time-header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    text-align: center;
}

.time-escudo-grande {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: var(--fb-radius-sm);
    padding: var(--spacing-md);
}

.time-nome-principal {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.time-apelido {
    font-size: 1.125rem;
    opacity: 0.9;
}

.time-meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    opacity: 0.8;
}

/* ========== Time Header (redesigned scope — Story 1.5) ==========
   Modificador aditivo, mesmo padrão de .section--redesigned. Compartilhado
   por views/time.php e views/time-titulos.php (ambas aplicam a classe
   .time-header--redesigned); a base .time-header* acima permanece
   intocada. O fundo continua sendo o gradiente inline por clube
   (getHeaderGradientStyle, definido na view), nunca um token
   --fb-color-surface-* / --fb-color-ink — por isso o texto usa branco fixo
   (#FFFFFF), mesmo tratamento do campeao-panel (DESIGN.md: "color:
   '#FFFFFF'"), e não um token --fb-color-* reativo a dark mode, que
   inverteria contra um fundo que nunca é de fato "superfície". */
.time-header--redesigned {
    color: #FFFFFF;
}

.time-header--redesigned .time-escudo-grande {
    background: #FFFFFF;
    border-radius: var(--fb-radius-lg);
}

.time-header--redesigned .time-nome-principal {
    color: #FFFFFF;
}

.time-header--redesigned .time-apelido {
    color: #FFFFFF;
}

.time-header--redesigned .time-meta {
    color: #FFFFFF;
}

/* ========== Footer ==========
   Preenchimento sólido ink/ink-contrast (mesmo padrão usado no nav ativo
   e no cabeçalho de standings-table) — adapta automaticamente ao tema
   escuro/claro porque `--fb-color-ink`/`--fb-color-ink-contrast` se
   invertem via `:root[data-theme="light"]` (cookie site_theme, definido
   em templates/header.php). Estrutura e links preservados. */
.site-footer {
    background: var(--fb-color-ink);
    color: var(--fb-color-ink-contrast);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-title {
    font-family: var(--fb-font-family);
    font-size: 1.375rem;
    font-weight: var(--fb-display-sm-weight);
    font-family: var(--fb-font-display);
    letter-spacing: var(--fb-display-sm-tracking);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.footer-subtitle {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.footer-description {
    color: var(--fb-color-ink-contrast);
    opacity: .72;
    line-height: 1.6;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-width: 44px; /* alvo de toque 44×44 (spec §4.4): labels curtos ("Sobre",
                         "Jogos") ficam abaixo de 44px de largura só com o texto */
    min-height: 44px;
    color: var(--fb-color-ink-contrast);
    opacity: .72;
    transition: opacity .15s ease;
}

.footer-links a:hover {
    opacity: 1;
}

.social-links {
    display: flex;
    gap: var(--spacing-md);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* alvo de toque 44×44 (spec §4.4) — ícone 24×24 centralizado */
    height: 44px;
    color: var(--fb-color-ink-contrast);
    opacity: .72;
    transition: opacity .15s ease;
}

.social-links a:hover {
    opacity: 1;
}

.footer-links a:focus-visible,
.social-links a:focus-visible {
    outline: 2px solid var(--fb-color-accent);
    outline-offset: 2px;
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid var(--fb-color-border);
    padding-top: var(--spacing-lg);
    text-align: center;
    color: var(--fb-color-ink-contrast);
    opacity: .72;
    font-size: 0.875rem;
}

/* ========== Responsive - Tablet ========== */
@media (min-width: 768px) {
    .desktop-menu {
        display: flex;
    }

    .jogos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .time-header-content {
        flex-direction: row;
        text-align: left;
    }
}

/* ========== Responsive - Desktop ========== */
@media (min-width: 1024px) {
    .jogos-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .footer-content {
        grid-template-columns: 2fr repeat(4, 1fr);
    }
    
    .time-meta {
        flex-direction: row;
        gap: var(--spacing-lg);
    }
}

/* ========== Ad Slot (Story 2.1, FR8/AD-7) ==========
   Componente compartilhado multi-página (mesmo precedente de
   .match-card/.standings-table) — todo markup vem exclusivamente de
   templates/ads.php::renderAdSlot(). Largura/altura fixas (que evitam
   o CLS quando o adblock bloqueia o anúncio) são aplicadas inline por
   slot a partir do registro $AD_SLOTS; aqui só a aparência do
   componente, com tokens --fb-* (DESIGN.md components.ad-slot).
   Fundo usa --fb-color-surface-base (a mesma cor de fundo da própria
   página, não --fb-color-surface-elevated) — decisão do usuário: o
   placeholder deve se misturar ao fundo do tema atual (escuro no modo
   noturno, claro no modo dia), sinalizado só pela borda tracejada. */
.ad-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--fb-color-border);
    background: var(--fb-color-surface-base);
    border-radius: var(--fb-radius-md);
    margin: 0 auto;
    max-width: 100%;
    overflow: hidden;
}

.ad-slot-label {
    font-family: var(--fb-font-family);
    font-size: var(--fb-data-label-size);
    font-weight: var(--fb-data-label-weight);
    letter-spacing: var(--fb-data-label-tracking);
    text-transform: uppercase;
    color: var(--fb-color-text-secondary);
    text-align: center;
    padding: var(--fb-space-sm);
}

/* ========== Abas-âncora (redesign fase 2+, spec §5.8) ==========
   Fixas logo abaixo do header (também sticky). Rolam na horizontal se
   não couberem; a aba ativa usa o acento (UI). Seções-alvo recebem
   scroll-margin para não ficarem atrás de header + abas. */
.page-tabs {
    position: sticky;
    top: var(--fb-header-h);
    z-index: 90;
    background: var(--fb-color-surface-base);
    border-bottom: 1px solid var(--fb-color-border);
}

.page-tabs-lista {
    position: relative; /* offsetParent p/ o cálculo de scrollLeft em initPageTabs()
        — .page-tabs é sticky e por si só já é offsetParent válido, o que faz
        a.offsetLeft medir a partir dele em vez da lista que realmente rola. */
    display: flex;
    gap: var(--fb-space-xs);
    max-width: 1200px;
    margin: 0 auto;
    padding: 6px var(--fb-space-md);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}

.page-tabs-lista::-webkit-scrollbar {
    display: none;
}

.page-tabs-lista > li {
    flex: none;
}

.page-tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fb-color-text-secondary);
    background: var(--fb-color-surface-elevated);
    border-radius: var(--fb-radius-full);
}

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

.page-tab.is-active,
.page-tab.is-active:hover {
    color: var(--fb-color-accent-contrast);
    background: var(--fb-color-accent);
}

.secao-ancora {
    scroll-margin-top: calc(var(--fb-header-h) + 64px);
}

/* Review final da fase 2 (a11y): initSmoothScroll() foca a seção depois do
   scroll para o Tab continuar dali (WCAG 2.4.3). O foco é programático num
   container não-interativo, não uma navegação por teclado real — sem isso
   alguns navegadores desenham o anel de :focus-visible em volta da seção
   inteira. Controles reais continuam com o anel padrão (:focus-visible
   acima). */
.secao-ancora:focus {
    outline: none;
}

/* ========== Seletor de grupos (redesign fase 3) ==========
   Um grupo de jogos por vez (rodada/fase/data). Sem JS: <select> num
   form GET (?grupo=) + links anterior/próximo; com JS (initSeletorGrupos)
   a troca é instantânea e a URL é atualizada com replaceState. */
.grupos-nav {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: var(--fb-space-xs);
    align-items: center;
    margin-bottom: var(--fb-space-sm);
}

.grupos-nav .icon-btn {
    border: 1px solid var(--fb-color-border);
}

.grupos-nav .icon-btn[aria-disabled="true"] {
    opacity: .4;
    pointer-events: none;
}

.grupos-form {
    display: flex;
    gap: var(--fb-space-xs);
    min-width: 0;
}

.grupos-select {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--fb-color-text-primary);
    background: var(--fb-color-surface-elevated);
    border: 1px solid var(--fb-color-border);
    border-radius: var(--fb-radius-md);
}

/* "Ler mais" (redesign fase 2): texto inteiro no HTML; o JS recolhe em 3
   linhas e mostra o botão. Sem JS, o texto aparece inteiro. */
.ler-mais-texto.is-recolhido {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ler-mais-botao {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--fb-color-accent);
    background: none;
    border: 0;
    cursor: pointer;
}

.ler-mais-botao[hidden] {
    display: none;
}