*{box-sizing:border-box;font-family:Comic Sans MS,楷体,sans-serif;margin:0;padding:0}body{background-color:#f0f9ff;background-image:linear-gradient(120deg,#a1c4fd,#c2e9fb);color:#333;min-height:100vh;padding:20px}.container{background-color:#fffffff2;border-radius:20px;box-shadow:0 10px 30px #0000001a;margin:0 auto;max-width:900px;overflow:hidden;padding:25px}header{border-bottom:3px dashed #4dabf7;margin-bottom:20px;padding-bottom:15px;text-align:center}h1{color:#1971c2;font-size:2.2rem;margin-bottom:8px;text-shadow:2px 2px 0 #a5d8ff}.subtitle{color:#228be6;font-size:1rem;margin-bottom:10px}.game-stats{background-color:#e7f5ff;border-radius:15px;display:flex;justify-content:space-around;margin-bottom:20px;padding:12px}.stat-box{text-align:center}.stat-value{color:#1971c2;font-size:1.8rem;font-weight:700}.stat-label{color:#495057;font-size:.8rem}.game-area{display:flex;flex-direction:column;gap:20px;margin-bottom:20px}.character-section{background-color:#d0ebff;border-radius:15px;box-shadow:0 5px 15px #0000000d;padding:20px;text-align:center}.current-character{align-items:center;color:#1971c2;display:flex;font-size:8rem;justify-content:center;margin:15px 0;min-height:120px;text-shadow:3px 3px 0 #a5d8ff}.pronunciation-btn{align-items:center;background-color:#339af0;border:none;border-radius:50px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;gap:8px;margin-bottom:10px;padding:12px 20px;transition:all .3s}.pronunciation-btn:hover{background-color:#1c7ed6;transform:scale(1.05)}.hint-text{background-color:#fff;border-left:5px solid #4dabf7;border-radius:8px;color:#495057;font-size:.9rem;margin-top:10px;padding:8px}.pinyin-section{background-color:#f8f9fa;border-radius:15px;box-shadow:0 5px 15px #0000000d;padding:20px}.section-title{border-bottom:2px solid #a5d8ff;color:#1971c2;font-size:1.3rem;margin-bottom:15px;padding-bottom:8px;text-align:center}.pinyin-display-area{background-color:#fff;border:3px dashed #a5d8ff;border-radius:15px;gap:10px;margin-bottom:20px;min-height:80px;padding:15px;text-align:center}.pinyin-display,.pinyin-display-area{align-items:center;display:flex;flex-wrap:wrap;justify-content:center}.pinyin-display{color:#1971c2;font-size:2.2rem;min-height:40px}.selected-pinyin{background-color:#4dabf7;border-radius:8px;color:#fff;display:inline-block;font-size:1.8rem;margin:0 2px;padding:5px 10px}.pinyin-options-container{display:flex;flex-direction:column;gap:15px}.pinyin-letters-section{background-color:#fff;border:2px solid #e7f5ff;border-radius:10px;padding:15px}.consonant-options,.vowel-options{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));margin-top:10px}.pinyin-btn{background-color:#fff;border:2px solid #a5d8ff;border-radius:8px;cursor:pointer;font-size:1.2rem;padding:10px 6px;text-align:center;transition:all .2s}.vowel-btn{border-color:#f783ac}.pinyin-btn:hover{background-color:#e7f5ff;transform:translateY(-3px)}.vowel-btn:hover{background-color:#fff0f6}.pinyin-btn.selected{background-color:#4dabf7;border-color:#1971c2;color:#fff}.vowel-btn.selected{background-color:#f783ac;border-color:#e64980;color:#fff}.tone-options{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(5,1fr);margin-top:10px}.tone-btn{background-color:#fff;border:2px solid #ffd43b;border-radius:8px;cursor:pointer;font-size:1.4rem;padding:10px 6px;text-align:center}.tone-btn:hover{background-color:#fff3bf}.tone-btn.selected{background-color:#ffd43b;border-color:#f59f00;color:#333}.controls{display:flex;gap:15px;justify-content:center;margin-top:20px}.control-btn{align-items:center;border:none;border-radius:50px;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:8px;padding:12px 25px;transition:all .3s}.submit-btn{background-color:#40c057;color:#fff}.submit-btn:hover{background-color:#2f9e44;transform:scale(1.05)}.next-btn{background-color:#339af0;color:#fff}.next-btn:hover{background-color:#1c7ed6;transform:scale(1.05)}.reset-btn{background-color:#ff922b;color:#fff}.reset-btn:hover{background-color:#e67700;transform:scale(1.05)}.feedback{animation:popIn .5s;border-radius:15px;display:none;font-size:1.1rem;font-weight:700;margin-top:20px;padding:15px;text-align:center}.correct-feedback{background-color:#d3f9d8;border:3px solid #40c057;color:#2b8a3e;display:block!important}.wrong-feedback{animation:shake .5s;background-color:#ffe3e3;border:3px solid #ff6b6b;color:#c92a2a;display:block!important}.feedback-icon{font-size:2rem;margin-bottom:5px}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}.wrong-words-section{background-color:#fff9db;border:3px solid #ffd43b;border-radius:15px;margin-top:25px;padding:20px}.wrong-words-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}.wrong-word-item{align-items:center;background-color:#ffe066;border-radius:8px;display:flex;gap:8px;padding:8px 12px}.wrong-word-char{color:#e67700;font-size:1.5rem}.wrong-word-count{align-items:center;background-color:#ffa94d;border-radius:50%;color:#fff;display:flex;font-size:.8rem;height:22px;justify-content:center;width:22px}footer{border-top:1px solid #dee2e6;color:#495057;font-size:.8rem;margin-top:25px;padding-top:15px;text-align:center}@media (max-width:768px){.container{padding:15px}.current-character{font-size:6rem;min-height:100px}.pinyin-display,h1{font-size:1.8rem}.controls{flex-wrap:wrap}.consonant-options,.vowel-options{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}.pinyin-btn{font-size:1.1rem;padding:8px 4px}}.instructions{background-color:#e7f5ff;border-radius:8px;font-size:.9rem;line-height:1.5;margin-bottom:15px;padding:12px}.remove-btn{align-items:center;background-color:#ff6b6b;border:none;border-radius:50%;color:#fff;cursor:pointer;display:inline-flex;font-size:.8rem;height:20px;justify-content:center;margin-left:5px;vertical-align:middle;width:20px}.remove-btn:hover{background-color:#fa5252}.current-pinyin-hint{color:#228be6;font-size:1rem;font-weight:700;margin-bottom:10px;text-align:center}.pinyin-with-tone{display:inline-block;margin:0 2px;position:relative}.tone-mark{color:#e67700;font-size:1.2rem;font-weight:700;position:absolute;right:0;top:-.8em}.pinyin-complete{color:#1971c2;font-size:2rem;letter-spacing:2px}.vowel-section-title{color:#e64980;margin-top:15px}.restart-btn{align-items:center;background-color:#ff6b6b;border:none;border-radius:25px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;gap:8px;margin-top:15px;padding:10px 20px}.restart-btn:hover{background-color:#fa5252;transform:scale(1.05)}.game-selection{margin:30px 0}.game-options{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}.game-option{background:linear-gradient(135deg,#a1c4fd,#c2e9fb);border:2px solid #a5d8ff;border-radius:15px;box-shadow:0 5px 15px #0000001a;color:#1971c2;padding:25px 20px;text-align:center;text-decoration:none;transition:all .3s ease}.game-option:hover{border-color:#4dabf7;box-shadow:0 10px 25px #00000026;transform:translateY(-5px)}.game-option.coming-soon{background:linear-gradient(135deg,#f5f7fa,#e4edf5);border-color:#e7f5ff;color:#495057;cursor:not-allowed}.game-icon{color:#1971c2;font-size:3rem;margin-bottom:15px}.game-option h3{color:#1971c2;font-size:1.3rem;margin:10px 0}.game-option p{color:#495057;font-size:.9rem}
/*# sourceMappingURL=main.76272ed0.css.map*/