*{box-sizing:border-box;margin:0;padding:0}html,body,#app{touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:#fff;background:#0f0c29;width:100%;height:100dvh;font-family:PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}#app{background:linear-gradient(#0f0c29 0%,#1a1a2e 50%,#16213e 100%);flex-direction:column;display:flex;position:relative}.top-bar{flex-shrink:0;justify-content:space-between;align-items:center;padding:8px 12px 4px;display:flex}.back-link{color:#64748b;padding:4px 8px;font-size:14px;text-decoration:none}.level-badge{background:linear-gradient(135deg,#00d2ff,#a855f7);border:1px solid #ffffff26;border-radius:14px;padding:5px 18px;font-size:14px;font-weight:800;box-shadow:0 0 12px #00d2ff4d}.score-info{color:#94a3b8;font-size:13px}.streak{color:gold;margin-left:4px}h1{text-align:center;color:#00d2ff;flex-shrink:0;margin:2px 0;font-size:18px;font-weight:800}.stats-bar{color:#94a3b8;justify-content:center;gap:8px;padding:2px 0 4px;font-size:12px;display:flex}.stat{background:#ffffff0a;border-radius:8px;align-items:center;gap:2px;padding:2px 8px;display:inline-flex}.stat-correct{color:#4ade80}.stat-wrong{color:#ef4444}.stat-total{color:#94a3b8}.stat-time{color:#facc15}.round-label{text-align:center;color:#64748b;flex-shrink:0;margin:2px 0;font-size:11px}.round-label b{color:#94a3b8;font-size:13px}.exit-btn{color:#94a3b8;cursor:pointer;vertical-align:middle;background:#ffffff0f;border:none;border-radius:6px;margin-left:6px;padding:2px 8px;font-size:11px}.exit-btn:active{background:#ffffff1f}.question-area{text-align:center;flex:0 0;padding:8px 16px 4px}.question{letter-spacing:4px;min-height:60px;padding:12px 0;font-family:Georgia,serif;font-size:36px;font-weight:700}.frac{vertical-align:middle;flex-direction:column;align-items:center;margin:0 1px;font-size:.7em;line-height:1.1;display:inline-flex}.frac-num{border-bottom:1.5px solid #fff;padding:0 3px 1px}.frac-den{padding:1px 3px 0}.options-area{flex-shrink:0;width:100%;max-width:400px;margin:0 auto;padding:0 16px}.option-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.opt-btn{color:#fff;cursor:pointer;touch-action:manipulation;background:#ffffff0f;border:none;border-radius:14px;height:52px;font-size:20px;font-weight:700;transition:all .15s}.opt-btn:active{background:#00d2ff26;border:1px solid #00d2ff4d;transform:scale(.92)}.opt-btn.correct{animation:.4s pulse-green;color:#00e676!important;background:#00e67633!important;border:2px solid #00e676!important}.opt-btn.wrong{animation:.3s shake;color:#ff5252!important;background:#ff525233!important;border:2px solid #ff5252!important}.opt-btn:disabled{opacity:.7;cursor:default}.opt-btn:disabled:active{transform:none}@keyframes pulse-green{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.feedback-overlay{pointer-events:none;z-index:20;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.feedback-box{text-align:center}.fb-emoji{font-size:80px;animation:.5s ease-out bounceIn}.fb-title{margin-top:8px;font-size:24px;font-weight:800;animation:.5s ease-out fadeUp}.fb-sub{margin-top:6px;font-size:16px;font-weight:600;animation:.6s ease-out fadeUp}@keyframes bounceIn{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.particle{pointer-events:none;z-index:30;animation:particleFly var(--duration,1s) ease-out forwards;font-size:24px;position:fixed}@keyframes particleFly{0%{opacity:1;transform:translate(0)scale(1)rotate(0)}30%{transform:translate(calc(var(--vx)/2),calc(var(--vy)*.6)) scale(1) rotate(calc(var(--r)/3))}70%{opacity:.8;transform:translate(calc(var(--vx)*.85),calc(var(--vy)*.3)) scale(.6) rotate(calc(var(--r)*.6))}to{opacity:0;transform:translate(var(--vx),calc(var(--vy) + 80px)) scale(0) rotate(var(--r))}}.combo-banner{color:#000;z-index:35;white-space:nowrap;pointer-events:none;background:linear-gradient(135deg,#ffd700e6,#ff9500e6);border-radius:20px;padding:12px 32px;font-size:20px;font-weight:800;animation:2s ease-out forwards comboShow;position:fixed;bottom:20%;left:50%;transform:translate(-50%)}@keyframes comboShow{0%{opacity:0;transform:translate(-50%,-50%)scale(0)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.3)}30%{transform:translate(-50%,-50%)scale(1)}90%{opacity:1}to{opacity:0}}.selected-feedback{text-align:center;color:#94a3b8;flex-shrink:0;padding:4px 0;font-size:14px}.explanation{background:#ff52521a;border:1px solid #ff52524d;border-radius:12px;flex-shrink:0;margin:4px 16px 8px;padding:10px 14px}.exp-title{color:#ff5252;margin-bottom:4px;font-size:14px;font-weight:700}.exp-line{color:#94a3b8;margin:2px 0;font-size:13px}.exp-wrong{color:#ff5252;margin-left:4px;font-weight:700;text-decoration:line-through}.exp-right{color:#00e676;margin-left:4px;font-weight:700}.exp-hint{color:gold;margin-top:6px;font-size:13px;line-height:1.5}.level-overlay{z-index:40;background:#0f0c29eb;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.level-notice{text-align:center;border-radius:20px;padding:32px 48px}.level-up{color:#00e676;background:linear-gradient(135deg,#00e67633,#00d2ff26);border:2px solid #00e676;box-shadow:0 0 30px #00e67626}.level-down{color:orange;background:linear-gradient(135deg,#ff525233,#ffa0001a);border:2px solid #ff5252;box-shadow:0 0 30px #ff525226}.lv-emoji{margin-bottom:8px;font-size:48px}.lv-title{margin-bottom:4px;font-size:24px;font-weight:800}.lv-desc{color:#94a3b8;font-size:16px}.result-bg{z-index:50;background:#0f0c29f7;padding:20px;position:fixed;inset:0;overflow-y:auto}.result-box{text-align:center;max-width:400px;margin:0 auto;padding:20px 16px}.r-emoji{margin-bottom:8px;font-size:64px}.r-title{margin:4px 0;font-size:22px;font-weight:800}.r-sub{color:#94a3b8;margin:4px 0 8px;font-size:14px}.r-score{margin:4px 0;font-size:48px;font-weight:800}.r-level{color:#64748b;margin:6px 0;font-size:14px}.score-gold{color:gold}.score-green{color:#00e676}.score-blue{color:#00d2ff}.score-gray{color:#94a3b8}.weak-section{text-align:left;background:#ffffff08;border-radius:12px;margin:12px 0;padding:12px}.weak-title{color:#00d2ff;margin-bottom:8px;font-size:14px;font-weight:700}.weak-desc{color:#94a3b8;font-size:13px}.wrong-list{margin-top:8px}.wrong-item{border-bottom:1px solid #ffffff0a;justify-content:space-between;gap:6px;padding:4px 0;font-size:12px;display:flex}.wrong-item:last-child{border:none}.wi-q{color:#94a3b8;flex:2}.wi-your{color:#ff5252;text-align:center;flex:1;text-decoration:line-through}.wi-correct{color:#00e676;text-align:center;flex:1}.history-section{background:#ffffff08;border-radius:12px;margin:12px 0;padding:12px}.history-bars{align-items:flex-end;gap:3px;height:60px;padding-top:4px;display:flex}.h-bar{background:linear-gradient(#00d2ff,#a855f7);border-radius:3px 3px 0 0;flex:1;min-height:8px;transition:all .3s;position:relative}.h-lv{color:#64748b;white-space:nowrap;font-size:9px;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}.restart-btn{color:#000;cursor:pointer;touch-action:manipulation;background:linear-gradient(135deg,gold,#ff9500);border:none;border-radius:24px;margin-top:8px;padding:14px 40px;font-size:17px;font-weight:700}.restart-btn:active{transform:scale(.95)}.slide-up-enter-active{transition:all .3s}.slide-up-leave-active{transition:all .2s}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translateY(10px)}.pop-in-enter-active{animation:.4s ease-out pop}.pop-in-leave-active{animation:.3s ease-in reverse pop}@keyframes pop{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.combo-enter-active{animation:.3s ease-out comboEntrance}.combo-leave-active{animation:.3s ease-in reverse comboExit}@keyframes comboEntrance{0%{opacity:0;transform:translate(-50%)scale(0)}to{opacity:1;transform:translate(-50%)scale(1)}}@keyframes comboExit{0%{opacity:1;transform:translate(-50%)scale(1)}to{opacity:0;transform:translate(-50%)scale(0)}}.fade-enter-active{transition:opacity .3s}.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}
