/*
 * Moldura de campanha · Capitão Samuel 4422
 *
 * Sem framework de propósito: o eleitor abre isso num celular simples em 4G ruim, e
 * cada quilobyte a mais é gente que desiste antes da tela carregar.
 *
 * As cores saíram medidas da logo oficial, não escolhidas. Ver tools/lib/tokens.mjs.
 */

:root {
  --branco: #ffffff;
  --azul-marinho: #243c84;
  --azul-royal: #3054a8;
  --azul-violeta: #453b93;
  --cyan: #00c4fa;
  --amarelo: #fcc030;
  --vermelho: #d82424;

  --gradiente: linear-gradient(135deg, var(--cyan), var(--azul-violeta));
  --fonte: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Recuo das áreas invadidas pelo notch e pela barra de gestos do celular. */
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-base: env(safe-area-inset-bottom, 0px);
}

@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193;
}

/*
 * Toque longo no iPhone abre a lupa e o menu de contexto do Safari, e a bolha aparecia
 * por cima do botão justo enquanto a pessoa segura para gravar. Desligar o callout e a
 * seleção resolve. Num app de câmera não há texto para selecionar, então nada se perde.
 */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  /* Corta o zoom por toque duplo sem tirar o rolar da tela. O resto do bloqueio de
     zoom é feito no JS, porque o Safari do iPhone ignora a configuração de viewport. */
  touch-action: manipulation;
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0d1633;
  color: var(--branco);
  font-family: var(--fonte);
  overscroll-behavior: none;
}

.tela {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.tela[hidden] {
  display: none;
}

/* ---------- Abertura ---------- */

.tela--abertura {
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(28px + var(--seguro-topo)) 26px calc(28px + var(--seguro-base));
  text-align: center;
  background: var(--gradiente);
  overflow-y: auto;
}

.abertura__logo {
  width: min(56vw, 240px);
  height: auto;
  filter: drop-shadow(0 10px 26px rgb(0 0 0 / 0.28));
}

.abertura__titulo {
  margin: 4px 0 0;
  font-size: clamp(28px, 8.5vw, 42px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.abertura__titulo strong {
  display: block;
  font-weight: 900;
  color: var(--amarelo);
}

.abertura__texto {
  margin: 0 0 10px;
  max-width: 22ch;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.92;
}

.abertura__hashtag {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

.abertura__erro {
  margin: 4px 0 0;
  max-width: 30ch;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.28);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

/* ---------- Botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 340px);
  min-height: 58px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.botao:active {
  transform: scale(0.97);
}

.botao--principal {
  background: var(--amarelo);
  color: var(--azul-marinho);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.22);
}

.botao--secundario {
  background: rgb(255 255 255 / 0.16);
  color: var(--branco);
  border: 2px solid rgb(255 255 255 / 0.55);
}

.botao--texto {
  min-height: 46px;
  background: none;
  color: var(--branco);
  font-weight: 700;
  opacity: 0.85;
}

.botao-linha {
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--azul-marinho);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- Aviso de navegador embutido ---------- */

.aviso-navegador {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: calc(10px + var(--seguro-topo)) 14px 10px;
  background: var(--vermelho);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.aviso-navegador[hidden] {
  display: none;
}

.aviso-navegador p {
  margin: 0;
}

/* ---------- Câmera ---------- */

.tela--camera {
  background: #000;
}

.palco-area {
  display: grid;
  place-items: center;
  flex: 1;
  min-height: 0;
  padding: 8px 0;
}

/* A proporção fica travada em 9:16, igual à moldura. Sem isso o preview mostraria
   um recorte diferente do que a foto salva, e a pessoa se enquadraria errado. */
/*
 * O tamanho do palco é calculado em JS (ver ajustarPalco em app.js), e não por regra
 * de proporção no CSS.
 *
 * Motivo: com aspect-ratio, quando max-width entra em ação o navegador não recalcula a
 * altura, e o palco sai com proporção errada em tela estreita (medido: 0,53 em vez de
 * 0,5625), cortando as laterais da arte. Deixar a <img> ditar o tamanho troca o problema
 * de lugar, porque o max-width dela se refere ao próprio palco. Cálculo direto resolve
 * os dois casos e vale em qualquer navegador.
 */
.palco {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}

.palco__video,
.palco__moldura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* top e height vêm do JS, conforme a área que a moldura deixa livre para a foto. */
.palco__video {
  inset: auto 0 auto 0;
}

/* A frontal é espelhada para a pessoa se reconhecer, como em qualquer app de selfie.
   A moldura fica de fora do espelho: senão o nome e o 4422 saem invertidos. */
.palco__video--espelhado {
  transform: scaleX(-1);
}

.palco__moldura {
  pointer-events: none;
}

.palco__contagem {
  z-index: 3;
}

.palco__contagem {
  position: absolute;
  top: calc(16px + var(--seguro-topo));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--vermelho);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.palco__contagem[hidden] {
  display: none;
}

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

.controles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 16px calc(14px + var(--seguro-base));
  background: #000;
}

.chips {
  display: flex;
  gap: 8px;
  max-width: 100%;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chips[hidden] {
  display: none;
}


.chip {
  flex: 0 0 auto;
  padding: 8px 16px;
  border: 2px solid rgb(255 255 255 / 0.3);
  border-radius: 999px;
  background: none;
  color: var(--branco);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.chip[aria-pressed='true'] {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: var(--azul-marinho);
}


.controles__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 380px);
}

.controles__dica {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
}

.botao-icone {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: var(--branco);
  cursor: pointer;
}

.botao-icone svg {
  width: 26px;
  height: 26px;
}

/* Disparador estilo câmera nativa: toque tira foto, segurar grava. */
.disparador {
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: none;
}

.disparador__anel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.disparador__trilho,
.disparador__progresso {
  fill: none;
  stroke-width: 6;
}

.disparador__trilho {
  stroke: rgb(255 255 255 / 0.45);
}

.disparador__progresso {
  stroke: var(--vermelho);
  stroke-linecap: round;
  stroke-dasharray: 289;
  stroke-dashoffset: 289;
  transition: stroke-dashoffset 0.1s linear;
}

.disparador__miolo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--branco);
  transition: transform 0.15s ease, background 0.15s ease;
}

.disparador--gravando .disparador__miolo {
  transform: scale(0.62);
  border-radius: 22%;
  background: var(--vermelho);
}

/* ---------- Resultado ---------- */

.tela--resultado {
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: calc(20px + var(--seguro-topo)) 20px calc(20px + var(--seguro-base));
  background: var(--gradiente);
}

/* Flex e não grid: num grid o item com height:100% cai em referência circular e a
   imagem volta ao tamanho natural (1080x1920), passando por cima dos botões. */
.resultado__midia {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.resultado__midia img,
.resultado__midia video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  filter: drop-shadow(0 14px 30px rgb(0 0 0 / 0.34));
}

.resultado__acoes {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.resultado__instrucao {
  margin: 0;
  max-width: 32ch;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  opacity: 0.9;
}

.resultado__instrucao[hidden] {
  display: none;
}

/* ---------- Botão de voltar da câmera ---------- */

.botao-fechar {
  position: absolute;
  z-index: 10;
  top: calc(10px + var(--seguro-topo));
  left: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.42);
  color: var(--branco);
  cursor: pointer;
}

.botao-fechar svg {
  width: 24px;
  height: 24px;
}

/* ---------- Confirmação de saída ---------- */

.dialogo {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(6 10 26 / 0.72);
}

.dialogo[hidden] {
  display: none;
}

.dialogo__caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 360px);
  padding: 26px 22px 18px;
  border-radius: 20px;
  background: var(--gradiente);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.4);
  text-align: center;
}

.dialogo__titulo {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.dialogo__texto {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.92;
}

/* ---------- Tutorial guiado (primeira visita) ---------- */

.tutorial {
  position: fixed;
  z-index: 60;
  inset: 0;
}

.tutorial[hidden] {
  display: none;
}

/*
 * O buraco de luz é feito com uma sombra gigante em volta de um retângulo vazio: tudo
 * fora dele escurece de uma vez, sem precisar recortar máscara nem empilhar quatro
 * divs para cobrir as laterais.
 */
.tutorial__foco {
  position: absolute;
  border-radius: 18px;
  box-shadow: 0 0 0 9999px rgb(6 10 26 / 0.84);
  outline: 2px solid var(--amarelo);
  outline-offset: 2px;
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}

.tutorial__balao {
  position: absolute;
  width: min(320px, calc(100vw - 32px));
  padding: 16px 18px 12px;
  border-radius: 16px;
  background: var(--branco);
  color: var(--azul-marinho);
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.4);
  transition: top 0.3s ease, left 0.3s ease;
}

.tutorial__contador {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--azul-royal);
  opacity: 0.75;
}

.tutorial__texto {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.tutorial__acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tutorial__pular {
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--azul-marinho);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.6;
  cursor: pointer;
}

.tutorial__proximo {
  min-height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--azul-marinho);
  color: var(--branco);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.tutorial__proximo:active {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .tutorial__foco,
  .tutorial__balao {
    transition: none;
  }
}