/* ==================== 心之声（8牌心形阵）布局 ==================== */
/* 左4右4对称心形：
          [你的内心]    [TA的内心]      ← 心顶V口两侧（内肩）
       [你眼中的TA]      [TA眼中的你]   ← 外肩
    [你的期望]                [TA的期望] ← 左右腰
          [感情现状]    [指引建议]      ← 心尖汇聚
   抽卡顺序：感情现状 → 你的内心 → TA的内心 → 你眼中的TA → TA眼中的你 → 你的期望 → TA的期望 → 指引建议
*/

/* ========== 容器（抽牌页与结果页共用） ========== */
.spread-container.spread-8,
.result-spread-eight {
  display: block;
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 425px;
  min-height: 0;
  margin: 5px auto 12px;
  padding: 0;
  gap: 0;
  --card-w-eight: 72px;
  --card-h-eight: 122px;
}

/* 心形描边背景（虚线金色，呼应牌阵说明图） */
.spread-container.spread-8::before,
.result-spread-eight::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 96%;
  height: 92%;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2092'%3E%3Cpath%20d='M50%2032%20C50%2022%2041%2012%2029%2012%20C15%2012%207%2022%207%2034%20C7%2052%2027%2066%2050%2086%20C73%2066%2093%2052%2093%2034%20C93%2022%2085%2012%2071%2012%20C59%2012%2050%2022%2050%2032%20Z'%20fill='none'%20stroke='%23d4af37'%20stroke-width='1.4'%20stroke-dasharray='5%204'%20stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
}

/* ========== 卡牌与标签 ========== */
.spread-8 .card-wrapper,
.result-spread-eight .card-wrapper {
  position: absolute;
  width: var(--card-w-eight);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.spread-8 .card-slot,
.result-spread-eight .card-slot {
  width: var(--card-w-eight);
  height: var(--card-h-eight);
}

.spread-8 .card-3d,
.result-spread-eight .card-3d {
  width: 100%;
  height: 100%;
}

/* 心形阵空卡槽不显示槽内竖排文字（牌位名已由下方标签展示，避免重复拥挤） */
.spread-8 .card-slot.empty::after {
  content: none;
}

/* 位置标签：紧贴每张牌下方，不受旋转影响的独立居中 */
.spread-8 .position-label,
.result-spread-eight .position-label {
  position: absolute;
  top: calc(var(--card-h-eight) + 2px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
  min-height: 0;
  margin-top: 0;
}

/* ========== 心形八个点位（左4右4对称） ========== */
/* 心尖左：感情现状 */
.spread-8 .heart-pos-1,
.result-spread-eight .heart-pos-1 {
  left: 26%;
  top: 63%;
  transform: translateX(-50%) rotate(-8deg);
  z-index: 2;
}
/* 左肩内（V口旁）：你的内心 */
.spread-8 .heart-pos-2,
.result-spread-eight .heart-pos-2 {
  left: 36%;
  top: 5%;
  transform: translateX(-50%) rotate(-10deg);
}
/* 右肩内（V口旁）：TA的内心 */
.spread-8 .heart-pos-3,
.result-spread-eight .heart-pos-3 {
  left: 64%;
  top: 5%;
  transform: translateX(-50%) rotate(10deg);
}
/* 左肩外：你眼中的TA */
.spread-8 .heart-pos-4,
.result-spread-eight .heart-pos-4 {
  left: 14%;
  top: 10%;
  transform: translateX(-50%) rotate(-16deg);
}
/* 右肩外：TA眼中的你 */
.spread-8 .heart-pos-5,
.result-spread-eight .heart-pos-5 {
  left: 86%;
  top: 10%;
  transform: translateX(-50%) rotate(16deg);
}
/* 左腰：你的期望 */
.spread-8 .heart-pos-6,
.result-spread-eight .heart-pos-6 {
  left: 11%;
  top: 41%;
  transform: translateX(-50%) rotate(-5deg);
  z-index: 2;
}
/* 右腰：TA的期望 */
.spread-8 .heart-pos-7,
.result-spread-eight .heart-pos-7 {
  left: 89%;
  top: 41%;
  transform: translateX(-50%) rotate(5deg);
  z-index: 2;
}
/* 心尖右：指引建议 */
.spread-8 .heart-pos-8,
.result-spread-eight .heart-pos-8 {
  left: 74%;
  top: 63%;
  transform: translateX(-50%) rotate(8deg);
  z-index: 2;
}

/* 心尖两张牌（感情现状 / 指引建议）金色强调标签 */
.spread-8 .heart-pos-1 .position-label,
.spread-8 .heart-pos-8 .position-label,
.result-spread-eight .heart-pos-1 .position-label,
.result-spread-eight .heart-pos-8 .position-label {
  color: var(--gold);
  font-weight: 600;
}

/* ===== 手机端 ===== */
@media (max-width: 480px) {
  .spread-container.spread-8,
  .result-spread-eight {
    max-width: 100%;
    height: 350px;
    margin: 5px auto 15px;
    /* 卡牌尺寸随视口收缩（360px 以上保持 56px，窄屏自动缩小防溢出） */
    --card-w-eight: clamp(44px, 15.5vw, 56px);
    --card-h-eight: calc(var(--card-w-eight) * 1.696);
  }

  .spread-8 .position-label,
  .result-spread-eight .position-label {
    font-size: 0.55rem;
    letter-spacing: 0.2px;
  }

}

/* ===== 安卓微信 X5 内核修复：覆盖 pages.css 的 inline-block 通用修复 ===== */
.android.weixin .spread-container.spread-8,
.android.weixin .result-spread-eight {
  display: block;
  text-align: left;
}
.android.weixin .spread-container.spread-8 .card-wrapper,
.android.weixin .result-spread-eight .card-wrapper {
  display: flex;
  margin: 0;
}