/* 首页「游戏 / 漫画」分段切换。
   仅首页引入，置于 index_anime.css 之后、index_pc.css 之前。
   PC(≥1024px) 的网格定位在 index_pc.css 末尾一段，改动后两边都要 bump ?v=。

   ⚠ 卡片已**全部复刻游戏侧 DOM**：首页用推荐板块那格（.game-item/.icon-wrap/.game-name，
     皮在 index_anime.css / index_pc.css），分类页用游戏卡（.game-card/.card-media/.card-content，
     皮在 game-center.css/_anime/_pc）。所以本文件与 comic-cards.css 里**没有**漫画自己的
     卡片规则 —— 只剩「首页独有」的分段切换条 + 切换动效 + 面板显隐 + 面板盒模型，
     以及分类页漫画侧那点分栏补丁。
     comic-cards.css（筛选胶囊/提示行/详情页相似漫画卡）依赖 comic.css 的 --cm-* 令牌，
     所以首页要按 comic.css → comic-cards.css → home_comic.css 的顺序引。 */

/* ============================ 分段切换条 ============================ */

.home-seg {
    display: flex;
    gap: .33rem;
    margin: .5rem .83rem .66rem;
    padding: .25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 192, 159, .18);
    /* 吸顶：切换器一直够得着，滚到哪都能换。
       top 用 header 高度兜底；首页顶栏不是 fixed，所以 0 即可。 */
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}

.home-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .33rem;
    height: 2.83rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #C9A98C;
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.home-seg-btn .seg-ico { width: 1.5rem; height: 1.5rem; display: block; opacity: .75; }
.home-seg-btn.is-active {
    color: #2A0F1F;
    background: linear-gradient(135deg, #FF8FB1 0%, #B47CFF 100%);
    box-shadow: 0 .33rem .83rem rgba(180, 124, 255, .35);
}
.home-seg-btn.is-active .seg-ico { opacity: 1; filter: brightness(.35) saturate(0); }
.home-seg-btn:active { transform: scale(.97); }

/* ============================ 首页·漫画面板盒模型 ============================
   #comicPanel 是 .games-container 的**兄弟**而不是子节点，所以拿不到
   `html.app-dark .games-container` 那份 padding/gap。这里原样镜像一份 ——
   不镜像的话，漫画栏目会顶到屏幕边、栏目之间也没有间距，
   和上面的游戏栏目一眼就能看出不是同一套。
   （数值出处：index.html 内联 .games-container + index_anime.css:419 的 app-dark 覆盖。） */
#comicPanel {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    padding: 0 16px;
    box-sizing: border-box;
}
/* 栏目之间的间距由上面的 gap 给，所以 #hcRows 这一层壳也要是 flex ——
   否则一整摞推荐栏目会挤在一个 flex 项里，栏目间没有间距。 */
#hcRows {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
/* 栏目还没到达时先占住高度 —— 不占的话面板从「一行加载中」跳到「三四排栏目」，
   页面高度突变又是一次抖动。栏目一填进来 :empty 失效，min-height 自动让位。 */
#hcRows:empty { min-height: 64vh; }
@supports (height: 100dvh) { #hcRows:empty { min-height: 64dvh; } }
/* 横向留白现在由 #comicPanel 的 padding 统一给（对齐游戏栏目）。
   .cm-slide 自带一份左右外缩，不清掉就是双重缩进、比游戏栏目窄一圈。 */
#comicPanel > .cm-slide { margin-left: 0; margin-right: 0; }

/* 唯一的漫画专属微调：3:4 竖封面裁进游戏卡的 1:1 方框时，
   默认居中裁会把人物脸切掉一半 —— 偏上取景保住上半张（封面主体基本都在上方）。
   app-dark 那批 !important 只声明了 object-fit，没声明 object-position，所以这条压得住。 */
.cm-cat0 .game-icon { object-position: 50% 12%; }
/* 同理，分类页的漫画卡封面铺满卡片时也偏上取景（卡片比例、结构都和游戏卡一致，只有取景点不同）。 */
.gc-split--comic .card-banner { object-position: 50% 18%; }

/* 切换时的淡入，避免硬闪。
   只在 JS 主动切换时加 .hc-in（首屏加载不加）—— 否则游戏首页每次打开都会
   多一次淡入动画，看起来像回归 bug。 */
.hc-in { animation: hc-fade .22s ease both; }
@keyframes hc-fade { from { opacity: 0; transform: translateY(.33rem); } to { opacity: 1; transform: none; } }
/*
  [hidden] 会被作者声明的 display 盖掉（UA 的 [hidden]{display:none} 特异度最低），
  所以每个「被 JS 用 .hidden = true 切走」的容器都必须在这里点名。

  ⚠ .gc-split（分类页的游戏两栏区）是 display:flex —— 漏了它的话，
    分类页切到「漫画」时游戏两栏**根本不消失**，两块内容会同时堆在页面上。
    这不是老 WebView 的兼容问题，是所有浏览器都会犯的层叠问题。
*/
.home-panel[hidden],
.games-container[hidden],
.gc-split[hidden] { display: none !important; }

/* ============================ 首屏预判 tab（消抖） ============================
   上次选的是漫画时，模板里紧跟 seg 的那段内联脚本会在**内容区被解析之前**给 html
   打上标记类。这两条据此在首帧就把游戏区收掉、把漫画面板放出来 ——
   不打这个补丁的话，浏览器会先把游戏区画出来，等 body 末尾的 home-comic.js
   跑起来才切走，就是用户说的「进页面自己弹一下」。

   ⚠ `#comicPanel[hidden]` / `#gcComicPanel[hidden]` 必须带上 [hidden]：模板里那个属性
     还在（JS 接管前不能删，否则没 JS 的环境两块会同时显示），
     而上面 `.home-panel[hidden]{display:none!important}` 也带 !important，
     得靠 id + 属性把特异度提上去才压得住。
   ⚠ 分类页只能收「.main-container 的直接子 .gc-split」—— 漫画面板**内部**也有一个
     .gc-split.gc-split--comic，不加 `>` 会把漫画自己那两栏一起收掉。
   ⚠ home-comic.js 启动时会把标记类摘掉，否则切回「游戏」时游戏区会被钉成 display:none。
   ============================================================================ */
html.home-tab-comic .games-container { display: none !important; }
html.home-tab-comic #comicPanel[hidden] { display: flex !important; }
html.gc-tab-comic .main-container > .gc-split { display: none !important; }
html.gc-tab-comic #gcComicPanel[hidden] { display: flex !important; }

/* 卡片/胶囊/网格/横滑栏/区块标题/提示行 → comic-cards.css */

/* ============================ 分类页·漫画侧 ============================
   结构与游戏侧 .gc-split 一一对应（左竖栏分类 + 右内容区），且两侧的元素都挂了
   .gc-nav / .gc-sect / .gc-sect-title 角色类 —— game-center.css/_anime/_pc 里
   原本只按 #navigation / #games / #section-title 写的规则已经同时带上类版本，
   所以**整套版式是共用的，这里不再抄任何镜像**。

   本段只剩两件游戏侧没有的事：
   ① 面板外壳 .gc-comic-panel（漫画侧比游戏侧多包了一层，要把 flex 列上下文传下去）
   ② 档位 / 画风两行胶囊的间距
   ====================================================================== */

/*
  面板外壳。**必须和「.gc-split 作为 .main-container 直接子元素」时拿到的盒模型一样** ——
  漫画侧多包了一层 #gcComicPanel，而 game-center_pc.css 给 .gc-split 的
  `flex:1 1 auto; min-height:0` 在一个普通 block 父元素里是**无效声明**：
  于是 PC 下 .gc-split--comic 不再被视口高度约束，一路长到一万多像素，
  卡片行高塌成 0（封面区 flex:1 1 auto 拿不到高度）→ 就是「卡片只剩一行字、没有封面」。
  这一层把 .main-container 的 flex 列上下文原样传下去。
  （手机端 .main-container 不是 flex 列，这三条自然失效，与改前一致。）
*/
.gc-comic-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 左竖栏 / 右内容区的盒模型**不在这里抄了**：#cmNavigation 与 .cm-section 上挂了
   .gc-nav / .gc-sect 角色类，game-center.css/_anime/_pc 里那些原本只按
   #navigation / #games.games-section 写的规则已经同时带上类版本，直接命中漫画侧。
   （手抄镜像正是「两侧慢慢漂移」的来源，2026-08-21 已改成共用同一批规则。） */

/* 深色皮兜底那一整段也删了（原本用 .gc-split--comic 提特异度，把 .games-section 的
   Ethereal Mint 浅底、#cmNavigation 的暗底、标题色一条条补回来）。
   现在 .gc-sect / .gc-nav / .gc-sect-title 直接命中 game-center_anime.css 里同一批规则，
   补丁全部多余 —— 而且它带 !important 又排在 game-center_pc.css 之后，
   PC 下会把已经变成顶部横向页签的左栏重新刷成「暗底 + 右边框」。 */

/* 档位 / 画风两行胶囊（都走游戏那套 .plat-chip） */
.cm-mark-filter { padding: .5rem .83rem .25rem; }
.cm-style-filter { padding: .25rem .83rem .5rem; }
/* 网格本体不在这里写一条 —— 它现在就是游戏侧的 .game-list（.gc-split .game-list 已给
   2 列 / flex:1 / 内部滚动），再补 padding 只会和游戏侧漂移。 */