:root{--sky:#84d4f5;--cream:#fffaf0;--paper:#fffdf7;--ink:#30221e;--coral:#ff694b;--coral-dark:#ec4e35;--yellow:#ffc928;--mint:#4acb78;--blue:#299fe9;--line:#ead7b9;--shadow:0 18px 45px rgba(57,82,71,.18);font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{min-height:100vh;background:#8bd7f5 url('../assets/garden-background.png') center/cover fixed no-repeat;overflow-x:hidden}button{font:inherit;color:inherit}button:focus-visible{outline:4px solid #603bb7;outline-offset:4px}button{touch-action:manipulation}.game-shell{width:min(1180px,calc(100% - 32px));min-height:min(820px,calc(100vh - 32px));margin:16px auto;background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03));border-radius:34px;position:relative}.hud{height:98px;display:grid;grid-template-columns:1.2fr 1fr 1.45fr;align-items:center;gap:20px;padding:16px 22px}.brand{border:0;background:rgba(255,253,247,.95);box-shadow:0 5px 0 rgba(227,203,171,.65);border-radius:999px;padding:10px 20px;display:flex;align-items:center;gap:10px;font-weight:900;font-size:26px;white-space:nowrap;cursor:pointer}.brand b,.welcome-brand b{color:var(--coral)}.brand span:last-child{color:#0e9eae}.sun-mark{font-size:32px;color:#ffb91f;filter:saturate(1.2)}.level-title,.progress,.score{background:rgba(255,253,247,.96);border:2px solid rgba(234,215,185,.7);box-shadow:0 4px 0 rgba(154,112,53,.12);border-radius:999px}.level-title{justify-self:center;padding:12px 26px;font-size:20px;font-weight:900;white-space:nowrap}.hud-right{display:flex;justify-content:flex-end;align-items:center;gap:10px}.progress{display:flex;align-items:center;gap:10px;padding:9px 16px}.progress span{display:flex;gap:5px}.progress i{width:11px;height:11px;border-radius:50%;background:#d9dddf}.progress i.now{background:var(--yellow);box-shadow:0 0 0 3px #fff1aa}.progress i.done{background:var(--mint)}.score{display:flex;align-items:center;gap:6px;padding:7px 15px;font-size:20px}.icon-button{position:relative;width:52px;height:52px;border:3px solid white;background:var(--blue);color:white;border-radius:50%;box-shadow:0 5px 0 #1477bf;display:grid;place-items:center;cursor:pointer}.icon-button svg{width:28px;height:28px;fill:currentColor}.mute-slash{display:none;position:absolute;width:32px;height:3px;background:white;transform:rotate(-45deg);border-radius:4px}.mute-slash.show{display:block}.stage{position:relative;min-height:690px;background:rgba(255,250,240,.96);border:8px solid rgba(255,238,202,.94);border-radius:48% 48% 30px 30px/110px 110px 30px 30px;box-shadow:var(--shadow),inset 0 0 0 2px white;padding:84px 34px 26px;overflow:hidden}.instruction{position:absolute;top:25px;left:50%;transform:translateX(-50%);background:#fff3d8;border:2px solid #f5d896;border-radius:999px;padding:12px 26px;font-size:22px;font-weight:900;white-space:nowrap;box-shadow:0 4px 0 rgba(206,158,65,.15)}.spark{color:#ffb914;padding:0 14px}.play-area{height:545px;display:grid;align-items:center}.play-area:focus{outline:none}.live-feedback{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:18px;font-weight:800;color:#8d4d15}.shape-sprite{position:relative;display:block;width:132px;height:150px;overflow:hidden;filter:drop-shadow(0 10px 5px rgba(67,39,20,.15))}.shape-sprite img{position:absolute;width:500%;max-width:none;height:auto;left:calc(var(--sprite) * -100%);top:50%;transform:translateY(-50%);pointer-events:none;user-select:none}.shape-sprite img.single-sprite{width:100%;height:100%;left:0;top:0;transform:scale(1.35);object-fit:contain}.pick-zone,.drag-rail,.friend-line{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,5vw,78px)}.pick-shape,.draggable-shape,.memory-choices button{background:none;border:0;border-radius:30px;padding:8px;cursor:pointer;transition:transform .18s ease,filter .18s ease}.pick-shape:hover,.pick-shape:focus-visible,.draggable-shape:hover,.draggable-shape.selected,.memory-choices button:hover{transform:translateY(-12px) scale(1.05);filter:brightness(1.03)}.pick-shape .shape-sprite{width:180px;height:210px}.match-board{height:100%;display:grid;grid-template-rows:1fr 1fr;gap:16px}.homes{display:flex;justify-content:center;align-items:center;gap:clamp(30px,8vw,120px)}.shape-home{width:170px;height:150px;background:#f2efe8;border:3px dashed #858585;cursor:pointer;position:relative;transition:.2s;border-radius:22px}.shape-home.circle{border-radius:50%;width:150px}.shape-home.triangle{background:transparent;border:0;width:170px;clip-path:polygon(50% 0,100% 100%,0 100%);background:#8d8d8d}.shape-home.triangle span{position:absolute;inset:7px;clip-path:inherit;background:#f2efe8}.shape-home.drag-over,.shape-home:focus-visible{background-color:#cff4d9;filter:drop-shadow(0 0 12px #54ce81)}.shape-home.is-filled{opacity:.25}.draggable-shape{touch-action:none}.draggable-shape .shape-sprite{width:145px;height:165px}.sort-board{height:100%;display:grid;grid-template-rows:1fr 1fr auto;align-items:center}.sort-bins{display:flex;justify-content:center;gap:80px}.sort-bin{width:220px;height:140px;border:4px dashed #8bb2a1;border-radius:26px;background:#ecfaf1;display:grid;grid-template-columns:70px 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:20px;cursor:pointer}.sort-bin.drag-over{transform:scale(1.05);box-shadow:0 0 0 8px rgba(74,203,120,.2)}.pointy-bin{background:#fff4e6;border-color:#e6ac75}.bin-icon{grid-row:1/3;font-size:52px;color:#43bd71}.pointy-bin .bin-icon{color:var(--coral)}.sort-bin b{font-size:23px}.sort-bin small{font-size:14px;color:#7d6a61}.drag-rail.compact{gap:28px}.drag-rail.compact .shape-sprite{width:115px;height:125px}.sort-count,.round-count{text-align:center;font-weight:800;color:#806b5d}.memory-board{display:grid;gap:22px;justify-items:center}.memory-strip{display:flex;gap:16px}.memory-card{width:150px;height:180px;border-radius:28px;border:3px solid #eadbc3;background:white;display:grid;place-items:center;box-shadow:0 7px 0 #eadbc3}.memory-card .shape-sprite{width:110px;height:135px}.memory-card.is-done{border-color:var(--mint);background:#edfff3}.question{font-size:58px;color:#b9a99a;font-weight:900}.memory-note{margin:0;font-weight:800;color:#856b5e}.memory-choices{display:flex;gap:8px}.memory-choices .shape-sprite{width:90px;height:105px}.memory-choices.disabled{opacity:.45}.timer-board{display:grid;justify-items:center;gap:16px}.timer-line{display:flex;align-items:center;gap:8px;background:white;border-radius:999px;padding:8px 18px;font-weight:800}.timer-line strong{font-size:30px;color:var(--coral)}.timer-track{width:180px;height:12px;border-radius:99px;background:#eee5db;overflow:hidden}.timer-track i{display:block;width:calc(var(--time) * 100%);height:100%;background:var(--mint);transition:width 1s linear}.timer-board h2{font-size:28px;margin:0}.timer-board h2 em{color:var(--coral);font-style:normal}.timer-picks .shape-sprite{width:150px;height:175px}.welcome-shell{display:grid;place-items:center;min-height:calc(100vh - 32px)}.welcome-brand{position:absolute;top:25px;left:35px;background:rgba(255,253,247,.95);border-radius:999px;padding:10px 22px;display:flex;align-items:center;gap:8px;box-shadow:0 5px 0 rgba(227,203,171,.65)}.welcome-brand h1{margin:0;color:#0e9eae;font-size:30px}.welcome-stage{width:min(780px,90%);min-height:580px;border:8px solid #ffebc7;border-radius:48% 48% 40px 40px/110px 110px 40px 40px;background:rgba(255,250,240,.97);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 35px 40px}.welcome-stage p{font-size:24px;font-weight:900;color:#226998;transform:rotate(-2deg);margin:0 0 28px}.welcome-stage .shape-sprite{width:110px;height:135px}.friend-line{gap:5px;margin-bottom:25px}.primary-button,.secondary-button{min-height:60px;border-radius:999px;padding:0 32px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:22px;font-weight:900;cursor:pointer}.primary-button{border:4px solid white;background:var(--coral);color:white;box-shadow:0 6px 0 var(--coral-dark),0 8px 18px rgba(215,73,48,.25)}.primary-button:hover{transform:translateY(-2px)}.primary-button svg{width:27px;height:27px;fill:currentColor}.primary-button.big{font-size:28px;min-width:270px;height:72px}.secondary-button{border:3px solid #ead7b9;background:white;box-shadow:0 4px 0 #ead7b9}.welcome-stage small{margin-top:20px;color:#76665e;font-weight:700}.overlay{position:fixed;inset:0;background:rgba(55,69,60,.38);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:10;padding:20px}.result-card{width:min(560px,94vw);min-height:500px;border:8px solid #ffedc9;background:var(--paper);border-radius:50px;box-shadow:0 30px 90px rgba(39,43,37,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px;position:relative;overflow:hidden}.result-art{display:flex;height:160px;align-items:center;justify-content:center}.result-art .shape-sprite{width:125px;height:150px}.final .result-art{width:100%;gap:-10px}.final .result-art .shape-sprite{width:88px;height:115px}.result-card h2{font-size:48px;color:var(--coral);margin:8px 0 0}.result-card p{font-size:19px;margin:8px 0 15px;font-weight:700}.earned-stars{font-size:42px;letter-spacing:8px;margin-bottom:22px}.earned-stars span{display:inline-block;animation:star-pop .45s calc(var(--delay)*.12s) both}.result-actions{display:flex;gap:14px}.confetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 12% 15%,#ffcd2c 0 5px,transparent 6px),radial-gradient(circle at 87% 20%,#49c975 0 5px,transparent 6px),radial-gradient(circle at 18% 72%,#31a5e9 0 5px,transparent 6px),radial-gradient(circle at 82% 78%,#ff6b4a 0 5px,transparent 6px)}.failure .confetti{display:none}.shake{animation:shake .35s}.welcome-stage,.stage,.result-card{background-image:radial-gradient(rgba(178,140,82,.07) .7px,transparent .8px);background-size:7px 7px}@keyframes star-pop{from{transform:scale(0) rotate(-25deg)}70%{transform:scale(1.25) rotate(6deg)}to{transform:scale(1)}}@keyframes shake{25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-5px)}}
@media (max-width:800px){body{background-attachment:scroll}.game-shell{width:100%;min-height:100vh;margin:0;border-radius:0}.hud{height:auto;grid-template-columns:1fr auto;padding:12px;gap:10px}.brand{font-size:19px;padding:7px 12px}.brand .sun-mark{font-size:22px}.level-title{grid-row:2;grid-column:1/3;justify-self:center;font-size:17px;padding:8px 16px}.hud-right{gap:6px}.progress{padding:7px 10px}.progress span{display:none}.score{font-size:16px;padding:6px 9px}.icon-button{width:42px;height:42px}.stage{min-height:calc(100vh - 126px);border-width:5px;border-radius:42% 42% 0 0/60px 60px 0 0;padding:78px 14px 25px}.instruction{top:20px;font-size:17px;padding:9px 14px;max-width:92%;white-space:normal;text-align:center}.spark{padding:0 6px}.play-area{height:auto;min-height:calc(100vh - 240px)}.pick-zone{gap:2px}.pick-shape{padding:0}.pick-shape .shape-sprite{width:105px;height:145px}.match-board{grid-template-rows:1fr 1.1fr}.homes{gap:16px}.shape-home{width:95px;height:90px}.shape-home.circle{width:90px;height:90px}.shape-home.triangle{width:98px}.drag-rail{gap:8px}.draggable-shape{padding:0}.draggable-shape .shape-sprite{width:100px;height:125px}.sort-bins{gap:12px}.sort-bin{width:155px;height:112px;padding:10px;grid-template-columns:48px 1fr}.bin-icon{font-size:38px}.sort-bin b{font-size:18px}.drag-rail.compact{gap:0}.drag-rail.compact .shape-sprite{width:84px;height:100px}.memory-strip{gap:6px}.memory-card{width:76px;height:115px;border-radius:18px}.memory-card .shape-sprite{width:72px;height:95px}.memory-choices{flex-wrap:wrap;justify-content:center}.memory-choices .shape-sprite{width:67px;height:78px}.timer-picks .shape-sprite{width:105px;height:140px}.timer-track{width:100px}.welcome-brand{top:18px;left:50%;transform:translateX(-50%);white-space:nowrap}.welcome-stage{width:94%;min-height:650px;padding:90px 12px 30px}.welcome-stage p{font-size:20px;text-align:center}.welcome-stage .shape-sprite{width:72px;height:100px}.friend-line{gap:0}.result-card{min-height:480px;padding:25px 15px}.result-card h2{font-size:40px}.result-actions{flex-direction:column}.final .result-art .shape-sprite{width:64px}.live-feedback{bottom:8px;width:100%;text-align:center}}
@media (max-width:390px){.brand span:last-child{font-size:17px}.progress{display:none}.hud-right{justify-self:end}.pick-shape .shape-sprite{width:92px}.shape-home{width:85px}.draggable-shape .shape-sprite{width:90px}.welcome-stage .shape-sprite{width:64px}.sort-bin{width:145px}.memory-card{width:70px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}.pick-shape:hover,.draggable-shape:hover,.draggable-shape.selected{transform:none}}