/* ==========================================================================
   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). O unicode-range trava a
   fonte nesse range: quando aparece um caractere acentuado, o navegador cai
   pra próxima da pilha SÓ naquele glifo — nunca troca o bloco de texto
   inteiro (era isso que .passos__item e .exemplos__lista faziam antes,
   forçando Boldfinger na frase só por causa de uma letra). */
@font-face {
  font-family: "Kindergarten";
  src: url("assets/fontes/kindergarten.ttf") format("truetype");
  unicode-range: U+0000-007F;
  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 {
  display: block;
  transition: transform 120ms ease;
  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;
  user-select: none;
  cursor: pointer;
  z-index: 2;
}

.decor:hover {
  transform: scale(1.06);
}

/* 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 — manuscrito e miúdo, no mesmo registro dos botões */
.rotulo {
  font-family: "Kindergarten", cursive; /* "estudando", "discurso": sem acento */
  font-size: clamp(1rem, 1.7vw, 2rem);
  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;
}

/* O jogo em 3 passos. Fica em Boldfinger, como antes da quebra por glifo —
   o Yago pediu pra não mudar pra Kindergarten aqui. Número em bolinha
   amarela = os círculos da marca. */
.passos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8vh 2.2em;
  list-style: none;
  counter-reset: passo;
  max-width: 80vw;
  margin-bottom: 1.6vh;
}

.passos__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  counter-increment: passo;
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(0.78rem, 1.35vw, 1.45rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--branco);
}

.passos__item::before {
  content: counter(passo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--marrom);
  font-size: 0.86em;
  letter-spacing: 0;
  line-height: 1;
}

/* Escolha de duração do discurso, na tela de estudo (antes de entrar nele) */
.opcao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  margin-top: 0.6vh;
}

.opcao__rotulo {
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(0.72rem, 1.1vw, 1.15rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco);
  opacity: 0.8;
}

/* A amostra é rodapé da capa, não parte do hero: fica longe do botão e leve o
   bastante pra não competir com o título e os passos. */
.exemplos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7vh;
  margin-top: 9.5vh;
  max-width: 70vw;
}

.exemplos__lead {
  font-family: "Kindergarten", cursive;
  font-size: clamp(0.78rem, 1.25vw, 1.25rem);
  color: var(--amarelo);
}

/* Os temas rotacionando ficam em Boldfinger, como antes da quebra por glifo —
   o Yago pediu pra não mudar pra Kindergarten aqui. */
.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.5em;
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(0.7rem, 1.15vw, 1.2rem);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--amarelo);
  /* dá profundidade ao rotateX da entrada de cada item (ver animação abaixo) */
  perspective: 600px;
}

/* Troca da amostra: os três temas entram em cascata, um atrás do outro, com um
   giro curto no eixo X — dá a sensação de placa de aeroporto virando, que é o
   que a tela toda faz (sortear). O deslocamento é pequeno de propósito: a linha
   não pode pular no canto do olho de quem está lendo o título. */
@keyframes entraExemplo {
  from {
    opacity: 0;
    transform: translateY(0.45em) rotateX(-70deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.exemplos__item {
  animation: entraExemplo 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.exemplos__item:nth-child(2) {
  animation-delay: 110ms;
}

.exemplos__item:nth-child(3) {
  animation-delay: 220ms;
}

/* Quem pediu menos movimento no sistema recebe só o fade */
@media (prefers-reduced-motion: reduce) {
  .exemplos__item {
    animation: none;
  }
}

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


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

.tema-caixa {
  width: 100%;
  max-width: 88vw;
  /* Sem altura fixa: a caixa encolhe pro tamanho do tema, senão sobra um vazio
     entre ele e os botões. O teto que a fonte pode ocupar é uma régua do JS
     (ver tetoDeAltura no app.js), não a altura desta caixa. */
  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);
}

/* Categoria do tema sorteado — etiqueta pequena acima do tema */
.tag-cat.is-oculta {
  visibility: hidden;
}

.tag-cat {
  min-height: 1.2em; /* segura o espaço mesmo vazia: nada se mexe ao revelar */
  /* Nome da categoria (ex: "estratégia e crescimento") tem acento — o
     fallback precisa ser uma fonte com glifo acentuado de verdade, não o
     genérico "cursive" (que caía numa fonte de mão errada só no acento). */
  font-family: "Kindergarten", system-ui, sans-serif;
  font-size: clamp(1rem, 1.7vw, 2rem); /* mesma régua do .rotulo */
  /* Os nomes das categorias vêm capitalizados em temas.js; aqui eles entram
     todos em minúscula, no mesmo registro dos botões. */
  text-transform: lowercase;
  color: var(--amarelo);
  margin-bottom: 1.6vh;
  /* `backwards` segura a etiqueta invisível durante o atraso: ela entra
     depois do tema assentar, não junto com ele. */
  animation: entraTag 380ms cubic-bezier(0.16, 1, 0.3, 1) 340ms backwards;
}

@keyframes entraTag {
  from {
    transform: translateY(0.5em);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 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;
}

/* Bloco de estudo com tempo fechado: último minuto e fim, sobre o vermelho.
   Aqui o alerta vai de branco — vermelho sobre vermelho sumiria. */
#digitos-estudo.is-alerta {
  color: var(--branco);
}

#digitos-estudo.is-esgotado {
  color: var(--branco);
  animation: pulsaAlerta 620ms steps(1, end) 6;
}

/* 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;
}

/* Travado durante o giro: sem hover, sem cursor de clique */
.pill:disabled {
  opacity: 0.4;
  cursor: default;
}

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

.pill:not(:disabled):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:not(:disabled):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;
}

/* Pílula de opção secundária (a duração, na tela de estudo) */
.pill--mini {
  font-size: clamp(0.8rem, 1.2vw, 1.25rem);
  padding: 0.45em 1.1em;
  border-width: 2px;
}

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

.pill--fantasma:not(:disabled):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:not(:disabled):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 amarela: amarelo sobre vermelho é o destaque máximo
   do brandguide, e o `pausar` ao lado fica só no contorno. */
.palco[data-tela="estudo"] .pill--vermelho {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--vermelho);
}

.palco[data-tela="estudo"] .pill--vermelho:not(:disabled):hover {
  background: var(--branco);
  border-color: var(--branco);
  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:not(:disabled):hover {
  background: var(--marrom);
  border-color: var(--marrom);
  color: var(--amarelo);
}

/* A próxima rodada, no fim do discurso: vermelho sobre amarelo é o destaque
   máximo do guide, mas o texto tem que voltar pro branco — a regra acima
   pinta todo pill de marrom, e marrom sobre vermelho some. */
.palco[data-tela="discurso"] .pill--vermelho {
  border-color: var(--vermelho);
  color: var(--branco);
}

.palco[data-tela="discurso"] .pill--vermelho:not(:disabled):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);
}

/* Fim do discurso: a próxima rodada ganha ar em relação aos controles */
.controles--fim {
  margin-top: 1vh;
}

.controles--fim[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Ação da capa — sortear + engrenagem, lado a lado
   -------------------------------------------------------------------------- */

.acao-capa {
  display: flex;
  align-items: center;
  gap: 0.9em;
}

/* Só o ícone: a engrenagem acompanha o botão principal sem disputar com ele */
.engrenagem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6em;
  height: 2.6em;
  font-size: clamp(0.95rem, 1.55vw, 1.7rem); /* mesma régua do .pill */
  border: 3px solid var(--amarelo);
  border-radius: 50%;
  background: transparent;
  color: var(--amarelo);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 200ms ease;
}

.engrenagem svg {
  display: block; /* inline deixaria a baseline empurrando o ícone pra cima */
  width: 1.5em;
  height: 1.5em;
  fill: currentColor;
}

.engrenagem:not(:disabled):hover {
  background: var(--amarelo);
  color: var(--marrom);
  transform: rotate(35deg);
}

.engrenagem:disabled {
  opacity: 0.4;
  cursor: default;
}

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

/* --------------------------------------------------------------------------
   Painel de configurações
   -------------------------------------------------------------------------- */

.config {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 5vw;
  background: rgba(38, 22, 7, 0.82);
  animation: entraTela 200ms ease-out;
}

.config[hidden] {
  display: none;
}

.config__caixa {
  position: relative;
  width: min(46rem, 100%);
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3.2vh;
  padding: clamp(1.6rem, 3.4vw, 2.8rem);
  border: 3px solid var(--amarelo);
  border-radius: 1.6rem;
  background: var(--marrom);
  text-align: left;
}

/* Confirmação de saída do estudo: mesma moldura do painel, conteúdo enxuto —
   uma pergunta e duas saídas, centralizadas. */
.confirma__caixa {
  width: min(30rem, 100%);
  align-items: center;
  gap: 2.4vh;
  text-align: center;
}

/* A caixa tem fundo marrom, não o vermelho da tela: os botões voltam ao
   padrão em vez de herdar o override do fundo vermelho. */
.palco[data-tela] .confirma .pill--vermelho {
  background: var(--vermelho);
  border-color: var(--vermelho);
  color: var(--branco);
}

.palco[data-tela] .confirma .pill--vermelho:not(:disabled):hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
}

.palco[data-tela] .confirma .pill:not(:disabled):hover {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
}

.confirma__titulo {
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amarelo);
  text-wrap: balance;
}

.config__fechar {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--amarelo);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

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

.config__bloco {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.config__titulo {
  font-family: "Boldfinger", sans-serif;
  font-weight: normal;
  font-size: clamp(0.85rem, 1.3vw, 1.3rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amarelo);
}

.config__opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.config__nota {
  font-family: "Kindergarten", cursive; /* a contagem nao tem acento */
  font-size: clamp(0.78rem, 1.1vw, 1.1rem);
  color: rgba(255, 255, 255, 0.6);
}

/* Categoria: caixa de marcar. O quadrado é desenhado no ::before do input pra
   não depender do estilo nativo, que muda de navegador pra navegador. */
.opcao-caixa {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1em;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  /* Label do checkbox mostra o nome da categoria (ex: "mensuração e
     efetividade") — mesmo motivo do .tag-cat: fallback acento-seguro. */
  font-family: "Kindergarten", system-ui, sans-serif;
  font-size: clamp(0.82rem, 1.15vw, 1.15rem);
  line-height: 1;
  color: var(--branco);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.opcao-caixa:hover {
  border-color: var(--amarelo);
}

.opcao-caixa:has(input:checked) {
  border-color: var(--amarelo);
  background: rgba(255, 255, 0, 0.12);
}

.opcao-caixa input {
  appearance: none;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid var(--amarelo);
  border-radius: 0.28em;
  cursor: pointer;
}

.opcao-caixa input:checked {
  background: var(--amarelo);
}

.opcao-caixa__num {
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.5);
}

/* Escolha única (tempo de estudo, tempo de discurso) */
.opcao-pill {
  padding: 0.6em 1.2em;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: transparent;
  font-family: "Kindergarten", cursive;
  font-size: clamp(0.82rem, 1.15vw, 1.15rem);
  line-height: 1;
  color: var(--branco);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.opcao-pill:hover {
  border-color: var(--amarelo);
}

.opcao-pill.is-marcada {
  background: var(--amarelo);
  border-color: var(--amarelo);
  color: var(--marrom);
}

/* --------------------------------------------------------------------------
   Assinatura — rodapé esquerdo, espelhando o sugerir do canto oposto
   -------------------------------------------------------------------------- */

/* O wrapper posiciona; a pílula é o que clica. "feito por" fica fora dela,
   como na referência — o handle é o que precisa de peso, não a frase. */
.assinatura {
  position: absolute;
  left: 1.6vw;
  bottom: 1.6vh;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* Mesma fonte, mesmo corpo e mesmo padding do `.sugerir` do canto oposto:
     os dois dividem a linha do rodapé e qualquer diferença de altura faz um
     parecer flutuando acima do outro. */
  font-family: "Kindergarten", cursive; /* "feito por @scoobelu" nao tem acento */
  font-size: clamp(0.85rem, 1.25vw, 1.3rem);
  line-height: 1;
  transition: opacity 200ms ease;
}

.assinatura__lead {
  color: rgba(255, 255, 255, 0.55);
}

.assinatura__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  /* Altura fixa em vez de padding vertical: o ícone e o emoji do `.sugerir`
     têm corpos diferentes e, no padding, cada pílula terminava com uma altura.
     Com a altura travada os dois cantos do rodapé ficam na mesma linha. */
  height: 2.6em;
  padding: 0 1.35em;
  border: 2px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.assinatura__icone {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* O círculo pequeno (a "lente" do ícone) é sólido, como no logo do Instagram */
.assinatura__icone circle:last-of-type {
  fill: currentColor;
  stroke: none;
}

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

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

/* Fundo amarelo (discurso): branco sumiria — vai de marrom, como os controles */
.palco[data-tela="discurso"] .assinatura__lead {
  color: rgba(96, 56, 19, 0.6);
}

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

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

/* Tela cheia é take de gravação: sai de cena junto com o sugerir */
body.is-fullscreen .assinatura {
  opacity: 0;
  pointer-events: none;
}

/* 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;
}

/* --------------------------------------------------------------------------
   Sugerir tema — abre o formulário do Tally em popup, por cima da página
   -------------------------------------------------------------------------- */

/* Canto inferior direito: o oposto das bolinhas (canto superior esquerdo) e
   longe dos controles, que vivem no centro. A linha de atalhos é centralizada
   e não tem pointer-events, então as duas coisas convivem. */
.sugerir {
  position: absolute;
  right: 1.6vw;
  bottom: 1.6vh;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: "Kindergarten", cursive; /* "sugira um tema" nao tem acento */
  font-size: clamp(0.85rem, 1.25vw, 1.3rem);
  line-height: 1;
  height: 2.6em; /* mesma altura da assinatura, no canto oposto */
  padding: 0 1.35em;
  border: 2px solid var(--amarelo);
  border-radius: 999px;
  background: transparent;
  color: var(--amarelo);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
    opacity 200ms ease;
}

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

/* O mesmo aceno que o formulário do Tally mostra quando abre */
.sugerir__emoji {
  font-size: 1.1em;
  line-height: 1;
}

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

/* Fundo vermelho (estudo): amarelo sobre vermelho é o par de maior destaque,
   então o hover devolve o vermelho no texto em vez do marrom */
.palco[data-tela="estudo"] .sugerir:hover {
  color: var(--vermelho);
}

/* Fundo amarelo (discurso): o amarelo sumiria — vai de marrom, como os controles */
.palco[data-tela="discurso"] .sugerir {
  border-color: var(--marrom);
  color: var(--marrom);
}

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

/* Tela cheia é take de gravação: o botão sai de cena junto com os atalhos.
   Quem quiser sugerir tema sai do fullscreen (F) e o botão volta. */
body.is-fullscreen .sugerir {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Tela estreita — celular e janela lado a lado
   --------------------------------------------------------------------------

   O ponto de partida é que quase todo corpo de texto aqui é `clamp()` amarrado
   a `vw`: em tela estreita o vw é pequeno e tudo encolhe junto, mesmo com
   espaço de sobra na vertical. Abaixo de 720px o piso de cada corpo sobe, e o
   que era linha vira coluna — a leitura é vertical, não horizontal. */

@media (max-width: 720px) {
  .tela {
    padding: 5vh 6vw;
    gap: 2.4vh;
  }

  /* As bolinhas são a assinatura visual da marca: em tela pequena elas somem
     se continuarem em vw. */
  .decor {
    width: 4.2rem;
    top: 2.6vh;
    left: 6vw;
  }

  /* Eixo único à esquerda. Centrado, o título virava um bloco de quatro linhas
     de largura quase igual, e a lista de passos — que é alinhada à esquerda —
     saía num eixo diferente do dele. Alinhar tudo pela esquerda resolve as
     duas coisas de uma vez: o título quebra natural e a leitura tem uma
     margem só. */
  .tela[data-nome="inicio"] {
    align-items: flex-start;
    text-align: left;
  }

  .titulo-quadro {
    font-size: clamp(1.85rem, 7.4vw, 3.1rem);
    line-height: 1.04;
    max-width: 100%;
    text-wrap: pretty; /* balance é o que igualava as linhas */
  }

  /* Um passo por linha: em coluna eles viram uma sequência, que é o que são */
  .passos {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5vh;
    margin-bottom: 2.4vh;
  }

  .passos__item {
    font-size: clamp(0.95rem, 3.6vw, 1.25rem);
  }

  .tag-cat,
  .tela[data-nome="discurso"] .rotulo,
  .tela[data-nome="estudo"] .rotulo {
    font-size: clamp(1.25rem, 5.2vw, 1.8rem);
  }

  /* Um degrau abaixo do desktop: em tela estreita o botão na régua cheia
     comia largura demais do miolo. */
  .pill,
  .pill--vermelho {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
  }

  .engrenagem {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
  }

  /* Um tema por linha, pelo mesmo motivo dos passos: em duas ou três colunas
     eles viram um bloco cinza de texto e ninguém lê. */
  .exemplos {
    margin-top: 6vh;
    max-width: 88vw;
  }

  .exemplos {
    align-items: flex-start; /* mesma margem do título e dos passos */
  }

  .exemplos__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
    font-size: clamp(0.85rem, 3.4vw, 1.15rem);
  }

  .exemplos__lead {
    font-size: clamp(0.85rem, 3.2vw, 1.15rem);
  }

  /* Tela de estudo em celular: sobra tela de sobra (só dois botões) e o
     relógio é lido de longe. Os três textos crescem; os botões ficam na
     régua do resto da página, que é a mesma das outras telas. */
  .tema-secundario {
    font-size: clamp(2rem, 7.8vw, 3.1rem);
    max-width: 92vw;
  }

  #digitos-estudo {
    font-size: clamp(9.5rem, 32vw, 11.5rem);
  }

  /* "15:00" tem um dígito a mais que "9:59": na régua acima ele encostaria nas
     bordas. Só o relógio longo recua. */
  #digitos-estudo.is-longo,
  #digitos-discurso {
    font-size: clamp(7.4rem, 25vw, 9rem);
  }

  .tema-discurso {
    font-size: clamp(2rem, 7.8vw, 3.1rem);
    max-width: 92vw;
  }

  /* Atalho de teclado não existe em celular — a linha só ocuparia rodapé */
  .atalhos {
    display: none;
  }

  .sugerir,
  .assinatura {
    font-size: 0.95rem;
    bottom: 2.4vh;
  }

  .sugerir {
    right: 6vw;
  }

  .assinatura {
    left: 6vw;
  }
}

/* Mais estreito ainda: o "feito por" sai e fica só o handle, senão as duas
   pílulas do rodapé se encontram no meio da tela. */
@media (max-width: 460px) {
  .assinatura__lead {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Comemoração do "consegui" — fecha a rodada e devolve o jogo pro início
   -------------------------------------------------------------------------- */

.festa {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none; /* é só celebração: nada aqui é clicável */
  background: rgba(96, 56, 19, 0.9);
  animation: entraTela 220ms ease-out;
}

.festa[hidden] {
  display: none;
}

.festa__grito {
  font-family: "Boldfinger", sans-serif;
  font-size: clamp(3.4rem, 14vw, 12rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--amarelo);
  animation: pulaGrito 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pulaGrito {
  from {
    opacity: 0;
    transform: scale(0.5) rotate(-6deg);
  }
  60% {
    transform: scale(1.12) rotate(2deg);
  }
}

/* Confete: as bolinhas da marca, soltas. Cada uma recebe posição, cor, atraso
   e duração próprios no JS — aqui fica só o movimento. */
.festa__confete {
  position: absolute;
  inset: 0;
}

.confete {
  position: absolute;
  top: -12vh;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  animation: caiConfete linear forwards;
}

@keyframes caiConfete {
  from {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  to {
    transform: translateY(118vh) rotate(540deg);
    opacity: 0.9;
  }
}