*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1a1a2e;color:#eee;min-height:100vh}#app{display:flex;flex-direction:column;min-height:100vh}header{text-align:center;padding:1rem;background:#16213e}header h1{font-size:1.8rem;color:#4ecca3}header p{color:#888;margin-top:.25rem}main{display:flex;flex:1;gap:1rem;padding:1rem}.simulation-container{flex:1;display:flex;justify-content:center;align-items:center;background:#0f0f23;border-radius:8px;overflow:hidden;position:relative}#canvas{display:block;cursor:pointer}.car-info{position:absolute;top:1rem;left:1rem;width:280px;background:#16213ef2;border-radius:8px;padding:1rem;border:1px solid #4ecca3;box-shadow:0 4px 20px #00000080;z-index:100}.car-info.hidden{display:none}.car-info h3{color:#4ecca3;margin-bottom:.75rem;padding-right:1.5rem}.car-info .close-btn{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:#888;font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem}.car-info .close-btn:hover{color:#e94560}.info-section{margin-bottom:.75rem;padding-bottom:.75rem;border-bottom:1px solid #333}.info-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.info-section h4{color:#4ecca3;font-size:.85rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.info-section p{font-size:.85rem;color:#ccc;margin:.25rem 0}.info-section p strong{color:#888}.info-section p span{color:#fff}.info-section ul{list-style:none;padding-left:0}.info-section li{font-size:.85rem;color:#ccc;margin:.25rem 0;padding-left:.75rem;border-left:2px solid #4ecca3}.trip-desc{font-style:italic;color:#aaa!important;margin-top:.5rem!important}.controls{width:280px;background:#16213e;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:1rem}.controls h2{color:#4ecca3;font-size:1.2rem;border-bottom:1px solid #333;padding-bottom:.5rem}.control-group{display:flex;flex-direction:column;gap:.25rem}.control-group label{font-size:.9rem;color:#ccc}.control-group label span{color:#4ecca3;font-weight:700}input[type=range]{width:100%;height:8px;-webkit-appearance:none;background:#333;border-radius:4px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#4ecca3;border-radius:50%;cursor:pointer}input[type=range]::-webkit-slider-thumb:hover{background:#3db892}.zoom-controls label{display:block;margin-bottom:.5rem}.zoom-buttons{display:flex;gap:.25rem}.zoom-btn{flex:1;padding:.5rem;font-size:1rem;font-weight:700;border:none;border-radius:4px;cursor:pointer;background:#333;color:#fff;transition:background .2s}.zoom-btn:hover{background:#4ecca3;color:#16213e}.zoom-hint{font-size:.75rem;color:#666;margin-top:.5rem;text-align:center}.buttons{display:flex;gap:.5rem}.buttons button{flex:1;padding:.75rem;font-size:1rem;border:none;border-radius:4px;cursor:pointer;transition:background .2s}#pauseBtn{background:#e94560;color:#fff}#pauseBtn:hover{background:#d63050}#pauseBtn.paused{background:#4ecca3}#pauseBtn.paused:hover{background:#3db892}#resetBtn{background:#444;color:#fff}#resetBtn:hover{background:#555}.save-load-controls{background:#0f0f23;border-radius:4px;padding:.75rem}.save-load-buttons{display:flex;gap:.5rem;margin-bottom:.5rem}.save-load-buttons button{flex:1;padding:.5rem;font-size:.9rem;border:none;border-radius:4px;cursor:pointer;transition:background .2s}#saveBtn{background:#4ecca3;color:#16213e}#saveBtn:hover{background:#3db892}#loadBtn{background:#444;color:#fff}#loadBtn:hover{background:#555}#loadBtn:disabled{background:#333;color:#666;cursor:not-allowed}.save-info{font-size:.75rem;color:#666;margin-top:.5rem;text-align:center}.save-info.has-save{color:#4ecca3}.stats{margin-top:auto;background:#0f0f23;border-radius:4px;padding:1rem}.stats h3{color:#4ecca3;font-size:1rem;margin-bottom:.5rem}.stats p{font-size:.9rem;color:#aaa;margin:.25rem 0}.stats p span{color:#fff;font-weight:700}#canvas3D{display:block;width:100%;height:100%;position:absolute;top:0;left:0}#canvas3D.hidden{display:none}.hidden{display:none!important}.view-3d-controls{position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:100}.view-btn{padding:.75rem 1.5rem;font-size:.9rem;border:none;border-radius:4px;cursor:pointer;transition:all .2s;background:#16213ee6;color:#4ecca3;border:1px solid #4ecca3}.view-btn:hover{background:#4ecca3;color:#16213e}.view-btn:active{transform:scale(.98)}.enter-3d-btn{width:100%;padding:.75rem;margin-top:.75rem;font-size:.9rem;font-weight:700;border:none;border-radius:4px;cursor:pointer;transition:all .2s;background:#4ecca3;color:#16213e}.enter-3d-btn:hover{background:#3db892}.control-hints{position:absolute;bottom:1rem;left:1rem;z-index:100}.hint-content{background:#16213ee6;border-radius:8px;padding:1rem;border:1px solid #4ecca3}.hint-content h4{color:#4ecca3;font-size:.9rem;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.5px}.hint-row{font-size:.85rem;color:#ccc;margin:.35rem 0;display:flex;align-items:center;gap:.75rem}.hint-row .key{background:#333;padding:.25rem .5rem;border-radius:3px;font-family:monospace;font-size:.8rem;color:#fff;min-width:60px;text-align:center}.speedometer{position:absolute;bottom:1rem;right:1rem;z-index:100;background:#16213ee6;border-radius:50%;width:100px;height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:3px solid #4ecca3}.speed-value{font-size:2rem;font-weight:700;color:#fff;line-height:1}.speed-unit{font-size:.75rem;color:#4ecca3;text-transform:uppercase;margin-top:.25rem}@media (max-width: 900px){main{flex-direction:column}.controls{width:100%;flex-direction:row;flex-wrap:wrap}.control-group{width:calc(50% - .5rem)}.buttons,.stats{width:100%}.speedometer{width:80px;height:80px}.speed-value{font-size:1.5rem}}.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f23fa;z-index:1000;display:flex;justify-content:center;align-items:center;padding:2rem;overflow-y:auto}.tutorial-overlay.hidden{display:none}.tutorial-content{max-width:700px;text-align:center;animation:fadeInUp .5s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.tutorial-content h1{font-size:2.5rem;color:#4ecca3;margin-bottom:.5rem}.tutorial-intro{font-size:1.3rem;color:#ccc;margin-bottom:2rem}.traffic-light-lesson{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:2rem}.lesson-light{display:flex;align-items:center;gap:1.5rem;background:#16213ecc;padding:1.25rem;border-radius:12px;text-align:left}.big-light{width:60px;height:60px;border-radius:50%;flex-shrink:0;box-shadow:0 0 20px currentColor}.big-light.red{background:#f44;color:#f44}.big-light.yellow{background:#fc0;color:#fc0}.big-light.green{background:#4f4;color:#4f4}.lesson-text h2{font-size:1.4rem;margin-bottom:.25rem}.red-lesson .lesson-text h2{color:#f66}.yellow-lesson .lesson-text h2{color:#fd4}.green-lesson .lesson-text h2{color:#6f6}.lesson-text p{color:#bbb;font-size:1.1rem}.why-section{background:#4ecca326;padding:1.25rem;border-radius:12px;margin-bottom:1.5rem;border:2px solid #4ecca3}.why-section h2{color:#4ecca3;font-size:1.3rem;margin-bottom:.5rem}.why-section p{color:#ccc;font-size:1.1rem}.tutorial-tips{text-align:left;background:#16213ecc;padding:1.25rem;border-radius:12px;margin-bottom:2rem}.tutorial-tips h3{color:#4ecca3;margin-bottom:.75rem}.tutorial-tips ul{list-style:none;padding:0}.tutorial-tips li{color:#ccc;font-size:1.05rem;padding:.5rem 0 .5rem 1.5rem;position:relative}.tutorial-tips li:before{content:"→";position:absolute;left:0;color:#4ecca3}.start-btn{padding:1rem 3rem;font-size:1.4rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;background:linear-gradient(135deg,#4ecca3,#3db892);color:#16213e;transition:all .3s;box-shadow:0 4px 20px #4ecca366}.start-btn:hover{transform:scale(1.05);box-shadow:0 6px 30px #4ecca399}.kid-mode-btn{position:absolute;right:80px;top:50%;transform:translateY(-50%);padding:.5rem 1rem;font-size:.9rem;font-weight:700;border:2px solid #4ecca3;border-radius:20px;cursor:pointer;background:transparent;color:#4ecca3;transition:all .2s}.kid-mode-btn:hover,.kid-mode-btn.active{background:#4ecca3;color:#16213e}.show-tutorial-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:36px;height:36px;font-size:1.2rem;font-weight:700;border:2px solid #4ecca3;border-radius:50%;cursor:pointer;background:transparent;color:#4ecca3;transition:all .2s}.show-tutorial-btn:hover{background:#4ecca3;color:#16213e}header{position:relative}.traffic-light-indicator{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:100;background:#000c;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:8px;border:2px solid #333}.indicator-light{width:30px;height:30px;border-radius:50%;background:#333;transition:all .3s}.indicator-light.red.active{background:#f44;box-shadow:0 0 20px #f44}.indicator-light.yellow.active{background:#fc0;box-shadow:0 0 20px #fc0}.indicator-light.green.active{background:#4f4;box-shadow:0 0 20px #4f4}.indicator-label{color:#fff;font-size:.8rem;font-weight:700;text-transform:uppercase;margin-top:4px}.driving-feedback{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:150;padding:1.5rem 2.5rem;border-radius:12px;font-size:1.8rem;font-weight:700;text-align:center;animation:popIn .3s ease-out;pointer-events:none}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.driving-feedback.good{background:#44ff44e6;color:#040}.driving-feedback.warning{background:#ffcc00e6;color:#640}.driving-feedback.bad{background:#ff4444e6;color:#400}.safety-score{position:absolute;top:1rem;left:1rem;z-index:100;background:#16213ee6;border-radius:10px;padding:.75rem 1rem;border:2px solid #4ecca3}.score-label{color:#4ecca3;font-size:.8rem;font-weight:700;text-transform:uppercase;margin-bottom:.25rem}.stars{font-size:1.5rem;letter-spacing:2px}.star{color:#444}.star.filled{color:#fc0;text-shadow:0 0 10px #ffcc00}body.kid-mode .control-group.advanced{display:none}body.kid-mode .stats p:nth-child(n+4){display:none}.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#4ecca3}.minimap-container{position:absolute;bottom:1rem;right:1rem;z-index:100;background:#16213ee6;border-radius:8px;padding:8px;border:2px solid #4ecca3}.minimap-container canvas{display:block;border-radius:4px}.heatmap-legend{position:absolute;bottom:1rem;left:1rem;z-index:100;background:#16213ee6;border-radius:8px;padding:.5rem .75rem;border:1px solid #4ecca3}.heatmap-legend h4{margin:0 0 .5rem;font-size:.8rem;color:#4ecca3}.legend-gradient{width:120px;height:12px;background:linear-gradient(to right,#0f0,#ff0,red);border-radius:3px;margin-bottom:.25rem}.legend-labels{display:flex;justify-content:space-between;font-size:.65rem;color:#aaa}.quiz-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f23f2;z-index:1001;display:flex;justify-content:center;align-items:center;padding:2rem}.quiz-overlay.hidden{display:none}.quiz-content{max-width:500px;width:100%;background:#16213e;border-radius:16px;padding:2rem;border:2px solid #4ecca3;box-shadow:0 8px 40px #4ecca34d;animation:popIn .3s ease-out}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #333}.quiz-header h2{color:#4ecca3;font-size:1.5rem;margin:0}.quiz-score{background:#0f0f23;padding:.5rem 1rem;border-radius:20px;color:#fff;font-size:.9rem}.quiz-question{font-size:1.3rem;color:#fff;margin-bottom:1.5rem;line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:.75rem}.quiz-option{padding:1rem 1.25rem;background:#0f0f23;border:2px solid #333;border-radius:8px;color:#ccc;font-size:1.1rem;cursor:pointer;transition:all .2s;text-align:left}.quiz-option:hover{border-color:#4ecca3;color:#fff}.quiz-option.selected{border-color:#4ecca3;background:#4ecca326;color:#fff}.quiz-option.correct{border-color:#4f4;background:#4f43;color:#4f4}.quiz-option.incorrect{border-color:#f44;background:#f443;color:#f44}.quiz-option.disabled{cursor:not-allowed;opacity:.7}.quiz-result{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #333}.quiz-result.hidden{display:none}.result-text{font-size:1.4rem;font-weight:700;margin-bottom:.75rem}.result-text.correct{color:#4f4}.result-text.incorrect{color:#f44}.explanation{color:#bbb;font-size:1rem;line-height:1.5;margin-bottom:1.5rem}.quiz-continue-btn{width:100%;padding:1rem;font-size:1.1rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;background:#4ecca3;color:#16213e;transition:all .2s}.quiz-continue-btn:hover{background:#3db892}.safetytown-entry-btn{position:absolute;right:200px;top:50%;transform:translateY(-50%);padding:.5rem 1rem;font-size:.9rem;font-weight:700;border:2px solid #f39c12;border-radius:20px;cursor:pointer;background:transparent;color:#f39c12;transition:all .2s}.safetytown-entry-btn:hover{background:#f39c12;color:#16213e}.safetytown-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f0f23fa;z-index:1002;display:flex;justify-content:center;align-items:center;padding:2rem;overflow-y:auto}.safetytown-overlay.hidden{display:none}.safetytown-modal{max-width:600px;width:100%;background:#16213e;border-radius:20px;padding:2rem;border:3px solid #f39c12;box-shadow:0 8px 40px #f39c124d;animation:fadeInUp .3s ease-out}.safetytown-modal h1{color:#f39c12;font-size:2rem;text-align:center;margin-bottom:.5rem}.safetytown-modal h3{color:#f39c12;font-size:1.1rem;margin-bottom:.75rem}.safetytown-modal p{color:#ccc;text-align:center;margin-bottom:1.5rem}.safetytown-btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .2s;width:100%;margin-top:.5rem}.safetytown-btn.primary{background:linear-gradient(135deg,#f39c12,#e67e22);color:#16213e}.safetytown-btn.primary:hover:not(:disabled){transform:scale(1.02);box-shadow:0 4px 20px #f39c1266}.safetytown-btn.primary:disabled{opacity:.5;cursor:not-allowed}.safetytown-btn.secondary{background:#333;color:#ccc}.safetytown-btn.secondary:hover{background:#444;color:#fff}.age-options{display:flex;gap:1rem;margin-bottom:1.5rem}.age-option{flex:1;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;background:#0f0f23;border:3px solid #333;border-radius:12px;cursor:pointer;transition:all .2s}.age-option:hover{border-color:#f39c12}.age-option.selected{border-color:#f39c12;background:#f39c121a}.age-icon{font-size:3rem;margin-bottom:.5rem}.age-label{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:.25rem}.age-desc{font-size:.85rem;color:#aaa;text-align:center}.name-input-section{margin-bottom:1rem}.name-input-section label{display:block;color:#ccc;margin-bottom:.5rem}.name-input-section input{width:100%;padding:.75rem;font-size:1rem;border:2px solid #333;border-radius:8px;background:#0f0f23;color:#fff;transition:border-color .2s}.name-input-section input:focus{outline:none;border-color:#f39c12}.menu-header{text-align:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #333}.player-info{display:flex;justify-content:space-between;padding:.75rem 1rem;background:#0f0f23;border-radius:8px;margin-bottom:1rem}#playerNameDisplay{color:#fff;font-weight:700}#playerStarsDisplay{color:#fc0}.menu-buttons{display:flex;gap:.75rem;margin-bottom:1.5rem}.menu-btn{flex:1;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;background:#0f0f23;border:2px solid #333;border-radius:8px;color:#ccc;font-size:.95rem;cursor:pointer;transition:all .2s}.menu-btn:hover{border-color:#f39c12;color:#fff}.menu-icon{font-size:1.2rem}.badge-count{margin-left:auto;background:#f39c12;color:#16213e;padding:.15rem .5rem;border-radius:10px;font-size:.8rem;font-weight:700}.scenario-categories{margin-bottom:1.5rem}.category-buttons{display:flex;flex-direction:column;gap:.75rem}.category-btn{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#0f0f23;border:2px solid #333;border-radius:10px;cursor:pointer;transition:all .2s;text-align:left}.category-btn:hover{border-color:#f39c12}.category-btn.pedestrian:hover{border-color:#3498db}.category-btn.bicycle:hover{border-color:#2ecc71}.category-btn.emergency:hover{border-color:#e74c3c}.category-icon{font-size:1.5rem}.category-btn span:nth-child(2){flex:1;color:#fff;font-size:1rem;font-weight:500}.category-progress{color:#888;font-size:.9rem}.menu-footer{display:flex;flex-direction:column;gap:.5rem}.menu-btn.certificates{justify-content:center}.character-type-section{margin-bottom:1.5rem}.character-type-options{display:flex;gap:1rem}.type-option{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem;background:#0f0f23;border:2px solid #333;border-radius:10px;cursor:pointer;transition:all .2s}.type-option:hover{border-color:#f39c12}.type-option.selected{border-color:#f39c12;background:#f39c121a}.type-icon{font-size:2rem;margin-bottom:.25rem}.type-option span:last-child{color:#fff;font-size:.95rem}.appearance-section{margin-bottom:1.5rem}.appearance-options{display:flex;flex-direction:column;gap:1rem}.appearance-option{background:#0f0f23;padding:.75rem;border-radius:8px}.appearance-option label{display:block;color:#aaa;font-size:.85rem;margin-bottom:.5rem}.color-buttons{display:flex;gap:.5rem}.color-btn{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s}.color-btn:hover{transform:scale(1.1)}.color-btn.selected{border-color:#f39c12;box-shadow:0 0 10px #f39c1280}.character-preview{width:100px;height:100px;background:#0f0f23;border-radius:50%;margin:1rem auto;border:3px solid #f39c12;display:flex;justify-content:center;align-items:center;font-size:3rem}.character-buttons{display:flex;flex-direction:column;gap:.5rem}.badge-view{max-width:700px}.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.badge-item{display:flex;flex-direction:column;align-items:center;padding:1rem;background:#0f0f23;border-radius:12px;border:2px solid #333;transition:all .2s}.badge-item.earned{border-color:#f39c12}.badge-item.locked{opacity:.5}.badge-icon{font-size:2.5rem;margin-bottom:.5rem}.badge-item.locked .badge-icon{filter:grayscale(100%)}.badge-name{color:#fff;font-size:.85rem;font-weight:700;text-align:center;margin-bottom:.25rem}.badge-description{color:#888;font-size:.75rem;text-align:center}.badge-date{color:#f39c12;font-size:.7rem;margin-top:.25rem}.badge-item.bronze{border-color:#cd7f32}.badge-item.silver{border-color:silver}.badge-item.gold{border-color:gold}.badge-item.platinum{border-color:#e5e4e2;box-shadow:0 0 15px #e5e4e24d}@media (max-width: 600px){.safetytown-modal{padding:1.5rem;margin:1rem}.age-options{flex-direction:column}.badge-grid{grid-template-columns:repeat(2,1fr)}.safetytown-entry-btn{right:180px;padding:.4rem .75rem;font-size:.8rem}}.game-select{max-width:500px}.game-select-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.game-back-btn{background:none;border:none;color:#4ecca3;font-size:1.2rem;cursor:pointer;padding:.25rem .5rem;border-radius:4px;transition:background .2s}.game-back-btn:hover{background:#4ecca31a}.game-select-header h1{margin:0;flex:1}.game-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto}.game-item{display:flex;align-items:center;gap:1rem;padding:1rem;background:#0f0f23;border-radius:12px;border:2px solid #333;cursor:pointer;transition:all .2s}.game-item:hover{border-color:#4ecca3;transform:translate(4px)}.game-item.completed{border-color:#27ae60}.game-item-icon{font-size:2rem;width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:#4ecca31a;border-radius:10px}.game-item-info{flex:1}.game-item-title{color:#fff;font-weight:700;font-size:1rem;margin-bottom:.25rem}.game-item-desc{color:#888;font-size:.85rem}.game-item-stars{color:#333;font-size:1.2rem}.game-item-stars .filled{color:#f39c12}.game-hud{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:500}.game-hud.hidden{display:none}.game-hud-top{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;pointer-events:auto}.game-exit-btn{width:40px;height:40px;border-radius:50%;border:none;background:#16213ee6;color:#fff;font-size:1.5rem;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px #0000004d}.game-exit-btn:hover{background:#e94560}.game-progress{display:flex;gap:.5rem;padding:.5rem 1rem;background:#16213ee6;border-radius:20px;box-shadow:0 2px 10px #0000004d}.progress-dot{width:12px;height:12px;border-radius:50%;background:#333;transition:all .3s}.progress-dot.completed{background:#27ae60}.progress-dot.current{background:#4ecca3;box-shadow:0 0 10px #4ecca380}.game-instruction-banner{position:absolute;top:70px;left:50%;transform:translate(-50%);background:#16213ef2;padding:1rem 2rem;border-radius:12px;box-shadow:0 4px 20px #0006;border:2px solid #4ecca3;pointer-events:auto;max-width:90%;text-align:center}.game-instruction-banner p{color:#fff;font-size:1.3rem;font-weight:700;margin:0}.game-hud-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;pointer-events:auto}.game-score{display:flex;gap:.25rem;font-size:1.8rem;padding:.5rem 1rem;background:#16213ee6;border-radius:12px;box-shadow:0 2px 10px #0000004d}.game-score .star{color:#333;transition:all .3s}.game-score .star.filled{color:#f39c12}.game-score .star.earned{color:#f39c12;animation:starEarned .5s ease-out}@keyframes starEarned{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.game-timer{font-size:1.5rem;font-weight:700;color:#fff;padding:.5rem 1rem;background:#16213ee6;border-radius:12px;box-shadow:0 2px 10px #0000004d;min-width:80px;text-align:center}.game-timer:empty{display:none}.game-timer.warning{color:#f39c12;animation:pulse .5s ease-in-out infinite}.game-timer.critical{color:#e94560;animation:pulse .25s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.game-hint-btn{background:#16213ee6;border:2px solid #3498db;color:#3498db;padding:.5rem 1rem;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;box-shadow:0 2px 10px #0000004d}.game-hint-btn:hover{background:#3498db;color:#fff}.game-quiz-panel{position:fixed;bottom:80px;left:50%;transform:translate(-50%);z-index:510}.game-quiz-panel.hidden{display:none}.game-quiz-options{display:flex;gap:1rem;padding:1rem;background:#16213ef2;border-radius:12px;box-shadow:0 4px 20px #0006;border:2px solid #4ecca3}.quiz-option-btn{padding:1rem 2rem;font-size:1.1rem;font-weight:700;border:2px solid #4ecca3;border-radius:8px;background:#16213e;color:#fff;cursor:pointer;transition:all .2s;min-width:120px}.quiz-option-btn:hover{background:#4ecca3;color:#16213e}.quiz-option-btn.correct{background:#27ae60;border-color:#27ae60;color:#fff}.quiz-option-btn.incorrect{background:#e94560;border-color:#e94560;color:#fff}.game-result{max-width:400px;text-align:center}.result-icon{font-size:4rem;margin-bottom:1rem;color:#f39c12}.result-score{margin:1.5rem 0}#resultScoreText{font-size:1.2rem;color:#888;display:block;margin-bottom:.5rem}.result-stars{font-size:2rem}.result-stars .star{color:#333}.result-stars .star.filled{color:#f39c12}.result-badge{background:linear-gradient(135deg,#f39c12,#e74c3c);padding:1rem;border-radius:12px;margin:1rem 0;display:flex;align-items:center;justify-content:center;gap:.5rem}.result-badge .badge-icon{font-size:1.5rem}#resultBadgeName{font-weight:700;color:#fff}.result-lesson{background:#4ecca31a;padding:1rem;border-radius:8px;margin:1.5rem 0;border-left:4px solid #4ecca3;text-align:left}.result-lesson h3{color:#4ecca3;font-size:.9rem;margin-bottom:.5rem}.result-lesson p{color:#ccc;font-size:.95rem;line-height:1.5}.result-buttons{display:flex;flex-direction:column;gap:.5rem}.game-feedback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:600;pointer-events:none}.game-feedback.hidden{display:none}.feedback-content{display:flex;align-items:center;gap:.75rem;background:#16213ef2;padding:1rem 2rem;border-radius:50px;box-shadow:0 4px 30px #00000080;animation:feedbackPop .3s ease-out}@keyframes feedbackPop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.feedback-icon{font-size:1.5rem}.feedback-content.correct{border:2px solid #27ae60}.feedback-content.correct .feedback-icon{color:#27ae60}.feedback-content.incorrect{border:2px solid #e94560}.feedback-content.incorrect .feedback-icon{color:#e94560}.feedback-text{font-size:1.2rem;font-weight:700;color:#fff}.sequence-zones{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;pointer-events:none;z-index:450}.sequence-zones.hidden{display:none}.sequence-zone{flex:1;display:flex;align-items:center;justify-content:center;pointer-events:auto;cursor:pointer;transition:background .2s}.sequence-zone:hover{background:#4ecca31a}.sequence-zone.highlight{background:#4ecca333;animation:zoneGlow 1s ease-in-out infinite}@keyframes zoneGlow{0%,to{background:#4ecca31a}50%{background:#4ecca34d}}.zone-label{font-size:2rem;color:#ffffff4d;font-weight:700;-webkit-user-select:none;user-select:none}.game-mode-active #canvas{cursor:crosshair}@media (max-width: 600px){.game-instruction-banner{padding:.75rem 1.25rem}.game-instruction-banner p{font-size:1rem}.game-quiz-options{flex-direction:column;gap:.5rem}.quiz-option-btn{min-width:unset;padding:.75rem 1.5rem}.game-score{font-size:1.4rem}.result-icon{font-size:3rem}}