.category{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.category .game-card-small{
    width: 180px;
}

.pre-page, .next-page{
    flex: 1;
    width: 1rem;
    text-align: center;
    display: flex; /* 将左右元素设置为 flex 容器 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border: 1px solid var(--border-color);
    background-color: var(--main-bg-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pre-page:hover, .next-page:hover {
    background-color: var(--hover-color);
    color: white;
    border-color: var(--hover-color);
}
.moreBtn {
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
}

.moreBtn {
 width: 12rem;
 height: auto;
}

.moreBtn .circle {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 display: block;
 margin: 0;
 width: 3rem;
 height: 3rem;
 background: var(--header-bg-color);
 border-radius: 1.625rem;
}

.moreBtn .circle .icon {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}

.moreBtn .circle .icon.arrow {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: 1.125rem;
 height: 0.125rem;
 background: none;
}

.moreBtn .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg);
}

.moreBtn .button-text {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 1.85rem;
 color: var(--text-primary);
 font-weight: 700;
 line-height: 1.6;
 text-align: center;
 text-transform: uppercase;
}

.moreBtn:hover .circle {
 width: 100%;
}

.moreBtn:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

.moreBtn:hover .button-text {
 color: #fff;
}

@media (max-width: 478px){
    .category{
        flex-direction: column;
    }
    .pre-page, .next-page{
        display: none;
    }
    .category .game-block {
        width: 100%;
    }
    .category .game-card-small {
        width: 32%;
    }
}