/* Quiz pages (episode + book)  (fork A) */

.quiz-hero { position: relative; isolation: isolate; overflow: clip; padding-block: var(--s-6) var(--s-6); }
.quiz-hero .watermark { inset-inline-end: -2vw; bottom: -.15em; }
.quiz-hero .crumbs { margin-bottom: var(--s-5); }
.quiz-hero .h1 { margin: var(--s-3) 0 var(--s-3); }
.quiz-sub { margin: 0; font-family: var(--f-read); font-weight: 600; color: var(--ink-80); }

.quiz-page { max-inline-size: 760px; padding-bottom: var(--s-9); }
.quiz-stage { animation: q-in var(--d-3) var(--ease-out) both; }
@keyframes q-in { from { opacity: 0; transform: translateY(10px); } }

/* Loading */
.quiz-loading { display: grid; justify-items: center; gap: var(--s-4); padding: var(--s-8) var(--s-5); text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r-3); font-family: var(--f-ui); color: var(--ink-60); }
.quiz-loading p { margin: 0; }
.quiz-loading-orb { position: relative; inline-size: 84px; block-size: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--sky); }
.quiz-loading-orb::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--sky-40); animation: orb 1.8s var(--ease-out) infinite; }
@keyframes orb { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }

/* Progress */
.quiz-progress-wrap { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-5); }
.quiz-progress { flex: 1; block-size: 4px; border-radius: 4px; background: var(--paper-3); overflow: hidden; }
.quiz-progress-bar { block-size: 100%; background: var(--sky-deep); transform-origin: right; transform: scaleX(0); transition: transform var(--d-3) var(--ease-out); }
.quiz-counter { font-size: var(--t-sm); color: var(--ink-60); }

/* Card */
.quiz-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--shadow-1); }
.quiz-card.enter .quiz-question { animation: q-in var(--d-3) var(--ease-out) both; }
.quiz-card.enter .quiz-option { animation: q-in var(--d-3) var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 60ms); }
.quiz-question { font-family: var(--f-read); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.8; margin: 0 0 var(--s-5); text-wrap: pretty; }
.quiz-options { display: grid; gap: var(--s-3); }
.quiz-option {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: var(--s-4);
  inline-size: 100%; padding: var(--s-3) var(--s-4); text-align: start;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--paper);
  transition: border-color var(--d-2), background var(--d-2), transform var(--d-2) var(--ease-out);
}
.quiz-option:hover:not(:disabled) { border-color: var(--sky); background: var(--white); transform: translateX(-3px); }
.quiz-option:disabled { cursor: default; }
.quiz-option-letter { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--white); border: 1px solid var(--line-2); font-family: var(--f-read); font-weight: 700; color: var(--sky-ink); transition: background var(--d-2), color var(--d-2), border-color var(--d-2); }
.quiz-option-text { font-family: var(--f-read); font-size: 1.04rem; line-height: 1.8; color: var(--ink-80); }
.quiz-option-mark { inline-size: 24px; block-size: 24px; border-radius: 50%; }
.quiz-option.correct { border-color: var(--ok); background: color-mix(in oklab, var(--ok) 9%, var(--paper)); }
.quiz-option.correct .quiz-option-letter { background: var(--ok); border-color: var(--ok); color: var(--white); }
.quiz-option.correct .quiz-option-mark { background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 15px no-repeat; animation: pop var(--d-3) var(--ease-out); }
.quiz-option.wrong { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 7%, var(--paper)); animation: shake 380ms var(--ease-io); }
.quiz-option.wrong .quiz-option-letter { background: var(--danger); border-color: var(--danger); color: var(--white); }
.quiz-option.wrong .quiz-option-mark { background: var(--danger) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center / 13px no-repeat; }
.quiz-option:disabled:not(.correct):not(.wrong) { opacity: .55; }
@keyframes pop { from { transform: scale(.4); } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

.quiz-explanation { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-2); font-size: 1rem; line-height: 1.95; animation: q-in var(--d-3) var(--ease-out); }
.quiz-explanation.correct { background: color-mix(in oklab, var(--ok) 9%, var(--paper)); }
.quiz-explanation.wrong { background: color-mix(in oklab, var(--danger) 7%, var(--paper)); }
.quiz-explanation strong { font-family: var(--f-ui); }
.quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); min-block-size: 64px; }
.quiz-keys { display: inline-flex; align-items: center; gap: .45em; font-family: var(--f-ui); font-size: var(--t-xs); }
@media (hover: none) { .quiz-keys { visibility: hidden; } }

/* Results */
.quiz-results-card { display: grid; justify-items: center; gap: var(--s-5); text-align: center; padding: var(--s-8) var(--s-5); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); }
.quiz-score { --c: var(--sky-deep); position: relative; inline-size: 180px; block-size: 180px; border-radius: 50%; display: grid; place-content: center; gap: 4px; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--paper-3) 0); animation: q-in var(--d-4) var(--ease-out); }
.quiz-score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--white); }
.quiz-score > * { position: relative; }
.quiz-score.excellent { --c: var(--ok); }
.quiz-score.needs-work { --c: var(--warn); }
.quiz-score-pct { font-family: var(--f-display); font-size: 4.4rem; line-height: .7; }
.quiz-score-label { font-size: var(--t-sm); color: var(--ink-60); }
.quiz-result-message { margin: 0; font-family: var(--f-read); font-weight: 700; font-size: 1.25rem; }
:lang(en) .quiz-option:hover:not(:disabled) { transform: translateX(3px); }