...
pra tabelas longas que não precisam ficar abertas por padrão (ex:
paginas/niveis.php - 100 linhas era "tela gigante" antes disso, ver
skill brgol-niveis). O herda o visual de card-header de
graça; só precisa esconder o marcador nativo do navegador e trocar por
um chevron que gira ao abrir. */
.brgol-niveis-tabela > summary {
cursor: pointer;
list-style: none;
}
.brgol-niveis-tabela > summary::-webkit-details-marker {
display: none;
}
.brgol-niveis-tabela-seta {
margin-left: auto;
transition: transform 0.15s ease-out;
}
.brgol-niveis-tabela[open] .brgol-niveis-tabela-seta {
transform: rotate(180deg);
}
/* FAQ (paginas/duvidas.php, 2026-09-19) - lista de mais leve que
um .brgol-card inteiro por pergunta (seria uma parede de barras pretas
pra ~6 perguntas) - borda fina + fundo claro, reaproveitando o
comportamento (cursor, some marcador nativo, chevron que gira) de
.brgol-niveis-tabela acima, só com um visual mais discreto. */
.brgol-faq {
display: flex;
flex-direction: column;
gap: 8px;
}
.brgol-faq-item {
border: 1px solid var(--brgol-borda);
border-radius: var(--brgol-raio);
background: var(--brgol-fundo-claro-alt);
overflow: hidden;
}
.brgol-faq-pergunta {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
font-weight: 700;
font-size: 13px;
color: var(--brgol-texto-escuro);
}
.brgol-faq-resposta {
padding: 0 14px 14px;
font-size: 13px;
line-height: 1.6;
color: var(--brgol-texto-escuro);
}
/* Legenda dos selos de premiação (dentro da pergunta "O que significa cada
ícone de premiação?") - mostra os 3 arquivos de verdade (ouro/prata/
bronze) de imagens/icones/ lado a lado com a explicação, em vez de só
descrever em texto - o usuário pediu explicitamente pra explicar o
significado de cada ícone aqui. */
.brgol-selo-legenda-lista {
margin-top: 10px;
}
.brgol-selo-legenda {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.brgol-selo-legenda + .brgol-selo-legenda {
border-top: 1px solid var(--brgol-borda);
}
.brgol-selo-legenda-icones {
display: flex;
gap: 4px;
flex: none;
}
.brgol-selo-legenda-icones img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--brgol-borda);
background: #fff;
}
.brgol-selo-legenda-texto {
font-size: 13px;
line-height: 1.5;
color: var(--brgol-texto-escuro);
}
/* Feed de Movimentações (paginas/movimentacoes.php, 2026-09-19) - troca
de time e contratação, uma linha por evento (ícone + frase + hora),
mais parecido com uma lista de notificação do que uma tabela de
ranking (não tem posição/gols, só uma frase). */
.brgol-movimentacoes {
display: flex;
flex-direction: column;
gap: 10px;
}
.brgol-movimentacao {
display: flex;
align-items: flex-start;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-movimentacao:last-child {
border-bottom: none;
padding-bottom: 0;
}
.brgol-movimentacao-icone {
flex: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-acento-verde-escuro);
font-size: 12px;
}
.brgol-movimentacao-texto {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.5;
color: var(--brgol-texto-escuro);
}
.brgol-movimentacao-texto a {
color: var(--brgol-texto-escuro);
font-weight: 700;
text-decoration: none;
}
.brgol-movimentacao-texto a:hover {
color: var(--brgol-acento-verde-escuro);
}
.brgol-movimentacao-hora {
flex: none;
font-size: 11px;
color: var(--brgol-texto-suave-escuro);
white-space: nowrap;
}
.brgol-card-body {
padding: 16px;
color: var(--brgol-texto-escuro);
}
/* Recorde histórico (paginas/principal.php, brgol_card_recorde()) - dourado
em vez do verde padrão do header, reaproveitando --brgol-acento-vip que
já carrega esse significado de "status especial" em outro lugar (anel do
avatar, chip Vip, estrela de level up) - não é um acento novo inventado
só pra variar cor, é a mesma cor com o mesmo significado. Diferencia
visualmente de "Top" (ranking da janela atual, zera) pra "Recorde"
(histórico, permanente). */
.brgol-card-header--recorde {
border-left-color: var(--brgol-acento-vip);
}
/* .brgol-rank-valor sozinho não estiliza nada fora de .brgol-rank-table
(é um seletor composto, `td.brgol-rank-valor`) - este card usa
.brgol-rank-time (flex) sem tabela, por isso precisa do próprio estilo
completo, não só um empurrão de margin. */
.brgol-recorde-valor {
margin-left: auto;
font-family: var(--brgol-font-display);
font-size: 15px;
white-space: nowrap;
}
/* Badge "Atual" (ex: campeonato em andamento) - substitui a antiga variante
de cor laranja do header; encoda o estado em texto, não em cor decorativa. */
.brgol-chip-atual {
margin-left: auto;
font-family: var(--brgol-font-corpo);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--brgol-acento-verde-claro);
border: 1px solid var(--brgol-acento-verde-claro);
border-radius: var(--brgol-raio-pill);
padding: 2px 9px;
}
/* --claro: mesmo chip, mas pro texto ler dentro de um card claro (fundo
osso/branco) - o verde-claro padrão foi pensado pra contraste sobre
fundo escuro (card-header preto) e ficaria com contraste ruim aqui
(verde claro sobre fundo quase-branco). */
.brgol-chip-atual--claro {
color: var(--brgol-acento-verde-escuro);
border-color: var(--brgol-acento-verde-escuro);
}
/* Título de grupo dentro do sidebar escuro (esquerda/direita) */
.brgol-stat-group-title {
background: var(--brgol-fundo-escuro-2);
color: var(--brgol-texto-claro);
padding: 10px 14px;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Linha de stat (sidebar escuro) */
.brgol-stat-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
color: var(--brgol-texto-claro);
border-bottom: 1px solid var(--brgol-fundo-escuro-3);
font-size: 13px;
}
.brgol-stat-label {
flex: 1;
color: var(--brgol-texto-suave-claro);
}
.brgol-stat-value {
font-weight: bold;
}
.brgol-stat-value a {
color: var(--brgol-texto-claro);
}
/* Linha de chute liberado (Falta/Pênalti quando já pode chutar) - vira um
link inteiro, com o valor destacado em verde pra chamar atenção, mesma
lógica de "pronto pra ação" dos botões gamificados. */
.brgol-stat-row--disponivel {
text-decoration: none;
cursor: pointer;
}
.brgol-stat-row--disponivel:hover {
background: var(--brgol-fundo-escuro-2);
}
/* "Disponível!" virou um selo/botão de verdade (pedido do usuário
2026-09-18, "gamificado verde, bem cara de video game") em vez de só
texto verde - mesma identidade "selo" de sempre (cor chapada, borda
preta grossa, sombra sólida deslocada, SEM gradiente/glow - ver
histórico da paleta no topo desta skill) só que em miniatura, pra
caber ao lado do rótulo "Falta"/"Pênalti" na linha do sidebar. O
pulso contínuo (`brgolDisponivelPulso`) chama atenção pro chute liberado
sem precisar de cor/forma nova - desativado em prefers-reduced-motion
junto com o resto do "juice" do jogo. */
.brgol-stat-valor-disponivel {
display: inline-flex;
align-items: center;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro) !important;
font-family: var(--brgol-font-display);
font-size: 11px;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
border: 2px solid var(--brgol-borda-forte);
box-shadow: 2px 2px 0 var(--brgol-borda-forte);
animation: brgolDisponivelPulso 1.6s ease-in-out infinite;
}
.brgol-stat-row--disponivel:hover .brgol-stat-valor-disponivel {
filter: brightness(1.08);
}
@keyframes brgolDisponivelPulso {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
/* Juice do instante em que o cooldown chega a zero (js/tempo.js,
brgolContagem) - pop + flash verde, uma vez só, na troca da linha de
cronômetro pra link "Disponível!". Pedido explícito do usuário pra
gamificar esse momento. */
.brgol-stat-row--pop {
animation: brgolStatDisponivelPop 600ms ease-out both;
}
@keyframes brgolStatDisponivelPop {
0% { transform: scale(0.92); background: rgba(76, 179, 36, 0.4); }
60% { transform: scale(1.03); }
100% { transform: scale(1); background: transparent; }
}
.brgol-oculto {
display: none;
}
/* Barra de progresso */
.brgol-progress {
background: var(--brgol-fundo-escuro-3);
border-radius: var(--brgol-raio-pill);
height: 8px;
overflow: hidden;
margin: 4px 14px;
}
.brgol-progress-fill {
background: var(--brgol-acento-verde);
height: 100%;
}
.brgol-progress-label {
font-size: 11px;
color: var(--brgol-texto-suave-claro);
padding: 0 14px;
}
/* Variantes pra usar dentro de card claro (ex: paginas/niveis.php) - o
padrão acima foi desenhado pro sidebar escuro, cor de fundo/texto erradas
num card claro (texto quase invisível). */
.brgol-progress--claro {
background: var(--brgol-fundo-claro-alt);
border: 1px solid var(--brgol-borda);
margin: 0;
}
.brgol-progress-label--claro {
color: var(--brgol-texto-suave-escuro);
padding: 4px 0 0;
}
/* Caixa de nível (gamificada, estilo "XP bar" de jogo casual) */
.brgol-nivel-box {
padding: 14px 14px 10px;
}
.brgol-nivel-header {
display: flex;
justify-content: space-between;
align-items: baseline;
color: var(--brgol-texto-claro);
font-weight: bold;
font-size: 13px;
margin-bottom: 6px;
}
.brgol-nivel-pct {
color: var(--brgol-acento-verde-claro);
font-size: 12px;
}
.brgol-progress--nivel {
height: 14px;
margin: 0 0 4px;
border: 2px solid var(--brgol-fundo-escuro-3);
}
.brgol-progress--nivel .brgol-progress-fill {
background: var(--brgol-acento-verde);
}
.brgol-nivel-box .brgol-progress-label {
padding: 0;
text-align: right;
}
/* Botão de ação rápida (sidebar escuro) - visual "selo/figurinha": cor
chapada, borda preta grossa, sombra sólida deslocada que "afunda" (some)
ao clicar. v3: sem gradiente/glow (era "glossy dashboard", leu como IA
genérica - ver histórico em design-tokens.css). */
.brgol-btn-acao {
display: block;
position: relative;
text-align: center;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro) !important;
padding: 10px 10px;
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
text-decoration: none !important;
font-family: var(--brgol-font-display);
font-size: 16px;
letter-spacing: 0.3px;
margin: 10px 14px;
cursor: pointer;
width: calc(100% - 28px);
box-sizing: border-box;
box-shadow: var(--brgol-sombra);
transition: transform 0.05s, box-shadow 0.05s;
}
.brgol-btn-acao:hover {
filter: brightness(1.06);
}
.brgol-btn-acao:active {
transform: translate(3px, 3px);
box-shadow: 0 0 0 var(--brgol-borda-forte);
}
/* Variante inline - largura pelo conteúdo, sem a margem de "botão de
sidebar de largura cheia". Usada em formulários dentro de card claro
(ex: paginas/niveis.php, .brgol-chat-form). */
.brgol-btn-acao--inline {
display: inline-block;
width: auto;
margin: 0;
padding: 8px 16px;
font-size: 13px;
}
/* Variante "fantasma" - ação secundária/custosa (ex: resetar pontos de
habilidade por dinheiro), não deve competir visualmente com a ação
primária verde. Mesma borda preta grossa/sombra "selo" de sempre, só
troca o preenchimento. */
.brgol-btn-acao--fantasma {
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro) !important;
}
.brgol-btn-acao--fantasma:hover {
filter: none;
background: var(--brgol-borda);
}
/* Item de menu (lista de ações no sidebar escuro) */
.brgol-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
text-decoration: none;
color: var(--brgol-texto-claro);
border-bottom: 1px solid var(--brgol-fundo-escuro-3);
font-size: 13px;
}
.brgol-menu-item:hover {
background: var(--brgol-fundo-escuro-2);
}
.brgol-menu-item img {
width: 16px;
height: 16px;
}
/* "Sair" dentro do grupo Minha Conta (sidebar direito) - mesmo tratamento
vermelho que o link já tinha no dropdown "Minha Conta" da barra superior
(removido junto com essa mudança, ver index.php) - vermelho é reservado
pra alerta nesta identidade, e logout é a única ação "destrutiva" desse
grupo. */
.brgol-menu-item--sair {
color: var(--brgol-acento-vermelho);
}
.brgol-menu-item--sair:hover {
background: rgba(211, 53, 43, 0.12);
}
/* Formulário de login (sidebar direito, visitante) */
.brgol-login-form {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.brgol-login-form label {
color: var(--brgol-texto-suave-claro);
font-size: 12px;
margin-top: 6px;
}
.brgol-login-form input[type="text"],
.brgol-login-form input[type="password"] {
padding: 8px 10px;
border-radius: var(--brgol-raio);
border: 1px solid var(--brgol-fundo-escuro-3);
background: var(--brgol-fundo-escuro-2);
color: var(--brgol-texto-claro);
font-size: 13px;
}
.brgol-login-form input[type="submit"] {
margin-top: 10px;
}
/* Chat geral (sala única, ver js/chat.js) - corpo claro de .brgol-card na
tela inicial (paginas/principal.php). Já foi um painel escuro no sidebar
direito; migrado pra cá porque ficava espremido numa coluna de 230px -
ver .claude/skills/brgol-frontend-layout. Cores agora seguem o corpo
claro do card (texto escuro, campos com fundo "osso"), não mais o chrome
escuro do jogo. */
.brgol-chat-mensagens {
display: flex;
flex-direction: column;
gap: 7px;
padding: 4px 2px 12px;
/* Era 240px; diminuído pra 190px (2026-09-19, pedido do usuário) agora
que tem paginação (js/chat.js) - só 10 mensagens de cada vez (não
mais 60 acumuladas rolando), sobra menos motivo pro painel ser alto.
overflow-y continua como rede de segurança pra mensagem longa/
quebrada em várias linhas dentro da página de 10. */
max-height: 190px;
overflow-y: auto;
}
.brgol-chat-msg {
font-size: 13px;
line-height: 1.4;
color: var(--brgol-texto-escuro);
word-wrap: break-word;
}
.brgol-chat-autor {
font-weight: 700;
color: var(--brgol-acento-verde-escuro);
}
.brgol-chat-hora {
color: var(--brgol-texto-suave-escuro);
font-size: 10px;
}
.brgol-chat-vazio {
color: var(--brgol-texto-suave-escuro);
font-size: 12px;
font-style: italic;
padding: 4px 0;
}
.brgol-chat-form {
display: flex;
gap: 6px;
padding: 8px 2px 0;
border-top: 1px solid var(--brgol-borda);
}
.brgol-chat-form input[type="text"] {
flex: 1;
min-width: 0;
padding: 8px 10px;
border-radius: var(--brgol-raio);
border: 1px solid var(--brgol-borda);
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
font-size: 13px;
box-sizing: border-box;
}
.brgol-chat-erro {
display: block;
padding: 6px 2px 0;
font-size: 11px;
color: var(--brgol-acento-vermelho);
}
.brgol-chat-login-aviso {
padding: 8px 2px 0;
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-chat-login-aviso a {
color: var(--brgol-acento-verde-escuro);
}
/* Medidor "de jogo" (paginas/niveis.php) - barra de nível e barras de
habilidade usam o mesmo componente: moldura preta grossa tipo selo (não
a barra fina/lisa de .brgol-progress) + marcações a cada 10% (::after,
overlay semi-transparente por cima do preenchimento - não é decoração
gratuita, é o que lê como "medidor de jogo" em vez de barra de carregamento
de site). Pedido explícito do usuário: "parecer 100% um jogo de futebol". */
.brgol-medidor {
position: relative;
height: 22px;
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
background: var(--brgol-fundo-claro-alt);
overflow: hidden;
flex: 1;
min-width: 0;
}
.brgol-medidor-fill {
height: 100%;
background: var(--brgol-acento-verde);
transition: width 350ms ease-out;
}
.brgol-medidor::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.18) 0, rgba(13, 13, 13, 0.18) 2px, transparent 2px, transparent 10%);
pointer-events: none;
}
.brgol-medidor-linha {
display: flex;
align-items: center;
gap: 8px;
}
/* Botão "+" - investe 1 ponto por clique (ajax_investir_ponto.php,
js/niveis.js), substitui o form antigo de digitar quantidade + escolher
select + confirmar. */
.brgol-medidor-btn {
flex: none;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--brgol-font-display);
font-size: 20px;
line-height: 1;
padding: 0;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro);
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
cursor: pointer;
box-shadow: var(--brgol-sombra);
transition: transform 0.05s, box-shadow 0.05s;
}
.brgol-medidor-btn:hover {
filter: brightness(1.06);
}
.brgol-medidor-btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 var(--brgol-borda-forte);
}
.brgol-medidor-btn:disabled {
opacity: 0.4;
cursor: default;
filter: none;
box-shadow: none;
}
/* Pop rápido no medidor ao investir um ponto (juice, ver skill
brgol-frontend-layout) - dispara via JS toda vez que a barra cresce. */
.brgol-medidor--pop {
animation: brgolMedidorPop 400ms ease-out both;
}
@keyframes brgolMedidorPop {
0% { box-shadow: 0 0 0 3px rgba(76, 179, 36, 0.5); }
100% { box-shadow: 0 0 0 0 rgba(76, 179, 36, 0); }
}
/* ==========================================================================
Confronto ao vivo (paginas/confronto.php, js/confronto.js) - placar em
tempo real de uma partida, com jogadores online e posição na tabela de
cada time (brgol-campeonatos). Referência: print que o usuário mandou de
um jogo parecido (crachá "AO VIVO" + cronômetro, escudo+nome+contadores
por time, barra de domínio embaixo). */
.brgol-confronto {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 520px;
margin: 0 auto;
}
.brgol-confronto-topo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.brgol-confronto-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 5px 12px;
border-radius: var(--brgol-raio-pill);
border: 2px solid var(--brgol-borda-forte);
color: #fff;
}
.brgol-confronto-status--vivo {
background: var(--brgol-acento-vermelho);
}
.brgol-confronto-status--fim {
background: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: brgolConfrontoPisca 1s ease-in-out infinite;
}
@keyframes brgolConfrontoPisca {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.brgol-confronto-nota {
font-size: 12px;
font-weight: 600;
color: var(--brgol-texto-suave-escuro);
border: 1px solid var(--brgol-borda);
border-radius: var(--brgol-raio-pill);
padding: 4px 10px;
cursor: help;
}
.brgol-confronto-times {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.brgol-confronto-time {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.brgol-confronto-time img {
border-radius: var(--brgol-raio);
}
.brgol-confronto-nome {
font-weight: 700;
color: var(--brgol-texto-escuro);
text-decoration: none;
}
.brgol-confronto-nome:hover {
color: var(--brgol-acento-verde-escuro);
}
.brgol-confronto-posicao {
margin: 0;
padding: 3px 10px;
font-size: 12px;
}
.brgol-confronto-online {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brgol-acento-verde);
border: 1px solid var(--brgol-borda-forte);
}
/* Top 5 artilheiros da rodada de cada time - lista compacta embaixo do
escudo/online, mesma paleta suave de .brgol-confronto-online. */
.brgol-confronto-artilheiros-titulo {
margin-top: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-artilheiros {
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
max-width: 160px;
font-size: 12px;
}
.brgol-confronto-artilheiros li {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
color: var(--brgol-texto-escuro);
}
/* Bolinha de online/offline à esquerda do nome - mesmo padrão visual do
.brgol-confronto-online-dot (só o time inteiro), mas cinza quando o
jogador específico está offline (janela de 600s, ver
brgol_top_artilheiros_rodada()). */
.brgol-confronto-artilheiro-dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brgol-texto-suave-claro);
border: 1px solid var(--brgol-borda-forte);
}
.brgol-confronto-artilheiro-dot--online {
background: var(--brgol-acento-verde);
}
.brgol-confronto-artilheiro-nome {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brgol-confronto-artilheiro-gols {
font-weight: 700;
flex: none;
}
.brgol-confronto-artilheiros-vazio {
justify-content: center !important;
color: var(--brgol-texto-suave-escuro);
font-style: italic;
}
.brgol-confronto-placar {
font-family: var(--brgol-font-display);
font-size: 44px;
color: var(--brgol-texto-escuro);
white-space: nowrap;
padding: 0 6px;
}
.brgol-confronto-x {
color: var(--brgol-texto-suave-escuro);
font-size: 28px;
margin: 0 4px;
}
/* % de domínio dos DOIS times, sempre visível em cima da barra (pedido
explícito do usuário) - cada número encostado na sua borda, alinhado com
o time correspondente logo acima. Era um número só, centralizado e da
casa, até 2026-09-17: num placar unilateral a tela mostrava só "0%", que
lê como "não aconteceu nada" em vez de "o visitante domina tudo".
Texto em preto, não na cor do clube: a cor identifica na barra (bloco
grande), mas num número de 13px times amarelos/claros ficariam ilegíveis
sobre o fundo osso. Quem diz de quem é a % aqui é a POSIÇÃO.
0x0 mostra 50%/50% (ninguém domina ainda). */
.brgol-confronto-medidor-pct {
display: flex;
justify-content: space-between;
font-family: var(--brgol-font-display);
font-size: 13px;
color: var(--brgol-texto-escuro);
margin-bottom: 2px;
}
/* Barra de domínio - reaproveita a moldura "selo" de .brgol-medidor
(niveis.php: borda grossa, cantos, marcações de 10% via ::after), mas com
dois preenchimentos (casa/fora) em vez de um só. `.brgol-medidor` foi
desenhado pra ficar dentro de uma linha horizontal (.brgol-medidor-linha)
onde `flex: 1 1 0%` estica ele no espaço que sobra ao lado do botão "+" -
aqui o pai (.brgol-confronto) é uma coluna, e nesse eixo o mesmo
flex-basis:0% zera a altura em vez de esticar (não tem "espaço sobrando"
pra crescer numa coluna que só cresce até o tamanho do conteúdo). `flex:
none` cancela isso e deixa a altura fixa de verdade. */
.brgol-confronto-medidor {
display: flex;
flex: none;
height: 14px;
}
/* Cada lado usa a COR DE IDENTIDADE do próprio clube, vinda inline do PHP
(configs/cores_times.php) - o `background` aqui é só o fallback pra quando
o inline não vier. Era verde (casa) / vermelho (fora) até 2026-09-17,
quando o usuário apontou que essa dupla lê como "certo/errado" em vez de
"dois times"; a tentativa seguinte (preto x osso) resolveu a semântica mas
ficou apagada, e num placar unilateral a barra toda osso parecia vazia.
Ver skill brgol-campeonatos, "Tela de confronto ao vivo" (v5 e v6).
A divisa branca entre os dois lados não é decoração: é o que mantém a
proporção legível quando os dois clubes têm a MESMA cor - acontece de
verdade dentro de um mesmo grupo regional (Botafogo-SP x XV de
Piracicaba, Villa Nova x Tombense, Cascavel x Criciúma). Ela é box-shadow
no bloco da casa, e não border-left no do visitante, de propósito: borda
entra no fluxo do flex e sobraria um risco branco mesmo com o lado em
`width: 0%`; o shadow não ocupa espaço e o overflow:hidden da moldura
recorta ele nos extremos. */
.brgol-confronto-medidor-casa {
height: 100%;
background: var(--brgol-fundo-escuro);
box-shadow: 3px 0 0 var(--brgol-fundo-claro);
transition: width 400ms ease-out;
}
.brgol-confronto-medidor-fora {
height: 100%;
background: var(--brgol-fundo-escuro-3);
transition: width 400ms ease-out;
}
/* Nota de secagem (brgol-secar) - tom de aviso (borda vermelha fina, sem
preencher com a cor toda - não é erro, é só informativo). */
.brgol-confronto-secar-nota {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--brgol-texto-escuro);
background: var(--brgol-fundo-claro-alt);
border: 1px solid var(--brgol-acento-vermelho);
border-radius: var(--brgol-raio);
padding: 8px 12px;
margin-top: 8px;
}
.brgol-confronto-secar-nota i {
color: var(--brgol-acento-vermelho);
flex: none;
}
.brgol-confronto-legenda {
text-align: center;
font-size: 13px;
color: var(--brgol-texto-suave-escuro);
}
/* paginas/niveis.php inteira (card "Minha Evolução" + tabela completa)
ficava esticada até a largura cheia de #principal - o usuário pediu
"quanto menos espaço melhor" (mesmo ajuste já aplicado em vip.php e
gol.php: menos espaço lateral desperdiçado, não uma tela cheia de
barra vazia). Os medidores (.brgol-medidor) já são flexíveis
(flex:1), então encolhem sozinhos com o container, sem precisar
mudar mais nada dentro dos cards. */
.brgol-niveis-pagina {
max-width: 480px;
margin: 0 auto;
}
/* Nível + progresso pro próximo, no topo do card único "Minha Evolução"
(era um card separado - o usuário pediu pra juntar numa seção só). */
.brgol-evolucao-nivel {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-evolucao-nivel .brgol-habilidade-banco-valor {
display: block;
margin-bottom: 8px;
}
.brgol-habilidade-banco {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 18px;
}
.brgol-habilidade-banco-valor {
font-family: var(--brgol-font-display);
font-size: 36px;
color: var(--brgol-acento-verde-escuro);
line-height: 1;
}
.brgol-habilidade-banco-label {
font-size: 13px;
}
.brgol-habilidade-item {
margin-bottom: 16px;
}
.brgol-habilidade-cabecalho {
display: flex;
justify-content: space-between;
align-items: baseline;
font-weight: 700;
margin-bottom: 6px;
}
.brgol-habilidade-chance {
font-family: var(--brgol-font-display);
color: var(--brgol-acento-verde-escuro);
font-size: 16px;
}
.brgol-habilidade-reset {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Linha do nível atual do jogador, na tabela de Níveis - sem isso a tabela
é 100 linhas idênticas, sem nenhuma pista de onde o jogador está. */
.brgol-nivel-linha-atual {
background: var(--brgol-fundo-claro-alt);
font-weight: 700;
}
.brgol-nivel-linha-atual td {
border-left: 4px solid var(--brgol-acento-verde);
}
/* Pill de estatística (inline, dentro de cards claros) */
.brgol-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
padding: 4px 12px;
border-radius: var(--brgol-raio-pill);
font-size: 12px;
white-space: nowrap;
border: 1px solid var(--brgol-borda);
}
.brgol-pill-label {
color: var(--brgol-texto-suave-escuro);
}
.brgol-pill-value {
font-weight: bold;
}
/* Pill clicável (links de navegação dentro de um card claro, ex: hub de
Rankings/Campeonatos) - mesma forma do .brgol-pill, mas como link */
.brgol-link-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
padding: 8px 16px;
border-radius: var(--brgol-raio-pill);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
border: 1px solid var(--brgol-borda);
text-decoration: none;
margin: 0 6px 6px 0;
}
.brgol-link-pill:hover {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
.brgol-link-pill--ativo {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
/* Subseção genérica DENTRO de um card (paginas/equipe.php: Administradores/
Moderadores/Divulgadores; paginas/premios.php: Série A/B/C/Divisão de
Acesso dentro do card "Brasileiro") - rótulo pequeno igual o de
.brgol-form-grupo label, em vez de solto com
. Nasceu
em equipe.php (2026-09-19) mas o nome já era genérico o bastante pra
reaproveitar sem precisar de uma cópia quase idêntica. */
.brgol-subsecao {
margin-bottom: 18px;
}
.brgol-subsecao:last-child {
margin-bottom: 0;
}
.brgol-subsecao-titulo {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--brgol-texto-suave-escuro);
margin-bottom: 8px;
}
/* Vitrine de premiações (paginas/usuario.php, card "Premiações",
2026-09-19) - 1 .brgol-subsecao por período (Hora/Rodada/Temporada),
cada uma com os 3 selos (ouro/prata/bronze) + quantas vezes já foi
conquistado. Grid em vez de empilhado - os 3 períodos cabem lado a
lado em tela larga, colapsa pra 1 coluna em tela estreita sozinho. */
.brgol-premiacoes-grade {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 16px;
}
.brgol-premiacao-itens {
display: flex;
gap: 14px;
}
.brgol-premiacao-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.brgol-premiacao-item img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--brgol-borda);
background: #fff;
}
.brgol-premiacao-item span {
font-family: var(--brgol-font-display);
font-size: 13px;
color: var(--brgol-texto-escuro);
}
/* Ainda não conquistado (quantidade 0) - esmaecido/cinza, pra distinguir
de cara do que já foi ganho pelo menos 1x (pedido do usuário: "destaque
bonito" pro que já foi conquistado - contraste é o que cria o destaque). */
.brgol-premiacao-item--vazio img {
opacity: 0.3;
filter: grayscale(1);
}
.brgol-premiacao-item--vazio span {
color: var(--brgol-texto-suave-escuro);
}
/* Premiações do TIME (paginas/time.php, 2026-09-19) - mesma ideia da
vitrine de premiações do perfil de usuário (.brgol-premiacoes-grade/
.brgol-premiacao-itens, reaproveitados), só que sem imagem própria por
competição (Estadual/Brasileiro/Copa do Brasil/Copa Representantes não
têm um PNG dedicado como hora/rodada/temporada têm) - um círculo
colorido (ouro/prata/bronze, mesmos tokens do pódio de ranking) com um
ícone de FontAwesome no lugar de um ![]()
. */
.brgol-premiacao-item-time {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.brgol-premiacao-item-time i {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
.brgol-premiacao-item-time--ouro i {
background: var(--brgol-acento-vip);
}
.brgol-premiacao-item-time--prata i {
background: var(--brgol-acento-prata);
}
.brgol-premiacao-item-time--bronze i {
background: var(--brgol-acento-bronze);
}
.brgol-premiacao-item-time span {
font-family: var(--brgol-font-display);
font-size: 13px;
color: var(--brgol-texto-escuro);
}
.brgol-premiacao-item-time--vazio i {
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-suave-escuro);
border: 1px solid var(--brgol-borda);
}
.brgol-premiacao-item-time--vazio span {
color: var(--brgol-texto-suave-escuro);
}
/* Valor de Passe (paginas/usuario.php, card dedicado, 2026-09-19) -
pedido do usuário pra ficar "bonito" em vez de uma pill pequena
perdida dentro do card de Ações - número grande na tipografia de
destaque do jogo, mesma ideia de .brgol-recorde-valor mas maior
(é o conteúdo principal do card, não um detalhe de rodapé). */
.brgol-passe-valor {
font-family: var(--brgol-font-display);
font-size: 26px;
color: var(--brgol-acento-verde-escuro);
letter-spacing: 0.3px;
}
/* Título de agrupamento ENTRE cards (não dentro de 1 card) - "Ranking
Pessoal" / "Prêmios de Campeonato" em paginas/premios.php, 2026-09-19.
Mais chamativo que .brgol-subsecao-titulo (que vive dentro de um card
só) porque esse aqui separa 2 grades de cards inteiras. */
.brgol-secao-titulo {
font-family: var(--brgol-font-display);
font-size: 15px;
letter-spacing: 0.3px;
/* --brgol-texto-claro (quase branco) - errado aqui: isso é pro fundo
ESCURO dos cards/sidebar, mas este título vive direto em cima do
fundo claro de #principal - ficava "transparente" (usuário reportou
com print, só a borda verde aparecia). --brgol-texto-escuro é o
mesmo tom usado no resto do texto solto fora de card. */
color: var(--brgol-texto-escuro);
margin: 20px 0 10px;
padding-left: 10px;
border-left: 4px solid var(--brgol-acento-verde);
}
.brgol-secao-titulo:first-child {
margin-top: 0;
}
/* Grade responsiva de cards (paginas/premios.php, 2026-09-19) - o usuário
pediu pra aproveitar melhor o espaço em telas grandes (cards lado a
lado) em vez de empilhar tudo numa coluna só até 560px como a v1 fazia;
em telas estreitas, `auto-fit`/`minmax` colapsa pra 1 coluna sozinho,
sem media query. `align-items:start` evita que um card baixo (ex:
"Recordes Históricos" fechado) estique pra ficar do tamanho do vizinho
mais alto na mesma linha. */
.brgol-premios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
align-items: start;
}
.brgol-premios-grid > .brgol-card {
margin-bottom: 0;
}
/* "Brasileiro" (v2, 2026-09-19) - o usuário pediu pra já vir aberto, mas
aberto ele fica bem mais alto que os outros cards da mesma grade (4
subdivisões). Numa grid comum isso estica a ALTURA DA LINHA inteira
onde ele está (align-items:start só evita o CARD esticar, não evita a
linha crescer) e empurra pra baixo qualquer card da linha SEGUINTE -
exatamente o que o usuário reportou ("empurrando Copa Representantes
pra baixo"). Fix: tira o Brasileiro do fluxo de colunas
(`grid-column:1/-1`, ocupa a linha inteira sozinho) e ele fica por
ÚLTIMO no HTML - os outros 3 cards compactos (Estadual/Copa do
Brasil/Copa Representantes) preenchem a primeira linha sem interrupção,
e o Brasileiro cresce livremente na própria linha depois deles, sem
afetar mais ninguém. */
.brgol-premios-grid-full {
grid-column: 1 / -1;
}
/* As 4 subdivisões (Série A/B/C/Divisão de Acesso) dentro do card
"Brasileiro" full-width - sem isso, ficariam empilhadas verticalmente
desperdiçando toda a largura nova que o card ganhou. */
.brgol-premios-grid-interna {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 4px 24px;
}
/* Rola por dentro em vez de estourar a largura do card em telas estreitas
(paginas/classificacao.php - 8 colunas não cabem em ~375px). */
.brgol-tabela-scroll {
overflow-x: auto;
}
/* Mini-tabela de ranking */
.brgol-rank-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.brgol-rank-table th {
text-align: left;
padding: 6px 10px;
color: var(--brgol-texto-suave-escuro);
font-weight: normal;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-rank-table td {
padding: 6px 10px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-rank-table tr:nth-child(even) {
background: var(--brgol-fundo-claro-alt);
}
/* Linha do próprio time (paginas/classificacao.php) - precisa vir DEPOIS
do nth-child acima na cascata (mesma especificidade, então a ordem no
arquivo decide) pra ganhar mesmo em linha par/ímpar. */
.brgol-rank-table tr.brgol-rank-linha--meu {
background: rgba(76, 179, 36, 0.14);
font-weight: 700;
}
/* Grid de 2 ou 3 colunas para cards lado a lado (ex: os rankings de
destaque na página inicial) - empilha em 1 coluna se a tela ficar
estreita. */
.brgol-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.brgol-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
@media (max-width: 900px) {
.brgol-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.brgol-grid-2,
.brgol-grid-3 { grid-template-columns: 1fr; }
}
/* Célula de time+jogador na mini-tabela de ranking - ícone do usuário +
escudo real + nome, bem colados um no outro (pedido do usuário - "sem
muito espaçamento") - é onde a variedade de cor do ranking vem (ver
nota do componente 2 em components.md), não de um sistema de acento. */
.brgol-rank-time {
display: flex;
align-items: center;
gap: 6px;
}
.brgol-rank-time img {
width: 28px;
height: 28px;
object-fit: contain;
flex: none;
}
/* Selo de cargo (P = presidente, R = representante) do lado direito do
nome nos rankings (brgol_render_selo_cargo(), 2026-09-19) - PNG real
(imagens/icones/presidente.png/representante.png), fundo já removido.
Precisa de MAIS especificidade que `.brgol-rank-time img` acima (que
pega TODO `![]()
` dentro da linha, incluindo o escudo de 28px) - senão
o selo, bem menor, herdava 28px também. `.brgol-rank-time` já é
flex+gap, então o espaçamento em relação ao nome do lado vem de graça,
sem margin manual. */
.brgol-rank-time .brgol-selo-cargo {
width: 16px;
height: 16px;
object-fit: contain;
flex: none;
}
/* Tag "ADMIN" (brgol_render_selo_cargo(), 2026-09-19, pedido do usuário -
"ao lado do nome em todo lugar que o admin aparece, seja chat, top
rodada etc") - texto, não imagem (não tem ícone próprio pronto, e um
texto já comunica "cargo do JOGO" de um jeito bem diferente de P/R, que
são cargos DO TIME). Cor própria (fundo+borda), não herda do container -
aparece tanto em fundo claro (linha de ranking) quanto escuro (header de
card, chat), então não pode depender do contexto ao redor pra ter
contraste. Vermelho é o único acento do jogo reservado pra "alerta/
destaque raro" (design-tokens.css) - autoridade de admin é exatamente
esse tipo de destaque raro, então reaproveita em vez de introduzir uma
cor nova. */
.brgol-selo-admin {
display: inline-flex;
align-items: center;
flex: none;
font-family: var(--brgol-font-corpo);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--brgol-texto-claro);
background: var(--brgol-acento-vermelho);
border-radius: var(--brgol-raio-pill);
padding: 2px 7px;
line-height: 1.4;
}
/* Nome/time deixaram de ser link azul sublinhado padrão do navegador
(pedido do usuário - "deixar gamificado, usar a tipagia padrão do
jogo") - mesma tipografia/cor de qualquer texto do jogo, sem
text-decoration; só reage no hover, igual .brgol-chat-autor. */
.brgol-rank-time a,
/* paginas/classificacao.php usa .brgol-rank-time direto num só (escudo
+ nome debaixo do mesmo link, não dois separados como em
principal.php) - precisa da MESMA cor/peso/sem-sublinhado quando o
próprio elemento com a classe é o link, não só um `a` lá dentro. */
a.brgol-rank-time {
color: var(--brgol-texto-escuro);
font-weight: 600;
text-decoration: none;
}
.brgol-rank-time a:hover,
a.brgol-rank-time:hover {
color: var(--brgol-acento-verde-escuro);
}
/* Avatar compacto (ver brgol_render_avatar_mini() em
configs/ranking_helpers.php) - a mesma "moldura selo" do .brgol-avatar
grande do #direita, reduzida pra caber numa linha de tabela sem
esticar demais a altura da linha. Aumentado de 20px pra 28px (pedido
do usuário - com uma foto de verdade enviada, 20px "quase não
aparece"; a inicial-em-círculo lia bem pequena, mas uma foto precisa
de mais pixels pra ficar reconhecível). */
.brgol-rank-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brgol-fundo-escuro-2);
border: 2px solid var(--brgol-borda-forte);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--brgol-font-display);
font-size: 13px;
line-height: 1;
color: var(--brgol-texto-claro);
flex: none;
overflow: hidden;
box-sizing: border-box;
}
.brgol-rank-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brgol-rank-avatar--vip {
border-color: var(--brgol-acento-vip);
}
.brgol-rank-pos {
font-family: var(--brgol-font-display);
font-size: 16px;
color: var(--brgol-texto-suave-escuro);
width: 22px;
}
/* Pódio do 1º/2º/3º lugar (Melhores da Hora/Rodada/Temporada) - ouro,
prata e bronze, mesmo significado de "recorde"/Vip já usado no resto
do jogo (ver .brgol-card-header--recorde), não uma cor nova só pra
decorar. Só as posições 1-3 recebem isso - 4º-10º ficam no padrão,
pra não pesar a tabela nem crescer a altura da linha (pedido do
usuário - "sem ficar muito grande"). */
.brgol-rank-linha--topo {
background: rgba(232, 178, 58, 0.12);
}
.brgol-rank-linha--prata {
background: rgba(173, 181, 189, 0.16);
}
.brgol-rank-linha--bronze {
background: rgba(205, 127, 50, 0.14);
}
.brgol-rank-badge-topo,
.brgol-rank-badge-prata,
.brgol-rank-badge-bronze {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: var(--brgol-fundo-escuro);
font-size: 12px;
}
.brgol-rank-badge-topo {
background: var(--brgol-acento-vip);
}
.brgol-rank-badge-prata {
background: var(--brgol-acento-prata);
}
.brgol-rank-badge-bronze {
background: var(--brgol-acento-bronze);
}
.brgol-rank-table td.brgol-rank-valor {
text-align: right;
font-family: var(--brgol-font-display);
font-size: 15px;
}
.brgol-rank-table thead th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
/* Paginação das 6 telas dedicadas de ranking (brgol_render_paginacao(),
configs/ranking_helpers.php) - Anterior/Próxima + "Página X de Y".
Nunca aparece na mini-prévia da home (só 10 linhas, sem paginação). */
.brgol-paginacao {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--brgol-borda);
background: var(--brgol-fundo-claro-alt);
}
.brgol-paginacao-botao {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--brgol-borda-forte);
background: var(--brgol-fundo-claro);
color: var(--brgol-texto-escuro);
font-family: var(--brgol-font-corpo);
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.brgol-paginacao-botao:hover {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
.brgol-paginacao-botao--desativado {
opacity: 0.4;
cursor: default;
}
.brgol-paginacao-botao--desativado:hover {
background: var(--brgol-fundo-claro);
color: var(--brgol-texto-escuro);
border-color: var(--brgol-borda-forte);
}
.brgol-paginacao-info {
font-family: var(--brgol-font-corpo);
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
white-space: nowrap;
}
.brgol-texto-vazio {
color: var(--brgol-texto-suave-escuro);
font-style: italic;
margin: 0;
}
.brgol-texto-ajuda {
color: var(--brgol-texto-suave-escuro);
font-size: 13px;
line-height: 1.5;
margin: 0 0 16px;
}
/* Tabela genérica de relatório admin (paginas/suspeitas_autoclicker.php) -
linhas zebradas, cabeçalho fixo em maiúsculas, mesma paleta preto/verde
do resto do site. */
.brgol-tabela-relatorio {
width: 100%;
border-collapse: collapse;
font-family: var(--brgol-font-corpo);
font-size: 13px;
}
.brgol-tabela-relatorio th {
text-align: left;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--brgol-texto-suave-escuro);
padding: 8px 10px;
border-bottom: 2px solid var(--brgol-borda-forte);
}
.brgol-tabela-relatorio td {
padding: 8px 10px;
border-bottom: 1px solid var(--brgol-borda-fraca, var(--brgol-borda-forte));
color: var(--brgol-texto-escuro);
}
.brgol-tabela-relatorio tbody tr:nth-child(even) {
background: var(--brgol-fundo-claro);
}
.brgol-tabela-relatorio a {
color: var(--brgol-acento-verde-escuro);
font-weight: 700;
text-decoration: none;
}
.brgol-tabela-relatorio a:hover {
text-decoration: underline;
}
.brgol-tabela-relatorio-mono {
font-family: monospace;
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
}
/* Lista de passos numerados (paginas/como_jogar.php) - mesma "moldura selo"
verde/preto dos outros badges do jogo (.brgol-chip-atual, .brgol-medidor),
só que redonda e com o número em Anton, pra reforçar hierarquia sem
precisar de imagem nenhuma. */
.brgol-passo-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.brgol-passo {
display: flex;
align-items: flex-start;
gap: 12px;
}
.brgol-passo-num {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--brgol-acento-verde);
border: 2px solid var(--brgol-borda-forte);
box-shadow: 2px 2px 0 var(--brgol-borda-forte);
color: var(--brgol-fundo-escuro);
font-family: var(--brgol-font-display);
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.brgol-passo-texto {
padding-top: 4px;
}
.brgol-passo-texto strong {
color: var(--brgol-texto-escuro);
}
/* Pacotes de Vip com dinheiro real (paginas/vip.php) - grade de tiles
"selo" (mesmo vocabulário de .brgol-passo-num/.brgol-btn-acao: cor
chapada, borda preta grossa, sombra sólida deslocada, sem gradiente).
O card em si fica no --brgol-fundo-claro-alt (não pintado de verde -
verde é só pro badge de desconto, que é o elemento de destaque real). */
.brgol-vip-pacotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 10px;
}
.brgol-vip-pacote {
background: var(--brgol-fundo-claro-alt);
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
box-shadow: var(--brgol-sombra);
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.brgol-vip-pacote-desconto {
align-self: flex-start;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro);
font-family: var(--brgol-font-display);
font-size: 11px;
padding: 2px 8px;
border-radius: var(--brgol-raio-pill);
border: 2px solid var(--brgol-borda-forte);
margin-bottom: 4px;
}
.brgol-vip-pacote-dias {
font-family: var(--brgol-font-display);
font-size: 22px;
color: var(--brgol-texto-escuro);
}
.brgol-vip-pacote-dias span {
font-family: var(--brgol-font-corpo);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
color: var(--brgol-texto-suave-escuro);
}
.brgol-vip-pacote-equivale {
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
margin-bottom: 4px;
}
.brgol-vip-pacote-preco-original {
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
text-decoration: line-through;
}
.brgol-vip-pacote-preco {
font-family: var(--brgol-font-display);
font-size: 24px;
color: var(--brgol-acento-verde-escuro);
}
.brgol-vip-pacote-por-dia {
font-size: 11px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-vip-pacote-doar {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--brgol-acento-verde-escuro);
}
.brgol-vip-pacote-comprar {
margin-top: 10px;
width: 100%;
text-align: center;
}
/* Comparativo Normal x Vip (paginas/vip.php) - substitui a antiga
mais leve que
um .brgol-card inteiro por pergunta (seria uma parede de barras pretas
pra ~6 perguntas) - borda fina + fundo claro, reaproveitando o
comportamento (cursor, some marcador nativo, chevron que gira) de
.brgol-niveis-tabela acima, só com um visual mais discreto. */
.brgol-faq {
display: flex;
flex-direction: column;
gap: 8px;
}
.brgol-faq-item {
border: 1px solid var(--brgol-borda);
border-radius: var(--brgol-raio);
background: var(--brgol-fundo-claro-alt);
overflow: hidden;
}
.brgol-faq-pergunta {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
font-weight: 700;
font-size: 13px;
color: var(--brgol-texto-escuro);
}
.brgol-faq-resposta {
padding: 0 14px 14px;
font-size: 13px;
line-height: 1.6;
color: var(--brgol-texto-escuro);
}
/* Legenda dos selos de premiação (dentro da pergunta "O que significa cada
ícone de premiação?") - mostra os 3 arquivos de verdade (ouro/prata/
bronze) de imagens/icones/ lado a lado com a explicação, em vez de só
descrever em texto - o usuário pediu explicitamente pra explicar o
significado de cada ícone aqui. */
.brgol-selo-legenda-lista {
margin-top: 10px;
}
.brgol-selo-legenda {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
}
.brgol-selo-legenda + .brgol-selo-legenda {
border-top: 1px solid var(--brgol-borda);
}
.brgol-selo-legenda-icones {
display: flex;
gap: 4px;
flex: none;
}
.brgol-selo-legenda-icones img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--brgol-borda);
background: #fff;
}
.brgol-selo-legenda-texto {
font-size: 13px;
line-height: 1.5;
color: var(--brgol-texto-escuro);
}
/* Feed de Movimentações (paginas/movimentacoes.php, 2026-09-19) - troca
de time e contratação, uma linha por evento (ícone + frase + hora),
mais parecido com uma lista de notificação do que uma tabela de
ranking (não tem posição/gols, só uma frase). */
.brgol-movimentacoes {
display: flex;
flex-direction: column;
gap: 10px;
}
.brgol-movimentacao {
display: flex;
align-items: flex-start;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-movimentacao:last-child {
border-bottom: none;
padding-bottom: 0;
}
.brgol-movimentacao-icone {
flex: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-acento-verde-escuro);
font-size: 12px;
}
.brgol-movimentacao-texto {
flex: 1;
min-width: 0;
font-size: 13px;
line-height: 1.5;
color: var(--brgol-texto-escuro);
}
.brgol-movimentacao-texto a {
color: var(--brgol-texto-escuro);
font-weight: 700;
text-decoration: none;
}
.brgol-movimentacao-texto a:hover {
color: var(--brgol-acento-verde-escuro);
}
.brgol-movimentacao-hora {
flex: none;
font-size: 11px;
color: var(--brgol-texto-suave-escuro);
white-space: nowrap;
}
.brgol-card-body {
padding: 16px;
color: var(--brgol-texto-escuro);
}
/* Recorde histórico (paginas/principal.php, brgol_card_recorde()) - dourado
em vez do verde padrão do header, reaproveitando --brgol-acento-vip que
já carrega esse significado de "status especial" em outro lugar (anel do
avatar, chip Vip, estrela de level up) - não é um acento novo inventado
só pra variar cor, é a mesma cor com o mesmo significado. Diferencia
visualmente de "Top" (ranking da janela atual, zera) pra "Recorde"
(histórico, permanente). */
.brgol-card-header--recorde {
border-left-color: var(--brgol-acento-vip);
}
/* .brgol-rank-valor sozinho não estiliza nada fora de .brgol-rank-table
(é um seletor composto, `td.brgol-rank-valor`) - este card usa
.brgol-rank-time (flex) sem tabela, por isso precisa do próprio estilo
completo, não só um empurrão de margin. */
.brgol-recorde-valor {
margin-left: auto;
font-family: var(--brgol-font-display);
font-size: 15px;
white-space: nowrap;
}
/* Badge "Atual" (ex: campeonato em andamento) - substitui a antiga variante
de cor laranja do header; encoda o estado em texto, não em cor decorativa. */
.brgol-chip-atual {
margin-left: auto;
font-family: var(--brgol-font-corpo);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--brgol-acento-verde-claro);
border: 1px solid var(--brgol-acento-verde-claro);
border-radius: var(--brgol-raio-pill);
padding: 2px 9px;
}
/* --claro: mesmo chip, mas pro texto ler dentro de um card claro (fundo
osso/branco) - o verde-claro padrão foi pensado pra contraste sobre
fundo escuro (card-header preto) e ficaria com contraste ruim aqui
(verde claro sobre fundo quase-branco). */
.brgol-chip-atual--claro {
color: var(--brgol-acento-verde-escuro);
border-color: var(--brgol-acento-verde-escuro);
}
/* Título de grupo dentro do sidebar escuro (esquerda/direita) */
.brgol-stat-group-title {
background: var(--brgol-fundo-escuro-2);
color: var(--brgol-texto-claro);
padding: 10px 14px;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Linha de stat (sidebar escuro) */
.brgol-stat-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
color: var(--brgol-texto-claro);
border-bottom: 1px solid var(--brgol-fundo-escuro-3);
font-size: 13px;
}
.brgol-stat-label {
flex: 1;
color: var(--brgol-texto-suave-claro);
}
.brgol-stat-value {
font-weight: bold;
}
.brgol-stat-value a {
color: var(--brgol-texto-claro);
}
/* Linha de chute liberado (Falta/Pênalti quando já pode chutar) - vira um
link inteiro, com o valor destacado em verde pra chamar atenção, mesma
lógica de "pronto pra ação" dos botões gamificados. */
.brgol-stat-row--disponivel {
text-decoration: none;
cursor: pointer;
}
.brgol-stat-row--disponivel:hover {
background: var(--brgol-fundo-escuro-2);
}
/* "Disponível!" virou um selo/botão de verdade (pedido do usuário
2026-09-18, "gamificado verde, bem cara de video game") em vez de só
texto verde - mesma identidade "selo" de sempre (cor chapada, borda
preta grossa, sombra sólida deslocada, SEM gradiente/glow - ver
histórico da paleta no topo desta skill) só que em miniatura, pra
caber ao lado do rótulo "Falta"/"Pênalti" na linha do sidebar. O
pulso contínuo (`brgolDisponivelPulso`) chama atenção pro chute liberado
sem precisar de cor/forma nova - desativado em prefers-reduced-motion
junto com o resto do "juice" do jogo. */
.brgol-stat-valor-disponivel {
display: inline-flex;
align-items: center;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro) !important;
font-family: var(--brgol-font-display);
font-size: 11px;
letter-spacing: 0.4px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
border: 2px solid var(--brgol-borda-forte);
box-shadow: 2px 2px 0 var(--brgol-borda-forte);
animation: brgolDisponivelPulso 1.6s ease-in-out infinite;
}
.brgol-stat-row--disponivel:hover .brgol-stat-valor-disponivel {
filter: brightness(1.08);
}
@keyframes brgolDisponivelPulso {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
/* Juice do instante em que o cooldown chega a zero (js/tempo.js,
brgolContagem) - pop + flash verde, uma vez só, na troca da linha de
cronômetro pra link "Disponível!". Pedido explícito do usuário pra
gamificar esse momento. */
.brgol-stat-row--pop {
animation: brgolStatDisponivelPop 600ms ease-out both;
}
@keyframes brgolStatDisponivelPop {
0% { transform: scale(0.92); background: rgba(76, 179, 36, 0.4); }
60% { transform: scale(1.03); }
100% { transform: scale(1); background: transparent; }
}
.brgol-oculto {
display: none;
}
/* Barra de progresso */
.brgol-progress {
background: var(--brgol-fundo-escuro-3);
border-radius: var(--brgol-raio-pill);
height: 8px;
overflow: hidden;
margin: 4px 14px;
}
.brgol-progress-fill {
background: var(--brgol-acento-verde);
height: 100%;
}
.brgol-progress-label {
font-size: 11px;
color: var(--brgol-texto-suave-claro);
padding: 0 14px;
}
/* Variantes pra usar dentro de card claro (ex: paginas/niveis.php) - o
padrão acima foi desenhado pro sidebar escuro, cor de fundo/texto erradas
num card claro (texto quase invisível). */
.brgol-progress--claro {
background: var(--brgol-fundo-claro-alt);
border: 1px solid var(--brgol-borda);
margin: 0;
}
.brgol-progress-label--claro {
color: var(--brgol-texto-suave-escuro);
padding: 4px 0 0;
}
/* Caixa de nível (gamificada, estilo "XP bar" de jogo casual) */
.brgol-nivel-box {
padding: 14px 14px 10px;
}
.brgol-nivel-header {
display: flex;
justify-content: space-between;
align-items: baseline;
color: var(--brgol-texto-claro);
font-weight: bold;
font-size: 13px;
margin-bottom: 6px;
}
.brgol-nivel-pct {
color: var(--brgol-acento-verde-claro);
font-size: 12px;
}
.brgol-progress--nivel {
height: 14px;
margin: 0 0 4px;
border: 2px solid var(--brgol-fundo-escuro-3);
}
.brgol-progress--nivel .brgol-progress-fill {
background: var(--brgol-acento-verde);
}
.brgol-nivel-box .brgol-progress-label {
padding: 0;
text-align: right;
}
/* Botão de ação rápida (sidebar escuro) - visual "selo/figurinha": cor
chapada, borda preta grossa, sombra sólida deslocada que "afunda" (some)
ao clicar. v3: sem gradiente/glow (era "glossy dashboard", leu como IA
genérica - ver histórico em design-tokens.css). */
.brgol-btn-acao {
display: block;
position: relative;
text-align: center;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro) !important;
padding: 10px 10px;
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
text-decoration: none !important;
font-family: var(--brgol-font-display);
font-size: 16px;
letter-spacing: 0.3px;
margin: 10px 14px;
cursor: pointer;
width: calc(100% - 28px);
box-sizing: border-box;
box-shadow: var(--brgol-sombra);
transition: transform 0.05s, box-shadow 0.05s;
}
.brgol-btn-acao:hover {
filter: brightness(1.06);
}
.brgol-btn-acao:active {
transform: translate(3px, 3px);
box-shadow: 0 0 0 var(--brgol-borda-forte);
}
/* Variante inline - largura pelo conteúdo, sem a margem de "botão de
sidebar de largura cheia". Usada em formulários dentro de card claro
(ex: paginas/niveis.php, .brgol-chat-form). */
.brgol-btn-acao--inline {
display: inline-block;
width: auto;
margin: 0;
padding: 8px 16px;
font-size: 13px;
}
/* Variante "fantasma" - ação secundária/custosa (ex: resetar pontos de
habilidade por dinheiro), não deve competir visualmente com a ação
primária verde. Mesma borda preta grossa/sombra "selo" de sempre, só
troca o preenchimento. */
.brgol-btn-acao--fantasma {
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro) !important;
}
.brgol-btn-acao--fantasma:hover {
filter: none;
background: var(--brgol-borda);
}
/* Item de menu (lista de ações no sidebar escuro) */
.brgol-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
text-decoration: none;
color: var(--brgol-texto-claro);
border-bottom: 1px solid var(--brgol-fundo-escuro-3);
font-size: 13px;
}
.brgol-menu-item:hover {
background: var(--brgol-fundo-escuro-2);
}
.brgol-menu-item img {
width: 16px;
height: 16px;
}
/* "Sair" dentro do grupo Minha Conta (sidebar direito) - mesmo tratamento
vermelho que o link já tinha no dropdown "Minha Conta" da barra superior
(removido junto com essa mudança, ver index.php) - vermelho é reservado
pra alerta nesta identidade, e logout é a única ação "destrutiva" desse
grupo. */
.brgol-menu-item--sair {
color: var(--brgol-acento-vermelho);
}
.brgol-menu-item--sair:hover {
background: rgba(211, 53, 43, 0.12);
}
/* Formulário de login (sidebar direito, visitante) */
.brgol-login-form {
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.brgol-login-form label {
color: var(--brgol-texto-suave-claro);
font-size: 12px;
margin-top: 6px;
}
.brgol-login-form input[type="text"],
.brgol-login-form input[type="password"] {
padding: 8px 10px;
border-radius: var(--brgol-raio);
border: 1px solid var(--brgol-fundo-escuro-3);
background: var(--brgol-fundo-escuro-2);
color: var(--brgol-texto-claro);
font-size: 13px;
}
.brgol-login-form input[type="submit"] {
margin-top: 10px;
}
/* Chat geral (sala única, ver js/chat.js) - corpo claro de .brgol-card na
tela inicial (paginas/principal.php). Já foi um painel escuro no sidebar
direito; migrado pra cá porque ficava espremido numa coluna de 230px -
ver .claude/skills/brgol-frontend-layout. Cores agora seguem o corpo
claro do card (texto escuro, campos com fundo "osso"), não mais o chrome
escuro do jogo. */
.brgol-chat-mensagens {
display: flex;
flex-direction: column;
gap: 7px;
padding: 4px 2px 12px;
/* Era 240px; diminuído pra 190px (2026-09-19, pedido do usuário) agora
que tem paginação (js/chat.js) - só 10 mensagens de cada vez (não
mais 60 acumuladas rolando), sobra menos motivo pro painel ser alto.
overflow-y continua como rede de segurança pra mensagem longa/
quebrada em várias linhas dentro da página de 10. */
max-height: 190px;
overflow-y: auto;
}
.brgol-chat-msg {
font-size: 13px;
line-height: 1.4;
color: var(--brgol-texto-escuro);
word-wrap: break-word;
}
.brgol-chat-autor {
font-weight: 700;
color: var(--brgol-acento-verde-escuro);
}
.brgol-chat-hora {
color: var(--brgol-texto-suave-escuro);
font-size: 10px;
}
.brgol-chat-vazio {
color: var(--brgol-texto-suave-escuro);
font-size: 12px;
font-style: italic;
padding: 4px 0;
}
.brgol-chat-form {
display: flex;
gap: 6px;
padding: 8px 2px 0;
border-top: 1px solid var(--brgol-borda);
}
.brgol-chat-form input[type="text"] {
flex: 1;
min-width: 0;
padding: 8px 10px;
border-radius: var(--brgol-raio);
border: 1px solid var(--brgol-borda);
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
font-size: 13px;
box-sizing: border-box;
}
.brgol-chat-erro {
display: block;
padding: 6px 2px 0;
font-size: 11px;
color: var(--brgol-acento-vermelho);
}
.brgol-chat-login-aviso {
padding: 8px 2px 0;
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-chat-login-aviso a {
color: var(--brgol-acento-verde-escuro);
}
/* Medidor "de jogo" (paginas/niveis.php) - barra de nível e barras de
habilidade usam o mesmo componente: moldura preta grossa tipo selo (não
a barra fina/lisa de .brgol-progress) + marcações a cada 10% (::after,
overlay semi-transparente por cima do preenchimento - não é decoração
gratuita, é o que lê como "medidor de jogo" em vez de barra de carregamento
de site). Pedido explícito do usuário: "parecer 100% um jogo de futebol". */
.brgol-medidor {
position: relative;
height: 22px;
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
background: var(--brgol-fundo-claro-alt);
overflow: hidden;
flex: 1;
min-width: 0;
}
.brgol-medidor-fill {
height: 100%;
background: var(--brgol-acento-verde);
transition: width 350ms ease-out;
}
.brgol-medidor::after {
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(90deg, rgba(13, 13, 13, 0.18) 0, rgba(13, 13, 13, 0.18) 2px, transparent 2px, transparent 10%);
pointer-events: none;
}
.brgol-medidor-linha {
display: flex;
align-items: center;
gap: 8px;
}
/* Botão "+" - investe 1 ponto por clique (ajax_investir_ponto.php,
js/niveis.js), substitui o form antigo de digitar quantidade + escolher
select + confirmar. */
.brgol-medidor-btn {
flex: none;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--brgol-font-display);
font-size: 20px;
line-height: 1;
padding: 0;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro);
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
cursor: pointer;
box-shadow: var(--brgol-sombra);
transition: transform 0.05s, box-shadow 0.05s;
}
.brgol-medidor-btn:hover {
filter: brightness(1.06);
}
.brgol-medidor-btn:active {
transform: translate(2px, 2px);
box-shadow: 0 0 0 var(--brgol-borda-forte);
}
.brgol-medidor-btn:disabled {
opacity: 0.4;
cursor: default;
filter: none;
box-shadow: none;
}
/* Pop rápido no medidor ao investir um ponto (juice, ver skill
brgol-frontend-layout) - dispara via JS toda vez que a barra cresce. */
.brgol-medidor--pop {
animation: brgolMedidorPop 400ms ease-out both;
}
@keyframes brgolMedidorPop {
0% { box-shadow: 0 0 0 3px rgba(76, 179, 36, 0.5); }
100% { box-shadow: 0 0 0 0 rgba(76, 179, 36, 0); }
}
/* ==========================================================================
Confronto ao vivo (paginas/confronto.php, js/confronto.js) - placar em
tempo real de uma partida, com jogadores online e posição na tabela de
cada time (brgol-campeonatos). Referência: print que o usuário mandou de
um jogo parecido (crachá "AO VIVO" + cronômetro, escudo+nome+contadores
por time, barra de domínio embaixo). */
.brgol-confronto {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 520px;
margin: 0 auto;
}
.brgol-confronto-topo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.brgol-confronto-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 5px 12px;
border-radius: var(--brgol-raio-pill);
border: 2px solid var(--brgol-borda-forte);
color: #fff;
}
.brgol-confronto-status--vivo {
background: var(--brgol-acento-vermelho);
}
.brgol-confronto-status--fim {
background: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: brgolConfrontoPisca 1s ease-in-out infinite;
}
@keyframes brgolConfrontoPisca {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.brgol-confronto-nota {
font-size: 12px;
font-weight: 600;
color: var(--brgol-texto-suave-escuro);
border: 1px solid var(--brgol-borda);
border-radius: var(--brgol-raio-pill);
padding: 4px 10px;
cursor: help;
}
.brgol-confronto-times {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.brgol-confronto-time {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.brgol-confronto-time img {
border-radius: var(--brgol-raio);
}
.brgol-confronto-nome {
font-weight: 700;
color: var(--brgol-texto-escuro);
text-decoration: none;
}
.brgol-confronto-nome:hover {
color: var(--brgol-acento-verde-escuro);
}
.brgol-confronto-posicao {
margin: 0;
padding: 3px 10px;
font-size: 12px;
}
.brgol-confronto-online {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-online-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brgol-acento-verde);
border: 1px solid var(--brgol-borda-forte);
}
/* Top 5 artilheiros da rodada de cada time - lista compacta embaixo do
escudo/online, mesma paleta suave de .brgol-confronto-online. */
.brgol-confronto-artilheiros-titulo {
margin-top: 6px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-confronto-artilheiros {
list-style: none;
margin: 4px 0 0;
padding: 0;
width: 100%;
max-width: 160px;
font-size: 12px;
}
.brgol-confronto-artilheiros li {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
color: var(--brgol-texto-escuro);
}
/* Bolinha de online/offline à esquerda do nome - mesmo padrão visual do
.brgol-confronto-online-dot (só o time inteiro), mas cinza quando o
jogador específico está offline (janela de 600s, ver
brgol_top_artilheiros_rodada()). */
.brgol-confronto-artilheiro-dot {
flex: none;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brgol-texto-suave-claro);
border: 1px solid var(--brgol-borda-forte);
}
.brgol-confronto-artilheiro-dot--online {
background: var(--brgol-acento-verde);
}
.brgol-confronto-artilheiro-nome {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.brgol-confronto-artilheiro-gols {
font-weight: 700;
flex: none;
}
.brgol-confronto-artilheiros-vazio {
justify-content: center !important;
color: var(--brgol-texto-suave-escuro);
font-style: italic;
}
.brgol-confronto-placar {
font-family: var(--brgol-font-display);
font-size: 44px;
color: var(--brgol-texto-escuro);
white-space: nowrap;
padding: 0 6px;
}
.brgol-confronto-x {
color: var(--brgol-texto-suave-escuro);
font-size: 28px;
margin: 0 4px;
}
/* % de domínio dos DOIS times, sempre visível em cima da barra (pedido
explícito do usuário) - cada número encostado na sua borda, alinhado com
o time correspondente logo acima. Era um número só, centralizado e da
casa, até 2026-09-17: num placar unilateral a tela mostrava só "0%", que
lê como "não aconteceu nada" em vez de "o visitante domina tudo".
Texto em preto, não na cor do clube: a cor identifica na barra (bloco
grande), mas num número de 13px times amarelos/claros ficariam ilegíveis
sobre o fundo osso. Quem diz de quem é a % aqui é a POSIÇÃO.
0x0 mostra 50%/50% (ninguém domina ainda). */
.brgol-confronto-medidor-pct {
display: flex;
justify-content: space-between;
font-family: var(--brgol-font-display);
font-size: 13px;
color: var(--brgol-texto-escuro);
margin-bottom: 2px;
}
/* Barra de domínio - reaproveita a moldura "selo" de .brgol-medidor
(niveis.php: borda grossa, cantos, marcações de 10% via ::after), mas com
dois preenchimentos (casa/fora) em vez de um só. `.brgol-medidor` foi
desenhado pra ficar dentro de uma linha horizontal (.brgol-medidor-linha)
onde `flex: 1 1 0%` estica ele no espaço que sobra ao lado do botão "+" -
aqui o pai (.brgol-confronto) é uma coluna, e nesse eixo o mesmo
flex-basis:0% zera a altura em vez de esticar (não tem "espaço sobrando"
pra crescer numa coluna que só cresce até o tamanho do conteúdo). `flex:
none` cancela isso e deixa a altura fixa de verdade. */
.brgol-confronto-medidor {
display: flex;
flex: none;
height: 14px;
}
/* Cada lado usa a COR DE IDENTIDADE do próprio clube, vinda inline do PHP
(configs/cores_times.php) - o `background` aqui é só o fallback pra quando
o inline não vier. Era verde (casa) / vermelho (fora) até 2026-09-17,
quando o usuário apontou que essa dupla lê como "certo/errado" em vez de
"dois times"; a tentativa seguinte (preto x osso) resolveu a semântica mas
ficou apagada, e num placar unilateral a barra toda osso parecia vazia.
Ver skill brgol-campeonatos, "Tela de confronto ao vivo" (v5 e v6).
A divisa branca entre os dois lados não é decoração: é o que mantém a
proporção legível quando os dois clubes têm a MESMA cor - acontece de
verdade dentro de um mesmo grupo regional (Botafogo-SP x XV de
Piracicaba, Villa Nova x Tombense, Cascavel x Criciúma). Ela é box-shadow
no bloco da casa, e não border-left no do visitante, de propósito: borda
entra no fluxo do flex e sobraria um risco branco mesmo com o lado em
`width: 0%`; o shadow não ocupa espaço e o overflow:hidden da moldura
recorta ele nos extremos. */
.brgol-confronto-medidor-casa {
height: 100%;
background: var(--brgol-fundo-escuro);
box-shadow: 3px 0 0 var(--brgol-fundo-claro);
transition: width 400ms ease-out;
}
.brgol-confronto-medidor-fora {
height: 100%;
background: var(--brgol-fundo-escuro-3);
transition: width 400ms ease-out;
}
/* Nota de secagem (brgol-secar) - tom de aviso (borda vermelha fina, sem
preencher com a cor toda - não é erro, é só informativo). */
.brgol-confronto-secar-nota {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--brgol-texto-escuro);
background: var(--brgol-fundo-claro-alt);
border: 1px solid var(--brgol-acento-vermelho);
border-radius: var(--brgol-raio);
padding: 8px 12px;
margin-top: 8px;
}
.brgol-confronto-secar-nota i {
color: var(--brgol-acento-vermelho);
flex: none;
}
.brgol-confronto-legenda {
text-align: center;
font-size: 13px;
color: var(--brgol-texto-suave-escuro);
}
/* paginas/niveis.php inteira (card "Minha Evolução" + tabela completa)
ficava esticada até a largura cheia de #principal - o usuário pediu
"quanto menos espaço melhor" (mesmo ajuste já aplicado em vip.php e
gol.php: menos espaço lateral desperdiçado, não uma tela cheia de
barra vazia). Os medidores (.brgol-medidor) já são flexíveis
(flex:1), então encolhem sozinhos com o container, sem precisar
mudar mais nada dentro dos cards. */
.brgol-niveis-pagina {
max-width: 480px;
margin: 0 auto;
}
/* Nível + progresso pro próximo, no topo do card único "Minha Evolução"
(era um card separado - o usuário pediu pra juntar numa seção só). */
.brgol-evolucao-nivel {
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-evolucao-nivel .brgol-habilidade-banco-valor {
display: block;
margin-bottom: 8px;
}
.brgol-habilidade-banco {
display: flex;
align-items: baseline;
gap: 10px;
margin-bottom: 18px;
}
.brgol-habilidade-banco-valor {
font-family: var(--brgol-font-display);
font-size: 36px;
color: var(--brgol-acento-verde-escuro);
line-height: 1;
}
.brgol-habilidade-banco-label {
font-size: 13px;
}
.brgol-habilidade-item {
margin-bottom: 16px;
}
.brgol-habilidade-cabecalho {
display: flex;
justify-content: space-between;
align-items: baseline;
font-weight: 700;
margin-bottom: 6px;
}
.brgol-habilidade-chance {
font-family: var(--brgol-font-display);
color: var(--brgol-acento-verde-escuro);
font-size: 16px;
}
.brgol-habilidade-reset {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
/* Linha do nível atual do jogador, na tabela de Níveis - sem isso a tabela
é 100 linhas idênticas, sem nenhuma pista de onde o jogador está. */
.brgol-nivel-linha-atual {
background: var(--brgol-fundo-claro-alt);
font-weight: 700;
}
.brgol-nivel-linha-atual td {
border-left: 4px solid var(--brgol-acento-verde);
}
/* Pill de estatística (inline, dentro de cards claros) */
.brgol-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
padding: 4px 12px;
border-radius: var(--brgol-raio-pill);
font-size: 12px;
white-space: nowrap;
border: 1px solid var(--brgol-borda);
}
.brgol-pill-label {
color: var(--brgol-texto-suave-escuro);
}
.brgol-pill-value {
font-weight: bold;
}
/* Pill clicável (links de navegação dentro de um card claro, ex: hub de
Rankings/Campeonatos) - mesma forma do .brgol-pill, mas como link */
.brgol-link-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-escuro);
padding: 8px 16px;
border-radius: var(--brgol-raio-pill);
font-size: 13px;
font-weight: 600;
white-space: nowrap;
border: 1px solid var(--brgol-borda);
text-decoration: none;
margin: 0 6px 6px 0;
}
.brgol-link-pill:hover {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
.brgol-link-pill--ativo {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
/* Subseção genérica DENTRO de um card (paginas/equipe.php: Administradores/
Moderadores/Divulgadores; paginas/premios.php: Série A/B/C/Divisão de
Acesso dentro do card "Brasileiro") - rótulo pequeno igual o de
.brgol-form-grupo label, em vez de solto com
. Nasceu em equipe.php (2026-09-19) mas o nome já era genérico o bastante pra reaproveitar sem precisar de uma cópia quase idêntica. */ .brgol-subsecao { margin-bottom: 18px; } .brgol-subsecao:last-child { margin-bottom: 0; } .brgol-subsecao-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--brgol-texto-suave-escuro); margin-bottom: 8px; } /* Vitrine de premiações (paginas/usuario.php, card "Premiações", 2026-09-19) - 1 .brgol-subsecao por período (Hora/Rodada/Temporada), cada uma com os 3 selos (ouro/prata/bronze) + quantas vezes já foi conquistado. Grid em vez de empilhado - os 3 períodos cabem lado a lado em tela larga, colapsa pra 1 coluna em tela estreita sozinho. */ .brgol-premiacoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .brgol-premiacao-itens { display: flex; gap: 14px; } .brgol-premiacao-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .brgol-premiacao-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid var(--brgol-borda); background: #fff; } .brgol-premiacao-item span { font-family: var(--brgol-font-display); font-size: 13px; color: var(--brgol-texto-escuro); } /* Ainda não conquistado (quantidade 0) - esmaecido/cinza, pra distinguir de cara do que já foi ganho pelo menos 1x (pedido do usuário: "destaque bonito" pro que já foi conquistado - contraste é o que cria o destaque). */ .brgol-premiacao-item--vazio img { opacity: 0.3; filter: grayscale(1); } .brgol-premiacao-item--vazio span { color: var(--brgol-texto-suave-escuro); } /* Premiações do TIME (paginas/time.php, 2026-09-19) - mesma ideia da vitrine de premiações do perfil de usuário (.brgol-premiacoes-grade/ .brgol-premiacao-itens, reaproveitados), só que sem imagem própria por competição (Estadual/Brasileiro/Copa do Brasil/Copa Representantes não têm um PNG dedicado como hora/rodada/temporada têm) - um círculo colorido (ouro/prata/bronze, mesmos tokens do pódio de ranking) com um ícone de FontAwesome no lugar de um![]()
. */
.brgol-premiacao-item-time {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.brgol-premiacao-item-time i {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
}
.brgol-premiacao-item-time--ouro i {
background: var(--brgol-acento-vip);
}
.brgol-premiacao-item-time--prata i {
background: var(--brgol-acento-prata);
}
.brgol-premiacao-item-time--bronze i {
background: var(--brgol-acento-bronze);
}
.brgol-premiacao-item-time span {
font-family: var(--brgol-font-display);
font-size: 13px;
color: var(--brgol-texto-escuro);
}
.brgol-premiacao-item-time--vazio i {
background: var(--brgol-fundo-claro-alt);
color: var(--brgol-texto-suave-escuro);
border: 1px solid var(--brgol-borda);
}
.brgol-premiacao-item-time--vazio span {
color: var(--brgol-texto-suave-escuro);
}
/* Valor de Passe (paginas/usuario.php, card dedicado, 2026-09-19) -
pedido do usuário pra ficar "bonito" em vez de uma pill pequena
perdida dentro do card de Ações - número grande na tipografia de
destaque do jogo, mesma ideia de .brgol-recorde-valor mas maior
(é o conteúdo principal do card, não um detalhe de rodapé). */
.brgol-passe-valor {
font-family: var(--brgol-font-display);
font-size: 26px;
color: var(--brgol-acento-verde-escuro);
letter-spacing: 0.3px;
}
/* Título de agrupamento ENTRE cards (não dentro de 1 card) - "Ranking
Pessoal" / "Prêmios de Campeonato" em paginas/premios.php, 2026-09-19.
Mais chamativo que .brgol-subsecao-titulo (que vive dentro de um card
só) porque esse aqui separa 2 grades de cards inteiras. */
.brgol-secao-titulo {
font-family: var(--brgol-font-display);
font-size: 15px;
letter-spacing: 0.3px;
/* --brgol-texto-claro (quase branco) - errado aqui: isso é pro fundo
ESCURO dos cards/sidebar, mas este título vive direto em cima do
fundo claro de #principal - ficava "transparente" (usuário reportou
com print, só a borda verde aparecia). --brgol-texto-escuro é o
mesmo tom usado no resto do texto solto fora de card. */
color: var(--brgol-texto-escuro);
margin: 20px 0 10px;
padding-left: 10px;
border-left: 4px solid var(--brgol-acento-verde);
}
.brgol-secao-titulo:first-child {
margin-top: 0;
}
/* Grade responsiva de cards (paginas/premios.php, 2026-09-19) - o usuário
pediu pra aproveitar melhor o espaço em telas grandes (cards lado a
lado) em vez de empilhar tudo numa coluna só até 560px como a v1 fazia;
em telas estreitas, `auto-fit`/`minmax` colapsa pra 1 coluna sozinho,
sem media query. `align-items:start` evita que um card baixo (ex:
"Recordes Históricos" fechado) estique pra ficar do tamanho do vizinho
mais alto na mesma linha. */
.brgol-premios-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
align-items: start;
}
.brgol-premios-grid > .brgol-card {
margin-bottom: 0;
}
/* "Brasileiro" (v2, 2026-09-19) - o usuário pediu pra já vir aberto, mas
aberto ele fica bem mais alto que os outros cards da mesma grade (4
subdivisões). Numa grid comum isso estica a ALTURA DA LINHA inteira
onde ele está (align-items:start só evita o CARD esticar, não evita a
linha crescer) e empurra pra baixo qualquer card da linha SEGUINTE -
exatamente o que o usuário reportou ("empurrando Copa Representantes
pra baixo"). Fix: tira o Brasileiro do fluxo de colunas
(`grid-column:1/-1`, ocupa a linha inteira sozinho) e ele fica por
ÚLTIMO no HTML - os outros 3 cards compactos (Estadual/Copa do
Brasil/Copa Representantes) preenchem a primeira linha sem interrupção,
e o Brasileiro cresce livremente na própria linha depois deles, sem
afetar mais ninguém. */
.brgol-premios-grid-full {
grid-column: 1 / -1;
}
/* As 4 subdivisões (Série A/B/C/Divisão de Acesso) dentro do card
"Brasileiro" full-width - sem isso, ficariam empilhadas verticalmente
desperdiçando toda a largura nova que o card ganhou. */
.brgol-premios-grid-interna {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 4px 24px;
}
/* Rola por dentro em vez de estourar a largura do card em telas estreitas
(paginas/classificacao.php - 8 colunas não cabem em ~375px). */
.brgol-tabela-scroll {
overflow-x: auto;
}
/* Mini-tabela de ranking */
.brgol-rank-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.brgol-rank-table th {
text-align: left;
padding: 6px 10px;
color: var(--brgol-texto-suave-escuro);
font-weight: normal;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-rank-table td {
padding: 6px 10px;
border-bottom: 1px solid var(--brgol-borda);
}
.brgol-rank-table tr:nth-child(even) {
background: var(--brgol-fundo-claro-alt);
}
/* Linha do próprio time (paginas/classificacao.php) - precisa vir DEPOIS
do nth-child acima na cascata (mesma especificidade, então a ordem no
arquivo decide) pra ganhar mesmo em linha par/ímpar. */
.brgol-rank-table tr.brgol-rank-linha--meu {
background: rgba(76, 179, 36, 0.14);
font-weight: 700;
}
/* Grid de 2 ou 3 colunas para cards lado a lado (ex: os rankings de
destaque na página inicial) - empilha em 1 coluna se a tela ficar
estreita. */
.brgol-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.brgol-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
}
@media (max-width: 900px) {
.brgol-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.brgol-grid-2,
.brgol-grid-3 { grid-template-columns: 1fr; }
}
/* Célula de time+jogador na mini-tabela de ranking - ícone do usuário +
escudo real + nome, bem colados um no outro (pedido do usuário - "sem
muito espaçamento") - é onde a variedade de cor do ranking vem (ver
nota do componente 2 em components.md), não de um sistema de acento. */
.brgol-rank-time {
display: flex;
align-items: center;
gap: 6px;
}
.brgol-rank-time img {
width: 28px;
height: 28px;
object-fit: contain;
flex: none;
}
/* Selo de cargo (P = presidente, R = representante) do lado direito do
nome nos rankings (brgol_render_selo_cargo(), 2026-09-19) - PNG real
(imagens/icones/presidente.png/representante.png), fundo já removido.
Precisa de MAIS especificidade que `.brgol-rank-time img` acima (que
pega TODO `![]()
` dentro da linha, incluindo o escudo de 28px) - senão
o selo, bem menor, herdava 28px também. `.brgol-rank-time` já é
flex+gap, então o espaçamento em relação ao nome do lado vem de graça,
sem margin manual. */
.brgol-rank-time .brgol-selo-cargo {
width: 16px;
height: 16px;
object-fit: contain;
flex: none;
}
/* Tag "ADMIN" (brgol_render_selo_cargo(), 2026-09-19, pedido do usuário -
"ao lado do nome em todo lugar que o admin aparece, seja chat, top
rodada etc") - texto, não imagem (não tem ícone próprio pronto, e um
texto já comunica "cargo do JOGO" de um jeito bem diferente de P/R, que
são cargos DO TIME). Cor própria (fundo+borda), não herda do container -
aparece tanto em fundo claro (linha de ranking) quanto escuro (header de
card, chat), então não pode depender do contexto ao redor pra ter
contraste. Vermelho é o único acento do jogo reservado pra "alerta/
destaque raro" (design-tokens.css) - autoridade de admin é exatamente
esse tipo de destaque raro, então reaproveita em vez de introduzir uma
cor nova. */
.brgol-selo-admin {
display: inline-flex;
align-items: center;
flex: none;
font-family: var(--brgol-font-corpo);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.4px;
text-transform: uppercase;
color: var(--brgol-texto-claro);
background: var(--brgol-acento-vermelho);
border-radius: var(--brgol-raio-pill);
padding: 2px 7px;
line-height: 1.4;
}
/* Nome/time deixaram de ser link azul sublinhado padrão do navegador
(pedido do usuário - "deixar gamificado, usar a tipagia padrão do
jogo") - mesma tipografia/cor de qualquer texto do jogo, sem
text-decoration; só reage no hover, igual .brgol-chat-autor. */
.brgol-rank-time a,
/* paginas/classificacao.php usa .brgol-rank-time direto num só (escudo
+ nome debaixo do mesmo link, não dois separados como em
principal.php) - precisa da MESMA cor/peso/sem-sublinhado quando o
próprio elemento com a classe é o link, não só um `a` lá dentro. */
a.brgol-rank-time {
color: var(--brgol-texto-escuro);
font-weight: 600;
text-decoration: none;
}
.brgol-rank-time a:hover,
a.brgol-rank-time:hover {
color: var(--brgol-acento-verde-escuro);
}
/* Avatar compacto (ver brgol_render_avatar_mini() em
configs/ranking_helpers.php) - a mesma "moldura selo" do .brgol-avatar
grande do #direita, reduzida pra caber numa linha de tabela sem
esticar demais a altura da linha. Aumentado de 20px pra 28px (pedido
do usuário - com uma foto de verdade enviada, 20px "quase não
aparece"; a inicial-em-círculo lia bem pequena, mas uma foto precisa
de mais pixels pra ficar reconhecível). */
.brgol-rank-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brgol-fundo-escuro-2);
border: 2px solid var(--brgol-borda-forte);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--brgol-font-display);
font-size: 13px;
line-height: 1;
color: var(--brgol-texto-claro);
flex: none;
overflow: hidden;
box-sizing: border-box;
}
.brgol-rank-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.brgol-rank-avatar--vip {
border-color: var(--brgol-acento-vip);
}
.brgol-rank-pos {
font-family: var(--brgol-font-display);
font-size: 16px;
color: var(--brgol-texto-suave-escuro);
width: 22px;
}
/* Pódio do 1º/2º/3º lugar (Melhores da Hora/Rodada/Temporada) - ouro,
prata e bronze, mesmo significado de "recorde"/Vip já usado no resto
do jogo (ver .brgol-card-header--recorde), não uma cor nova só pra
decorar. Só as posições 1-3 recebem isso - 4º-10º ficam no padrão,
pra não pesar a tabela nem crescer a altura da linha (pedido do
usuário - "sem ficar muito grande"). */
.brgol-rank-linha--topo {
background: rgba(232, 178, 58, 0.12);
}
.brgol-rank-linha--prata {
background: rgba(173, 181, 189, 0.16);
}
.brgol-rank-linha--bronze {
background: rgba(205, 127, 50, 0.14);
}
.brgol-rank-badge-topo,
.brgol-rank-badge-prata,
.brgol-rank-badge-bronze {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
color: var(--brgol-fundo-escuro);
font-size: 12px;
}
.brgol-rank-badge-topo {
background: var(--brgol-acento-vip);
}
.brgol-rank-badge-prata {
background: var(--brgol-acento-prata);
}
.brgol-rank-badge-bronze {
background: var(--brgol-acento-bronze);
}
.brgol-rank-table td.brgol-rank-valor {
text-align: right;
font-family: var(--brgol-font-display);
font-size: 15px;
}
.brgol-rank-table thead th {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.6px;
}
/* Paginação das 6 telas dedicadas de ranking (brgol_render_paginacao(),
configs/ranking_helpers.php) - Anterior/Próxima + "Página X de Y".
Nunca aparece na mini-prévia da home (só 10 linhas, sem paginação). */
.brgol-paginacao {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid var(--brgol-borda);
background: var(--brgol-fundo-claro-alt);
}
.brgol-paginacao-botao {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--brgol-borda-forte);
background: var(--brgol-fundo-claro);
color: var(--brgol-texto-escuro);
font-family: var(--brgol-font-corpo);
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.brgol-paginacao-botao:hover {
background: var(--brgol-acento-verde);
color: #fff;
border-color: var(--brgol-acento-verde-escuro);
}
.brgol-paginacao-botao--desativado {
opacity: 0.4;
cursor: default;
}
.brgol-paginacao-botao--desativado:hover {
background: var(--brgol-fundo-claro);
color: var(--brgol-texto-escuro);
border-color: var(--brgol-borda-forte);
}
.brgol-paginacao-info {
font-family: var(--brgol-font-corpo);
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
white-space: nowrap;
}
.brgol-texto-vazio {
color: var(--brgol-texto-suave-escuro);
font-style: italic;
margin: 0;
}
.brgol-texto-ajuda {
color: var(--brgol-texto-suave-escuro);
font-size: 13px;
line-height: 1.5;
margin: 0 0 16px;
}
/* Tabela genérica de relatório admin (paginas/suspeitas_autoclicker.php) -
linhas zebradas, cabeçalho fixo em maiúsculas, mesma paleta preto/verde
do resto do site. */
.brgol-tabela-relatorio {
width: 100%;
border-collapse: collapse;
font-family: var(--brgol-font-corpo);
font-size: 13px;
}
.brgol-tabela-relatorio th {
text-align: left;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--brgol-texto-suave-escuro);
padding: 8px 10px;
border-bottom: 2px solid var(--brgol-borda-forte);
}
.brgol-tabela-relatorio td {
padding: 8px 10px;
border-bottom: 1px solid var(--brgol-borda-fraca, var(--brgol-borda-forte));
color: var(--brgol-texto-escuro);
}
.brgol-tabela-relatorio tbody tr:nth-child(even) {
background: var(--brgol-fundo-claro);
}
.brgol-tabela-relatorio a {
color: var(--brgol-acento-verde-escuro);
font-weight: 700;
text-decoration: none;
}
.brgol-tabela-relatorio a:hover {
text-decoration: underline;
}
.brgol-tabela-relatorio-mono {
font-family: monospace;
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
}
/* Lista de passos numerados (paginas/como_jogar.php) - mesma "moldura selo"
verde/preto dos outros badges do jogo (.brgol-chip-atual, .brgol-medidor),
só que redonda e com o número em Anton, pra reforçar hierarquia sem
precisar de imagem nenhuma. */
.brgol-passo-lista {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.brgol-passo {
display: flex;
align-items: flex-start;
gap: 12px;
}
.brgol-passo-num {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--brgol-acento-verde);
border: 2px solid var(--brgol-borda-forte);
box-shadow: 2px 2px 0 var(--brgol-borda-forte);
color: var(--brgol-fundo-escuro);
font-family: var(--brgol-font-display);
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.brgol-passo-texto {
padding-top: 4px;
}
.brgol-passo-texto strong {
color: var(--brgol-texto-escuro);
}
/* Pacotes de Vip com dinheiro real (paginas/vip.php) - grade de tiles
"selo" (mesmo vocabulário de .brgol-passo-num/.brgol-btn-acao: cor
chapada, borda preta grossa, sombra sólida deslocada, sem gradiente).
O card em si fica no --brgol-fundo-claro-alt (não pintado de verde -
verde é só pro badge de desconto, que é o elemento de destaque real). */
.brgol-vip-pacotes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 10px;
}
.brgol-vip-pacote {
background: var(--brgol-fundo-claro-alt);
border: 2px solid var(--brgol-borda-forte);
border-radius: var(--brgol-raio);
box-shadow: var(--brgol-sombra);
padding: 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.brgol-vip-pacote-desconto {
align-self: flex-start;
background: var(--brgol-acento-verde);
color: var(--brgol-fundo-escuro);
font-family: var(--brgol-font-display);
font-size: 11px;
padding: 2px 8px;
border-radius: var(--brgol-raio-pill);
border: 2px solid var(--brgol-borda-forte);
margin-bottom: 4px;
}
.brgol-vip-pacote-dias {
font-family: var(--brgol-font-display);
font-size: 22px;
color: var(--brgol-texto-escuro);
}
.brgol-vip-pacote-dias span {
font-family: var(--brgol-font-corpo);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
color: var(--brgol-texto-suave-escuro);
}
.brgol-vip-pacote-equivale {
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
margin-bottom: 4px;
}
.brgol-vip-pacote-preco-original {
font-size: 12px;
color: var(--brgol-texto-suave-escuro);
text-decoration: line-through;
}
.brgol-vip-pacote-preco {
font-family: var(--brgol-font-display);
font-size: 24px;
color: var(--brgol-acento-verde-escuro);
}
.brgol-vip-pacote-por-dia {
font-size: 11px;
color: var(--brgol-texto-suave-escuro);
}
.brgol-vip-pacote-doar {
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--brgol-acento-verde-escuro);
}
.brgol-vip-pacote-comprar {
margin-top: 10px;
width: 100%;
text-align: center;
}
/* Comparativo Normal x Vip (paginas/vip.php) - substitui a antiga
. Nasceu em equipe.php (2026-09-19) mas o nome já era genérico o bastante pra reaproveitar sem precisar de uma cópia quase idêntica. */ .brgol-subsecao { margin-bottom: 18px; } .brgol-subsecao:last-child { margin-bottom: 0; } .brgol-subsecao-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--brgol-texto-suave-escuro); margin-bottom: 8px; } /* Vitrine de premiações (paginas/usuario.php, card "Premiações", 2026-09-19) - 1 .brgol-subsecao por período (Hora/Rodada/Temporada), cada uma com os 3 selos (ouro/prata/bronze) + quantas vezes já foi conquistado. Grid em vez de empilhado - os 3 períodos cabem lado a lado em tela larga, colapsa pra 1 coluna em tela estreita sozinho. */ .brgol-premiacoes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .brgol-premiacao-itens { display: flex; gap: 14px; } .brgol-premiacao-item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .brgol-premiacao-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; border: 1px solid var(--brgol-borda); background: #fff; } .brgol-premiacao-item span { font-family: var(--brgol-font-display); font-size: 13px; color: var(--brgol-texto-escuro); } /* Ainda não conquistado (quantidade 0) - esmaecido/cinza, pra distinguir de cara do que já foi ganho pelo menos 1x (pedido do usuário: "destaque bonito" pro que já foi conquistado - contraste é o que cria o destaque). */ .brgol-premiacao-item--vazio img { opacity: 0.3; filter: grayscale(1); } .brgol-premiacao-item--vazio span { color: var(--brgol-texto-suave-escuro); } /* Premiações do TIME (paginas/time.php, 2026-09-19) - mesma ideia da vitrine de premiações do perfil de usuário (.brgol-premiacoes-grade/ .brgol-premiacao-itens, reaproveitados), só que sem imagem própria por competição (Estadual/Brasileiro/Copa do Brasil/Copa Representantes não têm um PNG dedicado como hora/rodada/temporada têm) - um círculo colorido (ouro/prata/bronze, mesmos tokens do pódio de ranking) com um ícone de FontAwesome no lugar de um