/* Keep the story and its next button together in the mobile viewport. */
@media(max-width:760px){
 html:has(body.is-prologue){overflow-y:auto;scrollbar-gutter:auto}
 body.is-prologue{margin:0}
 .is-prologue .site-wrap #bgm-controls{display:none!important}
 .is-prologue .site-wrap{width:100%;height:100dvh;min-height:0;margin:0!important;padding:0!important;border:0!important;border-radius:0;box-shadow:none}
 .is-prologue #app{height:100%;min-height:0;padding:0}
 .is-prologue .life-prologue{height:100%;min-height:0;padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border:0;gap:0}
 .is-prologue .prologue-top{flex:none;align-items:center;gap:10px;font-size:10px;letter-spacing:0}
 .is-prologue .prologue-skip{min-height:36px;padding:4px 0;font-size:11px;white-space:nowrap}
 .is-prologue .prologue-scene{flex:1;min-height:0;max-width:none;padding:clamp(12px,4dvh,32px) 0 14px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
 .is-prologue .prologue-eyebrow{font-size:11px;letter-spacing:1px;margin:0 0 10px}
 .is-prologue .prologue-scene h1{font-size:clamp(21px,6vw,27px);line-height:1.4;margin:0 0 14px}
 .is-prologue .prologue-copy{font-size:14px;line-height:1.75}
 .is-prologue .prologue-detail{font-size:13px;line-height:1.65;margin:16px 0 0;padding:10px 12px}
 .is-prologue .prologue-foot{font-size:11px;line-height:1.6;margin:14px 0 0}
 .is-prologue .prologue-symbol{font-size:130px;top:10px}
 .is-prologue .prologue-stats{gap:7px;margin:14px 0 0}
 .is-prologue .prologue-stats>div{padding:7px 4px}
 .is-prologue .prologue-stats span{font-size:11px}
 .is-prologue .prologue-stats strong{font-size:23px;line-height:1.4}
 .is-prologue .prologue-portrait{float:right;width:76px;height:76px;margin:0 0 10px 12px}
 .is-prologue .prologue-controls{flex:none;flex-direction:column;align-items:stretch;gap:8px;padding-top:10px}
 .is-prologue .prologue-dots{gap:6px;justify-content:center;height:18px}
 .is-prologue .prologue-dots i{width:18px}
 .is-prologue .prologue-actions{display:flex;gap:6px;flex-wrap:nowrap;justify-content:space-between}
 .is-prologue .prologue-actions button{font-size:11px;min-height:44px;padding:6px;white-space:nowrap}
 .is-prologue .prologue-actions .prologue-next{font-size:13px;padding:10px 12px;margin-left:0;flex:1}
 .is-prologue .prologue-crossing .prologue-scene{padding-top:clamp(80px,22dvh,195px)}
 .is-prologue .prologue-crossing .prologue-landscape{background:linear-gradient(180deg,#14182030 0%,#14182020 20%,#141820ed 48%,#141820 70%),url('assets/prologue-crossing-v1.png') 65% top/auto 60dvh no-repeat}
}
@media(max-width:760px) and (max-height:650px){
 .is-prologue .life-prologue{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .is-prologue .prologue-scene{padding-top:10px;padding-bottom:8px}
 .is-prologue .prologue-scene h1{font-size:21px;line-height:1.35;margin-bottom:10px}
 .is-prologue .prologue-copy{font-size:13px;line-height:1.65}
 .is-prologue .prologue-detail{font-size:12px;line-height:1.55;margin-top:10px;padding:8px 10px}
 .is-prologue .prologue-foot{margin-top:10px}
 .is-prologue .prologue-crossing .prologue-scene{padding-top:80px}
 .is-prologue .prologue-portrait{width:60px;height:60px}
}