/* V5 shared navigation: its width breakpoint is independent of the camera. */
:root{--site-header-height:80px}
html{scroll-padding-top:calc(var(--site-header-height) + 24px)}
.site-header{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding:16px 24px;background:var(--night);color:var(--cream);pointer-events:auto}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.site-header .brand{gap:4px;font-size:16px;line-height:24px;letter-spacing:0;flex-shrink:0}
.site-header .brand small{font-size:12px;line-height:20px;font-weight:700;letter-spacing:0}
.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:16px 24px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:16px;font-weight:700;line-height:24px;white-space:nowrap}
.header-cta:hover{background:var(--cream)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-actions>.header-cta,.header-language,.site-nav{display:none}
.site-header .menu-trigger{display:flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;letter-spacing:0}
.menu-trigger svg{width:20px;height:20px}
.language-switch{display:inline-flex;align-items:center;border:1px solid #f5ebc347;border-radius:999px;padding:0 4px;gap:0;align-self:flex-start}
.language-switch button,.current-language{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:44px;padding:8px;font-size:16px;font-weight:700;line-height:24px;border-radius:999px;white-space:nowrap}
.current-language{color:var(--gold)}
.current-language:after{content:'';position:absolute;bottom:5px;height:2px;width:20px;border-radius:2px;background:var(--gold);left:50%;transform:translateX(-50%)}
.language-divider{width:1px;height:16px;background:#f5ebc347}
.language-compact{display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;padding:0;border:1px solid #f5ebc347;border-radius:999px;font-size:14px;font-weight:700;line-height:24px}
.language-switch button:hover,.language-compact:hover,.site-header .menu-trigger:hover{background:#f5ebc30d}
.header-actions>.header-language{display:none;align-self:center}
#menuDialog .menu-language{display:inline-flex;margin-bottom:24px}
#menuDialog .menu-language button,#menuDialog .menu-language .current-language{min-width:116px}
#menuDialog .language-caption{font-size:12px;line-height:20px;font-weight:700;letter-spacing:1px;margin-bottom:12px;color:#f5ebc3b3}
.site-nav button{width:80px;min-height:44px;padding:10px 0;text-align:left;font-size:16px;font-weight:700;line-height:24px;white-space:nowrap}
.site-nav button:hover{color:var(--gold)}
body.dialog-open{overflow:hidden}
#menuDialog{inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:80px 24px 40px;overflow-y:auto;overscroll-behavior:contain}
.site-menu-nav{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:24px}
.site-menu-nav button{text-align:left;min-height:56px;padding:14px 0;border-bottom:1px solid #f5ebc340;font-weight:700}
.site-menu-nav button::after{content:'↗';float:right;color:var(--gold)}
.chapter-menu{margin-top:24px}
.chapter-menu summary{min-height:44px;padding:12px 0;cursor:pointer}
.chapter-menu .chapter-nav{margin-top:12px}
@media(min-width:1024px){
 :root{--site-header-height:152px}
 .site-header{padding:20px 40px 16px}
 .site-nav{display:flex;gap:16px}
 .header-actions{gap:16px}
 .header-actions>.header-cta{display:inline-flex;width:236px}
 .header-actions>.header-language{display:inline-flex}
 .language-compact{display:none}
 .site-header .menu-trigger{display:none}
 body:not(.cinema) .opening{padding-top:calc(var(--site-header-height) + 48px)}
 body.cinema .hero-copy{top:max(17vh,calc(var(--site-header-height) + 24px))}
 body.cinema .copy-left{top:max(18vh,calc(var(--site-header-height) + 24px))}
 body.cinema .worlds-heading{top:max(14vh,calc(var(--site-header-height) + 24px))}
 body.cinema .ending-copy{top:max(16vh,calc(var(--site-header-height) + 24px))}
 body.cinema .scene-grid{top:max(17vh,calc(var(--site-header-height) + 24px))}
 body.cinema .show .scene-grid{top:max(23vh,calc(var(--site-header-height) + 24px))}
}
@media(min-width:1280px){.site-nav{gap:32px}}
@media(min-width:1024px) and (max-height:850px){
 body.cinema .portal-grid{bottom:6vh}
 body.cinema .island{height:18vh}
 body.cinema .portal-tower{height:25vh}
 body.cinema .portal-wheel{height:22vh}
 body.cinema .portal-gift{height:15vh}
 body.cinema .portal:nth-child(2){margin-top:4vh;translate:0 2vh}
}
@media(max-width:359px){
 .site-header{padding-inline:16px}
 .header-top{gap:12px}
 .site-header .brand{font-size:14px}
 .site-header .brand small{font-size:11px}
 #menuDialog{padding-inline:20px}
 .site-menu-nav{column-gap:16px}
}