*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#e7f7df;color:#16321d;font-family:Arial,Helvetica,sans-serif;touch-action:none}
body{display:flex;justify-content:center}
.wrap{width:min(1050px,100%);padding:10px}
header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.brand{font-size:1.38rem;font-weight:1000;color:#267343;text-shadow:0 0 18px rgba(77,190,109,.18)}
.sub{color:#617965;font-size:.8rem}
.stats{display:flex;gap:6px;flex-wrap:wrap}.stats div{min-width:82px;background:#fff;border:1px solid rgba(45,128,69,.15);border-radius:11px;padding:7px;text-align:center;box-shadow:0 5px 16px rgba(48,112,63,.07)}.stats span{display:block;color:#738577;font-size:.56rem;text-transform:uppercase}.stats b{font-size:.93rem;color:#244d31}
.mission{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid rgba(45,128,69,.14);border-radius:12px;padding:9px 11px;margin-bottom:8px;color:#536a58}.mission strong{flex:1;color:#1d4a2b}.mission button{border:1px solid rgba(45,128,69,.16);background:#edf9ef;color:#23683a;border-radius:10px;padding:8px 10px;font-weight:900;cursor:pointer}
.game-shell{position:relative;overflow:hidden;border-radius:18px;border:1px solid rgba(45,128,69,.16);box-shadow:0 24px 60px rgba(31,88,43,.18);background:#70c9ef}
canvas{display:block;width:100%;height:auto}
.eduq-sign{position:absolute;right:12px;top:12px;z-index:8;background:rgba(255,255,255,.88);border:1px solid rgba(45,128,69,.17);border-radius:999px;padding:7px 10px;color:#23683a;font-size:.7rem;font-weight:1000;pointer-events:none}
.overlay,.final-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;z-index:20}.hidden{display:none!important}
.overlay{background:rgba(26,77,43,.42)}
.panel,.final-card{width:min(510px,94%);background:rgba(255,255,255,.96);border:1px solid rgba(49,137,73,.20);border-radius:22px;padding:22px;text-align:center;box-shadow:0 24px 70px rgba(28,80,39,.25)}
.hero{font-size:4rem}.panel h1{font-size:2rem;margin:5px 0;color:#235f36}.panel p{color:#55705c;line-height:1.46}.panel>button,.final-card button{border:0;border-radius:14px;background:linear-gradient(135deg,#53cf79,#8de15c);color:#12391f;font-weight:1000;padding:13px 23px;cursor:pointer}.help{color:#7b907f;font-size:.76rem;line-height:1.4;margin-top:12px}
.online-box{margin:12px 0;padding:10px;border-radius:13px;background:#f2faf2;border:1px solid rgba(49,137,73,.14);text-align:left}.online-box .check{display:flex;align-items:center;gap:8px;font-weight:900}.online-box input#onlineName{width:100%;margin-top:8px;background:#fff;border:1px solid rgba(32,105,53,.18);color:#183923;border-radius:10px;padding:10px}.online-box small{display:block;color:#718476;font-size:.68rem;margin-top:5px}.online-box #onlineMessage{min-height:16px;color:#c85e62;font-size:.72rem;margin-top:4px}
.friend-glow{position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;box-shadow:inset 0 0 110px rgba(83,240,135,.38);transition:.16s}.friend-glow.on{opacity:1;animation:friendPulse 1s ease-in-out infinite}@keyframes friendPulse{50%{opacity:.38}}
.toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px);opacity:0;z-index:12;background:rgba(255,255,255,.94);border:1px solid rgba(45,128,69,.18);border-radius:12px;padding:9px 12px;font-weight:1000;color:#225b34;transition:.15s}.toast.show{opacity:1;transform:translate(-50%,0)}
.final-overlay{background:linear-gradient(rgba(115,207,249,.95) 0 58%,rgba(105,194,76,.96) 58%)}.final-icons{font-size:4.8rem}.final-card h1{color:#21643a}.final-card p{color:#3f6849;font-weight:800;line-height:1.45}.final-score{font-size:1.3rem;font-weight:1000;color:#e17b13;margin:10px}
.mobile-controls{display:none;grid-template-columns:1fr .58fr;gap:8px;margin-top:8px}.move-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.mobile-controls button{border:0;border-radius:16px;background:linear-gradient(135deg,#3a9960,#54bd77);color:#fff;font-weight:1000;min-height:78px}.mobile-controls .action{background:linear-gradient(135deg,#ff9b38,#ffd34d);color:#4a2c08}
@media(max-width:760px){header{flex-direction:column;align-items:flex-start}.stats{width:100%}.stats div{flex:1;min-width:0}.sub{display:none}.mobile-controls{display:grid;position:sticky;bottom:0;z-index:50}}
@media(max-width:560px){.wrap{padding:5px}.brand{font-size:1.02rem}.stats div{flex-basis:calc(33.333% - 6px)}.mission{font-size:.75rem;padding:7px}.game-shell{border-radius:14px}canvas{aspect-ratio:390/850}.panel{width:min(330px,95%);padding:14px}.hero{font-size:2.8rem}.panel h1{font-size:1.45rem}.panel p{font-size:.87rem}.mobile-controls{padding-top:7px;background:linear-gradient(180deg,rgba(231,247,223,0),rgba(231,247,223,.96) 30%,#e7f7df)}.mobile-controls button{min-height:88px}.mobile-controls .action{min-height:120px}}