/* ============================================================
   通玄 TONGXUAN · 合盘缘分 hepan.css
   页面两幕：双帖录入（乾帖✕坤帖）→ 合盘呈现（尾接 AI 深度解读 CTA）
   颜色一律走 token / 金·朱砂 rgba，换肤由 theme-xiu 覆盖
   ============================================================ */

/* hidden 属性保险（避免被后续 display 规则覆盖） */
[hidden] { display: none !important; }

/* 锚点滚动让出固定导航 */
#result { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* 页头菱形饰随副题节奏入场 */
.hp-hero-divider { animation: pageUp 1s var(--ease-out) 0.28s both; }

/* ================= 第一幕 · 双帖并排 ================= */
.hp-entry { padding-top: 72px; }

.hp-pair {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: stretch;
}

/* 拜帖卡变体：铺满各自一栏，卡身更紧凑 */
.hp-card { max-width: none; margin: 0; }
.hp-card .geng-head { padding: 24px 24px 20px; }
.hp-card .geng-body { padding: 32px 30px 36px; gap: 26px; }

/* 乾坤 seg 紧凑版：两枚小按钮，任何宽度都保持并排 */
.hp-card .seg-group { grid-template-columns: 1fr 1fr; gap: 12px; }
.hp-card .seg-btn { padding: 11px 8px; gap: 10px; }
.hp-card .seg-big { width: 36px; height: 36px; font-size: 19px; border-radius: 8px; }
.hp-card .seg-text b { font-size: 15.5px; }
.hp-card .seg-text i { font-size: 10px; letter-spacing: 0.14em; }

/* 公历生辰：四联 select（无分） */
.hp-card .date-grid.hp-date { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hp-card .date-grid select {
  padding: 11px 26px 11px 10px;
  font-size: 13.5px;
  background-position: right 9px center;
}

/* 居中朱砂「合」圆印（装饰，小屏隐藏） */
.hp-he-seal {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 5;
  width: 66px; height: 66px;
  display: flex; align-items: center; justify-content: center;
  transform: translate(-50%, -50%) rotate(-6deg);
  font-family: var(--font-serif);
  font-size: 29px; font-weight: 700;
  color: var(--paper-50);
  background: linear-gradient(155deg, var(--cinnabar), var(--cinnabar-deep));
  border-radius: 50%;
  box-shadow:
    0 10px 26px rgba(150, 53, 44, 0.4),
    inset 0 0 0 2px rgba(250, 247, 239, 0.55),
    inset 0 0 0 5px rgba(150, 53, 44, 0.4);
  pointer-events: none;
  animation: hpSealStamp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
@keyframes hpSealStamp {
  0%   { transform: translate(-50%, -50%) rotate(-16deg) scale(1.7); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; }
}

.hp-actions { margin-top: 38px; }

/* ================= 第二幕 · 合盘呈现 ================= */
.hp-result {
  padding-top: 46px;
  border-top: 1px solid rgba(44, 42, 36, 0.08);
}
.hp-result .section-head { margin-bottom: 52px; }
.hp-badge-row { margin-top: 16px; }

/* ---------- ① 总评：圆环仪表 + 断语 ---------- */
.hp-verdict-panel {
  max-width: 980px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 52px;
  align-items: center;
  padding: 34px 46px;
  background: rgba(250, 247, 239, 0.78);
  border: 1px solid rgba(184, 145, 75, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(44, 42, 36, 0.08);
}

.hp-gauge-wrap { position: relative; width: 216px; margin-inline: auto; }
.hp-gauge { width: 100%; height: auto; }
.hp-gauge-base {
  fill: none;
  stroke: rgba(212, 175, 106, 0.15);
  stroke-width: 12;
}
.hp-gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 552.92;   /* 2πr, r=88 */
  stroke-dashoffset: 552.92;  /* 起始 0%，JS 触发生长 */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.4s var(--ease-out) 0.15s;
  filter: drop-shadow(0 0 10px rgba(212, 175, 106, 0.4));
}
.hp-gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.hp-gauge-score {
  font-family: var(--font-serif);
  font-size: 56px; font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(168deg, var(--gold-300) 8%, var(--gold-500) 58%, var(--gold-700) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(184, 145, 75, 0.28));
}
.hp-gauge-label {
  font-family: var(--font-serif);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.32em; text-indent: 0.32em;
  color: var(--paper-ink-soft);
}

.hp-verdict {
  font-family: var(--font-serif);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--paper-ink);
}
.hp-verdict-note {
  margin-top: 12px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--paper-ink-soft);
}

/* ---------- ②③ 面板 ---------- */
.hp-panels {
  max-width: 980px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
}
.hp-panel {
  padding: 26px 28px;
  background: rgba(250, 247, 239, 0.78);
  border: 1px solid rgba(44, 42, 36, 0.12);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 10px rgba(44, 42, 36, 0.05);
}
.hp-panel-title {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: 16px;
  letter-spacing: 0.22em;
  color: var(--paper-ink);
}
.hp-panel-note {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--paper-ink-soft);
}

/* 五维条（沿用五行条视觉语言：名 / 轨道 / 生长 / 百分比 + 小注） */
.hp-dims { margin-top: 22px; display: grid; gap: 18px; }
.hp-dim {
  display: grid;
  grid-template-columns: 4.8em 1fr 3.2em;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 4px;
  animation: hpRise 0.6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.hp-dim-name {
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: 14.5px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--paper-ink);
  white-space: nowrap;
}
.hp-dim-track {
  grid-row: 1;
  height: 10px;
  border-radius: 999px;
  background: rgba(44, 42, 36, 0.08);
  box-shadow: inset 0 1px 2px rgba(44, 42, 36, 0.08);
  overflow: hidden;
}
.hp-dim-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transition: width 1.1s var(--ease-out);
  transition-delay: var(--hp-delay, 0s);
}
.hp-dim-val {
  grid-row: 1;
  font-size: 12.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--paper-ink-soft);
}
.hp-dim-note {
  grid-row: 2;
  grid-column: 2 / 4;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-ink-soft);
}
@keyframes hpRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* 干支亮点 chips：合者金框，冲者朱砂框 */
.hp-highlights {
  list-style: none;
  margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.hp-chip {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  animation: hpRise 0.55s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 110ms);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.hp-chip:hover { transform: translateY(-2px); }
.hp-chip-type {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 700;
  border-radius: 8px;
}
.hp-chip-text {
  font-family: var(--font-serif);
  font-size: 14.5px;
  letter-spacing: 0.06em;
  line-height: 1.8;
  color: var(--paper-ink);
}
.hp-chip.is-he {
  border: 1px solid rgba(184, 145, 75, 0.55);
  background: rgba(212, 175, 106, 0.08);
}
.hp-chip.is-he:hover { box-shadow: 0 8px 18px rgba(120, 96, 50, 0.14); }
.hp-chip.is-he .hp-chip-type {
  color: var(--gold-700);
  border: 1px solid rgba(150, 114, 58, 0.5);
  background: rgba(212, 175, 106, 0.14);
}
.hp-chip.is-chong {
  border: 1px solid rgba(184, 73, 62, 0.5);
  background: rgba(184, 73, 62, 0.06);
}
.hp-chip.is-chong:hover { box-shadow: 0 8px 18px rgba(150, 53, 44, 0.14); }
.hp-chip.is-chong .hp-chip-type {
  color: var(--paper-50);
  background: linear-gradient(155deg, var(--cinnabar), var(--cinnabar-deep));
  box-shadow: 0 3px 8px rgba(150, 53, 44, 0.3);
}

/* ================= 响应式 ================= */
@media (max-width: 960px) {
  .hp-pair { grid-template-columns: 1fr; gap: 30px; }
  .hp-he-seal { display: none; }
}

@media (max-width: 860px) {
  .hp-panels { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hp-entry { padding-top: 52px; }
  .hp-card .geng-head { padding: 22px 18px 18px; }
  .hp-card .geng-body { padding: 28px 20px 32px; gap: 24px; }
  .hp-card .date-grid.hp-date { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-actions { margin-top: 30px; }
  .btn-cast { width: 100%; min-width: 0; }
  .hp-verdict-panel {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 22px;
    text-align: center;
  }
  .hp-gauge-wrap { width: 184px; }
  .hp-gauge-score { font-size: 46px; }
  .hp-panel { padding: 22px 18px; }
  .hp-dim { grid-template-columns: 4.2em 1fr 3em; }
}

/* 动效尊重系统减弱设置（base.css 已全局压平动画时长，此处兜底） */
@media (prefers-reduced-motion: reduce) {
  .hp-he-seal { animation: none; opacity: 1; }
  .hp-dim, .hp-chip { animation: none; }
  .hp-gauge-fill, .hp-dim-fill { transition: none; }
}