/* 全局基础设置 */
body {
    background-color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

/* 核心：网格容器逻辑 */
.game-grid {
    display: grid;
    /* 核心：强制一行 6 列，且列宽相等 */
    grid-template-columns: repeat(6, 1fr); 
    gap: 20px; /* 卡片之间的间距 */
    padding: 10px;
}

/* 卡片容器 */
.game-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.game-card:hover {
    transform: translateY(-8px);
}

.game-card a {
    text-decoration: none !important;
}

/* 图片容器：强制统一比例 */
.img-container {
    width: 100%;
    aspect-ratio: 4 / 3; /* 统一 4:3 比例 */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-color: #f8f8f8;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片撑满且不变形 */
    display: block;
}

/* 标题样式 */
.card-body {
    padding: 12px 0;
    text-align: center;
}

.card-title {
    font-size: 0.9rem;
    font-weight: 700; /* 粗黑体 */
    color: #222;
    margin: 0;
    /* 标题过长自动省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 分页器样式 */
.pagination .page-link {
    border: none;
    background: #f4f4f4;
    color: #666;
    margin: 0 4px;
    border-radius: 8px !important;
    padding: 8px 16px;
}

.pagination .page-item.active .page-link {
    background: #000 !important;
    color: #fff !important;
}

/* 响应式：针对不同屏幕宽度自动调整列数 */
@media (max-width: 1200px) {
    .game-grid { grid-template-columns: repeat(5, 1fr); } /* 5列 */
}
@media (max-width: 992px) {
    .game-grid { grid-template-columns: repeat(4, 1fr); } /* 4列 */
}
@media (max-width: 768px) {
    .game-grid { grid-template-columns: repeat(3, 1fr); } /* 3列 */
}
@media (max-width: 480px) {
    .game-grid { grid-template-columns: repeat(2, 1fr); } /* 2列 */
    .game-grid { gap: 10px; }
}