:root{color-scheme:dark;--ink:#081219;--muted:#72909c;--light:#d9edeb;--gold:#c9ba95}*{box-sizing:border-box}body{margin:0;background:#070e14;color:var(--light);font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;background-image:radial-gradient(ellipse at 50% 25%,#11272e88,transparent 70%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #b9ebdf;outline-offset:5px}button{transition:background .2s,color .2s,transform .2s}button:hover{color:white}button:active{transform:translateY(1px)}.topbar{height:88px;max-width:1512px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 5.2%;letter-spacing:2px}.brand{color:#d3e4e6;text-decoration:none;display:flex;gap:14px;align-items:center;font-size:16px;font-weight:500}.brand-mark{font-size:34px;font-family:serif;color:#afd8d4}.brand-en{font-size:9px;letter-spacing:2.5px;color:#6d8993;margin-left:8px}.edition{font-size:10px;color:#72909b;display:flex;align-items:center;gap:14px;letter-spacing:1px}.edition i{width:5px;height:5px;border-radius:50%;background:#9cc4ad;box-shadow:0 0 10px #86bca5}main{max-width:1400px;width:90%;margin:auto}.game-shell{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid #2c444952;background:#07151c;box-shadow:0 25px 100px #0006}canvas{width:100%;height:100%;display:block;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px 25px #0208108a}.hidden{display:none!important}.overlay{position:absolute;inset:0}.menu{background:linear-gradient(90deg,#06131cea 0%,#08171dc9 32%,#08171d20 70%);display:flex;align-items:center}.menu-content{padding-left:8%;width:55%;transform:translateY(-2%)}.eyebrow{font-size:9px;letter-spacing:3px;color:#9bb9bd;display:flex;align-items:center;gap:13px}.eyebrow span{display:block;width:25px;height:1px;background:#aec6c7}.pretitle{font-family:serif;letter-spacing:4px;font-size:13px;margin:35px 0 16px;color:#a4bdc0}h1{font-family:"Songti SC","STSong",serif;font-size:clamp(40px,6.5vw,92px);font-weight:500;line-height:1.2;letter-spacing:10px;margin:0;color:#e7f1e8;text-shadow:0 0 40px #b7ddd031}h1 span{color:#cdded6}.english-title{font-family:Georgia,serif;letter-spacing:5px;font-size:clamp(8px,1.05vw,14px);margin:16px 0 28px;color:#a1bcb9}.intro{font-size:12px;line-height:2.3;letter-spacing:2px;color:#91a9ad;margin-bottom:30px}.primary{border:1px solid #75968c91;background:linear-gradient(110deg,#a9cec026,#a9cec006);display:flex;align-items:center;justify-content:space-between;width:240px;padding:16px 23px;letter-spacing:4px;font-size:13px}.primary:hover{background:#a9cec034;border-color:#b3d4c7}.primary span:last-child{font-size:22px;line-height:16px;color:#aac6b9}.text-button{display:block;border:0;background:transparent;color:#91a7a9;margin-top:16px;padding:7px 0;letter-spacing:2px;font-size:11px}.text-button span{padding-left:26px}.menu-meta{display:flex;align-items:center;gap:13px;margin-top:34px;font-size:9px;letter-spacing:2px;color:#63818a}.menu-meta i{height:2px;width:2px;background:#63818a}.chapter-tag{position:absolute;right:5%;top:8%;text-align:right;display:flex;flex-direction:column;gap:10px}.chapter-tag span{font-family:Georgia,serif;color:#b1bdad;letter-spacing:3px;font-size:10px}.chapter-tag b{font-family:serif;font-weight:400;letter-spacing:7px;font-size:20px;color:#b9ccca}.chapter-tag small{font-size:7px;letter-spacing:2px;color:#6c8d96}.menu-corner{position:absolute;bottom:5%;right:5%;font-size:9px;letter-spacing:2px;color:#85a0a5}.controlbar{min-height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #28404a66;gap:15px}.controls{display:flex;gap:21px;align-items:center;flex-wrap:wrap}.controls>span{font-size:10px;color:#78929c;display:flex;align-items:center;gap:5px;white-space:nowrap}kbd{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 5px;color:#a0b4ba;font-size:9px;border:1px solid #34505c70;border-radius:3px;background:#14242e55;margin-right:1px}.footer-actions{display:flex;gap:20px;white-space:nowrap}.footer-actions button{border:0;background:none;color:#91aab1;font-size:10px;padding:8px 0;display:flex;align-items:center;gap:8px}.footer-actions button>span:first-child{font-size:18px}.footer-actions button>span:last-child{font-size:10px}.footer-actions #fullBtn{font-size:24px}.page-bottom{width:90%;max-width:1400px;margin:25px auto;display:flex;justify-content:space-between;color:#455e68;font-size:9px;letter-spacing:2px}.page-bottom b{font-family:Georgia,serif;font-weight:400;color:#8aa2a8;padding-left:13px}.hud{position:absolute;left:4%;right:4%;top:5%;display:flex;justify-content:space-between;align-items:start;pointer-events:none}.hud button{pointer-events:auto}.vitals{display:flex;gap:16px;align-items:center}.soul{position:relative;width:55px;height:55px;display:grid;place-items:center;background:#15394066;border-radius:50%;box-shadow:0 0 35px #7aa8b32b}.soul span{font-family:Georgia,serif;font-size:19px}.soul svg{position:absolute;inset:0;transform:rotate(-90deg);fill:none;stroke-width:1.5;stroke:#53707955}.soul svg circle:last-child{stroke:#d4eadf;stroke-dasharray:163;stroke-dashoffset:80}.health{display:flex;gap:8px;height:25px}.pip{width:16px;height:21px;background:#d5e8dc;clip-path:polygon(10% 0,40% 15%,60% 15%,90% 0,100% 65%,50% 100%,0 65%);filter:drop-shadow(0 0 6px #d2eee799)}.pip.empty{background:#46545b}.currency{font-size:12px;padding-top:7px;color:#c5ccad;display:flex;gap:9px;align-items:center}.currency b{font-weight:400;font-family:Georgia,serif}.currency-name{font-size:8px;color:#87a2a3;letter-spacing:2px;margin-left:6px}.icon-button{width:33px;height:33px;background:#11232a88;border:1px solid #53778066;border-radius:50%;font-size:15px}.area{position:absolute;top:24%;width:100%;text-align:center;pointer-events:none;animation:area 4s both}.area span{font-size:10px;letter-spacing:5px;color:#a6c3c3}.area h2{font-family:serif;font-size:35px;letter-spacing:12px;font-weight:400;margin:17px 0}.area div{color:#8babae;letter-spacing:4px}@keyframes area{0%,100%{opacity:0;transform:translateY(8px)}18%,72%{opacity:1;transform:translateY(0)}}.world-hint{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);padding:8px 15px;background:#06131caa;border:1px solid #55757955;color:#c4d3c9;font-size:11px;letter-spacing:2px;pointer-events:none}.toast{position:absolute;top:16%;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:2px;color:#e0e8cc;opacity:0;transition:opacity .3s;text-shadow:0 2px 10px #000;pointer-events:none}.toast.show{opacity:1}.location{position:absolute;bottom:4%;left:4%;display:flex;align-items:center;gap:12px;color:#abc4c1;font-size:10px;letter-spacing:3px;pointer-events:none}.location-line{width:42px;height:1px;background:#63848266}.location small{font-family:Georgia,serif;color:#658b94;font-size:9px}.modal{background:#041019c7;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:3;text-align:center}.dialog-card{min-width:300px;max-width:90%;display:flex;align-items:center;flex-direction:column}.ornament{color:#a5c6be;font-size:22px;letter-spacing:8px;margin-bottom:20px}.dialog-card .eyebrow{display:block;font-size:8px}.dialog-card h2{font-family:serif;font-weight:400;font-size:40px;letter-spacing:8px;margin:15px 0}.dialog-card>p:not(.eyebrow){color:#97b1b4;line-height:1.8;font-size:12px;margin-bottom:28px;white-space:pre-line}.dialog-card .primary{margin-top:9px}.boss-hud{position:absolute;bottom:8%;width:48%;left:26%;pointer-events:none}.boss-hud>div:first-child{display:flex;justify-content:space-between;margin-bottom:11px;font-family:serif;letter-spacing:4px;color:#d7cab0;font-size:14px}.boss-hud small{font-size:9px;letter-spacing:2px;opacity:.7}.boss-track{height:5px;background:#543e3766;outline:1px solid #957c5944;outline-offset:3px}.boss-track>div{height:100%;background:#c5b591;transition:width .1s}.map-rooms{display:flex;gap:18px;margin:14px 0 22px;align-items:center}.map-room{border:1px solid #577b8266;padding:18px 15px;font-size:10px;letter-spacing:2px;color:#799399;position:relative}.map-room.active{border-color:#bcdbc6;color:#d8e7d6;box-shadow:0 0 22px #a8d9c31c}.map-room:not(:last-child):after{content:'';position:absolute;right:-19px;top:50%;width:18px;height:1px;background:#6d8c91}.map-room small{display:block;font-size:8px;letter-spacing:1px;margin-top:10px}.touch{position:absolute;bottom:12%;left:3%;right:3%;display:flex;justify-content:space-between;pointer-events:none}.touch>div{display:flex;gap:9px}.touch button{pointer-events:auto;background:#102f3c99;border:1px solid #789ba06b;border-radius:50%;height:42px;width:42px;touch-action:none}.game-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto}.game-shell:fullscreen canvas{object-fit:contain;background:#06131b}@media(min-width:1600px){.topbar{height:105px}}@media(max-width:1050px){.controls{gap:10px}.footer-actions{gap:13px}.brand-en{display:none}.topbar{height:65px}.pretitle{margin-top:18px}.intro{margin:15px 0;font-size:10px}.english-title{margin:10px 0 17px}.menu-meta{margin-top:19px}.primary{padding:12px 18px;width:210px}.controlbar{flex-wrap:wrap;padding:15px 0;gap:13px}.page-bottom{line-height:1.8}.edition{font-size:9px}}@media(max-width:650px){main{width:96%}.topbar{padding:0 4%;height:55px}.edition{display:none}.menu-content{padding-left:6%;width:65%}.eyebrow{font-size:6px;letter-spacing:1.5px}.pretitle{font-size:9px;letter-spacing:2px;margin:13px 0 8px}h1{font-size:42px;letter-spacing:3px}.english-title{font-size:7px;letter-spacing:2px;margin:8px 0}.intro,.menu-meta,.menu-corner{display:none}.primary{width:160px;padding:11px 15px;font-size:10px;margin-top:16px}.text-button{font-size:9px;margin-top:5px}.chapter-tag b{font-size:13px;letter-spacing:3px}.chapter-tag span{font-size:7px}.chapter-tag small{display:none}.controls{gap:7px}.controls>span{font-size:9px}.page-bottom>span:last-child{display:none}.hud{top:4%}.soul{width:36px;height:36px}.soul span{font-size:13px}.vitals{gap:10px}.pip{width:11px;height:14px}.health{height:15px;gap:5px}.currency{font-size:10px;padding-top:4px}.currency-name{display:none}.dialog-card h2{font-size:26px;margin:8px 0}.dialog-card>p:not(.eyebrow){margin:8px 0;font-size:10px}.ornament{display:none}.dialog-card .eyebrow{display:none}.map-room{padding:10px 8px}.map-rooms{margin:10px 0}.area h2{font-size:24px}.area span{font-size:7px}.world-hint{font-size:9px;bottom:30%}}
/* Keep the game and its controls together on a laptop display. */
@media(min-width:800px){main{width:min(90%,calc((100dvh - 180px)*1.77778))}.game-shell{container-type:inline-size}h1{font-size:clamp(40px,7.4cqw,92px)}}
@media(min-width:800px) and (max-height:800px){.pretitle{margin-top:18px;margin-bottom:12px}.english-title{margin:12px 0 17px}.intro{margin:16px 0 22px;line-height:1.9}.menu-meta{margin-top:20px}.menu-content .primary{padding:13px 19px}.topbar{height:75px}.page-bottom{margin-top:18px}}
/* A seven-room itinerary also serves as the chapter picker. */
#mapContent{width:min(650px,78vw)}.map-rooms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin:10px 0 16px}.map-room{background:#10212c88;text-align:left;padding:12px 10px;min-width:0;border-top:2px solid var(--room-tint,#648a91);letter-spacing:1px;color:#a9bec3}.map-room b{font-weight:400;font-size:12px;display:block;white-space:nowrap}.map-room small{font-size:8px;letter-spacing:0;line-height:1.5}.map-room:not(:last-child):after{display:none}.room-number{display:block;font-size:8px;letter-spacing:2px;color:var(--room-tint);margin-bottom:8px}.map-room:is(button):hover{background:#2b454f;border-color:var(--room-tint);transform:translateY(-2px)}.dialog-card:has(#mapContent:not(.hidden)) .ornament{margin-bottom:4px}.dialog-card:has(#mapContent:not(.hidden)) h2{margin:8px 0;font-size:32px}.dialog-card:has(#mapContent:not(.hidden))>p:not(.eyebrow){margin:10px 0}.dialog-card:has(#mapContent:not(.hidden)) #menuBtn{display:none}#selectBtn span{font-size:9px;letter-spacing:1px;padding-left:10px}#selectBtn{margin-top:6px}.menu-meta{margin-top:16px}
@media(max-width:650px){#mapContent{width:80vw}.map-rooms{gap:5px;margin:5px 0}.map-room{padding:6px 5px}.map-room b{font-size:9px}.map-room small{display:none}.room-number{font-size:7px;margin-bottom:3px}.dialog-card:has(#mapContent:not(.hidden)) h2{font-size:20px}.dialog-card:has(#mapContent:not(.hidden))>p:not(.eyebrow){font-size:8px;margin:5px 0}.dialog-card:has(#mapContent:not(.hidden)) .primary{padding:8px;margin-top:3px}}