/* ==========================================================
   CS Futebol · tema escuro
   As cores e medidas ficam nas variáveis abaixo: mudar aqui
   muda o site inteiro.
   ========================================================== */
/* Inter: textos do site · Outfit: nome da marca (mesma fonte do logo) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@900&display=swap");

:root {
  --fundo: #0a0e13;
  --cartao: #121820;
  --cartao-2: #171f29;     /* itens dentro de cartões */
  --linha: #1f2833;        /* divisórias e botões */
  --linha-forte: #2a3542;
  --borda: rgba(255, 255, 255, 0.06);
  --texto: #e9eef5;
  --texto-suave: #8b97a8;
  --texto-fraco: #5c6877;
  --destaque: #22c55e;
  --destaque-escuro: #052e16;
  --ao-vivo: #ef4444;
  --rebaixamento: #ef4444;
  --azul: #3b82f6;
  --amarelo: #facc15;
  --raio: 16px;
  --raio-pequeno: 10px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 360px at 50% -120px, rgba(34, 197, 94, 0.10), transparent 70%),
    var(--fundo);
  color: var(--texto);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;  /* números alinhados em coluna */
}

a { color: inherit; }

/* ---------- Cabeçalho ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: rgba(10, 14, 19, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borda);
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.2px;
  text-decoration: none;
}
.marca b { color: var(--destaque); font-weight: 900; }
.marca-icone {  /* logo.svg: o mesmo arquivo é o ícone da aba do navegador */
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 4px 12px rgba(34, 197, 94, 0.25));
}
.subtitulo {
  padding-left: 14px;
  border-left: 1px solid var(--linha-forte);
  color: var(--texto-suave);
  font-size: 13px;
}
.voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--linha);
  color: var(--texto-suave);
  font-size: 0;            /* esconde o texto; a seta vem do ::before */
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.voltar::before { content: "←"; font-size: 16px; }
.voltar:hover { background: var(--linha-forte); color: var(--texto); }
.link-topo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.link-topo:hover { background: rgba(239, 68, 68, 0.2); }
.ponto-vivo, .jogo.ao-vivo .status::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ao-vivo);
  animation: pulsar 1.6s ease-in-out infinite;
}
.ponto-vivo { display: inline-block; }
@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, 0); }
}
@media (max-width: 600px) {
  .topo { padding: 10px 14px; gap: 10px; }
  .subtitulo { display: none; }
}

/* ---------- Layout ---------- */
.conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  align-items: start;
}
.coluna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 900px) {
  .conteudo { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .coluna { gap: 14px; }
}

.conteudo-jogo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px;
}
#detalhes { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .conteudo-jogo, #detalhes { padding: 14px; gap: 14px; }
  #detalhes { padding: 0; }
}

/* ---------- Cartões ---------- */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 18px;
  box-shadow: var(--sombra);
  overflow-x: auto;
}
.cartao-topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 14px;
}
.cartao h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.cartao-topo h2 { margin: 0; }
.atualizacao { color: var(--texto-fraco); font-size: 11px; }
.atualizacao.aviso { color: #f59e0b; }
.carregando, .erro { color: var(--texto-suave); padding: 24px 0; text-align: center; }
.erro { color: #fca5a5; }
.carregando-leve { opacity: 0.45; transition: opacity 0.15s; }
.texto-suave { color: var(--texto-suave); }
.centralizado { text-align: center; margin: 0; }

/* ---------- Tabelas (classificação e artilharia) ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  padding: 0 4px 8px;
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}
td {
  padding: 8px 4px;
  border-top: 1px solid var(--borda);
  text-align: center;
  color: var(--texto-suave);
}
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
th.col-time, td.col-time { text-align: left; color: var(--texto); }
td.col-pos { width: 40px; font-weight: 600; }
td.col-pts { color: var(--texto); font-weight: 800; }
tr.rebaixamento td.col-pos { box-shadow: inset 3px 0 0 var(--rebaixamento); color: #fca5a5; }

.time { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.escudo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.link-time { text-decoration: none; }
.link-time:hover .nome { color: var(--destaque); }

.legenda {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--texto-fraco);
  font-size: 12px;
}
.marca-rebaixamento { width: 10px; height: 10px; border-radius: 3px; background: var(--rebaixamento); }

/* Artilharia */
.tabela-artilharia td.col-time { line-height: 1.35; }
.artilheiro-nome { display: block; font-weight: 600; }
.artilheiro-time { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--texto-suave); }
.artilheiro-time .time { gap: 6px; }
.artilheiro-time .escudo { width: 14px; height: 14px; }
.tabela-artilharia + .link-rodada-atual { margin: 12px 0 0; }

/* ---------- Navegação entre rodadas ---------- */
.navegacao-rodada { display: flex; align-items: center; gap: 8px; }
.botao-rodada {
  width: 30px;
  height: 30px;
  border: 1px solid var(--borda);
  border-radius: 50%;
  background: var(--linha);
  color: var(--texto);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.botao-rodada:hover:not(:disabled) { background: var(--linha-forte); }
.botao-rodada:disabled { opacity: 0.25; cursor: default; }
.link-rodada-atual {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  margin: -6px 0 12px;
  color: var(--destaque);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.link-rodada-atual:hover { text-decoration: underline; }

/* ---------- Cartões de jogo (estilo placar de app) ---------- */
.dia {
  margin: 18px 0 8px;
  color: var(--texto-fraco);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.dia:first-child { margin-top: 0; }

.jogo {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  padding: 10px 14px 10px 10px;
  background: var(--cartao-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
a.jogo:hover { background: #1c2632; border-color: var(--linha-forte); }
.jogo.ao-vivo {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.10), var(--cartao-2) 45%);
  border-color: rgba(239, 68, 68, 0.3);
}
.jogo-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-right: 10px;
  border-right: 1px solid var(--borda);
  text-align: center;
  white-space: nowrap;
}
.jogo.com-data { grid-template-columns: 84px minmax(0, 1fr); }
.jogo-hora { font-size: 13px; font-weight: 600; }
.jogo-data { font-size: 11px; color: var(--texto-suave); }
.jogo-info .status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--texto-fraco);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.jogo.ao-vivo .status { color: var(--ao-vivo); }
.jogo.ao-vivo .status::before { content: ""; }
.jogo-times { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jogo-linha {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.jogo-linha .nome { white-space: nowrap; }
.jogo-linha .gols { min-width: 18px; font-size: 15px; font-weight: 800; text-align: right; }
.jogo-linha.vencedor .nome { font-weight: 700; }
.jogo-linha.perdedor { color: var(--texto-suave); }
.jogo-linha.perdedor .gols { font-weight: 600; }
.jogo.ao-vivo .gols { color: #fca5a5; }


/* ---------- Página do jogo ---------- */
.placar-jogo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 0 4px;
}
.placar-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
a.placar-time:hover .nome { color: var(--destaque); }
.escudo-grande {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
.posicao { color: var(--texto-suave); font-size: 12px; font-weight: 500; }
.placar-centro { text-align: center; }
.placar-grande {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  white-space: nowrap;
}
.placar-grande .separador { margin: 0 4px; color: var(--texto-fraco); font-weight: 400; }
.placar-centro .status {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--linha);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.placar-jogo.ao-vivo .status { background: var(--ao-vivo); color: #fff; }
.intervalo { margin-top: 6px; color: var(--texto-fraco); font-size: 12px; }
.placar-detalhes {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .escudo-grande { width: 52px; height: 52px; }
  .placar-grande { font-size: 34px; }
  .placar-time { font-size: 13px; }
}

/* Forma recente */
.forma-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--borda);
}
.forma-linha:first-of-type { border-top: none; padding-top: 0; }
.forma-resultados { display: flex; gap: 6px; }
.resultado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.12s;
}
.resultado:hover { transform: translateY(-2px); }
.resultado-V { background: #16a34a; }
.resultado-E { background: #4b5563; }
.resultado-D { background: #dc2626; }

/* Confronto direto */
.confronto-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 12px;
  text-align: center;
}
.confronto-resumo strong { display: block; font-size: 28px; font-weight: 800; }
.confronto-resumo span { color: var(--texto-suave); font-size: 12px; }
.barra-confronto {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-bottom: 16px;
}
.barra-confronto span { border-radius: 4px; }
.barra-mandante { background: var(--destaque); }
.barra-empate { background: #4b5563; }
.barra-visitante { background: var(--azul); }
.confronto-jogo {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 8px;
  padding: 9px 8px;
  border-radius: var(--raio-pequeno);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.confronto-jogo:hover { background: var(--cartao-2); }
.confronto-times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.confronto-times .mandante { flex-direction: row-reverse; text-align: right; }
.placar { min-width: 44px; font-weight: 800; text-align: center; }
@media (max-width: 480px) {
  .confronto-jogo { grid-template-columns: 1fr; gap: 4px; }
}

/* Lances e estatísticas (página do jogo, quando a fonte oferecer) */
.lance { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borda); }
.lance.lance-visitante { flex-direction: row-reverse; text-align: right; }
.minuto { min-width: 34px; color: var(--texto-suave); font-weight: 600; }
.estatistica {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  padding: 8px 0;
  border-top: 1px solid var(--borda);
  text-align: center;
}
.aviso-fonte { margin: 0; color: var(--texto-fraco); font-size: 12px; text-align: center; }

/* ---------- Página do time ---------- */
.time-cabecalho { display: flex; align-items: center; gap: 18px; }
.time-nome { margin: 0 0 4px !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.5px; }
.time-infos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.time-infos span {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--linha);
  color: var(--texto-suave);
  font-size: 12px;
}
.numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.numeros div {
  padding: 12px 4px;
  background: var(--cartao-2);
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.numeros strong { display: block; font-size: 22px; font-weight: 800; }
.numeros span { color: var(--texto-suave); font-size: 11px; }
.setor {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.setor:first-of-type { margin-top: 0; }
.jogadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0 18px;
}
.jogador {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--borda);
}
.jogador span:first-child { font-weight: 500; }
.jogador span:last-child { font-size: 12px; white-space: nowrap; }

/* ---------- Rodapé ---------- */
.rodape {
  padding: 12px 20px 32px;
  color: var(--texto-fraco);
  font-size: 12px;
  text-align: center;
}

/* Página inicial no celular: jogos da rodada primeiro */
@media (max-width: 900px) {
  .coluna-jogos { order: -1; }
}

/* ---------- Seguir time (notificações) ---------- */
.botao-seguir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--linha);
  color: var(--texto-suave);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.botao-seguir svg { width: 16px; height: 16px; }
.botao-seguir:hover { color: var(--texto); border-color: var(--texto-fraco); }
.botao-seguir.ativo {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--destaque);
}
.botao-seguir.ativo svg path { fill: currentColor; }
.botao-seguir:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
/* Versão só com o sino, nas linhas da classificação */
.botao-seguir.compacto {
  padding: 5px;
  border-color: transparent;
  background: none;
  color: var(--texto-fraco);
}
.botao-seguir.compacto:hover { color: var(--texto); background: var(--linha); }
.botao-seguir.compacto.ativo { color: var(--destaque); background: none; }
td.col-seguir, th.col-seguir { width: 34px; padding-left: 0; padding-right: 0; }
.time-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.time-titulo .time-nome { margin: 0 !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Mensagem rápida (toast) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  transform: translateX(-50%);
  background: #1f2833;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  box-shadow: var(--sombra);
  color: var(--texto);
  font-size: 13px;
  animation: entrar-toast 0.25s ease-out;
}
@keyframes entrar-toast {
  from { opacity: 0; transform: translate(-50%, 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .ponto-vivo, .jogo.ao-vivo .status::before { animation: none; }
}

/* ---------- Navegação no cabeçalho ---------- */
/* Botão "Projeções": pílula verde (o "Ao vivo" ao lado é vermelho) */
.link-nav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.22);
  color: #86efac;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.link-nav::before {  /* ícone de gráfico subindo, pintado com a cor do texto */
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.link-nav:hover { background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.4); color: #bbf7d0; }
.link-nav.ativo {  /* página atual */
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.55);
  color: #dcfce7;
}
.link-nav:focus-visible, .link-topo:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.link-nav + .link-topo { margin-left: 0; }

/* ---------- Página de projeções ---------- */
.conteudo-projecao {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px;
}
@media (max-width: 900px) { .conteudo-projecao { padding: 16px 14px; gap: 14px; } }
.projecao-cabecalho h1 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-wrap: balance;
}
.projecao-cabecalho p { margin: 0; font-size: 13px; }

.aviso-ao-vivo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.08);
  font-size: 13px;
}
.aviso-ao-vivo .ponto-vivo { flex-shrink: 0; transform: translateY(-1px); }

.brigas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
@media (max-width: 760px) { .brigas { grid-template-columns: 1fr; gap: 14px; } }
.briga-linha {
  display: grid;
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 44px 30px;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border-radius: var(--raio-pequeno);
  text-decoration: none;
  transition: background 0.15s;
}
.briga-linha:hover { background: var(--cartao-2); }

/* Barra de probabilidade */
.prob { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prob-trilho {
  flex: 1;
  min-width: 40px;
  height: 8px;
  border-radius: 4px;
  background: var(--linha);
  overflow: hidden;
}
.prob-barra { display: block; height: 100%; border-radius: 4px; }
.prob-barra.titulo { background: var(--amarelo); }
.prob-barra.top4 { background: var(--destaque); }
.prob-barra.queda { background: var(--ao-vivo); }
.prob-valor {
  min-width: 38px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.variacao { font-size: 11px; font-weight: 800; white-space: nowrap; }
.variacao.piorou { color: #f87171; }
.variacao.melhorou { color: #4ade80; }

.tabela-projecao td.col-prob { min-width: 130px; }
.tabela-projecao td.col-prob .variacao { display: block; text-align: right; margin-top: 2px; }
.tabela-projecao th.col-prob { text-align: left; }
.tabela-projecao tr.na-zona td.col-pos { box-shadow: inset 3px 0 0 var(--rebaixamento); color: #fca5a5; }

.metodo ol { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; max-width: 70ch; }
.metodo li { color: var(--texto-suave); }
.metodo li strong { color: var(--texto); }
.metodo p { margin: 0; max-width: 70ch; font-size: 13px; }

/* Celular: cabeçalho compacto e tabela de projeção só com o essencial */
@media (max-width: 600px) {
  .topo .voltar { display: none; }
  .marca { font-size: 17px; white-space: nowrap; }
  .marca-icone { width: 30px; height: 30px; }
  .link-nav, .link-topo { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
  .tabela-projecao .col-hoje,
  .tabela-projecao .col-titulo,
  .tabela-projecao .col-top4 { display: none; }
  .tabela-projecao td.col-prob { min-width: 110px; }
}

/* Mini linha do tempo das brigas (escala fixa de 0 a 100%) */
.spark { position: relative; height: 36px; min-width: 60px; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.spark-base { stroke: var(--linha-forte); stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark-area { stroke: none; }
.spark-linha { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark.queda .spark-linha { stroke: var(--ao-vivo); }
.spark.queda .spark-area { fill: rgba(239, 68, 68, 0.14); }
.spark.titulo .spark-linha { stroke: var(--amarelo); }
.spark.titulo .spark-area { fill: rgba(250, 204, 21, 0.14); }
.spark-ponto, .spark-marca {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--cartao);  /* anel da cor do fundo, separa da linha */
  pointer-events: none;
}
.spark-ponto { left: 100%; }
.spark.queda .spark-ponto, .spark.queda .spark-marca { background: var(--ao-vivo); }
.spark.titulo .spark-ponto, .spark.titulo .spark-marca { background: var(--amarelo); }
.spark-dica {
  position: absolute;
  bottom: calc(100% + 6px);
  z-index: 5;
  padding: 4px 8px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: #1f2833;
  border: 1px solid var(--linha-forte);
  color: var(--texto);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.legenda-spark { margin: 10px 0 0; color: var(--texto-fraco); font-size: 11px; }

/* Motivos de cada chance ("Lidera com 66 pontos...") */
.motivos {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0 4px;
  padding: 0 0 0 32px;   /* alinha com o nome do time, depois do escudo */
  list-style: none;
}
.motivo {
  position: relative;
  padding-left: 14px;
  color: var(--texto-suave);
  font-size: 12px;
  line-height: 1.4;
}
.motivo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.motivo.a_favor::before { background: var(--destaque); }
.motivo.contra::before { background: var(--ao-vivo); }
.briga-linha + .briga-linha { border-top: 1px solid var(--borda); border-radius: 0; }
@media (max-width: 600px) { .motivos { padding-left: 0; } }

/* Classificação ao vivo ("se os jogos terminassem agora") */
.rotulo-ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fca5a5 !important;
  font-weight: 600;
}
td.col-pos { white-space: nowrap; }
.seta-posicao { margin-left: 4px; font-size: 9px; font-weight: 800; vertical-align: 1px; }
.seta-posicao.subiu { color: #4ade80; }
.seta-posicao.desceu { color: #f87171; }
tr.jogando td { background: rgba(239, 68, 68, 0.06); }
tr.jogando td.col-pts { color: #fca5a5; }
td.col-time .ponto-vivo { margin-left: 8px; vertical-align: middle; }
td.col-time .link-time { display: inline-flex; vertical-align: middle; }
/* No celular o nome não tem espaço para o ponto: o fundo e os pontos em
   vermelho já mostram quem está jogando */
@media (max-width: 600px) { td.col-time .ponto-vivo { display: none; } }
/* Projeções com jogo rolando: mesma marcação da classificação ao vivo */
.tabela-projecao td.col-hoje { white-space: nowrap; }
.tabela-projecao tr.jogando td.col-pts-hoje { color: #fca5a5; font-weight: 700; }
.tabela-projecao tr.jogando td.col-pts { color: var(--texto); }  /* "Pts fim" não é placar ao vivo */

/* ---------- Jogos que mais valem (página inicial) ---------- */
.destaques { border-color: rgba(250, 204, 21, 0.25); }
.link-discreto { text-decoration: none; }
.link-discreto:hover { color: var(--texto); }
.destaque {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin: 0 -6px 8px;
  border-radius: 12px;
  background: var(--cartao-2);
  border: 1px solid var(--borda);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.destaque:last-child { margin-bottom: 0; }
.destaque:hover { background: #1c2632; border-color: var(--linha-forte); }
.destaque-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.destaque-times { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.destaque-times .escudo { width: 20px; height: 20px; }
.destaque-vivo { display: inline-flex; align-items: center; gap: 6px; color: #fca5a5; font-weight: 800; }
/* Etiqueta da briga, no alto do cartão (order: -1 = antes dos times) */
.destaque-briga { order: -1; display: flex; flex-wrap: wrap; gap: 6px; }
.destaque-tipo, .destaque-direto {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.destaque-tipo.titulo { color: var(--amarelo); background: rgba(250, 204, 21, 0.12); }
.destaque-tipo.top4 { color: var(--destaque); background: rgba(34, 197, 94, 0.12); }
.destaque-tipo.rebaixamento { color: #fca5a5; background: rgba(239, 68, 68, 0.14); }
.destaque-direto { color: var(--texto); background: var(--cartao); border: 1px solid var(--linha-forte); }
.destaque-chance { color: var(--texto-suave); font-size: 12px; }
.destaques .cenarios { padding-left: 0; }
.destaques .cenario {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  color: var(--texto-suave);
  font-size: 12px;
}
.destaques .cenario strong { color: var(--texto); }
.destaques .cenarios { display: flex; flex-wrap: wrap; gap: 6px; }

/* Olhinho: aparelhos vendo o site agora */
.olhinho {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  cursor: default;
}
.olhinho svg { width: 16px; height: 16px; }
.olhinho + .link-nav { margin-left: 0; }
@media (max-width: 600px) { .olhinho { padding: 6px 4px; font-size: 12px; } }

/* Assinatura do autor, logo abaixo do rodapé */
.assinatura {
  margin: -20px 0 0;
  padding: 0 20px 32px;
  color: var(--texto-fraco);
  font-size: 12px;
  text-align: center;
}
.assinatura strong { color: var(--texto-suave); }
.assinatura a { color: var(--texto-suave); text-decoration: none; border-bottom: 1px dotted var(--texto-fraco); }
.assinatura a:hover { color: var(--destaque); border-color: var(--destaque); }