:root{--ink:#263b2d;--green:#3d8b59;--leaf:#72bf5b;--cream:#fff9ed;--paper:#fffdf7;--orange:#f2904d;--yellow:#ffd55b;--purple:#8d75cb;--sky:#a9e2f5;--line:#d9e8cf;--shadow:0 10px 0 #d7e7c8,0 17px 30px #47643b2b;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink)}
*{box-sizing:border-box} body{margin:0;background:#ddf2d2;min-height:100dvh}button,input,select{font:inherit}button{border:0;cursor:pointer;color:inherit}#app{min-height:100dvh}.phone{position:relative;max-width:520px;min-height:100dvh;margin:auto;overflow:hidden;background:var(--cream);padding:env(safe-area-inset-top) 18px calc(22px + env(safe-area-inset-bottom));isolation:isolate}.phone:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 5% 8%,#fff 0 3px,transparent 4px),radial-gradient(circle at 92% 23%,#fff 0 3px,transparent 4px),linear-gradient(150deg,#f8fff3 0%,#fff9ed 52%,#ffecc5 100%)}.appbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0 16px}.brand{display:flex;align-items:center;gap:9px;font-weight:900}.brand-mark{width:38px;height:38px;padding:2px;border-radius:14px;background:#e9f8d7}.brand small{display:block;font-size:11px;color:#66856b;font-weight:700}.icon-btn{width:46px;height:46px;border-radius:16px;background:#fff;border:2px solid var(--line);font-size:20px}.hero{padding:26px 5px 10px;text-align:center}.hero h1{font-size:clamp(31px,8vw,42px);line-height:1.08;margin:6px 0 9px;letter-spacing:-1px}.hero p{margin:0 auto;max-width:340px;color:#5f7b62;font-weight:700}.robot-stage{position:relative;height:255px;margin:8px -18px 8px;background:linear-gradient(#a8e8fa 0 61%,#c0e986 61%);overflow:hidden}.robot-stage:before,.robot-stage:after{content:"";position:absolute;border-radius:50%;background:#fff;opacity:.9}.robot-stage:before{width:70px;height:26px;top:36px;left:24px;box-shadow:265px 18px #fff}.robot-stage:after{width:220%;height:108px;bottom:-60px;left:-35%;background:#83bc5c;border-radius:50% 50% 0 0}.robot{position:absolute;z-index:2;left:50%;bottom:39px;transform:translateX(-50%);width:158px;height:145px;border-radius:56px 56px 48px 48px;background:#effad9;border:7px solid #43884b;box-shadow:inset 0 -12px #d6edbf,0 9px 0 #4d944b}.robot:before{content:"";position:absolute;top:-66px;left:66px;width:16px;height:70px;border-radius:20px;background:#43884b;transform:rotate(1deg)}.robot:after{content:"●  ●\A ︶";white-space:pre;position:absolute;inset:34px 0 0;text-align:center;font-size:26px;line-height:37px;color:#263b2d}.leaf{position:absolute;z-index:3;left:50%;top:8px;width:55px;height:30px;background:#9bdd62;border-radius:55px 5px 55px 5px;transform:rotate(-34deg);box-shadow:34px 6px #72bf5b}.place-card{margin:8px 0 19px;padding:14px 16px;text-align:left;display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #dceacb;border-radius:22px;box-shadow:0 5px 0 #e2efd4}.place-icon{font-size:27px;background:#f8ebc0;border-radius:14px;width:48px;height:48px;display:grid;place-items:center}.place-card strong,.place-card small{display:block}.place-card small{color:#6a816c;font-weight:700;margin-top:2px}.primary,.secondary,.warning{min-height:56px;padding:12px 18px;border-radius:19px;font-weight:900;font-size:17px;box-shadow:0 5px 0 #2e7048;transition:transform .16s,box-shadow .16s}.primary{background:var(--green);color:#fff}.secondary{background:#fff;border:2px solid #bcd6a7;box-shadow:0 5px 0 #b6d3a7}.warning{background:#ffbd5a;box-shadow:0 5px 0 #db8c32}.primary:active,.secondary:active,.warning:active{transform:translateY(4px);box-shadow:0 1px 0 transparent}.full{width:100%}.nav-row{display:flex;gap:10px;margin-top:18px}.nav-row button{flex:1;font-size:14px}.pill{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:99px;background:#e7f5d8;color:#357047;font-size:12px;font-weight:900}.section-title{display:flex;align-items:end;justify-content:space-between;margin:8px 0 12px}.section-title h2{font-size:25px;margin:0;letter-spacing:-.7px}.section-title small{color:#6f856f;font-weight:700}.choices{display:grid;gap:12px}.venue{width:100%;display:flex;gap:13px;align-items:center;text-align:left;padding:13px;background:#fffdf9;border:2px solid var(--line);border-radius:20px}.venue.selected{border-color:#4d9c61;background:#eff9e5;box-shadow:0 5px 0 #d2e8bf}.venue .emoji{font-size:28px;width:44px;text-align:center}.venue strong,.venue small{display:block}.venue small{margin-top:3px;color:#66856b;font-weight:700}.progress{height:13px;border-radius:99px;background:#e7eedf;overflow:hidden}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7ac75b,#f4cc55);transition:width .5s}.map{position:relative;min-height:470px;border-radius:30px;overflow:hidden;background:linear-gradient(#a7e5f5 0 41%,#7bbb59 41% 100%);border:4px solid #fff;box-shadow:var(--shadow)}.map:before{content:"";position:absolute;width:120%;height:58%;left:-10%;bottom:-23%;border-radius:50%;background:#559e4c;box-shadow:260px -10px #6eb95a}.map-title{position:absolute;z-index:3;left:20px;right:20px;top:18px;text-align:center;font-size:19px;font-weight:900}.base{position:absolute;z-index:2;left:50%;bottom:78px;transform:translateX(-50%);width:225px;height:145px}.hut{position:absolute;bottom:0;left:48px;width:138px;height:94px;background:#f6bb62;border:6px solid #704c34;border-radius:12px 12px 28px 28px;box-shadow:inset 0 -12px #e49a4b}.hut:before{content:"";position:absolute;width:160px;height:87px;background:#bc654a;left:-17px;top:-59px;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:12px}.hut:after{content:"";position:absolute;width:35px;height:45px;background:#754933;border-radius:18px 18px 0 0;left:48px;bottom:0}.tower{position:absolute;bottom:50px;right:3px;width:40px;height:105px;border:6px solid #704c34;background:#f4d47b}.tower:before{content:"⌂";font-size:69px;position:absolute;top:-82px;left:-21px;color:#9d543f}.core{position:absolute;z-index:5;width:49px;height:49px;border-radius:50%;display:grid;place-items:center;background:#fff5ba;border:4px solid #e7aa38;color:#b1792e;font-weight:900;box-shadow:0 4px 0 #bf7c31}.core.off{background:#d4e2cf;border-color:#9cb69d;color:#7a987a;box-shadow:none}.core.one{left:18px;bottom:147px}.core.two{right:17px;bottom:170px}.core.three{left:90px;bottom:234px}.map-foot{position:absolute;z-index:4;left:18px;right:18px;bottom:18px;background:#fffdf8e8;border-radius:18px;padding:12px 14px;font-weight:800;font-size:14px}.draw-head{text-align:center;padding:12px 0 8px}.draw-head h1{font-size:28px;margin:7px 0}.draw-head p{color:#607964;font-weight:700;margin:0}.task-grid{display:grid;gap:14px;margin-top:16px}.task-card{position:relative;min-height:190px;overflow:hidden;text-align:left;padding:18px 17px;border-radius:25px;background:var(--paper);border:3px solid #fff;box-shadow:0 8px 0 #d7e5cd,0 13px 20px #4e72421e}.task-card:before{content:"";position:absolute;width:105px;height:105px;border-radius:50%;right:-16px;top:-20px;background:var(--tint,#d8f0c2);opacity:.85}.task-card:nth-child(2){--tint:#f8e1a1}.task-card:nth-child(3){--tint:#d9cbf4}.task-card .card-icon{position:absolute;right:16px;top:15px;font-size:51px;z-index:1}.task-card h3{font-size:23px;margin:12px 0 6px;max-width:76%;line-height:1.1}.task-card p{color:#607563;font-weight:700;margin:0 0 14px;max-width:84%}.task-meta{display:flex;gap:7px;flex-wrap:wrap}.tag{padding:5px 9px;border-radius:99px;background:#edf5e9;color:#467c51;font-size:12px;font-weight:900}.detail-hero{position:relative;min-height:240px;margin:-4px -18px 12px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(150deg,#aee5f3,#e7f7bc)}.detail-hero .big-emoji{font-size:118px;filter:drop-shadow(0 9px 0 #73a45a55)}.detail-hero .round-label{position:absolute;top:18px;left:18px}.panel{background:#fffdf9;border:2px solid #e1edd6;border-radius:23px;padding:16px;margin:12px 0}.panel h2{font-size:27px;margin:3px 0 8px}.panel p{line-height:1.65;color:#526f58;font-weight:650}.safety{background:#fff3d2;color:#885d26;border-color:#f5d28e}.voice-row{display:flex;gap:10px}.voice-row button{flex:1}.form-options{display:grid;gap:10px}.option{display:flex;align-items:center;gap:11px;padding:12px;border:2px solid #dcebd6;border-radius:16px;background:#fff}.option:has(input:checked){border-color:#69b15d;background:#eff9e5}.option input{accent-color:#43884b;width:20px;height:20px}.upload{padding:22px 12px;border:2px dashed #9ecb9c;border-radius:18px;text-align:center;background:#f4fbea;color:#477a4c;font-weight:900}.upload input{display:block;width:100%;margin-top:10px}.recording{padding:14px;border-radius:17px;background:#f5eefc;color:#66508d;font-weight:800}.feedback{text-align:center;padding-top:22px}.core-big{width:130px;height:130px;margin:8px auto 18px;border-radius:50%;display:grid;place-items:center;font-size:61px;background:#fff0a9;border:7px solid #f0b240;box-shadow:0 9px 0 #d38c30}.chest{font-size:104px;line-height:1;margin:17px 0}.decorations{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.decor{padding:13px 6px;border:2px solid #d7e6c9;border-radius:17px;background:#fff;text-align:center;font-weight:900}.decor.selected{background:#e9f8da;border-color:#66a956}.decor span{display:block;font-size:35px;margin-bottom:6px}.backpack-tabs{display:flex;gap:8px;overflow:auto;margin-bottom:14px}.backpack-tabs button{white-space:nowrap;padding:9px 13px;border-radius:99px;background:#edf3e8;font-weight:900}.backpack-tabs button.active{background:#43884b;color:#fff}.empty{text-align:center;padding:30px 15px;color:#66856b;font-weight:700}.memory{position:relative;overflow:hidden;padding:24px 20px;min-height:520px;border-radius:28px;background:linear-gradient(135deg,#dff4c8,#fff7d3 48%,#bce6f2);border:8px solid #fff;box-shadow:var(--shadow)}.memory:before{content:"";position:absolute;inset:12px;border:2px dashed #69a85d;border-radius:20px}.memory>*{position:relative}.memory h1{margin:4px 0;text-align:center;font-size:29px}.memory .stamp{display:inline-block;padding:5px 9px;background:#f7bf58;border-radius:8px;transform:rotate(-4deg);font-weight:900}.memory .photo{height:180px;margin:14px 8px;border-radius:20px;overflow:hidden;background:linear-gradient(155deg,#9fdbed,#82bc5d);display:grid;place-items:center;font-size:86px;border:5px solid #fff;box-shadow:0 4px 0 #b7cdac}.memory img{width:100%;height:100%;object-fit:cover}.memory ul{padding-left:22px;line-height:1.6;font-weight:800}.modal-wrap{position:fixed;z-index:30;inset:0;display:grid;align-items:end;background:#1e3c2788;backdrop-filter:blur(3px)}.modal{max-width:520px;width:100%;max-height:92dvh;overflow:auto;margin:auto;background:#fffaf0;border-radius:30px 30px 0 0;padding:22px 18px calc(26px + env(safe-area-inset-bottom));box-shadow:0 -10px 35px #12331740}.modal h2{margin:0 0 7px;font-size:27px}.modal p{margin:0 0 16px;color:#607563;font-weight:700;line-height:1.5}.setting{margin:13px 0}.setting label{display:block;margin:0 0 7px;font-weight:900}.setting select,.setting input[type=text]{width:100%;padding:12px;border:2px solid #d3e4c9;border-radius:14px;background:#fff;font-weight:700}.check-row{display:flex;align-items:center;gap:9px;padding:8px 0;font-weight:750}.check-row input{width:20px;height:20px;accent-color:#3d8b59}.toast{position:fixed;z-index:50;bottom:20px;left:50%;transform:translateX(-50%);max-width:90%;padding:11px 15px;border-radius:16px;background:#263b2df3;color:#fff;font-weight:800;text-align:center;box-shadow:0 7px 25px #182b1d55}.mini-progress{display:flex;gap:5px;align-items:center;font-weight:900;font-size:13px}.mini-progress span{width:13px;height:13px;border-radius:50%;background:#d4e4d1}.mini-progress span.on{background:#f5bb3d}.hide{display:none!important}@media(min-width:700px){body{background:linear-gradient(135deg,#a7d9a1,#eaf5d2)}.phone{box-shadow:0 0 0 10px #fff8,0 25px 60px #29452655;min-height:96dvh;margin:2dvh auto;border-radius:34px}}

/* Visual rework: original character and venue art */
:root { --wood:#75452a; --wood-dark:#4b2b1b; --gold:#f7b431; --cream-panel:#fff4d8; }
.phone { --scene-art:url("./assets/art/scene-taopu.webp"); background: #dff4c8 !important; }
.phone:before { background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,248,219,.44)),var(--scene-art) !important; background-size:cover !important; background-position:center !important; opacity:1; }
.phone.scene-shanghai_zoo { --scene-art:url("./assets/art/scene-zoo.webp"); }
.phone.scene-expo_museum { --scene-art:url("./assets/art/scene-expo.webp"); }
.phone.scene-eye_center { --scene-art:url("./assets/art/scene-eye.webp"); }
.phone.scene-generic { --scene-art:url("./assets/art/scene-taopu.webp"); }
.appbar { position:relative; z-index:4; padding-top:10px; }
.brand { color:#5b361f; text-shadow:0 1px #fff7cf; }
.brand-mark { background:#fff8d7; box-shadow:0 3px 0 #d5a94e; }
.icon-btn { color:#6f4025; background:linear-gradient(#fff9e9,#f4d59a); border-color:#fff9df; box-shadow:0 4px 0 #c98a3f; }
.home-art { position:relative; z-index:1; min-height:390px; margin:0 -10px -5px; overflow:hidden; }
.home-art:after { content:""; position:absolute; inset:auto -80px -30px; height:180px; background:linear-gradient(transparent,rgba(252,246,211,.88)); z-index:-1; }
.wood-title { display:inline-flex; flex-direction:column; margin:18px 0 0 10px; color:#fff9df; text-align:center; font-weight:1000; line-height:.88; transform:rotate(-2deg); padding:18px 28px 16px; background:linear-gradient(145deg,#ac6a3e,#714122); border:5px solid #f8d67a; border-radius:25px 31px 22px 33px; box-shadow:inset 0 3px #eaa66e,0 6px 0 #4e2a1a,0 12px 17px #3045194f; text-shadow:0 3px 0 #775025,0 5px 1px #432014; }
.wood-title span { font-size:27px; letter-spacing:2px; }
.wood-title strong { font-size:39px; letter-spacing:1px; }
.home-art p { width:65%; margin:16px 0 0 18px; color:#69442c; font-size:15px; font-weight:900; line-height:1.4; text-shadow:0 1px #fffbe9; }
.robot-illustration { position:absolute; z-index:2; right:-32px; bottom:-25px; width:min(86%,370px); height:auto; filter:drop-shadow(0 12px 6px rgba(53,88,36,.32)); animation:robot-bob 3.2s ease-in-out infinite; }
@keyframes robot-bob { 50% { transform:translateY(-8px) rotate(1deg); } }
.place-card,.panel { border:3px solid #fff4c8; background:linear-gradient(140deg,rgba(255,252,237,.96),rgba(255,239,196,.96)); box-shadow:inset 0 2px rgba(255,255,255,.9),0 6px 0 #b87842,0 13px 22px #56442438; }
.place-card { position:relative; z-index:5; border-radius:22px; }
.place-icon { background:radial-gradient(circle at 30% 22%,#fff9c6,#f2bd4b); box-shadow:inset 0 2px #fff,0 3px #bd7437; }
.primary,.warning { border:3px solid #fff2a9; box-shadow:inset 0 3px rgba(255,255,255,.55),0 6px 0 #a84a23,0 13px 22px #59401f49; background:linear-gradient(#ffbf39,#f17425); color:#fffdf0; text-shadow:0 2px #9d4823; }
.secondary { border:3px solid #fff5d4; box-shadow:inset 0 2px #fff,0 5px 0 #8c9b59,0 10px 18px #44522c35; background:linear-gradient(#f3ffd8,#d9f0ac); color:#4d6531; }
.warning { background:linear-gradient(#b898f0,#7c64c6); box-shadow:inset 0 3px rgba(255,255,255,.55),0 6px 0 #55428c,0 13px 22px #41304c42; }
.map { background-image:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,244,207,.2)),var(--scene-art) !important; background-size:cover !important; background-position:center !important; border:5px solid #fff4c8; box-shadow:0 8px 0 #8a623e,0 15px 28px #30451959; }
.map:before { background:rgba(78,139,72,.18); box-shadow:none; height:35%; bottom:-18%; }
.map-title,.map-foot { border:2px solid #fff1b2; background:linear-gradient(135deg,#835030,#5f321e); color:#fff7d8; text-shadow:0 2px #452113; box-shadow:0 4px 0 #442314; }
.core { background:radial-gradient(circle at 35% 30%,#fff9cf,#ffd45a 55%,#e98329); border-color:#fff4bc; color:#bf5c28; box-shadow:0 4px 0 #a84d25; }
.core.off { background:#738b78; border-color:#c4d2bf; color:#52685c; }
.task-card { border:4px solid #fff2bd; background:linear-gradient(145deg,#fffdf4,#ffe5a8); box-shadow:inset 0 3px #fff,0 8px 0 #a8643b,0 15px 25px #614a2f42; }
.task-card:before { background:#a2d568; opacity:.6; }
.task-card:nth-child(2):before { background:#f2d172; }.task-card:nth-child(3):before { background:#b6a7eb; }
.task-card h3,.panel h2,.section-title h2 { color:#6c4026; text-shadow:0 1px #fff8e2; }
.tag,.pill { background:#e4f4b2; color:#4d6d30; border:1px solid #fff8d2; box-shadow:0 2px #a5be78; }
.detail-hero { min-height:255px; background-image:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,242,195,.28)),var(--scene-art); background-size:cover; background-position:center; border-bottom:4px solid #fff4cc; }
.detail-hero .big-emoji { display:grid; place-items:center; width:134px; height:134px; border-radius:50%; background:linear-gradient(#fff9d4,#ffe7a1); border:5px solid #fff7cd; box-shadow:0 6px 0 #b87a3e,0 14px 24px #5a472f4f; }
.wood-title + p { position:relative; z-index:2; }
.memory { background-image:linear-gradient(135deg,rgba(225,248,196,.90),rgba(255,247,211,.94),rgba(188,230,242,.86)),var(--scene-art); background-size:cover; border-color:#fff5ce; }
.decor { border:3px solid #fff5cb; box-shadow:0 4px #b57c48; background:linear-gradient(#fffdf3,#ffebb7); color:#71442a; }
@media (prefers-reduced-motion: reduce) { .robot-illustration { animation:none; } }
/* Base and task-art system */
.map .base { z-index:3; width:340px; height:350px; bottom:22px; background:url("./assets/art/base-forest.webp") center/contain no-repeat; filter:drop-shadow(0 11px 8px rgba(43,79,32,.34)); transition:filter .55s ease,transform .55s ease; }
.map .base .hut,.map .base .tower { display:none; }
.map .base:after { content:""; position:absolute; inset:22% 14% 9%; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(255,247,166,.86),rgba(102,224,255,.38) 28%,transparent 67%); filter:blur(8px); transition:opacity .55s ease; }
.map.stage-0 .base { filter:grayscale(.34) brightness(.80) saturate(.72) drop-shadow(0 10px 8px rgba(34,62,31,.38)); transform:translateY(5px); }
.map.stage-1 .base { filter:saturate(.94) brightness(.93) drop-shadow(0 11px 8px rgba(43,79,32,.34)); }
.map.stage-1 .base:after { opacity:.22; }
.map.stage-2 .base { filter:saturate(1.10) brightness(1.03) drop-shadow(0 11px 10px rgba(43,79,32,.34)); }
.map.stage-2 .base:after { opacity:.55; }
.map.stage-3 .base { filter:saturate(1.20) brightness(1.12) drop-shadow(0 12px 13px rgba(43,79,32,.38)); transform:translateY(-4px) scale(1.025); }
.map.stage-3 .base:after { opacity:.88; animation:base-glow 2.2s ease-in-out infinite; }
@keyframes base-glow { 50% { transform:scale(1.13); opacity:.6; } }
.map .core { z-index:7; }
.card-icon { width:96px !important; height:96px !important; right:9px !important; top:8px !important; display:block !important; border:0 !important; border-radius:0 !important; background-image:url("./assets/art/task-illustration-sheet.webp") !important; background-repeat:no-repeat !important; background-size:205% 205% !important; filter:drop-shadow(0 5px 4px rgba(50,80,34,.26)); }
.card-select { background-position:0 0 !important; }
.card-photo { background-position:100% 0 !important; }
.card-audio { background-position:0 100% !important; }
.card-route { background-position:100% 100% !important; }
.task-card .card-icon + .task-meta { max-width:68%; }
.detail-hero .big-emoji.card-select,.detail-hero .big-emoji.card-photo,.detail-hero .big-emoji.card-audio,.detail-hero .big-emoji.card-route { width:148px; height:148px; border-radius:30px; background-image:url("./assets/art/task-illustration-sheet.webp"); background-repeat:no-repeat; background-size:205% 205%; border:5px solid #fff4c7; box-shadow:0 7px 0 #ad7040,0 15px 24px rgba(62,67,31,.38); }
.detail-hero .card-select { background-position:0 0; }.detail-hero .card-photo { background-position:100% 0; }.detail-hero .card-audio { background-position:0 100%; }.detail-hero .card-route { background-position:100% 100%; }
@media (max-width:390px) { .map .base{width:302px;height:320px;bottom:28px}.card-icon{width:84px!important;height:84px!important}.task-card h3{font-size:21px}.task-card p{font-size:14px} }
@media (prefers-reduced-motion: reduce) { .map.stage-3 .base:after{animation:none} }
/* Home and map composition: keep the game world visually primary. */
.brand { appearance:none; -webkit-appearance:none; background:transparent; border:0; padding:0; text-align:left; }
.brand:focus-visible { outline:3px solid #ffe18a; outline-offset:4px; border-radius:12px; }
.section-title { position:relative; z-index:4; margin-bottom:10px; }
.section-title h2 { font-size:clamp(24px,6.5vw,29px); }
.map { min-height:clamp(430px,58dvh,500px); display:block; }
.map-title { left:26px; right:26px; top:15px; font-size:17px; padding:8px 12px; }
.map .base { left:50%; bottom:22px; transform:translateX(-50%); transform-origin:center bottom; }
.map.stage-0 .base { transform:translateX(-50%) translateY(5px); }
.map.stage-1 .base,.map.stage-2 .base { transform:translateX(-50%); }
.map.stage-3 .base { transform:translateX(-50%) translateY(-4px) scale(1.025); }
.map-foot { left:22px; right:22px; bottom:16px; min-height:48px; display:flex; align-items:center; justify-content:center; text-align:center; }
.map-next { position:relative; z-index:4; display:flex; align-items:center; gap:12px; min-height:78px; margin:14px 0; padding:12px 16px; border:3px solid #fff4c8; border-radius:22px; background:linear-gradient(140deg,rgba(255,252,237,.96),rgba(255,239,196,.96)); box-shadow:inset 0 2px rgba(255,255,255,.9),0 5px 0 #b87842,0 10px 18px #56442430; }
.map-next div { min-width:0; flex:1; }
.map-next b { color:#6c4026; font-size:17px; text-shadow:0 1px #fff8e2; }
.map-next p { margin:4px 0 0; color:#526f58; font-size:14px; font-weight:750; line-height:1.35; }
.map-next > span { display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:50%; background:#fff4bc; border:2px solid #fff9d6; color:#bd6427; font-size:24px; box-shadow:0 3px 0 #d58d38; }
@media (max-width:390px) { .map { min-height:448px; } .map-title { left:22px; right:22px; } .map .base { bottom:22px; } .map-next { min-height:72px; margin:12px 0; padding:10px 14px; } }
/* 2026-10 systematic visual system */
.art-sprite{display:inline-block;background-image:url("./assets/art/ui-adventure-sheet.webp");background-repeat:no-repeat;background-size:400% 300%;background-color:transparent}
.story-art{background-position:0 0}.side-firefly{background-position:33.333% 0}.side-paw{background-position:66.666% 0}.side-letter{background-position:100% 0}.side-prism{background-position:0 50%}.side-telescope{background-position:33.333% 50%}.chest-closed{background-position:66.666% 50%}.chest-open{background-position:100% 50%}.decor-house{background-position:0 100%}.decor-garden{background-position:33.333% 100%}.decor-flag{background-position:66.666% 100%}.memory-art{background-position:100% 100%}
.large-art{width:180px;height:180px;filter:drop-shadow(0 9px 8px rgba(65,75,34,.3))}.feature-art{display:block;width:180px;height:160px;margin:8px auto 12px;filter:drop-shadow(0 9px 8px rgba(65,75,34,.3))}
.place-icon.art-sprite{flex:0 0 48px;width:48px;height:48px;padding:0;border:0}
.icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-size:11px}.icon-btn small{font-size:11px;font-weight:900}.ui-icon{display:block;width:18px;height:14px;border:3px solid currentColor;border-radius:5px;position:relative}.ui-icon.settings{border-radius:50%}.ui-icon.settings:after{content:"";position:absolute;inset:3px;border:2px solid currentColor;border-radius:50%}.ui-icon.map-symbol:after{content:"";position:absolute;left:4px;top:-3px;height:14px;border-left:3px solid currentColor;box-shadow:5px 0 0 -1px currentColor}

.phone.scene-taopu,.phone.scene-generic{--base-art:url("./assets/art/base-forest.webp")}.phone.scene-shanghai_zoo{--base-art:url("./assets/art/base-zoo.webp")}.phone.scene-expo_museum{--base-art:url("./assets/art/base-expo.webp")}.phone.scene-eye_center{--base-art:url("./assets/art/base-eye.webp")}
.map .base{background-image:var(--base-art);background-position:center;background-size:contain;background-repeat:no-repeat;filter:grayscale(.55) brightness(.56) saturate(.58) drop-shadow(0 11px 8px rgba(43,79,32,.38));width:min(94%,360px);height:350px;bottom:24px;overflow:visible;transition:none}
.map .base:after{display:none}.map.stage-0 .base,.map.stage-1 .base,.map.stage-2 .base,.map.stage-3 .base{filter:grayscale(.55) brightness(.56) saturate(.58) drop-shadow(0 11px 8px rgba(43,79,32,.38));transform:translateX(-50%);animation:none}
.repair-piece{position:absolute;inset:0;background-image:var(--base-art);background-position:center;background-size:contain;background-repeat:no-repeat;opacity:0;filter:saturate(1.12) brightness(1.03);transition:opacity .55s ease,filter .55s ease}
.repair-one{clip-path:polygon(16% 0,90% 0,88% 59%,18% 61%)}.repair-two{clip-path:polygon(31% 45%,100% 35%,100% 100%,24% 100%)}.repair-three{clip-path:polygon(0 43%,52% 40%,58% 100%,0 100%)}
.map.stage-1 .repair-one,.map.stage-2 .repair-one,.map.stage-3 .repair-one,.map.stage-2 .repair-two,.map.stage-3 .repair-two,.map.stage-3 .repair-three{opacity:1}
.map.stage-1 .repair-one{filter:saturate(1.18) brightness(1.08) drop-shadow(0 0 10px rgba(255,231,111,.55))}.map.stage-2 .repair-two{filter:saturate(1.18) brightness(1.08) drop-shadow(0 0 10px rgba(102,224,255,.55))}.map.stage-3 .repair-three{filter:saturate(1.22) brightness(1.1) drop-shadow(0 0 12px rgba(255,225,98,.68))}
.energy-socket{position:absolute;z-index:8;width:21px;height:27px;transform:rotate(45deg);border-radius:7px 14px 7px 14px;background:linear-gradient(145deg,#53685e,#283f37);border:3px solid #b7c4a3;box-shadow:0 3px 0 #384b3c,inset 0 2px rgba(255,255,255,.25);transition:.5s}.energy-socket.active{background:linear-gradient(145deg,#fffbd0,#8df34d 42%,#29a95d);border-color:#fff5a8;box-shadow:0 3px 0 #a65f2f,0 0 15px #dfff75,inset 0 2px #fff}.energy-socket.one{left:48%;top:31%}.energy-socket.two{left:65%;top:69%}.energy-socket.three{left:22%;top:68%}
.leaf-crystal{display:inline-block;width:24px;height:30px;transform:rotate(45deg);border-radius:8px 16px 8px 16px;background:linear-gradient(145deg,#fffbd0,#8df34d 42%,#29a95d);border:3px solid #fff5a8;box-shadow:0 3px 0 #a65f2f,0 0 12px #dfff75}
.map-next>span.leaf-crystal{display:inline-block;width:29px;height:36px;flex:0 0 29px;border-radius:9px 18px 9px 18px;background:linear-gradient(145deg,#fffbd0,#8df34d 42%,#29a95d)}
.core-big{font-size:0}.core-big .leaf-crystal{width:54px;height:72px}
.seed-growth,.map-collectible{position:absolute;z-index:9;width:74px;height:74px;background-image:url("./assets/art/ui-adventure-sheet.webp");background-repeat:no-repeat;background-size:400% 300%;filter:drop-shadow(0 5px 4px rgba(37,67,25,.35))}.seed-growth{left:7px;bottom:68px;background-position:33.333% 100%;transform:scale(.72);transform-origin:bottom}.seed-growth.grown{transform:scale(1)}.map-collectible{right:5px;bottom:74px}.map-collectible.side-firefly{background-position:33.333% 0}.map-collectible.side-paw{background-position:66.666% 0}.map-collectible.side-letter{background-position:100% 0}.map-collectible.side-prism{background-position:0 50%}.map-collectible.side-telescope{background-position:33.333% 50%}
.map-title{z-index:12}.map-foot{z-index:12}
.mini-progress span{width:15px;height:9px;border-radius:8px 14px 8px 14px;transform:rotate(34deg);background:#6d8376;border:1px solid #c8d1ba}.mini-progress span.on{background:linear-gradient(#eaff89,#4fbe59);border-color:#fff7a5;box-shadow:0 0 7px #ddff73}.mini-progress b{margin-left:3px;color:#4d6531}

.feedback p{color:#5d785f;font-weight:700;line-height:1.6}.story-hero,.side-hero{background-image:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,242,195,.34)),var(--scene-art)}
.decorations{align-items:stretch}.decor{min-width:0;padding:8px 4px}.decor .art-sprite{display:block;width:88px;max-width:100%;height:88px;margin:0 auto 5px;font-size:0}.decor.selected{outline:4px solid #ffd45d;transform:translateY(-3px)}
.memory .photo{font-size:0}.memory .photo>.art-sprite{display:block;width:100%;height:100%}.memory-date{text-align:center;margin:0;font-weight:800}.memory-badges{display:flex;gap:7px;flex-wrap:wrap}.memory-badges .pill{margin:0}
.text-action{display:block;width:100%;margin:12px 0 0;padding:10px;background:transparent;color:#654731;text-decoration:underline;font-size:14px;font-weight:850;box-shadow:none}.danger-soft{color:#8b442f}.alternate-submit{padding:18px;border:2px solid #b7d09d;border-radius:18px;background:#eff8dc;color:#4c6b3c}.alternate-submit p{margin-bottom:0}.fallback{margin-top:12px;padding:12px;border-radius:16px;background:rgba(255,251,231,.9)}.recording audio{width:100%;margin-top:12px}.empty-state{margin-top:30px;text-align:center}
.task-card h3{max-width:calc(100% - 104px);min-height:50px}.task-card p{max-width:100%}.task-card>b{color:#39824f}.task-card .card-icon+.task-meta{max-width:calc(100% - 96px)}
.record-list{display:grid;gap:12px}.record-list article{display:grid;gap:8px;padding:12px;border:2px solid #ebd59e;border-radius:17px;background:rgba(255,255,255,.75)}.record-photo{width:100%;max-height:210px;object-fit:cover;border-radius:13px}.record-list audio{width:100%}.record-kind{display:inline-flex;width:max-content;padding:5px 9px;border-radius:99px;background:#e4f4b2;color:#4d6d30;font-weight:850}
.history-row{display:flex;width:100%;flex-direction:column;gap:4px;margin:0 0 10px;padding:14px;text-align:left;border:3px solid #fff4c8;border-radius:18px;background:linear-gradient(#fffdf3,#ffebb7);box-shadow:0 4px #b57c48}.history-row span{color:#68785c;font-size:13px;font-weight:750}
@media(max-width:390px){.map .base{width:100%;height:320px}.large-art{width:160px;height:160px}.feature-art{width:160px;height:145px}.task-card h3{max-width:calc(100% - 90px);font-size:20px}.task-card .card-icon+.task-meta{max-width:calc(100% - 82px)}.decor .art-sprite{height:78px}}
@media(max-width:330px){.task-card h3{max-width:calc(100% - 82px);font-size:19px}.card-icon{width:76px!important;height:76px!important}.decorations{grid-template-columns:1fr}.decor{display:flex;align-items:center;gap:9px}.decor .art-sprite{width:72px;height:72px;margin:0}}
@media(prefers-reduced-motion:reduce){.repair-piece,.energy-socket{transition:none}}
/* Keep inactive art dark without filtering the activated child layers. */
.map .base{background-image:linear-gradient(rgba(27,46,38,.58),rgba(27,46,38,.58)),var(--base-art);background-blend-mode:saturation,multiply;filter:drop-shadow(0 11px 8px rgba(43,79,32,.38))}
.map.stage-0 .base,.map.stage-1 .base,.map.stage-2 .base,.map.stage-3 .base{filter:drop-shadow(0 11px 8px rgba(43,79,32,.38))}
.repair-piece{background-blend-mode:normal}

/* Five-task adventure upgrade */
.map.stage-0 .base,.map.stage-1 .base,.map.stage-2 .base,.map.stage-3 .base,.map.stage-4 .base,.map.stage-5 .base{filter:drop-shadow(0 11px 8px rgba(43,79,32,.38));transform:translateX(-50%)}
.repair-one{clip-path:polygon(15% 0,85% 0,80% 38%,20% 42%)}
.repair-two{clip-path:polygon(0 28%,52% 25%,52% 72%,0 78%)}
.repair-three{clip-path:polygon(48% 25%,100% 28%,100% 78%,48% 72%)}
.repair-four{clip-path:polygon(25% 55%,75% 55%,84% 100%,16% 100%)}
.repair-five{clip-path:polygon(0 72%,30% 62%,48% 78%,70% 62%,100% 72%,100% 100%,0 100%)}
.map.stage-1 .repair-one,.map.stage-2 .repair-one,.map.stage-3 .repair-one,.map.stage-4 .repair-one,.map.stage-5 .repair-one,.map.stage-2 .repair-two,.map.stage-3 .repair-two,.map.stage-4 .repair-two,.map.stage-5 .repair-two,.map.stage-3 .repair-three,.map.stage-4 .repair-three,.map.stage-5 .repair-three,.map.stage-4 .repair-four,.map.stage-5 .repair-four,.map.stage-5 .repair-five{opacity:1}
.map.stage-1 .repair-one{filter:saturate(1.18) brightness(1.08) drop-shadow(0 0 10px rgba(255,231,111,.55))}
.map.stage-2 .repair-two{filter:saturate(1.18) brightness(1.08) drop-shadow(0 0 10px rgba(102,224,255,.55))}
.map.stage-3 .repair-three{filter:saturate(1.2) brightness(1.09) drop-shadow(0 0 10px rgba(255,225,98,.58))}
.map.stage-4 .repair-four{filter:saturate(1.22) brightness(1.1) drop-shadow(0 0 12px rgba(126,245,152,.62))}
.map.stage-5 .repair-five{filter:saturate(1.24) brightness(1.12) drop-shadow(0 0 13px rgba(255,225,98,.72))}
.energy-socket.one{left:48%;top:25%}.energy-socket.two{left:25%;top:50%}.energy-socket.three{left:71%;top:50%}.energy-socket.four{left:50%;top:70%}.energy-socket.five{left:17%;top:72%}
.map.stage-5 .base{transform:translateX(-50%) translateY(-4px) scale(1.025)}


/* Deep exploration flow */
.task-objective>p{line-height:1.6}.task-journey{display:grid;gap:10px;margin:18px 0 4px;padding:0;list-style:none}.task-journey li{display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:start;padding:12px;border:2px solid rgba(153,188,105,.55);border-radius:17px;background:linear-gradient(135deg,rgba(255,255,242,.92),rgba(229,247,198,.88))}.task-journey li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:linear-gradient(#fff4a4,#72cb63);border:3px solid #fff8cc;color:#355d37;font-weight:950;box-shadow:0 3px #7e9b52}.task-journey b{color:#426344}.task-journey p{margin:4px 0 0;line-height:1.5;color:#536b52}.explore-screen{min-height:100dvh}.explore-chip{display:grid;gap:3px;margin:5px 0 12px;padding:10px 14px;border-radius:17px;background:rgba(255,250,218,.92);border:3px solid #fff0ae;box-shadow:0 5px #a66e3b}.explore-chip span,.explore-chip small{font-size:12px;color:#6b785a;font-weight:800}.explore-chip b{font-size:20px;color:#5c3e29}.explore-board{margin:12px 0 18px;padding:15px;border:3px solid rgba(255,244,191,.9);border-radius:24px;background:linear-gradient(rgba(249,255,232,.94),rgba(231,247,202,.92));box-shadow:0 8px 18px rgba(54,89,40,.16)}.explore-goal{margin:0 0 12px;color:#435f3d;font-weight:850;line-height:1.6}.explore-board .task-journey li{padding:10px}.hint-stack{display:grid;gap:8px;margin-top:13px}.hint-stack p{margin:0;padding:10px 12px;border-radius:14px;background:#fff4c7;color:#654b31;line-height:1.5}.discovery-questions{display:grid;gap:14px}.discovery-questions fieldset{margin:0;padding:13px;border:2px solid #c8dda8;border-radius:18px;background:rgba(246,255,226,.88)}.discovery-questions legend{padding:0 7px;color:#486541;font-weight:900}.record-summary{margin:5px 0 0;color:#4f6a4a;line-height:1.45}.setting small{display:block;margin-top:5px;color:#778268;font-weight:650}@media(max-width:350px){.task-journey li{grid-template-columns:35px 1fr;padding:9px}.task-journey li>span{width:32px;height:32px}.explore-board{padding:11px}}


/* Child-first, one-step-at-a-time exploration */
.step-focus{position:relative;display:grid;grid-template-columns:54px 1fr;column-gap:12px;align-items:center;margin:14px 0;padding:17px 15px 15px;border:3px solid #fff0a7;border-radius:22px;background:linear-gradient(145deg,#fffdf1,#e9f8c9);box-shadow:inset 0 3px rgba(255,255,255,.9),0 6px 0 #91a95c,0 12px 18px rgba(61,89,41,.16)}
.step-counter{grid-column:1/-1;width:max-content;margin-bottom:7px;padding:5px 10px;border-radius:99px;background:#5c8d50;color:#fff;font-size:12px;font-weight:900;letter-spacing:.03em}
.step-number{grid-row:2/4;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(#fff4a4,#72cb63);border:4px solid #fff8cc;color:#355d37;font-size:25px;font-weight:950;box-shadow:0 4px #7e9b52}
.step-focus h2{margin:0;color:#5d3f27;font-size:25px;line-height:1.15}
.step-focus p{margin:6px 0 0;color:#435f3d;font-size:17px;font-weight:760;line-height:1.65}
.step-focus .step-listen{grid-column:1/-1;margin-top:14px;padding:11px 14px;font-size:14px}
.all-steps{margin:13px 0 2px;border:2px dashed #a9c184;border-radius:16px;background:rgba(255,255,245,.6)}
.all-steps summary{padding:12px 14px;color:#4e6e43;font-weight:900;cursor:pointer}
.all-steps .task-journey{margin:0;padding:0 10px 10px}
.step-nav{display:flex;gap:10px;align-items:stretch;margin:0 0 10px}
.step-nav button{flex:1;min-width:0}
.step-nav .primary:only-child{width:100%;flex-basis:100%}
@media(max-width:350px){.step-focus{grid-template-columns:44px 1fr;padding:14px 11px}.step-number{width:42px;height:42px;font-size:21px}.step-focus h2{font-size:22px}.step-focus p{font-size:16px}.step-nav{flex-direction:column}.step-nav button{width:100%}}


/* Guided-play redesign: one game, low screen time, optional memories. */
.settings-primary{margin-bottom:12px}.settings-more{margin:0 0 18px;border:2px solid #d5dfb2;border-radius:18px;background:rgba(250,255,235,.75)}.settings-more>summary{padding:14px 16px;color:#526946;font-weight:900;cursor:pointer}.settings-more>.panel{margin:0;border:0;border-top:2px solid #d5dfb2;border-radius:0 0 16px 16px;box-shadow:none}
.play-task-card .task-meta{min-height:27px}.play-task-card p{font-size:15px;line-height:1.45}.play-task-card b{display:inline-block;margin-top:7px}
.play-brief{margin:14px 0 18px;padding:18px;border:3px solid #fff1b0;border-radius:25px;background:linear-gradient(145deg,rgba(255,254,241,.97),rgba(231,247,202,.95));box-shadow:0 7px 0 #a66e3b,0 14px 24px rgba(65,71,36,.18)}.play-kind{display:inline-flex;padding:5px 11px;border-radius:99px;background:#5f9255;color:#fff;font-weight:900}.play-brief h1{margin:12px 0 8px;color:#653f27;font-size:28px}.play-line{margin:0;color:#3f5e3d;font-size:20px;font-weight:850;line-height:1.62}.play-brief details,.play-now details{margin-top:12px;border:2px dashed #a8be82;border-radius:15px;background:rgba(255,255,246,.68)}.play-brief summary,.play-now summary{padding:11px 13px;color:#4c6b42;font-weight:900;cursor:pointer}.play-brief details p,.play-now details p{margin:0;padding:0 13px 13px;color:#546a50;line-height:1.55}
.play-now{margin:16px 0 20px;padding:19px;border:3px solid #fff0a7;border-radius:25px;background:linear-gradient(145deg,#fffdf1,#e9f8c9);box-shadow:0 7px 0 #91a95c,0 14px 22px rgba(61,89,41,.16)}.phone-away{display:inline-block;padding:6px 10px;border-radius:99px;background:#5d8952;color:#fff;font-size:12px;font-weight:900}.play-now h1{margin:15px 0 11px;color:#5d3f27;font-size:26px;line-height:1.48}.play-now>p{color:#4f6950;font-weight:760;line-height:1.55}.play-done{margin-top:4px}
.finish-promise{margin:10px 0 15px;padding:14px 16px;border-radius:18px;background:#fff2bf;border:3px solid #fff8d7;color:#65452e;box-shadow:0 4px 0 #c08a45}.finish-promise p{margin:3px 0 0;font-weight:850}.play-confirm{padding:16px;border:3px solid #c8dda8;border-radius:21px;background:rgba(246,255,226,.94)}.play-confirm>p{margin:0 0 12px;color:#587052;font-weight:760}.big-check{min-height:58px;padding:12px;border-radius:15px;background:#fffdf1;color:#496542;font-size:17px;font-weight:900}.big-check input{width:25px;height:25px}.optional-memory{margin-top:14px;border:2px solid #d6c99b;border-radius:17px;background:rgba(255,252,236,.85)}.optional-memory>summary{padding:13px 15px;color:#6a5a3d;font-weight:900;cursor:pointer}.optional-memory>div{margin:0 12px 12px}.no-memory-needed{text-align:center;color:#77806b;font-size:14px}.repair-feedback h1{max-width:330px;margin-left:auto;margin-right:auto}
@media(max-width:350px){.play-brief{padding:14px}.play-brief h1{font-size:25px}.play-line{font-size:18px}.play-now{padding:15px}.play-now h1{font-size:23px}.big-check{font-size:16px}}

.repair-feedback{margin:12px 0 20px;padding:18px 15px 22px;border:3px solid rgba(255,244,190,.94);border-radius:27px;background:linear-gradient(145deg,rgba(255,254,239,.94),rgba(234,248,207,.92));box-shadow:0 7px 0 #a66e3b,0 15px 25px rgba(62,69,34,.18)}.repair-feedback h1{color:#5d3f27;text-shadow:0 1px #fff8e5}.repair-feedback p{margin:8px auto 0;max-width:350px;color:#496148;font-weight:800}