/* ============================================================
loboscores :: sistema visual
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }
img { display: block; }
.num { font-variant-numeric: tabular-nums; }
/* ============================================================
layout
============================================================ */
.app { display: block; }
.centro { min-width: 0; padding: 0 var(--s4) var(--s7); }
/* limite util do conteudo principal */
#conteudo, .rodape { max-width: 1180px; }
/* ============================================================
sidebar
============================================================ */
.marca { display: grid; line-height: .82; text-align: left; font-family: var(--display); font-style: italic; font-weight: 700; padding: 0 var(--s3) var(--s6); width: 100%; }
/* Conta separada da navegacao */
/* Sem content: dentro de um grid com place-items:center, um ::before
vazio vira um segundo item e empurra o icone para baixo. */
#btn-conta::before { content: none; }
/* ============================================================
header
============================================================ */
.busca input::placeholder { color: var(--text-muted); }
/* ---------- busca global ---------- */
.busca-item:hover { background: var(--surface-hover); }
/* ============================================================
tipografia e blocos de secao
============================================================ */
.secao:first-child { margin-top: var(--s2); }
/* `pulso` foi aposentado: todos os pontos de ao vivo usam `bater`,
la na camada de movimento. Fica aqui so o comentario para
ninguem procurar o keyframe que sumiu. */
/* ============================================================
faixa de competicoes e datas
============================================================ */ .datas::-webkit-scrollbar { display: none; }
.comp-bola { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; }
.data:disabled { opacity: .35; }
.data-seta:disabled { opacity: .3; }
.data-seta:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
/* ============================================================
linha de jogo
============================================================ */
.row-jogo.ao-vivo::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--live); }
.rj-gols span { display: flex; align-items: center; gap: var(--s1); }
.rj-gols i { display: inline-grid; place-items: center; width: 13px; height: 13px;
flex: none; color: var(--text-muted); }
.rj-gols i svg { width: 12px; height: 12px; display: block; }
/* ============================================================
tabs
============================================================ */
.chips.abas::-webkit-scrollbar { display: none; }
/* filtros continuam como pill discreta */
/* "Por competição / Por hora" eram as duas coisas mais brilhantes da
tela, num azul cheio, acima de todos os jogos. Filtro não pode
pesar mais que o conteúdo que ele filtra. */
.chips:not(.abas) { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.chips:not(.abas) .chip { height: 30px; padding: 0 13px; background: var(--surface-1); color: var(--text-secondary); font-size: 14px; }
.chips:not(.abas) .chip.ativo { font-weight: 600; }
/* ============================================================
cabecalho da partida
============================================================ */
.duelo-time:hover { background: rgba(255, 255, 255, .03); }
.duelo-meio { display: grid; gap: var(--s2); justify-items: center; }
/* ============================================================
estatisticas comparadas
============================================================ */
.stat-linha { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s2); }
.stat-linha strong { font-family: var(--ui); min-width: 48px; font-variant-numeric: tabular-nums; }
.stat-linha strong:last-child { text-align: right; }
/* ============================================================
classificacao
============================================================ */
/* `flex: none` porque a zona mora dentro de um flex de 32px no
celular: sem isso ela encolhia para largura ZERO e a faixa de
cor que diz Libertadores / Sula / rebaixamento simplesmente nao
existia na tela mais estreita, que e onde a tabela mais e lida. */
.zona { width: 3px; height: 20px; border-radius: 2px; background: transparent;
display: block; flex: none; }
.c-time { display: flex; align-items: center; gap: var(--s3); text-align: left; min-width: 0; }
.c-time img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.c-time .pulso { width: 6px; height: 6px; border-radius: 50%; background: var(--live); flex-shrink: 0; }
.tab-linha.meu { background: rgba(18, 168, 255, .05); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s4); font-size: 13px; color: var(--text-muted); }
.legenda span { display: flex; align-items: center; gap: var(--s2); }
.legenda i { width: 3px; height: 14px; border-radius: 2px; display: block; }
/* ============================================================
cabecalho de time, jogador e competicao
============================================================ */
.time-txt { min-width: 0; }
.btn-seguir:hover { background: var(--surface-hover); }
.btn-seguir i { display: grid; place-items: center; color: var(--text-muted); }
.btn-seguir i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn-seguir.segue i { color: var(--accent); }
.btn-seguir.segue i svg { fill: currentColor; }
/* ---------- faixa de numeros ---------- */
.faixa-resumo::-webkit-scrollbar { display: none; }
.faixa-resumo strong em { font-style: normal; font-size: 15px; color: var(--text-muted); margin: 0 5px 0 1px; }
.faixa-resumo strong.vit { color: var(--success); }
.faixa-resumo strong.der { color: var(--danger); }
.par-casa-fora { display: flex; gap: var(--s10); margin: var(--s4) 0; }
.par-casa-fora span { display: block; font-size: 13px; color: var(--text-secondary); }
.par-casa-fora strong { font-family: var(--semi); font-size: 17px; font-weight: 600; }
/* ---------- forma ---------- */
.forma-linha { display: flex; gap: var(--s2); align-items: center; }
/* A CAIXA fica; as CORES de V/E/D sairam.
`.forma` era o segundo desenho de selo V/E/D do site -- fundo
lavado e letra colorida -- enquanto a tabela, o confronto direto e
a lista da home usam o `.seq-p`, de fundo cheio e letra escura.
Dois desenhos para a mesma informacao, e o dono do produto
preferiu o da tabela: "icones de vitoria, derrota ou empate
antigos ainda; na aba de formas e ligas ta outro, bem melhor".
Quem desenha o selo agora e sempre o `.seq-p`. A caixa neutra
continua porque ela ainda serve de pastilha de numero na ficha do
jogador e de espacador na lista de partidas do time. */
.forma { width: 24px; height: 24px; border-radius: 5px; display: grid; place-items: center; font-family: var(--semi); font-size: 13px; font-weight: 700; background: var(--surface-2); color: var(--text-secondary); }
.forma-nota { font-size: 14px; color: var(--text-secondary); margin-left: var(--s3); }
/* ---------- lista de partidas do time ---------- */
.jogo-time { display: grid; grid-template-columns: 80px 70px 32px minmax(180px, 1fr) 90px 32px; align-items: center; gap: var(--s2); height: 54px; padding: 0 var(--s3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 140ms ease; }
.jogo-time:hover { background: rgba(255, 255, 255, .025); }
.jt-data { font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.jt-local { font-size: 13px; color: var(--text-muted); }
.jogo-time img { width: 24px; height: 24px; object-fit: contain; }
.jt-adv { font-family: var(--semi); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jt-placar { font-family: var(--display); font-size: 19px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
/* O placar do jogo em andamento na pagina do time nao muda de cor:
ver "PLACAR NAO E ESTADO" mais abaixo. Quem diz que esta
rolando e o estado ao lado, nao o numero. */
.jt-placar.vivo { color: var(--text-primary); }
.jt-placar .hora { font-size: 16px; color: var(--text-muted); font-weight: 500; }
/* AS COMPETICOES DA FICHA DO JOGADOR, COM GRADE PROPRIA.
Reusavam `.jogo-time`, que e a linha de JOGO de um time: no
celular ela e `44px 22px 1fr 52px 20px` e o nome da competicao
caia na coluna de 22px do escudo. Dai "C...", "F...", "L...".
Aqui o nome fica com 1fr e as tres contagens tem 34px cada.
O prefixo e `cpt-` e nao `cmp-` porque `.cmp-linha` JA EXISTE: e a
linha da tela de comparar, com `1fr auto 1fr`. Colidi com ela na
primeira tentativa e a lista saiu com tres colunas de 96px e os
numeros por cima do nome. */
.cpt-lista { display: grid; }
.cpt-cab, .cpt-linha { display: grid;
grid-template-columns: 24px minmax(0, 1fr) 34px 34px 34px;
align-items: center; gap: 10px; padding: 0 4px; }
.cpt-cab { height: 28px; font-size: 12px; font-weight: 700; letter-spacing: .05em;
text-transform: uppercase; color: var(--text-muted);
border-bottom: 1px solid var(--border-subtle); }
.cpt-cab span:nth-child(n+3) { text-align: right; }
.cpt-linha { min-height: 46px; padding-top: 6px; padding-bottom: 6px;
width: 100%; border: 0; background: transparent;
border-bottom: 1px solid var(--border-subtle); color: inherit; font: inherit;
text-align: left; cursor: pointer; }
.cpt-linha:last-child { border-bottom: 0; }
.cpt-linha:hover { background: rgba(255, 255, 255, .03); }
.cpt-linha img { width: 24px; height: 24px; object-fit: contain; }
/* QUEBRA EM DUAS LINHAS EM VEZ DE CORTAR.
"Brasileirao Serie A" nao cabe numa linha de 390px depois de tirar
escudo e tres contagens, e reticencia num nome de competicao e
exatamente a queixa do relato. A linha cresce; nome cortado, nao. */
.cpt-nome { font-family: var(--semi); font-size: 15px; font-weight: 600;
color: var(--text-primary); min-width: 0; line-height: 1.2;
overflow-wrap: anywhere; }
.cpt-n { text-align: right; font-size: 15px; color: var(--text-secondary);
font-variant-numeric: tabular-nums; }
/* `cpt-forte` e nao `destaque`: `.destaque` e generica e ja carrega
fundo proprio em outros blocos -- ela desenhava uma pastilha atras
da coluna de gols. */
.cpt-n.cpt-forte { color: var(--text-primary); font-weight: 700; }
/* ---------- ficha ---------- */
.ficha { max-width: 700px; }
.ficha div { display: flex; justify-content: space-between; gap: var(--s5); align-items: center; border-bottom: 1px solid var(--border-subtle); }
.ficha span { color: var(--text-secondary); }
.ficha strong { font-weight: 600; text-align: right; font-family: var(--semi); font-size: 16px; }
.confronto { display: flex; align-items: center; gap: var(--s4); border-bottom: 1px solid var(--border-subtle); font-family: var(--semi); }
.confronto-data { color: var(--text-muted); min-width: 46px; font-variant-numeric: tabular-nums; }
.confronto b { font-variant-numeric: tabular-nums; }
/* ---------- estadio ---------- */
/* ============================================================
elenco e jogadores
============================================================ */
/* `.grade` e o quadradinho de escudo (escolher times): cabe muito
por fileira. `.elenco` e uma FICHA -- foto, nome, posicao, idade e
camisa lado a lado -- e nunca coube em 210px: "Emerson Royal"
virava "Emerson ..." e "Zagueiro . 26 anos" virava "Zagueiro . 2...".
As duas dividiam a mesma regra so porque as duas sao grades. */
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s2); }
.elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--s2); }
.jogador:hover { background: var(--surface-hover); }
.jogador img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.jogador-txt { min-width: 0; display: grid; }
/* A altura vinha numa linha solta quatro mil linhas abaixo, na secao
de densidade. Duas declaracoes do mesmo seletor a essa distancia e
o que a auditoria aponta: quem editasse esta aqui nao veria efeito. */
/* `height: 76px` fixo estourava com nome de duas linhas: o texto
saia por baixo do cartao e atropelava a linha de baixo da grade.
Agora a altura e minima, e o nome tem teto de duas linhas -- a
mesma regra que o mobile ja tinha. */
/* O CARTAO ERA DA COR DO BLOCO QUE O CONTEM.
`.grade` mora dentro de um `.bloco`, que e `--surface-1`, e o
cartao tambem era `--surface-1`: so o nome aparecia, sem cartao
nenhum em volta. Sobe um degrau. */
.escudo { display: grid; place-items: center; gap: var(--s2); padding: var(--s3) var(--s2); background: var(--surface-2); border-radius: 8px; transition: background 140ms ease; min-height: 76px; border: 0; cursor: pointer; }
.escudo img { width: 34px; height: 34px; object-fit: contain; }
.escudo span { font-family: var(--semi); font-size: 14px; color: var(--text-secondary);
text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.escudo:hover { background: var(--surface-hover); }
.escudo.segue { background: var(--accent-soft); }
.escudo.segue span { color: var(--accent); font-weight: 600; }
/* ============================================================
artilheiros
============================================================ */
.podio { display: grid; gap: var(--s2); }
.podio-item { display: flex; align-items: center; gap: var(--s4); height: 72px; padding: 0 var(--s4); background: var(--surface-1); border-radius: var(--radius-md); cursor: pointer; transition: background 140ms ease; }
.podio-item:hover { background: var(--surface-hover); }
.podio-pos { font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--text-muted); width: 16px; }
.podio-item img { border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.podio-txt { min-width: 0; display: grid; }
.podio-txt strong { font-family: var(--semi); font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podio-txt span { font-size: 13px; color: var(--text-secondary); }
.podio-num { margin-left: auto; text-align: right; }
.podio-num b { display: block; font-family: var(--display); font-weight: 700; line-height: 1; }
.podio-num span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.lista-rank { margin-top: var(--s3); }
.rank-linha { display: grid; grid-template-columns: 28px 24px minmax(0, 1fr) auto 44px; align-items: center; gap: var(--s3); padding: 0 var(--s3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 140ms ease; }
.rank-linha:hover { background: rgba(255, 255, 255, .025); }
.rank-pos { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rank-linha img { width: 22px; height: 22px; object-fit: contain; }
.rank-nome { font-family: var(--semi); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-time { font-size: 13px; color: var(--text-secondary); }
.rank-num { text-align: right; font-family: var(--display); font-size: 18px; font-weight: 700; }
/* ============================================================
jogo compacto da competicao
============================================================ */
.jogo-liga { display: grid; grid-template-columns: 60px minmax(0,1fr) 70px minmax(0,1fr); align-items: center; gap: var(--s3); height: 56px; padding: 0 var(--s3); border-bottom: 1px solid var(--border-subtle); cursor: pointer; transition: background 140ms ease; }
.jogo-liga:hover { background: rgba(255, 255, 255, .025); }
.jl-hora { font-family: var(--display); font-size: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.jl-hora.vivo { color: var(--live); font-weight: 700; }
.jl-time { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.jl-time.casa { justify-content: flex-end; }
.jl-time img { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.jl-time span { font-family: var(--semi); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jl-placar { font-family: var(--display); font-size: 19px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* ============================================================
lances e escalacao
============================================================ */
.lances { max-width: 760px; }
.lance { display: grid; grid-template-columns: 44px 24px minmax(0, 1fr); align-items: center; gap: var(--s3); border-bottom: 1px solid var(--border-subtle); }
.lance.fora { grid-template-columns: minmax(0, 1fr) 24px 44px; text-align: right; }
.lance.fora .lance-min { order: 3; }
.lance.fora .lance-icone { order: 2; }
.lance.fora .lance-txt { order: 1; }
.lance-min { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.lance-icone { display: grid; place-items: center; }
.lance-txt { display: grid; gap: 1px; min-width: 0; }
.lance-txt strong { font-family: var(--semi); font-size: 16px; font-weight: 600; }
.ev-sub { font-size: 13px; color: var(--text-secondary); }
.ev-gol { color: var(--accent); display: grid; place-items: center; }
.ev-troca { color: var(--success); display: grid; place-items: center; }
.ev-outro { color: var(--text-muted); font-style: normal; }
.punicao { display: inline-block; width: 10px; height: 14px; border-radius: 2px; }
.punicao.amarelo { background: var(--warning); }
.punicao.vermelho { background: var(--danger); }
.meio-campo { position: relative; }
.lado-campo.fora { transform: scaleY(-1); }
.lado-campo.fora .campo-jog { transform: scaleY(-1); }
.campo-foto img { width: 100%; height: 100%; object-fit: cover; }
.reserva-foto img { width: 100%; height: 100%; object-fit: cover; }
.reserva-txt { min-width: 0; display: grid; }
/* A troca, no banco, e texto e nao selo: aqui ha largura, e o retrato
de 44px nao aguenta uma pastilha de 84. Seta verde entrou, seta
vermelha saiu, e a posicao continua do lado. */
.reserva-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
min-width: 0; }
.rs-troca { display: inline-flex; align-items: center; gap: 3px; font-style: normal;
font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rs-troca svg { flex: none; }
.rs-troca.entrou { color: var(--success); }
.rs-troca.saiu { color: #ef6d6d; }
.reserva-sub em { font-style: normal; }
/* ============================================================
trilho da direita
============================================================ */
.caixa-pe:hover { color: var(--accent-hover); }
/* ============================================================
formularios, avisos, vazio, skeleton
============================================================ */
.painel.largo { max-width: none; }
.campo label { font-size: 14px; color: var(--text-secondary); }
/* `:not([type=checkbox])` nao e preciosismo: sem ele a regra pega as
chaves de liga-desliga do Painel, que sao ``
dentro de `.campo`. Medido a 390px: a chave saia com 270px de
largura e 44 de altura em vez de 40 por 23, virando uma barra azul
atravessando a tela com o rotulo espremido em tres linhas. */
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select { height: 42px; padding: 0 var(--s3); background: var(--surface-1); border: 0; border-radius: 8px; color: var(--text-primary); font-size: 15px; font-family: inherit; }
.campo input:focus { border-color: var(--accent); outline: none; }
.campo small { font-size: 13px; color: var(--text-muted); }
.btn:hover { background: var(--accent-hover); }
.btn.secundario { background: var(--surface-1); color: var(--text-primary); border: 0; }
.btn.secundario:hover { background: var(--surface-hover); }
.btn:disabled { opacity: .5; cursor: default; }
.aviso { padding: var(--s3) var(--s4); border-radius: 8px; background: var(--surface-1); border-left: 3px solid var(--accent); font-size: 15px; }
.aviso.erro { border-left-color: var(--danger); }
.troca { text-align: center; font-size: 15px; color: var(--text-secondary); }
.troca button { color: var(--accent); font-weight: 600; }
.vazio strong { font-size: 17px; font-weight: 600; }
.vazio span { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.esqueleto { display: grid; gap: 1px; }
@keyframes respirar { 0%, 100% { opacity: .6 } 50% { opacity: .3 }}
.voltar { height: 40px; color: var(--text-secondary); font-size: 15px; display: inline-flex; align-items: center; gap: var(--s1); }
.voltar:hover { color: var(--text-primary); }
/* ============================================================
painel de administracao
============================================================ */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s2); }
.numeros .num { background: var(--surface-1); border-radius: 8px; padding: var(--s3) var(--s4); display: grid; gap: 2px; }
.numeros .num strong { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1; }
.numeros .num span { font-size: 13px; color: var(--text-secondary); }
.form-admin { display: grid; gap: var(--s4); max-width: 620px; }
/* ============================================================
As escolhas de aviso: chave, e nao caixinha do navegador
============================================================
"A aba de times ta muito feia, parece ate outro site."
O que fazia ela parecer outro site era isto: sete `input
type=checkbox` nativos, empilhados soltos sobre o fundo, com o
quadradinho e o tique que o sistema operacional desenha. E a unica
tela do Lobo Scores com controle de formulario cru -- o resto do
site inteiro e pastilha, cartao e chave.
Cada aviso vira uma linha com fundo proprio, o nome a esquerda e
uma chave a direita, que e o desenho que qualquer tela de avisos
tem. O HTML nao muda: continua `label` + `input`, que e o que faz
o clique na linha inteira funcionar e o leitor de tela anunciar
"caixa de selecao". */
.switches { display: grid; gap: 6px; }
.switches label {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3); font-size: 15px; cursor: pointer;
padding: 10px 12px; border-radius: var(--radius-md);
background: var(--surface-2);
transition: background var(--mola);
}
.switches label:hover { background: var(--n70); }
/* `order: 2` poe a chave depois do texto sem mexer no HTML: o texto e
um no solto dentro do label e vem depois do input na marcacao. */
.switches input {
appearance: none; -webkit-appearance: none;
order: 2; flex: none; position: relative; cursor: pointer;
width: 40px; height: 23px; border-radius: 999px;
background: var(--n60); border: 0;
transition: background var(--mv-curto) var(--mv-entra);
}
.switches input::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 17px; height: 17px; border-radius: 50%; background: var(--n0);
transition: transform var(--mv-curto) var(--mv-entra);
}
.switches input:checked { background: var(--accent); }
.switches input:checked::after { transform: translateX(17px); }
.switches input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* O Painel zera o padding de TODO label dentro de `.campo`
(`.painel .campo label { padding: 0 }`), e essa regra tem
especificidade maior que `.switches label`. Resultado medido a
390px: a linha da chave ficava com 23px de altura, sem respiro e
sem a faixa de fundo que separa uma da outra. Aqui ela volta, com
especificidade suficiente para nao ser engolida de novo. */
.painel .campo .switches label {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3); padding: 10px 12px; border-radius: var(--radius-md);
background: var(--surface-2); font-size: 15px; color: var(--text-primary);
cursor: pointer; }
.painel .campo .switches label:hover { background: var(--n70); }
.nomes-lista { display: grid; max-width: 760px; }
.nome-linha { display: grid; grid-template-columns: 24px 1fr 1fr; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--border-subtle); }
.nome-linha img { width: 22px; height: 22px; object-fit: contain; }
.nome-api { font-size: 14px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nome-linha input { height: 34px; padding: 0 var(--s2); background: var(--surface-1); border: 0; border-radius: var(--radius-sm); color: var(--text-primary); font-size: 15px; width: 100%; }
.cota { background: var(--surface-1); border-radius: 8px; padding: var(--s3) var(--s4); display: grid; gap: var(--s2); }
.cota-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: var(--text-secondary); }
.cota-topo strong { font-family: var(--display); font-size: 19px; color: var(--text-primary); }
.barra { height: 5px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.barra-cheia { height: 100%; background: var(--success); transition: width 300ms ease; }
.barra-cheia.atencao { background: var(--warning); }
.barra-cheia.perigo { background: var(--danger); }
.cota-pe { font-size: 13px; color: var(--text-muted); }
.diag { background: var(--surface-1); border-left: 3px solid var(--success); border-radius: 8px; padding: var(--s3) var(--s4); display: grid; gap: var(--s1); }
.diag.ruim { border-left-color: var(--danger); }
.diag-topo { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-secondary); }
.diag-corpo { font-size: 14px; }
.vivo-erro { color: var(--danger); font-size: 14px; }
.sonda { display: grid; }
.sonda-linha { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: var(--s3); height: 44px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.sonda-marca { font-family: var(--display); font-size: 13px; font-weight: 700; text-align: center; border-radius: 4px; padding: 2px 0; }
.sonda-linha.sim .sonda-marca { background: rgba(32, 200, 117, .18); color: var(--success); }
.sonda-linha.nao .sonda-marca { background: rgba(239, 68, 68, .16); color: var(--danger); }
.sonda-det { font-size: 13px; color: var(--text-muted); text-align: right; }
.nota-9 { color: var(--accent); }
.nota-8 { color: var(--success); }
.nota-7 { color: var(--accent); }
.nota-6 { color: var(--text-primary); }
.nota-5 { color: var(--danger); }
/* ============================================================
celular
============================================================ */
.barra-baixo { display: none; }
/* ============================================================
LOBO SCORES V22 — DESKTOP ART DIRECTION
Redesign visual only. No application logic is changed here.
============================================================ */
/* subtle structure rather than decorative effects */
/* ---------- sidebar: stronger product identity ---------- */
.menu > .marca { position: relative; padding: 2px 14px 30px; transform: skew(-4deg); }
.menu > .marca::after { content: ''; position: absolute; left: 15px; bottom: 18px; width: 58px; height: 3px; background: var(--accent); transform: skew(-22deg); }
#btn-conta::after { content: none; }
.mascote::before { content: 'LOBO SCORES'; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
/* ---------- top bar ---------- */
.busca:focus-within { border-color: var(--accent); }
/* ---------- top navigation: competition + dates becomes a sports strip ---------- */
.data.ativo b { color: var(--text-primary); }
.data-seta { border-radius: 7px; background: transparent; color: var(--text-secondary); flex-shrink: 0; }
/* ---------- section hierarchy ---------- */
/* ---------- match lists: editorial, readable, not admin-table ---------- */
.row-jogo:last-child { border-bottom: 0; }
.rj-placar em { font-style: normal; }
/* Live fixtures are visibly a different information tier *//* ---------- page title / generic heading ---------- */
h1 { font-family: var(--display); font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.rodada-sep { font-size: 12px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: .12em; margin: 28px 0 11px; }
/* ---------- tabs become a calm navigation rail ---------- */
.chips.abas { display: flex; gap: 30px; border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--s6); overflow-x: auto; scrollbar-width: none; margin: 0 0 26px; padding: 0 2px; }
/* Aba e navegacao: caixa baixa, tamanho de leitura, e a diferenca
entre ativa e inativa vem de COR e do indicador, nao de peso. Todas
com o mesmo peso 500 evita o pulo de largura ao trocar de aba. */
.chips.abas .chip {
padding: 0 0 10px;
border: none;
border-radius: 0;
background: none;
color: var(--text-muted);
font-size: var(--font-body);
font-weight: var(--peso-medio);
letter-spacing: .01em;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color 140ms ease, border-color 140ms ease;
}
.chips.abas .chip:hover { color: var(--text-secondary); }
.chips.abas .chip.ativo {
color: var(--text-primary);
font-weight: var(--peso-titulo);
border-bottom-color: var(--brand);
}
/* ---------- match detail: a real match centre ---------- */
/* O selo decorativo 'CENTRAL DA PARTIDA' saiu daqui. Era texto
injetado por CSS, em ciano fixo, no canto mais nobre do cabecalho,
e nao dizia nada que a pessoa ja nao soubesse. */
.duelo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; width: 100%; max-width: 820px; column-gap: var(--s5); }
.duelo-time { display: grid; justify-items: center; gap: 14px; padding: var(--s2); border-radius: var(--radius-md); transition: background 140ms ease; }
.duelo-time img { width: 78px; height: 78px; object-fit: contain; }
.duelo-time span { font-family: var(--semi); font-size: var(--font-body); font-weight: var(--peso-titulo); text-align: center; line-height: 1.25; }
/* O placar e o unico numero que pode ser enorme na tela. */
.duelo-placar { font-family: var(--display); font-size: 56px; font-weight: var(--peso-forte); line-height: 1; letter-spacing: -.02em; display: flex; align-items: center; gap: var(--s3); font-variant-numeric: tabular-nums; }
.duelo-placar em { font-style: normal; font-weight: 400; color: var(--text-muted); font-size: 30px; }
.duelo-hora { font-family: var(--display); font-size: 44px; font-weight: var(--peso-forte); line-height: 1; letter-spacing: -.01em; color: var(--text-muted); }
.duelo-estado { font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px; border-radius: 5px; background: rgba(255,255,255,.035); }
/* match-body readability */
#aba-corpo > .stats, #aba-corpo > .lances, #aba-corpo > .ficha { margin-left: auto; margin-right: auto; }
.stats { max-width: 820px; }
.stat { margin-bottom: 24px; }
.stat-linha span { font-weight: 600; letter-spacing: .01em; }
.stat-barra { display: flex; gap: 2px; }
.stat-casa, .stat-fora { border-radius: 3px; }
/* A cor das barras mora na camada de baixo, junto com as variaveis do
duelo. Aqui havia um `.stat-casa.maior { background: var(--accent) }`
que, por ter especificidade 0,2,0 contra 0,1,0, vencia a regra nova
independente da ordem no arquivo: a barra do mandante ficava azul
mesmo com a cor do time definida. Terceira vez que uma regra mais
especifica engole uma correcao neste arquivo. */
/* ---------- team/player/league identity headers ---------- */
/* ---------- a capa do time e a do jogador ----------
"Parecem sites diferentes." Eram tres coisas, e nenhuma delas
existia em nenhuma outra tela: uma barra de acento INCLINADA
grudada no canto superior esquerdo, uma marca d'agua escrita
LOBO SCORES no canto de baixo, e o nome em 34px display ITALICO.
Nenhum outro titulo do site e italico, e nenhum outro cartao tem
marca d'agua.
As tres sairam. A capa agora e o mesmo cartao do resto: superficie,
raio de 16 e a mesma escala de titulo do cabecalho da partida. */
.time-capa { display: flex; align-items: center; gap: 20px; min-height: 0;
padding: 22px 24px; border-bottom: 1px solid var(--border-subtle);
position: relative; margin: 6px 0 0; border: 0; border-radius: 16px 16px 0 0;
background: var(--surface-1); overflow: hidden; }
.time-capa::before, .time-capa::after { content: none; display: none; }
.time-capa > img { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
/* Sem italico: e o unico titulo italico do site inteiro. O tamanho
desce de 34 para 28, que e a escala de titulo de tela que o resto
usa. */
.time-txt h1 { font-size: 28px; font-weight: 700; font-family: var(--display);
font-style: normal; letter-spacing: -.02em; line-height: 1.1; }
.time-txt span { font-size: 15px; color: var(--text-muted); display: block; margin-top: 4px; }
/* A fileira de abas embaixo da capa passa a ser a MESMA da partida:
mesmo tamanho de rotulo, mesma altura de alvo, mesmo sublinhado.
Era 15px num fundo translucido proprio, e a da partida e 16 sobre
a superficie do cartao. */
.time-capa + .chips.abas { padding: 0 24px; border: 0; border-top: 0;
border-radius: 0 0 14px 14px; background: var(--surface-1);
border-bottom: 1px solid var(--border-subtle); gap: 26px; }
.time-capa + .chips.abas .chip { height: 46px; font-size: 17px; padding-bottom: 0; }
.jogador-capa .retrato { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; background: var(--surface-2); border: 2px solid var(--border-strong); }
/* O BOTAO ERA DA MESMA COR DA CAPA.
`.time-capa` e `--surface-1` e `.btn-seguir` tambem era: os dois
botoes da ficha do jogador ficavam texto solto sobre o cartao.
"Blocos de comparar e ver clube nao tem destaque pro bloco e nem
contraste nenhum." Sobe um degrau de superficie e ganha aresta --
o mesmo desenho dos outros botoes secundarios do site. */
.btn-seguir { display: flex; align-items: center; gap: var(--s2); height: 38px;
padding: 0 var(--s4); border-radius: 8px; background: var(--surface-2);
border: 1px solid var(--aresta); font-size: 15px; font-weight: 600;
color: var(--text-primary); cursor: pointer;
transition: background 140ms ease, border-color 140ms ease;
flex-shrink: 0; z-index: 2; }
.btn-seguir img { width: 20px; height: 20px; object-fit: contain; flex: none; }
/* As acoes da capa num grupo so. Eram dois botoes com `margin-left:
auto` cada um, o que empurra o primeiro e cola o segundo nele sem
nunca poder quebrar linha direito. */
.capa-acoes { margin-left: auto; display: flex; align-items: center;
flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* Selecao nao vira botao: nao existe pagina de selecao no site, e
botao que abre "Time nao encontrado" e pior do que nao ter botao. */
.capa-selo { display: inline-flex; align-items: center; gap: 7px; height: 38px;
padding: 0 12px; border-radius: 8px; background: var(--surface-2);
border: 1px dashed var(--aresta); font-size: 14px; font-weight: 600;
color: var(--text-secondary); }
.capa-selo img { width: 18px; height: 18px; object-fit: contain; }
/* O filtro da ficha, entre as abas e o corpo. */
.jg-filtro { margin: 12px 0 4px; }
.btn-seguir.segue { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* ---------- stats strip: one coherent band ---------- */
.faixa-resumo { display: flex; align-items: center; height: auto; background: transparent; border-radius: 0; margin: 22px 0 30px; overflow-x: auto; scrollbar-width: none; min-height: 92px; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.faixa-resumo > div { display: grid; gap: 2px; padding: 18px 28px; flex: 1; border-right: 1px solid var(--border-subtle); white-space: nowrap; }
.faixa-resumo > div:first-child { padding-left: 0; }
.faixa-resumo > div:last-child { border-right: 0; }
.faixa-resumo strong { font-family: var(--display); font-size: 31px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.faixa-resumo span { font-size: 12px; font-weight: 500; color: var(--text-secondary); letter-spacing: .05em; text-transform: uppercase; }
/* ---------- standings: crisp broadcast-style table ---------- */
.tabela { max-width: none; width: 100%; border: 0; border-radius: 12px; overflow: hidden; background: rgba(9,21,34,.42); }
.tab-cab, .tab-linha { display: grid; grid-template-columns: 48px minmax(200px, 1fr) 52px 40px 40px 40px 40px 52px 108px; align-items: center; gap: var(--s2); padding: 0 var(--s3); text-align: center; font-variant-numeric: tabular-nums; padding-left: 16px; padding-right: 16px; }
.tab-cab { height: 42px; font-size: 12px; font-weight: 500; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); background: var(--surface-1); border-bottom-color: var(--border-subtle); letter-spacing: .01em; }
.tab-linha { height: 50px; font-size: 15px; border-bottom: 1px solid var(--border-subtle); width: 100%; transition: background 140ms ease; }
.tab-linha:last-child { border-bottom: 0; }
.c-pos { display: flex; align-items: center; gap: var(--s3); color: var(--text-secondary); font-family: var(--display); font-size: 16px; font-weight: 700; }
.c-time b { font-family: var(--semi); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-pts { font-weight: 700; font-family: var(--display); font-size: 18px; color: var(--text-primary); }
/* ---------- right rail: contextual and visually quieter ---------- */
.caixa, .banner { border: 0; background: var(--bg); border-radius: 12px; }
.banner { background: var(--surface-1); border-radius: 12px; padding: 22px; display: grid; gap: var(--s4); position: relative; min-height: 170px; align-content: end; overflow: hidden; }
.banner::before { content: ''; position: absolute; width: 80px; height: 3px; left: 0; top: 0; background: var(--accent); transform: skewX(-25deg) translateX(-8px); }
/* ---------- lineups ---------- */
/* ---------- forms/cards polish without changing flow ---------- */
.btn { height: 42px; padding: 0 var(--s5); border-radius: 9px; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 15px; transition: background 140ms ease; }
/* A terceira regra que pegava a caixa de marcar. Esta empata em
especificidade com `.switches input:checked` e vem depois, entao
ela ganhava: a chave ligada aparecia CINZA, com o botao ja do lado
direito. Parecia desligada e nao estava. */
.painel .campo input:not([type="checkbox"]):not([type="radio"]),
.painel .campo select { background: var(--surface-1); }
.vazio { max-width: 420px; margin: var(--s10) auto; text-align: center; display: grid; gap: var(--s2); justify-items: center; margin-top: 78px; margin-bottom: 78px; }
/* ---------- desktop density / width tuning ---------- */
/* Preserve the existing compact/mobile behavior */
/* ============================================================
LOBO SCORES V23 — MATCH THE APPROVED MOCKUP
Visual-only override requested by the user.
============================================================ */
:root {
/* ============================================================
SISTEMA VISUAL DO LOBOSCORES
============================================================
Regra da casa: MENOS EFEITO, MAIS INFORMACAO.
Quando algo precisar ganhar destaque, a ordem e posicao,
tamanho, peso, contraste, espaco, e so no fim cor. Nenhum
componente importante pode depender de glow, neon ou sombra
forte para ser notado: quem chama atencao e o conteudo.
Os nomes antigos continuam todos aqui. O que mudou foram os
VALORES, para a tela inteira se mover junto sem nenhuma regra
de CSS precisar ser reescrita. Nomes novos foram acrescentados
ao lado dos antigos, nunca no lugar deles.
============================================================ */
/* ------------------------------------------------------------
NEUTROS
------------------------------------------------------------
Eram cinzas quentes (#151515, #262625) debaixo de um azul frio
de neon. Os dois brigavam. Agora a escala inteira tem uma
leve inclinacao fria, da familia do azul do Lobao, e o fundo
ficou mais escuro para a superficie do cartao ter degrau
visivel sem precisar de sombra. */
/* ------------------------------------------------------------
A escala saiu do navy e virou CINZA NEUTRO
------------------------------------------------------------
Ela tinha inclinacao azul de proposito, para o escuro "parecer
futebol". Na pratica isso poe uma cor no fundo inteiro da tela, e
azul e a unica cor que o site tem para destacar alguma coisa. Com
o fundo tambem azulado, o botao azul, o link azul e o selo azul
passam a competir com o proprio fundo: tudo puxa para o mesmo
lado e nada se destaca.
Cinza neutro nao disputa. Ele e o silencio onde o azul aparece --
e por isso o FotMob, que e a referencia, e cinza do comeco ao
fim, com uma cor so em cima.
Os degraus de luminancia sao os mesmos de antes, entao nenhuma
separacao de superficie se perde na troca; o que sai e o matiz.
Mais degraus no meio (n85) porque bloco dentro de bloco ficou
comum: sem ele, dois cartoes aninhados tinham o mesmo tom. */
/* Largura maxima do duelo na linha de jogo. Ver o comentario em
.jc-duelo: e o que impede o vazio de 200px entre o estado e o nome
do time nas telas largas. */
--duelo-max: 460px;
--n100: #0B0B0D; /* fundo da pagina */
--n95: #121215; /* fundo de barras e areas recuadas */
--n90: #17171A; /* cartao */
--n85: #1C1C20; /* cartao dentro de cartao */
--n80: #212126; /* celula destacada, campo de formulario */
--n70: #2B2B31; /* estado hover */
--n60: #3C3C44;
/* Os quatro degraus de texto subiram. O nivel de "metadata" estava
sendo usado em nome de time, e nome de time e conteudo principal:
Getafe, Celtic e Plzen pareciam botao desabilitado. */
--n40: #9A9AA3;
--n20: #D7D7DC;
--n0: #F6F6F8;
--bg: var(--n100); --bg-sidebar: var(--n95);
--bg-primary: var(--n100); --bg-secondary: var(--n95);
--surface-1: var(--n90); --surface-2: var(--n80); --surface-hover: var(--n70);
/* ------------------------------------------------------------
TEXTO :: quatro degraus, e o corpo SUBIU de contraste
------------------------------------------------------------
O corpo de texto usava #A3A29D. Dado e o produto: ele nao pode
ficar apagado para a tela parecer sofisticada. Agora e #C3CCD8,
e o degrau abaixo dele tambem clareou. Os numeros de cada par
estao em scripts/contraste.mjs, que roda e reprova. */
--text-primary: var(--n0); /* titulo, placar, numero que importa */
--text-secondary: var(--n20); /* corpo de texto */
--text-muted: var(--n40); /* apoio: hora, competicao, rotulo */
--text-disabled: #66717F; /* desligado, placeholder */
/* ------------------------------------------------------------
MARCA :: o azul do Lobao, e ele e escasso
------------------------------------------------------------
Era #16AEFF, um ciano de neon. O azul do personagem e mais
fechado, de terno, e aguenta ser usado com parcimonia sem
virar decoracao. Quanto menos elemento azul houver na tela,
mais peso tem o que for azul.
Dois tons com funcoes diferentes: `brand` e para preenchimento
(botao, barra, indicador) e `brand-text` e para texto e link,
porque o primeiro nao alcanca 4.5:1 como texto sobre o fundo. */
--brand: #2E6FE0;
--brand-hover: #4886EE;
--brand-text: #7FAEF8;
--brand-subtle: rgba(46, 111, 224, .16);
/* Nomes antigos, apontando para o novo azul. */
--accent: var(--brand);
--accent-hover: var(--brand-hover);
--accent-soft: var(--brand-subtle);
/* ------------------------------------------------------------
SEMANTICAS :: toda cor tem funcao, nenhuma e enfeite
------------------------------------------------------------ */
--live: #E8495F; /* acontecendo agora */
--live-soft: rgba(232, 73, 95, .15);
/* `--live-txt` SAIU DAQUI, e o nome some junto com o problema.
Eram dois vermelhos: este #E8495F, da lista da home, e um
#FF8095 "de texto" que o resto do site usava. Eu ja tentei
unificar uma vez e unifiquei para o lado errado -- puxei a home
para o rosado e o site inteiro ficou rosa.
Agora e UM. Dois tokens com a mesma funcao sao duas chances de
divergir de novo, entao o segundo nao existe mais: quem escrevia
`--live-txt` escreve `--live`.
A conta fecha onde importa: 4,73:1 sobre o cartao e 5,20:1 sobre
o fundo, os dois acima dos 4,5:1 que texto pede. O que ele NAO
aguenta e pastilha colorida por baixo -- qualquer fundo tingido
derruba para a faixa dos 4,0. Por isso as duas pastilhas que
existiam ("N ao vivo" e o estado do cabecalho) perderam o fundo,
e nao a cor. E coerente com o que o resto do site ja fazia: quem
diz "ao vivo" e a bolinha com o minuto do lado, que e texto, nao
tinta. */
--success: #27A56F; /* positivo, ganho */
--danger: #E8495F;
--warning: #D9A441;
/* PRO: champanhe fosco. Nao e dourado de cassino, nao brilha, e
aparece em pouca coisa: a etiqueta, o icone e o botao. */
--pro: #D9A441;
--pro-soft: rgba(217, 164, 65, .13);
--ambar: var(--warning);
--verde: var(--success);
--roxo: #8B6CFF;
/* ------------------------------------------------------------
BORDAS :: o cartao se define pela borda, nao pela sombra
------------------------------------------------------------ */
--border-subtle: rgba(255, 255, 255, .06);
--border-default: rgba(255, 255, 255, .10);
--border-strong: rgba(255, 255, 255, .16);
--aresta: var(--border-subtle);
--aresta-forte: var(--border-default);
--aresta-cartao: var(--border-default);
--brilho-topo: none;
/* ------------------------------------------------------------
ELEVACAO :: quase nada
------------------------------------------------------------
Um cartao comum nao pode parecer selecionado. A sombra ficou
para o que realmente flutua: menu, painel, modal. */
--e1: 0 1px 2px rgba(0, 0, 0, .30);
--e2: 0 4px 16px rgba(0, 0, 0, .36);
--e3: 0 14px 36px rgba(0, 0, 0, .46);
--e-baixo: 0 -2px 16px rgba(0, 0, 0, .34);
--e-topo: 0 2px 14px rgba(0, 0, 0, .30);
/* ------------------------------------------------------------
ESPACO :: base 4, com degraus que significam alguma coisa
------------------------------------------------------------ */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
--s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
/* ------------------------------------------------------------
RAIO :: quatro, e so quatro
------------------------------------------------------------ */
--radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
/* ------------------------------------------------------------
TIPOGRAFIA :: a escala, com nome de funcao
------------------------------------------------------------
A auditoria achou 41 tamanhos diferentes em uso, com meio
pixel no meio (11.5px, 12.5px). Dai vem a sensacao de que
tudo tem o mesmo peso. Estes sete degraus sao o alvo. */
--font-display: 34px; /* placar */
--font-title: 21px; /* nome da tela ou da secao */
--font-headline: 18px; /* a frase principal de um insight */
--font-body: 16px; /* leitura */
--font-secondary: 14px; /* apoio */
--font-meta: 13px; /* hora, competicao, atualizado ha */
--font-micro: 12px; /* etiqueta, eyebrow */
/* Nomes antigos, apontando para a escala nova. */
--t-display: var(--font-display); --t-h1: 29px; --t-h2: 25px;
--t-b1: var(--font-title); --t-b2: var(--font-headline);
--t-b3: var(--font-body); --t-cap: var(--font-meta);
/* Peso: 400 corpo, 500 apoio com enfase, 600 titulo, 700 so para
numero grande. Negrito tem que significar alguma coisa. */
--peso-corpo: 400; --peso-medio: 500; --peso-titulo: 600; --peso-forte: 700;
--display: 'Satoshi', system-ui, sans-serif;
--ui: 'Satoshi', system-ui, sans-serif;
--semi: 'Satoshi', system-ui, sans-serif;
/* ------------------------------------------------------------
MOVIMENTO :: curto, e so quando comunica alguma coisa
------------------------------------------------------------
A regra e uma so: toda animacao daqui pertence a uma destas
categorias, e a categoria fica escrita em cima dela.
FEEDBACK recebi seu toque
NAVEGACAO voce saiu de um lugar e chegou em outro
ESTADO isto esta carregando, vazio, ou pronto
TEMPO REAL isto mudou agora, sozinho, sem voce pedir
HIERARQUIA olhe para isto primeiro
ATMOSFERA isto e uma noite de futebol
Se nao pertence a nenhuma, sai. Movimento sem funcao e o que
faz uma interface parecer brinquedo.
Duracao por distancia percorrida, nao por gosto: quanto menor
o deslocamento, mais curta a animacao. */
--mv-toque: 90ms; /* resposta ao dedo, tem que ser imperceptivel */
--mv-curto: 160ms; /* hover, cor, estado de um controle */
--mv-medio: 260ms; /* entrada de bloco, troca de aba */
--mv-longo: 420ms; /* troca de dia, abertura de painel */
--mv-lento: 900ms; /* gol, e so gol */
/* Uma curva para entrar (sai rapido, chega macio) e uma para sair
(comeca macio, vai embora rapido). Duas, nao oito. */
--mv-entra: cubic-bezier(.16, 1, .3, 1);
--mv-sai: cubic-bezier(.4, 0, 1, 1);
--mola: 160ms cubic-bezier(.22, .9, .28, 1);
/* ------------------------------------------------------------
ESTRUTURA
------------------------------------------------------------ */
--sidebar-w: 240px; --rail-w: 340px; --painel-w: 420px;
--header-h: 58px; --pad: 32px; --app-max: 1720px;
/* Cores do duelo. O JavaScript reescreve as quatro na pagina da
partida com a cor do uniforme de cada time, ja com contraste
garantido. Estes sao so o padrao. */
--cor-casa: var(--brand);
--cor-fora: #8B6CFF;
--txt-casa: #FFFFFF;
--txt-fora: #FFFFFF;
--ganhou: var(--text-primary);
--perdeu: var(--text-muted);
}
html, body { background: var(--bg); }
/* ------------------------------------------------------------
A luz da pagina
------------------------------------------------------------
Uma unica iluminacao ambiental, vindo de cima, muito fraca. O
teste e este: se alguem olhar e pensar "tem um degrade aqui",
esta forte demais. O que a pessoa tem que perceber e so que o
escuro nao e chapado.
`fixed` de proposito: a luz e do ambiente, nao do conteudo. Se
rolasse junto, a pagina inteira teria um halo passeando.
Pseudo-elemento em vez de background no body porque o body ja
carrega o cache de pintura do scroll, e um gradiente enorme ali
custa repaint a cada rolagem. */
body { background: var(--bg); color: var(--text-primary); font-family: var(--ui); font-size: 15px; line-height: 1.4; min-height: 100vh; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; background-image: none; }
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
/* Um sopro de luz no topo, e so. Forte o bastante para o escuro nao
ser chapado, fraco o bastante para ninguem conseguir apontar que
ha um degrade ali. */
background:
radial-gradient(120% 60% at 50% -14%, rgba(255, 255, 255, .028), transparent 60%);
}
body::before { content: ''; position: fixed; inset: 0 0 auto var(--sidebar-w); height: 2px; background: var(--accent); opacity: .9; z-index: 60; pointer-events: none; display: none !important; }
/* Sidebar */
.menu .marca { justify-content: flex-start; padding: 0 0 22px; transform: none; }
.menu .marca::after, .menu .marca::before { display: none !important; }
.brand-logo { width: 228px; max-width: 100%; height: auto; display: block; }
.mi { display: flex; align-items: center; gap: var(--s3); padding: 0 16px; font-weight: 500; color: var(--text-primary); text-align: left; transition: background 140ms ease, color 140ms ease; position: relative; background: transparent; }
.mi:hover { background: rgba(255,255,255,.04); color: var(--text-primary); }
.mi.ativo { background: var(--surface-2); color: var(--text-primary); font-weight: 600; position: relative; }
.mi.ativo::before { content: ''; position: absolute; left: 0; width: 3px; height: 22px; border-radius: 2px; background: var(--accent); display: none; }
#btn-conta { margin-top: 4px; border-top: 0; padding-top: 0; }
.mascote { margin-top: auto; display: grid; gap: var(--s3); padding: 18px 12px 0; position: relative; min-height: 0; border-top: 0; }
.mascote::before { display: none !important; }
.mascote-vaga { height: auto; width: 100%; max-width: 170px; margin: 0 auto; object-fit: contain; border-radius: 14px; opacity: .92; }
/* Top */
.busca { position: relative; display: flex; align-items: center; gap: var(--s2); width: min(720px, 100%); height: 44px; padding: 0 16px; background: var(--surface-1); border: 0; border-radius: 14px; color: var(--text-muted); border-color: var(--border-subtle); }
.busca input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 17px; font-family: inherit; }
.ic-topo { border-radius: 50%; display: grid; place-items: center; color: var(--text-primary); transition: background 140ms ease, color 140ms ease; }
.ic-topo svg { width: 20px; height: 20px; fill: currentColor; }
.ic-topo:hover { border-color: var(--border-subtle); }
/* Home controls */ .datas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; align-items: stretch; padding-bottom: 4px; }
.datas { margin-bottom: 18px; gap: 2px; align-items: stretch; padding: 6px 0; border-bottom: 0; }
.data, .data-seta, .data-atalho { flex: 0 0 auto; min-width: 84px; height: 60px; border-radius: 14px; background: transparent; border: 0; }
.data { display: grid; gap: 2px; justify-items: center; border-radius: 7px; background: transparent; align-content: center; white-space: nowrap; transition: background 140ms ease; }
.data b { font-family: var(--semi); text-transform: capitalize; }
.data.ativo { border-color: var(--accent); }
.data-seta, .data-atalho { display: grid; place-items: center; font-size: 30px; }
.data-seta:hover:not(:disabled), .data-atalho:hover { background: var(--surface-1); }
.data-atalho svg { width: 20px; height: 20px; }
/* Sections */
.secao { display: flex; align-items: center; gap: 12px; font-family: var(--ui); font-size: 21px; font-weight: 700; line-height: 1.2; margin: 22px 0 14px; position: relative; min-height: 30px; font-style: normal; letter-spacing: -.02em; text-transform: none; }
.secao::after { content: ''; flex: 1; height: 1px; margin-left: 10px; background: var(--border-strong); display: none; }
.secao em { font-style: normal; order: 3; font-family: var(--ui); padding: 0; border-radius: 999px; background: none; }
.secao-titulo { display: inline-flex; align-items: baseline; gap: 6px; }
/* Match lists */
.linhas { display: grid; border: 0; border-radius: 12px; overflow: visible; background: transparent; gap: 12px; }
.row-jogo::before { display: none !important; }
.row-jogo:hover { border-color: var(--border-subtle); }
.row-jogo.ao-vivo { border-color: var(--border-subtle); }
.row-jogo.compacta { opacity: 1; }
.rj-placar { font-family: var(--ui); font-weight: 700; color: var(--text-primary); }
.rj-placar { font-family: var(--display); text-align: center; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.rj-placar em { color: var(--text-primary); }
.rj-gols { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); color: var(--text-secondary); }
/* Right rail */
.trilho { display: grid; gap: 18px; align-content: start; padding-top: 0; }
.caixa { border: 0; }
.caixa-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-family: var(--ui); font-style: normal; text-transform: none; letter-spacing: -.02em; }
.caixa-topo span { color: var(--text-primary); font-weight: 400; margin-left: auto; background: var(--n80); border: 0; }
.mini-cab, .mini-linha { display: grid; grid-template-columns: 28px minmax(0,1fr) 34px 34px 38px; align-items: center; gap: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.mini-cab { height: 38px; font-size: 13px; color: var(--text-muted); padding: 0 6px; }
.mini-linha { border-top: 1px solid var(--border-subtle); padding: 0 6px; }
.mini-linha.meu { background: rgba(15, 98, 167, .12); }
.mini-pos { color: var(--text-primary); }
.mini-time { display: flex; align-items: center; gap: 8px; text-align: left; font-family: var(--semi); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.mini-time img { width: 19px; height: 19px; object-fit: contain; flex-shrink: 0; }
.caixa-pe { width: 100%; height: auto; color: var(--accent); font-weight: 600; text-align: left; padding: 8px 4px 0; }
.banner.banner-imagem { padding: 0; background: transparent; border: 0; min-height: auto; }
.banner.banner-imagem::before { display: none; }
.banner.banner-imagem img { display: block; width: 100%; height: auto; border-radius: 18px; border: 0; }
/* Footer */
.rodape { margin-top: 28px; padding: var(--s6) 0 var(--s8); border-top: 0; color: var(--text-muted); font-size: 14px; display: grid; gap: var(--s1); }
/* ============================================================
LOBO SCORES V24 — polish pass based on the latest feedback
- fixes top gradient/header overlap on desktop and mobile
- improves mobile hero and search treatment
- rebuilds lineup pitch, coach cards, bench organization
- upgrades match fiche and team details / roster layout
============================================================ */
.topo::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--surface-1); }
.topo-fim { margin-left: auto; display: flex; align-items: center; min-width: 0; }
.conteudo-grade, #conteudo, .trilho { position: relative; z-index: 1; }
/* Team page / match page cards feel less flat */
/* O DESFOQUE DE FUNDO SO ONDE ELE APARECE.
`.row-jogo` estava nesta lista, e numa home de sabado sao quarenta
linhas. Cada `backdrop-filter` obriga o navegador a criar uma
camada propria e a reler o que esta atras dela A CADA QUADRO da
rolagem -- e as linhas da lista sao transparentes sobre um fundo
chapado, entao nao havia nada para desfocar.
Medido: desligando o desfoque destas tres, a imagem da home muda no
maximo 6 de 255 num canal (invisivel a olho), e o pior quadro da
rolagem cai de 20,3ms para 18,9ms ja num computador -- no celular,
que e onde a reclamacao nasceu, a conta e bem pior que essa.
Fica onde ele de fato desfoca alguma coisa: o topo grudado, que
passa por cima do conteudo rolando, e as pecas que tem a atmosfera
colorida da competicao atras. */
.cabeca, .time-capa, .banner, .data, .data-seta, .data-atalho { backdrop-filter: blur(10px); }
.confrontos-lista { display: grid; gap: 10px; }
/* ---------- lineup ---------- */
.esc-cabs { display: flex; justify-content: space-between; margin-bottom: var(--s3); max-width: 960px; margin: 0 auto 16px; gap: 16px; padding: 0 4px; }
.esc-cab { display: flex; align-items: center; gap: var(--s2); flex: 1 1 0; min-width: 0; padding: 14px 16px; border-radius: 16px; border: 0; background: var(--surface-1); }
.esc-cab.dir { flex-direction: row-reverse; text-align: right; justify-content: flex-end; }
.esc-cab img { width: 32px; height: 32px; object-fit: contain; }
.esc-cab strong { display: block; font-family: var(--semi); font-size: 19px; font-weight: 600; line-height: 1.05; color: var(--text-primary); }
.esc-cab span { font-size: 12px; color: var(--text-secondary); display: inline-flex; align-items: center; margin-top: 5px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 43, 67, .76); border: 0; letter-spacing: .08em; text-transform: uppercase; }
.gramado { position: relative; max-width: 960px; display: grid; grid-template-rows: 1fr 2px 1fr; gap: var(--s3); background: #0B2119; border: 0; border-radius: 20px; overflow: hidden; border-color: var(--border-subtle); isolation: isolate; margin: 0 auto; }
.gramado::before { content: ''; position: absolute; inset: 0; background-color: #0B2119; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='104' viewBox='0 0 8 104'%3E%3Crect width='8' height='52' fill='%23ffffff' fill-opacity='.018'/%3E%3Crect y='52' width='8' height='52' fill='%23000000' fill-opacity='.035'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; }
.gramado::after { content: ''; position: absolute; inset: 12px; border: 2px solid var(--border-strong); pointer-events: none; }
.meio-campo span { border: 2px solid var(--border-strong); }
.lado-campo { display: grid; gap: var(--s1); align-content: space-between; position: relative; min-height: 306px; padding: 18px 10px; }
.lado-campo::before, .lado-campo::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none; }
.lado-campo::before { top: 14px; width: 42%; height: 18%; border: 2px solid var(--border-strong); border-top: 0; border-radius: 0 0 12px 12px; }
.lado-campo::after { top: 14px; width: 16%; height: 8%; border: 2px solid var(--border-strong); border-top: 0; border-radius: 0 0 8px 8px; }
.lado-campo.fora::before { top: auto; bottom: 14px; border-top: 2px solid var(--border-strong); border-bottom: 0; border-radius: 12px 12px 0 0; }
.campo-linha { display: flex; justify-content: space-evenly; gap: 16px; min-height: 72px; }
/* Viraram