:root{--primary:#6b4423;--primary-dark:#4a2f18;--secondary:#d4af37;--accent:#8b4513;--bg-dark:#1a1510;--bg-card:#1e1914f2;--bg-gradient:radial-gradient(ellipse at center, #2d2520 0%, #1a1510 60%, #0d0a08 100%);--text:#fff8e7;--text-muted:#b8a890;--shadow:0 8px 32px #6b44234d;--glow:0 0 20px #d4af374d;--radius:12px;--font:"M PLUS Rounded 1c", sans-serif;--correct:#4caf50;--wrong:#f44336}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--bg-gradient);min-height:100dvh;color:var(--text);touch-action:manipulation;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background-image:radial-gradient(circle at 20% 30%,#d4af370d 0%,#0000 50%),radial-gradient(circle at 80% 70%,#8b45130d 0%,#0000 40%);width:100%;height:100%;position:fixed;top:0;left:0}.screen{z-index:1;min-height:100dvh;padding:2rem 1rem;display:none;position:relative}.screen.active{padding-bottom:max(2rem, env(safe-area-inset-bottom));justify-content:center;align-items:center;animation:.5s fadeIn;display:flex}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.container{background:var(--bg-card);border:2px solid var(--primary);border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;width:100%;max-width:500px;padding:2rem;position:relative}.btn-mode:focus-visible,.btn-config:focus-visible,.btn-count:focus-visible,.choice-btn:focus-visible,.fillin-input:focus-visible,.btn-hint:focus-visible,.btn-submit:focus-visible,.btn-quit:focus-visible,.btn-review:focus-visible,.btn-retry:focus-visible,.btn-home:focus-visible,.back-link:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}.title{color:var(--secondary);text-shadow:2px 2px 4px #00000080;margin-bottom:.5rem;font-size:2.5rem;font-weight:900}.subtitle{color:var(--text-muted);margin-bottom:2rem}.mode-select h2{color:var(--text);margin-bottom:1rem;font-size:1.2rem}.btn-mode{background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);border:2px solid var(--secondary);border-radius:var(--radius);cursor:pointer;flex-direction:column;align-items:center;width:100%;margin-bottom:1rem;padding:1.2rem;transition:all .3s;display:flex}.btn-mode:hover{box-shadow:var(--glow);transform:translateY(-2px)}.mode-icon{margin-bottom:.3rem;font-size:2rem}.mode-name{color:var(--text);font-size:1.3rem;font-weight:700}.mode-desc{color:var(--text-muted);font-size:.85rem}.config-section{border-top:1px solid #d4af3733;flex-direction:column;gap:1.5rem;margin-top:1.5rem;padding-top:1.5rem;display:flex}.config-group h3{color:var(--text-muted);margin-bottom:.6rem;font-size:.95rem}.config-buttons{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.btn-config,.btn-count{border:1px solid var(--primary);min-height:40px;color:var(--text-muted);cursor:pointer;font-family:var(--font);background:0 0;border-radius:20px;padding:.4rem .8rem;font-size:.85rem;transition:all .2s}.btn-config:hover,.btn-count:hover,.btn-config.active,.btn-count.active{background:var(--primary);border-color:var(--secondary);color:var(--text);box-shadow:0 0 8px #d4af3733}.back-link{color:var(--text-muted);margin-top:1.5rem;font-size:.9rem;text-decoration:none;transition:color .3s;display:inline-block}.back-link:hover{color:var(--secondary)}.game-container{max-width:600px;position:relative}.btn-quit{border:2px solid var(--text-muted);width:40px;height:40px;color:var(--text-muted);cursor:pointer;background:#ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex;position:absolute;top:-40px;right:0}.parents-guide-trigger-btn{min-height:40px}.btn-quit:hover{background:var(--wrong);border-color:var(--wrong);color:#fff;transform:rotate(90deg)}.progress-bar{background:#6b44234d;border-radius:15px;height:30px;margin-bottom:1.5rem;position:relative;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);border-radius:15px;width:5%;height:100%;transition:width .5s;position:absolute;top:0;left:0}.progress-text{color:var(--text);text-shadow:1px 1px 2px #00000080;font-size:.9rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.question-area{border-radius:var(--radius);background:#d4af371a;border:1px solid #d4af374d;margin-bottom:1.5rem;padding:1.5rem}.question-header{justify-content:space-between;align-items:center;margin-bottom:.8rem;display:flex}.difficulty-badge{background:var(--primary);color:var(--secondary);border:1px solid var(--secondary);border-radius:20px;padding:.3rem .8rem;font-size:.8rem;font-weight:700}.difficulty-badge.level-1{color:#4caf50;background:#4caf5033;border-color:#4caf50}.difficulty-badge.level-2{color:#ffc107;background:#ffc10733;border-color:#ffc107}.difficulty-badge.level-3{color:#f44336;background:#f4433633;border-color:#f44336}.keyboard-hint{color:var(--text-muted);opacity:.7;font-size:.75rem}.question-label{color:var(--text-muted);margin-bottom:.8rem;font-size:.9rem}.question-text{color:var(--secondary);overflow-wrap:anywhere;word-break:break-word;font-size:1.8rem;font-weight:700;line-height:1.4}.question-text .blank{border-bottom:3px solid var(--secondary);min-width:3em;margin:0 .2em;display:inline-block}.choices-grid{grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:1rem;display:grid}.choice-btn{background:var(--bg-card);border:2px solid var(--primary);border-radius:var(--radius);color:var(--text);font-family:var(--font);cursor:pointer;text-align:center;overflow-wrap:anywhere;word-break:break-word;justify-content:center;align-items:center;min-height:70px;padding:1rem .8rem;font-size:.95rem;line-height:1.4;transition:all .3s;display:flex}.choice-btn:hover:not(:disabled){background:var(--primary);border-color:var(--secondary);transform:translateY(-2px)}.choice-btn.correct{background:var(--correct)!important;border-color:var(--correct)!important;color:#fff!important}.choice-btn.wrong{background:var(--wrong)!important;border-color:var(--wrong)!important;color:#fff!important}.choice-btn:disabled{opacity:.7;cursor:not-allowed}.fillin-area{margin-bottom:1rem}.fillin-input{width:100%;font-size:1.3rem;font-family:var(--font);border:2px solid var(--primary);border-radius:var(--radius);color:var(--text);text-align:center;background:#ffffff1a;margin-bottom:1rem;padding:1rem}.fillin-input:focus{border-color:var(--secondary);box-shadow:var(--glow);outline:none}.fillin-input::placeholder{color:var(--text-muted)}.fillin-buttons{justify-content:center;gap:1rem;display:flex}.btn-hint{border:2px solid var(--text-muted);color:var(--text-muted);border-radius:var(--radius);cursor:pointer;font-family:var(--font);background:0 0;padding:.8rem 1.5rem;font-size:1rem;transition:all .3s}.btn-hint:hover{border-color:var(--secondary);color:var(--secondary)}.btn-submit{background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);border:2px solid var(--secondary);color:var(--text);border-radius:var(--radius);cursor:pointer;font-family:var(--font);padding:.8rem 2rem;font-size:1rem;font-weight:700;transition:all .3s}.btn-submit:hover{box-shadow:var(--glow);transform:translateY(-2px)}.feedback{border-radius:var(--radius);opacity:0;min-height:60px;margin-bottom:1rem;padding:1rem;font-size:1rem;font-weight:700;transition:opacity .3s}.feedback.show{opacity:1}.feedback.correct{border:1px solid var(--correct);color:var(--correct);background:#4caf5033}.feedback.wrong{border:1px solid var(--wrong);color:var(--wrong);background:#f4433633}.score-display{justify-content:center;gap:2rem;font-size:1.2rem;display:flex}.score-correct{color:var(--correct)}.score-wrong{color:var(--wrong)}.score-accuracy{color:var(--secondary)}.result-title{color:var(--secondary);margin-bottom:1.5rem;font-size:2rem}.result-card{border-radius:var(--radius);background:#d4af371a;border:1px solid #d4af374d;margin-bottom:1.5rem;padding:1.5rem}.result-row{border-bottom:1px solid #d4af3733;justify-content:space-between;padding:.8rem 0;display:flex}.result-row:last-child{border-bottom:none}.result-label{color:var(--text-muted)}.result-value{color:var(--text);font-weight:700}.result-value.new-record{color:var(--secondary);animation:1s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.result-grade{margin-bottom:1.5rem;font-size:3rem}.result-buttons{justify-content:center;gap:1rem;display:flex}.btn-retry,.btn-home{border-radius:var(--radius);font-family:var(--font);cursor:pointer;padding:1rem 2rem;font-size:1rem;font-weight:700;transition:all .3s}.btn-retry{background:linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);border:2px solid var(--secondary);color:var(--text)}.btn-retry:hover{box-shadow:var(--glow);transform:translateY(-2px)}.btn-home{border:2px solid var(--text-muted);color:var(--text-muted);background:0 0}.btn-home:hover{border-color:var(--secondary);color:var(--secondary)}@media (width<=768px){.question-text{font-size:1.5rem}.choice-btn{min-height:60px;padding:.8rem .6rem;font-size:.9rem}}@media (width<=480px){.container{margin:.5rem;padding:1.5rem 1rem}.title{font-size:2rem}.btn-mode{padding:1rem}.mode-icon{font-size:1.5rem}.mode-name{font-size:1.1rem}.question-area{padding:1rem}.question-text{font-size:1.3rem}.choices-grid{gap:.5rem}.choice-btn{min-height:55px;padding:.7rem .5rem;font-size:.85rem}.fillin-input{padding:.8rem;font-size:16px!important}.fillin-buttons{flex-direction:column}.score-display{gap:1.5rem;font-size:1rem}.result-buttons{flex-direction:column}.btn-retry,.btn-home{width:100%}.btn-count{padding:.4rem .8rem;font-size:.8rem}.keyboard-hint{display:none}}@media (width<=360px){.container{padding:1rem .75rem}.question-text{font-size:1.15rem}.choices-grid{grid-template-columns:1fr}.choice-btn{min-height:48px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.combo-popup{color:var(--secondary);text-shadow:0 0 20px #ffa500cc;pointer-events:none;z-index:1000;font-size:3rem;font-weight:900;animation:1.2s ease-out forwards popupFade;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes popupFade{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.2)}to{opacity:0;transform:translate(-50%,-150%)scale(1)}}.confetti{z-index:999;width:10px;height:10px;animation:3s linear forwards confettiFall;position:fixed;top:-10px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}.result-title-badge{color:#fff;text-shadow:0 2px 4px #0003;background:linear-gradient(135deg,gold,orange);border-radius:50px;margin:1rem 0;padding:.8rem 2rem;font-size:1.5rem;font-weight:700;animation:.8s cubic-bezier(.175,.885,.32,1.275) badgePop;display:inline-block;box-shadow:0 4px 15px #ffa50066}.result-title-badge.rank-s{background:linear-gradient(135deg,gold,#fdb931)}.result-title-badge.rank-a{background:linear-gradient(135deg,silver,#e0e0e0)}.result-title-badge.rank-b{background:linear-gradient(135deg,#cd7f32,#b87333)}.result-title-badge.rank-c{background:linear-gradient(135deg,#8bc34a,#4caf50)}@keyframes badgePop{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.review-section{border-top:1px dashed #fff3;margin:2rem 0;padding-top:2rem;animation:.5s .5s both fadeIn}.btn-review{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:30px;margin-bottom:1.5rem;padding:.8rem 2rem;font-size:1.1rem;font-weight:700;transition:all .2s;box-shadow:0 4px #d35400}.btn-review:hover{transform:translateY(-2px);box-shadow:0 6px #d35400}.btn-review:active{transform:translateY(2px);box-shadow:0 2px #d35400}.wrong-list-container{background:#0003;border-radius:12px;max-width:500px;margin:0 auto;padding:1rem}.wrong-list-container h3{color:var(--text-muted);margin-bottom:1rem;font-size:1rem}.wrong-answer-list{text-align:left;max-height:200px;margin:0;padding:0;list-style:none;overflow-y:auto}.wrong-answer-item{overflow-wrap:anywhere;word-break:break-word;border-bottom:1px solid #ffffff1a;padding:.8rem;font-size:.9rem}.wrong-answer-item:last-child{border-bottom:none}.wrong-q{color:var(--text);margin-bottom:.3rem;font-weight:700;display:block}.wrong-a{color:var(--correct);font-size:.85rem}.wrong-a:before{content:"正解: ";opacity:.7}.flex-back-link{color:var(--text-muted);cursor:pointer;background:#6b442333;border:1px solid #d4af3733;border-radius:20px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.5rem 1.2rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .2s;display:inline-flex}.flex-back-link:hover{background:var(--primary);border-color:var(--secondary);color:var(--text);transform:translateY(-1px);box-shadow:0 0 10px #d4af3733}.keyboard-container{border-radius:var(--radius);background:#00000040;border:1px solid #d4af3726;max-width:440px;margin:1.5rem auto;padding:1rem;box-shadow:inset 0 2px 8px #00000080;display:none!important}.kb-grid{grid-template-columns:repeat(5,1fr);gap:.45rem;display:grid}.kb-key{aspect-ratio:1.25;color:var(--text);border:1.5px solid var(--primary);cursor:pointer;-webkit-user-select:none;user-select:none;font-size:1.15rem;font-weight:700;font-family:var(--font);background:linear-gradient(#533b28 0%,#3e2a1b 100%);border-radius:8px;justify-content:center;align-items:center;transition:all 50ms;display:flex;box-shadow:0 3px #23170f}.kb-key:hover{border-color:var(--secondary)}.kb-key:active{transform:translateY(2px);box-shadow:0 1px #23170f}.kb-key.key-action{background:linear-gradient(180deg, var(--accent) 0%, #683008 100%);border-color:var(--secondary);font-size:1rem}.kb-key.key-clear{background:linear-gradient(#c0392b 0%,#962d22 100%);border-color:#e74c3c;box-shadow:0 3px #6d1b11}.kb-key.key-clear:active{box-shadow:0 1px #6d1b11}@media (width<=480px){.kb-key{border-radius:6px;font-size:.95rem;box-shadow:0 2px #23170f}.kb-key:active{transform:translateY(1.5px);box-shadow:0 .5px #23170f}.keyboard-container{margin:1rem auto;padding:.6rem}.kb-grid{gap:.35rem}}body.reduce-motion *,body.reduce-motion :before,body.reduce-motion :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}body.text-large{font-size:1.15rem}body.text-large .display-text{font-size:2.8rem}body.text-large .choice-btn{font-size:1.25rem}body.text-large #fillin-input{font-size:1.6rem}@media (width<=480px){body.text-large .choices-grid{grid-template-columns:1fr!important}}