*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100dvh;
}

html:has(body.question-page-locks),
body.question-page-locks {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* 回答中は Safari chrome / overscroll のフォールバックをクイズクリームに揃える
   （通常 body はホーム用 --color-bg）。 */
body.question-page-locks {
  background: var(--color-bg-quiz);
}

/* --- マスコット & アニメーション --- */
.mascot { display: block; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pop { 0% { transform: scale(.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wig { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes portrait-feed-advance {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, calc(-1 * var(--portrait-feed-shift, 28vh)), 0); }
}

@keyframes portrait-feed-edge-fade-out {
  0%, 30% { opacity: var(--portrait-feed-edge-opacity, 1); }
  100% { opacity: 0; }
}

@keyframes portrait-feed-above-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* リザルトフェーズ：結果ボタンのフェードイン */
@keyframes finale-btns-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes twk { 0%,100% { transform: scale(.6); } 50% { transform: scale(1.1); } }
@keyframes tw { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes idlesway { 0%,84%,100% { transform: rotate(0) translateY(0); } 88% { transform: rotate(-6deg) translateY(-1px); } 92% { transform: rotate(5deg); } 96% { transform: rotate(-2deg); } }
@keyframes headshake { 0%,100% { transform: translateX(0) rotate(0); } 18% { transform: translateX(-4px) rotate(-6deg); } 38% { transform: translateX(4px) rotate(6deg); } 58% { transform: translateX(-3px) rotate(-4deg); } 78% { transform: translateX(2px) rotate(2deg); } }
@keyframes catch { 0% { transform: scaleY(.82) scaleX(1.16); } 50% { transform: scaleY(1.13) scaleX(.9); } 100% { transform: scaleY(1) scaleX(1); } }
@keyframes burst { 0% { opacity: 0; transform: rotate(var(--a)) translateX(2px) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(24px) scale(.7); } }
@keyframes flypos { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--dx), var(--dy)) rotate(45deg); } }
/* 正解演出の湧き出し（星が生まれてマスコットに当たるまで）。設計: 正解演出_検証.dc.html */
@keyframes orbspin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbpop { 0% { transform: scale(.25); } 60% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes flashring { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.8); } }
@keyframes cellglowfx { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
/* 粒子: pout が射出（進行方向の逆へ）、plinger が寿命（浮き上がり→落下フェード） */
@keyframes pout { 0% { transform: rotate(var(--a)) translateX(0) scale(.35); } 12% { transform: rotate(var(--a)) translateX(calc(var(--d) * .22)) scale(1.15); } 100% { transform: rotate(var(--a)) translateX(var(--d)) scale(1); } }
@keyframes plinger { 0% { opacity: 0; transform: translateY(0) scale(1); } 8% { opacity: 1; } 34% { opacity: .92; } 100% { opacity: 0; transform: translateY(var(--fall)) scale(.42); } }
/* --- interlude の数え上げ（DC「セッション末尾_interlude_ブラッシュアップ」4a） ---
   すべて transform / opacity のみ。適用は question_feed.css の
   `.session-portrait-feed-active .session-interlude-card …` スコープにだけ置く
   （ゴーストで走り直させないため。InterludeCount.js の注記）。 */

/* 数字のストリップ送り。終端は素の状態と同値なので、fill が外れても跳ねない。 */
@keyframes interlude-count-roll {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--count-n, 0) * -1 * var(--count-row-h))); }
}
/* 確定の 1 回だけ鳴る全尺 tick（DC fxtick .16s ease-out）。 */
@keyframes interlude-count-tick {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}
/* 途中の tick は 60ms で次の値に上書きされるので、DC の ease-out カーブの
   先頭 37.5%（.16s のうち .06s）だけを linear キーフレームへ焼き込む
   （@keyframes finaldrop と同じ手）。 */
@keyframes interlude-count-tick-cut {
  0% { transform: scale(1.350); }
  25% { transform: scale(1.297); }
  50% { transform: scale(1.248); }
  75% { transform: scale(1.203); }
  100% { transform: scale(1.161); }
}
/* DC fxring。 */
@keyframes interlude-count-ring {
  from { opacity: .85; transform: translate(-50%, -50%) scale(.25); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}
/* DC fxspark。translate(-50%,-50%) を先頭に置いて、粒の中心が --a 方向の
   直線上を進むようにする（DC は left/top のオフセットで近似していた）。 */
@keyframes interlude-count-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0.12em) scale(.3); }
  18% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--d) * .35)) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--d)) scale(.55); }
}
/* 「もん せいかい！」は数え上げ中うすく、確定で濃くなる（DC .35 → 1）。 */
@keyframes interlude-count-suffix {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes zzz { 0% { transform: translateY(2px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
/* レール1段降下の着地（落下→スカッシュ→小リバウンド→整う）。.mascot 内側要素に当たるので translateY(-50%) は含めない */
@keyframes zip {
  0%   { transform: scaleY(1.14) scaleX(0.90); }
  55%  { transform: scaleY(1) scaleX(1); }
  72%  { transform: scaleY(0.82) scaleX(1.16); }
  86%  { transform: scaleY(1.05) scaleX(0.97); }
  100% { transform: scaleY(1) scaleX(1); }
}
/* 最終問題フィナーレ（DC T2）: Y は easeInCubic（キーフレームで近似）、
   回転は線形 0→150°、不透明度は 980→1320ms（アニメ内 67.9%→100%）でフェード。
   timing-function は linear（Y の ease をキーフレームに焼き込むため）。 */
@keyframes finaldrop {
  0%    { transform: translate(-50%, -50%) translateY(0) rotate(0deg); opacity: 1; }
  25%   { transform: translate(-50%, -50%) translateY(calc(var(--drop, 120vh) * 0.015625)) rotate(37.5deg); opacity: 1; }
  50%   { transform: translate(-50%, -50%) translateY(calc(var(--drop, 120vh) * 0.125)) rotate(75deg); opacity: 1; }
  67.9% { transform: translate(-50%, -50%) translateY(calc(var(--drop, 120vh) * 0.3129)) rotate(101.85deg); opacity: 1; }
  75%   { transform: translate(-50%, -50%) translateY(calc(var(--drop, 120vh) * 0.421875)) rotate(112.5deg); opacity: 0.779; }
  87.5% { transform: translate(-50%, -50%) translateY(calc(var(--drop, 120vh) * 0.6699)) rotate(131.25deg); opacity: 0.39; }
  100%  { transform: translate(-50%, -50%) translateY(var(--drop, 120vh)) rotate(150deg); opacity: 0; }
}
/* 目に見えず読み上げにだけ残す。装飾を aria-hidden にした要素の実値を出す用
   （`components/InterludeCount.js` の数え上げストリップ）。 */
.a11y-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.anim-bob { animation: bob 1.6s ease-in-out infinite; }

.app-container {
  min-height: 100dvh;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: env(safe-area-inset-bottom, 16px);
  background-color: var(--color-bg);
  transition: background-color calc(500ms * var(--finale-scale, 1.4286)) ease;
}

.app-container:has(.question-page) {
  padding: 0;
  background-color: var(--color-bg-quiz);
}

/* finale の地は**ホームのクリーム**（`--color-bg`）。空は 84dvh で止まるので下の
   16dvh は地のままで、回答中の #FFF7EE を残すと静かな URL 置換（`.question-page`
   が外れる）フレームで地色が跳ぶ。切り替えは空の現像と同区間で送る
   （`lib/finaleTimeline.js` の BASE_MS.skyRevealStart 460 → skyRevealEnd 1240）。
   T1/T3 の退避（下のルール）が上書きできるよう、この位置に置く。 */
.app-container:has(.question-page-feed.is-result-phase) {
  background-color: var(--color-bg);
  transition: background-color calc(780ms * var(--finale-scale, 1.4286)) ease
    calc(460ms * var(--finale-scale, 1.4286));
}

/* T1: 空カーテンと重なる区間で地色を #FFF7EE へ（DC v2 t1: 150→750ms easeOutCubic）。
   .child-home ではなく .star-sky[data-departing] を見る — navigate 後も
   departing が残るので、ホーム unmount で transition が途切れない。 */
.app-container:has(.star-sky[data-departing="true"]) {
  background-color: var(--color-bg-quiz);
  transition: background-color calc(600ms * var(--finale-scale, 1.4286))
    cubic-bezier(0.215, 0.61, 0.355, 1)
    calc(150ms * var(--finale-scale, 1.4286));
}

/* --- Loading / Error --- */

.loading {
  text-align: center;
  padding: 80px 16px;
  color: var(--color-text-sub);
  font-size: 1rem;
}

.error-message {
  text-align: center;
  padding: 80px 16px;
  color: var(--color-incorrect);
}

.error-message .btn {
  margin-top: 16px;
}

.error-text {
  color: var(--color-incorrect);
  font-weight: 600;
  margin-bottom: 12px;
}

/* --- Buttons --- */

.btn {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: 18px;
  font-size: 1.125rem;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s, box-shadow 0.08s, background 0.15s;
  touch-action: manipulation;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-surface);
  width: 100%;
  max-width: var(--control-width-md);
  min-height: 64px;
  border-radius: 22px;
  font-size: 26px;
  box-shadow: 0 5px 0 var(--color-primary-dark);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--color-primary-dark);
}

.btn-next {
  background: var(--color-coral);
  color: var(--color-surface);
  padding: 12px 36px;
  margin-top: 12px;
  box-shadow: 0 5px 0 var(--color-coral-dark);
}

.btn-next:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--color-coral-dark);
}

.btn-text {
  background: none;
  color: var(--color-primary-dark);
  padding: 8px;
  font-weight: 700;
  font-size: 1rem;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary-dark);
  width: 100%;
  min-height: 56px;
  border-radius: 22px;
  font-size: 1.125rem;
  border: 2px solid var(--color-primary);
  box-shadow: none;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary-soft);
}

.btn-secondary:active:not(:disabled) {
  transform: translateY(1px);
}

.section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* --- Card --- */

.card {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-card);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(var(--color-text-rgb), .06);
}

.card h2 {
  font-size: 0.875rem;
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}