/* ==================== 恋爱六芒星布局 ==================== */
/* 两行三列：上排 [过去影响][对方↑][环境因素]，下排 [吸引力][自己↓][未来走向] */

/* ========== 抽牌页 ========== */
.spread-container.spread-6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 两行间距 35px：上行标签底部(约147px) + 35px = 182px > 下行牌顶(0)，不重叠 */
  gap: 35px;
  min-height: 560px;
  padding: 80px 0 75px;
  --card-w-six: 78px;
  --card-h-six: 132px;
}

.spread-container.spread-6 .card-slot {
  width: var(--card-w-six);
  height: var(--card-h-six);
}
.spread-container.spread-6 .card-3d {
  width: 100%;
  height: 100%;
}

/* card-wrapper 基础 */
.spread-6 .card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 普通牌 wrapper：高度 = 牌高 + 文字标签 */
.spread-6 .card-wrapper {
  height: calc(var(--card-h-six) + 22px);
}

/* 突出牌 wrapper：左右增加 margin，将两侧牌推出去 */
.spread-6 .card-wrapper.highlight-wrapper {
  margin-left: 46px;
  margin-right: 46px;
}

/* 行布局：gap 18px，四张牌之间距离更远 */
.spread-6 .cross-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 400px;
}

/* === 对方/自己 上下突出半个身位（绝对定位）=== */
.spread-6 .card-slot.highlight-up,
.spread-6 .card-slot.highlight-down {
  position: absolute;
  top: 0;
  z-index: 2;
}
.spread-6 .card-slot.highlight-up {
  transform: translateY(-50%);
}
.spread-6 .card-slot.highlight-down {
  transform: translateY(50%);
}

/* 光晕效果 */
.spread-6 .card-slot.highlight-up .card-3d {
  box-shadow: 0 0 20px rgba(255, 107, 157, 0.5), 0 0 40px rgba(255, 107, 157, 0.2);
  border-color: rgba(255, 107, 157, 0.6);
}
.spread-6 .card-slot.highlight-down .card-3d {
  box-shadow: 0 0 20px rgba(100, 200, 255, 0.5), 0 0 40px rgba(100, 200, 255, 0.2);
  border-color: rgba(100, 200, 255, 0.6);
}

/* ========== 位置标签：跟随每张牌的实际位置 ========== */

/* 普通牌标签：在牌底(card-h-six)下方 1px，紧贴 */
.spread-6 .position-label {
  position: absolute;
  top: calc(var(--card-h-six) + 1px);
  font-size: 0.7rem;
  letter-spacing: 0.6px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}

/* 对方牌(highlight-up, translateY(-50%))标签：
   牌实际底部 = card-h-six * 0.5，标签在牌底下方 1px，紧贴 */
.spread-6 .card-slot.highlight-up ~ .position-label {
  top: calc(var(--card-h-six) * 0.5 + 1px);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.75rem;
}

/* 自己牌(highlight-down, translateY(50%))标签：
   牌实际底部 = card-h-six * 1.5，标签在牌底下方 1px，紧贴 */
.spread-6 .card-slot.highlight-down ~ .position-label {
  top: calc(var(--card-h-six) * 1.5 + 1px);
  color: var(--gold);
  font-weight: 600;
  font-size: 0.75rem;
}

/* ===== 手机端 ===== */
@media (max-width: 480px) {
  .spread-container.spread-6 {
    /* gap 30px：上行标签底部(约122px) + 30px = 152px > 下行牌顶(0)，不重叠 */
    gap: 30px;
    min-height: 480px;
    padding-top: max(68px, calc(env(safe-area-inset-top) + 22px));
    padding-bottom: max(62px, calc(env(safe-area-inset-bottom) + 40px));
    --card-w-six: 65px;
    --card-h-six: 110px;
  }

  .spread-6 .card-wrapper {
    height: calc(var(--card-h-six) + 18px);
  }

  /* 手机端突出牌 wrapper 左右 margin 增大 */
  .spread-6 .card-wrapper.highlight-wrapper {
    margin-left: 38px;
    margin-right: 38px;
  }

  .spread-6 .cross-row {
    gap: 14px;
    max-width: 340px;
  }

  .spread-6 .position-label {
    font-size: 0.55rem;
    letter-spacing: 0.2px;
    top: calc(var(--card-h-six) + 1px);
  }

  .spread-6 .card-slot.highlight-up ~ .position-label {
    top: calc(var(--card-h-six) * 0.5 + 1px);
    font-size: 0.6rem;
  }

  .spread-6 .card-slot.highlight-down ~ .position-label {
    top: calc(var(--card-h-six) * 1.5 + 1px);
    font-size: 0.6rem;
  }
}

/* ==================== 六牌阵结果页 ==================== */
.result-spread-six {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  margin-bottom: 20px;
  /* 对方牌向上突出半个身位(66px)，需要上padding防截断 */
  padding: 80px 0 0;
  /* 结果页卡片尺寸与抽卡页一致 */
  --card-w-six: 78px;
  --card-h-six: 132px;
}

/* 结果页卡片尺寸覆盖 */
.result-spread-six .card-slot {
  width: var(--card-w-six);
  height: var(--card-h-six);
}

.result-spread-six .result-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}

.result-spread-six .card-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: calc(var(--card-h-six) + 22px);
}

/* 结果页突出牌 wrapper */
.result-spread-six .card-wrapper.highlight-wrapper {
  margin-left: 36px;
  margin-right: 36px;
}

/* 结果页绝对定位突出 */
.result-spread-six .card-slot.highlight-up,
.result-spread-six .card-slot.highlight-down {
  position: absolute;
  top: 0;
  z-index: 2;
}
.result-spread-six .card-slot.highlight-up {
  transform: translateY(-50%);
}
.result-spread-six .card-slot.highlight-down {
  transform: translateY(50%);
}

/* 结果页位置标签：同样跟随牌的实际位置 */
.result-spread-six .position-label {
  position: absolute;
  top: calc(var(--card-h-six) + 1px);
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}
/* 对方牌标签 */
.result-spread-six .card-slot.highlight-up ~ .position-label {
  top: calc(var(--card-h-six) * 0.5 + 1px);
  color: var(--gold);
  font-weight: 600;
}
/* 自己牌标签 */
.result-spread-six .card-slot.highlight-down ~ .position-label {
  top: calc(var(--card-h-six) * 1.5 + 1px);
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 480px) {
  .result-spread-six {
    --card-w-six: 65px;
    --card-h-six: 110px;
    gap: 30px;
    padding-top: 68px;
  }
  .result-spread-six .card-slot {
    width: var(--card-w-six);
    height: var(--card-h-six);
  }
  .result-spread-six .card-wrapper {
    height: calc(var(--card-h-six) + 18px);
  }
  .result-spread-six .card-wrapper.highlight-wrapper {
    margin-left: 30px;
    margin-right: 30px;
  }
  .result-spread-six .result-row {
    gap: 6px;
    max-width: 320px;
  }
  .result-spread-six .position-label {
    font-size: 0.55rem;
    top: calc(var(--card-h-six) + 1px);
  }
  .result-spread-six .card-slot.highlight-up ~ .position-label {
    top: calc(var(--card-h-six) * 0.5 + 1px);
  }
  .result-spread-six .card-slot.highlight-down ~ .position-label {
    top: calc(var(--card-h-six) * 1.5 + 1px);
  }
}