/* ============================================================
   观星阁 · 移动端 / H5 适配层
   仅在窄屏与触屏设备生效，桌面端不受影响。
   ============================================================ */

/* 移动端专属元素，桌面隐藏 */
.quick, .mtab, .panel-back { display: none; }

@media (max-width: 860px) {

  /* ---------------- 基础 ---------------- */
  html { -webkit-text-size-adjust: 100%; }

  body {
    font-size: 14.5px;
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y: none;
  }

  main {
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* 统一触摸反馈，去掉移动端点击高亮蓝框 */
  button, a, .q, .zx, .tab, .ptab, .ch, .plan, .note-card {
    -webkit-tap-highlight-color: transparent;
  }

  .card, .panel, .result { min-width: 0; }

  /* ---------------- 顶栏：压成一行 ---------------- */
  .topbar {
    min-height: 56px;
    padding: 9px 14px;
    gap: 10px;
    background: rgba(247, 242, 232, .94);
  }

  .brand { gap: 9px; }
  .brand .seal { width: 36px; height: 36px; font-size: 19px; }
  .brand-text b { font-size: 15.5px; letter-spacing: .18em; }
  .brand-text i { font-size: 8px; letter-spacing: .16em; }

  /* 栏目导航交给首页宫格与底部导航，顶部不再占第二行 */
  .tabs { display: none; }

  .member-chip {
    position: static;
    margin-left: auto;
    padding: 6px 10px;
    gap: 6px;
    font-size: 11px;
  }
  .member-chip .mc-arrow { display: none; }
  .member-chip #member-txt {
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------------- 栏目返回条 ---------------- */
  .panel-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px -2px;
    padding: 6px 2px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 12.5px;
    letter-spacing: .14em;
    color: var(--ink-3);
  }
  .panel-back span { font-size: 15px; line-height: 1; color: var(--gold); }
  .panel-back:active { color: var(--cinnabar); }

  /* ---------------- 首页：术数宫格 ---------------- */
  .quick {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    margin: 16px 0 0;
    padding: 14px 6px 10px;
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
  }

  .q {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 2px 4px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
  }

  .q i {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    color: var(--ink);
    background: radial-gradient(circle at 50% 34%, #fffdf7, #f2ead9);
    border: 1px solid rgba(176, 141, 69, .5);
    box-shadow: 0 8px 16px -14px rgba(33, 29, 24, 1);
    transition: transform .18s ease, background .18s, color .18s;
  }

  .q b {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--ink);
    white-space: nowrap;
  }
  .q em {
    font-style: normal;
    font-size: 9px;
    letter-spacing: 0;
    color: rgba(123, 113, 100, .85);
    white-space: nowrap;
  }

  .q-vip i {
    color: var(--cinnabar);
    border-color: rgba(168, 50, 42, .42);
    background: radial-gradient(circle at 50% 34%, #fdf7f0, #f6e6e0);
  }
  .q:active i { transform: scale(.92); background: var(--ink); color: #f7f2e8; border-color: var(--ink); }

  /* ---------------- 底部导航 ---------------- */
  .mtab {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 4px 0 calc(2px + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 242, 232, .95);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border-top: 1px solid var(--line);
    box-shadow: 0 -16px 32px -28px rgba(33, 29, 24, .9);
  }

  .mtab-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 5px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--ink-3);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .14em;
    transition: color .18s;
  }

  .mtab-item svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
  }

  .mtab-item.is-on { color: var(--cinnabar); }
  .mtab-item.is-on::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 16px; height: 2px;
    transform: translateX(-50%);
    background: var(--cinnabar);
    border-radius: 1px;
  }
  .mtab-item:active { opacity: .65; }

  /* ---------------- 首屏 ---------------- */
  .hero { gap: 14px; padding-top: 18px; }
  .hero-art { display: none; }

  .eyebrow { font-size: 9.5px; letter-spacing: .24em; }
  .hero h2 { font-size: clamp(27px, 8.2vw, 34px); line-height: 1.26; letter-spacing: .06em; }

  .lede {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-notes { display: none; }

  .hero-actions { margin-top: 16px; gap: 9px; flex-wrap: nowrap; }
  .hero-actions .btn { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 14px; }

  /* ---------------- 黄历：日期块 + 2×2 信息格 ---------------- */
  .almanac {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 1px;
    margin-top: 16px;
    background: var(--line);
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .almanac > div {
    padding: 10px 11px;
    min-width: 0;
  }

  .almanac > .alm-date {
    grid-row: 1 / span 2;
    grid-column: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    padding: 12px 11px;
    background: var(--ink) !important;
  }
  .alm-date .d { font-size: 26px; }
  .alm-date .m { font-size: 10px; letter-spacing: .1em; }

  .alm-label {
    font-size: 9.5px;
    letter-spacing: .16em;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .alm-val { font-size: 13px; line-height: 1.55; }
  .alm-val.small { font-size: 10.5px; line-height: 1.6; }
  .alm-val.small small { font-size: 9.5px !important; }

  /* ---------------- 版块 ---------------- */
  .stage { padding-top: 22px; }

  .panel-head { gap: 11px; padding-bottom: 13px; margin-bottom: 18px; }
  .panel-head .num { width: 30px; height: 30px; font-size: 12.5px; }
  .panel-head h3 { font-size: 19px; letter-spacing: .14em; }
  .panel-head p { font-size: 11.5px; line-height: 1.65; color: var(--ink-3); }

  /* ---------------- 表单 ---------------- */
  .form-grid { grid-template-columns: 1fr; gap: 11px; }
  .field-wide { grid-column: span 1; }
  .field > span { font-size: 11.5px; letter-spacing: .08em; }

  /* iOS 聚焦时字号 <16px 会强制放大页面，此处统一 16px */
  .field input,
  .field select,
  .form input,
  .form select,
  .code-row input {
    height: 46px;
    padding: 0 12px;
    font-size: 16px;
    border-radius: 2px;
  }
  .field select { padding-right: 28px; }

  .btn { min-height: 44px; font-size: 14px; letter-spacing: .12em; }
  .btn-sm { min-height: 36px; }
  .field-submit { margin-top: 2px; }

  /* ---------------- 结果区 ---------------- */
  .result { margin-top: 18px; }
  .card { padding: 16px 14px; }
  .card + .card { margin-top: 12px; }
  .card-title { font-size: 15px; gap: 8px; margin-bottom: 14px; letter-spacing: .16em; }
  .card-title .k { font-size: 8.5px; letter-spacing: .18em; }

  .note-line { font-size: 11px; line-height: 1.8; margin-top: 11px; padding-top: 10px; }
  .hint { font-size: 11px; line-height: 1.8; }
  .analysis p { font-size: 13px; line-height: 1.9; margin-bottom: 10px; }

  /* 四柱 */
  .pillars-row { grid-template-columns: 38px repeat(4, 1fr); }
  .pillars-row > div { padding: 9px 2px; font-size: 11px; }
  .gan, .zhi { font-size: 21px; line-height: 1.35; }
  .pillars-row .rh { font-size: 9px; letter-spacing: .02em; }

  /* 五行条 */
  .wx-item { grid-template-columns: 38px 1fr 54px; gap: 8px; }
  .wx-name { font-size: 13px; }
  .wx-num { font-size: 10.5px; }

  /* 大运：横滑 */
  .dayun {
    display: flex;
    gap: 1px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .dayun::-webkit-scrollbar { display: none; }
  .dy { flex: none; width: 76px; padding: 11px 2px; scroll-snap-align: start; }
  .dy b { font-size: 16px; }

  /* 生肖 */
  .zodiac-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .zx { padding: 12px 2px 10px; font-size: 16px; min-height: 58px; }

  /* 指标条 */
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 12px 12px; }
  .metric p { font-size: 11.5px; line-height: 1.8; margin-top: 8px; }

  /* 五格 / 合婚表：横向滚动，保证不挤字 */
  .ge-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ge-table thead, .ge-table tbody {
    display: table;
    width: 100%;
    min-width: 500px;
  }
  .ge-table th, .ge-table td {
    padding: 9px 7px;
    font-size: 12px;
    white-space: nowrap;
  }
  .ge-table td.num { font-size: 14px; }
  .ge-table th { font-size: 9.5px; letter-spacing: .1em; }

  /* 塔罗 */
  .tarot-table { gap: 7px; }
  .tcell { padding-top: 20px; }
  .tfront .tname { font-size: 11.5px; }
  .tfront .ten, .tfront .tkeys { display: none; }
  .tfront .tnum { font-size: 9px; }
  .tfront .tsym { font-size: 26px; }
  .tfront .tpos { font-size: 9px; letter-spacing: .12em; }
  .tcard .tpos-label { font-size: 10px; letter-spacing: .16em; top: -22px; }

  /* 灵签 */
  .qian-stage { gap: 12px; }
  .qian-tube { height: 160px; }
  .qian-card { padding: 18px 16px; }
  .qian-poem { font-size: 14px; line-height: 2.2; }

  /* 合婚 */
  .hh-group { padding: 14px 12px; }
  .form-2col { grid-template-columns: 1fr; }

  /* ---------------- 付费遮罩 ---------------- */
  .is-locked > *:not(.lock-mask) { filter: blur(4px) saturate(.95); }
  .lock-mask { padding: 12px; }
  .lock-card { width: 100%; padding: 20px 16px 18px; }
  .lock-card h4 { font-size: 17px; }
  .lock-desc { font-size: 12px; }
  .lock-price { margin: 13px 0 12px; }
  .lock-price b { font-size: 26px; }
  .lock-btns .btn { min-height: 44px; }
  .lock-seal { width: 38px; height: 38px; font-size: 20px; margin-bottom: 10px; }

  /* ---------------- 支付弹层：底部抽屉 ---------------- */
  .pay-layer { padding: 0; align-items: flex-end; }
  .pay-mask { backdrop-filter: blur(2px); }

  .pay-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: sheetUp .3s cubic-bezier(.2, .8, .2, 1) both;
  }

  /* 抽屉拖拽提示 */
  .pay-dialog::after {
    content: "";
    position: absolute;
    top: 7px; left: 50%;
    width: 34px; height: 4px;
    margin-left: -17px;
    border-radius: 2px;
    background: rgba(33, 29, 24, .18);
  }

  .pay-close { top: 4px; right: 6px; }

  .pay-body { padding: 24px 16px 20px; }
  .pay-head { padding-bottom: 12px; margin-bottom: 15px; padding-right: 26px; }
  .pay-head h3 { font-size: 18px; }
  .pay-sub { font-size: 11.5px; }

  .pay-tabs { gap: 4px; margin-bottom: 15px; }
  .ptab { flex: 1; padding: 8px 6px; text-align: center; font-size: 12px; letter-spacing: .06em; }

  .pay-amount { margin: 2px 0 10px; }
  .pay-amount b { font-size: 34px; }
  .pay-list { margin-bottom: 14px; }
  .pay-list li { font-size: 12px; line-height: 1.95; }

  .pay-channels { grid-template-columns: 1fr; gap: 8px; }
  .ch { padding: 12px 14px; min-height: 58px; }
  .ch b { font-size: 13px; }

  .plan-grid { grid-template-columns: 1fr; gap: 8px; }
  .plan { padding: 14px 16px 12px; gap: 4px; }
  .plan-price { font-size: 26px; }
  .plan-desc { min-height: 0; }

  .cash { grid-template-columns: 1fr; gap: 14px; }
  .cash-amount { grid-column: span 1; }
  .cash-qr { order: 0; }
  .cash-side { order: 1; }

  .my-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .my-card { padding: 13px 14px; }
  .my-card b { font-size: 18px; }
  .my-actions { gap: 8px; }
  .my-actions .btn { flex: 1; }
  .my-tbl th, .my-tbl td { padding: 8px 4px; }
  .my-tbl td:nth-child(1) { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }

  .code-row { gap: 8px; }

  /* ---------------- 阅读层 ---------------- */
  .reader { padding: 0; align-items: end; }
  .reader-card {
    width: 100%;
    max-height: 88vh;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom, 0px));
    border-radius: 14px 14px 0 0;
    animation: sheetUp .3s cubic-bezier(.2, .8, .2, 1) both;
  }
  .reader-card h3 { font-size: 19px; }
  .reader-body p { font-size: 14px; line-height: 2; }

  /* ---------------- 札记 / 页脚 ---------------- */
  .notes { margin-top: 34px; padding-top: 22px; }
  .notes-head { gap: 8px; margin-bottom: 14px; }
  .notes-head h4 { font-size: 16px; }
  .note-grid { gap: 10px; }
  .note-card { padding: 16px 16px 14px; }

  .principles { margin-top: 34px; }
  .site-footer { padding: 26px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* 长文渐隐，避免移动端阅读疲劳 */
  .notice { font-size: 11.5px; padding: 9px 12px; margin-top: 12px; }
}

/* 抽屉动画 */
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* 超窄屏微调 */
@media (max-width: 380px) {
  .q i { width: 40px; height: 40px; font-size: 18px; }
  .q b { font-size: 11px; }
  .q em { display: none; }
  .gan, .zhi { font-size: 19px; }
  .pillars-row { grid-template-columns: 34px repeat(4, 1fr); }
  .metrics { grid-template-columns: 1fr; }
}

/* 触屏设备：去掉 hover 残留、加强按压反馈 */
@media (hover: none) {
  .btn:active, .plan:active, .ch:active, .note-card:active, .zx:active {
    transform: scale(.98);
  }
  .note-card:hover, .plan:hover, .ch:hover { transform: none; }
}

/* 横屏矮屏：收起底部导航，避免占满可视区 */
@media (max-width: 860px) and (max-height: 460px) and (orientation: landscape) {
  .mtab { display: none; }
  body { padding-bottom: 12px; }
}

/* 演示/截图：隐藏底部导航与宫格 */
@media (max-width: 860px) {
  body.demo-compact .mtab,
  body.demo-compact .quick { display: none !important; }
  body.demo-compact .panel-back { display: none !important; }
  body.demo-compact body { padding-bottom: 0; }
}