.arcade-center-tools {
    margin:
        0 0 18px;

    padding:
        19px 20px;

    border:
        1px solid
        rgba(196, 92, 255, .22);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(28, 14, 35, .92),
            rgba(11, 8, 15, .97)
        );

    box-shadow:
        0 16px 44px
        rgba(0, 0, 0, .22);
}


.arcade-center-tools-head {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        18px;
}


.arcade-center-eyebrow {
    display:
        block;

    margin-bottom:
        5px;

    color:
        #c45cff;

    font-size:
        .63rem;

    font-weight:
        950;

    letter-spacing:
        .15em;
}


.arcade-center-tools h2 {
    margin:
        0;

    color:
        #fff;

    font-size:
        1.5rem;

    letter-spacing:
        -.025em;
}


.arcade-visible-count {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(196,92,255,.24);

    border-radius:
        9px;

    color:
        #e4b5ff;

    background:
        rgba(196,92,255,.08);

    font-size:
        .67rem;

    font-weight:
        950;

    letter-spacing:
        .08em;
}


.arcade-center-controls {
    display:
        grid;

    grid-template-columns:
        minmax(220px, 1fr)
        auto;

    gap:
        14px;

    align-items:
        end;

    margin-top:
        17px;
}


.arcade-search {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.arcade-search span {
    color:
        #917f99;

    font-size:
        .59rem;

    font-weight:
        950;

    letter-spacing:
        .13em;
}


.arcade-search input {
    width:
        100%;

    height:
        43px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        11px;

    outline:
        none;

    color:
        #fff;

    background:
        rgba(5,4,8,.72);

    font:
        inherit;
}


.arcade-search input:focus {
    border-color:
        rgba(196,92,255,.62);

    box-shadow:
        0 0 0 3px
        rgba(196,92,255,.08);
}


.arcade-filters {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.arcade-filter {
    min-height:
        43px;

    padding:
        0 13px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        10px;

    color:
        #9f91a5;

    background:
        rgba(255,255,255,.025);

    cursor:
        pointer;

    font-size:
        .62rem;

    font-weight:
        950;

    letter-spacing:
        .08em;

    transition:
        border-color .18s ease,
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.arcade-filter:hover {
    color:
        #fff;

    border-color:
        rgba(196,92,255,.40);
}


.arcade-filter.is-active {
    color:
        #fff;

    border-color:
        rgba(196,92,255,.60);

    background:
        rgba(196,92,255,.14);
}


.arcade-empty-state {
    margin:
        16px 0 0;

    padding:
        15px;

    border-radius:
        11px;

    color:
        #a999af;

    background:
        rgba(255,255,255,.025);
}


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


@media (max-width: 760px) {

    .arcade-center-tools {
        padding:
            16px;
    }


    .arcade-center-tools-head {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .arcade-center-controls {
        grid-template-columns:
            1fr;
    }


    .arcade-filters {
        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }


    .arcade-filter {
        padding:
            0 7px;

        font-size:
            .56rem;
    }
}