/* quiz.css — 測試頁（選擇題、打字題、結果頁） */
.quiz-note{margin:0 0 12px;text-align:center;font-weight:700;font-size:.8rem;color:var(--dict-fg);background:var(--dict-bg);border-radius:var(--r-input);padding:6px 10px;line-height:1.5}
/* quiz */
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.quiz-kicker{font-size:.8rem;font-weight:800;color:var(--ink-soft)}
.meter{height:5px;background:var(--rule);border-radius:var(--r-pill);overflow:hidden;margin:0 0 16px}
.meter>span{display:block;height:100%;width:var(--p,0%);background:var(--accent);border-radius:var(--r-pill);transition:width .25s ease}
.prompt{min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 4px;margin-bottom:14px}
.prompt-digits{margin:0;font-size:clamp(2.8rem,14vw,4.4rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.prompt-words{margin:0;font-size:clamp(1.3rem,5vw,2rem);font-weight:800;line-height:1.3;overflow-wrap:anywhere;text-wrap:balance}
.prompt-words[lang="zh-HK"]{letter-spacing:.05em}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices.stack{grid-template-columns:1fr}
.choice{min-height:60px;border:var(--bw) solid var(--rule-strong);background:var(--card);color:var(--ink);border-radius:var(--r-btn);box-shadow:var(--shadow);padding:12px 14px;font-weight:800;font-size:.98rem;line-height:1.35;text-align:center;overflow-wrap:anywhere}
.choice.long{text-align:left;font-size:.9rem}
.choice:hover:not(:disabled){background:var(--tint);color:var(--tint-deep)}
.choice:disabled{cursor:default;box-shadow:none}
.choice.is-correct{background:var(--memo-bg);color:var(--memo-fg);border-color:var(--memo-fg)}
.choice.is-wrong{background:var(--holiday-bg);color:var(--holiday-fg);border-color:var(--holiday-fg);animation:shake .28s ease}
.choice-label{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.kbd-hint{display:none;margin:10px 0 0;text-align:center;font-size:.74rem;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.kbd-hint{display:block}}
.trio{display:flex;flex-direction:column;gap:2px;background:var(--tint);color:var(--ink);border-radius:calc(var(--r-card) - 4px);padding:8px 12px;margin-bottom:14px}
.trio-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:42px;font-weight:800}
.trio-num{font-variant-numeric:tabular-nums;font-size:1.3rem}
.feedback{margin:12px 0 0;text-align:center;font-weight:800}
.feedback.ok{color:var(--memo-fg)}
.feedback.bad{color:var(--holiday-fg)}

/* result */
.score-wrap{text-align:center;padding:4px 0 8px}
.score-mark{margin:0;font-size:2.8rem;font-weight:800;letter-spacing:-.04em;line-height:1}
.score-mark span{font-size:1.3rem;color:var(--ink-faint)}
.score-copy{margin:8px 0 0;font-weight:700;color:var(--ink-soft)}
.miss-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.miss{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--rule);border-left:4px solid var(--holiday-fg);border-radius:var(--r-input);padding:7px 10px}
.miss p{margin:0;font-weight:800;font-size:.92rem}
.miss .sub{font-weight:600;color:var(--ink-soft);font-size:.8rem}
.miss .upper-note{display:block;font-size:.92em;color:var(--ink-faint);font-weight:700}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake-box{animation:shake .32s ease}
.type-box{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.type-input{width:100%;min-height:52px;border:var(--bw) solid var(--rule-strong);border-radius:var(--r-btn);background:var(--card);color:var(--ink);font-weight:800;font-size:1.05rem;padding:10px 14px;font-family:inherit}
.type-input:focus{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.type-input.err{border-color:var(--holiday-fg);background:var(--holiday-bg);color:var(--holiday-fg)}
.type-input.ok{border-color:var(--memo-fg);background:var(--memo-bg);color:var(--memo-fg)}
.type-actions{display:flex;gap:8px}
.type-actions .btn-primary,.type-actions .btn-secondary{flex:1}
@media (max-width:420px){.choices{grid-template-columns:1fr}}