/* ============================================================
   Quiz overlay — full-screen iframe wrapping the web /quiz page
   so the result persists to the same user profile across web+app.
   ============================================================ */
.quiz-overlay {
  position: fixed;
  inset: 0;
  background: var(--app-cream-1, #faf3e3);
  z-index: 240;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.quiz-overlay.open { display: flex; }

.quiz-overlay__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
  background: var(--app-card, #fff);
  border-bottom: 1px solid var(--app-border-soft, #f0e6d0);
}
.quiz-overlay__title {
  font-weight: 800;
  color: var(--app-text-strong, #0d2846);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.quiz-overlay__close {
  background: transparent;
  border: 1px solid var(--app-border, #e8dfc8);
  color: var(--app-text, #1f2d3d);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.quiz-overlay__close:active { transform: scale(0.97); }

.quiz-overlay__frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: var(--app-cream-1, #faf3e3);
}

.quiz-overlay__loading {
  position: absolute;
  inset: 56px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--app-muted, #8a7e64);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.quiz-overlay__loading.fade { opacity: 0; }
.quiz-overlay__loading .spinner {
  width: 30px; height: 30px;
  border: 3px solid var(--app-border, #e8dfc8);
  border-top-color: var(--app-navy-2, #1f4c84);
  border-radius: 50%;
  animation: quizSpin 0.9s linear infinite;
}
@keyframes quizSpin { to { transform: rotate(360deg); } }