:root{--paper:#edf2df;--ink:#24443a;--muted:#7c8b71;--line:#ccd6bb;--mint:#99c8a6;--orange:#ea936e;--cream:#fff9e5}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #e68d63;outline-offset:4px}button:disabled{opacity:.36;cursor:default}.app{max-width:1800px;margin:auto;padding:0 42px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:65px;flex-shrink:0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:2px;font-weight:750}.back{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.back>span:first-child{font-size:26px;transform:rotate(-90deg);line-height:1}.back-label{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--muted)}.edition{font-size:9px;letter-spacing:3px;margin-left:-80px;color:#6d7a65}.sound{border:1px solid #bdcdb0;border-radius:30px;background:transparent;font-size:10px;letter-spacing:1px;padding:8px 13px}.sound span{padding-left:7px;font-weight:700}.masthead{height:146px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.title-line{display:flex;align-items:center;gap:28px}h1{font-size:clamp(62px,7.1vw,108px);font-weight:800;letter-spacing:-7px;line-height:1;margin:0}.title-dot{color:#ed926f}.title-cn{font-size:19px;letter-spacing:4px;border-left:1px solid #b7c6a9;padding-left:28px;line-height:1.8;margin-top:15px}.title-cn small{font-size:9px;letter-spacing:1px;color:#72836b}.collection-mark{display:flex;align-items:center;gap:13px}.collection-mark>span{font-size:44px;font-weight:300;letter-spacing:-3px}.collection-mark small{font-size:8px;font-weight:700;letter-spacing:1.6px;line-height:1.8}main{display:grid;grid-template-columns:254px minmax(0,1fr);gap:34px;flex:1;min-height:490px}.sidebar{padding-top:25px;border-top:1px solid var(--line);display:flex;flex-direction:column}.eyebrow{font-size:8px;font-weight:800;letter-spacing:2.1px;color:#78856c}.chapter-top{display:flex;align-items:center;gap:16px;margin-top:23px}.chapter-top>span{font-size:46px;font-weight:300;letter-spacing:-3px;line-height:1;border-right:1px solid var(--line);padding-right:15px}.tag{display:inline-block;font-size:9px;letter-spacing:1px;color:#52775c;margin-bottom:6px}h2{margin:0;font-size:20px;font-weight:650;letter-spacing:1px}.chapter p{font-size:11px;color:#74826a;line-height:1.9;margin:18px 0 25px;min-height:42px}.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0}.stats>div{display:flex;flex-direction:column;gap:8px}.stats>div+div{border-left:1px solid var(--line);padding-left:24px}.stat-label{font-size:8px;letter-spacing:1px;color:#76836c}.stats strong{font-size:35px;font-weight:450;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-2px}.goal-status{display:flex;align-items:center;gap:11px;padding:18px 0}.goal-symbol{font-size:27px;color:#79a789}.goal-status>div:nth-child(2){display:flex;flex-direction:column;gap:3px;flex-shrink:0}.goal-status strong{font-size:14px;letter-spacing:1px}.goal-status span:not(.goal-symbol){font-size:8px;color:#819175}.progress{margin-left:auto;width:90px;height:4px;background:#d5dfc8;border-radius:4px;overflow:hidden}.progress i{display:block;height:100%;background:#7da98b;transition:width .3s}.actions{display:flex;gap:8px}.button{min-height:42px;border:0;border-radius:7px;font-size:11px;font-weight:650;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .15s}.button:active:not(:disabled){transform:translateY(2px)}.secondary{background:#e3ead4;border:1px solid #ccd7bd;flex:1}.secondary:hover:not(:disabled){background:#d8e4c8}.secondary>span{font-size:19px}.button kbd{font-size:8px;border:0;background:#d3dec5;line-height:15px;min-width:14px;padding:0;border-radius:3px;color:#7e8d72}.level-picker{margin-top:28px}.section-line{display:flex;justify-content:space-between;align-items:center}.section-line>span:last-child{font-size:9px;color:#7c8b70}.level-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:11px}.level-buttons button{position:relative;border:1px solid #cbd6bd;background:transparent;border-radius:5px;font-size:11px;height:34px;font-weight:600}.level-buttons button:hover{background:#dae5cc}.level-buttons button.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}.level-buttons button.done:after{content:'';position:absolute;bottom:3px;left:calc(50% - 2px);height:3px;width:3px;border-radius:50%;background:#82b996}.sidebar-bottom{display:flex;align-items:center;gap:12px;padding:24px 0 14px;margin-top:auto}.flower{font-size:37px;font-weight:100;color:#a0b28a}.sidebar-bottom p{font-size:9px;color:#8d9b7e;line-height:1.9}.stage{position:relative;min-width:0;min-height:490px;border-radius:16px;background:radial-gradient(ellipse at 50% 46%,#f7f7e9 0,#e3ecd3 67%,#dfe8cf 100%);overflow:hidden;border:1px solid #d8e2c8}.stage:after{content:'';position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.08' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");opacity:.2;mix-blend-mode:multiply}#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;width:100%;height:100%}.scene-label{position:absolute;left:24px;right:24px;top:23px;z-index:1;display:flex;gap:8px;align-items:center;font-size:8px;letter-spacing:1.5px;color:#7b9073}.scene-label i{display:block;height:5px;width:5px;background:#85ae8d;border-radius:50%}.scene-label-right{margin-left:auto;font-size:7px;letter-spacing:2px;color:#97a58b}.stage-floor-label{position:absolute;bottom:25px;left:25px;display:flex;align-items:center;gap:10px;color:#8a9b7c;font-size:9px;letter-spacing:1px}.stage-floor-label>span:first-child{font-size:8px}.stage-floor-label i{width:28px;height:1px;background:#a7b99a}.controls{position:absolute;bottom:21px;right:24px;display:grid;grid-template-columns:32px 32px 32px;grid-template-rows:30px 30px 30px;gap:3px;z-index:2}.controls button{border:1px solid #b6c6a7;border-radius:6px;font-size:19px;font-weight:400;background:#edf3e2dd;color:#5c7d62;line-height:1;touch-action:manipulation}.controls button:hover{background:#d6e5c6}.controls button:active{background:#bcd6ae}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.control-center{grid-area:2/2;text-align:center;line-height:30px;color:#7f9d7a;font-size:22px}.stage-notice{position:absolute;bottom:40px;left:50%;transform:translateX(-50%) translateY(6px);background:#28493ae8;color:#f2f3e5;border-radius:30px;padding:10px 18px;font-size:10px;opacity:0;pointer-events:none;transition:all .3s;white-space:nowrap;z-index:3}.stage-notice.show{opacity:1;transform:translateX(-50%) translateY(0)}.win-panel{position:absolute;inset:0;display:grid;place-items:center;background:#e8f0db55;backdrop-filter:blur(4px);z-index:5}.win-panel[hidden],.error-panel[hidden]{display:none}.win-card{width:310px;text-align:center;background:#fffbeeeb;box-shadow:0 20px 60px #45643d26;border:1px solid #fffaf0;border-radius:18px;padding:25px 25px 18px;animation:arrive .4s ease-out}.win-flower{font-size:63px;color:#8fba92;line-height:1.25;margin-bottom:8px}.win-card .eyebrow{font-size:7px}.win-card h2{font-size:35px;letter-spacing:4px;margin:15px 0 14px}.win-card p{font-size:11px;line-height:1.9;color:#88917c;margin-bottom:23px}.primary{background:#365b45;color:#fff8df;width:100%;justify-content:space-between;padding:0 17px;font-size:12px;height:46px}.primary:hover{background:#457254}.primary>span{font-size:20px}.replay{background:none;border:0;font-size:10px;color:#7d8c71;padding:15px 20px 0}.error-panel{position:absolute;inset:0;display:grid;place-items:center;padding:40px;text-align:center;background:var(--paper);z-index:8;font-size:14px}footer{display:flex;justify-content:space-between;align-items:center;min-height:63px;font-size:9px;color:#7b8b6e;letter-spacing:1px}footer>span{display:flex;align-items:center;gap:8px}kbd{font:9px inherit;letter-spacing:2px;border:1px solid #c3cfb4;border-radius:4px;padding:4px 6px;color:#819176}.or{font-size:8px;color:#a7b398}.tiny-flower{font-size:22px;margin-left:12px;color:#95ad82}@keyframes arrive{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@media(min-width:1300px) and (min-height:850px){main{min-height:560px}.stage{min-height:560px}.sidebar{padding-top:34px}.chapter p{margin-bottom:32px}.level-picker{margin-top:32px}}@media(max-width:1000px){.app{padding:0 25px}.masthead{height:122px}h1{font-size:75px}.title-cn{font-size:16px;padding-left:22px}.title-line{gap:22px}main{grid-template-columns:220px minmax(0,1fr);gap:20px}.collection-mark{display:none}.scene-label-right{display:none}.stage-floor-label{font-size:8px;bottom:19px;left:16px}.stage-floor-label>span:first-child,.stage-floor-label i{display:none}.controls{right:15px;bottom:18px}.sidebar{padding-top:22px}.edition{margin-left:0;letter-spacing:1px}}@media(max-width:700px){.app{padding:0 18px;min-height:100svh}.topbar{height:52px}.back-label,.edition{display:none}.masthead{height:102px}h1{font-size:62px;letter-spacing:-4px}.title-line{gap:15px}.title-cn{font-size:14px;letter-spacing:2px;padding-left:15px;margin-top:8px}.title-cn small{font-size:8px;letter-spacing:0}main{display:flex;flex-direction:column;gap:12px;min-height:0}.sidebar{padding:0;border-top:0;display:grid;grid-template-columns:1fr 124px;column-gap:12px}.chapter{display:flex;flex-direction:column;justify-content:center}.chapter>.eyebrow,.chapter p,.sidebar-bottom,.goal-status,.actions kbd{display:none}.chapter-top{margin:0;gap:11px}.chapter-top>span{font-size:32px;padding-right:12px;letter-spacing:-2px}.tag{font-size:8px;margin-bottom:2px}h2{font-size:16px}.stats{grid-column:2;grid-row:1;padding:7px 0;border-top:0;gap:4px;border-bottom:0}.stats>div{gap:4px}.stats>div+div{padding-left:14px}.stat-label{font-size:6px;letter-spacing:0}.stats strong{font-size:27px}.actions{grid-column:2;grid-row:2;align-items:end;margin-top:12px;gap:6px}.button.secondary{font-size:9px;min-height:32px;gap:4px;border-radius:5px}.secondary>span{font-size:16px}.level-picker{grid-column:1;grid-row:2;margin-top:12px}.section-line{display:none}.level-buttons{margin:0;gap:5px;max-width:240px}.level-buttons button{height:32px;font-size:10px}.stage{min-height:410px;height:calc(100svh - 325px);flex:1;border-radius:12px}.scene-label{left:16px;top:16px;right:16px;font-size:7px}.stage-floor-label{bottom:16px;font-size:7px;letter-spacing:0}.controls{bottom:14px;right:14px;grid-template-columns:33px 33px 33px;grid-template-rows:29px 29px 29px;gap:3px}footer{min-height:46px;font-size:7px;letter-spacing:0}footer .footer-right{display:none}footer kbd{font-size:7px;padding:3px 5px}footer>span{gap:6px}.win-card{width:270px;padding:19px 22px 14px}.win-flower{font-size:45px}.win-card h2{font-size:31px}.stage-notice{bottom:24px;left:15px;transform:translateY(5px);font-size:9px;padding:8px 11px;max-width:calc(100% - 142px);white-space:normal;line-height:1.5}.stage-notice.show{transform:translateY(0)}}@media(max-width:360px){.app{padding:0 12px}h1{font-size:52px}.title-cn{font-size:12px}.title-cn small{font-size:7px}.title-line{gap:12px}.stage{min-height:370px}.sidebar{grid-template-columns:1fr 114px}.level-buttons{gap:3px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* The board keeps its state as worlds change. */
.stage-wrap{display:flex;flex-direction:column;min-width:0;min-height:0;gap:12px}.stage-wrap .stage{flex:1}.theme-bar{display:flex;align-items:center;gap:15px;min-height:40px;flex-wrap:wrap}.theme-caption{font-size:8px;font-weight:700;letter-spacing:1.7px;color:var(--muted)}.theme-options{display:flex;gap:5px;flex-wrap:wrap}.theme-options button{min-height:36px;border:1px solid var(--line);padding:0 13px;border-radius:5px;background:transparent;font-size:10px;display:flex;gap:7px;align-items:center;white-space:nowrap}.theme-options button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.theme-options i{display:block;width:6px;height:6px;border-radius:50%;background:#92978b}.theme-options [data-theme=magic] i{background:#7f9fc4}.theme-options [data-theme=original] i{background:#a5c79b}#theme-detail{font-size:9px;letter-spacing:.6px;color:var(--muted);margin-left:auto}
body[data-theme=real]{--paper:#e6e4de;--ink:#303c38;--muted:#777d74;--line:#c7cbc2;--cream:#f6f3e9}body[data-theme=real] .stage{background:radial-gradient(ellipse at 55% 35%,#d9ddd6,#aeb8b2 90%);border-color:#bac4ba}body[data-theme=real] .secondary{background:#dadfd4;border-color:#bfc8bc}body[data-theme=real] .controls button{background:#edf0e4dd;border-color:#a5b2a2;color:#475a4d}body[data-theme=real] .scene-label,body[data-theme=real] .stage-floor-label{color:#5e6a61}body[data-theme=real] .scene-label-right{color:#758375}body[data-theme=real] .title-dot{color:#9b8866}
body[data-theme=magic]{--paper:#1a2229;--ink:#d4d9d2;--muted:#95a7ad;--line:#394850;--cream:#e2e9df}body[data-theme=magic] .stage{background:radial-gradient(ellipse at 55% 35%,#253e4a,#101d27 90%);border-color:#354b56}body[data-theme=magic] .tag,body[data-theme=magic] .chapter p,body[data-theme=magic] .title-cn small,body[data-theme=magic] .eyebrow,body[data-theme=magic] .stat-label,body[data-theme=magic] footer,body[data-theme=magic] .sidebar-bottom p,body[data-theme=magic] .section-line>span:last-child{color:#9dadaf}body[data-theme=magic] .secondary{background:#2b3b44;border-color:#43555c}body[data-theme=magic] .secondary:hover:not(:disabled){background:#3c5059}body[data-theme=magic] .level-buttons button{border-color:#43555c}body[data-theme=magic] .level-buttons button.active{background:#9ab5b5;color:#142630;border-color:#9ab5b5}body[data-theme=magic] .level-buttons button:hover{background:#4b6369}body[data-theme=magic] .sound,body[data-theme=magic] kbd{border-color:#52656a;color:#afbfba}body[data-theme=magic] .button kbd{background:#44575c;color:#c0ceca}body[data-theme=magic] .controls button{background:#253b49e8;color:#c0d9de;border-color:#5a747c}body[data-theme=magic] .scene-label,body[data-theme=magic] .stage-floor-label{color:#9eb7be}body[data-theme=magic] .scene-label-right{color:#8ca6b1}body[data-theme=magic] .win-panel{background:#10202a66}body[data-theme=magic] .win-card{background:#203440f5;border-color:#4b626b}body[data-theme=magic] .win-card p{color:#b4c2bf}body[data-theme=magic] .title-dot{color:#82babc}body[data-theme=magic] .primary{background:#8caeae;color:#122c36}body[data-theme=magic] .theme-options button[aria-pressed=true]{color:#1b2c36;background:#b0c5c4}
@media(max-width:1150px){#theme-detail{display:none}.theme-bar{gap:10px}.theme-options button{padding:0 10px}}
@media(max-width:700px){.stage-wrap{gap:9px}.theme-bar{min-height:39px;gap:0;justify-content:space-between;flex-wrap:nowrap}.theme-caption{font-size:7px;letter-spacing:.8px}.theme-options{gap:4px;flex-wrap:nowrap}.theme-options button{min-height:38px;padding:0 10px;font-size:10px;gap:5px}.stage-wrap .stage{height:calc(100svh - 375px);min-height:410px;flex:none}}
@media(max-width:380px){.theme-caption{display:none}.theme-options{width:100%}.theme-options button{flex:1;justify-content:center;padding:0 7px}}