/* GROUPFINDER v2.5.16 - herní galerie */

.gf-game-gallery{
    margin-top:28px;
}

.gf-game-gallery .gf-library-section-head{
    margin-top:0;
}

.gf-game-gallery-count{
    min-width:32px;
    height:28px;
    padding:0 9px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.055);
    color:#9ca5b5;
    font-size:10px;
}

.gf-game-gallery-stage{
    position:relative;
    margin-top:12px;
    overflow:hidden;
    border-radius:14px;
    background:#0b0d11;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
}

.gf-game-gallery-main{
    width:100%;
    aspect-ratio:16/9;
    padding:0;
    border:0;
    display:block;
    overflow:hidden;
    background:#090b0f;
    cursor:zoom-in;
}

.gf-game-gallery-main img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:opacity .16s ease,transform .22s ease;
}

.gf-game-gallery-main:hover img{
    transform:scale(1.012);
}

.gf-game-gallery-expand{
    position:absolute;
    right:14px;
    bottom:14px;
    min-height:34px;
    padding:0 10px;
    border-radius:9px;
    display:flex;
    align-items:center;
    gap:6px;
    background:rgba(8,10,14,.78);
    color:#e4e7ed;
    font-size:9px;
    pointer-events:none;
    backdrop-filter:blur(10px);
}

.gf-game-gallery-expand .material-symbols-rounded{
    font-size:17px;
}

.gf-game-gallery-nav{
    position:absolute;
    top:50%;
    width:38px;
    height:48px;
    margin-top:-24px;
    padding:0;
    border:0;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(8,10,14,.74);
    color:#fff;
    cursor:pointer;
    opacity:.76;
    transition:opacity .15s ease,background .15s ease;
    backdrop-filter:blur(10px);
}

.gf-game-gallery-nav:hover{
    opacity:1;
    background:rgba(19,21,28,.92);
}

.gf-game-gallery-nav.is-prev{left:12px}
.gf-game-gallery-nav.is-next{right:12px}

.gf-game-gallery-nav .material-symbols-rounded{
    font-size:24px;
}

.gf-game-gallery-thumbs{
    margin-top:9px;
    padding-bottom:3px;
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:8px;
}

.gf-game-gallery-thumb{
    position:relative;
    aspect-ratio:16/9;
    padding:0;
    border:0;
    border-radius:9px;
    overflow:hidden;
    background:#11141a;
    cursor:pointer;
    opacity:.62;
    box-shadow:0 0 0 1px transparent;
    transition:opacity .15s ease,transform .15s ease,box-shadow .15s ease;
}

.gf-game-gallery-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.gf-game-gallery-thumb:hover{
    opacity:.9;
    transform:translateY(-1px);
}

.gf-game-gallery-thumb.is-active{
    opacity:1;
    box-shadow:0 0 0 2px rgba(194,164,255,.76);
}

.gf-game-lightbox[hidden]{
    display:none!important;
}

.gf-game-lightbox{
    position:fixed;
    z-index:20000;
    inset:0;
    padding:28px 72px;
    display:grid;
    place-items:center;
    background:rgba(3,4,7,.94);
    backdrop-filter:blur(10px);
}

.gf-game-lightbox-image{
    max-width:min(1500px,100%);
    max-height:calc(100vh - 70px);
    display:block;
    object-fit:contain;
    border-radius:10px;
    box-shadow:0 28px 80px rgba(0,0,0,.45);
}

.gf-game-lightbox-close,
.gf-game-lightbox-nav{
    position:absolute;
    padding:0;
    border:0;
    display:grid;
    place-items:center;
    background:rgba(22,24,31,.86);
    color:#f3f4f7;
    cursor:pointer;
    backdrop-filter:blur(10px);
}

.gf-game-lightbox-close{
    top:20px;
    right:22px;
    width:42px;
    height:42px;
    border-radius:11px;
}

.gf-game-lightbox-nav{
    top:50%;
    width:48px;
    height:58px;
    margin-top:-29px;
    border-radius:11px;
}

.gf-game-lightbox-nav.is-prev{left:18px}
.gf-game-lightbox-nav.is-next{right:18px}

.gf-game-lightbox-close:hover,
.gf-game-lightbox-nav:hover{
    background:#272a33;
}

.gf-game-lightbox .material-symbols-rounded{
    font-size:26px;
}

body.gf-game-lightbox-open{
    overflow:hidden!important;
}

@media(max-width:1150px){
    .gf-game-gallery-thumbs{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

@media(max-width:820px){
    .gf-game-gallery{
        margin-top:22px;
    }

    .gf-game-gallery-stage{
        border-radius:11px;
    }

    .gf-game-gallery-thumbs{
        display:flex;
        gap:7px;
        overflow-x:auto;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }

    .gf-game-gallery-thumbs::-webkit-scrollbar{
        display:none;
    }

    .gf-game-gallery-thumb{
        flex:0 0 112px;
        scroll-snap-align:start;
    }

    .gf-game-gallery-nav{
        width:34px;
        height:44px;
    }

    .gf-game-gallery-expand span:last-child{
        display:none;
    }

    .gf-game-lightbox{
        padding:58px 10px 20px;
    }

    .gf-game-lightbox-nav{
        width:40px;
        height:50px;
    }

    .gf-game-lightbox-nav.is-prev{left:8px}
    .gf-game-lightbox-nav.is-next{right:8px}
}