:root{--primary-color:#007bff;--primary-hover-bg:#e9f2ff;--primary-hover-border:#cde2ff;--dark-text:#212529;--light-text:#f8f9fa;--subtle-text:#6c757d;--body-bg:#f4f4f4;--panel-bg:#fff;--border-color:#ddd;--success-color:#28a745;--error-color:#dc3545;--discord-blurple:#5865F2;--counter-bg:#6c757d;--counter-text:#fff;--message-outline-color:white}body.dark-mode{--primary-color:#4dabf7;--primary-hover-bg:#1c3d5a;--primary-hover-border:#18334a;--dark-text:#e9ecef;--light-text:#212529;--subtle-text:#adb5bd;--body-bg:#212529;--panel-bg:#343a40;--border-color:#495057;--discord-blurple:#4752c4;--counter-bg:#495057;--counter-text:#e9ecef;--message-outline-color:black}body,html{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;margin:0;background-color:var(--body-bg);color:var(--dark-text);transition:background-color .3s ease,color .3s ease}body{display:flex;flex-direction:column}#lesson-nav-rail{display:none}#lesson-selector-mobile{margin-bottom:15px}#lesson-dropdown{width:100%;padding:10px;font-size:1em;border:1px solid var(--border-color);border-radius:8px;background-color:var(--panel-bg);color:var(--dark-text)}.panel{display:none;flex-direction:column;background-color:var(--panel-bg);padding:20px;overflow-y:auto;flex-grow:1;box-sizing:border-box;transition:background-color .3s ease}#main-content{background-color:var(--body-bg);justify-content:center;align-items:center;position:relative}.panel.mobile-visible{display:flex}@media (min-width:768px){body{flex-direction:row;padding-bottom:48px;box-sizing:border-box}#lesson-nav-rail{display:flex;flex-direction:column;align-items:center;gap:10px;width:70px;background-color:var(--panel-bg);padding-top:20px;flex-shrink:0;height:100%;border-right:1px solid var(--border-color);overflow-y:auto}.lesson-nav-btn{font-size:1.5em;font-weight:700;color:var(--primary-color);background:0 0;border:2px solid transparent;cursor:pointer;padding:10px;width:50px;height:50px;border-radius:10px;transition:all .2s;display:flex;align-items:center;justify-content:center}.lesson-nav-btn:hover{background-color:var(--primary-hover-bg);border-color:var(--primary-hover-border)}.lesson-nav-btn.active{background-color:var(--primary-color);color:var(--light-text);border-color:var(--primary-color)}#lesson-selector-mobile{display:none}.panel{display:flex;flex-shrink:0;flex-grow:0;height:100%}#character-selection-panel{width:280px}#info-panel{width:280px;border-left:1px solid var(--border-color);justify-content:center}#main-content{flex-grow:1}#mobile-nav{display:none!important}}#logo-container{text-align:center;margin-bottom:20px}#logo-container img{width:100px;height:100px;border-radius:10%;box-shadow:0 2px 6px rgba(0,0,0,.1)}#profile-area{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:1px solid var(--border-color)}#score-block{text-align:left}h3{margin:0 0 5px 0;font-size:1.1em}#total-score-display{font-size:1.8em;font-weight:700;color:var(--primary-color)}#lesson-info{text-align:center;margin-top:15px}#lesson-title{margin:0 0 5px 0;font-size:1.2em;color:var(--dark-text)}#lesson-description{margin:0;font-size:.9em;color:var(--subtle-text)}#character-list{list-style:none;padding:0;margin-top:15px}#character-list li{padding:12px 15px;margin-bottom:8px;border-radius:8px;cursor:pointer;transition:background-color .2s;border:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}#character-list li:hover{background-color:var(--primary-hover-bg)}#character-list li.active-char{background-color:var(--primary-color);color:var(--light-text);font-weight:700;border-color:var(--primary-color)}.char-pinyin{font-size:.9em;opacity:.8;margin-left:8px}.char-counter{font-size:.8em;background-color:var(--counter-bg);color:var(--counter-text);padding:2px 8px;border-radius:10px}#character-list li.active-char .char-counter{background-color:rgba(255,255,255,.25);color:var(--light-text)}#info-char{font-size:6em;text-align:center;margin:20px 0}#info-pinyin{font-size:2em;text-align:center;font-weight:700;margin:0}#info-audio-btn{display:block;margin:10px auto 20px auto;font-size:2em;background:0 0;border:none;cursor:pointer;transition:transform .2s}#info-audio-btn:hover{transform:scale(1.1)}#info-definition{font-size:1.2em;text-align:center;color:var(--subtle-text)}#game-controls{display:flex;justify-content:space-between;align-items:center;width:350px;max-width:100%;margin-bottom:10px;gap:10px}.mode-switch{display:flex;align-items:center;flex-shrink:0}.mode-switch label{margin-right:10px}.action-buttons{display:flex;gap:8px;flex-shrink:0}.control-button{padding:8px 16px;font-size:.9em;font-weight:700;cursor:pointer;border:2px solid transparent;border-radius:8px;transition:all .2s ease-in-out}#next-char-button{background-color:var(--primary-color);color:var(--light-text);border-color:var(--primary-color)}#next-char-button:hover{background-color:color-mix(in srgb,var(--primary-color) 80%,#000)}#hint-button{visibility:hidden;background-color:var(--panel-bg);color:var(--dark-text);border:1px solid var(--border-color)}#hint-button:hover{background-color:var(--body-bg)}#mobile-score-display{display:none;font-size:1.1em;font-weight:700;color:var(--primary-color);flex-grow:1;text-align:center}#instruction{font-size:1.2em;text-align:center;min-height:1.5em}#svg-container{width:350px;height:350px;max-width:100%;border:2px solid var(--border-color);background-color:var(--panel-bg);position:relative;touch-action:none;box-shadow:0 4px 8px rgba(0,0,0,.1);border-radius:8px}svg{display:block;width:100%;height:100%}#main-char-info{margin-top:15px;text-align:center}#main-pinyin-display{font-size:1.5em;font-weight:700;color:var(--primary-color);margin:0 0 5px 0;min-height:1.2em}#main-definition-display{font-size:1.1em;color:var(--subtle-text);margin:0;min-height:1.2em}.practice-grid-line{stroke:var(--border-color);stroke-width:2;stroke-dasharray:20,20}.stroke-guide-faint{fill:color-mix(in srgb,var(--panel-bg) 50%,var(--border-color));stroke:none}.stroke-guide-current{fill:var(--primary-color);stroke:none;animation:pulse 2s infinite}.stroke-completed{fill:var(--dark-text);stroke:none}#user-drawing-canvas{position:absolute;top:0;left:0;pointer-events:none}.hint-flash{animation:hint-pulse 1.5s ease-in-out}.stroke-direction-arrow{fill:var(--error-color);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}@keyframes hint-pulse{0%{opacity:1}50%{opacity:.3}100%{opacity:0}}#message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;text-align:center;font-size:2.5em;font-weight:700;-webkit-text-stroke:1.5px var(--message-outline-color);text-shadow:2px 2px 4px rgba(0,0,0,.5);pointer-events:none;transition:opacity .15s ease-in-out}#message:empty{opacity:0;visibility:hidden}.message-fade-out{opacity:0}#mobile-nav{display:flex;justify-content:space-around;align-items:center;background-color:var(--panel-bg);border-top:1px solid var(--border-color);height:60px;width:100%;flex-shrink:0}.nav-btn{background:0 0;border:none;font-size:2em;cursor:pointer;color:var(--dark-text);opacity:.6}.nav-btn.active{opacity:1;color:var(--primary-color)}.mobile-discord-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px;margin-top:25px;background-color:var(--discord-blurple);color:#fff;text-decoration:none;border-radius:8px;text-align:center;transition:background-color .2s;flex-shrink:0}.mobile-discord-cta:hover{background-color:color-mix(in srgb,var(--discord-blurple) 85%,#000)}#desktop-discord-banner{display:none;position:fixed;bottom:0;left:0;width:100%;background-color:var(--discord-blurple);z-index:1000}#desktop-discord-banner a{display:flex;align-items:center;justify-content:center;gap:15px;padding:14px;color:#fff;text-decoration:none;transition:background-color .2s}#desktop-discord-banner a:hover{background-color:color-mix(in srgb,var(--discord-blurple) 85%,#000)}#desktop-discord-banner strong{font-size:1.1em}#desktop-discord-banner span{font-size:.9em;opacity:.9}#mascot-container{display:none;margin-top:15px;text-align:center}#mascot-container img{max-width:150px;width:100%;height:auto;border-radius:8px}.theme-switch-wrapper{display:flex;align-items:center;justify-content:flex-end}.theme-switch{position:relative;display:inline-block;width:50px;height:26px}.theme-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:26px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}.slider .moon,.slider .sun{position:absolute;top:50%;transform:translateY(-50%);font-size:14px;transition:opacity .4s ease}.slider .sun{left:6px;color:var(--light-text);opacity:0}.slider .moon{right:6px;color:var(--light-text);opacity:1}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translateX(24px)}input:checked+.slider .sun{opacity:1}input:checked+.slider .moon{opacity:0}#main-footer{margin-top:30px;padding:20px 0;text-align:center;font-size:.9em;color:var(--subtle-text);border-top:1px solid var(--border-color)}@media (max-width:767px){#mobile-score-display{display:block}#main-content{justify-content:flex-start}}@media (min-width:768px){.mobile-discord-cta{display:none}#desktop-discord-banner{display:block}}