/* =========================================================================
   VAN 子主题 · 首页模块样式（9 个模块）
   ① 平台快捷导航  ② 游戏榜单  ⑥ 专题合集  ⑦ 热门标签云  ⑨ 新游上线预告
   ⑪ 攻略教程专区  ⑭ 更新滚动条  ⑰ 多层大Banner  ⑱ 签到刮刮卡

   命名空间约定：每个模块最外层容器带 .van-* 类，所有通用类名一律降级为
   后代选择器（如 .van-rank .tab），避免与父主题 ripro-v5 的 Bootstrap 5 冲突。
   颜色使用父主题变量 + 字面值兜底：var(--ri-primary, #3b6ff5)。
   仅本文件自定义的尺寸/缓动变量使用 --van-* 前缀，在下方 :root 定义一次。

   主题（浅色 / 深色）适配：卡片底色、文字、分隔线一律走下方语义变量
   --van-card / --van-soft / --van-line / --van-title / --van-strong /
   --van-text / --van-muted；深色只需在 [data-bs-theme="dark"] 里重定义这批
   变量，模块自动跟随。新增模块请勿再写死 #fff / --ri-gray-* 作为底或字色。

   Version: 1.70
   ========================================================================= */

:root {
    --van-radius: 0.5rem;
    --van-radius-card: 0.75rem;
    --van-radius-lg: 1rem;
    --van-pill: 999px;
    --van-gap: 16px;
    --van-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
    --van-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 40px -16px rgba(16, 24, 40, .22);
    --van-ease: cubic-bezier(.215, .61, .355, 1);
    --van-dur: .35s;

    /* ---- 主题感知的语义色（默认 = 浅色模式） ----
       深色模式只需在下方 [data-bs-theme=dark] 里重定义这几个变量，
       模块内所有卡片底色 / 文字 / 分隔线会自动跟随，无需逐条写深色选择器。 */
    --van-card: #fff;                             /* 卡片 / 面板底色 */
    --van-soft: var(--ri-gray-100, #f8f9fb);      /* 次级填充（浅灰块 / 药丸底） */
    --van-line: var(--ri-gray-100, #f8f9fb);      /* 分隔线 */
    --van-title: var(--ri-gray-800, #1a1c23);     /* 模块标题 */
    --van-strong: var(--ri-gray-700, #2d3039);    /* 正文强调 */
    --van-text: var(--ri-gray-600, #5d616e);      /* 正文 */
    --van-muted: #616875;       /* v1.12 提亮：原 #9499a5 在页面底 #f0f2f5 上仅 2.85:1，现 5.0:1 */     /* 弱化文字（副标题 / 计数） */

    /* ---- v1.12 新增语义令牌（§4，双份定义） ---- */
    --van-bg: #f5f6f8;                            /* 页面底色 */
    --van-accent: #12B981;                        /* 主色（链接 / 选中 / 进度） */
    --van-accent-weak: rgba(18, 185, 129, .10);   /* 主色浅底 */
    --van-accent-strong: #0a5c41;                 /* 主色「作为文字」时的暗色档 */
    --van-accent-ink: #04150f;                    /* 主色实底之上的文字（保证对比） */
    --van-cta: #FF6A3D;                           /* 强调色（CTA / 促销 / 榜一） */
    --van-cta-ink: #1a1c23;                       /* 强调色实底之上的文字 */
    --van-glow: transparent;                      /* 封面取色光晕（亮色默认无） */
    --van-on-media: #fff;                         /* 图片之上的文字（与主题无关，双份同值） */
    --van-scrim: rgba(12, 14, 18, .62);           /* 图片文字遮罩 */
    --van-hairline: 0 0 0 rgba(255, 255, 255, 0); /* 暗色内发光占位（亮色为空） */
}

/* 深色模式：整站 data-bs-theme="dark" 时接管
   父主题在深色下只重定义了语义变量（--ri-*-bg / --ri-emphasis-color /
   --ri-border-color / --ri-body-color 等），色阶变量 --ri-gray-* 仍是浅色值，
   所以直接沿用 --ri-gray-* 的卡片会「白底 / 黑字看不见」，必须在此覆盖。 */
[data-bs-theme="dark"] {
    --van-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --van-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 20px 40px -16px rgba(0, 0, 0, .7);

    --van-card: #21242b;                                      /* 与父主题深色 .card 一致，比页面底色略亮一档 */
    --van-soft: rgba(255, 255, 255, .07);
    --van-line: var(--ri-border-color, rgba(255, 255, 255, .08));
    --van-title: var(--ri-emphasis-color, #fff);
    --van-strong: var(--ri-emphasis-color, #f0f1f5);
    --van-text: var(--ri-body-color, #b0b5bd);
    /* v1.12：此处**故意不用** var(--ri-secondary-color, ...)：父主题在暗色下已定义该变量
       且值就是半透明的 rgba(176,181,189,.75)，叠在 --van-soft 上实测仅约 4.47，压线。
       改用不透明字面值，实测约 5.2:1。 */
    --van-muted: #9aa0ab;

    /* ---- v1.12 新增语义令牌（§4，双份定义） ---- */
    --van-bg: #0e1014;
    --van-accent: #2FE0A8;
    --van-accent-weak: rgba(47, 224, 168, .14);
    --van-accent-strong: #2FE0A8;
    --van-accent-ink: #04150f;
    --van-cta: #FF7A45;
    --van-cta-ink: #1a1c23;
    --van-glow: var(--van-accent);
    --van-on-media: #fff;
    --van-scrim: rgba(8, 10, 13, .66);
    --van-hairline: inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* 指示点已改为「浮在封面图上」（见下方 .van-rank-owl .owl-dots 规则）：
   它的底色不再是主题背景而是封面图本身，故不再按 light/dark 分别配色。 */

/* 深色下「选中 TAB」需比灰底托盘更亮一档才显得是浮起来的，
   故单独给一个比 --van-card 更亮的底色 + 深色投影。 */
[data-bs-theme="dark"] .van-rank .tab.active {
    background: #2b2f38;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* ===== 通用：模块标题栏（在各容器内生效） ===== */
.van-plat-nav .section-title,
.van-rank .section-title,
.van-collection .section-title,
.van-tags .section-title,
.van-upcoming .section-title,
.van-guide .section-title,
.van-scratch .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.van-rank .title-left,
.van-tags .title-left,
.van-upcoming .title-left,
.van-guide .title-left,
.van-scratch .title-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.van-plat-nav .section-title h3,
.van-rank .section-title h3,
.van-collection .section-title h3,
.van-tags .section-title h3,
.van-upcoming .section-title h3,
.van-guide .section-title h3,
.van-scratch .section-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--van-title);
}

.van-rank .sub,
.van-tags .sub,
.van-upcoming .sub,
.van-guide .sub,
.van-scratch .sub {
    font-size: 13px;
    font-weight: 500;
    color: var(--van-muted);
}

.van-rank .link-more,
.van-collection .link-more,
.van-upcoming .link-more,
.van-guide .link-more {
    font-size: 14px;
    font-weight: 500;
    color: var(--van-muted);
    text-decoration: none;
    transition: color var(--van-dur) var(--van-ease);
}

.van-rank .link-more:hover,
.van-collection .link-more:hover,
.van-upcoming .link-more:hover,
.van-guide .link-more:hover {
    color: var(--ri-primary, #3b6ff5);
}

/* =========================================================================
   ① 平台快捷导航
   ========================================================================= */
.van-plat-nav .van-plat-track {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
}

.van-plat-nav .van-plat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 8px;
    background: var(--van-card);
    border-radius: var(--van-radius-card);
    box-shadow: var(--van-shadow);
    text-align: center;
    text-decoration: none;
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-plat-nav .van-plat-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--van-shadow-hover);
}

.van-plat-nav .van-plat-ico {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    box-shadow: 0 8px 18px -8px rgba(16, 24, 40, .35);
}

.van-plat-nav .van-plat-ico.g1 { background: linear-gradient(135deg, #4f7ff7, #3b6ff5); }
.van-plat-nav .van-plat-ico.g2 { background: linear-gradient(135deg, #a78bfa, #8b5cf6); }
.van-plat-nav .van-plat-ico.g3 { background: linear-gradient(135deg, #f472b6, #ec4899); }
.van-plat-nav .van-plat-ico.g4 { background: linear-gradient(135deg, #2dd4bf, #14b8a6); }
.van-plat-nav .van-plat-ico.g5 { background: linear-gradient(135deg, #fb923c, #f97316); }
.van-plat-nav .van-plat-ico.g6 { background: linear-gradient(135deg, #34d399, #10b981); }
.van-plat-nav .van-plat-ico.g7 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.van-plat-nav .van-plat-ico.g8 { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

.van-plat-nav .van-plat-char {
    font-size: 20px;
    font-weight: 800;
    font-style: normal;
    color: #fff;
}

.van-plat-nav .van-plat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--van-strong);
}

.van-plat-nav .van-plat-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--van-muted);
}

@media (max-width: 991px) {
    .van-plat-nav .van-plat-track { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .van-plat-nav .van-plat-track {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .van-plat-nav .van-plat-track::-webkit-scrollbar { display: none; }
    .van-plat-nav .van-plat-item { flex: 0 0 92px; }
}

/* =========================================================================
   ② 游戏榜单（左纯图轮播 + 右纯文字排行）
   ========================================================================= */
.van-rank .tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--van-soft);
    border-radius: var(--van-pill);
}

.van-rank .tab {
    padding: 6px 16px;
    border-radius: var(--van-pill);
    font-size: 13px;
    font-weight: 600;
    color: var(--van-muted);
    text-decoration: none;
    transition: all var(--van-dur) var(--van-ease);
}

.van-rank .tab.active {
    background: var(--van-card);
    color: var(--ri-primary, #3b6ff5);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

.van-rank .van-rank-2col {
    align-items: stretch;
    /* v1.69：去掉 Bootstrap 行的负 margin / 列水平 padding（12+12 gutter），
       改用 column-gap —— 等效几何，但 aspect-ratio 从此对齐「图片真实宽度」。
       同时 JS 未加载（owl 隐藏）时列高仍由比例兜住，模块不会塌 0。 */
    margin-left: 0;
    margin-right: 0;
    column-gap: 24px;
}
.van-rank .van-rank-2col > * { padding-left: 0; padding-right: 0; }

/* 关键：两列必须 min-width:0。
   父主题 Bootstrap 5 的 .row 是 flex-wrap:wrap，.row > * 是 width:100%/max-width:100%，
   而 flex 项默认 min-width:auto 会把「内容最小宽度」当成本项的最小宽度。
   左侧列里有 owl 轮播（.owl-stage 被撑成数千 px 的内联宽度），
   其 min-content 会远超容器宽 → 两列装不进一行 → 被强制换行成上下堆叠（各占满宽），
   同时 owl 初始化时量到的宽度也随之出错（一屏并排显示约 2.7 张）。
   显式 min-width:0 后，两列才能并排，owl 也能量到正确宽度（一屏 1 张）。
   v1.65：左侧 2 : 右侧 1（回到 2:1），且左列高度跟随右列（见下方 .van-rank-owl 规则）。 */
.van-rank .van-rank-carousel {
    flex: 2 1 0;
    min-width: 0;
    /* v1.69：左列锁 2.18:1（大屏 821x376 的现状比例）。
       高度 = 列宽 / 2.18，任何屏宽下比例恒定；
       右列列表改为浮层（见 .van-rank-list），高度严格跟随本列。
       放在列上而非 .owl-loaded 上：owl JS 未加载时（.owl-carousel{display:none}）
       列高依然成立，模块不会塌成 0。 */
    aspect-ratio: 2.18;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.van-rank .van-rank-text {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    /* v1.69：列表改浮层（absolute 填满本列），本列不再贡献自然高度，
       两列行高 = 左列比例高 → 「图变矮、列表同步变矮」。
       ⚠ 同步的关键就是本条 aspect-ratio：≤991 堆叠后与图片同宽同高，
       列表（stretch 填满本列）随之严格同步；桌面同行时本列比例高(≈1/3 宽)
       比左列矮，stretch 拉到左列高度，不干扰行高。删掉它同步立即失效。 */
    position: relative;
    aspect-ratio: 2.18;
}

.van-rank .van-rank-owl { width: 100%; }

/* 指示点：绝对定位浮在封面图右下角。
   为什么不占行高：需求要求「左列高度 = 右列高度」且「图片 cover 铺满」。
   若指示点仍占一行（owl 默认约 34px），图片就比右侧排行卡矮一截、底边对不齐；
   浮层方案下图片铺满整列，点叠在图片右下角（3~5 颗，配暗投影清晰可读）。
   配色统一用「白点 + 暗投影」：它的底色是封面图（与主题明暗无关），
   所以在明暗两种封面上都看得清，不需要再分 light/dark。
   加 body 前缀提特异性，避免被父主题后加载的 owl 样式表压过。 */
body .van-rank .van-rank-owl .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;              /* 压掉 owl 的 .owl-nav.disabled+.owl-dots{margin-top:10px} */
    padding: 0 10px 8px 0;
    text-align: right;
    pointer-events: none;   /* 浮层不吃点击，避免挡住封面底部区域的链接 */
    z-index: 3;
    /* ↓ 清掉父主题 ripro-v5 给 .owl-dots 下的「居中毛玻璃药丸」：
       main.min.css 里是 position:absolute; left:50%; transform:translate(-50%,0);
       background-color:rgba(0,0,0,.2); backdrop-filter:blur(8px); border-radius:3rem;
       —— 结果点外面套了一层深色底，且整条浮层被 translate(-50%) 左移半个宽度，
       靠右定位全部失效（实测线上点容器 matrix(1,0,0,1,-410.664,0)、点落在图片正中）。 */
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
    transform: none;
}
body .van-rank .van-rank-owl .owl-dots .owl-dot { pointer-events: auto; }
body .van-rank .van-rank-owl .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 4px;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}
body .van-rank .van-rank-owl .owl-dots .owl-dot.active span,
body .van-rank .van-rank-owl .owl-dots .owl-dot:hover span {
    background: #fff;
}

/* 左侧大图区：占满左列的剩余高度，让左列与右侧排行等高（需求 ②），
   图片本身 background-size:cover 自适应铺满（需求 ③）。
   两个要点：
   1) 只在 .owl-loaded（owl 初始化完成）后才改成 flex 列布局 ——
      父主题用 .owl-carousel{display:none} 把未初始化的轮播藏起来，
      若这里无条件写 display:flex 会把它顶出来 → 初始化前闪出一堆竖排的图。
      加 .owl-loaded 后特异性 0,4,0，稳压父主题。
   2) 图片区高度走「flex 撑满 + height:100% 链条」：
      .owl-carousel → .owl-stage-outer → .owl-stage → .owl-item → .item → .van-rank-slide。
      指示点固定不参与伸缩（flex:0 0 auto），所以不会被图片挤掉。 */
body .van-rank .van-rank-owl.owl-loaded {
    position: relative;   /* 指示点浮层的定位上下文 */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* v1.69：高度由左列的 aspect-ratio 决定（列内唯一子元素，撑满即可），
       不再是「min-height 220 + 跟随列表」——比例恒定优先。 */
    min-height: 0;
}

body .van-rank .van-rank-owl .owl-stage-outer {
    flex: 1 1 auto;
    min-height: 0;
}

.van-rank .van-rank-owl .owl-stage,
.van-rank .van-rank-owl .owl-item,
.van-rank .van-rank-owl .item,
.van-rank .van-rank-slide {
    height: 100%;
}

/* 大图：宽度铺满格子、高度铺满上面那条链，cover 裁切填充不拉伸变形。
   min-height 只是兜底（JS 未初始化等极端情况不至于高度塌成 0 而整张图消失）。 */
.van-rank .van-rank-slide {
    position: relative;
    display: block;
    width: 100%;
    /* v1.69：旧 120px 兜底取消 —— 高度已由左列 aspect-ratio 兜住，
       留着会在 <262px 视口顶住图片、与列表高度脱钩 */
    min-height: 0;
    border-radius: var(--van-radius-lg);
    overflow: hidden;
    background-color: var(--ri-gray-800, #1a1c23);
    background-size: cover;
    background-position: center;
    box-shadow: var(--van-shadow);
    text-decoration: none;
}

.van-rank .van-rank-list {
    /* v1.69：列表高度严格等于左侧图片高度（图片变矮时列表同步变矮，欢哥需求）。
       真正实现同步的是 .van-rank-text 的 aspect-ratio + flex stretch（同宽同比例→同高）；
       这里的绝对定位只是溢出保险：行 min-height 顶住时把溢出裁进圆角盒。 */
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 14px;
    background: var(--van-card);
    border-radius: var(--van-radius-lg);
    box-shadow: var(--van-shadow);
}

.van-rank .van-rank-li {
    display: flex;
    align-items: center;
    gap: 12px;
    /* v1.69：固定 44px 改弹性行（列表高度由图片比例决定）。
       v1.70：flex-grow 归零——行不再拉伸吃掉富余空间，富余交给
       列表 justify-content:center 变成上下留白（此前行填满内容区，
       卡片上下贴边没空间）；空间不足时按比例压缩，min-height 30 兜底。 */
    flex: 0 1 44px;
    height: auto;
    min-height: 30px;
    padding: 0 12px;
    border-bottom: 1px solid var(--van-line);
    text-decoration: none;
    transition: background var(--van-dur) var(--van-ease);
}

.van-rank .van-rank-li:last-child { border-bottom: none; }
.van-rank .van-rank-li:hover { background: rgba(59, 111, 245, .06); }

.van-rank .van-rank-no {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--van-text);
    background: var(--van-soft);
}

.van-rank .van-rank-no.n1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }
.van-rank .van-rank-no.n2 { background: linear-gradient(135deg, #cbd5e1, #9499a5); color: #fff; }
.van-rank .van-rank-no.n3 { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }

.van-rank .van-rank-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--van-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--van-dur) var(--van-ease);
}

.van-rank .van-rank-li:hover .van-rank-name { color: var(--ri-primary, #3b6ff5); }

.van-rank .van-rank-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--van-muted);
    white-space: nowrap;
}

@media (max-width: 991px) {
    .van-rank .van-rank-carousel,
    .van-rank .van-rank-text { flex: 1 1 100%; }
    .van-rank .van-rank-list { padding: 12px; }
    /* v1.69：堆叠后图高 = 全宽 / 2.18（如 375px 视口 ≈139px），
       8 行塞不下 → 只显示前 6 行；可见最后一行去分隔线。 */
    .van-rank .van-rank-li:nth-child(n+7) { display: none; }
    .van-rank .van-rank-li:nth-child(n+6) { border-bottom: none; }
}

/* v1.70：桌面 1200~1439 显示 6 行（内容区 309.9px，6×44=264 留白 46）。
   必须在 991 块之后（同特异性媒体查询按源码顺序决胜，坑 19）。 */
@media (max-width: 1439.98px) {
    .van-rank .van-rank-li:nth-child(n+7) { display: none; }
    .van-rank .van-rank-li:nth-child(n+6) { border-bottom: none; }
}

/* v1.70：992~1199 与 768~991 堆叠段显示 5 行（992 最紧内容区 250px，
   5×44=220 留白 30）。累积语义：n+7 已隐 7~8，本块再隐 6。 */
@media (max-width: 1199.98px) {
    .van-rank .van-rank-li:nth-child(n+6) { display: none; }
    .van-rank .van-rank-li:nth-child(n+5) { border-bottom: none; }
}

/* v1.70：576~651 显示 4 行（600px 视口内容区仅 212.7px，5×44=220 会被
   压满贴边；4×44=176 留白 37）。必须在 1199.98 块之后。 */
@media (max-width: 651.98px) {
    .van-rank .van-rank-li:nth-child(n+5) { display: none; }
    .van-rank .van-rank-li:nth-child(n+4) { border-bottom: none; }
}

/* v1.69：≤575 再减到 3 行。v1.70：行偏好降到 34px——375px 视口内容区
   115px，3×34=102 留白 13（44px 时 132>115 会被压满、上下贴边无空间）。 */
@media (max-width: 575.98px) {
    .van-rank .van-rank-li { flex-basis: 34px; }
    .van-rank .van-rank-li:nth-child(n+4) { display: none; }
    .van-rank .van-rank-li:nth-child(n+3) { border-bottom: none; }
}

/* 时间范围面板：默认隐藏，仅激活面板显示 */
.van-rank .van-rank-pane { display: none; }
.van-rank .van-rank-pane.active { display: block; }
.van-rank .van-rank-tab { cursor: pointer; }
.van-rank .van-rank-empty { padding: 40px 20px; text-align: center; color: var(--van-muted); font-size: 14px; background: var(--van-card); border-radius: .5rem; }

/* =========================================================================
   ⑥ 专题合集（横滑）
   ========================================================================= */
.van-collection .van-collection-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.van-collection .van-collection-track::-webkit-scrollbar { display: none; }

.van-collection .van-collection-item {
    flex: 0 0 calc(25% - 14px);
    position: relative;
    /* v1.69：锁 1.76:1（大屏 300x170 现状比例），窄屏宽度变、高度等比缩。
       原 170px / 160px 固定高会让比例随屏宽乱跳（300/170 → 218/160）。 */
    aspect-ratio: 1.76;
    border-radius: var(--van-radius-lg);
    overflow: hidden;
    background-color: var(--ri-gray-800, #1a1c23);
    background-size: cover;
    background-position: center;
    box-shadow: var(--van-shadow);
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-collection .van-collection-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--van-shadow-hover);
}

.van-collection .van-collection-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(16, 24, 40, .85), rgba(16, 24, 40, .1) 70%);
}

.van-collection .van-collection-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.van-collection .van-collection-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

.van-collection .van-collection-count {
    font-size: 12px;
    color: rgba(255, 255, 255, .82);
}

.van-collection .van-collection-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--van-pill);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background var(--van-dur) var(--van-ease);
}

.van-collection .van-collection-item:hover .van-collection-btn { background: rgba(255, 255, 255, .34); }

@media (max-width: 991px) {
    .van-collection .van-collection-item { flex: 0 0 40%; }
}

@media (max-width: 767px) {
    /* v1.69：去掉 height:160px 固定高，比例由基础规则的 aspect-ratio 接管 */
    .van-collection .van-collection-item { flex: 0 0 72%; }
}

/* =========================================================================
   ⑦ 热门标签云
   ========================================================================= */
.van-tags .van-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--van-card);
    border-radius: var(--van-radius-lg);
    box-shadow: var(--van-shadow);
}

.van-tags .van-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: var(--van-pill);
    background: var(--van-soft);
    color: var(--van-text);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--van-dur) var(--van-ease);
}

.van-tags .van-tag:hover {
    background: var(--ri-primary, #3b6ff5);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(59, 111, 245, .9);
}

.van-tags .van-tag .n {
    font-size: 12px;
    font-weight: 500;
    opacity: .7;
}

.van-tags .van-tag.tier-lg { font-size: 17px; padding: 11px 24px; }
.van-tags .van-tag.tier-md { font-size: 15px; }
.van-tags .van-tag.tier-sm { font-size: 13px; padding: 6px 14px; }

/* =========================================================================
   ⑨ 新游上线预告（v1.68：上 220px 图 + 下白底信息区）
   ========================================================================= */
.van-upcoming .van-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--van-gap);
}

.van-upcoming .van-upcoming-item {
    /* v1.68：封面原图多为 460×215 超宽图，塞进 1:1 方卡要放大 2 倍+裁掉 76% 宽度，
       必然糊+构图烂。改「上图下文」后图区 220px 高、宽度全给横图，裁切大幅减轻。 */
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: var(--van-radius-lg);
    overflow: hidden;
    background: var(--van-card);
    box-shadow: var(--van-shadow);
    text-decoration: none;
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-upcoming .van-upcoming-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--van-shadow-hover);
}

.van-upcoming .van-upcoming-bg {
    display: block;
    flex: 0 0 auto;
    /* v1.69：锁 1.37:1（大屏 302x220 现状比例）——大屏仍 ≈220px 高，
       窄屏随宽度等比缩，不再出现 1024px 视口下 1:1 近正方形的怪比例。 */
    aspect-ratio: 1.37;
    background-color: var(--van-soft);
    background-size: cover;
    background-position: center;
    transition: transform var(--van-dur) var(--van-ease);
}

.van-upcoming .van-upcoming-item:hover .van-upcoming-bg { transform: scale(1.04); }

.van-upcoming .van-upcoming-date {
    padding: 4px 12px;
    border-radius: var(--van-pill);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    /* v1.68：欢哥指定日期药丸改绿。浅端 #0d8558 白字实测 4.65:1、深端 #0a7452 5.78:1，
       均 ≥4.5；主色 --van-accent(#12B981) 白字只有 2.5:1，不能直接用。 */
    background: linear-gradient(135deg, #0d8558, #0a7452);
}

.van-upcoming .van-upcoming-badge {
    padding: 3px 9px;
    border-radius: var(--van-pill);
    font-size: 12px;
    font-weight: 600;
    /* v1.68：文字落回白底信息区，毛玻璃白角标改「主色软 chip」（与 tags hover 同套令牌）：
       浅色 #0a5c41 压 rgba(18,185,129,.10)≈7:1，深色 #2FE0A8 压暗卡同样达标。 */
    color: var(--van-accent-strong);
    background: var(--van-accent-weak);
}

.van-upcoming .van-upcoming-info {
    /* v1.68：改「上图下文」后遮罩层整体退场 —— 文字全部落在卡底色上，
       对比度不再依赖封面明暗；图区 220px 内不做任何遮挡。 */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: flex-start;
    padding: 14px 16px 16px;
}

/* v1.67 需求①：待定/日期 + 即将上线 + 预约 同一排；预约靠右端 */
.van-upcoming .van-upcoming-foot {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 需求①的硬约束：这一排永远不换行（换行了就不叫"放一排"）。
       宽度不够时由「日期」pill 收缩让位，见下一条。 */
    flex-wrap: nowrap;
}

/* 日期 pill 允许收缩（并省略），徽标/按钮不收缩：
   这样即使后台把上线日期填成很长的字符串，这一排也不会被顶成两行。 */
.van-upcoming .van-upcoming-date {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}

.van-upcoming .van-upcoming-badge,
.van-upcoming .van-upcoming-foot .van-upcoming-btn { flex: 0 0 auto; }

.van-upcoming .van-upcoming-foot .van-upcoming-btn { margin-left: auto; }

/* 空数据不静默（v1.67）：分类填错/分类下没文章时给一句人话提示，而不是整块消失 */
.van-upcoming .van-upcoming-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--van-muted);
    font-size: 14px;
    background: var(--van-card);
    border-radius: var(--van-radius);
}

.van-upcoming .van-upcoming-name {
    width: 100%;
    color: var(--van-strong);
    /* v1.68：字号/行高/字重由后段「Card-Title」排版组统一管（同攻略标题），
       这里只管颜色与两行截断；min-height 让同排卡片的 meta/foot 齐平。 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 45px;   /* 2 行 = 16px × 1.40 ≈ 44.8 */
}

.van-upcoming .van-upcoming-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.van-upcoming .van-upcoming-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    text-decoration: none;
}

.van-upcoming .van-upcoming-plat {
    position: relative;
    z-index: 6;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: var(--van-pill);
    /* v1.68：白底信息区里改「soft 底 + 正文色」，令牌自适应深浅两主题 */
    background: var(--van-soft);
    color: var(--van-text);
    text-decoration: none;
    transition: background var(--van-dur) var(--van-ease);
}

.van-upcoming .van-upcoming-plat:hover {
    background: rgba(47, 86, 201, .95);
    color: #fff;
}

.van-upcoming .van-upcoming-count {
    font-size: 12px;
    color: var(--van-muted);
}

.van-upcoming .van-upcoming-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: var(--van-pill);
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    /* v1.68：白底信息区里改实底 CTA（蓝渐变白字 ≥5.2:1），毛玻璃+白描边退场 */
    background: linear-gradient(135deg, #3a66d8, #2f56c9);
    border: 0;
    transition: background var(--van-dur) var(--van-ease);
}

.van-upcoming .van-upcoming-item:hover .van-upcoming-btn {
    background: linear-gradient(135deg, #3059cf, #2747a8);
}

@media (max-width: 991px) {
    .van-upcoming .van-upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手机（<576px）改单列。注意：本条必须排在上面 991px 两列规则「之后」——
   两条媒体查询在 <=575px 同时命中、特异性相同，靠源码顺序决胜，排前面会被覆盖。
   2 列时卡片内容宽只有 ~135px，而「待定+日期 / 即将上线 / 预约」这一排的最小
   不可压缩宽度约 202px，怎么缩字号都塞不进；单列后内容宽 ~343px，同一排轻松放下，
   封面也更大更清晰。同时收紧文字区，避免卡片变矮时文字区上溢。 */
@media (max-width: 575.98px) {
    .van-upcoming .van-upcoming-grid { grid-template-columns: 1fr; }
    .van-upcoming .van-upcoming-info { padding: 12px 14px 14px; gap: 8px; }
    .van-upcoming .van-upcoming-name { font-size: 14px; }
}

/* =========================================================================
   ⑪ 攻略 · 教程专区（横滑）
   ========================================================================= */
.van-guide .van-guide-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.van-guide .van-guide-track::-webkit-scrollbar { display: none; }

.van-guide .van-guide-card {
    flex: 0 0 calc(25% - 14px);
    background: var(--van-card);
    border-radius: var(--van-radius-lg);
    overflow: hidden;
    box-shadow: var(--van-shadow);
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-guide .van-guide-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--van-shadow-hover);
}

.van-guide .van-guide-cover {
    position: relative;
    display: block;
    height: 124px;
    background-color: var(--van-soft);
    background-size: cover;
    background-position: center;
}

.van-guide .van-guide-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 9px;
    border-radius: var(--van-pill);
    font-size: 12px;
    font-weight: 600;
}

.van-guide .van-guide-tag.tag-guide { background: rgba(20, 184, 166, .16); color: #0d9488; }
.van-guide .van-guide-tag.tag-tutorial { background: rgba(139, 92, 246, .16); color: var(--ri-purple, #8b5cf6); }

.van-guide .van-guide-body {
    display: block;
    padding: 12px 14px 14px;
}

.van-guide .van-guide-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--van-strong);
}

.van-guide .van-guide-meta {
    font-size: 12px;
    color: var(--van-muted);
}

@media (max-width: 991px) {
    .van-guide .van-guide-card { flex: 0 0 40%; }
}

@media (max-width: 767px) {
    .van-guide .van-guide-card { flex: 0 0 72%; }
}

/* =========================================================================
   ⑭ 更新滚动条
   ========================================================================= */
.van-ticker .van-ticker-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 46px;
    padding: 0 8px;
    background: var(--van-card);
    border-radius: var(--van-pill);
    box-shadow: var(--van-shadow);
    overflow: hidden;
}

.van-ticker .van-ticker-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 15px;
    border-radius: var(--van-pill);
    background: linear-gradient(135deg, #4f7ff7, #3b6ff5);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 6px 16px -8px rgba(59, 111, 245, .9);
}

.van-ticker .van-ticker-vp {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

.van-ticker .van-ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: van-ticker-scroll 26s linear infinite;
    will-change: transform;
}

.van-ticker .van-ticker-bar:hover .van-ticker-track { animation-play-state: paused; }

.van-ticker .van-ticker-seq {
    display: inline-flex;
    white-space: nowrap;
}

.van-ticker .van-ticker-seq span {
    font-size: 14px;
    color: var(--van-text);
    padding-right: 44px;
}

.van-ticker .van-ticker-seq b {
    font-weight: 600;
    color: var(--ri-primary, #3b6ff5);
}

@keyframes van-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================================================================
   ⑰ 多层大 Banner
   ========================================================================= */
.van-hero .van-hero-banner {
    position: relative;
    height: 260px;
    border-radius: var(--van-radius-lg);
    overflow: hidden;
    box-shadow: var(--van-shadow);
    background-color: var(--ri-gray-800, #1a1c23);
    background-size: cover;
    background-position: center;
}

.van-hero .van-hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(120deg, rgba(26, 28, 35, .92) 0%, rgba(45, 48, 57, .72) 45%, rgba(59, 111, 245, .55) 135%);
}

.van-hero .van-hero-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.van-hero .van-hero-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.van-hero .van-hero-badge {
    padding: 3px 9px;
    border-radius: var(--van-pill);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

.van-hero .van-hero-content h3 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.25;
    color: #fff;
}

.van-hero .van-hero-content .sub {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

.van-hero .van-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--van-pill);
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #4f7ff7, #3b6ff5);
    box-shadow: 0 8px 20px -8px rgba(59, 111, 245, .8);
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-hero .van-hero-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px rgba(59, 111, 245, .9);
}

.van-hero .van-hero-dots {
    position: absolute;
    right: 26px;
    bottom: 28px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.van-hero .van-hero-dots span {
    width: 8px;
    height: 8px;
    border-radius: var(--van-pill);
    background: rgba(255, 255, 255, .45);
}

.van-hero .van-hero-dots span.active {
    width: 26px;
    background: #fff;
}

@media (max-width: 767px) {
    .van-hero .van-hero-banner { height: 220px; }
    .van-hero .van-hero-content { padding: 20px; }
    .van-hero .van-hero-content h3 { font-size: 21px; }
    .van-hero .van-hero-content .sub { font-size: 13px; }
    .van-hero .van-hero-dots { right: 16px; bottom: 18px; }
}

/* =========================================================================
   ⑱ 签到刮刮卡
   ========================================================================= */
.van-scratch .van-scratch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.van-scratch .van-scratch-card {
    display: block;
    position: relative;
    padding: 18px;
    background: var(--van-card);
    border-radius: var(--van-radius-lg);
    box-shadow: var(--van-shadow);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--van-dur) var(--van-ease), box-shadow var(--van-dur) var(--van-ease);
}

.van-scratch .van-scratch-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--van-shadow-hover);
}

.van-scratch .van-scratch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.van-scratch .van-scratch-head .t {
    font-size: 15px;
    font-weight: 700;
    color: var(--van-strong);
}

.van-scratch .van-scratch-prize {
    padding: 3px 10px;
    border-radius: var(--van-pill);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.van-scratch .van-scratch-inner {
    position: relative;
    display: block;
    height: 140px;
    border-radius: var(--van-radius-card);
    overflow: hidden;
}

.van-scratch .van-scratch-foil {
    position: absolute;
    inset: 0;
    background-size: 220% 220%;
}

.van-scratch .van-scratch-foil.gold {
    background-image: linear-gradient(45deg, #fde68a 0%, #f59e0b 18%, #fef3c7 38%, #d97706 58%, #fde68a 78%, #f59e0b 100%);
}

.van-scratch .van-scratch-foil.violet {
    background-image: linear-gradient(45deg, #ddd6fe 0%, #8b5cf6 18%, #ede9fe 38%, #6f42f0 58%, #c4b5fd 78%, #8b5cf6 100%);
}

.van-scratch .van-scratch-peel {
    position: absolute;
    top: 0;
    right: 0;
    width: 104px;
    height: 78px;
    pointer-events: none;
}

.van-scratch .van-scratch-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.van-scratch .van-scratch-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.van-scratch .van-scratch-text {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, .96);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.van-scratch .van-scratch-foot {
    margin-top: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--van-muted);
}

@media (max-width: 991px) {
    .van-scratch .van-scratch-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   阶段一 · v1.12 新增（纯 CSS、零模板改动；本整段可整体删除以回退 v1.11）
   内容：② 字号-字重阶梯（§3）  ④ 卡片壳 / Bento 栅格节奏（§2、§5）
         首页语义色对齐（正文 / 标题对比度）
   铁律：只用 --van-* 令牌，不写死颜色，不引用 --ri-gray-* 作文字 / 面色。
   ========================================================================= */

/* ---------- ② 字号-字重阶梯：七档变量（§3.1） ---------- */
:root {
    --van-fs-display: clamp(26px, 3.4vw, 40px);
    --van-fs-h1: clamp(22px, 2.2vw, 28px);
    --van-fs-h2: clamp(18px, 1.6vw, 20px);
    --van-fs-card: 16px;
    --van-fs-body: 14px;
    --van-fs-meta: 12.5px;
    --van-fs-cap: 12.5px;   /* v1.12 收口：与 Meta 合并，避免 11/12.5 相邻仅差 1.5px 的伪层级 */
}

/* Display 40 / 1.15 / 800 —— Hero 大 Banner 主标题 / 站点搜索主标题 */
.van-hero .van-hero-content h3 {
    font-size: var(--van-fs-display);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--van-on-media);
}

/* H1 28 / 1.25 / 700 —— 各模块区块标题 */
.van-plat-nav .section-title h3,
.van-rank .section-title h3,
.van-collection .section-title h3,
.van-tags .section-title h3,
.van-upcoming .section-title h3,
.van-guide .section-title h3,
.van-scratch .section-title h3 {
    font-size: var(--van-fs-h1);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--van-title);
}

/* Card-Title 16 / 1.40 / 600 —— 卡片 / 列表标题 */
.van-plat-nav .van-plat-name,
.van-collection .van-collection-name,
.van-upcoming .van-upcoming-name,
.van-guide .van-guide-title,
.van-scratch .van-scratch-head .t {
    font-size: var(--van-fs-card);
    line-height: 1.40;
    font-weight: 600;
}
.van-collection .van-collection-name { color: var(--van-on-media); }
/* v1.68：.van-upcoming-name 移出本组 —— 预告卡改上下结构后标题落在白底信息区，
   再吃 var(--van-on-media) 白字就是白底白字（实测 rgb(255,255,255)）。 */

/* Body 14 / 1.60 / 400 —— 正文 / 列表项 */
.van-ticker .van-ticker-seq span,
.van-rank .van-rank-name,
.van-rank .van-rank-empty,
.van-hero .van-hero-content .sub,
.van-tags .van-tag.tier-md {
    font-size: var(--van-fs-body);
    line-height: 1.60;
    font-weight: 400;
    color: var(--van-text);
}
.van-rank .van-rank-name { color: var(--van-strong); }
.van-hero .van-hero-content .sub { color: var(--van-on-media); }

/* Meta 12.5 / 1.50 / 500 —— 计数 / 副标题 / 更多 / TAB */
.van-plat-nav .van-plat-count,
.van-collection .van-collection-count,
.van-upcoming .van-upcoming-count,
.van-guide .van-guide-meta,
.van-scratch .van-scratch-foot,
.van-rank .van-rank-num,
.van-rank .sub, .van-tags .sub, .van-upcoming .sub, .van-guide .sub, .van-scratch .sub,
.van-rank .link-more, .van-collection .link-more, .van-upcoming .link-more, .van-guide .link-more,
.van-rank .tab,
.van-tags .van-tag,
.van-tags .van-tag.tier-sm {
    font-size: var(--van-fs-meta);
    line-height: 1.50;
    font-weight: 500;
    color: var(--van-muted);
    letter-spacing: .01em;
}
.van-rank .tab.active { color: var(--van-accent-strong); }
.van-ticker .van-ticker-seq b { font-weight: 500; color: var(--van-accent-strong); }
.van-collection .van-collection-count { color: var(--van-on-media); }
/* v1.68：预告卡改上下结构后「已预约 N 人」落在白底信息区，v1.67 那条
   var(--van-on-media) 白字覆盖已删除（白底上白字=看不见）；
   现在由排版聚合块的 var(--van-muted) 生效 —— 这正是想要的颜色。 */
.van-plat-nav .van-plat-count,
.van-rank .van-rank-num,
.van-upcoming .van-upcoming-count,
.van-upcoming .van-upcoming-date { font-variant-numeric: tabular-nums; }

/* Caption 11 / 1.50 / 500 —— 角标 / 药丸 / 小标签 */
.van-upcoming .van-upcoming-badge,
.van-upcoming .van-upcoming-plat,
.van-guide .van-guide-tag,
.van-hero .van-hero-badge,
.van-ticker .van-ticker-badge,
.van-collection .van-collection-btn,
.van-upcoming .van-upcoming-btn,
.van-hero .van-hero-btn,
.van-scratch .van-scratch-prize,
.van-scratch .van-scratch-text {
    font-size: var(--van-fs-cap);
    line-height: 1.50;
    font-weight: 500;
    letter-spacing: .02em;
}
.van-scratch .van-scratch-prize { color: var(--van-cta-ink); }
.van-rank .van-rank-no { font-size: var(--van-fs-meta); font-weight: 700; font-variant-numeric: tabular-nums; }
.van-rank .van-rank-no.n1,
.van-rank .van-rank-no.n2,
.van-rank .van-rank-no.n3 { color: var(--van-cta-ink); }

/* 图片之上文字的对比度保护（scrim + 文字阴影，均走令牌）
   v1.68：.van-upcoming-name 移出本组 —— 标题落在白底信息区后，
   深色 text-shadow 会在白底上糊出一圈灰边。 */
.van-collection .van-collection-name,
.van-hero .van-hero-content h3,
.van-hero .van-hero-content .sub { text-shadow: 0 1px 3px var(--van-scrim); }
.van-collection .van-collection-shade { background: linear-gradient(to top, var(--van-scrim), transparent 78%); }
/* .van-upcoming-shade 于 v1.67 删除：薄遮罩已并入 .van-upcoming-info 背景，
   避免同一个属性有两处权威来源（旧债：这里盖过上面的 height 定义）。 */

/* 标签 chip / 选中态改用主色令牌，去掉父主题硬编码蓝 */
.van-tags .van-tag { color: var(--van-text); }
.van-tags .van-tag:hover { background: var(--van-accent-weak); color: var(--van-accent-strong); box-shadow: none; transform: translateY(-2px); }
.van-tags .van-tag .n { font-size: var(--van-fs-cap); font-weight: 500; color: var(--van-muted); opacity: 1; }
.van-tags .van-tag.tier-lg { font-size: var(--van-fs-card); padding: 10px 22px; }
.van-rank .link-more:hover { color: var(--van-accent-strong); }
.van-guide .van-guide-tag.tag-guide,
.van-guide .van-guide-tag.tag-tutorial { background: var(--van-accent-weak); color: var(--van-accent-strong); }

/* ②b 首页内容区（含父主题搜索组件，均为 VAN 模板）字号归一 */
body.home main .home-search-box .search-title { font-size: var(--van-fs-display); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
body.home main .home-search-box .search-desc { font-size: var(--van-fs-body); color: var(--van-text); }
body.home main .home-search-box .search-hots,
body.home main .home-search-box .search-hots .me-1,
body.home main .home-search-box .search-hots span a { font-size: var(--van-fs-meta); letter-spacing: .01em; }

/* ---------- ④ Bento 栅格节奏（仅首页；纯 CSS，不改 DOM） ---------- */
/* =========================================================================
   [v1.12 暂缓] 12 列 Bento 栅格 —— 已确认造成回归，暂不启用
   问题：body.home main 被限宽 max-width:1280 + padding 后，父主题原本**全幅**
         的搜索区 / Hero 被缩成 1232px 的内缩矩形（视口 1440），失去全幅观感，
         视觉上表现为「Hero 被切方」。
   处理：整块注释保留，待阶段二配合真机 QA（含全幅破格 100vw 方案）再启用。
   ========================================================================= */
/*
@media (min-width: 1200px) {
    body.home main {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--van-gap);
        align-items: start;
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
    }
    body.home main > .home-widget { min-width: 0; margin: 0; }
    body.home main > .home-widget > .container {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    body.home main > .home-search-box  { grid-column: 1 / -1; }
    body.home main > .van-home-ticker  { grid-column: 1 / -1; }
    body.home main > .van-home-plat-nav { grid-column: 1 / -1; }
    body.home main > .van-home-game-rank { grid-column: 1 / -1; }
    body.home main > .van-home-collection { grid-column: span 6; }
    body.home main > .van-home-tags       { grid-column: span 6; }
    body.home main > .van-home-upcoming   { grid-column: span 6; }
    body.home main > .van-home-guide      { grid-column: span 6; }
    body.home main > .van-home-hero       { grid-column: span 8; }
    body.home main > .van-home-scratch    { grid-column: span 4; }
}

*/

/* =========================================================================
   ⑥ 主色落地 + 一眼可见的差异化（v1.12 追加）
   背景：v1.12 前半段在视觉上几乎无感（字阶在本站是空操作），
         这一段的唯一目标就是**让改动看得出来**。
   原则：全部走 --van-* 令牌；不写死颜色；只加不改结构（零布局风险）。
   可回退：删掉本整段即可。
   ========================================================================= */

/* 1) 搜索按钮 -> 主色 CTA（首屏最大、最显眼的一块）
   v1.17：亮色改青绿（欢哥反馈亮色下橙色在白色搜索条上太突兀，且与全站主色不一致）；
   暗色保留橙（暗色下不突兀、对比更好）；右缘补 9px 圆角（原 0 直角贴边太生硬，
   9px 与搜索框容器 9.6px 圆角呼应）。 */
body.home .home-search-box .search-form .btn,
body.home .home-search-box .search-form button,
body.home .home-search-box button[type="submit"] {
    background: var(--van-accent) !important;
    border-color: var(--van-accent) !important;
    color: var(--van-accent-ink) !important;
    font-weight: 700;
    border-radius: 0 9px 9px 0;
}
[data-bs-theme="dark"] body.home .home-search-box .search-form .btn,
[data-bs-theme="dark"] body.home .home-search-box .search-form button,
[data-bs-theme="dark"] body.home .home-search-box button[type="submit"] {
    background: var(--van-cta) !important;
    border-color: var(--van-cta) !important;
    color: var(--van-cta-ink) !important;
}

/* 2) 模块标题：左侧主色竖条 + 拉开与副标题的层级 */
.van-plat-nav .section-title h3,
.van-rank .section-title h3,
.van-collection .section-title h3,
.van-tags .section-title h3,
.van-upcoming .section-title h3,
.van-guide .section-title h3,
.van-scratch .section-title h3 {
    position: relative;
    padding-left: 15px !important;
}
.van-plat-nav .section-title h3::before,
.van-rank .section-title h3::before,
.van-collection .section-title h3::before,
.van-tags .section-title h3::before,
.van-upcoming .section-title h3::before,
.van-guide .section-title h3::before,
.van-scratch .section-title h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    width: 5px;
    border-radius: 3px;
    background: var(--van-accent);
}

/* 3) 榜单 TAB 选中 -> 主色实底（原来只是换字色，太弱） */
.van-rank .tab.active {
    background: var(--van-accent) !important;
    color: var(--van-accent-ink) !important;
    border-color: var(--van-accent) !important;
}

/* 4) 榜单列表 hover / 排行榜名 -> 主色（替掉父主题的蓝） */
.van-rank .van-rank-li:hover { background: var(--van-accent-weak) !important; }
.van-rank .van-rank-li:hover .van-rank-name { color: var(--van-accent-strong) !important; }

/* 5) 「更多 ›」与播报标签 -> 主色 */
.van-rank .link-more,
.van-collection .link-more,
.van-upcoming .link-more,
.van-guide .link-more { color: var(--van-accent-strong) !important; }
.van-ticker .van-ticker-badge {
    background: var(--van-accent) !important;
    color: var(--van-accent-ink) !important;
}

/* 7) 移动端标题行防挤压：「更多›」禁止折行/被压缩（375 实测会竖排成两行） */
.van-rank .link-more,
.van-collection .link-more,
.van-upcoming .link-more,
.van-guide .link-more { white-space: nowrap; flex-shrink: 0; }

/* 8) 375 实测：标题「热门游戏榜」被 TAB 组挤成两行 -> 窄屏让标题块独占一行，
      TAB / 「更多›」自然落到第二行（flex-wrap 才能生效，比硬压字号稳） */
@media (max-width: 575.98px) {
    .van-rank .section-title,
    .van-plat-nav .section-title,
    .van-collection .section-title,
    .van-tags .section-title,
    .van-upcoming .section-title,
    .van-guide .section-title,
    .van-scratch .section-title { flex-wrap: wrap; row-gap: 8px; }
    .van-rank .section-title > .title-left,
    .van-plat-nav .section-title > .title-left,
    .van-collection .section-title > .title-left,
    .van-tags .section-title > .title-left,
    .van-upcoming .section-title > .title-left,
    .van-guide .section-title > .title-left,
    .van-scratch .section-title > .title-left { flex: 0 0 100%; }
}

/* 5b) TAB 文字不换行（375 下曾把「本周」挤成两行） */
.van-rank .tab { white-space: nowrap; }

/* 6) 卡片 hover：抬升 + 描边发光（暗色下阴影不可见，靠描边） */
.van-collection .van-collection-item:hover,
.van-upcoming .van-upcoming-item:hover,
.van-plat-nav .van-plat-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--van-shadow-hover);
    outline: 1px solid var(--van-accent);
    outline-offset: 0;
}

/* =========================================================================
   ⑦ 最新文章（父主题 home-last-posts · van 覆盖统一风格，v1.15）
   卡片本身是全站组件 template-parts/loop/item，此处不动，只统一：
   标题 / 副标题 / 分类 pill / 近7天更新徽标。
   ========================================================================= */
/* 标题：与其他模块同规格（H1 28/700 + 左侧青绿竖条） */
.van-posts .section-title h3 {
    font-size: var(--van-fs-h1);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--van-title);
    position: relative;
    padding-left: 15px;
}
.van-posts .section-title h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .16em;
    bottom: .16em;
    width: 5px;
    border-radius: 3px;
    background: var(--van-accent);
}
/* 副标题：Meta 12.5 规格 */
.van-posts .van-posts-sub {
    font-size: var(--van-fs-meta);
    line-height: 1.5;
    font-weight: 500;
    color: var(--van-muted);
}
/* 分类 pill 行： pill / 软底 / hover 主色描边；选中 -> 主色实底 */
.van-posts .van-posts-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.van-posts .van-posts-cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.van-posts .van-posts-cat {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--van-pill);
    background: var(--van-soft);
    color: var(--van-text);
    font-size: var(--van-fs-body);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all var(--van-dur) var(--van-ease);
}
.van-posts .van-posts-cat:hover {
    color: var(--van-accent-strong);
    background: var(--van-accent-weak);
    text-decoration: none;
}
.van-posts .van-posts-cat--active,
.van-posts .van-posts-cat--active:hover {
    background: var(--van-accent);
    color: var(--van-accent-ink);
    border-color: var(--van-accent);
}
/* 近7天更新徽标：主色浅底 + 数字强调 */
.van-posts .van-posts-upd {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: var(--van-pill);
    background: var(--van-accent-weak);
    color: var(--van-accent-strong);
    font-size: var(--van-fs-meta);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--van-dur) var(--van-ease);
}
.van-posts .van-posts-upd:hover {
    text-decoration: none;
    background: var(--van-accent);
    color: var(--van-accent-ink);
}
.van-posts .van-posts-upd b {
    font-weight: 700;
    color: var(--van-cta);
    font-variant-numeric: tabular-nums;
}
.van-posts .van-posts-upd:hover b { color: var(--van-accent-ink); }