/* ===== Quiz UI ===== */
.quiz-wrapper { max-width: 860px; padding: 2.25rem; margin-inline: auto }
.quiz-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem }
.quiz-status { font-size: 1rem; color: var(--tropical-blue-900) }
.quiz-score { font-weight: 700; color: var(--tropical-blue-900) }
.quiz-timer, .quiz-timer span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 64px;
  padding: .35rem .65rem; border-radius: 999px; background: var(--tropical-blue-700); color: #fff;
  font-variant-numeric: tabular-nums;
}
.quiz-body h2 { line-height: 1.35; color: var(--tropical-blue-950); margin: 0 0 1rem 0 }
.quiz-options { display: grid; grid-template-columns: 1fr; gap: .75rem }
.quiz-option-btn {
  width: 100%; padding: 1rem 1.1rem; font-size: 1rem; text-align: left; background: var(--link-water-50);
  border: 1px solid var(--link-water-300); border-radius: 10px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  transition: background-color .2s, border-color .2s, transform .12s, box-shadow .12s;
}
.quiz-option-btn:hover { background: var(--link-water-200); border-color: var(--link-water-400); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .06) }
.quiz-option-btn:focus-visible { outline: 2px solid var(--link-water-400); outline-offset: 3px }
@keyframes quiz-bounce-in { 0% { transform: scale(.98) } 60% { transform: scale(1.02) } 100% { transform: scale(1) } }
@keyframes quiz-shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-4px) } 40% { transform: translateX(4px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
.quiz-option-btn.correct { background: #2ecc71; border-color: #27ae60; color: #fff; animation: quiz-bounce-in .18s ease-out both }
.quiz-option-btn.incorrect { background: #e74c3c; border-color: #c0392b; color: #fff; animation: quiz-shake .22s ease-in-out both }
.quiz-option-btn:disabled { cursor: not-allowed; opacity: .9 }
.quiz-footer {
  display: flex; flex-direction: column; gap: .75rem; align-items: center;
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #eee; min-height: 50px; text-align: center
}
#next-question-btn, .quiz-footer .cta-button {
  border: none; border-radius: 999px; padding: .8rem 1.25rem; background: var(--tropical-blue-800); color: #fff; font-size: 1rem; transition: transform .12s, background-color .2s
}
#next-question-btn:hover, .quiz-footer .cta-button:hover { background: var(--tropical-blue-900); transform: translateY(-1px) }
#feedback p { margin: .25rem 0; font-size: 1rem }
#feedback .btn { background: var(--tropical-blue-700); color: #fff }
#feedback .btn:hover { background: var(--tropical-blue-800) }
@media (min-width: 901px) {
  .quiz-options { grid-template-columns: 1fr 1fr }
}