:root{--bg:#fbf7ee;--card:#fff;--ink:#2b2a28;--muted:#6b665d;--accent:#8c2f1b;--accent2:#1f5f7a;--ok:#1e7a3c;--okbg:#e2f5e8;--bad:#b3261e;--badbg:#fde8e6;--hl:#ffe680;--line:#d9d0bd}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"標楷體","DFKai-SB","BiauKai","Kaiti TC","KaiTi","AR PL UKai TW","Noto Serif CJK TC","Noto Serif CJK HK","Noto Serif TC","Source Han Serif TC","PMingLiU","MingLiU",serif;line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.6rem 1rem;background:var(--accent);color:#fff}
.top h1{margin:0;font-size:1.5rem;letter-spacing:.1em}
main{flex:1;width:100%;max-width:820px;margin:0 auto;padding:1rem}
.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:.8rem}
h2{font-size:1.35rem;margin:1.2rem 0 .6rem;border-left:.4rem solid var(--accent);padding-left:.6rem}
.card{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:1rem;margin:.8rem 0;box-shadow:0 2px 0 rgba(0,0,0,.04)}
button{font:inherit;cursor:pointer;border-radius:12px;border:2px solid var(--accent);background:#fff;color:var(--accent);padding:.6rem 1rem;min-height:48px;touch-action:manipulation}
button:hover:not(:disabled){background:#fbeae5}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);color:#fff;font-size:1.15rem;font-weight:bold}
button.primary:hover:not(:disabled){background:#6f2313}
button.ghost{background:transparent;color:#fff;border-color:#fff;min-height:40px;padding:.3rem .8rem;font-size:.95rem}
button.ghost:hover{background:rgba(255,255,255,.2)}
.pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.pg{display:flex;align-items:center;gap:.6rem;border:2px solid var(--line);border-radius:12px;padding:.6rem .8rem;background:#fff;cursor:pointer;min-height:56px;user-select:none}
.pg input{width:1.4rem;height:1.4rem;accent-color:var(--accent);flex:none}
.pg.on{border-color:var(--accent);background:#fbeae5}
.pg b{font-size:1.1rem;display:block}
.pg small{color:var(--muted);font-size:.8rem;line-height:1.2;display:block}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.5rem 0}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.mode{text-align:left;border-radius:14px;padding:.8rem 1rem;background:#fff;border:2px solid var(--line);color:var(--ink)}
.mode.on{border-color:var(--accent);background:#fbeae5;box-shadow:0 0 0 2px var(--accent) inset}
.mode b{font-size:1.2rem;color:var(--accent);display:block}
.mode span{font-size:.9rem;color:var(--muted);line-height:1.4;display:block}
select{font:inherit;padding:.4rem .6rem;border-radius:8px;border:2px solid var(--line);min-height:44px;background:#fff}
.sent{font-size:1.6rem;line-height:2;padding:.5rem .3rem;word-break:break-all}
mark{background:var(--hl);color:#000;font-weight:bold;border-bottom:3px solid var(--accent);border-radius:4px;padding:0 .1em;margin:0 .05em}
.ask{color:var(--muted);font-size:1rem;margin:.2rem 0}
.ask b{color:var(--accent);font-size:1.4rem}
.bar{height:14px;background:#eadfca;border-radius:8px;overflow:hidden;margin:.4rem 0}
.bar>i{display:block;height:100%;background:var(--accent2);transition:width .3s}
.stat{display:flex;justify-content:space-between;color:var(--muted);font-size:.95rem;flex-wrap:wrap;gap:.3rem}
.opts{display:grid;gap:.6rem;margin-top:.5rem}
.opt{text-align:left;font-size:1.3rem;border:2px solid var(--line);color:var(--ink);background:#fff;padding:.7rem 1rem;min-height:56px}
.opt .k{display:inline-block;width:1.7rem;height:1.7rem;line-height:1.7rem;text-align:center;border-radius:50%;background:#eee;margin-right:.6rem;font-size:1rem;font-family:sans-serif}
.opt.ok{background:var(--okbg);border-color:var(--ok);color:var(--ok);font-weight:bold}
.opt.bad{background:var(--badbg);border-color:var(--bad);color:var(--bad)}
.opt.dim{opacity:.55}
.fb{margin-top:.8rem;padding:.7rem 1rem;border-radius:12px;font-size:1.15rem}
.fb.ok{background:var(--okbg);color:var(--ok)}
.fb.bad{background:var(--badbg);color:var(--bad)}
.fb .note{display:block;color:var(--ink);font-size:.95rem;margin-top:.3rem}
.big-score{font-size:3rem;font-weight:bold;color:var(--accent);text-align:center;margin:.3rem 0}
.center{text-align:center}
.wrong-list{list-style:none;padding:0;margin:.5rem 0}
.wrong-list li{border-bottom:1px dashed var(--line);padding:.5rem 0;font-size:1.05rem}
.wrong-list .a{color:var(--ok);font-weight:bold}
/* matching */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;align-items:stretch}
.mgrid h3{margin:0;font-size:1rem;color:var(--muted);text-align:center}
.mbtn{text-align:left;color:var(--ink);border:2px solid var(--line);background:#fff;width:100%;padding:.55rem .7rem;font-size:1.05rem;line-height:1.6;min-height:56px}
.mbtn.l{font-size:1.1rem}
.mbtn.sel{border-color:var(--accent2);background:#e3f1f7;box-shadow:0 0 0 2px var(--accent2) inset}
.mbtn.done{background:var(--okbg);border-color:var(--ok);color:var(--ok);opacity:.75;cursor:default}
.mbtn.shake{animation:sh .35s;border-color:var(--bad);background:var(--badbg)}
@keyframes sh{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* flash */
.flip{perspective:1000px;margin:.8rem 0}
.fc{min-height:260px;width:100%;border:3px solid var(--accent);border-radius:18px;background:#fff;padding:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;cursor:pointer;color:var(--ink);font-size:1rem}
.fc.back{background:#fff9e8;border-color:var(--accent2)}
.fc .tag{font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
.fc .ans{font-size:2.2rem;font-weight:bold;color:var(--accent2);margin:.3rem 0;line-height:1.4}
.fc .sent{text-align:left;width:100%}
.fc.back .sent{font-size:1.25rem;line-height:1.8}
.fc .hint{color:var(--muted);font-size:.9rem;margin-top:.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.two button{font-size:1.2rem;font-weight:bold}
.btn-know{border-color:var(--ok);color:var(--ok)}
.btn-know:hover:not(:disabled){background:var(--okbg)}
.btn-dont{border-color:var(--bad);color:var(--bad)}
.btn-dont:hover:not(:disabled){background:var(--badbg)}
.warn{background:#fff4d6;border:2px solid #e0b93f;border-radius:10px;padding:.5rem .8rem;font-size:.95rem}
.small{font-size:.9rem;color:var(--muted)}
@media(max-width:560px){
  html{font-size:17px}
  main{padding:.6rem}
  .sent{font-size:1.4rem}
  .mgrid{grid-template-columns:1fr 1fr;gap:.5rem}
  .mbtn{font-size:.98rem;padding:.45rem .5rem}
  .fc .ans{font-size:1.9rem}
  .top h1{font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* new modes */
input.txt{font:inherit;font-size:1.5rem;width:100%;padding:.6rem .8rem;border:3px solid var(--accent2);border-radius:12px;margin:.5rem 0;min-height:56px;background:#fff}
.rush-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;text-align:center;margin-bottom:.3rem}
.rush-top small{color:var(--muted);display:block;font-size:.8rem}
.rush-time,.rush-score,.rush-lives{font-size:2rem;font-weight:bold;color:var(--accent);line-height:1.2}
.rush-time.low{color:var(--bad);animation:pulse 1s infinite}
.rush-lives{font-size:1.6rem}
@keyframes pulse{50%{opacity:.5}}
.combo{color:#c05a00;font-weight:bold}
.best{font-size:1.2rem;color:var(--accent2)}.best.new{color:#b8860b;font-weight:bold}
.sense-cards{display:grid;gap:.5rem}
.scard{text-align:left;color:var(--ink);border:2px solid var(--line);background:#fff;padding:.5rem .8rem;font-size:1.05rem;line-height:1.7;width:100%}
.scard .s{font-size:1.15rem}
.scard.sel,.scol.sel{border-color:var(--accent2);background:#e3f1f7;box-shadow:0 0 0 2px var(--accent2) inset}
.scard.shake,.scol.shake{animation:sh .35s;border-color:var(--bad);background:var(--badbg)}
.sense-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.scol{border:2px dashed var(--accent);background:#fffdf7;padding:.4rem;min-height:110px;text-align:left;color:var(--ink);display:block;width:100%}
.scol-h{font-weight:bold;font-size:1.3rem;color:var(--accent);text-align:center;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.placed{background:var(--okbg);border:1px solid var(--ok);border-radius:8px;padding:.2rem .4rem;margin:.25rem 0;font-size:.95rem}
.placed .s{font-size:.95rem;line-height:1.5}
.modes{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(max-width:560px){.rush-time,.rush-score{font-size:1.6rem}.sense-cols{grid-template-columns:1fr 1fr}}
/* 語譯 */
.tr{margin-top:.6rem;padding:.5rem .7rem;background:#fffbe8;border-left:4px solid #b8860b;border-radius:6px;color:var(--ink);font-size:1rem;line-height:1.7;text-align:left;font-weight:normal}
.tr-l{display:inline-block;background:#b8860b;color:#fff;border-radius:4px;padding:0 .5em;margin-right:.5em;font-size:.85rem;font-weight:bold}
.tr strong{color:var(--accent);background:var(--hl);padding:0 .1em;border-radius:3px}
.fc .tr-card{width:100%;font-size:1rem;margin-top:.4rem}
.wrong-list .tr{font-size:.95rem;margin-top:.3rem}
.fb.ok .tr,.fb.bad .tr{color:var(--ink)}

.ansx .nt{color:#7a4b00;background:#fff3cd;border-radius:4px;padding:0 .3em;font-weight:600}
.ansx .a1{font-weight:700}
.fb .ansx{display:inline}
.wrong-list .a .ansx .nt{font-weight:600}