/* ============================================================
   喵数据 · App 化增强层 mobile.css（2026-10-16）
   目标：让网站在手机上像原生 App —— 触控友好、刘海安全区、
         禁橡皮筋、原生点击反馈。仅增强，不改现有视觉。
   说明：放在 style.css 之后加载，用更高特异性覆盖。
   ============================================================ */

/* ---------- 全局：App 手感 ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  overscroll-behavior-y: none;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media (hover: none) {
  a, button, [onclick] {
    -webkit-tap-highlight-color: rgba(0,122,251,.18);
    touch-action: manipulation;
  }
}

/* ---------- 触控目标：保证 >=40px ---------- */
@media (max-width: 1024px) {
  .nav-link { min-height: 44px; }
  .btn, .cat-tab, .tbtn, .chip,
  .cmp-lvl, .cmp-add, .cmp-clear, .cmp-pickbtn,
  .cdd-btn, .cmm-btn, .lock-x,
  .news-head button, .nc-data {
    min-height: 40px;
  }
  .cx, .mw-star, .ip-mini { min-height: 36px; min-width: 36px; }
  input, select, textarea { font-size: 16px !important; }
}

/* ---------- 顶部导航：固定 + 安全区 ---------- */
@media (max-width: 1024px) {
  .nav { padding-top: env(safe-area-inset-top); }
  .nav-inner { min-height: 56px; }
}

/* ---------- 底部安全区 ---------- */
@media (max-width: 1024px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  .foot, .foot-bar { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

/* ---------- 抽屉/弹窗：全屏化 ---------- */
@media (max-width: 640px) {
  .drawer { width: 100%; }
  .cmp-wrap, .wrap { padding-left: 16px; padding-right: 16px; }
  .cp-card, .card, .mod-card { border-radius: 12px; }
}

/* ---------- 表格：移动端横向滚动 ---------- */
@media (max-width: 768px) {
  .tbl-wrap, .table-scroll, .rank-list { -webkit-overflow-scrolling: touch; }
  table { font-size: 12.5px; }
  th, td { padding: 10px 10px; }
}

/* ---------- 大标题收敛 ---------- */
@media (max-width: 480px) {
  .hero-title, .cmp-head h1, .hero h1 { font-size: clamp(24px, 7vw, 30px) !important; }
  .sec-head h3 { font-size: 20px; }
}

/* ---------- PWA standalone 模式 ---------- */
@media (display-mode: standalone) {
  .pwa-install-hint { display: none !important; }
  .nav { padding-top: max(env(safe-area-inset-top), 6px); }
}

/* ---------- 修复：导航横向溢出 ---------- */
@media (max-width: 1024px) {
  .nav-inner {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
  }
  .nav-links {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { flex: none; }
}

/* ---------- 修复：对决图表固定宽度溢出 ---------- */
@media (max-width: 768px) {
  .pk-chart, .pk-tbwrap, .cmp-chart, .chart, canvas {
    max-width: 100% !important;
  }
  .pk-tbwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 修复：防止横向滚动 ---------- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, canvas, svg, table { max-width: 100%; }
}

/* ---------- 次要小按钮补足 ---------- */
@media (max-width: 1024px) {
  .cmp-lvl, .ph-tab, [data-city-view], .send-btn, .msg-send {
    min-height: 36px;
  }
}