/* =============================================================================
   COPTUS · 手机触控层（brand-touch.css）
   2026-10-23 立 · 唯一职责：**只在手机上**补齐「交互与可读性」的底线与质感。
   -----------------------------------------------------------------------------
   为什么单独一个文件，而不是继续往 brand-page.css 末尾追加
   ------------------------------------------------------
   1) **层叠顺序**：本站样式是 `brand → -home → -member → -deck → -page`（顺序即层叠），
      但 shop.html 还引 `shop.css`、decks/meta 引 `env.css` —— 它们都在 `-page` **之后**。
      于是任何写在 `-page` 里的手机规则，都会被这些后加载文件里同等具体度的规则反压
      （`.shop-search` 的 13.5px 就是这么赢的）。本文件排在 `brand-page.css` 之后加载，
      **手机层规则不再靠"谁写在后面"赌运气**。
      ⚠️ 2026-10-24 00:03 起 `motion.css` 排在本文件之后（它最后加载）——
      但它只写 `.mv-*` 动效类与 `:focus-visible`，与手机层的选择器零重叠，
      所以"后加载被反压"这个问题在手机层依然不存在。**本文件不写动效时长**
      （token 在 `motion.css`），也不写焦点环（它已有）。
   2) **回滚粒度**：手机层全部集中在这里，删一行 `<link>` + 删本文件就干净回退，
      不用在 116 KB 的 brand-page.css 里挑片段。
   3) **单一真相**：同一件事（按下反馈 / 输入框 16px / 触屏 hover 残留）只在本文件出现一次。

   本文件写什么、不写什么
   ----------------------
   只写三类：① 触屏物理特性（无 hover、精度低、有安全区）；② 无障碍偏好（**降低透明度**；
   「减少动效」归 `motion.css`，见 A/B 两段说明）；③ 长文可读性。
   **不写**版式重构、不写配色、不动尺寸预算 —— 那些属于各组件自己的文件。

   依据（2026-10 检索，均为当前在用规范）
   --------------------------------------
   · iOS HIG：触控 44×44pt；按下反馈 <100ms；Dynamic Type / 安全区。
   · Material Design 3：组件级过渡 200ms、跨屏 300ms；只用 opacity/transform 做动效。
   · WCAG 2.2 AA：2.4.11 焦点不被吸顶栏遮住；2.5.8 目标 ≥24px（本站手机端已统一 ≥40）。
     2.3.3 动效可关闭 → 必须响应 `prefers-reduced-motion`。
   · iOS 26 Liquid Glass 兼容清单：`backdrop-filter` 层要提供 `prefers-reduced-transparency`
     降级，否则"降低透明度"用户看到的是糊字；模糊层在滚动时每帧重算，低端机要能让用户关掉。
   · `content-visibility: auto` 在 2026 baseline，但**条目数 <200 时反而更慢**
     （实测 200 卡时 16.8ms vs 14.4ms）—— 本站列表最多 43 条，故**不用**，继续用 lazy 图。
   ========================================================================== */

/* ==========================================================================
   A · 动效时长 —— **不在这里定义，用 `motion.css` 那一套**
   --------------------------------------------------------------------------
   2026-10-24 00:03 另一个窗口上线了全站动效层 `assets/css/motion.css`，
   已有唯一一套：`--mv-1(120ms) / --mv-2(200ms) / --mv-3(320ms) / --mv-4(520ms) /
   --mv-ease / --mv-ease-io / --mv-spring`。
   我原本在这里写了 `--mv-fast/base/slow` + 一条 `--mv-ease`，属于**第二份真相**，
   而且 `--mv-ease` 同名不同值（我 `.2,.8,.2,1` vs 他们 `.22,1,.36,1`）——
   两个文件一前一后，谁后加载谁改掉全站缓动，这种"第二份"只会制造灵异现象。
   已删干净，本文件只引用 `var(--mv-1)`。
   ========================================================================== */

/* ==========================================================================
   B · 无障碍偏好兜底（不限断点 —— 这是用户级系统设置，PC/手机同样要尊重）
   --------------------------------------------------------------------------
   B1 减少动效：不是"动画慢一点"，而是**基本不动**。
      0.01ms 而不是 0：有些脚本靠 `transitionend` 收尾，时长为 0 会永不触发。
      同时把 `scroll-behavior` 拉回 auto —— 平滑滚动本身就能让前庭敏感用户晕。 */
/* ⚠️ 2026-10-24：这条是**站点级**的无障碍兜底（系统开了"减少动态效果"就把动画压到 0.01ms）。
   它会把首页轮播一起压掉 —— 店主反馈「轮播动画没了」就是撞在这。
   现在加了 `:not(.mv-force)`：`html.mv-force` 表示"用户在本站明确要求播放动效"
   （SVE.Motion.set(true) 会加这个类），此时这条兜底不生效，动画照常。 */
@media (prefers-reduced-motion: reduce) {
  html:not(.mv-force) *,
  html:not(.mv-force) *::before,
  html:not(.mv-force) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* B2 降低透明度（iOS 26 / Android「移除动画·提高对比度」同族设置）：
      本站顶栏与弹窗遮罩都用了 backdrop-filter，用户开了这个开关时
      半透明会变成"糊一层字"。这里直接退回不透明底，保证对比度。 */
@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .mask,
  .fmodal,
  #upMask {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--ink) !important;
  }
}

/* ==========================================================================
   C · 手机层（≤900px，与视口字典的手机断点一致；PC 一个像素都不碰）
   --------------------------------------------------------------------------
   🔴 2026-10-24 补：「手机横屏」也算手机层。
     原来只有 `max-width:900px`，而 16 Pro Max 横屏宽 **932 > 900** ——
      整层手机规则全部失效，触屏拿到了鼠标尺寸的控件（实测 13×13 的圆点、
      30×30 的收藏心、35 高的网格切换、39 高的下拉框）。
      条件扩成「窄 或（矮 且 粗指针）」：
        · 手机横屏 高 430–440，会被 (max-height:520px) 收进来；
        · iPad 横屏 高 768–834，不受影响（它本来就该用平板/桌面档）；
        · 桌面鼠标 `pointer:coarse` 不成立，PC 仍然一个像素不动。
   ========================================================================== */
@media (max-width: 900px), (max-height: 520px) and (pointer: coarse) {

  /* ── C1 · 按下反馈 ──────────────────────────────────────────────────────
     手机上 hover 永不触发，原本全站只有 5 条 :active（都在轮播箭头和筛选球上）。
     方案选 `opacity: .7` 是**量出来的**：`_dev/_probe_tapstyle.cjs` 出对照图、
     `_dev/_probe_tapdiff.cjs` 量像素差 —— 深色底上 brightness(.86) 只差 0.41/255（看不出），
     半透明 .7 是 1.09/255，且正是 iOS 原生按钮的按压观感。
     不用 transform: scale()：`.hc-nav` 靠 translateY(-50%) 居中、`.hc-slide` 靠
     transform 位移，一条全局 transform 会把它们顶歪。 */
  a:active,
  button:active,
  select:active,
  [role="button"]:active,
  .cnd-card:active {
    opacity: .7;
    transition: opacity var(--mv-1, 120ms) linear;
  }

  /* ── C2 · 触屏没有 hover：把"悬停才出现"的效果在手机上收回 ──────────────
     这是手机上最容易被忽略的脏状态：点一下卡片，`:hover` 会**一直保持**
     到点别处为止 —— 用户看到的是"这张卡自己抬起来了、还放大了一点"、
     "这块筛选变成金色的了"，像是选中了但没有任何选中语义。
     2026-10-24 补第二轮（上一轮只清了 transform）：**位移、描边、底色、投影一起退**，
     否则"点过的"仍然像"选中的"。五个组件的静态长相是同一个口径
     （`background: var(--ink-2); border: 1px solid var(--ink-4)`），所以一条规则能覆盖。
     🔴 三个必须用 `:not()` 保护的真·选中态，不能被这条误伤：
        `.vchip.cur`（品相当前选中）、`.fgroup.has/.on`（这一块正在参与筛选 / 展开）、
        `.vchip.out`（不可选的品相）。它们本来就该是金色描边，退成灰就是 bug。
     （上一轮写的 `.fgroup:hover{background:transparent}` 是错的 —— 静态底是 `--ink-2`
       不是 transparent，已一并修正。） */
  .pcard:hover,
  .shop-card:hover,
  .dk-tile:hover,
  .ref-card:hover,
  .shop-blk:hover,
  .fgroup:hover:not(.has):not(.on),
  .vchip:hover:not(.cur):not(.out) {
    background: var(--ink-2);
    border-color: var(--ink-4);
    transform: none;
  }
  /* `.shop-card` 与 `.pcard` 的 hover 还带投影，投影不清会留下一层"浮起来"的阴影 */
  .pcard:hover,
  .shop-card:hover {
    box-shadow: none;
  }
  /* 卡图/商品图的 hover 放大也一起停掉（否则边缘会一直卡在放大后的裁切位） */
  .pcard:hover .pcard-thumb img,
  .shop-card:hover .shop-art img,
  .dk-tile:hover .dk-tile-th img,
  .ref-card:hover .ref-thumb img {
    transform: none;
  }

  /* ── C3 · 输入框 ≥16px ─────────────────────────────────────────────────
     iOS 对 <16px 的控件聚焦时**强制放大整页**。注意这条不是新规范：
     brand-page.css 里一直写着 `input,textarea,select{font-size:16px}`，
     但被 `.input{13px}` / `.up-note textarea{12.5px}` 这类**类选择器**按优先级压掉了。
     这里用同具体度的选择器点回来（元素选择器永远打不过类选择器，与先后无关）。 */
  .input,
  .shp-q,            /* 商城搜索框（2026-10-24 重构后从 .shop-search 改名，实测 12.5px → iOS 聚焦会放大整页） */
  .up-note textarea,
  .ed-note textarea {
    font-size: 16px;
  }

  /* ── C4 · 长文可读性 ───────────────────────────────────────────────────
     规则页是本站唯一的"阅读型"页面，正文实测 13px / 行高 1.65。
     手机上 13px 的中文正文读起来是"要凑近看"的，而 16px 是 iOS 不缩放、
     也是各规范给正文的下限。这里只抬**正文**，标题与徽章不动。 */
  .rulespage .a {
    font-size: 16px;
    line-height: 1.8;
  }
  .rulespage .rq {
    font-size: 15px;
    line-height: 1.7;
  }
  /* 中英混排的长句给一点字距，手机上更"松"一点；不改字号不动行高 */
  .rulespage .a,
  .rulespage .rq {
    letter-spacing: .005em;
  }
  /* 断行：正文不做"孤字掉行"（`pretty` 让最后一行别只剩一两个字），
     标题做均衡断行（`balance`）。两者都是纯渲染层优化，不改变盒模型。 */
  .rulespage .a,
  .rulespage .rq,
  .cnd-body,
  .cnd-sec p,
  .page-note p {
    text-wrap: pretty;
  }
  h1, h2, h3 {
    text-wrap: balance;
  }

  /* ── C5 · 安全区（viewport-fit=cover 已在 23 页铺好，这里补消费端）─────
     顶栏是 `position: sticky`，竖屏时 inset-top 通常为 0（浏览器已让出状态栏），
     但**横屏**刘海会压到左右两侧。只在有刘海/圆角的机器上生效，
     普通机器上 env() = 0，等于没写。
     ⚠️ 底部悬浮球（`.fab-filters`）的 `bottom/right` 已经在 brand-home.css 里
     带过 `env(safe-area-inset-*)` 了 —— **不要在这里再写一遍**（同一份真相只存一处）。 */
  #site-header .topbar {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* ── C6 · 滚动质量 ─────────────────────────────────────────────────────
     ① 弹窗/抽屉内的滚动不再"传染"给背后的页面（iOS 橡皮筋会连环触发）；
     ② iOS 惯性滚动显式打开（老 WebKit 上 `overflow:auto` 默认可滚动但不带惯性）。 */
  .mask,
  .fmodal,
  .filters-in,
  .dk-sheet-bd,
  .modal-bd {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ── C7 · 焦点环 —— **已撤除**，交给 `motion.css` ──────────────────────
     motion.css（00:03 上线）里已经有全局的
       `:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }`，
     覆盖全站全部可聚焦元素（WCAG 2.4.11 要的正是"别被吸顶栏整个盖住"，
     2px 描边 + 2px 偏移已经够）。我在这里再写一份只会在手机上重复一遍，
     而且会额给元素加 `border-radius` —— 焦点态的圆角是个没人要的副作用。
     一条规则只该有一处。 */

  /* ── C8 · 首页轮播的「页码」在手机上要顶得上控制的位置 ──────────────────
     2026-10-24：手机端撤掉悬浮箭头（见 brand-home.css 的 ≤680 段），
     页码点从此是这个轮播**唯一可见的控制**，所以按 Baymard 的移动端判据调：
       · 命中区保持 40×40（20:30 定的触控底线，不动）；
       · 视觉菱形 11 → 12px、选中态放大 1.25 → 1.3 —— 让"当前第几张"一眼看得出；
       · 行距 14 → 0：40px 的命中盒本身就撑开了间距，再加 14px 会松到像"四个孤立的点"；
       · 上下留白 18/6 → 10/2：省出 12px 给下面的六格入口（首页首屏每一像素都算数）。
     ⚠️ 这些数值必须写在**本文件**（最后加载），因为 `brand-page.css` 里也有
        `.hc-dots button::before` 的手机规则，写在 `brand-home.css` 里会被它压回去。 */
  /* 2026-10-24 再收一档（店主第二次圈图：「还可以继续缩小」）：12 → 9 → **7px**。
     命中盒始终是 40×40，所以"看得更小、按得更准"。 */
  .hc-dots {
    gap: 0;
    padding: 4px 0 0;
  }
  .hc-dots button::before {
    width: 7px;
    height: 7px;
  }
  .hc-dots button.is-on::before {
    transform: rotate(45deg) scale(1.3);
  }

  /* ── C9 · 首屏纵向节奏 ─────────────────────────────────────────────────
     `.sec` 的全局间距是 `margin: 54px 0`（桌面合适）。但手机首屏只有 844px，
     轮播底下再空 54px，等于把「公告」整块推到折线以下。
     只收**紧跟 hero 的那一个 .sec**（`#heroCarousel + .sec`），
     别的页面、别的 section 一个都不动。
     ⚠️ 图片高度**没有**往上加：加大 `--hc-h` 会让主图变宽、左右"露出的下一张"
        从 13px 缩到 6px —— 那个露边是"可以滑"的唯一视觉线索，
        比多 10px 画面高度重要。 */
  #heroCarousel + .sec {
    margin-top: 22px;
  }

  /* ── C10 · 页脚「动效」开关的可点区域 ──────────────────────────────────
     这个按钮是 2026-10-24 00:05 另一个窗口加的（`store.js` 的 `wireMotionToggle`
     + `brand.css` 的 `.footer-motion`），设计意图是"像一条脚注、不抢视觉"，
     于是只有 11px 字、20px 高 —— 视觉上完全对，**但手机上 20px 高按不准**
     （视口守卫把它记成观测项：`button.footer-motion(81x20)`，12 页都有）。
     处理方式：**只加高度、不动字号与下划线** —— 脚注还是脚注，按起来是 40。
     不改他们的文件：他们的 `brand.css` 一行没动，这里用手机断点补一条。 */
  .footer-motion {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* ── C11 · 规则页「九步图」：图占满整行 + 能看出可以横滑 + 图注读得清 ─────
     2026-10-24 店主：「规则这一栏全是问题，很多地方字都看不到了」。实测三个问题：
       ① **图注被吞进滚动框**（根因是 `guidefig.js` 的 `scene()` 少关一个 `<div>`，
          已修）。修之前图注是 11.5px 灰字压在深蓝垫子上 → 就是"字看不见"。
       ② **图只占正文那一列**：`.gstep` 是 `24px | 1fr` 两列，图落在第二列，
          手机上只有 **260px**；而图本身 `min-width:560px` → **右侧 54% 被藏起来**
          （战场 / 额外区 / 牌堆 / "能打"标签全在框外），而且没有任何"可以滑"的提示。
       ③ 正文 13px、条款号 10.5px，手机上偏小。

     为什么是"让它放得下"而不是"让它滑"：`brand-page.css` 的手机段给
     `.gscene` 压了 `min-width:560px`，但实测**它的内容只需要约 290px**
     （5 个 44px 卡格 + 间距 + 两条 24px 竖标签），多出来的宽度只是空白。
     把 `min-width` 放到 280 后，390 宽的手机上一屏就能看到**整张图**
     （战场 / 额外区 / 牌堆全在视野里），不必再横滑。
     ⚠️ 顺手核过一个担心：图内的竖标签「对手场地」本来就和卡格重叠 **70%**
        （560 布局下实测就是 70%），所以缩窄**没有**引入新的重叠问题。
     只有 ≤380px 的窄屏才可能真的需要滑（容器 < 280），那里才显示提示语。 */
  .gstep .gfig {
    grid-column: 1 / -1;
  }
  .gsteps .gscene {
    min-width: 280px;
  }
  .gsteps .gfig-bd {
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  /* 图注：结构修好后它已经在 `.gfig-bd` 外面，这里只保证读得清
     （11.5px + `--text-3` ≈ 4.2:1，压线；13.5px + `--text-2` ≈ 9:1） */
  .gsteps .gfig figcaption {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--text-2);
  }
  /* 正文与条款号各抬一档：正文是"要读懂"的内容，条款号是"要能回查"的索引 */
  .gstep-bd p {
    font-size: 14.5px;
    line-height: 1.8;
  }
  .gstep-c {
    font-size: 11.5px;
  }

  /* 只有 ≤380px（容器 < 280px，图确实放不下）才给滑动提示，别到处挂一句废话 */
  @media (max-width: 380px) {
    .gsteps .gfig::before {
      content: "← 左右滑动看全图 →";
      display: block;
      margin: 0 0 6px;
      font-size: 11.5px;
      letter-spacing: .02em;
      color: var(--text-3);
    }
  }

  /* ── C12 · （已撤除，2026-10-24 14:45）──────────────────────────────────
     13:25 这里加过「短页沉底」：`main{min-height:calc(100svh - 顶栏高)}`，
     本意是治 cart 页页脚停在半屏。结果踩到首页：index.html 末尾有一个
     **空的 `<main class="wrap">`**（内容全在它前面的 `<section>` 里），
     这条规则把它撑成 726px 的空白 —— 店主截图圈的就是「正文和尾页之间那么长的空隙」。
     教训：`min-height` 这类"无差别撑高"的规则，必须先把目标页面里
     **每个 main 是不是真有内容**量一遍，否则它会把空容器放大成事故。
     要重做「页脚不在半屏」的话，正确做法是**只对确实有内容的短页**下手
     （`main:has(> *)` 之类），或者干脆接受"页脚紧跟内容"——那本来就是正常布局。 */

  /* ── C13 · 卡库列数分档 ────────────────────────────────────────────────
     实测：430 上单卡 193px（还行），**673（折叠屏展开）上单卡 315px** ——
     一屏只看到 2 张卡，滚动成本极高；而同宽的商城早就 4 列 153px。
     这里只调 `#rGrid`（卡库主网格），不碰 `.grid` 的其它用法（如 `.grid.g-21` 两栏版式）。
     断点取 560 / 740：360–560 仍是 2 列（360 屏单卡 142px 已经很小了，不能再切）。 */
  @media (min-width: 560px) {
    #rGrid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  @media (min-width: 740px) {
    #rGrid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* 商城「去卡库」那条跳转链接：竖屏也是 38 高（2026-10-24 量到），顺手抬到 40。
     （横屏那份在下面的 C-L 里，因为横屏走的是另一套断点条件。） */
  .shp-jump {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* ── C14 · 手机页脚（2026-10-24 整段重做，店主：「太难看了，从头到尾重新做一版」）──
     检索到的移动端页脚共识（1footer / The Hangline / ORON，2026）：
       · 单列堆叠，按重要性从上到下；联系方式前置（本地店最该被找到的就是地址与联系入口）
       · 正文 ≥14px、行高 1.6–1.8、链接间距 12–16px，触控 ≥44（本站基线 40）
       · 手风琴只适合 30+ 链接的胖页脚 —— **我们只有 6 个链接，硬上折叠是负收益**
       · 底部一条"法务/版权带"，比正文弱一档
       · 页脚要有"结束感"：底色比正文深一档，做视觉收口
     具体做法（四段式）：
       ① 品牌段：一句话说清"我们是谁、卖什么"
       ② 门店卡片：地址 + **在地图中打开**（原来地址是不可点的纯文本，等于没有下一步）
       ③ 联系方式：4 行，每行 40 命中，左岗位右「待补充」（弱化，不再让占位符抢戏）
       ④ 官方账号 + 底部条（© / 动效 / 回到顶部）
     为什么不做折叠：门店/联系方式本来就是这家店的核心信息，
       手机上一滑到底就能看完，比点两下展开更快；折叠还会藏掉"待补充"这类健康度信号。 */
  .footer {
    margin-top: 32px;
    background: var(--ink-2);
  }
  .footer-in {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 0 6px;
  }
  /* DOM 顺序被冒烟锁成「品牌 / 门店 / 账号 / 负责人」（`.footer-in > div:nth-child(4) li` = 4），
     但手机上"怎么联系"比"B站"重要得多 → 用 order 换顺序，不动结构。 */
  .ft-social { order: 4; }
  .ft-people { order: 3; }
  /* 分段用细横线拉开节奏（比纯留白更"有结构"，又不占高度） */
  .footer-in > div {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }
  .footer-in > div:first-child { padding-top: 2px; }
  .footer h4 {
    font-size: 12.5px;
    letter-spacing: .14em;
    margin-bottom: 8px;
  }
  .footer p,
  .footer li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-2);
  }
  /* ② 门店做成一张卡片：它是这一页最该被"点一下"的东西 */
  .footer-in > .ft-store {
    margin: 10px 0;
    padding: 14px 14px 15px;
    border: 1px solid var(--ink-4);
    border-radius: 12px;
    background: var(--ink-3);
  }
  .ft-store h4 { color: var(--text-3); }
  .ft-act {
    display: flex;
    width: 100%;
    min-height: 40px;
    margin-top: 10px;
    font-size: 13.5px;
    border-radius: 10px;
  }
  /* ③ 联系方式：四项都是短标签，两列排开比竖排四行省一半高度；
        它们不是可点元素，不需要 40 的命中高度，只要读得清。 */
  .ft-people ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 0;
  }
  .ft-people li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
  }
  .ft-people li span {
    font-size: 12.5px;
    color: var(--text-3);
  }
  .ft-people li em {
    font-size: 13.5px;
    color: var(--text-2);
    margin: 0;
  }
  /* ④ 官方账号：整行可点，不再是贴着左边的一小串字 */
  .ft-social li {
    min-height: 40px;
    display: flex;
    align-items: center;
    margin: 0;
  }
  .ft-social li a { color: var(--gold-ink); }
  /* 底部条：© 一段 + 一行两个控件（动效 / 回顶），不再"一行挤三样"也不会各占一行 */
  .footer-note {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    padding: 12px 0 calc(20px + env(safe-area-inset-bottom, 0px));
    font-size: 12.5px;
    line-height: 1.7;
  }
  .footer-note > span:first-child {
    flex: 1 1 100%;          /* © 长句独占一行，后面的两个控件并排 */
    color: var(--text-3);
  }
  .footer-note .mono { display: none; }   /* 英文副标在手机上是纯噪音，桌面端保留 */
  .footer-motion {
    flex: 0 1 auto;
    font-size: 12.5px;
    min-height: 40px;          /* 触控底线 40：38 会被视口守卫记一笔（实测 88 次） */
    display: inline-flex;
    align-items: center;
  }
  .footer-top {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    font-size: 12.5px;
    justify-content: center;
  }

  /* ── C15 · 手机首页「轮播 + 六格」正好占满一屏（2026-10-24 店主指定）────────
     要求原话：「设置成这边刚好能填满首页一页，尽可能让轮播图大一些」。
     这里有个物理约束必须先说清：轮播是 16:9 的纯图，**高度由宽度决定**
     （`--hc-h = (100vw − 2×露边) × 9/16`）。所以"尽量大"的天花板就是"宽度占满"：
       改前 50vw        → 195px（左右各露 21px）
       改后 只露 10px   → 208px（390 宽）
     再往上加高，图就会横向超出屏幕 —— 那不是"更大"，是裁图。
     剩下的一屏高度交给六格吃掉：`.tool-panel` 用 `calc(100svh − 上面所有块)` 兜底，
     卡片用 `grid-auto-rows:1fr` + `height:100%` 撑满，于是**任何屏高都刚好填满**，
     不用为 844 / 800 / 932 各写一套魔法数字。
     ⚠️ 公式里的每一项都对应一个真实尺寸：顶栏 `--topbar-h`（store.js 实测写入）、
        hero 上下内边距 14/10、页码行 4+40、hero 与面板间距 22。改任一项要同步这里。 */
  @media (max-width: 680px) {
    /* ⚠️ 必须挂在 `:root`：`.tool-panel` 不在 `#heroCarousel` 里，
       `--hc-h` 定义在轮播上**不会被兄弟节点继承** —— 第一版就是这么错的：
       面板的 calc 一直取兜底值 208px，360 屏余 16px、430 屏溢出 24px。 */
    :root {
      --sve-hc-h: calc((100vw - 20px) * 9 / 16);   /* 20px = 左右各露 10px 的"还有下一张"线索 */
    }
    #heroCarousel {
      --hc-h: var(--sve-hc-h);
    }
  }
  #heroCarousel + .sec .tool-panel {
    min-height: calc(100svh - var(--topbar-h, 118px) - 14px - var(--sve-hc-h, 208px) - 44px - 10px - 22px);
    display: flex;
    flex-direction: column;
  }
  #heroCarousel + .sec .tool-grid {
    flex: 1 1 auto;
    grid-auto-rows: 1fr;
  }
  #heroCarousel + .sec .tool {
    height: 100%;
    /* 块被撑高后，内容顶对齐会在每格底部留一大块空白（截图里很明显）；
       纵向居中让图标/标题/说明落在格子中间，六格看起来才"满"而不"空"。 */
    justify-content: center;
  }

  /* ── C16 · 手机商城（2026-10-24 店主：「手机里的商城太烂了」，并要求一行 3 个商品）──
     这页 15:58 刚被另一窗口重构成 `shp-*` 结构（样式在 `shop-v3.css`），
     所以下面**只做手机端的覆盖**，不动他们的文件与 DOM。
     先是三条实测出来的问题：
       ① 首屏全被"头"占满：标题 36 + 统计 19 + 分类 38 + 标题行 89 + 轮播 168 = 350，
          商品网格从 **601px** 才开始 —— 844 的屏上第一张卡（333 高）只能露 1/4。
       ② 商品 2 列、单卡 174px 宽，一屏只 2 个，翻 22 个商品要滑很久。
       ③ 轮播页码 40×40 的金色大圆点：他们家是"16×3 的细条 + 选中 24×3"，
          和我们家的"40 命中盒 + 小菱形"撞在一起，变成了那个黄圆。
     对应改法：
       ① 标题/统计各降一档、分类 34→40（触控底线）、标题行并成一行、轮播 120→96、
          页间距 14→10 —— 网格顶从 601 提到 ~380，首屏能看满一行 3 个。
       ② `.shp-grid` 固定 3 列，并同步收卡片内部（名称 2 行截断、价格 19→15、内边距 12→8）。
       ③ 页码统一成"透明 40 命中盒 + 9px 菱形"，与首页口径一致，黄圆消失。 */
  .shoppage.shp {
    gap: 10px;
    padding-top: 12px;
  }
  .shp-title {
    font-size: 19px;
  }
  .shp-title em {
    font-size: 9.5px;
    vertical-align: 2px;
  }
  .shp-counts {
    margin: 2px 0 8px;
    font-size: 11px;
    gap: 2px 10px;
  }
  .shp-cats {
    padding-bottom: 2px;
    gap: 5px;
  }
  .shp-cat {
    height: 40px;           /* 原来 34：手机横向滚动的页签，34 高容易点偏 */
    padding: 0 13px;
  }
  .shp-hd {
    padding-bottom: 8px;
    gap: 8px;
    flex-wrap: nowrap;        /* 他们原来 wrap：手机上搜索框换行后这一条占 82px，白吃掉 34px */
  }
  .shp-hd h2 {
    font-size: 15px;
    flex: none;
  }
  .shp-q {
    height: 40px;
    width: auto;              /* 他们写的 width:100% 会强制换行 */
    flex: 1 1 auto;
    min-width: 0;
  }
  /* 活动条高度：他们的写法是「容器 height:150 / 手机 120」，而 `.hc` 又带
     `padding: 0 0 18px` + `.hc-viewport` 的 `padding-top:28` → 实际占 222px（实测）。
     这里把容器压到 **104px 并清掉内边距**，条子才真的是"矮横条"。
     图仍是 `object-fit: cover`（他们的设计：公告图裁上下、文案落在 42% 位置），
     所以**不要**改 `--hc-h` —— 对这套结构它已经不决定高度，改了只会误导下一个人。 */
  .hc.spb.shp-strip {
    height: 104px;
    padding: 0;
  }
  .hc.spb.shp-strip .hc-viewport {
    padding-top: 0;
  }

  /* ② 一行 3 个 */
  .shp-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }
  .shp-info {
    padding: 8px 8px 9px;
    gap: 2px;
  }
  .shp-name {
    font-size: 12px;
    line-height: 1.3;
  }
  .shp-sub {
    font-size: 10px;
  }
  .shp-pre {
    font-size: 9.5px;
  }
  .shp-foot {
    margin-top: 6px;
    padding-top: 6px;
  }
  .shp-price small { font-size: 9.5px; }
  .shp-price b { font-size: 15px; }
  .shp-price s { font-size: 9px; margin-left: 4px; }
  /* 3 列后卡片只有 114px 宽，40px 的圆形"进入"按钮会占掉三分之一。
     保留它的**视觉**（28px 圆 + 箭头），但把命中交给整张卡 ——
     `.shp-card` 自己就是点击入口（shop.html 用 `closest('.shp-card')` 接的），
     点箭头等于点卡片，行为一致，命中面积从 28×28 变成 114×252。 */
  .shp-go {
    width: 28px;
    height: 28px;
    font-size: 11px;
    pointer-events: none;
  }
  .shp-cta {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
  }

  /* ③ 活动条页码：他们本来设计成「16×3 细条 / 选中 20×3 金条」，
     但被我们手机层的 40×40 命中盒 + 我加的菱形叠成了那个**金色大圆点**（店主截图里很显眼）。
     这里在他们的层上恢复原设计：清掉菱形、恢复细条，只保留 40 高的透明命中区
     （`padding-block` 向外撑不影响布局，因为容器是 absolute 贴底的）。 */
  /* 用 `#shopBanner` 提权（1,1,1）压过他们的 `.shp-strip .hc-dots button.is-on`（0,3,1），
     不加 `!important` —— 这一层只是"手机端修正"，不该比他们的设计更硬。 */
  #shopBanner .hc-dots {
    left: 12px;
    bottom: 6px;
    gap: 5px;
    padding: 0;
    align-items: center;
  }
  #shopBanner .hc-dots button {
    /* 🔴 必须显式清掉 min-width/min-height：brand-page 的"触控 40px"块写的是
       `min-width:40px; min-height:40px`，而 min-* 会压过 width/height ——
       不清就一直是个 40×40 的方盒（金色那版就是它撑出来的）。 */
    width: 40px;            /* 命中盒 40×40（视觉靠 ::before 的细条，见下） */
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  #shopBanner .hc-dots button::before {
    content: "";
    width: 16px;
    height: 3px;
    border: 0;
    border-radius: 99px;
    background: rgba(255, 255, 255, .32);
    transform: none;
  }
  #shopBanner .hc-dots button.is-on {
    width: 40px;
  }
  #shopBanner .hc-dots button.is-on::before {
    width: 20px;
    background: var(--gold);
    transform: none;
  }

  /* ── C17 · 卡库 / 详情弹窗 / 商城竖线（2026-10-24 店主连提四条）────────── */

  /* ①a 卡库导航下那 56px「意味不明的空格」：`main.wrap` 的 padding-top 30 +
        `.shop` 的 padding-top 26 叠出来的。手机上一共只留 16px。
        （用 `:has(.shop)` 限定在卡库这一页，别把别的页 main 的留白一起削了。） */
  main:has(.shop) {
    padding-top: 10px;
  }
  .shop {
    padding-top: 6px;
  }

  /* ①b 卡库一行 3 个。原来 ≤680 是 2 列（单卡 ~150），店主明确要 3 个。
        3 列后单卡约 110，卡名/编号/价格同步收一档，否则会溢出。 */
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }
  .pcard-name {
    font-size: 11.5px;
    line-height: 1.35;
  }
  .pcard-no,
  .pcard-cls {
    font-size: 10px;
  }
  .pcard-body {
    padding: 8px 8px 9px;
  }
  .price b {
    font-size: 15px;
  }

  /* ② 详情弹窗的两个价格块并排（卡普塔斯售价 / 日本行情价）。
        原来 brand-deck 的手机段写的是 `1fr`（竖排），店主说"这两个放在一行"。 */
  .cd-prices {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cd-pbox {
    padding: 10px 10px 11px;
  }

  /* ③ 删掉左右箭头（改成滑动手势，逻辑在 cardmodal.js 的 wireSwipe）。
        只在手机隐藏 —— 桌面端鼠标没有"滑"这个动作，箭头仍然是必需的。 */
  .cd-nav {
    display: none;
  }
  /* 让横向手势归我们：弹窗内部只需要纵向滚动 */
  .cd-sheet {
    touch-action: pan-y;
  }

  /* ④ 商城右侧那根竖线：`.shp-side` 的 `border-right` 是**双栏布局**才需要的东西，
        手机是单列，右边框就成了屏幕边上一条莫名其妙的线。 */
  .shp-side {
    border-right: 0;
  }

  /* ── C18 · 详情弹窗顶部被裁 + 卡库卡面精简（2026-10-24 店主实测）────────── */

  /* ① 弹窗顶部被浏览器工具栏压住：他们写 `max-height: 94vh`，
       而 `vh` 用的是**布局视口**（比地址栏可见区域大），手机上就会顶出去一截。
       换成 `dvh`（跟随可见区域）并给刘海/小白条留出安全区。 */
  .cd-mask {
    padding: calc(6px + env(safe-area-inset-top, 0px)) 6px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .cd-sheet {
    max-height: calc(100dvh - 12px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    width: 100%;
  }
  /* 弹窗打开时 `open()` 会把焦点放到 `.cd-sheet`（tabindex=-1，为了读屏与 Esc），
     于是 `:focus-visible` 给它描了一圈金色 —— 手机上就是"整页一圈黄框"。
     容器本身不是可操作控件，不需要焦点环；内部按钮的焦点环照旧。 */
  .cd-sheet:focus,
  .cd-sheet:focus-visible {
    outline: none;
  }

  /* ② 卡库卡片：**只留卡图 + 名字**（店主：「把手机端这些全删了吧，只剩下名字，
        然后让卡图尽可能大一些」）。删掉的三行是：职业 / 编号 / 价格+字段。
        做法不是"把字缩到看不见"，而是真的不渲染：
          · 去掉卡片的 12px 内边距和 10px 间距 → 图直接顶到卡边；
          · 名字叠在图底部（渐变遮罩上），**不占额外高度** → 卡图拿到全部剩余空间。 */
  .pcard {
    padding: 0;
    gap: 0;
  }
  .pcard-thumb {
    border-radius: 10px;
  }
  .pcard-cls,
  .pcard-no,
  .pcard-foot {
    display: none;
  }
  /* 卡面上的收藏心也去掉（2026-10-24 店主：「收藏键也可以删了，手机端玩家如果要收藏
     需要点进去收藏」）。理由很实在：3 列后卡只有 114px 宽，心形按钮压在卡图上
     既挡画面、又和整卡点击区域打架（点歪一下变成收藏）。
     收藏能力不丢：详情弹窗底部仍有「☆ 收藏」，`.cd-fav` 不受这条影响。 */
  .pcard .fav-btn {
    display: none;
  }
  .pcard-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin: 0;
    padding: 16px 7px 7px;
    font-size: 11px;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
    background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 45%, transparent 100%);
    -webkit-line-clamp: 2;
  }
}

/* ==========================================================================
   C-L · 手机横屏专属（矮 + 粗指针）
   --------------------------------------------------------------------------
   横屏宽度跨过 900 时，手机层靠上面那条 `(max-height:520px) and (pointer:coarse)`
   已经生效（按下反馈、hover 回收、输入框 16px、九步图、短页沉底都跟着进来了）。
   但**组件的尺寸是各文件自己的媒体查询写的**，那批规则仍然是 `max-width`，
   所以下面要把"被桌面尺寸接管"的几个控件点回来 —— 每一条都是实测出来的：
     · 轮播圆点 13×13（桌面是 9px 旋转方块，横屏基本点不中）
     · 收藏心 30×30 · 网格/列表切换 35 高 · 排序下拉 39 高 · 会员按钮 93×34 · 品牌 logo 30 高
   ========================================================================== */
@media (max-height: 520px) and (pointer: coarse) {
  .brand,
  .member-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .fav-btn,
  .hc-nav {
    min-width: 40px;
    min-height: 40px;
  }
  .seg button {
    min-height: 40px;
  }
  /* 日历页的视图切换 / 分类芯片：30 高、图标那两颗只有 30 宽 */
  .ct-b,
  .ct-f {
    min-height: 40px;
  }
  .ct-b {
    min-width: 40px;
  }
  /* 卡库分页（‹ 1 2 3 … ›）：桌面是 34×34，横屏点相邻两页很容易串 */
  .pager button {
    min-width: 40px;
    min-height: 40px;
  }
  /* 页内的两个独立链接：规则页「← 规则与裁定」(52×21)、商城「去卡库」条(320×38)。
     它们不是正文里的行内链接，WCAG 的 24px 例外不适用。 */
  a.more,
  .shp-jump {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* 页脚那些独立文字链接（实测「B站 · 卡普塔斯」82×17）——
     它们是独立链接、不是正文里的行内链接，所以 24px 的 WCAG 例外不适用，
     给到 40 的命中高度。 */
  #site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  select.input {
    height: 40px;
  }
  /* 页码：桌面那套是"9px 方块 rotate45°"，横屏点不中。换成与手机竖屏同口径的
     「40px 命中盒 + 12px 菱形」，视觉小、按得准。 */
  .hc-dots {
    gap: 0;
    padding: 10px 0 2px;
  }
  .hc-dots button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
  }
  .hc-dots button::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 1px solid var(--brand-2);
    transform: rotate(45deg);
  }
  .hc-dots button.is-on::before {
    background: var(--gold);
    border-color: var(--gold);
    transform: rotate(45deg) scale(1.3);
  }
}

/* ==========================================================================
   D · 全站质感两件（不涉版式，纯观感/手感的现代特性）
   ========================================================================== */

/* D1 选中文字用品牌金半透明，而不是系统蓝底 —— 深色站里系统蓝很突兀。 */
::selection {
  background: rgba(255, 224, 0, .28);
  color: #fff;
}

/* --------------------------------------------------------------------------
   D2（**已放弃**，留档说明，别再加回来）
   --------------------------------------------------------------------------
   试过跨页转场 `@view-transition { navigation: auto }` + `#site-header {
   view-transition-name: sve-topbar }`：技术上可用（Edge 支持，跳转正常），
   但**每次站内跳转都会在控制台抛一条**
     `InvalidStateError: Transition was aborted because of invalid state`
   —— 因为 `store.js` 在页面加载后立刻 `mountShell()` 改 DOM，浏览器判定转场状态失效。
   本站有多条守卫把「全程无 JS 报错」当判据（如 `_verify_stockout.cjs` ⑫），
   为了一点淡入淡出把断言弄脏不划算，故撤除。
   要做的话，前提是先把 `mountShell()` 的挂载时机挪到转场结束之后（`pagereveal` 事件）。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   C19 · 两处卡片文字放成 2 行（2026-10-24 店主圈图：「这 2 个地方我希望他能变成 2 行」）
   --------------------------------------------------------------------------
   ① 系列卡（sets.html）：`.sc-n` 原来是 `white-space: nowrap` + 省略号 → 长系列名直接被切；
   ② 卡组卡（decks.html）：`.who-2`（主卡组 N 张 · 进化 N 张）与 `.edk-note`（卡组名/说明）
      同为单行 nowrap，长一点就截断。
   统一成"最多 2 行、超出才省略"：既让完整名字露出来，又保证网格里卡片高度一致
   —— 完全放开行数会让同一行的卡片高低不齐，比截断更难看。
   （单独一块媒体查询而不是塞进上面那个大块：上面那块太长了，追加更难插错。）
   ========================================================================== */
@media (max-width: 900px), (max-height: 520px) and (pointer: coarse) {
  .setpage .setcard .sc-n,
  .edk .who-2,
  .edk .edk-note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    line-height: 1.4;
  }
  .edk .edk-note {
    /* 说明是"胶囊"块：放开两行后把上下内边距收一点，免得两块叠起来很厚 */
    padding: 6px 10px;
  }
}

/* ==========================================================================
   C20 · 个人中心「我的 X」瓦片：手机上平铺（2026-10-25 店主：
   「手机端的这个 UI 要像网页端这样平铺」）
   --------------------------------------------------------------------------
   brand-page.css 的 ≤720 断点把它们改成了**横向滚动条**：
     `.bnav-my` → flex + overflow-x:auto，`.mynav` → 扁条（min-height 50 / 横排），
     `.mynav-pv`（预览：卡组名 / 收藏数 / 收集进度条）直接 display:none。
   手机上于是每次只露 2 个半、还得左右拖，预览信息全丢 —— 跟网页端完全两种东西。

   这里改回**两列网格 + 纵向卡片 + 显示预览**：与桌面同一套长相，只少一列。
   用 `#myNav` 提权（1,1,0）压过 brand-page 那条 `.bnav-t,.mynav`（0,1,0），
   避免和它在同特异度上比加载顺序。
   ========================================================================== */
@media (max-width: 900px), (max-height: 520px) and (pointer: coarse) {
  #myNav .bnav-my {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;              /* 不再是横向滚动条 */
    padding: 0;
    scroll-snap-type: none;
  }
  #myNav .mynav {
    flex: initial;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    min-height: 104px;
    padding: 12px 13px;
    scroll-snap-align: none;
  }
  #myNav .mynav-pv { display: flex; }
  #myNav .mynav-i { font-size: 18px; }
  #myNav .mynav-b b { font-size: 13.5px; }
  #myNav .mynav-b > span { font-size: 11px; }
  #myNav .mynav-num { font-size: 12px; }
  #myNav .mynav-num b { font-size: 17px; }
  #myNav .mynav-hint { font-size: 11px; line-height: 1.45; }
}