/* ============================================================================
   漫画板块页面样式 —— 漫画城 / 详情 / 阅读器 / 我的漫画

   依赖 comic-cards.css（令牌 --cm-* + 卡片/胶囊/网格/横滑栏原语），必须排在它之后。
   PC(≥1024px) 的 reflow 全在 comic_pc.css，本文件不写 min-width 媒体查询。
   改动后 bump 四个模板里的 ?v=。
   ============================================================================ */

/*
  box-sizing 兜底。

  public.css 里没有全站 `* { box-sizing: border-box }`（只有零散几个选择器），
  而阅读器压根不加载 public.css。于是「width:100vw/100% + padding」的固定条
  实际宽度是 width+padding —— 实测 #cmTop 的 1100px 档位算出来 1132px，
  手机端 500px 档位算出来 ~519px，直接把底栏最右那个按钮挤出容器（回顶部被裁掉）。

  ⚠ 只点名这几个容器，**不能**用 `.cm-page *` 一把梭：漫画到处在用
    「padding-bottom 百分比」撑 3:4 占位（封面卡 .cm-cover-wrap、书架 .mc-cover、
    阅读器槽位 .slot），border-box 会把那套比例算法整体弄坏。
*/
.cm-chrome,
#cmDrawer,
.cm-actionbar { box-sizing: border-box; }

/* ---------------------------------------------------------------- 页面外壳 */

.cm-page {
    min-height: 100vh;
    background:
        radial-gradient(120% 56% at 50% 0%, var(--cm-bg-3) 0%, rgba(58, 18, 40, 0) 62%),
        linear-gradient(180deg, var(--cm-bg-2) 0%, var(--cm-bg) 100%);
    color: var(--cm-text);
}

/* 书架的顶栏已经承担返回，手机端不再要底栏。
   与 game-detail 隐藏 .bottom-nav 是同一套做法。PC(≥1024) 下 v2_pc.css 会把
   .bottom-nav 变成 88px 左侧栏，那是要保留的，所以这条只在窄屏生效。 */
@media screen and (max-width: 1023px) {
    .cm-has-topbar .bottom-nav { display: none !important; }
}

/* ---------------------------------------------------------------- 通用顶栏 */

/*
  漫画四个页面共用的返回顶栏。详情页原先**连返回键都没有**，只能靠浏览器后退。

  .back-button / .js-hero-back 这两个类名是刻意选的：pc-detail-modal.js:100 的
  选择器列表里已经有它们，所以 PC 弹窗里点返回会自动变成「关闭本层」，不用另写代码。
*/
.cm-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: .66rem;
    height: 3.66rem;
    padding: 0 .66rem;
    background: rgba(26, 6, 16, .88);
    border-bottom: 1px solid var(--cm-line);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    backdrop-filter: blur(12px) saturate(150%);
}
.cm-topbar .back-button {
    flex: 0 0 auto;
    width: 2.66rem;
    height: 2.66rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    color: var(--cm-text);
    font-size: 1.5rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cm-topbar .back-button:active { transform: scale(.93); }
.cm-topbar .cm-topbar-title {
    flex: 0 0 auto;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cm-text);
    white-space: nowrap;
}
.cm-topbar .cm-topbar-spacer { flex: 1 1 auto; min-width: 0; }

/* ============================================================================
   详情页 —— 复用游戏详情的壳（game-detail.css / _anime / _pc），
   这里只写「漫画和游戏本来就不一样」的那几处覆盖。

   刻意**不**再自绘一套 hero/标题/按钮：两个详情页共用一套皮，
   以后游戏详情改版，漫画详情自动跟着走，不会各自漂移。
   ============================================================================ */

/* 封面是 3:4，游戏图标是正方形 —— 这是两者唯一的结构性差异。
   .game-icon 的 67.59px 宽保持不变（.game-icon-wrap 的 min-width 按它算），只改高。 */
.cm-detail .cm-icon-wrap { min-height: 90px; }
.cm-detail .game-icon {
    width: 67.59px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cm-card);
}
.cm-detail .game-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 档位角标压在封面左上（.cm-corner 本身是 absolute，这里只给定位上下文与层级） */
.cm-detail .cm-icon-wrap { position: relative; }
.cm-detail .cm-corner-abs { top: 4px; left: 4px; z-index: 3; }

/* 头图窗口：游戏那份是 16:9（横向截图刚好铺满），漫画封面是 3:4 竖图 ——
   套 16:9 要么裁得只剩中间一条，要么 contain 留两大块黑边。
   这里把窗口改成竖向（3:4，用 max-height 兜住别吃掉整屏），封面 contain 居中，
   底下垫一层同一张封面放大模糊 —— 窗口是满的，封面又完整。 */
.cm-detail .hero-media-container {
    background: #1A0610;
    aspect-ratio: 3 / 4;
    max-height: 46vh;
}
@supports (height: 100dvh) {
    .cm-detail .hero-media-container { max-height: 46dvh; }
}
/* 模糊底。inset 负值让模糊边缘被容器的 overflow:hidden 裁掉，不露出羽化的软边。 */
.cm-detail .cm-hero-bg {
    position: absolute;
    inset: -28px;
    z-index: 0;
    background-image: var(--cm-hero-img);
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(130%) brightness(.42);
    pointer-events: none;
}
.cm-detail .hero-carousel { position: relative; z-index: 1; }
.cm-detail .hero-background-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
}

/* 人气（占游戏详情里评分那一格的位置，但不带星） */
.cm-detail .cm-pop {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    color: var(--cm-dim);
}

/* ---------------------------------------------------------------- 解锁状态条
   **漫画自己的组件，不再套游戏的 .quota-bar**（2026-08-22 重新设计）。
   游戏那条是「一句短文案 + 右侧按钮」的单行卡；漫画未解锁态要讲两条独立规则，
   塞进一行必然和买断按钮相撞（溢出 / 折成三行都试过，都是治表）。
   结构改成：头行「状态 + 买断」都短、永不相撞；规则逐条一行。
   配色仍走 --cm-* 令牌，和详情页其余部分同族，不引入新色。
   ------------------------------------------------------------------------- */
.cm-unlock {
    margin-top: 4px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255, 143, 163, .07);
    border: 1px solid rgba(255, 143, 163, .18);
}
/* 已解锁（买断/今日）：换成中性偏冷的确认色，和「未解锁」一眼可分 */
.cm-unlock--bought,
.cm-unlock--today {
    background: rgba(140, 255, 214, .06);
    border-color: rgba(140, 255, 214, .18);
}

.cm-unlock-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cm-unlock-ico {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}
.cm-unlock-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cm-text);
    /* 状态标题永远是短句，放不下就省略 —— 完整规则在下面那几行，不会丢信息 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cm-unlock-buy {
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none !important;
    color: #2A0F1F !important;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 44%, #FF8FA3 100%);
    box-shadow: 0 2px 8px rgba(255, 107, 138, .28);
}

/* 规则列：每条一行，「花什么 → 得到什么」。左侧一个细点当项目符号。 */
.cm-unlock-rules {
    list-style: none;
    margin: 8px 0 0;
    padding: 0 0 0 22px;   /* 与头行图标左对齐 */
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cm-unlock-rules li {
    position: relative;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cm-sub);
}
.cm-unlock-rules li::before {
    content: '';
    position: absolute;
    left: -12px;
    top: .55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 143, 163, .55);
}
.cm-unlock-rules b {
    font-weight: 700;
    color: var(--cm-pink);
}
.cm-unlock--bought .cm-unlock-rules li::before,
.cm-unlock--today .cm-unlock-rules li::before { background: rgba(140, 255, 214, .5); }

/* 作品信息表 */
.cm-infolist { display: flex; flex-direction: column; }
.cm-inforow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 192, 159, .12);
    font-size: 13px;
    line-height: 20px;
}
.cm-inforow:last-child { border-bottom: 0; }
.cm-inforow span { color: var(--cm-dim); flex: 0 0 auto; }
.cm-inforow b {
    color: var(--cm-text);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 章节网格 */
.cm-chaplist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.cm-chaplist a {
    position: relative;
    display: block;
    padding: 9px 6px;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    line-height: 19px;
    color: var(--cm-sub);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--cm-line);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 已读过的话：压暗 + 左上角一个小勾。
   只压暗不够 —— 实测在这个底色上和未读几乎分不出来，等于没做。 */
.cm-chaplist a.is-read {
    color: rgba(201, 169, 140, .62);
    background: rgba(255, 255, 255, .02);
    border-color: rgba(255, 192, 159, .1);
    padding-left: 16px;
}
.cm-chaplist a.is-read::before {
    content: '\002713';
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    line-height: 1;
    color: rgba(255, 143, 163, .7);
}
/* 当前进度所在那一话高亮 + 右上角小圆点 */
.cm-chaplist a.is-cur {
    color: #2A0F1F;
    font-weight: 700;
    background: linear-gradient(135deg, #FFC09F, #FF8FB1);
    border-color: transparent;
}
.cm-chaplist a.is-cur::after {
    content: '';
    position: absolute;
    top: 4px; right: 4px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #2A0F1F;
}
/* 话数多时折叠 */
.cm-chaplist.is-collapsed a:nth-child(n + 19) { display: none; }
.cm-chap-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    border: 1px solid var(--cm-line);
    border-radius: 8px;
    background: transparent;
    color: var(--cm-sub);
    font-size: 13px;
    cursor: pointer;
}

/* 相似漫画网格在详情页里收窄一档（详情页容器 500px，3 列偏挤） */

/* 主 CTA 用漫画的金玫渐变（游戏那边是自己的主色），两个按钮时平分一行 */
.cm-detail .demo-action-row { display: flex; gap: 10px; }
.cm-detail .demo-btn { flex: 1 1 0; min-width: 0; }

/* 通用按钮（买断弹层的按钮沿用它） */
.cm-btn {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: #2A0F1F;
    background: linear-gradient(135deg, #FAD4C0 0%, #FFB088 44%, #FF8FA3 100%);
    border: 1px solid rgba(255, 245, 230, .42);
    box-shadow: 0 4px 12px rgba(255, 107, 138, .34), inset 0 1px 0 rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: transform .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cm-btn:active { transform: scale(.975); }
.cm-btn.ghost {
    /* 纯描边在虚化封面底上看着像一行普通文字（用户反馈「购买界面也是」看不出是按钮）——
       补一层淡玫红底 + 加粗描边，仍然明显弱于主 CTA，但一眼是个可点的按钮。 */
    color: var(--cm-pink);
    background: rgba(255, 143, 163, .14);
    border: 1.5px solid rgba(255, 143, 163, .72);
    box-shadow: none;
}
.cm-btn.ghost:active { background: rgba(255, 143, 163, .24); }

/* ---------------------------------------------------------------- 我的漫画 */

.mc-seg {
    display: flex;
    gap: .33rem;
    margin: .66rem .83rem;
    padding: .25rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--cm-line);
}
.mc-seg a {
    flex: 1;
    text-align: center;
    padding: .5rem 0;
    border-radius: 999px;
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--cm-dim);
    text-decoration: none;
}
.mc-seg a.active {
    color: #2A0F1F;
    background: linear-gradient(135deg, #FF8FB1 0%, #B47CFF 100%);
    box-shadow: 0 .25rem .66rem rgba(180, 124, 255, .32);
}

.mc-list { padding: 0 .83rem 1.66rem; }
.mc-row {
    display: flex;
    gap: .83rem;
    align-items: center;
    padding: .75rem;
    margin-bottom: .66rem;
    border-radius: .66rem;
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--cm-line);
    text-decoration: none;
    color: var(--cm-text);
}
.mc-row:active { background: rgba(255, 255, 255, .08); }
.mc-row .mc-cover {
    position: relative;
    flex: 0 0 5.5rem;
    width: 5.5rem;
    padding-bottom: 7.33rem;   /* 3:4 */
    height: 0;
    border-radius: .42rem;
    overflow: hidden;
    background: var(--cm-card);
}
.mc-row .mc-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mc-info { flex: 1 1 auto; min-width: 0; }
.mc-info h4 {
    margin: 0 0 .33rem;
    font-size: 1.16rem;
    line-height: 1.6rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-bar {
    height: .33rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    margin: .58rem 0 .25rem;
    overflow: hidden;
}
.mc-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FFB088, #FF8FB1 60%, #B47CFF);
}
.mc-go {
    flex: 0 0 auto;
    align-self: center;
    padding: .42rem .83rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 600;
    color: #2A0F1F;
    background: linear-gradient(135deg, #FFC09F, #FF8FB1);
    white-space: nowrap;
}

/* 解锁/预览 tab 的今日剩余倒计时（照搬我的游戏「剩余 XX:XX:XX」），
   .mc-countdown 用暖桃色跳出来一点，与 .mc-go 同族。 */
.mc-remain .mc-countdown {
    color: var(--cm-peach);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 上拉加载到底提示（与我的游戏 .bottom-noMore 同款语义，皮换成漫画令牌）。 */
.mc-list + .bottom-noMore { padding-bottom: 1.66rem; }
.bottom-noMore {
    text-align: center;
    padding: 1rem;
    color: var(--cm-dim);
    font-size: .95rem;
}

/* 空态 */
.cm-blank {
    padding: 4rem 1.66rem;
    text-align: center;
    color: var(--cm-dim);
}
.cm-blank .art {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: .83rem;
    opacity: .5;
}
.cm-blank .t { font-size: 1.16rem; color: var(--cm-sub); margin-bottom: 1.25rem; }
.cm-blank .cm-btn { display: inline-block; flex: none; padding: .58rem 1.66rem; }

/* ============================================================================
   阅读器
   ============================================================================ */

html.cm-reading, html.cm-reading body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    background: #000;
}

#reader {
    height: 100vh;
    height: 100dvh;   /* 移动端地址栏收起时 100vh 会溢出 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 交给原生双指缩放（跨页宽图靠它），不自己实现 */
    touch-action: pan-y pinch-zoom;
    background: #000;
    /* 滚动条在沉浸阅读里是噪音 */
    scrollbar-width: none;
    /* 槽位/chunk 的高度全部由 cum 前缀和算好写死（comic-reader.js），
       视口上方的内容不会再改尺寸 —— 不需要浏览器再插手补偿滚动位置，
       它插手时正好和转屏后的 restore() 打架。 */
    overflow-anchor: none;
}
#reader::-webkit-scrollbar { display: none; }

/*
  页宽档位。三档都只改 #track 的 max-width —— #track 上已有 ResizeObserver
  （comic-reader.js），宽度一变自动走 onResize() → rebuildGeometry()
  + applyGeometry() + restore()，几何自洽，不用为此改一行 JS。
  ⚠ 那个 RO 只认【宽度】：高度变化是滚动的常态（chunk 展开/收起），不是 resize。
    fit  适宽：手机满宽；PC 下由 comic_pc.css 收到 900px（长时间阅读的舒适行宽）
    raw  原宽：跟随图片原始宽度上限 1080（大多数源图就是 1080）
    full 满宽：铺满视口
*/
#track { width: 100%; max-width: 500px; margin: 0 auto; }
#track.w-raw  { max-width: 1080px; }
#track.w-full { max-width: none; }

.chunk { width: 100%; }

/* 槽位高度：
     JS 建出来的槽位由 comic-reader.js 写死 style.height（px，来自 cum 前缀和）——
       百分比 padding 和 chunk 的 px 高度只在四舍五入前相等，那点差值会让
       「展开/收起」变成一次真实的 #track 高度变化，进而被 ResizeObserver
       当成 resize 去改写 scrollTop（快滑卡住的根因）。同一个真相源才没有缝。
     模板内联的首屏 3 个槽位（comic-reader.html）仍然靠下面这条 height:0
       + 内联 padding-bottom:% —— 那是不依赖 JS、不依赖清单的首帧，别动。
   不用 aspect-ratio：后者要 Safari 15+，这里要覆盖低端 Android WebView。
   ⚠ 绝不给 .slot 加 margin：cum 前缀和是几何的唯一真相源，margin 会让
     「算出来的位置」和「实际位置」错开，页码/跳页/续读全部漂移。
     页间留缝用 box-shadow inset 画，不占布局。 */
.slot {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #0d0d0d;
}
.slot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}
/* 骨架：正确尺寸的微光块，而不是空白。图到达时零跳动。 */
.slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #0d0d0d 30%, #191919 50%, #0d0d0d 70%);
    background-size: 200% 100%;
    animation: cm-shimmer 1.4s linear infinite;
}
.slot.loaded::before { display: none; }
@media (prefers-reduced-motion: reduce) {
    .slot::before { animation: none; }
}
/* 关键帧从 comic-cards.css 搬过来 —— 那边原本是给「相似漫画」封面骨架用的，
   该模块已删，现在唯一的使用者就是上面这条 .slot::before（阅读器页图骨架）。
   放在使用者旁边，以后不会再被当成无人使用而误删。 */
@keyframes cm-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* read_mode 落地（字段一直下发到 boot.read_mode，之前前端完全没用）：
     条漫(2) —— 上下页是连续画面，必须严丝合缝，任何缝都是撕裂感
     离散页(0) —— 每页独立，页间给一道暗缝 + 页码，翻到哪一页看得出来 */
#track.mode-strip .slot { box-shadow: none; }
#track.mode-page .slot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); }
#track.mode-page .slot::after {
    content: attr(data-label);
    position: absolute;
    right: .42rem;
    bottom: .42rem;
    z-index: 2;
    padding: .08rem .42rem;
    border-radius: .25rem;
    font-size: .83rem;
    line-height: 1.25rem;
    color: rgba(255, 240, 224, .72);
    background: rgba(0, 0, 0, .46);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
/* 页码只在 chrome 露出时显示，沉浸阅读时不打扰 */
#track.mode-page.show-label .slot::after { opacity: 1; }

/* 亮度蒙层。pointer-events:none，纯视觉，不吃事件。 */
#cmDim {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* ---------------------------------------------------------------- 顶栏/底栏 */

/* 阅读器顶栏尺寸的**唯一真相源**。
   顶栏高度和「付费墙要让开多少」必须由同一个值推导 —— 上一版两处各写各的，
   结果 #cmWall 的 margin-top:-6rem 把让开的内边距抵消了大半，遮挡照旧。 */
:root {
    --cm-back-size: 52px;                                   /* 返回键直径 */
    --cm-chrome-pad: .5rem;                                 /* 顶栏上下内边距（1rem=12px） */
    --cm-top-h: calc(var(--cm-back-size) + var(--cm-chrome-pad) * 2 + env(safe-area-inset-top, 0px));
}

.cm-chrome {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 500px;
    z-index: 80;
    background: rgba(20, 4, 12, .9);
    color: var(--cm-text);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
#cmTop.hidden    { opacity: 0; visibility: hidden; transform: translate(-50%, -100%); }
#cmBottom.hidden { opacity: 0; visibility: hidden; transform: translate(-50%, 100%); }

#cmTop {
    top: 0;
    display: flex;
    align-items: center;
    gap: .58rem;
    padding: calc(var(--cm-chrome-pad) + env(safe-area-inset-top, 0px)) .66rem var(--cm-chrome-pad);
    border-bottom: 1px solid rgba(255, 192, 159, .14);
}
/*
  ⚠ 手机端 chrome 的对比度。原来这几个键是 rgba(255,255,255,.06~.07) 铺在
  rgba(20,4,12,.9) 的近黑底上 —— 亮度差不到 2%，在手机屏上等于**看不见**
  （2026-08-21 用户反馈「阅读器按钮很暗，看不见」；PC 正常是因为 comic_pc.css
  把它们换成了 #3D1F63 实色）。这里统一改成暖桃色系半透明 + 可见描边，
  底色仍是半透明毛玻璃（沉浸感不丢），但键位一眼能找到。
*/
#cmTop .back {
    flex: 0 0 auto;
    /* 1rem = 12px（public.css 的 html{font-size:12px}），原来 2.5rem 只有 30px，
       低于 iOS HIG 的 44pt 最小点击区，实测「返回按钮过小」点不中。
       这里用 px 写死：44 是硬性可达性下限，不该随根字号缩放。
       PC 端由 comic_pc.css 覆盖回 34px（鼠标指针不受 44pt 约束）。 */
    width: var(--cm-back-size);
    height: var(--cm-back-size);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 192, 159, .16);
    border: 1px solid rgba(255, 192, 159, .34);
    /* HTML 里的 ‹ 字形隐掉，改用下面 ::before 画的折线。
       ‹ 是单尖括号，笔画粗细完全看字体，在深色沉浸底上偏细、读着就"小"
       （44px 已达 HIG 下限仍被反馈过小）。CSS 画的折线粗细可控、不依赖字体。 */
    font-size: 0;
    line-height: 1;
    text-decoration: none;
    color: var(--cm-text);
}
#cmTop .back::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-left: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    border-radius: 1px;
    transform: rotate(45deg);
    /* 折线的视觉重心偏右下，往左上挪半个笔画才在圆里居中 */
    margin: 0 -3px -3px 0;
}
#cmTop .tw { flex: 1 1 auto; min-width: 0; }
#cmTop .t {
    display: block;
    font-size: 1.08rem;
    line-height: 1.5rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#cmTop .chap {
    display: block;
    font-size: .9rem;
    line-height: 1.25rem;
    color: var(--cm-sub);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#cmTop .cm-ico-btn {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 192, 159, .34);
    border-radius: 50%;
    background: rgba(255, 192, 159, .16);
    color: var(--cm-text);
    font-size: 1.16rem;
    line-height: 1;
    cursor: pointer;
}

#cmBottom {
    bottom: 0;
    padding: .58rem .83rem calc(.58rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 192, 159, .14);
}
.cm-progress-row { display: flex; align-items: center; gap: .66rem; }
#cmPageNo {
    font-size: .95rem;
    color: var(--cm-sub);
    min-width: 5.8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;   /* 等宽数字，翻页时不左右抖 */
}

/* 自定义滑块皮。原生 range 在暗色底上是一条灰杠，完全不像阅读进度。 */
#cmSlider {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 1.66rem;
    background: transparent;
    cursor: pointer;
}
#cmSlider::-webkit-slider-runnable-track {
    height: .33rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF8FB1 0%, #B47CFF 100%);
    /* 未读部分压暗：用一层半透明盖住右侧做不到，改用 background-size 由 JS 控 */
    background-size: var(--cm-prog, 0%) 100%;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, .16);
}
#cmSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.16rem;
    height: 1.16rem;
    margin-top: -.42rem;
    border-radius: 50%;
    background: #FFF0E0;
    border: 2px solid #FF8FB1;
    box-shadow: 0 0 .5rem rgba(255, 143, 163, .7);
}
#cmSlider::-moz-range-track {
    height: .33rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
}
#cmSlider::-moz-range-progress {
    height: .33rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF8FB1, #B47CFF);
}
#cmSlider::-moz-range-thumb {
    width: 1.16rem;
    height: 1.16rem;
    border-radius: 50%;
    background: #FFF0E0;
    border: 2px solid #FF8FB1;
}

.cm-tools { display: flex; gap: .5rem; margin-top: .58rem; }
.cm-tools button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    padding: .42rem 0;
    border-radius: .5rem;
    font-size: .83rem;
    line-height: 1.16rem;
    /* 同上：原来是 --cm-sub 字 + rgba(255,255,255,.06) 底 + .14 描边，
       在近黑底上整条工具栏糊成一片。字提到主文色，底与描边提到暖桃色系。 */
    color: var(--cm-text);
    background: rgba(255, 192, 159, .14);
    border: 1px solid rgba(255, 192, 159, .30);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cm-tools button:active { background: rgba(255, 192, 159, .24); }
.cm-tools button .ico { font-size: 1.16rem; line-height: 1.4rem; }
.cm-tools button.on { color: var(--cm-pink); border-color: rgba(255, 143, 163, .5); }

/* ---------------------------------------------------------------- 抽屉/面板 */

#cmDrawer {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 100%);
    bottom: 0;
    width: 100vw;
    max-width: 500px;
    max-height: 68vh;
    overflow-y: auto;
    z-index: 90;
    background: var(--cm-bg-2);
    border-top: 1px solid var(--cm-line);
    border-top-left-radius: .9rem;
    border-top-right-radius: .9rem;
    padding: 0 0 calc(.83rem + env(safe-area-inset-bottom, 0px));
    visibility: hidden;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), visibility .24s;
}
#cmDrawer.open { transform: translate(-50%, 0); visibility: visible; }

.cm-sheet-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .83rem .83rem .5rem;
    background: var(--cm-bg-2);
    font-size: 1.16rem;
    font-weight: 700;
    color: var(--cm-text);
}
.cm-sheet-head .x {
    border: 0;
    background: transparent;
    color: var(--cm-dim);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.cm-sheet-body { padding: 0 .83rem; }

/* 章节列表 */
.cm-chaprow {
    display: flex;
    align-items: center;
    gap: .58rem;
    padding: .75rem .5rem;
    color: var(--cm-sub);
    border-bottom: 1px solid rgba(255, 192, 159, .1);
    text-decoration: none;
    font-size: 1.06rem;
    cursor: pointer;
}
.cm-chaprow .n {
    flex: 0 0 auto;
    min-width: 2.5rem;
    font-size: .9rem;
    color: var(--cm-dim);
    font-variant-numeric: tabular-nums;
}
.cm-chaprow .tt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 超出可读范围的章（试玩只放前 N 章）：置灰 + 尾部小锁。
   仍然可点 —— 点了会跳到付费墙并 toast 一句说明，比「点不动」清楚。 */
.cm-chaprow.is-locked { opacity: .55; }
.cm-chaprow .lk { flex: 0 0 auto; margin-left: .42rem; font-size: .95rem; line-height: 1; }
.cm-chaprow.is-read { color: var(--cm-dim); }
.cm-chaprow.cur { color: var(--cm-pink); font-weight: 700; }
.cm-chaprow.cur .n { color: var(--cm-pink); }

/* 跳页面板 */
.cm-jump-row { display: flex; gap: .58rem; align-items: center; margin: .5rem 0 .83rem; }
.cm-jump-row input {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.83rem;
    padding: 0 .83rem;
    border-radius: .5rem;
    border: 1px solid var(--cm-line);
    background: rgba(255, 255, 255, .06);
    color: var(--cm-text);
    font-size: 1.16rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: 0;
}
.cm-jump-row input:focus { border-color: var(--cm-line-hi); }
.cm-jump-row .go {
    flex: 0 0 auto;
    padding: 0 1.33rem;
    height: 2.83rem;
    border: 0;
    border-radius: .5rem;
    font-size: 1.06rem;
    font-weight: 700;
    color: #2A0F1F;
    background: linear-gradient(135deg, #FFC09F, #FF8FB1);
    cursor: pointer;
}
.cm-jump-ticks { display: flex; flex-wrap: wrap; gap: .42rem; padding-bottom: .83rem; }
.cm-jump-ticks button {
    flex: 0 0 auto;
    padding: .33rem .75rem;
    border-radius: 999px;
    font-size: .95rem;
    color: var(--cm-sub);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--cm-line);
    cursor: pointer;
}

/* 设置面板 */
.cm-set-group { padding: .5rem 0 1rem; }
.cm-set-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1.06rem;
    color: var(--cm-text);
    margin-bottom: .5rem;
}
.cm-set-label .v { font-size: .95rem; color: var(--cm-dim); }
.cm-segbtns { display: flex; gap: .42rem; }
.cm-segbtns button {
    flex: 1;
    padding: .5rem 0;
    border-radius: .5rem;
    font-size: 1rem;
    color: var(--cm-sub);
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--cm-line);
    cursor: pointer;
}
.cm-segbtns button.on {
    color: #2A0F1F;
    font-weight: 700;
    background: linear-gradient(135deg, #FFC09F, #FF8FB1);
    border-color: transparent;
}
.cm-set-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 1.66rem;
    background: transparent;
}
.cm-set-range::-webkit-slider-runnable-track {
    height: .33rem; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
.cm-set-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 1.16rem; height: 1.16rem; margin-top: -.42rem; border-radius: 50%;
    background: #FFF0E0; border: 2px solid #FF8FB1;
}
.cm-set-range::-moz-range-track { height: .33rem; border-radius: 999px; background: rgba(255,255,255,.16); }
.cm-set-range::-moz-range-thumb {
    width: 1.16rem; height: 1.16rem; border-radius: 50%; background: #FFF0E0; border: 2px solid #FF8FB1;
}

#cmMask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 85;
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s;
}
#cmMask.open { opacity: 1; visibility: visible; }

/* 点击翻页分区的视觉提示（首次进入闪一下就够，别常驻） */
#cmZoneHint {
    position: fixed;
    inset: 0;
    z-index: 78;
    pointer-events: none;
    display: none;
    color: rgba(255, 240, 224, .82);
    font-size: 1.08rem;
}
#cmZoneHint.show { display: block; animation: cm-hint 2.4s ease forwards; }
@keyframes cm-hint { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#cmZoneHint i {
    position: absolute;
    left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    background: rgba(0, 0, 0, .5);
    border: 1px dashed rgba(255, 240, 224, .3);
    box-sizing: border-box;
}
#cmZoneHint i.z-up   { top: 0;    height: 20%; }
#cmZoneHint i.z-mid  { top: 20%;  height: 60%; }
#cmZoneHint i.z-down { bottom: 0; height: 20%; }

/* ---------------------------------------------------------------- 付费墙 */

/*
  付费墙不给锁定页各留槽位 —— 那是 2780 页高的「墙墙墙」滚动条。
  一张卡接在轨道末尾，上方用封面虚化渐隐过渡，让「读到这里断了」不那么生硬。
*/
#cmWall {
    position: relative;
    z-index: 2;
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .83rem;
    /* 顶部必须让开固定顶栏 #cmTop。
       未解锁且 gate=0 时轨道里一个槽位都没有，整条内容就是这堵墙（min-height:78vh
       不足一屏 → 滚不动），而 comic-reader.js 又规定点付费墙不切换顶栏 ——
       于是顶栏永久盖住墙顶，用户既滚不开也点不掉（实测「未解锁状态下顶部被标题栏遮挡」）。
       ⚠ 不能改用给 #reader/#track 加 padding-top 的常规解法：跳页是
       $reader.scrollTop = geo.offsetOf(t)，偏移量按槽位高度累加，加了内边距每次跳页都会偏
       （comic-reader.js:1029 亦明确「别改成改高度/内边距」）。
       #cmWall 是 append 到 $track 末尾、后面再无内容，只动它的内边距不影响任何槽位偏移。
       顶栏高 = back 44px + 上下 padding .5rem×2 + 安全区。 */
    padding: calc(var(--cm-top-h) + 1.66rem) 1.66rem calc(5rem + env(safe-area-inset-bottom, 0px));
    text-align: center;
    color: var(--cm-text);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(10, 2, 7, 0) 0%, #12040C 16%, var(--cm-bg) 100%);
    /* 上拉 6rem 让墙顶的渐变吃掉上一页图片的淡出。前提是**上面真的有页** —— */
    margin-top: -6rem;
}
/* —— 无试读页（gate=0）：墙是页面唯一元素，没有可重叠的上一页。
   保留 -6rem 会把墙整体拽进固定顶栏底下，正好抵消上面为让开顶栏加的 padding-top，
   表现就是「未解锁进阅读页，顶部被标题栏遮挡」。标记由 comic-reader.js 在
   trackLen===0 时打上。 */
#cmWall.no-preview {
    margin-top: 0;
}
/*
  氛围光：**用主题色画，不再用封面虚化**。
  封面颜色不可控（暖橙、冷蓝、高饱和都有），虚化放大后会在近黑的阅读区里糊出一整块
  异色，和玫红 CTA、深栏底互相打架 —— 用户反馈「色系很乱」（2026-08-22）。
  改成一层固定的玫红氤氲，既接住「读到这里断了」的落差，又保证整屏只有一套色。
*/
#cmWall::before {
    content: '';
    position: absolute;
    inset: -10% -10% auto;
    height: 60%;
    z-index: -1;
    background: radial-gradient(90% 100% at 50% 0%,
        rgba(255, 143, 163, .16) 0%,
        rgba(196, 69, 105, .07) 45%,
        rgba(10, 2, 7, 0) 75%);
    pointer-events: none;
}
#cmWall .lock {
    width: 4.16rem;
    height: 4.16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 2rem;
    color: var(--cm-gold);
    background: rgba(255, 176, 136, .12);
    border: 1px solid rgba(255, 176, 136, .35);
    box-shadow: 0 0 1.66rem rgba(255, 143, 163, .26);
}
#cmWall h3 { margin: 0; font-size: 1.4rem; font-weight: 800; }
#cmWall p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.7rem;
    color: var(--cm-sub);
    max-width: 22rem;
}
#cmWall .tier {
    display: inline-block;
    padding: .16rem .66rem;
    border-radius: 999px;
    font-size: .95rem;
    font-weight: 700;
    color: #2A0F1F;
    background: linear-gradient(135deg, #FAD4C0, #FFB088 55%, #FF8FA3);
}
/* 次数见底那一态的说明行。**故意不做成弹窗**：付费墙本身就是这一屏，
   再叠一层弹层等于「墙上点一下、弹层里再点一下」才走到邀请/升级（2026-09-07 用户指定）。
   与 .tier 同一个思路 —— 提示只讲事实，动作交给下面的 .cm-btn。 */
#cmWall .quota-out {
    padding: .33rem .83rem;
    border-radius: .66rem;
    font-size: 1rem;
    line-height: 1.6rem;
    color: var(--cm-pink);
    background: rgba(255, 143, 163, .1);
    border: 1px solid rgba(255, 143, 163, .3);
}
#cmWall .quota-out b { font-weight: 800; }
/* 「与游戏共用次数」那句：比说明行更弱一档，别和上面的抢注意力 */
#cmWall .quota-note {
    margin-top: .5rem;
    font-size: .92rem;
    line-height: 1.45rem;
    opacity: .7;
}
#cmWall .acts {
    display: flex;
    flex-direction: column;
    gap: .58rem;
    width: 100%;
    max-width: 20rem;
    margin-top: .42rem;
}
#cmWall .acts .cm-btn { flex: none; }

/* 阅读器内的轻提示（不依赖 layer/jQuery —— 阅读器刻意不 extend layout） */
#cmToast {
    position: fixed;
    left: 50%;
    bottom: 22%;
    transform: translate(-50%, .66rem);
    z-index: 99999;
    max-width: 80vw;
    padding: .66rem 1.16rem;
    border-radius: .66rem;
    font-size: 1.06rem;
    line-height: 1.58rem;
    color: #FFF0E0;
    background: rgba(20, 4, 12, .94);
    border: 1px solid var(--cm-line);
    box-shadow: 0 .5rem 1.33rem rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
#cmToast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================================
   单本买断弹层（详情页）—— **本文件不再有它的样式**。

   它已改为完全复刻游戏详情的「购买本游戏」弹窗：#cmBuyModal / .dl-modal /
   .cmb-price / .cmb-pays / .cmb-pay / .cmb-btn / .cmb-note，皮全在 game-detail.css
   （详情页已经引了那份）。

   ⚠ 千万不要在这里再写 .cmb-* —— 本文件在 game-detail.css **之后**加载，
     同名规则会静默盖掉游戏那套皮，两个购买弹窗又会开始漂移。
     要改买断弹窗的外观，改 game-detail.css，两边一起变。
   ============================================================================ */

/* ============================================================================
   共享「开通会员」弹窗(#vipm / .vipd-mask)在阅读器里的宿主环境补齐
   ----------------------------------------------------------------------------
   ★ 这里**不改弹窗的皮**，一条都没抄。皮全部来自游戏侧原件(vip-modal.css +
     modal_pc.css)。补的是那两份 CSS 被作者假定存在、而阅读器**刻意没引**的全局声明。

   游戏页(base.html)会引 public.css + base.css，其中两条是全站前提：
     base.css:66   * { margin:0; padding:0; box-sizing:border-box }
     base.css:333  body { font-family:"PingFang SC" !important }
   阅读器不引 base.css/public.css 是有意的 —— 它们带 `body{max-width:500px}`、
   `html{font-size:12px}`、`body{overflow-y:visible!important}`，引进来会直接毁掉
   阅读器那套 100vh 固定视口 + 自己滚动的布局。所以只把弹窗真正依赖的那部分补进子树。

   ⚠ 逐条核对过缺哪些、缺的会怎样，只有下面两条是真缺口：

   ① box-sizing —— vip-modal.css 与 modal_pc.css 里 `box-sizing` 声明数为 **0**，
      两份都是踩在全局 border-box 上写的。回到 content-box 后：
        .vipd            width:100% + max-width:330px + padding:18px → 撑成 366px，
                         「购买成功 / 即将到期」框超出中线；
        modal_pc 标题栏   height:64px + padding → 高度溢出，压掉下面一行。
      因为竞争声明为 0，用 id 作用域(高特异性)是安全的。

   ② font-family —— 阅读器整套 CSS 里 font-family 声明数为 **0**(comic.css /
      comic-cards.css / comic_pc.css 都没有)，弹窗于是跟着浏览器默认字体走，
      而游戏页是 PingFang SC。vip-modal.css 的字号/行高是按 PingFang 的字面度量调的
      (典型如 .vipm-back：32px 方框配 line-height:32px)，换一套度量后字形在固定高度
      盒子里就不居中 —— 这正是「字体未居中」。
      **照抄 base.css 的单家族写法，不补回退栈**：补了回退栈反而会让阅读器在非苹果
      设备上和游戏页长得不一样，那就不是「完全复用」了。

   ✗ 核对后**确认不需要**、且加了会出事的两条，别再补回来：
     · `* { margin:0; padding:0 }`：弹窗用到的裸元素全都自带声明
       (.vipm-title/.vipm-subtitle/.vipm-note p 有 margin，.vipd-expire-list 有
       margin:0 + padding-left:18px)，<a>/<b> 本来就没有 UA 内外边距 → 无缺口。
       而在这里写它必须挂 `#vipm *`(特异性 1,0,0)，会把 vip-modal.css 里所有 class 级
       的 padding/margin 全压掉 —— 弹窗直接塌成一坨。base.css 那条能用是因为它是
       `*`(0,0,0)，本文件里复现不出这个特异性(除 :where()，本项目零先例、
       老套壳 webview 不支持时整条会被丢弃)。
     · `a { color:inherit }`：弹窗里 6 个 <a>(.vipm-back/.vipm-pay-btn/.vipd-x/
       .vipd-link/.vipd-primary) 每个都自带 color → 无缺口，写了只会盖掉它们。

   ★ #cmBuyModal(单本买断弹层)一并纳入：它也是复用件(皮来自 game-detail.css)，
     同一个缺口 —— game-detail.css 里 `.dl-modal{width:100%;max-width:320px;padding:…}`
     在 content-box 下会超出 320px。而且两个弹窗同处一个阅读器，字体必须一致。
   ============================================================================ */
#vipmMask, #vipm, #vipSuccessMask, #vipExpireMask, #cmBuyModal,
#vipmMask *, #vipm *, #vipSuccessMask *, #vipExpireMask *, #cmBuyModal *,
#vipmMask *::before, #vipm *::before, #vipSuccessMask *::before,
#vipExpireMask *::before, #cmBuyModal *::before,
#vipmMask *::after, #vipm *::after, #vipSuccessMask *::after,
#vipExpireMask *::after, #cmBuyModal *::after {
    box-sizing: border-box;
}
#vipm, #vipmMask, #vipSuccessMask, #vipExpireMask, #cmBuyModal {
    font-family: "PingFang SC";
    /* ③ 继承字号 —— **这条才是「字体没居中」的真凶**（2026-08-26 实测确认）。
       public.css 有 `html { font-size: 12px }`，全站每个页面的根字号都是 12px；
       阅读器不引 public.css，根字号退回浏览器默认 **16px**。
       实测同一份弹窗 markup 在两套 CSS 环境下的计算样式：.vipm-topbar / .vipm-bar
       的 font-size 阅读器 = 16px、详情页 = 12px（这两个节点没写死字号，全靠继承）。
       于是弹窗里所有靠继承取字号的文字都大了 33%，在 height/line-height 写死的盒子里
       就压不住基线 —— 表现就是文字不居中、行挤出格。
       ⚠ 只能补在弹窗根上，**绝不能改 html 的根字号**：阅读器自己的 CSS 有 198 处 rem
         (comic.css 166 / comic-cards.css 31 / comic_pc.css 1)，全是按 16px 根字号调的，
         把 html 改成 12px 会让整个阅读器缩掉 25%。
       弹窗那两份 CSS 里 rem 只有 2 处(vip-modal.css 给 .vipd 的 box-shadow 用了 .5rem/
       1.5rem)，仍按 16px 根解析 —— 购买成功框的阴影会比别处略大一点，可忽略。 */
    font-size: 12px;
    /* 同源的另外两条继承属性，一并对齐(public.css 在 html/a 上设的)：
       text-size-adjust 若为 auto，安卓 WebView 会自行放大正文；tap-highlight 不清掉
       点按时会闪一层灰。都不影响桌面，但影响套壳包内的观感一致性。 */
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* ④ 裸 <button> 的 UA 内边距。base.css 的 `*{padding:0}` 在别的页面把它清掉了。
   实测：.dl-modal-close 在阅读器 26×26、详情页 24×14 —— 差的正是 UA 的 padding:1px 6px
   (14+12=26、24+2=26)。买断弹层的关闭键是 <button>，会员弹窗的是 <a>(<a> 无 UA 内边距)，
   所以只有这一个节点受影响。
   ⚠ 必须点名到 .dl-modal-close，**不能写 `#cmBuyModal button { padding:0 }`** ——
     那条特异性 (1,0,1) 会盖过 game-detail.css 的 `.cmb-btn { padding:14px 0 }`(0,1,0)，
     把「确认支付」按钮压成一条线。这两个弹层里其余的 <button> 都是 .cmb-btn，自带内边距。 */
#cmBuyModal .dl-modal-close {
    padding: 0;
}