:root{--bg:#0f0f1a;--bg-card:#1a1a2e;--bg-card-hover:#22223a;--primary:#6c63ff;--primary-light:#8b83ff;--success:#4ade80;--error:#f87171;--warning:#fbbf24;--text:#e2e8f0;--text-dim:#94a3b8;--radius:12px;--radius-sm:8px;--shadow:0 4px 24px #0000004d}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-tap-highlight-color:transparent;font-size:16px}body{background:var(--bg);color:var(--text);min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;overflow-x:hidden}#app{flex-direction:column;max-width:480px;min-height:100dvh;margin:0 auto;padding:16px;display:flex}.header{align-items:center;gap:12px;padding:8px 0 16px;display:flex}.header h1{background:linear-gradient(135deg, var(--primary), var(--primary-light));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.4rem;font-weight:700}.btn-back{background:var(--bg-card);color:var(--text);cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.2rem;display:flex}.btn-back:active{background:var(--bg-card-hover)}.home-grid{flex:1;grid-template-columns:1fr 1fr;align-content:start;gap:12px;padding-top:8px;display:grid}.game-card{background:var(--bg-card);border-radius:var(--radius);text-align:center;cursor:pointer;color:inherit;border:2px solid #0000;flex-direction:column;align-items:center;gap:8px;padding:20px 16px;text-decoration:none;transition:border-color .15s,transform .1s;display:flex}.game-card:active{transform:scale(.97)}.game-card:hover{border-color:var(--primary)}.game-card .icon{font-size:2rem}.game-card .label{font-size:.95rem;font-weight:600}.game-card .desc{color:var(--text-dim);font-size:.75rem;line-height:1.3}.game-card.full-width{grid-column:1/-1}.game{flex-direction:column;flex:1;gap:16px;display:flex}.flashcard{background:var(--bg-card);border-radius:var(--radius);text-align:center;cursor:pointer;min-height:200px;box-shadow:var(--shadow);-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:32px 20px;transition:transform .3s;display:flex}.flashcard.flipped{transform:rotateY(0)}.flashcard .number{color:var(--primary);font-size:3.5rem;font-weight:800}.flashcard .word{font-size:2rem;font-weight:700}.flashcard .hint{color:var(--text-dim);font-size:.9rem}.flashcard .tap-hint{color:var(--text-dim);opacity:.6;margin-top:8px;font-size:.75rem}.card-actions{gap:12px;display:flex}.card-actions button{border-radius:var(--radius-sm);cursor:pointer;border:none;flex:1;padding:14px;font-size:1rem;font-weight:600;transition:opacity .1s}.card-actions button:active{opacity:.8}.btn-wrong{color:var(--error);background:#f8717126}.btn-correct{color:var(--success);background:#4ade8026}.qcm-question{background:var(--bg-card);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);padding:24px}.qcm-question .prompt{color:var(--text-dim);margin-bottom:8px;font-size:.9rem}.qcm-question .value{color:var(--primary);font-size:3rem;font-weight:800}.qcm-options{grid-template-columns:1fr 1fr;gap:10px;display:grid}.qcm-option{background:var(--bg-card);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;text-align:center;border:2px solid #0000;padding:16px 12px;font-size:1rem;font-weight:600;transition:border-color .15s,background .15s}.qcm-option:active{transform:scale(.97)}.qcm-option.correct{border-color:var(--success);background:#4ade801a}.qcm-option.wrong{border-color:var(--error);background:#f871711a}.qcm-option.disabled{pointer-events:none;opacity:.5}.score-bar{color:var(--text-dim);justify-content:space-between;align-items:center;padding:8px 4px;font-size:.85rem;display:flex}.score-bar .score{color:var(--text);font-weight:700}.speed-timer{text-align:center;padding:12px}.speed-timer .time{font-variant-numeric:tabular-nums;font-size:2.5rem;font-weight:800}.speed-timer .time.urgent{color:var(--error)}.speed-input-area{background:var(--bg-card);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:16px;padding:24px 20px;display:flex}.speed-input-area .number{color:var(--primary);font-size:3.5rem;font-weight:800}.speed-input-area input{border-radius:var(--radius-sm);background:var(--bg);width:100%;max-width:280px;color:var(--text);text-align:center;border:2px solid #333;outline:none;padding:14px 16px;font-size:1.2rem;font-weight:600;transition:border-color .15s}.speed-input-area input:focus{border-color:var(--primary)}.speed-input-area input.correct{border-color:var(--success)}.speed-input-area input.wrong{border-color:var(--error)}.write-area{background:var(--bg-card);border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:16px;padding:24px 20px;display:flex}.write-area .prompt-label{color:var(--text-dim);font-size:.85rem}.write-area .prompt-value{color:var(--primary);font-size:3rem;font-weight:800}.write-area input{border-radius:var(--radius-sm);background:var(--bg);width:100%;max-width:280px;color:var(--text);text-align:center;border:2px solid #333;outline:none;padding:14px 16px;font-size:1.2rem;font-weight:600;transition:border-color .15s}.write-area input:focus{border-color:var(--primary)}.write-feedback{text-align:center;border-radius:var(--radius-sm);padding:12px;font-size:1.1rem;font-weight:600}.write-feedback.correct{color:var(--success);background:#4ade801a}.write-feedback.wrong{color:var(--error);background:#f871711a}.table-controls{flex-wrap:wrap;gap:8px;display:flex}.table-controls button{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #333;border-radius:20px;padding:8px 14px;font-size:.8rem}.table-controls button.active{border-color:var(--primary);color:var(--primary);background:#6c63ff1a}.table-grid{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.table-cell{background:var(--bg-card);border-radius:var(--radius-sm);text-align:center;padding:10px 4px;font-size:.75rem;line-height:1.3}.table-cell .num{color:var(--primary);margin-bottom:2px;font-size:1rem;font-weight:800}.table-cell .wrd{word-break:break-word;font-size:.7rem;font-weight:600}.btn{border-radius:var(--radius-sm);cursor:pointer;text-align:center;border:none;padding:14px 24px;font-size:1rem;font-weight:600;transition:opacity .1s}.btn:active{opacity:.8}.btn-primary{background:var(--primary);color:#fff}.btn-ghost{background:var(--bg-card);color:var(--text)}.results{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:32px 16px;display:flex}.results .big-score{color:var(--primary);font-size:4rem;font-weight:800}.results .label{color:var(--text-dim);font-size:1.1rem}.results .detail{color:var(--text-dim);font-size:.9rem}.stats-section{background:var(--bg-card);border-radius:var(--radius);margin-bottom:12px;padding:16px}.stats-section h3{color:var(--text-dim);margin-bottom:8px;font-size:.9rem}.stat-row{justify-content:space-between;padding:6px 0;font-size:.95rem;display:flex}.stat-value{font-weight:700}.weak-list{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.weak-badge{color:var(--error);background:#f8717126;border-radius:12px;padding:4px 10px;font-size:.8rem;font-weight:600}.mode-toggle{background:var(--bg-card);border-radius:8px;display:flex;overflow:hidden}.mode-toggle button{color:var(--text-dim);cursor:pointer;background:0 0;border:none;flex:1;padding:10px;font-size:.85rem;font-weight:600}.mode-toggle button.active{background:var(--primary);color:#fff}.start-screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;display:flex}.start-screen h2{font-size:1.5rem}.start-screen p{color:var(--text-dim);max-width:300px;font-size:.9rem;line-height:1.5}.range-selector{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.range-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:1px solid #333;border-radius:20px;padding:8px 14px;font-size:.8rem}.range-btn.active{border-color:var(--primary);color:var(--primary);background:#6c63ff1a}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.2s ease-out fadeIn}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.shake{animation:.3s shake}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.pop{animation:.2s pop}.footer{text-align:center;color:var(--text-dim);opacity:.5;padding:16px 0 8px;font-size:.7rem}