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

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

/* ── ① 全站通用（≤760px）───────────────────────────────────────────── */
@media (max-width:760px){
  /* 谁都不许把页面撑宽：横向滚动是手机上最刺眼的错位 */
  html,body{max-width:100%!important;overflow-x:hidden!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:9px 0 0!important;padding:9px 0 8px!important;
    border-top:1px solid rgba(232,184,75,.14)!important}
  #topbar nav a{margin:0!important;flex:1 1 0!important;text-align:center!important;
    font-size:13px!important;letter-spacing:.04em!important;text-indent:0!important;white-space:nowrap!important}
  #topbar nav a.chon::after{bottom:-4px!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){
  /* 副标题一行 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 负责挂按钮）。 */
  .feed,#vX .xscroll{max-height:none!important;overflow:visible!important;padding-right:0!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: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 横排：一屏一张半，让人一眼知道能往右滑 */
  .tuzhui{grid-template-columns:none!important;grid-auto-columns:78vw!important;gap:12px!important;
    scroll-snap-type:x proximity!important;-webkit-overflow-scrolling:touch!important}
  .tz{scroll-snap-align:start!important}
  #tuzhuiSec{padding-top:28px!important;margin-top:24px!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){
  /* 顶部三格栏目条：手机上横向滑，不折行 */
  .subChan{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important}
  .subChan::-webkit-scrollbar{display:none!important}
  .subChan a,.subChan .lbl{white-space:nowrap!important;flex: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:30px!important}
  .tdcard .cn{font-size:19px!important;line-height:1.3!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:12px!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:46px!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}
  .tdcard .ctot .medal{width:38px!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}

  /* 首屏那条「石器 · 火 · 文字 …」比屏幕宽，两头都被切掉 */
  .pm-top{left:0!important;right:0!important;padding:0 14px!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}
  .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}
}