/* games_carousel.css — 游戏列表轮播（3 行 × 6 列 / 每批 18 个，5 秒自动切换，可左右滑动）
 * 说明：只有当 JS 成功构建轮播、给原网格加上 .gc-hidden 后才隐藏原网格，
 *       避免 JS 未生效或 React hydration 替换子树时出现「整页空白」。
 */
.game-grid.game-grid-6.gc-hidden { display: none !important; }

.gc-wrap { position: relative; margin: 6px 0 4px; user-select: none; }
.gc-viewport { overflow: hidden; border-radius: 14px; }
.gc-track { display: flex; will-change: transform; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.gc-track.dragging { transition: none; cursor: grabbing; }
.gc-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

/* 控制条 */
.gc-controls { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.gc-arrows { display: flex; gap: 10px; }
.gc-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border, #e3e8f0); background: #fff;
  color: #1b2330; cursor: pointer; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(15,18,23,.08); transition: transform .15s, background .15s, border-color .15s, color .15s; }
.gc-btn:hover { transform: translateY(-2px); border-color: #2c63e9; color: #2c63e9; }
.gc-btn:active { transform: translateY(0); }
.gc-dots { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; justify-content: center; }
.gc-dot { width: 9px; height: 9px; border-radius: 50%; border: none; background: #cbd3e1; cursor: pointer; padding: 0;
  transition: background .2s, transform .2s; }
.gc-dot.active { background: #2c63e9; transform: scale(1.3); }
.gc-hint { font-size: 12.5px; color: #8a93a6; white-space: nowrap; }

/* 响应式：窄屏列数减少（仍为完整一批，仅换行更多） */
@media (max-width: 1100px){ .gc-page { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 680px){ .gc-page { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce){ .gc-track { transition: none; } }