/* ============================================================================
   漫画详情 · 宽屏覆盖

   排在 game-detail_pc.css 之后加载 —— 详情页的宽屏两栏骨架整份来自那里
   （左栏 59fr：头图 → tab 行 → tab 内容；右栏 41fr：信息头 + 解锁条 + 大 CTA），
   本文件只改「漫画和游戏本来就不一样」的地方，不重画骨架。

   两种情境都命中 html.pc-modal：
     ① 弹窗 iframe 里（点卡片进来）—— layout.html 的预渲染脚本加的
     ② 顶层整页且 ≥1024（从阅读器返回 / 直接输网址）—— comic-detail.html 的
        head 脚本加的，同时多打一个 pc-standalone
   ①②共用同一套版式；只有顶栏 chrome 需要分开（弹窗里返回键=关闭×，独立页=返回‹）。
   ============================================================================ */

/* ---------------------------------------------------------------- 顶栏标题 */

/* 骨架那份写死了「游戏详情 / GAME DETAIL」，漫画得换掉，否则宽屏下顶栏在说错话 */
html.pc-modal .hero-navigation-header::before { content: var(--t-comic-detail, "\006F2B\00753B\008BE6\0060C5") !important; }
html.pc-modal .hero-navigation-header::after  { content: "COMIC DETAIL" !important; }

/* ---------------------------------------------------------------- 独立页 chrome */

/*
  弹窗版式把返回键做成了「关闭 ×」（在弹窗里它确实是关闭），并隐藏了搜索键
  （弹窗顶栏放不下、且下载动作由右栏 CTA 承担）。
  独立页没有「本层」可关，× 会骗人：这里改回真正的返回箭头，并把搜索键放回来。
*/
html.pc-standalone .hero-back-button {
    /* order:0 把它挪到标题左边 —— 骨架给的是 order:4（弹窗里那个位置是「关闭×」的位置）。
       独立页的返回键放在最右边会被当成关闭键，位置本身就是一种承诺。 */
    order: 0 !important;
    margin-right: 4px !important;
    background: rgba(58, 18, 40, .5) !important;
    border: 1px solid rgba(255, 192, 159, .32) !important;
    border-radius: 50% !important;
}
html.pc-standalone .hero-back-button > img { visibility: visible !important; }
html.pc-standalone .hero-back-button::after { content: none !important; }
html.pc-standalone .hero-search-button { display: flex !important; }

/* ---------------------------------------------------------------- 左栏头图 */

/*
  骨架把头图做成 625×250 的横条（游戏截图是 16:9，横着裁没问题）。
  漫画封面是 3:4 竖图 —— 250px 高的横条里只能看到中间一条，等于没有封面。
  改成竖向留白的展示窗：高 340、宽收到 420，图 contain 居中，底色兜住两侧留白。
  预览页由 swiper 横滑（模板里封面是第 1 张，预览图跟在后面）。
*/
/*
  头图窗口**与游戏详情完全同一个盒子**（game-detail_pc.css: width min(100%,625px) / height 250px），
  2026-08-21 用户指定「左上角的图片和游戏样式一样，展开显示」。
  原先收成 300px 宽的竖窗（贴合 3:4 封面），结果在宽屏两栏里缩成小小一块，
  和游戏详情那条通栏头图完全不是一个东西。

  竖封面塞进横窗的留白由 .cm-hero-bg（同一张封面放大模糊）铺满 —— 见 comic.css。
  所以这里只保留边框/圆角，比例和尺寸交给游戏那份。
*/
html.pc-modal .hero-media-container {
    background: #12040C !important;
    border: 1px solid rgba(255, 192, 159, .16) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
html.pc-modal .cm-detail .hero-background-image {
    object-fit: contain !important;
    background: #12040C !important;
}
/* 轮播圆点挪进窗内底部，别压在窗外的分隔线上 */
html.pc-modal .cm-detail .hero-swiper-pagination { bottom: 8px !important; }

/* ---------------------------------------------------------------- 左栏 tab 区 */

/* 宽屏下左栏内容宽约 890px，章节按 3 列会拉得很扁；给到 6 列更像目录 */
html.pc-modal .cm-detail .cm-chaplist {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    gap: 10px !important;
}
html.pc-modal .cm-detail .cm-chaplist a { padding: 10px 8px !important; font-size: 13px !important; }
/* tab 内容区左右留白与骨架的 24px 对齐。
   ★ 点评面板的直接子元素不是 .game-intro（是 .rating-summary / .review-guide / .review-list），
     只写 .game-intro 会让点评区在 PC 弹窗里贴边，故一并列出。 */
html.pc-modal .cm-detail .tab-content > .game-intro,
html.pc-modal .cm-detail .tab-content > .rating-summary,
html.pc-modal .cm-detail .tab-content > .review-guide,
html.pc-modal .cm-detail .tab-content > .review-guide-lite,
html.pc-modal .cm-detail .tab-content > .review-list { padding-left: 24px !important; padding-right: 24px !important; }

/* ---------------------------------------------------------------- 右栏 */

/* 右栏是「信息 + 解锁 + 行动」列。骨架已把 .details-section 定位到第 2 列并跨满行。 */
html.pc-modal .cm-detail .details-content { padding: 20px 24px 24px !important; }

/* 信息卡：封面缩略在宽屏下给大一点（右栏宽约 620） */
html.pc-modal .cm-detail .cm-icon-wrap { min-height: 128px !important; }
html.pc-modal .cm-detail .game-icon {
    width: 96px !important;
    height: 128px !important;
    border-radius: 8px !important;
}
html.pc-modal .cm-detail .game-title { font-size: 22px !important; line-height: 30px !important; }
html.pc-modal .cm-detail .game-info-card { gap: 16px !important; }

/* 作品信息表在右栏常驻（手机端它在「详情」tab 里，宽屏下右栏空间足，直接摊开更好用）。
   模板里那份在 tab 内容里，这里不搬 DOM —— 右栏用骨架自带的 .gd-specs（模板已填漫画字段）。 */
html.pc-modal .cm-detail .gd-specs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 18px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 192, 159, .14) !important;
}
html.pc-modal .cm-detail .gd-spec { display: flex !important; flex-direction: column !important; gap: 2px !important; }
html.pc-modal .cm-detail .gd-spec-label { font-size: 12px !important; color: #B6A8CC !important; }
html.pc-modal .cm-detail .gd-spec-value { font-size: 14px !important; font-weight: 600 !important; color: #F2EEFA !important; }

/* 右栏摊开了 .gd-specs，「详情」tab 里那份 .cm-infolist 就是重复的同一批数据 —— 宽屏下收掉，
   只留简介。手机端两者不会同时出现（.gd-specs 带 hidden，只有宽屏才点亮）。 */
html.pc-modal .cm-detail .cm-infolist,
html.pc-modal .cm-detail .cm-infolist-sec { display: none !important; }

/* 两个 CTA 竖排通栏（骨架已给 flex-direction:column），这里只调高度与字号 */
html.pc-modal .cm-detail .demo-action-row { gap: 12px !important; margin-top: 18px !important; }
html.pc-modal .cm-detail .demo-btn { min-height: 58px !important; }
html.pc-modal .cm-detail .demo-btn .demo-btn-main { font-size: 16px !important; }
html.pc-modal .cm-detail .demo-btn .demo-btn-sub { font-size: 12px !important; }

/* 解锁条（PC 弹窗档）。
   ⚠ 这里**不再需要**压 game-detail_pc.css 给 .quota-text 的 nowrap ——
     漫画已经换成自己的 .cm-unlock 组件，跟 .quota-* 那套完全脱钩了
     （2026-08-22 重新设计，见 comic.css 同名段）。
   PC 弹窗这一档统一直角 + 实色，和本文件其余部分一致。 */
html.pc-modal .cm-detail .cm-unlock {
    margin-top: 16px !important;
    border-radius: 0 !important;
    background: #1A1228 !important;
    border: 1px solid #2C2140 !important;
    padding: 12px 14px !important;
}
html.pc-modal .cm-detail .cm-unlock--bought,
html.pc-modal .cm-detail .cm-unlock--today {
    background: #131B22 !important;
    border-color: #24333D !important;
}
html.pc-modal .cm-detail .cm-unlock-title { color: #F2EEFA !important; font-size: 14px !important; }
html.pc-modal .cm-detail .cm-unlock-rules li { color: #B6A8CC !important; font-size: 13px !important; }
html.pc-modal .cm-detail .cm-unlock-rules b { color: #FF3D8A !important; }
html.pc-modal .cm-detail .cm-unlock-rules li::before { background: #6D3FB5 !important; }
html.pc-modal .cm-detail .cm-unlock--bought .cm-unlock-rules li::before,
html.pc-modal .cm-detail .cm-unlock--today .cm-unlock-rules li::before { background: #3E7C6B !important; }
html.pc-modal .cm-detail .cm-unlock-buy {
    border-radius: 0 !important;
    background: #FF3D8A !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
}

/* ---------------------------------------------------------------- 独立页微调 */

/* 独立页比弹窗多一层浏览器 chrome，视口更矮时把头图收一点，保证右栏 CTA 一屏可见 */
@media (min-width: 1024px) and (max-height: 760px) {
    html.pc-standalone .hero-media-container { height: 200px !important; }
}