/* 小學主題（P0-5 步驟 4，設計憲法第 6.3、19 節）：作答、回饋、葉子獎勵、聲音。只用設計變數 */

/* ---------- 元件層變數：高小（預設）和初小 ---------- */
.pa {
  --pa-prompt-size: 22px; --pa-prompt-line: 1.6;
  --pa-opt-height: 64px; --pa-opt-radius: 18px; --pa-opt-size: 22px;
  --pa-chip-height: 52px; --pa-chip-radius: var(--radius-lg); --pa-chip-size: 16px;
  --pa-btn-height: 64px; --pa-btn-radius: var(--radius-xl); --pa-btn-size: 19px;
  --pa-btn-alt-height: 64px;
  --pa-fb-title: 20px; --pa-fb-text: 16px;
  --pa-icon: 22px;
  --pa-subj-icon: var(--subject-maths-icon); --pa-subj-bar: var(--subject-maths-bar); --pa-subj-text: var(--subject-maths-text);
  container-type: inline-size;
  color: var(--color-text);
  font-family: var(--font-sans);
}
.pa-lower {
  --pa-prompt-size: 30px; --pa-prompt-line: 1.5;
  --pa-opt-height: 112px; --pa-opt-radius: var(--radius-2xl); --pa-opt-size: 48px;
  --pa-chip-height: 60px; --pa-chip-radius: var(--radius-xl); --pa-chip-size: 19px;
  --pa-btn-height: 72px; --pa-btn-radius: 24px; --pa-btn-size: 24px;
  --pa-btn-alt-height: 60px;
  --pa-fb-title: 24px; --pa-fb-text: 19px;
  --pa-icon: 26px;
}
.pa--english { --pa-subj-icon: var(--subject-english-icon); --pa-subj-bar: var(--subject-english-bar); --pa-subj-text: var(--subject-english-text); }
.pa--chinese { --pa-subj-icon: var(--subject-chinese-icon); --pa-subj-bar: var(--subject-chinese-bar); --pa-subj-text: var(--subject-chinese-text); }
.pa--science { --pa-subj-icon: var(--subject-science-icon); --pa-subj-bar: var(--subject-science-bar); --pa-subj-text: var(--subject-science-text); }

.pa .num, .pa-finish .num { font-feature-settings: "tnum" 1; }
.pa .icon { width: var(--pa-icon); height: var(--pa-icon); flex-shrink: 0; }
.pa-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- 頂欄 ---------- */
.pa-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-16); margin-bottom: var(--space-16); }
.pa-top > :first-child { justify-self: start; }
.pa-top-end { justify-self: end; display: flex; align-items: center; gap: var(--space-12); }
.pa-chip { min-height: var(--pa-chip-height); padding: 0 var(--space-16) 0 var(--space-12); border-radius: var(--pa-chip-radius); border: 1px solid var(--color-line); background: var(--color-surface);
  display: inline-flex; align-items: center; gap: 6px; font: 600 var(--pa-chip-size) / 1.2 var(--font-sans); color: var(--color-text); cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.pa-chip:hover { background: var(--color-surface-2); }
.pa-chip:active { transform: scale(.98); }
.pa-chip:focus-visible, .pa-opt:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pa-chip[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pa-sound { padding-inline: var(--space-16); }
.pa-top-mid { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.pa-topic { font-size: 15px; font-weight: 600; color: var(--pa-subj-text); text-align: center; }
.pa-pills { display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: center; }
.pa-pill { width: 40px; height: 10px; border-radius: 5px; background: var(--pa-subj-bar); }
.pa-pill.is-done { background: var(--pa-subj-icon); }
.pa-pill.is-current { background: var(--color-accent); }
.pa-count { font-size: 16px; color: var(--color-text-secondary); white-space: nowrap; }
.pa-dots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.pa-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--color-line); box-sizing: border-box; }
.pa-dot.is-done { background: var(--color-success-icon); }
.pa-dot.is-current { background: var(--color-surface); border: 4px solid var(--color-accent); }

/* ---------- 題目 ---------- */
.pa-body { display: flex; gap: 28px; align-items: stretch; }
.pa-qcard { flex: 1.1; min-width: 0; background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: var(--space-32); display: flex; flex-direction: column; gap: 22px; }
.pa-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }
.pa-side-title { font-size: 18px; font-weight: 600; color: var(--color-text-strong); }
.pa-prompt { font-size: var(--pa-prompt-size); line-height: var(--pa-prompt-line); font-weight: 700; color: var(--color-text-strong); overflow-wrap: anywhere; }
.pa-prompt svg { display: block; max-width: 100%; height: auto; margin: var(--space-8) auto; color: var(--color-text); }
.pa-prompt img.pic, .pa-opt img.pic { width: 1.3em; height: 1.3em; }
.pa-visual { display: flex; justify-content: center; align-items: center; padding: 6px 0; font-size: 1.75rem; font-weight: 700; line-height: 1.4; color: var(--color-text-strong); font-variant-numeric: tabular-nums; text-align: center; overflow-wrap: anywhere; }
.pa-visual svg { max-width: 100%; height: auto; color: var(--color-text); }
.pa-visual img.pic { width: 2.4em; height: 2.4em; }
.pa-intro { margin: 0; font-size: var(--text-small-size); color: var(--color-text-secondary); text-align: center; }
.pa-hint { background: var(--color-surface-2); border-radius: 18px; padding: 14px 18px; display: flex; gap: var(--space-12); align-items: center; font-size: 16px; line-height: 1.6; color: var(--color-text); }
.pa-hint[hidden] { display: none; }
.pa-hint .icon { color: var(--color-text-secondary); }

/* ---------- 選項 ---------- */
.pa-opts { display: flex; flex-direction: column; gap: var(--space-16); }
.pa-opt { position: relative; min-height: var(--pa-opt-height); border-radius: var(--pa-opt-radius); border: 1px solid var(--color-line); background: var(--color-surface);
  display: flex; align-items: center; gap: 14px; padding: var(--space-8) var(--space-20); font: 600 var(--pa-opt-size) / 1.3 var(--font-sans); color: var(--color-text-strong);
  text-align: left; cursor: pointer; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.pa-opt:hover:not(:disabled):not(.is-selected) { border-color: var(--color-line-strong); }
.pa-opt:active:not(:disabled) { transform: scale(.98); }
.pa-opt:disabled { cursor: default; }
.pa-opt-text { min-width: 0; overflow-wrap: break-word; }
.pa-opt-text svg { max-width: 100%; height: auto; vertical-align: middle; }
.pa-letter { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--color-line-strong); color: var(--color-text-secondary); display: grid; place-items: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.pa-mark { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-8); }
.pa-mark:empty { display: none; }
.pa-mark-text { font-size: 15px; font-weight: 600; white-space: nowrap; }
.pa-mark .pa-mark-icon { width: 26px; height: 26px; stroke-width: 2.6; }
.pa-opt.is-selected { border: 4px solid var(--color-accent); background: var(--color-accent-tint); color: var(--color-accent-text); }
.pa-opt.is-right { border: 3px solid var(--color-success-icon); background: var(--color-success-tint); }
.pa-opt.is-right .pa-letter { background: var(--color-success-icon); border-color: var(--color-success-icon); color: var(--color-on-accent); }
.pa-opt.is-right .pa-mark { color: var(--color-success-icon); }
.pa-opt.is-right .pa-mark-text { color: var(--color-success-text); }
.pa-opt.is-wrong { border: 3px solid var(--color-warning-icon); background: var(--color-warning-tint); }
.pa-opt.is-wrong .pa-letter { background: var(--color-warning-icon); border-color: var(--color-warning-icon); color: var(--color-on-accent); }
.pa-opt.is-wrong .pa-mark { color: var(--color-warning-icon); }
.pa-opt.is-wrong .pa-mark-text { color: var(--color-warning-text); }
.pa-opt.is-out { opacity: .55; }
.pa-opt.is-out .pa-mark { color: var(--color-warning-icon); }

/* 填答案（小測的數字題、文字題） */
.pa-input { display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; }
.pa-input .input { min-height: var(--pa-opt-height); max-width: 280px; font-size: var(--pa-opt-size); font-weight: 600; border-radius: var(--pa-opt-radius); padding: 0 var(--space-20); border: 2px solid var(--color-line); }
.pa-lower .pa-input { justify-content: center; }
.pa-lower .pa-input .input { font-size: 40px; text-align: center; }
.pa-input.is-right .input { border: 3px solid var(--color-success-icon); background: var(--color-success-tint); }
.pa-input.is-wrong .input { border: 3px solid var(--color-warning-icon); background: var(--color-warning-tint); }
.pa-unit { font-size: 20px; font-weight: 600; }

/* ---------- 回饋卡：顏色＋圖示＋文字一起表達；答錯用琥珀色 ---------- */
.pa-fb-slot:empty { display: none; }
.pa-fb { border-radius: var(--radius-xl); padding: 18px var(--space-20); display: flex; gap: 14px; align-items: flex-start; }
.pa-fb--ok { background: var(--color-success-tint); }
.pa-fb--warn { background: var(--color-warning-tint); }
.pa-fb-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--color-surface); display: grid; place-items: center; flex-shrink: 0; }
.pa-fb--ok .pa-fb-icon { color: var(--color-success-icon); }
.pa-fb--warn .pa-fb-icon { color: var(--color-warning-icon); }
.pa-fb-body { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.pa-fb-title { font-size: var(--pa-fb-title); font-weight: 700; line-height: 1.35; }
.pa-fb--ok .pa-fb-title { color: var(--color-success-text); }
.pa-fb--warn .pa-fb-title { color: var(--color-warning-text); }
.pa-fb-text { font-size: var(--pa-fb-text); line-height: 1.6; color: var(--color-text); overflow-wrap: anywhere; }
.pa-fb-text svg { max-width: 100%; height: auto; vertical-align: middle; }

/* ---------- 按鈕 ---------- */
.pa-actions { display: flex; gap: var(--space-12); margin-top: auto; }
.pa-actions:empty { display: none; }
.pa .pa-btn, .pa-finish .pa-btn { min-height: var(--pa-btn-height); border-radius: var(--pa-btn-radius); gap: var(--space-8); }
.pa .pa-btn .icon, .pa-finish .pa-btn .icon { width: var(--pa-icon); height: var(--pa-icon); }
.pa .pa-btn-main { flex: 2; font-size: var(--pa-btn-size); font-weight: 700; }
.pa .pa-btn-alt { flex: 1; min-height: var(--pa-btn-alt-height); font-size: 18px; font-weight: 600; }

/* ---------- 初小：一頁一題，置中 ---------- */
.pa-lower .pa-body { flex-direction: column; align-items: center; gap: 22px; }
.pa-qrow { display: flex; align-items: center; justify-content: center; gap: var(--space-16); flex-wrap: wrap; text-align: center; }
.pa-read { border: 0; background: var(--color-accent-tint); color: var(--color-accent-text); padding-inline: 18px; }
.pa-read:hover { background: var(--color-accent-tint); filter: brightness(.97); }
.pa-picture { background: var(--color-surface); border-radius: 32px; box-shadow: var(--shadow-1); padding: 28px 48px; max-width: 100%; box-sizing: border-box; }
.pa-lower .pa-visual img.pic { width: 76px; height: 76px; }
.pa-lower .pa-opt img.pic { width: 1.6em; height: 1.6em; }
.pa-lower .pa-opts { display: grid; grid-template-columns: repeat(var(--pa-cols, 2), minmax(0, 1fr)); gap: var(--space-20); width: 100%; max-width: 820px; }
.pa-lower .pa-opt { justify-content: center; text-align: center; border-width: 2px; font-weight: 700; flex-direction: column; gap: var(--space-4); }
.pa-lower .pa-opt-text { font-size: var(--pa-opt-size); }
.pa-lower .pa-opts[style*="--pa-cols:2"] .pa-opt-text, .pa-lower .pa-opts:not([style]) .pa-opt-text { font-size: 28px; }
.pa-lower .pa-mark { margin: 0; }
.pa-lower .pa-opt.is-selected { border-width: 4px; }
.pa-lower .pa-fb-slot { width: 100%; max-width: 820px; }
.pa-lower .pa-actions { justify-content: center; width: 100%; max-width: 820px; }
.pa-lower .pa-btn-main { flex: 0 1 auto; min-width: min(360px, 100%); }
.pa-lower .pa-btn-alt { flex: 0 1 auto; min-width: min(220px, 100%); }

/* ---------- 窄畫面：上下排列 ---------- */
@container (max-width: 680px) {
  .pa-body { flex-direction: column; gap: var(--space-20); }
  .pa-qcard { padding: var(--space-20); }
  .pa-top { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-8); }
  .pa-pill { width: 24px; }
  .pa-count { font-size: 14px; }
  .pa-lower .pa-opts { grid-template-columns: repeat(min(var(--pa-cols, 2), 2), minmax(0, 1fr)); }
  .pa-picture { padding: var(--space-20); }
  .pa-upper > .pa-body { --pa-prompt-size: 20px; }
  .pa-lower > .pa-body { --pa-prompt-size: 24px; --pa-opt-size: 40px; }
}
@container (max-width: 420px) {
  .pa-lower > .pa-body { --pa-opt-size: 32px; --pa-prompt-size: 22px; }
  .pa-dots { gap: 6px; } .pa-dot { width: 16px; height: 16px; } .pa-dot.is-current { border-width: 3px; }
  .pa-actions { flex-direction: column-reverse; }
  .pa-lower .pa-btn-main, .pa-lower .pa-btn-alt, .pa .pa-btn-main, .pa .pa-btn-alt { width: 100%; min-width: 0; }
  .pa-top-end .pa-count { display: none; }
}

/* ---------- 專注模式：收起外框，只留作答區 ---------- */
.card.pa-bare, .pa-bare.card { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---------- 完成畫面和葉子（第 11、12.2 節：約 600ms 彈性曲線，之後靜止） ---------- */
.pa-finish { container-type: inline-size; }
.pa-finish-card { background: var(--color-surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-1); padding: var(--space-32); display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.card .pa-finish-card, .card.pa-finish-card { background: none; box-shadow: none; padding: var(--space-16) 0; }
.pa-finish-title { margin: 0; font-size: var(--text-title-size); font-weight: 700; color: var(--color-text-strong); }
.pa-finish-score { font-size: var(--text-number-l-size); font-weight: 700; color: var(--color-text-strong); }
.pa-finish-msg { margin: 0; font-size: var(--text-body-size); color: var(--color-text); max-width: 560px; }
.pa-finish .pa-actions { justify-content: center; flex-wrap: wrap; margin-top: var(--space-8); }
.pa-finish .pa-btn-main { min-width: min(260px, 100%); font-size: var(--pa-btn-size); font-weight: 700; }
.pa-finish .pa-btn-alt { min-height: var(--pa-btn-alt-height); font-weight: 600; }
.pa-finish.pa-upper { --pa-btn-height: 64px; --pa-btn-alt-height: 64px; --pa-btn-radius: var(--radius-xl); --pa-btn-size: 19px; --pa-icon: 22px; }
.pa-finish.pa-lower { --pa-btn-height: 72px; --pa-btn-alt-height: 60px; --pa-btn-radius: 24px; --pa-btn-size: 24px; --pa-icon: 26px; }
.pa-finish-review { width: 100%; max-width: 640px; text-align: left; display: flex; flex-direction: column; gap: var(--space-12); }
.pa-finish-review h3 { margin: 0; font-size: var(--text-heading-size); color: var(--color-text-strong); }
.pa-review-item { border-radius: var(--radius-lg); background: var(--color-surface-2); padding: var(--space-12) var(--space-16); font-size: var(--text-small-size); line-height: 1.6; }
.pa-review-item svg { max-width: 100%; height: auto; }
.pa-review-item .pa-review-q { font-weight: 600; color: var(--color-text-strong); }
.pa-leaves { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); width: 100%; }
.pa-leaf-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-8); width: 100%; max-width: 360px; }
.pa-leaf-text { margin: 0; display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--text-body-size); font-weight: 600; color: var(--color-success-text); }
.pa-leaf-text .icon { width: 24px; height: 24px; color: var(--color-success-icon); flex-shrink: 0; }
.pa-leaf-count { display: block; font-size: var(--text-small-size); font-weight: 500; color: var(--color-text-secondary); }
.pa-leaves .leaf.is-new { animation: pa-leaf-in 600ms var(--ease-spring) both; }
@keyframes pa-leaf-in {
  from { opacity: 0; transform: translate(-28px, -40px) rotate(-35deg) scale(.5); }
  to { opacity: 1; transform: none; }
}
@keyframes pa-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pa-leaves .leaf.is-new { animation: pa-fade-in var(--dur-base) linear both; }
  .pa-chip, .pa-opt { transition: none; }
  .pa-chip:active, .pa-opt:active:not(:disabled) { transform: none; }
}
:root.a11y-motion .pa-leaves .leaf.is-new { animation: pa-fade-in var(--dur-base) linear both; }