/* V18.4: sizes below are CSS pixels, independent of the canvas coordinate system. */
#shell{height:var(--bert-viewport-height,100dvh);width:var(--bert-viewport-width,100%);}
#dialogue,#dialogue #line,#toast,#interact{font-synthesis:none;text-rendering:optimizeLegibility;}
#captionContrast{min-height:44px;}
.story-support-footer{margin:36px auto 8px;max-width:48rem;}
.echo-filter{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;}
.echo-filter button{min-height:44px;}
.echo-entry{border-bottom:1px solid #a9bea23d;padding:14px 0;}
.echo-entry summary{cursor:pointer;line-height:1.7;}
.echo-entry p{white-space:pre-line;overflow-wrap:anywhere;}
.echo-entry small{display:block;color:var(--forest-muted,#bdcebf);margin-top:6px;}
@media(pointer:coarse),(max-width:900px){
 :root,body{--caption-size:16px;}
 body[data-text-size="large"]{--caption-size:19px;}
 #stage #sceneViewport #dialogue #line,#stage #sceneViewport #dialogue #speaker,#stage #sceneViewport #dialogue .subtitle-colon,#stage.is-play-layout #sceneViewport #toast,#stage.is-play-layout #sceneViewport #interact{font-size:16px!important;line-height:1.5!important;}
 body[data-text-size="large"] #stage #sceneViewport #dialogue #line,body[data-text-size="large"] #stage #sceneViewport #dialogue #speaker,body[data-text-size="large"] #stage #sceneViewport #dialogue .subtitle-colon,body[data-text-size="large"] #stage.is-play-layout #sceneViewport #toast,body[data-text-size="large"] #stage.is-play-layout #sceneViewport #interact{font-size:19px!important;line-height:1.5!important;}
 #stage #sceneViewport #touch{padding:0!important;left:max(12px,calc(env(safe-area-inset-left,0px) + 10px));right:max(12px,calc(env(safe-area-inset-right,0px) + 10px));bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 10px));}
 #stage #touch button{min-width:52px;min-height:52px;touch-action:none;}
 #stage #touch [data-key="jump"]{min-width:60px;min-height:56px;}
 #stage #dialogueNext{min-width:44px;min-height:44px;}
 #stage .top-actions>button,#stage #settingsToggle{min-height:44px;}
 #guide .guide-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;}
 #guide .guide-tabs button{flex-shrink:0;min-height:44px;}
 #guideContent{font-size:16px;line-height:1.8;}
 #guideContent .genre-prose{font-size:18px;line-height:1.95;}
 body[data-text-size="large"] #guideContent{font-size:19px;}
 body[data-text-size="large"] #guideContent .genre-prose{font-size:20px;}
}
#guideContent .story-support-footer{display:block;}
@media(pointer:coarse),(max-width:900px){
 #guideContent .echo-entry p,#guideContent .echo-entry summary,#guideContent .echo-filter button{font-size:16px;}
 body[data-text-size="large"] #guideContent .echo-entry p,body[data-text-size="large"] #guideContent .echo-entry summary{font-size:19px;}
}

/* V18.5 · A phone keeps a readable route, quiet tools and space for thumbs.
 * These final rules replace the old portrait cqw miniatures. The world frame
 * itself is measured by BertUI, never stretched by a CSS transform. */
html{scrollbar-gutter:auto}
#shell{position:fixed;top:var(--bert-viewport-top,0px);left:var(--bert-viewport-left,0px);min-width:0;min-height:0}
#stage{--bert-touch-size:64px;--bert-jump-size:72px;--bert-touch-gap:12px}
#stage #sceneViewport .topbar{top:max(8px,calc(env(safe-area-inset-top,0px) + 4px));left:max(12px,calc(env(safe-area-inset-left,0px) + 10px));right:max(12px,calc(env(safe-area-inset-right,0px) + 10px))}
#stage.has-compact-hud.is-play-layout #storyBook{display:none!important}
#stage.has-compact-hud #sceneViewport #hud{left:max(14px,calc(env(safe-area-inset-left,0px) + 12px));top:max(10px,calc(env(safe-area-inset-top,0px) + 6px));width:calc(100% - 208px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));max-width:520px}
#stage.has-compact-hud #sceneViewport #chapter{font-size:12px;line-height:1.4;margin:0 0 2px;width:auto}
#stage.has-compact-hud #sceneViewport #name{font-size:16px;line-height:1.45;width:auto;overflow-wrap:anywhere;letter-spacing:.015em}
#stage.has-compact-hud #sceneViewport #objective,#stage.has-compact-hud #sceneViewport .readouts{display:none}
#stage #sceneViewport #touch{left:max(14px,calc(env(safe-area-inset-left,0px) + 12px));right:max(14px,calc(env(safe-area-inset-right,0px) + 12px));bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 12px));padding:0!important}
#stage #sceneViewport #touch>div{gap:var(--bert-touch-gap);align-items:flex-end}
#stage #sceneViewport #keyHints{bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 12px));font-size:12px;line-height:1.55}
#stage #sceneViewport .settings-menu{width:min(292px,calc(100vw - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:var(--settings-limit,420px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding-block:12px}
#stage #sceneViewport .settings-menu button,#stage #sceneViewport .settings-menu summary{font-size:14px;line-height:1.5;white-space:normal;min-height:44px}
#stage #sceneViewport .settings-menu input:not([type=range]){font-size:16px!important;line-height:1.5;min-height:44px}
#stage #sceneViewport .settings-menu output{font-size:13px;line-height:1.7}
#stage #sceneViewport .settings-menu .ambience-volume{font-size:14px}
#stage #sceneViewport #skipStory{min-height:44px;font-size:13px;padding:5px 9px}
#stage #guide,#stage #chapterMap{padding:max(10px,calc(env(safe-area-inset-top,0px) + 6px)) max(12px,calc(env(safe-area-inset-right,0px) + 8px)) max(10px,calc(env(safe-area-inset-bottom,0px) + 6px)) max(12px,calc(env(safe-area-inset-left,0px) + 8px));min-height:0}
#stage #guide .guide-book{width:min(960px,100%);height:100%;max-height:900px;min-height:0}
#stage #guide .guide-heading,#stage #guide .guide-tabs,#stage #guide .guide-footer{flex:none}
#stage #guide .guide-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scroll-padding-block:20px;overflow-wrap:anywhere}
#stage #guide .guide-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;gap:6px;padding:6px 12px;overscroll-behavior-x:contain;touch-action:pan-x}
#stage #guide .guide-tabs button{flex:0 0 auto;min-width:60px;min-height:44px;padding:8px 10px!important;font-size:14px!important;white-space:nowrap}
#stage #guide .guide-close{min-width:44px;min-height:44px;flex:none}
#stage #guide .guide-heading h2{font-size:21px;line-height:1.4;overflow-wrap:anywhere}
#stage #guide .guide-heading .eyebrow{font-size:12px;line-height:1.5}
#stage #guide #guideContent p,#stage #guide #guideContent li,#stage #guide #guideContent summary{font-size:16px;line-height:1.85}
#stage #guide #guideContent h3{font-size:21px;line-height:1.6}
#stage #guide #guideContent .genre-prose,#stage #guide #guideContent .genre-prose p,#stage #guide #guideContent .story-novel p{font-size:18px;line-height:1.95!important;text-align:start}
#stage #guide .guide-footer{display:flex;min-height:56px;height:auto;gap:8px 12px;padding:8px 16px}
#stage #guide .guide-footer p{font-size:12px;line-height:1.55;margin:0}
#stage #guide .guide-footer button{font-size:14px;min-height:44px;flex-shrink:0}
#stage #guide :is(input,select,textarea){font-size:16px!important;line-height:1.6;scroll-margin-block:16px;max-width:100%}
#stage #guide .story-reader-controls,#stage #guide .story-ai-config{min-width:0}
#stage #guide .story-support-footer{height:auto;min-height:0;display:block;overflow-wrap:anywhere}
#stage .map-book{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
#stage #chapterMap .map-heading,#stage #chapterMap .map-act,#stage #chapterMap #levels,#stage #chapterMap .map-footer{flex-shrink:0}
#stage #chapterMap .map-footer{display:flex;height:auto;min-height:44px}
#stage #chapterMap .map-note{font-size:12px;line-height:1.7}
#stage #letter{max-width:calc(100% - 32px);max-height:calc(100% - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 28px);font-size:16px;line-height:1.85;touch-action:pan-y;overscroll-behavior:contain;scroll-padding-block:16px}
#stage #letter .letter-route,#stage #letter small{font-size:13px;line-height:1.8}
#stage #closeletter{font-size:15px;min-height:44px}
#stage .card{min-height:0;max-height:calc(100% - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));touch-action:pan-y;overscroll-behavior:contain}
#stage .card p,#stage .card dd,#stage .card dt{font-size:16px;line-height:1.75}
#stage .card button{min-height:44px;font-size:15px}
body[data-text-size="large"] #stage #guide #guideContent p,body[data-text-size="large"] #stage #guide #guideContent li,body[data-text-size="large"] #stage #guide #guideContent summary{font-size:19px}
body[data-text-size="large"] #stage #guide #guideContent .genre-prose,body[data-text-size="large"] #stage #guide #guideContent .genre-prose p,body[data-text-size="large"] #stage #guide #guideContent .story-novel p{font-size:20px}
@media(pointer:coarse){
 #stage #sceneViewport #keyHints{display:none}
 #stage #sceneViewport #meter{left:calc(50% - 26px);bottom:max(19px,calc(env(safe-area-inset-bottom,0px) + 17px));width:52px}
}
@media(orientation:portrait){
 #stage.has-menu .menu-panel,#stage.has-menu .menu-panel.season-expanded{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start;gap:clamp(24px,5vh,48px);padding:max(76px,calc(env(safe-area-inset-top,0px) + 58px)) 7% max(32px,calc(env(safe-area-inset-bottom,0px) + 24px));scroll-padding-block:24px}
 #stage.has-menu .menu-title,#stage.has-menu .menu-departure{flex-shrink:0}
 #stage.has-menu .menu-panel h1{font-size:clamp(42px,12vw,62px)}
 #stage.has-menu .menu-letter{font-size:20px}
 #stage.has-menu .tagline{font-size:22px;margin-top:15px}
 #stage.has-menu .menu-hook{font-size:17px;line-height:1.65}
 #stage.has-menu .journey-copy{font-size:14px;line-height:1.85}
 #stage.has-menu .menu-secondary .text-button,#stage.has-menu .menu-literary-links .text-button{font-size:14px;min-height:44px}
 #stage.has-menu #menuProgress{font-size:13px;white-space:normal}
 #stage #letter{transform:translate(-50%,-50%);width:calc(100% - 32px);padding:24px}
 #stage #guide .guide-heading{padding:12px 15px;gap:8px}
 #stage #guide .guide-content{padding:16px!important}
 #stage #guide .guide-footer{padding:8px 12px;flex-wrap:wrap}
 #stage #guide .guide-footer p{flex:1 1 150px;max-width:none}
 #stage #guide .guide-footer .primary{max-width:none;flex:1 0 auto;width:auto}
}
@media(orientation:landscape) and (max-height:500px){
 #stage.has-menu .menu-panel,#stage.has-menu .menu-panel.season-expanded{overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start;gap:20px;padding-top:66px;padding-bottom:24px}
 #stage.has-menu .menu-panel h1{font-size:42px}
 #stage.has-menu .menu-hook{font-size:15px;line-height:1.6}
 #stage.has-menu .journey-copy{font-size:13px;line-height:1.75}
 #stage #guide .guide-heading{padding:8px 16px!important}
 #stage #guide .guide-heading .eyebrow{display:none}
 #stage #guide .guide-heading h2{font-size:19px}
 #stage #guide .guide-content{padding:12px 20px!important}
 #stage #guide .guide-footer{padding:5px 14px!important}
 #stage #chapterMap .map-heading h2{font-size:21px}
 #stage #chapterMap .level{min-height:74px}
 #stage #chapterMap .level b{font-size:16px}
 #stage #chapterMap .level small,#stage #chapterMap .level span{font-size:12px}
}
@media(max-width:360px),(max-height:300px){
 #stage{--bert-touch-size:56px;--bert-jump-size:64px;--bert-touch-gap:8px}
 #stage.has-compact-hud #sceneViewport #hud{width:calc(100% - 182px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
 #stage #sceneViewport .top-actions{gap:0}
 #stage #sceneViewport .top-actions>button,#stage #sceneViewport #settings>summary{min-width:44px;font-size:12px!important}
}
/* Deferring a live caption must also beat the legacy interaction visibility
 * override; the message clock sees this same data attribute. */
#stage.is-play-layout #sceneViewport :is(#dialogue,#toast,#interact)[data-caption-deferred="true"]{visibility:hidden!important}
/* Completion and arrival keep a full finger target even in short landscape
 * viewports. The card remains the scrolling owner for its longer contents. */
#stage #overlay:not([data-panel="menu"]){padding:max(14px,calc(env(safe-area-inset-top,0px) + 12px)) max(14px,calc(env(safe-area-inset-right,0px) + 12px)) max(14px,calc(env(safe-area-inset-bottom,0px) + 12px)) max(14px,calc(env(safe-area-inset-left,0px) + 12px))}
#stage #overlay .card{min-width:0;min-height:0;max-width:100%;max-height:100%;overflow:auto}
#stage #overlay .card button{min-height:44px;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}