/* =====================================================
   TERY: COLLAPSE
   MAP
===================================================== */


/* =====================================================
   TERRITORY MAP ROOT
===================================================== */

#territory-map {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    touch-action: none;
}


#territory-map:has(
    .territory-map-wrapper
) {
    display: flex;

    flex-direction: column;
}


/* =====================================================
   TERRITORY MAP HEADER
===================================================== */

.territory-map-header {
    min-height: 34px;

    padding:
        5px
        max(
            10px,
            env(safe-area-inset-right)
        )
        5px
        max(
            10px,
            env(safe-area-inset-left)
        );

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background:
        rgba(
            12,
            16,
            17,
            .92
        );

    border-bottom:
        1px solid
        #343c3e;

    z-index: 40;

    flex-shrink: 0;
}


.territory-map-header h2,
#map-title {
    margin: 0;

    font-size: 11px;
}


.territory-map-title {
    min-width: 170px;

    text-align: center;
}


.territory-map-header
.game-button {
    width: 30px;
    height: 26px;

    margin: 0;

    padding: 0;
}


/* =====================================================
   MAP VIEWPORT
===================================================== */

.territory-map-wrapper {
    position: relative;

    flex: 1;

    min-width: 0;
    min-height: 0;

    /*
     * Безопасные поля.
     * var(--map-side-safe) задаётся в layout.css.
     */

    margin-left:
        max(
            var(--map-side-safe),
            calc(
                env(safe-area-inset-left) +
                8px
            )
        );

    margin-right:
        max(
            var(--map-side-safe),
            calc(
                env(safe-area-inset-right) +
                8px
            )
        );

    overflow: hidden;

    touch-action: none;

    cursor: grab;

    background: #111;
}


.territory-map-wrapper.dragging {
    cursor: grabbing;
}


/* =====================================================
   WORLD
===================================================== */

.territory-map-world {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 1920px;
    height: 1920px;

    transform-origin: center center;

    touch-action: none;
}


/* =====================================================
   INNER GRID
===================================================== */

.territory-inner-map {
    display: grid;

    grid-template-columns:
        repeat(
            10,
            192px
        );

    grid-template-rows:
        repeat(
            10,
            192px
        );

    width: 1920px;
    height: 1920px;

    touch-action: none;
}


/* =====================================================
   TILE
===================================================== */

.territory-inner-tile {
    position: relative;

    width: 192px;
    height: 192px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: 100% 100%;

    border:
        1px solid
        rgba(
            0,
            0,
            0,
            .18
        );

    overflow: hidden;

    cursor: pointer;

    touch-action: none;

    user-select: none;

    -webkit-user-select: none;
}


.territory-inner-tile.selected {
    outline:
        4px solid
        rgba(
            238,
            143,
            52,
            .88
        );

    outline-offset: -4px;

    filter:
        brightness(
            1.08
        );
}


.territory-inner-tile span {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-size: 52px;

    line-height: 1;

    z-index: 10;

    pointer-events: none;

    text-shadow:
        0 2px 5px
        rgba(
            0,
            0,
            0,
            .7
        );
}


/* =====================================================
   GLOBAL MAP
===================================================== */

.map {
    display: grid;

    grid-template-columns:
        repeat(
            10,
            1fr
        );

    grid-template-rows:
        repeat(
            10,
            1fr
        );

    gap: 2px;

    width: 100%;
    height: 100%;

    padding:
        10px
        max(
            12px,
            env(safe-area-inset-right)
        )
        10px
        max(
            12px,
            env(safe-area-inset-left)
        );

    background: #111;
}


.map-tile {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;
    min-height: 0;

    background: #252b2c;

    border:
        1px solid
        #3b4345;

    color: #777f80;

    font-size: 8px;

    overflow: hidden;
}


.map-tile.my-territory {
    background: #313a31;

    border-color: #647264;

    color: #c2d0c2;
}


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

@media (max-width: 900px) {

    .territory-map-header {
        min-height: 36px;

        padding-left:
            max(
                16px,
                calc(
                    env(safe-area-inset-left) +
                    8px
                )
            );

        padding-right:
            max(
                16px,
                calc(
                    env(safe-area-inset-right) +
                    8px
                )
            );

        gap: 7px;
    }


    .territory-map-title {
        min-width: 150px;
    }


    .territory-map-wrapper {
        /*
         * Чуть больше воздуха на Android.
         */

        margin-left:
            max(
                26px,
                calc(
                    env(safe-area-inset-left) +
                    14px
                )
            );

        margin-right:
            max(
                26px,
                calc(
                    env(safe-area-inset-right) +
                    14px
                )
            );
    }


    .map {
        padding-left:
            max(
                18px,
                calc(
                    env(safe-area-inset-left) +
                    10px
                )
            );

        padding-right:
            max(
                18px,
                calc(
                    env(safe-area-inset-right) +
                    10px
                )
            );

        padding-top: 9px;
        padding-bottom: 9px;
    }
}


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

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

    .territory-map-header {
        min-height: 32px;

        padding-top: 3px;
        padding-bottom: 3px;
    }


    .territory-map-wrapper {
        margin-left:
            max(
                22px,
                calc(
                    env(safe-area-inset-left) +
                    12px
                )
            );

        margin-right:
            max(
                22px,
                calc(
                    env(safe-area-inset-right) +
                    12px
                )
            );
    }


    .map {
        padding-left:
            max(
                14px,
                calc(
                    env(safe-area-inset-left) +
                    8px
                )
            );

        padding-right:
            max(
                14px,
                calc(
                    env(safe-area-inset-right) +
                    8px
                )
            );

        padding-top: 6px;
        padding-bottom: 6px;
    }
}