/* Keep quiz typography and layout independent of the legacy quiz classes. */
dialog[data-dialog-view="quiz"] {
  box-sizing: border-box;
  width: min(680px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  padding: 0;
  border-radius: 20px;
  overflow: auto;
}
dialog[data-dialog-view="quiz"] > .dialog-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  gap: 14px;
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
dialog[data-dialog-view="quiz"] .dialog-heading h2 {
  min-width: 0;
  font-size: 18px;
  line-height: 1.5;
  word-break: keep-all;
}
dialog[data-dialog-view="quiz"] #dialog-close { flex: 0 0 36px; }
dialog[data-dialog-view="quiz"] > #dialog-body { min-width: 0; padding: 20px; }

.quiz-intro { max-width: 760px; margin: 26px auto; padding: 36px 24px; text-align: center; }
.quiz-intro .feature-symbol { margin: 0 auto 15px; }
.quiz-intro h2 { margin: 8px 0 12px; font-size: 23px; line-height: 1.5; word-break: keep-all; }
.quiz-intro > p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.quiz-intro-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; }
.quiz-intro-facts > div { min-width: 0; padding: 8px; border-right: 1px solid var(--line); }
.quiz-intro-facts > div:last-child { border: 0; }
.quiz-intro-facts b { display: block; margin-bottom: 7px; font-size: 17px; color: #798965; }
.quiz-intro-facts span { display: block; font-size: 11px; line-height: 1.65; color: #928c7b; word-break: keep-all; }
.quiz-intro > .primary { min-width: 210px; }
.quiz-intro > .muted { margin-top: 14px; font-size: 11px; }

.quiz-form-intro { margin-bottom: 18px; }
.quiz-form-intro b { font-size: 13px; font-weight: 600; color: #68775b; }
.quiz-form-intro p { margin: 6px 0 0; font-size: 12px; line-height: 1.75; color: #8d8877; word-break: keep-all; }
.quiz-form, .quiz-question-list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 14px; }
.quiz-question-card {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid #e6e6da;
  border-radius: 14px;
  background: #f8f8f0;
  text-align: left;
}
.quiz-question-card [lang="ja"] {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  letter-spacing: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.quiz-question-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.quiz-question-number { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 8px; background: #e6ebd8; color: #71815b; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quiz-type-label { font-size: 11px; font-weight: 600; line-height: 1.5; color: #818a70; }
.quiz-question-total { margin-left: auto; font-size: 11px; color: #aaa591; font-variant-numeric: tabular-nums; }
.quiz-reading-prompt { display: block; width: 100%; min-width: 0; margin-bottom: 19px; }
.quiz-japanese-term { display: block; width: auto; height: auto; margin: 0; padding: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 26px; font-weight: 600; line-height: 1.55; color: #4f5846; }
.quiz-hiragana { display: block; margin: 4px 0 0; font-family: 'Noto Sans JP', sans-serif; font-size: 14px; line-height: 1.7; color: #8c8978; }
.quiz-example-prompt { display: block; width: 100%; margin: 0 0 14px; font-family: 'Noto Sans JP', sans-serif; font-size: 18px; line-height: 1.95; color: #535a4b; white-space: pre-wrap; }
.quiz-example-target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-bottom: 20px; padding: 12px 14px; border-radius: 9px; background: #f3f5ec; }
.quiz-example-target > span { font-size: 11px; color: #7b866e; }
.quiz-example-target .quiz-japanese-term { min-width: 0; overflow-wrap: anywhere; font-size: 22px; }
.quiz-answer-label { display: block; margin: 0 0 8px; font-size: 12px; line-height: 1.6; color: #88826f; }
.quiz-form .quiz-text-answer { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 11px 13px; border: 1px solid #dbdece; border-radius: 9px; background: #fffefa; font: inherit; font-size: 16px; line-height: 1.5; color: #4f5846; }
.quiz-form .quiz-text-answer::placeholder { font-size: 13px; color: #aaa592; }
.quiz-form .quiz-text-answer:focus { outline: none; border-color: #9ba984; box-shadow: 0 0 0 3px #9bab8026; }
.quiz-choice-meaning { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.65; color: #555b4c; word-break: keep-all; overflow-wrap: anywhere; }
.quiz-ask { margin: 0 0 14px; font-size: 12px; line-height: 1.7; color: #918b77; word-break: keep-all; }
.quiz-choice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: 9px; }
.quiz-choice { box-sizing: border-box; display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 50px; margin: 0; padding: 12px; border: 1px solid #dfdfd2; border-radius: 10px; background: #fffefa; cursor: pointer; }
.quiz-choice:hover { border-color: #bac6a5; background: #fbfcf5; }
.quiz-choice:has(input:checked) { border-color: #94a67a; background: #edf2e3; }
.quiz-choice:focus-within { outline: 2px solid #a5b88b; outline-offset: 2px; }
.quiz-choice > input[type="radio"] { appearance: auto; flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 0; padding: 0; border: 0; box-shadow: none; accent-color: #748b5a; }
.quiz-choice > span { display: block; min-width: 0; font-family: 'Noto Sans JP', sans-serif; font-size: 16px; line-height: 1.65; color: #555d4b; }
.quiz-form-footer { padding-top: 3px; }
.quiz-form-footer .form-error { margin: 0 0 10px; }
.quiz-form-footer .form-error:empty { margin: 0; }
.quiz-form-footer > button { min-height: 48px; font-size: 14px; }

.quiz-loading { display: grid; justify-items: center; gap: 12px; min-height: 200px; padding: 30px 12px; text-align: center; color: #918b77; }
.quiz-loading > .feature-symbol { margin-bottom: 3px; }
.quiz-loading p { margin: 0; font-size: 13px; line-height: 1.8; }
.quiz-loading small { font-size: 11px; color: #a39d89; }

.quiz-result-hero { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 18px; min-height: 180px; padding: 20px; border-radius: 15px; }
.quiz-result-hero.is-passed { background: linear-gradient(120deg, #f1f4e7, #faf7e8); }
.quiz-result-hero.is-not-passed { background: linear-gradient(120deg, #f7f0e9, #f8f4e8); }
.quiz-result-copy { min-width: 0; }
.quiz-result-copy .eyebrow { margin-bottom: 8px; }
.quiz-result-copy h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.4; color: #646b52; word-break: keep-all; }
.quiz-result-copy p { margin: 0 0 12px; font-size: 12px; line-height: 1.75; color: #918a75; word-break: keep-all; }
.quiz-result-copy > strong { display: block; font-size: 36px; line-height: 1.2; color: #89966f; }
.quiz-result-copy > strong small { margin-left: 4px; font-size: 15px; }
.quiz-result-art { position: relative; display: grid; place-items: center; min-width: 0; }
.quiz-result-art:before { position: absolute; content: ""; width: 124px; height: 124px; border-radius: 50%; background: #fff9e4; }
.quiz-result-art img { position: relative; display: block; width: 100%; height: 170px; object-fit: contain; filter: drop-shadow(0 5px 6px #796a3b1a); }
.quiz-result-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0; padding: 12px; border: 1px solid #eeecdf; border-radius: 10px; color: #827c68; font-size: 13px; }
.quiz-result-gold { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 8px; background: #f8efcf; color: #a18c50; font-size: 13px; white-space: nowrap; }
.quiz-result-gold .coin { width: 17px; height: 17px; font-size: 9px; }
.quiz-result-note { margin: 0 0 18px; color: #968d79; font-size: 12px; line-height: 1.8; word-break: keep-all; }
.quiz-answer-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.quiz-solution { min-width: 0; padding: 14px; border: 1px solid #ece9dc; border-radius: 11px; background: #fffef9; }
.quiz-solution.is-correct { border-color: #e3e9d7; background: #f7f8f0; }
.quiz-solution-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #898f73; font-size: 11px; }
.quiz-solution-heading > b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #e9ecdd; font-size: 10px; }
.quiz-solution.is-incorrect .quiz-solution-heading { color: #aa8277; }
.quiz-solution.is-incorrect .quiz-solution-heading > b { background: #f3e8e2; }
.quiz-solution > strong { display: block; font-family: 'Noto Sans JP', sans-serif; font-size: 17px; font-weight: 500; line-height: 1.7; color: #565b4d; overflow-wrap: anywhere; }
.quiz-solution > strong small { font-size: 12px; color: #a49c85; }
.quiz-solution > p { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; margin: 7px 0 0; color: #797665; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.quiz-solution > p span { color: #a09a87; }
.quiz-equivalent-feedback { display: block; margin-top: 10px; padding: 9px 10px; border-radius: 7px; background: #f4efdc; color: #978450; font-size: 11px; line-height: 1.8; }
.quiz-result-close { margin-top: 18px; min-height: 48px; }
@media (max-width: 520px) {
  dialog[data-dialog-view="quiz"] { border-radius: 16px; }
  dialog[data-dialog-view="quiz"] > .dialog-heading { padding: 14px 16px; gap: 10px; }
  dialog[data-dialog-view="quiz"] .dialog-heading h2 { font-size: 16px; }
  dialog[data-dialog-view="quiz"] > #dialog-body { padding: 16px 14px; }
  .quiz-intro { padding: 28px 16px; }
  .quiz-intro h2 { font-size: 20px; }
  .quiz-intro-facts b { font-size: 15px; }
  .quiz-intro-facts span { font-size: 10px; }
  .quiz-question-card { padding: 15px 14px; }
  .quiz-question-heading { margin-bottom: 14px; }
  .quiz-japanese-term { font-size: 24px; }
  .quiz-example-prompt { font-size: 17px; }
  .quiz-choice-list { grid-template-columns: minmax(0, 1fr); }
  .quiz-choice { min-height: 50px; }
  .quiz-result-hero { grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; padding: 16px 14px; }
  .quiz-result-copy h3 { font-size: 20px; }
  .quiz-result-copy p { font-size: 11px; }
  .quiz-result-art:before { width: 90px; height: 90px; }
  .quiz-result-art img { height: 135px; }
}