/* Cores e efeitos usados no app inteiro (o verde neon e o brilho vêm daqui) */
:root {
    --neon-green: #00ff88;
    --neon-glow: rgba(0, 255, 136, 0.4);
    --glass-bg: rgba(15, 15, 15, 0.4);
    --glass-border: rgba(0, 255, 136, 0.2);
    --text-main: #f0f0f0;
}

/* Faz padding e borda contarem DENTRO da largura (evita campos vazando) */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Fundo da página: foto do campo com camada escura, sem rolagem da página (cada aba rola sozinha) */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: url('estadio-varzea2.jpg') center center / cover no-repeat;
    color: var(--text-main);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Camada de luz sobre a foto de fundo, para dar o clima de jogo à noite */
.light-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0) 25%, 
        rgba(0, 0, 0, 0) 75%, 
        rgba(0, 0, 0, 0.9) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Moldura do app: coluna central com largura de celular */
.app-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: 500px;
    margin: 0 auto;
}

/* Cabeçalho com efeito de vidro (marca, saldo e botão de depósito) */
.glass-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0 0 25px 25px;
}

/* Nome do app em verde neon */
.brand h1 {
    margin: 0;
    font-size: 1.4rem;
    color: var(--neon-green);
    text-shadow: 0 0 15px var(--neon-glow);
}

/* Bloco do saldo e do botão Depósito */
.user-wallet {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Caixinha do saldo */
.balance-box {
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Texto pequeno "SALDO" */
.balance-box .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Valor do saldo */
.balance-box strong {
    font-size: 0.9rem;
    color: #fff;
}

/* Botão verde principal (Depósito, Sacar, Ver jogos) */
.deposit-btn {
    background: var(--neon-green);
    color: #000;
    border: none;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 0 15px var(--neon-glow);
}

/* Área de rolagem de cada aba (Home, Bilhetes, Admin, Perfil) */
.games-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Cartão de vidro de um jogo (também usado nos blocos do admin e do perfil) */
.game-card {
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 18px;
}

/* Título do cartão: TIME A VS TIME B */
.game-card h3 {
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
}

/* Linha com os dois botões de odds */
.odds-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Botão de odd (um por time) e botões de resultado do admin */
.odd-button {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2) 0%, rgba(0, 162, 90, 0.1) 100%);
    color: #fff;
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    font-size: 0.85rem;
}

/* Nome do time dentro do botão */
.odd-button strong {
    display: block;
    font-size: 1.1rem;
    color: var(--neon-green);
    margin-top: 4px;
}

/* Barra de navegação inferior (Home, Bilhetes, Admin, Perfil) */
.glass-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0 calc(15px + env(safe-area-inset-bottom)) 0;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    border-radius: 25px 25px 0 0;
}

/* Cada botão da barra de navegação */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0.5;
}

/* Aba selecionada em destaque */
.nav-item.active {
    opacity: 1;
    color: var(--neon-green);
}
/* ESTILOS DA TELA DE LOGIN */
.login-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)),
url('estadio-varzea.jpg') center center / cover no-repeat;
backdrop-filter: blur(5px);
}

/* Cartão central do login */
.login-card {
background: var(--glass-bg);
padding: 30px;
border-radius: 25px;
border: 1px solid var(--glass-border);
backdrop-filter: blur(20px);
width: 85%;
max-width: 350px;
text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Título do login */
.login-card h1 {
color: var(--neon-green);
margin-bottom: 10px;
font-size: 1.8rem;
text-shadow: 0 0 10px var(--neon-glow);
}

/* Texto de apoio do login */
.login-card p {
color: #ccc;
margin-bottom: 25px;
font-size: 0.9rem;
}

/* Campos de usuário e senha */
.login-card input {
width: 100%;
padding: 12px;
margin-bottom: 15px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: white;
outline: none;
text-align: center;
}

/* Botões Entrar e Criar conta */
.login-card button {
width: 100%;
padding: 12px;
background: var(--neon-green);
color: #000;
border: none;
border-radius: 12px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 0 15px var(--neon-glow);
transition: 0.3s;
}

.login-card button:hover {
transform: scale(1.02);
background: #00cc6e;
}
/* MODAL DE APOSTA */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease;
}

/* Caixa do modal (aposta, encerramento e PIX) */
.modal-card {
background: var(--glass-bg);
width: 85%;
max-width: 320px;
padding: 25px;
border-radius: 20px;
border: 1px solid var(--glass-border);
text-align: center;
box-shadow: 0 0 30px rgba(0, 255, 136, 0.2);
animation: slideUp 0.3s ease;
}

/* Título do modal */
.modal-card h2 {
color: white;
font-size: 1.4rem;
margin-bottom: 20px;
}

/* Caixa com o resumo da aposta no modal */
.bet-info {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 15px;
margin-bottom: 20px;
color: #ccc;
font-size: 0.9rem;
}

.bet-info p { margin: 5px 0; }
.bet-selection strong,.bet-odd strong { color: var(--neon-green); }

/* Grupo rótulo + campo do modal */
.input-group {
text-align: left;
margin-bottom: 20px;
}

/* Rótulo do campo */
.input-group label {
display: block;
color: #aaa;
font-size: 0.8rem;
margin-bottom: 8px;
margin-left: 5px;
}

/* Campo de valor da aposta */
.input-group input {
width: 100%;
padding: 12px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: white;
font-size: 1.1rem;
text-align: center;
outline: none;
}

.input-group input:focus { border-color: var(--neon-green); }

/* Linha do possível prêmio (modal de aposta) e totais do admin */
.potential-win {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding: 10px;
border-top: 1px solid var(--glass-border);
color: white;
}

/* Valor do prêmio em verde neon */
.potential-win strong {
color: var(--neon-green);
font-size: 1.2rem;
text-shadow: 0 0 10px var(--neon-glow);
}

/* Linha com os botões Cancelar e Confirmar */
.modal-actions {
display: flex;
gap: 10px;
}

/* Base dos botões do modal */
.btn-cancel,.btn-confirm {
flex: 1;
padding: 12px;
border-radius: 12px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}

/* Botão Cancelar (e Sair da conta) */
.btn-cancel {
background: transparent;
color: #aaa;
border: 1px solid #444;
}

/* Botão Confirmar (verde) */
.btn-confirm {
background: var(--neon-green);
color: #000;
border: none;
box-shadow: 0 0 15px var(--neon-glow);
}

/* Animação: o fundo do modal aparece suavemente */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Animação: a caixa do modal sobe ao abrir */
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* NAVEGAÇÃO */
.nav-item { cursor: pointer; }

/* BILHETES — construído só com as peças que o app já usa */

/* Resumo: mesma linguagem do .balance-box do header */
.tickets-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Caixinha de resumo */
.summary-box {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
}

.summary-box .label,
.ticket-values .label {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Valor da caixinha de resumo */
.summary-box strong {
    font-size: 0.9rem;
    color: #fff;
}

/* Cartão: idêntico ao .game-card */
.ticket-card {
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 18px;
}

/* Título do bilhete */
.ticket-card h3 {
    margin: 0 0 15px 0;
    text-align: center;
    font-size: 1.1rem;
    color: #fff;
}

/* Bloco do palpite: mesmo estilo do .bet-info do modal */
.ticket-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    border-radius: 15px;
    color: #ccc;
    font-size: 0.9rem;
    text-align: center;
}
.ticket-info p { margin: 5px 0; }
.ticket-info strong { color: var(--neon-green); }

/* Valores: mesma divisória do .potential-win */
.ticket-values {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 15px;
    padding: 10px 5px 0;
    border-top: 1px solid var(--glass-border);
}
.ticket-values div { display: flex; flex-direction: column; }
.ticket-values div:last-child { align-items: flex-end; }
.ticket-values strong { color: #fff; font-size: 1rem; }
/* Valor de ganho em verde neon */
.ticket-values .ticket-win {
    color: var(--neon-green);
    font-size: 1.2rem;
    text-shadow: 0 0 10px var(--neon-glow);
}

/* Rodapé do cartão: status + data */
.ticket-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

/* Data do bilhete */
.ticket-date {
    font-size: 0.7rem;
    opacity: 0.5;
}

/* Status: pílulas feitas a partir dos botões existentes */
.ticket-status {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 12px;
}
/* Pendente: vidro neutro, como o saldo */
.status-pendente {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    color: var(--neon-green);
}
/* Ganhou: igual ao botão de Depósito */
.status-ganhou {
    background: var(--neon-green);
    color: #000;
    box-shadow: 0 0 15px var(--neon-glow);
}
/* Perdeu: igual ao botão Cancelar */
.status-perdeu {
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
}

/* Vazio: mesmo cartão de vidro do app */
.empty-state {
    margin: auto 0;
    text-align: center;
    background: rgba(15, 15, 15, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px 18px;
}
/* Título da mensagem de lista vazia */
.empty-state h3 {
    margin: 0 0 8px;
    color: var(--neon-green);
    text-shadow: 0 0 15px var(--neon-glow);
}
/* Texto da mensagem de lista vazia */
.empty-state p {
    color: #ccc;
    font-size: 0.9rem;
    margin: 0 0 20px;
}
/* =====================================================
   ENCERRAMENTO + PAINEL ADMIN
   Tudo reaproveita peças que o app já usa
   ===================================================== */

/* Jogo travado na Home */
.odd-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Aviso "apostas encerradas" de jogo travado */
.game-locked {
    text-align: center;
    color: #aaa;
    font-size: 0.8rem;
    margin: -8px 0 12px;
}

/* Regra de empate no modal: mesmo tom dos textos auxiliares */
.bet-rule {
    color: #aaa;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: -12px 0 20px;
}

/* Empate: mesma caixinha escura do saldo, texto branco */
.status-empate {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Resumo da banca com 3 caixas */
.summary-3 { grid-template-columns: repeat(3, 1fr); }
.summary-3 .summary-box { padding: 10px 12px; }

/* Títulos de seção: mesmo estilo dos rótulos do saldo */
.section-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin: 10px 5px -5px;
}

/* Texto de seção sem itens */
.section-empty {
    color: #aaa;
    font-size: 0.85rem;
    text-align: center;
    margin: 0;
}

/* Formulário de novo jogo */
.admin-form-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

/* O "VS" entre os campos dos times */
.admin-vs {
    color: var(--neon-green);
    font-weight: 800;
}

/* Mesmo campo do modal de aposta */
.admin-input {
    width: 100%;
    padding: 12px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: white;
    font-size: 0.95rem;
    text-align: center;
    text-transform: uppercase;
    outline: none;
}
.admin-input::placeholder { text-transform: none; }
.admin-input:focus { border-color: var(--neon-green); }

.admin-full { width: 100%; }

/* Linha de travar/reabrir */
.admin-lock-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}

/* Versão pequena do botão Cancelar */
.btn-small {
    background: transparent;
    color: #aaa;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}

/* Botões de resultado: mesmos botões de odd, em 3 colunas */
.results-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
/* Botões de resultado do admin (menores que os de odd) */
.results-container .odd-button {
    padding: 10px 6px;
    font-size: 0.75rem;
}
/* Nome do time no botão de resultado */
.results-container .odd-button strong {
    font-size: 0.9rem;
    word-break: break-word;
}

/* Valores em 3 colunas nos jogos encerrados */
.ticket-values.three div:nth-child(2) { align-items: center; }

/* =====================================================
   PERFIL — mesmas peças do app
   ===================================================== */
/* Cartão do perfil (avatar, nome e papel) */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 18px;
}
.profile-card h3 { margin: 12px 0 10px; }

/* Avatar: círculo com o mesmo verde e brilho do botão Depósito */
.profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--neon-green);
    color: #000;
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px var(--neon-glow);
}

/* Cartão do resultado geral */
.profile-result { padding: 10px 18px; }
.profile-result .potential-win { border-top: none; margin-bottom: 10px; }
.profile-result .bet-rule { margin: 0; }
/* Valor negativo em cinza (resultado e extrato) */
.result-negative { color: #aaa !important; text-shadow: none !important; }

.summary-4 { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.summary-4 .summary-box { padding: 10px; align-items: center; }
.summary-4 strong { font-size: 1.1rem; }

/* Botão Sair da conta */
.profile-logout {
    flex: none;
    width: 100%;
    margin-top: 5px;
    /* Mesmo botão Cancelar, com o fundo escuro do saldo para aparecer sobre o campo */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

/* =====================================================
   BARRA DE ROLAGEM — fina, transparente e com o verde neon
   ===================================================== */

/* Padrão atual (Brave/Chrome recentes e Firefox) */
.games-container {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 136, 0.35) transparent;
}

/* Navegadores mais antigos baseados em Chrome */
.games-container::-webkit-scrollbar {
    width: 6px;
}
.games-container::-webkit-scrollbar-track {
    background: transparent;
}
.games-container::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 136, 0.35);
    border-radius: 10px;
}
.games-container::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green);
}
/* =====================================================
   CAMPO — escalação, placar e lances
   Mesmo vidro, neon e botões do resto do app
   ===================================================== */

/* Botão "Ver campo" / "Campo e lances" abaixo do conteúdo do cartão */
.field-open { margin-top: 12px; }

/* Placar: TIME A  2 × 1  TIME B */
.score-line {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
    align-items: center;
    text-align: center;
}
.score-line .t {
    font-weight: 800;
    font-size: 0.95rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.score-line .g {
    font-size: 2rem;
    font-weight: 800;
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-glow);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.score-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Linha "ao vivo" do cartão da Home: status à esquerda, placar à direita */
.live-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
}
.live-row .g {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--neon-green);
    text-shadow: 0 0 10px var(--neon-glow);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.pulse {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-green);
    box-shadow: 0 0 8px var(--neon-green);
    margin-right: 6px;
    animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.sync { font-size: 0.7rem; opacity: 0.6; text-align: center; margin: 0; }

/* Aviso de gol que aparece por alguns segundos */
.flash {
    border-color: var(--neon-green);
    box-shadow: 0 0 20px var(--neon-glow);
    text-align: center;
    animation: slideUp 0.3s ease;
}
.flash strong {
    color: var(--neon-green);
    font-size: 1.1rem;
    text-shadow: 0 0 10px var(--neon-glow);
}
.flash p { margin: 4px 0 0; font-size: 0.85rem; color: #ccc; }

/* Campo: vidro escuro com as linhas em verde neon */
.pitch-card { padding: 10px; }
.pitch-card svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.pl { cursor: pointer; outline: none; }
.pl .dot { stroke: rgba(0, 0, 0, 0.7); stroke-width: 0.7; transition: r 0.15s; }
.pl:hover .dot, .pl.sel .dot { r: 4.7; }
.pl .ring { fill: none; stroke: var(--neon-green); stroke-width: 0.6; opacity: 0; }
.pl.sel .ring, .pl:focus-visible .ring { opacity: 1; }
.pl .num { font: 800 3.6px Inter, system-ui, sans-serif; text-anchor: middle; dominant-baseline: central; pointer-events: none; fill: #000; }
.pl .nm {
    font: 600 2.9px Inter, system-ui, sans-serif;
    text-anchor: middle;
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, 0.8);
    stroke-width: 0.8px;
    pointer-events: none;
}
.pl .ev { font-size: 3px; text-anchor: middle; pointer-events: none; }
.legend {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 4px 0;
    font-size: 0.75rem;
    color: #ccc;
}
.legend span { min-width: 0; overflow-wrap: anywhere; }
.legend i {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: -1px;
}

/* Lista de lances */
.lance {
    display: grid;
    grid-template-columns: 40px 26px 1fr;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
}
.lance:first-child { border-top: 0; }
.lance .m { opacity: 0.6; font-variant-numeric: tabular-nums; }
.lance .w { min-width: 0; overflow-wrap: anywhere; }
.lance .w small { opacity: 0.6; }
.lance.a .w b { color: var(--neon-green); }
.lance-del { grid-column: 1 / -1; }

/* Botão Voltar das telas de campo */
.back { align-self: flex-start; }

/* Editor do admin: select e campos no mesmo molde do .admin-input */
select.admin-input { text-transform: none; appearance: auto; cursor: pointer; }
select.admin-input option { background: #111; color: #fff; }
.admin-input.plain { text-transform: none; }
.admin-input.sm { padding: 10px 6px; }
.field-label {
    display: block;
    color: #aaa;
    font-size: 0.8rem;
    margin: 0 0 6px 5px;
    text-align: left;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 15px;
}
.grid-2 > div { min-width: 0; }
.roster-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 64px;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
.roster-row .pos { font-size: 0.65rem; text-transform: uppercase; opacity: 0.6; text-align: right; }
.odd-button.on { border-color: var(--neon-green); box-shadow: 0 0 15px var(--neon-glow); }
.lineup-save { flex: none; width: 100%; margin-top: 5px; }
.toast { color: var(--neon-green); font-size: 0.8rem; text-align: center; min-height: 1em; margin: 10px 0 0; }

@media (prefers-reduced-motion: reduce) {
    .pulse, .flash { animation: none; }
}

/* =====================================================
   CAMPEONATOS — chips de filtro na Home e etiqueta nos jogos
   ===================================================== */
.comp-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: none;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.comp-chips::-webkit-scrollbar { display: none; }

/* Chip: mesma caixinha escura do saldo; o selecionado fica verde neon como o botão Depósito */
.comp-chip {
    flex: none;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: #ccc;
    border-radius: 12px;
    padding: 8px 14px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
}
.comp-chip.on {
    background: var(--neon-green);
    color: #000;
    border-color: var(--neon-green);
    box-shadow: 0 0 15px var(--neon-glow);
}

/* Rótulo "BRASIL" / "MUNDO" antes de cada grupo de chips */
.comp-group {
    flex: none;
    align-self: center;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--neon-green);
    opacity: 0.8;
    padding: 0 2px 0 8px;
}

/* Etiqueta pequena acima dos times: campeonato e horário */
.comp-tag {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-bottom: 8px;
}

/* taxas à vista: perfil e modal do PIX */
.fee-box p { margin: 0 0 8px; }
.fee-box p:last-child { margin-bottom: 0; }
.fee-info:empty { display: none; }
.fee-info { color: var(--neon-green); font-weight: 600; }

/* =====================================================
   CONVITES E RESULTADO DA CASA — só reaproveita o vidro, o verde neon e o cinza do app
   ===================================================== */

/* Botão secundário do login (era um estilo inline): vidro com borda verde */
.login-card button.btn-ghost {
    margin-top: 10px;
    background: transparent;
    color: var(--neon-green);
    border: 1px solid var(--glass-border);
    box-shadow: none;
}
.login-card button.btn-ghost:hover { background: rgba(0, 255, 136, 0.08); }
/* Os blocos do login empilham os campos sem deixar o último botão colado */
#signup-view, #login-view { text-align: center; }
#invite-code { letter-spacing: 2px; text-transform: uppercase; }

/* Código do convite: mesma fonte do código PIX, legível e ditável */
.invite-code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--neon-green);
}

/* Botão pequeno selecionado (período do resultado) */
.btn-small.active {
    color: var(--neon-green);
    border-color: var(--neon-green);
}

/* Status crítico: o mais forte da família (ganhou = verde cheio, crítico = branco cheio) */
.status-critico {
    background: #fff;
    color: #000;
}

/* Linhas do resumo financeiro */
.fin-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
}
.fin-row strong { color: #fff; }
.fin-row strong.ticket-win { color: var(--neon-green); }
.fin-row strong.result-negative { color: #aaa; }

/* Gráfico de barras do lucro por dia: acima da linha = ganhou, abaixo = perdeu */
.fin-bars {
    position: relative;
    display: flex;
    gap: 2px;
    height: 110px;
    margin: 10px 0 4px;
}
.fin-bars::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.fin-bar { position: relative; flex: 1; min-width: 0; }
.fin-bar span { position: absolute; left: 0; right: 0; min-height: 2px; border-radius: 2px; }
.fin-bar span.pos { bottom: 50%; background: var(--neon-green); box-shadow: 0 0 8px var(--neon-glow); }
.fin-bar span.neg { top: 50%; background: #aaa; }
.fin-axis {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    opacity: 0.6;
}
.fin-axis { margin-bottom: 14px; }
.fin-register { display: grid; gap: 8px; margin-top: 12px; }
.fin-register .btn-small { padding: 10px 12px; }

/* Árvore de quem trouxe quem (Admin): cada nível entra um degrau, com a linha tracejada do verde do app */
.tree-node.nested {
    margin-left: 14px;
    padding-left: 10px;
    border-left: 1px dashed var(--glass-border);
}
.tree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 7px 0;
    min-width: 0;
}
.tree { margin-bottom: 14px; }
.tree-name { flex: 1 1 4.5em; font-size: 0.9rem; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.tree-name.blocked { text-decoration: line-through; color: #aaa; }
.tree-row .ticket-status { margin-left: auto; }

/* Seção recolhida do Admin: o título é o botão de abrir e fechar */
.fold { display: flex; flex-direction: column; gap: 12px; }
.fold > summary { cursor: pointer; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸ '; color: var(--neon-green); }
.fold[open] > summary::before { content: '▾ '; }