/* Host-scoped layout overrides; type-system.css remains the final typography authority. */
html[data-telegram-mini-app=true]{
 --aurora-tg-layout-height:var(--aurora-tg-stable-height,100dvh);
 --aurora-tg-visible-height:var(--aurora-tg-viewport-height,var(--aurora-tg-layout-height));
 --aurora-tg-inset-top:max(var(--aurora-tg-safe-top,0px),env(safe-area-inset-top,0px));
 --aurora-tg-inset-right:max(var(--aurora-tg-safe-right,0px),env(safe-area-inset-right,0px));
 --aurora-tg-inset-bottom:max(var(--aurora-tg-safe-bottom,0px),env(safe-area-inset-bottom,0px));
 --aurora-tg-inset-left:max(var(--aurora-tg-safe-left,0px),env(safe-area-inset-left,0px));
 --aurora-tg-content-height:max(0px,calc(var(--aurora-tg-layout-height) - var(--aurora-tg-inset-top) - var(--aurora-tg-inset-bottom)));
 --aurora-tg-visible-content-height:max(0px,calc(var(--aurora-tg-visible-height) - var(--aurora-tg-inset-top) - var(--aurora-tg-inset-bottom)));
 height:100%;
 overflow:hidden;
}

/* Reserve device and Telegram controls once, outside the application shell.
   Stable height prevents a drag of Telegram's sheet from stretching the boards. */
html[data-telegram-mini-app=true] body,
html[data-telegram-mini-app=true] body[data-route]{
 height:var(--aurora-tg-layout-height);
 min-height:0;
 padding:var(--aurora-tg-inset-top) var(--aurora-tg-inset-right) var(--aurora-tg-inset-bottom) var(--aurora-tg-inset-left);
 box-sizing:border-box;
 overflow:hidden;
}
html[data-telegram-mini-app=true] #app,
html[data-telegram-mini-app=true] body[data-route] #app{
 height:100%;
 min-height:0;
 width:100%;
 overflow:hidden;
}
html[data-telegram-mini-app=true] body[data-route] #app .app-shell{
 height:100%;
 min-height:0;
 padding-top:0;
 overflow:hidden;
}
html[data-telegram-mini-app=true] #app .sidebar{height:100%;min-height:0;overflow-y:auto}
html[data-telegram-mini-app=true] #app .main{min-height:0;max-height:100%;overflow-y:auto}

/* The splash footer stays in the scrollable page on short screens. */
html[data-telegram-mini-app=true] body[data-route=splash] #app{overflow-y:auto;overscroll-behavior-y:contain}
html[data-telegram-mini-app=true] body[data-route=splash]::after{display:none}
html[data-telegram-mini-app=true] body[data-route=splash] #app .welcome-screen{min-height:100%;padding:60px 20px 0}
html[data-telegram-mini-app=true] body[data-route=splash] #app .welcome-logo{width:clamp(56px,calc(var(--aurora-tg-content-height) - 620px),220px)}
html[data-telegram-mini-app=true] body[data-route=splash] #app .splash-controls{padding:4px 0 8px}
html[data-telegram-mini-app=true] #app .build-version{left:calc(16px + var(--aurora-tg-inset-left));bottom:calc(12px + var(--aurora-tg-inset-bottom))}

/* Merge uses a full-height workbench at every width. */
html[data-telegram-mini-app=true] body[data-route=merge] #app .main{height:100%;padding:0 8px;overflow:hidden}
html[data-telegram-mini-app=true] body[data-route=merge] #app .merge-board{width:min(100%,max(0px,calc((var(--aurora-tg-content-height) - 240px)*6/7)))}

@media(max-width:900px){
 html[data-telegram-mini-app=true] #app .main{padding-left:12px;padding-right:12px}
 /* The home indicator is already reserved; retain the 6px gap only when needed. */
 html[data-telegram-mini-app=true] #app .mobile-nav{width:calc(100% - 24px);margin-inline:12px;min-height:0;padding:4px 0 max(0px,calc(6px - var(--aurora-tg-inset-bottom)))}
 html[data-telegram-mini-app=true] body:is([data-route=play],[data-route=tutorial]) #app .main{height:100%;padding:0;overflow:hidden}
 html[data-telegram-mini-app=true] body[data-route=play] #app .tools{padding:6px 8px}
 html[data-telegram-mini-app=true] body[data-route=play] #app .practice-match .tools{padding:8px}
 html[data-telegram-mini-app=true] body[data-route=tutorial] #app .tutorial-bottom{padding:6px 8px}
 html[data-telegram-mini-app=true] body[data-route=tutorial] #app .journey-intro{min-height:max(0px,calc(var(--aurora-tg-content-height) - 90px))}
 html[data-telegram-mini-app=true] body[data-route=tutorial] #app .journey-intro>.button{bottom:8px}
 html[data-telegram-mini-app=true] #app .practice-match .match-board{width:min(calc(100% - 32px),max(0px,calc(var(--aurora-tg-content-height) - 184px)),540px)}
}
@media(orientation:landscape) and (max-height:600px){
 html[data-telegram-mini-app=true] body[data-route=splash] #app .welcome-screen{padding-top:50px}
 html[data-telegram-mini-app=true] body[data-route=splash] #app .welcome-logo{width:min(calc(var(--aurora-tg-content-height)*.36),160px)}
 html[data-telegram-mini-app=true] body[data-route=play][data-mode=sort] #app .main{height:100%;padding:0;overflow:hidden}
 html[data-telegram-mini-app=true] body[data-route=play][data-mode=sort] #app .tools{padding:6px 8px}
 html[data-telegram-mini-app=true] body[data-route=merge] #app .merge-board{width:min(100%,max(0px,calc((var(--aurora-tg-content-height) - 68px)*6/7)));height:max(0px,calc(var(--aurora-tg-content-height) - 68px))}
}

/* Fixed overlays sit outside #app. Use the visible height for the keyboard and
   reserve the same insets here, without adding them again inside each dialog. */
html[data-telegram-mini-app=true] .dialog-backdrop{
 inset:0 0 auto;
 height:var(--aurora-tg-visible-height);
 padding:calc(16px + var(--aurora-tg-inset-top)) calc(16px + var(--aurora-tg-inset-right)) calc(16px + var(--aurora-tg-inset-bottom)) calc(16px + var(--aurora-tg-inset-left));
}
html[data-telegram-mini-app=true] .dialog{max-height:max(0px,calc(var(--aurora-tg-visible-content-height) - 32px));overscroll-behavior:contain}
html[data-telegram-mini-app=true] .reader-dialog{height:max(0px,calc(var(--aurora-tg-visible-content-height) - 32px));padding-block:24px}
html[data-telegram-mini-app=true] .card-viewer{
 inset:0 0 auto;
 height:var(--aurora-tg-visible-height);
 padding:var(--aurora-tg-inset-top) var(--aurora-tg-inset-right) var(--aurora-tg-inset-bottom) var(--aurora-tg-inset-left);
}
html[data-telegram-mini-app=true] .card-viewer-caption{max-height:calc(var(--aurora-tg-visible-content-height)*.3)}
html[data-telegram-mini-app=true] #toast{bottom:calc(62px + var(--aurora-tg-inset-bottom));max-width:calc(100% - var(--aurora-tg-inset-left) - var(--aurora-tg-inset-right) - 24px)}
html[data-telegram-mini-app=true] body[data-route=play][data-mode=sort] #app .tools .tool-disabled-reason{bottom:calc(64px + var(--aurora-tg-inset-bottom))}

/* Telegram can cover a Mini App without changing document.visibilityState. */
html[data-telegram-mini-app=true][data-telegram-active=false] *,
html[data-telegram-mini-app=true][data-telegram-active=false] *::before,
html[data-telegram-mini-app=true][data-telegram-active=false] *::after{animation-play-state:paused!important}