/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Personality Quiz (30問とクイック12問)
   見た目はほぼ Tailwind のクラスで書き、ここには Tailwind で書きにくいものだけを置く
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── 質問は 1 問ずつ出す (components/quiz_script.html が is-active を付け替える) ───
   登場の動きは from だけを決め、backwards にする (fortune-index.css と同じ、#272) */
.q-slide {
  display: none;
}
.q-slide.is-active {
  display: block;
  animation: quizSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes quizSlideIn {
  from { opacity: 0; transform: translateY(8px); }
}

/* ─── 5 段階の円 ───
   左から「かなり当てはまる」→「まったく当てはまらない」(LIKERT_CHOICES の順)。端ほど大きくし、
   当てはまる側はいちごの色、まん中と当てはまらない側は灰色にする (強さは円の大きさで分かる)。
   線の色は生成り色の板 (#FAF5F0) との差が 3:1 以上のもの (brand-primary 3.9・gray-500 4.5) */
.scale-option {
  position: relative;
  flex: 1;
  display: flex;
  justify-content: center;
  cursor: pointer;
  --c: #6b7280;
  --tint: #f3f4f6;
}
.scale-option:nth-child(-n+2) {
  --c: #e03e52;
  --tint: #fff1f2;
}
/* ラジオボタンは見えなくし、隣の円で選んだことを見せる (クリックは label が受ける) */
.scale-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.scale-btn {
  display: block;
  border: 2px solid var(--c);
  border-radius: 9999px;
  background: #fff;
  transition: background-color 0.2s, transform 0.2s;
}
.scale-option:nth-child(1) .scale-btn,
.scale-option:nth-child(5) .scale-btn { width: 52px; height: 52px; }
.scale-option:nth-child(2) .scale-btn,
.scale-option:nth-child(4) .scale-btn { width: 42px; height: 42px; }
.scale-option:nth-child(3) .scale-btn { width: 32px; height: 32px; }
@media (min-width: 640px) {
  .scale-option:nth-child(1) .scale-btn,
  .scale-option:nth-child(5) .scale-btn { width: 60px; height: 60px; }
  .scale-option:nth-child(2) .scale-btn,
  .scale-option:nth-child(4) .scale-btn { width: 48px; height: 48px; }
  .scale-option:nth-child(3) .scale-btn { width: 36px; height: 36px; }
}

.scale-option:hover .scale-btn {
  background: var(--tint);
}
/* 選んだ円は塗る (色だけでなく、中が埋まるかどうかでも分かる) */
.scale-option input:checked + .scale-btn {
  background: var(--c);
  transform: scale(1.08);
}
/* ラジオボタンは見えないので、キーボードで選んでいる円に枠を出す */
.scale-option input:focus-visible + .scale-btn {
  outline: 2px solid #111827;
  outline-offset: 3px;
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .q-slide.is-active {
    animation: none;
  }
  .scale-btn {
    transition: none;
  }
}