/* =====================================================
   TERY: COLLAPSE
   UI
===================================================== */


/* =====================================================
   GENERAL BUTTON
===================================================== */

.game-button {
    width: 100%;

    margin-top: 7px;

    padding: 8px;

    border:
        1px solid
        #495153;

    border-radius:
        4px;

    background:
        #202627;

    color:
        #fff;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.game-button:active {
    background:
        #2a3031;
}


/* =====================================================
   PROGRESS
===================================================== */

.progress {
    width: 100%;

    height: 5px;

    margin-top: 6px;

    background:
        #090c0d;

    border-radius:
        3px;

    overflow:
        hidden;
}


.progress-bar {
    width: 0%;

    height: 100%;

    background:
        var(--accent);
}


/* =====================================================
   UI WINDOW
===================================================== */

.ui-window {
    position:
        fixed;

    right:
        calc(
            12px +
            env(safe-area-inset-right)
        );

    top:
        calc(
            var(--header-h) +
            env(safe-area-inset-top) +
            12px
        );

    bottom:
        calc(
            var(--nav-h) +
            env(safe-area-inset-bottom) +
            12px
        );

    width:
        min(
            390px,
            43vw
        );

    min-width:
        280px;

    display:
        flex;

    flex-direction:
        column;

    border:
        1px solid
        #4a5355;

    border-radius:
        5px;

    background:
        var(--panel);

    box-shadow:
        0 14px 34px
        rgba(
            0,
            0,
            0,
            .58
        );

    z-index:
        90;

    overflow:
        hidden;

    touch-action:
        manipulation;
}


.ui-window[hidden] {
    display:
        none !important;
}


.ui-window.minimized {
    bottom:
        auto;

    height:
        42px;
}


.ui-window.minimized
.ui-window-content {
    display:
        none;
}


/* =====================================================
   WINDOW HEADER
===================================================== */

.ui-window-header {
    min-height:
        42px;

    padding:
        7px
        8px
        7px
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    border-bottom:
        1px solid
        var(--line);

    background:
        linear-gradient(
            180deg,
            #202728,
            #151a1b
        );
}


.ui-window-title {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .2px;
}


.ui-window-actions {
    flex-shrink:
        0;

    display:
        flex;

    gap:
        5px;
}


.ui-window-actions button {
    width:
        28px;

    height:
        28px;

    min-width:
        28px;

    min-height:
        28px;

    padding:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #414a4c;

    border-radius:
        3px;

    background:
        #171c1d;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.ui-window-actions button:active {
    background:
        #272d2e;
}


#ui-window-minimize {
    font-size:
        17px;
}


#ui-window-close {
    font-size:
        20px;
}


/* =====================================================
   WINDOW CONTENT
===================================================== */

.ui-window-content {
    flex:
        1;

    min-height:
        0;

    overflow:
        auto;

    padding:
        12px;

    overscroll-behavior:
        contain;

    touch-action:
        pan-y;
}


/* =====================================================
   WINDOW HERO
===================================================== */

.window-hero {
    display:
        flex;

    gap:
        11px;

    align-items:
        center;

    padding:
        10px;

    border:
        1px solid
        #2f3739;

    background:
        #121718;
}


.window-hero-icon {
    width:
        50px;

    height:
        50px;

    flex-shrink:
        0;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #4c5556;

    background:
        #202627;

    font-size:
        25px;

    color:
        #c8cbcb;
}


.window-hero strong {
    font-size:
        13px;
}


.window-hero p {
    margin:
        5px
        0
        0;

    color:
        #8d9493;

    font-size:
        10px;

    line-height:
        1.35;
}


/* =====================================================
   WINDOW TABS
===================================================== */

.window-tabs {
    margin-top:
        10px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        5px;
}


.window-tab {
    min-height:
        34px;

    border:
        1px solid
        #374042;

    background:
        #151a1b;

    font-size:
        10px;

    cursor:
        pointer;

    touch-action:
        manipulation;
}


.window-tab.active {
    border-color:
        #a76124;

    color:
        #ef9a42;

    box-shadow:
        inset
        0 -2px 0
        var(--accent);
}


.window-tab:disabled {
    opacity:
        .45;
}


/* =====================================================
   STORAGE
===================================================== */

.storage-list {
    margin-top:
        8px;

    border:
        1px solid
        #30383a;
}


.storage-row {
    min-height:
        42px;

    display:
        grid;

    grid-template-columns:
        34px
        1fr
        auto;

    align-items:
        center;

    gap:
        8px;

    padding:
        6px
        9px;

    border-bottom:
        1px solid
        #293032;

    background:
        #111617;
}


.storage-row:last-child {
    border-bottom:
        0;
}


.storage-icon {
    font-size:
        18px;

    text-align:
        center;
}


.storage-name {
    font-size:
        10px;

    color:
        #c6c9c9;
}


.storage-value {
    font-size:
        11px;

    color:
        #f0f0eb;
}


.coming-soon {
    margin-top:
        10px;

    padding:
        14px;

    border:
        1px dashed
        #3a4244;

    color:
        #858c8d;

    font-size:
        10px;

    text-align:
        center;
}


/* =====================================================
   LEGACY HOOKS
===================================================== */

.legacy-resource-hooks {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    opacity:
        0;

    pointer-events:
        none;
}


/* =====================================================
   MOBILE / ANDROID LANDSCAPE
===================================================== */

@media (max-width: 900px) {

    .ui-window {
        /*
         * Держим окно дальше от правого края.
         * Это особенно важно внутри Telegram на Android.
         */

        right:
            calc(
                20px +
                env(safe-area-inset-right)
            );

        left:
            auto;


        top:
            calc(
                var(--header-h) +
                env(safe-area-inset-top) +
                12px
            );


        bottom:
            calc(
                var(--nav-h) +
                env(safe-area-inset-bottom) +
                14px
            );


        width:
            min(
                350px,
                calc(
                    100vw -
                    44px -
                    env(safe-area-inset-left) -
                    env(safe-area-inset-right)
                )
            );


        min-width:
            260px;


        max-height:
            calc(
                100dvh -
                var(--header-h) -
                var(--nav-h) -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom) -
                30px
            );
    }


    .ui-window-header {
        min-height:
            48px;

        padding:
            8px
            10px
            8px
            12px;
    }


    .ui-window-title {
        font-size:
            14px;
    }


    .ui-window-actions {
        gap:
            8px;
    }


    .ui-window-actions button {
        width:
            34px;

        height:
            34px;

        min-width:
            34px;

        min-height:
            34px;

        border-radius:
            5px;
    }


    #ui-window-minimize {
        font-size:
            19px;
    }


    #ui-window-close {
        font-size:
            23px;
    }


    .ui-window-content {
        padding:
            12px;
    }
}


/* =====================================================
   SHORT ANDROID LANDSCAPE
===================================================== */

@media
(
    max-width:
    900px
)
and
(
    max-height:
    430px
) {

    .ui-window {
        right:
            calc(
                18px +
                env(safe-area-inset-right)
            );

        top:
            calc(
                var(--header-h) +
                env(safe-area-inset-top) +
                8px
            );

        bottom:
            calc(
                var(--nav-h) +
                env(safe-area-inset-bottom) +
                10px
            );

        width:
            min(
                330px,
                46vw
            );

        min-width:
            235px;

        max-height:
            calc(
                100dvh -
                var(--header-h) -
                var(--nav-h) -
                env(safe-area-inset-top) -
                env(safe-area-inset-bottom) -
                18px
            );
    }


    .ui-window-header {
        min-height:
            42px;

        padding:
            5px
            7px
            5px
            10px;
    }


    .ui-window-title {
        font-size:
            13px;
    }


    .ui-window-actions {
        gap:
            6px;
    }


    .ui-window-actions button {
        width:
            31px;

        height:
            31px;

        min-width:
            31px;

        min-height:
            31px;
    }


    #ui-window-minimize {
        font-size:
            18px;
    }


    #ui-window-close {
        font-size:
            21px;
    }


    .ui-window-content {
        padding:
            9px;
    }
}


/* =====================================================
   VERY NARROW LANDSCAPE
===================================================== */

@media
(
    max-width:
    700px
)
and
(
    orientation:
    landscape
) {

    .ui-window {
        right:
            calc(
                22px +
                env(safe-area-inset-right)
            );

        width:
            min(
                320px,
                50vw
            );

        min-width:
            220px;
    }
}