/* =========================
   CONFIGURAÇÕES GERAIS
========================= */

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

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  color: #333;
  overflow: hidden;

  transition:
    background-color 0.8s ease,
    color 0.5s ease;
}

.container {
  width: 100%;
  min-height: 100dvh;
}

/* =========================
   TELAS
========================= */

.tela {
  position: absolute;
  inset: 0;

  width: 100%;
  min-height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s;
}

.tela.ativa {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

/* =========================
   CARDS INICIAIS
========================= */

.cards-iniciais {
  width: 100%;
  max-width: 1050px;

  display: flex;
  justify-content: center;
  align-items: stretch;

  gap: 25px;
}

.card {
  width: 100%;
  max-width: 650px;

  padding: 45px 35px;

  background: rgba(255, 255, 255, 0.95);

  border-radius: 25px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);

  text-align: center;

  animation: aparecer 0.8s ease;
}

.card-judiar {
  max-width: 320px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card h1 {
  margin-bottom: 35px;

  font-size: clamp(1.8rem, 5vw, 2.6rem);

  color: #444;
}

.card-judiar h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* =========================
   BOTÕES
========================= */

.botoes {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.botao {
  width: 100%;

  padding: 18px 25px;

  border: none;
  border-radius: 16px;

  font-size: 1.05rem;
  font-weight: bold;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.botao:hover:not(:disabled) {
  transform: translateY(-4px) scale(1.02);
  filter: brightness(1.05);
}

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

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.botao-nani {
  background: #ff7aa8;
  color: white;

  box-shadow: 0 8px 20px rgba(255, 122, 168, 0.35);
}

.botao-nene {
  background: #5c9dff;
  color: white;

  box-shadow: 0 8px 20px rgba(92, 157, 255, 0.35);
}

.botao-judiar {
  background: #8e44ad;
  color: white;

  box-shadow: 0 8px 20px rgba(142, 68, 173, 0.35);
}

/* =========================
   TELAS DE RESPOSTA
========================= */

.conteudo-resposta {
  position: relative;
  z-index: 10;

  width: 100%;
  max-width: 750px;

  padding: 40px 25px;

  text-align: center;
}

.conteudo-resposta h2 {
  color: white;

  font-size: clamp(2rem, 7vw, 4rem);

  line-height: 1.2;

  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

  animation: mensagemEntrando 0.8s ease;
}

.emoji {
  margin-bottom: 20px;

  font-size: clamp(4rem, 15vw, 7rem);

  animation: pulsar 1.5s ease-in-out infinite;
}

/* =========================
   TELA JUDIAR
========================= */

.conteudo-judiar h2 {
  font-size: clamp(2rem, 6vw, 3.5rem);
}

.emoji-safado {
  font-size: clamp(7rem, 20vw, 12rem);
}

.botoes-acoes {
  width: 100%;
  max-width: 500px;

  margin: 35px auto 0;

  display: flex;
  gap: 20px;
}

.botao-bater {
  background: #ff5e62;
  color: white;

  box-shadow: 0 8px 20px rgba(255, 94, 98, 0.4);
}

.botao-morder {
  background: #ff4081;
  color: white;

  box-shadow: 0 8px 20px rgba(255, 64, 129, 0.4);
}

/* =========================
   EFEITO DE TREMIDA
========================= */

.tremendo {
  animation: tremer 0.45s ease-in-out !important;
}

/* =========================
   BOTÃO VOLTAR
========================= */

.botao-voltar {
  margin-top: 40px;

  padding: 14px 30px;

  background: rgba(255, 255, 255, 0.9);
  color: #444;

  border: none;
  border-radius: 50px;

  font-size: 1rem;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}

.botao-voltar:hover {
  transform: scale(1.08);
  background: white;
}

/* =========================
   EMOJIS FLUTUANTES
========================= */

#coracoes {
  position: fixed;
  inset: 0;

  pointer-events: none;
  overflow: hidden;

  z-index: 1;
}

.coracao {
  position: absolute;

  bottom: -60px;

  animation: subirCoracao linear forwards;

  user-select: none;

  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.1));
}

/* =========================
   ANIMAÇÕES
========================= */

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(25px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mensagemEntrando {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }

  70% {
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulsar {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

@keyframes subirCoracao {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.7);

    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    transform: translateY(-120vh) rotate(360deg) scale(1.3);

    opacity: 0;
  }
}

@keyframes tremer {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-5px, 2px) rotate(-1deg);
  }

  40% {
    transform: translate(5px, -2px) rotate(1deg);
  }

  60% {
    transform: translate(-4px, -1px) rotate(-1deg);
  }

  80% {
    transform: translate(4px, 2px) rotate(1deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* =========================
   RESPONSIVIDADE
========================= */

@media (max-width: 800px) {
  .cards-iniciais {
    flex-direction: column;
    align-items: center;
  }

  .card-judiar {
    max-width: 650px;
  }

  .botoes-acoes {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .card {
    padding: 35px 20px;
    border-radius: 20px;
  }

  .botao {
    padding: 17px 15px;
    font-size: 1rem;
  }

  .conteudo-resposta {
    padding: 25px 15px;
  }

  .botao-voltar {
    margin-top: 30px;
  }
}