/* ============================================================
   Desafio Diamond V — Cargill / Agroleite
   Design base 1080x1920 portrait, RESPONSIVO: --u escala pelo menor
   eixo (largura/1080 vs altura/1920), então o layout inteiro cabe em
   qualquer tela portrait (celular, tablet, totem, TV touch) sem corte.
   Pisos via max() garantem toque >=44px e fonte legível em telas
   pequenas; no kiosk 1080x1920 os pisos são inertes (render idêntico).
   ============================================================ */

@font-face {
  font-family: "HelveticaNowCargill";
  src: url("../assets/fonts/helvetica-now-cargill.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SoehneBreitHalbfett";
  src: url("../assets/fonts/soehne-breit-halbfett.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SoehneBreitDreiviertelfett";
  src: url("../assets/fonts/soehne-breit-dreiviertelfett.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #ba0c0c;
  --red-dark: #871423;
  --gray-dark: #dadada;
  --gray-light: #f2f2f2;
  --text-dark: #58595b;

  /* 1 unidade de design: 1/1080 da largura OU 1/1920 da altura, o que
     for menor — o design inteiro sempre cabe na tela, em qualquer
     proporção. Uso: calc(N * var(--u)) em qualquer valor de tamanho. */
  --u: min(100vw / 1080, 100vh / 1920);
}

/* dvh: altura real em navegador mobile (desconta barra de URL) */
@supports (height: 100dvh) {
  :root {
    --u: min(100vw / 1080, 100dvh / 1920);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "HelveticaNowCargill", Arial, sans-serif;
}

img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input {
  font-family: "HelveticaNowCargill", Arial, sans-serif;
  border: none;
  outline: none;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* ============================================================
   Container geral das telas
   ============================================================ */

.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen[hidden] {
  display: none !important;
}

/* ============================================================
   TELA 1 — CADASTRO
   ============================================================ */

.screen-cadastro {
  background: var(--gray-light);
}

.cadastro-top {
  flex: 0 0 20%;
  background: var(--gray-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cadastro-logo {
  width: calc(508 * var(--u));
  max-width: 47%;
  height: auto;
}

.cadastro-body {
  flex: 1 1 auto;
  /* coluna com proporção do design, centralizada em telas mais largas
     que 9:16 (tablet 3:4, TV); o fundo da tela segue full-bleed */
  width: calc(1080 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  padding: calc(44 * var(--u)) calc(90 * var(--u)) calc(30 * var(--u));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* conteúdo sempre acima do anel decorativo do canto */
  position: relative;
  z-index: 1;
}

.cadastro-title {
  font-family: "SoehneBreitHalbfett", sans-serif;
  color: var(--text-dark);
  font-size: max(calc(54 * var(--u)), 21px);
  line-height: 1.15;
  text-align: center;
  margin-bottom: calc(34 * var(--u));
}

.cadastro-form {
  display: flex;
  flex-direction: column;
  gap: max(calc(26 * var(--u)), 10px);
}

.field {
  width: 100%;
}

.pill-input {
  width: 100%;
  /* pisos: altura de toque confortável e fonte >=16px (evita zoom
     automático do iOS ao focar input) em telas pequenas */
  height: max(calc(96 * var(--u)), 48px);
  border-radius: calc(48 * var(--u));
  padding: 0 max(calc(46 * var(--u)), 18px);
  font-size: max(calc(36 * var(--u)), 16px);
  color: #3a3a3c;
  background: var(--gray-light);
  border: calc(2 * var(--u)) solid rgba(0, 0, 0, 0.07);
  box-shadow:
    inset calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)) rgba(163, 163, 163, 0.35),
    inset calc(-6 * var(--u)) calc(-6 * var(--u)) calc(14 * var(--u)) rgba(255, 255, 255, 0.9);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pill-input::placeholder {
  color: #a3a3a6;
}

.pill-input:focus {
  border-color: var(--red);
  box-shadow:
    0 0 0 calc(8 * var(--u)) rgba(186, 12, 12, 0.3),
    inset calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)) rgba(163, 163, 163, 0.35),
    inset calc(-6 * var(--u)) calc(-6 * var(--u)) calc(14 * var(--u)) rgba(255, 255, 255, 0.9);
}

#input-nome { margin-bottom: calc(-10 * var(--u)); }

/* Link do termo LGPD (padrão da REF; href trocado quando vier o oficial) */
.link-lgpd {
  display: block;
  width: 100%;
  text-align: center;
  font-size: max(calc(30 * var(--u)), 13px);
  color: var(--text-dark);
  text-decoration: underline;
  margin-top: calc(30 * var(--u));
}

.checkbox-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--u));
  margin-top: calc(30 * var(--u));
  /* área de toque mínima confortável mesmo quando o quadrado escala menor */
  min-height: 44px;
  cursor: pointer;
}

/* Checkbox LGPD — pura CSS, alta visibilidade (item 1) */
.checkbox-btn {
  width: max(calc(72 * var(--u)), 36px);
  height: max(calc(72 * var(--u)), 36px);
  border-radius: calc(16 * var(--u));
  background: #fff;
  border: max(calc(4 * var(--u)), 2px) solid #8f8f92;
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.12);
  position: relative;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.checkbox-btn.checked {
  background: var(--red);
  border-color: var(--red);
  animation: checkbox-pop 0.15s ease;
}

/* check centralizado geometricamente no quadrado (corrige o "torto") */
.checkbox-btn.checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* check proporcional ao quadrado (segue o piso de tamanho também) */
  width: 44%;
  height: 24%;
  border-left: max(calc(6 * var(--u)), 3px) solid #fff;
  border-bottom: max(calc(6 * var(--u)), 3px) solid #fff;
  transform: translate(-50%, -62%) rotate(-45deg);
}

@keyframes checkbox-pop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.checkbox-label {
  font-family: "SoehneBreitHalbfett", sans-serif;
  font-size: max(calc(36 * var(--u)), 15px);
  color: #3f3f41;
  line-height: 1;
}

/* Anel de canto — decorativo, substitui o semi-circle.png (item 2) */
.corner-ring {
  position: absolute;
  right: calc(-380 * var(--u));
  bottom: calc(-380 * var(--u));
  width: calc(760 * var(--u));
  height: calc(760 * var(--u));
  border-radius: 50%;
  border: calc(130 * var(--u)) solid var(--red);
  pointer-events: none;
  z-index: 0;
}

/* Botão "Continuar" — CTA da tela de cadastro (item 3) */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(420 * var(--u));
  max-width: 55%;
  min-width: 150px;
  height: max(calc(108 * var(--u)), 50px);
  border-radius: calc(54 * var(--u));
  margin: calc(34 * var(--u)) auto 0;
  font-family: "SoehneBreitHalbfett", sans-serif;
  font-size: max(calc(36 * var(--u)), 16px);
  color: #fff;
  background: linear-gradient(90deg, var(--red), var(--red-dark));
  box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(186, 12, 12, 0.45);
  animation: cta-breathe 2.5s ease-in-out infinite alternate;
  transition: transform 0.12s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.cta:active {
  transform: scale(0.96);
}

.cta--disabled {
  background: #c9c9cc;
  color: #8a8a8d;
  box-shadow: none;
  animation: none;
}

@keyframes cta-breathe {
  from { box-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(186, 12, 12, 0.35); }
  to   { box-shadow: 0 calc(14 * var(--u)) calc(56 * var(--u)) rgba(186, 12, 12, 0.6); }
}

/* Botão "Participar novamente" — tela de resultado (item 4) */
.cta--ghost {
  background: #fff;
  color: var(--red);
  box-shadow: 0 calc(14 * var(--u)) calc(44 * var(--u)) rgba(0, 0, 0, 0.3);
  animation: none;
  margin-top: 0;
  font-size: max(calc(38 * var(--u)), 16px);
}

/* ============================================================
   TELA 2 — PALPITE
   ============================================================ */

.screen-palpite {
  background: var(--gray-light);
}

.palpite-top {
  flex: 0 0 46%;
  background: linear-gradient(160deg, var(--red) 0%, var(--red-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(40 * var(--u));
}

.palpite-selo {
  width: calc(680 * var(--u));
  max-width: 82%;
  height: auto;
}

.palpite-body {
  flex: 1 1 auto;
  /* coluna com proporção do design, centralizada em telas mais largas */
  width: calc(1080 * var(--u));
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(44 * var(--u)) calc(60 * var(--u)) calc(20 * var(--u));
  overflow: hidden;
}

.palpite-title {
  font-family: "SoehneBreitHalbfett", sans-serif;
  color: var(--text-dark);
  font-size: max(calc(62 * var(--u)), 22px);
  text-align: center;
}

.palpite-subtitle {
  font-family: "SoehneBreitHalbfett", sans-serif;
  color: var(--text-dark);
  font-size: max(calc(38 * var(--u)), 15px);
  line-height: 1.25;
  text-align: center;
  margin-top: calc(14 * var(--u));
  margin-bottom: calc(48 * var(--u));
}

.palpite-options {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(24 * var(--u));
  margin-bottom: calc(50 * var(--u));
}

.option-btn {
  position: relative;
  height: max(calc(112 * var(--u)), 48px);
  border-radius: calc(56 * var(--u));
  background: #fff;
  box-shadow:
    calc(4 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)) rgba(163, 163, 163, 0.35),
    calc(-4 * var(--u)) calc(-4 * var(--u)) calc(12 * var(--u)) rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.2s ease;
}

.option-btn span {
  font-family: "SoehneBreitDreiviertelfett", sans-serif;
  color: var(--red);
  font-size: max(calc(38 * var(--u)), 15px);
}

.option-btn:active {
  transform: scale(0.95);
}

.option-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.option-btn.selected {
  outline: calc(4 * var(--u)) solid var(--red);
}

.btn-regulamento {
  width: calc(362 * var(--u));
  max-width: 60%;
  min-width: 130px;
  height: max(calc(90 * var(--u)), 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(45 * var(--u));
  background: linear-gradient(90deg, var(--red) 0%, var(--red-dark) 100%);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.2);
  font-size: max(calc(32 * var(--u)), 14px);
  color: #fff;
  transition: transform 0.12s ease;
}

.btn-regulamento:active {
  transform: scale(0.96);
}

.palpite-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(30 * var(--u)) 0 calc(46 * var(--u));
}

.palpite-cargill-logo {
  width: calc(420 * var(--u));
  max-width: 60%;
  height: auto;
}

/* ============================================================
   TELA 3 — RESULTADO
   ============================================================ */

.screen-resultado {
  background: linear-gradient(160deg, var(--red) 0%, var(--red-dark) 100%);
  align-items: center;
  justify-content: center;
}

.resultado-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(80 * var(--u));
}

/* selo do desafio com profundidade sobre o fundo vermelho */
.resultado-selo {
  width: calc(420 * var(--u));
  max-width: 46%;
  height: auto;
  margin-bottom: calc(56 * var(--u));
  filter: drop-shadow(0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.35));
  animation: selo-float 3.4s ease-in-out infinite;
}

.resultado-titulo {
  font-family: "SoehneBreitDreiviertelfett", sans-serif;
  color: #fff;
  font-size: max(calc(110 * var(--u)), 34px);
  line-height: 1.05;
  margin-bottom: calc(28 * var(--u));
  text-shadow: 0 calc(10 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.25);
}

.resultado-texto {
  font-family: "SoehneBreitHalbfett", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: max(calc(46 * var(--u)), 17px);
  line-height: 1.3;
  margin-bottom: calc(90 * var(--u));
}

/* quartos de anel decorativos (mesmo motivo do anel do cadastro) */
.resultado-ring {
  position: absolute;
  border-radius: 50%;
  border: calc(90 * var(--u)) solid rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

.resultado-ring--tl {
  width: calc(640 * var(--u));
  height: calc(640 * var(--u));
  left: calc(-320 * var(--u));
  top: calc(-320 * var(--u));
}

.resultado-ring--br {
  width: calc(760 * var(--u));
  height: calc(760 * var(--u));
  right: calc(-380 * var(--u));
  bottom: calc(-380 * var(--u));
}

/* ============================================================
   MODAIS (LGPD / Regulamento)
   ============================================================ */

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none !important;
}

.modal-box {
  width: calc(900 * var(--u));
  max-width: 94vw;
  max-height: 80vh;
  max-height: 80dvh;
  background: #fff;
  border-radius: calc(28 * var(--u));
  padding: max(calc(50 * var(--u)), 18px);
  display: flex;
  flex-direction: column;
}

.modal-title {
  font-family: "SoehneBreitHalbfett", sans-serif;
  color: var(--text-dark);
  font-size: max(calc(42 * var(--u)), 18px);
  margin-bottom: calc(30 * var(--u));
}

.modal-scroll {
  overflow-y: auto;
  touch-action: pan-y;
  flex: 1 1 auto;
  padding-right: calc(10 * var(--u));
  color: var(--text-dark);
  font-size: max(calc(28 * var(--u)), 14px);
  line-height: 1.5;
}

.modal-scroll p {
  margin-bottom: calc(24 * var(--u));
}

.modal-btn-aceitar,
.modal-btn-fechar {
  margin-top: calc(36 * var(--u));
  align-self: center;
  background: var(--red);
  color: #fff;
  font-size: max(calc(32 * var(--u)), 15px);
  padding: max(calc(22 * var(--u)), 12px) max(calc(70 * var(--u)), 28px);
  border-radius: calc(48 * var(--u));
}

/* ============================================================
   TOAST
   ============================================================ */

.toast {
  position: absolute;
  left: 50%;
  bottom: calc(80 * var(--u));
  transform: translateX(-50%) translateY(calc(30 * var(--u)));
  background: rgba(20, 20, 20, 0.9);
  color: #fff;
  font-size: max(calc(28 * var(--u)), 14px);
  padding: max(calc(20 * var(--u)), 10px) max(calc(40 * var(--u)), 18px);
  border-radius: calc(40 * var(--u));
  z-index: 100;
  max-width: 80vw;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast[hidden] {
  display: none !important;
}

.toast.toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   VÁLVULA DE SEGURANÇA — telas pequenas (celular)
   Se os pisos de toque/fonte estourarem a altura disponível,
   o formulário rola em vez de cortar o botão Continuar.
   ============================================================ */

@media (max-width: 520px) {
  .cadastro-body {
    overflow-y: auto;
    touch-action: pan-y;
  }
}

/* ============================================================
   TRANSIÇÕES DE TELA (item 9)
   ============================================================ */

.screen-exit {
  animation: screen-fade-out 0.45s ease forwards;
  pointer-events: none;
}

.screen-enter {
  animation: screen-fade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes screen-fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(calc(-16 * var(--u))) scale(0.985); }
}

@keyframes screen-fade-in {
  from { opacity: 0; transform: translateY(calc(28 * var(--u))) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cadastro: campos entram em stagger */
.screen-enter.screen-cadastro .field,
.screen-enter.screen-cadastro .link-lgpd,
.screen-enter.screen-cadastro .checkbox-row,
.screen-enter.screen-cadastro .cta {
  animation: field-stagger-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.screen-enter.screen-cadastro .field:nth-child(1) { animation-delay: 0ms; }
.screen-enter.screen-cadastro .field:nth-child(2) { animation-delay: 60ms; }
.screen-enter.screen-cadastro .field:nth-child(3) { animation-delay: 120ms; }
.screen-enter.screen-cadastro .field:nth-child(4) { animation-delay: 180ms; }
.screen-enter.screen-cadastro .field:nth-child(5) { animation-delay: 240ms; }
.screen-enter.screen-cadastro .link-lgpd { animation-delay: 280ms; }
.screen-enter.screen-cadastro .checkbox-row { animation-delay: 320ms; }
.screen-enter.screen-cadastro .cta { animation-delay: 360ms; }

@keyframes field-stagger-in {
  from { opacity: 0; transform: translateY(calc(18 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Palpite: selo com float/pulse contínuo + pills em pop-in stagger */
.palpite-selo {
  animation: selo-float 3.4s ease-in-out infinite;
}

@keyframes selo-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(calc(-8 * var(--u))) scale(1.015); }
}

.screen-enter.screen-palpite .option-btn {
  animation: option-pop-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.screen-enter.screen-palpite .option-btn:nth-child(1) { animation-delay: 0ms; }
.screen-enter.screen-palpite .option-btn:nth-child(2) { animation-delay: 50ms; }
.screen-enter.screen-palpite .option-btn:nth-child(3) { animation-delay: 100ms; }
.screen-enter.screen-palpite .option-btn:nth-child(4) { animation-delay: 150ms; }
.screen-enter.screen-palpite .option-btn:nth-child(5) { animation-delay: 200ms; }
.screen-enter.screen-palpite .option-btn:nth-child(6) { animation-delay: 250ms; }

@keyframes option-pop-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Pill escolhida: preenche de vermelho com número branco antes da transição */
.option-btn.selected {
  outline: none;
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(186, 12, 12, 0.4);
}

.option-btn.selected span {
  color: #fff;
}

/* Resultado: título com pop-in overshoot + glow de celebração (sem flash branco) */
.screen-enter.screen-resultado .resultado-selo {
  animation: titulo-pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             selo-float 3.4s ease-in-out 0.5s infinite;
}

.screen-enter.screen-resultado .resultado-titulo {
  animation: titulo-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: 100ms;
}

.screen-enter.screen-resultado .resultado-texto,
.screen-enter.screen-resultado .cta--ghost {
  animation: texto-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 120ms;
}

@keyframes titulo-pop-in {
  0%   { opacity: 0; transform: scale(0.6); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

@keyframes texto-fade-up {
  from { opacity: 0; transform: translateY(calc(20 * var(--u))); }
  to   { opacity: 1; transform: translateY(0); }
}

.resultado-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(900 * var(--u));
  height: calc(900 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 210, 180, 0.35) 0%, rgba(255, 210, 180, 0) 65%);
  opacity: 0;
  pointer-events: none;
}

.screen-resultado.tela-vitoria .resultado-glow {
  opacity: 1;
}

/* partículas flutuantes (só tons de marca, sem flash branco) */
.resultado-content--vitoria::before,
.resultado-content--vitoria::after {
  content: "";
  position: absolute;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  border-radius: 50%;
  background: rgba(255, 205, 170, 0.85);
  animation: particula-flutuar 3.2s ease-in-out infinite;
  pointer-events: none;
}

.resultado-content--vitoria::before {
  left: calc(-160 * var(--u));
  top: calc(40 * var(--u));
  animation-delay: 0s;
}

.resultado-content--vitoria::after {
  right: calc(-140 * var(--u));
  top: calc(160 * var(--u));
  animation-delay: 1.1s;
}

@keyframes particula-flutuar {
  0%   { transform: translateY(0) scale(1); opacity: 0.85; }
  50%  { transform: translateY(calc(-40 * var(--u))) scale(1.2); opacity: 0.4; }
  100% { transform: translateY(0) scale(1); opacity: 0.85; }
}