/* The app owns one viewport frame. Descendants must not subtract safe areas again.
   Installed iOS apps can report a shortened dvh/visualViewport despite painting
   behind the status bar. Fixed edges define the frame; vh is the standalone
   fallback for calculations inside it, without device-specific offsets. */
:root{--aurora-page-height:100vh}
@supports(height:100dvh){:root{--aurora-page-height:100dvh}}
@media(display-mode:standalone),(display-mode:fullscreen){:root{--aurora-page-height:100vh}}
html[data-aurora-standalone=true]{--aurora-page-height:100vh}

@media(max-width:900px){
 /* Notices occupy real space above the fitted game; its board gets the rest.
    This also applies inside Telegram without changing the host's frame/insets. */
 body:is([data-route=play],[data-route=tutorial]) #app .main{display:flex;flex-direction:column}
 body:is([data-route=play],[data-route=tutorial]) #app .main>:is(.guest-notice,.warning){flex:0 0 auto}
 body:is([data-route=play],[data-route=tutorial]) #app .main>:is(.workspace,.tutorial-compact){flex:1 1 0;height:auto;min-height:0;width:100%}

 html:not([data-telegram-mini-app=true]) body[data-route]{height:var(--aurora-page-height);min-height:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body[data-route] #app{position:fixed;inset:0;height:auto;min-height:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body[data-route] #app .app-shell{height:100%;min-height:0}
 html:not([data-telegram-mini-app=true]) body[data-route=splash] #app{overflow-y:auto;overscroll-behavior-y:contain}

 /* Play/tutorial use the shell's top inset and their own bottom toolbar.
    Ordinary scrolling pages retain their normal content padding. */
 html:not([data-telegram-mini-app=true]) body:is([data-route=play],[data-route=tutorial]) #app .app-shell{padding-top:env(safe-area-inset-top,0px)}
 html:not([data-telegram-mini-app=true]) body:is([data-route=play],[data-route=tutorial]) #app .main{height:100%;min-height:0;max-height:100%;padding-top:0;padding-bottom:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body[data-route=play] #app .tools{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
 html:not([data-telegram-mini-app=true]) body[data-route=tutorial] #app .tutorial-bottom{padding-bottom:max(6px,env(safe-area-inset-bottom,0px))}

 /* Merge already owns all four safe insets on .main. */
 html:not([data-telegram-mini-app=true]) body[data-route=merge] #app .app-shell{padding:0}
 html:not([data-telegram-mini-app=true]) body[data-route=merge] #app .main{height:100%;min-height:0;max-height:100%}
}

/* Above the mobile breakpoint, only Sort and Merge already have a fitted
   landscape layout. Ordinary desktop pages keep their document scrolling. */
@media(min-width:901px) and (orientation:landscape) and (max-height:600px){
 body[data-route=play][data-mode=sort] #app .main{display:flex;flex-direction:column}
 body[data-route=play][data-mode=sort] #app .main>:is(.guest-notice,.warning){flex:0 0 auto}
 body[data-route=play][data-mode=sort] #app .main>.workspace{flex:1 1 0;height:auto;min-height:0;width:100%}

 html:not([data-telegram-mini-app=true]) body:is([data-route=merge],[data-route=play][data-mode=sort]){height:var(--aurora-page-height);min-height:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body:is([data-route=merge],[data-route=play][data-mode=sort]) #app{position:fixed;inset:0;height:auto;min-height:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body:is([data-route=merge],[data-route=play][data-mode=sort]) #app .app-shell{height:100%;min-height:0}
 html:not([data-telegram-mini-app=true]) body[data-route=play][data-mode=sort] #app .app-shell{padding-top:env(safe-area-inset-top,0px)}
 html:not([data-telegram-mini-app=true]) body[data-route=play][data-mode=sort] #app .main{height:100%;min-height:0;max-height:100%;padding-top:0;padding-bottom:0;overflow:hidden}
 html:not([data-telegram-mini-app=true]) body[data-route=play][data-mode=sort] #app .tools{padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}
 html:not([data-telegram-mini-app=true]) body[data-route=merge] #app .app-shell{padding:0}
 html:not([data-telegram-mini-app=true]) body[data-route=merge] #app .main{height:100%;min-height:0;max-height:100%}
}