/* Quiz screens (8-14): option buttons, answer modals, wrong-answer shake. */

/* Scoped by structure, not by screen id, so it applies to any quiz's option
   buttons automatically. screen8/10's plain "next" buttons and every answer
   modal's next button are left out on purpose - they keep the Mario font,
   which is also the ñ-rendering joke for screen8's button specifically. */
.quiz-options .next-btn {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 1px;
  font-size: 1.3rem;
}

.answer-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}

.answer-modal.visible {
  opacity: 1;
  pointer-events: auto;
}

/* The box goes fully opaque first, then the text/image/button fade in on
   top of it - otherwise both layers were visible together mid-transition. */
.answer-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.answer-modal.visible .answer-modal__content {
  opacity: 1;
  transition-delay: 1s;
}

.modal-img {
  max-width: 50vw;
  max-height: 30vh;
}

.compare-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.compare-images figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.compare-images .modal-img {
  max-width: 35vw;
  max-height: 25vh;
}

.image-caption {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #000000;
}

/* Used by modals with a lot going on (text + a compared image pair + more
   text) so everything fits without the .answer-modal scrollbar kicking in. */
.answer-modal__content--compact {
  gap: 0.75rem;
  padding: 1.5rem;
}

.answer-modal__content--compact .message {
  font-size: 1.7rem;
}

.answer-modal__content--compact .message--small {
  font-size: 1.2rem;
}

.answer-modal__content--compact .compare-images .modal-img {
  max-width: 26vw;
  max-height: 18vh;
}

.answer-modal__content--compact .image-caption {
  font-size: 0.95rem;
}

/* Plain (non--compact) answer modals never had a mobile size reduction at
   all, unlike every plain-text .screen's .message - at the full 2.5rem
   desktop size, on a short mobile viewport (browser chrome eating into the
   visible height) the text + .modal-img + second message + button filled
   the whole screen with barely any breathing room between them (confirmed
   from screenshots). Sized down the same way the --compact variant already
   is, plus a smaller .modal-img and tighter gap to match. */
@media (max-width: 600px) {
  .answer-modal__content {
    gap: 1rem;
    padding: 1.5rem;
  }

  .answer-modal__content .message {
    font-size: 1.6rem;
  }

  .answer-modal__content .message--small {
    font-size: 1.15rem;
  }

  .modal-img {
    max-height: 22vh;
  }
}

@keyframes wrong-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-8px);
  }
  80% {
    transform: translateX(8px);
  }
}

/* !important: this has to outrank the #screenN .next-btn color/border rules
   above, which are ID-scoped and would otherwise always win over a
   class-only selector regardless of how many classes it has. */
.quiz-option.wrong {
  animation: wrong-shake 0.5s ease;
  background: #4d0000 !important;
  border-color: #4d0000 !important;
  color: #ffffff !important;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(90vw, 22rem);
}

.quiz-option {
  width: 100%;
}