/* Keep reading and film controls above the game HUD, including short screens. */
.metaverse-world:has(.intro-overlay) :is(.metaverse-actions,.metaverse-progress,.hotspot){visibility:hidden;pointer-events:none}
.metaverse-world .intro-overlay{left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);display:block;box-sizing:border-box}
.metaverse-world .verse-overlay{top:50%;max-height:calc(100dvh - 170px);overflow:auto;overscroll-behavior:contain;scroll-padding:20px}
@media(max-width:760px){
 .header .utilities button,body:not([data-view=scene]) .header .utilities button,body[data-view=scene] .header .utilities button{min-width:44px;min-height:44px}
 .header nav .nav small,body:not([data-view=scene]) .header nav .nav small{font-size:10px}
 .destination-menu .voyage-phases .bilingual>small{font-size:9px}
 .destination-menu .tile-name .bilingual>[lang=ko]{font-size:13px}
 .destination-menu .tile-name .bilingual>small{font-size:10px}
 .destination-menu .voyage-navigation{scrollbar-width:thin;scrollbar-color:#7c816e #152127;overscroll-behavior:contain}
 .metaverse-actions .bilingual>[lang=ko]{font-size:13px}
 .metaverse-actions .bilingual>small{font-size:10px}
 .metaverse-common button{min-height:44px}
 .metaverse-common .bilingual>small{font-size:10px}
 .metaverse-world .world .hotspot{width:44px;height:44px;min-width:44px;min-height:44px}
 .metaverse-world .verse-overlay{top:calc(50% + 30px);width:calc(100% - 32px);max-height:calc(100dvh - 160px);padding:22px}
 .bethlehem-caption small{font-size:12px}
 .nativity-controls{bottom:max(16px,env(safe-area-inset-bottom));gap:6px}
 .nativity-controls .btn{padding:8px 12px;min-width:0;flex:1;max-width:150px}
 .film-audio-notice{max-height:calc(100dvh - 160px);overflow:auto;padding:18px}
 dialog.bethlehem-action{max-height:50dvh;padding:12px 16px;overflow:auto}
 dialog.bethlehem-action .dialog-content{padding:8px 4px}
 .bethlehem-performing .bethlehem-caption{bottom:54dvh}
 .metaverse-actions{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-height:500px) and (max-width:1100px){
 body[data-view=scene] .header{height:56px;padding:0 16px}
 body[data-view=scene] .header nav{display:none}
 .metaverse-location{top:60px;left:16px;right:auto}
 .location-control{min-height:44px;padding:5px 12px}
 .metaverse-world .verse-overlay{top:calc(50% + 25px);max-height:calc(100dvh - 78px);width:min(620px,calc(100% - 32px));padding:18px 24px}
 .metaverse-world:has(.intro-overlay) .metaverse-location{visibility:hidden}
 .metaverse-actions{left:16px;right:auto;bottom:8px;transform:none;width:66%;padding:3px}
 .metaverse-actions .action-list button{min-height:66px!important;padding:4px;gap:3px}
 .metaverse-actions .action-number{display:none}
 .metaverse-common{right:12px;bottom:12px;flex-direction:column;padding:2px}
 .metaverse-common button{min-height:44px;min-width:80px}
 .metaverse-progress{left:auto;right:16px;top:65px;bottom:auto}
 .bethlehem-caption{left:16%;right:16%;bottom:72px;font-size:14px;line-height:1.55}
 .bethlehem-caption small{font-size:11px;line-height:1.5}
 .nativity-controls{left:auto;right:16px;bottom:8px;gap:6px}
 .nativity-controls .btn{padding:7px 12px;min-height:48px}
 .film-audio-notice{max-height:calc(100dvh - 80px);overflow:auto;padding:12px 18px;font-size:13px}
 .film-audio-notice button{margin-top:8px}
 dialog.bethlehem-action{max-height:65dvh;width:55%;left:auto;right:12px;bottom:8px;padding:10px 16px}
 .bethlehem-performing .bethlehem-caption{left:16px;right:60%;bottom:20px;font-size:13px}
 body:not([data-view=scene]) .header{height:100px;grid-template-rows:44px 40px;padding:4px 15px}
 .destination-menu .voyage-navigation{top:110px;bottom:16px;left:16px;right:36%;overflow:auto}
 .destination-menu .voyage-navigation-heading h2{font-size:20px;margin:0}
 .destination-menu .voyage-destinations{grid-template-columns:repeat(2,minmax(0,1fr))}
 .destination-menu[data-mode=landscape] .voyage-place{top:110px;bottom:16px;left:67%!important;right:16px!important;width:auto!important;max-height:none;padding:10px 0;overflow:auto}
}

.beatitudes-reading{max-height:42dvh;overflow-y:auto;overscroll-behavior:contain;flex-shrink:1;scroll-padding:12px}
.beatitudes-reading section{padding:12px;border-left:2px solid transparent;transition:background .2s}
.beatitudes-reading section.reading-current{background:#d8bd8520;border-left-color:#d8bd85}
.beatitudes-reading section+section{margin-top:12px}
.beatitudes-reading .verse-en{margin-top:8px}
@media(max-height:500px){.beatitudes-reading{max-height:32dvh}}