/* ───────────────────────────────────────────────────────────
   practice.css — 練習流程（讀→練的「練」）共用樣式
   單一真相來源：所有「練習頁」只 link 本檔，不在頁面內重寫。
   顏色／字級沿用 tokens.css 的暖紙＋朱紅體系（此處先就地定義，
   待 practice 頁併入 scenario 體系後可改吃 tokens.css 變數）。
   ─────────────────────────────────────────────────────────── */
:root{
  --paper-50:#f7f2e9; --paper-100:#f0ebe0; --paper-200:#e6ddcc;
  --ink-900:#1a1410; --ink-700:#3a2f25; --ink-500:#7a6a5a; --ink-300:#b0a090;
  --vermilion-600:#8b3929; --vermilion-500:#a34434; --vermilion-100:rgba(139,57,41,.08);
  --pine-600:#4a5d4e; --pine-100:rgba(74,93,78,.12);
  --font-display:'Noto Serif TC',serif; --font-body:'Noto Sans TC',sans-serif;
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --r:14px; --pill:999px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;font-family:var(--font-body);color:var(--ink-900);
  background:var(--paper-50);line-height:1.7;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;padding:env(safe-area-inset-top,16px) 16px env(safe-area-inset-bottom,16px);
}
.stage{width:100%;max-width:440px;display:flex;flex-direction:column;flex:1}

/* ── 頂部進度 ── */
.top{display:flex;align-items:center;gap:10px;margin:6px 0 22px}
.back{width:34px;height:34px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(26,20,16,.14);background:var(--paper-100);color:var(--ink-700);
  font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:background .15s}
.back:hover{background:var(--paper-200)}
.back:active{transform:scale(.94)}
.top .label{font-size:.72rem;letter-spacing:.16em;color:var(--ink-500)}
.bar{flex:1;height:5px;border-radius:var(--pill);background:var(--paper-200);overflow:hidden}
.bar > i{display:block;height:100%;width:0;background:var(--vermilion-600);
  border-radius:var(--pill);transition:width .5s var(--ease-enter)}

/* ── 卡片 ── */
.card{
  background:#fffdf8;border:1px solid rgba(26,20,16,.08);border-radius:var(--r);
  padding:26px 22px 24px;box-shadow:0 4px 22px rgba(26,20,16,.06);
  flex:1;display:flex;flex-direction:column;
  animation:rise .42s var(--ease-enter) both;
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card{animation:none}.bar>i{transition:none}}

.role{font-size:.74rem;letter-spacing:.12em;color:var(--vermilion-600);
  font-weight:700;margin:0 0 4px}
.role.you{color:var(--pine-600)}
.prompt{font-family:var(--font-display);font-size:1.32rem;font-weight:700;
  line-height:1.45;margin:0 0 20px;color:var(--ink-900)}

/* ── 聽 ── */
.listen{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:18px 0 6px;margin-bottom:auto}
.play{width:88px;height:88px;border-radius:50%;border:none;cursor:pointer;
  background:var(--vermilion-600);color:#fff;font-size:2rem;
  box-shadow:0 6px 20px rgba(139,57,41,.32);transition:transform .15s,background .15s;
  display:grid;place-items:center}
.play:hover{background:var(--vermilion-500)}
.play:active{transform:scale(.94)}
.play.ping{animation:ping 1s var(--ease-enter)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(139,57,41,.4)}100%{box-shadow:0 0 0 22px rgba(139,57,41,0)}}
.mini{display:flex;gap:8px}
.reveal .mini{margin:4px 0 14px}   /* 揭露區的「再聽店員這句」上下留白 */
.mini button{font-family:var(--font-body);font-size:.78rem;color:var(--ink-700);
  background:var(--paper-100);border:1px solid rgba(26,20,16,.1);
  border-radius:var(--pill);padding:7px 14px;cursor:pointer;min-height:36px}
.mini button:hover{background:var(--paper-200)}
.hint-listen{font-size:.82rem;color:var(--ink-500);text-align:center;margin:2px 0 0}

/* ── 選項 ── */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.opt{font-family:var(--font-body);font-size:1rem;color:var(--ink-900);text-align:left;
  background:#fff;border:1.5px solid rgba(26,20,16,.14);border-radius:12px;
  padding:14px 16px;cursor:pointer;min-height:52px;transition:border-color .15s,background .15s;
  display:flex;align-items:center;gap:10px}
.opt:hover{border-color:var(--ink-300)}
.opt:focus-visible{outline:2px solid var(--vermilion-500);outline-offset:2px}
.opt .k{width:24px;height:24px;border-radius:50%;background:var(--paper-100);
  display:grid;place-items:center;font-size:.8rem;color:var(--ink-500);flex:none}
.opt.right{border-color:var(--pine-600);background:var(--pine-100)}
.opt.right .k{background:var(--pine-600);color:#fff}
.opt.wrong{border-color:var(--vermilion-600);background:var(--vermilion-100);
  box-shadow:0 0 0 2px var(--vermilion-100);animation:shake .42s var(--ease-enter)}
.opt.wrong .k{background:var(--vermilion-600);color:#fff}
.opt.faded{opacity:.45}
.opt .mark{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.04em;
  padding:3px 10px;border-radius:var(--pill);flex:none;color:#fff}
.opt.right .mark{background:var(--pine-600)}
.opt.wrong .mark{background:var(--vermilion-600)}
@keyframes shake{0%,100%{transform:translateX(0)}
  18%,58%{transform:translateX(-6px)}38%,78%{transform:translateX(6px)}}
@media(prefers-reduced-motion:reduce){.opt.wrong{animation:none}}
.errbox{background:var(--vermilion-100);border:1.5px solid var(--vermilion-500);
  border-radius:12px;padding:12px 14px;margin:0 0 14px;font-size:.92rem;line-height:1.6;color:var(--ink-900)}
.errbox .x{font-weight:700;color:var(--vermilion-600)}
.errbox .a{font-weight:700;color:var(--pine-600)}
.opt:disabled{cursor:default}
.opt .tag{font-size:.66rem;font-weight:700;letter-spacing:.06em;color:#fff;
  background:var(--pine-600);border-radius:var(--pill);padding:3px 9px;flex:none}
.reply-opt{border-color:rgba(74,93,78,.35)}
.reply-opt:hover{border-color:var(--pine-600);background:var(--pine-100)}

/* ── 揭露 ── */
.reveal{margin-top:auto;animation:rise .4s var(--ease-enter) both}
.jp{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1.5;
  margin:0 0 4px}
.jp .slot{color:var(--vermilion-600);border-bottom:2px dotted var(--vermilion-500)}
.roma{font-size:.92rem;color:var(--ink-500);letter-spacing:.02em;margin:0 0 2px}
.zh{font-size:1rem;color:var(--ink-700);margin:0 0 14px}
.note{font-size:.85rem;color:var(--ink-700);background:var(--paper-100);
  border-left:3px solid var(--ink-300);border-radius:0 8px 8px 0;padding:10px 13px;margin:0 0 4px}
.note b{color:var(--ink-900)}
.verdict{font-size:.84rem;font-weight:700;margin:0 0 10px}
.verdict.ok{color:var(--pine-600)}
.verdict.no{color:var(--vermilion-600)}

/* ── 主行動 ── */
.cta{font-family:var(--font-body);font-weight:700;font-size:1rem;
  background:var(--ink-900);color:var(--paper-50);border:none;border-radius:var(--pill);
  padding:15px;width:100%;cursor:pointer;margin-top:16px;min-height:52px;
  transition:transform .15s,background .15s}
.cta:hover{background:var(--ink-700)}
.cta:active{transform:scale(.98)}
.cta.ghost{background:transparent;color:var(--ink-700);border:1.5px solid rgba(26,20,16,.16)}
.cta.ghost:hover{background:var(--paper-100)}

/* ── 開頭／結尾 ── */
.center{text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:14px;padding:30px 8px}
.center h1{font-family:var(--font-display);font-size:1.7rem;font-weight:900;margin:0;line-height:1.4}
.center p{color:var(--ink-700);margin:0;max-width:300px}
.badge{font-size:.72rem;letter-spacing:.16em;color:var(--vermilion-600);font-weight:700}
.tally{display:flex;gap:20px;margin:6px 0 4px}
.tally div{display:flex;flex-direction:column;align-items:center}
.tally b{font-family:var(--font-display);font-size:2rem;color:var(--pine-600);line-height:1}
.tally span{font-size:.72rem;color:var(--ink-500);margin-top:4px}
.foot{font-size:.72rem;color:var(--ink-300);text-align:center;margin-top:14px}