.shenshu-board {
  --guardian-image: url("assets/guardians/ox-tiger-xukongzang.png");
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: minmax(250px, 1fr) auto;
  gap: 6px;
  min-height: 310px;
  margin: 0 0 16px;
  padding: 42px 8px 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf7, #eee3d2);
}

.shenshu-board::before {
  display: none;
}

.guardian-pattern {
  position: fixed;
  z-index: 8;
  top: 0;
  left: 0;
  width: min(100%, 430px);
  height: min(930px, 100vh);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  place-items: center;
  padding: 58px 10px 90px;
  gap: 8px 4px;
  opacity: 0.07;
  pointer-events: none;
}

.guardian-pattern i {
  width: min(72%, 38px);
  height: min(72%, 54px);
  background: var(--guardian-image) center / contain no-repeat;
  mix-blend-mode: multiply;
}

@media (max-width: 600px) {
  .guardian-pattern {
    left: 0;
    width: 100%;
    transform: none;
  }
}

.shenshu-grid {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--shenshu-count, 6), minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}

.shenshu-column {
  display: grid;
  grid-row: 1 / 3;
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
  height: 100%;
  min-width: 0;
  text-align: center;
  font-family: var(--serif);
}

.number-node {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.number-node > small {
  display: block;
  margin-top: 5px;
  color: #24756f;
  font: 700 13px/1 var(--serif);
}

.number-node > .polarity-label {
  margin-top: 4px;
  color: #6b5b4f;
  font: 700 13px/1 var(--sans);
  letter-spacing: 1px;
  white-space: nowrap;
}

.number-node > .luck-age-marker {
  position: absolute;
  top: calc(50% - 62px);
  left: 0;
  z-index: 5;
  width: 100%;
  transform: none;
  color: #8b6a35;
  font: 700 18px/1 var(--sans);
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}

.relation-link {
  position: absolute;
  z-index: 4;
  top: calc(50% - 29px);
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 30px;
  color: #b23a2b;
  pointer-events: none;
}

.relation-link::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  border-top: 2px solid currentColor;
}

.relation-link.right::after,
.relation-link.left::after {
  content: "";
  position: absolute;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.relation-link.right::after {
  right: -1px;
  border-left: 8px solid currentColor;
}

.relation-link.left::after {
  left: -1px;
  border-right: 8px solid currentColor;
}

.relation-link em {
  position: absolute;
  z-index: 1;
  top: -1px;
  left: 50%;
  min-width: 20px;
  padding: 0 2px;
  transform: translateX(-50%);
  background: transparent;
  color: #b23a2b;
  font: 700 16px/1 var(--serif);
  font-style: normal;
  white-space: nowrap;
}

.relation-link.right em {
  left: 32%;
}

.relation-link.left em {
  left: 68%;
}

.relation-link em.compact {
  left: 50%;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0;
}

.shenshu-column b,
.shenshu-column strong {
  display: block;
  position: relative;
}

.shenshu-column b[data-relation]::after,
.shenshu-column strong[data-relation]::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 72%;
  width: 56%;
  height: 1px;
  background: rgba(122, 91, 55, 0.38);
}

.shenshu-column b[data-relation]::before,
.shenshu-column strong[data-relation]::before {
  content: attr(data-relation);
  position: absolute;
  z-index: 2;
  left: 100%;
  bottom: calc(50% + 5px);
  min-width: 48px;
  transform: translateX(-50%);
  color: #7b6a5c;
  font: 500 8px/1.2 var(--sans);
  white-space: nowrap;
}

.shenshu-column b,
.shenshu-column strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.shenshu-column.blue b,
.blue-number {
  color: #2e6bbd;
}

.shenshu-column.gold b,
.gold-number {
  color: var(--gold);
}

.shenshu-column.neutral b {
  color: #554940;
}

.purple-number {
  color: #8f578f;
}

.shenshu-column .number-1 { color: #278f93; }
.shenshu-column .number-2 { color: #2e6bbd; }
.shenshu-column .number-3 { color: #f7f4ed; text-shadow: 0 1px 2px rgba(37, 30, 25, 0.4); }
.shenshu-column .number-4 { color: #8f578f; }
.shenshu-column .number-5 { color: #3f8b58; }
.shenshu-column .number-6 { color: #d98282; }
.shenshu-column .number-7 { color: #a30712; }
.shenshu-column .number-8 { color: #d9b861; }
.shenshu-column .number-9 { color: #a87b36; }
.shenshu-column .number-10 { color: #5f5955; }
.shenshu-column .number-11 { color: #251e19; }
.shenshu-column .number-12 { color: #8b6041; }

/* 十二神数专属配色：数字及其下方五行、阴阳说明保持同色 */
.number-node.number-theme-1{--number-tone:#008c84}
.number-node.number-theme-2{--number-tone:#2457c5}
.number-node.number-theme-3{--number-tone:#b3a79a}
.number-node.number-theme-4{--number-tone:#7a4aa0}
.number-node.number-theme-5{--number-tone:#2f7d4a}
.number-node.number-theme-6{--number-tone:#df7b7b}
.number-node.number-theme-7{--number-tone:#9f1f2d}
.number-node.number-theme-8{--number-tone:#e3bd4b}
.number-node.number-theme-9{--number-tone:#b88200}
.number-node.number-theme-10{--number-tone:#68625e}
.number-node.number-theme-11{--number-tone:#241f1c}
.number-node.number-theme-12{--number-tone:#8b5a3c}
.number-node[class*="number-theme-"]>b,
.number-node[class*="number-theme-"]>strong,
.number-node[class*="number-theme-"]>.element-label,
.number-node[class*="number-theme-"]>.polarity-label{color:var(--number-tone)!important}
.number-node.number-theme-3>b,
.number-node.number-theme-3>strong,
.number-node.number-theme-3>.element-label,
.number-node.number-theme-3>.polarity-label{text-shadow:0 1px 2px rgba(37,30,25,.68),0 0 1px rgba(37,30,25,.55)}
.number-node.number-theme-3>b,
.number-node.number-theme-3>strong{
  -webkit-text-stroke:.9px rgba(48,39,32,.94);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(37,30,25,.84),0 0 3px rgba(37,30,25,.78);
}

.shenshu-labels {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-items: center;
  font: 600 24px/1.1 var(--serif);
}

.shenshu-labels b { white-space: nowrap; transform: none; }
.shenshu-labels b:first-child { color: #9a691f; }
.shenshu-labels b:last-child { color: #8f2e38; }

.shenshu-column b,
.shenshu-column strong {
  color: #342a24 !important;
  text-shadow: none !important;
}

.birth-pillars {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  grid-template-columns: repeat(4, 1fr);
  margin: 14px -8px -18px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 17px 17px;
  background: rgba(231, 216, 190, 0.72);
}

.birth-pillars div {
  padding: 10px 3px;
  border-right: 1px solid var(--line);
  text-align: center;
}

.birth-pillars div:last-child {
  border-right: 0;
}

.birth-pillars small,
.birth-pillars b {
  display: block;
}

.birth-pillars small {
  color: var(--muted);
  font-size: 7px;
}

.birth-pillars b {
  margin-top: 2px;
  font: 600 13px var(--serif);
}

@media (max-width: 360px) {
  .shenshu-board {
    grid-template-columns: 36px minmax(0, 1fr);
    padding-inline: 5px;
  }

  .shenshu-column b,
  .shenshu-column strong {
    font-size: 26px;
  }

  .shenshu-labels {
    font-size: 22px;
  }
}

.result-head > div {
  min-width: 0;
}

.result-head h2 {
  white-space: nowrap;
}

.result-head h2 span {
  margin-left: 2px;
  color: #edcbd0;
  font: 400 0.5em/1 var(--sans);
  letter-spacing: -0.02em;
}

.basic-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.basic-sections button {
  position: relative;
  min-height: 88px;
  padding: 14px 12px 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, 0.9);
  color: var(--ink);
  text-align: left;
}

.basic-sections span,
.basic-sections b,
.basic-sections small {
  display: block;
}

.basic-sections span {
  position: absolute;
  top: 7px;
  right: 9px;
  color: rgba(163, 7, 18, 0.18);
  font: 700 22px/1 var(--serif);
}

.basic-sections b {
  color: var(--red);
  font: 600 16px/1.4 var(--serif);
}

.basic-sections small {
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.personality-report,
.kinship-report,
.health-report {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, 0.94);
}

.result-panel {
  display: none;
}

.result-panel.active {
  display: block;
}

.result-tabs {
  overflow: hidden;
  padding-inline: 6px;
}

.result-tabs button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
  font-size: 9px;
  white-space: nowrap;
}

.overview-report,
.pending-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 253, 247, 0.94);
}

.overview-report {
  padding: 17px;
}

.overview-report > small {
  color: var(--red);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.overview-report h3 {
  margin: 5px 0 8px;
  font: 600 17px/1.5 var(--serif);
}

.overview-report > p,
.overview-report div p {
  margin: 0;
  color: #51463e;
  font-size: 10px;
  line-height: 1.8;
}

#overviewFocus {
  white-space: pre-line;
}

.overview-praise,
.overview-focus {
  margin-top: 12px;
  padding: 12px;
}

.overview-praise {
  background: rgba(168, 123, 54, 0.1);
}

.overview-focus {
  background: rgba(163, 7, 18, 0.07);
}

.overview-praise b,
.overview-focus b {
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font: 600 12px var(--serif);
}

.pending-panel {
  min-height: 110px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font: 500 14px var(--serif);
  letter-spacing: 0.12em;
}

.personality-report > small,
.kinship-report > small,
.health-report > small {
  color: var(--red);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.personality-report h3,
.kinship-report h3,
.health-report h3 {
  margin: 5px 0 9px;
  font: 600 17px/1.5 var(--serif);
}

.personality-summary,
.kinship-summary,
.health-summary,
.report-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
}

.kinship-relations {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kinship-relations > div {
  padding: 11px 12px;
  border-left: 3px solid var(--red);
  background: rgba(232, 222, 204, 0.56);
}

.kinship-relations b {
  font: 600 12px var(--serif);
  color: var(--red);
}

.kinship-relations p {
  margin: 5px 0 0;
  color: #51463e;
  font-size: 10px;
  line-height: 1.75;
}

.personality-summary {
  margin: 0 0 12px;
}

.kinship-summary,
.health-summary {
  margin: 0 0 12px;
}

.personality-point {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

.personality-point b {
  display: block;
  margin-bottom: 4px;
  color: var(--red);
  font: 600 12px var(--serif);
}

.personality-point p {
  margin: 0;
  color: #51463e;
  font-size: 10px;
  line-height: 1.75;
}

.report-note {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  text-align: center;
}

/* 结果页正文统一为日期标题小一号，避免手机阅读时字号过小。 */
.overview-report > p,
.overview-report div p,
.personality-summary,
.kinship-summary,
.health-summary,
.kinship-relations p,
.personality-point p,
.analysis-card > p,
.ai-rule-interpretation p {
  font-size: 16px;
  line-height: 1.8;
}

.overview-report > small,
.personality-report > small,
.kinship-report > small,
.health-report > small,
.ai-rule-interpretation small,
.ai-rule-interpretation em {
  font-size: 13px;
  line-height: 1.55;
}

.overview-praise b,
.overview-focus b,
.kinship-relations b,
.personality-point b,
.ai-rule-interpretation h3 {
  margin: 0 0 14px;
  text-align: center;
  font-size: 24px;
  line-height: 1.35;
}

.ai-rule-interpretation {
  border-left: 0;
}

.ai-rule-interpretation em {
  text-align: center;
}

.analysis-card .section-title,
.analysis-card .section-title > div {
  width: 100%;
  text-align: center;
}

.analysis-card [data-element-missing] {
  text-align: center;
}

/* 命盘行使用数字中心线作为唯一坐标，避免附属文字改变箭头位置。 */
.shenshu-column .number-node > b,
.shenshu-column .number-node > strong {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.number-node > .element-label {
  position: absolute;
  top: calc(50% + 25px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.number-node > .polarity-label {
  position: absolute;
  top: calc(50% + 46px);
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
}

.number-node > .relation-link {
  top: 50%;
  left: calc(50% + 18px);
  width: calc(100% - 36px);
  height: 1px;
}

.number-node > .relation-link::before {
  top: 0;
}

.number-node > .relation-link.right::after,
.number-node > .relation-link.left::after {
  top: -5px;
}

.number-node > .relation-link em {
  top: -25px;
}

.result-tabs button {
  font-size: 14px;
}

@media (max-width: 380px) {
  .result-head {
    padding-inline: 10px;
  }

  .result-head h2 {
    font-size: 21px;
  }

}

.wealth-report {
  padding: 19px 18px;
  border: 1px solid rgba(154,116,68,.2);
  border-radius: 18px;
  background: rgba(255,252,246,.74);
}
.wealth-report > small { color:#9a7444;font:600 12px/1.4 var(--serif) }
.wealth-report h3 { margin:6px 0 12px;color:#503d29;font:700 20px/1.4 var(--serif) }
.wealth-summary { margin:0;color:#5f554c;font:400 14px/1.85 var(--sans);white-space:pre-line }
.wealth-periods { display:grid;gap:12px;margin-top:16px }
.wealth-periods section { padding:14px 15px;border:1px solid rgba(154,116,68,.2);border-radius:14px;background:rgba(255,252,246,.72) }
.wealth-periods b { display:block;color:#785527;font:700 14px/1.4 var(--serif) }
.wealth-periods p { margin:7px 0 0;color:#5f554c;font:400 13px/1.75 var(--sans) }