:root{--paper:#fdf6e3;--paper-2:#f6ead0;--ink:#2a2320;--ink-soft:#6b5d52;--yellow:#ffd93b;--pink:#f4a6c0;--red:#e0473c;--green:#5b8a3a;--purple:#7a5ba8;--sky:#9fd3ee;--good:#e3f3d4;--bad:#fde2dc;--radius:16px;--font-fun:"ZCOOL KuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif;--font:"PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Source Han Sans SC", sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font:18px/1.6 var(--font);-webkit-tap-highlight-color:transparent;overflow:hidden}#app{height:100dvh}h1,h2,.stage-title,.scene-chapter,.cc-title,.say-name,.bubble-name,.btn{font-family:var(--font-fun)}.scene{width:100%;height:100dvh;animation:.35s fade}@keyframes fade{0%{opacity:0}to{opacity:1}}.btn{border:3px solid var(--ink);background:var(--yellow);color:var(--ink);cursor:pointer;box-shadow:0 4px 0 var(--ink);border-radius:14px;padding:10px 22px;font-size:20px;transition:transform 80ms,box-shadow 80ms}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.btn:disabled{opacity:.45;cursor:default}.btn.secondary{background:var(--pink)}.btn.ghost{box-shadow:0 3px 0 var(--ink);background:#fff;padding:6px 14px;font-size:17px}.btn.big{padding:12px 30px;font-size:24px}.btn.choice{font-family:var(--font);text-align:left;background:#fff;width:100%;font-size:17px}.btn:focus-visible,.step-btn:focus-visible,.pad-key:focus-visible{outline:3px solid var(--sky);outline-offset:2px}.title{background:var(--yellow);grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;display:grid}.title-art{object-fit:cover;object-position:center 30%;border-right:4px solid var(--ink);width:100%;height:100dvh}.title-card{text-align:center;padding:24px}.title-card h1{letter-spacing:6px;text-shadow:4px 4px #fff;margin:8px 0 0;font-size:clamp(48px,8vw,96px)}.title-sub{font:26px var(--font-fun);margin:0 0 28px}.title-credit{color:var(--ink-soft);margin-top:28px;font-size:15px}.title-nums{justify-content:center;gap:4px;display:flex}.title-nums img{mix-blend-mode:multiply;height:96px}.map{background:var(--paper);padding:28px clamp(16px,4vw,48px);overflow:auto}.map-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.map-head h2{margin:0;font-size:34px}.map-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:24px;display:grid}.chapter-card{border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 6px 0 var(--ink);cursor:pointer;text-align:center;font:inherit;color:inherit;background:#fff;padding:16px;transition:transform .12s;position:relative}.chapter-card:hover:not(:disabled){transform:translateY(-4px)rotate(-1deg)}.chapter-card img{mix-blend-mode:multiply;height:140px}.chapter-card.locked{filter:grayscale();opacity:.55;cursor:default}.cc-no{color:var(--ink-soft);font-size:15px}.cc-title{font-size:28px}.cc-math{color:var(--ink-soft);font-size:15px}.cc-done{background:var(--green);color:#fff;border-radius:99px;padding:0 10px;font-size:14px;position:absolute;top:10px;right:12px}.dialogue{cursor:pointer;background:var(--paper-2);grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);display:grid}.scene-art-box{border-right:4px solid var(--ink);background:#fff;justify-content:center;align-items:center;min-height:0;padding:20px;display:flex}.scene-art-box.empty{background:var(--yellow)}.scene-art{object-fit:contain;opacity:0;max-width:100%;max-height:calc(100dvh - 40px);transition:opacity .4s}.scene-art.in{opacity:1}.say-col{flex-direction:column;justify-content:flex-end;gap:16px;min-height:0;padding:28px;display:flex}.scene-chapter{background:var(--yellow);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:12px;align-self:flex-start;margin-bottom:auto;padding:4px 16px;font-size:30px}.say-box{border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);background:#fff;border-radius:22px;gap:18px;min-height:190px;padding:22px 24px 34px;display:flex;position:relative}.say-box.narr{background:#fffdf6;font-style:normal}.say-face{flex:none}.say-body{min-width:0}.say-name{color:var(--c,var(--ink));font-size:24px}.say-text{white-space:pre-wrap;font-size:24px;line-height:1.7}.say-more{color:var(--ink-soft);opacity:0;font-size:15px;position:absolute;bottom:8px;right:20px}.say-more.on{opacity:1;animation:1s infinite nudge}@keyframes nudge{50%{transform:translate(4px)}}.portrait{border:4px solid var(--c,var(--ink));object-fit:cover;font:28px var(--font-fun);color:var(--c);background:#fff;border-radius:50%;place-items:center;display:grid}.portrait.md{width:110px;height:110px}.portrait.sm{border-width:3px;width:64px;height:64px;font-size:22px}.portrait.blank{background:var(--paper)}.stage{background:var(--paper);flex-direction:column;display:flex}.stage-bar{border-bottom:4px solid var(--ink);background:var(--yellow);align-items:center;gap:16px;padding:10px 18px;display:flex}.stage-title{white-space:nowrap;font-size:26px}.stage-goal{flex:1;font-size:18px;line-height:1.45}.hint-btn{white-space:nowrap}.stage-body{flex:1;grid-template-columns:minmax(0,1fr) 360px;min-height:0;display:grid}.stage-main{background:#fffdf6;min-width:0;min-height:0;position:relative}.stage-col{border-left:4px solid var(--ink);background:var(--paper-2);flex-direction:column;min-height:0;display:flex}.stage-side{flex-direction:column;flex:1;gap:14px;padding:16px;display:flex;overflow:auto}.board{width:100%;height:100%;display:block}.bubble{border-top:4px solid var(--ink);background:#fff;align-items:flex-start;gap:12px;min-height:110px;padding:14px 16px;display:flex}.bubble.good{background:var(--good)}.bubble.bad{background:var(--bad)}.bubble.pop{animation:.3s pop}@keyframes pop{0%{transform:scale(.97)}60%{transform:scale(1.02)}}.bubble-face{flex:none}.bubble-name{color:var(--ink-soft);font-size:17px}.bubble-text{font-size:19px;line-height:1.5}.step-label{font:18px var(--font-fun);color:var(--ink-soft)}.step-row{align-items:center;gap:8px;display:flex}.step-btn,.pad-key{width:56px;height:56px;font:30px var(--font-fun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink);background:#fff;border-radius:14px}.step-btn:active:not(:disabled),.pad-key:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.step-btn:disabled{opacity:.35;cursor:default}.step-input{width:96px;height:56px;font:30px var(--font-fun);text-align:center;border:3px solid var(--ink);background:#fff;border-radius:14px}.step-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.step-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.step-input{appearance:textfield}.step-unit{font-size:20px}.note{color:var(--ink-soft);font-size:17px}.range{width:100%;accent-color:var(--purple);height:32px}.chip-box{flex-direction:column;gap:6px;display:flex}.chips{flex-wrap:wrap;gap:8px;display:flex}.chip{color:#0000;min-width:46px;height:46px;font:22px var(--font-fun);border:3px dashed #c9b9a6;border-radius:12px;place-items:center;display:grid}.chip.on{border:3px solid var(--ink);background:var(--yellow);color:var(--ink)}.chip.pop{animation:.4s pop}.found-list{flex-direction:column;gap:4px;font-size:17px;display:flex}.keypad{flex-direction:column;gap:10px;display:flex}.pad-show{font:40px var(--font-fun);text-align:right;border:3px solid var(--ink);background:#fff;border-radius:14px;padding:2px 14px}.pad-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.pad-key{width:100%;height:48px;font-size:26px}.pad-show{font-size:34px}.quiz-card{border:3px solid var(--ink);border-radius:var(--radius);text-align:center;background:#fff;padding:16px}.quiz-num{font:34px var(--font-fun);margin-bottom:12px}.quiz-btns{justify-content:center;gap:12px;display:flex}.routes{flex-direction:column;gap:10px;display:flex}.route-row{align-items:center;gap:8px;display:flex}.route-name{width:84px;font:19px var(--font-fun)}.route-count{text-align:center;width:54px;font:22px var(--font-fun)}.routes .step-btn{width:46px;height:46px;font-size:24px}.log{flex-direction:column;gap:4px;font-size:17px;display:flex}.log-row{background:#fff;border:2px solid #e4d6c2;border-radius:8px;padding:2px 10px}.log-row.eat{background:var(--bad)}.log-row.hurt{background:var(--good)}.bars{flex-direction:column;align-items:center;gap:16px;height:100%;padding:24px;display:flex}.sum-badge{font:30px var(--font-fun);background:var(--yellow);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:99px;padding:2px 26px}.sum-badge.flash{animation:.35s pop}.bar-row{flex:1;justify-content:center;align-items:stretch;gap:clamp(30px,8vw,120px);width:100%;min-height:0;display:flex}.bar{flex-direction:column;align-items:center;width:140px;display:flex}.bar-num{font:40px var(--font-fun)}.bar-track{border-bottom:4px solid var(--ink);flex:1;width:100%;position:relative}.bar-fill{background:var(--c);border:3px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;transition:height .35s;position:absolute;bottom:0;left:20%;right:20%}.bar-ghost{border:3px dashed var(--red);border-bottom:0;border-radius:10px 10px 0 0;transition:height .35s;position:absolute;bottom:0;left:8%;right:8%}.bar-ghost:after{content:attr(data-v);white-space:nowrap;color:var(--red);font-size:16px;position:absolute;top:-28px;left:50%;transform:translate(-50%)}.bar-label{font:22px var(--font-fun);margin-top:6px}.strip-wrap{flex-direction:column;justify-content:center;align-items:center;gap:28px;height:100%;padding:24px;display:flex}.strip{border:4px solid var(--ink);border-radius:14px;width:min(92%,760px);height:90px;display:flex;overflow:hidden}.seg{font:28px var(--font-fun);color:#fff;border-right:3px solid var(--ink);flex:1;place-items:center;display:grid}.seg:last-child{border-right:0}.seg.seven{background:var(--green)}.seg.eight{background:var(--purple)}.strip-result{text-align:center;font-size:22px}@media (orientation:portrait),(width<=600px){body{overflow:auto}.title{grid-template-rows:40dvh auto;grid-template-columns:1fr}.title-art{border-right:0;border-bottom:4px solid var(--ink);height:40dvh}.dialogue{grid-template-rows:minmax(0,54dvh) minmax(0,1fr);grid-template-columns:1fr}.scene-art-box{border-right:0;border-bottom:4px solid var(--ink);padding:10px}.scene-art{max-height:calc(54dvh - 20px)}.say-col{padding:16px}.say-box{min-height:150px;padding:16px 16px 30px}.say-text,.say-name{font-size:20px}.portrait.md{width:72px;height:72px}.scene-chapter{font-size:22px}.stage{height:auto;min-height:100dvh}.stage-bar{flex-wrap:wrap;gap:6px 10px}.stage-goal{flex-basis:100%;order:3;font-size:16px}.stage-body{grid-template-rows:50dvh auto;grid-template-columns:1fr}.stage-col{border-left:0;border-top:4px solid var(--ink)}.stage-side{overflow:visible}.bubble{z-index:5;position:sticky;bottom:0}}@media (orientation:portrait) and (width<=600px){body{font-size:16px}.stage-bar{padding:8px 12px}.stage-title{font-size:20px}.hint-btn{padding:4px 10px;font-size:14px}.stage-goal{font-size:15px}.stage-body{grid-template-rows:46dvh auto}.stage-side{gap:10px;padding:12px}.bubble{gap:10px;min-height:0;padding:10px 12px}.bubble-text{font-size:16px}.portrait.sm{width:44px;height:44px}.dialogue{grid-template-rows:minmax(0,48dvh) minmax(0,1fr)}.scene-art{max-height:calc(48dvh - 20px)}.say-box{gap:12px;min-height:120px}.say-text,.say-name{font-size:18px}.portrait.md{width:56px;height:56px}.scene-chapter{font-size:19px}.shelf{padding:20px 16px}.book-card img{height:180px}.map{padding:18px 16px}.map-head h2{font-size:22px}.map-grid{grid-template-columns:1fr 1fr;gap:14px}.chapter-card{padding:10px}.chapter-card img{height:86px}.cc-title{font-size:21px}.pad-key{height:46px}.eq-row{padding:10px;font-size:24px}.eq-slot{min-width:60px;height:50px;font-size:22px}.eq-token{min-width:54px;height:50px;font-size:22px}.derivation-box{padding:10px 14px}.step{font-size:17px}.step.eq{font-size:22px}.q{font-size:18px}.bar{width:110px}.bar-num{font-size:32px}.sum-badge{font-size:24px}.score-card{gap:10px}}@media (orientation:landscape) and (height<=520px){.stage-bar{gap:10px;padding:4px 12px}.stage-title{font-size:18px}.stage-goal{font-size:14px;line-height:1.3}.hint-btn{padding:3px 10px;font-size:13px}.stage-body{grid-template-columns:minmax(0,1fr) 300px}.stage-side{gap:8px;padding:10px}.bubble{gap:8px;min-height:0;padding:8px 10px}.bubble-text{font-size:15px}.bubble-name{font-size:14px}.portrait.sm{width:40px;height:40px}.step-btn{width:44px;height:44px;font-size:24px}.step-input{width:80px;height:44px;font-size:24px}.pad-key{height:36px;font-size:20px}.pad-show{font-size:24px}.keypad,.pad-grid{gap:6px}.btn{padding:6px 16px;font-size:17px}.btn.big{padding:8px 20px;font-size:19px}.q{font-size:16px}.eq-row{padding:8px;font-size:22px}.eq-slot,.eq-token{height:44px;font-size:20px}.step{font-size:16px}.step.eq{font-size:20px}.derivation-box{padding:8px 14px}.dialogue{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.scene-art-box{padding:8px}.scene-art{max-height:calc(100dvh - 16px)}.say-col{gap:8px;padding:12px}.say-box{gap:12px;min-height:0;padding:12px 14px 26px}.say-text,.say-name{font-size:17px}.portrait.md{width:56px;height:56px}.scene-chapter{padding:2px 12px;font-size:18px}.title-card h1{font-size:48px}.shelf{padding:16px 24px}.shelf-title{margin-bottom:12px;font-size:28px}.book-card img{height:120px}.map{padding:14px 24px}.chapter-card img{height:70px}.bars{gap:8px;padding:10px}.bar-num{font-size:26px}}button,.eq-slot,.road-map .place{touch-action:manipulation}.scene{-webkit-user-select:none;user-select:none}.step-input{-webkit-user-select:text;user-select:text}.shelf{background:var(--yellow);padding:32px clamp(16px,4vw,56px);overflow:auto}.shelf-title{text-shadow:3px 3px #fff;margin:0 0 24px;font-size:clamp(32px,5vw,54px)}.shelf-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;max-width:980px;display:grid}.book-card{border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink);cursor:pointer;font:inherit;color:inherit;text-align:center;background:#fff;border-radius:20px;padding:18px;transition:transform .12s}.book-card:hover{transform:translateY(-5px)rotate(-1deg)}.book-card img{object-fit:contain;width:100%;height:260px}.book-title{font:34px var(--font-fun);margin-top:8px}.book-sub{font-size:18px}.book-credit{color:var(--ink-soft);margin-top:6px;font-size:14px}.score-card{border:3px solid var(--ink);border-radius:var(--radius);box-shadow:0 4px 0 var(--ink);background:#fff;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px;padding:12px 18px;display:flex}.score-rank{font:30px var(--font-fun);background:var(--red);color:#fff;border-radius:12px;padding:2px 16px}.book-xtz{background:#f3ece0}.case-board{grid-template-rows:minmax(0,42%) minmax(0,1fr);height:100%;display:grid}.case-art-box{border-bottom:3px dashed #d6c6b0;justify-content:center;align-items:center;min-height:0;padding:10px;display:flex}.case-art{object-fit:contain;max-width:100%;max-height:100%}.derivation-box{min-height:0;padding:14px 22px;overflow:auto}.derivation{flex-direction:column;gap:6px;margin:6px 0 0;padding-left:28px;display:flex}.step{font-size:20px;line-height:1.6;animation:.4s fade}.step.eq{font:26px var(--font-fun);color:var(--purple)}.step.ans{color:var(--green);font-weight:600}.step.wrong-eq{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}.math{white-space:normal}.frac{vertical-align:middle;text-align:center;flex-direction:column;margin:0 .12em;font-size:.82em;line-height:1.05;display:inline-flex}.frac>span:first-child{border-bottom:2px solid;padding:0 .15em}.q{font-size:20px;line-height:1.55}.choices{flex-direction:column;gap:10px;display:flex}.btn.choice.wrong{text-decoration:line-through}.btn.choice{font-size:19px}.btn.choice .frac{font-size:1em}.suspect{border:3px solid var(--ink);background:#fff;border-radius:14px;padding:12px 14px;font-size:18px;line-height:1.6}.eq-row{font:28px var(--font-fun);border:3px solid var(--ink);background:#fff;border-radius:14px;flex-wrap:wrap;align-items:center;gap:6px;padding:12px;display:flex}.eq-text{white-space:pre}.eq-slot{border:3px dashed var(--ink-soft);background:var(--paper);min-width:74px;height:56px;font:26px var(--font-fun);color:var(--ink);cursor:pointer;border-radius:12px;padding:0 8px}.eq-slot.filled{background:var(--yellow);border-style:solid}.eq-slot.target:not(.filled){border-color:var(--purple);background:#efe6ff;animation:1s ease-in-out infinite glow}@keyframes glow{50%{box-shadow:0 0 0 5px #7a5ba859}}.eq-tokens{flex-wrap:wrap;gap:10px;display:flex}.eq-token{border:3px solid var(--ink);min-width:64px;height:56px;box-shadow:0 3px 0 var(--ink);font:26px var(--font-fun);color:var(--ink);cursor:pointer;background:#fff;border-radius:12px;padding:0 12px}.eq-token.picked{background:var(--purple);color:#fff;transform:translateY(-3px)}.eq-token:disabled{opacity:.4;text-decoration:line-through}.eq-row.pick .eq-token{font-size:24px}.seg-wrap{margin-bottom:14px}.seg-total{text-align:center;font:20px var(--font-fun);border-bottom:3px solid var(--ink);margin-bottom:6px}.seg-bar{border:3px solid var(--ink);border-radius:10px;height:64px;display:flex;overflow:hidden}.seg-bar .seg{color:#fff;font:18px var(--font-fun);border-right:3px solid var(--ink);text-align:center;place-items:center;padding:0 4px;display:grid}.seg-bar .seg:last-child{border-right:0}.seg.walk{background:var(--green)}.seg.run{background:var(--purple)}.seg.bus{background:var(--red)}.road-map{border:3px solid var(--ink);background:#fff;border-radius:14px;width:100%;max-height:520px}.road-map .road{stroke:#b9a48a;stroke-width:12px;stroke-linecap:round}.road-map .tick{stroke:var(--ink);stroke-width:2px}.road-map .tick-label{font:13px var(--font);fill:var(--ink-soft)}.road-map .place-label{font:16px var(--font-fun);fill:var(--ink)}.road-map .mark{stroke:var(--red);stroke-width:4px}.road-map .mark-label{font:13px var(--font-fun);fill:var(--red)}.road-map .gate-dot{fill:var(--yellow);stroke:var(--ink);stroke-width:3px}.road-map .place{cursor:pointer}.road-map .place circle{fill:var(--yellow);stroke:var(--ink);stroke-width:3px}.road-map .place:hover circle,.road-map .place:focus circle{fill:var(--pink)}.road-map .road-choice:hover .road,.road-map .road-choice:focus .road{stroke:var(--purple)}.road-map .place.wrong{opacity:.35}.road-map .place:focus{outline:none}.overlay{z-index:10;background:#2a232073;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.notebook{border:4px solid var(--ink);width:min(560px,100%);max-height:80dvh;box-shadow:0 8px 0 var(--ink);background:#fffdf3;border-radius:20px;padding:18px 22px;overflow:auto}.notebook-head{justify-content:space-between;align-items:center;display:flex}.notebook h3{font:26px var(--font-fun);margin:0}.clue-list{flex-direction:column;gap:10px;margin:12px 0 0;padding:0;list-style:none;display:flex}.clue-list li{border-bottom:2px dashed #e4d6c2;align-items:flex-start;gap:10px;padding-bottom:8px;font-size:18px;display:flex}.clue-icon{font-size:22px}.toast{background:var(--ink);color:#fff;z-index:20;border-radius:12px;max-width:calc(100vw - 32px);padding:10px 18px;font-size:17px;transition:opacity .4s;position:fixed;top:18px;left:50%;transform:translate(-50%)}.toast.out{opacity:0}@media (orientation:portrait),(width<=600px){.case-board{grid-template-rows:minmax(0,38%) minmax(0,1fr)}}.toast{pointer-events:none}@media (width<=600px),(height<=520px){.toast{padding:6px 12px;font-size:14px;top:8px}}