:root{--c-bg: #FFF4E3;--c-bg-deep: #FFE7C7;--c-card: #FFFFFF;--c-card-soft: #FFFDF6;--c-ink: #53392A;--c-ink-soft: #8A6E58;--c-primary: #FF8A5C;--c-primary-deep: #F06A3B;--c-sunny: #FFC95C;--c-green: #6BCB77;--c-green-deep: #3C8F47;--c-sky: #5CA0F2;--c-lilac: #B98EF7;--c-teal: #5FD0B8;--c-line: #F0D9BB;--c-lock: #C9B8A6;--fs-hero: 34px;--fs-title: 26px;--fs-body: 20px;--fs-caption: 15px;--fs-tiny: 12px;--radius-lg: 24px;--radius-md: 16px;--gap: 16px;--font-kid: "PingFang SC", "PingFang SC Rounded", "HarmonyOS Sans", system-ui, sans-serif;--font-p: -apple-system, system-ui, sans-serif;--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#app{height:100%}body{font-family:var(--font-p);color:var(--c-ink);background:radial-gradient(1200px 600px at 50% -10%,#ffe7c7,#f7e3c8 45%,#efd7b4);-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;align-items:center}.shell{width:min(480px,100%);height:100%;display:flex;flex-direction:column;position:relative;overflow:hidden}.shell-kid{background:var(--c-bg)}.shell-parent{background:var(--c-card-soft)}@media(min-width:768px){.shell{width:min(720px,100%)}.shell-parent{width:min(640px,100%)}}@media(min-width:1024px){.shell{width:min(960px,100%);height:calc(100% - 32px);margin:16px 0;border-radius:24px;box-shadow:0 24px 60px #9664282e}.shell-parent{width:min(720px,100%)}}.page{flex:1;overflow-y:auto;padding:20px 18px calc(84px + var(--safe-bottom));scrollbar-width:none}.page::-webkit-scrollbar{display:none}.page--notab{padding-bottom:24px}.actions-sticky{position:sticky;bottom:calc(10px + var(--safe-bottom));z-index:6;padding-top:16px;background:linear-gradient(180deg,transparent,var(--c-bg) 42%)}.page:not(.page--notab) .actions-sticky{bottom:calc(82px + var(--safe-bottom))}.flex{display:flex;align-items:center}.between{justify-content:space-between}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}.gap16{gap:16px}.col{display:flex;flex-direction:column}.grow{flex:1;min-width:0}.center{text-align:center}.card{background:var(--c-card);border:2px solid var(--c-line);border-radius:var(--radius-lg);padding:18px;box-shadow:0 8px #f0d9bb99}.card-soft{background:var(--c-card-soft);border:2px dashed var(--c-line);border-radius:var(--radius-md);padding:12px 14px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--radius-md);font-family:var(--font-kid);font-weight:700;font-size:var(--fs-body);cursor:pointer;padding:16px 18px;width:100%;box-shadow:0 6px #c0782840;transition:transform .06s,box-shadow .06s;-webkit-user-select:none;user-select:none}.btn:active{transform:translateY(4px);box-shadow:0 2px #c0782840}.btn:disabled{opacity:.55;pointer-events:none}.btn-primary{background:linear-gradient(135deg,#ffa775,#ff7a45);color:#fff}.btn-ghost{background:#fff;color:var(--c-primary-deep);border:2px solid var(--c-primary);box-shadow:0 5px #f06a3b2e}.btn-lilac{background:linear-gradient(135deg,#cba3ff,#a879ec);color:#fff}.btn-soft{background:var(--c-sunny);color:#6b4a10}.btn-danger{background:#fff;border:2px solid #E0B4AC;color:#b0552f;box-shadow:0 5px #b0552f1f}.btn-sm{padding:10px 14px;font-size:15px;width:auto}.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--c-line);border-radius:999px;padding:6px 12px;font-family:var(--font-kid);font-weight:700;font-size:14px;color:var(--c-ink)}.pill.teal{border-color:var(--c-teal);color:#2a8f79}.pill.green{border-color:var(--c-green);color:var(--c-green-deep)}.pill.sunny{border-color:var(--c-sunny);color:#9a6a08}.prog{height:14px;background:#f3e5cd;border-radius:999px;overflow:hidden;border:1px solid var(--c-line)}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--c-sunny),var(--c-primary));border-radius:999px;transition:width .5s}.hbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px}.hbar .ttl{font-family:var(--font-kid);font-weight:800;font-size:20px}.back{width:38px;height:38px;border-radius:12px;background:#fff;border:2px solid var(--c-line);cursor:pointer;font-size:20px;color:var(--c-ink);display:flex;align-items:center;justify-content:center;flex:none}.field label{display:block;font-family:var(--font-kid);font-weight:700;font-size:14px;margin-bottom:6px;color:var(--c-ink)}.field{margin-bottom:14px}.input{width:100%;border:3px solid var(--c-line);border-radius:var(--radius-md);padding:14px;font-size:16px;font-family:var(--font-p);font-weight:600;background:#fff;color:var(--c-ink);outline:none;transition:border-color .15s}.input:focus{border-color:var(--c-primary)}.input::placeholder{color:var(--c-ink-soft);font-weight:400}.hint{font-size:var(--fs-tiny);color:var(--c-ink-soft);margin-top:8px;line-height:1.6}.banner-warn{background:#fff7e8;border:2px solid #FFD9A8;border-radius:14px;padding:12px;font-size:13px;color:#8a6e58;line-height:1.7}.pbody .ttl{font-family:var(--font-p);font-weight:700}.pbody{font-family:var(--font-p)}.pbody h2{font-size:20px;font-weight:700;margin:6px 0 12px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.confetti,.wave,.zZ{display:none}}.partner{position:relative;width:96px;height:84px;background:linear-gradient(150deg,#ffb27e,#ff8a5c 55%,#f06a3b);border-radius:46% 54% 50% 50%/62% 58% 42% 38%;box-shadow:inset -8px -6px #d65c2c59,0 10px 18px #f06a3b47;margin:0 auto;animation:float 3.4s ease-in-out infinite}.partner:before{content:"";position:absolute;top:-14px;left:18px;width:26px;height:16px;background:#ffffffd9;border-radius:50%;transform:rotate(-12deg)}.partner .eye{position:absolute;top:34px;background:#6b3a1e;width:11px;height:13px;border-radius:50%}.partner .eye.l{left:26px}.partner .eye.r{right:26px}.partner .mouth{position:absolute;top:54px;left:50%;transform:translate(-50%);width:26px;height:13px;border-bottom:4px solid #6b3a1e;border-radius:0 0 30px 30px}.partner.sad .mouth{border-bottom:none;border-top:4px solid #6b3a1e;border-radius:30px 30px 0 0;top:44px}.partner.happy .mouth{width:32px;height:18px;top:50px}.partner.size-sm{width:68px;height:60px;margin:0}.partner.size-sm .eye{top:24px;width:8px;height:10px}.partner.size-sm .eye.l{left:18px}.partner.size-sm .eye.r{right:18px}.partner.size-sm .mouth{top:38px;width:20px;height:10px;border-bottom-width:3px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-14px)}60%{transform:translateY(-6px)}}.bubble{position:relative;background:#fff;border:3px solid var(--c-line);border-radius:20px;padding:12px 16px;font-family:var(--font-kid);font-weight:600;font-size:var(--fs-caption);line-height:1.5;color:var(--c-ink)}.bubble:after{content:"";position:absolute;bottom:-12px;left:26px;border:10px solid transparent;border-top-color:var(--c-line);border-bottom:0}.codegrp{display:flex;justify-content:center;align-items:center;gap:6px}.codegrp .grp{display:flex;gap:6px}.codegrp i{width:38px;height:50px;border-radius:12px;background:#fff;border:3px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-family:var(--font-kid);font-weight:800;font-size:25px;font-style:normal;color:var(--c-ink);transition:border-color .15s,background .15s}.codegrp i.fill{border-color:var(--c-primary);background:#fff3e2}.codegrp i.curr{border-color:var(--c-primary-deep);box-shadow:0 0 0 4px #ff8a5c2e;animation:ccblink 1.1s ease-in-out infinite}@keyframes ccblink{0%,to{opacity:1}50%{opacity:.55}}@media(prefers-reduced-motion:reduce){.codegrp i.curr{animation:none}}.codegrp .dash{width:14px;height:3px;border-radius:2px;background:var(--c-line)}.listen-zone{position:relative;background:linear-gradient(160deg,#fff,#fff3e2);border:2px solid var(--c-line);border-radius:var(--radius-lg);padding:18px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}.ring{position:relative;width:74px;height:74px;display:flex;align-items:center;justify-content:center}.ring:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid var(--c-primary);opacity:.5;animation:pulse 1.8s ease-out infinite}.ring.big{width:90px;height:90px}.ring .disc{width:74px;height:74px;border-radius:50%;background:linear-gradient(145deg,#ffb27e,#ff7a45);display:flex;align-items:center;justify-content:center;font-size:38px;box-shadow:0 8px 18px #f06a3b4d;cursor:pointer;border:none}@keyframes pulse{0%{transform:scale(.7);opacity:.6}to{transform:scale(1.35);opacity:0}}.wave{display:flex;align-items:flex-end;gap:3px;height:22px}.wave i{width:4px;background:var(--c-primary);border-radius:3px;animation:wavemove 1s ease-in-out infinite}.wave i:nth-child(1){height:10px}.wave i:nth-child(2){height:20px;animation-delay:.15s}.wave i:nth-child(3){height:14px;animation-delay:.3s}.wave i:nth-child(4){height:22px;animation-delay:.45s}.wave i:nth-child(5){height:16px;animation-delay:.6s}@keyframes wavemove{0%,to{transform:scaleY(.5)}50%{transform:scaleY(1)}}.slots{display:flex;gap:9px;justify-content:center;margin:6px 0 2px;flex-wrap:wrap}.slot{width:44px;height:56px;border-radius:14px;background:#fff;border:3px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-family:var(--font-kid);font-weight:800;font-size:28px;color:var(--c-ink);text-transform:lowercase}.slot.filled{border-color:var(--c-primary);background:#fff3e2;animation:pop .18s ease}.slot.hint{border-color:var(--c-lilac);background:#f3e9ff;color:#7a54c9;animation:pop .25s ease}.slot.curr{border-color:var(--c-primary-deep);box-shadow:0 0 0 4px #ff8a5c2e}.keypad{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:auto}.keypad button{aspect-ratio:1 / 1;border-radius:14px;border:2px solid var(--c-line);background:#fff;font-family:var(--font-kid);font-weight:800;font-size:21px;color:var(--c-ink);cursor:pointer;box-shadow:0 4px #f0d9bbb3;transition:transform .05s}.keypad button:active{transform:translateY(2px);box-shadow:none}.keypad .k-act{font-size:15px;background:#fff0dc;border-color:var(--c-sunny)}.keypad .k-sub{grid-column:span 4;font-size:18px;aspect-ratio:auto;min-height:54px;background:linear-gradient(135deg,#ffa775,#ff7a45);color:#fff;border-color:var(--c-primary-deep)}.fb{border-radius:var(--radius-md);padding:12px 16px;font-family:var(--font-kid);font-weight:700;font-size:16px;text-align:center;animation:pop .3s ease}.fb.ok{background:var(--c-green);color:#fff}.fb.try{background:var(--c-sunny);color:#6b4a10}.fb.go{background:var(--c-sky);color:#fff}.opt{display:block;width:100%;background:#fff;border:3px solid var(--c-line);border-radius:20px;padding:18px;font-family:var(--font-kid);font-weight:700;font-size:var(--fs-body);cursor:pointer;text-align:center;color:var(--c-ink);box-shadow:0 5px #f0d9bb99;transition:transform .1s}.opt:active{transform:translateY(3px);box-shadow:none}.opt.ok{border-color:var(--c-green);background:linear-gradient(150deg,#f0faf2,#ddf3e3);animation:okjump .5s ease}.opt.no{border-color:var(--c-line);opacity:.5;animation:wob .4s ease}@keyframes okjump{0%{transform:scale(1)}40%{transform:scale(1.05) translateY(-4px)}to{transform:scale(1)}}@keyframes wob{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.opts{display:flex;flex-direction:column;gap:10px}@media(min-width:768px){.opts{display:grid;grid-template-columns:1fr 1fr}.keypad{max-width:560px;margin-left:auto;margin-right:auto}.harvest{grid-template-columns:repeat(6,1fr)}}@media(min-width:1024px){.harvest{grid-template-columns:repeat(8,1fr)}}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;border-radius:var(--radius-lg)}.confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:3px;opacity:0;animation:fall 2.8s linear infinite}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(600px) rotate(340deg);opacity:0}}.zZ{position:absolute;font-family:var(--font-kid);font-weight:800;color:var(--c-lilac);animation:zZ 2.4s ease-in-out infinite}@keyframes zZ{0%{opacity:0;transform:translateY(6px) scale(.7)}30%{opacity:1}to{opacity:0;transform:translateY(-24px) scale(1.2)}}.ringprog{position:relative;width:86px;height:86px;border-radius:50%;background:conic-gradient(var(--c-primary) calc(var(--v, 50) * 1%),#F3E5CD 0);display:flex;align-items:center;justify-content:center;flex:none}.ringprog:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border-radius:50%;background:#fff}.ringprog b{position:relative;font-family:var(--font-kid);font-weight:800;font-size:17px;color:var(--c-primary-deep);line-height:1.15;text-align:center}.harvest{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.token{aspect-ratio:1;border-radius:18px;background:#fff;border:2px solid var(--c-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px 6px;cursor:pointer;position:relative;font-family:var(--font-kid);transition:transform .12s}.token:active{transform:scale(.92)}.token .tk-art{flex:1;width:100%;min-height:0;padding:2px 10px 0}.token .tk-name{font-size:11px;font-weight:700;color:var(--c-ink-soft);line-height:1.2}.token.got{background:linear-gradient(165deg,#fff6e4,#ffe3bb);border-color:#f3c98b;box-shadow:0 4px #f0c98b8c}.token.got .tk-name{color:var(--c-primary-deep)}.token.dim{background:#fbf6ec}.token.new .tk-art{animation:hatch .6s cubic-bezier(.34,1.56,.64,1)}@keyframes hatch{0%{transform:scale(.3) rotate(-14deg);opacity:0}55%{transform:scale(1.18) rotate(6deg);opacity:1}to{transform:scale(1) rotate(0)}}.token.new:after{content:"NEW";position:absolute;top:-8px;right:-8px;background:var(--c-primary);color:#fff;font-size:9px;font-weight:800;padding:2px 5px;border-radius:99px;font-family:var(--font-p);box-shadow:0 2px 6px #f06a3b66}.node{display:flex;align-items:center;gap:14px;background:var(--c-card);border:2px solid var(--c-line);border-radius:20px;padding:14px 16px;cursor:pointer}.node .loop{width:46px;height:46px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}.node.locked .loop{background:#efe6da;color:var(--c-lock);font-size:18px}.node.open .loop{background:var(--c-bg-deep);color:var(--c-primary-deep)}.node.mid{position:relative;margin-left:20px}.node.mid:before{content:"";position:absolute;left:-22px;top:-30px;height:60px;width:4px;border-left:4px dashed var(--c-line)}.tabbar{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#fffdf6,#fff4e3);border-top:2px solid var(--c-line);display:flex;padding:6px 8px calc(6px + var(--safe-bottom));z-index:5}.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--c-ink-soft);text-decoration:none;font-family:var(--font-kid);font-weight:700;padding:8px 0;border-radius:16px;transition:background .15s,color .15s}.tabbar a.on{color:var(--c-primary-deep);background:linear-gradient(150deg,#ffe9c7,#ffdcad);box-shadow:inset 0 0 0 2px #ffd9a8}.tabbar a.on .ico{animation:tabpop .45s ease}@keyframes tabpop{0%{transform:scale(1)}45%{transform:scale(1.3)}to{transform:scale(1)}}.tabbar .ico{position:relative;font-size:27px;line-height:1}.tabbar .lab{font-size:12px;line-height:1.2}.tabbar .badge{position:absolute;top:-7px;right:-15px;min-width:18px;height:18px;padding:0 4px;border-radius:99px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:800;font-style:normal;display:flex;align-items:center;justify-content:center;border:2px solid #FFF4E3;box-shadow:0 2px 5px #f06a3b66}.wcard{background:#fff;border:2px solid var(--c-line);border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s}.wcard .wd{font-family:var(--font-kid);font-weight:800;font-size:17px}.wcard.on{border-color:var(--c-lilac);background:linear-gradient(140deg,#fff,#f6eeff)}.wcard .ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--c-line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex:none}.wcard.on .ck{background:var(--c-lilac);border-color:#a879ec;animation:pop .2s ease}