*{box-sizing:border-box}html,body{margin:0;padding:0;font-family: 'Comic Sans MS','Baloo 2',system-ui,Arial,sans-serif;background:#f6fbff;color:#213547}
.app-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:linear-gradient(90deg,#88c9ff,#b2f5ea);border-bottom:4px solid #7db2f3}
.logo{width:56px;height:56px}
h1{margin:0;font-size:28px}
.subtitle{font-size:14px;opacity:.8}
main{padding:16px;max-width:1000px;margin:0 auto}
.screen{display:none}
.screen.active{display:block}
.card{background:white;border:3px solid #a3d5ff;border-radius:16px;padding:16px;margin:12px 0;box-shadow:0 8px 0 #7db2f3}
.card.big{padding:24px;text-align:center}
.btn{background:#fff;border:3px solid #7db2f3;border-radius:14px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #7db2f3}
.btn:active{transform:translateY(2px)}
.btn.primary{background:#ffd166;border-color:#f4a261;box-shadow:0 4px 0 #e76f51}
.btn.success{background:#95f9c3;border-color:#2a9d8f;box-shadow:0 4px 0 #2a9d8f}
.avatar-select .avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px}
.avatar{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border:3px dashed #bde0fe;border-radius:12px;background:#fff}
.avatar img{width:80px;height:80px}
.world-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.world-card{background:#fff;border:3px solid #c2ffe0;border-radius:16px;padding:12px;box-shadow:0 6px 0 #9be7c7;display:flex;align-items:center;gap:12px}
.world-card img{width:56px;height:56px}
.hud{display:flex;gap:12px;align-items:center;margin-top:12px}
.scene{position:relative;height:140px;background:linear-gradient(#e6faff,#ffffff);border:3px solid #a3d5ff;border-radius:16px;margin:12px 0;overflow:hidden}
.rocket{position:absolute;left:10px;bottom:10px;width:80px}
.ship{position:absolute;right:10px;top:10px;width:90px}
.mascot{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:90px}
.task{}
.task-text{font-size:20px;margin-bottom:8px}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.choice{padding:10px 12px;border:3px solid #ffd6a5;border-radius:12px;background:#fff7e6;cursor:pointer;font-weight:700}
.answer-row{display:flex;gap:8px;align-items:center}
.answer{flex:1;padding:10px;border:3px solid #a3d5ff;border-radius:12px;font-size:18px}
.feedback.hidden{display:none}
.example-box{background:#f0fff4;border:2px dashed #2a9d8f;border-radius:10px;padding:8px;margin-top:8px}
.bottom-bar{display:flex;justify-content:space-between;margin-top:8px}
.app-footer{text-align:center;padding:16px;color:#446;opacity:.8}
@media (max-width:600px){.scene{height:120px}.mascot{width:72px}.rocket{width:60px}.ship{width:70px}}