/* ================================================================
   AXIOM · responsive-pro.css — v32.3 全站世界级响应式补丁层
   加载位置: header.php → style.css?v=7.6 之后、页面 CSS 之前
   设计目标: iPhone 15/17 Pro (390px) · Pro Max (430px)
            小米 15/17 Pro (393px) · 小米平板
            iPad Pro 11" (834px) · iPad Pro 12.9" (1024px)
            桌面 1440px+
   ================================================================
   设计原则:
   ① 移动端 (≤768px): 单列、抽屉导航、100dvh Hero、safe-area 全量
   ② 平板 (769-1024px): 保留完整桌面导航（不抽屉）、2列网格
   ③ 平板横屏/小桌面 (1025-1440px): 3-4列、完整导航
   ④ 大屏 (≥1441px): 放宽 container 到 1480px
   ================================================================ */

/* ============================================================
   0. 设备断点速查变量（CSS Custom Properties）
   ============================================================ */

:root {
  --bp-mobile-max: 430px;
  --bp-tablet-min: 431px;
  --bp-tablet-max: 1024px;
  --bp-desktop-min: 1025px;
  --bp-large-min: 1441px;
}

/* ============================================================
   1. CONTAINER — 大尺寸放宽、移动端 safe-area 内缩
   ============================================================ */

/* 桌面大屏 (≥1441px) 放宽容器 */
@media (min-width: 1441px) {
  .container,
  .ranking-container,
  .nav-container,
  .footer-container {
    max-width: 1480px !important;
  }
}

/* 移动端 safe-area 内缩 + 紧凑 padding */
@media (max-width: 430px) {
  .container,
  .ranking-container {
    padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* ============================================================
   2. NAVBAR — 平板 (769-1024px) 保留完整桌面导航
      ≤768px 收起为抽屉（v35.5 修复：原 430px 过低致 431-730px 换行）
   ============================================================ */

/* 移动端 (≤768px) 抽屉模式 + Dynamic Island 安全区 */
/* v35.5 2026-09-25 修复：原 430px 断点过低，431~730px 区间桌面导航(logo+5菜单+头像+铃铛≈730px)
   排不下，flex 把菜单项挤成多行单列（截图显示首页/排行榜/载中心/服中心/理后台 竖排）。
   恢复为 ≤768px 走抽屉，与 style.css 原设计一致；仅 769-1024px（真平板如 iPad）保留桌面导航。 */
@media (max-width: 768px) {
  .navbar {
    padding-top: max(0px, env(safe-area-inset-top, 0px)) !important;
  }

  /* 抽屉模式双保险 — 确保 nav-menu 默认隐藏 (style.css ≤768px 已设 display:none, 显式 !important 兜底) */
  .nav-menu {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    flex-direction: column !important;
    background: var(--bg-nav) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5) !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    padding-top: max(80px, calc(env(safe-area-inset-top) + 80px)) !important;
  }

  /* ⚠️ 关键: 抽屉展开状态 — 必须 !important 否则会被上面的 display:none 压死 */
  .nav-menu.active {
    display: flex !important;
  }

  /* nav-toggle 按钮 — 手机端显式显示 */
  .nav-toggle {
    display: block !important;
  }
}

/* 平板 (769-1024px) 强制完整桌面导航 — 此区间宽度足够容纳 logo+5菜单+头像+铃铛 */
/* v35.5 2026-09-25 原 431-1024px 下限过低，431-768px 排不下导致换行；下限抬到 769px */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-menu {
    display: flex !important;
    position: static !important;
    width: auto !important;
    flex-direction: row !important;
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: none !important;
  }

  .nav-toggle {
    display: none !important;
  }
}

/* T260926-01 2026-09-26 导航 5 项 → 7 项后开平板区间收口；T260926-02 2026-09-26 改为「短标签方案」：
   本区间启用简称（排行/下载/指南/招募/充值/客服 —— 见 header.php 双 span 与 style.css 的 .nav-mini 基态），
   省下约 150-180px，从而把字号/内边距恢复为舒适值（v37.2 的 0.8rem / 8px 紧凑收口退役）。
   T260926-03 2026-09-26 登录/注册改「实心 + 描边」两枚胶囊后本区间再微收（gap 5px / 菜单项 11px / 胶囊 12px + margin 6px）。
   实测（无头 Edge，内宽 769/810/900/1024px）：全部单行 maxH=40px，最窄 769px 余量 72px；
   1025px 及以上回默认（全称 + 默认尺寸，两枚胶囊内边距 20px）；≤768px 抽屉内两枚胶囊改通栏居中。 */
@media (min-width: 769px) and (max-width: 1024px) {
  .nav-full { display: none; }
  .nav-mini { display: inline; }
  .nav-menu { gap: 5px; }
  .nav-menu > li > a { padding: 8px 11px; font-size: 0.85rem; letter-spacing: 0.5px; }
  .nav-menu > li > a.btn-nav-solid,
  .nav-menu > li > a.btn-nav-ghost { padding: 8px 12px; margin-left: 6px; }
}

/* 横屏 (宽>高) 判为平板 — 但仅 ≥769px 才保留桌面导航，窄屏横屏手机仍走抽屉 */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
  .nav-menu {
    display: flex !important;
    position: static !important;
    width: auto !important;
    flex-direction: row !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav-toggle { display: none !important; }
}

/* ============================================================
   3. HERO — 100vh → 100dvh + 横屏 80dvh + safe-area
   ============================================================ */

/* v33.9 2026-09-18 移除误伤的 .vip-hero：该 class 是 VIP 专区页(account/vip.php)的
   HERO **内容网格**（grid 1fr/1.15fr 两张卡片），不是首页那种整屏 hero 横幅。
   原选择器把它连同 .hero-section 一起强设 height:100dvh!important，导致两张卡片被
   拉到整屏高（实测 1920×1080 下 983px 高、内容仅 263px，上下大片空白）。
   首页 hero 用的是 .hero-container（style.css 已给 min-height:100dvh），不受影响。 */
.hero-section {
  height: 100dvh !important;
  min-height: 600px;
}

@media (max-width: 1024px) and (orientation: landscape) {
  .hero-section {
    height: 80dvh !important;
    min-height: 420px;
  }
}

@media (max-width: 430px) {
  .hero-content {
    padding-top: max(16px, calc(env(safe-area-inset-top, 0px) + 16px)) !important;
    padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
  }
}

/* ============================================================
   4. TABLE — 全站表格横向滚动包装 + 移动端字缩
      消除所有硬编码 min-width: 600/760/780px
   ============================================================ */

/* 通用表格容器滚动 */
@media (max-width: 1024px) {
  .page-box-content:has(table),
  .ranking-table-wrap,
  .table-wrapper,
  [class*="table-wrap"],
  .admin-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* 消除硬编码 min-width */
  .ranking-table,
  .page-table-04,
  .admin-dashboard,
  .rank-chart,
  [class*="table"] {
    min-width: 0 !important;
  }
}

@media (max-width: 430px) {
  /* 移动端表格字缩 + 紧凑 padding */
  .ranking-table th,
  .ranking-table td,
  .page-table-04 th,
  .page-table-04 td,
  table th,
  table td {
    font-size: 0.72rem !important;
    padding: 8px 8px !important;
    white-space: nowrap;
  }

  /* 操作按钮列最小宽度防挤压 */
  .action-col,
  td:last-child {
    min-width: 80px !important;
  }
}

/* ============================================================
   5. FORM CONTROLS — 全局触控高度 (iOS 44pt / Android 48dp)
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea {
  min-height: 44px;
  font-size: 16px !important; /* 防止 iOS Safari 自动缩放 */
}

button,
.btn,
input[type="button"],
input[type="submit"] {
  min-height: 46px;
  font-size: 15px !important;
}

/* ============================================================
   6. CARD GRID — 统一 clamp + 断点化列数
   ============================================================ */

@media (max-width: 430px) {
  .features-grid,
  .plan-cards,
  .method-cards,
  .hof-cards-wrap,
  .hof-records-grid,
  .admin-stats-grid,
  .giftcard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .stats-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (min-width: 431px) and (max-width: 1024px) {
  .features-grid,
  .plan-cards,
  .method-cards,
  .hof-cards-wrap {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hof-records-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .admin-stats-grid,
  .giftcard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .stats-hero {
    grid-template-columns: repeat(2, 1fr) 1.6fr !important;
  }
}

/* ============================================================
   7. FOOTER — safe-area-bottom + 移动端紧凑
   ============================================================ */

@media (max-width: 430px) {
  .site-footer {
    padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 20px)) !important;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ============================================================
   8. NEWS LIST — 窄屏改 2 列
   ============================================================ */

@media (max-width: 430px) {
  .news-list-item {
    grid-template-columns: 60px 1fr !important;
  }

  .news-list-meta {
    display: none !important;
  }

  .news-list-category {
    position: static !important;
    margin-top: 4px;
  }
}

/* ============================================================
   9. NOTIFICATION PANEL — 放宽 max-width
   ============================================================ */

@media (min-width: 391px) and (max-width: 430px) {
  .notification-panel,
  .notif-dropdown {
    max-width: 380px !important;
  }
}

@media (min-width: 1025px) {
  .notification-panel,
  .notif-dropdown {
    max-width: 420px !important;
  }
}

/* ============================================================
   10. PAGINATION — 窄屏紧凑
   ============================================================ */

@media (max-width: 430px) {
  .pagination {
    gap: 2px !important;
  }

  .pagination a,
  .pagination span {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 0.75rem !important;
    padding: 0 6px !important;
  }

  .pagination .prev,
  .pagination .next {
    padding: 0 10px !important;
  }
}

/* ============================================================
   11. MODAL — safe-area + 超视口滚动
   ============================================================ */

@media (max-width: 430px) {
  .modal-content {
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    margin-top: max(0px, env(safe-area-inset-top, 0px)) !important;
    margin-bottom: max(0px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   12. ADMIN DASHBOARD — 清理硬编码 min-width
   ============================================================ */

@media (max-width: 1024px) {
  .admin-dashboard,
  .admin-content,
  .dash-section,
  [class*="dash-"] {
    min-width: 0 !important;
  }

  .admin-dashboard {
    flex-wrap: wrap !important;
  }

  .admin-sidebar {
    position: static !important;
    width: 100% !important;
    margin-bottom: 16px;
  }

  .admin-main {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   13. RANKING PAGE — 特化修复
   ============================================================ */

/* 13a. 药丸菜单滑动指示器同步 overflow-x:auto */
/* 核心修复: 当 .ranking-tabs overflow-x:auto 时,
   ::after 伪元素的 transform: translateX(var(--pill-left))
   基于容器的 scrollLeft + pill-left 偏移 */
@media (max-width: 1024px) {
  .ranking-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 179, 66, 0.3) transparent;
    padding-bottom: 6px !important; /* 给药丸指示器留空间 */
    position: relative !important;
  }

  .ranking-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .ranking-tabs::-webkit-scrollbar-track {
    background: transparent;
  }

  .ranking-tabs::-webkit-scrollbar-thumb {
    background: rgba(245, 179, 66, 0.25);
    border-radius: 2px;
  }

  .ranking-tabs .ranking-tab {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  /* 药丸指示器在滚动容器内保持正确位置 */
  .ranking-tabs::after {
    left: 0 !important;
    will-change: transform, width;
  }
}

/* 13b. hof-record-card 左上角切角 — 移动端缩小或隐藏 */
@media (max-width: 430px) {
  .hof-record-card::before {
    width: 40px !important;
    height: 40px !important;
  }

  .hof-record-card::after {
    width: 2px !important;
    top: 40px !important;
  }

  .hof-records-grid {
    grid-template-columns: 1fr !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }

  /* stats-hero 手机竖屏单列 */
  .stats-hero {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .stat-hero-card {
    min-height: 120px !important;
  }

  .stat-hero-value {
    font-size: 2rem !important;
    margin: 56px auto 4px !important;
  }
}

/* 13c. 平板上 stats-hero 合理布局 */
@media (min-width: 431px) and (max-width: 1024px) {
  .stats-hero {
    grid-template-columns: 1fr 1fr 1.4fr !important;
  }

  .stat-hero-value {
    font-size: 2.6rem !important;
  }
}

/* 13d. race-hero-card 窄屏改为纵向布局 */
@media (max-width: 430px) {
  .race-hero-body {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .race-hero-legend {
    width: 100% !important;
  }

  .race-hero-doughnut {
    width: 110px !important;
    height: 110px !important;
  }
}

/* 13e. 排行榜表格 rank-chart 移动端高度 */
@media (max-width: 430px) {
  .rank-chart {
    height: 300px !important;
  }
}

/* ============================================================
   14. SAFE-AREA — 兜底 (无 env() 支持的浏览器降级)
   ============================================================ */

@supports not (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 430px) {
    .navbar { padding-top: 0; }
    .footer-container { padding-bottom: 16px; }
  }
}

/* ============================================================
   15. REDUCED MOTION — 保持现有兼容
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .ranking-tabs::after,
  .stat-hero-card,
  .hof-record-card,
  .hero-content,
  .reveal-up {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================================
   16. TABLET LANDSCAPE (1025-1440px) — 紧凑但完整
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1440px) {
  .container,
  .ranking-container,
  .nav-container {
    max-width: 1280px !important;
  }

  .hof-records-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}