/* Estilos globais compartilhados por todas as páginas. Carregado depois do Tailwind CDN no de cada página. */ /* ── Scrollbar ────────────────────────────────────────────────────────── Combina com o fundo do app (#0a0a0c) e usa o verde da marca com transparência no thumb, ficando mais opaco no hover. */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: #22C55E33 #0a0a0c; } /* Chrome/Edge/Safari */ ::-webkit-scrollbar { width: 10px; height: 10px; /* barra horizontal (tabelas largas no financeiro/jogadores) */ } ::-webkit-scrollbar-track { background: #0a0a0c; } ::-webkit-scrollbar-thumb { background: #22C55E33; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #22C55E66; } /* ── "Meu desempenho": estatísticas que reagem à altura do card ────────── (jogador.html — só de lg pra cima; o mobile tem tratamento próprio) O card fica lado a lado com "Rankings" num grid de 2 colunas. Os dois JÁ esticam sozinhos (align-items: stretch é o padrão do grid, e não há items-start/self-start em lugar nenhum) — o que sobrava vazio era o miolo: as 4 estatísticas ficam numa linha só de altura fixa, então todo espaço extra que o ranking cria virava buraco no rodapé do card. A correção é uma CONTAINER QUERY DE ALTURA, não JavaScript medindo nada: quando o miolo passa de 210px de altura, as 4 estatísticas viram 2x2 e se distribuem verticalmente. Como quem dita a altura é o ranking ao lado, isso passa a acompanhar sozinho o ranking crescer/encolher (mais ou menos jogadores, troca de aba, filtro de mês) — é reativo por construção. Por que id e não classe: o Tailwind via CDN injeta o