/* Main settings */

:root {
    --c-primary-H: 220; --c-primary-S: 9.1%; --c-primary-L: 97%;

    --c-brand-H: 212; --c-brand-S: 46.5%; --c-brand-L: 49.8%;
    --c-brand-t-H: 0; --c-brand-t-S: 0%; --c-brand-t-L: 100%;

    /* Engine panel colors */
    --c-EP-H: 210; --c-EP-S:   25%; --c-EP-L:   98%;
    --c-EP-t-H: 0; --c-EP-t-S:  0%; --c-EP-t-L: 30%;

    background-color: hsl(var(--c-primary-H), var(--c-primary-S), calc(var(--c-primary-L) - 5%));

    --z-position: 1;
}

.elzTheme-dark {
    --c-primary-H: 0; --c-primary-S: 0%; --c-primary-L: 10.3%;

    /* Engine panel colors */
    --c-EP-H:   0; --c-EP-S:   0%; --c-EP-L:   16%;
    --c-EP-t-H: 0; --c-EP-t-S: 0%; --c-EP-t-L: 88%;
}

@media (prefers-color-scheme: dark) {
    .elzTheme-device {
        --c-primary-H: 0; --c-primary-S: 0%; --c-primary-L: 11%;

        /* Engine panel colors */
        --c-EP-H:   0; --c-EP-S:   0%; --c-EP-L:   16%;
        --c-EP-t-H: 0; --c-EP-t-S: 0%; --c-EP-t-L: 88%;
    }
}

@font-face {
    font-family: 'fg';
    font-display: swap;
    src: url('../fonts/fg.woff2') format('woff2');
}

:root, body { overflow: hidden; }
body { padding-top: 0; }




/* Main wrap */

.gmWrap,
.gmWrapIn {
    position: relative;
    display: grid;
}

.gmWrap {
    margin: auto;
    max-height: 100%;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gmWrapIn {
    height: 100%;
    overflow: auto;
    grid-template: auto auto 1fr auto auto / var(--gmWrapCol1, 1fr) var(--gmWrapCol2, 1fr);
}

.gmSkeletonAbs,
.gmRoot { z-index: var(--z-position, 1); }

.gmSkeletonAbs,
.gmRoot {
    top:  0;
    left: 0;
}

.gmSkeletonAbs {
    position: absolute;
    display: block;
}

.gmRoot {
    position: fixed;
    display: flex;
    width:  100%;
    height: 100%;
    padding-left:   calc(var(--tg-safe-area-inset-left, 0px)   + var(--tg-content-safe-area-inset-left, 0px)   + var(--gmRootPad, 0px));
    padding-right:  calc(var(--tg-safe-area-inset-right, 0px)  + var(--tg-content-safe-area-inset-right, 0px)  + var(--gmRootPad, 0px));
}

/* FOR TELEGRAM WEBAPP FIX */

@supports (-webkit-touch-callout: none) {
    /* Only for IOS */
    /*.app_telegram .gmRoot { height: calc(
            var(--tg-viewport-stable-height, 100%) +
            var(--tg-safe-area-inset-bottom, 0px) +
            var(--tg-content-safe-area-inset-bottom, 0px)
        );
    }*/
}



/* Abs settings */

.gmSkeletonAbs.profile { pointer-events: none; }

.gmRoot:is(.uApiWrap, .gmAppWrap, .gmProfileWrap) .gmWrap { height: 100%; }



/* App & Profile */

@media (min-width: 1281px) {

    .gmRoot:is(.uApiWrap, .gmAppWrap, .gmProfileWrap) {
        --gmRootPad: 24px;
        padding-top:    calc(var(--tg-safe-area-inset-top, 0px)    + var(--tg-content-safe-area-inset-top, 0px)    + var(--gmRootPad, 0px));
        padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + var(--gmRootPad, 0px));
    }

    .gmRoot:is(.uApiWrap, .gmAppWrap, .gmProfileWrap) .gmWrap {
        flex-basis: 1024px;
        --tg-safe-area-inset-top:    0px;
        --tg-safe-area-inset-right:  0px;
        --tg-safe-area-inset-bottom: 0px;
        --tg-safe-area-inset-left:   0px;
        --tg-content-safe-area-inset-top:    0px;
        --tg-content-safe-area-inset-right:  0px;
        --tg-content-safe-area-inset-bottom: 0px;
        --tg-content-safe-area-inset-left:   0px;
        border-radius: 4px;
    }
}

@media (max-width: 1280px) {
    .gmRoot:is(.uApiWrap, .gmAppWrap, .gmProfileWrap) .gmWrap { flex-basis: 100%; }
}



/* Overlay */

@media (min-width: 441px) {
    .gmRoot.gmOverlayWrap {
        --gmRootPad: 8px;
        padding-top:    calc(var(--tg-safe-area-inset-top, 0px)    + var(--tg-content-safe-area-inset-top, 0px)    + var(--gmRootPad, 0px));
        padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px) + var(--gmRootPad, 0px));
    }

    .gmRoot.gmOverlayWrap .gmWrap {
        --tg-safe-area-inset-top:    0px;
        --tg-safe-area-inset-right:  0px;
        --tg-safe-area-inset-bottom: 0px;
        --tg-safe-area-inset-left:   0px;
        --tg-content-safe-area-inset-top:    0px;
        --tg-content-safe-area-inset-right:  0px;
        --tg-content-safe-area-inset-bottom: 0px;
        --tg-content-safe-area-inset-left:   0px;
        border-radius: 4px;
    }
}

@media (max-width: 440px) {
    .gmRoot.gmOverlayWrap .gmWrap {
        flex-basis: 100%;
        height: 100%;
    }

    .gmRoot.gmOverlayWrap .gmWrap.animit { animation-name: elzAnimShowBottom; }
}










/* Inner content */

.gmContent          { grid-column-start: 1; grid-column-end: 3; position: relative; }
.gmContent.left     { grid-column-start: 1; grid-column-end: 2; }
.gmContent.right    { grid-column-start: 2; grid-column-end: 3; }
.gmContent.main     { grid-row-start: 2; grid-row-end: 5; }
.gmContent.overlay  { grid-row-start: 3; grid-row-end: 4; pointer-events: none; }

.gmPanel { flex-shrink: 0; }

.gmPanel.top        { grid-area: 1 / 1 / 2 / 3; }
.gmPanel.top.sub    { grid-area: 2 / 1 / 3 / 3; }

.gmPanel.bottom     { grid-area: 5 / 1 / 6 / 3; }
.gmPanel.bottom.sub { grid-area: 4 / 1 / 5 / 3; }

.gmPanel.top    { min-height: calc(var(--tg-safe-area-inset-top,    0px) + var(--tg-content-safe-area-inset-top,    0px)); }
.gmPanel.bottom { min-height: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)); }

.gmPanel.bottom .gmPanelBottomItem.hide:first-child + .gmPanelBottomItem { padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)); }










/* Stand page */

.gmStandPage .gmWrapIn {
    --bg-A-main: 0.65;
    backdrop-filter: blur(3px);
}

/* end */










/* Sticky head */

.gmStickyHead { --gmStickyHeaderShrink: 0px; }
.gmStickyHead.headItem       { --gmStickyHeaderShrink: 136px; }
.gmStickyHead.headPosterMini { --gmStickyHeaderShrink: 184px; }
.gmStickyHead.headPoster     { --gmStickyHeaderShrink: 240px; }

.gmStickyHeadStatic {
    min-height: calc(
            var(--elzEPSize) +
            var(--gmStickyHeaderSize) +
            var(--tg-safe-area-inset-top, 0px) +
            var(--tg-content-safe-area-inset-top, 0px)
    );
    top: calc(var(--gmStickyHeaderShrink) * -1);
}

.gmStickyHeadShrink { min-height: var(--gmStickyHeaderShrink); }

.gmStickyHeadOver { top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }

/* Expand menu max height */

.gmOverlayMaxHeight {
    max-height: calc(
            100dvh -
            (var(--elzEPSize) * 2) -
            var(--tg-safe-area-inset-top, 0px) -
            var(--tg-content-safe-area-inset-top, 0px) -
            var(--tg-safe-area-inset-bottom, 0px) -
            var(--tg-content-safe-area-inset-bottom, 0px) -
            (var(--gmRootPad, 0px) * 2)
    );
}

@media (max-height: 568px) {
    .stickyHeadRelM {
        position: relative !important;
        top: 0 !important;
    }
}

/* end */










/* Avatar hamburger placeholder */
/*
.gmAvBurgerPlaceholder {
    animation-name: gmAvBurgerPlaceholderAnim;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-duration: 3s;
}

@keyframes gmAvBurgerPlaceholderAnim {
    0%   { opacity: 0; transform: scale(0.5); filter: blur(5px); }
    25%  { opacity: 1; transform:   scale(1); filter: blur(0px); }
    75%  { opacity: 1; transform:   scale(1); filter: blur(0px); }
    100% { opacity: 0; transform:   scale(2); filter: blur(10px); }
}
*/
/* end */





/* Head menu media queries */

/* 720 */
@media (min-width: 721px) {
    .gmExpMenu.x720 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x720 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x720 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 720px) {
    .gmExpMenu.x720:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x720 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x720 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x720 .gmExpMenuIn { text-shadow: none; }
}

/* 640 */
@media (min-width: 641px) {
    .gmExpMenu.x640 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x640 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x640 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 640px) {
    .gmExpMenu.x640:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x640 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x640 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x640 .gmExpMenuIn { text-shadow: none; }
}

/* 560 */
@media (min-width: 561px) {
    .gmExpMenu.x560 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x560 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x560 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 560px) {
    .gmExpMenu.x560:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x560 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x560 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x560 .gmExpMenuIn { text-shadow: none; }
}

/* 560 */
@media (min-width: 513px) {
    .gmExpMenu.x512 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x512 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x512 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 512px) {
    .gmExpMenu.x512:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x512 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x512 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x512 .gmExpMenuIn { text-shadow: none; }
}

/* 480 */
@media (min-width: 481px) {
    .gmExpMenu.x480 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x480 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x480 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 480px) {
    .gmExpMenu.x480:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x480 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x480 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x480 .gmExpMenuIn { text-shadow: none; }
}

/* 400 */
@media (min-width: 401px) {
    .gmExpMenu.x400 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x400 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x400 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 400px) {
    .gmExpMenu.x400:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x400 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x400 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x400 .gmExpMenuIn { text-shadow: none; }
}

/* 360 */
@media (min-width: 361px) {
    .gmExpMenu.x360 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x360 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x360 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 360px) {
    .gmExpMenu.x360:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x360 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x360 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x360 .gmExpMenuIn { text-shadow: none; }
}

/* 360 */
@media (min-width: 321px) {
    .gmExpMenu.x320 .gmExpMenuDHide     { display: none; }
    .gmExpMenu.x320 .gmExpMenuDContents { display: contents; }
    .gmExpMenu.x320 .gmExpMenuColorDInh { color: inherit !important; }
}

@media (max-width: 320px) {
    .gmExpMenu.x320:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x320 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x320 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x320 .gmExpMenuIn { text-shadow: none; }
}

/* 0 */

@media (min-width: 0px) {
    .gmExpMenu.x0:not(.sel) .gmExpMenuWrap,
    .gmExpMenu.x0 .gmExpMenuMHide     { display: none; }
    .gmExpMenu.x0 .gmExpMenuMContents { display: contents; }
    .gmExpMenu.x0 .gmExpMenuIn { text-shadow: none; }
}










/* Apps depend hide/show */

.app_vk       .gmHideVK,
.app_telegram .gmHideTG { display: none !important; }

@media (max-width: 539px) {
    .app_vk       .gmSmallHideVK,
    .app_telegram .gmSmallHideTG { display: none !important; }
}

/* end */





/* Superapp menu */

@media (max-width: 640px) {
    .gmOverMenuIn { width: 100%; }
}

/* App character display */

@media (min-width: 641px) {
    .gmCharLink-inventory { display: none; }
}