body {
  font-family: "Inter", sans-serif;
  transition: background-color 0.3s ease-in-out;
}

.option-button {
  transition: all 0.2s ease-in-out;
  border: 2px solid transparent;
}

.option-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.option-button.selected {
  transform: scale(1.05);
  color: white;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Cores para os pilares selecionados */
.theme-selected {
  background-color: #2563eb;
} /* Azul */
.mechanic-selected {
  background-color: #16a34a;
} /* Verde */
.rule-selected {
  background-color: #dc2626;
} /* Vermelho */
.feedback-selected {
  background-color: #d97706;
} /* Amarelo */

/* Efeito de "Juicy Feedback" no fundo da tela */
body.correct-answer-glow {
  background-color: #064e3b;
}
body.incorrect-answer-glow {
  background-color: #7f1d1d;
}

/* Animação de "shake" para respostas incorretas */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

.shake-animation {
  animation: shake 0.5s ease-in-out;
}

/* Transição suave entre as telas de configuração e jogo */
#configurator,
#game-container {
  transition: opacity 0.5s, transform 0.5s;
}

.hidden-screen {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  width: 100%;
}

/* Animação da Barra de Progresso */
#progress-bar {
  transition: width 0.5s ease-in-out;
}

/* --- ESTILOS PARA O MENU LATERAL DESLIZANTE --- */

/* Fundo escurecido (overlay) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; /* Não bloqueia cliques quando escondido */
}

.overlay.open {
  opacity: 1;
  pointer-events: auto; /* Permite cliques (para fechar o menu) */
}

/* O menu lateral (sidebar) */
.sidebar {
  position: fixed;
  top: 0;
  right: -300px; /* Começa fora da tela */
  width: 300px;
  height: 100%;
  background-color: #1f2937; /* bg-gray-800 */
  z-index: 100;
  transition: right 0.3s ease-in-out;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.sidebar.open {
  right: 0; /* Desliza para dentro da tela */
}

/* --- ESTILOS PARA AS MELHORIAS DA PÁGINA DE REGRAS --- */

/* Animação de "pop" para a moeda coletada */
@keyframes item-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.item-pop {
  animation: item-pop 0.2s ease-in-out forwards;
}

/* Animação de entrada para a tela de Fim de Jogo */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#end-game-overlay {
  animation: fade-in 0.3s ease-in-out;
}

/* Estilo para o botão de "Jogar Novamente" */
#play-again-btn {
  transition: background-color 0.2s ease-in-out;
}

/* --- ESTILOS PARA O MODAL DO MODO PROFESSOR --- */
.teacher-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 199; /* Abaixo do modal, acima do resto */
  transition: opacity 0.3s ease-in-out;
}

.teacher-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  background-color: #1f2937; /* bg-gray-800 */
  padding: 1.5rem;
  border-radius: 1rem;
  z-index: 200;
  border: 1px solid #374151; /* bg-gray-700 */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s, transform 0.3s;
}

.teacher-modal.hidden,
.teacher-modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#close-teacher-modal-btn {
  font-size: 2rem;
  line-height: 1;
  font-weight: bold;
}

/* --- ESTILOS PARA ACESSIBILIDADE --- */

/* Estilos do Toggle Switch */
#high-contrast-toggle[aria-checked="true"] {
  background-color: #0ea5e9; /* Azul Claro */
}
#high-contrast-toggle[aria-checked="true"] > span {
  transform: translateX(20px);
}

/* Paleta de Alto Contraste */
body.high-contrast {
  background-color: #000000;
  color: #ffffff;
}
.high-contrast header,
.high-contrast footer,
.high-contrast .config-header,
.high-contrast #configurator,
.high-contrast #game-container,
.high-contrast .sidebar,
.high-contrast .teacher-modal {
  background-color: #000000;
  border-color: #ffffff;
}
.high-contrast .bg-gray-900,
.high-contrast .bg-gray-700,
.high-contrast .bg-red-900,
.high-contrast .bg-green-900 {
  background-color: #1a1a1a;
  border: 1px solid #ffffff;
}
.high-contrast button,
.high-contrast .option-button {
  background-color: #000000;
  border: 2px solid #ffff00;
  color: #ffff00;
}
.high-contrast button:hover {
  background-color: #333300;
}
.high-contrast .option-button.selected {
  background-color: #0000ff;
  border-color: #ffff00;
  color: #ffffff;
}
.high-contrast .text-blue-400,
.high-contrast .text-green-400,
.high-contrast .text-red-400,
.high-contrast .text-yellow-400,
.high-contrast .text-purple-400 {
  color: #ffff00;
}

.high-contrast body.correct-answer-glow {
  background-color: #003300;
}
.high-contrast body.incorrect-answer-glow {
  background-color: #330000;
}

/* --- ESTILOS PARA ACESSIBILIDADE DO DRAG-AND-DROP --- */

/* Estilo para o card que está "seguro" pelo teclado */
.card.holding {
  outline: 3px dashed #38bdf8; /* Borda azul para indicar seleção */
  outline-offset: 3px;
  transform: scale(1.05);
}

/* Estilo para a zona de drop quando focada */
.drop-zone:focus {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
}