body {
}

.wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(32, 161, 204, 0.6);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #20a1cc;
    }

.game-container {
    display: flex;
    flex: 1;
    height: 97vh;
    position: relative;
}

    .game-container #screen,
    .game-container .frame {
        width: 100%;
        height: 97vh;
    }

.side-view {
    display: flex;
    flex: 0 0 305px;
    flex-wrap: wrap;
}

@media screen and (max-width: 980px) {
    .game-container {
        flex: 1 1 100%;
        order: 1;
        height: 75vh;
    }

        .game-container #screen,
        .game-container .frame {
            width: 100%;
            flex: 0 0 100%;
            height: 75vh;
        }

    #playArea {
        margin-left: 20px;
    }

    .side-view {
        flex: 0 0 305px;
        justify-content: space-between;
        order: 1;
    }

    ._ap_apex_ad {
        display: flex;
        flex-wrap: wrap;
    }

    .full-ad {
        order: 0;
    }

    .vert-view {
        order: 3;
    }

    .adsbygoogle {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (min-width: 1366px) {
    .side-view {
        flex: 0 0 305px;
    }
}

.full-ad {
    display: flex;
    flex: 1 0 100%;
    order: 0;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #3d712d;
}

.grid-wrapper {
    display: grid;
    grid-template-columns: 1;
}

.game-grid {
    grid-row: span 2;
    order: 1;
}

    .game-grid .frame {
        width: 100%;
        height: calc(100vh - 115px);
    }

.grid-view-1 {
    grid-column: span 1;
    order: 0;
}

.grid-view-2 {
    grid-column: span 1;
    order: 2;
}

.grid-view-3 {
    grid-column: span 1;
    order: 3;
}

@media screen and (min-width: 768px) {
    .grid-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }

    .game-grid {
        grid-row: 1;
        grid-column: span 2;
        order: 0;
    }

    .grid-view-1 {
        order: 2;
    }

    .grid-view-2 {
        order: 3;
    }

    .grid-view-3 {
        order: 1;
    }
}

@media screen and (min-width: 1024px) {
    .grid-wrapper {
        grid-template-columns: repeat(4, 1fr);
    }

    .game-grid {
        grid-row: 1 / span 2;
        order: 1;
    }

    .grid-view-1 {
        order: 2;
    }

    .grid-view-2 {
        order: 3;
    }

    .grid-view-3 {
        grid-row: 1 / span 2;
        order: 0;
    }
}

.grid-wrapper-h {
    display: grid;
    grid-template-columns: 2;
}

.game-grid-h {
    grid-row: span 2;
    grid-column: 1 / span 2;
    order: 1;
}

    .game-grid-h .frame {
        width: 100%;
        height: calc(100vh - 300px);
    }

.grid-view-1-h {
    grid-column: span 1;
    order: 0;
}

.grid-view-2-h {
    grid-column: span 1;
    order: 2;
}

.grid-view-3-h {
    grid-column: 1 / span 2;
    order: 3;
}

@media screen and (min-width: 768px) {
    .grid-wrapper-h {
        grid-template-columns: repeat(2, 1fr);
    }

    .game-grid-h {
        grid-row: 1;
        order: 0;
        grid-column: 1 / span 3;
    }

    .grid-view-1-h {
        grid-row: 2 / span 2;
        order: 2;
    }

    .grid-view-2-h {
        order: 3;
    }

    .grid-view-3-h {
        order: 4;
    }
}

.video-ad-bottom {
    display: none;
}

@media screen and (max-width: 980px) {
    .video-ad-bottom {
        display: block;
        height: 35vh;
    }
}

@media screen and (max-width: 980px) and (orientation: landscape) {
    .game-container {
        zoom: 50%;
        height: 180vh;
        grid-column-start: 1 !important;
        grid-column-end: 2 !important;
    }

        .game-container #screen,
        .game-container .frame {
            width: 100%;
            flex: 1 1 100%;
            height: 180vh;
        }

    .video-ad-bottom {
        display: none;
    }
}