*{box-sizing:border-box}
body{margin:0;font-family:system-ui,"Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 20% 0%,#fff3c4 0,transparent 45%),linear-gradient(165deg,#ede4ff 0%,#dff1ff 50%,#e2f7e6 100%);color:#1e1b3a;min-height:100vh;line-height:1.5;overflow-x:hidden}
#app{max-width:640px;margin:0 auto;padding:16px 14px 8px}
.scr{display:none;animation:in .35s ease}.scr.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1{font-size:2.3rem;text-align:center;margin:4px 0 0;color:#4a2aa8}
.lead{text-align:center;font-size:1.15rem;margin:2px 0 10px;color:#3d3a5c;font-weight:600}
.mascot{text-align:center}.coin{animation:bob 1.6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-6px)}}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 12px}.chips span{background:#fff;border-radius:999px;padding:6px 12px;font-weight:700;box-shadow:0 2px 6px #0001;font-size:.95rem}
.panel{background:#fff;border-radius:20px;padding:14px 16px;box-shadow:0 4px 16px #3a1f8a14;margin:12px 0}
.panel h2{font-size:1.15rem;margin:0 0 8px}
.how ol{margin:0;padding-inline-start:20px}.how li{margin:5px 0}
.avs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.avs button{font-size:1.7rem;width:50px;height:50px;border-radius:16px;border:3px solid #e6defa;background:#faf7ff;cursor:pointer}
.avs button.on{border-color:#7b4dd6;background:#efe7ff;transform:scale(1.08)}
.big{display:block;width:100%;font-size:1.35rem;font-weight:800;border:0;border-radius:18px;padding:16px;cursor:pointer;font-family:inherit;margin:12px 0}
.go{background:linear-gradient(135deg,#7b4dd6,#5b2fc0);color:#fff;box-shadow:0 6px 0 #3d1d8f,0 10px 20px #5b2fc055}
.go:active{transform:translateY(3px);box-shadow:0 3px 0 #3d1d8f}
.teacher summary{font-weight:800;cursor:pointer;font-size:1.05rem}.teacher p{margin:8px 0;font-size:.97rem}
button:focus-visible,summary:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #f4b400;outline-offset:2px}
/* world map */
.wmap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}
.isl{background:#fff;border-radius:18px;padding:10px 4px;text-align:center;box-shadow:0 3px 10px #0001;opacity:.55;position:relative}
.isl .e{font-size:2rem;display:block}.isl b{font-size:.95rem}
.isl.cur{opacity:1;outline:3px solid #7b4dd6;transform:scale(1.05)}.isl.done{opacity:1}
.isl .bd{position:absolute;top:-8px;left:-6px;font-size:1.3rem}
.wintro{text-align:center}.wintro .e{font-size:3.6rem;display:block}.wintro h2{font-size:1.6rem;margin:4px 0}
/* play */
.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:800;background:#fff;border-radius:16px;padding:8px 12px;box-shadow:0 2px 8px #0001}
.hud .coins{margin-inline-start:auto;background:#fff6d6;border-radius:999px;padding:3px 10px}
.streak{color:#e65100}.snd{border:0;background:#f1edff;border-radius:12px;font-size:1.1rem;padding:6px 9px;cursor:pointer}
.bar{height:10px;background:#fff9;border-radius:9px;margin:10px 2px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffca28,#7b4dd6);border-radius:9px;transition:width .5s}
.qcard{background:#fff;border-radius:22px;padding:16px;box-shadow:0 6px 22px #3a1f8a1c}
.ctag{display:inline-block;background:#efe7ff;color:#4a2aa8;border-radius:999px;padding:3px 12px;font-weight:800;font-size:.9rem}
.qn{color:#6b6790;font-weight:700;font-size:.9rem;margin-inline-start:6px}
.qq{font-size:1.25rem;font-weight:800;margin:10px 0 12px;line-height:1.4}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:10px;align-items:center;text-align:start;width:100%;font:inherit;font-size:1.08rem;font-weight:700;padding:14px;border-radius:16px;border:3px solid #e3dcf7;background:#fbf9ff;cursor:pointer;color:inherit;min-height:56px}
.opt .l{flex:0 0 32px;height:32px;border-radius:50%;background:#e9e1ff;display:flex;align-items:center;justify-content:center;font-weight:900;color:#5b2fc0}
.opt:hover{border-color:#b9a4f0}
.opt.ok{border-color:#2e9d4a;background:#e7f8ec}.opt.ok .l{background:#2e9d4a;color:#fff}
.opt.bad{border-color:#e0453a;background:#fdecea;animation:shake .4s}.opt.bad .l{background:#e0453a;color:#fff}
.opt[disabled]{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tf{grid-template-columns:1fr 1fr}.tf .opt{justify-content:center;font-size:1.25rem}
/* sms flags */
.phone{background:#1f1d2e;border-radius:26px;padding:14px 12px;max-width:380px;margin:0 auto}
.phone .from{color:#bbb;font-size:.85rem;text-align:center;margin-bottom:8px}
.bubble{background:#2f2d45;color:#fff;border-radius:18px;padding:12px;line-height:1.9;font-size:1.05rem}
.seg{border-radius:8px;padding:2px 4px;cursor:pointer;border:2px dashed transparent;background:none;color:inherit;font:inherit;line-height:1.6;text-align:start}
.seg.pick{border-color:#ffca28;background:#ffca2833}
.seg.hit{background:#e0453a;border-color:#e0453a}.seg.miss{border-color:#ff8a80;background:#ff8a8033}.seg.clean{opacity:.65}
/* sort */
.sitem{background:#fbf9ff;border:3px solid #e3dcf7;border-radius:16px;padding:10px 12px;margin:8px 0}
.sitem p{margin:0 0 8px;font-weight:700}
.sbtns{display:flex;gap:8px}.sbtns button{flex:1;font:inherit;font-weight:800;padding:10px;border-radius:12px;border:2px solid #d8cef5;background:#fff;cursor:pointer}
.sbtns button.on{background:#7b4dd6;color:#fff;border-color:#7b4dd6}
.sitem.ok{border-color:#2e9d4a;background:#e7f8ec}.sitem.bad{border-color:#e0453a;background:#fdecea}
.sitem .why{font-size:.92rem;font-weight:700;margin-top:6px}
.check{margin-top:12px}
.check[disabled]{opacity:.45;cursor:not-allowed}
/* feedback */
.fb{display:none;margin-top:12px;border-radius:20px;padding:14px 16px;font-size:1.04rem;animation:in .3s}
.fb.on{display:block}.fb.good{background:#e3f7e8;border:3px solid #2e9d4a}.fb.no{background:#fff1e6;border:3px solid #f08a24}
.fb h3{margin:0 0 6px;font-size:1.3rem}.fb .ans{font-weight:800;margin:0 0 6px}.fb p{margin:6px 0}
.fb .big{margin:10px 0 2px}
/* end */
.endtop{text-align:center}.stars{font-size:3rem;letter-spacing:6px}.endtop h2{font-size:1.7rem;margin:4px 0;color:#4a2aa8}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.stats div{background:#fff;border-radius:16px;padding:10px;text-align:center;box-shadow:0 2px 8px #0001;font-weight:700}.stats b{display:block;font-size:1.5rem}
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.badge{background:#fff;border-radius:16px;padding:10px 4px;text-align:center;font-weight:700;font-size:.9rem;box-shadow:0 2px 8px #0001}.badge .e{font-size:2rem;display:block}.badge.off{filter:grayscale(1);opacity:.5}
.clist{list-style:none;padding:0;margin:0;display:grid;gap:6px}.clist li{display:flex;gap:8px;align-items:flex-start;background:#faf8ff;border-radius:12px;padding:8px 10px;font-size:.95rem}.clist .m{flex:0 0 auto;font-size:1.2rem}
.refl ol{padding-inline-start:20px;margin:0}.refl li{margin:10px 0;font-weight:700}
.refl textarea{display:block;width:100%;margin-top:6px;min-height:54px;border-radius:12px;border:2px solid #e3dcf7;padding:8px;font:inherit;font-weight:400;resize:vertical}
.small{font-size:.88rem;color:#5f5b80}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9}
.confetti span{position:absolute;top:-40px;font-size:1.6rem;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
footer{text-align:center;padding:18px 10px 26px;color:#4a4766;font-weight:700}footer a{color:#5b2fc0;display:inline-block;margin-top:6px;padding:8px}
@media(max-width:400px){h1{font-size:2rem}.qq{font-size:1.15rem}.isl b{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}