/* ========================
   QUIZ BANNER
======================== */
.quiz-banner {
  background: linear-gradient(135deg, #003580, #0050c8);
  color: #FFD700;
  text-align: center;
  padding: 40px 30px;
  border-radius: 12px;
  margin-bottom: 35px;
  border: 3px solid #FFD700;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.quiz-banner h2 {
  font-size: 36px;
  margin-bottom: 10px;
}

.quiz-banner p {
  font-size: 17px;
  color: #dce8ff;
}

/* ========================
   QUIZ CONTAINER
======================== */
.quiz-container {
  background-color: #f8f9ff;
  border-radius: 12px;
  padding: 35px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  border: 2px solid #e0e8ff;
  margin-bottom: 30px;
}

/* PERGUNTA */
.question {
  font-size: 22px;
  color: #003580;
  margin-bottom: 25px;
  font-weight: 600;
  line-height: 1.5;
}

/* OPÇÕES */
.options {
  display: grid;
  gap: 15px;
  margin-bottom: 25px;
}

.option {
  background-color: #fff;
  border: 2px solid #0050c8;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 17px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.option:hover {
  background-color: #eef1ff;
  transform: translateX(5px);
  border-color: #003580;
}

.option.selected {
  background-color: #0050c8;
  color: #FFD700;
  border-color: #003580;
}

.option.correct {
  background-color: #28a745;
  color: #fff;
  border-color: #1e7e34;
}

.option.incorrect {
  background-color: #dc3545;
  color: #fff;
  border-color: #c82333;
}

.option.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* FEEDBACK */
.feedback {
  font-size: 18px;
  font-weight: 600;
  padding: 15px 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: none;
  text-align: center;
}

.feedback.show {
  display: block;
}

.feedback.correct {
  background-color: #d4edda;
  color: #155724;
  border: 2px solid #28a745;
}

.feedback.incorrect {
  background-color: #f8d7da;
  color: #721c24;
  border: 2px solid #dc3545;
}

/* BOTÕES */
.btn-next,
.btn-restart,
.btn-home {
  background-color: #0050c8;
  color: #FFD700;
  border: none;
  padding: 14px 30px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-block;
  text-decoration: none;
  margin: 5px;
}

.btn-next:hover,
.btn-restart:hover,
.btn-home:hover {
  background-color: #003580;
  transform: scale(1.05);
}

/* ========================
   RESULTADO
======================== */
.result {
  background-color: #f8f9ff;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  border: 3px solid #FFD700;
}

.result h3 {
  font-size: 32px;
  color: #003580;
  margin-bottom: 20px;
}

.result p {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

#score {
  font-size: 28px;
  font-weight: 700;
  color: #0050c8;
}

#message {
  font-size: 18px;
  color: #555;
  font-style: italic;
}

/* ========================
   RESPONSIVIDADE
======================== */
@media (max-width: 768px) {
  .quiz-banner h2 { font-size: 28px; }
  .quiz-banner p { font-size: 15px; }
  .quiz-container { padding: 25px; }
  .question { font-size: 19px; }
  .option { font-size: 15px; padding: 15px 18px; }
  .result { padding: 30px 20px; }
  .result h3 { font-size: 26px; }
}

@media (max-width: 480px) {
  .quiz-banner { padding: 25px 15px; }
  .quiz-banner h2 { font-size: 24px; }
  .quiz-container { padding: 20px; }
  .question { font-size: 17px; }
  .option { font-size: 14px; padding: 12px 15px; }
  .btn-next, .btn-restart, .btn-home {
    font-size: 15px;
    padding: 12px 24px;
    width: 100%;
    margin: 8px 0;
  }
}