.answer-feedback {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: 16px; background: transparent;
  touch-action: none; overscroll-behavior: contain;
}
.answer-feedback-content {
  display: grid; justify-items: center; width: min(100%, 370px);
  padding: 0; border: 0; background: transparent; box-shadow: none;
  animation: feedback-pop 120ms ease-out both;
}
.answer-feedback img { display: block; width: min(100%, 56svh); height: auto; aspect-ratio: 1; object-fit: contain; }
/* Keep the empty slot in the layout, including while an image or the next
   tournament question is loading. Neither the old card nor its backing shows. */
.card-stage.is-awaiting-next,
.competition-card-stage.is-awaiting-next,
.card-stage.is-awaiting-next *,
.competition-card-stage.is-awaiting-next *,
.card-stage.is-awaiting-next + .swipe-hint { visibility: hidden; pointer-events: none; transition: none; }
.competition-clock.is-paused { color: var(--brand-purple); background: var(--brand-soft); }
.answer-review { width: 100%; margin-top: 18px; text-align: left; }
.answer-review h2 { margin: 0 0 8px; color: var(--brand-deep); font-size: var(--type-heading-size); font-weight: var(--type-heading-weight); }
.answer-review > p { margin: 0 0 12px; color: var(--muted); }
.answer-review-list { max-height: 65svh; min-height: 180px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; border: 1px solid var(--line); border-radius: 20px; background: #fff; padding: 0 14px; }
.review-item { padding: 18px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.review-item:last-child { border-bottom: 0; }
.review-item h3 { margin: 0 0 10px; font-size: var(--type-body-size); font-weight: var(--type-heading-weight); }
.review-item.is-correct h3 { color: var(--fact-700); }
.review-item.is-wrong h3 { color: var(--fake-700); }
.review-item.is-timeout h3 { color: #885600; }
.review-item p { margin: 10px 0; }
.review-statement, .review-choices { font-weight: var(--type-heading-weight); }
.review-item a { color: var(--fact-700); }
@keyframes feedback-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .answer-feedback-content { animation: none; } }