*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow:hidden}.game-container{width:100vw;height:100vh;position:relative}.screen{justify-content:center;align-items:center;width:100%;height:100%;display:none;position:absolute;top:0;left:0}.screen.active{display:flex}#titleScreen{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column}.title-content{text-align:center;color:#fff;animation:1s ease-in fadeIn}.game-title{text-shadow:3px 3px 6px #0000004d;margin-bottom:1rem;font-size:4rem;animation:2s ease-in-out infinite glow}.subtitle{opacity:.9;margin-bottom:3rem;font-size:1.5rem}.teacher-entry{margin-top:1.5rem;font-size:.9rem}.teacher-entry a{color:#fff;text-underline-offset:4px}.start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border:none;border-radius:50px;padding:1rem 3rem;font-size:1.5rem;transition:transform .3s,box-shadow .3s;box-shadow:0 5px 15px #0000004d}.start-btn:hover{transform:translateY(-3px)scale(1.05);box-shadow:0 8px 25px #0006}#questScreen{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.quest-container{background:#fff;border-radius:20px;flex-direction:column;width:95%;max-width:1200px;max-height:90vh;padding:2rem;display:flex;box-shadow:0 10px 40px #0000004d}.quest-container h2{color:#667eea;text-align:center;margin-bottom:1.5rem;font-size:2rem}.chapter-tabs{border-bottom:2px solid #e0e0e0;gap:1rem;margin-bottom:1.5rem;display:flex}.chapter-tab{cursor:pointer;color:#999;background:0 0;border:none;border-bottom:3px solid #0000;padding:.8rem 2rem;font-size:1.1rem;font-weight:700;transition:all .3s}.chapter-tab:hover{color:#667eea}.chapter-tab.active{color:#667eea;border-bottom-color:#667eea}.quest-list{grid-template-columns:repeat(2,1fr);gap:1.5rem;max-height:calc(90vh - 200px);padding-right:.5rem;display:grid;overflow-y:auto}.quest-list::-webkit-scrollbar{width:8px}.quest-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.quest-list::-webkit-scrollbar-thumb{background:#667eea;border-radius:10px}.quest-list::-webkit-scrollbar-thumb:hover{background:#764ba2}.quest-card{cursor:pointer;background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);border:3px solid #0000;border-radius:15px;flex-direction:column;justify-content:space-between;min-height:160px;padding:2rem;transition:transform .3s,box-shadow .3s,border-color .3s;display:flex}.quest-card:hover:not(.locked){border-color:#667eea;transform:translateY(-5px)scale(1.02);box-shadow:0 10px 30px #667eea66}.quest-card.completed{background:linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%);border-color:#4caf50}.quest-card.locked{opacity:.5;cursor:not-allowed;background:linear-gradient(135deg,#e0e0e0 0%,#bdbdbd 100%)}.quest-card h3{color:#333;margin-bottom:.8rem;font-size:1.3rem;font-weight:700}.quest-card p{color:#666;margin-bottom:1rem;font-size:1rem;line-height:1.5}.quest-status{border-radius:20px;margin-top:.5rem;padding:.3rem .8rem;font-size:.8rem;font-weight:700;display:inline-block}.quest-status.unlocked{color:#fff;background:#667eea}.quest-status.completed{color:#fff;background:#4caf50}.quest-status.locked{color:#fff;background:#999}#lessonScreen{background:#f5f5f5}.lesson-layout{width:100%;height:100%;display:flex}.lesson-instruction{background:#fff;flex-direction:column;flex:1;display:flex;overflow:hidden}.instruction-header{color:#fff;background:#667eea;justify-content:space-between;align-items:center;padding:1.5rem;display:flex}.instruction-header h3{font-size:1.3rem}.back-btn{color:#fff;cursor:pointer;background:#fff3;border:1px solid #fff;border-radius:5px;padding:.5rem 1rem;transition:background .3s}.back-btn:hover{background:#ffffff4d}.instruction-content{flex:1;padding:2rem;line-height:1.6;overflow-y:auto}.visual-box{background:#f0f4ff;border:2px solid #667eea;border-radius:10px;margin:1.5rem 0;padding:1.5rem}.variable-demo{flex-wrap:wrap;align-items:center;gap:1rem;margin:1rem 0;display:flex}.box{color:#fff;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:10px;min-width:100px;padding:1rem 1.5rem;font-weight:700;box-shadow:0 4px 10px #0003}.box-label{color:#667eea;margin-bottom:.5rem;font-size:.9rem;font-weight:700}.box-small{color:#fff;text-align:center;background:#667eea;border-radius:8px;min-width:60px;padding:.5rem 1rem;font-size:1.1rem;font-weight:700;display:inline-block}.arrow{color:#667eea;font-size:2rem;font-weight:700}.list-demo{align-items:flex-start;gap:1rem;margin:1rem 0;display:flex}.list-item{color:#fff;text-align:center;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border-radius:10px;min-width:60px;padding:1rem;font-weight:700;box-shadow:0 4px 10px #0003}.list-index{color:#666;text-align:center;margin-top:.5rem;font-size:.8rem}.operator-table{background:#fff;border-radius:8px;margin:1rem 0;padding:1rem}.operator-row{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:.5rem;display:flex}.operator-row:last-child{border-bottom:none}.operator-code{color:#fff;background:#667eea;border-radius:5px;padding:.3rem .8rem;font-family:Courier New,monospace;font-weight:700}.hint-toggle,.answer-toggle{color:#fff;cursor:pointer;text-align:left;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);border:none;border-radius:10px;justify-content:space-between;align-items:center;width:100%;margin:1rem 0;padding:.8rem 1.5rem;font-size:1rem;font-weight:700;transition:all .3s;display:flex;box-shadow:0 4px 10px #0003}.answer-toggle{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.hint-toggle:hover,.answer-toggle:hover{transform:translateY(-2px);box-shadow:0 6px 15px #0000004d}.toggle-icon{font-size:1.2rem;transition:transform .3s}.toggle-icon.open{transform:rotate(180deg)}.hint-content,.answer-content{max-height:0;transition:max-height .3s ease-out;overflow:hidden}.hint-content.show,.answer-content.show{max-height:1000px;transition:max-height .5s ease-in}.hint-box{background:#fff3cd;border-left:4px solid #ffc107;border-radius:8px;margin-top:1rem;padding:1.5rem}.answer-box{background:#d1ecf1;border-left:4px solid #0dcaf0;border-radius:8px;margin-top:1rem;padding:1.5rem}.lesson-editor{background:#1e1e1e;flex-direction:column;flex:1;display:flex}.editor-header{background:#2d2d2d;justify-content:space-between;align-items:center;padding:1rem;display:flex}.editor-header h4{color:#fff}.run-code-btn{color:#fff;cursor:pointer;background:#4caf50;border:none;border-radius:5px;padding:.7rem 1.5rem;font-size:1rem;transition:background .3s}.run-code-btn:hover{background:#45a049}.code-editor{color:#d4d4d4;resize:none;background:#1e1e1e;border:none;outline:none;flex:1;padding:1rem;font-family:Courier New,monospace;font-size:14px}.CodeMirror{height:100%!important;font-family:Courier New,monospace!important;font-size:14px!important}.CodeMirror-scroll{overflow:auto!important}.CodeMirror-gutters{background-color:#272822!important;border-right:1px solid #555!important;padding-right:5px!important}.CodeMirror-linenumber{text-align:right!important;color:#90908a!important;min-width:40px!important;padding:0 15px 0 10px!important}.CodeMirror-lines{padding:4px 0!important}.CodeMirror-line,.CodeMirror pre{padding-left:15px!important}.code-hints{color:gold;background:#2d2d2d;border-top:1px solid #444;padding:1rem}#battleScreen{background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%)}.battle-container{flex-direction:column;gap:1rem;width:100%;height:100%;padding:2rem;display:flex}.battle-field{background:linear-gradient(135deg,#3a5a78 0%,#2c3e50 100%);border-radius:20px;flex:2;justify-content:space-around;align-items:center;padding:2rem;display:flex;position:relative;box-shadow:inset 0 5px 20px #0000004d}.character{flex-direction:column;align-items:center;gap:1rem;display:flex}.character-sprite{font-size:6rem;animation:3s ease-in-out infinite float}.player-side .character-sprite{animation-delay:0s}.enemy-side .character-sprite{animation-delay:1.5s}.character-info{background:#fffffff2;border-radius:15px;min-width:250px;padding:1rem;box-shadow:0 5px 15px #0003}.name-tag{color:#2c3e50;text-align:center;margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.hp-bar-container{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.hp-label{color:#e74c3c;min-width:30px;font-weight:700}.hp-bar{background:#ddd;border:2px solid #333;border-radius:10px;flex:1;height:20px;overflow:hidden}.hp-fill{border-radius:8px;height:100%;transition:width .5s}.player-hp{background:linear-gradient(90deg,#4caf50 0%,#8bc34a 100%)}.enemy-hp{background:linear-gradient(90deg,#f44336 0%,#e91e63 100%)}.hp-text{text-align:right;color:#2c3e50;min-width:80px;font-weight:700}.stats{color:#666;text-align:center;font-size:.85rem}.battle-log{background:#000c;border-radius:15px;flex-direction:column;flex:1;display:flex;overflow:hidden}.log-header{color:#fff;text-align:center;background:#34495e;padding:.8rem;font-weight:700}.log-content{color:#ecf0f1;flex:1;padding:1rem;font-family:Courier New,monospace;font-size:.9rem;overflow-y:auto}.log-entry{border-left:3px solid #3498db;margin-bottom:.5rem;padding:.3rem .3rem .3rem .5rem;animation:.3s slideIn}.log-entry.damage{color:#ff6b6b;border-left-color:#e74c3c}.log-entry.heal{color:#51cf66;border-left-color:#2ecc71}.log-entry.info{color:#ffd43b;border-left-color:#f39c12}.battle-actions{justify-content:center;gap:1rem;display:flex}.action-btn{cursor:pointer;border:none;border-radius:10px;padding:1rem 2rem;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 10px #0000004d}.action-btn:hover{transform:translateY(-3px);box-shadow:0 6px 15px #0006}.action-btn:active{transform:translateY(0)}.attack-btn{color:#fff;background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%)}.heal-btn{color:#fff;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}.heal-btn:disabled{opacity:.5;cursor:not-allowed}#damageNumbers{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.damage-number{text-shadow:2px 2px 4px #00000080;font-size:2rem;font-weight:700;animation:1s ease-out forwards damageFloat;position:absolute}.damage-number.player-damage{color:#ff6b6b}.damage-number.enemy-damage{color:#ffd43b}.damage-number.heal{color:#51cf66}#resultScreen{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.result-container{text-align:center;color:#fff}.result-content{margin-bottom:2rem;font-size:3rem;animation:.5s scaleIn}.result-content.victory{color:gold}.result-content.defeat{color:#ff6b6b}.continue-btn{color:#667eea;cursor:pointer;background:#fff;border:none;border-radius:30px;padding:1rem 2rem;font-size:1.2rem;transition:transform .3s;box-shadow:0 5px 15px #0000004d}.continue-btn:hover{transform:scale(1.1)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes glow{0%,to{text-shadow:3px 3px 6px #0000004d}50%{text-shadow:3px 3px 20px #fffc}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes damageFloat{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-100px)scale(1.5)}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}[hidden]{display:none!important}button:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid gold}.quest-card{text-align:left;font:inherit;color:inherit}#saveStatus{color:#333;margin:1rem 0}#executionStatus{color:#fff;white-space:pre-wrap;overflow-wrap:anywhere;padding:.6rem 1rem}.lesson-editor{min-width:0;min-height:0}.CodeMirror{flex:1;min-height:200px;height:0!important}.editor-header{flex-wrap:wrap;gap:.5rem}.battle-actions{flex-wrap:wrap}.result-content p{font-size:1.4rem}.game-container{height:100dvh}@media (width<=760px){body{overflow:auto}.game-title{font-size:2.5rem}.screen{align-items:flex-start;overflow-y:auto}#titleScreen,#resultScreen{align-items:center;padding:1rem}.lesson-layout{flex-direction:column;height:auto;min-height:100%}.lesson-instruction{flex:none;overflow:visible}.instruction-header{flex-wrap:wrap;gap:.75rem;padding:1rem}.instruction-content{padding:1rem;overflow:visible}.lesson-editor{flex:none;min-height:480px}.CodeMirror{flex:none;height:300px!important}.code-editor{width:100%;min-height:300px}.code-hints{padding:.75rem}.battle-container{height:auto;min-height:100%;padding:.75rem}.battle-field{flex-direction:column;gap:1rem;padding:1rem}.character-sprite{font-size:3rem}.character-info{min-width:240px}.battle-log{flex:none;min-height:180px;max-height:300px}.battle-actions{gap:.5rem}.action-btn{padding:.7rem;font-size:.95rem}.variable-demo{flex-wrap:wrap}.quest-container{margin:1rem auto}.quest-list{max-height:calc(100dvh - 220px)}.result-content{font-size:1.8rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.chapter-tabs{flex-wrap:wrap}#chapterIntroduction{color:#334155;margin-bottom:1rem;line-height:1.6}.function-progress{color:#5261b5;margin-bottom:1rem;font-weight:700}.learning-goal{background:#eef2ff;border-left:4px solid #667eea;padding:1rem}.concept-explanation p{margin:.8rem 0}.function-example{margin:1.2rem 0}.function-example pre{color:#f8fafc;white-space:pre-wrap;overflow-wrap:anywhere;background:#182338;border-radius:8px;padding:1rem;line-height:1.7;overflow-x:auto}.function-example pre code{color:inherit;background:0 0;padding:0}.execution-walkthrough{border:1px solid #c7d2fe;border-radius:8px;margin-bottom:1rem;padding:1rem}.execution-walkthrough ol{margin-top:.75rem}.execution-walkthrough li{padding:.3rem 0}.misconception{background:#fff5dc;border-radius:8px;margin-bottom:1rem;padding:1rem}.extra-experiment{margin:1rem 0}.extra-experiment summary{cursor:pointer;background:#eef2ff;border-radius:6px;padding:.75rem;font-weight:700}.extra-experiment p{padding:.5rem}#predictionArea{background:#eef2ff;max-height:40%;padding:1rem;overflow:auto}#predictionArea fieldset{border:1px solid #9daaf2;border-radius:8px;padding:.8rem}#predictionArea legend{padding:0 .4rem;font-weight:700}#predictionArea label{cursor:pointer;align-items:baseline;gap:.5rem;padding:.6rem 0;display:flex}#predictionArea input{flex-shrink:0}#practiceScreen{background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%);align-items:flex-start;padding:2rem;overflow-y:auto}.practice-result{color:#ecf0f1;flex-direction:column;gap:1rem;width:min(1100px,100%);display:flex}.practice-heading{text-align:center}.practice-location{color:#ffd43b;margin-bottom:.5rem;font-weight:700}.practice-heading h2{color:gold;margin-bottom:.5rem;font-size:clamp(1.6rem,3vw,2.8rem);animation:.5s scaleIn}.practice-result[data-outcome=retry] .practice-heading h2{color:#ffb3b3}.practice-result[data-outcome=experiment] .practice-heading h2{color:#b8eaff}.practice-field{flex:none;gap:1.5rem;padding:1.5rem}.practice-field .character-sprite{font-size:4rem}.practice-field .character-info{color:#2c3e50;text-align:center;max-width:340px;line-height:1.5}.practice-outputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.practice-outputs .battle-log{min-width:0}.practice-outputs .log-header{font-size:1rem}.practice-outputs pre{white-space:pre-wrap;overflow-wrap:anywhere;min-height:100px;max-height:260px;line-height:1.7}.practice-guidance{background:#0000004d;border-left:3px solid #f39c12;border-radius:8px;padding:1rem 1.25rem;line-height:1.7}.practice-guidance h3{color:#ffd43b;font-size:1rem}.practice-guidance p{margin-top:.5rem}.practice-actions{padding-bottom:.5rem}@media (width<=760px){#predictionArea{max-height:none;overflow:visible}#practiceScreen{padding:1rem}.practice-field{flex-direction:row;gap:.75rem;padding:1rem .5rem}.practice-field .character{flex:1;min-width:0}.practice-field .character-info{width:100%;min-width:0;padding:.75rem .5rem;font-size:.85rem}.practice-field .name-tag{font-size:1rem}.practice-outputs{grid-template-columns:1fr}#chapterIntroduction{font-size:.9rem}.quest-list{grid-template-columns:1fr;max-height:calc(100dvh - 340px)}}