.top-nav{display:flex;justify-content:space-between;align-items:center;background-color:#1e1f29;padding:.75rem 2rem;border-bottom:3px solid var(--accent-green);box-shadow:0 2px 5px #0000004d;z-index:100;position:relative}.app-title{font-size:1.8rem;font-weight:700;color:var(--accent-green);text-decoration:none}.nav-right{display:flex;gap:1.5rem}.nav-link{color:var(--text-color);text-decoration:none;font-size:1rem;font-weight:500;transition:color .2s ease-in-out}.nav-link:hover{color:var(--accent-pink)}header{background-color:#1e1f29;padding:.75rem 2rem;border-bottom:3px solid var(--accent-green);text-align:center;box-shadow:0 2px 5px #0000004d;z-index:10}h1{margin:0;color:var(--accent-green);font-size:1.8rem}.player-hub{display:flex;align-items:center;gap:1.5rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px dashed var(--light-bg)}#pixel-character{width:80px;height:80px;background-color:var(--accent-purple);border-radius:10px;position:relative;transition:transform .3s ease;cursor:pointer;flex-shrink:0}#pixel-character:hover{transform:scale(1.1) rotate(5deg)}.pixel-eye{width:15px;height:20px;background-color:#fff;border-radius:50%;position:absolute;top:25px;transition:all .3s ease}.pixel-eye.left{left:18px}.pixel-eye.right{right:18px}.pixel-pupil{width:7px;height:7px;background-color:#282a36;border-radius:50%;position:absolute;top:7px;left:4px;transition:all .3s ease}.pixel-mouth{width:40px;height:15px;background-color:#282a36;border-bottom-left-radius:15px;border-bottom-right-radius:15px;position:absolute;bottom:15px;left:20px;transition:all .3s cubic-bezier(.68,-.55,.27,1.55)}#pixel-character.happy .pixel-eye{height:18px;transform:scaleY(1.1)}#pixel-character.happy .pixel-mouth{height:20px;border-radius:20px;transform:scaleY(1.2)}#pixel-character.thinking .pixel-pupil{left:1px;top:10px}#pixel-character.sad{animation:shake .5s}#pixel-character.sad .pixel-eye{height:15px;top:30px}#pixel-character.sad .pixel-mouth{transform:rotate(180deg);border-top-left-radius:15px;border-top-right-radius:15px;bottom:20px}.player-stats{flex-grow:1;position:relative}.stat-item{font-size:1.2rem;margin-bottom:8px}.stat-item span{font-weight:700;color:var(--accent-yellow)}.xp-progress-bar{width:100%;height:20px;background-color:var(--dark-bg);border-radius:10px;overflow:hidden;border:1px solid var(--light-bg)}.xp-progress-fill{height:100%;background-image:linear-gradient(45deg,var(--accent-green),#42e068);width:0%;transition:width .5s ease-in-out}.xp-float-text{position:absolute;top:-10px;right:0;font-size:1.5rem;color:var(--accent-green);font-weight:700;text-shadow:0 0 5px #000;animation:float-up 1.5s ease-out forwards;pointer-events:none}.challenge-container{flex-grow:1;overflow-y:auto}#objectives{list-style-type:none;padding-left:0}#objectives li{padding:8px;margin-bottom:5px;border-left:4px solid var(--accent-pink);background-color:#0003;transition:all .3s ease;line-height:1.5}#objectives li.completed{border-left-color:var(--accent-green);text-decoration:line-through;color:#aaa;background-color:#50fa7b1a;animation:pop-in .5s ease-out}.learnable-term{color:var(--accent-yellow);font-weight:700;text-decoration:underline dotted;text-decoration-thickness:2px;cursor:help;transition:color .2s}.learnable-term:hover{color:#fff}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem}.action-buttons #check-code-btn{grid-column:1 / -1}.action-buttons #hint-btn{background-color:var(--accent-purple)}.action-buttons #show-answer-btn{background-color:var(--accent-orange)}.action-buttons #next-level-btn{background-color:var(--light-bg);grid-column:1 / -1}.code-editors{display:flex;flex-direction:column;gap:1rem;flex-grow:0}.editor-container{display:flex;flex-direction:column;min-height:0}.editor-container label{margin-bottom:.5rem;font-weight:700;color:var(--accent-yellow)}.cm-editor{border:1px solid var(--light-bg);border-radius:5px;font-size:1rem;height:10.5rem;overflow-x:auto}.preview-container{display:flex;flex-direction:column;flex-grow:1;min-height:0}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.preview-header label{margin-bottom:0;color:var(--accent-yellow);font-weight:700}#refresh-preview-btn{background:none;border:1px solid var(--light-bg);color:var(--text-color);cursor:pointer;padding:5px 8px;border-radius:5px;transition:all .2s ease}#refresh-preview-btn:hover{background-color:var(--light-bg);color:#fff}#preview-window{width:100%;height:100%;border:1px solid var(--light-bg);border-radius:5px;background-color:#fff}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#000000b3;animation:pop-in .3s;padding:2rem;box-sizing:border-box}.modal.show{display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--dark-bg);padding:25px;border:1px solid var(--light-bg);border-radius:10px;width:100%;max-width:900px;color:var(--text-color);box-shadow:0 5px 15px #00000080;display:flex;flex-direction:column;max-height:calc(100vh - 4rem)}.modal-content-scrollable{overflow-y:auto}.close-btn{color:#aaa;align-self:flex-end;font-size:28px;font-weight:700;cursor:pointer;line-height:1}.modal-content h2{color:var(--accent-purple);margin-top:0}.modal-content pre{background-color:#1e1f29;padding:1rem;border-radius:5px;border-left:3px solid var(--accent-pink);white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-code)}#direct-hints-container{padding-bottom:1rem;margin-bottom:1rem;border-bottom:2px solid var(--light-bg);flex-shrink:0}#direct-hints-container h4{color:var(--accent-pink);margin:0 0 5px}#direct-hints-container hr{border-color:var(--light-bg);opacity:.5;margin:1rem 0}.ai-hint-section{display:flex;flex-direction:column;flex-grow:1;min-height:250px}.ai-hint-section h3{margin-top:0;color:var(--accent-green);text-align:center}#chat-history-container{background-color:#1e1f29;border-radius:5px;padding:1rem;margin-bottom:1rem;flex-grow:1;overflow-y:auto;border:1px solid var(--light-bg);display:flex;flex-direction:column;gap:10px}.chat-bubble{padding:10px 15px;border-radius:15px;max-width:85%;line-height:1.4;animation:pop-in .3s;word-wrap:break-word}#ai-question-input{width:100%;box-sizing:border-box;padding:10px;margin-bottom:10px;background-color:var(--dark-bg);border:1px solid var(--light-bg);color:var(--text-color);border-radius:5px;font-family:var(--font-main);resize:vertical;min-height:60px}#ask-ai-btn{width:100%;background-color:var(--accent-green);color:var(--dark-bg)}#answer-modal .modal-content h2{color:var(--accent-orange)}#answer-modal p{text-align:center}#answer-modal-timer{text-align:center;font-size:1.5rem;color:var(--accent-orange);margin-top:1rem;font-weight:700}#answer-code-container{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}#answer-code-container h4{color:var(--accent-pink);margin-top:0;margin-bottom:.5rem}#answer-code-container pre{background-color:#1e1f29;padding:1rem;border-radius:5px;border-left:3px solid var(--accent-pink);white-space:pre-wrap;word-wrap:break-word;font-family:var(--font-code);margin:0}@media (min-width: 768px){#answer-code-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}#incorrect-modal .modal-content{max-width:400px;padding:40px 25px;text-align:center;font-size:1.5rem;font-weight:700;color:var(--accent-pink)}.history-page{width:100%;max-width:900px;margin:0 auto;padding:1rem}.conversation-card{background-color:var(--main-bg);border:1px solid var(--light-bg);border-radius:8px;padding:1rem;margin-bottom:1.5rem}.conversation-card h2{color:var(--accent-green);margin-top:0;font-size:1.5rem;border-bottom:1px solid var(--light-bg);padding-bottom:.5rem}.conversation-meta{font-size:.9rem;color:#aaa;margin-bottom:1rem}.chat-history-display{background-color:#1e1f29;border-radius:5px;padding:1rem;border:1px solid var(--light-bg);max-height:400px;overflow-y:auto}.chat-bubble{padding:10px 15px;border-radius:15px;margin-bottom:10px;max-width:85%;line-height:1.4;word-wrap:break-word}.user-bubble{background-color:var(--accent-purple);color:var(--dark-bg);margin-left:auto;border-bottom-right-radius:5px}.ai-bubble{background-color:var(--light-bg);margin-right:auto;border-bottom-left-radius:5px}:root{--dark-bg: #282a36;--main-bg: #44475a;--light-bg: #6272a4;--accent-green: #50fa7b;--accent-pink: #ff79c6;--accent-purple: #bd93f9;--accent-yellow: #f1fa8c;--accent-orange: #ffb86c;--text-color: #f8f8f2;--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-code: "Courier New", Courier, monospace}@keyframes pop-in{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}@keyframes float-up{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-40px) scale(1.2)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}body{font-family:var(--font-main);background-color:var(--dark-bg);color:var(--text-color);margin:0;display:flex;flex-direction:column;min-height:100vh}main{display:flex;flex-grow:1;padding:1rem;gap:1rem}.left-panel,.right-panel{background-color:var(--main-bg);border-radius:8px;padding:1rem;display:flex;flex-direction:column;box-shadow:0 4px 8px #0000004d}.left-panel{flex:1.2}.right-panel{flex:1.8;gap:1rem}h2{margin-top:0;color:var(--accent-green);border-bottom:1px solid var(--light-bg);padding-bottom:.5rem}.game-btn{background-color:var(--accent-pink);color:#fff;border:none;padding:12px 10px;font-size:1rem;font-weight:700;border-radius:5px;cursor:pointer;transition:all .3s ease}.game-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #0003}.game-btn:active:not(:disabled){transform:translateY(0)}.game-btn:disabled{background-color:#666;cursor:not-allowed;transform:none;box-shadow:none}