@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&display=swap');
:root{--ink:#433b32;--paper:#fffaf0;--cream:#fff0c3;--accent:#e57448;--accent-dark:#b95235;--green:#5f8d5c;--gold:#f1c34d;--sky:#addbd7;--shadow:rgba(64,52,36,.18)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow-x:hidden;color:var(--ink);background:linear-gradient(#b7dfdb 0 38%,#dce9ae 38%);font-family:"ZCOOL KuaiLe","PingFang SC",sans-serif;user-select:none;-webkit-tap-highlight-color:transparent}button,a{font:inherit;color:inherit}button{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:5px solid rgba(229,116,72,.48);outline-offset:3px}
.world-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}.world-bg:before,.world-bg:after{content:"";position:absolute;bottom:-90px;width:55vw;height:260px;border-radius:50% 50% 0 0;background:#92bb70;opacity:.38}.world-bg:before{left:-10vw}.world-bg:after{right:-15vw;transform:scale(.8)}.world-bg i{position:absolute;color:rgba(255,255,255,.8);font-style:normal;animation:twinkle 2.8s infinite}.world-bg i:nth-child(1){left:9%;top:14%}.world-bg i:nth-child(2){right:12%;top:8%;animation-delay:-1s}.world-bg i:nth-child(3){right:4%;top:31%;animation-delay:-2s}
.learning-app{position:relative;z-index:2;width:100%;max-width:980px;width:min(100%,980px);min-height:100vh;min-height:100dvh;margin:auto}.screen{display:none;min-height:100vh;min-height:100dvh;padding:18px 36px;padding-top:max(18px,env(safe-area-inset-top,0px));padding-right:max(clamp(12px,4vw,36px),env(safe-area-inset-right,0px));padding-bottom:max(18px,env(safe-area-inset-bottom,0px));padding-left:max(clamp(12px,4vw,36px),env(safe-area-inset-left,0px));animation:enter .35s ease}.screen.active{display:flex}.welcome{position:relative;flex-direction:column;align-items:center;justify-content:center;text-align:center}.back-link{position:absolute;left:20px;top:20px;left:max(20px,env(safe-area-inset-left,0px));top:max(20px,env(safe-area-inset-top,0px));padding:9px 14px;border-radius:20px;color:#4f7151;background:rgba(255,255,255,.68);text-decoration:none}.hero-toy{min-width:280px;min-height:135px;padding:18px 26px;display:flex;align-items:center;justify-content:center;gap:8px;border:8px solid #fff0b9;border-radius:42px 18px;background:var(--hero,#f5ce72);box-shadow:0 11px 0 rgba(70,62,40,.13),0 18px 34px var(--shadow);font-size:62px;transform:rotate(-2deg)}.hero-toy small{font-size:30px}.kicker{margin:20px 0 5px;color:#557756;letter-spacing:.16em}.welcome h1,.finish h2{margin:0;font-family:"Ma Shan Zheng",cursive;font-size:76px;font-size:clamp(58px,13vw,88px);line-height:.9;font-weight:400;text-shadow:0 4px rgba(255,255,255,.7)}.welcome h1 em{color:var(--accent);font-style:normal}.intro{margin:18px 0 22px;font-family:"PingFang SC",sans-serif;font-size:19px;font-size:clamp(17px,3vw,21px);line-height:1.65}.primary{min-width:226px;min-height:62px;padding:9px 13px 9px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;border-radius:34px;color:#fff;background:var(--accent);box-shadow:0 8px 0 var(--accent-dark),0 15px 28px var(--shadow);font-size:22px;cursor:pointer}.primary b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--accent);background:#fff}.primary:active{transform:translateY(5px);box-shadow:0 3px 0 var(--accent-dark)}.sound-toggle{min-height:44px;margin-top:22px;border:0;color:#4f7050;background:transparent;cursor:pointer}
.game{flex-direction:column;align-items:center;padding-top:12px}.game-header{width:100%;display:flex;align-items:center;gap:8px}.circle{flex:0 0 44px;height:44px;border:2px solid rgba(60,67,42,.08);border-radius:50%;background:rgba(255,250,235,.95);box-shadow:0 4px 0 rgba(60,67,42,.12);font-size:20px;cursor:pointer}.progress{flex:1;display:flex;justify-content:center;gap:5px}.progress i{width:22px;width:clamp(13px,3vw,28px);height:10px;border-radius:10px;background:rgba(255,255,255,.65)}.progress i.done{background:var(--gold)}.progress i.now{background:var(--accent);transform:scaleY(1.3)}.level-pill{padding:8px 12px;border-radius:20px;background:var(--paper);box-shadow:0 3px 0 rgba(60,67,42,.1);white-space:nowrap}
.task-card{width:780px;max-width:100%;width:min(100%,780px);margin:16px 0 13px;padding:12px 14px;display:flex;align-items:center;gap:12px;border-radius:25px 11px;background:var(--paper);box-shadow:0 7px 0 rgba(65,63,40,.1),0 13px 23px var(--shadow)}.guide{font-size:45px}.task-copy{flex:1;min-width:0}.task-copy p{margin:0;color:#72855c;font-size:13px}.task-copy h2{margin:2px 0 0;font-size:24px;font-size:clamp(20px,4vw,28px);font-weight:400;text-wrap:balance}.listen{min-height:44px;padding:10px 13px;border:0;border-radius:16px;color:#715a34;background:#ffe19a;cursor:pointer}
.board{width:820px;max-width:100%;width:min(100%,820px);min-height:320px;padding:18px;border:7px solid rgba(255,255,255,.76);border-radius:36px 15px;background:rgba(255,250,235,.76);box-shadow:0 9px 0 rgba(64,67,40,.1),0 18px 32px var(--shadow)}.feedback{min-height:42px;margin:15px 0 10px;padding:9px 18px;border-radius:22px;color:#496849;background:rgba(255,255,255,.7);text-align:center}.feedback.good{color:#207044;background:#e5f4c9}.feedback.hint{color:#9b5d34;background:#fff0bc}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.soft,.check{min-height:46px;padding:9px 17px;border:0;border-radius:20px;cursor:pointer}.soft{color:#4e6b4e;background:rgba(255,255,255,.78)}.check{color:#fff;background:var(--green);box-shadow:0 5px 0 #416640}
.choice-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.choice{min-height:105px;padding:9px;border:5px solid #fff;border-radius:25px 10px;background:#fff8dc;box-shadow:0 6px 0 rgba(72,64,42,.12);font-size:52px;cursor:pointer}.choice small{display:block;margin-top:3px;color:#655e50;font-size:15px}.choice.selected{transform:translateY(-5px);border-color:var(--gold);background:#fff0a5}.choice.correct{border-color:#7fb469;background:#e9f5ca;animation:pop .35s}.choice.wrong{animation:shake .35s;background:#ffe2c5}
.overlay{position:fixed;z-index:20;inset:0;display:none;place-items:center;padding:20px;background:rgba(42,58,41,.55);backdrop-filter:blur(6px);overscroll-behavior:contain}.overlay.show{display:grid}.result{width:430px;max-width:92vw;width:min(92vw,430px);padding:28px;display:flex;flex-direction:column;align-items:center;border:8px solid #f1d99b;border-radius:40px 17px;background:var(--paper);box-shadow:0 18px 0 rgba(39,53,37,.15),0 28px 60px rgba(35,44,31,.3);text-align:center}.result-icon{font-size:82px;animation:pop .55s}.result h2{margin:4px 0;font-family:"Ma Shan Zheng",cursive;color:var(--accent);font-size:50px;font-weight:400}.result p{font-size:18px}.finish{flex-direction:column;align-items:center;justify-content:center;text-align:center}.finish h2{color:var(--accent)}.medal{font-size:105px;animation:pop .7s}.finish p{max-width:550px;font-size:20px;line-height:1.6}.finish .primary{margin-top:12px}.finish-link{margin-top:24px;color:#476a49;text-decoration:none}
/* Train */.train-track{position:relative;padding:28px 8px 35px;display:grid;grid-template-columns:repeat(var(--cars,3),minmax(0,1fr));gap:10px;border-bottom:10px double #8b6748}.train-slot{position:relative;min-width:0;min-height:135px;display:grid;place-items:center;border:5px dashed rgba(130,85,49,.35);border-radius:24px 24px 12px 12px;font-size:55px;cursor:pointer}.train-slot:nth-child(1){background:#e97b70}.train-slot:nth-child(2){background:#70a9d6}.train-slot:nth-child(3){background:#f2c85e}.train-slot:nth-child(4){background:#78aa6b}.train-slot:after{content:"";position:absolute;bottom:-18px;width:29px;height:29px;border:6px solid #6b523e;border-radius:50%;background:#fff1bf}.train-slot .cargo{position:absolute;right:8px;top:8px;font-size:30px}.train-slot .label{position:absolute;left:7px;top:7px;padding:3px 6px;border:2px solid rgba(77,62,43,.12);border-radius:9px;color:#433b32;background:rgba(255,255,255,.88);font-size:12px}.train-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}.train-piece{width:100px;min-height:83px;border:5px solid #fff;border-radius:24px 10px;background:#fff7dc;box-shadow:0 6px 0 rgba(70,62,40,.12);font-size:48px;cursor:pointer}.train-piece.used{opacity:.25}.train-piece.selected{border-color:var(--gold);transform:translateY(-5px)}
/* Shop */.order-note{margin:0 auto 14px;padding:10px 16px;width:max-content;max-width:100%;border:3px dashed #d3a342;border-radius:18px;background:#fff4c8;font-size:19px}.shop-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px;border-bottom:12px solid #9b7047;background:#e9c98d}.shop-item{min-height:105px;border:4px solid #fff;border-radius:22px 9px;background:#fff9e5;font-size:48px;cursor:pointer}.shop-item b{display:block;color:#705e48;font-size:15px;font-weight:400}.basket{min-height:91px;margin:20px auto 3px;padding:12px;display:flex;align-items:center;justify-content:center;gap:6px;border:7px solid #a67243;border-radius:14px 14px 36px 36px;background:#e6b55f;font-size:43px}.basket:empty:after{content:"把商品放进购物篮";color:#80623f;font-size:16px}
/* Story */.story-strip{display:grid;grid-template-columns:repeat(var(--cards,3),minmax(0,1fr));gap:12px}.story-slot{min-width:0;min-height:205px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:5px dashed rgba(100,89,59,.22);border-radius:25px 10px;background:#f2efd3;font-size:65px;cursor:pointer}.story-slot.filled{border-style:solid;border-color:#fff;background:#fff8df}.story-slot small{margin-top:10px;font-family:"PingFang SC",sans-serif;font-size:14px}.story-tray{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:18px}.story-card{width:125px;min-height:108px;padding:8px;border:5px solid #fff;border-radius:22px 9px;background:#fff7d9;box-shadow:0 6px 0 rgba(70,62,40,.12);font-size:45px;cursor:pointer}.story-card small{display:block;margin-top:3px;color:#665d4e;font-family:"PingFang SC",sans-serif;font-size:13px}.story-card.used{opacity:.25}.story-card.selected{border-color:var(--gold);transform:translateY(-5px)}
/* Tidy */.room{position:relative;min-height:330px;overflow:hidden;border-radius:28px 11px;background:linear-gradient(#f7dfbd 0 70%,#c89462 70%)}.zones{position:absolute;left:12px;right:12px;bottom:15px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.zone{min-height:105px;padding:7px;border:4px dashed rgba(98,70,44,.35);border-radius:20px 9px;background:rgba(255,250,223,.72);text-align:center;font-size:38px;cursor:pointer}.zone small{display:block;font-size:13px}.mess{min-height:170px;padding:18px;display:flex;align-items:flex-start;justify-content:center;gap:10px;flex-wrap:wrap}.mess-item{width:82px;height:72px;border:5px solid #fff;border-radius:20px 8px;background:#fff7dd;box-shadow:0 5px 0 rgba(70,62,40,.12);font-size:40px;cursor:pointer}.mess-item.selected{border-color:var(--gold);transform:translateY(-5px)}.mess-item.used{visibility:hidden}
/* Shapes */.builder{display:grid;grid-template-columns:1fr 1fr;gap:16px}.blueprint,.build-pad{position:relative;min-height:430px;aspect-ratio:1/1.12;border:5px solid #fff;border-radius:28px 11px;background:#d8ecde}.blueprint h3,.build-pad h3{position:absolute;left:12px;top:10px;margin:0;color:#58725d;font-size:15px;font-weight:400}.shape-layout{position:absolute;left:15px;bottom:15px;width:calc(100% - 30px);height:0;padding-bottom:calc(100% - 30px);aspect-ratio:1}.shape{position:absolute;display:grid;place-items:center;color:#fff;text-shadow:0 2px rgba(0,0,0,.12);font-size:22px}.circle-shape{border-radius:50%;background:#e96f55}.square-shape{background:#e5ad43}.triangle-shape{width:0!important;height:0!important;border-left:var(--half,35px) solid transparent;border-right:var(--half,35px) solid transparent;border-bottom:var(--height,65px) solid #668fba;background:transparent}.rect-shape{background:#78a866}.shape.empty{opacity:.16;filter:grayscale(1)}.shape-palette{grid-column:1/-1;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;padding-top:4px}.shape-button{width:110px;min-height:77px;border:5px solid #fff;border-radius:22px 9px;background:#fff6d8;box-shadow:0 6px 0 rgba(70,62,40,.12);font-size:18px;cursor:pointer}.shape-button i{display:block;margin:auto}.shape-button.selected{border-color:var(--gold);transform:translateY(-5px)}
.geo{position:absolute;border:3px solid rgba(68,59,50,.08);cursor:pointer}.geo.circle{border-radius:50%;background:#e96f55}.geo.ellipse{border-radius:50%;background:#d982ad}.geo.square{background:#e5ad43}.geo.rect{background:#78a866}.geo.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background:#668fba}.geo.target{cursor:default;filter:saturate(.92)}.geo.outline{opacity:.24;filter:grayscale(1);background:#65715f;border:4px dashed #314837}.geo.filled{opacity:1;filter:none;border-style:solid}.geo.circle.filled{background:#e96f55}.geo.ellipse.filled{background:#d982ad}.geo.square.filled{background:#e5ad43}.geo.rect.filled{background:#78a866}.geo.triangle.filled{background:#668fba}.palette-icon{display:block;width:36px;height:36px;margin:0 auto 3px}.palette-icon.circle{border-radius:50%;background:#e96f55}.palette-icon.ellipse{width:53px;border-radius:50%;background:#d982ad}.palette-icon.square{background:#e5ad43}.palette-icon.rect{width:53px;background:#78a866}.palette-icon.triangle{clip-path:polygon(50% 0,100% 100%,0 100%);background:#668fba}
@supports (aspect-ratio:1/1){.blueprint,.build-pad{min-height:0}.shape-layout{height:auto;padding-bottom:0}}
@keyframes enter{from{opacity:0;transform:translateY(12px)}}@keyframes pop{from{transform:scale(.45)}}@keyframes shake{25%{transform:translateX(-7px)}70%{transform:translateX(7px)}}@keyframes twinkle{50%{opacity:.2;transform:rotate(35deg) scale(.7)}}
@media(min-width:700px) and (max-height:820px){.screen{padding-top:max(8px,env(safe-area-inset-top,0px));padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}.game{padding-top:5px}.task-card{margin:8px 0;padding:8px 12px}.guide{font-size:36px}.board{min-height:0;padding:12px;border-width:5px}.feedback{margin:8px 0 6px}.train-track{padding:20px 8px 28px}.train-slot{min-height:105px;font-size:46px}.train-tray{margin-top:14px}.train-piece{min-height:70px;font-size:42px}.story-slot{min-height:150px;font-size:52px}.story-card{min-height:92px}.room{min-height:290px}.basket{min-height:78px;margin-top:12px}.blueprint,.build-pad{width:min(100%,340px);justify-self:center}.shape-button{min-height:68px}}
@media(max-width:650px){.screen{padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.back-link{left:max(10px,env(safe-area-inset-left,0px));top:max(10px,env(safe-area-inset-top,0px))}.hero-toy{min-width:245px;font-size:51px}.task-card{border-radius:20px}.task-card .listen{min-height:44px;padding:9px;font-size:13px}.board{padding:10px;border-width:5px;min-height:280px}.choice-grid,.shop-shelf{grid-template-columns:repeat(2,1fr)}.choice{min-height:88px}.train-slot{min-height:105px;font-size:43px}.train-piece{width:76px;font-size:39px}.story-strip{gap:5px}.story-slot{min-height:160px;font-size:48px;padding:4px}.story-slot small{font-size:11px}.story-card{width:83px;font-size:38px}.zones{gap:4px}.zone{font-size:30px;padding:3px}.builder{grid-template-columns:1fr}.blueprint,.build-pad{width:min(100%,360px);justify-self:center}.shape-palette{grid-column:1}.shape-button{width:83px}.progress{gap:2px}.progress i{width:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}