/* The Great House Quiz — page-scoped styles, layered on top of site.css. */

.quiz-wrap { max-width: 760px; }

.quiz-head { text-align: center; margin-bottom: 34px; }
.quiz-head h1 { font-family: var(--fancy); color: var(--gold); font-size: clamp(28px, 5vw, 44px); margin: 8px 0 14px; }
.quiz-sub { color: var(--muted); font-size: 16px; max-width: 620px; margin: 0 auto; }

/* The verdict really is written by a model per submission (see /api/quiz/house) —
   this badge is a factual label, not a marketing flourish. */
.ai-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: rgba(227,193,104,0.14); border: 1px solid rgba(227,193,104,0.4);
  color: var(--gold-bright); font-size: 11px; letter-spacing: 0.16em;
  vertical-align: middle;
}

.quiz-progress-track {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.08);
  overflow: hidden; margin: 0 0 28px;
}
.quiz-progress-bar { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .25s ease; }
.quiz-progress-label { text-align: center; color: var(--muted); font-size: 13px; margin: -18px 0 24px; letter-spacing: .5px; }

.quiz-card {
  background: var(--glass); border: 1px solid var(--line); border-radius: 16px;
  padding: 28px; backdrop-filter: blur(6px);
}
.quiz-prompt { font-family: var(--fancy); font-size: clamp(20px, 3.2vw, 26px); color: #fff; margin: 0 0 20px; line-height: 1.3; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: block; width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); padding: 14px 18px; transition: border-color .15s, background .15s, transform .1s;
}
.quiz-option:hover { border-color: var(--gold); background: rgba(227,193,104,.06); transform: translateY(-1px); }
.quiz-option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.quiz-option.picked { border-color: var(--gold); background: rgba(227,193,104,.12); }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.quiz-nav .muted { font-size: 13px; }

.quiz-loading { text-align: center; padding: 40px 0; color: var(--muted); }

.quiz-result { text-align: center; }
.quiz-sigil-band {
  width: 100%; height: 8px; border-radius: 999px; margin: 0 auto 22px; max-width: 220px;
}
.quiz-house-name { font-family: var(--fancy); font-size: clamp(30px, 6vw, 48px); margin: 0 0 4px; }
.quiz-house-words { font-style: italic; color: var(--muted); margin: 0 0 4px; font-size: 18px; }
.quiz-house-region { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.quiz-sigil-desc { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.quiz-verdict {
  text-align: left; background: rgba(255,255,255,.03); border-left: 3px solid var(--gold);
  border-radius: 4px; padding: 18px 22px; margin: 0 0 22px; font-size: 16px; line-height: 1.6;
}
.quiz-ai-note { color: var(--muted); font-size: 12.5px; margin: -14px 0 22px; text-align: left; }
.quiz-runner-up { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.quiz-result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.quiz-error { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   PALETTE PASS — the house quiz onto the site's tokens. Same corrections as
   the tools and fan stylesheets: real surfaces from the ramp instead of
   translucent white, frost for interaction, the section tone (HEATHER) for
   the selected state, and gold kept for the one thing gold is now for.
   ═══════════════════════════════════════════════════════════════════════════ */
.quiz-head h1, .quiz-house-name { color: var(--gold-500); }
.quiz-card, .quiz-option, .quiz-verdict {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--hair);
  box-shadow: var(--lift), var(--e1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.quiz-verdict { border-left: 3px solid var(--tone); }
.quiz-prompt { color: var(--text-strong); }
.quiz-progress-track { background: var(--surface-3); }
.quiz-progress-bar { background: linear-gradient(90deg, var(--tone-edge), var(--tone)); }
.quiz-option:hover { border-color: var(--frost-600); background: var(--surface-3); }
.quiz-option.picked { border-color: var(--tone); background: var(--tone-wash); }
.quiz-option:focus-visible { outline: 2px solid var(--frost-300); outline-offset: 2px; }
/* The badge states a fact about how the verdict was written; it is a label,
   not an accent, so it takes the section tone rather than the brand's gold. */
.ai-badge { background: var(--tone-wash); border: 1px solid var(--tone-edge); color: var(--tone); }

/* THE STATIC HALF OF THE PAGE (R4a): how the quiz works, the houses it can
   place you in and what happens to your answers, in text a crawler and a
   no-script reader can use. Set apart from the app above by a rule, the way
   the fan wings set off their own static blocks. Tokens only. */
.quiz-static { border-top: 1px solid var(--hair); margin-top: var(--s6); padding-top: var(--s5); }
.quiz-static h2:first-child { margin-top: 0; }