/* ================================================================
   FILTER KATEGORI DEMO GAME
================================================================ */

/* Wadah kategori */
#maincontent
.container > .my-3:has(> a.btn.btn-outline-primary[href*="gameType"]) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 !important;
    padding: 12px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(165, 42, 218, 0.25),
            transparent 70%
        ),
        rgba(5, 0, 10, 0.86);

    border: 1px solid rgba(255, 215, 64, 0.75);
    border-radius: 12px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(174, 0, 255, 0.28);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Tombol kategori */
#maincontent
.container > .my-3
> a.btn.btn-outline-primary[href*="gameType"] {
    position: relative;
    flex: 0 0 auto;
    min-width: 82px;
    min-height: 40px;
    margin: 0 !important;
    padding: 9px 15px !important;

    color: #ffffff !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(185, 61, 235, 0.32),
            transparent 65%
        ),
        linear-gradient(
            145deg,
            #5b167d,
            #2c073d 55%,
            #110218
        ) !important;

    border: 1px solid rgba(255, 215, 64, 0.65) !important;
    border-radius: 0 !important;

    clip-path: polygon(
        9px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 9px),
        calc(100% - 9px) 100%,
        9px 100%,
        0 calc(100% - 9px),
        0 9px
    ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 4px 9px rgba(0, 0, 0, 0.42) !important;

    text-shadow: 0 1px 2px #000;

    transition:
        transform 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Tombol All */
#maincontent
.container > .my-3
> a.btn.btn-outline-primary[href*="gameType"]:first-child {
    color: #21002c !important;

    background: linear-gradient(
        135deg,
        #fff3a3,
        #ffd740 42%,
        #c89100 78%,
        #ffe978
    ) !important;

    border-color: #fff0a0 !important;
    text-shadow: none;
}

/* Hover kategori */
@media (hover: hover) and (pointer: fine) {
    #maincontent
    .container > .my-3
    > a.btn.btn-outline-primary[href*="gameType"]:hover {
        color: #ffd740 !important;
        background: linear-gradient(
            145deg,
            #9c2bd0,
            #581078 55%,
            #280336
        ) !important;
        border-color: #ffd740 !important;

        box-shadow:
            0 6px 13px rgba(0, 0, 0, 0.5),
            0 0 11px rgba(255, 215, 64, 0.42) !important;

        transform: translateY(-2px);
    }

    #maincontent
    .container > .my-3
    > a.btn.btn-outline-primary[href*="gameType"]:first-child:hover {
        color: #21002c !important;
        background: linear-gradient(
            135deg,
            #fff7c7,
            #ffe15b 48%,
            #d39b18
        ) !important;
    }
}


/* ================================================================
   BAR PENCARIAN DAN PAGINATION
================================================================ */

#maincontent
.container > .row.my-3:has(input[name="q"]):has(.pagination) {
    align-items: center;
    margin: 15px 0 24px !important;
    padding: 11px 7px;

    background: rgba(5, 0, 10, 0.86);
    border: 1px solid rgba(255, 215, 64, 0.75);
    border-radius: 12px;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.55),
        0 0 14px rgba(174, 0, 255, 0.25);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Kedua kolom */
#maincontent
.container > .row.my-3:has(input[name="q"]):has(.pagination)
> .col-lg-6 {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 6px !important;
}

/* Form pencarian */
#maincontent
.container > .row.my-3:has(input[name="q"]):has(.pagination)
form {
    width: 100%;
}

/* Input pencarian */
#maincontent
.container > .row.my-3:has(.pagination)
input.form-control[name="q"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 15px !important;

    color: #ffffff !important;
    font-size: 14px;
    caret-color: #ffd740;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(145, 34, 194, 0.24),
            transparent 45%
        ),
        rgba(10, 0, 16, 0.94) !important;

    border: 1px solid rgba(255, 215, 64, 0.72) !important;
    border-radius: 8px !important;
    clip-path: none !important;

    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.48),
        0 0 9px rgba(174, 0, 255, 0.2) !important;
}

/* Placeholder */
#maincontent
.container > .row.my-3:has(.pagination)
input.form-control[name="q"]::placeholder {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Input aktif */
#maincontent
.container > .row.my-3:has(.pagination)
input.form-control[name="q"]:focus {
    border-color: #ffd740 !important;

    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.48),
        0 0 0 2px rgba(174, 0, 255, 0.2),
        0 0 12px rgba(255, 215, 64, 0.3) !important;
}

/* Pagination di dalam bar pencarian */
#maincontent
.container > .row.my-3:has(input[name="q"])
nav:has(> ul.pagination) {
    justify-content: flex-end;
    margin: 0 !important;
    padding: 3px !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none !important;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Sedikit mengecilkan pagination agar rapi */
#maincontent
.container > .row.my-3:has(input[name="q"])
.pagination .page-link {
    min-width: 36px;
    min-height: 36px;
    padding: 6px 9px;
    font-size: 12px;
}


/* ================================================================
   SUSUNAN CARD GAME
================================================================ */

/* Grid card */
#maincontent
.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img) {
    --bs-gutter-x: 8px;
    --bs-gutter-y: 8px;

    margin-top: 0 !important;
    margin-bottom: 25px;
}

/* Setiap kolom */
#maincontent
.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
> .col-6.col-md-4.col-lg-3.col-xl-2 {
    display: flex;
}

/* Bingkai card game */
#maincontent
.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
> .col-6.col-md-4.col-lg-3.col-xl-2
> a {
    position: relative;
    display: block;
    width: 100%;
    padding: 2px;
    overflow: hidden;

    background: linear-gradient(
        135deg,
        #fff3a3,
        #ffd740 35%,
        #9a6108 65%,
        #ffe978
    );

    clip-path: polygon(
        8px 0,
        calc(100% - 8px) 0,
        100% 8px,
        100% calc(100% - 8px),
        calc(100% - 8px) 100%,
        8px 100%,
        0 calc(100% - 8px),
        0 8px
    );

    box-shadow:
        0 6px 13px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(174, 0, 255, 0.2);

    transition:
        transform 0.22s ease,
        filter 0.22s ease;
}

/* Garis bagian dalam */
#maincontent
.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
> [class*="col-"]
> a::after {
    content: "";
    position: absolute;
    inset: 3px;
    z-index: 2;
    pointer-events: none;

    border: 1px solid rgba(255, 238, 165, 0.28);

    clip-path: polygon(
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );
}

/* Gambar game */
#maincontent
.row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
> [class*="col-"]
> a
> img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;

    clip-path: polygon(
        6px 0,
        calc(100% - 6px) 0,
        100% 6px,
        100% calc(100% - 6px),
        calc(100% - 6px) 100%,
        6px 100%,
        0 calc(100% - 6px),
        0 6px
    );

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

/* Hover card game */
@media (hover: hover) and (pointer: fine) {
    #maincontent
    .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
    > [class*="col-"]
    > a:hover {
        z-index: 3;
        filter:
            drop-shadow(0 8px 11px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 5px rgba(255, 215, 64, 0.45));
        transform: translateY(-4px) scale(1.018);
    }

    #maincontent
    .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img)
    > [class*="col-"]
    > a:hover
    > img {
        filter: brightness(1.08) saturate(1.06);
        transform: scale(1.025);
    }
}


/* ================================================================
   TAMPILAN HP
================================================================ */

@media (max-width: 767px) {
    /* Kategori dapat digeser kanan-kiri */
    #maincontent
    .container > .my-3:has(> a.btn.btn-outline-primary[href*="gameType"]) {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 7px;
        padding: 9px;
        overflow-x: auto;

        scrollbar-width: thin;
        scrollbar-color: #ffd740 rgba(0, 0, 0, 0.4);
        -webkit-overflow-scrolling: touch;
    }

    #maincontent
    .container > .my-3
    > a.btn.btn-outline-primary[href*="gameType"] {
        flex: 0 0 auto;
        min-width: max-content;
        min-height: 37px;
        padding: 8px 13px !important;
        font-size: 12px;
    }

    /* Pencarian dan pagination disusun vertikal */
    #maincontent
    .container > .row.my-3:has(input[name="q"]):has(.pagination) {
        gap: 8px;
        padding: 10px 6px;
    }

    #maincontent
    .container > .row.my-3:has(input[name="q"]):has(.pagination)
    > .col-lg-6 {
        width: 100%;
        padding: 0 5px !important;
    }

    #maincontent
    .container > .row.my-3:has(input[name="q"])
    nav:has(> ul.pagination) {
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
    }

    #maincontent
    .container > .row.my-3:has(input[name="q"])
    nav:has(> ul.pagination)
    > ul.pagination {
        min-width: max-content;
    }

    /* Jarak card lebih kecil di HP */
    #maincontent
    .row:has(> .col-6.col-md-4.col-lg-3.col-xl-2 img) {
        --bs-gutter-x: 6px;
        --bs-gutter-y: 6px;
    }
}