/* Shared visual layer for the heraldry, saints and Holy Cross quizzes. */
body.quiz-family-page {
  min-height: 100vh;
  margin: 0;
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  background:
    radial-gradient(circle at top left, rgba(180, 137, 87, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(49, 93, 116, 0.12), transparent 26%),
    linear-gradient(180deg, #f8f4ed 0%, var(--ds-bg) 52%, var(--ds-bg-deep) 100%);
}

.quiz-family-page.quiz-theme-heraldry { --family-accent: #9b7841; }
.quiz-family-page.quiz-theme-saints { --family-accent: #875f3f; }
.quiz-family-page.quiz-theme-cross { --family-accent: #315d74; }

.quiz-family-page .roman-quiz-container,
.quiz-family-page .page-shell {
  width: min(1560px, calc(100% - 28px));
  max-width: none;
  margin: 0 auto;
  padding: 26px 0 48px;
}

.quiz-family-page .quiz-shell,
.quiz-family-page .app,
.quiz-family-page .page-shell > main {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 0 44px;
}

.quiz-family-page h1,
.quiz-family-page h2,
.quiz-family-page h3 {
  color: var(--ds-text);
  font-family: var(--ds-font-heading);
  text-wrap: balance;
}

.quiz-family-page h1 {
  max-width: none;
  font-size: clamp(2.9rem, 4.6vw, 5.15rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.quiz-family-page .quiz-hero,
.quiz-family-page .intro,
.quiz-family-page #start-screen.hero,
.quiz-family-page .quiz-panel,
.quiz-family-page .quiz-card,
.quiz-family-page .image-card,
.quiz-family-page .score-card,
.quiz-family-page .quiz-shell:not(main),
.quiz-family-page .result-card {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-lg);
}

.quiz-family-page .quiz-hero,
.quiz-family-page .intro,
.quiz-family-page #start-screen.hero {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(242, 235, 222, 0.94));
}

.quiz-family-page #start-screen.hero {
  padding: clamp(30px, 4vw, 54px);
}

.quiz-family-page .quiz-hero-copy,
.quiz-family-page .intro > .hero {
  background-color: transparent;
}

.quiz-family-page .quiz-start-card,
.quiz-family-page .settings,
.quiz-family-page .feedback-card,
.quiz-family-page .quiz-head {
  border-color: var(--ds-line);
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.94), rgba(235, 226, 212, 0.82));
}

.quiz-family-page button,
.quiz-family-page select {
  min-height: 46px;
  font-family: var(--ds-font-body);
}

.quiz-family-page button {
  border-radius: var(--ds-radius-sm);
  font-weight: 800;
}

.quiz-family-page .primary,
.quiz-family-page .quiz-btn.primary,
.quiz-family-page .btn.primary,
.quiz-family-page .next-btn {
  color: #fff;
  border-color: var(--ds-primary-dark);
  background: var(--ds-primary-dark);
  box-shadow: var(--ds-shadow-sm);
}

.quiz-family-page :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--family-accent) 72%, white);
  outline-offset: 3px;
}

.quiz-family-page .progress-fill,
.quiz-family-page .progress-bar,
.quiz-family-page .progress > span {
  background: var(--family-accent);
}

@media (max-width: 720px) {
  .quiz-family-page .roman-quiz-container,
  .quiz-family-page .page-shell {
    width: min(100% - 18px, 680px);
    padding-top: 10px;
  }

  .quiz-family-page .quiz-hero,
  .quiz-family-page .intro,
  .quiz-family-page #start-screen.hero,
  .quiz-family-page .quiz-panel,
  .quiz-family-page .quiz-card,
  .quiz-family-page .image-card,
  .quiz-family-page .score-card,
  .quiz-family-page .quiz-shell:not(main),
  .quiz-family-page .result-card {
    border-radius: var(--ds-radius-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .quiz-family-page *,
  .quiz-family-page *::before,
  .quiz-family-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}