/* ============================================================
   quiz.css — Quiz mode styling (extends style.css)
   ============================================================ */

.quiz-body { display: flex; flex-direction: column; gap: var(--gap); min-height: 100vh; }

.quiz-back { text-decoration: none; }
.quiz-back .brand-mark { transition: transform 0.2s; }
.quiz-back:hover .brand-mark { transform: translateX(-3px); }

#score-pill { color: var(--accent-orange); }

/* Progress bar */
.quiz-progress-track {
  height: 10px;
  padding: 0;
  border-radius: 99px;
  overflow: hidden;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-cyan));
  box-shadow: 0 0 16px rgba(0, 212, 184, 0.5);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 99px;
}

/* Main */
.quiz-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 10px;
}

/* ---------- Question card ---------- */
.quiz-card,
.quiz-result {
  width: min(680px, 100%);
  padding: 34px;
}
.quiz-card.flip-in { animation: flipIn 500ms ease-in-out; }
@keyframes flipIn {
  0%   { opacity: 0; transform: rotateX(12deg) translateY(16px); }
  100% { opacity: 1; transform: rotateX(0) translateY(0); }
}

.quiz-organelle-tag {
  display: inline-block;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px; border-radius: 99px;
  color: var(--accent-purple);
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.3);
  margin-bottom: 16px;
}
.quiz-question {
  font-size: 1.4rem; line-height: 1.4;
  margin-bottom: 24px;
}

.quiz-options { display: flex; flex-direction: column; gap: 12px; }
.quiz-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 0.95rem; font-weight: 500;
  transition: all 0.2s ease;
}
.quiz-option .opt-key {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 600; font-size: 0.82rem;
  font-family: "Outfit", sans-serif;
  transition: all 0.2s ease;
}
.quiz-option .opt-mark {
  margin-left: auto; width: 20px; height: 20px;
  opacity: 0; transform: scale(0.5);
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz-option .opt-mark svg { width: 100%; height: 100%; }

.quiz-option:not(:disabled):hover {
  background: var(--surface);
  border-color: rgba(0, 212, 184, 0.5);
  box-shadow: 0 2px 12px rgba(0, 212, 184, 0.1);
  transform: translateX(4px);
}
.quiz-option:not(:disabled):hover .opt-key {
  background: rgba(0, 212, 184, 0.12);
  color: var(--accent-teal-ink);
  border-color: rgba(0, 212, 184, 0.4);
}

.quiz-option.correct {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(22, 163, 74, 0.5);
  color: #15803d;
}
.quiz-option.correct .opt-key {
  background: var(--accent-green); color: #ffffff; border-color: var(--accent-green);
}
.quiz-option.correct .opt-mark { opacity: 1; transform: scale(1); color: var(--accent-green); }

.quiz-option.wrong {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
  color: #b91c1c;
}
.quiz-option.wrong .opt-key {
  background: var(--accent-red); color: #ffffff; border-color: var(--accent-red);
}
.quiz-option.wrong .opt-mark { opacity: 1; transform: scale(1); color: var(--accent-red); }

.quiz-option.dim { opacity: 0.45; }
.quiz-option:disabled { cursor: default; }

/* Feedback */
.quiz-feedback {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-teal);
  animation: slideInRight 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quiz-feedback.is-correct { border-left-color: var(--accent-green); }
.quiz-feedback.is-wrong { border-left-color: var(--accent-red); }
.feedback-head {
  font-family: "Outfit", sans-serif; font-weight: 600;
  font-size: 1rem; margin-bottom: 6px;
}
.feedback-head.is-correct { color: var(--accent-green); }
.feedback-head.is-wrong { color: var(--accent-red); }

/* Actions */
.quiz-actions { margin-top: 22px; display: flex; justify-content: flex-end; }
.quiz-next-btn {
  padding: 12px 28px;
  border-radius: 12px; border: none;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-cyan));
  color: #042b25; font-weight: 700; font-size: 0.92rem;
  font-family: "Outfit", sans-serif;
  box-shadow: 0 6px 20px rgba(0, 212, 184, 0.25);
  transition: all 0.2s ease;
}
.quiz-next-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 212, 184, 0.4);
}
.quiz-next-btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

.quiz-ghost-btn {
  padding: 12px 24px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--border);
  color: var(--text-secondary); font-weight: 600; font-size: 0.9rem;
  transition: all 0.2s ease;
}
.quiz-ghost-btn:hover { color: var(--text-primary); border-color: var(--accent-teal); }

/* ---------- Result card ---------- */
.quiz-result {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.quiz-result.show { animation: flipIn 500ms ease-in-out; }
.result-ring {
  width: 120px; height: 120px;
  display: grid; place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 212, 184, 0.15), transparent 70%);
  border: 3px solid var(--accent-teal);
  box-shadow: 0 0 40px rgba(0, 212, 184, 0.3);
  animation: glow-pulse 3s ease-in-out infinite;
}
.result-emoji { font-size: 3rem; }
#result-score { font-size: 2.2rem; }
.result-message {
  font-family: "Outfit", sans-serif; font-size: 1.05rem; font-weight: 500;
  color: var(--text-secondary);
  max-width: 380px;
}
.result-stats {
  display: flex; gap: 12px; margin: 8px 0 6px;
}
.result-stats > div {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 22px; border-radius: 12px;
  background: var(--surface-soft); border: 1px solid var(--border);
}
.result-stats strong {
  font-family: "Outfit", sans-serif; font-size: 1.5rem; color: var(--accent-teal-ink);
}
.result-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }