:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
/* Extend backgrounds to the display edges; protect only controls from cutouts. */
html{background:#080b12;min-height:100%;-webkit-text-size-adjust:100%}body{min-height:100dvh}
#universe-lobby,.stage,#entry-screen{height:100dvh}
#universe-stars,#about-stars{height:100%}
@media(max-width:700px){
 .masthead{padding-top:calc(14px + var(--safe-top));padding-left:max(5vw,var(--safe-left));padding-right:max(5vw,var(--safe-right))}
 .lobby-brand{top:calc(20px + var(--safe-top));left:max(5vw,var(--safe-left))}
 .lobby-heading{top:calc(10dvh + var(--safe-top)*.5)}
 .universe-categories{top:calc(22dvh + var(--safe-top)*.25)}
 .world-selector{top:calc(27dvh + var(--safe-top)*.25)}
 .worlds{top:39dvh;height:32dvh}
 #project-switcher{bottom:calc(12px + var(--safe-bottom))!important}
 .lobby-footer{bottom:calc(94px + var(--safe-bottom))}
 .hud{padding-bottom:calc(15px + var(--safe-bottom))}
 .entry-name{top:calc(5dvh + var(--safe-top))}.entry-footnote{bottom:calc(4dvh + var(--safe-bottom))}
 #chapter-menu{top:calc(108px + var(--safe-top));max-height:calc(100dvh - 150px - var(--safe-top) - var(--safe-bottom))}
 #darr-redesign .header{padding-top:calc(16px + var(--safe-top))}
 #darr-redesign .footer{padding-bottom:calc(100px + var(--safe-bottom))}
 body #darr-mini .mp-library{max-height:calc(100dvh - 115px - var(--safe-top) - var(--safe-bottom))}
}
/* Retain music selection on narrow project docks. */
@media(max-width:600px){
 #darr-redesign #project-switcher.has-mini-player{width:calc(100vw - 20px)}
 #darr-redesign #darr-mini .mp-previous,#darr-redesign #darr-mini .mp-next{display:none}
 #darr-redesign #darr-mini .mp-queue{display:grid;min-width:34px;width:34px;padding:6px}
 #darr-redesign #darr-mini .mp-cover{display:none}
 #darr-redesign #darr-mini .mp-bar{gap:3px}
 #darr-redesign #darr-mini .mp-info{min-width:45px}
 #darr-redesign #darr-mini .mp-play{min-width:38px;width:38px;height:38px}
 #darr-redesign #project-switcher .ps-toggle{padding:5px;font-size:11px}
 #darr-redesign #project-switcher .ps-universe-dock{padding:0 7px;font-size:11px}
}

@media(max-width:700px){
 #universe-lobby,.stage,#entry-screen{height:var(--darr-view-height,100dvh)}
 .lobby-heading{top:calc(var(--darr-view-height,100dvh)*.10 + var(--safe-top)*.5)}
 .universe-categories{top:calc(var(--darr-view-height,100dvh)*.22 + var(--safe-top)*.25)}
 .world-selector{top:calc(var(--darr-view-height,100dvh)*.27 + var(--safe-top)*.25)}
 .worlds{top:calc(var(--darr-view-height,100dvh)*.39);height:calc(var(--darr-view-height,100dvh)*.32)}
 html:has(body.selecting){background:#080b12 url('/universe-app/assets/stars.webp') center/cover fixed}
}