/* Fit the visible browser viewport, including expanded mobile browser chrome. */
@media(max-width:959px){
 html{--visible-height:100svh;--app-header:54px;--app-tabs:64px}
 @supports(height:100dvh){html{--visible-height:100dvh}}
 body.mobile-hub.midnight{padding-bottom:calc(var(--app-tabs) + env(safe-area-inset-bottom));overflow-x:clip}
 body.mobile-hub.midnight>.nav{height:var(--app-header);min-height:var(--app-header);padding:0 12px;box-sizing:border-box}
 body.mobile-hub.midnight .bottom-nav{padding:4px 6px calc(4px + env(safe-area-inset-bottom));min-height:var(--app-tabs)}
 body.mobile-hub.midnight .bottom-nav a{min-height:52px;padding:2px;font-size:12px;gap:2px}
 body.mobile-hub.midnight main>.app-screen:not(#join){min-height:0!important;padding-bottom:12px!important}
 body.mobile-hub.midnight .compact-hero.world-tour{height:calc(var(--visible-height) - var(--app-header) - var(--app-tabs) - env(safe-area-inset-bottom));min-height:280px;aspect-ratio:auto}
 body.mobile-hub.midnight .join-surface.nameball-card{margin:8px 10px 0!important;padding:12px!important;scroll-margin-top:62px}
 body.mobile-hub.midnight .nameball-card .join-heading{margin:0 0 4px}
 body.mobile-hub.midnight .nameball-card .join-heading h2{font-size:22px!important;margin:0 0 6px!important}
 body.mobile-hub.midnight .nameball-card .card-marble{grid-template-columns:1fr 110px;gap:4px;padding:0;margin:0}
 body.mobile-hub.midnight .nameball-card #marble-preview{width:58px;height:58px}
 body.mobile-hub.midnight .nameball-card #profile-form{gap:6px!important;margin:0}
 body.mobile-hub.midnight .nameball-card #profile-form label{margin:0;gap:4px!important}
 body.mobile-hub.midnight .nameball-card .participant-benefits{margin:0;padding-top:4px;gap:0}
 body.mobile-hub.midnight .participant-benefits>div{padding:5px 0}
 body.mobile-hub.midnight .participant-benefits p{margin:2px 0 0;font-size:12px;line-height:1.35}
 body.mobile-hub.midnight .participant-benefits strong{font-size:13px}
 body.mobile-hub.midnight .participant-benefits .card-pending{font-size:12px;line-height:1.35;margin:5px 0 0}
 body.mobile-hub.midnight .nameball-card .card-back{margin:6px 0;line-height:1.4;font-size:13px}
 body.mobile-hub.midnight button.desktop-card-join{display:block;width:100%;min-height:44px;margin-top:7px;padding:10px;background:linear-gradient(100deg,#65f4f7,#06c6e4);color:#002132;font-size:16px}
 body.mobile-hub.midnight #menu.cinematic-page .glass-heading,body.mobile-hub.midnight #story.cinematic-page .glass-heading{min-height:95px!important;padding:12px 16px!important;margin-bottom:8px!important}
 body.mobile-hub.midnight .cinematic-page .glass-heading h1{font-size:28px!important;margin:4px 0!important}
 body.mobile-hub.midnight .cinematic-page .glass-heading .glass-lead{font-size:13px!important;line-height:1.4}
 body.mobile-hub.midnight #menu.cinematic-page .menu-grid{gap:7px;margin-bottom:7px}
 body.mobile-hub.midnight #menu.cinematic-page .menu-grid a{min-height:clamp(62px,calc((var(--visible-height) - 310px) / 4),100px);padding:9px 8px}
 body.mobile-hub.midnight #menu.cinematic-page>.hint{font-size:12px;line-height:1.35;margin:5px 0}
 body.mobile-hub.midnight #story.cinematic-page .story-auth-gate.story-auth-editorial{padding:12px;gap:8px;margin:0}
 body.mobile-hub.midnight #story .story-board-example img{height:clamp(105px,calc(var(--visible-height) - 410px),225px);aspect-ratio:auto;object-fit:cover}
 body.mobile-hub.midnight #story.cinematic-page .story-auth-head strong{font-size:17px}
 body.mobile-hub.midnight #story .story-auth-benefits{padding-top:7px;gap:7px;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.mobile-hub.midnight #story .story-auth-benefits>div{font-size:13px}
 body.mobile-hub.midnight #story .story-board-example figcaption{padding-top:4px;font-size:12px}
 body.mobile-hub.midnight #story #story-form{gap:6px}
 body.mobile-hub.midnight #story #story-form textarea{min-height:66px!important;height:66px}
 body.mobile-hub.midnight #story #story-form label{font-size:14px;gap:4px}
 body.mobile-hub.midnight #story #story-form input:not([type=checkbox]){min-height:42px;padding:8px 10px}
 body.mobile-hub.midnight #broadcast .broadcast-features{display:grid;grid-template-columns:1fr;gap:7px}
 body.mobile-hub.midnight #broadcast .broadcast-features article{padding:9px}
 body.mobile-hub.midnight #ticket .assignment{margin:8px 0;padding:12px}
 body.mobile-hub.midnight #upcoming h2{font-size:25px;margin:8px 0;line-height:1.2}
 body.mobile-hub.midnight .verification-screen iframe{min-height:0;height:calc(var(--visible-height) - var(--app-header) - var(--app-tabs) - env(safe-area-inset-bottom));}
 body.mobile-hub.midnight #guide.journey-page{padding:10px!important}
 body.mobile-hub.midnight #guide .journey-intro{padding:0 2px 8px}
 body.mobile-hub.midnight #guide .journey-intro h1{font-size:23px!important;margin-bottom:4px}
 body.mobile-hub.midnight #guide .journey-intro p{font-size:13px}
 body.mobile-hub.midnight #guide .journey-feature{min-height:94px;padding:12px;margin-bottom:8px}
 body.mobile-hub.midnight #guide .journey-feature h2{font-size:17px;margin-bottom:4px}
 body.mobile-hub.midnight #guide .journey-feature p{font-size:13px}
 body.mobile-hub.midnight #guide .journey-path{margin-bottom:8px;padding:9px!important}
 body.mobile-hub.midnight #guide .journey-path li{min-height:51px;margin:0;line-height:1.35;padding:5px 7px}
 body.mobile-hub.midnight #guide .journey-path ol{gap:6px}
 body.mobile-hub.midnight #guide .journey-path li p{font-size:12px}
 body.mobile-hub.midnight #guide .journey-path>h2{font-size:19px;margin-bottom:7px}
 body.mobile-hub.midnight #guide .journey-legend,body.mobile-hub.midnight #guide .journey-legend-art{min-height:88px}
 body.mobile-hub.midnight #guide .journey-legend h2{font-size:17px;margin-bottom:4px}
 body.mobile-hub.midnight #guide .journey-legend p{font-size:12px}
}
/* Keep readable content scrollable on short screens or when text is enlarged. */
@media(max-width:959px) and (max-height:620px){
 body.mobile-hub.midnight #menu.cinematic-page .glass-heading,body.mobile-hub.midnight #story.cinematic-page .glass-heading{min-height:78px!important;padding-block:8px!important}
 body.mobile-hub.midnight .nameball-card #marble-preview{width:46px;height:46px}
 body.mobile-hub.midnight .nameball-card .card-marble{grid-template-columns:1fr 105px}
 body.mobile-hub.midnight #story .story-auth-head small{letter-spacing:0}
}

/* My Story: add precisely 30px to the hero, moving the member card with it. */
@media(max-width:959px){
 body.mobile-hub.midnight #story.cinematic-page .glass-heading{min-height:125px!important}
 body.mobile-hub.midnight #story #story-auth-status:empty{display:none}
}
@media(max-width:959px) and (max-height:620px){
 body.mobile-hub.midnight #story.cinematic-page .glass-heading{min-height:108px!important}
}