/* ==========================================================================
   Sorteador de temas — Scoobelu
   Visual conforme projects/scoobelu/brandguide/visual.md

   Fluxo em quatro telas: inicio → tema → estudo → discurso.

   A cor escala junto com a tensão do quadro, sempre com uma dominante só:
     inicio e tema  — marrom, amarelo de destaque, ação principal em vermelho
     estudo         — vermelho, tema em branco, cronômetro em amarelo
     discurso       — amarelo, tudo em marrom; o countdown vira vermelho nos
                      10 segundos finais (vermelho sobre amarelo é o destaque
                      máximo do brandguide)
   ========================================================================== */

@font-face {
  font-family: "Boldfinger";
  src: url("assets/fontes/Boldfinger.ttf") format("truetype");
  font-display: block;
}

/* Kindergarten NÃO tem glifos acentuados (só ASCII).
   Todo texto de interface nessa fonte é escrito sem acento de propósito. */
@font-face {
  font-family: "Kindergarten";
  src: url("assets/fontes/kindergarten.ttf") format("truetype");
  font-display: block;
}

:root {
  --branco: #ffffff;
  --amarelo: #ffff00;
  --marrom: #603813;
  --vermelho: #ff2e3e;
}

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

html,
body {
  height: 100%;
}

body {
  color: var(--branco);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Palco e troca de tela
   -------------------------------------------------------------------------- */

.palco {
  position: relative;
  height: 100%;
  background: var(--marrom);
  transition: background 260ms ease;
}

/* O estudo assume o vermelho; o discurso, o amarelo */
.palco[data-tela="estudo"] {
  background: var(--vermelho);
}

.palco[data-tela="discurso"] {
  background: var(--amarelo);
}

.tela {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 6vh 6vw;
  text-align: center;
}

.palco[data-tela="inicio"] .tela[data-nome="inicio"],
.palco[data-tela="tema"] .tela[data-nome="tema"],
.palco[data-tela="estudo"] .tela[data-nome="estudo"],
.palco[data-tela="discurso"] .tela[data-nome="discurso"] {
  display: flex;
  animation: entraTela 300ms ease-out;
}

@keyframes entraTela {
  from {
    opacity: 0;
    transform: translateY(1.4vh);
  }
}

/* --------------------------------------------------------------------------
   Decoração — só as bolinhas, em cantos opostos (assimetria intencional)
   -------------------------------------------------------------------------- */

.decor {
  position: absolute;
  top: 3.4vh;
  left: 3vw;
  width: 5vw;
  aspect-ratio: 1;
  background: url("assets/elementos/4-circulos-grid-amarelo.svg") no-repeat center /
    contain;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* No amarelo do discurso a bolinha amarela desapareceria — vai a vermelha */
.palco[data-tela="discurso"] .decor {
  background-image: url("assets/elementos/4-circulos-grid-vermelho.svg");
}

/* --------------------------------------------------------------------------
   Tipografia comum
   -------------------------------------------------------------------------- */

/* Rótulo de estado — Boldfinger pequeno, caixa alta, espaçado */
.rotulo {
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.75rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--amarelo);
}

/* No fundo vermelho o amarelo continua sendo o destaque (vermelho + amarelo
   é a combinação de destaque máximo do brandguide) */
.palco[data-tela="discurso"] .rotulo {
  color: var(--amarelo);
}

/* --------------------------------------------------------------------------
   TELA 1 — título do quadro, botão e exemplos do que pode cair
   -------------------------------------------------------------------------- */

.titulo-quadro {
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(1.7rem, 5.2vw, 5.8rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--branco);
  max-width: 82vw;
  text-wrap: balance;
  margin-bottom: 1.6vh;
}

.exemplos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  margin-top: 1.4vh;
  max-width: 74vw;
}

.exemplos__lead {
  font-family: "Kindergarten", cursive;
  font-size: clamp(0.9rem, 1.6vw, 1.7rem);
  color: var(--amarelo);
  opacity: 0.8;
}

/* Os exemplos vão em Boldfinger porque Kindergarten não tem acentos e os
   títulos dos temas têm (contágio, neurociência, estratégia...) */
.exemplos__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  /* Espaço generoso em vez de separador: um ponto entre os itens sobra solto
     no fim ou no começo da linha quando a lista quebra, e o CSS não sabe
     detectar quem é o primeiro item de cada linha. */
  gap: 0.35em 1.7em;
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 1.6rem);
  letter-spacing: 0.08em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--amarelo);
}

/* Nome de tema nunca quebra no meio */
.exemplos__item {
  white-space: nowrap;
}


.separador {
  width: 8vw;
  max-width: 140px;
}

/* --------------------------------------------------------------------------
   TELA 2 — o tema é o protagonista. Tamanho calculado no JS.
   -------------------------------------------------------------------------- */

.tema-caixa {
  width: 100%;
  max-width: 88vw;
  height: 40vh; /* altura fixa: é a régua que o JS usa pra calcular a fonte */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem overflow:hidden de propósito — se a conta escapar por um fio, o texto
     transborda no respiro em vez de aparecer cortado na filmagem. */
}

.tema {
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  text-transform: uppercase;
  /* 1.0 e não menos: com line-height abaixo de 1 os acentos (Ç, Á, Ã) passam
     do alto da linha e são os primeiros a serem cortados. */
  line-height: 1;
  color: var(--branco);
  text-wrap: balance;
  font-size: 8vw; /* fallback; o JS assume o controle */
}

/* Piscada a cada troca durante o giro. O deslocamento é curto (0.06em) porque
   um salto grande empurrava o texto pra fora da caixa durante a animação. */
@keyframes trocaTema {
  from {
    opacity: 0.55;
    transform: translateY(0.06em) scale(0.99);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tema.is-trocando {
  animation: trocaTema 130ms ease-out;
}

@keyframes revelaTema {
  from {
    transform: scale(0.9);
    opacity: 0.3;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.tema.is-revelado {
  animation: revelaTema 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   TELAS 3 e 4 — o relógio é o protagonista, o tema fica legível ao lado dele
   -------------------------------------------------------------------------- */

.relogio {
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(4rem, 17vw, 17rem);
  line-height: 0.9;
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  transition: opacity 200ms ease;
}

/* Estudo pausado: o relógio recua, deixando claro que parou */
.relogio.is-pausado {
  opacity: 0.45;
}

/* Tema na tela de estudo — secundário, mas legível na filmagem */
.tema-secundario {
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(1.2rem, 3.2vw, 3.4rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--branco);
  max-width: 80vw;
  text-wrap: balance;
}

/* Tema na tela de discurso — divide o protagonismo com o tempo */
.tema-discurso {
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(1.6rem, 5vw, 5.4rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--branco);
  max-width: 84vw;
  text-wrap: balance;
}

/* No amarelo do discurso tudo vai de marrom, e o countdown vira vermelho nos
   10 segundos finais — vermelho sobre amarelo é o destaque máximo do guide */
.palco[data-tela="discurso"] .rotulo,
.palco[data-tela="discurso"] .tema-discurso,
.relogio--discurso {
  color: var(--marrom);
}

.relogio--discurso.is-alerta {
  color: var(--vermelho);
}

@keyframes pulsaAlerta {
  50% {
    opacity: 0.2;
  }
}

.relogio--discurso.is-esgotado {
  color: var(--vermelho);
  animation: pulsaAlerta 620ms steps(1, end) 6;
}

/* --------------------------------------------------------------------------
   Controles
   -------------------------------------------------------------------------- */

.controles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.1vw;
  margin-top: 2vh;
}

.pill {
  font-family: "Kindergarten", cursive;
  font-size: clamp(0.95rem, 1.55vw, 1.7rem);
  line-height: 1;
  padding: 0.62em 1.5em;
  border: 3px solid var(--amarelo);
  border-radius: 999px;
  background: transparent;
  color: var(--amarelo);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
    transform 90ms ease;
}

.pill:hover {
  background: var(--amarelo);
  color: var(--marrom);
}

.pill:active {
  transform: translateY(2px);
}

.pill:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 4px;
}

/* Ação principal de cada tela — vermelho da marca, texto branco */
.pill--vermelho {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: var(--branco);
}

.pill--vermelho:hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
}

.pill--grande {
  font-size: clamp(1.2rem, 2.2vw, 2.4rem);
  padding: 0.6em 2.2em;
}

/* Botão de sortear: destaque na tela inicial, mas sem competir com o título */
.pill--gigante {
  font-size: clamp(1.2rem, 2.6vw, 2.6rem);
  padding: 0.55em 1.9em;
  border-width: 4px;
}

.pill--fantasma {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.7);
}

.pill--fantasma:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
  color: var(--marrom);
}

/* Fundo vermelho (estudo): o contorno amarelo segue legível, mas o hover vira
   branco pra não empilhar amarelo sobre vermelho */
.palco[data-tela="estudo"] .pill:hover {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--vermelho);
}

/* A ação principal desta tela (`discurso`) não pode ser vermelha aqui —
   sumiria no fundo. Vira branca, que é o maior contraste sobre o vermelho. */
.palco[data-tela="estudo"] .pill--vermelho {
  background: var(--branco);
  border-color: var(--branco);
  color: var(--vermelho);
}

.palco[data-tela="estudo"] .pill--vermelho:hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--vermelho);
}

/* Fundo amarelo (discurso): botões em marrom, que é o texto sobre amarelo */
.palco[data-tela="discurso"] .pill {
  border-color: var(--marrom);
  color: var(--marrom);
}

.palco[data-tela="discurso"] .pill:hover {
  background: var(--marrom);
  border-color: var(--marrom);
  color: var(--amarelo);
}

.palco[data-tela="discurso"] .pill--fantasma {
  border-color: rgba(96, 56, 19, 0.4);
  color: rgba(96, 56, 19, 0.72);
}

.palco[data-tela="discurso"] .atalhos {
  color: rgba(96, 56, 19, 0.5);
}

/* Linha de atalhos — lembrete discreto, some em tela cheia */
.atalhos {
  position: absolute;
  bottom: 1.6vh;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Kindergarten", cursive;
  font-size: clamp(0.7rem, 1.05vw, 1.1rem);
  color: rgba(255, 255, 255, 0.4);
  z-index: 3;
  pointer-events: none;
}

body.is-fullscreen .atalhos {
  opacity: 0;
}