/* ==========================================================================
   1. IMPORTAÇÃO DE FONTES & VARIÁVEIS (PIXEL PERFECT)
   ========================================================================== */

/* Fonte dos Nomes dos Times */
@font-face {
    font-family: 'Merchanto';
    src: url('/fonts/MerchantoBOLDRound.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Fonte do Placar e Números */
@font-face {
    font-family: 'VenusEnvyBold';
    src: url('/fonts/1fb0040257083856258ab168e7a9f62a.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
    /* Cores */
    --text-color: #ffffff;
    --text-shadow: none;
    --accent-color: #00d4ff;
    --chroma-key: #00ff00;
    --bg-dark: rgba(20, 20, 20, 0.95);
    --goal-anim-color: #00ff00;

    /* Fontes */
    --font-placar: 65px;
    --font-tempo: 27px;
    --font-time-nome: 44px;
    --font-family-jogadores: 'VenusEnvyBold', sans-serif;
    --font-family-titulos: 'Merchanto', sans-serif;

    /* Configurações Sidebars (Compartilhadas) */
    --sb-font-score: 24px;
    --sb-font-time: 11px;
    --sb-shield-size: 38px;
    --sb-anim-duration: 2s;

    /* Dimensões Fixas Overlay */
    --line-height-player: 65px;
    --escudo-size: 140px;
}

/* ==========================================================================
   2. RESET E ESTRUTURA RÍGIDA (1920x1080 FIXO COM ESCALA PROPORCIONAL)
   ========================================================================== */
html {
    font-size: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
}

#overlay-container {
    /* DIMENSÕES FIXAS DO OVERLAY */
    width: 1920px;
    height: 1080px;
    min-width: 1920px;
    min-height: 1080px;
    max-width: 1920px;
    max-height: 1080px;
    margin: 0;
    position: relative;
    background-size: cover;
    background-position: center top;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    /* Transform será aplicado via JS */
    transform-origin: center center;
    background-image: none !important;
}

/* CAMADA DE TINTA (OVERLAY TINT) */
#overlay-tint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-color: #000000; /* Garante preto */
    opacity: 0.5; /* <--- Padrão alterado de 0 para 0.5 */
    transition: background-color 0.5s, opacity 0.5s;
}

/* Ajuste Z-Index para garantir que o conteúdo fique acima da tinta */
#scoreboard-area, #content-area {
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   3. CABEÇALHO (PLACAR E TIMES)
   ========================================================================== */
#scoreboard-area {
    position: relative;
    width: 100%;
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: center; /* Mantém o .scoreboard-center no meio */
    /* gap: 0.5em; REMOVIDO pois não afeta absolute */
    padding: 22px 0 0 0; /* Simplificado */
    pointer-events: none;
}

/* --- TIMES E ESCUDOS (POSICIONAMENTO PADRÃO CORRIGIDO) --- */
.team-name {
    position: absolute;
    font-family: 'Merchanto', sans-serif;
    font-size: var(--font-time-nome);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 15;
    margin: 0;

    /* ABAIXADO: De 30px para 45px para alinhar o centro com o placar */
    top: 65px;
}

.team-shield {
    position: absolute;
    /* Define uma CAIXA QUADRADA base */
    width: var(--escudo-size);
    height: var(--escudo-size);

    object-fit: contain;
    object-position: center;

    z-index: 16;

    /* ABAIXADO: De 22px para 28px para pesar mais na linha */
    top: 28px;
}

/* --- CASA (Lado Esquerdo) --- */
/* Layout: [Nome] [Escudo] [Centro] */

#home-shield {
    /* Próximo ao placar (50% + metade do placar) */
    right: calc(50% + 110px);
}

#home-name {
    /* Afastado (50% + metade do placar + largura escudo + respiro) */
    right: calc(50% + 280px);
    text-align: right;
}

/* --- VISITANTE (Lado Direito) --- */
/* Layout: [Centro] [Escudo] [Nome] */

#away-shield {
    /* Próximo ao placar */
    left: calc(50% + 110px);
}

#away-name {
    /* Afastado */
    left: calc(50% + 280px);
    text-align: left;
}

/* --- CENTRO (Placar e Tempo) --- */
.scoreboard-center {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: -22px 0.5em 0 0.5em; /* Margem negativa fixa */
    min-width: 5em;
    padding-top: 22px;
    pointer-events: auto;
    z-index: 10;
}

.score-box {
    font-family: 'VenusEnvyBold', sans-serif;
    font-size: var(--font-placar);
    font-weight: normal;
    line-height: 1.4;
    text-shadow: none;
    white-space: nowrap;
    margin-bottom: 0;

    /* CORREÇÃO: Transforma em Flex para controlar a largura dos filhos */
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    min-width: 300px; /* Garante uma largura mínima segura */
}

.divisor {
    flex: 0 0 auto; /* Não cresce nem encolhe */
    margin: 0 0.2em;
    position: relative;
    top: -0.05em;
}

.timer-box {
    background-color: transparent;
    color: #fff;
    padding: 0;
    font-weight: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
}

.timer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

/* Texto de Status (FIM, INT, etc) */
#match-time {
    font-size: var(--font-tempo);
    transition: none !important; /* <- remove qualquer animação de tamanho/cor */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    line-height: 1;
}

.status-text {
    font-size: 13px !important; /* Tamanho fixo */
    color: #ccc;
    text-transform: uppercase;
    font-weight: normal;
}

.match-hour-text {
    font-size: 24px !important;
    color: #fff;
    font-family: 'VenusEnvyBold', sans-serif;
    letter-spacing: 1px;
}

/* Quadradinho de Acréscimo */
.added-time-box {
    background-color: rgba(255,255,255,0.1);
    margin-top: 3px;
    color: #fff;
    font-family: 'VenusEnvyBold', sans-serif;
    font-size: 16px;
    font-weight: normal;
    border-radius: 4px;
    line-height: 1;
    padding: 4px 6px 2px 6px;
    display: none;
}

/* Tags de Liga e Estádio */
.league-tag-bottom {
    margin-top: -10px;
    opacity: 0.8;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: normal;
    color: var(--text-color);

    /* Reserva espaço fixo mesmo vazio/oculto */
    display: block;
    height: 20px;          /* ajuste fino se quiser */
    line-height: 20px;
}

.stadium-tag-bottom {
    font-size: 13px;
    color: #ccc;
    text-transform: uppercase;
    margin-top: 2px;
    font-weight: normal;
    text-align: center;

    /* Reserva espaço fixo mesmo vazio/oculto */
    display: block;
    height: 16px;          /* ajuste fino se quiser */
    line-height: 16px;
}

.league-tag-top { display: none; }

/* ==========================================================================
   4. ÁREA DE CONTEÚDO (ESCALAÇÕES E CAM)
   ========================================================================== */
#content-area {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 95px 20px 95px; /* Convertido 5vw -> 95px */
    gap: 20px; /* Convertido 1vw -> ~20px */
    align-items: flex-start;
    margin-top: 20px;
    z-index: 5;
}

.lineup-box {
    width: 22%;
    min-width: 0;
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    margin-top: -18px; /* Ajuste fixo */
    pointer-events: auto;
}

.lineup-title {
    background-color: transparent;
    color: var(--accent-color);
    font-weight: normal;
    text-transform: uppercase;
    padding: 0.5em 0;
    font-size: 22px;
    margin: 0 0 0.5em 0;
    text-shadow: var(--text-shadow);
}

.home-lineup .lineup-title { text-align: left; }
.away-lineup .lineup-title { text-align: right; }

/* ==========================================================================
   5. LISTA DE JOGADORES (ITENS E NÚMEROS)
   ========================================================================== */
.players-list {
    padding: 0;
    list-style: none;
    margin: 0;
}

.player-item {
    height: var(--line-height-player);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    font-weight: normal;
    white-space: nowrap;
    text-shadow: var(--text-shadow);
}

.player-number {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
    font-family: 'VenusEnvyBold', sans-serif;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    height: 1.8em;
    border-radius: 4px;
    text-align: center;
    line-height: 1;
    margin: 0 0.5em;
    padding-top: 5px;
}

.captain-tag {
    color: #ffd700;
    font-weight: bold;
    font-size: 0.9em;
    margin: 0 4px;
}

.justify-end { justify-content: flex-end; }
.ms-2-em { margin-left: 0.5em; }
.me-2-em { margin-right: 0.5em; }

/* ==========================================================================
   6. NOMES E SUBSTITUIÇÕES
   ========================================================================== */
.name-wrapper {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.sub-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    width: max-content;
    max-width: none;
}

/* Jogador em Campo */
.player-in, .player-name-standard {
    font-family: var(--font-family-jogadores);
    font-size: var(--font-jogadores) !important;
    color: var(--text-color);
    margin-top: 8px; /* Fixo em px */
    opacity: 1;
    text-transform: uppercase;

    /* Flex para alinhar ícones na mesma linha */
    display: flex;
    align-items: center;
    gap: 5px;
}

.player-out {
    position: absolute;
    top: 100%;
    width: 100%;              /* <- volta a alinhar pela “régua” do titular */
    box-sizing: border-box;
    font-family: 'VenusEnvyBold', sans-serif;
    font-size: var(--font-substituido) !important;
    opacity: 0.5;
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

/* Alinhamentos específicos de Sub */
.home-lineup .player-out {
    left: 0;
    justify-content: flex-start;
}
.away-lineup .player-out {
    left: 0;                 /* <- ocupa 100% do sub-wrapper e alinha por justify-content */
    right: auto;
    justify-content: flex-end;
    text-align: right;
}

/* Ícone de setinha de troca */
.sub-icon {
    font-size: 0.8em;
    opacity: 0.7;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.home-lineup .sub-icon { margin-left: -3px !important; margin-right: 1px !important; }
.away-lineup .sub-icon { margin-right: -3px !important; margin-left: 1px !important; }

/* ==========================================================================
   7. EVENTOS E ÍCONES (GOLS, CARTÕES, TEMPO)
   ========================================================================== */

/* Container base dos ícones */
.event-icons-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
}

.event-icon-wrapper {
    display: inline-flex;
    align-items: center;
    margin: 0 4px;
    gap: 2px;
}

.event-icon {
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    position: relative;
}

/* Estilo Base do Tempo (Fallback) */
.event-time {
    font-family: 'VenusEnvyBold', sans-serif;
    font-weight: normal;
    color: #ccc;
    margin-left: 5px;
    margin-right: 3px;
}

/* --- CARTÕES DESENHADOS (PROPORCIONAIS EM EM) --- */
.icon-card {
    display: inline-block;
    /* Usando 'em', o tamanho obedece à fonte do pai (Player In ou Out) */
    width: 0.6em;
    height: 0.8em;
    border-radius: 0.05em;       /* Arredondamento também proporcional */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    vertical-align: text-bottom; /* Alinha melhor com a base do texto */
    margin: 0 0em;             /* Margem respira conforme o tamanho */
    transform: translateY(-0.05em); /* Pequeno ajuste vertical fino */
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Cores dos Cartões */
.card-yellow {
    background-color: #ffeb3b; /* Amarelo Padrão FIFA */
    border: 0px solid rgba(0,0,0,0.1); /* Bordazinha sutil pra dar contraste se o fundo for claro */
}

.card-red {
    background-color: #f44336; /* Vermelho Padrão */
    border: 0px solid rgba(0,0,0,0.1);
}

/* ---------------------------------------------------------
   CENÁRIO 1: JOGADOR EM CAMPO (Titular ou Substituto que entrou)
   --------------------------------------------------------- */

/* Margem lateral do bloco de ícones */
.player-in .event-icons-wrapper {
    margin: 0 6px;
}

/* --- BOLA DE GOL (EM CAMPO) --- */
.player-in .icon-goal {
    font-size: 0.8em;
    bottom: 2px;
}

/* --- TEMPO DO GOL (EM CAMPO) --- */
.player-in .event-time {
    font-size: 0.7rem;
    position: relative;
    bottom: 0px;
    margin-left: 4px;
    margin-right: 2px;
    color: #ffffff;
}

/* --- CARTÕES (EM CAMPO) --- */
.player-in .icon-card {
    font-size: 0.85em;
    bottom: 3px;
}

/* ---------------------------------------------------------
   CENÁRIO 2: JOGADOR QUE SAIU (Substituído)
   --------------------------------------------------------- */

/* Margem lateral menor */
.player-out .event-icons-wrapper {
    margin: 0 3px;
}

/* --- BOLA DE GOL (QUEM SAIU) --- */
.player-out .icon-goal {
    font-size: 0.8em;
    bottom: 1px;
}

/* --- TEMPO DO GOL (QUEM SAIU) --- */
.player-out .event-time {
    font-family: 'Merchanto', sans-serif;
    font-size: 0.7em;
    font-weight: normal;
    position: relative;
    bottom: 0px;
    margin-left: 2px;
    margin-right: 1px;
    color: #ccc;
}

/* --- CARTÕES (QUEM SAIU) --- */
.player-out .icon-card {
    font-size: 0.8em;
    bottom: 1px;
}

/* ==========================================================================
   8. TÉCNICOS
   ========================================================================== */
.coach-item {
    height: var(--line-height-player);
    display: flex;
    align-items: center;
    margin-top: 0.8em;
    font-weight: normal;
    text-shadow: var(--text-shadow);
}

.home-coach { justify-content: flex-start; }
.away-coach { justify-content: flex-end; }

.coach-number-box {
    min-width: 1.8em;
    height: 1.8em;
    margin: 0 0.5em;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    font-weight: normal;
    color: #ffffff;
    border: 0px solid rgba(255,255,255,0.3);
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
}

.coach-name-text {
    font-family: var(--font-family-jogadores);
    font-size: var(--font-jogadores);
    color: rgba(120, 120, 120, 1);
    font-weight: normal;
    text-transform: uppercase;
    padding-top: 7px;
}

.coach-box, .lineup-header, .coach-label, .coach-name { display: none; }

/* ==========================================================================
   9. WEBCAM E ESTATÍSTICAS
   ========================================================================== */
.webcam-slot-container {
    flex: 1;
    height: 560px; /* Altura fixa para a cam */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0;
    margin-top: 0;
    position: relative;
}

.webcam-frame {
    width: 100%;
    height: 100%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    overflow: hidden;
    border: 0px solid rgba(255,255,255,0.1);
}

.webcam-frame .text-muted {
    display: none;
    color: var(--chroma-key);
}

/* Área de Estatísticas */
#stats-area {
    position: absolute;
    top: 100%;
    margin-top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 710px;
    height: 280px;
    background: rgba(20, 20, 20, 1);
    border-radius: 12px;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 10px 25px;
    z-index: 25;
    gap: 0.5px;
}

.stat-row-moderno {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 2px solid rgba(255,255,255,0.05);
    padding: 3px 3px;
}

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

.stat-val {
    font-family: 'VenusEnvyBold', sans-serif;
    font-size: 22px; /* Convertido para px */
    color: #ffffff !important;
    width: 15%;
    text-align: center;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.stat-label {
    font-family: 'Merchanto', sans-serif;
    font-size: 22px; /* Convertido para px */
    color: rgba(100, 100, 100, 1);
    text-transform: uppercase;
    flex: 1;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
}

/* ==========================================================================
   10. ANIMAÇÕES
   ========================================================================== */
@keyframes blink-effect {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.blink-char {
    animation: blink-effect 2s ease-in-out infinite;
    font-weight: inherit;
    display: inline-block;
    will-change: opacity;
}

/* ==========================================================================
   11. ANIMAÇÃO DE GOL (PLACAR)
   ========================================================================== */

/* Transforma os spans do placar em containers de máscara */
#home-score, #away-score {
    /* CORREÇÃO: Usa flex: 1 para ocupar espaço igual, sem estourar */
    flex: 1;
    display: flex; /* Mantém flex para alinhar o dígito interno */
    position: relative;
    overflow: hidden;
    height: 1.4em;
    vertical-align: middle;
}

/* O número em si (antigo e novo) */
.score-digit {
    display: flex;
    /* Alinha no TOPO para não descer demais, mas com leve respiro */
    align-items: flex-start;
    padding-top: 0.1em;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    line-height: 1;
}

/* 1. Piscar (Alerta de Gol) */
.score-blink {
    animation: blink-score 0.15s ease-in-out 6 alternate; /* Pisca 3x (6 idas e voltas) */
    color: var(--accent-color); /* Pisca na cor ciano */
}

/* 2. Sair descendo (Antigo) */
.score-out-down {
    animation: slide-out-down 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* 3. Entrar descendo (Novo) */
.score-in-down {
    animation: slide-in-down 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes blink-score {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.3; transform: scale(1.1); }
}

@keyframes slide-out-down {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

@keyframes slide-in-down {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   12. LAYOUTS DE ESTATÍSTICAS (NOVO)
   ========================================================================== */

/* Layout Padrão (Centralizado) */
.stat-row-moderno.centered {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Layout Espelhado (Mirrored) */
.stat-row-moderno.mirrored {
    display: flex;
    justify-content: center; /* O gap central vai separar os lados */
    align-items: center;
    width: 100%;
}

/* Blocos laterais do layout espelhado */
.stat-side {
    display: flex;
    align-items: center;
    flex: 1; /* Ocupa o espaço disponível de cada lado */
    min-width: 0;
    gap: 15px; /* Distância entre Valor e Label dentro do bloco */
}

.stat-side.start {
    justify-content: flex-end; /* Alinha [Valor Label] para a direita (perto do centro) */
    text-align: right;
}

.stat-side.end {
    justify-content: flex-start; /* Alinha [Label Valor] para a esquerda (perto do centro) */
    text-align: left;
}

/* --- CORREÇÃO DA ANIMAÇÃO NO LAYOUT PIVOT --- */
/* Isso mantém o pulso (scale) que você gosta, mas impede que
   o número "balance" para o lado dentro da caixa larga flexível. */

#home-score .score-digit {
    justify-content: flex-end; /* Cola na direita (perto do hífen) */
    transform-origin: right center !important;
    padding-right: 2px; /* Ajuste fino */
}

#away-score .score-digit {
    justify-content: flex-start; /* Cola na esquerda (perto do hífen) */
    transform-origin: left center !important;
    padding-left: 2px;
}

/* Animações */
@keyframes blink-score {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0.3; transform: scale(1.1); }
}

@keyframes slide-out-down {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

@keyframes slide-in-down {
    0% { transform: translateY(-100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Item do Técnico na lista (Espaçamento superior) */
.player-item.coach-li {
    margin-top: 10px;
}

/* ==========================================================================
   SIDEBAR EXCLUSIVA (VERSÃO NUCLEAR: BLOCK LAYOUT)
   ========================================================================== */

/* 1. O Container Pai vira um "ponto fantasma" no canto da tela */
#hidden-features-storage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important; /* Deixa o conteúdo vazar para ser visto */
    z-index: 9999 !important;     /* Fica por cima de tudo */
    pointer-events: none !important; /* Cliques passam direto (não atrapalha o overlay) */
}

/* Sidebar Vertical (Esquerda) */
.sidebar-vertical-fixed {
    display: none; /* !important REMOVIDO PARA PERMITIR JS */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 260px;
    flex-direction: column;
    gap: 12px;
    z-index: 10000 !important;
    pointer-events: auto !important;
}

/* 2. Card da Liga */
.sb-league-container {
    background: rgba(20, 20, 20, 0.95);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    pointer-events: auto;
}

.sb-league-header {
    background: var(--accent-color, #00d4ff);
    color: #000;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Segoe UI', sans-serif;
}

.sb-league-logo { height: 16px; width: auto; }

/* 3. Lista e Grid do Jogo */
.sb-game-list { list-style: none; padding: 0; margin: 0; }

.sb-game-card {
    display: grid;
    /* Grid de 3 colunas:
       1fr (Casa)
       minmax(70px, auto) (Centro Flexível)
       1fr (Visitante)
    */
    grid-template-columns: 1fr minmax(70px, auto) 1fr;
    align-items: center;
    padding: 0 15px; /* Padding lateral */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    height: 60px;
}

/* Segurança: Remove nomes se existirem */
.sb-team-name { display: none !important; }

/* 4. Times */
.sb-team {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%; /* Ocupa altura toda para alinhar */
    position: relative; /* Necessário para ancorar o cartão em posição absoluta */
}

.sb-team-home { justify-content: center; padding-right: 0; }
.sb-team-away { justify-content: center; padding-left: 0; }

.sb-team-logo {
    height: 42px;
    width: auto;
    object-fit: contain;
    position: static !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

/* --- CORREÇÃO DA SIDEBAR (MODO BLOCK - SEMPRE EMPILHA) --- */

li.sb-game-card .sb-score-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important; /* ANCORA O TEXTO ABSOLUTO */
}

li.sb-game-card .sb-score-box .sb-game-score {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    line-height: 1.2 !important;
    font-family: 'VenusEnvyBold', sans-serif;
    font-size: 24px;
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Ajustes visuais e Texto Absoluto (Cresce para cima) */
li.sb-game-card .sb-score-box .sb-game-time {
    position: absolute !important;
    bottom: 100% !important; /* Texto flutua logo acima do placar */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    text-align: center !important;
    font-size: 11px;
    color: #00d4ff;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0px !important;
    pointer-events: none !important;
    line-height: 1 !important;
}

/* Status Especiais */
.sb-status-not-started { color: #888 !important; font-size: 9px; }
.sb-status-end { color: #aaa !important; }
.sb-red-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #ff3333;
    width: 9px;
    height: 12px;
    border-radius: 1px;
}

/* Posiciona o cartão ao lado externo do escudo (antes da casa, depois do visitante) */
.sb-team-home .sb-red-card {
    right: calc(50% + 25px);
}

.sb-team-away .sb-red-card {
    left: calc(50% + 25px);
}

#league-tables-container {
    display: none !important;
}

/* ==========================================================================
   ANIMAÇÕES DA SIDEBAR (CORREÇÃO FINAL)
   ========================================================================== */

/* 1. Definimos a animação */
@keyframes sb-blink-anim {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.5); color: #00ff00; text-shadow: 0 0 10px #00ff00; } /* Aumentei para 1.5x pra ficar bem visível */
    100% { transform: scale(1); color: inherit; }
}

/* 2. A classe que ativa a animação */
.sb-anim-active {
    /* OBRIGATÓRIO: Sem isso, o scale não funciona em <span> */
    display: inline-block !important;

    /* Configuração da animação */
    animation: sb-blink-anim 2s ease-in-out !important;

    /* Garante que o elemento não empurre os vizinhos incorretamente */
    vertical-align: middle !important;
    transform-origin: center center !important;

    /* Debug: Se não piscar verde, vai ficar com fundo vermelho pra gente saber que a classe entrou */
    /* background-color: rgba(255, 0, 0, 0.2); <--- Tire esse comentário se quiser testar a área */
}

/* ==========================================================================
   TICKER HORIZONTAL (VERSÃO 180px + ESPAÇO ENTRE LIGAS)
   ========================================================================== */

/* Ticker Horizontal (Rodapé) */
#ticker-bottom-container.sidebar-horizontal-fixed {
    display: none; /* !important REMOVIDO PARA PERMITIR JS */
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important;
    background: rgba(10, 10, 10, 0.98) !important;
    border-top: none !important;
    z-index: 99999 !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* 2. O Bloco da Liga */
#ticker-bottom-container .sb-league-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;

    flex-shrink: 0 !important;

    /* MUDANÇA: Sem borda, com espaço físico (gap) de 15px */
    border-right: none !important;
    margin-right: 15px !important;

    background: transparent !important;
    padding: 0 !important;
}

/* 3. Header da Liga */
#ticker-bottom-container .sb-league-header {
    width: 100% !important;
    height: 25px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--accent-color) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 10px !important; /* Fonte menor pra caber em 180px se precisar */
    font-weight: 800 !important;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.5) !important;
    box-sizing: border-box !important;

    /* Garante que nomes longos não quebrem o header pequeno */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 4. Lista de Jogos */
#ticker-bottom-container .sb-game-list {
    display: flex !important;
    flex-direction: row !important;
    height: 65px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 5. O CARD DO JOGO (180px - SUPER COMPACTO) */
#ticker-bottom-container .sb-game-card {
    /* Largura reduzida para 180px */
    width: 180px !important;
    min-width: 180px !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 0 5px !important; /* Padding mínimo */
    border-right: 1px solid rgba(255,255,255,0.1) !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

/* Remove a borda do último jogo para não ficar estranho com o espaço da liga */
#ticker-bottom-container .sb-game-card:last-child {
    border-right: none !important;
}

/* 6. Os Escudos (Times) */
#ticker-bottom-container .sb-team {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important; /* Espaço do escudo reduzido */
    height: 100% !important;
}

#ticker-bottom-container .sb-team-logo {
    height: 34px !important; /* Logo menor (34px) */
    width: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
}

#ticker-bottom-container .sb-team-name { display: none !important; }

/* 7. O Placar (Meio) */
#ticker-bottom-container .sb-score-box {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 !important;
}

#ticker-bottom-container .sb-game-score {
    font-size: 22px !important; /* Fonte reduzida para equilibrar */
    color: #fff !important;
    font-weight: bold !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

#ticker-bottom-container .sb-game-time {
    font-size: 9px !important;
    color: #ccc !important;
    margin-bottom: 2px !important;
    text-transform: uppercase;
    font-weight: 600 !important;
}

/* Garante que a animação de gol funcione dentro do Ticker */
#ticker-bottom-container .sb-anim-active {
    display: inline-block !important;
    animation: sb-blink-anim 2s ease-in-out !important;
    transform-origin: center center !important;
}

/* Reafirma a animação (caso ela não esteja global) */
@keyframes sb-blink-anim {
    0% { transform: scale(1); color: inherit; }
    50% { transform: scale(1.3); color: #00ff00; text-shadow: 0 0 10px #00ff00; }
    100% { transform: scale(1); color: inherit; }
}

/* ==========================================================================
   GOAL TOAST (NOTIFICAÇÃO FLUTUANTE - ESTILO SIDEBAR)
   ========================================================================== */

#goal-toast-container {
    position: absolute;
    right: 30px;
    z-index: 1000;
    pointer-events: none;
    height: auto !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    overflow: visible !important;
    bottom: auto !important;
    top: 50px !important; /* Ponto de partida no topo */
}

/* O CARD (Visual idêntico ao .sb-league-container da sidebar) */
.goal-toast-card {
    width: 380px;
    background: rgba(20, 20, 20, 0.98);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.8);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    position: relative !important;
    flex-shrink: 0 !important; /* PROÍBE o esmagamento da notificação */
}

/* HEADER DA LIGA (Igual .sb-league-header) */
.gt-header {
    background: var(--accent-color, #00d4ff);
    color: #000;
    padding: 6px 12px;
    height: 30px; /* Altura fixa */
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.gt-league-name {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CONTEÚDO DO JOGO (Estrutura Grid parecida com .sb-game-card) */
.gt-content {
    display: grid;
    /* Grid: [Logo 1fr] [Placar 100px] [Logo 1fr] */
    grid-template-columns: 1fr 110px 1fr;
    align-items: center;
    padding: 10px 15px;
    height: 80px; /* Altura fixa para alinhar escudos */
}

/* TIMES E LOGOS */
.gt-team {
    display: flex;
    align-items: center;
    height: 100%;
}
.gt-home { justify-content: flex-end; padding-right: 10px; }
.gt-away { justify-content: flex-start; padding-left: 10px; }

.gt-logo {
    height: 55px; /* Tamanho do escudo (levemente maior que sidebar pra destaque) */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* BOX DO PLACAR (Igual .sb-score-box) */
.gt-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.gt-time {
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px; /* Um pouco maior que sidebar */
    font-weight: 700;
    color: var(--accent-color, #00d4ff);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.gt-digits {
    font-family: 'VenusEnvyBold', sans-serif; /* Mesma fonte do placar principal */
    font-size: 36px; /* Bem legível */
    color: #fff;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    white-space: nowrap;
}

.gt-div { margin: 0 5px; color: #ccc; }

/* ANIMAÇÃO DE PISCAR O GOL (Verde Neon) */
.gt-blink {
    display: inline-block;
    animation: sb-blink-anim 1.5s ease-in-out infinite; /* Reusa a animação existente */
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
}

/* ANIMAÇÕES DE ENTRADA/SAÍDA (SLIDE LATERAL) */
.toast-anim-enter {
    animation: toastSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.toast-anim-exit {
    animation: toastSlideOut 0.5s ease-in forwards;
}

@keyframes toastSlideIn {
    0% { transform: translateX(120%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    0% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(120%); opacity: 0; }
}