/* ============================================================================
   telao.css — telão de projeção da Trilha do Código (1920x1080, 8 metros).

   Regras seguidas (CONTRATO.md §2 e §9):
   - Nenhum hex solto: tudo sai de var(--tc-*) de src/tokens.css.
   - Classes com prefixo tc-; ids com prefixo telao-.
   - Sem rolagem: a tela inteira cabe em 100dvh.
   - prefers-reduced-motion é respeitado (tokens.css zera as durações; aqui
     as animações decorativas também são desligadas).
   ========================================================================= */

/* ── Variáveis próprias do telão ─────────────────────────────────────────── */
.tc-telao {
  /* medidas calculadas em telao.js e gravadas inline no elemento do tabuleiro */
  --tc-telao-peao: 3rem;            /* lado do escudo que anda no tabuleiro */
  --tc-telao-aside: calc(18rem * var(--tc-escala));  /* faixa lateral de classificação */
  --tc-telao-gap: 0.9rem;
  /* teto de 650ms: a posição precisa aparecer em menos de 1s (RF-21) */
  --tc-telao-deslize: min(var(--tc-tempo-peao), 650ms);
  --tc-telao-borda-casa: var(--tc-borda-grossa);
}

html, body { height: 100%; }

[hidden] { display: none !important; }

body.tc-telao {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% -10%, color-mix(in srgb, var(--tc-marca) 22%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 100% 110%, color-mix(in srgb, var(--tc-destaque) 16%, transparent) 0%, transparent 55%),
    var(--tc-fundo);
  cursor: none;                      /* ninguém interage com o telão */
  user-select: none;
}
body.tc-telao[data-cursor='visivel'] { cursor: default; }

/* ── Grade geral: cabeçalho / tabuleiro + classificação / feed ───────────── */
.tc-telao-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tc-telao-aside);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'cabecalho cabecalho'
    'tabuleiro classificacao'
    'feed feed';
  gap: var(--tc-telao-gap);
  height: 100dvh;
  padding: var(--tc-telao-gap);
  box-sizing: border-box;
}

/* ── Cartão base ─────────────────────────────────────────────────────────── */
.tc-telao-cartao {
  background: color-mix(in srgb, var(--tc-superficie) 88%, transparent);
  border: var(--tc-borda-fina) solid var(--tc-borda);
  border-radius: var(--tc-raio-xl);
  box-shadow: var(--tc-sombra-md);
}

/* ═══ Cabeçalho ══════════════════════════════════════════════════════════ */
.tc-telao-cabecalho {
  grid-area: cabecalho;
  display: flex;
  align-items: center;
  gap: var(--tc-esp-5);
  padding: var(--tc-esp-3) var(--tc-esp-5);
}

.tc-telao-marca { display: flex; align-items: center; gap: var(--tc-esp-3); }
.tc-telao-marca > i { font-size: var(--tc-txt-3xl); color: var(--tc-marca); }
.tc-telao-marca-titulo {
  font-family: var(--tc-fonte-titulo);
  font-weight: var(--tc-peso-titulo);
  font-size: var(--tc-txt-2xl);
  line-height: 1.05;
  margin: 0;
  letter-spacing: var(--tc-espacamento-titulo);
}
.tc-telao-marca-sub {
  margin: 0;
  font-size: var(--tc-txt-md);
  color: var(--tc-texto-suave);
  font-weight: var(--tc-peso-medio);
}

.tc-telao-estado {
  display: inline-flex;
  align-items: center;
  gap: var(--tc-esp-2);
  padding: var(--tc-esp-2) var(--tc-esp-4);
  border-radius: var(--tc-raio-pilula);
  font-size: var(--tc-txt-lg);
  font-weight: var(--tc-peso-forte);
  background: var(--tc-neutro-suave);
  color: var(--tc-texto);
  white-space: nowrap;
}
.tc-telao-ponto {
  width: 0.7em; height: 0.7em; border-radius: 50%;
  background: currentColor;
  animation: tc-pulsar 1.8s ease-in-out infinite;
}
.tc-telao-estado[data-estado='jogando'] { background: var(--tc-acerto-suave); color: var(--tc-acerto); }
.tc-telao-estado[data-estado='lobby'] { background: var(--tc-info-suave); color: var(--tc-info); }
.tc-telao-estado[data-estado='pausada'] { background: var(--tc-alerta-suave); color: var(--tc-alerta); }
.tc-telao-estado[data-estado='encerrada'] { background: var(--tc-destaque-suave); color: var(--tc-destaque-forte); }
.tc-telao-estado[data-estado='pausada'] .tc-telao-ponto,
.tc-telao-estado[data-estado='encerrada'] .tc-telao-ponto { animation: none; }

.tc-telao-espaco { flex: 1 1 auto; }

/* Código da sala no cabeçalho (versão compacta; a gigante mora no lobby) */
.tc-telao-codigo {
  display: flex; align-items: center; gap: var(--tc-esp-3);
  padding: var(--tc-esp-2) var(--tc-esp-4);
  border-radius: var(--tc-raio-lg);
  background: var(--tc-marca-suave);
  border: var(--tc-borda-grossa) solid var(--tc-marca);
}
.tc-telao-codigo-rotulo {
  font-size: var(--tc-txt-sm);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--tc-peso-forte);
  color: var(--tc-marca-forte);
}
.tc-telao-codigo-valor {
  font-family: var(--tc-fonte-codigo);
  font-size: var(--tc-txt-2xl);
  font-weight: var(--tc-peso-titulo);
  letter-spacing: 0.18em;
  color: var(--tc-marca-forte);
}

.tc-telao-medidor {
  text-align: right;
  display: flex; flex-direction: column; gap: 0.1em;
  min-width: 6.5em;
}
.tc-telao-rotulo {
  font-size: var(--tc-txt-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tc-texto-fraco);
  font-weight: var(--tc-peso-forte);
}
.tc-telao-relogio {
  font-family: var(--tc-fonte-codigo);
  font-size: var(--tc-txt-3xl);
  font-weight: var(--tc-peso-titulo);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tc-texto);
}
.tc-telao-relogio[data-parado='sim'] { color: var(--tc-alerta); }
.tc-telao-numero {
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-2xl);
  font-weight: var(--tc-peso-titulo);
  line-height: 1;
}

/* ═══ Tabuleiro ══════════════════════════════════════════════════════════ */
.tc-telao-tabuleiro {
  grid-area: tabuleiro;
  position: relative;
  padding: var(--tc-esp-4);
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.tc-telao-area {
  position: relative;
  width: 100%;
  height: 100%;
}

.tc-telao-trilha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.tc-telao-trilha-base { fill: none; stroke: var(--tc-trilha); stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.tc-telao-trilha-lider {
  fill: none; stroke: var(--tc-marca); stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.85;
  transition: stroke-dashoffset var(--tc-telao-deslize) var(--tc-curva);
}

/* Grade das casas — serpente montada em telao.js */
.tc-telao-casas {
  position: relative;
  display: grid;
  gap: var(--tc-esp-3);
  width: 100%;
  height: 100%;
  z-index: var(--tc-z-tabuleiro);
}

.tc-telao-casa {
  position: relative;
  border-radius: var(--tc-raio-lg);
  background: var(--tc-casa-comum);
  color: var(--tc-casa-comum-texto);
  border: var(--tc-telao-borda-casa) solid transparent;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0.35em 0.5em;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow var(--tc-tempo-medio) var(--tc-curva),
              transform var(--tc-tempo-medio) var(--tc-curva);
}
.tc-telao-casa-numero {
  font-family: var(--tc-fonte-titulo);
  font-weight: var(--tc-peso-titulo);
  font-size: calc(var(--tc-telao-casa-base, 6rem) * 0.3);
  line-height: 1;
  opacity: 0.85;
}
.tc-telao-casa-icone {
  position: absolute;
  right: 0.28em; top: 0.2em;
  font-size: calc(var(--tc-telao-casa-base, 6rem) * 0.28);
  line-height: 1;
  opacity: 0.95;
}
.tc-telao-casa-nome {
  font-size: calc(var(--tc-telao-casa-base, 6rem) * 0.115);
  font-weight: var(--tc-peso-forte);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: end;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.tc-telao-casa[data-tipo-casa='bonus']      { background: color-mix(in srgb, var(--tc-casa-bonus) 26%, var(--tc-superficie)); border-color: var(--tc-casa-bonus); color: var(--tc-texto); }
.tc-telao-casa[data-tipo-casa='armadilha']  { background: color-mix(in srgb, var(--tc-casa-armadilha) 22%, var(--tc-superficie)); border-color: var(--tc-casa-armadilha); color: var(--tc-texto); }
.tc-telao-casa[data-tipo-casa='poder']      { background: color-mix(in srgb, var(--tc-casa-poder) 24%, var(--tc-superficie)); border-color: var(--tc-casa-poder); color: var(--tc-texto); }
.tc-telao-casa[data-tipo-casa='checkpoint'] { background: color-mix(in srgb, var(--tc-casa-checkpoint) 24%, var(--tc-superficie)); border-color: var(--tc-casa-checkpoint); color: var(--tc-texto); }
.tc-telao-casa[data-tipo-casa='final'] {
  background: color-mix(in srgb, var(--tc-casa-final) 34%, var(--tc-superficie));
  border-color: var(--tc-casa-final);
  color: var(--tc-texto);
}
.tc-telao-casa[data-tipo-casa='final'] .tc-telao-casa-icone { color: var(--tc-casa-final); }
.tc-telao-casa[data-tipo-casa='bonus'] .tc-telao-casa-icone { color: var(--tc-casa-bonus); }
.tc-telao-casa[data-tipo-casa='armadilha'] .tc-telao-casa-icone { color: var(--tc-casa-armadilha); }
.tc-telao-casa[data-tipo-casa='poder'] .tc-telao-casa-icone { color: var(--tc-casa-poder); }
.tc-telao-casa[data-tipo-casa='checkpoint'] .tc-telao-casa-icone { color: var(--tc-casa-checkpoint); }

/* casa que acabou de receber alguém */
.tc-telao-casa[data-chegada='sim'] {
  box-shadow: 0 0 0 0.28em color-mix(in srgb, var(--tc-marca) 55%, transparent);
}

/* ── Escudos que andam ───────────────────────────────────────────────────── */
.tc-telao-peoes {
  position: absolute;
  inset: 0;
  z-index: var(--tc-z-peao);
  pointer-events: none;
}

.tc-telao-peao {
  position: absolute;
  top: 0; left: 0;
  width: var(--tc-telao-peao);
  height: var(--tc-telao-peao);
  display: grid;
  place-items: center;
  border-radius: 30%;
  background: var(--tc-peao-cor, var(--tc-marca));
  color: var(--tc-equipe-texto);
  border: var(--tc-borda-grossa) solid color-mix(in srgb, var(--tc-superficie) 75%, transparent);
  box-shadow: var(--tc-sombra-md);
  transition: transform var(--tc-telao-deslize) var(--tc-curva),
              width var(--tc-tempo-medio) var(--tc-curva),
              height var(--tc-tempo-medio) var(--tc-curva);
  will-change: transform;
}
.tc-telao-peao > i {
  font-size: calc(var(--tc-telao-peao) * 0.58);
  line-height: 1;
}
.tc-telao-peao-nome {
  position: absolute;
  top: calc(100% + 0.15em);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(var(--tc-telao-peao) * 3);
  padding: 0.05em 0.45em;
  border-radius: var(--tc-raio-pilula);
  background: color-mix(in srgb, var(--tc-superficie) 92%, transparent);
  color: var(--tc-texto);
  border: var(--tc-borda-fina) solid var(--tc-borda);
  font-size: calc(var(--tc-telao-peao) * 0.26);
  font-weight: var(--tc-peso-forte);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-telao-peao[data-nome-visivel='nao'] .tc-telao-peao-nome { display: none; }

.tc-telao-peao-delta {
  position: absolute;
  bottom: calc(100% + 0.1em);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--tc-fonte-titulo);
  font-weight: var(--tc-peso-titulo);
  font-size: calc(var(--tc-telao-peao) * 0.42);
  line-height: 1;
  color: var(--tc-acerto);
  text-shadow: 0 0 0.4em var(--tc-fundo), 0 0 0.15em var(--tc-fundo);
  opacity: 0;
}

.tc-telao-peao[data-mov='avanca'] {
  z-index: 2;
  box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--tc-acerto) 60%, transparent), var(--tc-sombra-lg);
}
.tc-telao-peao[data-mov='recua'] {
  z-index: 2;
  box-shadow: 0 0 0 0.22em color-mix(in srgb, var(--tc-erro) 60%, transparent), var(--tc-sombra-lg);
}
.tc-telao-peao[data-mov='recua'] .tc-telao-peao-delta { color: var(--tc-erro); }
.tc-telao-peao[data-mov] .tc-telao-peao-delta { animation: tc-subir-delta 1.4s var(--tc-curva) forwards; }

.tc-telao-peao[data-congelada='sim'] {
  filter: saturate(0.35);
  box-shadow: 0 0 0 0.2em color-mix(in srgb, var(--tc-info) 70%, transparent), var(--tc-sombra-md);
}
.tc-telao-peao[data-sos='sim'] { animation: tc-piscar 1.1s ease-in-out infinite; }

/* ── Painel de pausa ─────────────────────────────────────────────────────── */
.tc-telao-pausa > i {
  font-size: var(--tc-txt-5xl);
  color: var(--tc-alerta);
}
.tc-telao-pausa .tc-telao-lobby-contagem { color: var(--tc-texto-suave); }

/* ── Painel de lobby sobre o tabuleiro ───────────────────────────────────── */
.tc-telao-lobby {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: var(--tc-z-painel);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--tc-esp-4);
  text-align: center;
  padding: var(--tc-esp-6);
  border-radius: var(--tc-raio-xl);
  background: color-mix(in srgb, var(--tc-fundo) 88%, transparent);
  backdrop-filter: blur(6px);
}
.tc-telao-lobby-chamada {
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-2xl);
  font-weight: var(--tc-peso-forte);
  color: var(--tc-texto-suave);
  margin: 0;
}
.tc-telao-lobby-codigo {
  font-family: var(--tc-fonte-codigo);
  font-size: min(var(--tc-txt-5xl) * 2.6, 22vw);
  font-weight: var(--tc-peso-titulo);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--tc-marca);
  text-shadow: 0 0 0.35em color-mix(in srgb, var(--tc-marca) 35%, transparent);
  margin: 0;
  padding: 0.08em 0.16em;
  border: var(--tc-borda-grossa) solid var(--tc-marca);
  border-radius: var(--tc-raio-xl);
  background: color-mix(in srgb, var(--tc-marca) 12%, transparent);
}
/* QR e código lado a lado: aproveita o 16:9 e deixa os dois grandes.
   Quem tem a câmera à mão escaneia; quem não tem, digita.

   `nowrap` é essencial: se a linha quebrar, o código gigante empurra o QR
   para fora do painel e nenhum dos dois fica legível de longe. Por isso o
   código também encolhe quando está aqui dentro — ver a regra logo abaixo. */
.tc-telao-lobby-acesso {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--tc-esp-3), 2vw, var(--tc-esp-5));
  max-width: 100%;
}
.tc-telao-lobby-ou {
  flex: 0 0 auto;
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-2xl);
  font-weight: var(--tc-peso-forte);
  color: var(--tc-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
/* Ao lado do QR o código não precisa (nem cabe) no tamanho que tinha sozinho. */
.tc-telao-lobby-acesso .tc-telao-lobby-codigo {
  font-size: min(var(--tc-txt-5xl) * 1.6, 9vw);
}
.tc-telao-qr {
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--tc-esp-2);
}
/* Fundo BRANCO e módulos escuros, sempre — inclusive no tema escuro. Leitor de
   QR invertido é loteria, e aqui não dá para pedir para o aluno tentar de novo. */
.tc-telao-qr-imagem {
  background: #ffffff;
  padding: var(--tc-esp-3);
  border-radius: var(--tc-raio-lg);
  line-height: 0;
  box-shadow: 0 0 0 var(--tc-borda-grossa) var(--tc-marca);
}
.tc-telao-qr-imagem svg {
  display: block;
  width: min(30vh, 17vw, 300px);
  height: auto;
}
.tc-telao-qr figcaption {
  font-size: var(--tc-txt-lg);
  font-weight: var(--tc-peso-forte);
  color: var(--tc-texto-suave);
}
/* Sem QR (código ainda não existe), o bloco some e o código volta a mandar. */
.tc-telao-qr[hidden] { display: none; }
.tc-telao-lobby-acesso:has(.tc-telao-qr[hidden]) .tc-telao-lobby-ou { display: none; }
.tc-telao-lobby-acesso:has(.tc-telao-qr[hidden]) .tc-telao-lobby-codigo {
  font-size: min(var(--tc-txt-5xl) * 2.6, 22vw);
}

.tc-telao-lobby-endereco {
  font-size: var(--tc-txt-xl);
  color: var(--tc-texto-suave);
  margin: 0;
}
.tc-telao-lobby-endereco strong { color: var(--tc-texto); font-family: var(--tc-fonte-codigo); }
.tc-telao-lobby-contagem {
  font-size: var(--tc-txt-xl);
  font-weight: var(--tc-peso-forte);
  color: var(--tc-destaque-forte);
  margin: 0;
}

/* ═══ Classificação ao vivo ══════════════════════════════════════════════ */
.tc-telao-classificacao {
  grid-area: classificacao;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--tc-esp-2);
  padding: var(--tc-esp-4);
  min-height: 0;
}
.tc-telao-titulo-faixa {
  display: flex; align-items: center; gap: var(--tc-esp-2);
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-lg);
  font-weight: var(--tc-peso-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tc-texto-suave);
  margin: 0;
}
.tc-telao-titulo-faixa > i { color: var(--tc-destaque); }

.tc-telao-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-content: start;
  gap: 0.3em;
  min-height: 0;
  overflow: hidden;
  /* base da faixa: tudo abaixo é em, e telao.js reescreve esta fonte quando
     há equipes demais para caber sem rolagem */
  font-size: var(--tc-txt-sm);
}
.tc-telao-linha {
  display: grid;
  grid-template-columns: 1.4em auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5em;
  padding: 0.28em 0.5em;
  border-radius: var(--tc-raio-md);
  background: var(--tc-superficie-alt);
  border-left: 0.35em solid var(--tc-linha-cor, var(--tc-borda-forte));
  transition: background var(--tc-tempo-medio) var(--tc-curva);
}
.tc-telao-linha[data-posicao='1'] { background: color-mix(in srgb, var(--tc-destaque) 18%, var(--tc-superficie-alt)); }
.tc-telao-linha[data-variacao='subiu'] { animation: tc-realce-subiu 1.6s var(--tc-curva); }
.tc-telao-linha[data-variacao='desceu'] { animation: tc-realce-desceu 1.6s var(--tc-curva); }

.tc-telao-posicao {
  font-family: var(--tc-fonte-titulo);
  font-size: 1.15em;
  font-weight: var(--tc-peso-titulo);
  text-align: center;
  color: var(--tc-texto-suave);
  font-variant-numeric: tabular-nums;
}
.tc-telao-linha[data-posicao='1'] .tc-telao-posicao { color: var(--tc-destaque-forte); }

.tc-telao-escudo {
  width: 1.8em; height: 1.8em;
  border-radius: 28%;
  display: grid; place-items: center;
  background: var(--tc-linha-cor, var(--tc-marca));
  color: var(--tc-equipe-texto);
  font-size: 1.05em;
  flex: none;
}
.tc-telao-nome {
  font-size: 1em;
  font-weight: var(--tc-peso-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-telao-metricas {
  display: flex; align-items: baseline; gap: 0.45em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tc-telao-metrica-casa {
  font-family: var(--tc-fonte-titulo);
  font-size: 1.3em;
  font-weight: var(--tc-peso-titulo);
  color: var(--tc-texto);
}
.tc-telao-metrica-extra {
  font-size: 0.72em;
  color: var(--tc-texto-fraco);
  font-weight: var(--tc-peso-forte);
}
.tc-telao-marcadores { display: inline-flex; gap: 0.2em; font-size: 1em; }
.tc-telao-marcadores .tc-sos { color: var(--tc-erro); }
.tc-telao-marcadores .tc-congelada { color: var(--tc-info); }
.tc-telao-marcadores .tc-fim { color: var(--tc-destaque); }

.tc-telao-legenda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25em var(--tc-esp-3);
  padding-top: var(--tc-esp-2);
  border-top: var(--tc-borda-fina) solid var(--tc-borda);
  font-size: var(--tc-txt-sm);
  color: var(--tc-texto-suave);
  font-weight: var(--tc-peso-medio);
}
.tc-telao-legenda span { display: inline-flex; align-items: center; gap: 0.35em; }
.tc-telao-legenda i { font-size: 1.2em; }
.tc-legenda-bonus { color: var(--tc-casa-bonus); }
.tc-legenda-armadilha { color: var(--tc-casa-armadilha); }
.tc-legenda-poder { color: var(--tc-casa-poder); }
.tc-legenda-checkpoint { color: var(--tc-casa-checkpoint); }

.tc-telao-vazio {
  font-size: var(--tc-txt-md);
  color: var(--tc-texto-fraco);
  text-align: center;
  padding: var(--tc-esp-4);
}

/* ═══ Feed de eventos ════════════════════════════════════════════════════ */
.tc-telao-feed {
  grid-area: feed;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--tc-esp-4);
  padding: var(--tc-esp-3) var(--tc-esp-4);
  min-width: 0;
}
.tc-telao-feed-rotulo {
  display: flex; align-items: center; gap: var(--tc-esp-2);
  padding: var(--tc-esp-2) var(--tc-esp-3);
  border-radius: var(--tc-raio-pilula);
  background: var(--tc-erro-suave);
  color: var(--tc-erro);
  font-size: var(--tc-txt-md);
  font-weight: var(--tc-peso-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.tc-telao-feed-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex;
  gap: var(--tc-esp-3);
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.tc-telao-evento {
  display: flex; align-items: center; gap: var(--tc-esp-2);
  padding: var(--tc-esp-2) var(--tc-esp-4);
  border-radius: var(--tc-raio-lg);
  background: var(--tc-superficie-alt);
  border: var(--tc-borda-fina) solid var(--tc-borda);
  font-size: var(--tc-txt-lg);
  line-height: 1.25;
  white-space: nowrap;
  flex: 0 0 auto;
  overflow: hidden;
}
.tc-telao-evento > i { font-size: 1.25em; flex: none; }
.tc-telao-evento b { font-weight: var(--tc-peso-titulo); }
.tc-telao-evento-texto { overflow: hidden; text-overflow: ellipsis; }
.tc-telao-evento[data-tom='avanco'] { border-color: var(--tc-acerto); }
.tc-telao-evento[data-tom='avanco'] > i { color: var(--tc-acerto); }
.tc-telao-evento[data-tom='recuo'] { border-color: var(--tc-erro); }
.tc-telao-evento[data-tom='recuo'] > i { color: var(--tc-erro); }
.tc-telao-evento[data-tom='poder'] { border-color: var(--tc-casa-poder); }
.tc-telao-evento[data-tom='poder'] > i { color: var(--tc-casa-poder); }
.tc-telao-evento[data-tom='alerta'] { border-color: var(--tc-alerta); }
.tc-telao-evento[data-tom='alerta'] > i { color: var(--tc-alerta); }
.tc-telao-evento[data-tom='destaque'] { border-color: var(--tc-destaque); background: var(--tc-destaque-suave); }
.tc-telao-evento[data-tom='destaque'] > i { color: var(--tc-destaque-forte); }
.tc-telao-evento[data-tom='neutro'] > i { color: var(--tc-texto-fraco); }
.tc-telao-evento[data-novo='sim'] { animation: tc-entrar-evento var(--tc-tempo-lento) var(--tc-curva); }

/* ═══ Pódio (RF-26) ══════════════════════════════════════════════════════ */
.tc-telao-podio {
  position: fixed;
  inset: 0;
  z-index: var(--tc-z-modal);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--tc-esp-4);
  padding: var(--tc-esp-5) var(--tc-esp-7);
  box-sizing: border-box;
  background:
    radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--tc-destaque) 26%, transparent), transparent 70%),
    var(--tc-fundo);
  animation: tc-entrar-podio var(--tc-tempo-lento) var(--tc-curva);
}
.tc-telao-podio-cabecalho { text-align: center; }
.tc-telao-podio-titulo {
  font-size: var(--tc-txt-3xl);
  font-family: var(--tc-fonte-titulo);
  font-weight: var(--tc-peso-titulo);
  margin: 0;
}
.tc-telao-podio-sub {
  margin: 0.2em 0 0;
  font-size: var(--tc-txt-lg);
  color: var(--tc-texto-suave);
}
.tc-telao-podio-lugares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: var(--tc-esp-5);
  min-height: 0;
  overflow: hidden;
}
.tc-telao-lugar {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  align-content: start;
  gap: var(--tc-esp-2);
  padding: var(--tc-esp-4) var(--tc-esp-4);
  border-radius: var(--tc-raio-xl);
  background: var(--tc-superficie);
  border: var(--tc-borda-grossa) solid var(--tc-borda);
  box-shadow: var(--tc-sombra-lg);
  overflow: hidden;
  min-height: 0;
}
.tc-telao-lugar[data-lugar='1'] { border-color: var(--tc-destaque); height: 97%; }
.tc-telao-lugar[data-lugar='2'] { height: 82%; }
.tc-telao-lugar[data-lugar='3'] { height: 70%; }
.tc-telao-lugar-medalha {
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-2xl);
  font-weight: var(--tc-peso-titulo);
  color: var(--tc-texto-fraco);
}
.tc-telao-lugar[data-lugar='1'] .tc-telao-lugar-medalha { color: var(--tc-destaque-forte); }
.tc-telao-lugar-escudo {
  width: 2.2em; height: 2.2em;
  border-radius: 28%;
  display: grid; place-items: center;
  background: var(--tc-linha-cor, var(--tc-marca));
  color: var(--tc-equipe-texto);
  font-size: var(--tc-txt-2xl);
  box-shadow: var(--tc-sombra-md);
}
.tc-telao-lugar-nome {
  font-family: var(--tc-fonte-titulo);
  font-size: var(--tc-txt-xl);
  font-weight: var(--tc-peso-titulo);
  text-align: center;
  line-height: 1.15;
}
.tc-telao-lugar-criterios {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.15em; align-content: start;
  font-size: var(--tc-txt-md);
  color: var(--tc-texto-suave);
  text-align: center;
}
.tc-telao-lugar-criterios b { color: var(--tc-texto); font-variant-numeric: tabular-nums; }
.tc-telao-lugar-empate {
  font-size: var(--tc-txt-md);
  font-weight: var(--tc-peso-forte);
  color: var(--tc-alerta);
}
.tc-telao-podio-restantes {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--tc-esp-2) var(--tc-esp-3);
  font-size: var(--tc-txt-sm);
  color: var(--tc-texto-suave);
  max-height: 18dvh;
  overflow: hidden;
}
.tc-telao-podio-restantes span {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.2em 0.7em;
  border-radius: var(--tc-raio-pilula);
  background: var(--tc-superficie-alt);
  border: var(--tc-borda-fina) solid var(--tc-borda);
}

/* ═══ Aviso de conexão ═══════════════════════════════════════════════════ */
.tc-telao-aviso {
  position: fixed;
  right: var(--tc-esp-5); bottom: var(--tc-esp-5);
  z-index: var(--tc-z-aviso);
  display: flex; align-items: center; gap: var(--tc-esp-3);
  max-width: 80vw;
  padding: var(--tc-esp-3) var(--tc-esp-5);
  border-radius: var(--tc-raio-lg);
  background: var(--tc-alerta-suave);
  color: var(--tc-alerta);
  border: var(--tc-borda-grossa) solid var(--tc-alerta);
  font-size: var(--tc-txt-lg);
  font-weight: var(--tc-peso-forte);
  box-shadow: var(--tc-sombra-lg);
}
.tc-telao-aviso > i { font-size: 1.4em; }

/* ═══ Animações ══════════════════════════════════════════════════════════ */
@keyframes tc-pulsar {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
@keyframes tc-piscar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes tc-subir-delta {
  0% { opacity: 0; transform: translate(-50%, 0.6em); }
  25% { opacity: 1; transform: translate(-50%, 0); }
  75% { opacity: 1; transform: translate(-50%, -0.3em); }
  100% { opacity: 0; transform: translate(-50%, -0.9em); }
}
@keyframes tc-entrar-evento {
  from { opacity: 0; transform: translateY(0.8em) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes tc-entrar-podio {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: none; }
}
@keyframes tc-realce-subiu {
  0% { background: color-mix(in srgb, var(--tc-acerto) 35%, var(--tc-superficie-alt)); }
  100% { background: var(--tc-superficie-alt); }
}
@keyframes tc-realce-desceu {
  0% { background: color-mix(in srgb, var(--tc-erro) 30%, var(--tc-superficie-alt)); }
  100% { background: var(--tc-superficie-alt); }
}

/* PRD §9 — quem pediu menos movimento não recebe nenhum floreio. */
@media (prefers-reduced-motion: reduce) {
  .tc-telao-ponto,
  .tc-telao-peao[data-sos='sim'],
  .tc-telao-peao[data-mov] .tc-telao-peao-delta,
  .tc-telao-evento[data-novo='sim'],
  .tc-telao-linha[data-variacao],
  .tc-telao-podio { animation: none !important; }
  /* sem animação, o rótulo +2/-1 aparece enquanto durar o realce do movimento */
  .tc-telao-peao[data-mov] .tc-telao-peao-delta { opacity: 1; }
}