page {
  background-color: #0f0f1b;
  color: #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
  min-height: 100vh;
  background-color: #0f0f1b;
  padding: 40rpx 30rpx 100rpx;
  box-sizing: border-box;
  color: #e0e0e0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 自定义返回按钮样式 */
.nav-back {
  position: absolute;
  top: 40rpx;
  left: 30rpx;
  display: flex;
  align-items: center;
  z-index: 100;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  background: rgba(255, 255, 255, 0.05);
}

.back-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
  color: #c9a0dc;
}

.back-text {
  font-size: 26rpx;
  color: #c9a0dc;
  letter-spacing: 2rpx;
}

/* 标题通用样式 */
.title-area {
  text-align: center;
  margin-top: 40rpx;
  margin-bottom: 60rpx;
}

.app-title {
  font-size: 44rpx;
  font-weight: 600;
  color: #c9a0dc;
  letter-spacing: 4rpx;
  display: block;
  margin-bottom: 16rpx;
}

.instruction {
  font-size: 26rpx;
  color: #8a8a9d;
  letter-spacing: 1rpx;
}

/* 1. 牌阵选择 - 卡片式V2 */

/* 顶部标题区域 */
.spread-header {
  text-align: center;
  padding: 60rpx 0 40rpx;
}

.spread-title {
  display: block;
  font-size: 36rpx;
  color: #c9a0dc;
  font-weight: 500;
  margin-bottom: 12rpx;
  letter-spacing: 2rpx;
}

.spread-subtitle {
  display: block;
  font-size: 24rpx;
  color: rgba(201, 160, 220, 0.7);
  letter-spacing: 2rpx;
  font-weight: 300;
}

/* 标签筛选条 */
.tags-area {
  padding: 0 30rpx 30rpx;
}

.tags-scroll {
  white-space: nowrap;
}

.tag-item {
  display: inline-block;
  padding: 12rpx 28rpx;
  margin-right: 16rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 160, 220, 0.3);
  border-radius: 30rpx;
  font-size: 26rpx;
  color: rgba(201, 160, 220, 0.8);
  transition: all 0.3s ease;
}

.tag-item.active {
  background: rgba(201, 160, 220, 0.2);
  border-color: rgba(201, 160, 220, 0.6);
  color: #ffffff;
  transform: scale(1.05);
}

/* 两列卡片网格 */
.spread-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
  padding: 0 30rpx 40rpx;
}

.spread-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 160, 220, 0.3);
  border-radius: 20rpx;
  padding: 30rpx 24rpx;
  position: relative;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  min-height: 240rpx;
  display: flex;
  flex-direction: column;
}

.spread-card:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 30rpx rgba(201, 160, 220, 0.3);
  border-color: rgba(201, 160, 220, 0.5);
}

.card-badge {
  position: absolute;
  top: 12rpx;
  right: 12rpx;
  background: rgba(201, 160, 220, 0.3);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #c9a0dc;
}

.card-name {
  display: block;
  font-size: 30rpx;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 12rpx;
  padding-right: 60rpx;
}

.card-desc {
  display: block;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 20rpx;
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  font-size: 20rpx;
  color: rgba(201, 160, 220, 0.7);
  padding-top: 16rpx;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.card-count {
  opacity: 0.8;
}

.card-cost {
  font-weight: 500;
}

/* 2. 洗牌仪式感 */
.ritual-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shuffling-container {
  position: relative;
  width: 200rpx;
  height: 300rpx;
  margin-bottom: 80rpx;
}

.shuffling-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
  animation: shuffle 1s infinite alternate ease-in-out;
}

@keyframes shuffle {
  from { transform: translateX(-40rpx) rotate(-5deg); }
  to { transform: translateX(40rpx) rotate(5deg); }
}

.ritual-hint {
  font-size: 28rpx;
  color: #c9a0dc;
  opacity: 0.8;
  animation: breathe 2s infinite ease-in-out;
}

@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* 3. 抽牌区域 (槽位 + 扇形) */
.drawing-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40rpx;
}

.slots-container {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: center;
  gap: 20rpx; /* 保持20rpx间距，与计算一致 */
  min-height: 240rpx; /* 改为最小高度 */
  max-height: 480rpx; /* 最多两排的高度 */
  margin-bottom: 60rpx;
  width: 100%;
  padding: 0 30rpx; /* 增加左右padding确保居中 */
}

.slot-item {
  width: 100rpx; /* 与WXS计算的宽度一致 */
  height: 160rpx; /* 与WXS计算的高度一致 */
  position: relative;
  flex-shrink: 0; /* 防止收缩 */
}

.slot-placeholder {
  width: 100%;
  height: 100%;
  border: 2rpx dashed rgba(201, 160, 220, 0.3);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.02);
}

.slot-num {
  font-size: 40rpx;
  color: rgba(201, 160, 220, 0.2);
  font-family: serif;
}

.slot-card-wrapper {
  width: 100%;
  height: 100%;
  animation: flyInSlot 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.slot-card-back {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes flyInSlot {
  from {
    transform: translateY(400rpx) scale(0.8) rotate(10deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1) rotate(0);
    opacity: 1;
  }
}

.fan-deck {
  position: relative;
  height: 380rpx;
  width: 100%;
  margin-top: 20rpx;
  perspective: 1000px;
  overflow: visible; /* 允许卡牌飞出容器 */
}

.fan-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 150rpx;
  height: 260rpx;
  margin-left: -75rpx;
  transform-origin: bottom center;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 10;
}

.card-back-sm {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fan-card.is-selected {
  z-index: 100;
  pointer-events: auto; /* 允许点击已抽出的牌返回 */
}

.draw-count {
  text-align: center;
  font-size: 36rpx;
  color: #c9a0dc;
  margin-top: 60rpx;
}

.confirm-draw-btn {
  margin: 40rpx auto;
  background: #c9a0dc;
  color: #1a1a2e;
  border-radius: 40rpx;
  font-weight: 600;
  width: 300rpx;
}

/* 4. 翻牌结果展示 */
.result-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30rpx 20rpx;
  overflow-y: auto;
}

.spread-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 12rpx;
  padding: 20rpx 0;
  margin: 0 auto;
}

/* 牌阵专属布局 - 传统排列方式 */

/* 1张牌 - 居中 */
.spread-display.one_card_guidance {
  max-width: 130rpx;
}

/* 3张牌 - 横排 */
.spread-display.three_time_flow,
.spread-display.three_problem_solution,
.spread-display.love_spark {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  gap: 15rpx;
  max-width: 375rpx;
}

/* 4张牌 - 2x2网格 */
.spread-display.two_choice_decision,
.spread-display.relationship_healing {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  gap: 15rpx;
  max-width: 245rpx;
}

/* 5张牌 - 十字形 (现状分析) */
.spread-display.five_situation_analysis {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.five_situation_analysis .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.five_situation_analysis .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.five_situation_analysis .card-slot:nth-child(3) { grid-area: 3 / 2; }
.spread-display.five_situation_analysis .card-slot:nth-child(4) { grid-area: 2 / 1; }
.spread-display.five_situation_analysis .card-slot:nth-child(5) { grid-area: 2 / 3; }

/* 5张牌 - 关系洞察 */
.spread-display.relationship_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.relationship_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.relationship_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
.spread-display.relationship_spread .card-slot:nth-child(3) { grid-area: 2 / 2; }
.spread-display.relationship_spread .card-slot:nth-child(4) { grid-area: 1 / 2; }
.spread-display.relationship_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }

/* 5张牌 - 缘分探索 */
.spread-display.destiny_connection {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.destiny_connection .card-slot:nth-child(1) { grid-area: 1 / 2; }
.spread-display.destiny_connection .card-slot:nth-child(2) { grid-area: 2 / 2; }
.spread-display.destiny_connection .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.destiny_connection .card-slot:nth-child(4) { grid-area: 2 / 3; }
.spread-display.destiny_connection .card-slot:nth-child(5) { grid-area: 3 / 2; }

/* 5张牌 - 职场突破 */
.spread-display.career_breakthrough {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.career_breakthrough .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.career_breakthrough .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.career_breakthrough .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.career_breakthrough .card-slot:nth-child(4) { grid-area: 3 / 2; }
.spread-display.career_breakthrough .card-slot:nth-child(5) { grid-area: 2 / 1; }

/* 5张牌 - 横排 */
.spread-display.timeline_spread,
.spread-display.diamond_spread {
  display: grid;
  grid-template-columns: repeat(5, 110rpx);
  gap: 12rpx;
  max-width: 600rpx;
}

/* 6张牌 - 2x3网格 */
.spread-display.career_planning,
.spread-display.wealth_analysis {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  gap: 15rpx;
  max-width: 375rpx;
}

/* 7张牌 - 马蹄铁形 */
.spread-display.horseshoe_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.horseshoe_spread .card-slot:nth-child(1) { grid-area: 4 / 1; }
.spread-display.horseshoe_spread .card-slot:nth-child(2) { grid-area: 3 / 1; }
.spread-display.horseshoe_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.horseshoe_spread .card-slot:nth-child(4) { grid-area: 1 / 2; }
.spread-display.horseshoe_spread .card-slot:nth-child(5) { grid-area: 2 / 3; }
.spread-display.horseshoe_spread .card-slot:nth-child(6) { grid-area: 3 / 3; }
.spread-display.horseshoe_spread .card-slot:nth-child(7) { grid-area: 4 / 3; }

/* 7张牌 - 灵性指引 */
.spread-display.spiritual_guidance {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  gap: 15rpx;
  max-width: 375rpx;
}

/* 10张牌 - 凯尔特十字 */
.spread-display.celtic_cross {
  display: grid;
  grid-template-columns: repeat(6, 104rpx);
  grid-template-rows: repeat(4, auto);
  gap: 8rpx;
  max-width: 100%;
}

.spread-display.celtic_cross .card-slot { width: 104rpx; }
.spread-display.celtic_cross .flip-scene { width: 104rpx; height: 174rpx; }

.spread-display.celtic_cross .card-slot:nth-child(1) { grid-area: 2 / 3; }
.spread-display.celtic_cross .card-slot:nth-child(2) { grid-area: 2 / 3; transform: rotate(90deg); z-index: 1; }
.spread-display.celtic_cross .card-slot:nth-child(3) { grid-area: 3 / 3; }
.spread-display.celtic_cross .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.celtic_cross .card-slot:nth-child(5) { grid-area: 1 / 3; }
.spread-display.celtic_cross .card-slot:nth-child(6) { grid-area: 2 / 4; }
.spread-display.celtic_cross .card-slot:nth-child(7) { grid-area: 1 / 5; }
.spread-display.celtic_cross .card-slot:nth-child(8) { grid-area: 2 / 5; }
.spread-display.celtic_cross .card-slot:nth-child(9) { grid-area: 3 / 5; }
.spread-display.celtic_cross .card-slot:nth-child(10) { grid-area: 4 / 5; }

/* 10张牌 - 生命之树 */
.spread-display.tree_of_life {
  display: grid;
  grid-template-columns: repeat(3, 104rpx);
  grid-template-rows: repeat(5, auto);
  gap: 10rpx;
  max-width: 100%;
}

.spread-display.tree_of_life .card-slot { width: 104rpx; }
.spread-display.tree_of_life .flip-scene { width: 104rpx; height: 174rpx; }

.spread-display.tree_of_life .card-slot:nth-child(1) { grid-area: 1 / 2; }
.spread-display.tree_of_life .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.tree_of_life .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.tree_of_life .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.tree_of_life .card-slot:nth-child(5) { grid-area: 3 / 3; }
.spread-display.tree_of_life .card-slot:nth-child(6) { grid-area: 3 / 2; }
.spread-display.tree_of_life .card-slot:nth-child(7) { grid-area: 4 / 1; }
.spread-display.tree_of_life .card-slot:nth-child(8) { grid-area: 4 / 3; }
.spread-display.tree_of_life .card-slot:nth-child(9) { grid-area: 4 / 2; }
.spread-display.tree_of_life .card-slot:nth-child(10) { grid-area: 5 / 2; }

/* 新增爱情牌阵布局 */

/* 恋人金字塔 - 4张牌 */
.spread-display.lover_pyramid {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.lover_pyramid .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.lover_pyramid .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.lover_pyramid .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.lover_pyramid .card-slot:nth-child(4) { grid-area: 1 / 2; }

/* 新爱牌阵 - 3张牌对角线 */
.spread-display.new_love {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.new_love .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.new_love .card-slot:nth-child(2) { grid-area: 2 / 2; }
.spread-display.new_love .card-slot:nth-child(3) { grid-area: 3 / 3; }

/* 人际关系牌阵 - 3张牌倒三角 */
.spread-display.relationship_basic {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.relationship_basic .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.relationship_basic .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.relationship_basic .card-slot:nth-child(3) { grid-area: 2 / 1 / 2 / 3; justify-self: center; }

/* 爱情树牌阵 - 5张牌树形 */
.spread-display.love_tree_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.love_tree_spread .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.love_tree_spread .card-slot:nth-child(2) { grid-area: 1 / 1; }
.spread-display.love_tree_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.love_tree_spread .card-slot:nth-child(4) { grid-area: 1 / 3; }
.spread-display.love_tree_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }

/* 爱情大十字 - 5张牌十字形 */
.spread-display.love_cross_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.love_cross_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.love_cross_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
.spread-display.love_cross_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.love_cross_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.love_cross_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }

/* 真命天子牌阵 - 5张牌菱形 */
.spread-display.mr_right {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.mr_right .card-slot:nth-child(1) { grid-area: 3 / 1; }
.spread-display.mr_right .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.mr_right .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.mr_right .card-slot:nth-child(4) { grid-area: 2 / 3; }
.spread-display.mr_right .card-slot:nth-child(5) { grid-area: 3 / 3; }

/* 寻找对象牌阵 - 5张牌X形 */
.spread-display.search_lover {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.search_lover .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.search_lover .card-slot:nth-child(2) { grid-area: 1 / 1; }
.spread-display.search_lover .card-slot:nth-child(3) { grid-area: 1 / 3; }
.spread-display.search_lover .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.search_lover .card-slot:nth-child(5) { grid-area: 3 / 3; }

/* 灵感对应牌阵 - 6张牌2x3网格 */
.spread-display.inspiration_correspondence {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  gap: 15rpx;
  max-width: 375rpx;
}

/* 吉普赛牌阵 - 5张牌十字形 */
.spread-display.gypsy_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.gypsy_spread .card-slot:nth-child(1) { grid-area: 1 / 2; }
.spread-display.gypsy_spread .card-slot:nth-child(2) { grid-area: 3 / 2; }
.spread-display.gypsy_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.gypsy_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.gypsy_spread .card-slot:nth-child(5) { grid-area: 2 / 3; }

/* 维纳斯牌阵 - 8张牌复杂菱形 */
.spread-display.venus_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.venus_spread .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.venus_spread .card-slot:nth-child(2) { grid-area: 2 / 3; }
.spread-display.venus_spread .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.venus_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.venus_spread .card-slot:nth-child(5) { grid-area: 3 / 2; }
.spread-display.venus_spread .card-slot:nth-child(6) { grid-area: 4 / 2; }
.spread-display.venus_spread .card-slot:nth-child(7) { grid-area: 3 / 1; }
.spread-display.venus_spread .card-slot:nth-child(8) { grid-area: 3 / 3; }

/* 恋人之树牌阵 - 7张牌树形对称 */
.spread-display.lover_tree {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.lover_tree .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.lover_tree .card-slot:nth-child(2) { grid-area: 1 / 3; }
.spread-display.lover_tree .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.lover_tree .card-slot:nth-child(4) { grid-area: 2 / 3; }
.spread-display.lover_tree .card-slot:nth-child(5) { grid-area: 3 / 1; }
.spread-display.lover_tree .card-slot:nth-child(6) { grid-area: 3 / 3; }
.spread-display.lover_tree .card-slot:nth-child(7) { grid-area: 4 / 2; }

/* 婚姻牌阵 - 7张牌六芒星形 */
.spread-display.marriage_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.marriage_spread .card-slot:nth-child(1) { grid-area: 4 / 2; }
.spread-display.marriage_spread .card-slot:nth-child(2) { grid-area: 3 / 1; }
.spread-display.marriage_spread .card-slot:nth-child(3) { grid-area: 3 / 3; }
.spread-display.marriage_spread .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.marriage_spread .card-slot:nth-child(5) { grid-area: 1 / 1; }
.spread-display.marriage_spread .card-slot:nth-child(6) { grid-area: 1 / 3; }
.spread-display.marriage_spread .card-slot:nth-child(7) { grid-area: 1 / 2; }

/* 新增事业牌阵布局 */

/* 金三角牌阵 - 3张牌金字塔形 */
.spread-display.golden_triangle {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.golden_triangle .card-slot:nth-child(1) { grid-area: 1 / 1 / 1 / 3; justify-self: center; }
.spread-display.golden_triangle .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.golden_triangle .card-slot:nth-child(3) { grid-area: 2 / 2; }

/* 成功之星牌阵 - 3张牌三角形 */
.spread-display.success_star {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.success_star .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.success_star .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.success_star .card-slot:nth-child(3) { grid-area: 1 / 2 / 3 / 3; align-self: center; }

/* 事业金字塔 - 4张牌金字塔形 */
.spread-display.career_pyramid {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.career_pyramid .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.career_pyramid .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.career_pyramid .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.career_pyramid .card-slot:nth-child(4) { grid-area: 1 / 2; }

/* 财富之树牌阵 - 5张牌十字树形 */
.spread-display.wealth_tree {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.wealth_tree .card-slot:nth-child(1) { grid-area: 3 / 2; }
.spread-display.wealth_tree .card-slot:nth-child(2) { grid-area: 2 / 2; }
.spread-display.wealth_tree .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.wealth_tree .card-slot:nth-child(4) { grid-area: 2 / 1; }
.spread-display.wealth_tree .card-slot:nth-child(5) { grid-area: 1 / 2; }

/* X时机牌阵 - 5张牌X形 */
.spread-display.x_opportunity {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.x_opportunity .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.x_opportunity .card-slot:nth-child(2) { grid-area: 1 / 1; }
.spread-display.x_opportunity .card-slot:nth-child(3) { grid-area: 1 / 3; }
.spread-display.x_opportunity .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.x_opportunity .card-slot:nth-child(5) { grid-area: 3 / 3; }

/* 面试求职牌阵 - 5张牌十字形 */
.spread-display.job_interview {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.job_interview .card-slot:nth-child(1) { grid-area: 3 / 2; }
.spread-display.job_interview .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.job_interview .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.job_interview .card-slot:nth-child(4) { grid-area: 2 / 2; }
.spread-display.job_interview .card-slot:nth-child(5) { grid-area: 1 / 2; }

/* 工作问题牌阵 - 6张牌六边形 */
.spread-display.work_problems {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.work_problems .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.work_problems .card-slot:nth-child(2) { grid-area: 1 / 1; }
.spread-display.work_problems .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.work_problems .card-slot:nth-child(4) { grid-area: 2 / 3; }
.spread-display.work_problems .card-slot:nth-child(5) { grid-area: 1 / 3; }
.spread-display.work_problems .card-slot:nth-child(6) { grid-area: 3 / 2; }

/* 财富波浪牌阵 - 6张牌波浪形 */
.spread-display.turbulent_finances {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.turbulent_finances .card-slot:nth-child(1) { grid-area: 3 / 1; }
.spread-display.turbulent_finances .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.turbulent_finances .card-slot:nth-child(3) { grid-area: 2 / 2; }
.spread-display.turbulent_finances .card-slot:nth-child(4) { grid-area: 2 / 3; }
.spread-display.turbulent_finances .card-slot:nth-child(5) { grid-area: 3 / 3; }
.spread-display.turbulent_finances .card-slot:nth-child(6) { grid-area: 1 / 2; }

/* 期望的工作 - 6张牌对称形 */
.spread-display.desired_job {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.desired_job .card-slot:nth-child(1) { grid-area: 1 / 2; }
.spread-display.desired_job .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.desired_job .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.desired_job .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.desired_job .card-slot:nth-child(5) { grid-area: 3 / 2; }
.spread-display.desired_job .card-slot:nth-child(6) { grid-area: 3 / 3; }

/* 新增决策牌阵布局 */

/* 二个选择牌阵 - 3张牌倒三角 */
.spread-display.two_options {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.two_options .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.two_options .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.two_options .card-slot:nth-child(3) { grid-area: 2 / 1 / 2 / 3; justify-self: center; }

/* 三个选择牌阵 - 3张牌正三角 */
.spread-display.three_options {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.three_options .card-slot:nth-child(1) { grid-area: 1 / 1 / 1 / 3; justify-self: center; }
.spread-display.three_options .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.three_options .card-slot:nth-child(3) { grid-area: 2 / 2; }

/* 每日树牌阵 - 4张牌十字形 */
.spread-display.daily_tree {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.daily_tree .card-slot:nth-child(1) { grid-area: 3 / 2; }
.spread-display.daily_tree .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.daily_tree .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.daily_tree .card-slot:nth-child(4) { grid-area: 2 / 3; }

/* 二选一牌阵 - 5张牌菱形 */
.spread-display.weigh_two {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.weigh_two .card-slot:nth-child(1) { grid-area: 3 / 2; }
.spread-display.weigh_two .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.weigh_two .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.weigh_two .card-slot:nth-child(4) { grid-area: 1 / 1; }
.spread-display.weigh_two .card-slot:nth-child(5) { grid-area: 1 / 3; }

/* 比较选择牌阵 - 6张牌3+3排列 */
.spread-display.comparing_choices {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  gap: 12rpx;
  max-width: 375rpx;
}

/* 三选一牌阵 - 7张牌复杂对称形 */
.spread-display.weigh_three {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.weigh_three .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.weigh_three .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.weigh_three .card-slot:nth-child(3) { grid-area: 2 / 2; }
.spread-display.weigh_three .card-slot:nth-child(4) { grid-area: 3 / 2; }
.spread-display.weigh_three .card-slot:nth-child(5) { grid-area: 1 / 3; }
.spread-display.weigh_three .card-slot:nth-child(6) { grid-area: 2 / 3; }
.spread-display.weigh_three .card-slot:nth-child(7) { grid-area: 3 / 3; }

/* 新增深度探索牌阵布局 */

/* 身心灵牌阵 - 4张牌倒T形 */
.spread-display.mind_body_spirit {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.mind_body_spirit .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.mind_body_spirit .card-slot:nth-child(2) { grid-area: 2 / 2; }
.spread-display.mind_body_spirit .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.mind_body_spirit .card-slot:nth-child(4) { grid-area: 1 / 2; }

/* 四元素牌阵 - 4张牌2x2方形 */
.spread-display.four_elements {
  display: grid;
  grid-template-columns: repeat(2, 110rpx);
  grid-template-rows: repeat(2, auto);
  gap: 15rpx;
  max-width: 245rpx;
}

.spread-display.four_elements .card-slot:nth-child(1) { grid-area: 1 / 1; }
.spread-display.four_elements .card-slot:nth-child(2) { grid-area: 2 / 1; }
.spread-display.four_elements .card-slot:nth-child(3) { grid-area: 2 / 2; }
.spread-display.four_elements .card-slot:nth-child(4) { grid-area: 1 / 2; }

/* 自我探索牌阵 - 4张牌箭头三角形 */
.spread-display.self_discovery {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.self_discovery .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.self_discovery .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.self_discovery .card-slot:nth-child(3) { grid-area: 3 / 1; }
.spread-display.self_discovery .card-slot:nth-child(4) { grid-area: 3 / 3; }

/* 认识你自己 - 5张牌十字形 */
.spread-display.know_yourself {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 15rpx;
  max-width: 375rpx;
}

.spread-display.know_yourself .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.know_yourself .card-slot:nth-child(2) { grid-area: 1 / 2; }
.spread-display.know_yourself .card-slot:nth-child(3) { grid-area: 2 / 3; }
.spread-display.know_yourself .card-slot:nth-child(4) { grid-area: 3 / 2; }
.spread-display.know_yourself .card-slot:nth-child(5) { grid-area: 2 / 1; }

/* 你的突破牌阵 - 5张牌五角形 */
.spread-display.your_breakthrough {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.your_breakthrough .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.your_breakthrough .card-slot:nth-child(2) { grid-area: 2 / 3; }
.spread-display.your_breakthrough .card-slot:nth-child(3) { grid-area: 1 / 2; }
.spread-display.your_breakthrough .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.your_breakthrough .card-slot:nth-child(5) { grid-area: 3 / 3; }

/* 元素十字牌阵 - 6张牌十字形 */
.spread-display.elemental_cross {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 12rpx;
  max-width: 375rpx;
}

.spread-display.elemental_cross .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.elemental_cross .card-slot:nth-child(2) { grid-area: 2 / 3; }
.spread-display.elemental_cross .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.elemental_cross .card-slot:nth-child(4) { grid-area: 1 / 2; }
.spread-display.elemental_cross .card-slot:nth-child(5) { grid-area: 3 / 2; }
.spread-display.elemental_cross .card-slot:nth-child(6) { grid-area: 4 / 2; }

/* 车轮牌阵 - 7张牌圆形轮状 */
.spread-display.wheel_spread {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 10rpx;
  max-width: 375rpx;
}

.spread-display.wheel_spread .card-slot:nth-child(1) { grid-area: 2 / 2; }
.spread-display.wheel_spread .card-slot:nth-child(2) { grid-area: 1 / 1; }
.spread-display.wheel_spread .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.wheel_spread .card-slot:nth-child(4) { grid-area: 3 / 1; }
.spread-display.wheel_spread .card-slot:nth-child(5) { grid-area: 1 / 3; }
.spread-display.wheel_spread .card-slot:nth-child(6) { grid-area: 2 / 3; }
.spread-display.wheel_spread .card-slot:nth-child(7) { grid-area: 3 / 3; }

/* 七行星牌阵 - 7张牌星形排列 */
.spread-display.seven_planets {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(4, auto);
  gap: 10rpx;
  max-width: 375rpx;
}

.spread-display.seven_planets .card-slot:nth-child(1) { grid-area: 4 / 1; }
.spread-display.seven_planets .card-slot:nth-child(2) { grid-area: 3 / 1; }
.spread-display.seven_planets .card-slot:nth-child(3) { grid-area: 2 / 1; }
.spread-display.seven_planets .card-slot:nth-child(4) { grid-area: 1 / 2; }
.spread-display.seven_planets .card-slot:nth-child(5) { grid-area: 2 / 3; }
.spread-display.seven_planets .card-slot:nth-child(6) { grid-area: 3 / 3; }
.spread-display.seven_planets .card-slot:nth-child(7) { grid-area: 4 / 3; }

/* 梦镜牌阵 - 7张牌金字塔形 */
.spread-display.dream_mirror {
  display: grid;
  grid-template-columns: repeat(3, 110rpx);
  grid-template-rows: repeat(3, auto);
  gap: 10rpx;
  max-width: 375rpx;
}

.spread-display.dream_mirror .card-slot:nth-child(1) { grid-area: 2 / 1; }
.spread-display.dream_mirror .card-slot:nth-child(2) { grid-area: 3 / 1; }
.spread-display.dream_mirror .card-slot:nth-child(3) { grid-area: 2 / 2; }
.spread-display.dream_mirror .card-slot:nth-child(4) { grid-area: 3 / 2; }
.spread-display.dream_mirror .card-slot:nth-child(5) { grid-area: 2 / 3; }
.spread-display.dream_mirror .card-slot:nth-child(6) { grid-area: 3 / 3; }
.spread-display.dream_mirror .card-slot:nth-child(7) { grid-area: 1 / 2; }





.card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 124rpx;
  margin-bottom: 8rpx;
}

.pos-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 60rpx;
  margin-bottom: 8rpx;
  width: 140%; /* Allow spilling over slightly */
  margin-left: -20%; /* Center the spill */
}

.pos-text-main {
  font-size: 24rpx;
  color: #8a8a9d;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap; /* Force single line if possible, or allow wrap controlling height */
}

.pos-seq {
  font-size: 20rpx;
  color: rgba(138, 138, 157, 0.6);
  margin-top: 4rpx;
}

.flip-scene {
  width: 124rpx;
  height: 208rpx;
  perspective: 1000rpx;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12rpx;
  overflow: hidden;
}

.face-back { background: #2a2a3e; }
.face-front { background: #1a1a2e; transform: rotateY(180deg); }

.card-image { width: 100%; height: 100%; }
.card-image.reversed { transform: rotate(180deg); }

.card-name-sm {
  margin-top: 12rpx;
  font-size: 22rpx;
  color: #c9a0dc;
  text-align: center;
}

/* 5. 深度解读区域 */
.interpretation-area {
  margin-top: 20rpx;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 24rpx;
  padding: 20rpx;
}

.theme-box {
  text-align: center;
  margin-bottom: 60rpx;
  background: rgba(201, 160, 220, 0.08);
  padding: 30rpx;
  border-radius: 16rpx;
}

.label {
  display: block;
  font-size: 20rpx;
  color: #c9a0dc;
  text-transform: uppercase;
  letter-spacing: 4rpx;
  margin-bottom: 16rpx;
  opacity: 0.6;
}

.theme-box .content {
  font-size: 34rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.4;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30rpx;
  margin-bottom: 60rpx;
}

.info-item .content {
  font-size: 26rpx;
  line-height: 1.6;
  color: #b0b0cf;
}

.pos-meanings {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 40rpx;
  margin-bottom: 60rpx;
}

.pos-meaning-item {
  margin-bottom: 40rpx;
}

.pos-title {
  font-size: 24rpx;
  color: #c9a0dc;
  display: block;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.pos-text {
  font-size: 26rpx;
  color: #b0b0cf;
  line-height: 1.8;
}

.advice-box {
  background: linear-gradient(135deg, rgba(201, 160, 220, 0.1), rgba(201, 160, 220, 0.03));
  padding: 40rpx;
  border-radius: 20rpx;
  border-left: 4rpx solid #c9a0dc;
}

.advice-box .content {
  font-size: 28rpx;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.6;
}

.reset-btn {
  margin-top: 80rpx;
  background: transparent;
  color: #c9a0dc;
  border: 1px solid rgba(201, 160, 220, 0.4);
  font-size: 24rpx;
  border-radius: 40rpx;
  width: 240rpx;
}

/* AI Loading */
.loading-ai {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  color: #c9a0dc;
  font-size: 26rpx;
}

.loading-dot {
  font-size: 60rpx;
  margin-bottom: 30rpx;
  animation: flash 1.5s infinite;
}

@keyframes flash {
  0%, 100% { opacity: 0.3; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* 整体趋势故事框 */
.story-box {
  background: linear-gradient(135deg, rgba(201, 160, 220, 0.1), rgba(138, 138, 157, 0.05));
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  border-left: 4rpx solid #c9a0dc;
}

.story-box .label {
  display: block;
  font-size: 24rpx;
  color: #c9a0dc;
  margin-bottom: 15rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.story-box .content {
  font-size: 28rpx;
  color: #e0e0e0;
  line-height: 1.8;
}

/* 提问区域 - 沉浸式仪式感版本 */
.asking-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx 60rpx;
  background: linear-gradient(180deg, #0f0f1b 0%, #1a1a2e 50%, #16213e 100%);
  position: relative;
}

/* 顶部引导语 */
.asking-title {
  font-size: 24rpx;
  color: rgba(201, 160, 220, 0.6);
  letter-spacing: 4rpx;
  text-align: center;
  margin-bottom: 60rpx;
  font-weight: 300;
}

/* 中央塔罗卡片式输入区 */
.input-card {
  width: 100%;
  background: rgba(201, 160, 220, 0.08);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(201, 160, 220, 0.3);
  border-radius: 40rpx;
  padding: 40rpx;
  margin-bottom: 50rpx;
  position: relative;
  box-shadow: 0 0 40rpx rgba(201, 160, 220, 0.2);
  transition: all 0.4s ease;
}

.input-card:focus-within {
  border-color: rgba(201, 160, 220, 0.6);
  box-shadow: 0 0 60rpx rgba(201, 160, 220, 0.4);
  background: rgba(201, 160, 220, 0.12);
}

.question-input {
  width: 100%;
  height: 280rpx;
  font-size: 32rpx;
  color: #ffffff;
  line-height: 1.6;
  background: transparent;
}

.placeholder-style {
  color: rgba(255, 255, 255, 0.25);
  font-size: 28rpx;
}

.char-count {
  position: absolute;
  bottom: 30rpx;
  right: 40rpx;
  font-size: 20rpx;
  color: rgba(138, 138, 157, 0.5);
}

/* 质量评分指示器 - 精简版 */
.quality-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24rpx;
  padding: 12rpx 20rpx;
  background: rgba(139, 233, 253, 0.08);
  border-radius: 20rpx;
  border: 1px solid rgba(139, 233, 253, 0.2);
}

.quality-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.quality-text {
  font-size: 24rpx;
  color: #8be9fd;
  font-weight: 400;
  opacity: 0.8;
}

/* 温和分割线 */
.divider {
  width: 200rpx;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 220, 0.3), transparent);
  margin: 30rpx 0 40rpx;
}

/* 塔罗低语区域 */
.whispers-area {
  width: 100%;
  margin-bottom: 60rpx;
}

.whispers-title {
  display: block;
  font-size: 24rpx;
  color: rgba(201, 160, 220, 0.7);
  text-align: center;
  margin-bottom: 30rpx;
  letter-spacing: 3rpx;
  font-weight: 300;
}

.whispers-scroll {
  width: 100%;
  white-space: nowrap;
}

/* 塔罗低语卡片 */
.whisper-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 160, 220, 0.3);
  border-radius: 20rpx;
  padding: 28rpx 32rpx;
  margin-right: 20rpx;
  min-width: 260rpx;
  max-width: 340rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.whisper-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(201, 160, 220, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.whisper-card:active {
  transform: scale(1.05);
}

.whisper-card.selected {
  background: rgba(201, 160, 220, 0.15);
  border-color: rgba(201, 160, 220, 0.6);
  box-shadow: 0 0 30rpx rgba(201, 160, 220, 0.4);
}

.whisper-card.selected::before {
  opacity: 1;
}

.whisper-text {
  font-size: 28rpx;
  color: #e0e0e0;
  line-height: 1.5;
  text-align: center;
  word-wrap: break-word;
  white-space: normal;
  position: relative;
  z-index: 1;
}

.whisper-card.selected .whisper-text {
  color: #ffffff;
  font-weight: 500;
}

/* 开启塔罗指引按钮 */
.start-btn {
  background: linear-gradient(135deg, #c9a0dc 0%, #8b7ba8 100%);
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 600;
  padding: 28rpx 120rpx;
  border-radius: 50rpx;
  box-shadow: 0 8rpx 30rpx rgba(201, 160, 220, 0.4);
  transition: all 0.2s ease;
  border: none;
  letter-spacing: 2rpx;
}

.start-btn::after {
  border: none;
}

.start-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 20rpx rgba(201, 160, 220, 0.3);
}

/* =========================================
   流式 AI 解读输出样式
   ========================================= */
.stream-result {
  padding: 30rpx 20rpx;
  animation: fadeIn 0.3s ease;
}

.stream-text {
  display: block;
  font-size: 28rpx;
  color: #e8e0f0;
  line-height: 1.8;
  white-space: pre-wrap;  /* 保留换行 */
  word-break: break-all;
  letter-spacing: 0.5rpx;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10rpx); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 翻牌提示 */
.flip-hint {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
  margin-top: 32rpx;
  animation: hintPulse 2s ease-in-out infinite;
}

.flip-hint-text {
  font-size: 26rpx;
  color: #c9a0dc;
  letter-spacing: 2rpx;
}

.flip-hint-icon {
  font-size: 20rpx;
  color: #c9a0dc;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* AI 警示语精简版 */
.ai-warning {
  margin-top: 40rpx;
  text-align: center;
  font-size: 22rpx;
  color: rgba(201, 160, 220, 0.4);
  letter-spacing: 1rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 40rpx;
}
/* 5. 分享引导模块 */
.share-guidance {
  width: 100%;
  max-width: 600rpx;
  background: linear-gradient(135deg, rgba(201, 160, 220, 0.1) 0%, rgba(201, 160, 220, 0.05) 100%);
  border: 1px solid rgba(201, 160, 220, 0.3);
  border-radius: 20rpx;
  padding: 30rpx;
  margin: 40rpx 0;
  text-align: center;
  box-sizing: border-box;
}

.guidance-text {
  font-size: 28rpx;
  color: #c9a0dc;
  margin-bottom: 24rpx;
  font-style: italic;
  letter-spacing: 2rpx;
  text-shadow: 0 0 10rpx rgba(201, 160, 220, 0.3);
}

.share-btn {
  background: linear-gradient(90deg, #ffd700, #daa520);
  color: #1a1a2e;
  font-size: 30rpx;
  font-weight: 600;
  border-radius: 40rpx;
  padding: 0 40rpx;
  line-height: 80rpx;
  border: none;
  box-shadow: 0 4rpx 16rpx rgba(218, 165, 32, 0.3);
  transition: all 0.3s ease;
}

.share-btn:active {
  transform: scale(0.96);
  box-shadow: 0 2rpx 8rpx rgba(218, 165, 32, 0.3);
}
/* @import '../../styles/disclaimer.wxss'; */