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

:root {
  /* --- デザイントークン: doc/design_handoff_10min_work/README.md 準拠 --- */
  --color-bg: #F4F1EC;          /* ホーム背景クリーム */
  --color-bg-quiz: #FFF7EE;     /* 問題画面背景クリーム */
  --color-surface: #fff;
  --color-text: #2E3A45;        /* インク */
  --color-text-rgb: 46, 58, 69;
  --color-text-sub: #8A857C;
  --color-text-mute: #C5C0B8;
  --color-primary: #46B48A;     /* ミント */
  --color-primary-dark: #2F8E6B;
  --color-primary-hover: #3da37c;
  --color-primary-soft: #E6F4EE;
  --color-coral: #FF8A65;
  --color-coral-dark: #E2673F;
  --color-coral-soft: #FFE3D6;
  --color-sunny: #FFD166;
  --color-correct: #46B48A;
  --color-correct-bg: rgba(70, 180, 138, .94);
  --color-incorrect: #FF8A65;
  --color-incorrect-bg: rgba(255, 247, 238, .97);
  --color-warn: #9A6A00;
  --color-warn-bg: #FFF6E2;
  --color-border: #EDE7DC;
  --color-grid-line: #E4F0EA;
  --color-grid-bg: #FBFEFC;
  --color-ink-line: #2E6FB0;    /* 手書き線 */
  --key-shadow: #E7DECF;
  --radius: 20px;
  --radius-card: 26px;
  --radius-sm: 12px;
  --max-width-child: 480px;
  --max-width-parent: 720px;
  --control-width-sm: 340px;
  --control-width-md: 360px;
  --control-width-lg: 380px;
  --st: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
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;
}

/* --- マスコット & アニメーション --- */
.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 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 railpop { 0% { transform: translateY(-50%) scale(.4); } 70% { transform: translateY(-50%) scale(1.12); } 100% { transform: translateY(-50%) scale(1); } }
@keyframes railtw { 0%,100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: .55; transform: translateY(-50%) 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 catch { 0% { transform: scaleY(.82) scaleX(1.16); } 50% { transform: scaleY(1.13) scaleX(.9); } 100% { transform: scaleY(1) scaleX(1); } }
@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 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 ripplen { 0% { transform: translate(-50%, -50%) scale(.3); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2.7); opacity: 0; } }
@keyframes flypos { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(var(--dx), var(--dy)) rotate(45deg); } }
@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); }
}
/* 最終問題フィナーレ：上には動かず、画面下端まで一気に落下＋回転ゆれ＋末尾フェードアウト */
@keyframes finaldrop {
  0%   { transform: translate(-50%, -50%) translateY(0) rotate(0) scaleY(1) scaleX(1); opacity: 1; }
  8%   { transform: translate(-50%, -50%) translateY(0) rotate(0) scaleY(0.9) scaleX(1.12); opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(var(--drop, 120vh)) rotate(18deg) scaleY(1.16) scaleX(0.86); opacity: 0; }
}
.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);
}

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

/* --- 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;
}