/* 診断画面専用。既存LPのスタイルへ影響しないよう .quiz-shell 配下に限定する。 */
.quiz-shell {
  position: relative;
  min-height: 100svh;
  padding: clamp(3rem, 10vw, 5rem) clamp(1.3rem, 6vw, 2.5rem);
  background:
    radial-gradient(65% 45% at 10% 10%, rgba(226,156,182,.22), transparent 70%),
    radial-gradient(65% 45% at 90% 20%, rgba(196,180,224,.22), transparent 70%),
    radial-gradient(65% 45% at 70% 90%, rgba(232,204,148,.22), transparent 70%),
    var(--ivory);
}
.quiz-shell__inner { width: min(620px, 100%); margin: 0 auto; }
.quiz-progress { margin-bottom: clamp(2rem, 8vw, 3rem); }
.quiz-progress__label {
  margin: 0 0 .7rem;
  text-align: center;
  color: var(--gold);
  font-family: var(--font-en);
  font-size: .9rem;
  letter-spacing: .18em;
}
.quiz-progress__bar { height: 3px; overflow: hidden; background: rgba(184,146,74,.2); border-radius: 3px; }
.quiz-progress__bar span {
  display: block; width: 12.5%; height: 100%;
  background: linear-gradient(90deg, var(--rose), var(--lavender), var(--gold));
  transition: width .35s ease;
}
.quiz-question { text-align: center; animation: quizAppear .45s ease both; }
.quiz-question__text {
  margin: 0 auto clamp(1.2rem, 5vw, 1.7rem);
  color: var(--brown-title);
  font-family: var(--font-title);
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 600;
  line-height: 1.75;
}
/* 情景画像：横長比率を保ったまま、上品な縁取り＋ごく薄い影。8問とも同じ表示規格 */
.quiz-question__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto clamp(1.6rem, 6vw, 2.2rem);
  border-radius: 16px;
  border: 1px solid var(--gold-line);
  box-shadow: 0 10px 26px rgba(96, 62, 76, .14);
}
.quiz-options { display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.quiz-option {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(184,146,74,.42);
  border-radius: 14px;
  background: rgba(255,253,249,.86);
  box-shadow: 0 8px 22px rgba(96,62,76,.08);
  color: var(--ink);
  font: 500 clamp(.82rem, 3.4vw, .96rem)/1.75 var(--font-jp);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.quiz-option:hover { transform: translateY(-2px); border-color: var(--rose); box-shadow: 0 12px 26px rgba(96,62,76,.13); }
.quiz-option:active { transform: translateY(1px); }
.quiz-result { text-align: center; animation: quizAppear .55s ease both; }
.quiz-result__eyebrow {
  margin: 0 0 .5rem; color: var(--gold); font: 500 .85rem/1 var(--font-en); letter-spacing: .28em; text-transform: uppercase;
}
.quiz-result__heading {
  margin: 0 0 1.8rem; color: var(--brown-title); font: 600 clamp(1.4rem, 6vw, 2rem)/1.5 var(--font-title);
}
.result-card {
  padding: clamp(1.3rem, 5vw, 2rem);
  border: 1px solid rgba(184,146,74,.42);
  border-radius: 20px;
  background: rgba(255,253,249,.9);
  box-shadow: 0 16px 36px rgba(96,62,76,.12);
}
/* 新カード画像（枠・タイトル・クラウンまで焼き込み済み）をそのまま、
   4タイプ共通サイズ・トリミングなしで表示。結果名まで大きくスクロールしないよう幅を抑える */
.result-card__portrait {
  display: block;
  width: min(180px, 48%);
  height: auto;
  margin: 0 auto 1.3rem;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(96, 62, 76, .16);
}
.result-card__label, .result-card__keywords-title { color: var(--ink-soft); font-size: .8rem; letter-spacing: .1em; }
.result-card__name { margin: .25rem 0 0; color: var(--rose-deep); font: 600 clamp(1.45rem, 6vw, 2rem)/1.5 var(--font-title); }
.result-card__name-en { margin: 0 0 1.1rem; color: var(--gold); font: italic 1rem/1.4 var(--font-en); }
.result-card__desc { color: var(--ink-soft); font-size: .9rem; line-height: 2; }
.result-card__keywords { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .7rem 0 1.4rem; }
.result-card__keywords span { padding: .35rem .7rem; border-radius: 999px; background: rgba(199,126,146,.12); color: var(--rose-deep); font-size: .78rem; }
.quiz-secondary, .quiz-restart {
  border: 1px solid var(--gold-line); border-radius: 12px; padding: .8rem 1.2rem;
  background: rgba(255,253,249,.85); color: var(--ink); font: 500 .88rem/1.5 var(--font-jp); cursor: pointer;
}
.result-detail {
  margin-top: 1rem; padding: 1.3rem; text-align: left; border-radius: 16px;
  border: 1px solid rgba(184,146,74,.32); background: rgba(255,253,249,.72);
}
.result-detail__section + .result-detail__section { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(184,146,74,.24); }
.result-detail h3 {
  display: flex; align-items: baseline; gap: .6em;
  margin: 0 0 .7rem; color: var(--rose-deep); font-family: var(--font-title); font-size: 1rem;
}
.result-detail__no {
  font-family: var(--font-en); font-style: italic; font-size: .85rem;
  color: var(--gold); letter-spacing: .04em;
}
.result-detail li { margin-bottom: .45rem; }
.result-detail p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.result-detail ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }

/* 詳細結果の締め：招待状への導線 */
.result-invite {
  margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid rgba(184,146,74,.32);
  text-align: center;
}
.result-invite__eyebrow {
  margin: 0 0 .8rem; color: var(--rose-deep); font-family: var(--font-title);
  font-size: 1.05rem; font-weight: 600;
}
.result-invite__body {
  margin: 0 0 1.4rem; color: var(--ink-soft); font-size: .88rem; line-height: 1.95;
}
.quiz-cta {
  display: inline-block; width: min(300px, 100%);
  padding: 1rem 1.3rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #A8495C 0%, #8B3648 100%);
  border: 1px solid var(--champagne, #E3C892);
  box-shadow: 0 10px 22px rgba(150, 92, 104, .3);
  color: #FFF7F1; font-family: var(--font-title); font-weight: 600; font-size: 1.02rem; letter-spacing: .06em;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.quiz-cta:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(150, 92, 104, .34); }
.quiz-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.3rem; }
.quiz-restart { color: var(--rose-deep); }
.quiz-toast {
  position: fixed; z-index: 20; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem);
  width: min(90%, 420px); padding: .85rem 1rem; border-radius: 12px;
  background: rgba(58,46,40,.92); color: #fff; text-align: center; font: .82rem/1.5 var(--font-jp);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.quiz-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@keyframes quizAppear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .quiz-question, .quiz-result { animation: none; }
}