/*
 * 定义页面的布局
 */

* {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

*::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0; padding: 0;
}

img {
    image-rendering: pixelated;
    object-fit: contain;
}

.show-container, .tab-container, .item-container, .show, .item {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
}

/*展示部分*/
.show-container {
    /* right: auto; bottom: auto; */
    width: 100%; height: 100%;
    overflow: hidden;
}

.banner {
    position: absolute;
    bottom: 100vh;
    height: fit-content;
    font-size: 14vw;
    visibility: hidden;
}

.show {
    bottom: auto;
    width: auto; height: 92%; max-width: 100%;
}

/*标签部分*/
.tab-container {
    top: auto; bottom: 0;
    width: 100%; height: 8vh;
}

.tab-container > * {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5vh;
}

.tab {
    width: 15%; height: 100%;
    float: left;
}

.sex {
    position: absolute;
    top: auto; bottom: 0; left: auto; right: 0;
    width: 8vh; height: 8vh;
}

/*物品栏部分*/
.item-container {
    top: auto; bottom: 8vh; left: 0; right: 0;
    width: 100%; height: 0;
    opacity: 0%;
}

.main-container[status='selected'] > .item-container {
    width: 100%; height: max(60vw, 60vh);
    opacity: 100%;
}

.item {
    top: 0; bottom: 0;
    width: 96%; height: 96%;

    display: grid;
    grid-auto-flow: row;
    align-content: baseline;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2%;

    overflow: auto;
    visibility: hidden;
    opacity: 0%;
}

.item[status='selected'] {
    visibility: visible;
    opacity: 100%;
}


.item::-webkit-scrollbar {
    display: block;
    width: 2px;
}

.item::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

.icon {
    width: 100%; height: 100%;
}

/*响应横屏*/
@media screen and (orientation:landscape) {

    .main-container[status='selected'] .show {
        right: calc(min(90vh, 100%) + 8vh);
    }

    /*展示部分*/
    .banner {
        bottom: 10vh;
        visibility: visible;
    }

    .show {
        height: 100%;
    }

    /*标签部分*/
    .tab-container {
        left: auto; right: 0;
        width: 8vh; height: 100%;
    }

    .tab {
        width: 100%; height: 15%;
        writing-mode: vertical-rl;
    }

    /*物品栏部分*/
    .item-container {
        top: 0; bottom: 0; left: auto; right: 8vh;
        width: 20vh; height: 100%;
        opacity: 0%;
    }

    .main-container[status='selected'] > .item-container {
        width: min(90vh, calc(100% - 8vh)); height: 100%;
        opacity: 100%;
    }
}