@import"https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1a2e;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Nunito,sans-serif;overflow:hidden}#root{width:640px;height:480px;position:relative;overflow:hidden;border-radius:12px;box-shadow:0 0 40px #00000080}.game-container{width:640px;height:480px;position:relative;overflow:hidden}.game-container canvas{display:block}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;z-index:10}.overlay>*{pointer-events:auto}.intro-overlay{background:#0f0f23eb;pointer-events:auto}.intro-title{font-family:Fredoka One,cursive;font-size:28px;color:#fff;text-align:center;margin-bottom:8px;text-shadow:0 2px 10px rgba(100,200,255,.5)}.intro-subtitle{font-size:14px;color:#a0c4ff;text-align:center;margin-bottom:24px;font-weight:600}.intro-instructions{font-size:13px;color:#c0c0d0;text-align:center;margin-bottom:28px;line-height:1.5}.start-btn{background:linear-gradient(135deg,#4fc3f7,#29b6f6);border:none;color:#fff;font-family:Fredoka One,cursive;font-size:18px;padding:12px 40px;border-radius:30px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 15px #4fc3f766}.start-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #4fc3f799}.panel{position:absolute;background:#141432f2;border:2px solid rgba(100,200,255,.3);border-radius:16px;padding:20px;z-index:20;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.panel-title{font-family:Fredoka One,cursive;font-size:18px;color:#4fc3f7;text-align:center;margin-bottom:16px}.checklist-item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:6px;background:#ffffff0d;border-radius:8px;cursor:pointer;transition:background .2s,transform .1s;font-size:14px;color:#e0e0f0}.checklist-item:hover{background:#4fc3f726;transform:translate(4px)}.checklist-item.checked{background:#4caf5033;color:#81c784}.checklist-icon{width:24px;height:24px;border:2px solid rgba(255,255,255,.3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.checklist-icon.checked{background:#4caf50;border-color:#4caf50}.strategy-card{display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:8px;background:#ffffff0d;border-radius:10px;cursor:pointer;transition:all .2s;font-size:13px;color:#e0e0f0;border:2px solid transparent}.strategy-card:hover{background:#ffb74d26;border-color:#ffb74d4d;transform:scale(1.02)}.strategy-card.selected{background:#ffb74d40;border-color:#ffb74d}.strategy-icon{font-size:22px;flex-shrink:0}.encouragement-choice{padding:10px 14px;margin-bottom:8px;background:#ffffff0d;border-radius:10px;cursor:pointer;transition:all .2s;font-size:13px;color:#e0e0f0;border:2px solid transparent;text-align:left}.encouragement-choice:hover{background:#ce93d826;border-color:#ce93d84d;transform:scale(1.02)}.encouragement-choice.selected{background:#ce93d840;border-color:#ce93d8}.banner{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#141432f2;border:2px solid rgba(100,200,255,.4);border-radius:12px;padding:12px 24px;z-index:25;text-align:center;animation:bannerSlideUp .5s ease-out}.banner-text{font-family:Fredoka One,cursive;font-size:14px;color:#4fc3f7}@keyframes bannerSlideUp{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.continue-btn{background:linear-gradient(135deg,#4fc3f7,#29b6f6);border:none;color:#fff;font-family:Nunito,sans-serif;font-weight:700;font-size:13px;padding:8px 24px;border-radius:20px;cursor:pointer;margin-top:12px;transition:transform .2s}.continue-btn:hover{transform:scale(1.05)}.completion-overlay{background:#0a0a1ef2;pointer-events:auto;text-align:center}.completion-title{font-family:Fredoka One,cursive;font-size:24px;color:#ffd54f;margin-bottom:12px;text-shadow:0 2px 15px rgba(255,213,79,.4)}.completion-text{font-size:14px;color:#c0c0d0;margin-bottom:8px}.completion-badge{display:inline-flex;align-items:center;gap:8px;background:#ffd54f26;border:2px solid rgba(255,213,79,.3);border-radius:12px;padding:10px 20px;margin-top:16px;font-size:13px;color:#ffd54f;font-weight:700}.progress-bar{position:absolute;top:8px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:15;background:#141432cc;padding:6px 14px;border-radius:20px}.progress-dot{width:10px;height:10px;border-radius:50%;background:#fff3;transition:background .3s}.progress-dot.active{background:#4fc3f7}.progress-dot.completed{background:#4caf50}.station-labels{position:absolute;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:16px;z-index:15}.station-label{background:#141432d9;border:1px solid rgba(100,200,255,.2);border-radius:8px;padding:6px 12px;font-size:11px;color:#a0c4ff;cursor:pointer;transition:all .2s;font-weight:600}.station-label:hover{background:#4fc3f733;border-color:#4fc3f780;transform:translateY(-2px)}.station-label.active{background:#4fc3f74d;border-color:#4fc3f7;color:#fff}.station-label.completed{background:#4caf5033;border-color:#4caf50;color:#81c784}.sorting-task{display:flex;gap:8px;margin-top:12px;justify-content:center;flex-wrap:wrap}.shape-item{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .3s;font-size:22px;border:2px solid transparent}.shape-item:hover{transform:scale(1.1)}.shape-item.sorted{opacity:.4;transform:scale(.9);border-color:#4caf50}.task-progress{font-size:12px;color:#a0c4ff;text-align:center;margin-top:8px}.npc-action{font-size:12px;color:#b0b0c0;font-style:italic;margin-bottom:4px;text-align:center}.play-again-btn{background:linear-gradient(135deg,#ffd54f,#ffb74d);border:none;color:#333;font-family:Fredoka One,cursive;font-size:16px;padding:10px 32px;border-radius:30px;cursor:pointer;margin-top:20px;transition:transform .2s}.play-again-btn:hover{transform:scale(1.05)}