/* ============================================================
   象术仁元 — 移动端全局基建 (mobile.css)  v2026100901
   断点体系：≤768px 启用移动布局；>768px 桌面端零生效。
   堂主定稿：底部5Tab = 首页/排盘/AI对话/悬赏/我的（按角色进工作台），
   大师地图/服务评价从首页宫格进，不占Tab；桌面不显示底部Tab。
   ============================================================ */

/* ---------- 0. 桌面默认态：Tab栏与移动宫格一律隐藏 ---------- */
.app-tabbar { display: none; }
.app-quick-grid { display: none; }

/* ---------- 1. 移动端启用 ---------- */
@media (max-width: 768px) {

  /* ===== 1.0 移动尺度：基准16px，正文14-15px ===== */
  html { font-size: 16px; }
  body { font-size: 0.9375rem; } /* 15px */

  /* ===== 1.1 底部Tab栏（Mate 80 手势条 safe-area 适配） ===== */
  .app-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: rgba(12, 10, 9, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-subtle, rgba(212, 165, 116, 0.18));
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .app-tabbar-item {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 56px;            /* 整体高度 ≥52px */
    min-height: 52px;
    min-width: 44px;         /* 点击区 ≥44px */
    padding: 0;
    background: none;
    border: none;
    text-decoration: none;
    color: var(--text-secondary, #a8a29e);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease;
  }

  /* 选中态：金色 + 顶部2px金色指示条 */
  .app-tabbar-item.active {
    color: var(--text-gold, #d4a574);
  }
  .app-tabbar-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--text-gold, #d4a574);
    border-radius: 0 0 2px 2px;
  }

  .app-tabbar-icon {
    font-size: 20px;
    line-height: 1;
  }
  .app-tabbar-label {
    font-size: 11px;
    line-height: 1;
  }

  /* ===== 1.2 防Tab遮挡内容 ===== */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  /* ===== 1.3 移动端导航：显示汉堡按钮，菜单显隐由 styles.css 993 行原生逻辑控制 ===== */
  .nav-toggle { display: inline-flex !important; }
  /* 彻底隐藏收起状态的菜单（修 -120% 不彻底导致的细条遮挡） */
  .top-nav .nav-links {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  }
  .top-nav .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }

  /* ===== 1.4 导航遮挡修复：fixed 顶栏 60px，.section 默认 padding 40px 不足，补足 ===== */
  .section {
    padding-top: calc(var(--nav-height, 60px) + 24px) !important;
  }

  /* ============================================================
     批次2：首页 —— Hero 压缩 + 金刚区宫格（仅移动端显示）
     ============================================================ */
  .hero {
    padding-top: calc(var(--nav-height, 60px) + 12px);
    padding-bottom: 24px;
    text-align: center;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.4rem) !important;
    text-align: center;
  }
  .hero-subtitle { text-align: center; }

  /* Hero 按钮组纵向全宽 */
  .hero .container > div:last-child,
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .hero .btn { width: 100%; text-align: center; }

  /* 金刚区宫格：2列×3行，卡片风格复用 .feature-card 基底 */
  .app-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
  }
  .app-quick-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 16px 8px;
    background: var(--bg-card, #1c1917);
    border: 1px solid var(--border-subtle, rgba(212, 165, 116, 0.15));
    border-radius: var(--radius-md, 12px);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, border-color 0.2s ease;
  }
  .app-quick-card:active {
    transform: scale(0.97);
    border-color: var(--border-gold, rgba(212, 165, 116, 0.35));
  }
  .app-quick-icon { font-size: 26px; line-height: 1; }
  .app-quick-name {
    font-size: 0.875rem;
    color: var(--text-primary, #f5f0eb);
  }

  /* 移动端隐藏桌面式4卡功能介绍区（宫格已承载入口职能） */
  .features-grid { display: none; }

  /* ============================================================
     批次3：排盘页 —— 进页默认摇卦模式（展示层开关，不动算法）
     ============================================================ */
  /* 铜钱区紧凑居中（修过长：原60vh→220px+，铜钱缩到90px） */
  #method-coin .coin-container {
    min-height: 220px;
    align-items: center;
    justify-content: center;
    margin: 12px 0;
  }
  #method-coin .coin {
    width: 90px;
    height: 90px;
  }
  #method-coin .coin-container .coin-char { font-size: 0.62em !important; }
  /* 铜钱表单字段紧凑：横向2列网格，省空间 */
  #method-coin .paipan-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #method-coin .paipan-form-fields .form-group:first-child { grid-column: 1 / -1; }
  #method-coin .paipan-form-fields .form-group:nth-child(2) { grid-column: 1 / -1; }
  /* 摇卦按钮加大：≥56px高、全宽 */
  #tossBtn {
    min-height: 56px;
    width: 100%;
    font-size: 1.05rem;
  }
  #method-coin .btn--block { width: 100%; }

  /* 抽屉：堂主指示取消折叠——起卦方式切换直接常显（2026-10-09） */
  .paipan-drawer {
    max-height: none;
    overflow: visible;
  }
  .paipan-drawer.open { max-height: none; }

  /* 抽屉开关按钮已废弃，移动端隐藏 */
  .paipan-drawer-toggle { display: none !important; }

  /* 起卦方式按钮：移动端三等分横排（取消抽屉后常显，排布友好化） */
  .paipan-drawer > div {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .paipan-drawer .btn {
    flex: 1 1 30%;
    min-width: 96px;
    min-height: 44px;
    font-size: 0.9rem;
  }

  /* 铜钱卡内的表单字段同样常显（称呼/所问之事/关注领域不折叠，2026-10-16 修） */
  .paipan-form-fields {
    max-height: none;
    overflow: visible;
  }

  /* 结果区：竖排爻位视觉由 styles.css 已有断点保证，这里做字号适配 */
  .paipan-result-wrap { font-size: 0.875rem; }

  /* ============================================================
     批次4：触控反馈 + 登录页 + 悬赏 + 工作台/评价页
     ============================================================ */
  a, button { touch-action: manipulation; }
  .btn:active { transform: scale(0.97); }

  /* --- 登录页：表单单列居中、按钮全宽≥48px --- */
  .auth-container {
    max-width: 100%;
    padding: 0 4px;
  }
  .role-cards { gap: 12px; }
  .role-card { padding: 20px 12px; }
  .form-input {
    min-height: 48px;
    font-size: 16px; /* 防 iOS 聚焦自动放大 */
  }
  .btn-row { flex-direction: column; gap: 12px; }
  .btn-row .btn { width: 100%; min-height: 48px; flex: none; }
  .auth-form > .btn,
  .auth-container > .btn {
    width: 100%;
    min-height: 48px;
  }

  /* --- 悬赏大厅：卡片单列全宽 --- */
  .bounty-list { display: flex; flex-direction: column; gap: 12px; }
  .bounty-card { width: 100%; padding: 16px; }
  .bounty-card:hover { transform: none; }

  /* --- 评价页/三个工作台：卡片纵排、指标2列网格 --- */
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-card { padding: 16px 8px; }
  .stat-number { font-size: 1.6rem; }
  .profile-card {
    flex-direction: column;
    text-align: center;
    padding: 20px 16px;
  }
  .dashboard-container { padding: calc(var(--nav-height, 60px) + 24px) 12px 48px; }
  .dashboard-nav { flex-wrap: wrap; gap: 6px; }
  .kv { font-size: 0.85rem; }
  .recharge-row { flex-direction: column; }
  .recharge-row .btn { width: 100%; }
  /* review.html 评价卡纵排（沿 flex/grid 容器统一改单列） */
  .review-list, .reviews-grid { display: flex; flex-direction: column; }
}