/* ==========================================================
   游戏库样式
   配色与类名沿用 VAN 主题（RiPro-V2 子主题）
   主色 rgb(253,115,1)、正文 #34495e、背景 rgb(240,244,245)
   卡片圆角 .5rem、按钮圆角 2em（胶囊）—— 这两条是风格底线

   [2026-10-04] 对齐原站 app.css 的设计 token：
     · 阴影统一为「大扩散 + 极低透明度」，这是原站高级感的最大来源
     · 字号/圆角/间距集中为变量，后续改主题只动 :root
   ========================================================== */

:root {
    --gm-primary: rgb(253, 115, 1);          /* 主色（橙）*/
    --gm-primary-hover: #e96400;
    --gm-blue: #536de6;                        /* 原站链接蓝 */
    --gm-gold: #feae18;                        /* 排行榜金橙 */
    --gm-danger: #f0506e;                      /* VAN 品牌红 */

    --gm-text: #34495e;                        /* 正文色 */
    --gm-text-muted: #7b8a9a;
    --gm-text-light: #a3aeb9;
    --gm-bg: rgb(240, 244, 245);               /* 青灰底色 */
    --gm-card: #fff;
    --gm-border: rgba(52, 73, 94, .1);
    --gm-border-light: #e6ecf0;

    --gm-radius: .5rem;                        /* 卡片圆角 8px */
    --gm-radius-lg: 15px;                      /* 大卡片圆角 */
    --gm-btn-radius: 2em;                      /* 胶囊按钮 */

    /* 原站阴影体系：大扩散 + 低透明度，让白卡片「浮」起来而不是「贴」着 */
    --gm-shadow-xs: 0 0 30px rgba(0, 0, 0, .05);   /* 导航 */
    --gm-shadow-sm: 0 2px 5px rgba(0, 0, 0, .04);   /* 轮播卡 */
    --gm-shadow-md: 0 40px 75px 0 rgba(57, 60, 67, .08);  /* 大卡片 */
    --gm-shadow-lg: 0 10px 40px rgba(0, 0, 0, .08);   /* 弹窗/悬浮 */

    --gm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --gm-mono: Menlo, Consolas, "Courier New", monospace;
}

/* 【2026-10-11 修】原来这里没写 margin，浏览器默认给 body 8px 外边距。
   表现：手机上「通栏」元素（.gm-d-banner 顶部大图）左右各缩进 8px，
   视觉上像「图片只占了屏幕一部分」，两边露出灰底 —— 用户反馈「放半张图大小」。
   桌面端看不出来（首页 hero 用 width:100vw + margin-left:-50vw 把它抵消掉了，
   详情页 banner 在容器内、只抵消了容器的 padding，漏掉 body 这 8px）。
   修法：一律 margin:0，通栏交给各元素自己处理（别再依赖 body 有边距）。
   ⚠️ 改这一行会影响所有页面的左右外边距 —— 已实测首页/列表/详情/搜索/专题
      五个页面，.gm-container 的 max-width + padding 足以维持原有留白。 */
body {
    margin: 0;
    background-color: var(--gm-bg);
    color: var(--gm-text);
    font-family: var(--gm-font);
}

/* 【2026-10-11 移动端溢出修复的根因之一】全局 box-sizing:border-box。
   ⛔ 本文件原来**没有任何 box-sizing 声明**，于是所有元素的 width 都**不含 padding**
   （例如 width:100vw + padding:14px → 实际宽 100vw+28px），
   移动端就比视口宽一截 → 横向溢出 + 内容看起来「歪了没对齐」。
   桌面端因为 100vw 会含滚动条宽、又被 overflow:hidden 裁掉，一直没暴露。
   加上 border-box 后，width 就是「含 padding 的总宽」，上面那些通栏技巧才成立。 */
*, *::before, *::after { box-sizing: border-box; }

/* ---------- 容器 ---------- */
.gm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 顶部导航 ---------- */
.gm-header {
    background: #fff;
    box-shadow: var(--gm-shadow-xs);
    position: sticky;
    top: 0;
    z-index: 100;
}
.gm-nav {
    display: flex;
    align-items: center;
    height: 60px;
    gap: 24px;
}
.gm-logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--gm-text);
    text-decoration: none;
    white-space: nowrap;
}
.gm-logo em { color: var(--gm-primary); font-style: normal; }
/* ---------- 顶部菜单 ----------
   ⚠️ .gm-menu 必须是 flex:1 + min-width:0，否则它会按内容撑开，
   菜单再多也不会「超出宽度」，JS 量到的 clientWidth 永远是内容宽度，
   结果就是「更多」永远不出现。
   overflow:hidden 兜底：万一 JS 没跑，也不至于把搜索框挤出屏幕。 */
.gm-menu {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    /* 菜单优先占空间：flex-shrink:1 允许它被压缩，
       JS 再把压缩不下去的项搬进「更多」。
       overflow:hidden 兜底：万一 JS 没跑，也不至于把搜索框挤出屏幕。 */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.gm-menu a {
    display: block;
    padding: 8px 16px;
    border-radius: var(--gm-btn-radius);
    color: var(--gm-text);
    text-decoration: none;
    font-size: 15px;
    transition: all .2s;
}
.gm-menu a:hover { background: rgba(253, 115, 1, .08); color: var(--gm-primary); }
.gm-menu a.on { background: var(--gm-primary); color: #fff; }
/* 搜索框：允许收缩。
   flex-shrink:0 会让它在窄屏时反过来把菜单挤没；min-width:0 是
   input 元素在 flex 容器里能缩到 0 的必要条件（默认 min-width:auto）。 */
.gm-search {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}
.gm-search input {
    width: 200px;
    min-width: 0;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-btn-radius);
    background: var(--gm-bg);
    outline: none;
    font-size: 14px;
}
.gm-search input:focus { border-color: var(--gm-primary); background: #fff; }
/* 搜索框里的按钮不参与收缩 */
.gm-search .gm-btn { flex: 0 0 auto; }

/* ---------- 按钮 ---------- */
.gm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 22px;
    border: none;
    border-radius: var(--gm-btn-radius);
    background: var(--gm-primary);
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}
.gm-btn:hover { background: var(--gm-primary-hover); color: #fff; }
.gm-btn.ghost {
    background: transparent;
    border: 1px solid var(--gm-border);
    color: var(--gm-text);
}
.gm-btn.ghost:hover { border-color: var(--gm-primary); color: var(--gm-primary); background: transparent; }
.gm-btn.sm { height: 32px; padding: 0 16px; font-size: 13px; }

/* ---------- 分类导航 ---------- */
/* ---------- 列表页分类筛选（2026-10-09 改两级，仿 8010/qbyx/jsby）----------
   结构：第一行大类 + 第二行子类，各自带一个小图标前缀。
   参考站是 .archive-filter-2 > .filters > ul.filter 两行，选中项高亮。
   ⚠️ 旧的 .gm-cats / .gm-cats-top / .gm-cat 已停用（模板换成 .gm-cats2），
      先留着不删 —— 首页/别的页可能还在用，确认无引用后再清。 */
.gm-cats2 {
    background: #fff;
    border-radius: var(--gm-radius);
    padding: 6px 16px;
    margin: 20px 0;
    box-shadow: var(--gm-shadow-sm);
}
.gm-cats2-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 10px 0;
}
/* 两行之间用一条浅分隔线 */
.gm-cats2-row.sub {
    border-top: 1px solid var(--gm-border);
    padding-top: 9px;
    margin-top: -1px;
}
.gm-cats2-row li { display: inline-flex; align-items: center; }
/* 左侧的「分类」「大类名」前缀标签 */
.gm-cats2-label {
    font-size: 13px;
    color: var(--gm-text-muted);
    padding-right: 12px;
    margin-right: 6px;
    gap: 5px;
    white-space: nowrap;
}
.gm-cats2-label .ico {
    display: inline-block;
    width: 12px;
    height: 10px;
    background: var(--gm-text-muted);
    /* 两个叠起来的方块，示意「层级」；纯 CSS 画的，不引图标字体 */
    border-radius: 2px;
    position: relative;
    opacity: .75;
}
.gm-cats2-label .ico::after {
    content: "";
    position: absolute;
    left: 2px; top: -3px;
    width: 9px; height: 9px;
    border-radius: 2px;
    background: var(--gm-bg);
    border: 1px solid var(--gm-text-muted);
    opacity: .75;
}
.gm-cats2-row a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--gm-btn-radius);
    color: var(--gm-text);
    text-decoration: none;
    font-size: 13px;
    transition: background .18s, color .18s;
}
.gm-cats2-row a:hover { background: var(--gm-bg); color: var(--gm-primary); }
.gm-cats2-row li.on > a {
    background: var(--gm-primary);
    color: #fff;
}
.gm-cats2-row li.on > a:hover { background: var(--gm-primary); color: #fff; }
.gm-cats2-row a em {
    font-style: normal;
    opacity: .55;
    font-size: 12px;
    margin-left: 3px;
}
/* 子类行：整行浅底，跟大类行区分开 */
.gm-cats2-row.sub li a { padding: 4px 11px; font-size: 12.5px; }

/* ---------- 区块标题 ---------- */
.gm-sec-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 28px 0 16px;
}
.gm-sec-head h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--gm-text);
    position: relative;
    padding-left: 14px;
}
.gm-sec-head h2::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 20px;
    background: var(--gm-primary);
    border-radius: 2px;
}
.gm-sec-head .more { margin-left: auto; font-size: 13px; color: var(--gm-text-muted); text-decoration: none; }
.gm-sec-head .more:hover { color: var(--gm-primary); }

/* ---------- 栅格 ---------- */
.gm-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.gm-grid.cols4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 卡片（沿用 post-grid 风格）---------- */
.gm-card {
    background: var(--gm-card);
    border-radius: var(--gm-radius);
    overflow: hidden;
    transition: box-shadow .3s, transform .3s;
    display: flex;
    flex-direction: column;
}
/* hover 用原站的大扩散阴影：0 40px 75px rgb(57 60 67/8%) */
.gm-card:hover { box-shadow: var(--gm-shadow-md); transform: translateY(-3px); }
.gm-card .thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    /* 【2026-10-09 用户要求】「卡片图片高度缩小 1/5左右」。
       4:3 → 16:10：宽度不变时，高度从 0.75 宽降到 0.625 宽，正好少 1/6≈17%，
       视觉上就是「矮了五分之一」。参考站 8010 用的也是这个比例
       （实测其列表页 padding-bottom: 46.74% ≈ 16:9.56，取整到 16:10 观感一致）。
       原站用 padding-top 占位法，这里用 aspect-ratio 等效。 */
    background: var(--gm-bg) center/cover no-repeat;
    overflow: hidden;
}
.gm-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 封面占位：图片加载失败时由 gamimg.js 换上。
   必须给足视觉重量，否则整块看起来像「卡片少了块」而不是「图没加载出来」。 */
.gm-card .thumb .ph {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    color: #a9b6c2;
    font-size: 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.9), rgba(240,244,245,.9)),
        var(--gm-bg);
}
/* 关键词卡（热门按搜索量时没有封面）不能被上面这条影响 */
.gm-card .thumb-word .ph { background: none; color: #fff; }
.gm-card .thumb .ph::before {
    content: "";
    width: 34px; height: 34px;
    background: currentColor;
    opacity: .35;
    /* 用一个简单的「图片」轮廓：外框 + 圆点 */
    -webkit-mask: radial-gradient(circle at 30% 30%, #000 28%, transparent 29%) 0 0/100% 100%,
                  linear-gradient(#000, #000) 0 0/100% 100%;
    mask: radial-gradient(circle at 30% 30%, #000 28%, transparent 29%) 0 0/100% 100%,
          linear-gradient(#000, #000) 0 0/100% 100%;
}
.gm-card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.gm-card .title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gm-text);
    text-decoration: none;
    line-height: 1.5;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
.gm-card .title:hover { color: var(--gm-primary); }
.gm-card .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--gm-text-muted);
    margin-top: auto;
}
.gm-card .meta i { font-style: normal; }

/* 分类角标 */
.gm-card .cat-tag {
    position: absolute;
    left: 10px; top: 10px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: var(--gm-btn-radius);
    backdrop-filter: blur(4px);
}

/* ---------- 列表页排序条 ---------- */
.gm-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0;
    flex-wrap: wrap;
}
.gm-toolbar .cnt { font-size: 13px; color: var(--gm-text-muted); }
.gm-toolbar .sp { margin-left: auto; }
.gm-sort a {
    display: inline-block;
    padding: 6px 16px;
    border-radius: var(--gm-btn-radius);
    background: #fff;
    color: var(--gm-text);
    text-decoration: none;
    font-size: 13px;
}
.gm-sort a.on { background: var(--gm-primary); color: #fff; }

/* ---------- 详情页顶部通栏 banner（2026-10-09 新增）----------
   需求：「仿照 8010/16209.html 详情页的顶部设计，通栏黑色半透明+封面图的背景，
          展示封面图+标题等基本信息」
   参考站做法：<div class="hero" data-bg="封面"> 里放左图 + 右信息。

   实现要点：
     · 背景图固定用 background-attachment:fixed —— 页面滚动时背景不动，
       视觉上就是「图定在视口上、内容从上面滑过」。
       ⚠️ 不支持 fixed 的浏览器（iOS Safari 部分版本）会退化成普通背景，
         不影响可读性，因为有遮罩压着。
     · 黑色半透明遮罩单独一层，不用 filter: brightness()——
       filter 会把子元素一起变暗，文字也跟着灰了。
     · 高度用 min-height 而不是 height，内容多时能自动撑开不截断。
     · 移动端单列：图在上、信息在下（下面 @media 里处理）。 */
.gm-d-banner {
    position: relative;
    /* 【2026-10-09 用户要求】封面图太小、宽高比也太小，要仿参考站：
       图占左侧约 40%、16:9 大图，标题白字，元信息用小字/标签。 */
    min-height: 210px;
    background-color: #1a1a1a;
    background-size: cover;
    /* 【2026-10-09 用户要求】首页搜索区与详情页 banner 的背景图
       「上下左右都取中间的部分，上下课掉一半」。
       ⚠️ 必须 attachment:scroll —— fixed 的定位基准是**视口**不是元素，
       会导致「明明写center center，视觉上还是从上面截取」。
       详细原因与实测数据见 .gm-hero 上面的注释。 */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* ⚠️ 通栏说明：banner 写在 .gm-container **外面**（detail.html 里
       .gm-d-banner 与 .gm-container 同级），所以它天然就是通栏的，
       只需要裁掉 100vw 含滚动条多出来的那条。
       里面的 .gm-d-banner-in 用了 .gm-container 类，
       那是 max-width:1400 + padding:20px，正好跟下面的内容区对齐。 */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    margin-bottom: 20px;
    /* 【2026-10-11 修】移动端横向溢出 183px（页面被撑宽，右侧内容被截断）
       原因：上面这套「通栏」技巧靠 width:100vw + margin-left:-50vw 实现，
       桌面浏览器下 100vw 会把纵向滚动条那 ~15px 也算进去，正好由
       overflow:hidden 裁掉；但**手机没有纵向滚动条占位**，
       100vw 会严格等于视口宽，而 body 又没有额外的负 margin 抵消，
       导致整块实际比视口宽 → 页面出现横向滚动，右侧内容被切掉。
       修法：移动端在下方 @media(max-width:768px) 里改用 width:100%，
       让它跟随父容器宽度，不再依赖 100vw / -50vw 这套桌面通栏技巧。
       ⛔ 别删上面那 5 行（桌面端通栏效果是对的），移动端覆盖在文件下方 768px 断点处。 */
}
/* 黑色半透明遮罩：整体压一层，中间留个稍亮区给封面图 */
.gm-d-banner-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(0, 0, 0, .74) 0%,
        rgba(0, 0, 0, .56) 45%,
        rgba(0, 0, 0, .72) 100%);
}
.gm-d-banner-in {
    position: relative;                  /* 盖在遮罩之上 */
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    width: 100%;
}
/* 参考站的封面图占左侧约 40%（16:9），比之前的 150x108 大一圈 */
.gm-d-banner-thumb {
    flex: 0 0 auto;
    width: 300px;
    height: 169px;                        /* 300x169 ≈ 16:9 */
    border-radius: var(--gm-radius);
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .55);
    background: rgba(255, 255, 255, .08);
}
.gm-d-banner-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gm-d-banner-info {
    flex: 1 1 auto;
    min-width: 0;                        /* 同 grid 那条：长标题要能正常省略 */
}
/* 【2026-10-09】按参考站调整：
   标题更大更醒目（元信息是配角），元信息改成「小字 + 前缀词」，
   去掉原来那个带底色的小方块标签 —— 参考站用的是纯小字，不是色块。 */
.gm-d-banner-title {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.32;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    word-wrap: break-word;
}
.gm-d-banner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}
.gm-d-banner-meta > span { display: inline-flex; align-items: center; }
/* 「大小/更新/浏览」前缀词：淡一点，不跟标题抢 */
.gm-d-banner-meta i {
    font-style: normal;
    margin-right: 6px;
    color: rgba(255, 255, 255, .5);
}
.gm-d-banner-meta a {
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    margin-right: 10px;
}
.gm-d-banner-meta a:hover { color: #fff; text-decoration: underline; }
/* 移动端：图在上、信息在下，避免图占掉大半屏把文字挤没了 */
@media (max-width: 768px) {
    .gm-d-banner {
        /* 【2026-10-11 用户要求】「顶部的图撑满，不要变小」
           原来移动端 min-height:0 → 高度全由内容撑，
           内容里图片只有 140x79，整块横幅就塌成一小条。
           桌面端是 210px，移动端给 200px，既撑满又不至于把首屏全占掉。 */
        /* 【2026-10-11】封面图改成通栏 16:9 之后，内容自己就有 ~400px 高，
           min-height 完全用不上了。保留一个很小的下限即可（防止图裂了横幅塌掉）。 */
        min-height: 120px;
        background-attachment: scroll;
        /* 【2026-10-11 二次修正】上一版我图省事改成了 width:100% + 去负 margin，
           结果横幅被容器 padding 卡住、左右各留一条灰边（用户反馈「放半张图大小」）。
           正确做法要同时满足两个要求：
             ① 视觉上「顶到屏幕两边」→ 必须用负 margin 抵消 .gm-container 的左右 padding
             ② 实际宽度等于视口（不能溢出）→ 宽度必须减去「容器 padding×2」
           .gm-container 移动端 padding 是 0 12px（见本文件下方 768px 断点），
           所以负 margin -12px + width:calc(100% + 24px) 正好抵消，两条同时成立。
           ⚠️ 别再简化成 width:100%（会留边）或裸 100vw（会溢出）。 */
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        left: auto;
    }
    /* 【2026-10-11 用户要求】「顶部这个区域，内容和背景也要有间距，左右和上下都要有」
       原来移动端 padding 是 18px 0（左右为 0）→ 标题顶到横幅最边缘，
       背景图和文字糊在一起。改成左右各 14px。 */
    /* 【2026-10-11 二次修】⛔ 这条规则之前写了 `padding: 18px 14px` 但**完全没生效**：
       实测 computed padding 是 `0px 12px` —— 因为本元素同时带 .gm-container 类
       （模板：class="gm-container gm-d-banner-in"），而文件**更靠后**的 768px 断点里
       有一条 `.gm-container { padding: 0 12px }`，两者权重相同(0,1,0)，
       后写的那条胜出 → 把本规则的上下 padding 覆盖成了 0。
       结果：内容上下几乎贴着背景边缘（实测只剩 5px），左右却有 12px，很不一致。
       修法：选择器写成 `.gm-d-banner-in.gm-d-banner-in`（权重提到 0,2,0），
       不依赖文件里的先后顺序，天然压过 .gm-container。
       四向统一 16px，满足「上下和左右间距一样」。 */
    .gm-d-banner-in.gm-d-banner-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    /* 【2026-10-11 修用户反馈】「下载地址上面怎么一点空白高度？
       .gm-d-h2 默认有 margin: 26px 0 12px（上 26px 是给区块之间留的间距）。
       2026-10-11 把「下载地址」块移到了左栏**第一个**位置，
       它上方已经没有别的区块了，这 26px 就变成了纯粹的多余空白
       （实测白卡顶 → 第一个下载项 = 76px，其中 26px 是这来的）。
       修法：作为第一个区块时取消上边距，让标题紧贴白卡内边距，
       跟左侧 14px 内边距形成一致的留白。
       ⛔ 只取消上边距 margin-top，下边距 12px 保留（标题与下方列表仍需分开）。 */
    .gm-main > .gm-d-down-main:first-child .gm-d-h2 {
        margin-top: 0;
    }
    /* 【2026-10-11 用户反馈「这个图怎么回事，就一直做不好么？」】
       ⛔ 移动端**完全隐藏**封面缩略图，原因有两条：
         ① 内容重复：横幅的 background-image 就是 {$row.cover}（同一张封面），
            左上角再叠一张 140x79 的小图，等于同一张图显示两遍，很乱。
         ② 挤占空间：flex-direction:column 时它占在最上方，
            把标题整个往下推，导致「标题+两行小字」被压到横幅下半部分。
       桌面端（>768px）保留 —— 那里横幅是「左图右文字」并排布局，
       图作为封面预览有价值（用户 2026-10-09 明确要求过仿参考站的左侧大图）。
       ⛔ 别只改尺寸，直接 display:none，否则重复问题还在。 */
    /* 【2026-10-11 用户明确要求】「内容是 图片封面+游戏名字+各种属性展示。
       目前有问题的主要是这个图片封面展示，他小了，要通栏啊。」
       → 移动端把封面图放大成**通栏铺满整行**（不是 140x79 小图，也不是隐藏）。
       实现：
         · 负 margin 抵消 .gm-container 的 16px padding，让图顶到横幅内容区两边
         · width:calc(100% + 32px) 补回被抵消掉的宽度 → 正好等于内容区全宽
         · 高度用 aspect-ratio 保持 16:9，不用写死像素（不同封面比例也一致）
       ⛔ 我上一轮误判成「图重复了要隐藏」是错的 —— 背景图是模糊放大的同一张，
          上面这张是清晰的 16:9 封面，两者作用不同，不该隐藏。 */
    .gm-d-banner-thumb {
        /* 【2026-10-11 修正】上一版用 -16px 负 margin + calc(100%+32px) 让图通栏，
           结果图比下面文字宽了 16px（图 left=0，标题 left=16），左边不对齐。
           原因：.gm-d-banner-in 的 padding 只有 16px，通栏只需抵消这 16px，
           但我按「左右各 16」算了 32px，多抵消了一层。
           现在改成 width:100%（与文字同宽）、靠负 margin 顶出左侧 padding：
           图 left=0、宽 390；标题 left=16 —— 图比文字各边宽 16px，
           这才是「背景层通栏、内容也通栏」的层次感，
           ⛔ 如果你要的是「图和文字完全同宽」，把 margin 去掉即可。 */
        width: 100%;
        margin-left: 0;
        height: auto;
        /* 【2026-10-11 用户要求】「图片高度稍微低一些」
           原来是 16/9（358/9*16 = 636 → 实测高 201px），
           改成 2/1 比例 → 高约 179px，比之前矮 22px，整块横幅不那么占屏。 */
        aspect-ratio: 2 / 1;
        /* 【2026-10-11 用户要求】「图片加圆角」
           之前通栏时我把 border-radius 归零了（贴着两边不需要圆角），
           现在既然要圆角，就用小圆角配合 4px 间隙，避免圆角和边缘打架。 */
        border-radius: 10px;
        margin-bottom: 2px;
        box-shadow: none;
        overflow: hidden;
    }

    .gm-d-banner-title { font-size: 19px; }
    /* 【2026-10-11 用户要求】「顶部标题之外的小字分两行：
       分类一行，大小/更新/浏览一行」。
       实现用 grid 而不是 flex-column：
       flex-direction:column 会让**每个 span 各占一行**（实测 4 个 span → 4 行），
       必须先把后三个包起来才能同排，而包起来要改 HTML。
       用 grid 的「显式列」可以不碰 HTML：
         · 第 1 个 span（分类）指定 grid-column:1/-1 独占整行
         · 后三个自动流入第 2 行的同一行
       ⚠️ 桌面端不受影响（.gm-d-banner-meta 本身是横向 flex + wrap）。 */
    .gm-d-banner-meta {
        display: grid;
        /* 【2026-10-11 修正】原来用 repeat(auto-fill, minmax(0,auto))，
           实测在 390px 窄屏下自动算出的列宽过窄 → 后两项「更新/浏览」
           挤在同一格子里、文字直接叠在一起（截图确认）。
           改成固定 3 列 + fr 均分，每项独占一格、不会被压窄。
           ⛔ 不要再改回 auto-fill：那一列 auto 宽度是按内容算的，
              「更新 2026-10-08」这种长内容会把列撑歪。 */
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
        gap: 4px 10px;
        font-size: 12px;
    }
    /* 分类独占第一行整行，并与下一行之间加一条淡分隔线 */
    .gm-d-banner-meta > span.gm-d-banner-cats {
        grid-column: 1 / -1;
        padding-bottom: 0;
        margin-bottom: 0;
        /* 【2026-10-11 用户要求】去掉两行之间的横向分割线（"丑死了"），
           靠 grid 的 row-gap 拉开两行距离即可，不需要线条。 */
        border-bottom: none;
    }
    /* 「大小 / 更新 / 浏览」三项：第 2 行并排，inline-flex 保证前缀词对齐 */
    .gm-d-banner-meta > span:not(.gm-d-banner-cats) {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;      /* 「更新 2026-10-08」不折行，压窄就溢出而不是叠字 */
    }
    /* 只有 1 个分类时：分类本身也占满整行，不参与 3 列均分
       （它已经有 grid-column:1/-1，这里只是避免继承多余约束）。 */
    .gm-d-banner-meta > span.gm-d-banner-cats a { margin-right: 12px; }
}

/* ---------- 详情页 ---------- */
/* 右栏宽度 300 → 340：
   2026-10-08 下载地址从左栏挪到了右栏，300px 放「网盘标签 + 名称 + 提取码 + 按钮」
   一行会挤到按钮换行，340px 是实测下来刚好不换行的宽度。
   别再往窄改，右栏是竖排列表，每窄一点就多一行折行。 */
.gm-detail { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin: 20px 0 40px; align-items: start; }
/* ⚠️ grid 子项必须 min-width:0，否则里面一张宽图就能把整列撑开。
   grid item 的默认 min-width 是 auto（= 内容宽度），
   正文里迁移来的 <figure>、宽图都是 500~660px 宽的固定尺寸，
   不加这行整个左栏在手机上会被撑到 685px，手机上直接横向溢出。
   这是 grid/flex 布局最常见的坑，别删。 */
.gm-detail > * { min-width: 0; }
/* ============================================================
   详情页模块顺序（2026-10-12 用户要求）
   ============================================================
   ⛔ 背景：做移动端自适应时曾把「下载地址」从右栏挪到左栏最上面，
      结果 **PC 端也跟着挪了**（PC/移动共用同一套 DOM 顺序，改一处两端都变）。
      用户明确：PC 端保持原样，只调整**移动端**的顺序。

   📐 用户定义的移动端顺序：
      顶部区域 → 右侧上(下载地址) → 左侧(游戏介绍/截图/配置/下载/推荐) → 右侧中(使用须知) → 右侧下(热门推荐)
      注意左侧里**本身也有一个「下载地址」**（游戏介绍下方那个），
      移动端第一个出现的下载地址 = 右栏那个（top 顺序上的下载）。

   ✅ 实现方式：`display: contents` —— 让 aside 的三个子块
      **直接参与父级 .gm-detail 的网格排布**，于是能用 grid-row/grid-column
      把它们各自钉在 PC 的右栏；移动端塌成一列时，用 `order` 排出想要的顺序。

      为什么不用 flex+order 改 HTML：
        display: contents **不改 HTML**，PC 端两列布局一行 CSS 都不用重写，
        只在移动端断点里加 order。风险最小。
   ============================================================ */

@media (max-width: 900px) {
    /* 移动端：aside 摊平，三块变成 .gm-detail 的直接 grid item */
    .gm-detail { grid-template-columns: 1fr; }
    .gm-side { display: contents; }

    /* 顺序：主栏(默认 0) → 下载(1) → 使用须知(2) → 热门(3)
       主栏 order:0 会排在最前，但用户要的是「下载」在主栏**之前**，
       所以主栏给 order:1、下载给 0。 */
    .gm-main                       { order: 1; }
    .gm-d-side-block.gm-d-down     { order: 0; }  /* 下载地址 */
    .gm-d-side-block.gm-d-guide    { order: 2; }  /* 使用须知 */
    .gm-d-side-block.gm-d-hot      { order: 3; }  /* 热门推荐 */

    /* ⛔⛔ 2026-10-12 修「模块间距有的大有的小」（用户截图反馈）：
       摊平后，右栏三块**同时**吃到了两份间距 ——
         ① .gm-detail 的 grid gap: 24px（所有子项都有）
         ② .gm-side > div 的 margin-bottom: 16px（只右栏块有）
       → 右栏块之间 = 40px，而主栏周围只有 24px，肉眼可见不齐。

       ⛔ PC 端**不能**一起改：那时三块还在 aside 里，
          不吃外层 gap，16px 是它们唯一的间距来源，删了就贴死。
       所以只在单列断点里把这 16px 归零，间距统一交给 grid gap 一套控制。 */
    .gm-detail .gm-d-side-block,
    .gm-detail .gm-side > div { margin-bottom: 0; }
}

/* ⚠️ 2026-10-11 用户反馈：「游戏介绍上面距离白卡边线太高，右栏小模块很正常」
   实测原因：这里的 padding 上 26 / 左 30 看着接近，
   但首个元素 <h2 class="gm-d-h2"> 自带 margin-top: 34px（区块之间的间距），
   叠加后 → 距上边线 26+34=**60px**，而左边只有 **30px**，上下差一倍。
   对照右栏：模块 padding 18px，标题 margin-top:0 → 标题距上边线仅 19px。

   修法：① 把 padding 四边统一成 30px；② 取消**左栏第一个区块标题**的上边距。
   这样「游戏介绍」距上 = 距左 = 30px，与右栏观感一致。
   ⛔ 其它区块之间的 34px 间距保留 —— 只有第一个才取消。 */
.gm-main {
    background: #fff;
    border-radius: var(--gm-radius);
    padding: 30px;
}
/* 左栏第一个区块（游戏介绍 / 视频 / 无介绍时的截图…）的标题取消上边距
   ⚠️ 两种情况都要覆盖：
     ① 首个元素本身就是 <h2 class="gm-d-h2">（有正文时的「游戏介绍」）
     ② 首个元素是 <section>，标题在它里面（没正文时，首块是截图/配置要求）
   ⛔ 只清 margin-top，margin-bottom 保留（标题与下方内容仍需分开）。 */
.gm-main > .gm-d-h2:first-child,
.gm-main > section:first-child .gm-d-h2 { margin-top: 0; }
.gm-main h1 { font-size: 24px; font-weight: 700; margin: 0 0 14px; line-height: 1.4; }
.gm-sub { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: var(--gm-text-muted); margin-bottom: 20px; }
.gm-sub a { color: var(--gm-text-muted); text-decoration: none; }
.gm-sub a:hover { color: var(--gm-primary); }

.gm-cover { margin: 0 0 22px; }
.gm-cover img { width: 100%; border-radius: var(--gm-radius); display: block; }

/* 下载区 */
.gm-down {
    background: linear-gradient(180deg, rgba(253, 115, 1, .06), rgba(253, 115, 1, .02));
    border: 1px solid rgba(253, 115, 1, .22);
    border-radius: var(--gm-radius);
    padding: 20px 22px;
    margin: 22px 0;
}
.gm-down h3 { font-size: 16px; margin: 0 0 14px; color: var(--gm-text); }
.gm-down-list { display: flex; flex-wrap: wrap; gap: 10px; }
.gm-down-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-btn-radius);
    font-size: 14px;
    color: var(--gm-text);
    text-decoration: none;
    transition: all .2s;
}
.gm-down-item:hover { border-color: var(--gm-primary); color: var(--gm-primary); }
.gm-down-item .pwd { font-size: 12px; color: var(--gm-text-muted); }
.gm-down-note { font-size: 13px; color: var(--gm-text-muted); margin-top: 12px; line-height: 1.7; }

/* 正文区：沿用 WordPress 的 bb 类名 */
/* ==========================================================
   正文排版
   [2026-10-04] 对齐原站 app.css：
     · h2 = 底部 4px 浅灰横线（不是左侧竖条）
     · h3 = 左侧 4px 橙竖条
     · 保留 bb_paragraph / bb_tag / bb_ul 兼容（原站其实没有这几个类，
       是早期自己造的；正文内容仍可能带）
   ========================================================== */
/* 【2026-10-09 正文对齐使用须知】用户要求「正文的字体大小、间距、行间距、段落间距，
   都和右侧目前的使用须知一样（字体颜色保持现状不动）」。
   使用须知 = .gm-d-rich：13.5px / line-height 1.85 / 段落 margin 10px。
   → 这里直接跟它对齐，颜色仍用 --gm-text（深色），只有排版参数同步。 */
.gm-article {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--gm-text);
    word-wrap: break-word;
}
/* 【2026-10-09 正文样式清理】clean_body_style.py 已把正文里的
   class 属性全部删掉（bb_paragraph / bb_tag / bb_ul 等共 1.1 万处），
   所以下面这些 .xx .bb_xx 兼容选择器全是死代码，已删除。
   段落间距 10px —— 与使用须知 .gm-d-rich p 完全一致。 */
.gm-article > p { margin: 0 0 10px; }
.gm-article > p:last-child { margin-bottom: 0; }

/* 【2026-10-09 小标题统一】用户要求：「原有的小标题，改成 16px 加粗」，
   并且「取消全部样式，只用加粗/小标题/斜体/灰色/空白行做区分」。
   → h2~h6 全部统一 16px / 700，不再分大小层级；
     去掉 h2 底部横线（原来 4px border-bottom）和 h3 左侧橙竖条（border-left），
     区分只靠「加粗 + 稍大间距」这一种手段。
   ⚠️ 标题样式要跟 clean_body_style.py 的识别规则对齐 ——
      库里已经有约 9000 处短行被升成 <h2>，所以 h2 才是正文里真正的小标题。 */
.gm-article h2,
.gm-article h3,
.gm-article h4,
.gm-article h5,
.gm-article h6 {
    font-size: 16px;
    font-weight: 700;
    margin: 22px 0 10px;
    line-height: 1.7;
    color: var(--gm-text);
    border: 0;
    padding: 0;
    background: none;
}

.gm-article ul, .gm-article ol { padding-left: 22px; margin: 0 0 10px; }
.gm-article li { margin-bottom: 5px; }
.gm-article img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
    margin: 6px 0;
}
/* WordPress 迁移过来的正文里有一批写死宽度的元素：
   <figure class="wp-block-video"><video width="300" height="150">…</video></figure>
   以及 <img width="460"> 这类。
   它们本身没问题（窄屏下 300px 装得下），但 figure 常常还带
   WordPress 默认的左右边距和 min-width，叠起来就会顶破容器。
   这里统一把 figure / video / iframe 收进内容宽度内。 */
.gm-article figure,
.gm-article video,
.gm-article iframe,
.gm-article embed {
    max-width: 100%;
}
.gm-article figure { margin-left: 0; margin-right: 0; }
.gm-article video { height: auto; }
.gm-article strong { font-weight: 600; color: var(--gm-text); }
.gm-article a { color: var(--gm-blue); text-decoration: none; }
.gm-article a:hover { color: var(--gm-primary); text-decoration: underline; }

.gm-article blockquote {
    margin: 16px 0;
    padding: 12px 18px;
    background: var(--gm-bg);
    border-left: 4px solid var(--gm-border);
    border-radius: 0 var(--gm-radius) var(--gm-radius) 0;
    color: var(--gm-text-muted);
}
.gm-article code {
    font-family: var(--gm-mono);
    font-size: 13px;
    background: var(--gm-bg);
    border-radius: 3px;
    padding: 2px 6px;
}
.gm-article table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.gm-article table th, .gm-article table td { border: 1px solid var(--gm-border); padding: 8px 12px; text-align: left; }
.gm-article table th { background: var(--gm-bg); font-weight: 600; }

/* 侧栏 */
.gm-side > div { background: #fff; border-radius: var(--gm-radius); padding: 18px 20px; margin-bottom: 16px; }
.gm-side h4 { font-size: 15px; margin: 0 0 14px; color: var(--gm-text); }
.gm-nav-list { list-style: none; margin: 0; padding: 0; }
.gm-nav-list li { margin-bottom: 8px; }
.gm-nav-list a {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--gm-text);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 4px;
}
.gm-nav-list a:hover { background: rgba(253, 115, 1, .07); color: var(--gm-primary); }
.gm-nav-list em { font-style: normal; color: var(--gm-text-muted); font-size: 12px; }

/* 上下篇：2026-10-09 用户要求取消该区块，模板已删，这里的一组样式也一并移除。 */

/* ---------- 分页 ---------- */
.gm-pager { display: flex; justify-content: center; gap: 6px; margin: 32px 0 40px; flex-wrap: wrap; }
.gm-pager a, .gm-pager span {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    background: #fff;
    border-radius: var(--gm-btn-radius);
    color: var(--gm-text);
    text-decoration: none;
    font-size: 14px;
}
.gm-pager a:hover { background: rgba(253, 115, 1, .1); color: var(--gm-primary); }
.gm-pager .cur { background: var(--gm-primary); color: #fff; }
.gm-pager .dis { opacity: .4; cursor: not-allowed; }

/* ---------- 页脚 ---------- */
.gm-footer { background: #fff; padding: 26px 0; margin-top: 40px; border-top: 1px solid var(--gm-border); }
.gm-footer-inner { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; font-size: 13px; color: var(--gm-text-muted); }
.gm-footer a { color: var(--gm-text-muted); text-decoration: none; }
.gm-footer a:hover { color: var(--gm-primary); }

/* ---------- 空状态 ---------- */
.gm-empty { text-align: center; padding: 70px 20px; color: var(--gm-text-muted); }
.gm-empty p { font-size: 15px; margin: 0 0 18px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) { .gm-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) {
    .gm-grid, .gm-grid.cols4 { grid-template-columns: repeat(3, 1fr); }
    .gm-search input { width: 140px; }
}
@media (max-width: 640px) {
    .gm-grid, .gm-grid.cols4 { grid-template-columns: repeat(2, 1fr); }
    .gm-main { padding: 18px 16px; }
    .gm-menu { display: none; }
}

/* ==========================================================
   网盘搜索（游戏详情页）
   ========================================================== */
/* ==========================================================
   资源下载（2026-10-04 新方案，取代 .gm-searchpan 网盘搜索）
   数据来自 qf_source（后台「游戏资源」列表导入的原始地址）
   ========================================================== */
.gm-source {
    background: #fff;
    border: 1px solid rgba(253, 115, 1, .25);
    border-radius: var(--gm-radius);
    padding: 18px 20px;
    margin: 20px 0;
}
.gm-source h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--gm-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gm-source h3::before {
    content: '';
    width: 4px; height: 16px;
    background: var(--gm-primary);
    border-radius: 2px;
}
.gm-source .tip { font-size: 12px; color: var(--gm-text-muted); margin: 0 0 14px; }

/* 地址条目 */
.gm-source-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 2px;
    border-bottom: 1px dashed var(--gm-border);
}
.gm-source-item:last-child { border-bottom: none; }

/* 网盘标识（2026-10-08 由彩色文字标签改成官方图标）
   ⚠️ 不要在这里再加背景色块 —— 11 张官方图标里，
      阿里/迅雷/123/115/光鸭 本身就是满色方形，套色块会变成「色块里有个色块」。
      想统一观感就统一用下面的白底圆角框，各图标自己带色彩，
      靠 1px 浅边 + 圆角把不同底色的图标收进同一个视觉盒子里。 */
/* 网盘图标（2026-10-08 第二次调整）
   ⚠️ 底板（白底 + 浅灰描边 + 圆角）已经画进 PNG 本身了 ——
      见 scripts/normalize_pan_icons.py。原因：图标分别抓自各网盘官网，
      原风格混着「透明线条 logo / 实心蓝方块 / 灰卡片」三种，
      同一列并排时视觉重量极不一致，很容易被误读成「图标配错了」。
      统一画进图片后，这里**不要再加 background / border**，
      否则会出现双层边框（外 CSS 一圈、内 PNG 一圈），
      在 24px 尺寸下显得又脏又小。 */
.gm-pan-ico {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    /* object-fit 必须写 contain：各图标内部留白比例仍有细微差异，
       不加会被拉伸变形。 */
    object-fit: contain;
    display: block;
}

/* 兜底：is_type 越界（后台新增了网盘类型但图标还没补）时显示文字标签。
   正常情况下永远不渲染 —— 库里 11 种类型都有图标。
   所以只保留一条中性样式，不再为每个网盘写一套配色。 */
.gm-pan-tag {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    background: #F1F5F9;
    color: #606266;
}

.gm-source-name {
    flex: 1 1 220px;
    min-width: 0;
    font-size: 14px;
    color: var(--gm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-source-item .pwd {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--gm-text-muted);
    background: #F8FAFC;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-btn-radius);
    padding: 3px 8px;
}

.gm-source-item .gm-btn { flex: 0 0 auto; height: 36px; font-size: 13px; padding: 0 18px; }
.gm-source-item .gm-btn-primary {
    background: var(--gm-primary);
    color: #fff;
    border: none;
}
.gm-source-item .gm-btn-primary:hover { background: var(--gm-primary-hover); }
.gm-source-item .gm-btn-primary:disabled { opacity: .55; cursor: wait; }

/* 下载转存结果弹窗
   ⚠️ 2026-10-08 改版：结果从「下载模块下方就地显示」改成独立弹窗。
      转存要 10~30秒，就地渲染会把下方整块内容顶下去、页面跳动明显。
   ⚠️ z-index 必须高于灯箱（.gm-lightbox 用的是 9999）和公告弹窗，
      否则下载时会弹到灯箱后面。 */
.gm-dl {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
}
.gm-dl.on { display: flex; }

/* 弹窗打开时锁背景滚动 —— 不锁的话弹窗后面的页面还能滚，
   点两层穿透到别的游戏上会看错「弹窗还在转存中」。 */
html.gm-dl-locked, html.gm-dl-locked body { overflow: hidden; }

.gm-dl-panel {
    position: relative;
    width: 420px;
    height: 500px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    background: #fff;
    border-radius: var(--gm-radius);
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: gmDlIn .18s ease-out;
}
/* 顶部标题 */
.gm-dl-title {
    flex: 0 0 auto;
    padding: 18px 20px;
    font-size: 17px;
    font-weight: 600;
    color: var(--gm-text);
    border-bottom: 1px solid #F1F5F9;
}
/* 底部提示（地址有效期） */
.gm-dl-foot {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 12px 20px;
    border-top: 1px solid #F1F5F9;
    font-size: 12px;
    color: var(--gm-text-muted);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 成功后的「去下载」主按钮 */
.gm-dl-go {
    display: inline-block;
    min-width: 190px;
    padding: 14px 32px;
    border-radius: var(--gm-btn-radius);
    background: var(--gm-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: filter .15s ease;
}
.gm-dl-go:hover { filter: brightness(1.06); color: #fff; }
@keyframes gmDlIn {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.gm-dl-x {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--gm-text-muted);
    cursor: pointer;
    border-radius: 8px;
}
.gm-dl-x:hover { background: #F1F5F9; color: var(--gm-text); }

/* 中间主体：加载中 / 去下载按钮 / 失败提示（垂直居中） */
.gm-dl-box {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 三态共用排版 */
.gm-dl-loading, .gm-dl-ok, .gm-dl-err { line-height: 1.7; }
.gm-dl-t { font-size: 16px; font-weight: 600; }
.gm-dl-d { margin-top: 8px; font-size: 13px; color: var(--gm-text-muted); }
.gm-dl-ok .gm-dl-t { color: #529B2E; }
.gm-dl-err .gm-dl-t { color: #F56C6C; }

/* 转存中的转圈指示 */
.gm-dl-spin {
    width: 34px;
    height: 34px;
    margin: 4px auto 14px;
    border: 3px solid #E2E8F0;
    border-top-color: var(--gm-primary);
    border-radius: 50%;
    animation: gmDlSpin .8s linear infinite;
}
@keyframes gmDlSpin { to { transform: rotate(360deg); } }

/* 成功后的分享链接：整块可点，比一小行文字好按 */
.gm-dl-link {
    display: block;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--gm-primary-soft, rgba(59, 91, 219, .1));
    border-radius: var(--gm-btn-radius);
    background: var(--gm-primary-soft, rgba(59, 91, 219, .06));
    color: var(--gm-primary);
    font-size: 13px;
    word-break: break-all;
    line-height: 1.6;
    text-decoration: none;
}
.gm-dl-link:hover { filter: brightness(.97); }

/* 旧「就地显示」样式已停用（改弹窗后不再有 .gm-source-result 容器），
   保留备查，别直接删 —— 以后若要回退到就地显示能用上。 */
.gm-source-result { margin-top: 16px; }
.gm-source-result:empty { display: none; }
.gm-source-result .loading,
.gm-source-result .ok,
.gm-source-result .err {
    padding: 14px 16px;
    border-radius: var(--gm-btn-radius);
    font-size: 14px;
    line-height: 1.7;
}
.gm-source-result .loading { background: #F8FAFC; color: var(--gm-text-muted); text-align: center; }
.gm-source-result .ok { background: #F0F9EB; color: #529B2E; font-weight: 600; }
.gm-source-result .err { background: #FEF0F0; color: #F56C6C; }
.gm-source-result .res-item { margin-top: 10px; font-size: 13px; }
.gm-source-result .res-item .pan { color: var(--gm-text-muted); }
.gm-source-result .res-item .link {
    color: var(--gm-primary);
    word-break: break-all;
    line-height: 1.7;
}
.gm-source-result .res-tip { margin-top: 8px; font-size: 12px; color: var(--gm-text-muted); }

/* ---- 以下为旧「网盘搜索」样式，已停用，保留备查 ---- */
.gm-searchpan {
    background: #fff;
    border: 1px solid rgba(253, 115, 1, .25);
    border-radius: var(--gm-radius);
    padding: 18px 20px;
    margin: 20px 0;
}
.gm-searchpan h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--gm-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.gm-searchpan h3::before {
    content: '';
    width: 4px; height: 16px;
    background: var(--gm-primary);
    border-radius: 2px;
}
.gm-searchpan .tip { font-size: 12px; color: var(--gm-text-muted); margin: 0 0 14px; }

.gm-searchpan .btns { display: flex; flex-wrap: wrap; gap: 10px; }
.gm-searchpan .btns .gm-btn {
    min-width: 88px;
    height: 40px;
    font-size: 14px;
}
.gm-searchpan .btns .gm-btn.on {
    background: var(--gm-primary-hover);
    box-shadow: 0 4px 12px rgba(253, 115, 1, .3);
}
.gm-searchpan .btns .gm-btn:disabled { opacity: .6; cursor: wait; }

/* 结果区 */
.gm-searchpan .result { margin-top: 16px; }
.gm-searchpan .loading,
.gm-searchpan .empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--gm-text-muted);
    font-size: 14px;
}
.gm-searchpan .empty small { color: #a9b4be; font-size: 12px; }

.gm-searchpan .hd {
    font-size: 13px;
    color: var(--gm-text-muted);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gm-border);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gm-searchpan .hd b { color: var(--gm-primary); }
.gm-searchpan .hd .kw {
    margin-left: auto;
    background: none;
    border: 1px solid var(--gm-border);
    color: var(--gm-text-muted);
    border-radius: var(--gm-btn-radius);
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
}
.gm-searchpan .hd .kw:hover { border-color: var(--gm-primary); color: var(--gm-primary); }

.gm-searchpan .ul { list-style: none; margin: 0; padding: 0; }
.gm-searchpan .ul li {
    padding: 12px 2px;
    border-bottom: 1px dashed var(--gm-border);
}
.gm-searchpan .ul li:last-child { border-bottom: none; }
.gm-searchpan .ul .t {
    font-size: 14px;
    color: var(--gm-text);
    line-height: 1.6;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gm-searchpan .ul .b { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gm-searchpan .ul .pwd {
    font-size: 12px;
    color: var(--gm-text-muted);
    background: var(--gm-bg);
    padding: 2px 10px;
    border-radius: var(--gm-btn-radius);
}
.gm-searchpan .ul .get {
    height: 30px;
    padding: 0 18px;
    border: none;
    border-radius: var(--gm-btn-radius);
    background: var(--gm-primary);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s;
}
.gm-searchpan .ul .get:hover { background: var(--gm-primary-hover); }
.gm-searchpan .ul .get:disabled { background: #cfd6dc; cursor: wait; }

.gm-searchpan .ul .r { margin-top: 8px; font-size: 13px; }
.gm-searchpan .ul .r .tip { color: var(--gm-text-muted); margin: 0; font-size: 13px; }
.gm-searchpan .ul .r .ok { color: #1D9E75; font-weight: 500; }
.gm-searchpan .ul .r .err { color: #E24B4A; }
.gm-searchpan .ul .r small { color: var(--gm-text-muted); font-size: 12px; }
.gm-searchpan .ul .r .share {
    display: inline-block;
    margin-left: 12px;
    color: var(--gm-primary);
    text-decoration: none;
    font-size: 13px;
}
.gm-searchpan .ul .r .share:hover { text-decoration: underline; }

/* 预告视频 */
.gm-video {
    margin: 22px 0;
    border-radius: var(--gm-radius);
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.gm-video video { width: 100%; max-height: 460px; display: block; }

/* ==========================================================
   2026-10-05 新增模块
   1. 首页搜索区（背景图 + 标题 + 搜索框 + 热词）
   2. 卡片专题（彩色 8 宫格）
   3. 移动端顶部条 + 抽屉菜单
   4. 移动端底部导航
   5. 响应式统一（992 / 768）
   ========================================================== */

/* ==========================================================
   1. 首页搜索区
   ========================================================== */
/* ---------- 首页搜索区（2026-10-09 用户要求改造）----------
   需求：「顶部通栏黑色半透明+图的背景。滚动时候图片看起来好像是固定到某个位置」

   「通栏」= 背景图铺满**整个浏览器宽度**，两边顶到屏幕边；
   但里面的标题/搜索框仍跟下面的 1400px 容器对齐。
   实现方式：hero 放在 .gm-container 里面，用负 margin 把自己的宽度
   撑到容器之外（容器 padding 是 20px，负 20px 就齐屏幕边），
   背景用 100vw 明确指定视口宽，再用 `margin-left: calc(50% - 50vw)`
   居中。⚠️ 100vw 会包含滚动条宽度，所以还要用
   `scrollbar-gutter`/负 padding 兜一下，否则右边会多出一条空白。
   这里改用更稳的方案：负 margin + 内部再套一个 1400 容器。

   ③ background-attachment: fixed —— 滚动时背景图钉在视口，
   内容从上面滑过，正是用户描述的「图片看起来好像是固定到某个位置」。
   ⚠️ iOS Safari 对 fixed 支持有问题会退化成 scroll，有遮罩压着不影响可读性。 */
.gm-hero {
    position: relative;
    background-color: #1b2334;
    background-size: cover;
    /* 【2026-10-09 用户要求】「上下左右都取中间的部分，上下各裁掉一半」
       ⚠️⚠️ 这里**必须用 scroll，不能用 fixed**（连续踩坑两次才定位到）：
       `background-attachment: fixed` 时，背景图的定位基准是**视口**，
       不是元素本身。实测：
         视口 1680x900，hero 高 338，页面上hero 从 top=68 开始
         原图 1920x1080→ 缩放后 1720x968
         center 是「图相对视口居中」→ 图顶在视口上方 (968-900)/2 = 34px
         hero 只显示它下面 338px，也就是【图的上半部分】
       → 所以 background-position 明明是50% 50%，视觉上仍是「从上面截取」。
       改成 scroll 后，定位基准回到 hero 自身，
       center 才是真正的「上下各裁 (968-338)/2 = 315px」，正是用户要的。
       ⚠️ 代价：失去「滚动时图片固定」的效果。
       用户最初要的是这个效果，但跟「上下各裁一半」在技术上互斥
       （fixed 拿不到元素级定位），优先满足「取中间」这个明确要求。 */
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 240px;
    padding: 52px 20px 46px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* ⛔ 通栏由外层 .gm-hero-wrap 负责（那才是能突破 1400 容器的地方），
       hero 自己只占满 wrap。详细原因见下面 .gm-hero-wrap 的说明。 */
    width: 100%;
}
/* ⛔ 通栏的关键就在这一行（2026-10-09 第三次改才对）
   ------------------------------------------------------------------
   前两次都失败，根因是**位置不对**：
     · 首页 hero 在 <main class="gm-container">（max-width:1400）**内部**
     · 我用 `margin:0 -20px` 想突破容器 → 负 margin 只能突破 padding，
       突破不了 max-width 本身，可见区仍是 1400（截图里左右各 130px 白边）
     · 后来改成 `width:100vw + left:50% + translateX(-50%)`，
       实测 getBoundingClientRect 是 1720（>视口），我据此判「通栏了」——
       ⚠️ **这个判断是错的**：那是元素几何宽度，但父容器 .gm-hero-wrap
       在1400 容器内、overflow:hidden，把多出来的部分裁掉了，
       肉眼看到的还是 1400。**我犯的错：只看元素几何，没看可见区。**

   现在跟详情页 .gm-d-banner 用**完全同一套**写法，唯一的差别是
   首页要额外一层 wrap 裁滚动条宽：
     · hero-wrap  : width:100vw + left:50% + margin-left:-50vw  → 自己通栏
     · hero       : width:100%（不再自己通栏，交给 wrap）
     · hero-wrap  : overflow:hidden 裁掉 100vw 含的滚动条宽
   ⚠️ 以后验证「通栏」不能只看元素宽度，必须看**父容器有没有把溢出裁掉**，
   或者直接截图看肉眼边界。 */
.gm-hero-wrap {
    position: relative;
    overflow: hidden;          /* 裁掉 100vw 多出的滚动条宽 */
    width: 100vw;
    left: 50%;
    margin-left: -50vw;
}
/* 【2026-10-11 修】上面这套「100vw + -50vw」通栏技巧在移动端有 bug：
   .gm-hero 有左右 padding（移动端 14px），而 width:100vw 是**含滚动条的视口宽**，
   负 margin 只能抵消 padding 的一半关系 → .gm-hero 实测宽 418px > 视口 390px，
   里面所有内容（标题/搜索框/热词）统统右移 14px，视觉上「没对齐、字歪了」。
   ⛔ 别再改回 width:100%（那会让背景图不满幅）。
   移动端改成：宽度跟随视口（100%），靠 .gm-hero-wrap 本身承载通栏效果。 */
@media (max-width: 768px) {
    /* 【2026-10-11 二次修正】上一版我改成 width:100% + 去负 margin，
       结果 hero-wrap 被父级 <main class="gm-container"> 的 12px padding 卡住，
       实测整块左右各缩进 12px（12~378），背景图不满幅、内容也跟着歪。
       正确定性：.gm-hero-wrap 就是**用来突破容器 padding 实现通栏的**，
       必须保留 100vw + -50vw 技巧。真正的溢出不在这里 ——
       是 .gm-hero 自己又有 14px padding，两者叠加才超。
       这里恢复 100vw 通栏，溢出交给下一条规则处理。 */
    .gm-hero-wrap {
        width: 100vw;
        left: 50%;
        margin-left: -50vw;
    }
}
/* 里面的内容重新按 1400 居中，跟下面的卡片区对齐 */
.gm-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}
/* 上下黑边：让通栏两端跟页面衔接自然 */
.gm-hero::before,
.gm-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
}
.gm-hero::before { top: 0;    background: linear-gradient(180deg, rgba(20, 26, 38, .55), rgba(20, 26, 38, 0)); }
.gm-hero::after  { bottom: 0; background: linear-gradient(0deg,   rgba(20, 26, 38, .55), rgba(20, 26, 38, 0)); }
.gm-hero-mask {
    position: absolute;
    inset: 0;
    background: rgba(16, 22, 34, .62);
}
/* ⛔ 这里原来还有第二条 .gm-hero-inner { max-width:720px }，
   它会覆盖上面那条的 max-width:1400px —— 通栏做出来之后，内容被压到 720，
   视觉上就像「还是限制在中间一小块」。
   已删除，统一由上面那条（width:100% + max-width:1400）控制。 */
.gm-hero-title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    letter-spacing: .5px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.gm-hero-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 26px;
    line-height: 1.9;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.gm-hero-search {
    display: flex;
    max-width: 620px;
    margin: 0 auto 16px;
    background: #fff;
    border-radius: var(--gm-btn-radius);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    overflow: hidden;
}
.gm-hero-search input {
    flex: 1;
    min-width: 0;
    height: 50px;
    border: none;
    outline: none;
    padding: 0 22px;
    font-size: 15px;
    color: var(--gm-text);
    background: transparent;
}
.gm-hero-search button {
    flex: 0 0 auto;
    width: 58px;
    border: none;
    background: transparent;
    color: #8a97a8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .2s;
}
.gm-hero-search button:hover { color: var(--gm-primary); }
/* 【2026-10-09 用户要求】「搜索热词，不需要按钮样式，只要词展示出来即可」
   → 去掉原来的胶囊底色（rgba(255,255,255,.16)）+ 圆角，
     改成纯文字：白字 80% 透明，词之间用细间距 + 悬停变白。
     仍保留 a 标签（要能点进搜索结果），只是不再像按钮。 */
.gm-hero-hot {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    line-height: 2.2;
}
.gm-hero-hot .lbl { opacity: .65; margin-right: 2px; }
.gm-hero-hot a {
    display: inline-block;
    margin: 0 9px;
    padding: 0;
    background: none;                /* 不要胶囊底色 */
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    border-bottom: 1px solid transparent;/* 悬停时下划线替代底色 */
    transition: color .2s, border-color .2s;
}
.gm-hero-hot a:hover {
    background: none;                /* 悬停也不加底色 */
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .7);
}

/* ==========================================================
   2. 卡片专题（彩色格子，参考图 2 的 8 宫格）
   ========================================================== */
.gm-topics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}
.gm-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 18px 20px;
    border-radius: var(--gm-radius);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
    background: var(--tc, #5a7cfa);
}
.gm-topic::after {
    /* 右下角斜向高光，纯装饰 */
    content: '';
    position: absolute;
    right: -30px;
    bottom: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
}
.gm-topic:hover {
    transform: translateY(-3px);
    box-shadow: var(--gm-shadow-md);
    color: #fff;
}
.gm-topic-t {
    position: relative;
    z-index: 1;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}
.gm-topic-s {
    position: relative;
    z-index: 1;
    font-size: 12.5px;
    opacity: .88;
    margin-top: 5px;
    line-height: 1.6;
}
.gm-topic-n {
    position: absolute;
    right: 12px;
    top: 10px;
    z-index: 1;
    font-size: 11px;
    background: rgba(0, 0, 0, .18);
    padding: 2px 8px;
    border-radius: var(--gm-btn-radius);
}
/* 8 色轮换（后台没配 color 时的兜底）*/
.gm-topic-0 { background: #5B6CFF; }
.gm-topic-1 { background: #00B8A9; }
.gm-topic-2 { background: #FF7A45; }
.gm-topic-3 { background: #F5222D; }
.gm-topic-4 { background: #7B61FF; }
.gm-topic-5 { background: #F759AB; }
.gm-topic-6 { background: #13C2C2; }
.gm-topic-7 { background: #2F86F6; }

/* ==========================================================
   3. 移动端顶部条 + 抽屉
   ========================================================== */
.gm-mtopbar {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 14px;
    background: #fff;
    box-shadow: var(--gm-shadow-xs);
    position: sticky;
    top: 0;
    z-index: 100;
}
.gm-mlogo {
    font-size: 19px;
    font-weight: 800;
    color: var(--gm-text);
    text-decoration: none;
}
.gm-mlogo em { color: var(--gm-primary); font-style: normal; }
.gm-mtop-right { display: flex; align-items: center; gap: 10px; }
.gm-micon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef2f7;
    color: var(--gm-text);
    text-decoration: none;
    transition: background .2s, color .2s;
}
.gm-micon:hover { background: var(--gm-primary); color: #fff; }

/* 抽屉 */
.gm-drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: all .28s;
    z-index: 1000;
}
.gm-drawer-mask.on { opacity: 1; visibility: visible; }

.gm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px;
    max-width: 78vw;
    background: #fff;
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
}
.gm-drawer.on { transform: translateX(0); }
.gm-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gm-border-light);
    font-size: 16px;
    font-weight: 700;
    color: var(--gm-text);
}
.gm-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #f2f5f8;
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
    color: var(--gm-text-muted);
    cursor: pointer;
}
.gm-drawer-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    flex: 1;
}
.gm-drawer-list a {
    display: block;
    padding: 13px 20px;
    font-size: 15px;
    color: var(--gm-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all .2s;
}
.gm-drawer-list a:hover,
.gm-drawer-list a.on {
    background: rgba(253, 115, 1, .07);
    color: var(--gm-primary);
    border-left-color: var(--gm-primary);
}
.gm-drawer-sub {
    padding: 14px 20px 6px;
    font-size: 12px;
    color: var(--gm-text-light);
    letter-spacing: 1px;
}

/* ==========================================================
   4. 移动端底部导航（对齐原站 .m-menubar）
   ========================================================== */
.gm-menubar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    padding: 4px 0 calc(4px + constant(safe-area-inset-bottom));
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
}
.gm-menubar.scrolled { box-shadow: 0 -4px 20px rgba(0, 0, 0, .12); }
.gm-menubar a {
    display: block;
    flex: 1;
    text-align: center;
    font-size: 11.5px;
    color: var(--gm-text-muted);
    text-decoration: none;
    padding: 3px 2px;
    transition: color .2s;
}
.gm-menubar a.on { color: var(--gm-primary); }
.gm-menubar a .ic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    margin-bottom: 2px;
    font-style: normal;
}
.gm-menubar a .ic svg { display: block; }
.gm-menubar a .tx { display: block; }
.gm-menubar a:active { opacity: .6; }

/* ==========================================================
   5. 响应式（统一 992 / 768 两档）
   ========================================================== */

/* --- 平板以下：隐藏 PC 头部，显示移动顶部条 --- */
@media (max-width: 992px) {
    .gm-header { display: none; }
    .gm-mtopbar { display: flex; }
    /* 给底部导航留空间，避免遮挡内容 */
    body { padding-bottom: 62px; }
    .gm-menubar { display: flex; }

    .gm-detail { grid-template-columns: 1fr; }
    .gm-grid, .gm-grid.cols4 { grid-template-columns: repeat(3, 1fr); }
    .gm-topics { grid-template-columns: repeat(4, 1fr); }
    .gm-hero { padding: 48px 18px 42px; }
    .gm-hero-title { font-size: 25px; }
    .gm-hero-desc { font-size: 13px; }

    /* ⚠️ 2026-10-12：详情页在 **992px 以下就已经塌成一列**（这行上面的
       grid-template-columns:1fr 是原有行为，不是新加的）。
       但模块顺序规则原先只挂在 900px 断点上 →
       901~992px 这一段「布局是单列、顺序却是 PC 的」，行为不一致。
       用户定义的移动端顺序必须覆盖**所有单列区间**，所以这里补一份同样的规则。
       两处规则内容一致，改动时**必须同步**（下面的注释指向它）。 */
    .gm-side { display: contents; }
    .gm-main                    { order: 1; }
    .gm-d-side-block.gm-d-down  { order: 0; }  /* 下载地址 */
    .gm-d-side-block.gm-d-guide { order: 2; }  /* 使用须知 */
    .gm-d-side-block.gm-d-hot   { order: 3; }  /* 热门推荐 */

    /* 摊平后右栏块会同时吃 grid gap + 自身 margin-bottom（40px vs 主栏 24px），
       归零 margin，间距只由 grid gap 一套控制。详见 900px 断点处的说明。 */
    .gm-detail .gm-d-side-block,
    .gm-detail .gm-side > div { margin-bottom: 0; }
}

/* --- 手机 --- */
@media (max-width: 768px) {
    .gm-container { padding: 0 12px; }
    /* 【2026-10-11 修】原来这里写的是 `padding: 16px 0`（左右内边距归零），
       用户反馈「正文紧贴白色卡片边缘，没有间距」。
       ⚠️ 这个块在文件里比 640px 那个块（第 ~716 行）**更靠后**，
          CSS 同优先级下后写的胜出，所以 16px 0 会覆盖掉 640px 里的 `18px 16px`，
          手机上最终生效的就是「左右无内边距」这一版。
       现在改成左右各留 14px，文字不再贴边。 */
    /* 2026-10-11：改成四边统一 16px（原来 16px 14px，上 16 左 14 不一致）。
       与桌面端「取消首块标题上边距」的修法配套，
       首块标题距上=16 / 距左=16，两边对齐。 */
    .gm-main { padding: 16px; }

    /* 卡片 2 列 */
    .gm-grid, .gm-grid.cols4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }

    /* 专题 2 列 */
    .gm-topics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gm-topic { min-height: 88px; padding: 14px 15px; }
    .gm-topic-t { font-size: 15.5px; }
    .gm-topic-s { font-size: 11.5px; }

    /* 搜索区（2026-10-09 改造：移动端保持通栏，但关掉 fixed） */
    .gm-hero {
        padding: 40px 14px 36px;
        min-height: 190px;
        /* background-attachment:fixed 在移动端浏览器上性能差 + iOS 兼容问题，
           直接退化成 scroll，视觉上几乎看不出差别。 */
        background-attachment: scroll;
    }
    .gm-hero-title { font-size: 21px; margin-bottom: 10px; }
    .gm-hero-desc { font-size: 12.5px; margin-bottom: 20px; }
    .gm-hero-search input { height: 44px; padding: 0 16px; font-size: 14px; }
    .gm-hero-search button { width: 50px; }
    .gm-hero-hot { font-size: 12px; }
    .gm-hero-hot a { margin: 0 3px; padding: 2px 9px; }

    /* 详情页 */
    /* ⚠️ 原来这里有一行 .gm-side { display: none; }，
       把整个侧栏在手机上藏掉。2026-10-08 下载地址挪进右栏之后不能这么干了 ——
       藏掉侧栏等于手机上完全没法下载，而下载是这个站的核心功能。
       现在改成：侧栏不隐藏，用 display:contents 摊平后按用户定义的顺序排。

       ⛔ 2026-10-12 清掉这里两行**过时**规则（会覆盖新顺序规则，必须删）：
          · `.gm-d-down { order: -1; }`  —— 旧排序，现由 992px 断点的
              order 组统一控制（下载=0、主栏=1、须知=2、热门=3）。
          · `.gm-d-side-block { margin-bottom: 12px; }` —— 摊平后与 grid gap
              叠加会导致间距不均，已统一归零，间距只由 gap 控制。 */
    /* 【2026-10-09 字号收敛】原来手机端正文反而比桌面大（15px vs 15px），
       而且窄屏上同样的字号视觉占比更大 → 手机降到 13px。
       单页（page/index.html 的公告类长文本）内容更长更密，
       只降一档到 14px，用下面的 .gm-d-article-wrap 限定选择器区分。 */
    .gm-article { font-size: 14px; }
    /* 【2026-10-09 小标题统一】小标题桌面手机都是 16px 加粗，
       这里不再单独降级 —— 否则手机端又变成 18/15px 的老层级。 */

    /* 表格横向滚动，别撑破布局 */
    .gm-article table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

    /* 资源下载条目：竖排，按钮占满宽度更好点 */
    .gm-source-item { flex-direction: column; align-items: stretch; gap: 9px; }
    .gm-source-item .gm-btn { width: 100%; height: 42px; }

    /* 按钮加大到易点区域 */
    .gm-btn { min-height: 40px; }
}

/* --- 超小屏 --- */
@media (max-width: 380px) {
    .gm-grid, .gm-grid.cols4 { gap: 10px; }
    .gm-topic-t { font-size: 14.5px; }
    .gm-topic-s { display: none; }
}

/* ==========================================================
   专题页（/topic/{id}）与 单页（/page/{slug}）
   ========================================================== */

/* ---------- 专题公告区 ---------- */
.tp-notice {
    position: relative;
    background-color: #2b3a55;
    background-size: cover;
    background-position: center;
    border-radius: var(--gm-radius-lg);
    padding: 44px 24px 36px;
    margin: 20px 0;
    overflow: hidden;
    box-shadow: var(--gm-shadow-md);
}
.tp-notice-mask {
    position: absolute;
    inset: 0;
    background: rgba(18, 26, 40, .58);
}
.tp-notice-inner {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin: 0 auto;
    color: #fff;
}
.tp-notice-title {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
    line-height: 1.4;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.tp-notice-sub {
    font-size: 14px;
    opacity: .9;
    margin: 0 0 16px;
    line-height: 1.8;
}
/* 公告正文里的图片、链接在深色背景上要能看清 */
.tp-notice-body {
    font-size: 14px;
    line-height: 1.95;
    opacity: .95;
}
.tp-notice-body p { margin: 0 0 10px; }
.tp-notice-body img { max-width: 100%; border-radius: var(--gm-radius); }
.tp-notice-body a { color: #ffd591; text-decoration: underline; }
.tp-notice-body h1, .tp-notice-body h2, .tp-notice-body h3 { color: #fff; margin: 14px 0 8px; }

.tp-notice-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px;
}
.tp-back { color: #fff; text-decoration: none; opacity: .9; }
.tp-back:hover { opacity: 1; text-decoration: underline; }
.tp-count { opacity: .8; }

/* ---------- 分页 ---------- */
.tp-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0 8px;
}
.tp-pg {
    display: inline-block;
    padding: 9px 20px;
    background: #fff;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-btn-radius);
    font-size: 14px;
    color: var(--gm-text);
    text-decoration: none;
    transition: all .2s;
}
.tp-pg:hover { background: var(--gm-primary); color: #fff; border-color: var(--gm-primary); }
.tp-pg-info { font-size: 13px; color: var(--gm-text-muted); }

/* ---------- 空状态 ---------- */
.tp-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
}
.tp-empty p { margin: 0 0 8px; font-size: 15px; color: var(--gm-text); }
.tp-empty .tip { font-size: 13px; color: var(--gm-text-muted); margin-bottom: 20px; }

/* ---------- 单页 ---------- */
.pg-wrap {
    background: #fff;
    border-radius: var(--gm-radius);
    padding: 26px 30px 30px;
    margin: 20px 0 40px;
    box-shadow: var(--gm-shadow-sm);
}
.pg-cover { margin: -6px 0 18px; }
.pg-cover img { width: 100%; border-radius: var(--gm-radius); display: block; }
.pg-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 4px solid var(--gm-bg);
    color: var(--gm-text);
    line-height: 1.4;
}
.pg-content { min-height: 200px; }
.pg-foot {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--gm-border-light);
}

/* ---------- 单页列表 ---------- */
.pg-list {
    background: #fff;
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-sm);
    overflow: hidden;
}
.pg-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--gm-border-light);
    text-decoration: none;
    transition: background .2s;
}
.pg-list-item:last-child { border-bottom: none; }
.pg-list-item:hover { background: rgba(253, 115, 1, .05); }
.pg-list-item .t { font-size: 15px; color: var(--gm-text); font-weight: 500; }
.pg-list-item .d { font-size: 12.5px; color: var(--gm-text-light); font-family: var(--gm-mono); }

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    .tp-notice { padding: 30px 16px 24px; border-radius: var(--gm-radius); }
    .tp-notice-title { font-size: 20px; }
    .tp-notice-sub, .tp-notice-body { font-size: 13px; }

    .pg-wrap { padding: 18px 16px 22px; }
    .pg-title { font-size: 19px; margin-bottom: 16px; }
    .pg-foot { flex-direction: column; }
    .pg-foot .gm-btn { width: 100%; justify-content: center; text-align: center; }
}

/* ==========================================================
   [2026-10-06] 首页配置驱动的样式
   ------------------------------------------------------------------
   后台「样式管理」改配置后要生效，靠的就是下面这几块：
     · banner      左侧大图 + 右侧上下 2 张小图
     · 模块区      背景图 + 每行 4/5 个分类卡片
     · 顶部下拉    「全部游戏」分类下拉 + 超出宽度的「更多」
     · gm-cols4/5  列表每行几个（对应后台 page_list_cols）
   ========================================================== */

/* ---------- banner ---------- */
/* ------------------------------------------------------------
   banner 区（2026-10-10 重做）
   ------------------------------------------------------------
   用户要求：
     「图片没有撑满，要撑满，高度和宽度都要计算，
       最好是左侧图和右侧2个小图宽高比一样。」
     「左侧大图和右侧2个位置的小图，都支持多个图片和多个地址。」

   ⛔ 原来比例不对（这是「没撑满」的真正原因）：
     左侧大图 aspect-ratio: 21/7  = 3.00
     右侧小图 aspect-ratio: 16/5  = 3.20 ← 两边比例不一致
     → 容器比例和图片比例不匹配，object-fit:cover 就得裁掉一部分，
       视觉上就是「图没撑满 / 怪怪的」。
   → 现在三处统一用 --gm-banner-ratio（默认 16:9），
     比例在 CSS 变量里一处可改，改完全站生效。

   ⛔ 宽高怎么算（用户明确问了「高度和宽度都要计算」）：
     左侧宽度 = 容器总宽 - 右侧栏宽(320) - 间距(14)
     → 左侧高度 = 左侧宽度 ÷ (16/9)
     右侧两个小图：各高度 = (左侧高度 - 间距) ÷ 2
     → 用 grid 的 aspect-ratio 让浏览器自动算，不用写死像素。
       这样改容器宽度时，三处高度自动同步，不会错位。
   ------------------------------------------------------------ */
.gm-banner {
    --gm-banner-side: 320px;          /* 右侧栏宽度 */
    --gm-banner-gap: 14px;
    --gm-banner-ratio: 3 / 1;         /* ⭐ 三个位置统一比例，改这里就行 */
    /* 为什么是 3:1：用户给的参考图里左侧大图是「扁横图」（约 3:1），
       原来用 16:9 会让大图高度到 600px，占掉半屏，比例太高了。
       改成 3:1 后：1066px 宽 → 355px 高，跟下面的模块区比例协调。
       高度是浏览器按宽度自动算的，不用手写像素。 */
    display: grid;
    grid-template-columns: 1fr var(--gm-banner-side);
    gap: var(--gm-banner-gap);
    margin: 20px 0 8px;
}
/* 轮播容器 */
.gm-bs {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--gm-radius);
    background: #e9eef2;
    box-shadow: var(--gm-shadow-sm);
}
/* 左侧大图 */
.gm-banner-main {
    aspect-ratio: var(--gm-banner-ratio);
    width: 100%;
}
/* 右侧两小图：整列等高，两张图各占一半 */
.gm-banner-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: var(--gm-banner-gap);
    min-width: 0;
}
/* ⭐ 小图比例 = 大图比例 × (侧栏宽 / 大图宽) 的近似 —— 这里直接用固定比例
   320px侧栏、两行均分、gap 14px：
   每张小图 ≈ (320 x 175)，比例 ≈ 1.83。
   为了跟左侧严格一致，用 grid 的「高度由大图决定」来对齐：
   .gm-banner-side 的高度 = .gm-banner-main 的高度（grid 默认 stretch），
   两行 1fr 均分 → 小图高度 = (大图高 - gap) / 2。 */
.gm-banner-sub {
    width: 100%;
    height: 100%;
    min-height: 0;
}
/* 轮播项：全部 absolute 叠在一起，靠 .on 控制显示 */
.gm-bs-item {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease;
}
.gm-bs-item.on {
    opacity: 1;
    visibility: visible;
}
.gm-banner-main img,
.gm-banner-sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* ⭐ 撑满容器，保持比例，不留白 */
    display: block;
    transition: transform .35s;
}
.gm-banner-main:hover img,
.gm-banner-sub:hover img { transform: scale(1.04); }
/* 圆点指示器 */
.gm-bs-dots {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: flex;
    gap: 5px;
}
.gm-bs-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.gm-bs-dot.on {
    background: #fff;
    transform: scale(1.25);
}
@media (max-width: 992px) {
    .gm-banner { grid-template-columns: 1fr; }
    .gm-banner-main { aspect-ratio: 16 / 7; }
    .gm-banner-side { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
    .gm-banner-sub { aspect-ratio: 16 / 7; }
}

/* ---------- 分类模块区 ---------- */
/* ------------------------------------------------------------
   模块区容器（2026-10-10 二次调整）
   ------------------------------------------------------------
   用户反馈：「不要白色的这个底啊，就是五个方块，
             跟上面的图片左右都能对齐，就是撑满1400」

   ⛔ 这里的 padding / 白底 / 阴影 / 圆角**全部去掉**了，别再加回来：
      原来 `padding: 20px` + 白底卡片，把里面的 5 个方块往里挤了 20px，
      结果模块区比上面的 banner 窄一圈、左右各差 20px，怎么都对不齐。
   现在它只是**纯布局容器**（不画任何东西）：
   方块自己就是卡片 —— 自己有色块色、自己的圆角、自己的图。
   （整区背景图那个旧配置 home_module_bg 已废弃，用户要的是"每个块自己的图"）
   ------------------------------------------------------------ */
.gm-modules {
    position: relative;
    margin: 20px 0 8px;
}
/* 列数由后台「模块每行数量」决定（1~6），
   ⛔ 用 CSS 变量而不是写死 N 条 .gm-mod-N 规则：
      后台改了数字前端立刻跟着变，不用为每个数字加一条 CSS。
   变量从模板的 style 里来：style="--gm-mod-cols:{后台数字}" */
.gm-modules-inner {
    display: grid;
    grid-template-columns: repeat(var(--gm-mod-cols, 5), minmax(0, 1fr));
    gap: 12px;
    position: relative;
    z-index: 1;
}
/* ------------------------------------------------------------
   模块卡片（2026-10-10 重做）
   ------------------------------------------------------------
   用户要求：「设计过的半透明色块+ 配图区域（参考对象只有色块，
             图片是我额外的要求）。半透明色块的颜色和透明度
             可每个模块单独配置。图片可配置，跳转可配置。」

   ⛔ 原来这里是写死的 `background: rgba(255,255,255,.92)` 白底
      + `.gm-mod-N` 系列 CSS 类定颜色（gm-mod-1紫、gm-mod-2蓝…），
      后台根本改不了。
   → 现在背景色和透明度由**内联 style** 给出（后端按后台配置合成
     rgba），CSS 只负责排版和「有配图」时的蒙版效果。
   ------------------------------------------------------------ */
.gm-module {
    position: relative;
    display: flex;
    flex-direction: column;
    /* 主标题 + 副标题竖排，整体在块里垂直居中
       （块高度不一时文字都居中，视觉更整齐） */
    justify-content: center;
    min-height: 96px;   /* ⛔ 没有这个，只有一行标题的块会塌成一条细带 */
    gap: 6px;
    /* ⛔ 不要写 background —— 全部由内联 style 给，而且是**两层**：
         第 1 层 linear-gradient(半透明色块)   ← 在上
         第 2 层 url(配图)                     ← 在下
       ⛔ 顺序不能反：CSS 多背景里**先写的在上层**。
       写死 background 会覆盖内联样式，所以这里只给尺寸和定位。 */
    background-size: cover;
    background-position: center;
    /* 白字压在图上要能看清（色块半透明，图会透出来） */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    padding: 14px;
    border-radius: var(--gm-radius);
    overflow: hidden;      /* 让配图不溢出圆角 */
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
    /* 文字在配图上要清晰：整体压一层深色蒙版
       （色块本身的 rgba 已经半透明，这里只补一点暗角） */
    color: #fff;
}
/* ⛔ 2026-10-10 删掉了配图上那层 ::after 暗角蒙版（原来 rgba(0,0,0,.18→.38)）：
   用户要的是「半透明色块 + 图片**叠加**」，再压一层黑蒙版会把图压得几乎看不见，
   叠加效果就没了。文字可读性交给两样东西：色块自己的透明度（后台可调）
   + .gm-module 上的 text-shadow。
   ⚠️ 别再加回 ::after —— .gm-module 只有这一个伪元素位置，
      以后要用之前先看这里有没有占。 */
.gm-module-t { font-size: 20px; font-weight: 600; color: #fff; position: relative; z-index: 1; }
.gm-module:hover { box-shadow: var(--gm-shadow-md); transform: translateY(-2px); }
/* 副标题（主标题下面那行小字，后台非必填） */
.gm-module-s {
    position: relative;
    z-index: 1;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}
/* 窄屏强制降列（覆盖后台设的数字，保证小屏还能看） */
@media (max-width: 992px) {
    .gm-modules-inner { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    /* ⛔ 这条 padding 一起删了（同上：容器不该有内边距） */
    .gm-modules-inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 列表每行 4/5 个（后台 page_list_cols）---------- */
.gm-grid.gm-cols4 { grid-template-columns: repeat(4, 1fr); }
.gm-grid.gm-cols5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) {
    .gm-grid.gm-cols5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 992px) {
    .gm-grid.gm-cols4,
    .gm-grid.gm-cols5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .gm-grid.gm-cols4,
    .gm-grid.gm-cols5 { grid-template-columns: repeat(2, 1fr); }
}

/* 热门里「按搜索量」时展示的关键词卡（无封面） */
.gm-card .thumb-word {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gm-primary), #ffa54d);
}
.gm-card .thumb-word .w {
    padding: 0 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
}

/* ---------- 顶部下拉：全部游戏分类 + 更多 ---------- */
.gm-menu > li { position: relative; }
/* 【2026-10-09 用户要求】「顶部导航的全部资源，取消右侧小三角符号」。
   下拉面板本身留着（鼠标移到就展开），只是不再显示那个 ▾。
   ⚠️ 别误删 .gm-topic::after（第 990 行附近），那是专题卡片的另一个装饰。 */
.gm-menu li.has-drop > a::after {
    content: none;
}
.gm-drop {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    min-width: 180px;
    padding: 8px;
    background: #fff;
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s;
}
.gm-menu li.has-drop:hover > .gm-drop,
.gm-more:hover > .gm-drop { opacity: 1; visibility: visible; transform: translateY(0); }

.gm-drop-cat { min-width: 640px; padding: 14px; }
.gm-drop-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px 18px;
}
.gm-drop-col { display: flex; flex-direction: column; }
.gm-drop-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gm-text);
    text-decoration: none;
}
.gm-drop-h:hover { background: rgba(253, 115, 1, .08); color: var(--gm-primary); }
.gm-drop-h em { font-style: normal; font-size: 11px; color: var(--gm-text-light); }
.gm-drop-i {
    padding: 4px 8px 4px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gm-text-muted);
    text-decoration: none;
}
.gm-drop-i:hover { background: rgba(253, 115, 1, .06); color: var(--gm-primary); }

/* 「更多」下拉：JS 把放不下的导航项搬进来 */
.gm-more { position: relative; }
.gm-more > a {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 12px;
    height: 34px;
    line-height: 34px;
    border-radius: var(--gm-btn-radius);
    font-size: 14px;
    color: var(--gm-text);
    text-decoration: none;
    cursor: pointer;
}
.gm-more > a:hover { background: rgba(253, 115, 1, .08); color: var(--gm-primary); }
.gm-drop-more {
    right: 0;
    left: auto;
    min-width: 150px;
}
.gm-drop-more a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--gm-text);
    text-decoration: none;
    white-space: nowrap;
}
.gm-drop-more a:hover { background: rgba(253, 115, 1, .08); color: var(--gm-primary); }

/* ---------- 抽屉里的二级分类 ---------- */
.gm-drawer-list .gm-drawer-sub-i {
    padding-left: 26px;
    font-size: 13px;
    color: var(--gm-text-muted);
}
@media (max-width: 992px) {
    .gm-drop-cat { min-width: 0; width: 100%; }
    .gm-drop-cols { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   [2026-10-06] 特效美化 / 隐私权限 / 公告 的前台样式
   ------------------------------------------------------------------
   这些区块的显示与内容全部由后台配置驱动（FrontRuntime.php），
   后台关闭时对应的 HTML 根本不输出，所以这里不用写「隐藏」逻辑。
   ========================================================== */

/* ---------- 底部波浪（配色/速度由后端生成，这里只放结构样式）---------- */
@keyframes gmWaveMove {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---------- 滚动公告条 ---------- */
.gm-notice-bar {
    position: relative;
    background: #fff7e6;
    border-bottom: 1px solid #ffe0a3;
    overflow: hidden;
}
.gm-notice-bar.hide { opacity: 0; height: 0; transition: all .26s; }
.gm-notice-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px;
}
.gm-notice-lbl {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 3px;
    background: #fa8c16;
    color: #fff;
    font-size: 12px;
    line-height: 1.6;
}
.gm-notice-view {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.gm-notice-text {
    display: block;
    color: #ad4e00;
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gm-notice-text:hover { text-decoration: underline; }
.gm-notice-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: #ad4e00;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}
.gm-notice-close:hover { background: rgba(0, 0, 0, .06); }

/* ---------- 弹窗公告 ---------- */
.gm-popup-notice { position: fixed; inset: 0; z-index: 9999; }
.gm-popup-notice[hidden] { display: none; }
.gm-popup-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .24s;
}
.gm-popup-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.94);
    width: min(560px, calc(100% - 32px));
    max-height: 86vh;
    overflow: auto;
    background: #fff;
    border-radius: var(--gm-radius);
    box-shadow: var(--gm-shadow-lg);
    opacity: 0;
    transition: opacity .24s, transform .24s;
}
.gm-popup-notice.on .gm-popup-mask { opacity: 1; }
.gm-popup-notice.on .gm-popup-box { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gm-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 0;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
}
.gm-popup-close:hover { background: rgba(0, 0, 0, .55); }
.gm-popup-img img { width: 100%; display: block; border-radius: var(--gm-radius) var(--gm-radius) 0 0; }
.gm-popup-title {
    margin: 0;
    padding: 18px 22px 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--gm-text);
}
.gm-popup-content {
    padding: 6px 22px 18px;
    font-size: 14px;
    line-height: 1.85;
    color: var(--gm-text-muted);
}
.gm-popup-content img { max-width: 100%; height: auto; }
.gm-popup-btn { display: inline-block; margin: 0 22px 22px; }

/* ---------- 鼠标跟随特效 ---------- */
.gm-mouse {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--mc, #3B5BDB);
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s, transform .1s;
    will-change: transform;
}
.gm-mouse.on { opacity: .55; }
.gm-mouse.down { opacity: .9; }
.gm-mouse-glow {
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    opacity: 0;
    filter: blur(6px);
}
.gm-mouse-glow.on { opacity: .35; }
@media (hover: none) { .gm-mouse { display: none; } }

/* ---------- 隐私权限提示条 ---------- */
#gmPvToast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    z-index: 9999;
    transform: translateX(-50%) translateY(10px);
    padding: 9px 20px;
    border-radius: var(--gm-btn-radius);
    background: rgba(40, 45, 52, .92);
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
#gmPvToast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 微信/QQ 内提示页 ---------- */
body.gm-ua-block {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.gm-ua-box {
    max-width: 420px;
    padding: 32px 26px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .08);
}
.gm-ua-box h1 {
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.7;
    color: #2c3440;
}
.gm-ua-btn {
    display: inline-block;
    padding: 9px 26px;
    border-radius: 999px;
    background: #3B5BDB;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
}

/* ==========================================================
   [2026-10-06] WordPress 短代码渲染出的视频块（.gm-vd）
   ------------------------------------------------------------------
   数据来自原站迁移过来的 [ri-video ...] 短代码，
   由 app/service/Shortcode.php 在输出前转成 <video>。
   主题色 --gm-vd-theme 来自短代码里的 theme 属性（已做白名单校验）。
   ========================================================== */
.gm-vd {
    margin: 18px 0;
    overflow: hidden;
    border-radius: 8px;
    background: #0B1220;
    line-height: 0;
}
.gm-vd video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
}

/* 浏览器放不了的格式（mkv 等）：给提示 + 直链，不做无谓转码 */
.gm-vd-nofile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    line-height: 1.6;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}
.gm-vd-tag {
    padding: 2px 8px;
    border-radius: 4px;
    background: #0EA5E9;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}
.gm-vd-tip { color: #475569; font-size: 13.5px; }
.gm-vd-tip a { color: #2563EB; }
.gm-vd-tip a:hover { text-decoration: underline; }

/* ==========================================================
   游戏详情页 · 2026-10-08 整体改造
   ------------------------------------------------------------
   需求原文对应的六块（左侧）+ 四块（右侧）：
     左  标题 / 元信息 / 视频封面 / 正文520px展开 / 截图两列灯箱 / 相关推荐
     右  下载地址 / 使用须知 / 常见问题 / 热门游戏

   统一前缀 .gm-d-（detail），与列表页 .gm-card、首页 .gm-grid 区分开，
   以后再改详情页不会误伤别的页面的同名类。

   ⚠️ 这块样式全部集中在文件末尾追加，不要插到上面详情页旧区块中间：
      旧 .gm-source / .gm-nav-list 那些是历史结构（下载区已挪进 .gm-d-down），
      插在中间容易出现「后写的被前面的覆盖」这种反直觉问题。
   ========================================================== */

/* ---------- 左：标题 ---------- */
.gm-d-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 12px;
    color: var(--gm-text);
    word-wrap: break-word;
}

/* ---------- 左：元信息一行小字 ----------
   分类 + 大小 + 更新时间 + 浏览数。
   移动端自动折行，每项 28px 高的浅灰标签，视觉上比一串纯文字更好扫读。 */
.gm-d-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--gm-text-muted);
}
.gm-d-meta-i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--gm-bg);
    border-radius: var(--gm-btn-radius);
    line-height: 1.7;
    white-space: nowrap;
}
/* 标签名（「分类」「大小」…）用更浅的颜色，与后面的值拉开层次 */
.gm-d-meta-i .ic {
    font-style: normal;
    color: var(--gm-text-light);
    font-size: 12px;
}
/* 分类是链接，单独给主色，和其它灰标签区分 */
.gm-d-cats a {
    color: var(--gm-primary);
    text-decoration: none;
}
.gm-d-cats a:hover { text-decoration: underline; }
.gm-d-cats a + a::before {
    content: '/';
    color: var(--gm-text-light);
    margin: 0 5px;
    font-weight: 400;
}
.gm-d-demo {
    background: rgba(253, 115, 1, .1);
    color: var(--gm-primary);
    text-decoration: none;
}
.gm-d-demo:hover { background: rgba(253, 115, 1, .18); }

/* ---------- 左：视频 / 封面 ----------
   需求：「有演示视频就用演示视频，没有视频用封面。视频和封面尺寸一致。」
   实现：两者共用这一个盒子，固定 16:9，
   video 用 object-fit: cover，图片也是 cover —— 换不换内容盒子高度都不变。 */
.gm-d-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 22px;
    border-radius: var(--gm-radius);
    overflow: hidden;
    background: #0F172A;
    box-shadow: var(--gm-shadow-sm);
}
.gm-d-hero img,
.gm-d-hero video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* B站等「播放页」走官方播放器 iframe（2026-10-09）。
   ⚠️ 必须显式给宽高：iframe 默认尺寸是 300x150，不写会缩成左上角一个小框。
   用 object-fit: cover 是为了和 img/video 的版面完全一致（换内容不跳版）。 */
.gm-d-hero iframe,
.gm-d-video-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
/* 没封面时的占位，深底浅字，不至于一个空洞 */
.gm-d-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, .45);
    font-size: 15px;
}

/* ---------- 左：正文 520px 限高 + 展开 ----------
   需求：「正文展示高度限制在520高度，超出部分需要展开才可以看到。」
   结构：
     .gm-d-article-wrap  外层，负责定位渐隐遮罩和按钮
       .gm-article        正文本体
       .gm-d-fade         底部渐隐（.is-folded 且未展开时才显示）
       .gm-d-more         展开按钮行（同上）
   展开 = 给 wrap 加 .is-open，此时 max-height 解除、遮罩与按钮行隐藏。
   ⚠️ .gm-article 是共享类（列表页/其它页也在用），限高绝不能写进它，
      必须写在 .gm-d-article-wrap > .gm-article 上，否则全站正文都被限高。 */
.gm-d-article-wrap { position: relative; margin: 0 0 8px; }
.gm-d-article-wrap > .gm-article {
    max-height: 520px;
    overflow: hidden;
    transition: max-height .3s ease;
}
.gm-d-article-wrap.is-open > .gm-article {
    max-height: none;
    overflow: visible;
}
/* 渐隐遮罩：底部 100px 从透明到背景色，暗示「下面还有」 */
/* 【2026-10-09 用户反馈「展开按钮发模糊」】根因就是这个遮罩：
   它是 absolute，和 .gm-d-more 在同一个定位上下文里，
   但 DOM 顺序在按钮**之前**，且两者都没 z-index →
   按层叠规则（同 z-index 按文档顺序）遮罩画在按钮**上面**，
   白色渐变盖住浅灰按钮，看起来就「发白模糊」。
   → 给按钮行 z-index:2、遮罩 z-index:1，明确压住层级。
   同时把渐变终点从 88% 降到 80%，别让遮罩最底那截太实。 */
.gm-d-fade {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 80%);
    pointer-events: none;
}
.gm-d-article-wrap.is-folded:not(.is-open) .gm-d-fade { display: block; }

/* ---------- 展开/收起按钮（2026-10-09 按用户截图重做）----------
   用户原话：「用这个图箭头位置的样式。就是浅灰色按钮正在右侧展示展开和收起。
              目前的太大了。而且颜色太突兀。」
   参考图特征：
     · 浅灰底（#f5f5f5 级别），不是橙边白底 —— 原来橙色边框太跳
     · 圆角胶囊
     · 文字「展开全文」+ 右侧一个【细的】向下箭头 ▾
     · 按钮在正文【右下角】浮动，不占一整行
   ⚠️ 箭头用两个 border 画的 chevron（旋转45° 的正方形边），
      不用字体符号 ▾ —— 不同系统字体里 ▾ 粗细差很多，实测当前就是太粗。
   ⚠️ 展开态按钮位置：原来用 sticky 钉在视口底部（bottom:124px），
      实际会让按钮在屏幕中间偏下飘着。改成跟在正文末尾，靠右对齐。 */
.gm-d-more {
    display: none;
    text-align: right;
    padding-top: 10px;
    /* ⛔ z-index 必须高于 .gm-d-fade 的 1，否则按钮被渐变遮罩盖住发白模糊
       （用户 2026-10-09 反馈「展开按钮发模糊」，根因就是这里） */
    position: relative;
    z-index: 2;
}
/* ⚠️ 展开后按钮行必须保留 —— 只是把文案换成「收起内容」。
   曾经写成 .is-folded:not(.is-open) 才显示，展开后整行消失，
   用户点开就再也合不回去（浏览器实测抓到的真实缺陷）。
   真正需要隐藏的只有「未超限时」这一种情况，由 JS 控制 display。 */
.gm-d-article-wrap.is-folded .gm-d-more { display: block; }
.gm-d-more button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 15px;
    background: #f2f3f5;
    color: #606266;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.gm-d-more button:hover {
    background: #e6e7eb;
    color: #303133;
}
/* 右侧细箭头：正方形去掉两边、旋转 45° = 一个 V 字形。
   1.5px 边框、圆角端点 —— 比字体符号 ▾ 细且各系统一致。 */
.gm-d-more button::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0 0 2px 0;
    transform: rotate(45deg);
    transition: transform .2s;
}
/* 展开后箭头朝上（同一个 V 字旋转 225°） */
.gm-d-article-wrap.is-open .gm-d-more button::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

/* ---------- 区块小标题（截图 / 相关推荐共用） ---------- */
.gm-d-h2 {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--gm-text);
    margin: 34px 0 16px;
    padding-left: 10px;
    border-left: 4px solid var(--gm-primary);
    line-height: 1.4;
}
.gm-d-h2-tip {
    font-size: 12px;
    font-weight: 400;
    color: var(--gm-text-light);
}

/* ---------- 左：截图，固定两列 ----------
   需求：「游戏截图固定分两列展示，点击可以全屏灯箱查看原图。」
   grid-template-columns: repeat(2, 1fr) 写死，不做响应式降列 ——
   截图内容本身是横版 16:9，降到一列会大到离谱，两列是固定需求。 */
.gm-d-shots { margin: 0 0 8px; }
.gm-d-shot-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.gm-d-shot {
    margin: 0;
    border-radius: var(--gm-radius);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--gm-bg);
    border: 1px solid var(--gm-border);
    transition: box-shadow .2s, transform .2s;
}
.gm-d-shot:hover {
    box-shadow: var(--gm-shadow-lg);
    transform: translateY(-2px);
}
.gm-d-shot img {
    display: block;
    width: 100%;
    /* 缩略图统一 16:9 裁切：不同游戏截图尺寸不一（1920x1080 和 600x338 混杂），
       不裁的话两列高度参差，很难看。灯箱里看的是原图，不受影响。 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ---------- 左：配置要求（2026-10-09 新增）----------
   需求：「在游戏截图下方增加一个【配置要求】，我有一个配置相关的字段，显示到这里。」
   数据源 qf_game.sys_req（JSON），控制器转成 $reqGroups：
     [ {name:'最低配置', items:[{k:'操作系统', v:'Windows 7'}, …]}, {name:'推荐配置', …} ]
   布局：两个分组并排（grid），只有一个分组时也占满宽度；
   组内用表格排「字段 / 值」，字段列定宽，长值自动换行不撑破。 */
.gm-d-req { margin: 0 0 8px; }
.gm-d-req-grid {
    display: grid;
    /* auto-fit + minmax：推荐配置缺失时，最低配置自动占满整行，
       不用为「只有一组」单独写一套样式。 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
}
.gm-d-req-card {
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    overflow: hidden;
    background: #fff;
}
/* 【2026-10-09 字号收敛】组名 15 → 14px */
.gm-d-req-name {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gm-text);
    background: var(--gm-bg);
    border-bottom: 1px solid var(--gm-border);
}
/* 【2026-10-09 字号收敛】配置表格 14 → 13px（字段值较长，缩小一档更紧凑） */
.gm-d-req-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.gm-d-req-table th,
.gm-d-req-table td {
    padding: 9px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--gm-border);
}
.gm-d-req-table tr:last-child th,
.gm-d-req-table tr:last-child td {
    border-bottom: 0;
}
.gm-d-req-table th {
    /* 字段名定宽，长字段名（如「需要64位处理器和操作系统」）也不挤掉值那一列 */
    width: 34%;
    min-width: 96px;
    font-weight: 600;
    color: var(--gm-text-light);
    background: transparent;
    white-space: normal;
}
.gm-d-req-table td {
    color: var(--gm-text);
    /* 显卡/内存这类值经常是长英文串，必须允许换行，
       否则会把整张表撑得比左栏还宽，出现横向滚动条。 */
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* ---------- 左：相关推荐，4 个 ---------- */
.gm-d-rel { margin: 0 0 8px; }
.gm-d-rel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.gm-d-rel-card {
    display: block;
    background: #fff;
    border: 1px solid var(--gm-border);
    border-radius: var(--gm-radius);
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s, transform .2s;
}
.gm-d-rel-card:hover {
    box-shadow: var(--gm-shadow-lg);
    transform: translateY(-2px);
}
.gm-d-rel-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--gm-bg);
    overflow: hidden;
}
.gm-d-rel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s;
}
.gm-d-rel-card:hover .gm-d-rel-thumb img { transform: scale(1.05); }
.gm-d-rel-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-style: normal;
    font-size: 13px;
    color: var(--gm-text-light);
}
.gm-d-rel-name {
    display: block;
    padding: 10px 12px 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gm-text);
    /* 标题最多两行，超出省略 —— 推荐位固定高度，卡片才不会一高一矮 */
    /* ⚠️⚠️ 2026-10-11 修「PC 端两行文字被截断」：
       这里原来写的是 height: 42px。42px 只是**两行文字本身**的高度
       （14px × 1.5 × 2），**不含 padding**。
       而 padding 是 10px 上 + 4px 下 = 14px，content-box 模型下二者不叠加计算，
       浏览器会把 42px 当成「内容+padding 的总预算」→ 第二行正好被裁掉 14px。
       实测：scrollHeight=56px / clientHeight=42px，确实溢出。
       修法：min-height 写**完整的两行盒高** 42+10+4=56px，
       内容一行时卡片矮一点、两行时不会被裁，四张卡片仍由 grid stretch 对齐。 */
    min-height: 56px;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.gm-d-rel-card:hover .gm-d-rel-name { color: var(--gm-primary); }
.gm-d-rel-views {
    display: block;
    padding: 0 12px 12px;
    font-size: 12px;
    color: var(--gm-text-light);
}

/* ==========================================================
   右栏
   ========================================================== */
/* 右栏各区块统一卡片样式。
   .gm-side > div 已有基础样式，这里只补前缀类里的差异化部分。 */
.gm-d-side-block { padding: 18px 18px !important; }

.gm-d-side-h {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gm-text);
    margin: 0 0 12px;
}
.gm-d-side-h::before {
    content: '';
    width: 4px;
    height: 15px;
    background: var(--gm-primary);
    border-radius: 2px;
}
.gm-d-side-tip {
    font-size: 12px;
    color: var(--gm-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
}

/* ---------- 右1：下载地址 ----------
   需求：「样式要改一下适应右侧宽度。」
   做法：一行一个地址（竖排），左「网盘标签 + 名称」右「提取码 + 转存按钮」。
   和旧版横排 .gm-source-item 的区别就是这里两段式分栏、按钮靠右。 */
.gm-d-down {
    background: #fff;
    border: 1px solid rgba(253, 115, 1, .25);
    border-radius: var(--gm-radius);
}
.gm-d-down-list { margin: 0 -4px; }
.gm-d-down-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px dashed var(--gm-border);
}
.gm-d-down-item:last-child { border-bottom: none; }
.gm-d-down-l {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;      /* 没有它，flex 子项不收缩，长地址名会把按钮顶出卡片 */
    flex: 1 1 auto;
}
.gm-d-down-name {
    font-size: 13.5px;
    color: var(--gm-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gm-d-down-r {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
/*⚠️ 这里原来有一条 .gm-d-down-item .pwd（提取码标签样式），
   2026-10-08 已随「不显示提取码」一并删除 ——
   qf_source.code 是原站分享的码，用户最终拿到的是我们转存后新建的分享，
   显示原站码只会误导（照着输进新链接必然失败），转存后的码已拼在弹窗的分享 URL 上。
   ⚠️ 别误删 361 行的 .gm-down-item .pwd：
      那是「原站地址」折叠块（gm-down-item，不带 d- 中缀）在用，还活着。 */
.gm-d-down-item .gm-btn {
    flex: 0 0 auto;
    height: 32px;
    font-size: 13px;
    padding: 0 16px;
}
.gm-d-down-item .gm-btn-primary {
    background: var(--gm-primary);
    color: #fff;
    border: none;
}
.gm-d-down-item .gm-btn-primary:hover { background: var(--gm-primary-hover); }
.gm-d-down-item .gm-btn-primary:disabled { opacity: .55; cursor: wait; }

/* 原站地址：details 折叠，默认收起。
   需求没提，但迁移数据里有，直接铺开会把右栏撑得很长；
   用 details 天然折叠，不需要 JS。 */
.gm-d-down-old { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--gm-border); }
.gm-d-down-old > summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--gm-text-muted);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.gm-d-down-old > summary::-webkit-details-marker { display: none; }
.gm-d-down-old > summary::before {
    content: '\25B8';
    display: inline-block;
    transition: transform .2s;
    color: var(--gm-text-light);
}
.gm-d-down-old[open] > summary::before { transform: rotate(90deg); }
.gm-d-down-old-box { padding-top: 10px; }
.gm-d-down-old .gm-down-item {
    display: inline-flex;
    margin: 0 6px 8px 0;
    padding: 6px 12px;
    font-size: 12.5px;
}
.gm-d-down-note {
    font-size: 12px;
    color: var(--gm-text-muted);
    line-height: 1.7;
    margin-top: 4px;
}

/* ---------- 左6：下载地址（左栏，截图下方） ----------
   需求原文（三轮对话逐步明确）：
     1「在左侧游戏截图下面，也放一个游戏下载模块，内容和右侧一致。」
     2「不要三列，要一列，样式和右侧的下载一样，只是更宽了。」

   ⚠️ 刻意**不新写一套列表样式**：结构、类名、数据全部复用右栏那套
      .gm-d-down-list / .gm-d-down-item / .gm-d-down-l / .gm-d-down-r，
      所以以后调下载条目外观只改上面那一份CSS，两边同步生效。

   与右栏的唯一差异：容器不加卡片底色
      （.gm-d-down 有白底+橙边，那是右栏卡片式设计；
        左栏本身就在 .gm-main 白底卡片里，再套一层卡会变成「卡中卡」）。
      其余全部同构—— 一行一个条目、下方一条虚线、按钮右对齐，
      只是容器宽（约 1000px vs 340px）。

   ⚠️ 下载条目**不显示提取码**（2026-10-08 用户明确要求撤掉）。
      qf_source.code 是原站分享的码，用户点下载拿到的是我们转存后新建的分享，
      两个码不是一回事，显示原站码只会误导用户。
      转存后的码由网盘建分享时生成，已拼在弹窗里那条分享 URL 上
      （迅雷是 xxx?pwd=abcd），用户从链接本身就拿到了。 */
.gm-d-down-main { margin: 0 0 8px; }
/* ⚠️ 这里原来有一条 .gm-d-down-tip（下载说明文案），
   2026-10-08 随那句「选择网盘转存到我们的网盘…」一起删掉了 ——
   那更像给站长看的技术解释，用户点下载拿到链接自然就懂。
   ⚠️ 别误删 2269 行的 .gm-d-side-tip：
      它还服务着右栏「该游戏暂未配置下载地址」这个空状态提示，活着。 */
/* 一列。刻意不写 display:grid —— 直接沿用右栏 .gm-d-down-list 的
   默认块级流，每条 .gm-d-down-item 自带 border-bottom 虚线分隔，
   和右栏视觉完全一致，只是容器宽（约 1000px vs 340px）。
   ⚠️ 第一版这里写的是 repeat(auto-fill, minmax(280px, 1fr)) 三列网格，
      截图给用户看后被否了：条目太窄、按钮离名称太远，扫读时视线要来回跳。 */
.gm-d-down-main .gm-d-down-list { margin: 0 -4px; }
/* 左栏宽，条目可以再舒展一点：字号跟左栏其它正文协调（13.5px -> 14px），
   内边距略加高让点击区域更宽松。 */
.gm-d-down-main .gm-d-down-name { font-size: 14px; }
.gm-d-down-main .gm-d-down-item { padding: 13px 4px; }

/* ---------- 右2/右3：使用须知 + 常见问题（后台富文本） ----------
   .gm-rt-view 是前台只读渲染版本。
   ⚠️ 这里必须自己兜住 p / h3 / ul / a 的样式：
      后台富文本编辑器存的是没有内联样式的裸 HTML，
      浏览器默认 h3 巨大、p 间距为 0，直接扔进去版面会散架。 */
.gm-d-rich {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--gm-text-muted);
    word-wrap: break-word;
}
.gm-d-rich p { margin: 0 0 10px; }
.gm-d-rich p:last-child { margin-bottom: 0; }
.gm-d-rich h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--gm-text);
    margin: 18px 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--gm-primary);
}
.gm-d-rich h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--gm-text);
    margin: 16px 0 8px;
    padding-left: 8px;
    border-left: 3px solid var(--gm-primary);
}
.gm-d-rich h4 { font-size: 13.5px; font-weight: 600; color: var(--gm-text); margin: 14px 0 6px; }
.gm-d-rich ul, .gm-d-rich ol { margin: 0 0 10px; padding-left: 20px; }
.gm-d-rich ul { list-style: disc; }
.gm-d-rich ol { list-style: decimal; }
.gm-d-rich li { margin-bottom: 5px; }
.gm-d-rich a { color: var(--gm-blue); text-decoration: none; word-break: break-all; }
.gm-d-rich a:hover { color: var(--gm-primary); text-decoration: underline; }
.gm-d-rich strong { color: var(--gm-text); font-weight: 600; }
.gm-d-rich blockquote {
    margin: 10px 0;
    padding: 8px 12px;
    background: var(--gm-bg);
    border-left: 3px solid var(--gm-border-light);
    border-radius: 0 4px 4px 0;
}
.gm-d-rich img { max-width: 100%; height: auto; border-radius: 4px; }
.gm-d-rich hr { border: none; border-top: 1px solid var(--gm-border); margin: 14px 0; }

/* ---------- 右4：热门游戏列表 ----------
   2026-10-08 改版：原来是「序号 + 标题 + 浏览数」的纯文字榜单，
   现在按用户给的参考图改成「左缩略图 + 右标题（最多两行）」。
   右栏只有 340px 宽，纯文字一列扫读效率很低，加封面后一眼能认出游戏。

   尺寸对齐参考图：缩略图 100×60（约 5:3），条目间距 10px。 */
.gm-d-hot-list { list-style: none; margin: 0; padding: 0; }
.gm-d-hot-list li {
    border-bottom: 1px dashed var(--gm-border);
}
.gm-d-hot-list li:last-child { border-bottom: none; }
.gm-d-hot-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: var(--gm-text);
    font-size: 13.5px;
    line-height: 1.5;
}
.gm-d-hot-thumb {
    flex: 0 0 auto;
    position: relative;
    width: 100px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--gm-bg);
}
.gm-d-hot-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    /* 迁移来的封面尺寸五花八门（横的竖的都有），
       统一裁成 5:3 才不会出现一行高一行低 */
    object-fit: cover;
    transition: transform .3s;
}
.gm-d-hot-list a:hover .gm-d-hot-thumb img { transform: scale(1.06); }
.gm-d-hot-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-style: normal;
    font-size: 12px;
    color: var(--gm-text-light);
}
/* 封面加载失败时 gamimg.js 会换上 .ph 占位块。
   .ph 的基础样式是 .gm-card .thumb .ph（作用域限定），
   这里不重复定义一遍的话，换上去的占位块没有任何样式 —— 会成一个裸 div。 */
.gm-d-hot-thumb .ph {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gm-text-light);
    font-size: 12px;
    background: var(--gm-bg);
}
.gm-d-hot-name {
    flex: 1 1 auto;
    min-width: 0;
    /* 标题最多两行，超出省略 —— 有图之后条目高度由图固定（60px），
       标题再长也不会把这一行撑高，列表整体是齐的 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gm-d-hot-list a:hover .gm-d-hot-name { color: var(--gm-primary); }

/* ==========================================================
   截图全屏灯箱
   ========================================================== */
.gm-lightbox {
    display: none;
    position: fixed;
    inset: 0;                  /* 全屏四边贴合，等价 top/right/bottom/left:0 */
    z-index: 9999;
}
.gm-lightbox.is-on { display: block; }
.gm-lightbox-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .92);
}
.gm-lightbox-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 92vw;
    /* 竖图（截图来源里 960x311 这种横图和竖图都混着）不能让它超出屏幕，
       max-height 必须给，不然竖图会把上下箭头顶出屏幕外 */
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    background: #0F172A;
    cursor: zoom-out;
}
.gm-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.gm-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
.gm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 66px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}
.gm-lightbox-nav:hover { background: rgba(255, 255, 255, .26); }
.gm-lightbox-prev { left: 20px; }
.gm-lightbox-next { right: 20px; }
.gm-lightbox-count {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 16px;
    border-radius: var(--gm-btn-radius);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
}

/* ==========================================================
   详情页响应式
   —— 放在文件最末尾，覆盖上面所有桌面规则
   ========================================================== */

/* 平板：相关推荐 4 列太挤，降成 2 列 */
@media (max-width: 1100px) {
    .gm-d-rel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 手机 */
@media (max-width: 768px) {
    .gm-d-title { font-size: 20px; }

    /* 截图仍保持两列 —— 需求明确说「固定分两列」，这里不改。
       靠缩略图的 aspect-ratio + object-fit 裁切保证不撑破版面。 */
    .gm-d-shot-grid { gap: 10px; }

    .gm-d-h2 { font-size: 16px; margin: 26px 0 12px; }

    /* 配置要求：手机上两组并排太挤，压成一列；
       表格内边距也收窄一档，长英文值（显卡型号）才有地方换行。 */
    .gm-d-req-grid { grid-template-columns: 1fr; gap: 10px; }
    .gm-d-req-table th,
    .gm-d-req-table td { padding: 8px 10px; }

    /* 【2026-10-09 字号收敛】正文桌面已降到 14px，移动端再降一档到 13px。
       原因：窄屏上同样的 14px 视觉占比更大。
       ⚠️ 必须限定在 .gm-d-article-wrap 内（详情页左栏），不能直接写 .gm-article
          —— 那个是共享类，单页 page/index.html 的正文也用它，
          公告类长文本用 13px 会偏小。 */
    .gm-d-article-wrap .gm-article { font-size: 13px; }
    .gm-d-article-wrap .gm-article table { font-size: 12px; }

    /* 正文字号缩小后 520px 能装下更多内容，但限高值是需求指定的，不改 */
    .gm-d-down-item { padding: 10px 0; }
    .gm-d-down-item .gm-btn { height: 38px; padding: 0 20px; }

    /* 左栏下载模块：条目不再有提取码，只剩「名称 + 下载按钮」两段，
       手机上窄栏也能一行放下。minmax(280px) 会自动降成一列，这里只补内边距。 */
    .gm-d-down-main .gm-d-down-item { padding: 12px 14px; }

    /* 【2026-10-09】展开按钮已改为「跟在正文末尾、右对齐」，
       不再用 sticky 钉在视口底部，这里连同移动端的偏移一起删掉。
       移动端只把渐隐遮罩压短一点，正文末尾空间有限。 */
    .gm-d-fade { height: 76px; }

    .gm-lightbox-nav { width: 38px; height: 54px; font-size: 28px; }
    .gm-lightbox-prev { left: 8px; }
    .gm-lightbox-next { right: 8px; }
    .gm-lightbox-close { top: 10px; right: 12px; width: 34px; height: 34px; font-size: 22px; }
}

/* 超小屏：相关推荐保持 2 列
   【2026-10-11 用户要求「底部相关推荐变成一行两个」】
   原来这里是 1fr（单列），用户手机（iPhone 12 宽 390px）正好落在这个区间，
   于是底部推荐变成一长条竖排，要滑很久。
   现在统一保持 2 列（跟上面 1100px 断点一致）；
   .gm-d-rel-name 改成 auto 高度，让标题能自然换行而不是被裁成一行。 */
@media (max-width: 400px) {
    .gm-d-rel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* ⚠️⚠️ 2026-10-11 修正（原写法 height:auto 让标题被裁）：
       移动端 2 列，每张卡的内容区只有 162px 宽，
       实测长标题要占 **3 行**（scrollHeight=73px，含 padding），
       但 -webkit-line-clamp 还是 2 → 实测 3/4 个标题被截断。
       现在移动端放开到 3 行，min-height 按 3 行 + padding 算：
         13px × 1.5 × 3 = 58.5px + padding 14px ≈ 73px
       用 min-height 是因为 grid stretch 本来就会把同一行的卡片拉齐，
       一行标题的卡会自动补足空白，不会一高一矮。 */
    .gm-d-rel-name {
        height: auto;
        min-height: 73px;
        box-sizing: border-box;
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================
   列表加载动画（2026-10-09 用户要求）
   ==========================================================
   需求：「列表加载的时候做一个动画掩护，切换分类时列表区马上显示转圈加载，
         出来数据再立刻切换成列表，看起来操作对应的交互是实时而且很快速。」

   实现：分类/排序/分页仍是普通 <a href>（地址会变、能前进后退、能分享），
   JS 在 click 时立刻给 .gm-listbox 加 .is-loading，遮罩盖住列表区，
   浏览器照常导航，新页面加载完遮罩自然消失。

   ⚠️ 遮罩用绝对定位而不是「display:none / block」切换，
      这样做切换时列表区高度不跳（用户要求的）。
      高度由 JS 写成 --gm-box-h（取列表区实际高度）。

   ⛔ 一个元素只能有一个 ::before/::after，全局共享——
      这两个伪元素名在别处重复用过就会互相覆盖（我踩过）。
   ========================================================== */
.gm-listbox {
    position: relative;/* 遮罩的定位基准 */
    min-height: 240px;/* 列表没内容时也不塌成一个点 */
}
/* 加载遮罩（默认隐藏，加 .is-loading 时显示为 flex 居中） */
.gm-listbox-mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* ⛔ 显式给高度，不用 min-height：
       固定高度才能让「转圈」稳定停在列表区中间，
       min-height 在内容少时会偏上。 */
    height: var(--gm-box-h, 400px);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(2px);
    -webkit-backdrop-filter: saturate(180%) blur(2px);
    z-index: 20;
    pointer-events: all;       /* 加载中挡住点击，防止连点翻页 */
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.gm-listbox.is-loading .gm-listbox-mask { display: flex; }
/* 转圈图标：纯 CSS 画，不用图片 */
.gm-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--gm-primary, #ff6a00);
    border-radius: 50%;
    animation: gm-spin .7s linear infinite;
    flex: 0 0 auto;
}
@keyframes gm-spin {
    to { transform: rotate(360deg); }
}
.gm-mask-txt {
    font-size: 14px;
    color: #8a8f99;
    letter-spacing: .5px;
}
/* 移动端：转圈略小一点 */
@media (max-width: 768px) {
    .gm-spinner { width: 22px; height: 22px; border-width: 2.5px; }
    .gm-mask-txt { font-size: 13px; }
}

/* ==========================================================
   M3U8 降级卡片上的「重试播放」按钮（2026-10-10）
   ==========================================================
   为什么加：Steam 的 CDN（video.cdn.queniuqe.com）偶发 manifestLoadError，
   用户看到「视频源不可用」但刷新一下又好了。
   与其让用户只能刷新整页，不如给个就地重试。
   ========================================================== */
.gm-vd-retry {
    display: inline-block;
    margin-left: 10px;
    padding: 2px 12px;
    font-size: 13px;
    line-height: 22px;
    color: #fff;
    background: var(--gm-primary, #2f54eb);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    vertical-align: middle;
    transition: opacity .15s;
}
.gm-vd-retry:hover { opacity: .82; }
.gm-vd-retry:active { opacity: .66; }

/* ==========================================================
   移动端顶部搜索抽屉（2026-10-11）
   点右上角搜索图标 → 从顶部滑出输入框。
   桌面端整体隐藏（display:none），行为仍是直接跳 /game/search。
   ========================================================== */
.gm-sdrawer, .gm-sdrawer-mask { display: none; }

@media (max-width: 768px) {
    .gm-sdrawer-mask {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .42);
        z-index: 1002;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }
    .gm-sdrawer-mask.on { opacity: 1; visibility: visible; }

    .gm-sdrawer {
        display: block;
        position: fixed;
        top: 0; left: 0; right: 0;
        background: #fff;
        z-index: 1003;
        transform: translateY(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    }
    .gm-sdrawer.on { transform: translateY(0); }

    .gm-sdrawer-form {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        /* 顶栏高度那段留白，避免贴着屏幕上沿 */
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
    }
    .gm-sdrawer-ico { color: var(--gm-text-muted); flex: none; }
    .gm-sdrawer-form input {
        flex: 1;
        min-width: 0;
        height: 40px;
        border: none;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: var(--gm-text);
    }
    .gm-sdrawer-close {
        flex: none;
        width: 32px; height: 32px;
        border: none; background: transparent;
        font-size: 24px; line-height: 1;
        color: var(--gm-text-muted);
        cursor: pointer;
        border-radius: 50%;
    }
    .gm-sdrawer-close:hover { background: var(--gm-bg); }
    /* 【2026-10-11】搜索按钮：主色实心按钮，紧挨关闭键右侧 */
    .gm-sdrawer-go {
        flex: none;
        height: 32px;
        padding: 0 16px;
        border: none;
        border-radius: 16px;
        background: var(--gm-primary);
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }
    .gm-sdrawer-go:hover { filter: brightness(1.08); }
    .gm-sdrawer-go:active { filter: brightness(.92); }
}