@charset "UTF-8";
/* ============================================================
   PC 三栏外壳（宽屏专用）
   左：作者中心（就地登录 + 我的版本 + 本机记录）/ 中：页面正文 + 页脚（唯一滚动区）/ 右：站内导航 + 相关站点 + 二维码
   只在 screen 且视口 >=1280px 时生效；更窄的视口（含全部移动端）
   保持「整页滚动 + 页脚自带导航」的原状，本文件不参与。
   ============================================================ */

/* —— 默认：侧栏不出现，正文照旧整页滚动 —— */
.rail{display:none}

/* 顶栏加高：1061px 以上（电脑端，导航标签还全展开的那些宽度）从 74px 提到 96px。
   手机端（≤1060 走抽屉菜单）不动，所以抽屉那条 `inset:calc(74px …)` 的偏移不用跟着改。 */
@media screen and (min-width:1061px){
  .topbar{height:96px;height:calc(96px + env(safe-area-inset-top))}
}

@media screen and (min-width:1280px){
  html,body{height:100%}
  /* 只有两行：顶栏横跨全页，下面整行分三栏 —— 页脚在中间那一栏里，跟着正文一起滚 */
  body{
    display:grid;
    grid-template-columns:clamp(248px,18vw,300px) minmax(0,1fr) clamp(216px,15vw,252px);
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  .site-head{grid-column:1/-1;grid-row:1}
  /* ── 中栏拆成两层（这次的做法，别再往回退）──────────────────────
     .stage        只是容器，自己不滚（overflow:hidden）
       > main      两行网格：第一行放不滚的页头带，第二行放滚动区
       .stage-head 页头带：切标签时它一动不动，高度由构造写死（见下）
       .stage-body 全站唯一的滚动区，正文和页脚都在里面
     两条横向位置的保险：① 滚动区用 overflow-y:scroll（轨道永远在，不会
     因为内容长短忽出忽没）+ scrollbar-gutter:stable；② 页头带同样预留
     一条 gutter ⇒ 带子里的 .wrap 和正文里的 .wrap 左边缘永远对齐，
     不会出现「上面不动、下面左右挪」。全篇没有任何手调像素。         */
  .stage{grid-column:2;grid-row:2;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);
    overflow:hidden}
  /* 两条 grid-row 写死：首页和 404 没有页头带，若让正文自动落进第一行（auto），
     它就变成「按内容撑高」，里面的 overflow-y:scroll 永远不触发 ⇒ 整页滚不动。 */
  .stage>main{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr)}
  .stage-head{grid-row:1;overflow:hidden;scrollbar-gutter:stable;position:relative;z-index:4;
    background:var(--paper);border-bottom:1px solid var(--line)}
  .stage-body{grid-row:2;min-height:0;overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable}
  /* 页头带瘦身（作者 2026-10-20）：大标题和说明**左右并列**，不再上下堆，
     带子高度只由「两行说明」决定 ⇒ 六个标签页高度一致且比原来矮约 47px。
     标题顶端与说明首行顶端对齐（他给的两个方案里选了靠上对齐，构造上更确定）。 */
  .stage-head .page-head{padding:14px 0 12px;border-bottom:0}
  .stage-head .page-head .wrap{display:flex;align-items:flex-start;gap:clamp(18px,3vw,36px)}
  .stage-head .page-head h1{flex:none;font-size:var(--fs-page);letter-spacing:.12em;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stage-head .page-head .lead{flex:1;min-width:0;margin-top:0;max-width:none;
    font-size:var(--fs-body);line-height:1.75;
    min-height:3.5em;max-height:3.5em;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* 次级页面的面包屑：只导航到所属标签（不写「首页」），
     左右留空与正文 .wrap 同宽，并在带子里上下居中。 */
  .stage-head>.crumb{margin:0;display:flex;align-items:center;min-height:46px;
    padding:0 clamp(16px,4vw,28px)}
  /* —— 分栏正文（.pane）：长文档页用，作者 2026-10-20 要求「目录不随正文滚」——
     中栏这一格自己不滚（overflow:hidden），滚动交给栏里的每一列，
     于是目录列 / API 左树列钉在原地，只有内容列在自己的框里滚。
     两行网格：第一行是正文那一格（minmax(0,1fr) 才压得住，否则滚不动），
     第二行是页脚（auto，钉在中栏最底下）。全用 clamp()/grid，没有手调像素。 */
  .stage-body.pane{overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto}
  .stage-body.pane>section{min-height:0;display:flex;flex-direction:column;
    padding-top:22px;padding-bottom:22px}
  .stage-body.pane>section>.wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  .stage-body.pane .main-side{flex:1;min-height:0;align-items:stretch;
    grid-template-columns:minmax(0,1fr) clamp(210px,19vw,320px);gap:clamp(20px,3vw,44px)}
  .stage-body.pane .main-side>article,
  .stage-body.pane .main-side>.side{min-height:0;overflow-y:scroll;scrollbar-gutter:stable}
  .stage-body.pane .main-side>.side{position:static;padding:20px 22px}
  /* 资讯页也进 pane（作者 2026-10-20 20:10 澄清原话：「推荐阅读」和「全部文章」分开，滚动只对「全部文章」生效）：
     pane 那套是「栏自己不滚，栏里每一列各滚各的」⇒ 推荐位列不出现在滚动流里，位置相对固定；
     .news-layout 得 stretch 才能把高度传给里面那一列，否则内层滚动永远不触发。 */
  .stage-body.pane .news-layout{flex:1;min-height:0;align-items:stretch;grid-template-rows:minmax(0,1fr);
    grid-template-columns:clamp(268px,23vw,340px) minmax(0,1fr);gap:clamp(20px,2.4vw,52px)}
  /* 推荐位那一列可能被推荐卡撑得比这块区域还高：让它自己在框里滚，位置仍然钉住不动。 */
  .stage-body.pane .news-aside{min-height:0;overflow-y:auto;scrollbar-gutter:stable;padding-right:6px}
  .stage-body.pane .news-main{min-height:0;overflow-y:scroll;scrollbar-gutter:stable}
  /* 标签页进 pane 时上下留距仍走全站节距令牌；22px 那一档只留给两本长文档手册。 */
  .stage-body.pane.pane-tab>section{padding-top:var(--gap-sec);padding-bottom:var(--gap-sec)}

  /* 左右两栏从顶栏下方一直铺到页面最底（盖住页脚那一条的高度），自己内部可滚 */
  .rail{grid-row:2;min-height:0;display:block;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;
    background:var(--paper-2);padding:22px 16px 26px;
    font-family:var(--sans);font-size:var(--fs-meta);line-height:1.7;color:var(--ink-2)}
  .rail-left{grid-column:1;border-right:1px solid var(--line)}
  .rail-right{grid-column:3;border-left:1px solid var(--line)}
  /* 右栏最后一块「找到组织」钉到栏底（作者 2026-10-20：放到最下方，但保持间距）：
     栏内改成 flex 列，最后一块 margin-top:auto 吃掉剩余空白；它与上一块的 24px 间距
     由上一块的 margin-bottom 保底 ⇒ 内容多到溢出时也不会贴脸。 */
  .rail-right{display:flex;flex-direction:column}
  .rail-right>.rail-sec:last-child{margin-top:auto;margin-bottom:0}

  /* 中栏比视口窄，正文里的粘性侧块改按中栏顶部对齐 */
  .side{top:18px}

  /* —— 页脚：搬进中间滚动列，样式全部沿用 main.css 原样，只把导航两栏收起来 —— */
  /* 站内导航 / 相关站点已经固定在右侧栏，页脚里再列一遍就是重复，隐藏掉 */
  .site-foot .foot-grid{grid-template-columns:1fr}
  .site-foot .foot-col{display:none}
}

/* 中栏较窄的那一档（视口 1280–1499）：把多栏网格降一档，避免卡片挤变形 */
@media screen and (min-width:1280px) and (max-width:1499px){
  .games,.games.two,.games.four{grid-template-columns:1fr 1fr}
  .news,.cols-2,.cols-3{grid-template-columns:1fr;gap:40px}
  .main-side{grid-template-columns:minmax(0,1fr);gap:38px}
  .side{position:static}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
}

/* ============ 侧栏内部（只在三栏下出现，样式与主题令牌同源） ============ */
.rail-h{display:flex;align-items:center;gap:8px;
  font-family:var(--kai);font-weight:400;font-size:var(--fs-note);letter-spacing:.14em;
  color:var(--ink);margin-bottom:11px}
.rail-h::before{content:"";width:3px;height:13px;background:var(--cinnabar);flex:none}
.rail-sec{margin-bottom:24px}
.rail-tip{font-size:var(--fs-meta);color:var(--ink-3);line-height:1.85}
.rail-tip a{color:var(--cinnabar);text-decoration:underline}

.rl{display:grid;gap:1px}
.rl a{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:7px 9px;border-radius:var(--radius);letter-spacing:.03em;color:var(--ink-2)}
.rl a>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl a:hover{background:var(--paper-card-hover);color:var(--cinnabar)}
.rl a.cur{background:var(--cinnabar-wash);color:var(--cinnabar);font-weight:700}
.rl .m{flex:none;font-size:var(--fs-meta);letter-spacing:.02em;color:var(--ink-4)}
/* 「我的版本」超过 5 条时的收尾一条：跳作者中心看全量 */
.rl a.more{justify-content:flex-start;color:var(--ink-3);font-size:var(--fs-meta)}
.rl a.more::after{content:" →";flex:none;color:var(--ink-4)}
.rl a.more:hover{color:var(--cinnabar)}

/* 用户中心卡片 */
.rc{border:1px solid var(--line);background:var(--paper-card);
  border-radius:var(--radius);padding:14px 13px 15px;margin-bottom:24px}
.rc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.rc-av{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover;
  background:var(--paper-3);border:1px solid var(--line-strong)}
.rc-av.ph{display:grid;place-items:center;font-family:var(--kai);font-size:var(--fs-h4);color:var(--ink-3)}
/* main.css 的 img{display:block} 是作者规则，会盖掉浏览器默认的 [hidden] ⇒ 必须自己压回 */
.rc-av[hidden]{display:none}
.rail-sec[hidden]{display:none}
.rc-id{min-width:0}
.rc-id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--kai);font-weight:400;font-size:var(--fs-body);letter-spacing:.08em;color:var(--ink)}
.rc-id span{display:block;margin-top:2px;font-size:var(--fs-meta);letter-spacing:.04em;color:var(--ink-3)}
.rc-stats{display:flex;border-top:1px dashed var(--line);padding-top:11px;margin-bottom:12px}
.rc-stats div{flex:1;min-width:0;text-align:center}
.rc-stats div+div{border-left:1px solid var(--line)}
.rc-stats b{display:block;line-height:1.3;font-family:var(--kai);font-weight:400;
  font-size:var(--fs-body);color:var(--ink)}
.rc-stats span{display:block;margin-top:1px;font-size:var(--fs-meta);letter-spacing:.06em;color:var(--ink-3)}
.rc-btn{display:block;width:100%;text-align:center;padding:8px 10px;border:1px solid var(--line-strong);
  border-radius:var(--radius);letter-spacing:.08em;font-size:var(--fs-meta);color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .25s var(--ease)}
.rc-btn+.rc-btn{margin-top:8px}
.rc-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.rc-btn.pri{background:var(--cinnabar);border-color:var(--cinnabar);color:var(--on-accent)}
.rc-btn.pri:hover{background:var(--cinnabar-soft);border-color:var(--cinnabar-soft);color:var(--on-accent)}
/* 退出 / 登录中：按钮是 <button>，[hidden] 和 disabled 都得自己压住（同 .rc-av[hidden] 那条原因） */
.rc-btn[hidden]{display:none}
.rc-btn:disabled{opacity:.5;cursor:default;pointer-events:none}

/* 就地作者登录（登录成功后整块收起，把位置让给「我的版本」） */
.rc-in{border-top:1px dashed var(--line);padding-top:12px;margin-bottom:12px}
.rc-in[hidden]{display:none}
.rf-lab{display:block;margin-bottom:5px;font-family:var(--sans);
  font-size:var(--fs-meta);letter-spacing:.1em;color:var(--ink-3)}
.rf-in{display:block;width:100%;padding:7px 9px;border:1px solid var(--line-strong);
  border-radius:var(--radius);background:var(--paper-card);color:var(--ink);
  /* 水墨主题没有 --mono，退回 --sans；经典/暗黑下用等宽好核对令牌 */
  font-family:var(--mono,var(--sans));font-size:var(--fs-meta);letter-spacing:.02em}
.rf-in::placeholder{color:var(--ink-4);letter-spacing:.04em}
.rc-in .rc-btn{margin-top:8px}
.rf-tip{margin-top:8px;font-family:var(--sans);font-size:var(--fs-meta);line-height:1.8;color:var(--ink-3)}
.rf-tip a{color:var(--cinnabar);text-decoration:underline}
.rf-msg{margin-top:7px;font-family:var(--sans);font-size:var(--fs-meta);line-height:1.75;color:var(--ink-2)}
.rf-msg.bad{color:var(--cinnabar)}

/* 左栏最后一条：「我的」标签从顶栏搬进来后，主页入口放这里 */
.rail-end{margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);margin-bottom:0}
/* 本页就是「我的」（含单版本维护页）时给出当前态 */
.rc-btn.cur{background:var(--cinnabar-wash);border-color:var(--cinnabar);color:var(--cinnabar)}

/* 找到组织：三码一排（QQ 群 / 公众号 / 小程序）。
   右栏最窄只有 216px，三格各约 60px，这个尺寸扫不了 ⇒ 配了点击放大（.qr-view 在本文件末尾）。
   白底是硬要求：theme-c 的 --qr-bg 是深色，黑底二维码扫不出来。 */
.rq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rq-cell{display:block;padding:0;text-align:center;color:inherit}
.rq-frame{display:block;aspect-ratio:1;padding:4px;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--radius);
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.rq-cell:hover .rq-frame{border-color:var(--cinnabar);transform:translateY(-2px)}
.rq-cell:focus-visible .rq-frame{outline:2px solid var(--cinnabar);outline-offset:2px}
.rq-frame img{display:block;width:100%;height:100%;object-fit:contain}
.rq-t{display:block;margin-top:6px;font-size:var(--fs-meta);letter-spacing:.03em;
  color:var(--ink-3);line-height:1.4}
.rq-tip{margin-top:9px;text-align:center;font-size:var(--fs-micro);letter-spacing:.02em;color:var(--ink-4)}

/* ============ 二维码放大层（作者 2026-10-20：缩小 + 点开放大，再点关闭） ============
   .qr-view 由 main.js 的 initQrZoom() 注入 body：点码整页覆盖，再点任意处或按 Esc 关闭。
   遮罩固定深灰是要压住三种主题的正文；码永远垫白底，否则暗色模式扫不出来。 */
.qr-view{position:fixed;inset:0;z-index:90;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:32px;
  background:rgba(10,9,8,.86);cursor:zoom-out}
.qr-view.on{display:flex}
.qr-big{width:min(72vw,340px);background:#fff;border-radius:var(--radius);padding:14px}
.qr-big img{display:block;width:100%;height:auto;max-height:62vh;object-fit:contain}
.qr-cap{font-family:var(--kai);font-size:var(--fs-body);letter-spacing:.1em;color:#fff;text-align:center}
.qr-hint{font-size:var(--fs-meta);letter-spacing:.14em;color:rgba(255,255,255,.62)}