.hsk-level-selector-container{padding:1rem 2rem;flex-shrink:0;display:flex;justify-content:center;background-color:var(--bg-color);border-bottom:1px solid var(--border-color)}#custom-hsk-level-selector{position:relative;width:100%;max-width:350px}#path-content-container{flex-grow:1;overflow-y:auto;padding-top:1rem}.unit-section{display:grid;grid-template-rows:auto 1fr;gap:2.5rem 2rem;justify-content:center;align-items:start;max-width:550px;margin:0 auto 5rem auto;position:relative}.unit-section.layout-path-right{grid-template-areas:"header header" "animation path";grid-template-columns:1fr 100px}.unit-section.layout-path-left{grid-template-areas:"header header" "path animation";grid-template-columns:100px 1fr}.unit-header-wrapper{grid-area:header;grid-column:1/-1;text-align:center;position:relative}.unit-header{display:inline-block;padding:1rem 3rem;border-radius:16px;background-color:var(--header-green);border:3px solid var(--header-green);color:#fff;box-shadow:0 5px 0 0 var(--header-green),0 10px 0 0 #186228}.unit-header h1{margin:0;font-size:1.5rem;font-weight:900}.path-container{display:flex;flex-direction:column;align-items:center;gap:25px}.path-wrapper{grid-area:path;display:flex;justify-content:center;width:100px}.animation-placeholder{grid-area:animation;display:flex;justify-content:center;align-items:center;align-self:center}.animation-placeholder img{max-width:70%}.path-node{position:relative;width:var(--node-size);height:var(--node-size)}.path-node.locked .node-content{cursor:not-allowed}.node-content{position:relative;cursor:pointer;width:100%;height:100%}.node-icon{position:relative;width:100%;height:100%;background-color:#fff;border:2px solid var(--border-color);border-radius:16px;box-shadow:0 4px 0 0 #e0e8f0;transition:all .15s ease-out}.node-content:active .node-icon{transform:translateY(4px);box-shadow:none}.button-top{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:2.2rem;font-weight:900;transition:color .2s;color:#000;padding:5px;box-sizing:border-box}.path-node.locked .button-top{color:var(--locked-color)}.path-node.active .node-icon{border-color:#5e8c58;box-shadow:0 4px 0 0 #5e8c58;background-color:#fff}.path-node.active .button-top{color:#232323;font-size:2.2rem}.path-node.completed .node-icon{background-color:#fff;border-color:#5e8c58;box-shadow:0 4px 0 0 #5e8c58}.path-node.completed .button-top{color:#4a90e2;font-size:1.5rem}.lesson-status-icon{width:80%;height:80%;object-fit:contain;display:block}.vocab-container{position:absolute;top:calc(100% + 1rem);z-index:5}.unit-section.layout-path-right .vocab-container{left:0}.unit-section.layout-path-left .vocab-container{right:0}.vocab-toggle-btn{font-family:Nunito,sans-serif;font-weight:800;font-size:1rem;color:var(--text-color);background-color:#fff;border:2px solid var(--border-color);border-radius:10px;padding:.5rem 1rem;cursor:pointer;box-shadow:0 3px 0 0 #e0e8f0;transition:all .2s;opacity:.8}.vocab-toggle-btn:hover{border-color:var(--active-shadow);opacity:1}.vocab-toggle-btn span{font-weight:400;color:var(--locked-color)}.vocab-list{display:none;position:absolute;top:calc(100% + 8px);left:0;width:300px;background-color:var(--ht-menu-panel-bg);border:1px solid var(--ht-menu-border-color);border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.1);padding:.75rem;max-height:300px;overflow-y:auto}.vocab-list.visible{display:block}.vocab-item{display:flex;align-items:center;padding:.6rem .5rem;border-bottom:1px solid var(--border-color)}.vocab-item:last-child{border-bottom:none}.vocab-char{font-size:1.3rem;font-weight:700;color:var(--text-color);flex:0 0 35%}.vocab-pinyin{font-size:.9rem;font-weight:400;color:#777;flex:0 0 35%}.vocab-def{font-size:.9rem;font-weight:600;color:var(--ht-menu-primary-color);flex:1 1 30%;text-align:right}.lesson-view{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:100;flex-direction:column}.lesson-header{padding:1rem 2rem;display:flex;justify-content:flex-end;position:absolute;top:0;right:0;width:100%;z-index:10;box-sizing:border-box;background-color:transparent}.lesson-header .lesson-logo{display:block;position:absolute;top:1rem;left:2rem;margin:0;font-size:1.4rem}.lesson-header .lesson-logo span{font-size:.9rem}#close-lesson-btn{background:0 0;border:none;font-size:2rem;color:#ccc;cursor:pointer}.lesson-main{flex-grow:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:4rem 2rem 1rem 2rem;max-width:950px;margin:0 auto;width:100%;box-sizing:border-box}.lesson-main.dev-lab-scrollable{overflow-y:auto;padding-bottom:5rem}.lesson-prompt{font-size:1.5rem;color:#333;font-weight:800;margin-bottom:2rem}#content-mascot-wrapper{display:flex;align-items:center;justify-content:center;gap:2rem;width:100%}#question-content-slot{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}#question-content-slot.full-width-for-match{width:100%}#lesson-mascot-container{flex:0 0 120px;display:none;order:2}#lesson-mascot-img{max-width:100%;max-height:150px}#lesson-writing-svg-container{width:350px;height:350px}.character-card{text-align:center;background:#f7faff;border-radius:20px;padding:2rem;width:100%;max-width:640px;box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-height:250px;margin-bottom:1rem}#question-character-display{font-size:clamp(4rem, 15vw, 7rem);font-weight:900;color:var(--text-color);display:flex;justify-content:center;align-items:center}#question-pinyin-display{font-size:1.75rem;color:#777;margin-top:-1rem;font-weight:400}#question-wrapper.audio-mode #question-pinyin-display{margin-top:1rem}#introduction-card-container{display:flex;flex-direction:column;justify-content:center;align-items:center;perspective:1000px;padding-bottom:1rem;width:100%}#intro-card-prompt{color:#888;font-weight:700;font-size:1.1rem;margin-top:2rem;min-height:1.5em}.intro-option-btn{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;min-height:140px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:1rem .5rem .5rem .5rem}.intro-option-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.intro-image-display{font-size:4rem;line-height:1;flex-grow:1;display:flex;align-items:center;justify-content:center}.intro-text-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;border-top:2px solid var(--border-color);padding-top:.5rem;margin-top:.5rem}.intro-text-wrapper .pinyin-display{font-size:1rem;font-weight:400;color:#888}.intro-text-wrapper .char-display{font-size:2rem;font-weight:900;color:var(--text-color);line-height:1.2}.answer-options{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:640px;margin-top:1.5rem}.option-btn{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;font-weight:700}.option-btn:hover:not(:disabled){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.option-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.option-btn:disabled{cursor:not-allowed}.option-btn.correct{background-color:#e6f8d9;border-color:var(--correct-green);color:var(--correct-green);box-shadow:0 4px 0 0 #9fceaa!important}.option-btn.incorrect{background-color:#f8d7da;border-color:var(--incorrect-red);color:var(--incorrect-red);box-shadow:0 4px 0 0 #f1a9b0!important}.answer-options-text .option-btn{padding:1.2rem;font-size:1.2rem;min-height:100px;display:flex;justify-content:center;align-items:center}.answer-options-char .option-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;font-size:2.5rem;min-height:100px}.answer-options-char .pinyin-in-btn{font-size:1rem;font-weight:400;color:#888;margin-top:.25rem}#matching-pairs-container,#sentence-scramble-container{width:100%}#sentence-display-card{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;width:100%;max-width:640px;box-sizing:border-box;background:#f7faff;border-radius:20px;min-height:180px;position:relative;margin-bottom:2rem}#chinese-sentence-content{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center;align-items:center}.sentence-char-group{display:flex;flex-direction:column;align-items:center;position:relative}.sentence-char{font-size:clamp(3.5rem, 12vw, 5rem);font-weight:900;color:var(--text-color);line-height:1}.sentence-pinyin{font-size:1.2rem;color:#777;font-weight:400;margin-top:.5rem}.sentence-char-group.highlighted .sentence-char,.sentence-char-group.highlighted .sentence-pinyin{color:var(--header-green)}#new-word-bubble{background-color:var(--header-green);color:#fff;padding:.5rem 1rem;border-radius:12px;font-size:1rem;font-weight:700;position:absolute;top:-42px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:10;box-shadow:0 4px 10px rgba(0,0,0,.15);display:none}#new-word-bubble::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--header-green)}.sentence-audio-btn{background-color:var(--selected-blue);border:none;width:50px;height:50px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 0 0 var(--selected-blue-shadow);flex-shrink:0;transition:transform .1s,box-shadow .1s,background-color .1s}.sentence-audio-btn.is-playing{transform:translateY(2px);box-shadow:0 2px 0 0 var(--selected-blue-shadow);background-color:#555;cursor:not-allowed}.sentence-audio-btn:active{transform:translateY(2px);box-shadow:0 2px 0 0 var(--selected-blue-shadow)}.sentence-audio-btn:disabled{background-color:#555;box-shadow:none;cursor:not-allowed}.sentence-audio-btn svg{width:24px;height:24px;fill:white}.answer-options-sentence .option-btn{height:auto;min-height:100px;padding:1rem;display:flex;justify-content:center;align-items:center}.sentence-option-inner-wrapper{display:flex;justify-content:center;align-items:center;gap:1rem;flex-wrap:wrap}.sentence-option-word-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0;min-width:4rem}.sentence-option-word-group .char{font-size:1.6rem;font-weight:900;line-height:1.2;white-space:nowrap}.sentence-option-word-group .pinyin{font-size:.9rem;color:#777;margin-top:.25rem}#sentence-construction-area{background:#f7faff;min-height:80px;border-bottom:2px solid #e0e8f0;padding:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border-radius:12px}#word-bank-area{padding:1rem 0;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.word-btn{padding:.75rem 1.25rem;font-size:1.2rem;background-color:#fff;border:2px solid var(--border-color);border-radius:12px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0}.word-btn:hover:not(:disabled){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.word-btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}.word-btn.hidden{opacity:0;pointer-events:none}#matching-pairs-container{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:640px}.matching-column{display:flex;flex-direction:column;gap:1rem}.match-card{background-color:#fff;border:2px solid var(--border-color);border-radius:12px;padding:1.2rem;min-height:60px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 4px 0 0 #e0e8f0;display:flex;justify-content:center;align-items:center}.match-card:hover:not(.matched){border-color:#a9b0b8;box-shadow:0 4px 0 0 #a9b0b8}.match-card.selected{border-color:var(--selected-blue);box-shadow:0 4px 0 0 var(--selected-blue-shadow);color:var(--selected-blue);transform:translateY(-2px)}.match-card.matched{background-color:#e9ecef;border-color:#d1d8e0;box-shadow:none;opacity:.6;cursor:default}.match-card.incorrect-flash{animation:incorrect-shake .4s;border-color:var(--incorrect-red);box-shadow:0 4px 0 0 var(--incorrect-red)}@keyframes incorrect-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}#audio-play-btn{background-color:var(--header-green);border:none;width:120px;height:120px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;box-shadow:0 8px 0 0 #218838;transition:all .15s ease-out}#audio-play-btn:active{transform:translateY(8px);box-shadow:none}#audio-play-btn svg{width:60px;height:60px;fill:white}.feedback-footer{position:fixed;bottom:4rem;left:50%;transform:translateX(-50%);width:auto;max-width:90%;display:flex;visibility:hidden;justify-content:center;align-items:center;padding:.5rem .8rem;font-size:1.5rem;font-weight:800;z-index:103;background-color:#fff;border-radius:20px;box-shadow:0 -2px 10px rgba(0,0,0,.05);box-sizing:border-box;border:3px solid var(--border-color)}.feedback-footer.visible{visibility:visible}.feedback-footer.correct{border-color:var(--correct-green)}.feedback-footer.incorrect{border-color:var(--incorrect-red)}.feedback-footer.correct #feedback-text{color:var(--correct-green)}.feedback-footer.incorrect #feedback-text{color:var(--incorrect-red)}.feedback-footer #lesson-mascot-container{position:relative;order:2;flex-shrink:0}.feedback-footer #lesson-mascot-img{max-height:80px}.feedback-timer{width:32px;height:32px;border-radius:50%;display:none;background:conic-gradient(var(--header-green) var(--a),#e9ecef 0deg)}.feedback-timer.animating{display:block;animation:timer-spin linear;animation-duration:2s}@keyframes timer-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.progress-bar-container{position:fixed;bottom:1rem;left:1rem;right:1rem;display:flex;height:16px;background-color:#e9ecef;z-index:101;border-radius:8px;overflow:hidden;box-sizing:border-box}.progress-segment{height:100%;transition:width .5s cubic-bezier(.175, .885, .32, 1.275)}.progress-segment.correct{background-color:var(--correct-green)}.progress-segment.incorrect{background-color:var(--incorrect-red)}.progress-segment.review-segment{background-color:var(--selected-blue)}.progress-segment.review-segment-incorrect{background-color:var(--review-incorrect-color)}#submit-action-wrapper{display:none;align-items:flex-end;justify-content:center;gap:1.5rem;width:100%;padding:0;box-sizing:border-box}#submit-action-wrapper #lesson-mascot-container{order:1}.submit-btn{background-color:var(--header-green);color:#fff;padding:1.2rem 2.5rem;border-radius:12px;font-size:1.2rem;min-width:200px;box-shadow:0 6px 0 0 #218838}#celebration-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(40,40,60,.5);display:flex;justify-content:center;align-items:center;z-index:1000;visibility:hidden;opacity:0;transition:opacity .4s ease-in-out,visibility .4s ease-in-out}#celebration-overlay.visible{visibility:visible;opacity:1}.celebration-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center}#celebration-gif{max-width:80%;max-height:90vh;object-fit:contain}.celebration-text-content{position:absolute;top:15vh;left:50%;transform:translateX(-50%);z-index:1001;text-align:center;font-family:Nunito,sans-serif;color:#fff}.celebration-subtitle{margin:0;font-size:1rem;font-weight:400;text-transform:uppercase;letter-spacing:.3em;opacity:.8}.celebration-subtitle::after{content:'';display:block;width:60px;height:1px;background-color:#fff;margin:1rem auto 1.2rem;opacity:.5}.celebration-title{margin:0;font-size:clamp(2.5rem, 8vw, 4.5rem);font-weight:900;text-shadow:0 4px 20px rgba(0,0,0,.35)}#review-interstitial{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--bg-color);z-index:150;display:flex;justify-content:center;align-items:center;text-align:center;visibility:hidden;opacity:0}#review-interstitial.visible{visibility:visible;opacity:1}.review-interstitial-content h2{font-size:2rem;color:var(--text-color);font-weight:800;margin-bottom:.5rem}.review-interstitial-content p{font-size:1.2rem;color:#888}@keyframes wiggle-hint-animation{0%,10%,100%{transform:rotate(0)}2%{transform:rotate(3deg)}6%{transform:rotate(-3deg)}8%{transform:rotate(1deg)}}.wiggle-hint{animation:wiggle-hint-animation 3s infinite}.lesson-spacer{display:none}#main-game-area{flex-direction:column;align-items:center}#dev-toolbox{margin-top:2rem;width:100%;max-width:550px;max-height:none}.settings-grid{grid-template-columns:1fr 1fr}#game-grid{flex-basis:auto;flex-shrink:1}@media (min-width:1025px){.unit-section.layout-path-right{grid-template-columns:220px 100px}.unit-section.layout-path-left{grid-template-columns:100px 220px}.word-btn{font-size:1.6rem;padding:1rem 1.5rem}.intro-image-display{min-height:150px}}@media (max-width:1024px){body.lesson-is-open .mobile-menu-toggle,body.mobile-menu-open .mobile-menu-toggle{display:none}.lesson-main{padding:1rem}.lesson-prompt{flex-shrink:0;margin-bottom:1rem;margin-top:1rem}#content-mascot-wrapper{overflow-y:visible;gap:1rem}.lesson-spacer{flex-grow:1;display:block}.lesson-header .lesson-logo{display:none}#lesson-mascot-container{flex-basis:90px;flex-shrink:1;align-self:center}.character-card{min-height:180px;padding:1rem}#audio-play-btn{width:90px;height:90px;box-shadow:0 6px 0 0 #218838}#audio-play-btn:active{transform:translateY(6px)}#audio-play-btn svg{width:45px;height:45px}#question-pinyin-display{font-size:1.25rem}#matching-pairs-container{grid-template-columns:1fr 1fr}#sentence-display-card{min-height:120px;padding:1rem}#chinese-sentence-content{gap:.8rem}.sentence-pinyin{font-size:.9rem}#new-word-bubble{font-size:1rem;padding:.6rem 1rem}.answer-options-sentence{grid-template-columns:1fr}.sentence-option-word-group{flex-shrink:1;min-width:unset;gap:.25rem}.sentence-option-word-group .char{font-size:1.2rem}.sentence-option-word-group .pinyin{font-size:.75rem}.sentence-option-inner-wrapper{gap:.5rem}.unit-section.layout-path-left .vocab-container,.unit-section.layout-path-right .vocab-container{left:50%;right:auto;transform:translateX(-50%);width:90%;max-width:350px}.vocab-list{left:50%;transform:translateX(-50%);width:100%}.review-interstitial-content{padding:0 2rem}}.daily-challenge-floating-wrapper{position:fixed;bottom:2rem;left:calc(200px + 1.5rem);width:var(--node-size,70px);z-index:1000;transition:left .3s ease-in-out,bottom .3s ease-in-out;display:flex;flex-direction:column;align-items:center}.daily-challenge-mascot{width:60px;height:auto;margin-bottom:-10px;z-index:1001;pointer-events:none}.daily-challenge-floating-container{width:100%}.daily-challenge-floating-container .daily-challenge-widget{flex-direction:column;height:auto;min-height:80px;text-align:center;border-width:2px}.daily-challenge-floating-container .daily-main-section.locked-layout,.daily-challenge-floating-container .daily-main-section.unlocked-layout{flex-direction:column;padding:10px 5px;gap:4px}.daily-challenge-floating-container .daily-locked-text,.daily-challenge-floating-container .daily-text{display:flex;flex-direction:column;align-items:center;gap:2px}.daily-challenge-floating-container .daily-title{display:none}.daily-challenge-floating-container .daily-again-text,.daily-challenge-floating-container .daily-subtitle{font-size:.65rem;font-weight:800;color:#ff9600;line-height:1.1}.daily-challenge-floating-container .daily-word{display:block}.daily-challenge-floating-container .daily-icon svg{width:22px;height:22px}.daily-challenge-floating-container .daily-timer-val{font-size:.75rem;white-space:nowrap;color:var(--text-color);margin-top:2px}.daily-challenge-floating-container .daily-settings-section{width:100%;height:28px;border-left:none;border-top:1px solid #ff9600;font-size:.9rem}@media (max-width:1024px){.daily-challenge-floating-wrapper{left:1.5rem}}@media (max-width:768px){.daily-challenge-floating-wrapper{display:none!important}}