/* Quiz pages: picture-tile answers and a shareable result card. */
.quiz-step { min-height: calc(100dvh - 140px); }
.quiz-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 32px; }
.quiz-progress span { font: 12px/1.5 var(--f-display); }
.quiz-progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 28px); gap: 4px; }
.quiz-progress li { height: 14px; background: var(--white); border: 2px solid var(--navy); }
.quiz-progress li.is-done { background: var(--yellow); }
.quiz h1 { font-size: clamp(18px, 3.4vw, 34px); line-height: 1.45; margin-bottom: 28px; max-width: 30ch; }
.quiz-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.quiz-answer { display: grid; justify-items: center; align-content: start; gap: 12px; padding: 22px 12px; min-height: 100%; background: var(--white); color: var(--navy); border: var(--border); box-shadow: var(--shadow-sm); text-align: center; font: inherit; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.quiz-answer:hover, .quiz-answer:focus-visible { background: var(--yellow); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--navy); }
.quiz-answer:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.quiz-answer:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }
.quiz-answer img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }
.quiz-answer span { font-size: 15px; line-height: 1.4; }
.quiz-back { margin-top: 28px; }
.quiz-back a { font: 12px/1.5 var(--f-display); color: var(--navy); }

.quiz-result { background: var(--navy); padding-block: clamp(12px, 3vh, 40px); }
.quiz-result-card { max-width: 1040px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(14px, 3vw, 36px); padding: clamp(14px, 3vw, 32px); box-shadow: 8px 8px 0 var(--yellow); }
.quiz-result-story, .quiz-result-actions { display: grid; align-content: start; gap: 10px; min-width: 0; }
.quiz-result-story .eyebrow { margin: 0; }
.quiz-result-heading { display: flex; align-items: center; gap: 14px; }
.quiz-result-sprite { flex: none; width: clamp(48px, 9vw, 96px); height: clamp(48px, 9vw, 96px); object-fit: contain; image-rendering: pixelated; }
.quiz-result-card h1 { margin: 0; font-size: clamp(16px, 3vw, 30px); line-height: 1.3; text-shadow: 3px 3px 0 var(--yellow); }
.quiz-result-tagline { margin: 6px 0 0; font: clamp(19px, 2.4vw, 26px)/1.1 var(--f-score); color: var(--blue); }
.quiz-result-story > p:not(.eyebrow) { margin: 0; font-size: clamp(14px, 1.5vw, 16px); line-height: 1.45; }
.quiz-result-story > .quiz-result-tip { padding: 8px 12px; background: var(--cream); border: 2px dashed var(--navy); }
.quiz-result-actions h2 { font-size: clamp(12px, 1.6vw, 15px); line-height: 1.4; margin: 0; }
.quiz-result-pitch { margin: 2px 0 0; font-size: 13px; line-height: 1.4; }
.quiz-links, .quiz-tutor-link { margin: 0; font-size: 13px; }

@media (max-width: 760px) {
  .quiz-result-card { grid-template-columns: minmax(0, 1fr); }
  .quiz-result-pitch { display: none; }
  .quiz-result-actions:has([data-share-mode="native"]) h2 { display: none; }
}

@media (max-width: 600px) {
  .quiz-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quiz-answer:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 420px) {
  .quiz-step { padding-top: 32px; }
  .quiz-answer { padding: 14px 8px; }
  .quiz-answer img { width: 44px; height: 44px; }
  .quiz-answer span { font-size: 14px; }
}