*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-top:#e8f5e9;--bg-bottom:#fff3e0;--card:#fff;--text:#4a3728;--muted:#8d6e63;--primary:#66bb6a;--primary-dark:#43a047;--accent:#ffb74d;--accent-dark:#ffa726;--pink:#f48fb1;--pink-dark:#ec407a;--blue:#64b5f6;--blue-dark:#42a5f5;--purple:#ba68c8;--correct:#81c784;--wrong:#ffab91;--shadow:0 8px 24px #4a37281f;--radius:24px;--tap:64px;color:var(--text);background:linear-gradient(160deg, var(--bg-top), var(--bg-bottom));font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:PingFang TC,Noto Sans TC,Microsoft JhengHei,Helvetica Neue,Arial,sans-serif;font-weight:600;line-height:1.5}html,body,#root{min-height:100dvh}body{min-width:320px;margin:0}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none}button:disabled{cursor:default;opacity:.5}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.start{flex-direction:column;flex:1;gap:28px;display:flex}.start-hero{text-align:center}.start-mascot{margin-bottom:8px;font-size:4rem;line-height:1;animation:2s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.start-heading{color:var(--text);margin-bottom:6px;font-size:1.75rem;font-weight:800}.start-sub{color:var(--muted);font-size:1.05rem;font-weight:500}.start-section{flex-direction:column;gap:12px;display:flex}.start-label{color:var(--muted);font-size:1.15rem;font-weight:700}.choice-row{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.choice-btn{min-height:88px;color:var(--text);background:#fafafa;border:3px solid #0000;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 8px;transition:transform .15s,box-shadow .15s,border-color .15s,background .15s;display:flex}.choice-btn:hover{transform:scale(1.03)}.choice-btn:active{transform:scale(.97)}.choice-btn.selected{border-color:currentColor;transform:scale(1.04);box-shadow:0 4px 16px #00000014}.choice-btn.mode-add{color:var(--primary-dark);background:#e8f5e9}.choice-btn.mode-sub{color:var(--blue-dark);background:#e3f2fd}.choice-btn.mode-mixed{color:#8e24aa;background:#f3e5f5}.choice-btn.diff-easy{color:#558b2f;background:#f1f8e9}.choice-btn.diff-medium{color:#ef6c00;background:#fff3e0}.choice-btn.diff-hard{color:#c62828;background:#fce4ec}.choice-emoji{font-size:1.6rem;line-height:1}.choice-text{font-size:1.15rem;font-weight:800}.choice-hint{opacity:.75;font-size:.75rem;font-weight:500}.start-btn{background:linear-gradient(135deg, var(--accent), var(--pink));color:#fff;border-radius:999px;width:100%;min-height:72px;margin-top:auto;font-size:1.5rem;font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 8px 20px #ffa72666}.start-btn:hover{transform:scale(1.03);box-shadow:0 10px 28px #ffa72680}.start-btn:active{transform:scale(.97)}@media (width<=380px){.choice-text{font-size:1rem}.choice-hint{font-size:.65rem}.start-heading{font-size:1.45rem}}.pad{grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:360px;margin:0 auto;display:grid}.pad-key{min-height:var(--tap);border-radius:18px;font-size:1.6rem;font-weight:800;transition:transform .12s,background .12s;box-shadow:0 3px #00000014}.pad-key:active:not(:disabled){transform:translateY(2px)scale(.97);box-shadow:0 1px #00000014}.pad-digit{color:var(--text);background:#fff8e1}.pad-digit:hover:not(:disabled){background:#ffecb3}.pad-clear{color:var(--muted);background:#eceff1;font-size:1.15rem}.pad-clear:hover:not(:disabled){background:#cfd8dc}.pad-submit{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;font-size:1.15rem}.pad-submit:hover:not(:disabled){filter:brightness(1.05)}.pad-submit:disabled{color:#fff;opacity:.7;background:#c8e6c9}.practice{flex-direction:column;flex:1;gap:20px;display:flex}.practice-meta{flex-direction:column;align-items:center;gap:10px;display:flex}.chip{color:var(--primary-dark);background:#e8f5e9;border-radius:999px;align-items:center;padding:6px 14px;font-size:.95rem;font-weight:700;display:inline-flex}.score-row{color:var(--muted);flex-wrap:wrap;justify-content:center;gap:12px 20px;font-size:1.05rem;display:flex}.score{color:var(--text);font-weight:800}.streak{color:var(--accent-dark);font-weight:700}.question-box{text-align:center;background:linear-gradient(145deg,#fffde7,#fff3e0);border:4px solid #0000;border-radius:28px;padding:28px 16px;transition:border-color .25s,background .25s,transform .25s}.question-box.is-correct{border-color:var(--correct);background:linear-gradient(145deg,#e8f5e9,#c8e6c9);animation:.45s pop}.question-box.is-wrong{border-color:var(--wrong);background:linear-gradient(145deg,#fff3e0,#ffe0b2)}@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.06)}to{transform:scale(1)}}.question-prompt{color:var(--text);flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:800;line-height:1.2;display:flex}.q-op{color:var(--accent-dark)}.q-answer{min-width:1.4em;color:var(--primary-dark);background:#fff;border-radius:16px;padding:4px 14px;box-shadow:inset 0 0 0 3px #ffe082}.q-answer.empty{color:#bdbdbd}.feedback-banner{text-align:center;border-radius:16px;min-height:2em;padding:8px 12px;font-size:1.25rem;font-weight:800;transition:opacity .2s}.feedback-banner.hidden{opacity:0}.feedback-correct{color:#2e7d32;background:#e8f5e9}.feedback-wrong{color:#e65100;background:#fff3e0}.practice .pad{margin-top:auto}.app{min-height:100dvh;padding:16px;padding-bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:flex}.app-header{justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:480px;margin-bottom:12px;display:flex}.logo{align-items:center;gap:10px;display:flex}.logo-emoji{font-size:2rem;line-height:1}.logo-title{color:var(--text);letter-spacing:.02em;font-size:1.35rem;font-weight:800}.back-btn{color:var(--muted);box-shadow:var(--shadow);background:#fff;border-radius:999px;min-height:44px;padding:10px 18px;font-size:1rem;transition:transform .15s,background .15s}.back-btn:hover{background:#fff8e1;transform:scale(1.04)}.back-btn:active{transform:scale(.96)}.card{background:var(--card);border-radius:var(--radius);width:100%;max-width:480px;box-shadow:var(--shadow);flex-direction:column;flex:1;padding:28px 22px;display:flex}@media (width>=520px){.card{flex:0 auto;min-height:560px}}