/* ============================================================
 * m.css — 北极光站 手机/窄屏 适配覆盖层 (2026-09-07)
 *
 * 全部规则都包在 @media (max-width: …) 里:
 *   桌面宽度(>960px)一条都不命中 → 电脑端网页布局完全不变。
 * 各页从不叠加加载 → 类名/选择器可跨页复用, 无互相污染。
 * 被 <link rel="stylesheet" href="/m.css"> 放在各页自带 <style>
 * 之后 → 同特异性规则以本文件为准(窄屏覆盖桌面规则)。
 * ============================================================ */

/* ---------- 顶栏缩放系数(2026-09-12) ----------
 * 真值在 skin.css §2 的 `html.fh{--top-k:…}`(全站裁决层, 1 = 原来大小)。
 * 这里补一个兜底: 万一 `html.fh` 不在场(水合清类的那一两帧 / 极端降级),
 * 下面的 `calc(62px * var(--top-k))` 会因为 var() 无值而整条失效 → height 塌成 auto。
 * 兜底值必须与 skin.css 的字面量一致, 否则两条路径会差一截。
 * ⚠ 本文件先于 skin.css 加载, 但自定义属性是计算值阶段解析的 → 有 .fh 时 skin.css 那份赢。 */
:root { --top-k: 1; }

/* ---------- 顶部留白/刻度共用(随档位改, 别忘改 header 高) ---------- */
/* 桌面: .lv-top 高 88px, 各页 pad-top 各异(见下注释)。窄屏头部改 62/56, 下方
 * 补位 = 原(X) - 88 + 新头高, 保证正文与头部间距不塌不叠。 */

/* ============================ 主档位 ≤960 ============================ */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; }

  /* ———— 全站共享顶栏 (.lv-top 一族: account 登录后/codes/friends/p/live/chat/privacy/terms) ————
   * 桌面: 头 88px / logo高87 / 导航字22 gap≥32 不换行 → ≤500px 必溢出。 */
  /* 2026-09-12 顶栏整体缩放: 数值乘 skin.css §2 的 --top-k(1=原大小)。 */
  .lv-top { height: calc(62px * var(--top-k)); padding: 0 calc(12px * var(--top-k)) 0 calc(16px * var(--top-k)); }
  .lv-logo { margin-left: 0; }
  .lv-logo img { height: calc(44px * var(--top-k)); }
  .lv-nav { gap: calc(16px * var(--top-k)); }
  .lv-li { font-size: calc(16px * var(--top-k)); letter-spacing: .04em; }
  .apc-slot .lv-li { font-size: calc(16px * var(--top-k)); }

  /* 正文顶部占位补偿: pad_top 桌面值见各页; 公式 pad' = X - 26 (62-88=-26) */
  .p-wrap   { padding-top: 102px; }  /* 桌面128 */
  .lv-main  { padding-top: 102px; }  /* 桌面128 */
  .ai-page  { padding-top: 106px; }  /* 桌面132 */
  .fr-page  { padding-top: 106px; }  /* 桌面132 */
  #pfPage, .pf-page { padding-top: 92px; }  /* 桌面118 */
  .doc      { padding-top: 124px; }  /* 桌面150 */
  .ch-page  { top: 62px; }           /* 桌面 fixed top 88 (=头高) */
  .ai-gate  { padding: 96px 16px 36px; }

  /* ———— chat.html ———— */
  .ch-bar { padding: 12px 2px 8px; gap: 10px; }
  .ch-sel { max-width: 100%; }
  .ch-wallet { gap: 10px; padding: 6px 10px; }
  .wl-rdm { flex: 1 1 100%; }
  .ch-scroll { padding: 4px 2px 8px; }
  .ch-box { gap: 8px; padding: 8px 10px 8px 12px; }
  .ch-send { padding: 10px 18px; font-size: 15px; }
  .ch-ta { font-size: 16px; }
  .ch-empty .in { padding: 0 12px; }
  .gx-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .gx-vmini { gap: 10px; }
  .gx-vmini .play { flex: 0 0 96px; }

  /* ———— p.html ———— */
  .p-card { padding: 30px 24px; }
  .p-cover { border-radius: 14px; }

  /* ———— publish.html(无共享头, 表单卡) ———— */
  .cov { flex-wrap: wrap; row-gap: 10px; }
  .cov-info { min-width: 0; }
  .v-done { flex-wrap: wrap; row-gap: 10px; }
  .v-thumb { flex: 0 0 auto; }
  .pub-modes { max-width: 100%; }

  /* ———— codes.html(码卡) ———— */
  .cd { flex-wrap: wrap; row-gap: 6px; padding: 10px 12px; }
  .cd .cod { white-space: normal; overflow-wrap: anywhere; }

  /* ———— account.html(登录后) ———— */
  .pf-card { gap: 18px; }
  .pf-stats { gap: 18px; padding: 16px 18px; }
  .pf-e-row { row-gap: 10px; }

  /* ———— friends.html ———— */
  .fr-card { gap: 12px; padding: 13px 14px; }
  .fr-ava { width: 50px; height: 50px; flex: 0 0 50px; font-size: 20px; }
  .fr-btn { padding: 9px 18px; font-size: 13px; }

  /* ———— live.html(数据台; 网格 ≤980 已自有塌陷, 这里收窄行内边距) ———— */
  .dash { margin-top: 30px; }
  .blk-bd { padding: 2px 14px 16px; }
  .blk-hd { padding: 12px 14px 4px; }
  .q-row { gap: 10px; padding: 7px 12px; }
  .q-detail { padding: 16px 18px; }
  .q-body { gap: 12px; }
  .an-stat { flex-wrap: wrap; }
  .tl-tblwrap { -webkit-overflow-scrolling: touch; }

  /* ———— 账号/兑换/朋友 通用表单小修 ———— */
  .acc-card { padding: 22px 20px; }
  .acc-code { gap: 8px; }
}

/* ============================ 窄档位 ≤560 ============================ */
@media (max-width: 560px) {
  /* ———— 顶栏再收紧 ———— */
  .lv-top { height: calc(56px * var(--top-k)); padding: 0 calc(10px * var(--top-k)) 0 calc(12px * var(--top-k)); }
  .lv-logo img { height: calc(38px * var(--top-k)); }
  .lv-nav { gap: calc(12px * var(--top-k)); }
  .lv-li { font-size: calc(14px * var(--top-k)); letter-spacing: .02em; }
  .apc-slot .lv-li { font-size: calc(14px * var(--top-k)); }

  /* 补位: pad' = X - 32 (56-88=-32) */
  .p-wrap   { padding-top: 96px; }
  .lv-main  { padding-top: 96px; }
  .ai-page  { padding-top: 100px; }
  .fr-page  { padding-top: 100px; }
  #pfPage, .pf-page { padding-top: 86px; }
  .doc      { padding-top: 118px; }
  .ch-page  { top: 56px; }
  .ai-gate  { padding: 88px 12px 30px; }

  /* ———— chat: 更省 ———— */
  .ch-bar { flex-direction: column; align-items: stretch; }
  .ch-bar > div:first-child { align-items: baseline; }
  .ch-selbox { justify-content: space-between; width: 100%; }
  .wl-note { font-size: 12px; }
  .gx-intro, .gx-state { padding: 20px 14px; }

  /* ———— 代码站(码/备注)整行 ———— */
  .ai-ops { flex-direction: column; }
  .ai-op { flex: 1 1 100%; min-width: 0; width: 100%; }
  .ai-card h2 { font-size: 28px; letter-spacing: .12em; }

  /* ———— 表单: 标签上叠, 字段全宽(触屏友好) ———— */
  .pf-e-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .pf-e-lb { flex: 0 0 auto; }
  .pf-e-fld, .pf-e-med, .pf-e-mailwrap { width: 100%; min-width: 0; }
  .pf-tabs, .acc-tabs { overflow-x: auto; }
  .pf-tab, .acc-tab { white-space: nowrap; }

  /* ———— publish: 封面/视频缩略上叠留信息宽度 ———— */
  .cov { flex-direction: column; align-items: flex-start; }
  .cov-box { width: 100%; height: auto; }
  .v-done { flex-direction: column; align-items: stretch; }
  .v-thumb { width: 100%; height: auto; }
  .v-meta { min-width: 0; }
  .v-meta .nm { overflow-wrap: anywhere; white-space: normal; }
  .gal { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .acc-fld .lbl { font-size: 13px; }

  /* ———— p 文章卡更贴边 ———— */
  .p-wrap { padding-left: 12px; padding-right: 12px; }
  .p-card { padding: 24px 18px; }
  .p-title { font-size: 22px; }
  .p-tags { gap: 6px; }

  /* ———— live ———— */
  .lv-title { font-size: 40px; }
  .lv-tab { padding: 9px 14px; font-size: 14px; }
  .tl-tbl { font-size: 11.5px; }
  .hunt-boss { flex-wrap: wrap; row-gap: 8px; }
  .baro-id { flex-wrap: wrap; row-gap: 8px; }
  .bg-row { flex-wrap: wrap; row-gap: 8px; }
  .bg-pr { min-width: 0; }
  .var-frames { gap: 10px; }
  .q-nm { font-size: 15px; }
  .dt-img { width: 80px; height: 80px; margin: 0 0 6px 10px; }
  .sortie-steps, .sp-list, .ev-list { row-gap: 10px; }

  /* ———— 隐私/条款 排版 ———— */
  .doc { padding-left: 16px; padding-right: 16px; }
  .doc h1 { font-size: 30px; letter-spacing: .03em; }
  .doc h2 { font-size: 18px; }
  .kicker { letter-spacing: .22em; }

  /* ———— 兑换页等大标题 ———— */
  .acc-card .title { font-size: 24px; }
  .fr-tabs { gap: 4px; }
  .fr-tab { padding: 9px 13px; font-size: 14px; }
}

/* ============================ 超窄 ≤400 ============================ */
@media (max-width: 400px) {
  .lv-top { height: calc(52px * var(--top-k)); padding: 0 calc(8px * var(--top-k)); }
  .lv-logo img { height: calc(32px * var(--top-k)); }
  .lv-nav { gap: calc(10px * var(--top-k)); }
  .lv-li { font-size: calc(13px * var(--top-k)); letter-spacing: 0; }
  .apc-slot .lv-li { font-size: calc(13px * var(--top-k)); }
  .p-wrap, .lv-main { padding-top: 88px; }
  .ai-page, .fr-page { padding-top: 92px; }
  #pfPage, .pf-page { padding-top: 80px; }
  .doc { padding-top: 112px; }
  .ch-page { top: 52px; }
}

/* ============================================================
 * 首页 #apeTop 覆盖(2026-09-07)
 * index.html 顶栏由 apeTop.js 在 <html> 尾部注入 #apeTopCss, 出现晚于本
 * 文件 → 同级特异性会被它反压。下面用 #apeTop(id) 提权同档重压一遍。
 * 桌面宽度不命中, 首页桌面布局不变。
 * ============================================================ */
@media (max-width: 960px) {
  header#apeTop.lv-top { height: calc(62px * var(--top-k)); padding: 0 calc(12px * var(--top-k)) 0 calc(16px * var(--top-k)); }
  header#apeTop .lv-logo { margin-left: 0; }
  header#apeTop .lv-logo img { height: calc(44px * var(--top-k)); }
  header#apeTop .lv-nav { gap: calc(16px * var(--top-k)); }
  header#apeTop .lv-li { font-size: calc(16px * var(--top-k)); letter-spacing: .04em; }
}
@media (max-width: 560px) {
  header#apeTop.lv-top { height: calc(56px * var(--top-k)); padding: 0 calc(10px * var(--top-k)) 0 calc(12px * var(--top-k)); }
  header#apeTop .lv-logo img { height: calc(38px * var(--top-k)); }
  header#apeTop .lv-nav { gap: calc(12px * var(--top-k)); }
  header#apeTop .lv-li { font-size: calc(14px * var(--top-k)); letter-spacing: .02em; }
}
@media (max-width: 400px) {
  header#apeTop.lv-top { height: calc(52px * var(--top-k)); padding: 0 calc(8px * var(--top-k)); }
  header#apeTop .lv-logo img { height: calc(32px * var(--top-k)); }
  header#apeTop .lv-nav { gap: calc(10px * var(--top-k)); }
  header#apeTop .lv-li { font-size: calc(13px * var(--top-k)); letter-spacing: 0; }
}

/* ============================================================
 * 首页 ② 内容区(推荐 feed)手机留白(2026-09-07, index.html 专属)
 * ②区顶部留白/空态撑屏一并收紧, 让内容紧跟首屏。
 * 2026-09-11 首屏改版后: 原来那套「3D 选择 hero 压短 + 手机一页化」规则已随
 * 3D 退役删除(.ciao-corner/.ciao-scroll 也一并没了 —— ciao-ui.js 已不再加载)。
 * 首屏现在是 f.css 的 #fHero(整屏白底), 它的手机档规则见下面「首页新首屏」节。
 * 桌面(≥960)整段不命中 → 电脑端首页一条不变。
 * ============================================================ */
@media (max-width: 960px) {
  /* ② 内容区: 顶部留白收紧让内容紧跟 hero; 空态/加载态不再撑成一整屏 */
  .SectionGridCarousel { padding: 10px 24px 40px; }
  .page2-wrap .p2-sec,
  .page2-wrap .p2-state,
  .page2-wrap .p2-loading { min-height: 0; }
}

/* ============================================================
 * 首页「新首屏」手机档 (2026-09-11, index.html 专属, 配套 f.css)
 * 桌面按 fatfish 实测比例(99.56px 大字 / -224px 错位); 那几个数在 390px 宽会把字
 * 推出屏外或糊成一片, 所以三档全部重给。--fh-top 必须与上面 #apeTop 的 62/56/52
 * 三档逐一对应, 否则三行大字会被顶栏压住或悬空 —— 改一处务必顺手改另一处。
 * 选择器用 html.fh 前缀: f.css 的同名规则也是 html.fh 起头, 而 m.css 在 head 里
 * 晚于 f.css → 同特异性时后来者胜; 凡 f.css 用了 #apeTop 的地方这里再加 header 提一档。
 * ⚠ 2026-09-12: 本块里所有原站换算值原本按 **14px** 根字号算(15.4/63/11.2/35/2.8/8.4),
 *   整档小 12.5% → 全部改成 16px 口径(17.6/72/12.8/40/3.2/9.6)。三个手调的大字
 *   clamp() 也删了(f.css 的 min(--fh-fs, 塞得下) 已覆盖), 见 f.css §6.5 的注释。
 * ============================================================ */
@media (max-width: 960px) {
  /* ≡ fatfish ≤1199px: --word_spacing 1.1rem(17.6) / --icon_size 4.5rem(72); 描述块缩进 1 列 */
  /* --fh-inset 桌面档是栅格中线内缩（1440 下 155.33px），手机上必须重给成跟 --fh-pad
     同量级，否则 .fh-band 的左右内边距会把整行大字挤没。 */
  html.fh { --fh-pad: 20px; --fh-pad-top: 80px; --fh-top: 62px; --fh-handoff: 96px;
            --fh-word-gap: 17.6px; --fh-icon: 72px; --fh-inset: 20px;
            --fh-shift: 24px; --fh-desc-gap: 32px;
            --fh-gather: 0px; }   /* 手机上三行本来就快占满整屏, 不再内收(桌面那条见 f.css) */
  #fHero { height: 100svh; }                 /* 保持整屏, 不再像旧 3D hero 那样压成 520~610px */
  /* ⚠ 桌面那两处出血位移在窄屏只会把内容顶出屏幕(实测第2行的图标会被裁掉 48px),
     而且窄屏本来也没有"出血"这种版面余地 → 两条都归零, 交回普通居中/靠右。
     (原站 ≤1199px 是缩成 -(icon+word) ≈ -89.6px、≤1024px 归零; 我们直接归零。) */
  .expertises-marquees__expertise:nth-child(2) .expertises-marquees__expertise-title-ctn {
    margin-left: 0; }
  .expertises-marquees__expertise:nth-child(3) .expertises-marquees__expertise-title-ctn {
    margin-right: 0; }
  /* 描述块缩进 1 列(≡ fatfish ≤849px .home-intro__descriptions{margin-left:col*1}), 不是 4 列 */
  .home-intro__descriptions {
    margin-left: calc(var(--fh-gutter) * -1 + (var(--fh-gutter) + var(--fh-col)) * 1); }
  /* ≡ ≤849px width:calc(gutter*2 + col*2.5); 字 1rem@16 = 16px(原站 p{font-size:1rem}) */
  .home-intro__description {
    width: calc(var(--fh-gutter) * 2 + var(--fh-col) * 2.5); min-width: 0; font-size: 16px; }
  .expertises-marquees__expertise-subtitle { display: none; }   /* ≡ fatfish ≤849px */
  .fstk { --w: 96px; }
  .fstk:nth-child(n+5) { display: none; }    /* 只留 4 个, 免得糊满整屏 */
  /* 顶栏白底手机档(#apeTop 高度沿用上面 62px 那档, 不动)
     ⚠ **这两条才是手机顶栏字号的真正赢家** —— 它们带 `html.fh header#apeTop`(1,2,2),
     压过上面那组 `header#apeTop .lv-li`(1,1,1) 的 16/14/13 三档(那三条是死代码)。
     2026-09-12 顶栏缩放: 数值同样乘 --top-k, 否则会出现"条缩小了、手机上的字没缩"，
     而这两条正是手机上唯一还写着死值的地方。 */
  html.fh header#apeTop .lv-li { font-size: calc(11px * var(--top-k)); letter-spacing: .04em; }
  html.fh header#apeTop #apcAcc .lv-li { font-size: calc(11px * var(--top-k)); padding: calc(7px * var(--top-k)) calc(15px * var(--top-k)) calc(8px * var(--top-k)); }
}
@media (max-width: 560px) {
  /* ≡ fatfish ≤749px: --word_spacing 0.8rem(12.8) / --icon_size 2.5rem(40) / 图标振幅减半 */
  html.fh { --fh-pad-top: 72px; --fh-top: 56px; --fh-shift: 12px; --fh-desc-gap: 28px;
            --fh-word-gap: 12.8px; --fh-icon: 40px; --fh-inset: 16px; }
  .expertises-marquees__expertise-link { letter-spacing: .01em; }
  .expertises-marquees__expertise:not(:last-child) { margin-bottom: 3.2px; }   /* ≡ .2rem@16 */
  .expertises-marquees__expertise-icon-ctn { animation-name: sway_vertical_less; }
  .expertises-marquees__expertise-icon { margin-top: 9.6px; }   /* ≡ .6rem@16 */
  .home-intro__description { width: 100%; font-size: 16px; }
  .fstk:nth-child(n+4) { display: none; }    /* 只留 3 个 */
}
@media (max-width: 400px) {
  html.fh { --fh-pad-top: 66px; --fh-top: 52px; }
}

/* ============================================================
 * 首页顶部占位「整体上提」(2026-09-07, index.html 专属)
 * index 正文第一个子节点是 <div class="h-96 md:hidden">(96px 手机
 * 占位, md≥768 已 display:none)。手机顶栏是固定条 header#apeTop
 * (高 62/56/52), 占位会顶出一条空带把整页压低。第一版收到与条同高
 * (52/56/62), 用户再提 → 归零: hero 顶到 y0, 顶部 52px 处是 3D
 * 纯背景天空, 被固定条盖住(等同下滑一丁点的常态), hero/②整体再
 * 上移贴满。桌面 ≥960 不命中; ≥768 占位本就 display:none → 电脑端
 * 布局不变。
 * 2026-09-11: 首屏换成 f.css 的 #fHero(top:0), 这条「归零」依然必需 ——
 * 有它 #fHero 的顶才与首屏带对齐。
 * ============================================================ */
@media (max-width: 960px) {
  body > .h-96.md\:hidden { height: 0 !important; }
}