/* 分类页 PC 版 —— 仅本页引入；仅 min-width:1024px。
   app 式布局：固定视口 + .game-list 内部滚动（load-more 监听 game-list.scroll，见 game-center.js:569，
   必须保住内部滚动）。

   2026-07-23 改版 —— 贴「姫游社·界面设计」稿：
     ① 分类页签横向置顶（左竖类目栏 → 顶部横向 tab，下划线选中）
     ② 平台 / 评级 双排筛选（::before 注入行标签）
     ③ 精简卡：图上·文下（覆盖 anime 的海报悬浮式），画风角标做左上横幅
     ④ 配色近黑紫扁平直角（底 #0B0812 / 卡 #150F22 / 系统紫 #7C3AED / CTA 粉 #FF3D8A，
        圆角全 0、去光晕阴影渐变，2026-07-25 按 neon-purple 规范换皮）+ 去浮动装饰
   纯 CSS，全部收在 @media(min-width:1024px) 内；手机端(game-center.css / _anime.css) 零改动。
   —— 不动任何数据绑定与 JS 业务逻辑；「筛选」功能保留，只换皮。 */
@media (min-width: 1024px) {

  /* ============================================================
     0. 配色 re-scope —— 仅 PC 由暖金玫 → 近黑紫扁平。
        令牌就地覆盖在 .gc-split（分类内容根）上，令其内 tab/胶囊/卡片/边框整体转紫；
        作用域刻意不放到 html.app-dark，避免波及左侧全局导航/顶部搜索条等共享 chrome。
        gold 系一并压成紫/评分金：anime 滚动条 gradient(gold→rose) 借此塌成纯紫。
     ============================================================ */
  html.app-dark .gc-split {
    --acg-rose:          #7C3AED;
    --acg-rose-deep:     #6D3FB5;
    --acg-gold:          #7C3AED;
    --acg-gold-light:    #FFB020;
    --acg-gold-soft:     #FFB020;
    --acg-surface:       #150F22;
    --acg-surface-hi:    #1F1233;
    --acg-border:        #241B36;
    --acg-border-strong: #3A2258;
    --acg-text-1:        #F2EEFA;
    --acg-text-2:        #9A8FB5;
  }

  /* 扁平底：radial 粉光+渐变底 → 近黑紫纯色 #0B0812 */
  html.app-dark body {
    box-sizing: border-box !important;   /* v2 body 是 content-box(见 home-pc 坑#6)，配 v2_pc 侧栏 padding 需 border-box 修正 */
    background: #0B0812 !important;      /* 与首页 1A 新皮同值（页面底纯色） */
  }
  /* 去浮动装饰（玫瑰/蝴蝶/月/缎带/羽毛 + 星点 ::after）—— 扁平化 */
  html.app-dark .main-container::before,
  html.app-dark .main-container::after {
    background-image: none !important;
    animation: none !important;
  }
  /* anime 22 行给 .main-container 铺 var(--acg-bg-1)(旧酒红)会盖住 body 的 #0B0812 → 转透明 */
  html.app-dark .main-container { background: transparent !important; }

  /* ============================================================
     1. 视口骨架（沿用原 app 式：定高填满 + 内部滚动）
     ============================================================ */
  html.app-dark .main-container {
    max-width: 1600px !important;        /* 与首页 indexpage 完全一致:1600 居中 → 切页顶栏/内容零位移(原 fill/1440 都和首页对不上) */
    margin-left: auto !important;
    margin-right: auto !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 14px 0 0 !important;        /* 顶部 14 对齐首页 mainHeader 的 padding-top;左右由 1600 居中控制(不再用固定内衬) */
  }

  /* ============================================================
     2. gc-split：左类目 + 右列表 两栏 → 单列纵叠
        页签(横向置顶) → 标题/筛选 → 平台 → 评级 → 宫格
     ============================================================ */
  html.app-dark .gc-split {
    flex: 1 1 auto !important;
    height: auto !important;             /* 覆盖 JS 写入的内联 height，防 bottom-nav=100vh 反算塌陷 */
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;   /* ← 关键：由 row 改 column */
    gap: 0 !important;
  }

  /* 2a. 类目页签：竖排左栏 → 横排顶条 */
  html.app-dark #navigation {
    flex: 0 0 auto !important;
    width: 100% !important;
    flex-direction: row !important;
    background: transparent !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--acg-border) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 6px !important;
  }
  html.app-dark .gc-split .tag-nav-wrapper {
    flex-direction: row !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html.app-dark .gc-split .tag-nav {
    flex-direction: row !important;
    align-items: center !important;
    gap: 2px !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  html.app-dark .gc-split .tag-link {
    width: auto !important;
    min-height: 0 !important;
    padding: 13px 18px !important;
    white-space: nowrap !important;
    border-radius: 0 !important;
    border-left: 0 !important;                        /* 去竖排左条 */
    border-bottom: 3px solid transparent !important;  /* 占位，选中态换成紫下划线不跳动 */
    background: transparent !important;
    color: var(--acg-text-2) !important;
    font-size: 1rem !important;
    line-height: 1 !important;
  }
  html.app-dark .gc-split .tag-link:hover {
    background: transparent !important;
    color: var(--acg-text-1) !important;
  }
  html.app-dark .gc-split .tag-link.active {
    background: #2A1046 !important;                   /* 选中 tab=实心强调块 + 系统紫下划线 */
    border-image: none !important;                    /* 清掉 anime 的左侧 border-image 竖条 */
    border-left: 0 !important;
    border-bottom: 3px solid #7C3AED !important;
    color: #D7C9F5 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }

  /* 2b. 右列表容器：占满剩余高度、纵向 flex，宫格内部滚动 */
  html.app-dark #games.games-section {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 12px 12px 8px 0 !important;   /* 左内衬移到 main-container(32),这里归 0,内容对齐 120(=与首页一致) */
  }

  /* 标题 + 筛选行(2026-07-29 用户指定去掉「全部游戏」标题文字并整体上移):
     标题隐藏;header 行脱离文档流绝对定位到区块右上,与「平台」筛选行同高,
     「筛选」按钮功能保留,下方内容整体上移一行 */
  html.app-dark .games-section { position: relative !important; }
  html.app-dark .games-header {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
  }
  html.app-dark .games-header #section-title { display: none !important; }
  html.app-dark .games-header .filter-container {
    background: #150F22 !important;
    border: 1px solid var(--acg-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ============================================================
     3. 双排筛选：平台 / 评级 —— 纯 CSS ::before 前缀行标签
     ============================================================ */
  html.app-dark .platform-filter,
  html.app-dark .mark-filter {
    flex: 0 0 auto !important;
    margin: 0 0 10px !important;
  }
  html.app-dark .platform-filter::before,
  html.app-dark .mark-filter::before {
    flex: 0 0 auto;
    margin-right: 4px;
    color: var(--acg-text-2);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.92;
  }
  html.app-dark .platform-filter::before { content: "平台"; }
  html.app-dark .mark-filter::before     { content: "评级"; }

  /* 胶囊：默认深底描边、active 实心强调块（覆盖 anime 暖金硬编码渐变），直角去光晕 */
  html.app-dark .plat-chip {
    background: #150F22 !important;
    border: 1px solid #2C2140 !important;
    border-radius: 0 !important;
    color: #8B7EA5 !important;
  }
  html.app-dark .plat-chip:hover {
    background: #1F1233 !important;
    color: #F2EEFA !important;
  }
  html.app-dark .plat-chip.active {
    background: #2A1046 !important;
    border-color: #6D3FB5 !important;
    color: #D7C9F5 !important;
    box-shadow: none !important;
  }

  /* ============================================================
     4. 宫格：宽屏多列（~6 列），拉开间距、内部纵向滚动
     ============================================================ */
  html.app-dark .gc-split .game-list {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 18px 16px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    padding: 4px 10px 24px 0 !important;   /* 左内衬归 0(交给 main-container 的 32),卡片左缘对齐 120 */
    margin-top: 0 !important;
  }

  /* ============================================================
     5. 精简卡片：图上·文下（覆盖 anime 的「海报悬浮」式）
     ============================================================ */
  html.app-dark .game-card {
    aspect-ratio: auto !important;               /* 由内容定高，非 4/5 定死 */
    display: flex !important;
    flex-direction: column !important;
    background: #150F22 !important;              /* 卡身近黑紫实底 */
    border: 1px solid var(--acg-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  html.app-dark .game-card-link:hover .game-card {
    transform: translateY(-3px) !important;
    border-color: #7C3AED !important;            /* hover 描边转系统紫，去光晕 */
    box-shadow: none !important;
  }

  /* 5a. 封面块：绝对铺满整卡 → 顶部相对定位固定比例块 */
  html.app-dark .card-media {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 7 / 5 !important;              /* 贴稿 ~1.4:1，少裁 16:9 封面 */
    flex: 0 0 auto !important;
    border-radius: 0 !important;
  }
  html.app-dark .card-media-clip {
    border-radius: 0 !important;                  /* 直角封面 */
  }

  /* 5b. 内容区：绝对悬浮蒙版 → 静态实底面板（图片下方） */
  html.app-dark .card-content {
    position: static !important;
    inset: auto !important;
    background: transparent !important;           /* 卡身已是近黑紫实底 */
    padding: 8px 10px 10px !important;
    gap: 5px !important;
    border-radius: 0 !important;
  }
  html.app-dark .card-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    color: #EDE7F8 !important;
  }
  /* 分类胶囊：实心强调块 #2A1046 字 #D7C9F5（选中/分类 chip 语言），直角 */
  html.app-dark .card-cat {
    color: #D7C9F5 !important;
    background: #2A1046 !important;
    border: 1px solid #2A1046 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
  }
  html.app-dark .card-size {
    color: #8B7EA5 !important;
    text-shadow: none !important;
  }

  /* 5c. 画风角标（左上·tag_name）：磨砂 pill → 实心系统紫直角横幅，去浮动去光晕 */
  html.app-dark .card-badge {
    left: 0 !important;
    top: 10px !important;
    max-width: 78% !important;
    padding: 4px 12px 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #7C3AED !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }

  /* 去玩按钮 / 简介：精简卡不显示（anime 已隐，此处兜底） */
  html.app-dark .card-play,
  html.app-dark .card-desc { display: none !important; }

  /* 左侧菜单「分类」选中态(粉贴片+白图标)已上移到共享 v2_pc.css(全站 5 个 tab 统一)，此处不再单独写。 */
}

/* ===== PC 分页组件:上一页 + 页码 + 下一页(2026-07-29 用户指定) =====
   JS(game-center.js renderPagination)动态挂在 .game-list 网格末尾,通栏一行居中;
   当前页粉底高亮,省略号折叠,首末禁用置灰。手机端不创建该元素,零影响。 */
@media (min-width: 1024px) {
  html.app-dark .gc-pager {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 14px 0 6px;
  }
  html.app-dark .gc-pg {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #2C2148;
    border: 1px solid #453466;
    border-radius: 0;
    color: #D7C9F5;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
  }
  html.app-dark .gc-pg:hover:not(.on):not([disabled]) { border-color: #9F6BFF; color: #F2EEFA; }
  html.app-dark .gc-pg.on {
    background: #FF3D8A;
    border-color: #FF3D8A;
    color: #fff;
    cursor: default;
  }
  html.app-dark .gc-pg[disabled] { opacity: .4; cursor: default; }
  html.app-dark .gc-pg-side { padding: 0 18px; }
  html.app-dark .gc-pg-gap { color: #6C5F80; font-size: 13px; padding: 0 2px; }
}