@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600;700;900&display=swap');
:root{--ivory:#e9dfbd;--ink:#29271e;--muted:#6f6653;--serif:'Noto Serif TC','PMingLiU',serif;color-scheme:dark}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;background:#030605;color:var(--ivory);font:14px var(--serif);letter-spacing:.07em}button,input{font:inherit}button,a{touch-action:manipulation}button{border:0;background:none;color:inherit;cursor:pointer;transition:filter .2s,transform .2s}button:hover{filter:brightness(1.17);transform:translateY(-2px)}button:disabled{opacity:.28;cursor:default;transform:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px dashed #ead4a3;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
#app{position:relative;width:min(100vw,177.777778dvh);height:min(100dvh,56.25vw);container-type:size;overflow:hidden;background:#07100d;isolation:isolate}
.paper-button,.action,.notes-pager button,.puzzle-row button{background:transparent url('assets/ui-button.png') center/100% 200% no-repeat!important;border:0!important;box-shadow:none;color:var(--ink)!important;text-shadow:none;font-weight:600;min-height:5cqh;padding:.7cqh 2cqw 1cqh 2.7cqw;white-space:normal;font-size:1.6cqh;filter:drop-shadow(0 3px 4px #0006)}
header{position:absolute;top:1.7cqh;left:2cqw;right:2cqw;z-index:12;display:flex;align-items:start;justify-content:space-between;pointer-events:none}.brand{color:#ded7bd;text-decoration:none;font-size:2.3cqh;letter-spacing:.2em;text-shadow:0 2px 5px #000;pointer-events:auto}.brand small{display:block;font-size:1.1cqh;letter-spacing:.4em;margin-top:.5cqh}.header-right{display:flex;gap:.2cqw;pointer-events:auto}.header-right button{width:10cqw;height:5.4cqh;font-size:1.45cqh}
.home,.home-image{position:absolute;inset:0}.home-image{background:url('assets/cover.png') center/cover no-repeat}.title-content{position:absolute;right:8cqw;bottom:5cqh;width:36cqw;text-align:center}.home-actions{display:flex;justify-content:center;gap:.5cqw}.home-actions button{height:8cqh;min-width:16cqw;font-size:2cqh}.home-notes{font-size:1.35cqh;letter-spacing:.12em;text-shadow:0 2px 4px #000;margin:1.3cqh 0 0}
#game,.game-layout,.scene-wrap,.scene{position:absolute;inset:0}.scene{overflow:hidden}.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.scene-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 7cqw 2cqw #0008}.game-heading{position:absolute;top:10cqh;left:2.5cqw;z-index:5;pointer-events:none;text-shadow:0 2px 6px #000}.game-heading>span{font-size:1.2cqh}.game-heading h2{font-size:3cqh;letter-spacing:.25em;margin:1cqh 0}.game-heading p{font-size:1.45cqh;max-width:25cqw;line-height:1.8;color:#d3c8a9}.game-heading #hint{pointer-events:auto;width:12cqw;height:5cqh;font-size:1.4cqh}
#hotspots{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);width:4.7cqh;height:4.7cqh;background:url('assets/ui-seal.png') center/contain no-repeat;color:transparent;font-size:0;opacity:.65;filter:drop-shadow(0 1px 4px #000);border:0}.hotspot:hover,.hotspot:focus-visible{transform:translate(-50%,-50%) scale(1.18);opacity:1}.hotspot:after{content:attr(data-label);position:absolute;left:50%;top:100%;transform:translateX(-50%);white-space:nowrap;background:url('assets/ui-button.png') center/100% 200% no-repeat;padding:1cqh 2cqw;color:var(--ink);font-size:1.5cqh;opacity:0;pointer-events:none}.hotspot:hover:after,.hotspot:focus-visible:after,.show-hotspots .hotspot:after{opacity:1}.show-hotspots .hotspot{opacity:1}
.scene-caption{position:absolute;top:3cqh;left:50%;transform:translateX(-50%);max-width:35cqw;text-align:center;font-size:1.35cqh;color:#bdb8a4;text-shadow:0 2px 5px #000;pointer-events:none}.reveal{position:absolute;top:13cqh;right:2cqw;width:12cqw;height:5cqh;font-size:1.4cqh}
.dialogue{position:absolute;z-index:4;bottom:5cqh;left:2cqw;width:71cqw;height:19cqh;background:url('assets/ui-dialogue.png') center/100% 140% no-repeat;padding:3.2cqh 13cqw 2.5cqh 3cqw;pointer-events:none;filter:drop-shadow(0 3px 8px #0007)}.portrait{position:absolute;width:32cqh;height:auto;left:74cqw;bottom:-21cqh;pointer-events:none;filter:drop-shadow(0 0 10px #0005)}.dialogue-text{width:100%;position:relative}.speaker{font-size:1.7cqh;color:#d7bd85;letter-spacing:.22em}.dialogue p{font-size:1.85cqh;line-height:1.85;margin:1cqh 0 0;min-height:0;letter-spacing:.07em}#next{position:absolute;left:58cqw;top:4cqh;width:9cqw;height:5cqh;font-size:1.4cqh;pointer-events:auto}
.room-nav{position:absolute;left:3cqw;bottom:.6cqh;display:flex;gap:.5cqw;align-items:center;z-index:6}.room-nav button{width:13cqw;height:4.5cqh;font-size:1.4cqh}.room-nav>span{font:1.1cqh Georgia;letter-spacing:.2em;margin:0 1cqw;text-shadow:0 2px 4px #000}
.props-dock{position:absolute;bottom:24cqh;right:2cqw;display:flex;z-index:7;gap:.5cqw}.prop-button{display:flex;align-items:center;flex-direction:column;width:10cqw;height:13cqh;padding:0;filter:drop-shadow(0 4px 6px #000)}.prop-button>.sprite{width:9cqh;height:9cqh}.prop-button>span:last-child{font-size:1.5cqh;text-shadow:0 2px 3px #000}.prop-button b{font-size:1.2cqh;color:#d6b484}.prop-button[aria-expanded=true]{filter:drop-shadow(0 0 8px #d5bb8070)}
.sprite{display:inline-block;flex:none;background-image:url('assets/ui-icons.png');background-size:400% 200%;background-repeat:no-repeat}.icon-ticket{background-position:0 0}.icon-key{background-position:33.333333% 0}.icon-film{background-position:66.666667% 0}.icon-photo{background-position:100% 0}.icon-letter{background-position:0 100%}.icon-journal{background-position:33.333333% 100%}.icon-bag{background-position:66.666667% 100%}.icon-gear{background-position:100% 100%}
.field-drawer{position:absolute;z-index:10;right:3cqw;top:15cqh;width:33cqw;height:59cqh;padding:8cqh 3.5cqw 5cqh;background:url('assets/ui-panel.png') center/100% 100% no-repeat;color:var(--ink);filter:drop-shadow(0 8px 20px #0009);transform-origin:90% 95%;animation:unfold .36s ease-out}.field-drawer .close{top:3.5cqh;right:2.7cqw}.side-section{display:none}.field-drawer[data-view=inventory] .item-section,.field-drawer[data-view=notes] .clues{display:block}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title h3{font-size:2.2cqh;margin:0 0 2cqh}.section-title>span{font-size:1.3cqh}.inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqh .8cqw}.item{height:13cqh;display:flex;align-items:center;flex-direction:column;justify-content:center;font-size:1.45cqh;padding:0;background:none;border:0;gap:1cqh;color:var(--ink)}.item .sprite{width:8cqh;height:8cqh}.item.empty{opacity:.12;pointer-events:none}.item.empty span{font-size:3cqh}.item.selected{filter:drop-shadow(0 0 4px #8c4b25);text-decoration:underline;text-underline-offset:5px}.aside-note{font-size:1.3cqh;line-height:1.8;margin-top:2cqh}.note{font-size:1.7cqh;line-height:1.85;padding:1.5cqh 0;border-bottom:1px dashed #71604466}.note small{display:block;font:1.2cqh Georgia;color:#7f6750;margin-bottom:.8cqh}.notes-pager{display:flex;align-items:center;justify-content:space-between;margin-top:2cqh;font-size:1.4cqh}.notes-pager button{width:6cqw;min-height:4cqh;font-size:1.8cqh;padding:0}
.close{position:absolute;right:3cqw;top:2cqh;width:8cqw;height:4.5cqh;font-size:1.4cqh;padding:.5cqh .5cqw 1cqh 1.5cqw;z-index:2}.overlay{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#030806a8;backdrop-filter:blur(3px);padding:3cqh}.modal-panel{position:relative;width:48cqw;max-height:94cqh;padding:7cqh 5cqw 4cqh;color:var(--ink);background:url('assets/ui-panel.png') center/100% 100% no-repeat;filter:drop-shadow(0 12px 30px #000b);transform-origin:85% 90%;animation:unfold .32s ease-out;overflow:auto;scrollbar-width:thin;scrollbar-color:#685a3b transparent}.modal-panel .eyebrow{font-size:1.3cqh;letter-spacing:.15em;color:#675035}.modal-panel h2{font-size:3cqh;letter-spacing:.15em;margin:1.6cqh 0 2cqh;font-weight:700}.modal-panel p{font-size:1.7cqh;line-height:1.9;margin:1.4cqh 0;color:#383426}.modal-panel button.action{display:block;width:100%;text-align:center;min-height:5.5cqh;margin-top:.8cqh;font-size:1.7cqh;padding:1.3cqh 3cqw}.modal-panel button.action:hover{filter:brightness(.95) drop-shadow(0 3px 3px #0004)}.puzzle-input{border:0;border-bottom:2px solid #786044;background:#ab95612b;color:#34291b;text-align:center;width:100%;height:7cqh;font:3.6cqh Georgia;letter-spacing:.4em;padding:1cqh;margin-top:1cqh;outline-color:#544321}.puzzle-row{display:flex;gap:.8cqw;margin:2cqh 0}.puzzle-row button{flex:1;min-height:7cqh;padding:1cqh;font-size:1.8cqh}.puzzle-row button.done{filter:sepia(1) brightness(.65)}form>label{font-size:1.5cqh}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:1.3cqh 0;border-bottom:1px dashed #77664f55;font-size:1.7cqh}.setting-row small{font-size:1.3cqh}.setting-row input[type=checkbox]{appearance:none;width:4cqh;height:4cqh;background:url('assets/ui-seal.png') center/contain no-repeat;opacity:.4;cursor:pointer;flex:none}.setting-row input:checked{opacity:1;filter:sepia(.4) drop-shadow(0 0 4px #7c4217)}.volume-row input{width:16cqw;accent-color:#6e4b2d}.ending-photo{display:block;width:100%;height:15cqh;object-fit:cover;margin-bottom:1cqh;filter:sepia(.3)}.end-label{font-size:1.4cqh;color:#6f3027}
#toast{position:absolute;z-index:50;left:50%;top:12cqh;transform:translate(-50%,-1cqh);background:url('assets/ui-button.png') center/100% 200% no-repeat;color:var(--ink);padding:1.5cqh 4cqw;min-width:24cqw;text-align:center;font-size:1.6cqh;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.visible{opacity:1;transform:translate(-50%,0)}#scare{position:absolute;inset:0;z-index:99;background:#000;display:flex;align-items:center;justify-content:center}#scare img{width:100%;height:100%;object-fit:cover;animation:scare .13s infinite alternate}#scare span{position:absolute;bottom:10%;font-size:3cqh;text-shadow:0 2px 10px #000;letter-spacing:.3em}
@keyframes unfold{from{opacity:0;transform:translateY(2cqh) rotate(2deg) scale(.85)}to{opacity:1;transform:none}}@keyframes scare{from{transform:scale(1.03) translateX(-3px);filter:contrast(1.5)}to{transform:scale(1.1) translateX(3px);filter:contrast(1.8)}}
@media(max-width:720px) and (orientation:portrait){#app{width:100vw;height:100dvh}.home-image{background-position:43% center}.title-content{left:8cqw;right:8cqw;bottom:7cqh;width:auto}.home-actions button{min-width:37cqw;height:6.5cqh;font-size:2cqh}.home-notes{font-size:1.3cqh}header{top:1cqh}.brand{font-size:1.6cqh}.brand small{font-size:1cqh}.header-right button{width:20cqw;height:4.6cqh;font-size:1.3cqh;padding:.6cqh 1cqw .8cqh 3cqw}.game-heading{top:8cqh;left:4cqw}.game-heading h2{font-size:2.5cqh}.game-heading p{max-width:54cqw;font-size:1.3cqh}.game-heading #hint{width:25cqw;font-size:1.3cqh}.scene-caption{top:22cqh;max-width:78cqw;width:78cqw;font-size:1.2cqh}.reveal{top:15cqh;width:25cqw;font-size:1.3cqh}.hotspot{width:4.2cqh;height:4.2cqh}.hotspot:after{font-size:1.3cqh;padding:1cqh 6cqw}.dialogue{left:1cqw;bottom:7cqh;width:98cqw;height:23cqh;padding:4cqh 5cqw 3cqh}.dialogue p{font-size:1.55cqh;line-height:1.8;width:76cqw}.speaker{font-size:1.6cqh}#next{top:13cqh;left:65cqw;width:24cqw;font-size:1.4cqh}.portrait{left:62cqw;bottom:11cqh;width:29cqh;opacity:.95}.room-nav{bottom:1cqh;left:2cqw;gap:0}.room-nav button{width:29cqw;font-size:1.25cqh;height:5cqh}.room-nav>span{font-size:.8cqh}.props-dock{bottom:31cqh;left:3cqw;right:auto;gap:3cqw}.prop-button{width:22cqw;height:11cqh}.prop-button>.sprite{width:7.5cqh;height:7.5cqh}.prop-button>span:last-child{font-size:1.35cqh}.field-drawer{top:22cqh;right:4cqw;width:92cqw;height:49cqh;padding:7cqh 10cqw 3cqh}.field-drawer .close{right:7cqw;top:2.5cqh}.close{width:22cqw;font-size:1.3cqh;right:8cqw;top:2.5cqh}.section-title h3{font-size:2cqh}.item{height:11cqh;font-size:1.5cqh}.item .sprite{width:7cqh;height:7cqh}.inventory{gap:1cqh 2cqw}.note{font-size:1.6cqh}.notes-pager button{width:20cqw}.modal-panel{width:96cqw;padding:7cqh 10cqw 4cqh;max-height:94cqh}.modal-panel h2{font-size:2.6cqh}.modal-panel p{font-size:1.6cqh}.modal-panel button.action{font-size:1.55cqh;min-height:5.5cqh}.modal-panel .eyebrow{font-size:1.2cqh}.setting-row{font-size:1.6cqh}.volume-row input{width:35cqw}.puzzle-row button{font-size:1.5cqh}.ending-photo{height:12cqh}#toast{top:19cqh;min-width:80cqw;font-size:1.5cqh}}
#app,#game,.scene{overflow:clip}
.field-drawer{top:10cqh;height:52cqh}.item{height:11cqh}
.portrait{width:35cqh;bottom:-3cqh}
.volume-row input[type=range]{appearance:none;height:2.6cqh;border:0;background:url('assets/ui-dialogue.png') center/100% 180% no-repeat;cursor:pointer}
.volume-row input[type=range]::-webkit-slider-thumb{appearance:none;width:4cqh;height:4cqh;background:url('assets/ui-seal.png') center/contain no-repeat;border:0}
.volume-row input[type=range]::-moz-range-thumb{width:4cqh;height:4cqh;background:url('assets/ui-seal.png') center/contain no-repeat;border:0}
@media(max-width:720px) and (orientation:portrait){.scene>img{object-fit:contain}.portrait{width:29cqh;bottom:11cqh}.field-drawer{top:14cqh;height:43cqh}.item{height:9.5cqh}.item .sprite{width:6cqh;height:6cqh}.aside-note{margin-top:1cqh}}
@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}
.hotspot.label-above:after{top:auto;bottom:calc(100% + .5cqh)}
/* Reserve the upper HUD for utilities; confine the portrait to its dialogue. */
.props-dock{top:1.7cqh;left:30cqw;right:auto;bottom:auto;gap:1cqw;z-index:13}
.prop-button{flex-direction:row;justify-content:center;gap:.5cqw;width:14cqw;height:5.4cqh}
.prop-button>.sprite{width:5cqh;height:5cqh}
.prop-button>span:last-child{font-size:1.45cqh;white-space:nowrap}
.scene-caption{top:auto;bottom:21cqh}
.dialogue{width:96cqw;height:14cqh;padding:2cqh 10cqw 1.5cqh 12cqw;overflow:hidden}
.dialogue .portrait{left:0;bottom:-13cqh;width:18cqh;opacity:1}
#next.dialogue-arrow{left:auto;right:-6cqw;top:1.5cqh;width:5cqw;height:7cqh;min-height:0;padding:0;border:0;background:none!important;box-shadow:none;filter:none;color:var(--ivory)!important;text-shadow:0 1px 3px #000;font-size:4cqh;line-height:1;pointer-events:auto}
#next.dialogue-arrow:hover{color:#fff2c6!important;transform:translateX(2px)}
@media(max-width:720px) and (orientation:portrait){
 .props-dock{top:6.5cqh;left:3cqw;right:auto;bottom:auto;gap:3cqw}
 .prop-button{width:32cqw;height:5.5cqh;gap:1cqw}
 .prop-button>.sprite{width:4.5cqh;height:4.5cqh}
 .prop-button>span:last-child{font-size:1.35cqh}
 .game-heading{top:14cqh}.scene-caption{top:29cqh;bottom:auto}
 .dialogue{width:98cqw;height:23cqh;padding:4cqh 10cqw 3cqh 30cqw}
 .dialogue .portrait{left:-1cqw;bottom:-5cqh;width:15cqh}
 .dialogue p{width:auto;font-size:1.5cqh;line-height:1.7}
 #next.dialogue-arrow{left:auto;right:-7cqw;top:8cqh;width:9cqw;height:6cqh;font-size:3.8cqh}
}
