/**
 * category.css
 * ================================================
 * 游戏分类页面样式定义文件
 * ------------------------------------------------
 * 功能说明：
 * 1. 定义游戏分类页面的整体布局样式
 * 2. 实现分类标签页的交互效果
 * 3. 设计游戏卡片在分类页面中的展示
 * 4. 优化分类页面的响应式体验
 * 5. 统一分类页面的视觉风格
 * 
 * 样式组织：
 * - 分类容器 (.game-category, .game-category-container)
 * - 分类标签 (.game-category-tabs, .category-tab)
 * - 游戏卡片网格 (.game-category-cards)
 * - 分类页面专用 (.category-page, .category-title)
 * - 响应式适配 (@media queries)
 * 
 * 页面类型：
 * - 首页分类区域 (.home-page .game-category)
 * - 独立分类页面 (.category-page .game-category)
 * - 游戏详情页分类 (.game-page .game-category)
 * 
 * 交互特性：
 * - 标签页切换动画
 * - 悬停状态反馈
 * - 游戏卡片网格布局
 * - 滚动内容适配
 * 
 * 设计理念：
 * - 清晰的信息层次
 * - 直观的分类导航
 * - 一致的视觉体验
 * 
 * 版本: 1.0.4
 * 最后更新: 2025-01-XX
 */

/* ===================== game category功能 ===================== */

/* 游戏分类区域标题样式 */
.game-category h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem; /* text-2xl */
  font-weight: 800; /* font-bold */
  margin-bottom: 1.5rem; /* mb-6 */
  color: #f5f5f7; /* text-white */
  line-height: 1.25; /* leading-tight */
}

/* 游戏分类区域 */
.game-category {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1.5rem 1.5rem;
}
@media (min-width: 640px) {
  .game-category {
    margin-left: 1rem; /* sm:px-4 移动和平板端 */
    margin-right: 1rem;
  }
}
@media (min-width: 1024px) {
  .game-category {
    margin-left: 1.5rem; /* lg:px-6 PC端 */
    margin-right: 1.5rem;
  }
}
.game-category-container {
  max-width: 88rem;
  margin: 0 auto;
}
.game-category-left-title {
  text-align: left;
  font-size: 1.125rem;
  color: #f5f5f7;
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.game-category-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.category-tab {
  border-radius: 0.4rem;
  border: 1px solid transparent;
  background: #191d35;
  color: #b8b8b8;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  font-family: 'Nunito', 'sans-serif';
  font-weight: 600;
  min-width: 80px;
  text-align: center;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.category-tab.active,
.category-tab:hover {
  border: 1px solid #4ecdc4;
  color: #4ecdc4 !important;
  background: transparent;
}
.category-tab.active i,
.category-tab:hover i {
  color: #4ecdc4 !important;
}
.game-category-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  justify-content: flex-start;
}
/* 游戏卡片的宽度设置 */
.game-category-cards > .game-card {
  width: 280px;
  flex: 0 0 280px;
}
@media (max-width: 640px) {
  .game-category-cards > .game-card {
    width: 100%;
    flex: 1 1 100%;
  }
}
@media (max-width: 1024px) {
  /* 分类tab栏移动端/平板端横向滑动（去除笼罩层，仅保留滑动） */
  .game-category-tabs {
    display: flex; /* 横向排列tab */
    overflow-x: auto; /* 横向滚动 */
    white-space: nowrap; /* 不换行 */
    gap: 1rem; /* tab间距 */
    -webkit-overflow-scrolling: touch; /* iOS流畅滑动 */
    position: relative;
    padding-bottom: 6px; /* 防止滚动条遮挡内容 */
  }
  /* 移除左右渐变遮罩层相关样式 */
  .category-tab {
    flex-shrink: 0; /* 不被压缩 */
    min-width: 80px; /* 保证点击区域宽度 */
    min-height: 44px; /* 保证触控高度 */
    padding: 0.25rem 0.5rem;
    text-align: center;
  }
  .game-category-tabs::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .game-category-tabs {
    -ms-overflow-style: none; /* IE/Edge隐藏滚动条 */
    scrollbar-width: none;    /* Firefox隐藏滚动条 */
  }
  /* 修正首页分类区H2和tab浮动问题：禁止 sticky/fixed/absolute，保证随内容滚动，仅限移动/平板端 */
  body.home-page .game-category h2,
  body.home-page .game-category .game-category-tabs {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    background: none !important;
  }
  body.home-page .game-category {
    scroll-margin-top: calc(40px + 1.5rem);
    /* 移除 margin-top，避免影响整体布局 */
    margin-top: 0 !important;
  }
}
/* ===================== game category功能 END ===================== */

/* ===================== 分类页面专用样式 ===================== */
.category-page .game-category {
  min-height: calc(100vh - 120px);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
  .category-page .game-category {
    min-height: calc(100vh - 100px);
    max-height: calc(100vh - 100px);
    margin-bottom: 2rem;
  }
}
.home-page .game-category {
  margin-bottom: 1.5rem;
}
.game-page .game-category {
  margin-bottom: 1.5rem;
}
h1.category-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #4ecdc4;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  line-height: 1.1;
  font-family: 'Nunito', 'sans-serif';
}
h2.category-subtitle {
  text-align: left;
  font-size: 1.125rem;
  font-weight: 400;
  color: #b8b8b8;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
  line-height: 1.4;
  font-family: 'Nunito', 'sans-serif';
}
/* 保证h1与h2之间有明显间隔 */
.category-title + .game-category {
  margin-top: 0;
}
@media (max-width: 640px) {
  h1.category-title {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  h2.category-subtitle {
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
  }
}
/* ===================== 分类页面专用样式 END ===================== */