.story-loading{position:fixed;inset:0;z-index:9999;background:#e8e0cc;display:grid;place-content:center;text-align:center;color:#305b60;font-family:serif}.story-loading h1{font-size:40px;font-weight:400;letter-spacing:.3em}.story-loading p{letter-spacing:.2em}.story-loading[hidden]{display:none}
body.story-mode #map-tools,body.story-mode #story-tools,body.story-mode .topbar,body.story-mode #city-card,body.story-mode .footer-hint,body.story-mode .berth-board,body.story-mode .temple-back,body.story-mode .liaocheng-back,body.story-mode .taierzhuang-back,body.story-mode .taian-fair-close,body.story-mode .walk-hints,body.story-mode .walk-exit{display:none!important}
#story-ui{position:fixed;inset:0;z-index:70;pointer-events:none;color:#f6edce;font-family:'Microsoft YaHei',serif;text-shadow:0 1px 4px #142e2d}
#story-ui button:not(.pause-button){pointer-events:auto;border:0;background:transparent;color:inherit;font:inherit;padding:10px 0;text-align:left;cursor:pointer;letter-spacing:.06em}#story-ui button:not(.pause-button):focus-visible{outline:1px solid #bfa771;outline-offset:4px}#story-ui button:not(.pause-button):disabled{opacity:.45;cursor:default}#story-ui [hidden]{display:none!important}
.quest-hud{position:absolute;left:3%;top:28%;width:290px;padding:18px 24px;border-left:2px solid #b69d66;background:linear-gradient(90deg,#16302fdc,#1c383824)}.quest-hud small{color:#d2b779;letter-spacing:.16em}.quest-hud h2{font:22px/1.5 serif;margin:9px 0}.quest-hud p{font-size:13px;line-height:1.9;margin:5px 0;white-space:pre-line}.quest-hud span,.quest-hud button{display:block;font-size:12px;opacity:.85}
.chapter-gate{position:absolute;inset:0;text-align:center;background:linear-gradient(#18333240,transparent 50%,#102c3270)}.chapter-gate p{margin:8vh 0 15px;letter-spacing:.4em}.chapter-gate h1{font:50px serif;letter-spacing:.35em}.chapter-gate button{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);animation:journey-breathe 2.8s ease-in-out infinite;white-space:nowrap}
.story-dialogue{position:absolute;bottom:4%;left:13%;right:13%;min-height:160px;padding:30px 42px 18px;background:linear-gradient(110deg,#183735f2,#193933dc);border-top:1px solid #c6b175}.story-dialogue small{font:22px serif;color:#dfc689}.story-dialogue p{font-size:18px;line-height:1.9;min-height:66px;margin:12px 0}.story-dialogue button{float:right;font-size:13px}.story-dialogue img{position:absolute;bottom:100%;left:0;max-height:48vh;max-width:30vw;object-fit:contain}
.story-facility{position:absolute;right:4%;top:18%;width:min(340px,32vw);padding:25px 30px;background:linear-gradient(90deg,#17353400,#173534d9);border-right:2px solid #bdab7b}.story-facility small{color:#d7be88}.story-facility h2{font:30px serif}.story-facility [data-copy]{white-space:pre-line;line-height:1.9;font-size:15px}.story-facility button{display:block;margin-top:10px}
/* Ship facilities use visible controls, separate from the in-world captions. */
.story-facility [data-actions]:not(:empty){display:grid;gap:10px;margin-top:20px}
#story-ui .story-facility button{box-sizing:border-box;width:100%;min-height:46px;margin-top:0;padding:12px 16px;border:1px solid #c4ad7799;border-radius:2px;background:#173b39ed;color:#f4e7c5;font-size:15px;line-height:1.5;text-align:center;text-shadow:none;box-shadow:inset 0 1px 0 #fff2;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease,transform 100ms ease}
#story-ui .story-facility[data-kind="helm"] [data-actions] button,#story-ui .story-facility button[data-key="KeyE"]{background:#ddc792;color:#203c37;border-color:#ead8aa;font-weight:600}
#story-ui .story-facility button[data-back]{margin-top:16px;background:#122d2bd9;border-color:#b8ad8b70;color:#e2d8bc;font-size:13px}
#story-ui .story-facility button:focus-visible{outline:2px solid #f5dfac;outline-offset:3px}
#story-ui .story-facility button:active:not(:disabled){transform:translateY(1px)}
#story-ui .story-facility button:disabled{opacity:1;background:#2b3835;color:#aaa68f;border-color:#777c6959;box-shadow:none;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){#story-ui .story-facility button:hover:not(:disabled){background:#315750;border-color:#ecdaaa;color:#fff2d0}#story-ui .story-facility[data-kind="helm"] [data-actions] button:hover:not(:disabled),#story-ui .story-facility button[data-key="KeyE"]:hover:not(:disabled){background:#efdaa7;color:#17352e}}
@media(prefers-reduced-motion:reduce){#story-ui .story-facility button{transition:none}#story-ui .story-facility button:active:not(:disabled){transform:none}}
.story-pause{pointer-events:auto;max-width:440px;padding:45px;background:#eae1ca;color:#294b4c;border:1px solid #9c895c;text-shadow:none}.story-pause::backdrop{background:#112c3580}.story-pause button{display:block}.story-pause p{line-height:2;font-size:13px}.story-toast{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);padding:15px 25px;background:#183735df;max-width:80vw}.story-veil{position:absolute;inset:0;background:#e8e0cc;pointer-events:auto}
@keyframes journey-breathe{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.chapter-gate button{animation:none}}@media(max-width:700px){.quest-hud{width:200px;left:1%;padding:12px}.story-dialogue{left:4%;right:4%;padding:20px}.story-facility{width:75vw;max-width:340px}}

body.story-mode .map-label[data-status="locked"]{background:#787c76;filter:grayscale(1);opacity:.7;color:#e1e0d4}


body.story-interacting .walk-region,body.story-interacting .walk-boat-interact,body.story-interacting .walk-cross{visibility:hidden}


.province-heading{position:absolute;right:4%;top:7%;max-width:340px;color:#365853;text-shadow:none}.province-heading small{letter-spacing:.2em;color:#8b714d}.province-heading h1{font:28px/1.6 serif;letter-spacing:.08em}.province-heading p{font-size:14px;line-height:2}.province-heading span{font-size:12px;opacity:.65}
body.story-mode .tz-back,body.story-mode .temple-hint,body.story-mode .tz-hint,body.story-mode .dock-hint,body.story-mode .taian-fair-hint{display:none!important}

.story-inventory{position:absolute;right:4%;top:25%;width:216px;padding:14px 18px;border-right:2px solid #bda76f;background:linear-gradient(270deg,#183735d9,#18373530);text-align:right}.story-inventory>small{color:#ddc58d;letter-spacing:.18em}.story-inventory [data-items]{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:12px}.inventory-item{display:flex;align-items:center;gap:12px}.inventory-item svg,.inventory-empty{width:58px;height:68px;flex-shrink:0;background:#e8ddba19;border:1px solid #d9bf7c80}.inventory-item span{font:16px/1.6 serif;max-width:118px}.inventory-empty{display:grid;place-content:center;color:#b8b8a2}.story-inventory p{font-size:11px;line-height:1.8;color:#ddc58d;margin:10px 0 0}.story-facility{top:auto;bottom:5%;max-height:42vh;overflow-y:auto}.guide-bearing{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;text-shadow:0 2px 4px #102c2b,0 0 9px #102c2b}.guide-bearing span{display:block;font-size:28px;color:#f5d48e}.guide-bearing small{font-size:12px;color:#ecdfb7;letter-spacing:.14em}body.story-interacting .walk-toast{visibility:hidden}@media(max-width:700px){.story-inventory{right:2%;width:150px;padding:10px;top:22%}.inventory-item span{font-size:13px}.inventory-item svg{width:42px;height:54px}}
.story-dialogue:has(.story-portrait:not([hidden])){left:29%;right:7%}
.story-portrait{position:absolute;bottom:-2vh;right:calc(100% + 1.5vw);height:min(68vh,620px,40vw);overflow:hidden;pointer-events:none;filter:drop-shadow(0 5px 9px #102b2c66)}
.story-portrait img{position:absolute;bottom:auto;max-height:none;max-width:none;object-fit:fill;pointer-events:none}
.story-dialogue[data-facing="left"]:has(.story-portrait:not([hidden])){left:7%;right:29%}
.story-dialogue[data-facing="left"] .story-portrait{right:auto;left:calc(100% + 1.5vw)}
.story-reward-art{position:absolute;bottom:calc(100% + 16px);right:12%;margin:0;width:150px;padding:16px 22px 12px;background:radial-gradient(ellipse,#eee3c8e8 35%,#eee3c800 72%);text-align:center}
.story-reward-art svg{width:100%;height:170px;overflow:hidden;filter:drop-shadow(0 3px 3px #102c3277)}
.story-reward-art figcaption{font:15px/1.8 serif;color:#f3e5bd;white-space:nowrap;margin-top:10px}
.inventory-item svg.token-painted{background:#e8ddba99;box-sizing:border-box;padding:4px}
.guide-bearing{bottom:5.5%;gap:7px;text-shadow:0 1px 5px #17343188}.guide-bearing small{font:11px/1.5 serif;letter-spacing:.28em;color:#e9dbad}.guide-compass{position:relative;width:42px;height:42px;border:1px solid #cbb58370;border-radius:50%;background:radial-gradient(ellipse,#23494470,#23494400 72%)}.guide-compass i{position:absolute;inset:5px;border:1px solid #d5c6993b;transform:rotate(45deg)}.guide-bearing .guide-compass span{position:absolute;inset:6px;font-size:0;transform-origin:center}.guide-compass svg{width:100%;height:100%;overflow:visible}.guide-compass path{fill:#e8d29c;stroke:#344f48;stroke-width:.7}
@media(max-width:700px){.story-dialogue:has(.story-portrait:not([hidden])){left:35%;right:3%;padding:16px}.story-dialogue[data-facing="left"]:has(.story-portrait:not([hidden])){left:3%;right:35%}.story-portrait{right:calc(100% + 2vw);left:auto;bottom:0;height:min(42vh,300px,50vw)}.story-dialogue[data-facing="left"] .story-portrait{left:calc(100% + 2vw);right:auto}.story-dialogue p{font-size:15px;line-height:1.8}.story-reward-art{right:5%;width:105px;padding:8px}.story-reward-art svg{height:120px}}
.story-curtain{position:fixed;inset:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;box-sizing:border-box;border:0;padding:0;background:#e8e0cc;color:#315a58;text-shadow:none;pointer-events:auto}
.story-objective{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:max-content;max-width:60vw;text-align:center;padding:12px 36px 16px;background:linear-gradient(90deg,#17373500,#173735dc 22%,#173735dc 78%,#17373500);border-block:1px solid #c1a16d55;pointer-events:none}.story-objective small{font:12px/1.7 serif;color:#d5b97e;letter-spacing:.3em}.story-objective p{font:21px/1.5 serif;letter-spacing:.08em;margin:7px 0 0}.story-toast{font-size:14px;line-height:1.8;border-bottom:1px solid #b69c655e;pointer-events:none}
.story-objective{top:max(150px,18%)}.story-toast{bottom:24%}
@media(max-width:700px){.story-objective{top:140px;max-width:84vw;padding:10px 22px}.story-objective p{font-size:17px}#story-ui:has(.story-facility:not([hidden])) .story-toast{top:14%;bottom:auto}}
.story-curtain[open]{display:grid;place-items:center}.story-curtain::backdrop{background:transparent}.story-curtain>div{text-align:center;max-width:80vw}.story-curtain small{color:#967b51;letter-spacing:.4em}.story-curtain h2{font:30px/1.8 serif;font-weight:400;letter-spacing:.12em}.story-curtain p{font:14px/2 serif;letter-spacing:.1em}.story-curtain nav{display:flex;justify-content:center;gap:32px;margin-top:25px}.story-curtain button{border-bottom:1px solid #aa9165!important}
body.story-transition :is(.craft-stage,.brick-game,.shadow-game,.shadow-modal,.banquet-game,.banquet-modal,.lantern-game,.lantern-modal,.brick-handoff){opacity:0!important;pointer-events:none!important}
body.story-transition :is(.brick-game,.shadow-game,.shadow-modal,.banquet-game,.banquet-modal,.lantern-game,.lantern-modal,.brick-handoff)::backdrop{background:transparent!important}
/* Clickable HUD/dialogue and recovery actions must not read as plain copy. */
#story-ui :is(.quest-hud,.story-dialogue,.story-curtain) button{box-sizing:border-box;min-height:40px;padding:9px 14px;border:1px solid #c4ad7780;background:#173b39e6;color:#f4e7c5;border-radius:2px;font-size:13px;line-height:1.5;text-align:center;transition:background-color 150ms ease,border-color 150ms ease}
#story-ui .quest-hud button{margin-top:10px;width:fit-content;opacity:1}
#story-ui .story-curtain button{border:1px solid #a58c5f!important;background:#f4ecd8;color:#315a58;min-height:44px}
#story-ui .story-curtain [data-retry]{background:#315a58;color:#f4ecd8}
@media(hover:hover) and (pointer:fine){#story-ui :is(.quest-hud,.story-dialogue) button:hover{background:#315750;border-color:#ecdaaa}#story-ui .story-curtain button:hover{filter:brightness(1.1)}}
#story-ui :is(.quest-hud,.story-dialogue,.story-curtain) button:active{box-shadow:inset 0 2px 4px #0003}
#story-ui :is(.quest-hud,.story-dialogue,.story-curtain) button:focus-visible{outline:2px solid #bfa771;outline-offset:3px}
@media(prefers-reduced-motion:reduce){#story-ui :is(.quest-hud,.story-dialogue,.story-curtain) button{transition:none}}