/* ============================================================
   移动端与动效修正
   ------------------------------------------------------------
   这一整段是后加的，针对三个实际反馈：

   ① 「滑动时页面自己微微放大」
      两个来源，都修了：
        a. [data-reveal="scale"] 让卡片从 95.5% 弹到 100%
           —— 滚动时一张张弹，看起来就是"页面在缩放"
        b. 页面横向溢出（比屏幕宽）→ 手机允许左右拖 + 轻微缩放
      下面把 a 的缩放幅度压到几乎看不见，把 b 根治掉。

   ② 「每点一下像换了个子页面，没有连贯动画」
      加了跨页面转场（View Transitions API）。
      Chrome / Edge / Safari 18+ 支持；不支持的浏览器
      就是原来的直接跳转，不会坏。

   ③ 「手机版做得垃圾」
      逐条修：横向溢出、导航换行、卡片留白、触摸目标、字号。
   ============================================================ */

/* ------------------------------------------------------------
   ① 横向溢出根治
   ------------------------------------------------------------
   这是"页面能左右拖 / 自己缩放"的根因。
   溢出通常是某个元素比视口宽，撑开了整页。
   先给根元素兜一道底，再逐个收窄常见的溢出源。 */
html, body {
  max-width: 100%;
  overflow-x: hidden;        /* 兜底：宁可裁掉也不让整页能左右拖 */
}
*, *::before, *::after { box-sizing: border-box; }

/* 长串（网址、订单号、哈夫币数量）不许撑破容器 */
code, .mono, .order-no, td, th, p, span, b, em, h1, h2, h3, h4 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.wrap { width: 100%; max-width: 100%; }
.card, .box, .pcard, .feature, .contact-item, .kpi2, .sect, .sect-plain {
  max-width: 100%;
  min-width: 0;              /* grid/flex 子项默认 min-width:auto，会撑破 */
}
img, video, svg, canvas { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* 需要横向滚动的表格：只让它自己滚，不带动整页 */
.ptable { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------
   ② 把"缩放入场"降级成几乎察觉不到的位移
   ------------------------------------------------------------
   原来 scale(.955) → 1 的幅度是 4.5%，在手机上肉眼很明显，
   而且卡片一张张触发，观感就是"页面在放大"。
   改成纯位移 + 更小的距离，保留"入场"的感觉但不缩放。 */
.js [data-reveal="scale"] {
  transform: translate3d(0, 12px, 0);   /* 不再用 scale */
}
.js [data-reveal] {
  transition-duration: .34s;            /* 比原来紧凑一点，减少"停顿感" */
}
@media (max-width: 820px) {
  /* 手机上干脆取消位移入场 —— 小屏滚动频繁，任何位移都显得晃 */
  .js [data-reveal],
  .js [data-reveal="up"],
  .js [data-reveal="fade"],
  .js [data-reveal="scale"],
  .js [data-reveal="left"],
  .js [data-reveal="right"] {
    transform: none !important;
    transition: opacity .22s ease;
  }
}

/* ------------------------------------------------------------
   ③ 跨页面转场
   ------------------------------------------------------------
   以前点一个链接 = 整页白屏重画，所以有"停顿一下"的感觉。
   开了 view-transition 之后，浏览器会把新旧页面的对应部分
   做形变过渡（尤其是导航栏和标题），观感连贯很多。

   支持情况：Chrome 111+ / Edge 111+ / Safari 18+
   不支持的浏览器完全不受影响，只是没有这个动画。 */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.32, .72, 0, 1);
}
/* 导航栏固定住，不要跟着做形变 —— 它本来就该一直在那 */
header.nav { view-transition-name: site-nav; }
::view-transition-old(site-nav),
::view-transition-new(site-nav) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ------------------------------------------------------------
   ④ 手机版逐项修正
   ------------------------------------------------------------ */

/* ---- 导航：不许换行挤压，改为可横向滑 ---- */
@media (max-width: 820px) {
  .nav-in {
    flex-wrap: nowrap;
    gap: 10px;
    height: auto;
    padding: 8px 0;
    align-items: center;
  }
  /* 菜单区可横向滑动，登录按钮固定在右边不被挤走 */
  nav.menu {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;   /* app.css 里是 wrap，必须覆盖，否则还是换行 */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
  }
  nav.menu::-webkit-scrollbar { display: none; }
  nav.menu a { padding: 7px 8px; font-size: 13px; flex: 0 0 auto; }
  .nav-in > .btn, .nav-in > a.btn { flex: 0 0 auto; }
}

/* ---- 首屏：手机上别占满一整屏，留出下面的内容 ---- */
@media (max-width: 680px) {
  .hero { padding: 26px 0 4px; }
  .hero h1 { font-size: 26px; line-height: 1.3; }
  .hero .sub { font-size: 14.5px; margin: 12px 0 18px; }
  .hero .eyebrow { font-size: 12px; }

  /* 按钮：手机上撑满更容易点，但两个并排时别挤 */
  .hero .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- 实时数据条：两列，且不许撑破 ---- */
@media (max-width: 620px) {
  .live-strip {
    gap: 12px 10px;
    padding: 14px;
    margin-top: 22px;
    border-radius: 16px;
  }
  .live-sep { display: none; }
  .live-item {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    max-width: calc(50% - 5px);
  }
  .live-item b { font-size: 20px; }
  .live-item span { font-size: 11.5px; }
}

/* ---- 卡片：手机上收紧内边距，内容别顶到边 ---- */
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .card { padding: 16px !important; border-radius: 16px; }
  .pcard { padding: 16px !important; }
  .card h3 { font-size: 16px; }
  .card p { font-size: 13.5px; line-height: 1.7; }

  .sect h2, .sect-plain h2 { font-size: 18px; }
  .sect span, .sect-plain span { font-size: 11.5px; }
}

/* ---- 价目表：手机上不做负边距出血，改成卡片式 ---- */
@media (max-width: 680px) {
  .ptable { margin-left: 0; margin-right: 0; padding: 0; }
  .ptable table { min-width: 420px; font-size: 13px; }
}

/* ---- 触摸目标：按钮和链接不小于 44px ---- */
@media (max-width: 820px) {
  .btn { min-height: 44px; padding: 12px 18px; }
  .chip { min-height: 34px; display: inline-flex; align-items: center; }
  nav.menu a { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ---- 后台 / 客服工作台：手机上侧栏收起，内容占满 ---- */
@media (max-width: 900px) {
  .adm, .cs { display: block; }
  .side, .cs-side {
    width: 100%;
    max-width: 100%;
    position: static;
    height: auto;
    overflow-x: auto;
    white-space: nowrap;
  }
  .side a, .cs-side a { display: inline-block; }
  .main, .cs-main { padding: 14px; min-width: 0; }
}

/* ---- 输入框：16px 防 iOS 聚焦缩放（原来已有，这里再兜一道）---- */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ---- 超窄屏（iPhone SE 一代这种 320px）---- */
@media (max-width: 380px) {
  .wrap { padding: 0 13px; }
  .hero h1 { font-size: 23px; }
  .card { padding: 14px !important; }
  .live-item b { font-size: 18px; }
  .btn { padding: 11px 15px; font-size: 13.5px; }
}

/* ------------------------------------------------------------
   ⑤ flex / grid 子项的 min-width 兜底
   ------------------------------------------------------------
   为什么单列一段：
     flex 和 grid 的子项默认 min-width:auto —— 意思是
     "不许缩到比我的内容还窄"。一行放不下就撑宽整个容器，
     容器撑宽整页，于是手机上出现"只能看到左边一部分"。

     这是手机端横向溢出最常见的根因，而且从截图上看不出来，
     只能靠逐条 min-width:0 压下去。
   ------------------------------------------------------------ */
.wrap, .nav-in, .hero, .hero > *, .live-strip, .live-item,
.grid, .g2, .g3, .g4, .grid > *, .card, .card > *,
.pcard, .pcard > *, .box, .row, .opsbar, .contact-grid, .contact-item,
header.nav, nav.menu, nav.menu a, .btn, .chips, .chip,
main, section, article, aside, footer, .foot {
  min-width: 0;
}

/* 文字类元素不许把容器撑开 */
h1, h2, h3, h4, p, span, b, em, li, td, th, label, small, strong {
  min-width: 0;
  max-width: 100%;
}

/* 按钮在窄屏上换行而不是撑宽 */
@media (max-width: 680px) {
  .hero > div[style*="display:flex"] { flex-wrap: wrap !important; }
  .hero .btn { flex: 0 1 auto; }   /* 改回 0 1 auto：可缩，不强行撑满 */
}

/* ============================================================
   手机端可读性
   ------------------------------------------------------------
   实测（390px 视口）发现的问题：
     · 作战板的难度等级「低/中/高/极高」只有 9.5px —— 挑地图最需要看的信息
     · 套餐标签「新人」「限购一单」10.5px
     · 风险等级「低风险」10px
     · 公告栏每条 28px 高，手指点不准（44px 才是舒适值）

   这些不是"小一点无所谓"，是【该看清的看不清】。
   集中在移动端样式表里覆盖，不动桌面端。
   ============================================================ */
@media (max-width: 680px) {

  /* 公告栏：每条给足高度，手指能点中 */
  .mq-item {
    min-height: 38px;
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .mq-track { align-items: stretch; }
  /* 手机上标签藏起来省地方（原来就有的规则），
     但藏了之后文字得更清楚一点 */
  .mq-item .mq-tag { display: none; }

  /* 作战板的区域列表：难度等级要看得清 */
  .bdw-reg em,
  .bdw-risk,
  .bdw-reg span { font-size: 12px !important; }
  .bdw-reg { min-height: 40px; }

  /* 套餐卡片上的标签（新人 / 限购一单） */
  .hotname em,
  .bdw-svc em,
  .badge { font-size: 11.5px !important; }

  /* 价格的「起」字 */
  .hotprice i,
  .bdw-svc-p i { font-size: 11px; }

  /* 作战板底部那些小字说明 */
  .bdw-foot,
  .bdw-sec { font-size: 11.5px; }

  /* 配队工具的小标签 */
  .lgr-ship .ft,
  .lgr-sec { font-size: 11.5px; }
}