/* --- style.css COMPLETO (Dark Theme Padrão + Light Theme) --- */

/* --- Variáveis de Tema --- */
:root {
    --bg-main: #0b1220;
    --bg-card: #16243e;
    --bg-input: #0f1c30;
    --text-primary: #f7fbff;
    --text-secondary: #ccd4e0;
    --color-primary: #4b8af7;
    --color-secondary: #e6b300;
    --color-success: #00a36c;
    --color-danger: #e74c3c;
    --border-light: #2a3e5e;
    --border-dark: #1a2a47;
    --bg-ranking-even: #142031;
    /* Variáveis adicionais para compatibilidade com páginas */
    --bg-color: #0b1220;
    --card-bg-color: #16243e;
    --secondary-bg-color: #142031;
    --border-color: #2a3e5e;
    --text-color: #f7fbff;
    --input-bg-color: #0f1c30;
}


/* --- Estilos Globais e Fundo (Manutenção do Tema Escuro) --- */
/* body base moved to css/body.css */

/* Estilo para a logo recém-adicionada */
.site-logo {
    max-width: 350px; /* Define um tamanho pequeno para a logo */
    height: auto;
    display: block;  /* Garante que ela ocupe sua própria linha */
    margin: 10px auto; /* Centraliza horizontalmente e adiciona margens */
    padding: 5px;
    border-radius: 0%; /* Opcional: Efeito circular, se a logo for quadrada */
    box-shadow: 0 0 0px rgba(0, 123, 255, 0.5); /* Leve brilho azul */
}

h1 {
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 10px;
    font-size: 2em;
    width: 90%;
    max-width: 1000px;
}

h2 {
    color: var(--text-primary);
    margin: 25px 0 15px 0;
    text-align: center;
}

/* --- Área Principal e Controles --- */
#controles, #rankingContainer, #historicoContainer, .partida-card, .estatisticas-card {
    background-color: var(--bg-card); /* Usando variável de tema */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 1000px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* Header dos Controles */
.header-controles {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; 
}
.header-controles h2 {
    margin: 0;
    font-size: 1.5em;
    text-align: left;
    color: var(--text-primary);
}
.header-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* Botões de Ação (Puxar/Adicionar/Limpar/Ajuda) */
button {
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.1s, opacity 0.3s;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

button:active {
    transform: translateY(1px);
}
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Botões Específicos */
.history-btn, .add-btn, .btn-acao-topo, .help-btn, .clear-btn {
    color: white;
}
.history-btn, .btn-acao-topo { background-color: var(--color-primary); }
.history-btn:hover, .btn-acao-topo:hover { background-color: #6a9eff; }

.add-btn { background-color: var(--color-success); }
.add-btn:hover { background-color: #00b372; }

.clear-btn { background-color: var(--color-danger); }
.clear-btn:hover { background-color: #c0392b; }

.help-btn { background-color: #6c757d; }
.help-btn:hover { background-color: #5a6268; }

/* Botão de Alternar Tema */
.toggle-theme-btn { 
    background-color: var(--text-secondary); 
    color: var(--bg-card); 
    padding: 10px 12px; 
    box-shadow: none;
}


/* Inputs de Nome de Time */
.input-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.input-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-secondary);
}
#controles input[type="text"], .filtros-container input, .filtros-container select, #pesquisaRanking {
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    background-color: var(--bg-input);
    color: var(--text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s, border-color 0.3s;
}
#pesquisaRanking {
    margin-bottom: 15px;
    padding: 8px 10px !important;
}


/* --- Tabela de Jogadores --- */
#tabelaJogadores, #tabelaRanking {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
#tabelaJogadores th, #tabelaJogadores td, #tabelaRanking th, #tabelaRanking td {
    padding: 10px 5px;
    text-align: left;
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
#tabelaJogadores th, #tabelaRanking th {
    background-color: var(--border-light);
    color: #fff;
    font-weight: normal;
    font-size: 0.9em;
    text-transform: uppercase;
}
#tabelaJogadores td:nth-child(1) { text-align: center; } 

/* Inputs de Nome e Histórico */
.nome-input-container {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%; 
}
.input-nome-jogador {
    flex-grow: 1; 
    min-width: 0; 
    padding: 5px !important;
}
.btn-historico-jogador {
    background: var(--color-secondary); 
    color: var(--bg-card);
    border: none;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    transition: background-color 0.3s;
}
.btn-historico-jogador:hover { background: #ffc400; }

/* Inputs e Selects dentro da Tabela */
#tabelaJogadores td input[type="text"], .select-elo, .select-divisao { 
    padding: 5px;
    background-color: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: 3px;
    width: 100%; 
    box-sizing: border-box;
}

/* Ações na Tabela (Mover/Remover) */
.acao-container {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}
.btn-remover {
    background-color: var(--color-danger);
    color: white;
    padding: 5px 10px;
    font-size: 0.85em;
    width: 35px;
}
.btn-remover:hover { background-color: #c0392b; }

.btn-reordenar {
    background-color: #334a6d;
    color: white;
    padding: 5px 0;
    font-size: 0.85em;
    width: 35px;
}
.btn-reordenar:hover { background-color: #4b6287; }


/* --- Botões de Sorteio --- */
.sorteio-buttons-group {
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 30px;
    margin-bottom: 20px;
}
.sorteio-buttons-group .sorteio-btn {
    width: 250px; 
    padding: 12px 15px; 
    font-size: 1.0em;
    color: var(--bg-card); 
    background-color: var(--color-secondary); 
    font-weight: bold;
}

.sorteio-buttons-group .sorteio-btn:hover:not(:disabled) { background-color: #ffc400; }

.sorteio-buttons-group .random-btn {
    background-color: var(--color-primary); 
    color: white;
}
.sorteio-buttons-group .random-btn:hover:not(:disabled) {
    background-color: #6a9eff;
}


/* --- Modal de Resultados/Confirmação (Geral) --- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.8); 
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: var(--bg-card); 
    color: var(--text-primary);
    margin: 10% auto; 
    padding: 30px;
    border: 1px solid var(--color-primary);
    width: 80%; 
    max-width: 500px; /* Redução do modal Padrão */
    border-radius: 8px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.9);
}
.small-modal {
    max-width: 450px; 
}
/* NOVO TAMANHO: Modal de Resultado do Sorteio */
.modal-content.large-modal {
    max-width: 750px;
}

.modal-content h2, .modal-content h3 {
    color: var(--color-primary);
    margin-top: 0;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    text-align: left;
}
/* Alerta customizado */
#customAlertMessage {
    color: var(--text-primary);
    text-align: center;
    font-weight: bold;
}

/* Conteúdo do Modal de Confirmação (historico.html) - Mantido para compatibilidade */
.modal-content h3 { color: var(--color-secondary); border: none; padding-bottom: 0; text-align: center; }
#modalMensagem {
    font-size: 1.1em;
    margin: 20px 0;
    color: var(--text-secondary);
}
.modal-botoes {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
}

/* Botões de Confirmação / Cancelar */
.btn-confirm {
    background-color: var(--color-success); 
    color: white;
}
.btn-confirm:hover { background-color: #00b372; }
.btn-cancel {
    background-color: #6c757d; /* Cinza para cancelar/OK/Refazer */
    color: white;
}
.btn-cancel:hover { background-color: #5a6268; }


.close-btn {
    color: var(--color-danger);
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}
.close-btn:hover, .close-btn:focus { color: #ff6b6b; }


/* --- Resultado do Sorteio (Modal) --- */
.times-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 30px;
    width: 100%;
}
#timeAzulContainer, #timeVermelhoContainer {
    padding: 25px;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    flex: 1 1 45%;
    min-width: 250px; /* Redução do min-width */
}
#timeAzulContainer { background-color: #111a29; border-left: 5px solid #4b8af7; }
#timeAzulContainer h3 { color: #4b8af7; }
#timeVermelhoContainer { background-color: #241113; border-left: 5px solid #e74c3c; }
#timeVermelhoContainer h3 { color: #e74c3c; }

.modal ul { list-style: none; padding: 0; margin-top: 15px; }
.modal ul li {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 1.0em; /* Redução da fonte */
}
.lider-item {
    font-weight: bold;
    color: var(--color-secondary); 
    border: 1px solid var(--color-secondary);
}
.modal p { font-weight: bold; font-size: 1.0em; margin-top: 15px; color: var(--text-secondary); }
.modal p span { color: var(--color-secondary); }

/* --- Ações do Modal de Resultado (Salvar Partida) --- */
.firebase-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    width: 100%;
}
/* NOVO ESTILO: Botão Começar Partida (Salvar) */
#btnComecarPartida {
    background-color: var(--color-success); /* Cor verde para salvar/iniciar */
    color: white;
    padding: 15px 20px;
    font-size: 1.2em;
    width: 100%;
    max-width: 450px;
}
#btnComecarPartida:hover:not(:disabled) { background-color: #00b372; }


.footer-actions {
    width: 100%;
    display: flex;
    justify-content: center;
}
.historico-link-grande {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: var(--color-secondary);
    background-color: #334a6d; 
    padding: 15px 20px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 8px;
    transition: background-color 0.3s;
}
.historico-link-grande:hover {
    background-color: #4b6287;
    color: #ffc400;
}
.historico-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: var(--color-secondary);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.0em;
}
.historico-link:hover { color: #ffc400; }

/* --- Tabela de Ranking (AJUSTE DE COR) --- */
#tabelaRanking tbody tr:nth-child(even) { 
    background-color: var(--bg-ranking-even); 
}

/* Destaque do Ranking */
#tabelaRanking tbody tr:nth-child(1) { background-color: #e6b3004d; font-weight: bold; }
#tabelaRanking tbody tr:nth-child(2) { background-color: #c0c0c04d; }
#tabelaRanking tbody tr:nth-child(3) { background-color: #b873334d; }
#tabelaRanking td:nth-child(1) { font-weight: bold; text-align: center; }


/* Animação de Carregamento (Spinner) */
.loading-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 2em;
}
.loading-spinner span {
    margin-top: 10px;
    font-size: 0.5em;
    font-weight: bold;
}


/* ======================================================= */
/* --- ESTILOS ESPECÍFICOS DO HISTORICO.HTML (MANTIDOS) --- */
/* ======================================================= */

.voltar-link {
    display: inline-block;
    margin-bottom: 0;
    margin-right: auto;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
    transition: color 0.3s;
}
.voltar-link:hover { color: #8bbaff; }

/* Header e Botões de Ação (Melhoria 8) */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1000px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.btn-acao-topo {
    background-color: #6c757d;
    color: white;
    padding: 8px 12px;
    font-size: 0.9em;
}

/* --- Estatísticas Globais (Melhoria 14) --- */
.estatisticas-card {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #142031; 
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-light);
}

.estatisticas-card p {
    margin: 0;
    font-size: 1.1em;
}

.estatisticas-card span {
    font-weight: bold;
    color: var(--color-secondary); 
    margin-left: 5px;
}

.ultima-atualizacao {
    font-size: 0.8em;
    color: #888;
}

/* --- Filtros (Melhorias 5, 6, 12) --- */
.filtros-container {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    width: 90%;
    max-width: 1000px;
}

/* Inputs de Filtro - já adaptados acima */
.filtros-container input, .filtros-container select {
    flex-grow: 1;
    min-width: 150px;
}

/* --- Cards de Partida (Melhoria 10, 11, 18) --- */
.partida-card {
    background-color: var(--bg-card);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.2s, transform 0.2s;
}

.partida-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

/* Indicadores de Status (Melhoria 18) */
.partida-card.nao-resolvida {
    border-left: 5px solid var(--color-secondary);
}

.partida-card.resolvida {
    border-left: 5px solid var(--color-success);
}

.partida-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 10px;
    margin-bottom: 15px;
}
.partida-header h3 { color: var(--color-primary); margin: 0; }

.tipo-sorteio {
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9em;
}

/* Detalhes dos Times */
.times-historico-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.time-historico {
    padding: 15px;
    border-radius: 4px;
    background-color: var(--bg-input); 
}

.time-historico h4 {
    margin-top: 0;
    border-bottom: 1px dashed #334a6d;
    padding-bottom: 5px;
    font-size: 1.1em;
    color: var(--text-secondary);
}

.time-historico.time-vencedor {
    background-color: #008c5c30;
    border: 1px solid var(--color-success);
}
.time-historico.time-vencedor h4 { color: #00b372; }

.time-historico.time-perdedor {
    background-color: #e74c3c30; 
    border: 1px solid var(--color-danger);
}

.jogadores-lista {
    list-style-type: none;
    padding: 0;
    font-size: 0.9em;
}

.lider-hist {
    font-weight: bold;
    color: var(--color-secondary);
}

/* Informação de Balanceamento (Melhoria 7) */
.balance-info {
    text-align: center;
    margin: 15px 0;
    padding: 8px;
    background-color: #142031;
    border-radius: 4px;
    font-size: 0.9em;
}

.balance-diff {
    font-weight: bold;
    color: var(--color-primary);
}

/* Resultado e Ações */
.resultado-vencedor {
    margin-top: 20px;
    border-top: 1px solid var(--border-light);
    padding-top: 15px;
}

.status-e-acao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.vencedor-final {
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
}

.status-vencido {
    background-color: var(--color-success);
    color: white;
}

.status-aberta {
    background-color: var(--color-secondary);
    color: var(--bg-card);
}

/* Botões de Ação de Vitória */
.acoes-vitoria-historico {
    display: flex;
    gap: 10px;
}

.btn-registrar {
    padding: 8px 12px;
    font-size: 0.9em;
    color: white; 
}

.btn-registrar.time1-btn {
    background-color: var(--color-primary);
}
.btn-registrar.time2-btn {
    background-color: var(--color-danger);
}

/* Botão de Copiar (Melhoria 17) */
.btn-copiar {
    background-color: #334a6d;
    color: white;
    padding: 8px;
    font-size: 0.9em;
    line-height: 1;
    margin-right: 5px;
}
.btn-copiar:hover { background-color: #4b6287; }

.partida-id-oculto {
    font-size: 0.7em;
    color: #555;
    margin-left: 10px;
}

/* Indicador de Processamento (Melhoria 15) */
.processando-status {
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1em;
    padding: 8px;
}

/* --- Paginação (Load More) --- */
.load-more-container {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 90%;
    max-width: 1000px;
}

#btnLoadMore {
    background-color: var(--color-secondary);
    color: var(--bg-card);
    font-size: 1.1em;
    padding: 12px 25px;
}

#btnLoadMore:disabled {
    background-color: #444;
    cursor: not-allowed;
    color: #999;
}

.loading-message, .erro, .sem-dados {
    text-align: center;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 1.2em;
    font-style: italic;
    padding: 20px;
}
.erro, .sem-dados { color: var(--color-danger); }


/* --- Responsividade (Histórico e Sorteador) --- */
@media (max-width: 800px) {
    /* Geral para sorteador.html */
    .times-grid {
        flex-direction: column;
        gap: 15px;
    }
    .time-container {
        min-width: 90%;
    }
    .sorteio-buttons-group {
        flex-direction: column;
    }
    .sorteio-buttons-group .sorteio-btn {
        width: 100%;
        max-width: none;
    }
    .header-controles {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-buttons {
        margin-top: 15px;
        justify-content: flex-start;
    }
    .acao-container {
        justify-content: space-around;
        gap: 2px;
    }
    #tabelaJogadores th, #tabelaJogadores td, #tabelaRanking th, #tabelaRanking td {
        padding: 8px 3px;
    }
    
    /* Específico para historico.html */
    .filtros-container {
        flex-direction: column;
    }
    .times-historico-grid {
        grid-template-columns: 1fr;
    }
    .estatisticas-card {
        flex-direction: column;
        gap: 10px;
    }
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    .header-actions {
        margin-top: 15px;
        justify-content: center;
    }
    .voltar-link {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .status-e-acao {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .acoes-vitoria-historico {
        width: 100%;
        justify-content: space-between;
    }
    .btn-registrar {
        flex: 1;
        text-align: center;
    }
}


/* --- Estilos para os Ícones de Role no Resultado (Mantido) --- */
.role-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 50%;
    /* Remova background-color se preferir ícones limpos */
}

/* --- Estilos para os Seletores de Role na Tabela (NOVO) --- */

.select-with-icon {
    /* Esconde a seta padrão do select para alguns navegadores */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-left: 30px !important; /* Adiciona espaço para o ícone */
    background-size: 20px 20px; /* Tamanho do ícone */
    background-position: 5px center; /* Posição do ícone */
    background-repeat: no-repeat;
    cursor: pointer;
    font-weight: bold;
}

/* Mapeamento das classes para os ícones */
.select-with-icon.role-top {
    background-image: url('img/top.png');
}
.select-with-icon.role-jg {
    background-image: url('img/jg.png');
}
.select-with-icon.role-mid {
    background-image: url('img/mid.png');
}
.select-with-icon.role-adc {
    background-image: url('img/adc.png');
}
.select-with-icon.role-sup {
    background-image: url('img/sup.png');
}
.select-with-icon.role-fill {
    background-image: url('img/preencher.png');
}

/* Estilo para ícones de Lane nas listas do Histórico */
.role-icon-small {
    width: 16px; /* Define a largura desejada para o ícone */
    height: 16px; /* Define a altura para manter a proporção */
    vertical-align: middle; /* Alinha o ícone verticalmente com o texto */
    margin-right: 5px; /* Adiciona um pequeno espaço à direita do ícone */
    border-radius: 3px; /* Opcional: Borda levemente arredondada */
    object-fit: contain; /* Garante que a imagem seja contida no espaço */
}

/* Ajusta o estilo da lista de jogadores para acomodar melhor os ícones */
.partida-card .jogadores-lista li {
    font-size: 14px; /* Diminui um pouco o tamanho da fonte */
    padding: 2px 0;
    display: flex;
    align-items: center;
}

/* Estilo para o botão de remoção de partida no histórico */
.btn-remover-partida {
    background-color: #dc3545; /* Vermelho padrão para ação destrutiva */
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    transition: background-color 0.2s ease;
}

.btn-remover-partida:hover {
    background-color: #c82333;
}

/* Garante que os botões de utilidade (copiar e remover) fiquem alinhados */
.acoes-utilidade {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinha à direita */
    flex-grow: 1; /* Permite que ocupe o espaço necessário */
}

/* Modificações na sua classe existente .fixed-modal-left */
.fixed-modal-left {
    position: fixed;
    top: 0;
    width: 250px; /* Certifique-se de que a largura está definida */
    height: 100vh;
    background-color: #212529;
    color: #f8f9fa;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    
    /* 1. Estado Fechado: Move o modal para fora da tela, usando a sua própria largura */
    left: -250px; 
    
    /* 2. Habilita a transição para o efeito de deslize */
    transition: left 0.3s ease-in-out; 
    
    /* 3. Deve ser flex, block, ou similar (não 'none') para que a transição funcione */
    display: flex; 
    flex-direction: column;
    align-items: center;
}

/* 4. Estado Aberto: Traz o modal para a tela */
.fixed-modal-left.open {
    left: 0;
}

/* 5. Estilo e Posição do Botão de Alternância */
#toggleModalBtn {
    position: fixed;
    top: 15px;
    /* Posição inicial: 5px à direita da borda FECHADA do modal (-250px + 5px = -245px). 
       Se o botão estiver FORA do modal, a posição mais simples é ajustar onde ele aparece 
       em relação à tela quando o modal está fechado (na extremidade esquerda da tela). */
    left: 5px; 
    z-index: 1001;
    cursor: pointer;
    background: none;
    border: none;
    color: #f8f9fa; /* Cor do ícone */
    font-size: 20px;
    padding: 10px;
    
    /* Opcional: Transição para o botão acompanhar o modal */
    transition: left 0.3s ease-in-out; 
}

/* 6. Posição do Botão Quando o Modal Está ABERTO */
/* O botão se move para a nova posição (250px do modal + 10px de margem) */
.fixed-modal-left.open ~ #toggleModalBtn {
    left: 260px; 
}
/* Layout e responsividade do Ranking */
#tabelaRanking {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
#tabelaRanking th, #tabelaRanking td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-light);
}
#tabelaRanking th, #tabelaRanking td { word-break: break-word; }

@media (max-width: 768px) {
    #rankingContainer { padding: 18px; }
    #tabelaRanking { font-size: 0.95em; }
}
@media (max-width: 480px) {
    #rankingContainer { padding: 14px; }
    #tabelaRanking { font-size: 0.9em; }
}