/* =========================================================
   Jogos de hoje – Copa do Mundo FIFA 2026
   Identidade oficial (board de cor + pílulas pretas)
   Digital signage 16:9 (1920 x 1080)
   ========================================================= */

:root {
  /* Verde de marca + menta do emblema */
  --verde: #16a35a;
  --verde-2: #0b5e37;
  --verde-3: #083f26;
  --menta: #74e8bf;

  --preto: #0a0b0c;       /* pílulas */
  --branco: #ffffff;
  --suave: rgba(255, 255, 255, 0.74);
  --suave-2: rgba(255, 255, 255, 0.5);

  /* Cores das sedes (chip de horário cicla entre elas) */
  --c-azul: #2f6be5;
  --c-magenta: #e6447a;
  --c-laranja: #f58220;
  --c-lima: #c4d600;
  --c-roxo: #6c4fb8;
  --c-vermelho: #e8472b;
  --c-amarelo: #ffc72c;

  --vermelho-vivo: #ff3b3b;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #000; overflow: hidden;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  color: var(--branco);
  -webkit-font-smoothing: antialiased;
}

/* ---- Palco fixo, centralizado; escala via JS ---- */
.palco {
  position: absolute; top: 50%; left: 50%;
  width: 1920px; height: 1080px;
  transform-origin: center center;
  background: var(--verde);
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 62px 78px 46px;
}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.cabecalho {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  padding-bottom: 8px;
}
.cab-esq { text-align: center; }
.titulo {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: 104px; line-height: 0.9; letter-spacing: 1px;
  text-transform: uppercase; text-align: center;
  white-space: nowrap; /* nunca quebrar o título em 2 linhas */
}

/* =========================================================
   LISTA
   ========================================================= */
.lista {
  position: relative; z-index: 2; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 10px;
}

/* Cada card cresce igualmente para preencher a altura disponível */
.jogo {
  --cidade: var(--c-azul);
  flex: 1 1 0; min-height: 0;
  display: flex; flex-direction: column; gap: 0; justify-content: center;
}

/* Badge de horário, colado no topo da pílula; status e local ocultos */
.meta {
  display: flex; align-items: center;
  padding: 0;
}
.meta .hora {
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: 35px; font-variant-numeric: tabular-nums;
  color: var(--branco); background: var(--cidade);
  padding: 7px 22px; border-radius: 10px 10px 0 0; letter-spacing: 0.3px;
}
.meta .venue, .meta .status { display: none; }
.status-encerrado { color: var(--branco); }
.status-agendado { color: var(--branco); }
.status-ao_vivo { color: var(--vermelho-vivo); }
.status-ao_vivo::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: var(--vermelho-vivo); box-shadow: 0 0 14px var(--vermelho-vivo);
  animation: pisca 1.2s ease-in-out infinite;
}
@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Pílula preta */
.pilula {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center; align-content: center; gap: 26px;
  background: var(--preto);
  border-radius: 0 24px 0 24px;
  padding: 18px 40px;
}

.lado { display: flex; align-items: center; gap: 26px; min-width: 0; }
.lado.mandante { justify-content: flex-end; text-align: right; }
.lado.visitante { justify-content: flex-start; text-align: left; }
.lado .nome {
  font-family: "Anton", sans-serif; font-weight: 400;
  font-size: 58px; line-height: 1.36; text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* Bandeira / escudo em cartão branco */
.bandeira {
  width: 104px; height: 76px; flex-shrink: 0;
  background: var(--branco); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.bandeira img { width: 64px; height: 64px; object-fit: contain; }
.bandeira .inicial { font-family: "Anton", sans-serif; font-size: 44px; color: var(--preto); }

/* Bandeira de país: preenche o cartão inteiro */
.bandeira-flag { padding: 0; outline: 1px solid rgba(0, 0, 0, 0.14); outline-offset: -1px; }
.bandeira-flag img { width: 100%; height: 100%; object-fit: cover; }

/* Caixa de placar */
.placar-cx {
  font-family: "Archivo", sans-serif; font-weight: 900;
  font-size: 68px; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--preto); background: var(--branco);
  min-width: 102px; height: 102px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
}
.placar-cx.vazia { color: var(--suave-2); background: rgba(255, 255, 255, 0.16); }
.vs {
  font-family: "Anton", sans-serif; font-size: 40px;
  color: var(--suave-2); letter-spacing: 1px;
}

/* =========================================================
   DIA SEM JOGOS – destaque do próximo jogo + contagem regressiva
   (sem o título "Jogos de hoje")
   ========================================================= */
.palco[data-vazio="1"] .cabecalho { display: none; }

.proximo {
  flex: 1; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 36px; text-align: center;
}
.proximo-rotulo {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 800; font-size: 32px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--menta);
  max-width: 92%; line-height: 1.25;
}
.proximo-partida { display: flex; align-items: center; gap: 44px; }
.proximo-time { display: flex; align-items: center; gap: 30px; }
.proximo-time.esq { justify-content: flex-end; }
.proximo-time .nome {
  font-family: "Anton", sans-serif; font-weight: 400; font-size: 112px;
  line-height: 1; text-transform: uppercase; letter-spacing: 0.5px;
}
.proximo-time .bandeira { width: 178px; height: 130px; border-radius: 16px; }
.proximo-x {
  font-family: "Anton", sans-serif; font-size: 70px; color: var(--suave-2);
}
.proximo-quando {
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 44px;
}

/* Contagem regressiva */
.proximo-contador { display: flex; gap: 22px; margin-top: 8px; }
.cd-bloco {
  min-width: 190px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--linha);
  border-radius: 22px; padding: 28px 22px;
}
.cd-num {
  font-family: "Archivo", sans-serif; font-weight: 900; font-size: 120px;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-unid {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 700; font-size: 28px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--menta);
}

/* Vertical: empilha os times (sem o "×"), mais juntos e maiores */
.palco[data-orientacao="vertical"] .proximo { gap: 48px; }
.palco[data-orientacao="vertical"] .proximo-x { display: none; }
.palco[data-orientacao="vertical"] .proximo-partida { flex-direction: column; gap: 14px; }
.palco[data-orientacao="vertical"] .proximo-time { gap: 36px; }
.palco[data-orientacao="vertical"] .proximo-time.esq { justify-content: center; }
.palco[data-orientacao="vertical"] .proximo-time .nome { font-size: 104px; }
.palco[data-orientacao="vertical"] .proximo-time .bandeira { width: 190px; height: 140px; border-radius: 18px; }
.palco[data-orientacao="vertical"] .proximo-rotulo { font-size: 76px; line-height: 1.1; max-width: 100%; }
.palco[data-orientacao="vertical"] .proximo-quando { font-size: 54px; }
.palco[data-orientacao="vertical"] .proximo-contador { gap: 18px; margin-top: 16px; }
.palco[data-orientacao="vertical"] .cd-bloco { min-width: 180px; padding: 28px 20px; }
.palco[data-orientacao="vertical"] .cd-num { font-size: 112px; }
.palco[data-orientacao="vertical"] .cd-unid { font-size: 30px; }

/* Rodapé da versão contagem regressiva: logo 2×, textos na base da logo,
   e margem inferior de 8% da altura da página (conteúdo sobe). */
.palco[data-vazio="1"] { padding-bottom: 86px; }                          /* 8% de 1080 */
.palco[data-orientacao="vertical"][data-vazio="1"] { padding-bottom: 154px; } /* 8% de 1920 */
.palco[data-vazio="1"] .emblema { width: 328px; height: 504px; padding: 32px 40px; transform: translateY(10%); }
.palco[data-vazio="1"] .rodape-marca,
.palco[data-vazio="1"] .rodape-status {
  top: auto; bottom: 0; transform: none;
}
/* Vertical · contagem: logo +30% e sem textos no rodapé */
.palco[data-orientacao="vertical"][data-vazio="1"] .emblema { width: 426px; height: 655px; padding: 42px 52px; }
.palco[data-orientacao="vertical"][data-vazio="1"] .rodape-marca,
.palco[data-orientacao="vertical"][data-vazio="1"] .rodape-status { display: none; }
.palco[data-orientacao="vertical"][data-vazio="1"] .proximo { transform: translateY(10%); }
/* Horizontal · contagem: logo menor para abrir espaço; conteúdo desce 10%
   (rodapé/textos ficam no lugar) */
.palco[data-orientacao="horizontal"][data-vazio="1"] .emblema { width: 240px; height: 369px; padding: 24px 30px; transform: translateY(26%); }
.palco[data-orientacao="horizontal"][data-vazio="1"] .proximo { transform: translateY(2%); }

/* Animação de entrada escalonada (versão contagem regressiva) */
@-webkit-keyframes cdSobe { from { opacity: 0; -webkit-transform: translateY(32px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes cdSobe { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@-webkit-keyframes cdEsq { from { opacity: 0; -webkit-transform: translateX(-60px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes cdEsq { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@-webkit-keyframes cdDir { from { opacity: 0; -webkit-transform: translateX(60px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes cdDir { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@-webkit-keyframes cdPop { from { opacity: 0; -webkit-transform: scale(0.55); } to { opacity: 1; -webkit-transform: scale(1); } }
@keyframes cdPop { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }

.proximo-rotulo { -webkit-animation: cdSobe 0.55s ease-out 0.1s both; animation: cdSobe 0.55s ease-out 0.1s both; }
.proximo-time.esq { -webkit-animation: cdEsq 0.6s ease-out 0.28s both; animation: cdEsq 0.6s ease-out 0.28s both; }
.proximo-time.dir { -webkit-animation: cdDir 0.6s ease-out 0.28s both; animation: cdDir 0.6s ease-out 0.28s both; }
.proximo-x { -webkit-animation: cdPop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.4) 0.5s both; animation: cdPop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.4) 0.5s both; }
.proximo-quando { -webkit-animation: cdSobe 0.55s ease-out 0.62s both; animation: cdSobe 0.55s ease-out 0.62s both; }
.cd-bloco { -webkit-animation: cdPop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.4) both; animation: cdPop 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.4) both; }
.cd-bloco:nth-child(1) { -webkit-animation-delay: 0.82s; animation-delay: 0.82s; }
.cd-bloco:nth-child(2) { -webkit-animation-delay: 0.94s; animation-delay: 0.94s; }
.cd-bloco:nth-child(3) { -webkit-animation-delay: 1.06s; animation-delay: 1.06s; }
.cd-bloco:nth-child(4) { -webkit-animation-delay: 1.18s; animation-delay: 1.18s; }

/* =========================================================
   DENSIDADE
   ========================================================= */
/* 1 jogo: herói */
.palco[data-qtd="1"] .lista { padding-top: 0; }
.palco[data-qtd="1"] .meta { padding: 0; }
.palco[data-qtd="1"] .meta .hora { font-size: 42px; padding: 8px 24px; }
.palco[data-qtd="1"] .meta .venue, .palco[data-qtd="1"] .meta .status { font-size: 32px; }
.palco[data-qtd="1"] .pilula { padding: 46px 54px; gap: 34px; }
.palco[data-qtd="1"] .lado .nome { font-size: 88px; }
.palco[data-qtd="1"] .bandeira { width: 150px; height: 110px; border-radius: 16px; }
.palco[data-qtd="1"] .bandeira img { width: 92px; height: 92px; }
.palco[data-qtd="1"] .placar-cx { font-size: 108px; min-width: 150px; height: 150px; border-radius: 20px; }
.palco[data-qtd="1"] .vs { font-size: 56px; }

/* 2 jogos: confortável */
.palco[data-qtd="2"] .lado .nome { font-size: 70px; }
.palco[data-qtd="2"] .pilula { padding: 30px 46px; }
.palco[data-qtd="2"] .placar-cx { font-size: 80px; height: 118px; min-width: 112px; }
.palco[data-qtd="2"] .bandeira { width: 120px; height: 88px; }

/* 3-4 jogos: compactação média */
.palco[data-qtd="3"] .lista, .palco[data-qtd="4"] .lista { gap: 14px; }
.palco[data-qtd="3"] .jogo, .palco[data-qtd="4"] .jogo { gap: 0; }
.palco[data-qtd="3"] .pilula, .palco[data-qtd="4"] .pilula { padding: 14px 40px; }
.palco[data-qtd="3"] .lado .nome, .palco[data-qtd="4"] .lado .nome { font-size: 52px; }
.palco[data-qtd="3"] .placar-cx, .palco[data-qtd="4"] .placar-cx { font-size: 58px; min-width: 90px; height: 90px; }
.palco[data-qtd="3"] .bandeira, .palco[data-qtd="4"] .bandeira { width: 92px; height: 68px; }
.palco[data-qtd="3"] .bandeira img, .palco[data-qtd="4"] .bandeira img { width: 56px; height: 56px; }
.palco[data-qtd="3"] .meta .hora, .palco[data-qtd="4"] .meta .hora { font-size: 30px; }
.palco[data-qtd="3"] .meta .venue, .palco[data-qtd="4"] .meta .venue,
.palco[data-qtd="3"] .meta .status, .palco[data-qtd="4"] .meta .status { font-size: 26px; }


/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  margin-top: 20px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 22px; font-weight: 600; color: var(--suave);
}
/* Emblema centralizado, sem fundo branco, +20% (140 -> 168px) */
.emblema {
  width: 109px; height: 168px; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.32));
}
/* Marca no canto inferior esquerdo */
.rodape-marca {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-weight: 800; color: var(--branco); letter-spacing: 0.3px;
}
/* Status discreto no canto direito */
.rodape-status {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 11px;
  color: var(--branco);
}
.rodape-status::before {
  content: ""; width: 13px; height: 13px; border-radius: 50%;
  background: var(--menta); box-shadow: 0 0 12px var(--menta);
}

/* =========================================================
   CONTROLE DE VERSÃO (preview / configuração)
   ========================================================= */
.controle[hidden] { display: none; }
.controle {
  position: fixed; top: 18px; right: 18px; z-index: 50;
  display: flex; align-items: flex-end; gap: 12px;
  background: rgba(10, 11, 12, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px;
  padding: 10px 12px;
  font-family: "Hanken Grotesk", sans-serif;
}
.controle-campo { display: flex; flex-direction: column; gap: 4px; }
.controle-rotulo { color: rgba(255, 255, 255, 0.7); font-size: 12px; font-weight: 700; }
/* Botão minimizar / ampliar */
.controle-toggle {
  align-self: center; flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px;
  background: rgba(255, 255, 255, 0.08); color: var(--branco);
  font-family: "Hanken Grotesk", sans-serif; font-size: 18px; font-weight: 800; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.controle-toggle:hover { background: rgba(255, 255, 255, 0.18); }
.controle.minimizado { padding: 8px; }
.controle.minimizado .controle-campo { display: none; }
.controle-select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--verde); color: var(--branco);
  border: none; border-radius: 8px;
  font-family: "Hanken Grotesk", sans-serif; font-weight: 800; font-size: 14px;
  padding: 7px 32px 7px 12px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='white'%3E%3Cpath d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* =========================================================
   VERSÃO VERTICAL (9:16 · 1080 x 1920)
   ========================================================= */
.palco[data-orientacao="vertical"] { width: 1080px; height: 1920px; padding: 80px 60px 60px; }
.palco[data-orientacao="vertical"] .cabecalho { padding-bottom: 14px; }
.palco[data-orientacao="vertical"] .titulo { font-size: 100px; line-height: 0.86; }
.palco[data-orientacao="vertical"] .lista { gap: 30px; padding-top: 18px; }
.palco[data-orientacao="vertical"] .jogo { gap: 0; }
.palco[data-orientacao="vertical"] .meta { padding: 0; }
.palco[data-orientacao="vertical"] .meta .hora { font-size: 40px; padding: 8px 22px; }
.palco[data-orientacao="vertical"] .meta .venue,
.palco[data-orientacao="vertical"] .meta .status { font-size: 32px; }

.cartao-v {
  flex: 1; min-height: 0;
  background: var(--preto); border-radius: 0 28px 0 28px;
  padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.linha-time { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
.linha-time + .linha-time { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 14px; }
.palco[data-orientacao="vertical"] .linha-time .nome { font-family: "Anton", sans-serif; font-weight: 400; font-size: 76px; line-height: 1.12; letter-spacing: 0.5px; text-align: left; text-transform: uppercase; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palco[data-orientacao="vertical"] .bandeira { width: 108px; height: 80px; }
.palco[data-orientacao="vertical"] .bandeira img { width: 68px; height: 68px; }
.palco[data-orientacao="vertical"] .placar-cx { font-size: 74px; min-width: 108px; height: 108px; border-radius: 16px; }

/* ----- Vertical · 1 jogo: cartão "herói" (A / placar / B), box mais baixo ----- */
.palco[data-orientacao="vertical"][data-qtd="1"] .lista { justify-content: center; }
.palco[data-orientacao="vertical"][data-qtd="1"] .jogo { flex: 0 0 auto; }
.cartao-unico {
  background: var(--preto); border-radius: 0 40px 0 40px;
  padding: 72px 56px;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.cartao-unico .time-bloco { display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 100%; }
.cartao-unico .time-bloco .nome {
  font-family: "Anton", sans-serif; font-weight: 400; font-size: 96px; line-height: 1;
  letter-spacing: 0.5px; text-transform: uppercase; text-align: center;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-unico .time-bloco.venceu .nome { color: var(--menta); }
.palco[data-orientacao="vertical"][data-qtd="1"] .cartao-unico .bandeira { width: 320px; height: 232px; border-radius: 22px; }
/* a bandeira preenche todo o box (sem margem branca) */
.palco[data-orientacao="vertical"][data-qtd="1"] .cartao-unico .bandeira-flag img { width: 100%; height: 100%; object-fit: cover; }
.placar-unico { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.placar-row {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  font-family: "Anton", sans-serif; color: var(--branco); line-height: 1;
}
.placar-row .pg { font-size: 168px; display: inline-flex; align-items: baseline; gap: 12px; }
.placar-row .pen { font-size: 72px; color: var(--menta); }
.placar-row .x-unico { font-size: 92px; color: var(--suave-2); }
.pen-cap {
  font-family: "Hanken Grotesk", sans-serif; font-weight: 800; font-size: 34px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--menta);
}

/* =========================================================
   DUAS COLUNAS (mais de 4 jogos) – nomes abreviados
   ========================================================= */
.palco[data-colunas="2"] .lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px 22px;
  padding-top: 8px;
}
.palco[data-colunas="2"] .jogo { gap: 0; }
.palco[data-colunas="2"] .meta .venue { display: none; }
.palco[data-colunas="2"] .meta .hora { font-size: 26px; padding: 4px 14px; }
.palco[data-colunas="2"] .meta .status { font-size: 26px; }

/* Horizontal · duas colunas (pílula compacta) */
.palco[data-colunas="2"] .pilula { padding: 14px 30px; gap: 16px; }
.palco[data-colunas="2"] .lado { gap: 18px; }
.palco[data-colunas="2"] .lado .nome { font-size: 54px; -webkit-line-clamp: 1; }
.palco[data-colunas="2"] .bandeira { width: 76px; height: 56px; }
.palco[data-colunas="2"] .bandeira img { width: 46px; height: 46px; }
.palco[data-colunas="2"] .placar-cx { font-size: 56px; min-width: 74px; height: 74px; border-radius: 12px; }
.palco[data-colunas="2"] .vs { font-size: 32px; }
/* Contagem ímpar (5 ou 7): o último card, sozinho na linha, fica centralizado */
.palco[data-colunas="2"][data-qtd="5"] .jogo:last-child,
.palco[data-colunas="2"][data-qtd="7"] .jogo:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - 22px) / 2);
}

/* Vertical · duas colunas (cartão compacto) */
.palco[data-orientacao="vertical"][data-colunas="2"] .cartao-v { padding: 20px 26px; gap: 16px; }
.palco[data-orientacao="vertical"][data-colunas="2"] .linha-time { gap: 18px; }
.palco[data-orientacao="vertical"][data-colunas="2"] .linha-time + .linha-time { padding-top: 16px; }
/* Conteúdo ampliado (nome, bandeira, placar) na vertical 2 colunas (abreviações). */
.palco[data-orientacao="vertical"][data-colunas="2"] .linha-time .nome { font-size: 69px; }
.palco[data-orientacao="vertical"][data-colunas="2"] .bandeira { width: 92px; height: 69px; }
.palco[data-orientacao="vertical"][data-colunas="2"] .placar-cx { font-size: 69px; min-width: 94px; height: 94px; }

/* =========================================================
   BANDEIRA PREENCHE O CARTÃO (sobrepõe os tamanhos por densidade)
   ========================================================= */
.palco[data-qtd] .bandeira-flag img,
.palco[data-orientacao] .bandeira-flag img {
  width: 100%; height: 100%; object-fit: cover;
}

/* =========================================================
   ANIMAÇÃO DE ENTRADA (CSS keyframes; compatível com players antigos)
   Orquestrada pelo JS, que só re-renderiza quando o conteúdo muda.
   ========================================================= */
@-webkit-keyframes entra {
  from { opacity: 0; -webkit-transform: translateY(28px); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cabecalho, .jogo, .vazio, .rodape {
  -webkit-animation: entra 0.55s ease-out both;
  animation: entra 0.55s ease-out both;
}
.cabecalho { -webkit-animation-delay: 40ms; animation-delay: 40ms; }
.rodape { -webkit-animation-delay: 120ms; animation-delay: 120ms; }
/* cada .jogo recebe seu animation-delay inline (escalonado) via app.js */

@media (prefers-reduced-motion: reduce) {
  .motivo, .status-ao_vivo::before { animation: none; }
  .cabecalho, .jogo, .vazio, .rodape,
  .proximo-rotulo, .proximo-time, .proximo-x, .proximo-quando, .cd-bloco {
    -webkit-animation: none; animation: none;
  }
}