/* 手机底部主导航 4-tab（占卜/历史/牌库/我的）。只在手机宽度出现；电脑端 display:none、完全不渲染。 */
.mobile-tabbar {
  display: none;
}

@media (max-width: 760px) {
  .site-header .nav-links a:not([hidden]) {
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: rgba(251, 245, 237, 0.97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-strong, rgba(115, 92, 88, 0.28));
    box-shadow: var(--shadow-tabbar, 0 -8px 24px rgba(95, 64, 49, 0.07));
    /* viewport-fit=cover 已在各页 viewport 补上；max(8px, env) 兜底：notch 机型把图标/标签顶到 Home 横条上方，非 notch 也有 8px 下垫，避免点击落进 iOS 底部手势区 */
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .mobile-tabbar .mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 7px 0 5px;
    text-decoration: none;
    color: var(--muted, #766b66);
    font-family: var(--font-sans, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif);
    font-size: 0.66rem;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tabbar .mobile-tab-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 26px;
    border-radius: 999px;
    transition: background-color 160ms ease;
  }

  .mobile-tabbar .mobile-tab-ic svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* 当前页：金色 + 图标下一层柔和金晕 + 标签略加粗，"你在这儿"更清楚（iOS 风，套金色皮肤） */
  .mobile-tabbar .mobile-tab.is-active {
    color: var(--gold-text, #846a2f);
  }

  .mobile-tabbar .mobile-tab.is-active .mobile-tab-ic {
    background: rgba(180, 146, 98, 0.16);
  }

  .mobile-tabbar .mobile-tab.is-active .mobile-tab-label {
    font-weight: 500;
  }

  /* 给底栏让位，避免内容被遮住 */
  body.has-mobile-tabbar {
    padding-bottom: calc(62px + max(8px, env(safe-area-inset-bottom, 0px)));
  }

  /* 手机端收起重复的第二行 section-nav：它的入口都在底部 tab + 「我的」里，一个不少 */
  body.has-mobile-tabbar .tarot-section-nav,
  body.has-mobile-tabbar .tarot-section-nav-standalone {
    display: none;
  }
}

html[data-theme="night"] .mobile-tabbar {
  background: rgba(20, 19, 29, 0.97);
  border-top-color: rgba(180, 146, 120, 0.22);
}