/* Tema "noite de estádio": fundo escuro, luzes de refletor, gramado no rodapé, dourado de troféu. */
:root {
  --fundo: #060a13;
  --painel: rgba(15, 23, 40, 0.86);
  --painel-2: rgba(255, 255, 255, 0.045);
  --borda: rgba(255, 255, 255, 0.09);
  --texto: #e8edf6;
  --suave: #8b97ad;
  --ouro: #f5c542;
  --ouro-escuro: #b8901f;
  --verde: #22c55e;
  --verde-claro: #86efac;
  --azul: #3b82f6;
  --vermelho: #ef4444;
  --laranja: #f97316;
  --raio: 14px;
  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --titulo: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 60% 40% at 12% -8%, rgba(120, 170, 255, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% -8%, rgba(120, 170, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #060a13 0%, #070f1c 55%, #08180f 85%, #0b2414 100%);
  background-attachment: fixed;
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, .titulo { font-family: var(--titulo); letter-spacing: 0.02em; font-weight: 600; }
button { font: inherit; color: inherit; }
a { color: var(--ouro); }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  background: rgba(6, 10, 19, 0.88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borda);
}
.marca { font-family: var(--titulo); font-size: 22px; letter-spacing: 0.08em; }
.marca b { color: var(--ouro); }
.relogio { color: var(--suave); font-size: 13px; flex: 1; min-width: 160px; }
.relogio b { color: var(--texto); font-size: 15px; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav button {
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; color: var(--suave);
}
.nav button:hover { color: var(--texto); }
.nav button.ativo { color: #111; background: var(--ouro); font-weight: 600; }

main { max-width: 1280px; margin: 0 auto; padding: 18px 16px 60px; }

/* ---------- Cartões e grades ---------- */
.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra); min-width: 0;
}
.cartao > h2, .cartao-titulo {
  margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--suave);
  display: flex; align-items: center; gap: 8px;
}
.central { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-7 { grid-column: span 7; }
.c-6 { grid-column: span 6; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; }
@media (max-width: 980px) { .c-8, .c-7, .c-6, .c-5, .c-4 { grid-column: span 12; } }
.grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .grade { grid-template-columns: 1fr; } }
.grade-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 170px), 1fr)); gap: 12px; margin: 10px 0; }
.legenda { color: var(--suave); font-size: 12px; margin-top: 6px; }
.div { font-size: 11px; color: var(--suave); margin: 0 3px; }
.subtitulo { font-size: 14px; margin: 10px 0 6px; color: var(--texto); }
.vazio { color: var(--suave); font-size: 13px; padding: 8px 0; }

/* ---------- Herói da Central ---------- */
.heroi {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 15% 0%, rgba(245, 197, 66, 0.18), transparent 45%),
    linear-gradient(120deg, #0f2a1a, #0c1424 60%);
}
.heroi .data { font-family: var(--titulo); font-size: 34px; line-height: 1.05; }
.heroi .sub { color: var(--suave); margin-top: 4px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.botao {
  border: 1px solid var(--borda); background: var(--painel-2); border-radius: 10px;
  padding: 9px 16px; cursor: pointer; transition: transform 0.12s, background 0.2s;
}
.botao:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.botao:active:not(:disabled) { transform: scale(0.97); }
.botao:disabled { opacity: 0.35; cursor: not-allowed; }
.botao-principal {
  background: linear-gradient(180deg, #ffd96a, var(--ouro) 55%, var(--ouro-escuro));
  color: #1a1300; font-family: var(--titulo); font-size: 18px; letter-spacing: 0.06em;
  border: none; padding: 12px 26px; box-shadow: 0 6px 24px rgba(245, 197, 66, 0.35);
}
.botao-principal:hover:not(:disabled) { background: linear-gradient(180deg, #ffe48f, #f8cf55 55%, #c99d25); }

/* ---------- Listas, jogos e tabelas ---------- */
.jogo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, auto) minmax(0, 1fr) 64px;
  gap: 8px; align-items: center; padding: 6px 6px; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.jogo .casa { text-align: right; }
.jogo .casa, .jogo .fora { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.placar { text-align: center; font-family: var(--titulo); font-size: 17px; font-variant-numeric: tabular-nums; }
.min { color: var(--suave); font-size: 12px; text-align: right; }
.jogo.zebra { box-shadow: inset 4px 0 0 var(--laranja); }
.jogo.destaque { background: rgba(245, 197, 66, 0.08); box-shadow: inset 4px 0 0 var(--ouro); }
.jogo.gol { animation: flash-gol 1.2s ease-out; }
@keyframes flash-gol { 0% { background: rgba(245, 197, 66, 0.55); } 100% { background: transparent; } }

.tabela { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabela th, .tabela td { padding: 5px 4px; text-align: center; border-bottom: 1px solid var(--borda); }
.tabela th { color: var(--suave); font-weight: 500; font-size: 12px; }
.tabela td.nome { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.tabela td.pos { border-left: 3px solid transparent; width: 28px; }
.tabela tr.lib td.pos { border-left-color: var(--verde); }
.tabela tr.pre td.pos { border-left-color: var(--verde-claro); }
.tabela tr.sul td.pos { border-left-color: var(--azul); }
.tabela tr.z4 td.pos { border-left-color: var(--vermelho); }
.tabela tr.pulo td { color: var(--suave); border: none; padding: 0; }
.sobe { color: var(--verde); } .desce { color: var(--vermelho); }

.linha-time { padding: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.bloco { margin: 6px 0; border: 1px solid var(--borda); border-radius: 10px; padding: 6px 10px; background: var(--painel-2); }
details > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.campeao-linha { font-size: 18px; margin: 6px 0; }
.destaque-sede { font-size: 17px; margin-bottom: 8px; }

/* ---------- Escudos, bandeiras e logos ---------- */
.escudo { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 5px; flex: none; }
.escudo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.escudo.reserva {
  border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);
  border: 1px solid rgba(255, 255, 255, 0.25); color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000;
}
.escudo.reserva::after { content: attr(data-sigla); }
.bandeira { vertical-align: middle; margin: 0 5px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.logo-comp { display: inline-flex; align-items: center; justify-content: center; flex: none; vertical-align: middle; }
.logo-comp img { width: 100%; height: 100%; object-fit: contain; border-radius: 18%; }
.logo-comp.reserva {
  border-radius: 50%; color: #fff; font-family: var(--titulo); font-weight: 700;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35), transparent 40%), linear-gradient(135deg, var(--a), var(--b));
  border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}
.logo-comp.reserva::after { content: attr(data-sigla); }

/* ---------- Progresso, notícias, listas da Central ---------- */
.progresso { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; }
.progresso .nome { font-weight: 600; font-size: 14px; }
.progresso .detalhe { color: var(--suave); font-size: 12px; }
.barra { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin-top: 4px; }
.barra > span { display: block; height: 100%; border-radius: inherit; background: var(--cor, var(--ouro)); transition: width 0.8s ease; }
.noticia { padding: 8px 0; border-bottom: 1px solid var(--borda); font-size: 14px; animation: surge 0.4s ease both; }
.noticia .quando { color: var(--suave); font-size: 11px; display: block; }
.evento-lista { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid var(--borda); }
.evento-lista .quando { color: var(--suave); font-size: 12px; width: 92px; flex: none; }
.abas-mini { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.abas-mini button { border: 1px solid var(--borda); background: transparent; border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--suave); font-size: 12px; }
.abas-mini button.ativo { background: var(--painel-2); color: var(--texto); border-color: var(--ouro); }
.mes { margin-top: 14px; font-family: var(--titulo); color: var(--ouro); text-transform: uppercase; letter-spacing: 0.1em; }
.feito { opacity: 0.45; }
.proximo-ev { background: rgba(245, 197, 66, 0.1); border-radius: 6px; }

/* ---------- Palco (cenas em tela cheia) ---------- */
.palco {
  position: fixed; inset: 0; z-index: 50; overflow-y: auto;
  background: rgba(3, 6, 12, 0.92); backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: center;
}
.palco[hidden] { display: none; }
.cena { width: min(1100px, 100%); padding: 28px 16px 120px; animation: entra 0.45s ease both; }
.cena-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.cena-topo h1 { margin: 0; font-size: 28px; }
.cena-topo .sub { color: var(--suave); }
.barra-palco {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center; gap: 10px; padding: 14px;
  background: linear-gradient(transparent, rgba(3, 6, 12, 0.95) 40%);
}
.selo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; }
.selo-decisiva { background: rgba(245, 197, 66, 0.18); color: var(--ouro); }
.selo-ao-vivo { background: var(--vermelho); color: #fff; animation: pisca 1.2s infinite; }
@keyframes pisca { 50% { opacity: 0.45; } }

/* Abertura de competição */
.abertura {
  min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 20px 120px; position: relative; overflow: hidden;
}
.abertura::before {
  content: ''; position: absolute; inset: -50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, 0.08) 25%, transparent 30% 70%, rgba(255, 255, 255, 0.08) 75%, transparent 80%);
  animation: gira 12s linear infinite;
}
.abertura > * { position: relative; }
.abertura .logo-comp { animation: pop 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.abertura h1 { font-size: clamp(34px, 7vw, 72px); margin: 18px 0 4px; text-transform: uppercase; animation: letras 1s ease 0.25s both; }
.abertura .ano { font-family: var(--titulo); font-size: clamp(24px, 4vw, 40px); color: var(--ouro); animation: entra 0.6s ease 0.55s both; }
.abertura .infos { margin-top: 22px; display: grid; gap: 6px; animation: entra 0.6s ease 0.8s both; color: #dbe3f0; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(0.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes letras { 0% { letter-spacing: 0.6em; opacity: 0; filter: blur(6px); } 100% { letter-spacing: 0.04em; opacity: 1; filter: none; } }
@keyframes entra { 0% { transform: translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes surge { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.surge { animation: surge 0.35s ease both; }

/* Prévia de jogo */
.previa { border-radius: 22px; padding: 26px; border: 1px solid var(--borda); box-shadow: var(--sombra); }
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin: 22px 0; }
.duelo .lado { text-align: center; }
.duelo .lado .nome { font-family: var(--titulo); font-size: 26px; margin-top: 8px; }
.duelo .vs { font-family: var(--titulo); font-size: 40px; color: var(--ouro); }
.atributo { display: grid; grid-template-columns: 70px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; color: var(--suave); margin-top: 6px; text-align: left; }

/* Placar ao vivo */
.placar-grande { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; text-align: center; padding: 18px; }
.placar-grande .nome { font-family: var(--titulo); font-size: 22px; margin-top: 6px; }
.numeros { font-family: var(--titulo); font-size: clamp(54px, 10vw, 88px); line-height: 1; font-variant-numeric: tabular-nums; }
.numeros .pop { display: inline-block; animation: pop 0.6s ease; color: var(--ouro); }
.relogio-jogo { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-family: var(--titulo); }
.faixa-gol {
  position: fixed; left: 0; right: 0; top: 38%; z-index: 70; text-align: center; pointer-events: none;
  font-family: var(--titulo); font-size: clamp(56px, 14vw, 140px); color: var(--ouro); letter-spacing: 0.08em;
  text-shadow: 0 0 30px rgba(245, 197, 66, 0.7); animation: faixa 1.4s ease both;
}
@keyframes faixa { 0% { transform: scale(0.4); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
.feed { max-height: 260px; overflow: auto; font-size: 14px; }
.feed div { padding: 4px 0; border-bottom: 1px solid var(--borda); animation: surge 0.3s ease both; }
.estat { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.estat .duas { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.penaltis { display: flex; gap: 6px; justify-content: center; font-size: 22px; margin: 6px 0; }
.controles-vivo { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* Campeão */
.campeao-cena { min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 16px 120px; position: relative; overflow: hidden; }
.campeao-cena .trofeu { font-size: clamp(90px, 18vw, 170px); animation: trofeu 1.2s cubic-bezier(0.2, 1.5, 0.4, 1) both; filter: drop-shadow(0 0 30px rgba(245, 197, 66, 0.6)); }
.campeao-cena h1 { font-size: clamp(40px, 9vw, 96px); margin: 8px 0 0; color: var(--ouro); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); animation: letras 1s ease 0.4s both; }
.campeao-cena .clube { font-family: var(--titulo); font-size: clamp(26px, 5vw, 48px); animation: entra 0.6s ease 0.8s both; }
.campeao-cena .comp { color: #e2e8f0; margin-top: 8px; animation: entra 0.6s ease 1s both; }
@keyframes trofeu { 0% { transform: translateY(-120px) scale(0.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
canvas.confete { position: fixed; inset: 0; pointer-events: none; z-index: 55; }

/* Sorteio */
.sorteio .linha-time, .sorteio .jogo { animation: surge 0.35s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}