:root{--ink: #1f2a44;--muted: #5c6b8a;--card: #ffffff;--line: #e3e9f5;--primary: #ff7a1a;--primary-dark: #d9600b;--good: #2fb344;--bad: #f03e3e;--star: #ffc93c;--radius: 18px;--shadow: 0 10px 30px rgba(31, 42, 68, .18);--font-head: "Baloo 2", "Nunito", system-ui, sans-serif;--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#9fd8ff;color:var(--ink);font-family:var(--font-body);-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}canvas.gl{position:absolute;inset:0;display:block;touch-action:none}.labels{position:absolute;inset:0;pointer-events:none}#loading{position:absolute;inset:0;display:grid;place-items:center;font:800 28px var(--font-head);color:#fff;background:linear-gradient(#4fb3ff,#bfe6ff)}button{font:inherit;color:inherit}.ui{position:absolute;inset:0;pointer-events:none}.ui>*{pointer-events:auto}.ui>.helper,.ui>.banner,.ui>.map-hint{pointer-events:none}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow)}.btn{border:none;border-radius:14px;padding:11px 18px;font-weight:800;font-size:16px;cursor:pointer;transition:transform .08s,box-shadow .08s,background .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-direction:column;line-height:1.2}.btn:active{transform:translateY(2px)}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 4px 0 var(--primary-dark)}.btn.primary:hover{background:#ff8c3a}.btn.primary:active{box-shadow:0 2px 0 var(--primary-dark)}.btn.primary:disabled{background:#c5cbd8;box-shadow:0 4px #a5adbd;cursor:default}.btn.ghost{background:#ffffffeb;box-shadow:0 3px #cfd8ea;color:var(--ink)}.btn.ghost:hover{background:#fff}.btn.small{font-size:13px;padding:8px 12px}.btn.round{width:44px;height:44px;border-radius:50%;padding:0;font-size:20px}.btn.answer{background:#f1f5ff;border:2px solid #d4def5;color:var(--ink);box-shadow:0 3px #d4def5;font-size:15px;padding:10px 12px}.btn.answer:hover{background:#e4ecff;border-color:#9fb5ea}.btn small{font-weight:600;font-size:12px;opacity:.8}.map-head{position:absolute;top:12px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.map-head>*{pointer-events:auto}.logo{display:flex;align-items:center;gap:10px;background:#ffffffeb;padding:8px 18px 8px 10px;border-radius:999px;box-shadow:var(--shadow)}.logo-icon{font-size:34px}.logo h1{margin:0;font:800 26px/1 var(--font-head);background:linear-gradient(90deg,#ff7a1a,#e64980,#845ef7);-webkit-background-clip:text;background-clip:text;color:transparent}.logo small{color:var(--muted);font-weight:700}.head-right{display:flex;gap:10px;align-items:center}.total{background:#ffffffeb;border-radius:999px;padding:10px 16px;font:800 18px var(--font-head);color:#c28a00;box-shadow:var(--shadow)}.map-hint{position:absolute;bottom:18px;left:50%;transform:translate(-50%);background:#1f2a44c7;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}.island-tag{display:flex;flex-direction:column;align-items:center;background:#fffffff2;padding:6px 14px;border-radius:14px;box-shadow:0 6px 16px #0000002e;font-family:var(--font-head);line-height:1.15;white-space:nowrap}.island-tag b{font-size:17px}.island-tag span{font-size:14px;color:#c28a00;font-weight:800}.island-tag .soon{color:var(--muted)}.island-tag.locked{opacity:.85}.sheet-wrap{position:absolute;top:84px;right:16px;bottom:16px;width:min(440px,calc(100% - 32px));pointer-events:none}.sheet{pointer-events:auto;max-height:100%;overflow:auto;padding:20px;position:relative;border-top:8px solid var(--c);animation:slideIn .35s cubic-bezier(.2,1.3,.4,1)}.close{position:absolute;top:12px;right:12px;border:none;background:#f1f3f5;width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:16px}.sheet-head{display:flex;align-items:center;gap:12px}.sheet-head h2{margin:0;font:800 26px/1.1 var(--font-head)}.sheet-head small{color:#c28a00;font-weight:800}.sheet-emoji{font-size:44px}.sheet-desc{color:var(--muted);font-weight:600;line-height:1.45}.level-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.level-card{border:2px solid var(--line);background:#fbfcff;border-radius:16px;padding:10px 12px;text-align:left;cursor:pointer;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:8px;transition:transform .12s,border-color .12s}.level-card:hover:not(:disabled){transform:translateY(-2px);border-color:var(--c)}.level-card .num{grid-row:span 3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:800 17px var(--font-head)}.level-card.locked{opacity:.55;cursor:default}.level-card.locked .num{background:#ced4da}.lv-title{font-weight:800;font-size:14px;line-height:1.2}.lv-topic{font-size:12px;color:var(--muted);font-weight:700}.lv-stars i{font-style:normal;color:#dee2e6;font-size:15px}.lv-stars i.on{color:var(--star)}.lv-stars.record{font-size:12px;font-weight:800;color:#8a5a00}.timer{font:800 28px/1 var(--font-head);text-align:center}.soon-box{text-align:center;background:#fff9db;border-radius:16px;padding:16px}.soon-icon{font-size:46px}.topbar{position:absolute;top:12px;left:16px;display:flex;gap:10px;align-items:center}.crumb{background:#ffffffeb;padding:6px 14px;border-radius:14px;display:flex;flex-direction:column;line-height:1.15;box-shadow:0 3px #cfd8ea}.crumb span{font-size:12px;color:var(--muted);font-weight:700}.crumb b{font-family:var(--font-head)}.panel{position:absolute;top:12px;right:12px;bottom:12px;width:min(390px,42vw);background:#fffffff5;border-radius:22px;box-shadow:var(--shadow);padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}.panel-head{display:flex;justify-content:space-between;align-items:center}.topic{background:var(--c);color:#fff;padding:4px 12px;border-radius:999px;font-weight:800;font-size:13px}.live-stars span{font-size:22px;color:#dee2e6;transition:color .3s}.live-stars span.on{color:var(--star);text-shadow:0 2px 0 #e0a800}.panel h2{margin:0;font:800 25px/1.1 var(--font-head)}.goal{margin:-6px 0 0;color:var(--muted);font-weight:700}.task{background:linear-gradient(135deg,#fff4e6,#ffe8cc);border-radius:16px;padding:12px 14px;font-weight:700;line-height:1.45;font-size:16px}.task:empty{display:none}.task.flash{animation:flash .6s}.task .step{display:inline-block;background:var(--primary);color:#fff;font-size:12px;font-weight:800;padding:2px 10px;border-radius:999px;margin-bottom:6px}.info{background:#edf6ff;border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.45}.info table{width:100%;border-collapse:collapse}.info td,.info th{padding:3px 6px;text-align:left;border-bottom:1px solid #d5e6fb}.info th{font-size:12px;color:var(--muted)}.formula{font:800 18px var(--font-head);text-align:center;color:#1c7ed6}.controls{display:flex;flex-direction:column;gap:12px}.controls:empty{display:none}.slider{display:flex;flex-direction:column;gap:6px;background:#f8f9fc;border-radius:14px;padding:10px 12px}.slider-head{display:flex;justify-content:space-between;font-weight:700}.slider-head b{color:var(--primary-dark);font-family:var(--font-head);font-size:18px}input[type=range]{width:100%;accent-color:var(--primary);height:28px}.picker-label{font-weight:800;margin-bottom:6px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{border:2px solid var(--line);background:#fff;border-radius:12px;padding:8px 12px;font-weight:800;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;line-height:1.15;transition:all .12s}.chip small{font-size:11px;color:var(--muted);font-weight:700}.chip:hover:not(:disabled){border-color:#9fb5ea}.chip.on{background:#fff1e3;border-color:var(--primary);box-shadow:0 0 0 2px #ff7a1a40}.chip:disabled{opacity:.4;cursor:default}.chip.static{cursor:default;background:#fff}.actions{display:flex;flex-direction:column;gap:10px;margin-top:auto}.question{font-weight:800;font-size:16px;line-height:1.4}.answer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.action-row{display:flex;gap:10px;flex-wrap:wrap}.action-row .btn{flex:1;min-width:120px}.number-row{display:flex;gap:8px;align-items:center}.number-row input{flex:1;min-width:0;font:800 22px var(--font-head);padding:8px 12px;border-radius:12px;border:3px solid #d4def5;outline:none;color:var(--ink)}.number-row input:focus{border-color:var(--primary)}.number-row .unit{font:800 20px var(--font-head)}.order-slots{display:flex;flex-direction:column;gap:6px}.slot{display:flex;align-items:center;gap:8px;border:2px dashed #ced4da;border-radius:12px;padding:6px 10px;min-height:40px;font-weight:800}.slot.full{border-style:solid;border-color:var(--primary);background:#fff8f0}.slot i{font-style:normal;width:24px;height:24px;border-radius:50%;background:#e9ecef;display:grid;place-items:center;font-size:13px}.helper{position:absolute;left:16px;bottom:16px;right:calc(min(390px,42vw) + 36px);display:flex;align-items:flex-end;gap:10px}.robot{width:96px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.2));animation:bob 2.4s ease-in-out infinite}.robot .spark{animation:spark 1.2s ease-in-out infinite;transform-origin:60px 10px}.robot [class*=m-]{display:none}.robot[data-mood=talk] .m-talk,.robot[data-mood=happy] .m-happy,.robot[data-mood=sad] .m-sad,.robot[data-mood=think] .m-think{display:inline}.robot[data-mood=happy]{animation:hop .6s ease-out 2,bob 2.4s ease-in-out 1.2s infinite}.robot[data-mood=sad]{animation:wobble .5s ease-in-out}.bubble{position:relative;background:#fff;border-radius:18px;padding:12px 16px;font-weight:700;font-size:16px;line-height:1.45;box-shadow:var(--shadow);max-width:520px;margin-bottom:40px}.bubble:empty{display:none}.bubble:before{content:"";position:absolute;left:-10px;bottom:18px;border:10px solid transparent;border-right-color:#fff;border-left:0}.bubble.pop{animation:pop .35s cubic-bezier(.2,1.5,.4,1)}.banner{position:absolute;top:38%;left:calc((100% - min(390px,42vw))/2);transform:translate(-50%,-50%);text-align:center;font:800 44px/1.1 var(--font-head);color:#fff;text-shadow:0 4px 0 var(--c),0 8px 20px rgba(0,0,0,.25);animation:banner 2.6s ease forwards;white-space:nowrap}.banner small{display:block;font-size:20px}.lbl{background:#fffffff2;padding:4px 10px;border-radius:10px;font:800 14px/1.2 var(--font-body);color:var(--ink);box-shadow:0 3px 10px #00000026;white-space:nowrap;text-align:center;margin-bottom:6px}.lbl.big{font:800 20px/1.1 var(--font-head);padding:6px 14px}.lbl.tag{font-size:12px;padding:2px 8px}.lbl.dark{background:#1f2a44e0;color:#fff}.lbl.good{background:#d3f9d8;color:#1b5e20}.lbl.bad{background:#ffe3e3;color:#a51111}.lbl.goal{background:#2fb344;color:#fff}.lbl.display{background:#10261b;color:#69f0ae;font-family:Courier New,monospace;font-size:18px;border:3px solid #37474f}.lbl.step-unit{font:800 22px/1 var(--font-head);padding:6px 12px;background:#fff;border:3px solid var(--primary)}.lbl.factor{background:#fff3bf;color:#8a5a00;font-size:13px}.lbl.popup{background:#ffd43b;font:800 24px var(--font-head);animation:rise 1.6s ease-out forwards}.lbl.popup.down{background:#69db7c}.lbl.popup.up{background:#74c0fc}.overlay{position:absolute;inset:0;background:#141e3773;display:grid;place-items:center;padding:16px;animation:fade .3s;pointer-events:auto;z-index:10}.result,.help{width:min(520px,100%);padding:24px;text-align:center;animation:pop .45s cubic-bezier(.2,1.4,.4,1);max-height:100%;overflow:auto}.result h2,.help h2{font:800 34px/1 var(--font-head);margin:6px 0 12px}.big-stars span{font-size:64px;color:#dee2e6;display:inline-block}.big-stars span.on{color:var(--star);text-shadow:0 4px 0 #e0a800;animation:starIn .6s cubic-bezier(.2,1.6,.4,1) backwards;animation-delay:var(--d)}.lesson{text-align:left;background:#f1f8ff;border-radius:16px;padding:12px 16px;margin-bottom:16px;line-height:1.5;font-weight:600}.lesson h3{margin:0 0 6px;font-family:var(--font-head)}.lesson p{margin:6px 0}.help ul{text-align:left;line-height:1.6;font-weight:700;padding-left:8px;list-style:none}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes hop{40%{transform:translateY(-22px) rotate(-6deg)}}@keyframes wobble{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}@keyframes spark{50%{transform:scale(1.35);fill:#fff3bf}}@keyframes pop{0%{transform:scale(.85);opacity:0}}@keyframes fade{0%{opacity:0}}@keyframes slideIn{0%{transform:translate(40px);opacity:0}}@keyframes flash{30%{transform:scale(1.03);box-shadow:0 0 0 4px #ff7a1a59}}@keyframes rise{0%{transform:translateY(10px) scale(.6);opacity:0}20%{transform:translateY(0) scale(1.1);opacity:1}to{transform:translateY(-60px) scale(1);opacity:0}}@keyframes banner{0%{opacity:0;transform:translate(-50%,-30%) scale(.8)}15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-70%) scale(1);visibility:hidden}}@keyframes starIn{0%{transform:scale(0) rotate(-90deg)}}.shake{animation:shake .4s}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@media(max-width:820px){.panel{inset:auto 8px 8px;width:auto;max-height:48vh;padding:14px;gap:8px}.panel h2{font-size:20px}.helper{right:16px;bottom:calc(48vh + 16px)}.robot{width:62px}.bubble{font-size:14px;padding:8px 12px;margin-bottom:20px}.banner{left:50%;font-size:30px;top:26%}.logo h1{font-size:20px}.logo small{display:none}.sheet-wrap{inset:auto 8px 8px;width:auto;max-height:70vh}.level-grid{grid-template-columns:1fr}.map-hint{display:none}}