/* ============================================================
   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; }