/*
Theme Name: Block Blast
Description: Block Blast custom arcade theme
Author: BlockBlast.it
Template: myarcade-theme
Version: 1.0.0
Text Domain: block-blast
*/
@import url(../myarcade-theme/style.css);
@import url(css/categories.css);
@import url(css/search-modal.css);

[class*=gmcn-midl],
[class*=gmcn-midl] figure.gm-imag {
    border-radius: 16px !important;
    overflow: hidden !important
}

[class*=gmcn-midl] figure.gm-imag {
    background-color: #f8f8f8 !important
}

[class*=gmcn-midl] figure.gm-imag img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform .3s !important
}

[class*=gmcn-midl]:hover .gm-imag img {
    transform: none !important;
    opacity: 1 !important
}

[class*=gmcn-midl] .gm-imag a:before {
    opacity: 0 !important;
    background: 0 0 !important
}

[class*=gmcn-midl]:hover .gm-imag a:before {
    opacity: 0 !important
}

[class*=gmcn-midl]:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .15) !important
}

[class*=gmcn-midl] .gm-text {
    background: linear-gradient(to top, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, .25) 40%, rgba(0, 0, 0, .05) 70%, rgba(0, 0, 0, 0) 100%) !important;
    padding: 8px 10px !important;
    bottom: -100% !important;
    opacity: 1 !important;
    transition: bottom .3s !important;
    height: auto !important;
    min-height: 40px !important
}

.game-header-grid .game-icon,
.game-header-grid .game-icon img {
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px !important
}

[class*=gmcn-midl]:hover .gm-text {
    bottom: 0 !important;
    padding-top: 15px !important
}

[class*=gmcn-midl] .gm-text .gm-titl a {
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2) !important;
    display: block !important;
    text-align: center !important;
    padding: 2px 0 !important;
    transition: transform .2s !important
}

[class*=gmcn-midl] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1) !important;
    transition: transform .3s, box-shadow .3s !important;
    margin-bottom: 7px !important;
    background-color: #fff !important;
    padding-top: 100% !important
}

[class*=lst-gams] {
    margin: -5px -5px 5px !important
}

.yarpp-related>div,
[class*=lst-gams]>li {
    padding: 5px !important
}

[class*=cntcls] {
    margin-right: -5px !important;
    margin-left: -5px !important
}

[class*=cntcls-n]>*,
[class*=cols-] {
    padding: 0 5px !important
}

[class*=btnscn],
[class*=frmgro],
[class*=frmspr] {
    margin: 5px 0 !important
}

.blk-cn {
    margin-bottom: 10px !important
}

.game-header-grid {
    display: grid !important;
    grid-template-columns: 80px 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 12px 16px !important;
    align-items: start !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    text-align: left !important
}

.game-header-grid .game-icon {
    grid-column: 1 !important;
    grid-row: 1/3 !important;
    margin: 0 !important;
    overflow: hidden !important
}

.game-header-grid .game-icon img {
    object-fit: cover !important;
    display: block !important
}

.game-header-grid .game-title {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #333 !important;
    text-align: left !important
}

.game-header-grid .game-rating {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    align-self: start !important
}

.game-header-grid .game_post_meta_data {
    grid-column: 1/-1 !important;
    grid-row: 3 !important;
    margin: 8px 0 0 !important;
    padding: 16px 0 0 !important;
    font-size: 14px !important;
    color: #666 !important;
    border-top: 1px solid #f0f0f0 !important
}

.game-header-grid .gm-vote a,
.game-header-grid .gm-vote img {
    cursor: pointer !important;
    pointer-events: auto !important
}

@media screen and (max-width:767px) {

    .game-header-grid .game-icon,
    .game-header-grid .game-icon img {
        width: 60px !important;
        height: 60px !important;
        border-radius: 10px !important
    }

    .game-header-grid {
        display: grid !important;
        grid-template-columns: 60px 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 10px 12px !important;
        align-items: start !important;
        margin: 16px 0 !important;
        padding: 0 !important
    }

    .game-header-grid .game-icon {
        grid-column: 1 !important;
        grid-row: 1/3 !important;
        margin: 0 !important;
        overflow: hidden !important
    }

    .game-header-grid .game-icon img {
        object-fit: cover !important;
        display: block !important
    }

    .game-header-grid .game-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: #333 !important;
        text-align: left !important
    }

    .game-header-grid .game-rating {
        grid-column: 2 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        align-self: start !important
    }

    .game-header-grid .game_post_meta_data {
        grid-column: 1/-1 !important;
        grid-row: 3 !important;
        margin: 8px 0 0 !important;
        padding: 16px 0 0 !important;
        font-size: 14px !important;
        color: #666 !important;
        border-top: 1px solid #f0f0f0 !important
    }

    .post-game .game-header-grid .game-icon,
    .post-game .game-header-grid .game-icon img {
        display: block !important
    }

    .post-game .game-header-grid,
    .post-game .game-header-grid .game-title {
        text-align: left !important
    }

    .yarpp-related>div,
    [class*=lst-gams]>li {
        width: 33.33333333% !important;
        padding: 3px !important
    }

    [class*=lst-gams] {
        margin: -3px -3px 3px !important
    }

    [class*=gmcn-midl] {
        margin-bottom: 5px !important
    }


    [class*=cntcls] {
        margin-right: -3px !important;
        margin-left: -3px !important
    }
}

.hot-flag,
[class*=gmcn-larg] .hot-flag,
[class*=gmcn-sldr] .hot-flag {
    top: 8px !important;
    right: 8px !important;
    font-size: 10px !important;
    padding: 4px 8px !important;
    letter-spacing: .5px !important;
    box-shadow: 0 2px 4px rgba(255, 71, 87, .3) !important;
    position: absolute !important;
    background: linear-gradient(135deg, #ff4757 0, #ff3742 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    animation: 2s ease-in-out infinite hotPulse !important;
    line-height: 1 !important
}

.search .cntcls .main-cn {
    width: 100% !important;
    max-width: none !important
}

.search .cntcls {
    display: block !important
}

.menu-botn {
    display: none !important
}

@media screen and (max-width:665px) {

    .post-game .game-header-grid .game-title,
    .post-game .game-header-grid h1,
    .post-game>header .game-header-grid,
    .post-game>header.game-header-grid {
        text-align: left !important
    }
}

.hot-flag {
    border-radius: 12px !important;
    z-index: 1 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important
}

@keyframes hotPulse {

    0%,
    100% {
        transform: scale(1) !important;
        box-shadow: 0 2px 4px rgba(255, 71, 87, .3) !important
    }

    50% {
        transform: scale(1.05) !important;
        box-shadow: 0 3px 6px rgba(255, 71, 87, .4) !important
    }
}

[class*=gmcn-larg],
[class*=gmcn-midl],
[class*=gmcn-sldr],
[class*=gmcn-smal] {
    position: relative !important
}

[class*=gmcn-larg]:hover .hot-flag,
[class*=gmcn-midl]:hover .hot-flag,
[class*=gmcn-sldr]:hover .hot-flag {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(255, 71, 87, .5) !important
}

[class*=gmcn-larg] .hot-flag,
[class*=gmcn-sldr] .hot-flag {
    border-radius: 12px !important;
    z-index: 10 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important
}

[class*=gmcn-smal] .hot-flag {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: linear-gradient(135deg, #ff4757 0, #ff3742 100%) !important;
    color: #fff !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    z-index: 10 !important;
    box-shadow: 0 1px 3px rgba(255, 71, 87, .3) !important;
    animation: 2s ease-in-out infinite hotPulse !important;
    line-height: 1 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important
}

[class*=gmcn-smal]:hover .hot-flag {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 4px rgba(255, 71, 87, .5) !important
}

.yarpp-related {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: -5px !important
}

.yarpp-related>div {
    width: 16.666667% !important;
    padding: 5px !important;
    box-sizing: border-box !important
}

.yarpp-related .gmcn-midl {
    margin-bottom: 0 !important
}

@media screen and (max-width:1024px) and (min-width:768px) {
    .yarpp-related>div {
        width: 25% !important
    }
}

@media screen and (max-width:767px) {
    .yarpp-related>div {
        width: 33.333333% !important;
        padding: 3px !important
    }

    .yarpp-related {
        margin: -3px !important
    }
}