/* ═══════════════════════════════════════════════════════════════════════
   mobile.css · 新智元 ASI 新站 · 手机端排版修补
   2026-09-04 韩宁：「网页端还可以，移动端很多排版都错位了，整体优化一下」

   规矩：只改几何（宽度、列数、字号、间距、换行），不改配色不改字体不改内容。
   全部关在 max-width 查询里，桌面端一个像素都不动。
   每个页面一节，节里按「从上到下」排，改哪块写清楚为什么。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 全站通用（≤760px）───────────────────────────────────────────── */
@media (max-width:760px){
  /* 谁都不许把页面撑宽：横向滚动是手机上最刺眼的错位 */
  /* body 上的 overflow-x:hidden 会让 body 变成滚动容器，顶栏和栏目条的 sticky 全部失效
     （2026-09-05 实测：手机端滚到 2000px 两条都跟着滚走）。html 上设 hidden 不影响 sticky，
     body 改用 clip——只裁剪、不建滚动容器。 */
  html{max-width:100%!important;overflow-x:hidden!important}
  body{max-width:100%!important;overflow-x:clip!important}
  img,svg,video,canvas,iframe{max-width:100%!important}

  /* 长英文/邮箱/模型 id（gemini-3.1-pro-preview、xiaoyunhong@aiera.com.cn）必须能断行 */
  p,li,td,dd,figcaption,.colNote,.tdsub,.tdrule,.cm,.cd,.cnote{overflow-wrap:anywhere!important}

  /* 顶栏（韩宁 2026-09-05：「手机端上面那几个栏目不要整成一个，直接列出来」）：
     第一行 logo + 关于我们，第二行四个频道平铺。折叠菜单整套停用——
     多一次点击才看得到栏目，在手机上就等于没有导航。 */
  #topbar{padding:10px 12px 0!important;gap:8px!important;flex-wrap:wrap!important}
  #topbar .brand img,#topbar .brand .bmark,#topbar .brand .btext{height:24px!important}
  #mBtn{display:none!important}
  #mMenu{display:none!important}
  /* 第二行：四个频道。主导航，留白足、不抢戏，当前页金色 + 底下一颗小点。 */
  #topbar nav{display:flex!important;order:9;width:100%!important;
    justify-content:space-between!important;gap:0!important;
    margin:11px 0 0!important;padding:11px 0 10px!important;
    border-top:1px solid rgba(232,184,75,.12)!important}
  #topbar nav a{margin:0!important;flex:1 1 0!important;text-align:center!important;
    font-size:12.5px!important;letter-spacing:.03em!important;text-indent:0!important;
    white-space:nowrap!important;opacity:.7!important;padding:2px 0!important;
    transition:opacity .25s,color .25s!important}
  #topbar nav a.chon{opacity:1!important}
  #topbar nav a.chon::after{bottom:-5px!important;width:3px!important;height:3px!important}
  .aboutLink{white-space:nowrap!important;font-size:11px!important;letter-spacing:.1em!important;padding:7px 11px!important}

  /* 正文左右留 16px，别贴着屏幕边 */
  .wrap{padding-left:16px!important;padding-right:16px!important}
}

@media (max-width:430px){
  /* 小屏（iPhone 竖屏主力尺寸）再收一档，保证顶栏一行放得下 */
  #topbar .brand img,#topbar .brand .bmark,#topbar .brand .btext{height:22px!important}
  .aboutLink{font-size:10.5px!important;letter-spacing:.06em!important;padding:6px 9px!important}
  #topbar nav a{font-size:12px!important;letter-spacing:.02em!important}
}

/* ── ② ASI 爆点 asi-baodian ─────────────────────────────────────────── */
@media (max-width:760px){
  /* 手机端单列时 grid 的 1fr 最小值按内容算，被某个不可压缩的子元素撑到 382.5px、
     比容器还宽 25px，卡片右边（含「详情 →」）就被裁在屏幕外。minmax(0,1fr) 才允许压缩。 */
  #cols{grid-template-columns:minmax(0,1fr)!important}
  #vFeed,#vX{min-width:0!important}
  /* 副标题一行 33 个字带 .3em 字距，390px 装不下 —— 缩字距、允许折行、居中 */
  #hero .sub{letter-spacing:.12em!important;font-size:11px!important;line-height:1.9!important;
    padding:0 4px!important;word-break:keep-all!important}

  /* 栏目头：标题与副标题在手机上换行排，别挤成一行 */
  .secHead{gap:4px 12px!important}
  .secHead .sub,.railHead p{font-size:11.5px!important;letter-spacing:.06em!important;line-height:1.85!important}

  /* 秒追 / 爆点两栏在桌面端各自"框内滚动"，手机上这是个陷阱：
     嵌套滚动会把卡片切成两半，手指还容易被卡在框里出不来。
     手机上改成：正常往下铺，超出的条目先收起来，点「展开全部」再放出来（mobile.js 负责挂按钮）。 */
  /* 这条原来是为了压掉旧的「框内固定高度」。2026-09-05 之后高度只在展开态（.all）才设，
     再无条件压掉就会让手机端展开后一路铺 60 条、页面两万像素长。所以只压折叠态。 */
  .feed:not(.all),#vX .xscroll:not(.all){max-height:none!important;overflow:visible!important;padding-right:0!important}
  .feed.all,.board.all{max-height:68vh!important;overflow-y:auto!important}
  .scrollHint{display:none!important}
  .feed.m-fold>*:nth-child(n+11),
  #vX .xscroll.m-fold .board>*:nth-child(n+7){display:none!important}
  .m-more{display:block!important;width:100%!important;margin:18px 0 4px!important;padding:13px 0!important;cursor:pointer!important;
    background:none!important;border:1px solid rgba(232,184,75,.32)!important;border-radius:999px!important;
    color:#E8B84B!important;font-family:var(--mono,monospace)!important;font-size:12px!important;letter-spacing:.2em!important}
  .m-more:active{background:rgba(232,184,75,.08)!important}

  /* 秒追条目：时间与日期一行，正文左对齐铺满 */
  .fi{grid-template-columns:minmax(0,1fr)!important;gap:6px!important;padding:20px 2px!important}
  .fi .tm{text-align:left!important;display:flex!important;gap:10px!important;align-items:baseline!important}
  .fi p{max-width:none!important}
  /* 手机没有 hover，桌面端藏起来的「详情 →」在这里必须常驻，
     不然触屏用户看不出整张卡片可以点（2026-09-05 卡片改成整块链接之后加的） */
  .fi .sr .go{opacity:1!important;transform:none!important}
  /* 同理，悬停时同组变暗那套在触屏上会卡在"全暗"，直接关掉 */
  .feed:hover .fi{opacity:1!important}

  /* 爆点榜条目：序号别占太宽 */
  #vX .bi summary,.bi summary{grid-template-columns:30px 1fr!important;gap:10px!important}
  #vX .bi .body,.bi .body{padding-left:2px!important;padding-right:2px!important}

  /* 图追 ASI 横排：一屏一张半，让人一眼知道能往右滑 */
  /* 一行 1.5 张：右边永远露半张，等于告诉人还能往右划（韩宁 2026-09-05 定的规矩，桌面端是 4.5 张） */
  /* 09-06：图追是配角，从一行 1.6 张（64vw）收成 2.5 张，跟上面的条目块头对得上 */
  /* 09-11：反馈「板块面积偏小、画面内容看不清」——2.5 张时每张才 137px 宽、图区 135×101，
     手机上图里的字完全读不出来。改回一行 1.8 张（193px 宽 + 1:1 方框），右边照旧露一截。
     min(260px,…) 是给 700+ 宽的平板挡一下，不然 1.8 张会撑到 380px 一张。 */
  .tuzhui{grid-template-columns:none!important;grid-auto-columns:min(260px, calc((100% - 1 * 10px) / 1.8))!important;gap:10px!important;
    scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
  .tz{scroll-snap-align:start!important}
  /* 09-14 收空隙：跟 site_baodian.py LAYOUT_CSS 那条一起改，margin 归零、分隔线下留 24 */
  #tuzhuiSec{padding-top:24px!important;margin-top:0!important}

  /* 底部三个数字挤在一行会顶出去 */
  .statRow{gap:14px 22px!important}
  .st b{font-size:30px!important}
}

/* ── ③ ASI 启示录 asi-articles ──────────────────────────────────────── */
@media (max-width:760px){
  .artHead .more,.secHead .more{margin-left:0!important}
  /* Top10 榜：名次与标题一行放不下时让标题自己换行，不要挤破容器 */
  .tp li,.top10 li{grid-template-columns:34px 1fr!important;gap:10px!important}
}

/* ── ④ ASI 坐标 asi-ceping ──────────────────────────────────────────── */
@media (max-width:760px){
  /* 顶部三格栏目条：手机上横向滑，不折行 */
  /* ASI 坐标页的栏目条：跟爆点页那三颗胶囊统一（韩宁 2026-09-05：「设计精美」）。
     名字「ASI 指数奇点坐标」太长，等分会挤，所以保持横滑、每颗按内容宽。
     顶栏两行实测 98px，sticky 贴在它底下。 */
  .subChan{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
    top:98px!important;gap:8px!important;padding:10px 12px 11px!important;
    background:linear-gradient(180deg,rgba(8,6,4,.97),rgba(3,3,2,.94))!important;
    backdrop-filter:blur(14px)!important;
    border-top:1px solid rgba(232,184,75,.16)!important;
    border-bottom:1px solid rgba(232,184,75,.16)!important;
    box-shadow:0 10px 22px -14px rgba(0,0,0,.9)!important}
  .subChan .lbl{display:none!important}      /* 顶栏那行已经把「ASI 坐标」高亮着了，这里重复 */
  .subChan a{white-space:nowrap!important;flex:none!important;
    padding:8px 15px!important;font-size:12.5px!important;letter-spacing:.02em!important;
    border:1px solid rgba(232,184,75,.2)!important;border-radius:999px!important;
    background:rgba(232,184,75,.035)!important;color:var(--dust)!important;
    transition:background .25s,color .25s,border-color .25s,box-shadow .25s!important}
  .subChan a.on,.subChan .on{color:#0B0805!important;font-weight:500!important;
    background:linear-gradient(135deg,#F6E27A,#E8B84B 62%,#D9A62F)!important;
    border-color:transparent!important;
    box-shadow:0 0 16px rgba(246,201,20,.3),inset 0 1px 0 rgba(255,255,255,.35)!important}
  .subChan::-webkit-scrollbar{display:none!important}

  /* 今日看板整块：桌面留的内边距在手机上吃掉 60px 正文宽 */
  #today{padding-left:10px!important;padding-right:10px!important}
  .tdwrap{padding:16px 12px!important}
  .tdhead{gap:6px 12px!important}
  .tdtitle{font-size:19px!important;letter-spacing:.12em!important}
  .tdtitle small{display:block!important;margin-left:0!important;margin-top:4px!important;letter-spacing:.18em!important}
  .tddate{text-align:left!important}
  .tddate b{font-size:26px!important}
  .tdsub,.tdrule{font-size:11px!important;letter-spacing:.02em!important}

  /* 图例：桌面 2 列 290px，手机必须 1 列，否则第二列整个滑出屏幕 */
  .tdlegend{grid-template-columns:1fr!important;gap:8px!important}
  /* 一条 = 奖牌 · 色块 · 名字（第一行），分数另起一行左对齐 —— 四样挤一行手机上必竖排 */
  .tdlegend li{grid-template-columns:auto auto minmax(0,1fr)!important;gap:6px 8px!important;
    padding:10px 11px!important;align-items:center!important}
  .tdlegend .lrk .medal{width:26px!important;height:auto!important}
  .tdlegend .sw{align-self:center!important}
  .tdlegend .ln{font-size:13.5px!important}
  .tdlegend .ln i{font-size:9.5px!important;line-height:1.7!important}
  .tdlegend .lv{grid-column:1/-1!important;text-align:left!important;display:flex!important;
    align-items:baseline!important;gap:10px!important;margin-top:2px!important}
  .tdlegend .lv,.tdlegend .lv .lvs{font-size:24px!important}
  .tdlegend .lv small{font-size:9.5px!important;margin-top:0!important}

  /* 指标三格 */
  .tdkpi{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .tdkpi div{padding:9px 11px!important}
  .tdkpi b{font-size:22px!important}

  /* 模型卡：桌面是「名次 | 名字 | 88px 大分数」三栏，手机上大分数把名字挤成一列竖排字。
     改成上下两段：名次+名字一行，分数与奖牌另起一行。 */
  .tdcard{padding:16px 12px 16px 12px!important}
  .tdcard .chead{grid-template-columns:auto minmax(0,1fr)!important;gap:10px 12px!important}
  .tdcard .crk{font-size:36px!important}
  .tdcard .cn{font-size:24px!important;line-height:1.25!important;font-weight:500!important}
  .tdcard .ch2{gap:6px!important;margin-top:5px!important}
  .tdcard .cv{font-size:9.5px!important;letter-spacing:.1em!important}
  .tdcard .ctot{grid-column:1/-1!important;justify-content:flex-start!important;gap:16px!important;
    padding:6px 0 0!important;white-space:normal!important;flex-wrap:wrap!important}
  .tdcard .ctot .ctv{text-align:left!important;padding-top:0!important}
  .tdcard .ctot b{font-size:64px!important}
  .tdcard .ctot small{font-size:10px!important;letter-spacing:.14em!important;margin-left:6px!important;vertical-align:6px!important}
  .tdcard .ctot .csr{margin-left:0!important;margin-top:8px!important;font-size:11px!important;letter-spacing:.18em!important;padding:6px 12px 5px 14px!important}
  /* 2026-09-05 韩宁：手机端奖牌太小，要跟网页端一样有震撼感 —— 38→120px，分数 46→64px */
  .tdcard .ctot .medal{width:120px!important;height:auto!important}
  .tdcard .cgrid{grid-template-columns:1fr!important;gap:14px!important}
  .tdcard .chl{font-size:15px!important}
  .tdcard .sb{grid-template-columns:3.6em 1fr 2em!important}
  /* 预估依据那几行：维度名列只有 2.6em，「Agent」会被拆成「Agen / t」 */
  .tdcard .cwhy li{grid-template-columns:3.6em 2.6em minmax(0,1fr)!important}
  .tdcard .cwhy li i{white-space:nowrap!important}

  /* 榜首三连：桌面上是并排的领奖台，手机上叠成三块，宽度不一样看着像没对齐 */
  .champ{gap:8px!important}
  .champ .cbox{width:100%!important;box-sizing:border-box!important}
  .cbox .cnm{max-width:none!important}

  /* 宽图表（能力×性价比坐标）在手机上横着滑，别硬缩到看不清字 */
  .chartwrap{-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important}

  /* 总榜每一行：名字短的时候（gpt-5.5）等级徽章后面直接接着厂商名，
     跟名字长的行对不齐 —— 手机上把名字和厂商行强制分成两行 */
  #board .row,.lb .row{padding-left:10px!important;padding-right:10px!important}
  .row .nm,.row .n1,.row .n2{display:block!important}
  .row .n1{white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere!important}
  .row .n2{margin-top:3px!important}
  .lbname,.rname{overflow-wrap:anywhere!important}
}

/* ── ⑤ ASI 新天地 asi-newworld ──────────────────────────────────────── */
@media (max-width:760px){
  /* 顶栏那三颗胶囊在这页会折成两行、撑成高椭圆 */
  #topbar .hud{gap:6px!important}
  #topbar .hud>*{white-space:nowrap!important}

  /* 首屏那条「石器 · 火 · 文字 …」比屏幕宽，两头都被切掉 */
  /* 顶栏两行 98px，原来 top:60px 把「Α · 创世纪」那行压在栏底下（09-05 验收截图看见的） */
  .pm-top{left:0!important;right:0!important;padding:0 14px!important;top:118px!important}
  .pm-poem{font-size:11.5px!important;line-height:2!important}
  .pm-poem span{letter-spacing:.02em!important;font-size:.8em!important}

  /* 底部读数条是 inline-flex 不换行，几段字会叠在一起 */
  /* 注意：这里不能用 flex —— 一变 flex，句子里那几个   就被当成
     flex 项之间的空白吃掉，「观测源」和「120」会挤在一起。block + 居中就够了。 */
  .pm-readout{display:block!important;max-width:calc(100% - 28px)!important;
    padding:9px 16px!important;font-size:10px!important;letter-spacing:.06em!important;
    text-align:center!important;line-height:2!important}

  /* 奇点指数圆环：内容 359px 塞进 250px 的壳，数字被切 */
  .ringwrap{width:min(74vw,300px)!important;height:min(74vw,300px)!important}
  .ring-core{max-width:100%!important}
  #bigIdx{font-size:clamp(40px,16vw,72px)!important}

  /* 满屏章节里的诗句 */
  .verse{letter-spacing:.1em!important}
}

/* ── ⑥ 关于我们 about ───────────────────────────────────────────────── */
@media (max-width:560px){
  /* 联系方式两列，右列的邮箱直接顶出屏幕 */
  .contact{grid-template-columns:1fr!important;gap:18px!important}
  .contact .c p{font-size:11.5px!important;overflow-wrap:anywhere!important}
  .numwall{grid-template-columns:repeat(2,1fr)!important}
}

/* ── ⑦ 早期草稿页（没有入口，但别让它们烂着）asi-qidian / asi-xintiandi ── */
@media (max-width:760px){
  /* 起点页总分榜每行五格写死了宽度，合计 364px + padding 就顶出屏幕 */
  .trow{grid-template-columns:34px minmax(0,1fr) auto auto!important;gap:8px!important}
  .trow .mv{display:none!important}
  .trow .nm{overflow-wrap:anywhere!important}
  #sceneGroup,.fgroup{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;scrollbar-width:none!important}
  #sceneGroup::-webkit-scrollbar,.fgroup::-webkit-scrollbar{display:none!important}
  #sceneGroup .chip,.fgroup .chip{flex:none!important}
  svg#scatter{width:100%!important;height:auto!important}
  /* 坐标图点选后的详情面板：手机上「关闭 ✕」压在「google · B 档」上（09-05 晚验收截图），让它单独占一行靠右 */
  .mdetail{position:relative!important}
  .mdetail .dclose{position:static!important;display:block!important;margin:0 0 10px auto!important;width:max-content!important}
  .mdetail .dhd{gap:6px 10px!important}
  .mdetail .dnm{font-size:18px!important}
  .mdetail .dkpi{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .btnbar,.acts{flex-direction:column!important;align-items:stretch!important;gap:10px!important}
  .btnbar a,.btnbar button,.acts a,.acts button{width:100%!important;text-align:center!important}
}


/* ── ⑧ ASI 启示录顶部的金色黑洞（韩宁 2026-09-05：「图片上最上边，你不要遮住它」）──────── */
@media (max-width:760px){
  /* 原来是 top:-10px，图的上沿被推出屏幕、又被 sticky 顶栏压住。
     顶栏改成两行之后实测高 100px（坐标页 88px），把黑洞整个挪到它下面留 12px 空隙，
     并真正水平居中（原来 left:8vw 偏右）。 */
  #blastFx,#fragC{top:112px!important;left:0!important;right:0!important;margin:0 auto!important}
}


/* ── ⑨ ASI 坐标页底部「ASI 指数 · 奇点坐标」（韩宁 2026-09-05：手机端排版有问题）────
   根因：`#qidian .hero` 是 `minmax(300px,430px) 1fr` 两列，358px 的手机容器里
   第一列吃掉 300px，右边文字只剩 78px —— 标题被挤成一个字一行、整块推出屏幕。 */
@media (max-width:760px){
  #qidian .hero{grid-template-columns:minmax(0,1fr)!important;gap:24px!important;
    padding:26px 0 6px!important;text-align:center!important}
  #qidian .ringwrap{max-width:min(292px,76vw)!important;margin:0 auto!important}
  #qidian .ringcore .biggnum{font-size:clamp(52px,17vw,72px)!important}
  #qidian .ringcore .rl{font-size:12px!important;letter-spacing:.36em!important;text-indent:.36em!important}
  #qidian .htxt{min-width:0!important}
  #qidian .htxt .he{font-size:10px!important;letter-spacing:.22em!important;line-height:1.9!important}
  #qidian .htxt h2{font-size:clamp(23px,6.6vw,30px)!important;letter-spacing:.1em!important;
    line-height:1.6!important;margin-top:10px!important}
  #qidian .htxt .hs{font-size:13.5px!important;line-height:2!important;letter-spacing:.04em!important;margin-top:12px!important}
  #qidian .chips{justify-content:center!important;flex-wrap:wrap!important;gap:8px!important}
  #qidian .chips .chip2{font-size:11px!important;padding:5px 10px!important;white-space:nowrap!important}
  #qidian .rail-wrap{margin-top:18px!important}
  #qidian .rail-labels{font-size:9.5px!important;letter-spacing:.06em!important;gap:4px!important}
  #qidian .rail-labels span{white-space:nowrap!important}
  /* 块里其余多列容器一律折成单列，别再有第二个"78px 窄条" */
  #qidian .grid,#qidian .cols,#qidian .two{grid-template-columns:minmax(0,1fr)!important}
}