.quiz-card {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  max-width: 400px;
  margin: 0 auto;
}
h3 {
  margin: 0 0 20px 0;
  color: #1f2937;
}
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.option-btn {
  padding: 12px;
  border: 2px solid #e5e7eb;
  background: white;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  text-align: left;
  transition: all 0.2s;
}
.option-btn:hover {
  background: #f9fafb;
}
.option-btn.correct {
  border-color: #10b981;
  background-color: #ecfdf5;
  color: #065f46;
}
.option-btn.wrong {
  border-color: #ef4444;
  background-color: #fef2f2;
  color: #991b1b;
}
.result-msg {
  margin-top: 15px;
  font-weight: 600;
  min-height: 24px;
}

function checkAnswer(btn, isCorrect) {
  // Reset previous selections
  const allBtns = document.querySelectorAll(".option-btn");
  allBtns.forEach(b => b.className = "option-btn");
  
  const result = document.getElementById("result");
  
  if (isCorrect) {
    btn.classList.add("correct");
    result.innerText = "Correct! Well done.";
    result.style.color = "#10b981";
  } else {
    btn.classList.add("wrong");
    result.innerText = "Incorrect. Try again!";
    result.style.color = "#ef4444";
  }
}