@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");@font-face{font-family:ChinesePixelFont;src:url(/assets/fonts/ark-pixel-12px-zh_cn.ttf) format("truetype");font-weight:400;font-style:normal}body{font-family:Press Start\ 2P;background-color:#5d7a68;color:white;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;padding:20px;box-sizing:border-box;text-rendering:optimizeSpeed;image-rendering:pixelated;position:relative;overflow:hidden}body:before{content:"";position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;background-image:url(/assets/bg.png);background-size:cover;background-position:50%;filter:blur(2px);z-index:-1;background-color:rgba(0,0,0,.3);background-blend-mode:multiply;opacity:.8}#loading-screen{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#5d7a68;z-index:100}.spinner{border:8px solid rgba(255,255,255,.2);border-left-color:#ffffff;border-radius:50%;width:60px;height:60px;animation:spin 1s linear infinite}#loading-screen p{margin-top:20px;color:white;font-weight:400}@keyframes spin{to{transform:rotate(1turn)}}#game-container{width:100%;max-width:600px;min-height:650px;text-align:center;box-sizing:border-box;position:relative}#top-bar{display:flex;align-items:flex-start;margin-bottom:20px}#character-container{width:80px;position:relative;margin-left:20px}#character-container.jump-infinite{animation:jump-infinite .5s infinite}#character-container img{width:100%;image-rendering:pixelated}#character-sword-img{position:absolute;top:calc(50% + 40px);left:calc(50% + 30px);width:120%;transform:translate(-40%,-60%) rotate(25deg);transform-origin:bottom right;pointer-events:none;z-index:-1}#score-container{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1.2rem;color:white;text-shadow:2px 2px 0 #4a5c4f;background-color:rgba(0,0,0,.2);padding:5px 10px;border-radius:5px;margin-left:auto}#score-container.score-increase{animation:score-increase-animation .5s ease-in-out}@keyframes score-increase-animation{0%{transform:scale(1)}50%{transform:scale(1.2);color:#ffd700}to{transform:scale(1)}}h1{font-family:ChinesePixelFont,Press Start\ 2P;font-size:2.2rem;text-shadow:4px 4px 0 #4a5c4f;margin-top:0;padding-top:20px;margin-bottom:40px}#level-selection-screen{display:flex;flex-direction:column;padding:0;max-height:500px;overflow-y:auto;margin-bottom:40px;align-items:center;width:100%}#level-selection-screen::-webkit-scrollbar{display:none}#level-selection-screen{-ms-overflow-style:none;scrollbar-width:none}.level-card.unit-card{background-color:#b2d977;border:4px solid #4a5c4f;border-radius:10px;padding:0;display:flex;flex-direction:column;justify-content:flex-start;cursor:pointer;transition:transform .1s ease-in-out;margin-bottom:10px;overflow:hidden;width:80%;max-width:350px;min-height:120px}.level-card.unit-card:hover{transform:translateY(-2px)}.unit-card-top-group{display:flex;justify-content:flex-end;align-items:flex-end;width:100%;padding:15px 15px 0;box-sizing:border-box}.speech-bubble{background-color:white;color:#4a5c4f;padding:10px 15px;border-radius:15px;position:relative;margin-right:15px;font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;margin-bottom:20px}.speech-bubble:after{content:"";position:absolute;bottom:10px;right:-6px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid white}.level-card.unit-card .level-icon{width:64px;height:64px;image-rendering:pixelated;flex-shrink:0}.level-card.unit-card .level-info{width:100%;text-align:left;background-color:white;color:#4a5c4f;padding:10px 15px;box-sizing:border-box}.level-card.unit-card .level-info span{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1.2rem;display:block}.level-card.unit-card .level-info.unit-complete{background-color:#8ded8d;color:white;text-shadow:2px 2px 0 #4a5c4f}#bookshelf-screen{display:flex;flex-direction:column;align-items:center;width:100%;max-height:500px;overflow-y:auto;margin-bottom:40px;padding:0 20px}.book-card{font-family:ChinesePixelFont,Press Start\ 2P;background-color:#b2d977;border:4px solid #4a5c4f;border-radius:10px;padding:10px;cursor:pointer;box-shadow:inset -4px -4px 0 0 #7b8b62;transition:transform .1s ease-in-out;width:80%;max-width:350px;text-align:center;margin:10px auto}.book-card:hover{transform:translateY(-2px);box-shadow:inset -6px -6px 0 0 #7b8b62}.book-card.selected{background-color:#f0e68c;box-shadow:inset -4px -4px 0 0 #c7b873;border-color:#fff}.book-card h3{margin:0 0 10px;font-size:1.4rem;color:#4a5c4f}#bookshelf-screen::-webkit-scrollbar{display:none}#bookshelf-screen{-ms-overflow-style:none;scrollbar-width:none}#lesson-selection-screen{display:flex;flex-direction:column;align-items:center;width:100%}#lesson-selection-screen h2{font-size:1.8rem;margin-bottom:20px;color:white;text-shadow:3px 3px 0 #4a5c4f}#lesson-selection-screen h2,.lesson-card{font-family:ChinesePixelFont,Press Start\ 2P;text-align:center}.lesson-card{background-color:#b2d977;border:4px solid #4a5c4f;border-radius:10px;padding:15px;cursor:pointer;box-shadow:inset -4px -4px 0 0 #7b8b62;transition:transform .1s ease-in-out;width:80%;max-width:300px;margin:10px auto}.lesson-card:hover{transform:translateY(-2px);box-shadow:inset -6px -6px 0 0 #7b8b62}.lesson-card.lesson-incomplete{background-color:#cccccc;box-shadow:inset -4px -4px 0 0 #aaaaaa;color:#888888}.lesson-card.lesson-next-up{border-color:#6ac46a;border-width:6px}.back-button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:.9rem;color:white;background-color:#6ac46a;border:2px solid #58b058;border-radius:8px;padding:10px 15px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #58b058;transition:all .1s ease-in-out;width:80%;max-width:300px;box-sizing:border-box;margin:0 auto 20px}.back-button:hover{transform:translateY(-2px);box-shadow:inset -4px -4px 0 0 #58b058}.game-top-btn{font-family:ChinesePixelFont,Press Start\ 2P;font-size:.9rem;color:#4a5c4f;background-color:#f0e68c;border:2px solid #4a5c4f;border-radius:8px;padding:10px 15px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #c7b873;transition:all .1s ease-in-out}.game-top-btn:hover{transform:translateY(-2px);box-shadow:inset -4px -4px 0 0 #c7b873}#game-back-btn{background-color:#cccccc;box-shadow:inset -3px -3px 0 0 #aaaaaa}#game-back-btn:hover{box-shadow:inset -4px -4px 0 0 #aaaaaa}#play-sentence-btn{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:white;background-color:#6ac46a;border:4px solid #58b058;border-radius:10px;padding:10px;cursor:pointer;transition:all .1s ease-in-out;width:100%;box-sizing:border-box;height:60px}#play-sentence-btn img{height:100%;width:auto;image-rendering:pixelated}#play-sentence-btn:hover{transform:translateY(-2px)}#progress-bar{width:100%;height:10px;background-color:#4a5c4f;border-radius:5px;border:2px solid #4a5c4f;box-sizing:border-box}#progress-bar-fill{width:0;height:100%;background-color:#6ac46a;border-radius:2px;transition:width .3s ease-in-out}.word-area{background-color:#a1b482;border:4px solid #4a5c4f;border-radius:10px;min-height:80px;padding:10px;margin:10px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.word-btn{font-family:Press Start\ 2P,sans-serif;font-size:1rem;color:#4a5c4f;background-color:#f0e68c;border:2px solid #4a5c4f;border-radius:8px;padding:10px 15px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #c7b873;transition:all .1s ease-in-out}.word-btn:hover{transform:translateY(-2px);box-shadow:inset -4px -4px 0 0 #c7b873}.word-btn.error{background-color:#e77b7b;animation:shake .4s}.word-btn.correct{background-color:white}#sentence-display{background-color:#b2d977}#word-options{background-color:#d0e0b8}#sentence-display .word-btn{background-color:white}.shake{animation:shake .5s}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-5px)}20%,40%,60%,80%{transform:translateX(5px)}}@keyframes jump{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes jump-infinite{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.word-btn.jump{animation:jump .4s ease-in-out}#completion-screen h2{font-size:2rem;margin-bottom:20px}#completion-screen h2,#completion-screen p{font-family:ChinesePixelFont,Press Start\ 2P}#completion-screen p{margin-bottom:15px}#completion-screen button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:white;background-color:#4a5c4f;border:2px solid white;border-radius:8px;padding:15px 20px;cursor:pointer;margin:10px}#sentence-complete-dialog{position:absolute;bottom:0;left:50%;transform:translate(-50%,100%);width:100%;max-width:600px;background-color:#d0e0b8;color:#4a5c4f;border-top:4px solid #4a5c4f;border-left:4px solid #4a5c4f;border-right:4px solid #4a5c4f;border-radius:10px 10px 0 0;padding:20px;box-sizing:border-box;text-align:center;z-index:10;box-shadow:0 -4px 10px rgba(0,0,0,.2);visibility:hidden;opacity:0;transition:transform .4s ease-in-out,opacity .4s ease-in-out,visibility .4s}#sentence-complete-dialog.visible{transform:translate(-50%);visibility:visible;opacity:1}#sentence-complete-dialog .dialog-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px}#sentence-complete-dialog p{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1.5rem;margin:0}#sentence-complete-dialog button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:white;background-color:#6ac46a;border:2px solid #58b058;border-radius:8px;padding:15px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #58b058;transition:all .1s ease-in-out;width:100%;box-sizing:border-box}#sentence-complete-dialog button:hover{transform:translateY(-2px)}.checkmark-icon{width:15px;height:30px;border-bottom:6px solid #6ac46a;border-right:6px solid #6ac46a;transform:rotate(45deg)}#level-completion-screen{display:none;flex-direction:column;align-items:center;justify-content:center;background-color:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;z-index:20}#level-completion-screen h2{font-family:ChinesePixelFont,Press Start\ 2P;font-size:2rem;color:#FFD700;text-shadow:3px 3px 0 #4a5c4f;margin-bottom:20px}#level-completion-screen p{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1.2rem;color:white;margin-bottom:30px}#level-completion-screen button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:#4a5c4f;background-color:#f0e68c;border:2px solid #4a5c4f;border-radius:8px;padding:15px 25px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #c7b873;transition:all .1s ease-in-out}#level-completion-screen button:hover{transform:translateY(-2px);box-shadow:inset -4px -4px 0 0 #c7b873}#shop-screen{display:none;flex-direction:column;background-color:#a1b482;border:4px solid #4a5c4f;border-radius:10px;padding:20px;box-sizing:border-box;width:100%;height:100%;max-height:90vh}.shop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:4px solid #4a5c4f;padding-bottom:15px}.shop-header h2{font-size:1.8rem;color:white;text-shadow:3px 3px 0 #4a5c4f;margin:0}#shop-score-container,.shop-header h2{font-family:ChinesePixelFont,Press Start\ 2P}#shop-score-container{font-size:1.2rem;color:#4a5c4f;background-color:#f0e68c;padding:5px 10px;border-radius:5px;border:2px solid #4a5c4f}#shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:20px;overflow-y:auto;flex-grow:1;padding:10px}.shop-item-card{background-color:#b2d977;border:4px solid #4a5c4f;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-shadow:inset -4px -4px 0 0 #7b8b62}.shop-item-card .item-name{font-family:ChinesePixelFont,Press Start\ 2P;font-size:.9rem;margin-bottom:10px;color:#4a5c4f}.shop-item-card img{width:64px;height:90px;image-rendering:pixelated;margin-bottom:10px}.shop-item-card .item-price{font-family:Press Start\ 2P;font-size:1rem;color:#4a5c4f;background-color:#f0e68c;padding:2px 8px;border-radius:5px;margin-bottom:10px}.shop-item-card .buy-btn{font-family:ChinesePixelFont,Press Start\ 2P;font-size:.9rem;color:white;background-color:#6ac46a;border:2px solid #58b058;border-radius:8px;padding:8px 12px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #58b058;width:100%}.shop-item-card .buy-btn:disabled{background-color:#999;border-color:#777;box-shadow:inset -3px -3px 0 0 #666;cursor:not-allowed}#close-shop-btn{margin-top:20px;align-self:center}#bottom-nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);gap:20px;grid-column:1/-1}#bottom-nav,.ai-chat-dialog-overlay{display:flex;width:100%;justify-content:center}.ai-chat-dialog-overlay{position:fixed;top:0;left:0;height:100%;background-color:rgba(0,0,0,.7);align-items:center;z-index:1000;padding:20px;box-sizing:border-box}.ai-chat-dialog{width:100%;max-width:500px;height:90vh;max-height:700px;background-color:#d0e0b8;border:4px solid #4a5c4f;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;font-family:ChinesePixelFont,Press Start\ 2P;box-shadow:0 0 20px rgba(0,0,0,.5)}.chat-header{background-color:#a1b482;padding:10px 15px;border-bottom:4px solid #4a5c4f;text-align:center;position:relative;color:white;text-shadow:2px 2px 0 #4a5c4f}.chat-header h3{margin:0;font-size:1.4rem}.chat-header p{margin:5px 0 0;font-size:.9rem;opacity:.9}.chat-header .close-btn{position:absolute;top:5px;right:10px;background:none;border:none;font-size:2.5rem;color:white;text-shadow:2px 2px 0 #4a5c4f;cursor:pointer}.chat-messages{flex-grow:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:15px}.chat-messages::-webkit-scrollbar{width:8px}.chat-messages::-webkit-scrollbar-track{background:#7b8b62}.chat-messages::-webkit-scrollbar-thumb{background-color:#4a5c4f;border-radius:4px}.message{display:flex;max-width:85%}.message p{padding:10px 15px;border-radius:10px;margin:0;font-size:1rem;line-height:1.4;color:#4a5c4f}.message.user{align-self:flex-end}.message.user p{background-color:#b2d977;border:2px solid #7b8b62}.message.ai{align-self:flex-start}.message.ai p{background-color:#ffffff;border:2px solid #a1b482}.chat-input-form{padding:15px;border-top:4px solid #4a5c4f;background-color:#a1b482}.chat-input-form input{flex-grow:1;border:2px solid #4a5c4f;border-radius:8px;padding:10px;font-family:Press Start\ 2P,sans-serif;font-size:1rem;background-color:white;color:#4a5c4f}.chat-input-form input:disabled{background-color:#ccc}.chat-input-form button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:white;background-color:#6ac46a;border:2px solid #58b058;border-radius:8px;padding:10px 15px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #58b058;transition:all .1s ease-in-out}.chat-input-form button:hover{transform:translateY(-2px)}.chat-input-form button:disabled{background-color:#999;border-color:#777;box-shadow:inset -3px -3px 0 0 #666;cursor:not-allowed;transform:translateY(0)}.chat-input-form .mic-btn{width:100%;padding:15px 10px;font-size:1rem;background-color:#f0e68c;box-shadow:inset -3px -3px 0 0 #c7b873;border-color:#c7b873;color:#4a5c4f;text-align:center}.chat-input-form .mic-btn.listening{background-color:#e77b7b;animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:inset -3px -3px 0 0 #c7b873}50%{box-shadow:inset -3px -3px 0 5px #c7b873}to{box-shadow:inset -3px -3px 0 0 #c7b873}}.lesson-card-container{display:flex;align-items:stretch;justify-content:center;width:90%;max-width:450px;margin:10px auto;gap:10px}.lesson-card-container .lesson-card{flex-grow:1;margin:0}.ai-chat-button{font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:white;background-color:#8a6ac4;border:2px solid #6c549c;border-radius:8px;padding:10px 20px;cursor:pointer;box-shadow:inset -3px -3px 0 0 #6c549c;transition:all .1s ease-in-out;flex-shrink:0;display:flex;align-items:center;justify-content:center}.ai-chat-button:hover{transform:translateY(-2px);box-shadow:inset -4px -4px 0 0 #6c549c}.tts-button{background:none;border:none;cursor:pointer;padding:5px;margin-left:10px;flex-shrink:0;opacity:.7;transition:opacity .2s}.tts-button:hover{opacity:1}.tts-button:disabled{cursor:not-allowed;opacity:.3}.tts-button img{width:24px;height:24px;image-rendering:pixelated}.chat-status-bar,.message.ai{display:flex;align-items:center}.chat-status-bar{padding:15px;border-top:4px solid #4a5c4f;background-color:#a1b482;justify-content:center}.mic-status{display:flex;align-items:center;gap:10px;font-family:ChinesePixelFont,Press Start\ 2P;font-size:1rem;color:#4a5c4f;background-color:#d0e0b8;padding:10px 20px;border-radius:20px;border:2px solid #4a5c4f;transition:all .3s ease}.mic-status.listening{background-color:#e77b7b;color:white;animation:pulse-status 1.5s infinite}.mic-icon{font-size:1.2rem}.status-text{font-size:.9rem}.listening-indicator{color:#ff4444;font-size:1.5rem;animation:blink 1s infinite}@keyframes pulse-status{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,123,123,.7)}50%{transform:scale(1.02);box-shadow:0 0 0 10px rgba(231,123,123,0)}to{transform:scale(1);box-shadow:0 0 0 0 rgba(231,123,123,0)}}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.sound-wave-area{flex-grow:1;padding:40px 20px;background-color:#d0e0b8}.sound-wave-area,.sound-wave-container{display:flex;align-items:center;justify-content:center}.sound-wave-container{width:100%;max-width:400px;height:200px}.sound-wave{display:flex;align-items:end;justify-content:center;height:100%;gap:4px;width:100%}.wave-bar{width:8px;min-height:4px;background-color:#4a5c4f;border-radius:4px 4px 0 0;transition:height .1s ease,background-color .3s ease;animation:wave-pulse .5s ease-in-out infinite alternate}.wave-bar.inactive{background-color:#a1b482;animation:none;height:8px!important}.wave-bar.listening{background-color:#e77b7b;animation:wave-pulse .3s ease-in-out infinite alternate}.wave-bar.speaking{background-color:#6ac46a;animation:wave-pulse .4s ease-in-out infinite alternate}@keyframes wave-pulse{0%{transform:scaleY(.8);opacity:.7}to{transform:scaleY(1.2);opacity:1}}