/* Almoço Kombat. Preto de carvão, verde da fantasia do chef e ouro de brasão.
   Tudo desenhado primeiro para 430 por 932, que é o celular da mesa. */

:root {
  --carvao: #08090a;
  --carvao-claro: #131417;
  --jade: #24c561;
  --jade-forte: #0d7c3a;
  --jade-fraco: rgba(36, 197, 97, 0.18);
  --ouro: #e3b93f;
  --sangue: #c8402f;
  --osso: #f2ede1;
  --cinza: #8b8f93;
  --borda: rgba(227, 185, 63, 0.28);
  --display: 'Anton', 'Arial Narrow', Impact, system-ui, sans-serif;
  --texto: 'Barlow Condensed', system-ui, -apple-system, sans-serif;
  --alvo: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--carvao);
  color: var(--osso);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.35;
  overflow-x: hidden;
}

body { min-height: 100svh; }

/* A brasa: um brilho verde que respira atrás de tudo, para a tela não ser um
   retângulo preto morto. */
.brasa {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(36, 197, 97, 0.16), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(200, 64, 47, 0.12), transparent 70%);
  animation: respira 7s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.tela {
  display: none;
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: max(20px, env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom));
}
.tela.ativa { display: flex; flex-direction: column; }

.miolo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  justify-content: center;
}
.miolo-votacao { justify-content: flex-start; gap: 10px; }

.escondido { display: none !important; }

/* ---------- tipografia ---------- */

.titulo-gigante, .titulo-tela, .selo-veredito {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* 0.86 encavalava a cedilha de ALMOÇO na linha de baixo. */
  line-height: 0.95;
  margin: 0;
}

.titulo-gigante {
  font-size: clamp(46px, 15vw, 68px);
  text-align: center;
  color: var(--osso);
  text-shadow: 0 0 24px rgba(36, 197, 97, 0.35);
}
.titulo-gigante span {
  display: block;
  margin-top: 2px;
  color: var(--jade);
  -webkit-text-stroke: 1px rgba(227, 185, 63, 0.5);
}

.titulo-tela { font-size: clamp(30px, 9vw, 42px); text-align: center; }
.titulo-tela span { display: block; color: var(--jade); }

.linha-fina {
  margin: 0;
  text-align: center;
  color: var(--cinza);
  font-size: 17px;
  letter-spacing: 0.04em;
}
.linha-fina b { color: var(--osso); font-weight: 700; }

.etiqueta {
  font-family: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  color: var(--ouro);
  margin: 0;
  font-weight: 700;
}

.erro { color: var(--sangue); text-align: center; min-height: 20px; margin: 4px 0 0; font-weight: 600; }
.dica { color: var(--cinza); font-size: 14px; text-align: center; font-style: italic; margin: 6px 0 0; }

/* ---------- abertura ---------- */

.marca { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.marca-leque { width: 132px; height: 99px; filter: drop-shadow(0 6px 18px rgba(36, 197, 97, 0.35)); }


.pergaminho {
  border: 1px solid var(--borda);
  background: linear-gradient(180deg, rgba(19, 20, 23, 0.9), rgba(8, 9, 10, 0.9));
  border-radius: 4px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.protocolo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.protocolo li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px dashed rgba(227, 185, 63, 0.2);
  padding-bottom: 6px;
  font-size: 18px;
}
.protocolo li:last-child { border-bottom: none; padding-bottom: 0; }
.protocolo b { font-family: var(--display); color: var(--jade); font-size: 22px; }
.rodape-protocolo { margin: 0; font-size: 15px; color: var(--cinza); }

.aviso-som { text-align: center; color: var(--cinza); font-size: 13px; margin: -8px 0 0; letter-spacing: 0.06em; }

/* ---------- botões ---------- */

.botao-grande {
  min-height: var(--alvo);
  width: 100%;
  border: 1px solid var(--jade);
  background: linear-gradient(180deg, var(--jade-forte), #0a5b2a);
  color: var(--osso);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 24px -12px var(--jade);
  transition: transform 0.08s ease, filter 0.15s ease;
}
.botao-grande:active { transform: translateY(2px) scale(0.99); filter: brightness(1.25); }
.botao-grande:disabled { opacity: 0.35; filter: grayscale(0.8); }

.botao-fantasma {
  min-height: 44px;
  background: none;
  border: none;
  color: var(--cinza);
  font-family: var(--texto);
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- grade de perfis ---------- */

.grade-perfis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.perfil {
  border: none;
  user-select: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: var(--alvo);
}
.perfil img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.14);
  filter: grayscale(0.6) brightness(0.8);
  transition: filter 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.perfil span {
  font-size: 14px;
  color: var(--cinza);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  font-weight: 600;
}
.perfil.escolhido img {
  filter: none;
  border-color: var(--jade);
  transform: scale(1.06);
  box-shadow: 0 0 22px -4px var(--jade);
}
.perfil.escolhido span { color: var(--osso); }
.perfil.chef img { border-color: var(--ouro); }

.campo-outros { display: flex; flex-direction: column; gap: 6px; }

label, .rotulo-recado {
  font-size: 15px;
  color: var(--cinza);
  letter-spacing: 0.03em;
}

input[type="text"] {
  min-height: var(--alvo);
  background: var(--carvao-claro);
  border: 1px solid var(--borda);
  color: var(--osso);
  font-family: var(--texto);
  font-size: 19px;
  padding: 0 14px;
  border-radius: 3px;
  width: 100%;
}
input[type="text"]:focus { outline: 2px solid var(--jade); border-color: var(--jade); }

/* ---------- espera e placar cego ---------- */

.fila-lacrados { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.fila-lacrados figure { margin: 0; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fila-lacrados img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--jade);
  box-shadow: 0 0 14px -2px var(--jade);
  animation: acende 0.5s ease-out;
}
.fila-lacrados figcaption { font-size: 11px; color: var(--cinza); text-align: center; line-height: 1.05; }
@keyframes acende { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.contagem { text-align: center; font-family: var(--display); font-size: 24px; color: var(--ouro); }
.contagem small { display: block; font-family: var(--texto); font-size: 14px; color: var(--cinza); letter-spacing: 0.05em; }

.caixa-segredo { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--borda); padding-top: 14px; }

/* ---------- votação ---------- */

.trilha { display: flex; gap: 6px; }
.trilha i {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
}
.trilha i.feita { background: var(--jade); box-shadow: 0 0 10px -2px var(--jade); }
.trilha i.atual { background: var(--ouro); }

.grito {
  text-align: center;
  font-family: var(--display);
  color: var(--sangue);
  letter-spacing: 0.35em;
  font-size: 15px;
  margin: 10px 0 0;
}

/* O leque fica no meio do que sobra entre o critério e as notas, e nunca
   some: fechado ele é um leque dobrado, não um vazio. */
.palco-leque { position: relative; height: 190px; display: grid; place-items: center; margin: auto 0; }
.leque { width: 260px; height: 170px; }
.leque path, .marca-leque path {
  /* O pivô de cada gomo vem do JS, que é quem sabe onde a haste foi posta. */
  transform: rotate(calc(var(--giro) * 0.16)) scaleY(0.92);
  opacity: 0.42;
  transition: transform 0.32s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.2s ease;
}
.leque.aberto path, .marca-leque.aberto path { transform: rotate(var(--giro)) scaleY(1); opacity: 1; }

.nota-marcada {
  position: absolute;
  font-family: var(--display);
  font-size: 60px;
  color: var(--osso);
  text-shadow: 0 0 26px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: scale(0.4);
}
.nota-marcada.mostra { animation: carimbo 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes carimbo {
  0% { opacity: 0; transform: scale(2.4) rotate(-12deg); }
  60% { opacity: 1; transform: scale(0.92) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* As notas moram na metade de baixo: é onde o polegar chega sem trocar a mão
   de posição, e a mesa vai votar com o prato na frente. */
.notas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-bottom: 6px;
}
.nota {
  min-height: var(--alvo);
  user-select: none;
  border: 1px solid var(--borda);
  background: var(--carvao-claro);
  color: var(--osso);
  font-family: var(--display);
  font-size: 24px;
  border-radius: 3px;
  cursor: pointer;
}
.nota:active, .nota.escolhida {
  background: var(--jade-forte);
  border-color: var(--jade);
  color: #fff;
}

.resumo-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.resumo-notas li {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(227, 185, 63, 0.2);
  padding-bottom: 5px;
  font-size: 17px;
}
.resumo-notas b { font-family: var(--display); color: var(--jade); font-size: 20px; }
#meu-total { font-size: 64px; color: var(--jade); }

/* ---------- chef ---------- */

.retrato-chef {
  width: 190px;
  align-self: center;
  border-radius: 4px;
  border: 1px solid var(--ouro);
  filter: saturate(1.1);
  box-shadow: 0 18px 40px -20px var(--jade);
}

/* ---------- cerimônia ---------- */

#tela-cerimonia.ativa { justify-content: flex-start; background: #000; }
.cortina {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.cortina.abre { opacity: 0; }

.media-parcial { text-align: center; padding-top: 8px; }
.media-parcial strong {
  display: block;
  font-family: var(--display);
  font-size: 62px;
  color: var(--ouro);
  line-height: 1;
  text-shadow: 0 0 30px rgba(227, 185, 63, 0.45);
}
.media-parcial.pulsa strong { animation: bate 0.35s ease; }
@keyframes bate { 50% { transform: scale(1.16); color: var(--jade); } }

.palco { flex: 1; display: grid; place-items: center; width: 100%; }
.juiz { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.juiz img {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--jade);
  box-shadow: 0 0 50px -10px var(--jade);
  animation: chega 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}
@keyframes chega { from { transform: translateX(-40px) scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.juiz h3 { font-family: var(--display); font-size: 34px; margin: 0; text-transform: uppercase; }
.notas-juiz { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 320px; }
.notas-juiz li {
  display: flex;
  justify-content: space-between;
  font-size: 17px;
  opacity: 0;
  transform: translateY(8px);
  padding: 3px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.notas-juiz li.cai { animation: cai 0.3s ease forwards; }
@keyframes cai { to { opacity: 1; transform: none; } }
.notas-juiz b { font-family: var(--display); color: var(--jade); }
.total-juiz { font-family: var(--display); font-size: 56px; color: var(--osso); line-height: 1; }
.recado-juiz {
  font-style: italic;
  color: var(--ouro);
  text-align: center;
  min-height: 22px;
  max-width: 320px;
  font-size: 16px;
}

.anuncio {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(40px, 14vw, 70px);
  color: var(--osso);
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  text-shadow: 0 0 40px rgba(36, 197, 97, 0.6);
}
.anuncio.grita { animation: grita 1.6s ease forwards; }
@keyframes grita {
  0% { opacity: 0; transform: scale(1.8); letter-spacing: 0.3em; }
  25% { opacity: 1; transform: scale(1); letter-spacing: 0.02em; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: scale(0.96); }
}

.pular { position: fixed; bottom: calc(10px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 7; }

/* ---------- veredito e carta ---------- */

.selo-veredito {
  font-size: clamp(44px, 14vw, 64px);
  text-align: center;
  color: var(--jade);
  animation: carimbo 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.selo-veredito.reprovado { color: var(--sangue); }

#carta { width: 100%; height: auto; border: 1px solid var(--borda); border-radius: 4px; }
.acoes-carta { display: flex; flex-direction: column; gap: 8px; }

.placar { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--borda); padding-top: 12px; }
.placar .linha { display: flex; align-items: center; gap: 10px; }
.placar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--borda); }
.placar .nome { flex: 1; text-transform: uppercase; letter-spacing: 0.04em; font-size: 15px; }
.placar .nota { font-family: var(--display); font-size: 26px; color: var(--jade); }
.placar .recado { font-size: 13px; color: var(--cinza); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- a caça ao leque, no celular ---------- */

/* O botão é enorme de propósito: numa corrida de reflexo, mirar é tempo
   perdido, e a mesa vai estar comendo com a outra mão. */
.botao-caca {
  position: relative;
  width: 100%;
  min-height: 280px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: radial-gradient(70% 70% at 50% 40%, #16181c, #08090a);
  color: var(--cinza);
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.botao-caca .leque-caca { width: 190px; height: 124px; opacity: 0.35; }

.botao-caca.valendo {
  border-color: var(--ouro);
  color: #fff;
  background: radial-gradient(70% 70% at 50% 40%, #1c7f3f, #08090a);
  box-shadow: 0 0 44px -8px var(--ouro), inset 0 0 60px -30px var(--jade);
  animation: chama 0.6s ease-in-out infinite alternate;
}
.botao-caca.valendo .leque-caca { opacity: 1; }
@keyframes chama { from { filter: brightness(1); } to { filter: brightness(1.35); } }

.botao-caca.venceu {
  border-color: var(--jade);
  background: linear-gradient(180deg, var(--jade-forte), #0a5b2a);
  color: #fff;
  animation: none;
}
.botao-caca:active { transform: scale(0.995); }

.botao-ouro {
  border-color: var(--ouro);
  background: linear-gradient(180deg, #8a6a12, #4d3a08);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 24px -12px var(--ouro);
}

/* ---------- a tempestade de leques ---------- */
/* Usada na abertura e no ritual da revelação. Só imagem, sem barulho: é a
   música que manda nesses dois momentos. */

.tempestade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  /* Atrás do texto: leque passando por cima da palavra é enfeite atrapalhando
     leitura, e o texto é o que a sala precisa ler de longe. */
  z-index: 0;
}
.tempestade .leque {
  position: absolute;
  width: var(--tamanho, 180px);
  height: calc(var(--tamanho, 180px) * 0.65);
  left: var(--x, 10%);
  top: 110%;
  opacity: 0.85;
  animation: sobe var(--tempo, 9s) linear var(--atraso, 0s) infinite;
}
@keyframes sobe {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(-135vh) rotate(var(--volta, 360deg)); }
}

.contagem-ritual {
  font-family: var(--display);
  color: var(--ouro);
  line-height: 1;
  opacity: 0.55;
}