*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--primary:#7c3aed;--primary-hover:#6d28d9;--primary-light:#ede9fe;--correct:#16a34a;--correct-dark:#15803d;--correct-light:#dcfce7;--wrong:#dc2626;--wrong-light:#fee2e2;--bg:#faf9ff;--surface:#fff;--text:#1e1b4b;--text-soft:#6b7280;--border:#e5e7eb;--radius-sm:10px;--radius-md:18px;--shadow-sm:0 1px 3px #0000001a;--shadow-md:0 4px 6px #00000012, 0 2px 4px #0000000d;--shadow-lg:0 10px 15px #00000014;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:16px}body{background:var(--bg);margin:0}#app{background:var(--surface);max-width:480px;min-height:100vh;box-shadow:var(--shadow-lg);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.screen{flex-direction:column;flex:1;min-height:100vh;padding:20px 16px;display:flex}button{cursor:pointer;font-family:inherit;font-size:inherit;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:none;line-height:1}.btn-back{color:var(--primary);align-self:flex-start;margin-bottom:8px;padding:8px 0;font-size:15px;font-weight:600}.btn-back:active{opacity:.7}.screen-home{background:linear-gradient(160deg,#f5f3ff 0%,#faf9ff 55%,#fdf4ff 100%);justify-content:center;align-items:center;gap:32px}.app-title{color:var(--primary);letter-spacing:-1px;text-shadow:0 2px 12px #7c3aed2e;font-size:clamp(40px,12vw,56px);font-weight:900}.mode-buttons{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.mode-buttons button{color:#fff;background:var(--primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md), 0 4px 0 #5b21b6;padding:18px;font-size:20px;font-weight:700;transition:transform .1s,box-shadow .1s}.mode-buttons button:hover{background:var(--primary-hover)}.mode-buttons button:active{box-shadow:var(--shadow-sm), 0 1px 0 #5b21b6;transform:translateY(3px)}.mode-buttons button:last-child{box-shadow:var(--shadow-md), 0 4px 0 #be185d;background:linear-gradient(135deg,#f472b6,#8b5cf6)}.mode-buttons button:last-child:active{box-shadow:var(--shadow-sm), 0 1px 0 #be185d}.screen-level{gap:16px}.screen-level h2{color:var(--text);margin-top:8px;font-size:18px;font-weight:700}.level-buttons,.timer-buttons,.order-buttons{gap:8px;display:flex}.dan-buttons{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.btn-level,.btn-timer,.btn-order,.btn-dan{color:var(--primary);background:var(--primary-light);border-radius:var(--radius-sm);border:2px solid #0000;flex:1;padding:13px 8px;font-size:16px;font-weight:600;transition:background .12s,border-color .12s}.btn-level:hover,.btn-timer:hover,.btn-order:hover,.btn-dan:hover{background:#ddd6fe}.btn-level.active,.btn-timer.active,.btn-order.active,.btn-dan.active{color:#fff;background:var(--primary);border-color:var(--primary)}.btn-start{color:#fff;background:var(--correct);border-radius:var(--radius-md);box-shadow:var(--shadow-md), 0 4px 0 var(--correct-dark);margin-top:auto;padding:18px;font-size:20px;font-weight:800;transition:transform .1s,box-shadow .1s}.btn-start:hover{background:var(--correct-dark)}.btn-start:active{box-shadow:var(--shadow-sm), 0 1px 0 var(--correct-dark);transform:translateY(3px)}.btn-kuku-view{color:var(--primary);background:var(--primary-light);border-radius:var(--radius-sm);text-align:center;border:2px solid #c4b5fd;width:100%;padding:11px 16px;font-size:15px;font-weight:700;transition:background .12s,border-color .12s}.btn-kuku-view:hover{border-color:var(--primary);background:#ddd6fe}.kuku-overlay{z-index:100;background:#1e1b4b73;justify-content:center;align-items:center;padding:24px 16px;display:none;position:absolute;inset:0}.kuku-overlay.open{display:flex}.kuku-table-card{background:var(--surface);border-radius:var(--radius-md);width:100%;max-width:320px;box-shadow:var(--shadow-lg);flex-direction:column;gap:12px;padding:24px 20px 20px;display:flex}.kuku-table-title{color:var(--primary);text-align:center;letter-spacing:1px;font-size:22px;font-weight:900}.kuku-table-list{flex-direction:column;gap:4px;list-style:none;display:flex}.kuku-table-row{border-radius:var(--radius-sm);background:var(--primary-light);color:var(--text);letter-spacing:2px;padding:9px 14px;font-size:19px;font-weight:700}.btn-kuku-close{color:#fff;background:var(--primary);border-radius:var(--radius-sm);margin-top:4px;padding:13px;font-size:16px;font-weight:700;transition:background .12s}.btn-kuku-close:hover{background:var(--primary-hover)}.screen-play,.screen-kisoku,.screen-anki{justify-content:space-between;gap:0;padding:0}.progress-bar-wrap{background:#e5e7eb;flex-shrink:0;width:100%;height:6px}.progress-bar{background:var(--primary);border-radius:0 3px 3px 0;height:100%;transition:width .3s}.play-header{flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.header-text{color:var(--text-soft);font-size:14px;font-weight:600}.timer-display{color:var(--primary);text-align:right;align-items:center;gap:4px;min-width:36px;font-size:28px;font-weight:900;transition:color .3s;display:flex}.timer-display:before{content:"⏱";opacity:.7;font-size:16px}.timer-display.timer-warn{color:var(--wrong);animation:.5s ease-in-out infinite alternate timer-pulse}@keyframes timer-pulse{0%{opacity:1}to{opacity:.45}}.question-area{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:16px;display:flex}.question-display{color:var(--text);text-align:center;letter-spacing:3px;font-size:clamp(32px,9vw,48px);font-weight:900}.answer-display{min-width:120px;min-height:60px;color:var(--primary);border-bottom:3px solid var(--primary);flex-shrink:0;justify-content:center;align-items:center;gap:2px;padding:8px 24px 12px;font-size:42px;font-weight:700;display:flex}.cursor{background:var(--primary);border-radius:2px;width:3px;height:1em;animation:.85s step-end infinite blink;display:inline-block}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.feedback-area{min-height:56px;color:var(--text-soft);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex}.icon-correct,.icon-wrong{font-size:52px;animation:.15s ease-out scale-in}.icon-correct{color:var(--correct)}.icon-wrong{color:var(--wrong)}@keyframes scale-in{0%{opacity:.5;transform:scale(.3)}to{opacity:1;transform:scale(1)}}.flash-correct{animation:.18s ease-out forwards flash-green}.flash-wrong{animation:.18s ease-out forwards flash-red}@keyframes flash-green{0%{background-color:var(--correct-light)}to{background-color:#0000}}@keyframes flash-red{0%{background-color:var(--wrong-light)}to{background-color:#0000}}.keypad{padding:8px 12px max(24px, env(safe-area-inset-bottom,24px));border-top:1px solid var(--border);background:#f9fafb;flex-shrink:0;grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.key{height:68px;color:var(--text);border:2px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 3px 0 var(--border);background:#fff;padding:0;font-size:24px;font-weight:700;transition:transform 80ms,box-shadow 80ms,background 80ms}.key:hover{background:var(--primary-light);border-color:#c4b5fd}.key:active{box-shadow:0 1px 0 var(--border);transform:translateY(2px)}.key-del{color:var(--text-soft);font-size:20px}.key-spacer{display:block}.key-ok{color:#fff;background:var(--correct);border-color:var(--correct);box-shadow:0 3px 0 var(--correct-dark);grid-column:1/-1;height:56px;font-size:18px;font-weight:800}.key-ok:hover:not(:disabled){background:var(--correct-dark);border-color:var(--correct-dark)}.key-ok:active:not(:disabled){box-shadow:0 1px 0 var(--correct-dark);transform:translateY(2px)}.key-ok:disabled{color:#9ca3af;cursor:not-allowed;background:#d1d5db;border-color:#d1d5db;box-shadow:0 3px #9ca3af}.screen-result{align-items:center;gap:20px;padding:24px 20px}.banner-perfect{color:var(--primary);background:var(--primary-light);border-radius:100px;padding:10px 24px;font-size:26px;font-weight:800;animation:.4s cubic-bezier(.175,.885,.32,1.275) bounce-in}@keyframes bounce-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.trophy{filter:grayscale(.5)opacity(.6);font-size:72px}.trophy-gold{filter:none;animation:.5s ease-out trophy-glow}@keyframes trophy-glow{0%{transform:scale(.5)rotate(-12deg)}to{transform:scale(1)rotate(0)}}.score{color:var(--primary);letter-spacing:-2px;font-size:60px;font-weight:900;line-height:1}.encourage{color:var(--text-soft);text-align:center;font-size:15px}.stats{border-collapse:collapse;width:100%;font-size:15px}.stats th,.stats td{border-bottom:1px solid var(--border);text-align:left;padding:10px 12px}.stats th{color:var(--text-soft);width:50%;font-weight:500}.stats td{color:var(--text);font-weight:700}.wrong-list{flex-direction:column;gap:6px;width:100%;max-height:160px;list-style:none;display:flex;overflow-y:auto}.wrong-list li{background:var(--wrong-light);border-radius:var(--radius-sm);color:var(--wrong);padding:8px 12px;font-size:15px;font-weight:600}.result-actions{flex-direction:column;gap:10px;width:100%;margin-top:auto;display:flex}.btn-retry{color:#fff;background:var(--primary);border-radius:var(--radius-md);box-shadow:var(--shadow-md), 0 4px 0 #5b21b6;padding:16px;font-size:18px;font-weight:700;transition:transform .1s,box-shadow .1s}.btn-retry:active{box-shadow:var(--shadow-sm), 0 1px 0 #5b21b6;transform:translateY(3px)}.btn-home{color:var(--primary);background:var(--primary-light);border-radius:var(--radius-md);padding:16px;font-size:18px;font-weight:700;transition:background .12s}.btn-home:hover{background:#ddd6fe}.retry-info{color:var(--text-soft);font-size:13px}.screen-mini-menu{background:linear-gradient(160deg,#f5f3ff 0%,#faf9ff 100%);align-items:center;gap:24px;padding:28px 16px}.mini-menu-title{color:var(--primary);font-size:28px;font-weight:900}.mini-cards{flex-direction:column;flex:1;gap:12px;width:100%;max-width:380px;display:flex}.mini-card{border-radius:var(--radius-md);box-shadow:var(--shadow-md), 0 4px 0 #ddd6fe;background:#fff;border:2px solid #ede9fe;flex-direction:column;align-items:flex-start;gap:6px;padding:20px;transition:transform .1s,box-shadow .1s,border-color .12s;display:flex}.mini-card:hover{border-color:#c4b5fd}.mini-card:active{box-shadow:var(--shadow-sm), 0 1px 0 #ddd6fe;transform:translateY(3px)}.mini-card-name{color:var(--primary);font-size:20px;font-weight:800}.mini-card-desc{color:var(--text-soft);font-size:14px}.anki-memory{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:24px;padding:20px;display:flex}.anki-hint{color:var(--text-soft);text-align:center;padding:0 16px;font-size:16px;font-weight:600}.anki-digit{color:var(--primary);letter-spacing:8px;justify-content:center;align-items:center;min-height:120px;font-size:100px;font-weight:900;animation:.2s cubic-bezier(.175,.885,.32,1.275) digit-pop;display:flex}@keyframes digit-pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.anki-slots{flex-wrap:wrap;justify-content:center;gap:12px;padding:16px;display:flex}.anki-slot{width:56px;height:64px;color:var(--text-soft);border-radius:var(--radius-sm);border:2px solid var(--border);background:#f3f4f6;justify-content:center;align-items:center;font-size:32px;font-weight:800;transition:background .12s,border-color .12s,color .12s;display:flex}.anki-slot.filled{color:var(--primary);background:var(--primary-light);border-color:#c4b5fd}@media (prefers-reduced-motion:reduce){.cursor{opacity:1;animation:none}.timer-display.timer-warn{color:var(--wrong);animation:none}.flash-correct,.flash-wrong,.banner-perfect,.icon-correct,.icon-wrong,.anki-digit,.trophy-gold{animation:none}.progress-bar{transition:none}}.screen-awasete{gap:0;padding:0}.awasete-hint{color:var(--text-soft);text-align:center;flex-shrink:0;padding:8px 16px;font-size:14px}.awasete-total{text-align:center;color:var(--text);flex-shrink:0;padding:12px 16px;font-size:30px;font-weight:900}.awasete-cards{flex:1;grid-template-columns:repeat(3,1fr);gap:10px;padding:8px 16px 16px;display:grid}.awasete-card{height:80px;color:var(--text);border:2px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm), 0 3px 0 var(--border);background:#fff;font-size:26px;font-weight:800;transition:transform 80ms,box-shadow 80ms,background .1s,border-color .1s}.awasete-card:hover{background:var(--primary-light);border-color:#c4b5fd}.awasete-card:active{box-shadow:var(--shadow-sm), 0 1px 0 var(--border);transform:translateY(2px)}.awasete-card.selected{color:#fff;background:var(--primary);border-color:var(--primary);box-shadow:var(--shadow-sm), 0 3px 0 #5b21b6}