/* O percurso é o elemento lúdico da rodada; leitura e alternativas têm espaço. */
.quiz-play { margin: 0 0 1.5rem; padding: 1.15rem 1.4rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.quiz-play-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.quiz-play-position { display: flex; align-items: center; gap: .8rem; }
.quiz-play-position > span { color: var(--muted); font-size: .9rem; }
.quiz-play-position > strong { font-size: 1.55rem; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; }
.quiz-play-position small { color: var(--muted); font-size: .9rem; font-weight: 400; }
.quiz-play-score { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; font-size: .85rem; }
.quiz-play-score > div { display: flex; align-items: center; gap: .4rem; }
.quiz-play-score svg { width: 18px; height: 18px; color: var(--good); }
.quiz-play-score strong { font-size: 1.08rem; color: var(--text); }
.quiz-play-streak { color: var(--muted); }
.quiz-play-streak.is-on { color: var(--gold); }
.quiz-play-streak.is-on svg { color: var(--gold); }
.quiz-play-path { display: grid; grid-template-columns: repeat(var(--quiz-stops), minmax(0, 1fr)); list-style: none; padding: 3.1rem 0 .3rem; margin: .3rem -.25rem 0; }
.quiz-play-path.has-1-stops { --quiz-stops: 1; }
.quiz-play-path.has-2-stops { --quiz-stops: 2; }
.quiz-play-path.has-3-stops { --quiz-stops: 3; }
.quiz-play-path.has-4-stops { --quiz-stops: 4; }
.quiz-play-path.has-5-stops { --quiz-stops: 5; }
.quiz-play-path.has-6-stops { --quiz-stops: 6; }
.quiz-play-path.has-7-stops { --quiz-stops: 7; }
.quiz-play-path.has-8-stops { --quiz-stops: 8; }
.quiz-play-path.has-9-stops { --quiz-stops: 9; }
.quiz-play-path.has-10-stops { --quiz-stops: 10; }
.quiz-play-stop { position: relative; display: grid; place-items: center; min-width: 0; }
.quiz-play-stop::before { content: ""; position: absolute; top: calc(50% - 1px); left: 50%; width: 100%; height: 2px; background: var(--line); }
.quiz-play-stop:last-child::before { display: none; }
.quiz-play-stop.is-done::before { background: var(--good); }
.quiz-play-dot { position: relative; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--muted); font-size: .7rem; line-height: 1; }
.quiz-play-dot svg { width: 16px; height: 16px; }
.quiz-play-stop.is-done .quiz-play-dot { background: var(--good); border-color: var(--good); color: var(--ink); }
.quiz-play-stop.is-review .quiz-play-dot { border-color: var(--gold); color: var(--gold); font-size: 1.1rem; }
.quiz-play-stop.is-current .quiz-play-dot { border: 2px solid var(--good); color: var(--good); box-shadow: 0 0 0 4px color-mix(in srgb, var(--good) 12%, transparent); }
.quiz-play-traveler { position: absolute; width: 44px; height: 44px; object-fit: contain; bottom: calc(100% + 6px); z-index: 1; animation: quiz-play-arrive .28s ease-out both; }
.quiz-play-caption { display: flex; flex-wrap: wrap; gap: .35rem .85rem; margin-top: .65rem; color: var(--muted); font-size: .77rem; }
.quiz-play-feedback { position: relative; display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--good) 6%, var(--panel)); animation: quiz-play-response .22s ease-out; }
.quiz-play-feedback.is-review { background: color-mix(in srgb, var(--gold) 6%, var(--panel)); }
.quiz-play-feedback-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--good) 45%, var(--line)); color: var(--good); background: var(--bg); }
.quiz-play-feedback.is-review .quiz-play-feedback-icon { color: var(--gold); border-color: var(--gold); }
.quiz-play-feedback-icon svg { width: 22px; height: 22px; }
.quiz-play-feedback strong { font-weight: 650; }
.quiz-play-feedback p { margin: .15rem 0 0; font-size: .85rem; color: var(--muted); }
.quiz-play-sparks { position: absolute; right: 1.2rem; top: 50%; width: 38px; height: 38px; transform: translateY(-50%); }
.quiz-play-sparks i { position: absolute; width: 5px; height: 5px; background: var(--good); border-radius: 1px; animation: quiz-play-spark .7s ease-out both; }
.quiz-play-sparks i:nth-child(1) { left: 5px; top: 5px; --spark-x: -8px; --spark-y: -10px; }
.quiz-play-sparks i:nth-child(2) { right: 3px; top: 8px; background: var(--gold); --spark-x: 8px; --spark-y: -7px; }
.quiz-play-sparks i:nth-child(3) { left: 9px; bottom: 5px; background: var(--gold); --spark-x: -6px; --spark-y: 8px; }
.quiz-play-sparks i:nth-child(4) { right: 5px; bottom: 8px; --spark-x: 10px; --spark-y: 9px; }
.quiz-shell .answer { border-radius: 12px; border-width: 1px; }
.quiz-shell .answer .letter, .quiz-play-review .answer .letter { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; font-weight: 650; background: color-mix(in srgb, var(--answer-tint, var(--good)) 11%, var(--panel)); border-color: color-mix(in srgb, var(--answer-tint, var(--good)) 45%, var(--line)); color: var(--text); }
.quiz-shell .answer:nth-child(4n + 1), .quiz-play-review .answer:nth-child(4n + 1) { --answer-tint: #98b8cc; }
.quiz-shell .answer:nth-child(4n + 2), .quiz-play-review .answer:nth-child(4n + 2) { --answer-tint: #cfb289; }
.quiz-shell .answer:nth-child(4n + 3), .quiz-play-review .answer:nth-child(4n + 3) { --answer-tint: #b5a3cc; }
.quiz-shell .answer:nth-child(4n + 4), .quiz-play-review .answer:nth-child(4n + 4) { --answer-tint: #9bc5b7; }
.quiz-shell .answer.selected { border-color: var(--good); box-shadow: inset 3px 0 0 var(--good); }
.quiz-shell .answer.correct, .quiz-play-review .answer.correct { opacity: 1; border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--panel)); }
.quiz-shell .answer.wrong, .quiz-play-review .answer.wrong { opacity: 1; border-color: var(--error); background: color-mix(in srgb, var(--error) 8%, var(--panel)); }
.quit-round-dialog { max-width: 440px; }
.quit-round-dialog .dialog-head h2 { margin: .25rem 0 0; }
.quit-round-dialog .actions { justify-content: flex-end; }
.quit-round-status:empty { margin: 0; }
.quit-round-status.is-error { color: var(--error); }
.quiz-play-review { margin-top: 1.8rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.quiz-play-review-intro { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: .8rem .9rem; }
.quiz-play-review-intro > div { min-width: 0; }
.quiz-play-review-intro h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.quiz-play-review-intro p { margin: 0; color: var(--muted); font-size: .9rem; }
.quiz-play-review-intro > button { grid-column: 2; justify-self: start; border-color: var(--good); color: var(--good); }
.quiz-play-review-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 12px; color: var(--gold); background: var(--panel); }
.quiz-play-review-symbol svg { width: 24px; height: 24px; }
.quiz-play-review-note { margin: .9rem 0 0; font-size: .8rem; color: var(--muted); }
.quiz-play-review-question { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.quiz-play-review-counter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .85rem; color: var(--muted); font-size: .85rem; }
.quiz-play-review-counter > button { padding: .35rem .5rem; font-size: .8rem; }
.quiz-play-review-question h3 { font-size: 1.15rem; font-weight: 550; line-height: 1.5; }
.quiz-play-review-question .answers { grid-template-columns: 1fr; }
.quiz-play-review-question .answer { text-align: left; min-width: 0; }
.quiz-play-review-question .answer > span:last-child { overflow-wrap: anywhere; }
.quiz-play-review-question .feedback { margin: 1rem 0; }
.quiz-play-review-question .feedback h4 { margin: 0 0 .5rem; font-size: 1rem; }
.quiz-play-review-finished { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.quiz-play-review-finished h3 { margin: 0 0 .25rem; }
.quiz-play-review-finished p { margin: 0; color: var(--muted); font-size: .9rem; }
@keyframes quiz-play-arrive { from { transform: translateY(-5px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
@keyframes quiz-play-response { from { opacity: .4; } to { opacity: 1; } }
@keyframes quiz-play-spark { from { opacity: 1; transform: translate(0, 0) rotate(0); } to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(90deg); } }
@media (max-width: 600px) {
  .quiz-play { padding: 1rem .8rem .8rem; }
  .quiz-play-heading { align-items: flex-start; gap: .8rem; }
  .quiz-play-position { display: block; }
  .quiz-play-position > span { display: block; font-size: .8rem; }
  .quiz-play-score { display: grid; gap: .3rem; justify-items: start; font-size: .77rem; }
  .quiz-play-path { padding-top: 2.85rem; }
  .quiz-play-traveler { width: 36px; height: 36px; bottom: calc(100% + 6px); }
  .quiz-play-dot { width: 20px; height: 20px; font-size: .6rem; }
  .quiz-play-dot svg { width: 14px; height: 14px; }
  .quiz-play-caption { font-size: .72rem; align-items: flex-start; }
  .quiz-play-caption > span:first-child { white-space: nowrap; }
  .quiz-play-caption > span:last-child { max-width: 22ch; }
  .quiz-play-feedback { padding: .85rem; gap: .6rem; }
  .quiz-play-feedback strong { font-size: .95rem; }
  .quiz-play-feedback p { font-size: .8rem; }
  .quiz-play-sparks { display: none; }
  .quiz-play-review { padding: 1rem; }
  .quiz-play-review-intro { gap: .75rem; }
  .quiz-play-review-intro > button { grid-column: 1 / -1; }
  .quiz-play-review-intro h2 { font-size: 1.1rem; }
  .quiz-play-review-counter { align-items: flex-start; }
  .quiz-play-review-counter > span { padding-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-play-traveler, .quiz-play-feedback, .quiz-play-sparks i { animation: none; }
  .quiz-play-sparks { display: none; }
}