@charset "UTF-8";
/* ==========================================================================
   动漫详情页专用样式（纯 CSS2：float / inline-block / text-align / table）
   --------------------------------------------------------------------------
   页面里原本靠 Tailwind 的 flex / grid 排的行（信息卡行、按钮行、评分行、
   目录条、礼物面板、评论区、分页条）全部改用本文件的 md-* 类重写。
   全部按兼容模式可跑的写法：不使用 display:flex / display:grid / calc() /
   CSS 变量 / 媒体查询里的布局。现代浏览器与 360 兼容模式渲染结果一致。

   加载顺序：home.css → site.css → mangadetail.css → compat.css（gr_page_head
   自动把 compat.css 接在页面样式之后）。

   几条通用约定：
   1) 行容器（等价于 flex items-center gap-N）用「font-size: 0 + 子项 inline-block
      + vertical-align: middle」实现：
        - font-size: 0 把标签之间的换行空白吃掉（flex 里这些空白本来就不占位），
          因此每个直接子元素必须自带字号类（text-xs / text-sm / …），
          否则文字会被缩成 0；
        - font-size: 0 时父级 x-height 为 0，vertical-align: middle 即「盒子中线
          对齐基线」，多个子项因此正好按 items-center 居中对齐。
   2) 左右两栏（头像 + 正文）用 float + margin-left 实现；float 那一侧必须带
      宽度，正文侧必须带 margin-left，否则正文的块级盒子会钻到浮动下方。
   3) 需要「一项撑满、其余靠右」的行（打榜排行行）用 display: table +
      table-cell：flex:1 的等价物在 CSS2 里只有表格的自动列宽。
   4) 首页 preflight 把 img / svg 设成了 display: block，所以行内的图标、头像
      必须显式 display: inline-block，否则会各自占一行。
   ========================================================================== */

/* ==========================================================================
   1. 通用工具
   ========================================================================== */

/* 行内混排的图标要上提 1px：vertical-align: middle 是按「基线 + 半个 x 高度」
   对齐的（拉丁字母的视觉中心），中文方块字比 x 高度高得多，图标整体会低 1px 左右。
   实测 12/14/16px 字号、13/15/18px 图标都是 1.16~1.20，是一个只跟字形有关的常数，
   所以一个 top: -1px 就能全部纠正。相对定位只挪绘制位置、不参与排版，
   行高和周围元素一动不动（负 margin 会改 margin 盒高度，图标撑行高时会把行压扁）。
   完整说明见 profile.css 顶部那一组。
   注意：本页那些 font-size: 0 的行容器（.md-row / .md-stats-row / .md-chap-row ...）
   本身是「子元素之间按盒中线对齐」，不受字形影响、不需要上提；上提要加在
   「svg 的父级是带字号、且里面有文字」的地方（即下面各条）。 */

.md-clear:after { content: ""; display: block; clear: both; }
.md-left { float: left; }
.md-right { float: right; }
.md-ib { display: inline-block; vertical-align: middle; }
.md-ib svg { vertical-align: middle; }
.md-block { display: block; }

/* ---- 行容器：flex items-center gap-N 的 CSS2 等价物 ----
   .md-row 只负责「块级 + 吃掉空白 + 子项行内块居中」，间距由 .md-gN 给。 */
.md-row { display: block; font-size: 0; }
.md-row:after { content: ""; display: block; clear: both; }
.md-row > * { display: inline-block; vertical-align: middle; }
/* 被 JS 收起的提示条（span.hidden）：.md-row > * 会盖掉 .hidden，单独补一条 */
.md-row > .hidden { display: none; }

.md-g1 > * + * { margin-left: 4px; }    /* gap-1   */
.md-g2 > * + * { margin-left: 8px; }    /* gap-2   */
.md-g3 > * + * { margin-left: 12px; }   /* gap-3   */
.md-g4 > * + * { margin-left: 16px; }   /* gap-4   */

/* ---- 图标 + 文字的行内按钮（flex items-center gap-1 / gap-1.5 的等价物）----
   标签与图标之间的换行空白已在页面里去掉，间距统一由 margin 控制。 */
.md-ibtn { display: inline-block; vertical-align: middle; white-space: nowrap; }
.md-ibtn svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; }  /* 上提见顶部说明 */
.md-ibtn-g1 svg { margin-right: 4px; }
.md-ibtn-g15 svg { margin-right: 6px; }
/* 图标在文字右边（下一话 / 下一页） */
.md-ibtn-tail svg { margin-left: 4px; }

/* ---- 圆形图标底（弹窗 / 提示卡顶部 56px、青少年卡 64px）---- */
.md-icon-circle {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 56px;
}
.md-icon-circle-64 { line-height: 64px; }
.md-icon-circle svg { display: inline-block; vertical-align: middle; }

/* ---- 白字渐变按钮的纯色兜底（渐变不被支持/不生效时的底色）---- */
.md-grad-amber { background-color: #fe9a00; }   /* from-amber-500 */

/* ==========================================================================
   2. 作品信息卡（封面 float + 正文 margin-left）
   ========================================================================== */

.md-info-row:after { content: ""; display: block; clear: both; }
.md-info-cover { float: left; width: 176px; }          /* w-44 = 176px */
.md-info-body { margin-left: 196px; }                  /* 176 + gap-5(20) */

/* 3:4 封面：CSS2 用 padding-top 撑高（aspect-ratio 在旧内核里没有），
   img 绝对定位铺满——现代内核与兼容模式拿到的是同一套声明。 */
.md-cover {
  display: block;
  position: relative;
  height: 0;
  padding-top: 133.3333%;
  overflow: hidden;
}
.md-cover-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top;
}

/* 标题行 / 作者行 / 标签行：子项间距 gap-2 / gap-1.5 */
.md-title-row { display: block; font-size: 0; }
.md-title-row > * { display: inline-block; vertical-align: middle; }
.md-title-row > * + * { margin-left: 8px; }

.md-author-row { display: block; font-size: 0; }
.md-author-row > * { display: inline-block; vertical-align: middle; }
.md-author-row > * + * { margin-left: 8px; }
.md-author-row svg { vertical-align: middle; }
/* 无头像时的圆形占位：24px 圆里居中放一枚图标（原 flex items-center
   justify-center 的等价物，行高 = 高度即垂直居中）。
   两处都要写死，少一处图标就跑到圆的左上角：
   - svg 必须给回 display: inline-block —— 首页 preflight 把 svg 设成了 block，
     块级子元素既不吃 text-align: center、也不吃 vertical-align（见文件头第 4 条）；
   - font-size: 0 —— 整块只有图标没有文字，留着字号会让图标落在正中偏下 2~3px
     （vertical-align: middle 是按「基线 + 半个 x-height」对齐的），
     字号去掉后行盒里只剩 line-height，居中才是精确的。同 profile.css 的写法。 */
.md-avatar-24 {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 24px;
  font-size: 0;
}
.md-avatar-24 svg { display: inline-block; vertical-align: middle; }

.md-tag-row { display: block; font-size: 0; }
.md-tag-row > * { display: inline-block; vertical-align: middle; }
.md-tag-row > * + * { margin-left: 6px; }

/* 浏览 / 收藏 / 话数：gap-4，图标与文字 gap-1 */
.md-stats-row { display: block; font-size: 0; }
.md-stats-row > * { display: inline-block; vertical-align: middle; }
.md-stats-row > * + * { margin-left: 16px; }
.md-stats-row svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 4px; }

/* 收藏 / 分享按钮行：gap-3 */
.md-action-row { display: block; font-size: 0; }
.md-action-row > * { display: inline-block; vertical-align: middle; }
.md-action-row > * + * { margin-left: 12px; }

/* 评分行：星星盒 + 平均分 + 人数，gap-2 */
.md-rate-row { display: block; font-size: 0; }
.md-rate-row > * { display: inline-block; vertical-align: middle; }
.md-rate-row > * + * { margin-left: 8px; }

/* 5 颗星：每颗按钮 24×24（p-0.5 = 2px + w-5 h-5 = 20px），
   行内块之间不能有空白，靠 font-size: 0 吃掉；button 里的图标正好填满内容盒。 */
.md-stars { width: 120px; height: 24px; font-size: 0; line-height: 0; }
.md-stars button {
  display: inline-block;
  vertical-align: top;
  width: 24px;
  height: 24px;
  padding: 2px;
  font-size: 0;
  line-height: 0;
  text-align: center;
}
.md-stars button svg { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   3. 目录条
   ========================================================================== */

/* 标题行：左标题 float、右图例 float（等价 justify-between） */
.md-toc-head:after { content: ""; display: block; clear: both; }
.md-toc-head h3 { float: left; }
.md-toc-legend { float: right; display: block; font-size: 0; }
.md-toc-legend > * { display: inline-block; vertical-align: middle; }
.md-toc-legend > * + * { margin-left: 12px; }      /* gap-3 */
.md-toc-legend svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 4px; }
.md-toc-dot {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  margin-right: 4px;
}

/* 章节条：一行横排、超出横向滚动（等价 flex + overflow-x-auto）。
   white-space: nowrap 保证不换行，font-size: 0 吃掉标签间空白，
   按钮原样保留 h-10，行内块之间是 gap-2 = 8px。 */
.md-chap-row { font-size: 0; white-space: nowrap; }
.md-chap-row > * { display: inline-block; vertical-align: middle; }
.md-chap-row > * + * { margin-left: 8px; }
.md-chap-row svg { display: inline-block; vertical-align: middle; position: relative; top: -1px; margin-right: 4px; }

/* ==========================================================================
   4. 会员专享提示卡（居中圆图标 + 居中按钮行）
   ========================================================================== */

.md-notice-acts { display: block; text-align: center; font-size: 0; }
.md-notice-acts > * { display: inline-block; vertical-align: middle; }
.md-notice-acts > * + * { margin-left: 12px; }

/* ==========================================================================
   5. 阅读态
   ========================================================================== */

/* 顶栏 / 底栏：两侧按钮 float，中间标题块的行盒自动避让浮动 →
   居中位置与 flex justify-between 的中间项完全一致（DOM 里右浮动项写在
   标题前面，否则浮动会被排到标题块下面）。
   两侧高度不一样，用 margin-top 把矮的压到与高的一行中线对齐（等价 items-center）。 */
.md-reader-head:after { content: ""; display: block; clear: both; }
.md-reader-back { float: left; }
.md-reader-count { float: right; margin-top: 8px; }     /* 16 高，行高 32 */
.md-reader-title { display: block; text-align: center; margin-top: 6px; }  /* 20 高 */

.md-reader-nav:after { content: ""; display: block; clear: both; }
.md-reader-nav { display: block; }
.md-reader-prev { float: left; }
.md-reader-next { float: right; }
.md-reader-nav .md-reader-title { margin-top: 6px; }

/* 正文图：块级铺满，图与图之间 4px（space-y-1） */
.md-pages img { display: block; width: 100%; height: auto; }
.md-pages img + img { margin-top: 4px; }

/* ==========================================================================
   6. 打榜礼物
   ========================================================================== */

/* 纵向列表：替代 space-y-2 / space-y-4（行间距只写在后一项上，
   末项不会给容器多加一截高度） */
.md-stack-2 > * + * { margin-top: 8px; }
.md-stack-4 > * + * { margin-top: 16px; }

/* 打榜排行行：名次 / 头像 / 昵称（撑满）/ 礼物数 / 金币。
   flex-1 的等价物在 CSS2 里用「左浮动 + 右浮动 + 一个 overflow:hidden 的块」：
   overflow:hidden 生成块级格式化上下文，宽度自动避开两侧浮动（等价 flex-1 +
   min-width:0），配 .truncate 就能长名字省略号。右侧两项从右往左排（金币先浮动
   所以在最右），视觉顺序就是「礼物数 金币」。
   竖向：整行内容高 28（头像），名次 24 补 margin-top:2 对中，两行小字按各自行高补一半。
   —— 之前这套写成 display:table / table-cell 是错的：表格格的 width 是「含内边距」的，
   格子上的 padding-left:12px 把 w-6 h-6 的圆形名次徽章撑成 24×40 的竖椭圆、数字被挤到
   右半边，头像 28×28 也变成竖椭圆；而且自动列宽随每行内容浮动，行与行之间
   金币 / 礼物数 / 昵称的起始位置全都对不齐。 */
.md-rank-row { display: block; }
.md-rank-row:after { content: ""; display: block; clear: both; }
.md-rank-num { float: left; width: 24px; height: 24px; line-height: 24px; text-align: center; margin-top: 2px; }
.md-rank-avatar { float: left; width: 28px; height: 28px; margin-left: 8px; }
.md-rank-coins { float: right; margin: 4px 0 0 12px; }
.md-rank-count { float: right; margin: 6px 0 0 12px; }
.md-rank-name { display: block; overflow: hidden; margin: 4px 0 0 68px; }

/* 礼物九宫格：8 列（旧站 grid-cols-4 sm:grid-cols-8 gap-2）。
   百分比栅格：单元格 11.3364% × 8 + 间隙 1.3298% × 7 = 100%。
   行间距写在第 9 个起（单行时容器不会多出下边距）。 */
.md-gift-grid:after { content: ""; display: block; clear: both; }
.md-gift-grid > * { float: left; width: 11.3364%; margin-right: 1.3298%; }
.md-gift-grid > *:nth-child(8n) { margin-right: 0; }
.md-gift-grid > *:nth-child(8n+1) { clear: left; }
.md-gift-grid > *:nth-child(n+9) { margin-top: 8px; }

/* 礼物卡：竖排居中（等价 flex-col items-center gap-1） */
.md-gift-cell { display: block; text-align: center; }
.md-gift-cell > * { display: block; }
.md-gift-cell > * + * { margin-top: 4px; }

/* 数量行：[- 1 +] 组 + 赠送按钮 + 余额，gap-3；组内 gap-2 */
.md-qty-row { display: block; font-size: 0; }
.md-qty-row > * { display: inline-block; vertical-align: middle; }
.md-qty-row > * + * { margin-left: 12px; }
.md-qty-group { display: inline-block; vertical-align: middle; font-size: 0; white-space: nowrap; }
.md-qty-group > * { display: inline-block; vertical-align: middle; }
.md-qty-group > * + * { margin-left: 8px; }
/* 加减按钮：32×32 的方块里把 - / + 居中（flex items-center 的等价物） */
.md-step-btn { line-height: 32px; }

/* 礼物记录行：头像 / 昵称 / 送出 / 礼物 / 数量 / 时间（gap-3，时间靠右）。
   时间用 float: right（DOM 里排在最后，浮动落在同一行右端，等价 ml-auto）。 */
.md-rec-row { display: block; font-size: 0; }
.md-rec-row:after { content: ""; display: block; clear: both; }
.md-rec-row > * { display: inline-block; vertical-align: middle; }
.md-rec-row > * + * { margin-left: 12px; }
.md-rec-row > .md-rec-time { float: right; margin-left: 0; }

/* ==========================================================================
   7. 评论区
   ========================================================================== */

/* 头像 + 正文两栏：头像 float，正文 margin-left = 36 + gap-3(12)。
   正文容器 font-size/line-height 归零，让行内块（textarea、点赞按钮）
   所在的行盒高度就是它自身高度（否则会被父级 16px 的基线撑高）。 */
.md-avatar-row:after { content: ""; display: block; clear: both; }
.md-avatar { float: left; width: 36px; height: 36px; }
.md-body { margin-left: 48px; font-size: 0; line-height: 0; }

/* 发布按钮行：靠右（等价 flex justify-end） */
.md-submit-row { display: block; text-align: right; font-size: 0; }
.md-submit-row > * { display: inline-block; vertical-align: middle; }

/* 点赞按钮：图标 + 计数（gap-1） */
.md-like-btn { display: inline-block; vertical-align: middle; white-space: nowrap; }
.md-like-btn svg { display: inline-block; vertical-align: middle; margin-right: 4px; }

/* 评论分页条：整行居中。
   注意：这一条现在**没有页面在用**。manga-detail.php 的分页容器仍是 Tailwind 的
   flex（flex + items-center + justify-center + gap-2）—— 加上 .md-pager 之后，
   下面那条 `.md-pager > *` 的 display:inline-block 会把「上一页 / 下一页」按钮
   自己的 flex 顶掉，图标和文字被拆成上下两行（实测）。页码现在最多 7 个
   （首尾各 3 + 省略号，见 $commentPageList），flex 也挤不扁了，就保持原样。
   按钮按自身尺寸排（旧站是 flex 压缩：25 个页码被挤成几个像素宽、上一页/下一页
   折成三行；CSS2 没有 flex 的收缩，这里按自然宽度换行，更能用）。
   line-height 44px 给相邻两行之间留出 8px（= gap-2），
   首行上方多出的 4px 用 padding-top 12px 抵回来（原 pt-4 = 16px）。 */
.md-pager {
  display: block;
  text-align: center;
  font-size: 0;
  line-height: 44px;
  padding-top: 12px;
}
.md-pager > * { display: inline-block; vertical-align: middle; margin: 0 4px; }

/* 页码中间那个省略号：占一个页码的位（36px，同 w-9 h-9），只是个占位不是按钮。
   页码那块容器是 flex（现代内核）/ 块级（老内核），这里 inline-block + 行高居中，
   两种容器下都在同一条基线上。 */
.md-pager-gap {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  color: #9ca3af;
}

/* ==========================================================================
   8. 金币不足弹窗（fixed 遮罩 + 行内块卡片垂直居中）
   ========================================================================== */

.md-dialog {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  text-align: center;
  padding: 16px;
}
/* 高度 100% 的虚元素 + vertical-align: middle：CSS2 里固定层内垂直居中的老办法 */
.md-dialog:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.md-dialog-card { display: inline-block; vertical-align: middle; }

/* 两个按钮各占一半（等价 flex-1 + gap-3） */
.md-dialog-acts:after { content: ""; display: block; clear: both; }
.md-dialog-acts > * { float: left; width: 48%; }
.md-dialog-acts > * + * { float: right; }

/* ==========================================================================
   9. 空态 / 青少年模式提示（整页居中，等价 flex items-center justify-center）
   ========================================================================== */

.md-gate-wrap { display: block; text-align: center; padding: 72px 16px 48px; }
.md-gate-card { display: inline-block; vertical-align: top; text-align: center; }

/* ==========================================================================
   10. 阅读模式：作品信息卡挂在正文左侧，跟随滚动
   --------------------------------------------------------------------------
   只在阅读模式（?ch=N）出现 .md-read-wrap / .md-read-side 这两个类，
   目录模式的 DOM 与样式一字未动。

   为什么只能这么写：
   - 「跟随滚动」在 CSS2 里只有 position: fixed 一条路（IE7 起就支持）；
     sticky 是 CSS3，flex/grid 旧内核更不认，都不能用。
   - 栏目只能钉在视口左边（left: 12px），不做「跟着正文容器居中」：
     要让固定层跟正文一样居中，就得写成 left/right: 0 + max-width + auto
     margin —— 那样固定层会是一块盖住正文的透明板子，旧内核没有
     pointer-events: none，正文的点击全被它吃掉。宽度写死 240px 后，
     它只盖住自己那一小块，正文一个像素都不碰。
   - 于是正文容器用 padding-left 让出 264px 空带（12 + 240 + 12），
     固定栏正好落在空带里。宽屏下栏与正文之间会空出一段（正文仍然居中），
     窄屏下靠文末的媒体查询退回原来的卡片布局。
   ========================================================================== */

/* 正文整列右移：覆盖 site.css 的 .px-4（同权重，本文件在后）。
   max-width 从 1024 放到 1080：让出 264px 后正文栏还有 800px，
   正文图仍能占满 max-w-3xl 的 768px（不放宽就只剩 712px 了）。
   容器仍居中，左内边 = 容器左边缘 + 264 ≥ 264 > 栏右边缘 252，任何宽度都不压栏。 */
.md-read-wrap { max-width: 1080px; padding-left: 264px; }

/* 悬浮栏本体 = 信息卡自己。上下留出页头（h-16 = 64px）和一点边距；
   高度撑满剩下的视口，内容超了栏内自己滚（fixed 的百分比高度按视口算，
   所以不必依赖 max-height 的百分比解析）。 */
.md-read-side {
  position: fixed;
  left: 12px;
  top: 76px;
  bottom: 12px;
  width: 240px;
  overflow-y: auto;
  z-index: 30;              /* 页头是 z-50，从它下面过 */
  padding: 14px;
}

/* 栏内改竖排：原卡片是「封面 float + 正文 margin-left」两栏，240px 放不下 */
.md-read-side .md-info-cover { float: none; width: 140px; margin: 0 auto 12px; }
.md-read-side .md-info-body { margin-left: 0; }
/* 注意：3:4 是靠 .md-cover 的 padding-top: 133.33% 撑的，而百分比的基准是
   它「父元素」的宽度 —— 所以宽度只能设在 .md-info-cover 上、并且让 .md-cover
   跟着父元素走（width: auto）。直接给 .md-cover 写 width 会让高度按父元素算、
   宽度按自己算，3:4 就散了（IE 里实测会变成 140×283 的拉伸图）。 */
.md-read-side .md-info-cover .md-cover { width: auto; }
/* 简介在窄栏里排不开：旧内核不认 line-clamp，不收起会撑出十几行 */
.md-read-side .md-info-desc { display: none; }
/* 浏览 / 收藏 / 话数：窄栏里一行一条，横排的 gap-4 换成行距 */
.md-read-side .md-stats-row > * { display: block; }
.md-read-side .md-stats-row > * + * { margin-left: 0; margin-top: 4px; }

/* 宽屏：让栏跟着正文容器走 —— 容器（max-width 1080 居中）左边缘 = 50% - 540，
   栏贴上它，和正文之间永远只隔 24px，视口再宽也不会越拉越远。
   锁在 @media 里是为了老内核：IE8 及以下不认 @media，会一直用上面
   left: 12px 的安全写法 —— 那样最坏只是宽屏下栏离正文远一点，不会被推出屏幕外。 */
@media (min-width: 1200px) {
  .md-read-side { left: 50%; margin-left: -540px; }
}

/* 窄屏放不下左栏：退回成原来的整块卡片，正文也不再右移。
   IE8 及以下不认 @media，会一直用上面那套 —— 桌面宽度下没问题。 */
@media (max-width: 900px) {
  .md-read-wrap { max-width: 1024px; padding-left: 16px; }
  .md-read-side {
    position: static;
    width: auto;
    overflow: visible;
    padding: 20px;
    margin-bottom: 24px;
  }
  .md-read-side .md-info-cover { float: left; width: 176px; margin: 0; }
  .md-read-side .md-info-body { margin-left: 196px; }
  .md-read-side .md-info-desc { display: block; }
  .md-read-side .md-stats-row > * { display: inline-block; }
  .md-read-side .md-stats-row > * + * { margin-left: 16px; margin-top: 0; }
}

/* ==========================================================================
   11. 阅读模式弹幕
   --------------------------------------------------------------------------
   弹幕层是 fixed 的：和左侧悬浮栏一样钉在视口上，页面怎么滚它都待在原地，
   弹幕就在眼前飘，不会跟着图滚走。

   横向对上正文列的办法：正文列是 .md-read-wrap 的内容盒去掉 264px 左内边之后
   居中的 max-w-3xl，算下来左边缘永远是「视口中线 - 260px」（视口比 1080 宽时
   容器居中、比 1080 窄时容器铺满，两种情况的算式一样）。所以 left: 50% +
   margin-left: -260px + width: 768px 就正好压在图上，不需要 JS 量。

   为什么宽度要写死在正文列上、而不是铺满视口：
   老内核没有 pointer-events: none，fixed 层盖住哪儿，哪儿就点不动了。
   这一层只压在正文图上（图本来就不能点），罩住的其它块一律用 position: relative
   + z-index 抬到它上面去（见本节末尾）。铺满视口的话，页头、悬浮栏、页脚、
   弹窗全都得跟着抬一遍，漏一个就点不动 —— 面积小才守得住。

   层级：层本身 z-index: 9999（弹幕要飘在所有内容之上，普通卡片连 z-index 都没写，
   自然在它下面）。代价是「要点的控件」得抬到 9999 上面 —— 老内核没有
   pointer-events，整层是一块实心的，压在按钮上就点不动了。认得 pointer-events
   的内核直接把层设成 pointer-events: none，省掉这一整套。

   弹幕初始是 visibility: hidden + left: -9999px：位置得等 JS 量出容器宽度才算得
   出来，先在屏幕外待着，JS 摆好了再显形。JS 没跑（或跑挂了）就谁也看不见，
   不会出现一坨文字叠在左上角。

   位置全部用 left / top 走（不用 transform、不用动画）：老内核只认这个，
   而且 left 是布局值，量出来的 offsetWidth 跟它同一个坐标系，算宽度不用换算。
   ========================================================================== */

.md-dm-layer {
  position: fixed;
  left: 50%;
  margin-left: -260px;
  width: 768px;
  top: 76px;          /* 页头 h-16（64px）+ 12px，和左侧悬浮栏同一个上沿 */
  bottom: 12px;
  overflow: hidden;   /* 飘出左右边界的部分裁掉，不撑出横向滚动条 */
  z-index: 9999;      /* 弹幕飘在所有内容之上 */
}

/* 认得 pointer-events 的内核（Chrome / Edge / 360 极速…）：层不接管鼠标事件，
   下面的按钮该点点。IE 全家都不认 @supports，整块忽略，走下面的 z-index 兜底。 */
@supports (pointer-events: none) {
  .md-dm-layer { pointer-events: none; }
}

/* ---- 老内核兜底：把「要点的」控件抬到弹幕层（9999）上面 ----
   没有 pointer-events，整层就是一块实心的，压在按钮上就点不动了。

   只抬控件、不抬卡片：卡片一旦 position + z-index 就自成层叠上下文，
   里面的按钮再抬也出不来（被关在卡片那一层里）。所以卡片只给 position: relative
   （保持原来的定位参考，不给 z-index → 不建层叠上下文），控件自己抬到 10000。
   抬起来只是加了个定位、没写偏移，排版一动不动。 */
.md-read-wrap > * { position: relative; z-index: auto; }
.md-read-wrap > .md-read-side { position: fixed; z-index: 10001; }     /* 悬浮栏本来就是 fixed，别被上一条改成 relative */
.md-read-wrap > .md-reader-card { position: static; z-index: auto; }   /* 正文卡留在弹幕层下面，弹幕才飘得在图上面 */
.md-read-wrap button, .md-read-wrap input, .md-read-wrap textarea,
.md-read-wrap select, .md-read-wrap a, .md-read-wrap label {
  position: relative;
  z-index: 10000;
}
.md-reader-head, .md-reader-nav { position: relative; z-index: 10000; }
footer { position: relative; z-index: 10000; }

/* 弹窗（登录 / 实名 / 头像 / 青少年 / 充值 / 未成年人提醒）在 site.css 里只有 z-50 / z-[100]，
   开着弹幕读漫画时会被弹幕压过去 —— 弹窗里还飘着弹幕就不像话了，统一抬到弹幕之上。
   这几个 id 是弹窗根节点，改层级不动它们的定位方式。
   #grMinorNotice 是阅读页进来就盖在最上面的未成年人提醒，它默认就是打开的，
   不抬的话弹幕会直接从提醒上面飘过去。 */
#grAuthDialog, #grVerifyDialog, #grAvatarDialog, #grYouthDialog, #grYouthEntry, #grMinorNotice,
[data-gr-recharge-dialog] { z-index: 10050; }

.md-dm {
  position: absolute;
  left: -9999px;      /* JS 量好之前先待在屏幕外 */
  top: 0;
  visibility: hidden;
  white-space: nowrap;          /* 一条弹幕永远一行：折行了就和上下道叠上了 */
  font-size: 14px;
  line-height: 20px;
  padding: 1px 8px;             /* 高 22px，道上留 30px，上下各空 4px */
  color: #fff;
  border-radius: 10px;
  background-color: #000;       /* 老内核兜底：不透明黑底（rgba 是 IE9+） */
}

/* 现代内核给半透明底：黑条压在漫画上不至于糊成一块 */
@supports (color: rgba(0, 0, 0, 0.5)) {
  .md-dm { background-color: rgba(0, 0, 0, 0.62); }
}

/* 自己发的：主色底，一眼能认出来是自己的（写在上面两条之后，同权重靠顺序压住） */
.md-dm-mine { background-color: #f97316; }
@supports (color: rgba(0, 0, 0, 0.5)) {
  .md-dm-mine { background-color: rgba(249, 115, 22, 0.88); }
}

/* ---- 悬浮栏里的弹幕面板（开关 + 发弹幕）---- */

.md-dm-panel { margin-top: 14px; padding-top: 12px; border-top: 1px solid #f3f4f6; }

/* 标题居左、开关居右：CSS2 只有 float 能干这个（等价 flex justify-between） */
.md-dm-panel-head { margin-bottom: 8px; }
.md-dm-panel-head:after { content: ""; display: block; clear: both; }
.md-dm-panel-title { float: left; font-size: 13px; font-weight: bold; line-height: 24px; color: #111827; }

/* 开关：CSS2 的 absolute + left 换边，不用 transform（IE8 不认，滑块会卡在左边） */
.md-dm-switch {
  position: relative;
  float: right;
  display: block;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  background-color: #e5e7eb;
}
.md-dm-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #fff;
}
.md-dm-switch-on { background-color: #f97316; }
.md-dm-switch-on .md-dm-knob { left: 24px; }    /* 44 - 4 - 16 */

/* 输入框与按钮竖排：栏内只剩 212px，横排的话输入框短到只看得见几个字。
   padding 只给 6px：老内核不认 box-sizing，width: 100% 会再加上 padding 和
   边框，6px 这个量刚好让它还留在栏内（212 + 12 + 2 = 226 ≤ 240 - 14）。 */
.md-dm-form { font-size: 0; }        /* 吃掉标签之间的换行空白（约定 1） */

.md-dm-input {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 6px;
  font-size: 13px;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
}
.md-dm-send {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: 6px;
  line-height: 32px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background-color: #f97316;
}
.md-dm-send-disabled { background-color: #e5e7eb; color: #9ca3af; cursor: default; }

/* 一行提示（「已发送」/ 报错），默认不占位 */
.md-dm-hint { margin-top: 6px; font-size: 12px; line-height: 16px; color: #9ca3af; }
.md-dm-hint-err { color: #ef4444; }

/* 窄屏：悬浮栏变回页面顶部的一张卡片，面板跟着变宽，输入框横排更好用。
   弹幕层这里也铺满视口 —— 正文列本来就占满宽度了，不用再对中线。
   IE8 及以下不认 @media，会一直用上面那套 768px 的算法：该窗宽下图比屏幕宽一点，
   弹幕从屏幕外进场、飘进来的晚一些，不影响看。 */
@media (max-width: 900px) {
  .md-dm-layer { left: 0; right: 0; width: auto; margin-left: 0; }
  .md-dm-input { display: inline-block; vertical-align: middle; width: 70%; }
  .md-dm-send { display: inline-block; vertical-align: middle; width: 28%; margin: 0 0 0 2%; }
}