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