/* ══════════════════════════════════════════════════════════════
   wenai.work 全站移动端适配（共享文件，各页面在 nav.css 之后引入）

   ⚠️ 两条铁律，改这个文件前必读：
   1. 所有规则必须包在 @media(max-width:767px) 里 —— 桌面端零影响。
      这是安全阀：万一这里写错，最坏也只影响手机端，不会像 2026-08-27
      那次改 nav.css 一样把桌面端导航整个搞消失。
   2. 绝不读页面的 CSS 变量（--accent/--fg/--bg…）。sponsor.html 存的是
      完整颜色值、其他页是裸三元组，hsl(var(--accent)) 在它那儿会失效。
      要颜色就写字面值。
   ══════════════════════════════════════════════════════════════ */

@media(max-width:767px){

  /* ── 1. 横滑兜底 ────────────────────────────────────────────
     手机上页面能左右晃是最廉价的"廉价感"来源。任何一个没做响应式的
     装饰元素都会造成横滑，所以这里做全局兜底，而不是逐个去追。 */
  html,body{ overflow-x:hidden; max-width:100%; }
  img,video,canvas,table,pre{ max-width:100%; height:auto; }
  iframe{ max-width:100%; }

  /* 首页「无限画布」演示：.lin-viewport 本来就写了 overflow:hidden，
     但它同时有 perspective + 子元素 preserve-3d —— 3D 变换会击穿 overflow
     裁剪（浏览器已知行为），2000px 宽的连线 svg 因此撑到 3725px。
     clip-path 不受 3D 影响，是这种情况的标准解法。 */
  .lin-viewport{ clip-path: inset(0); }

  /* ── 2. 页脚 ───────────────────────────────────────────────
     visual-create / music-create 曾把桌面版 4 列写成裸规则（无媒体查询），
     手机上 4 列硬挤进 390px 再被 overflow:hidden 裁掉，后两列直接看不见。
     那两页已单独修好，这里做全站统一兜底。 */
  .foot-top{ grid-template-columns:1fr !important; gap:8px !important; }
  footer{ padding-left:20px !important; padding-right:20px !important; }
  .foot-col{ padding:16px 0 16px 14px; }
  .foot-col h5{ margin-bottom:12px; }
  .foot-col a{ min-height:40px; align-items:center; margin-bottom:4px; }

  /* ── 3. 触控热区 ───────────────────────────────────────────
     苹果人机指南要求 ≥44px。站内大量按钮/标签只有 24-30px 高，
     手机上很难点中。这里只补高度，不动字号和视觉。 */
  nav a, .nav-links a, .mobile-nav-overlay a,
  button:not(.nav-hamburger):not(.up-btn), .btn, .pill, .tab,
  .filter-pill, .cat-pill, .chip{
    min-height:40px;
  }
  button:not(.nav-hamburger), .btn, .pill, .filter-pill, .cat-pill, .chip{
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* 实测点不中的几个（宽度只有 11-14px，手指根本够不着）： */
  .auth-close, .modal-close, .dlg-close, [class*="-close"]{
    min-width:40px; min-height:40px;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .tag-chip{ min-height:34px; display:inline-flex; align-items:center; }
  .up-arrow{ min-height:40px; display:inline-flex; align-items:center; justify-content:center; }

  /* 播放进度条只有 3px 高、手机上难拖。这里只放大「可点区域」，
     不碰 height/background —— 直接改高度会把细轨道变成 24px 粗黑条。
     padding 撑开热区，background-clip 让底色仍只画在 3px 的内容区。 */
  .pl-seek{ padding:10px 0; background-clip:content-box; }

  /* ── 4. 极小字号 ───────────────────────────────────────────
     站内有 5.8px / 6px / 7px 的等宽小标签，桌面上是精致，手机上是看不清。
     只兜最小值，不改字号体系（≥11px 的一律不动，免得破坏设计节奏）。 */
  body, p, li, td, span, div, a{ -webkit-text-size-adjust:100%; }
}