/* /themes/simpleboot3/mobilepublic/assets/css/index_dark.css */
/* ============================================================
   H5 首页深色改版（全沉浸 / 紫粉霓虹）
   作用域：html.app-dark —— 首页专有覆盖，token/共用组件由 app_dark.css 全局提供
   仅覆盖颜色/背景/边框等样式，不改任何布局逻辑
   ============================================================ */

/* 页面底色 */
html.app-dark body { background: var(--hd-bg); }
html.app-dark .page-container { background: var(--hd-bg); }
html.app-dark .indexpage { background: var(--hd-bg); color: var(--hd-text); }

/* 淡化滚动条（深色版，覆盖内联的 rgba(0,0,0,.15)） */
html.app-dark .indexpage::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
html.app-dark .indexpage::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.24); }

/* ---------- Banner 轮播 ---------- */
/* 去掉幻灯片白底，避免 object-fit:contain 露白边 */
html.app-dark .one .swiper-slide { background-color: #15151f; }
/* 分页点：未选浅白半透，选中用点缀渐变 */
html.app-dark .swiperHeader .swiper-pagination-bullet {
  background: rgba(255,255,255,0.35);
  opacity: 1;
}
html.app-dark .swiperHeader .swiper-pagination-bullet-active {
  background: var(--hd-grad);
}

/* ---------- 推荐游戏模块外壳 ---------- */
html.app-dark .games {
  background: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: 16px;
  color: var(--hd-text);
}
/* 压缩过高的标题栏 64px -> 44px */
html.app-dark .games-header { height: 44px; }
/* 区块标题：左侧渐变小竖条 + 浅色文字 */
html.app-dark .games-title {
  color: var(--hd-text);
  display: inline-flex;
  align-items: center;
}
html.app-dark .games-title::before {
  content: "";
  width: 3px;
  height: 14px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--hd-grad-v);
}

/* ---------- category_0 图标横向网格 ---------- */
html.app-dark .category_0 .game-name { color: var(--hd-text-2); }
html.app-dark .category_0 .icon-wrap .game-icon { border: 1px solid #34344a; }

/* ---------- category_1 带海报卡片 ---------- */
html.app-dark .category_1 .game-item {
  border-color: #34344a;
  background: var(--hd-elevated);
}
html.app-dark .category_1 .game-name { color: var(--hd-text); }
html.app-dark .category_1 .game-icon { border-color: var(--hd-border); }

/* ---------- category_2 大图卡片 ---------- */
html.app-dark .category_2 .game-item { background: var(--hd-elevated); }
html.app-dark .category_2 .up .name { color: var(--hd-text); }
html.app-dark .category_2 .up .desc { color: var(--hd-text-2); }
html.app-dark .category_2 .up .icon { border-color: var(--hd-border); }

/* ---------- category_3 海报 + 信息行 ---------- */
html.app-dark .category_3 .down .name { color: var(--hd-text); }
html.app-dark .category_3 .down .desc { color: var(--hd-text-2); }
html.app-dark .category_3 .down .play { background: var(--hd-grad); }

/* ---------- 活动公告 activity-module ---------- */
html.app-dark .activity-module {
  background: var(--hd-surface);
  border: 1px solid var(--hd-border);
  border-radius: 16px;
  color: var(--hd-text);
}
html.app-dark .activity-module .header .title {
  color: var(--hd-text);
  display: inline-flex;
  align-items: center;
}
html.app-dark .activity-module .header .title::before {
  content: "";
  width: 3px;
  height: 14px;
  margin-right: 7px;
  border-radius: 2px;
  background: var(--hd-grad-v);
}
/* 查看全部 pill */
html.app-dark .activity-module .header .more {
  background: var(--hd-border);
  color: var(--hd-text-2);
}
/* 列表项 */
html.app-dark .activity_article { border-bottom-color: var(--hd-border); }
html.app-dark .activity_content .title { color: var(--hd-text); }
html.app-dark .activity_content .time { color: var(--hd-text-3); }
/* 分类标签：保留品牌色字，底改深色半透明，描边淡化 */
html.app-dark .activity_article .type.category2 { color:#46e36a; background:rgba(56,216,41,.16);  border-color:transparent; }
html.app-dark .activity_article .type.category3 { color:#ffb454; background:rgba(255,161,60,.16); border-color:transparent; }
html.app-dark .activity_article .type.category4 { color:#ff5b6b; background:rgba(255,0,0,.16);     border-color:transparent; }
html.app-dark .activity_article .type.category5 { color:#ff5bc7; background:rgba(255,60,193,.16);  border-color:transparent; }
/* 空状态文案 */
html.app-dark .index_no_con { color: var(--hd-text-3); }

/* ============================================================
   立体感 Depth Pass —— 与「我的(user-center) / 邀请页」同款配方
   首页两大块区域(模块卡 .games、活动公告 .activity-module)原为纯色平涂、
   只有 1px 边框，整体偏平。套用同款深度配方：
     ① 微渐变面（上亮下暗 = 凸面受光）
     ② 顶部内高光发丝边（受光边）
     ③ 多层下沉投影（把面板抬离页面底）
     ④ 左上斜角流光 ::before（曲面反光，立体关键）
   模块内游戏卡 / 图标同步轻微上凸抬起，避免贴在浮起面板上显得凹陷。
   仅观感，作用域 html.app-dark，不改任何布局。
   ============================================================ */

/* —— 两大块区域：浮起的玻璃面板 —— */
html.app-dark .games,
html.app-dark .activity-module {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 32%),
    linear-gradient(168deg, #232333 0%, #15151f 100%);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
/* 内容压在流光之上 */
html.app-dark .games > *,
html.app-dark .activity-module > * { position: relative; z-index: 1; }
/* 左上斜角流光（曲面反光，立体关键） */
html.app-dark .games::before,
html.app-dark .activity-module::before {
  content: "";
  position: absolute;
  top: -45%; left: -18%;
  width: 52%; height: 86%;
  transform: rotate(-16deg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* —— 模块内游戏卡（海报卡/大图卡）：轻微上凸 + 抬起 —— */
html.app-dark .category_1 .game-item,
html.app-dark .category_2 .game-item {
  background: linear-gradient(180deg, #262636 0%, #1b1b27 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 12px rgba(0, 0, 0, 0.38);
}

/* —— category_0 图标：抬起的玻璃方块（截图里那个块）—— */
html.app-dark .category_0 .icon-wrap .game-icon {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 10px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   有光影的背景 —— 顶部主色光晕（与「我的」页 .main-container 同款）
   纯色底 var(--hd-bg) 太平。在内容区顶部加一层柔和的主色径向辉光，
   像从上方打来的光源：上方的卡片落在光池里、阴影方向一致，整页有立体光影。
   ============================================================ */
html.app-dark .indexpage {
  background-color: var(--hd-bg);
  background-image:
    radial-gradient(130% 52% at 50% -4%,
      rgba(180, 124, 255, 0.18) 0%,
      rgba(255, 143, 177, 0.06) 38%,
      transparent 64%);
  background-repeat: no-repeat;
}

/* ============================================================
   底部「请先添加到主屏幕」悬浮条 —— 深色玻璃药丸
   原 shuqian.png 是浅蓝底图（深青图标），在深色页里突兀又发亮。
   隐藏浅蓝底图 → 重建为半透明深色磨砂药丸（主色描边 + 抬升投影，立体），
   文案提亮，+ / ✕ 图标用 CSS 重绘。仅 html.app-dark，JS 控制显隐不受影响。
   ============================================================ */
html.app-dark .bookmark-btn {
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(42, 42, 60, 0.94) 0%, rgba(24, 24, 34, 0.94) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(180, 124, 255, 0.38);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
/* 隐藏浅蓝底图（+/✕ 改由 CSS 重绘） */
html.app-dark .bookmark-btn img { display: none; }
/* 文案提亮（覆盖内联 color:#325E73） */
html.app-dark .bookmark-btn > div:not([class]) {
  color: #d9ccff !important;
  font-weight: 600;
}
/* 左侧「+」：圆角方框内加号 */
html.app-dark .bookmark-open::before {
  content: "+";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  color: #cdb8ff;
  border: 1.6px solid rgba(205, 184, 255, 0.65);
  border-radius: 7px;
  box-sizing: border-box;
  pointer-events: none;
}
/* 右侧「✕」 */
html.app-dark .bookmark-close::before {
  content: "\2715";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  line-height: 1;
  color: #b9a3e6;
  pointer-events: none;
}
/* /themes/simpleboot3/mobilepublic/assets/css/index_ethereal.css */
/* ============================================================
   Ethereal Mint —— 推荐页(首页) 明亮/薄荷皮（DESIGN.md + code.html 参考稿）
   仅 mobile/index/index.html 加载本文件，且置于 index_dark.css 之后，源序压过深色皮。
   纯 UI：把首页从深色翻成浅色薄荷；不动任何链接/数据/JS/include 结构。
   令牌：bg #f8f9ff / 白卡 #fff / 主色薄荷 #006b5f / 亮薄荷 #2dd4bf / 文字 #0b1c30 / 次文 #3c4a46
        卡片圆角 24px / 软阴影 0 4px 20px rgba(0,0,0,.04)
   ============================================================ */

/* —— 底色：浅色（盖掉 index_dark 的深色底） —— */
html.app-dark, html.app-dark body,
html.app-dark .page-container,
html.app-dark .indexpage { background: #f8f9ff !important; background-color: #f8f9ff !important; color: #0b1c30 !important; }
html.app-dark .indexpage { overflow-x: hidden !important; }

/* —— 隐藏顶部粉色下载提示条(#headerDl)：与欢迎英雄重复 + 不符合薄荷风格；
   下载入口由欢迎英雄的「下载」按钮承载(同样指向 app_url)。仅视觉隐藏，不删功能。 —— */
html.app-dark #headerDl { display: none !important; }

/* —— 顶部 header bar：浅色 + 搜索框白圆角 —— */
html.app-dark .mainHeader,
html.app-dark #headerTitle,
html.app-dark .header_menu { background: transparent !important; }
html.app-dark .header_search {
    background: #fff !important; border-radius: 14px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important; border: 0 !important;
}
html.app-dark .header_search .search-placeholder { color: #3c4a46 !important; }

/* —— 欢迎英雄（设计有、页面无 → 按风格补充；下载按钮复用 app_url） —— */
html.app-dark .em-hero { position: relative; overflow: hidden; margin: 4px 0 4px; padding: 22px 20px 28px; }
/* 英雄背景图(screen.png)淡入 + 渐变融进页面色，保证深色标题可读 */
html.app-dark .em-hero .em-hero-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 28%; opacity: .55; }
html.app-dark .em-hero .em-hero-bg::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(248,249,255,.28) 0%, rgba(248,249,255,.56) 56%, #f8f9ff 100%); }
html.app-dark .em-kicker, html.app-dark .em-htitle { position: relative; z-index: 1; }
html.app-dark .em-kicker { color: #006b5f; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
html.app-dark .em-htitle { margin: 6px 0 0; max-width: 72%; font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: #0b1c30; }
html.app-dark .em-dl {
    position: absolute; right: 20px; top: 20px; z-index: 1;
    background: linear-gradient(135deg, #B47CFF 0%, #FF8FB1 100%); color: #fff !important;
    font-weight: 800; font-size: 14px; padding: 11px 20px; border-radius: 999px;
    box-shadow: 0 6px 18px rgba(180,124,255,.30); text-decoration: none !important;
}

/* —— 轮播图 → 圆角 banner —— */
html.app-dark .swiperHeader { margin: 16px 20px 0 !important; }
html.app-dark .swiper-container.one,
html.app-dark .one { border-radius: 24px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0,0,0,.06) !important; }
html.app-dark .one .swiper-slide { background-color: #e5eeff !important; }
html.app-dark .swiperHeader .swiper-pagination-bullet { background: rgba(0,107,95,.32) !important; }
html.app-dark .swiperHeader .swiper-pagination-bullet-active { background: #006b5f !important; }

/* —— 游戏分区：标题主色竖条 + 卡片浅色 —— */
/* 统一内缩：容器内边距 20px(替代 .games 的 width:100%+margin 溢出)，让 .games 与 .activity-module 同宽对齐 */
html.app-dark .games-container { background: transparent !important; padding: 0 20px !important; align-items: stretch !important; }
html.app-dark .games { background: transparent !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; width: 100% !important; box-sizing: border-box !important; }
html.app-dark .games-header { height: auto !important; margin-bottom: 12px !important; padding: 0 16px !important; }
html.app-dark .games-title { color: #0b1c30 !important; font-size: 18px !important; font-weight: 700 !important; margin-left: 0 !important; }
html.app-dark .games-title::before { background: #006b5f !important; }
/* 游戏内容去掉额外横向内边距，使游戏卡与活动公告卡左右同线(20px) */
html.app-dark .games-content { padding-left: 0 !important; padding-right: 0 !important; }

/* 游戏卡片（通用 + 各 category 变体） */
html.app-dark .game-name { color: #0b1c30 !important; }
html.app-dark .icon-wrap { border-radius: 18px !important; }
html.app-dark .game-icon,
html.app-dark .category_0 .icon-wrap .game-icon { border-radius: 18px !important; border: 0 !important; box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; background: #e5eeff !important; }
html.app-dark .category_1 .game-item,
html.app-dark .category_2 .game-item,
html.app-dark .category_3 .game-item {
    background: #fff !important; border: 0 !important; border-radius: 18px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
}
html.app-dark .category_1 .game-name,
html.app-dark .category_2 .up .name,
html.app-dark .category_3 .game-name { color: #0b1c30 !important; }
html.app-dark .category_2 .up .desc { color: #3c4a46 !important; }

/* —— category_3 卡片内部对齐：统一内边距(海报与下方行同宽对齐) + 文字 flex 收缩(防 去玩 溢出) + 去玩薄荷化 —— */
html.app-dark .category_3 .game-item { padding: 12px !important; gap: 12px !important; }
html.app-dark .category_3 .up { border-radius: 14px !important; }
html.app-dark .category_3 .down { width: 100% !important; box-sizing: border-box !important; flex-wrap: nowrap !important; }
html.app-dark .category_3 .down .text { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
html.app-dark .category_3 .down .name { max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #0b1c30 !important; }
html.app-dark .category_3 .down .desc { width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: #3c4a46 !important; }
/* 去玩按钮不收缩，长标题在它前面省略号截断(不再被遮) */
html.app-dark .category_3 .down .play { flex-shrink: 0 !important; background: linear-gradient(135deg, #B47CFF 0%, #FF8FB1 100%) !important; color: #fff !important; }

/* —— category_2 类型标签：橙色图片标签(type_tag.png) → 薄荷淡底 chip，与全站统一 —— */
html.app-dark .category_2 .type-tag {       /* 毛玻璃悬浮胶囊：任意封面上都清晰可读 */
    background-image: none !important;
    background: rgba(0, 0, 0, 0.32) !important;
    color: #fff !important;
    width: auto !important; height: auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
html.app-dark .category_2 .tag-value { width: auto !important; color: #fff !important; }

/* —— 兜底：各栏目卡(1/2/3)白底、内层容器透明，无残留深色 —— */
html.app-dark .category_1 .game-item, html.app-dark .category_2 .game-item, html.app-dark .category_3 .game-item { background: #fff !important; }
html.app-dark .category_1 .up, html.app-dark .category_1 .down,
html.app-dark .category_2 .up, html.app-dark .category_2 .down,
html.app-dark .category_3 .up, html.app-dark .category_3 .down { background-color: transparent !important; }
/* —— category_2 已改为 2 列海报卡：封面/图标占位浅底防滑动闪黑，标题深色 —— */
html.app-dark .category_2 .cover { background-color: #e5eeff !important; }
html.app-dark .category_2 .cover .cover-img {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; background-color: #e5eeff !important;
}
html.app-dark .category_2 .info .icon { border-radius: 8px !important; border: 0 !important; background-color: #e5eeff !important; }
html.app-dark .category_2 .info .name { color: #0b1c30 !important; }

/* —— 活动公告 → 白色圆角卡 —— */
html.app-dark .activity-module {
    background: #fff !important; border-radius: 24px !important; margin: 22px 20px 0 !important;
    width: auto !important; box-sizing: border-box !important; /* 防 width:100%+margin 溢出，卡左右与游戏卡同线 */
    box-shadow: 0 4px 20px rgba(0,0,0,.04) !important; padding: 6px 16px !important; border: 0 !important;
}
html.app-dark .activity-module .header { padding-top: 12px !important; padding-left: 0 !important; padding-right: 0 !important; }
html.app-dark .activity-module .header .title { color: #0b1c30 !important; }
html.app-dark .activity-module .header .more,
html.app-dark .activity-module .header .more span { color: #006b5f !important; }
html.app-dark .activity_article { border-bottom: 1px solid #eef1f5 !important; }
html.app-dark .activity_article .title { color: #0b1c30 !important; }
html.app-dark .activity_article .time { color: #9098a4 !important; }
html.app-dark .activity_image { border-radius: 12px !important; }
html.app-dark .index_no_con { color: #9098a4 !important; }

/* —— 底部导航：浅色玻璃（图标灰白只配深色 → 未选中 filter 变灰） —— */
/* html.app-dark .bottom-nav {
    background: rgba(248,249,255,.92) !important; backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid #e5eeff !important; box-shadow: 0 -4px 20px rgba(0,0,0,.05) !important;
}
html.app-dark .bottom-nav .nav-label { color: #6b7a76 !important; } */


/* 推荐(首页)tab 高亮：本文件仅首页加载→第一个 tab 即当前页；标签上主色、图标显示彩色 active 图(模板已换 active svg) */



/* 兜底浅色：根 / 容器 / 轮播 / 分区 —— 避免滑动时露深色块 */
html.app-dark .mainHeader, html.app-dark #headerTitle, html.app-dark .games-container,
html.app-dark .swiperHeader, html.app-dark .swiper-container.one, html.app-dark .swiper-wrapper {
    background-color: transparent !important; background-image: none !important;
}
html.app-dark .one .swiper-slide { background-color: #e5eeff !important; }
/* 截图行透明：缝隙露白卡而非深色(图本身的黑边是游戏 CG letterbox，非背景) */
html.app-dark .category_2 .down, html.app-dark .category_3 .down { background: transparent !important; }

/* —— 活动公告「查看全部」：去掉深色药丸底，纯主色文字（覆盖 index_dark 的 .more 底色） —— */
html.app-dark .activity-module .header .more { background: transparent !important; padding: 0 !important; }

/* —— 底部「请先添加到主屏幕」悬浮条：深色玻璃 → 浅色白玻璃(对齐参考稿 toast) —— */
html.app-dark .bookmark-btn {
    height: 44px !important;                 /* 原 60px → 更矮 */
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(11, 28, 48, 0.06) !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10) !important;
}
html.app-dark .bookmark-btn > div:not([class]) { color: #0b1c30 !important; font-size: 13px !important; }
/* + 号缩小 */
html.app-dark .bookmark-open::before {
    width: 19px !important; height: 19px !important; font-size: 16px !important; left: 14px !important;
    border-width: 1.4px !important; border-radius: 6px !important;
    color: #006b5f !important; border-color: rgba(0, 107, 95, 0.55) !important;
}
/* × 缩小 */
html.app-dark .bookmark-close::before { font-size: 13px !important; right: 14px !important; color: #6b7a76 !important; }

/* ============================================================
   彻底去黑：body 下所有「滚动容器 / 结构包裹层」强制浅色
   首页有嵌套滚动(.page-container 100vh overflow:auto + .indexpage overflow-y:auto)，
   且 app_dark.css 给 body / .page-container / .header_menu / .bottom-nav 等上了深色，
   滑动重绘时这些深色层会闪。这里统一压成浅色，根治黑闪。本文件仅首页加载。
   ============================================================ */
html.app-dark,
html.app-dark body,
html.app-dark .page-container,
html.app-dark .indexpage,
html.app-dark .mainHeader,
html.app-dark #headerTitle,
html.app-dark .header_menu,
html.app-dark .games-container,
html.app-dark .swiperHeader,
html.app-dark .swiper-container,
html.app-dark .swiper-container.one,
html.app-dark .swiper-wrapper {
    background: #f8f9ff !important;
    background-color: #f8f9ff !important;
    background-image: none !important;
}
/* 轮播图片底色用浅色，福利按钮深紫块改薄荷淡底 */
html.app-dark .one .swiper-slide { background-color: #e5eeff !important; }
html.app-dark .header_menu .fuli_btn { background: rgba(0, 107, 95, 0.12) !important; }
/* 底部导航保持浅色玻璃(再确认，防 app_dark 的 #15151f 透出) */
/* html.app-dark .bottom-nav { background: rgba(248, 249, 255, 0.92) !important; } */

/* ===== 根治"块滑动闪黑"：透明的合成层(滚动容器/overflow/带伪元素的块)在 iOS webview
   滑动重绘时会被绘成黑色。把它们一律改成不透明浅色，并去掉深色皮遗留的伪元素。 ===== */
html.app-dark .games { background-color: #f8f9ff !important; overflow: visible !important; }
html.app-dark .games::before, html.app-dark .games::after,
html.app-dark .activity-module::before, html.app-dark .activity-module::after { content: none !important; display: none !important; }
/* 截图行是横向滚动层 → 必须不透明(白)，否则滑动闪黑 */
html.app-dark .category_2 .down, html.app-dark .category_3 .down { background-color: #fff !important; }
/* 卡片不透明白底(再确认) */
html.app-dark .category_1 .game-item, html.app-dark .category_2 .game-item, html.app-dark .category_3 .game-item { background-color: #fff !important; }
/* 复现关键：category_3 海报容器 .up 是 overflow:hidden+圆角的合成层，之前设 transparent → 海报图懒加载时整块滑动闪黑。改不透明浅底(海报占位色)。 */
html.app-dark .category_3 .up { background-color: #e5eeff !important; }
html.app-dark .category_1 .up, html.app-dark .category_2 .up { background-color: #fff !important; }
/* 海报/图标占位也给浅底，懒加载前不露黑 */
html.app-dark .category_3 .up .poster, html.app-dark .category_2 .down .screenshot,
html.app-dark .category_2 .up .icon, html.app-dark .game-icon { background-color: #e5eeff !important; }

/* ===== 功能块项目「加载闪黑」根治：app-dark 全站常驻，lazyload_init.html 给 img.lazy 自身
   上了深色骨架(--hd-elevated #20202e / --hd-border #23232f)、失败态 --hd-bg #0f0f17(近黑)。
   前面只压了卡片/容器底色，图片元素本身没动 → 封面/海报/图标懒加载时整块闪黑。
   这里把 img.lazy 的骨架/失败态改成浅色薄荷占位(与卡片 #e5eeff 一致)。
   lazyload_init 的规则无 !important，本文件 !important 必胜，源序在后也无妨。本文件仅首页加载。 ===== */
html.app-dark img.lazy {
    background: linear-gradient(90deg, #eef3ff 0%, #eef3ff 40%, #dbe7ff 50%, #eef3ff 60%, #eef3ff 100%) !important;
    background-size: 200% 100% !important;
}
html.app-dark img.lazy.loaded { background: none !important; }
html.app-dark img.lazy.error { background: #e5eeff !important; }
/* /themes/simpleboot3/mobilepublic/assets/css/index_anime.css */
/* ============================================================
   暗夜玫瑰 · 暖金诱惑主题 (Anime ACG · Dark Rose Gold)
   仅 mobile/index/index.html 加载。置于 index_dark.css 与
   index_ethereal.css 之后, 用 !important 全面覆盖, 不动 JS 与 include。
   令牌:
     bg     #1A0F1A 暗酒红黑  /  #2D1B2E 暗紫红
     surf   #3D2438 卡片底   /  #4A2A40 卡片高亮
     gold   #D4A574 香槟金   /  #E8B4A0 玫瑰金  /  #F4D4A8 米金
     rose   #FF6B8A 烈焰玫红 /  #8B2C3F 红酒
     text   #FFF5E6 暖米白   /  #C9A98C 沙金
   圆角 16px / 金色描边 1px / 玫瑰阴影
   ============================================================ */

:root {
    /* 玫红夜空色板: 暗品红g底 + 立体粉卡 + 蜜桃高光 */
    --acg-bg-1: #2A0F1F;          /* 暗玫红夜空 */
    --acg-bg-2: #3A1228;          /* 品红夜空 */
    --acg-bg-deep: #1A0610;       /* 玫红极底 (最暗处) */
    --acg-surface: #C84573;       /* 玫红卡面 (深, 营造立体) */
    --acg-surface-hi: #FF8FB5;    /* 樱花粉高亮 (亮, 拉大对比) */
    --acg-gold: #E8B79A;          /* 蜜桃金 (旧 #D4A574 → 偏粉) */
    --acg-gold-light: #FFC09F;    /* 蜜桃肉色 (核心高光) */
    --acg-gold-soft: #FAD4C0;     /* 嫩肉粉 */
    --acg-rose: #FF8FA3;          /* 熟桃粉 (旧 #FF6B8A 加暖) */
    --acg-rose-deep: #C44569;     /* 树莓红 (旧 #8B2C3F → 更鲜) */
    --acg-peach: #FFB088;         /* 蜜桃橙 */
    --acg-salmon: #E8927C;        /* 三文鱼 */
    --acg-flesh: #F5B7B1;         /* 嫩肉粉 */
    --acg-text-1: #FFF0E0;        /* 暖奶白 */
    --acg-text-2: #E8B7A8;        /* 沙桃 */
    --acg-border: rgba(255, 192, 159, 0.35);
    --acg-border-strong: rgba(255, 192, 159, 0.6);
    --acg-shadow: 0 8px 28px rgba(196, 69, 105, 0.4), 0 0 0 1px rgba(255, 192, 159, 0.22);
    --acg-shadow-rose: 0 6px 22px rgba(255, 143, 163, 0.42);
    --acg-radius: 16px;
    --acg-img: url('/themes/simpleboot3/mobilepublic/assets/images/anime/');
}

/* —— 页面底色: 暗酒红渐变 + 玫红光晕 (覆盖 ethereal 浅薄荷) —— */
html.app-dark, html.app-dark body,
html.app-dark .page-container,
html.app-dark .indexpage {
    background: var(--acg-bg-1) !important;
    background-color: var(--acg-bg-1) !important;
    color: var(--acg-text-1) !important;
}

html.app-dark .page-container {
    position: relative;
    background:
        /* 顶部品红雾 (磁红光晕, 营造玫红夜空) */
        radial-gradient(110% 55% at 50% 0%, rgba(255, 90, 160, 0.25) 0%, transparent 60%),
        /* 右上桃粉光斑 */
        radial-gradient(60% 35% at 92% 18%, rgba(255, 143, 181, 0.22) 0%, transparent 55%),
        /* 中段玫红星云 */
        radial-gradient(80% 40% at 30% 40%, rgba(200, 70, 115, 0.18) 0%, transparent 60%),
        /* 左下暖蜜桃微光 */
        radial-gradient(55% 28% at 8% 78%, rgba(255, 176, 136, 0.12) 0%, transparent 55%),
        /* 右下深酒红沉底 */
        radial-gradient(70% 38% at 95% 95%, rgba(130, 35, 65, 0.22) 0%, transparent 60%),
        /* 主底渐变 */
        linear-gradient(180deg, #1A0610 0%, #2A0F1F 25%, #3A1228 50%, #2A0F1F 80%, #1A0610 100%) !important;
}

/* —— Layer 1: 大装饰 (玫瑰/蝴蝶/月/缎带, 缓慢漂浮) —— */
html.app-dark .page-container::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/butterfly.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/butterfly.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/moon.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/ribbon-bow.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/feather.svg');
    background-repeat: no-repeat;
    background-position:
        93% 91%,
        5% 78%,
        10% 32%,
        88% 50%,
        91% 13%,
        6% 8%,
        94% 70%;
    background-size:
        58px,
        44px,
        36px,
        30px,
        48px,
        30px,
        22px;
    opacity: 0.5;
    animation: acgFloat 18s ease-in-out infinite;
}

/* —— Layer 2: 星点闪烁层 —— */
html.app-dark .page-container::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg'),
        url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle-small.svg');
    background-repeat: no-repeat;
    background-position:
        22% 20%, 78% 28%,
        48% 38%, 18% 55%, 82% 68%, 36% 74%,
        62% 10%, 52% 88%;
    background-size:
        22px, 20px,
        12px, 14px, 11px, 13px,
        10px, 12px;
    opacity: 0.55;
    animation: acgBgTwinkle 3.6s ease-in-out infinite;
}

@keyframes acgFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(1.5deg); }
}
@keyframes acgBgTwinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.7; }
}

/* —— 隐藏顶部下载条 (与 hero 重复) —— */
html.app-dark #headerDl { display: none !important; }

/* —— 顶部 header: 玻璃质感 + 金色细描边 —— */
html.app-dark .mainHeader,
html.app-dark #headerTitle,
html.app-dark .header_menu {
    background: transparent !important;
}

html.app-dark .header_search {
    background: rgba(74, 42, 64, 0.72) !important;
    border: 1px solid var(--acg-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 14px rgba(139, 44, 63, 0.28) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
}
html.app-dark .header_search .search-placeholder,
html.app-dark .header_search input,
html.app-dark .header_search .search-text {
    color: var(--acg-text-2) !important;
}

/* —— 欢迎英雄 Hero: 紧凑横条 (高度约原 1/3) —— */
html.app-dark .em-hero {
    position: relative;
    overflow: hidden;
    margin: 10px 16px 6px !important;
    padding: 12px 18px !important;
    min-height: 70px !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg,
            rgba(255, 176, 136, 0.34) 0%,
            rgba(255, 143, 181, 0.58) 22%,
            rgba(200, 69, 115, 0.7) 48%,
            rgba(110, 30, 60, 0.88) 72%,
            rgba(42, 15, 31, 0.96) 100%) !important;
    border: 1px solid var(--acg-border-strong);
    box-shadow:
        var(--acg-shadow),
        inset 0 1px 0 rgba(244, 212, 168, 0.18);
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* 原 screen.png 背景图: 大幅减淡, 作底纹 */
html.app-dark .em-hero .em-hero-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center 30% !important;
    opacity: 0.22 !important;
    mix-blend-mode: luminosity;
}
html.app-dark .em-hero .em-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 143, 181, 0.45) 0%, rgba(130, 40, 75, 0.65) 60%, rgba(42, 15, 31, 0.94) 100%);
}

/* hero 装饰层 (HTML 中加入 .acg-hero-deco 元素) */
html.app-dark .acg-hero-deco {
    position: absolute;
    pointer-events: none;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
}
/* 高度变小后, 大装饰隐藏, 小装饰按比例缩小 */
html.app-dark .acg-hero-deco.acg-deco-silhouette { display: none; }
html.app-dark .acg-hero-deco.acg-deco-halo {
    right: -40px;
    top: -50px;
    width: 160px;
    height: 160px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/halo.svg');
    z-index: 0;
    opacity: 0.85;
}
html.app-dark .acg-hero-deco.acg-deco-rose-1 {
    left: 4px;
    bottom: 2px;
    width: 28px;
    height: 28px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg');
    z-index: 2;
    transform: rotate(-18deg);
    animation: acgFloat 8s ease-in-out infinite;
}
html.app-dark .acg-hero-deco.acg-deco-rose-2 {
    right: 96px;
    top: 6px;
    width: 20px;
    height: 20px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/rose.svg');
    z-index: 2;
    transform: rotate(22deg);
    opacity: 0.8;
}
html.app-dark .acg-hero-deco.acg-deco-butterfly {
    right: 88px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 26px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/butterfly.svg');
    z-index: 2;
    opacity: 0.75;
    animation: acgButterfly 6s ease-in-out infinite;
}
html.app-dark .acg-hero-deco.acg-sparkle-1 {
    left: 56%;
    top: 22%;
    width: 14px;
    height: 14px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg');
    z-index: 2;
    animation: acgTwinkle 2.4s ease-in-out infinite;
}
html.app-dark .acg-hero-deco.acg-sparkle-2 {
    left: 38%;
    bottom: 8px;
    width: 10px;
    height: 10px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg');
    z-index: 2;
    animation: acgTwinkle 3.2s ease-in-out infinite 0.6s;
}
html.app-dark .acg-hero-deco.acg-sparkle-3 {
    right: 72px;
    top: 18%;
    width: 12px;
    height: 12px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/sparkle.svg');
    z-index: 2;
    animation: acgTwinkle 2.8s ease-in-out infinite 1.2s;
}
html.app-dark .acg-hero-deco.acg-deco-moon {
    right: 18px;
    top: 18px;
    width: 36px;
    height: 36px;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/moon.svg');
    z-index: 2;
    opacity: 0.85;
    display: none; /* 与下载按钮冲突, 默认隐藏 */
}

@keyframes acgTwinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes acgButterfly {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    33%      { transform: translate(8px, -4px) rotate(4deg); }
    66%      { transform: translate(-4px, 6px) rotate(-3deg); }
}

/* Kicker (WELCOME TO) - 紧凑 */
html.app-dark .em-kicker {
    position: relative !important;
    z-index: 3 !important;
    color: var(--acg-gold-light) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 8px rgba(255, 107, 138, 0.4);
    line-height: 1.2 !important;
}
html.app-dark .em-kicker::before {
    content: '\002726  ';
    color: var(--acg-rose);
    margin-right: 1px;
}

/* 大标题 - 紧凑单行 */
html.app-dark .em-htitle {
    position: relative !important;
    z-index: 3 !important;
    margin: 2px 0 0 !important;
    max-width: 70% !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    color: var(--acg-text-1) !important;
    text-shadow:
        0 2px 12px rgba(139, 44, 63, 0.6),
        0 0 30px rgba(255, 107, 138, 0.25);
    font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 下载按钮: 金色玫瑰渐变胶囊 - 紧凑 */
html.app-dark .em-dl {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 25%, #FF8FA3 55%, #C44569 85%, #6B1A2F 100%) !important;
    color: #2D1018 !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    padding: 6px 16px !important;
    border-radius: 999px !important;
    box-shadow:
        0 4px 14px rgba(255, 107, 138, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(244, 212, 168, 0.85) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
html.app-dark .em-dl::before {
    content: '\002726  ';
    color: #8B2C3F;
}
html.app-dark .em-dl:active {
    transform: scale(0.94);
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.5) !important;
}

/* —— 轮播图: 暗酒红卡 + 金色描边 —— */
/* swiperHeader 背景强制透明 —— 覆盖 index_ethereal.css 的 #f8f9ff 白底,
   否则图片圆角外露出的是这层白(不是深色页面)。这是"白角"的真正来源。 */
html.app-dark .swiperHeader {
    margin: 14px 16px 6px !important;
    background: transparent !important;
    background-color: transparent !important;
}
html.app-dark .swiper-container.one,
html.app-dark .one {
    border-radius: 12px !important;
    overflow: hidden !important;
    /* 覆盖 index_ethereal.css 里 #f8f9ff 的近白容器底 */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
/* 轮播 slide / 链接层全透明，铺满不留白 */
html.app-dark .one .swiper-slide,
html.app-dark .one .swiper-slide a {
    background: transparent !important;
    background-color: transparent !important;
    margin-top: 0 !important;
}
/* 轮播图片: 铺满卡片(cover) + 圆角与卡片一致(12px, webkit 下也稳), 四角露的是深色页面不是白 */
html.app-dark .one .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}
html.app-dark .swiperHeader .swiper-pagination-bullet {
    background: rgba(212, 165, 116, 0.4) !important;
    opacity: 1 !important;
}
html.app-dark .swiperHeader .swiper-pagination-bullet-active {
    background: var(--acg-rose) !important;
    box-shadow: 0 0 8px rgba(255, 107, 138, 0.7);
}

/* —— 公告栏 (.news) 暗化处理 —— */
html.app-dark .news {
    background: var(--acg-surface) !important;
    color: var(--acg-gold-light) !important;
    border: 1px solid var(--acg-border) !important;
    border-radius: 10px !important;
}

/* —— 游戏栏目容器 —— */
html.app-dark .games-container {
    background: transparent !important;
    padding: 0 16px !important;
    align-items: stretch !important;
    position: relative;
    z-index: 1;
}
html.app-dark .games {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 栏目标题: 玫瑰前缀 + 金色文字 + 渐变下划线 */
html.app-dark .games-header {
    height: auto !important;
    margin-bottom: 14px !important;
    padding: 0 6px !important;
    position: relative;
}
html.app-dark .games-title {
    color: var(--acg-text-1) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-left: 0 !important;
    padding-left: 26px !important;
    position: relative;
    font-family: 'Noto Serif SC', 'Songti SC', serif;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 8px rgba(139, 44, 63, 0.5);
}
html.app-dark .games-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/title-rose.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 0 4px rgba(255, 107, 138, 0.45));
}
html.app-dark .games-title::after {
    content: '';
    position: absolute;
    left: 26px;
    right: 0;
    bottom: -8px;
    height: 1px;
    background: linear-gradient(90deg, var(--acg-gold) 0%, transparent 70%);
    opacity: 0.5;
}

html.app-dark .games-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* —— Category_0: 2 行 × 3 列 grid, 1:1 卡, 图铺满 + 文字浮底 —— */
html.app-dark .category_0,
html.app-dark .category_0[style] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    height: auto !important;
    flex-direction: unset !important;
    justify-content: unset !important;
    align-items: unset !important;
    padding: 0 !important;
    width: 100% !important;
}
/* 强制覆盖 JS 写入的 inline grid-template-rows */
html.app-dark .category_0[style*="grid-template-rows"] {
    grid-template-rows: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    overflow: visible !important;
}

/* 卡片: 1:1, 全图可点, 圆角 + 描边 + 阴影 */
html.app-dark .category_0 .game-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 12px !important;
    overflow: visible !important;
    text-decoration: none !important;
    background: var(--acg-bg-2) !important;
    border: 1px solid var(--acg-border) !important;
    box-shadow: 0 4px 12px rgba(139, 44, 63, 0.3) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html.app-dark .category_0 .game-item:hover {
    /* transform: translateY(-3px) scale(1.015);
    box-shadow: 0 10px 24px rgba(255, 107, 138, 0.4), 0 0 0 1px var(--acg-gold-light) !important; */
}
html.app-dark .category_0 .game-item:active {
    transform: scale(0.96);
}

/* icon-wrap 铺满整卡 */
html.app-dark .category_0 .icon-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: var(--acg-bg-2) !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
/* 图片本身铺满 + hover 微缩放 */
html.app-dark .category_0 .icon-wrap .game-icon,
html.app-dark .category_0 .game-icon {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: var(--acg-bg-2) !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.app-dark .category_0 .game-item:hover .game-icon {
    transform: scale(1.08);
}

/* 名字浮底 + 渐变蒙版 (与首屏推荐 / game-center 卡片同款) */
html.app-dark .category_0 .game-name {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 20px 6px 6px !important;
    color: #FFF0E0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    border-radius: 0 0 12px 12px!important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.95),
        0 0 8px rgba(80, 20, 50, 0.55) !important;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(20, 5, 12, 0.35) 35%,
        rgba(20, 5, 12, 0.82) 75%,
        rgba(20, 5, 12, 0.95) 100%) !important;
    z-index: 2;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 0 !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
}

/* 热门徽章 (z-index 提到文字之上) */
html.app-dark .category_0 .icon-wrap .hot {
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/hot-badge.svg') !important;
    width: 54px !important;
    height: 26px !important;
    color: transparent !important;
    font-size: 0 !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 3 !important;
    filter: drop-shadow(0 2px 6px rgba(255, 107, 138, 0.5));
}

/* —— Category_1: 外层 swiper 容器透明 (.games-content.category_1.swiper-container) —— */
html.app-dark .games-content.category_1,
html.app-dark .category_1.swiper-container,
html.app-dark .games-content.category_1.swiper-container,
html.app-dark .category_1 .swiper-wrapper,
html.app-dark .category_1 .swiper-slide {
    background: transparent !important;
    background-color: transparent !important;
    overflow: visible !important;
}

/* —— Category_1: 横排卡片轮播 (原橙色描边 → 金色描边) —— */
/* 整卡加高: 143 → 220, 海报区从 104 → 180 (约 16:9 显示) */
html.app-dark .category_1 .game-item {
    background:
        linear-gradient(180deg, var(--acg-surface-hi) 0%, var(--acg-surface) 100%) !important;
    border: 1px solid var(--acg-border-strong) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(139, 44, 63, 0.32), inset 0 1px 0 rgba(244, 212, 168, 0.18) !important;
    height: 220px !important;
}
html.app-dark .category_1 .game-poster {
    height: 180px !important;
}
html.app-dark .category_1 .game-name {
    color: var(--acg-text-1) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.85),
        0 0 8px rgba(80, 20, 50, 0.7) !important;
    font-weight: 700 !important;
}
html.app-dark .category_1 .game-icon {
    border: 1.5px solid var(--acg-gold-light) !important;
    box-shadow: 0 0 12px rgba(255, 107, 138, 0.3) !important;
}

/* —— Category_2: 2 列海报网格 —— */
html.app-dark .category_2 .game-item {
    background: var(--acg-surface) !important;
    border: 1px solid var(--acg-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 20px rgba(139, 44, 63, 0.28) !important;
}
html.app-dark .category_2 .cover {
    background-color: var(--acg-bg-2) !important;
}
html.app-dark .category_2 .cover .cover-img {
    background-color: var(--acg-bg-2) !important;
}
/* 类型标签: 蜜桃渐变胶囊 */
html.app-dark .category_2 .type-tag {
    background-image: none !important;
    background: linear-gradient(135deg, rgba(250, 212, 192, 0.95) 0%, rgba(255, 176, 136, 0.95) 50%, rgba(255, 143, 163, 0.92) 100%) !important;
    color: var(--acg-bg-2) !important;
    width: auto !important; height: auto !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 245, 230, 0.55) !important;
    padding: 4px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.4) !important;
}
html.app-dark .category_2 .tag-value {
    width: auto !important;
    color: var(--acg-bg-2) !important;
}
html.app-dark .category_2 .info {
    background: linear-gradient(180deg, rgba(74, 42, 64, 0) 0%, rgba(74, 42, 64, 0.5) 100%) !important;
}
html.app-dark .category_2 .info .icon {
    border-radius: 8px !important;
    border: 1px solid var(--acg-border) !important;
    background-color: var(--acg-bg-2) !important;
}
html.app-dark .category_2 .info .name {
    color: var(--acg-text-1) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 6px rgba(80, 20, 50, 0.55) !important;
    font-weight: 700 !important;
}
html.app-dark .category_2 .cover .swiper-pagination-bullet {
    background: var(--acg-gold-soft) !important;
}
html.app-dark .category_2 .cover .swiper-pagination-bullet-active {
    background: var(--acg-rose) !important;
}

/* —— Category_3: 大海报 + 信息行 —— */
html.app-dark .category_3 .game-item {
      background:
        linear-gradient(180deg, var(--acg-surface-hi) 0%, var(--acg-surface) 100%) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    padding: 8px 6px !important;
    gap: 6px !important;
}
html.app-dark .category_3 .game-item .down,
html.app-dark .category_3 .down {
    background: transparent !important;
    background-color: transparent !important;
}
html.app-dark .category_3 .up {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid var(--acg-border);
}
html.app-dark .category_3 .down {
    width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
}
html.app-dark .category_3 .icon {
    border: 1.5px solid var(--acg-gold-light) !important;
    box-shadow: 0 0 8px rgba(212, 165, 116, 0.4) !important;
}
html.app-dark .category_3 .down .text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html.app-dark .category_3 .down .name {
    color: var(--acg-text-1) !important;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(80, 20, 50, 0.65) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html.app-dark .category_3 .down .desc {
    color: var(--acg-text-2) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html.app-dark .category_3 .down .play {
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 25%, #FF8FA3 55%, #C44569 85%, #6B1A2F 100%) !important;
    color: #2D1018 !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    padding: 6px 18px !important;
    border: 1px solid rgba(244, 212, 168, 0.85) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.4) !important;
}

/* ============================================================
   攻略资讯 —— 玫红夜空·玻璃质感资讯卡 (炫酷版, 编排: 1 大图 hero + 紧凑列表)
   关键: 用站内"深酒红半透 + blur + 暖金描边 + 辉光"的好卡质感,
   而非之前那张实心亮粉填充(--acg-surface 太糊). 全部 !important + 末尾源序。
   ============================================================ */
html.app-dark .activity-module {
    margin: 16px 16px 26px !important;
    background: rgba(42, 15, 31, 0.72) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 192, 159, 0.30) !important;
    border-radius: 18px !important;
    box-shadow:
        0 12px 32px rgba(26, 6, 16, 0.55),
        inset 0 1px 0 rgba(255, 220, 200, 0.10) !important;
    overflow: hidden !important;
}
/* 标题: 暖金→玫红渐变字 + 柔光, 干净有"炫" */
html.app-dark .activity-module .header { padding: 16px 14px 4px !important; height: auto !important; }
html.app-dark .activity-module .header .title {
    margin-left: 0 !important;
    font-family: 'Noto Serif SC', 'Songti SC', serif !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    letter-spacing: 0.5px;
    background: linear-gradient(120deg, #FAD4C0 0%, #FF8FA3 55%, #C44569 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    filter: drop-shadow(0 1px 6px rgba(255, 143, 163, 0.35));
    text-shadow: none !important;
}
/* 查看全部: 金色玫瑰渐变胶囊 (与首页下载按钮 .em-dl 同款) */
html.app-dark .activity-module .header .more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 25%, #FF8FA3 55%, #C44569 85%, #6B1A2F 100%) !important;
    color: #2D1018 !important;
    border: 1px solid rgba(244, 212, 168, 0.85) !important;
    border-radius: 999px !important;
    padding: 5px 14px !important;
    height: auto !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    opacity: 1;
    text-decoration: none !important;
    box-shadow:
        0 4px 14px rgba(255, 107, 138, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
html.app-dark .activity-module .header .more span { color: #2D1018 !important; }
html.app-dark .activity-module .header .more:active {
    transform: scale(0.94);
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.5) !important;
}

/* 首条 hero 卡: 分类/日期浮在亮图上, 暖灰日期看不见 → 改高对比白字 + 描边阴影 */
html.app-dark .activity_article:first-child .activity_content .time {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85) !important;
}
html.app-dark .activity-module .body { padding: 10px 14px 14px !important; }

/* —— 首条: 大图 hero, 标题/标签压在图上 —— */
html.app-dark .activity_article:first-child {
    position: relative !important;
    display: block !important;
    height: 150px !important;
    padding: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border-bottom: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 192, 159, 0.22), 0 6px 18px rgba(26, 6, 16, 0.45) !important;
}
html.app-dark .activity_article:first-child .activity_image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    object-fit: cover !important;
}
html.app-dark .activity_article:first-child .activity_content {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2 !important;
    padding: 34px 13px 11px !important;
    background: linear-gradient(180deg, transparent 0%, rgba(20, 5, 12, 0.45) 42%, rgba(20, 5, 12, 0.92) 100%) !important;
}
html.app-dark .activity_article:first-child .activity_content .title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
}

/* —— 其余: 紧凑行 (文左 + 右侧小缩略图) —— */
html.app-dark .activity_article:not(:first-child) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid rgba(255, 192, 159, 0.14) !important;
}
html.app-dark .activity_article:last-child { border-bottom: 0 !important; }
html.app-dark .activity_article:not(:first-child) .activity_image {
    width: 88px !important;
    height: 60px !important;
    flex: 0 0 88px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255, 192, 159, 0.20) !important;
    object-fit: cover !important;
}
html.app-dark .activity_article:not(:first-child) .activity_content .title {
    color: var(--acg-text-1) !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* 时间 / 空态 */
html.app-dark .activity_content .time { color: var(--acg-text-3) !important; font-size: 11px !important; }
html.app-dark .index_no_con {
    color: var(--acg-text-2) !important;
    text-align: center;
    padding: 20px 0;
}

/* —— 分类标签: 玫红夜空发光小胶囊 (资讯/活动/公告/攻略) —— */
html.app-dark .activity_article .type {
    width: auto !important;
    height: auto !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
    line-height: 1.6 !important;
    border: 1px solid transparent !important;
    font-weight: 700 !important;
    font-size: 11px !important;
}
html.app-dark .activity_article .type.category2 { /* 资讯 · 青绿 */
    color: #8BE6C0 !important;
    background: rgba(93, 202, 165, 0.16) !important;
    border-color: rgba(93, 202, 165, 0.35) !important;
}
html.app-dark .activity_article .type.category3 { /* 活动 · 暖金 */
    color: #FFD7A8 !important;
    background: rgba(255, 192, 159, 0.16) !important;
    border-color: rgba(255, 192, 159, 0.40) !important;
}
html.app-dark .activity_article .type.category4 { /* 公告 · 玫红 */
    color: #FF9EAE !important;
    background: rgba(255, 143, 163, 0.18) !important;
    border-color: rgba(255, 143, 163, 0.42) !important;
}
html.app-dark .activity_article .type.category5 { /* 攻略 · 梦紫 */
    color: #CDBEFF !important;
    background: rgba(180, 124, 255, 0.18) !important;
    border-color: rgba(180, 124, 255, 0.40) !important;
}

/* —— 滚动条: 暖金 —— */
html.app-dark .indexpage::-webkit-scrollbar {
    width: 4px;
}
html.app-dark .indexpage::-webkit-scrollbar-track {
    background: transparent;
}
html.app-dark .indexpage::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--acg-gold) 0%, var(--acg-rose) 100%) !important;
    border-radius: 2px;
}

/* —— 首页弹窗 (home-pop) 玫瑰金描边 —— */
html.app-dark .home-pop-dialog {
    box-shadow:
        0 12px 36px rgba(139, 44, 63, 0.5),
        0 0 0 1px var(--acg-border-strong) !important;
    border-radius: 16px !important;
}

/* —— 18禁提示 / 书签按钮 保留原样, 不干预业务 —— */

/* —— 区块间分隔: 玫瑰金分割线 (附加, 不强制) —— */
html.app-dark .acg-divider {
    display: block;
    width: 100%;
    height: 24px;
    margin: 8px 0;
    background-image: url('/themes/simpleboot3/mobilepublic/assets/images/anime/divider-rose.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80% 100%;
    pointer-events: none;
}

/* —— 蜜桃光泽: 卡片顶部 1px 白光高光 + 玫红辉光阴影 (湿润感) —— */
html.app-dark .category_1 .game-item,
html.app-dark .category_2 .game-item,
html.app-dark .category_3 .up,
html.app-dark .em-hero,
html.app-dark .em-dl,
html.app-dark .category_3 .down .play,
html.app-dark .activity-module {
    position: relative;
}
html.app-dark .em-dl::after,
html.app-dark .category_3 .down .play::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    top: 2px;
    height: 35%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 999px;
    pointer-events: none;
}

/* —— 文字玫红荧光 (大标题 / 栏目标题) —— */
html.app-dark .games-title {
    text-shadow:
        0 2px 8px rgba(196, 69, 105, 0.6),
        0 0 18px rgba(255, 143, 163, 0.35) !important;
}

/* —— Hero 标题升级: 唇釉水光发光 —— */
html.app-dark .em-htitle {
    text-shadow:
        0 0 14px rgba(255, 143, 163, 0.55),
        0 2px 8px rgba(31, 10, 18, 0.9),
        0 0 28px rgba(255, 192, 159, 0.25) !important;
}

/* —— 全局微动效: 卡片按下反馈 —— */
html.app-dark .game-item,
html.app-dark .activity_article,
html.app-dark .em-dl,
html.app-dark .category_3 .down .play {
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}
html.app-dark .game-item:active,
html.app-dark .activity_article:active {
    transform: scale(0.97) !important;
}

/* —— 底部 nav (与 game-center 同步 + 激活态强化) —— */
html.app-dark .bottom-nav {
    background: rgba(45, 16, 24, 0.85) !important;
    border-top: 1px solid var(--acg-border) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 16px rgba(139, 44, 63, 0.35) !important;
}
html.app-dark .bottom-nav .nav-label {
    color: var(--acg-text-2) !important;
    transition: color 0.18s ease;
}
/* 激活态: label 玫红 + 加粗 + 光晕 */
html.app-dark .bottom-nav .nav-item.active .nav-label {
    color: var(--acg-rose) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 143, 163, 0.6);
}
/* 激活态: 图标微放大 + 玫红辉光 */
html.app-dark .bottom-nav .nav-item .nav-icon {
    transition: transform 0.18s ease;
}
html.app-dark .bottom-nav .nav-item.active .nav-icon {
    transform: translateY(-2px) scale(1.12);
    filter: drop-shadow(0 0 8px rgba(255, 143, 163, 0.55));
}
html.app-dark .bottom-nav .nav-item.active .nav-icon img {
    filter: drop-shadow(0 0 6px rgba(255, 143, 163, 0.55));
}

/* —— 可访问: 尊重 reduced-motion —— */
@media (prefers-reduced-motion: reduce) {
    html.app-dark .acg-hero-deco,
    html.app-dark .page-container::before,
    html.app-dark .page-container::after {
        animation: none !important;
    }
}

/* ============================================================
   底部「请先添加到主屏幕」悬浮条 —— 玫红夜空玻璃药丸
   原 shuqian.png 浅蓝底图 + ethereal 的白药丸在玫红夜空里突兀发亮。
   隐藏底图 → 重建为深酒红磨砂玻璃药丸（蜜桃金描边 + 玫红抬升投影），
   文案 / ＋ / ✕ 用本主题暖色 token 重绘，与输入框/卡片同体系。
   须 !important 盖过 index_ethereal 的白药丸规则；仅 html.app-dark，
   JS 控制显隐(.bookmark-btn show/hide)不受影响。纯 UI。
   ============================================================ */
html.app-dark .bookmark-btn {
    height: 48px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, rgba(74, 42, 64, 0.92) 0%, rgba(42, 15, 31, 0.94) 100%) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--acg-border-strong) !important;
    box-shadow:
        0 10px 28px rgba(26, 6, 16, 0.55),
        0 0 18px rgba(255, 143, 163, 0.18),
        inset 0 1px 0 rgba(255, 192, 159, 0.18) !important;
}
/* 隐藏浅蓝底图（＋/✕ 由 CSS 重绘） */
html.app-dark .bookmark-btn img { display: none !important; }
/* 文案：暖奶白（覆盖内联 color:#325E73 与 ethereal 深色） */
html.app-dark .bookmark-btn > div:not([class]) {
    color: var(--acg-text-1) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
/* 左侧「＋」：蜜桃金圆角方框加号 */
html.app-dark .bookmark-open::before {
    content: "+";
    position: absolute;
    left: 14px !important;
    top: 50%;
    transform: translateY(-50%);
    width: 21px !important;
    height: 21px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px !important;
    line-height: 1;
    font-weight: 300;
    color: var(--acg-gold-light) !important;
    border: 1.5px solid var(--acg-border-strong) !important;
    border-radius: 6px !important;
    box-sizing: border-box;
    pointer-events: none;
}
/* 右侧「✕」 */
html.app-dark .bookmark-close::before {
    content: "\2715";
    position: absolute;
    right: 15px !important;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px !important;
    line-height: 1;
    color: var(--acg-text-2) !important;
    pointer-events: none;
}
/* /themes/simpleboot3/mobile/v2/assets/css/comic-cards.css */
/* ============================================================================
   漫画卡片原语 —— 首页漫画面板、分类页漫画侧、漫画四页共用的一份。

   ★ 2026-08-21：**列表卡片已全部复刻游戏侧 DOM**，本文件不再有它们的样式 ——
     首页/推荐栏用游戏推荐板块那格（.game-item/.icon-wrap/.game-name，皮在
     index_anime.css + index_pc.css），分类页用游戏卡（.game-card/.card-media/
     .card-content，皮在 game-center.css/_anime/_pc），搜索页用游戏结果行
     （.search-result-*，皮在 search.css）。原先的 .hc-card/.hc-cover/.hc-grid/
     .comic-row 系列、.hc-sec 系列 已删。
     ⚠ 不要再往这里加漫画专属的列表卡样式：那正是「漫画和游戏看着像两个产品」的来路。
       要改列表外观就改游戏侧那几份，两边一起变。

   本文件现在只剩三类东西：
     ① --cm-* 令牌（comic.css 依赖它，首页只引本文件也要能拿到）
     ② 漫画独有、游戏侧无对应物的小件：轮播位 .cm-slide、筛选胶囊 .hc-filters/.hc-chip、
        提示行 .hc-tip、封面角标 .cm-corner/.cm-pages
     ③ 书架/详情信息卡还在用的两个小件：.cm-meta、.cm-corner
        （原先的「相似漫画」封面卡整套已随该模块一起删除）

   除渐变以外不硬编码颜色（CSS 变量里放渐变在低端 WebView 上支持不稳，故渐变写字面量）。

   引入顺序：
     漫画四页：comic-cards.css → comic.css → comic_pc.css
     首页：    comic-cards.css → home_comic.css
   改动后 bump 所有引入处的 ?v=。
   ============================================================================ */

/* 令牌 —— 与 v2 全站 _anime「ACG 玫红夜空」皮对齐（index_anime.css:15-37 的 --acg-* 同源值）：
   夜底 #1A0610/#2A0F1F/#3A1228 · 玫粉 #FF8FA3 · 深玫红 #C44569
   暖金桃 #FAD4C0 · 桃 #FFB088 · 暖白字 #FFF0E0 · 次文 #E8B7A8 · 弱文 #C9A98C */
:root {
    --cm-bg: #1A0610;
    --cm-bg-2: #2A0F1F;
    --cm-bg-3: #3A1228;
    --cm-card: #2A0F1F;
    --cm-card-hi: #3A1B2C;
    --cm-line: rgba(255, 192, 159, .18);
    --cm-line-hi: rgba(255, 192, 159, .38);
    --cm-pink: #FF8FA3;
    --cm-rose: #C44569;
    --cm-gold: #FAD4C0;
    --cm-peach: #FFB088;
    --cm-violet: #B47CFF;
    --cm-text: #FFF0E0;
    --cm-sub: #E8B7A8;
    --cm-dim: #C9A98C;
}

/* 兜底：作者声明的 display 会盖掉 UA 的 [hidden]{display:none}。
   漫画各处有好几个「模板先 hidden、JS 填好再放出来」的元素（轮播位、分类/画风胶囊、
   到底提示、搜索结果网格……），漏一个就是「该藏的没藏」。
   放在本文件是因为它是**每个出现漫画内容的页面都会加载**的那一份 ——
   首页与分类页并不加载 comic.css。
   ⚠ 只兜 hidden，不要在这里写 `*{box-sizing}` 之类的全局重置：
     漫画到处用 padding-bottom 百分比撑 3:4 占位，border-box 会把那套算法弄坏。 */
.home-panel [hidden],
.cm-page [hidden],
.search-results-section [hidden] { display: none !important; }

/* ---------------------------------------------------------------- 轮播位 */

/* 漫画轮播（wap_comic_index）。首页漫画面板与分类页漫画侧都用它，所以放在共用文件里
   —— 首页不加载 comic.css。原先是裸 volist，多张 banner 直接竖着堆叠（没接 swiper）。 */
.cm-slide {
    margin: .66rem .83rem .33rem;
    border-radius: .66rem;
    overflow: hidden;
    box-shadow: 0 .5rem 1.33rem rgba(0, 0, 0, .34);
}
.cm-slide .swiper-wrapper { display: flex; }
.cm-slide .swiper-slide { flex: 0 0 100%; width: 100%; }
.cm-slide a { display: block; }
.cm-slide img {
    width: 100%;
    display: block;
    /* 16:7 固定比例，避免不同尺寸的 banner 让首屏高度跳来跳去 */
    aspect-ratio: 16 / 7;
    object-fit: cover;
}
/* aspect-ratio 不支持时（Safari <15 / 老 WebView）退化成固定高 */
@supports not (aspect-ratio: 1) {
    .cm-slide img { height: 11rem; }
}
.cm-slide .swiper-pagination-bullet {
    background: rgba(255, 240, 224, .5);
    opacity: 1;
}
.cm-slide .swiper-pagination-bullet-active {
    background: var(--cm-pink);
    width: 1.33rem;
    border-radius: 999px;
}


/* ---------------------------------------------------------------- 胶囊筛选条 */

/* 空壳筛选行由 home-comic.js 加这个类收掉 —— 光靠 [hidden] 打不过下面的 display:flex。 */
.hc-bar-empty { display: none !important; }

.hc-filters {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .5rem .83rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hc-filters::-webkit-scrollbar { display: none; }

.hc-chip {
    flex: 0 0 auto;
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: 1.06rem;
    line-height: 1.66rem;
    white-space: nowrap;
    color: var(--cm-sub);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cm-line);
    text-decoration: none;
    transition: color .16s ease, background .16s ease, transform .12s ease, box-shadow .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.hc-chip:active { transform: scale(.96); }

.hc-chip.active {
    color: #2A0F1F;
    background: linear-gradient(135deg, #FFC09F 0%, #FF8FB1 52%, #B47CFF 100%);
    border-color: transparent;
    font-weight: 700;
    box-shadow: 0 .25rem .66rem rgba(255, 143, 163, .34);
}

/* 封面卡（.cm-card / .cm-cover-wrap / shimmer 骨架 / .cm-pages / .cm-cover-prog）已删 ——
   它们唯一的使用者是详情页的「相似漫画」，该模块 2026-08-21 按用户要求去掉了。
   书架（my-comic）用的是自己那套 .mc-*，不受影响。 */

/* ---------------------------------------------------------------- 角标 */

/* 会员档位角标：金玫渐变，与首页 CTA 同一族 */
.cm-corner {
    position: absolute;
    top: .3rem;
    left: .3rem;
    z-index: 3;
    padding: .1rem .42rem;
    border-radius: .3rem;
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.33rem;
    color: #2A0F1F;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 48%, #FF8FA3 100%);
    box-shadow: 0 .16rem .4rem rgba(196, 69, 105, .38);
}

/* ---------------------------------------------------------------- 卡片文字
   .cm-title 随「相似漫画」一起删了；.cm-meta 书架（my-comic）还在用，保留。 */
.cm-meta {
    font-size: .9rem;
    line-height: 1.33rem;
    color: var(--cm-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 横滑推荐栏（.comic-row-*）与区块标题（.hc-sec-*）已删 ——
   首页的推荐栏目现在就是游戏那套 .games > .games-header > .games-title +
   .games-content.category_0（见 mobilepublic@index/comic_panel + home-comic.js rowsHtml），
   标题的玫瑰前缀/金字/渐变下划线全部来自 index_anime.css，不再自己画一份。 */

/* ---------------------------------------------------------------- 提示行 */

.hc-tip {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--cm-dim);
    font-size: 1.05rem;
}
/* /themes/simpleboot3/mobilepublic/assets/css/home_comic.css */
/* 首页「游戏 / 漫画」分段切换。
   仅首页引入，置于 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 / .home-seg-btn）的样式**不在这里，在 home_zone.css**。
   本文件挂在 comic_show 开关下引入，而分段条在「关漫画、只开正常游戏区」时
   照样要渲染 —— 样式写这里会整条丢失，变成一排裸文字。
   本文件只保留漫画面板自身的盒模型/动效/显隐。
   ==================================================================== */
/* ============================ 首页·漫画面板盒模型 ============================
   #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 只会和游戏侧漂移。 */