/* Relative to the existing 16:9 stage, including phone portrait sizes. */
.story-active #game { filter: brightness(.65) blur(2px); }
#game { transition: filter .4s ease; }
.story-active > :not(#story):not(#game) { visibility: hidden; pointer-events: none; }
#story { position:absolute; inset:0; z-index:30; overflow:hidden; background:linear-gradient(0deg,#081a1ca8,#102b3022 65%); cursor:pointer; touch-action:manipulation; user-select:none; }
#story[hidden], #story [hidden] { display:none; }
#story.story-entering { background:#071b1d; }
#story.story-entering > * { visibility:hidden; }
#story-background { position:absolute; inset:0; background-position:center; background-size:cover; }
#story-background.story-in { animation:scene-reveal .55s ease-out; }
#story.illustrated::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg,#061e2070,transparent 65%); }
#story-portrait { position:absolute; height:78%; width:44%; left:2%; bottom:4%; z-index:1; transform:translateX(-20px); opacity:0; transition:transform .4s ease,opacity .35s ease; }
#story-portrait.portrait-right { left:auto; right:2%; transform:translateX(20px); }
#story-portrait.portrait-in { opacity:1; transform:translateX(0); }
#story-portrait.portrait-momo { height:67%; width:36%; bottom:20%; }
#story-image { display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 10px 12px #0005); }
#story-box { position:absolute; z-index:3; bottom:4%; left:5%; width:90%; min-height:24%; padding:2.1% 3% 3.2%; color:#f5ead1; background:linear-gradient(120deg,#123b3af2,#112e32f5); border:1px solid #c5a66b; border-block:2px solid #c5a66b; box-shadow:0 8px 22px #0005,inset 0 0 0 4px #d9bd7a0c; }
#story-box::before { content:''; position:absolute; top:-5px; left:12px; width:9px; height:9px; background:#d5b77c; transform:rotate(45deg); }
#story-name { display:block; color:#e8c886; font:clamp(12px,2vw,23px) 'PMingLiU',serif; letter-spacing:3px; margin-bottom:1.3%; }
#story-text { font:clamp(12px,1.9vw,24px)/1.65 'Microsoft JhengHei','PingFang TC',sans-serif; letter-spacing:1px; color:#f5ead1; margin:0; min-height:1.65em; }
#story-text.story-large { font:clamp(20px,3vw,37px)/1.35 'PMingLiU',serif; letter-spacing:5px; }
#story-hint { display:block; margin-top:1.2%; color:#b6bcb0; font:clamp(8px,.95vw,12px)/1.5 sans-serif; letter-spacing:1px; }
.story-next { position:absolute; bottom:12%; right:2%; color:#cfac69; font-size:10px; animation:clue-breathe 1.7s infinite; }
#story-title { position:absolute; z-index:2; inset:0; margin:0; display:grid; place-items:center; color:#f3e4c0; text-shadow:0 3px 20px #071c1b; font:clamp(35px,7vw,88px) 'PMingLiU',serif; letter-spacing:.4em; background:#061d2329; }
@keyframes scene-reveal { from { opacity:0; transform:scale(1.025); } to { opacity:1; transform:scale(1); } }
@media(max-width:600px) { #story-portrait { width:48%; height:76%; bottom:6%; } #story-portrait.portrait-momo { width:38%; height:65%; bottom:23%; } #story-box { left:3%; width:94%; bottom:3%; padding:2% 3%; min-height:27%; } #story-text { font-size:clamp(11px,2.5vw,15px); } #story-name { font-size:clamp(12px,2.8vw,18px); margin-bottom:1%; } #story-hint { font-size:8px; margin-top:1%; } }
@media(prefers-reduced-motion:reduce) { #story-portrait,#game { transition:none; } #story-background.story-in { animation:none; } }