/* styles.css */

body {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  font-family: "Fredoka One", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

#emoji-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Não interferir na interação com o jogo */
  z-index: -1; /* Colocar atrás de todo o conteúdo */
}

.emoji {
  position: absolute;
  font-size: 2em;
  opacity: 0; /* Inicia invisível */
  top: -10%; /* Iniciar um pouco acima da tela */
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0; /* Inicia invisível */
  }
  10% {
    opacity: 1; /* Gradualmente aparece */
  }
  100% {
    transform: translateY(110vh) rotate(360deg); /* Sai um pouco abaixo da tela */
    opacity: 1; /* Desaparece ao sair da tela */
  }
}

.game-container {
  text-align: center;
  width: 100%;
  max-width: 450px;
  padding: 20px;
  background: linear-gradient(145deg, #ffffff, #e6e6e6);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeIn 1.5s ease-out forwards;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.info-panel {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1.2em;
  width: 50%;
  margin: 0 auto;
  color: #555;
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 90px);
  grid-gap: 15px;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.card {
  width: 90px;
  height: 90px;
  background: linear-gradient(145deg, #fffae6, #f0f0f0);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1),
    inset 0 0 5px rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  perspective: 1000px;
  transition: transform 0.3s ease, background-color 0.2s ease,
    box-shadow 0.3s ease;
  animation: float 1.5s infinite ease-in-out;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 0 8px rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.3s ease-in-out;
  transform-style: preserve-3d;
  user-select: none; /* Evita a seleção de texto */
  pointer-events: none; /* Desabilita eventos de arrastar */
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.card-front {
  background-color: #fffae6;
}

.card-back {
  transform: rotateY(180deg);
  color: white;
}

.buttons-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

#restart-button,
#modal-restart-button,
#category-button {
  padding: 12px 24px;
  font-size: 18px;
  font-family: "Fredoka One", cursive;
  background: linear-gradient(145deg, #ff6f61, #e05b52);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

#restart-button:hover,
#modal-restart-button:hover,
#category-button:hover {
  background: linear-gradient(145deg, #e05b52, #ff6f61);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#restart-button:active,
#modal-restart-button:active,
#category-button:active {
  transform: scale(0.95);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.correct {
  border: 2px solid #ffffff;
  animation: glow 1s infinite alternate ease-in-out;
}

.incorrect {
  background-color: #ff5252 !important;
  animation: shake 0.5s ease;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 10px #8bc34a;
  }
  50% {
    box-shadow: 0 0 20px #8bc34a;
  }
  100% {
    box-shadow: 0 0 10px #8bc34a;
  }
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: scale(0);
  transition: transform 0.3s ease;
}

.hidden {
  display: none;
}

.modal-content.show {
  transform: scale(1);
}

.category-options {
  display: grid; /* Mude de flex para grid */
  grid-template-columns: repeat(4, auto); /* Define 4 colunas automáticas */
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
}

.category-option {
  padding: 10px 20px;
  font-size: 16px;
  font-family: "Fredoka One", cursive;
  background: linear-gradient(145deg, #8bc34a, #4caf50);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.category-option:hover {
  background: linear-gradient(145deg, #4caf50, #8bc34a);
}

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

/* Cores de fundo para cada par de frutas (mantidas intactas) */
.card-back[data-fruit="🍎"] {
  background-color: #ffcccb;
} /* Vermelho claro */
.card-back[data-fruit="🍌"] {
  background-color: #ffe066;
} /* Amarelo escuro */
.card-back[data-fruit="🍒"] {
  background-color: #f784a6;
} /* Rosa forte */
.card-back[data-fruit="🍇"] {
  background-color: #c79dd7;
} /* Roxo claro */
.card-back[data-fruit="🍉"] {
  background-color: #8fd4c1;
} /* Verde menta */
.card-back[data-fruit="🍍"] {
  background-color: #f6d4a6;
} /* Bege claro */
.card-back[data-fruit="🥝"] {
  background-color: #b5e7a0;
} /* Verde suave */
.card-back[data-fruit="🥭"] {
  background-color: #ffcba4;
} /* Laranja claro */

/* Cores de fundo para animais */
.card-back[data-fruit="🐶"] {
  background-color: #ffe6e6;
} /* Rosa claro */
.card-back[data-fruit="🐱"] {
  background-color: #b3e5fc;
} /* Azul claro */
.card-back[data-fruit="🦁"] {
  background-color: #fff59d;
} /* Amarelo claro */
.card-back[data-fruit="🦊"] {
  background-color: #ffcc80;
} /* Laranja suave */
.card-back[data-fruit="🐸"] {
  background-color: #aed581;
} /* Verde suave */
.card-back[data-fruit="🐧"] {
  background-color: #e1bee7;
} /* Roxo suave */
.card-back[data-fruit="🐢"] {
  background-color: #a5d6a7;
} /* Verde água */
.card-back[data-fruit="🐘"] {
  background-color: #cfd8dc;
} /* Cinza claro */

/* Cores de fundo para objetos */
.card-back[data-fruit="🖥️"] {
  background-color: #e0e0e0;
} /* Cinza claro */
.card-back[data-fruit="📱"] {
  background-color: #f8bbd0;
} /* Rosa bebê */
.card-back[data-fruit="🖊️"] {
  background-color: #b3e5fc;
} /* Azul bebê */
.card-back[data-fruit="📷"] {
  background-color: #ffcdd2;
} /* Rosa claro */
.card-back[data-fruit="🎸"] {
  background-color: #ffe082;
} /* Amarelo suave */
.card-back[data-fruit="🚗"] {
  background-color: #ff8a80;
} /* Vermelho médio */
.card-back[data-fruit="✈️"] {
  background-color: #81d4fa;
} /* Azul claro */
.card-back[data-fruit="⏰"] {
  background-color: #b0bec5;
} /* Cinza suave */

/* Cores de fundo para esportes */
.card-back[data-fruit="🏀"] {
  background-color: #f57c00;
} /* Laranja forte (cor da bola de basquete) */
.card-back[data-fruit="🎾"] {
  background-color: #cddc39;
} /* Verde limão (cor da bola de tênis) */
.card-back[data-fruit="🏈"] {
  background-color: #8d6e63;
} /* Marrom (cor da bola de futebol americano) */
.card-back[data-fruit="⚾"] {
  background-color: #f5f5f5;
  color: #d32f2f;
} /* Branco com detalhes em vermelho (cor da bola de beisebol) */
.card-back[data-fruit="⚽"] {
  background-color: #e0e0e0;
  color: #424242;
} /* Cinza claro (para a bola de futebol) */
.card-back[data-fruit="🥊"] {
  background-color: #8b3a3a;
  color: #ffffff;
} /* Vermelho intenso (para as luvas de boxe) */
.card-back[data-fruit="🏓"] {
  background-color: #29b6f6;
} /* Azul vibrante (para as raquetes de ping-pong) */
.card-back[data-fruit="🥎"] {
  background-color: #ffeb3b;
  color: #f57f17;
} /* Amarelo vibrante (para a bola de softbol) */

/* Cores de fundo para plantas */
.card-back[data-fruit="🌱"] {
  background-color: #a7ffeb;
} /* Verde menta */
.card-back[data-fruit="🌵"] {
  background-color: #388e3c;
  color: #ffffff;
} /* Verde escuro */
.card-back[data-fruit="🍀"] {
  background-color: #c8e6c9;
  color: #000000;
} /* Verde claro */
.card-back[data-fruit="🍄"] {
  background-color: #ffccbc;
  color: #d32f2f;
} /* Vermelho claro */
.card-back[data-fruit="🌾"] {
  background-color: #fff9c4;
  color: #fbc02d;
} /* Amarelo */
.card-back[data-fruit="🌲"] {
  background-color: #c8e6c9;
  color: #388e3c;
} /* Verde suave */
.card-back[data-fruit="🌻"] {
  background-color: #fff59d;
  color: #f57f17;
} /* Amarelo claro */
.card-back[data-fruit="🌹"] {
  background-color: #f8bbd0;
  color: #c2185b;
} /* Rosa suave */

/* Cores de fundo para alimentos */
.card-back[data-fruit="🍕"] {
  background-color: #ffeb99;
  color: #d2691e;
} /* Amarelo suave */
.card-back[data-fruit="🍔"] {
  background-color: #ffe0b2;
  color: #795548;
} /* Bege suave */
.card-back[data-fruit="🍟"] {
  background-color: #ffecb3;
  color: #ffcc00;
} /* Amarelo suave */
.card-back[data-fruit="🍣"] {
  background-color: #ffebcd;
  color: #ff6347;
} /* Bege claro */
.card-back[data-fruit="🍰"] {
  background-color: #ffcdd2;
  color: #e91e63;
} /* Rosa claro */
.card-back[data-fruit="🍩"] {
  background-color: #d7ccc8;
  color: #8d6e63;
} /* Bege claro */
.card-back[data-fruit="🍜"] {
  background-color: #c5e1a5;
  color: #8b0000;
} /* Verde claro */
.card-back[data-fruit="🍤"] {
  background-color: #b2ebf2;
  color: #ff6347;
} /* Azul claro */

/* Cores de fundo para sentimentos */
.card-back[data-fruit="😀"] {
  background-color: #ffecb3;
  color: #d2691e;
} /* Amarelo suave */
.card-back[data-fruit="😔"] {
  background-color: #b2ebf2;
  color: #8b4513;
} /* Azul claro */
.card-back[data-fruit="😍"] {
  background-color: #ffe082;
  color: #ffcc00;
} /* Amarelo vibrante */
.card-back[data-fruit="😢"] {
  background-color: #ffccbc;
  color: #d32f2f;
} /* Rosa claro */
.card-back[data-fruit="🤗"] {
  background-color: #fff9c4;
  color: #ff69b4;
} /* Amarelo claro */
.card-back[data-fruit="🤔"] {
  background-color: #c8e6c9;
  color: #795548;
} /* Verde claro */
.card-back[data-fruit="🙃"] {
  background-color: #ffe4e1;
  color: #8b0000;
} /* Rosa suave */
.card-back[data-fruit="🤮"] {
  background-color: #b2ebf2;
  color: #ff6347;
} /* Azul claro */

/* Cores de fundo para química */
.card-back[data-fruit="🧪"] {
  background-color: #9fa8da;
  color: #4a148c;
} /* Roxo suave */
.card-back[data-fruit="⚗️"] {
  background-color: #80deea;
  color: #004d40;
} /* Azul água */
.card-back[data-fruit="🧫"] {
  background-color: #ffcc80;
  color: #e65100;
} /* Laranja suave */
.card-back[data-fruit="💉"] {
  background-color: #e57373;
  color: #b71c1c;
} /* Vermelho claro */
.card-back[data-fruit="💊"] {
  background-color: #b39ddb;
  color: #311b92;
} /* Roxo claro */
.card-back[data-fruit="🔬"] {
  background-color: #ce93d8;
  color: #4a148c;
} /* Lilás */
.card-back[data-fruit="🧬"] {
  background-color: #ffab91;
  color: #d84315;
} /* Laranja claro */
.card-back[data-fruit="🛢️"] {
  background-color: #bcaaa4;
  color: #3e2723;
} /* Marrom claro */

/* Estilos para o botão de fechar no modal */
.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  color: #333;
  transition: color 0.3s ease;
}

.close-button:hover {
  color: #e05b52;
}

/* Adicionar estilos para a nova label de Recorde */
.info-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  font-size: 1.2em;
  width: 70%; /* Ajustar largura para caber ambas as labels */
  margin: 0 auto;
  color: #555;
  background-color: #ffffff;
  padding: 8px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  gap: 20px; /* Adiciona espaçamento entre as labels */
}