@font-face{font-family:Nun;src:url(../n1/nunito.woff2) format("woff2");font-weight:200 1000}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;font-family:Nun,"Arial Rounded MT Bold",system-ui,sans-serif;color:#3b2a1a;background:#0b2a18}
button{font-family:inherit;cursor:pointer;border:0}
.scr{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#0b2a18 center/cover no-repeat;padding:max(14px,env(safe-area-inset-top)) 18px 24px}
.scr.on{display:flex}
.scr:before{content:"";position:fixed;inset:0;background:var(--dim,rgba(0,0,0,.35));pointer-events:none}
.scr>*{position:relative}
.t1{color:#fff;font-size:clamp(34px,6vw,64px);font-weight:900;text-shadow:0 4px 0 #c27c00,0 6px 20px rgba(0,0,0,.6);line-height:1.05;text-align:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.t2{color:#ffe066;font-size:clamp(18px,2.6vw,28px);font-weight:800;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.btn{font-weight:900;font-size:clamp(18px,2.2vw,24px);border-radius:22px;padding:14px 26px;color:#fff;background:#11c99a;box-shadow:0 6px 0 #0a8a69;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #0a8a69}
.btn.o{background:#ff7a2f;box-shadow:0 6px 0 #c4561a}.btn.w{background:#fff;color:#3b2a1a;box-shadow:0 6px 0 #c9b99a}
.btn.g{background:#9a9a9a;box-shadow:0 6px 0 #6d6d6d}.btn.r{background:#e24b4b;box-shadow:0 6px 0 #a83030}
.btn.sm{font-size:16px;padding:9px 16px;border-radius:16px}
.back{position:absolute;left:0;top:0;background:#fff;color:#7a4b12;font-weight:900;font-size:18px;border-radius:20px;padding:9px 16px;box-shadow:0 4px 0 #c9b99a}
.hdr{width:100%;max-width:1140px;position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;margin-bottom:6px}
.hdr .rt{position:absolute;right:0;top:0;display:flex;gap:8px}
.pill{background:rgba(255,255,255,.95);border-radius:22px;padding:8px 14px;font-weight:900;font-size:clamp(15px,1.8vw,19px);display:inline-flex;align-items:center;gap:6px;box-shadow:0 3px 0 rgba(0,0,0,.2);white-space:nowrap}
.tog{display:flex;background:#fff;border-radius:22px;padding:4px;font-size:16px;font-weight:800}
.tog button{background:none;padding:6px 12px;border-radius:18px;color:#8a7558;font-weight:900;font-size:15px}.tog .on{background:#ff7a2f;color:#fff}
/* login */
#s-login{background-image:url(treetops.webp);justify-content:center;gap:14px}
.card{background:rgba(255,250,240,.97);border-radius:30px;padding:26px 30px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:flex;flex-direction:column;gap:14px;align-items:stretch;width:min(460px,92vw)}
.card h3{font-size:24px;font-weight:900;text-align:center}
.card p{text-align:center;color:#7a6a55;font-weight:700}
.gbtn{background:#fff;color:#333;border:3px solid #ddd;border-radius:20px;padding:13px;font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 5px 0 #ccc}
.gbtn svg{width:26px;height:26px}
.abtn{background:#000;color:#fff;border-radius:20px;padding:14px;font-weight:900;font-size:19px}
.or{display:flex;align-items:center;gap:10px;color:#a08f78;font-weight:800}.or:before,.or:after{content:"";flex:1;height:2px;background:#e6dac4}
.chars{display:flex;align-items:flex-end;justify-content:center;gap:4vw;pointer-events:none}
.chars img{height:clamp(120px,24vh,230px);filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}
.small{font-size:14px;color:#8a7a66;text-align:center;font-weight:700}
/* kids */
#s-kids{background-image:url(treetops.webp);justify-content:center;gap:18px}
.kids{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;justify-content:center}
.kid{background:rgba(255,250,240,.97);border-radius:30px;width:clamp(170px,19vw,220px);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 8px 0 rgba(0,0,0,.25);font-weight:900;font-size:24px;color:#3b2a1a}
.kid img{width:78%;aspect-ratio:1;border-radius:50%;border:6px solid #ffcf4d;object-fit:cover}
.kid small{font-size:16px;color:#8a7558;font-weight:800}
.kid.add{background:rgba(255,255,255,.25);border:4px dashed rgba(255,255,255,.8);color:#fff;box-shadow:none;justify-content:center;min-height:240px}
.kid.add b{font-size:64px;line-height:1}
.acct{position:absolute;top:max(14px,env(safe-area-inset-top));left:16px}
.par{position:absolute;top:max(14px,env(safe-area-inset-top));right:16px}
/* modal */
.mod{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.mod.on{display:flex}
.avs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.avs button{background:none;border-radius:50%;padding:0;border:5px solid transparent;width:84px;height:84px;overflow:hidden}
.avs button.on{border-color:#ff7a2f;transform:scale(1.08)}
.avs img{width:100%;height:100%;object-fit:cover}
.inp{font-family:inherit;font-size:24px;font-weight:900;border:4px solid #e9d9b5;border-radius:18px;padding:10px 16px;text-align:center;color:#3b2a1a;background:#fff;width:100%}
.chips{display:flex;gap:8px;justify-content:center}.chips button{background:#efe3c8;color:#7a4b12;font-weight:900;font-size:18px;border-radius:14px;padding:8px 16px}.chips .on{background:#ff7a2f;color:#fff}
/* home */
#s-home{background-image:url(treetops.webp)}
.top{width:100%;max-width:1140px;display:flex;align-items:center;gap:10px;margin-bottom:clamp(8px,2vh,20px)}
.me{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.95);border-radius:40px;padding:5px 16px 5px 5px;font-weight:900;font-size:clamp(18px,2.2vw,24px);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.me img{width:50px;height:50px;border-radius:50%;border:3px solid #ffcf4d}
.sp{flex:1}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,24px);width:100%;max-width:1060px;flex:1;max-height:640px}
.sec{position:relative;border-radius:32px;overflow:hidden;background:#333 center/cover;box-shadow:0 8px 0 rgba(0,0,0,.3);color:#fff;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,2vw,24px);min-height:clamp(170px,30vh,300px);border:5px solid rgba(255,255,255,.85)}
.sec:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.72))}
.sec>*{position:relative}
.sec h4{font-size:clamp(26px,3.4vw,40px);font-weight:900;text-shadow:0 3px 8px rgba(0,0,0,.6);line-height:1.05}
.sec p{font-size:clamp(15px,1.8vw,20px);font-weight:800;opacity:.95}
.sec .bar{height:12px;border-radius:8px;background:rgba(255,255,255,.35);margin-top:8px;overflow:hidden}.sec .bar i{display:block;height:100%;background:#ffcf4d;border-radius:8px}
.sec .tag{position:absolute;top:14px;right:14px;background:#ffcf4d;color:#5a3a00;font-weight:900;font-size:15px;border-radius:14px;padding:5px 12px}
.sec.soon{filter:saturate(.75)}.sec.soon .tag{background:#fff;color:#7a4b12}
.sec .pic{position:absolute;right:12px;bottom:0;height:72%;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
/* lists */
.list{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:1100px;padding-bottom:20px}
.chap{border:0;border-radius:26px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:min(250px,44vw);min-height:86px;padding:10px 14px;font-size:clamp(16px,2vw,21px);font-weight:900;text-decoration:none;box-shadow:0 7px 0 rgba(0,0,0,.28);text-align:center}
.chap span{font-size:.8em;font-weight:800;opacity:.95}
.chap.done{background:#2fa36b;box-shadow:0 7px 0 #1d7449}
.chap.next{background:#11c99a;box-shadow:0 7px 0 #0a8a69,0 0 30px rgba(255,230,120,.6);animation:glow 2.2s infinite}
.chap.locked{background:rgba(40,40,40,.6);color:#ddd;border:3px dashed rgba(255,255,255,.45);box-shadow:none;opacity:.7;filter:grayscale(.6)}
.chap.lock{background:rgba(255,255,255,.22);color:#f3f3f3;border:3px dashed rgba(255,255,255,.55);box-shadow:none}
@keyframes glow{50%{transform:scale(1.03)}}
#s-story{background-image:url(../n1/map-bg.webp)}
#s-sci{background-image:url(lab.webp)}
#s-hua{background-image:url(hua.webp);justify-content:center;gap:16px}
#s-chal,#s-game,#s-streak{background-image:url(arena.webp)}
#s-dash{background:#f6efe0;--dim:transparent}
.adv{background:rgba(255,250,240,.97);border-radius:26px;width:min(330px,44vw);padding:14px;display:flex;gap:12px;align-items:center;text-align:left;box-shadow:0 7px 0 rgba(0,0,0,.25);color:#3b2a1a}
.adv .ic{font-size:44px;width:70px;height:70px;border-radius:20px;background:#e3f3ff;display:flex;align-items:center;justify-content:center;flex:none}
.adv b{font-size:21px;font-weight:900;display:block}.adv span{font-size:15px;font-weight:800;color:#8a7558}
.adv.soon{opacity:.72;filter:grayscale(.4)}
.adv.big{width:min(680px,92vw);border:5px solid #11c99a}
.adv.big .ic{width:110px;height:110px;font-size:64px;background:#d9f7ec}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:1000px;width:100%}
.ch{border-radius:28px;padding:18px;color:#fff;text-align:left;display:flex;gap:14px;align-items:center;box-shadow:0 7px 0 rgba(0,0,0,.3);min-height:150px;border:4px solid rgba(255,255,255,.7)}
.ch .ic{font-size:60px;flex:none;width:90px;text-align:center}
.ch b{font-size:clamp(22px,2.8vw,30px);font-weight:900;display:block}.ch span{font-size:16px;font-weight:800;opacity:.95;display:block}
.ch em{display:inline-block;margin-top:6px;background:rgba(255,255,255,.95);color:#3b2a1a;font-style:normal;font-weight:900;border-radius:12px;padding:3px 10px;font-size:15px}
.c1{background:linear-gradient(135deg,#ff9a3c,#ff5a6e)}.c2{background:linear-gradient(135deg,#6b4bd6,#3a2a8c)}.c3{background:linear-gradient(135deg,#ff6a3d,#e8a400)}.c4{background:linear-gradient(135deg,#1fb5d6,#2a6fd6)}
/* game */
#s-game{padding-bottom:12px}
.gtop{width:100%;max-width:1140px;display:flex;align-items:center;gap:12px;min-height:50px}
.gtop .ttl{font-size:clamp(20px,2.6vw,28px);font-weight:900;color:#fff;text-shadow:0 2px 6px #000}
.tbar{flex:1;height:22px;background:rgba(255,255,255,.35);border-radius:12px;overflow:hidden;border:3px solid #fff}.tbar i{display:block;height:100%;background:linear-gradient(90deg,#2fb84f,#ffcf4d);transition:width 1s linear}
.hearts{font-size:30px;letter-spacing:2px}
.hp{display:flex;align-items:center;gap:8px;color:#fff;font-weight:900}.hp .hb{width:160px;height:20px;background:rgba(0,0,0,.4);border-radius:10px;overflow:hidden;border:3px solid #fff}.hp .hb i{display:block;height:100%;background:#e24b4b;transition:width .4s}
.stage{flex:1;width:100%;max-width:1140px;display:flex;align-items:center;gap:12px;min-height:0}
.side{width:clamp(110px,15vw,200px);display:flex;align-items:flex-end;justify-content:center;align-self:flex-end;flex:none}
.side img{width:100%;max-height:44vh;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));transition:transform .2s}
.side img.hit{animation:hit .5s}.side img.jump{animation:jump .6s}
@keyframes hit{20%{transform:translateX(16px) rotate(8deg)}40%{transform:translateX(-12px) rotate(-6deg)}60%{transform:translateX(8px)}}
@keyframes jump{40%{transform:translateY(-30px) scale(1.05)}}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#gq{flex:1;background:rgba(255,250,240,.97);border-radius:30px;padding:clamp(14px,2.2vw,26px);display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.8vh,18px);box-shadow:0 10px 30px rgba(0,0,0,.35);isolation:isolate;min-width:0}
#gq .qt{font-size:clamp(20px,2.6vw,30px);font-weight:900;text-align:center;line-height:1.2;display:flex;gap:10px;align-items:center}
#gq .say{flex:none;width:48px;height:48px;border-radius:50%;background:#ffcf4d;font-size:24px;box-shadow:0 4px 0 #c99a1d}
#gq .gimg{height:clamp(90px,17vh,170px);border-radius:16px}
#gq .ans{display:flex;gap:clamp(10px,2vw,22px);flex-wrap:wrap;justify-content:center;width:100%}
#gq .a{flex:1 1 0;min-width:0;max-width:260px;min-height:clamp(80px,12vh,130px);background:#fffaf0;border:5px solid #e9d9b5;border-radius:24px;box-shadow:0 7px 0 #d8c7a8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:clamp(20px,3vw,36px);font-weight:900;color:#3b2a1a;position:relative;padding:6px}
#gq .a i{font-style:normal;font-size:1.15em;line-height:1.1}
#gq .a.ok{background:#e3f8e6;border-color:#2fb84f;box-shadow:0 7px 0 #1f8a39}
#gq .a.no{background:#fde6e6;border-color:#e24b4b;box-shadow:0 7px 0 #b33434;opacity:.8;animation:shake .4s}
#gq .a.show{border-color:#2fb84f;border-style:dashed}
#gq .msg{min-height:30px;font-weight:900;font-size:clamp(18px,2.2vw,24px);color:#1f8a39;text-align:center}
#gq .msg.bad{color:#c03030}
.big1{font-size:clamp(60px,10vw,110px);font-weight:900;color:#fff;text-shadow:0 5px 0 #c27c00,0 8px 24px rgba(0,0,0,.6)}
.res{background:rgba(255,250,240,.98);border-radius:30px;padding:24px 34px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 10px 30px rgba(0,0,0,.4);text-align:center;max-width:92vw}
.res h3{font-size:clamp(28px,4vw,44px);font-weight:900}.res p{font-size:20px;font-weight:800;color:#7a6a55}
.res .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
/* streak */
.week{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.week div{width:clamp(70px,9vw,100px);background:rgba(255,250,240,.95);border-radius:20px;padding:10px 4px;text-align:center;font-weight:900;font-size:16px}
.week div b{display:block;font-size:40px;line-height:1.2;filter:grayscale(1);opacity:.35}.week div.y b{filter:none;opacity:1}
.week div.t{outline:4px solid #ffcf4d}
/* gate */
.gate{text-align:center}.gate .q{font-size:40px;font-weight:900;color:#3b2a1a}
.gate .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.gate .opts button{background:#efe3c8;font-size:26px;font-weight:900;border-radius:16px;padding:14px 0;color:#3b2a1a}
.hold{position:relative;overflow:hidden;background:#e8e0d0;color:#7a4b12;font-weight:900;font-size:17px;border-radius:16px;padding:12px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffcf4d;z-index:0}.hold span{position:relative}
/* dashboard */
#s-dash .hdr h2{font-size:30px;font-weight:900;color:#3b2a1a}
.dwrap{width:100%;max-width:1080px;display:flex;flex-direction:column;gap:16px}
.dbox{background:#fff;border-radius:24px;padding:16px 20px;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.dbox h3{font-size:20px;font-weight:900;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.drow{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.dkid{display:flex;align-items:center;gap:12px;min-width:200px}.dkid img{width:70px;height:70px;border-radius:50%;border:4px solid #ffcf4d}.dkid b{font-size:24px;font-weight:900;display:block}.dkid span{color:#8a7558;font-weight:800}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1;min-width:480px}
.stat{background:#f8f2e4;border-radius:16px;padding:8px;text-align:center}.stat b{display:block;font-size:24px;font-weight:900}.stat span{font-size:13px;font-weight:800;color:#8a7558}
.weak{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-weight:800}
.weak em{font-style:normal;background:#fde6e6;color:#a83030;border-radius:12px;padding:4px 12px;font-weight:900}
.weak em.gd{background:#e3f8e6;color:#1f8a39}
.chb{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.chb i{font-style:normal;width:34px;height:34px;border-radius:10px;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#999}.chb i.d{background:#2fa36b;color:#fff}
.dact{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);background:#fff;color:#7a4b12;font-weight:900;font-size:clamp(17px,2.2vw,22px);padding:12px 24px;border-radius:22px;box-shadow:0 6px 20px rgba(0,0,0,.35);opacity:0;transition:.3s;pointer-events:none;z-index:99;text-align:center;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}
.ver{position:fixed;bottom:6px;left:10px;color:#fff9;font-size:12px;z-index:5;pointer-events:none}
@media (max-width:760px){.grid,.cg{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr);min-width:0}.side{display:none}}
#gq .sent{font-size:clamp(26px,4.4vw,48px);font-weight:900;color:#2b6cb0;text-align:center}
#gq .eq{display:flex;gap:clamp(8px,1.4vw,16px);align-items:center;font-size:clamp(30px,4.6vw,56px);font-weight:900;color:#3b2a1a;background:#fff8e6;border:4px solid #ffcf4d;border-radius:18px;padding:4px 18px;line-height:1.2}
#gq .eq .qm{display:inline-flex;min-width:1.5em;justify-content:center;border:3px dashed #b79a6a;border-radius:12px;color:#b0702a;background:#efe3c8}
#gq .eq .qm.got{border:3px solid #2fb84f;background:#e3f8e6;color:#1f8a39;animation:pop .5s}
#gq .nl{display:flex;gap:4px;align-items:center}
#gq .nl i{font-style:normal;width:clamp(30px,3.6vw,44px);height:clamp(30px,3.6vw,44px);border-radius:50%;background:#efe6ff;display:flex;align-items:center;justify-content:center;font-size:clamp(15px,2vw,22px);font-weight:900;color:#5b3b8c}
#gq .nl i.s{background:#ff9a3c;color:#fff}
#gq .nl i.h{background:#ffe9a8;color:#8a5a00;border:2px dashed #e0a800}
#gq .spk{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;background:#2b2150;padding:6px;border-radius:12px}
#gq .spk i{font-style:normal;font-size:clamp(18px,2.4vw,28px);line-height:1}
#gq .spk i.f{opacity:.22;filter:grayscale(1)}
#gq .vis{display:flex;justify-content:center;align-items:center;gap:clamp(14px,3vw,40px);animation:pop .4s}
#gq .tf{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:#5b3b8c;padding:6px;border-radius:12px}
#gq .tf i{font-style:normal;width:clamp(30px,4vw,46px);height:clamp(30px,4vw,46px);border-radius:8px;background:#efe6ff;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,2.8vw,32px);line-height:1}
#gq .tf i.e{background:#3e2766;font-size:0}
#gq .tf i.new{animation:pop .5s}
#gq .bond{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:6px 18px;position:relative;justify-items:center}
#gq .bond b{grid-column:1/3;}
#gq .bond b,#gq .bond u{display:flex;align-items:center;justify-content:center;width:clamp(48px,6vw,70px);height:clamp(48px,6vw,70px);border-radius:50%;background:#fff3c4;border:4px solid #ffcf4d;font-size:clamp(24px,3.4vw,40px);font-weight:900;text-decoration:none;color:#3b2a1a}
#gq .bond b{background:#ffe0b8;border-color:#ff9a3c}
#gq .bond u.qm{background:#efe3c8;border-style:dashed;border-color:#b79a6a;color:#b0702a}
#gq .bond u.qm.got{background:#e3f8e6;border:4px solid #2fb84f;color:#1f8a39;animation:pop .5s}
#gq .bond svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
#gq .sent{font-size:clamp(24px,3.6vw,42px)}