/* Transparent, click-through navigation over the existing worlds. */
body{position:relative;isolation:isolate;--floating-nav-height:82px}
body>header,
body:has(#home-screen:not([hidden]))>header,
body.in-family>header{
 position:fixed;inset:0 0 auto;z-index:60;width:100%;margin:0 auto;
 background:none;border:0;box-shadow:none;backdrop-filter:none;
 pointer-events:none;
}
header .game-dock,header .top-actions{pointer-events:none}
header a,header button{pointer-events:auto}
header .brand{text-shadow:0 1px 2px #fff,0 0 12px #fff,0 0 20px #fff8}
body.in-family header .brand{text-shadow:0 2px 5px #101c36,0 0 12px #101c36}

/* The screen begins at the viewport edge; its controls retain the measured safe area. */
body>:is(#puzzle-screen,.activity-screen):not(#home-screen),body>#playground{
 padding-top:calc(var(--floating-nav-height) + 14px);
 min-height:100dvh;
}
body:has(.star-banner:not([hidden]))>:is(#puzzle-screen,.activity-screen):not(#home-screen){padding-top:14px}
body:has(.star-banner:not([hidden]))>.star-banner{margin-top:calc(var(--floating-nav-height) + 8px)}

/* Continue the active world's own scenery behind the floating controls. */
#floating-world-backdrop{
 position:fixed;inset:0;z-index:-1;pointer-events:none;
 background-image:linear-gradient(180deg,#f4f8f520,#f4f7f5dc 32%,#f1f5f4f5 88%),var(--floating-world-image);
 background-position:center top;background-size:cover;background-repeat:no-repeat;
}
#floating-world-backdrop[hidden]{display:none}

#home-screen.home-scene{height:100dvh}
#home-screen.home-scene .game-tiles{padding-top:calc(var(--floating-nav-height) + 20px);scroll-padding-top:calc(var(--floating-nav-height) + 20px)}
#home-screen.home-scene .home-welcome{top:calc(var(--floating-nav-height) + (100dvh - var(--floating-nav-height))*.08)}
.home-scene-layer .home-scene-friends{height:calc((100dvh - var(--floating-nav-height))*.48);bottom:calc((100dvh - var(--floating-nav-height))*.09)}

@media(max-width:760px){body{--floating-nav-height:160px}}
@media(max-width:600px) and (orientation:portrait){
 body{--floating-nav-height:130px}
 #home-screen.home-scene .home-welcome{top:calc(var(--floating-nav-height) + 12px)}
 .home-scene-layer{background-size:auto calc(320px + var(--floating-nav-height))}
 .home-scene-layer .home-scene-friends{top:calc(var(--floating-nav-height) + 90px);height:125px;bottom:auto}
 .home-scene-switcher{top:calc(var(--floating-nav-height) + 174px)}
 #home-screen.home-scene .game-tiles{inset:calc(var(--floating-nav-height) + 238px) 0 0;padding-top:16px;scroll-padding-top:16px}
}
@media(orientation:landscape) and (max-height:500px) and (max-width:1000px){
 body{--floating-nav-height:58px}
 body>:is(#puzzle-screen,.activity-screen):not(#home-screen),body>#playground{padding-top:calc(var(--floating-nav-height) + 4px)}
 #home-screen.home-scene .game-tiles{padding-top:calc(var(--floating-nav-height) + 12px);scroll-padding-top:calc(var(--floating-nav-height) + 12px)}
 #home-screen.home-scene .home-welcome{top:calc(var(--floating-nav-height) + 6px)}
 .home-scene-layer .home-scene-friends{height:calc((100dvh - var(--floating-nav-height))*.49);bottom:calc((100dvh - var(--floating-nav-height))*.16)}
}