/* ============================ 内容分段切换条 ============================
   色游 | 漫画 | 游戏 —— 一条三段，三颗都是 <button class="home-seg-btn">。
   首页 / 分类页 / 搜索页共用这一份。

   ⚠ 本文件**无条件引入**（不包在 <if comic_show> 里），这是它存在的全部理由：
     home_comic.css 挂在漫画开关下，而分段条在「关漫画、只开正常游戏区」时照样要渲染。
     样式放那边会整条丢失，变成一排裸文字。

   ⚠ 2026-09-05 之前这里放的是 .home-zone-seg / .home-seg-a —— 「正常游戏」当时是
     一条独立的、走 ?zone= 整页跳转的锚点条。改成前端 tab 后三颗同构，那两个类
     连同它们与 .home-seg 的层叠冲突（同容器双类名、靠引入顺序决胜负）一起删除。
   ==================================================================== */

.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); }

/* 同一套皮要同时服务 <button> 和 <a>：
   首页/分类页/搜索页的三颗是 <button data-tab>（前端 tab），
   而「我的游戏」页的分区切换是 <a href>（整页跳转，那边是闭合子图、走 URL 参数）。
   <a> 需要额外压掉下划线和访问过的颜色，否则切过一次就变成紫色链接。 */
a.home-seg-btn { text-decoration: none; }
a.home-seg-btn:visited { color: #C9A98C; }
a.home-seg-btn.is-active:visited { color: #2A0F1F; }

/* 首屏预判：模板里那段内联脚本在 html 上打 home-tab-<tab> / gc-tab-<tab>，
   在 home-comic.js 跑起来之前先把目标块顶上来，避免「先画色游区再被切走」的跳动。
   home-comic.js 启动时会摘掉这些类，之后一律由 [hidden] 控制。 */
html.home-tab-normal .games-container:not(.games-container--normal) { display: none !important; }
html.home-tab-normal .games-container--normal[hidden] { display: block !important; }

/* ⚠ 分类页**没有** gc-tab-normal 规则，这是刻意的：那边色游与正常游戏共用同一个
   .gc-split，切 tab 不换容器、只换数据（home-comic.js 的 normalSharesGames 模式）。
   隐藏 .gc-split 会让「点游戏整块列表消失」。首屏落在正常区时内容由 JS 重载，
   期间短暂显示的是色游区的货 —— 那是数据问题，CSS 挡不住也不该挡。 */

/* [hidden] 兜底。.games-container 有作者声明的 display，会盖掉 UA 的
   `[hidden]{display:none}`，不补这条的话正常游戏区那块藏不住、和色游区一起显示。
   ⚠ home_comic.css:69-71 有一份同样的规则，但那个文件挂在 comic_show 开关下引入 ——
   「关漫画、只开正常游戏区」时它根本不加载。所以这里必须再兜一份。 */
.games-container[hidden] { display: none !important; }

/* PC 宽屏：与 index_pc.css / comic_pc.css 里 .home-seg-btn 的处理一致。 */
@media (min-width: 1024px) {
    .home-seg { margin-left: 0; margin-right: 0; }
}