/* TWSE — telão.
 *
 * Tela de projeção, lida de dez metros e em pé. Fundo escuro por decisão, não
 * por tema: projetor lava a cor, e branco em sala escura ofusca quem está perto
 * do palco. Aqui não há tema claro — é a única tela do sistema com um visual só.
 *
 * As medidas saem de vw/vh em vez de pixel: o mesmo arquivo serve um monitor de
 * 24" na secretaria e um telão de LED na pista, sem ninguém ajustar zoom.
 */

.telao {
  --telao-fundo:   #0a1614;
  --telao-fita:    #0f201d;
  --telao-linha:   #16302b;
  --telao-tinta:   #eaf5f2;
  --telao-fraca:   #7fa39c;
  --telao-marca:   #2ad4b0;
  --telao-vivo:    #ff7a2f;
  --telao-ouro:    #f5c542;
  --telao-prata:   #c9d6da;
  --telao-bronze:  #d98b52;

  margin: 0;
  min-height: 100vh;
  background: var(--telao-fundo);
  color: var(--telao-tinta);
  font-family: var(--fonte);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Topo ----------------------------------------------------------------- */

.telao-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2vw;
  padding: 2.2vh 2.5vw 1.6vh;
  background: var(--telao-fita);
  border-bottom: 2px solid var(--telao-linha);
}

.telao-evento {
  display: block;
  font-size: 1.5vh; letter-spacing: .22em; text-transform: uppercase;
  color: var(--telao-fraca);
}
.telao-topo h1 {
  margin: .4vh 0 .2vh;
  font-size: 3.4vh; font-weight: 700; letter-spacing: -.01em;
  color: var(--telao-tinta);
}
.telao-bateria { font-size: 1.9vh; color: var(--telao-marca); font-weight: 600; }

.telao-estado { text-align: right; display: flex; flex-direction: column; gap: .6vh; align-items: flex-end; }

.telao-vivo {
  display: inline-flex; align-items: center; gap: .8vw;
  font-size: 1.8vh; font-weight: 800; letter-spacing: .18em;
  color: var(--telao-vivo);
}
.telao-vivo i {
  width: 1.4vh; height: 1.4vh; border-radius: 50%;
  background: var(--telao-vivo);
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar { 50% { opacity: .25; } }

.telao-final {
  font-size: 1.8vh; font-weight: 800; letter-spacing: .18em;
  color: var(--telao-marca);
}
.telao-relogio {
  font-size: 2.6vh; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--telao-tinta);
}
.telao-paginas { font-size: 1.5vh; color: var(--telao-fraca); font-variant-numeric: tabular-nums; }

/* --- Lista ---------------------------------------------------------------- */

.telao-corpo { flex: 1; padding: 1.4vh 2.5vw 2vh; display: flex; flex-direction: column; }

.telao-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8vh; }

.telao-lista > li {
  display: flex; align-items: center; gap: 2vw;
  padding: 1.1vh 1.6vw;
  background: var(--telao-fita);
  border-left: .5vw solid var(--telao-linha);
  border-radius: .6vh;
}
/* Entra por baixo quando a página gira, para o olho perceber que trocou. */
.telao-lista > li.entrando { animation: entrar .45s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(1.5vh); } }

.telao-lista .pos {
  flex: none; width: 3.5vw; text-align: center;
  font-size: 4vh; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--telao-fraca);
}
/* O retrato ajuda o locutor e o público a ligar o número ao atleta que acabou
   de passar. Quem não tem foto entra com as iniciais, para a linha não pular. */
.telao-retrato {
  flex: none;
  width: 6.5vh; height: 6.5vh;
  border-radius: .6vh;
  object-fit: cover;
  background: var(--telao-linha);
  display: grid; place-content: center;
}
.telao-retrato.sem-foto {
  color: var(--telao-fraca);
  font-size: 2.2vh; font-weight: 700;
}
.telao-lista > li.podio.p1 .telao-retrato { width: 8vh; height: 8vh; }

.telao-lista .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3vh; }
.telao-lista .nome {
  font-size: 3.4vh; font-weight: 700; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.telao-lista .sub { font-size: 1.7vh; color: var(--telao-fraca); }

.telao-lista .nota {
  flex: none; text-align: right;
  font-size: 4.4vh; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--telao-marca);
}
.telao-lista .nota .parcial {
  display: block; margin-top: .4vh;
  font-size: 1.4vh; font-style: normal; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--telao-vivo);
}

/* Pódio: cor por lugar, e só quando a prova acabou — destacar o primeiro no
   meio da bateria anuncia um campeão que a próxima nota derruba. */
.telao-lista > li.podio.p1 { border-left-color: var(--telao-ouro); }
.telao-lista > li.podio.p1 .pos { color: var(--telao-ouro); font-size: 5vh; }
.telao-lista > li.podio.p1 .nome { font-size: 4vh; }
.telao-lista > li.podio.p2 { border-left-color: var(--telao-prata); }
.telao-lista > li.podio.p2 .pos { color: var(--telao-prata); }
.telao-lista > li.podio.p3 { border-left-color: var(--telao-bronze); }
.telao-lista > li.podio.p3 .pos { color: var(--telao-bronze); }

.telao-lista > li.fora { opacity: .45; }
.telao-lista > li.fora .nota { color: var(--telao-fraca); }

.telao-vazio { text-align: center; margin-top: 12vh; font-size: 3vh; color: var(--telao-fraca); }

/* --- Tela cheia ----------------------------------------------------------- */

.telao-tela-cheia {
  position: fixed; right: 1.2vw; bottom: 1.2vh;
  padding: .8vh 1.4vw;
  background: var(--telao-fita); color: var(--telao-fraca);
  border: 1px solid var(--telao-linha); border-radius: .6vh;
  font-family: inherit; font-size: 1.5vh; cursor: pointer;
  opacity: .25; transition: opacity .2s ease;
}
.telao-tela-cheia:hover, .telao-tela-cheia:focus-visible { opacity: 1; color: var(--telao-tinta); }

/* Sem mouse por perto o botão some sozinho: ninguém quer um botão no telão. */
@media (hover: none) { .telao-tela-cheia { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .telao-vivo i { animation: none; }
  .telao-lista > li.entrando { animation: none; }
}