:root{--bg:#f8f2e7;--ink:#261f18;--muted:#6d6258;--line:#dfd1bf;--paper:#fffaf2;--paper2:#fff3dd;--accent:#312920;--ok:#2d7c5c;--ng:#a85e49;--shadow:0 6px 14px rgba(50,37,24,.075)}*{box-sizing:border-box}body{margin:0;min-height:100dvh;font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;color:var(--ink);background:linear-gradient(180deg,#fffaf2,var(--bg))}button{font:inherit}button:disabled{cursor:not-allowed}a{color:inherit;text-decoration:none}.app{width:min(390px,100%);margin:0 auto;padding:7px 7px 16px}.top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 0 5px}.back,.miniBtn{font-size:9.5px;font-weight:700;color:var(--muted);padding:5px 7px;border:1px solid var(--line);border-radius:999px;background:#fff}.label{font-size:9.5px;font-weight:800;color:#8b7047}.card{background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow)}.hero{padding:8px 9px;margin-bottom:6px}.heroRow{display:flex;align-items:center;justify-content:space-between;gap:8px}.hero h1{margin:0;font-size:15px;line-height:1.15;letter-spacing:-.03em}.hero p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.35}.levelBar{display:flex;gap:4px;overflow-x:auto;padding:2px 0 5px;margin-bottom:4px;scrollbar-width:none}.levelBar::-webkit-scrollbar{display:none}.levelBtn{flex:0 0 auto;min-height:27px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:10px;font-weight:700;padding:0 8px}.levelBtn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.problem{padding:8px 9px;margin-bottom:6px}.jaLabel{font-size:9.5px;font-weight:800;color:var(--muted);margin-bottom:4px}.japanese{font-size:14px;line-height:1.38;font-weight:680}.meta{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}.chip{font-size:9px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;background:#fff;padding:2px 6px}.strip,.bank{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px;min-height:40px;padding:6px;border:1px dashed #d5c3af;border-radius:11px;background:rgba(255,255,255,.62);margin-bottom:6px;transition:border-color .25s ease,background .25s ease,transform .25s ease}.strip{background:#fff8ec}.strip.ok{border-color:rgba(45,124,92,.45);background:#edf8f1;animation:settle .54s ease}.strip.ng{border-color:rgba(168,94,73,.45);background:#fff0e9;animation:shake .36s ease}.empty{font-size:10px;color:#9a8d7f;line-height:1.6}.token{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 8px;font-size:11.5px;font-weight:620;color:var(--ink);min-height:30px;transition:transform .18s ease,background .18s ease,border-color .18s ease}.token:not(:disabled):active{transform:scale(.96)}.token.answer{background:#fff1db}.token.locked{pointer-events:none}.controls{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:5px;margin:6px 0}.btn{min-height:31px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:700;font-size:10.5px}.btn.main{background:var(--accent);color:#fff;border-color:var(--accent)}.btn:disabled{opacity:.34}.feedback{padding:7px 8px;border-radius:11px;margin-top:6px;font-size:10.5px;line-height:1.45;animation:feedbackIn .26s ease}.feedback.ok{background:#e4f2eb;color:#1f6148}.feedback.ng{background:#fbe6dc;color:#7b3a1f}.answerText{font-weight:800;margin-top:2px}.explanation{margin-top:2px}.result{display:none;padding:9px;margin-top:7px}.result.show{display:block}.result h2{font-size:14px;margin:0 0 5px}.result p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.45}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:7px}.stat{background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px;text-align:center}.stat strong{display:block;font-size:15px}.stat span{font-size:9px;color:var(--muted);font-weight:700}@keyframes settle{0%{transform:translateY(0)}42%{transform:translateY(-5px)}100%{transform:translateY(0)}}@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(4px)}}@keyframes feedbackIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:360px){.app{padding:6px 6px 14px}.japanese{font-size:13.5px}.controls{grid-template-columns:1fr}.token{font-size:11px;padding:5px 7px;min-height:29px}}