/* 确保banner-section占据足够高度并铺满背景 */
.banner-section {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
}

/* ===== 星座轮盘样式 ===== */

/* 外圆圈样式 - 包含前6个星座（白羊座、金牛座、双子座、巨蟹座、狮子座、处女座） */
.big-circle {
  position: relative;           /* 相对定位，作为内部元素的定位容器 */
  width: 90%;                   /* 宽度为父容器的90% */
  max-width: 400px;             /* 最大宽度限制为400px */
  height: auto;                 /* 高度自适应，保持宽高比 */
  aspect-ratio: 1 / 1;          /* 确保宽高比为1:1，保持圆形 */
  margin: 0 auto;               /* 水平居中 */
  /* 径向渐变背景（粉紫色→透明） */
  background: radial-gradient(circle at center, rgba(255, 0, 255, 0.3) 0%, transparent 70%);
  /* 4层霓虹发光阴影（粉紫色+青蓝色渐变） */
  box-shadow: 
    0 0 10px rgba(255, 0, 255, 0.8),
    0 0 20px rgba(0, 255, 255, 0.6),
    0 0 30px rgba(255, 0, 255, 0.4),
    0 0 40px rgba(0, 255, 255, 0.3);
}

/* 内圆圈样式 - 包含后6个星座（天秤座、天蝎座、射手座、摩羯座、水瓶座、双鱼座） */
.circle {
  position: absolute;           /* 绝对定位，相对于外圆圈居中 */
  left: 50%;                    /* 左边缘定位到父容器50%位置 */
  top: 50%;                     /* 上边缘定位到父容器50%位置 */
  transform: translate(-50%, -50%); /* 向左向上移动自身50%，实现完全居中 */
  width: 60%;                   /* 宽度为外圆圈的60% */
  height: auto;                 /* 高度自适应，保持宽高比 */
  aspect-ratio: 1 / 1;          /* 确保宽高比为1:1，保持圆形 */
  margin: 0 auto;               /* 水平居中 */
  /* 径向渐变背景（青蓝色→透明） */
  background: radial-gradient(circle at center, rgba(0, 255, 255, 0.3) 0%, transparent 70%);
  /* 4层霓虹发光阴影（青蓝色+黄色渐变） */
  box-shadow: 
    0 0 10px rgba(0, 255, 255, 0.8),
    0 0 20px rgba(255, 255, 0, 0.6),
    0 0 30px rgba(0, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 0, 0.3);
}

/* 中心logo样式 - 显示在轮盘正中心 */
.center-logo {
  position: absolute;           /* 绝对定位，相对于轮盘居中 */
  left: 50%;                    /* 左边缘定位到父容器50%位置 */
  top: 50%;                     /* 上边缘定位到父容器50%位置 */
  transform: translate(-50%, -50%); /* 向左向上移动自身50%，实现完全居中 */
  width: 25%;                   /* 宽度为轮盘的25% */
  height: auto;                 /* 高度自适应，保持宽高比 */
  aspect-ratio: 1 / 1;          /* 确保宽高比为1:1，保持圆形 */
  display: flex;                /* 使用flex布局 */
  justify-content: center;      /* 水平居中对齐内部元素 */
  align-items: center;          /* 垂直居中对齐内部元素 */
  z-index: 10;                  /* 设置较高层级，确保显示在星座图标上方 */
  /* 圆形光晕渐变背景 */
  background: radial-gradient(circle at center, rgba(255, 215, 0, 0.6) 0%, rgba(255, 165, 0, 0.3) 50%, transparent 70%);
  /* 2层金色发光阴影 */
  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.8),
    0 0 30px rgba(255, 165, 0, 0.5);
  border-radius: 50%;           /* 圆形背景 */
}

/* 中心logo图片样式 */
.center-logo img {
  width: 80%;                   /* 图片宽度为容器的80%，留出边框空间 */
  height: auto;                 /* 高度自适应，保持图片比例 */
  max-width: none;              /* 移除最大宽度限制，允许图片随容器自由缩放 */
  object-fit: contain;          /* 保持图片完整显示，不裁剪，适应容器大小 */
  animation: none !important;   /* 禁用任何旋转动画 */
  transform: none !important;   /* 确保没有旋转变换 */
}



/* 星座图标容器基础样式 - 用于所有12个星座图标 */
.icon-block {
  position: absolute;           /* 绝对定位，用于星座图标的圆周排列 */
  height: auto;                 /* 高度自适应，保持宽高比 */
  aspect-ratio: 1 / 1;          /* 确保宽高比为1:1，保持正方形 */
  display: flex;                /* 使用flex布局 */
  justify-content: center;      /* 水平居中对齐内部图片 */
  align-items: center;          /* 垂直居中对齐内部图片 */
  border-radius: 50%;           /* 圆形图标容器 */
}

/* 星座图标图片样式 */
.icon-block img {
  width: 80%;                   /* 图片宽度为容器的80%，留出边框空间 */
  height: auto;                 /* 高度自适应，保持图片比例 */
  max-width: none;              /* 移除最大宽度限制，允许图片随容器自由缩放 */
  object-fit: contain;          /* 保持图片完整显示，不裁剪，适应容器大小 */
}

/* 动画定义 - 轮盘旋转动画（已停用） */
/* @keyframes rotate */
/* @keyframes rotateInner */

/* 调整banner区域背景图片 */
.img-main-abnner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.img-main-abnner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 调整main-bg-start的样式 */
.main-bg-start {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
  z-index: 1;
}

/* 调整banner-text-home的样式 */
.banner-text-home {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 50px 0;
}

/* 调整main的样式 */
.main {
  max-width: 100%;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 确保container不会限制背景显示 */
.banner-section .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 15px;
}

/* 移动端适配样式 - 屏幕宽度小于768px时 */
@media (max-width: 767px) {
  /* 调整星座轮盘容器大小和居中方式 */
  .main {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 100%;          /* 允许容器占满屏幕宽度 */
    height: auto;              /* 高度自适应 */
    padding: 10px;           /* 添加内边距，防止内容紧贴边缘 */
  }
  
  /* 调整外圆圈大小，保持响应式 */
  .big-circle {
    width: 100%;               /* 宽度为父容器的100% */
    max-width: 380px;          /* 最大宽度限制，确保在移动端完整显示 */
    height: auto;              /* 高度自适应 */
    aspect-ratio: 1 / 1;       /* 保持1:1宽高比，确保圆形 */
  }
  
  /* 调整内圆圈大小，保持响应式 */
  .circle {
    width: 50%;                /* 宽度为外圆圈的50% */
    height: auto;              /* 高度自适应 */
    aspect-ratio: 1 / 1;       /* 保持1:1宽高比，确保圆形 */
  }
  
  /* 调整中心logo大小，保持响应式 */
  .center-logo img {
    width: 100%;               /* 图片宽度充满容器 */
    max-width: none;           /* 移除最大宽度限制 */
    height: auto;              /* 高度自适应 */
    object-fit: contain;       /* 保持图片完整 */
    animation: none !important;   /* 禁用任何旋转动画 */
    transform: none !important;   /* 确保没有旋转变换 */
  }
  
  /* 确保所有星座轮盘元素居中显示 */
  .big-circle, .circle, .center-logo {
    margin: 0 auto;            /* 水平居中 */
  }
  
  /* 调整轮盘所在区域的内边距 */
  .banner-text-home {
    padding: 30px 0;           /* 适当增加上下内边距，提升移动端显示效果 */
  }
  
  /* 调整背景图片宽高比，为星座轮盘提供足够空间 */
  .img-main-abnner {
    padding-bottom: 80%;       /* 移动端使用更大的宽高比，确保轮盘完整显示 */
  }
}

/* 确保daily-horp section背景铺满 */
.daily-horp {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: transparent;
  background-image: none;
  padding: 50px 0;
  overflow: hidden;
}

/* 移除星空粒子效果 */
.daily-horp::before {
  display: none;
}

/* 确保container内的内容居中显示 */
.daily-horp .container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;
  padding: 20px;
  border-radius: 10px;
}

/* 调整卡片元素的透明度，与星空背景更好融合 */
.daily-horp .card {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(5px);
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 调整塔罗牌占卜卡片的透明度，使其更加透明 */
#tarotFormContainer .card {
  background: rgba(0, 0, 0, 0.1) !important; /* 更透明的背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 调整星座运势查询卡片的透明度，使其更加透明 */

/* 塔罗牌圆形布局样式 */
.tarot-cards-container {
  width: 100%;
  height: 500px; /* 设置足够的高度来容纳圆形布局的卡片 */
  margin: 20px 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  padding: 20px;
}

.tarot-cards-row {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 移除网格布局，使用相对定位来支持圆形布局 */
  overflow: visible;
}

/* 移除之前的transform样式覆盖 */
.tarot-cards-row {
  transform: none !important; /* 保留，但通过JavaScript控制实际变换 */
}

/* 优化圆形布局的视觉效果 */
.tarot-cards-container {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 增强选中卡牌的视觉效果 */
.tarot-card-item.selected {
  transform: scale(1.1) !important;
  z-index: 20 !important;
  border-color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tarot-card-item {
  width: 100px; /* 增大卡片宽度 */
  height: 150px; /* 增大卡片高度 */
  position: absolute; /* 使用绝对定位来实现圆形布局 */
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px; /* 增大圆角 */
  overflow: hidden;
  border: 2px solid transparent;
  /* 移除transform-origin，圆形布局不需要特定的变换原点 */
}

.tarot-card-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
  border-color: #ffd700;
}

.tarot-card-item.selected {
  transform: scale(1.05);
  border-color: #ffd700;
  box-shadow: 0 0 15px #ffd700;
}

.tarot-card-img.compact {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.card-number {
  position: absolute;
  top: 5px;
  left: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
  z-index: 1;
}

/* 响应式设计 - 移动端优化 */
@media (max-width: 767px) {
  .tarot-cards-container {
    height: 350px; /* 减小容器高度以适应移动端 */
    padding: 10px;
  }
  
  .tarot-card-item {
    width: 70px; /* 减小卡片尺寸 */
    height: 105px;
    border-radius: 6px;
  }
  
  .card-number {
    font-size: 10px;
    padding: 1px 3px;
  }
}

/* 响应式设计 - 大屏优化 */
@media (min-width: 1200px) {
  .tarot-cards-container {
    height: 550px;
  }
  
  .tarot-card-item {
    width: 120px; /* 大屏上使用更大的卡片尺寸 */
    height: 180px;
    border-radius: 10px;
  }
}

/* 调整星座运势查询卡片的透明度 */
#horoscopeFormContainer .card {
  background: rgba(0, 0, 0, 0.1) !important; /* 更透明的背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 调整星座配对查询卡片的透明度，使其更加透明 */
#pills-hop03 .card {
  background: rgba(0, 0, 0, 0.1) !important; /* 更透明的背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 调整所有结果卡片的透明度，使其更加透明 */
#horoscopeResult .card,
#tarotResult .card,
#compatibilityResult .card {
  background: rgba(0, 0, 0, 0.1) !important; /* 更透明的背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* 调整卡片内嵌套div的透明度，使其更加透明 */
.daily-horp .bg-dark.bg-opacity-70 {
  background: rgba(0, 0, 0, 0.1) !important; /* 更透明的背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 调整所有带有bg-dark类的div和p元素的透明度，使其更加透明 */
.daily-horp .bg-dark {
  background: rgba(0, 0, 0, 0.1) !important; /* 统一的透明背景，与卡片保持一致 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 调整所有带有bg-dark bg-opacity-*类的div和p元素的透明度 */
.daily-horp .bg-dark.bg-opacity-50,
.daily-horp .bg-dark.bg-opacity-60,
.daily-horp .bg-dark.bg-opacity-70,
.daily-horp .bg-dark.bg-opacity-80,
.daily-horp .bg-dark.bg-opacity-90 {
  background: rgba(0, 0, 0, 0.1) !important; /* 统一的透明背景，增强星空背景的可见度 */
  backdrop-filter: blur(5px); /* 保持模糊效果，增强视觉层次感 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 确保所有嵌套的div元素也保持透明 */
.daily-horp .card > div,
.daily-horp .card > div > div,
.daily-horp .card > div > div > div {
  background: transparent !important;
}

/* 调整所有p元素的背景透明度 */
.daily-horp p {
  background: transparent !important;
}

/* 调整所有div元素的背景透明度 */
.daily-horp div {
  background: transparent !important;
}

/* 确保带有bg-dark类的元素保持统一的透明度 */
.daily-horp .bg-dark {
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px);
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* 确保所有div元素都没有边框 */
.daily-horp div {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 确保卡片元素没有边框 */
.daily-horp .card {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 确保表单元素没有边框 */
.daily-horp .form-control {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: rgba(0, 0, 0, 0.2) !important;
  color: white !important;
}

/* 确保按钮元素没有边框 */
.daily-horp .btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 调整小窗口时div元素的宽度 */
@media (max-width: 767px) {
  .daily-horp .bg-dark {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 调整星座配对结果中卡片的宽度 */
  .daily-horp .row > .col-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  /* 调整卡片容器的宽度 */
  .daily-horp .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 调整卡片的内边距 */
  .daily-horp .card {
    padding: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 调整带有bg-dark类的元素的内边距 */
  .daily-horp .bg-dark {
    padding: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 确保子div与父div边缘对齐 */
  .daily-horp .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  /* 确保星座配对结果中的两个子div分别与父div的左右边合并 */
  .daily-horp .row > .col-6:first-child > .bg-dark {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: left;
  }
  
  .daily-horp .row > .col-6:last-child > .bg-dark {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: right;
  }
  
  /* 确保卡片内的内容div占满宽度 */
  .daily-horp .row > .col-6 > .bg-dark {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* 调整星座配对结果的标题样式 */
  .daily-horp h4.text-center {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  
  /* 调整星座配对结果的h5标题样式 */
  .daily-horp h5.text-center {
    font-size: 1.2rem;
    margin-bottom: 15px;
  }
  
  /* 调整星座配对结果的p标签样式，确保一行只显示8个字符 */
  .daily-horp .bg-dark p {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
    line-height: 1.5 !important;
    width: 8ch !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 调整结果内容区域的样式，确保在移动端小屏幕上也能清晰可读 */
  #resultContent {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    margin: 0 auto !important;
  }
  
  /* 调整结果内容区域的段落文本样式，确保在移动端小屏幕上也能清晰可读 */
  #resultContent p {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  /* 调整结果内容区域的标题样式 */
  #resultContent h3 {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 15px !important;
  }
  
  #resultContent h4 {
    font-size: 1.2rem !important;
    margin-top: 20px !important;
    margin-bottom: 10px !important;
  }
  
  /* 调整今日宜忌区域的样式 */
  #resultContent .mb-4 {
    margin-bottom: 20px !important;
  }
  
  /* 调整运势评分区域的样式 */
  #resultContent .d-flex {
    align-items: center !important;
    margin-bottom: 10px !important;
  }
  
  /* 调整运势评分徽章的样式 */
  #resultContent .badge {
    font-size: 1rem !important;
    padding: 5px 10px !important;
    margin-left: 10px !important;
  }
  
  /* 调整所有文本的字体大小 */
  .daily-horp {
    font-size: 1rem !important;
  }
  
  /* 调整标题字体大小 */
  .daily-horp h3 {
    font-size: 1.8rem !important;
  }
  
  .daily-horp h4 {
    font-size: 1.6rem !important;
  }
  
  .daily-horp h5 {
    font-size: 1.3rem !important;
  }
  
  /* 调整div元素的样式，使其自适应屏幕大小 */
  .daily-horp .row {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 调整行元素的样式，确保在所有屏幕尺寸下都保持相同的布局格式 */
  .daily-horp .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* 表单列在移动端占满宽度，在桌面端平分 */
  @media (max-width: 767px) {
    .daily-horp .col-md-6,
    .daily-horp .col-6 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      margin-bottom: 15px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }
  
  @media (min-width: 768px) {
    .daily-horp .col-md-6,
    .daily-horp .col-6 {
      width: 50% !important;
      max-width: 50% !important;
      flex: 0 0 50% !important;
      margin-bottom: 15px !important;
      padding-left: 5px !important;
      padding-right: 5px !important;
    }
  }
  
  /* 调整卡片内的内容div样式，确保在所有屏幕尺寸下都能正确显示 */
  .daily-horp .row > .col-6 > .bg-dark,
  .daily-horp .row > .col-md-6 > .bg-dark {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 15px !important;
    font-size: 0.85rem !important;
  }
  
  /* 调整段落文本的样式，确保在移动端小屏幕上也能清晰可读 */
  .daily-horp .bg-dark p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    width: auto !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* 调整select下拉框的背景颜色为黑色 */
  .daily-horp .form-control {
    background: black !important;
    color: white !important;
    font-size: 1rem !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* 调整option元素的背景颜色为黑色 */
  .daily-horp select option {
    background: black !important;
    color: white !important;
  }
  
  /* 调整label元素的样式 */
  .daily-horp .form-label {
    color: white !important;
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
  }
}

/* 确保body和html没有影响背景的样式 */
body, html {
  margin: 0;
  padding: 0;
  background-color: transparent;
  overflow-x: hidden;
}

/* 统一所有卡片背景颜色 - 透明 */
.card.bg-dark.bg-opacity-70 {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 星座运势查询表单卡片 */
#horoscopeFormContainer .card {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 塔罗牌占卜表单卡片 */
#tarotFormContainer .card {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 星座配对查询表单卡片 */
#pills-hop03 .card {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 壁纸下载卡片 */
#pills-hop04 .card {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 统一所有结果卡片背景颜色 */
#horoscopeResult .card,
#tarotResult .card,
#compatibilityResult .card {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 统一所有背景深色div的颜色 - 透明 */
.daily-horp .bg-dark,
.daily-horp .bg-dark.bg-opacity-50,
.daily-horp .bg-dark.bg-opacity-60,
.daily-horp .bg-dark.bg-opacity-70,
.daily-horp .bg-dark.bg-opacity-80,
.daily-horp .bg-dark.bg-opacity-90 {
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 统一表单控件背景颜色 - 黑色带透明 */
.daily-horp .form-control {
  background-color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: white !important;
}

/* 统一文本区域背景颜色 - 黑色带透明 */
.daily-horp textarea.form-control {
  background-color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: white !important;
}

/* 统一选择框背景颜色 - 黑色带透明 */
.daily-horp select.form-control {
  background-color: rgba(0, 0, 0, 0.7) !important;
  background: rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: white !important;
}

/* 确保选项背景也是黑色带透明 */
.daily-horp select.form-control option {
  background-color: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
}

/* 确保所有section都有合适的背景 */
section {
  position: relative;
  z-index: 1;
}

/* 确保导航 pills 排成一行 */
.nav.nav-pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  gap: 10px;
  /* 隐藏滚动条（滑块控件） */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* 隐藏 WebKit 浏览器的滚动条 */
.nav.nav-pills::-webkit-scrollbar {
  display: none;
}

/* 调整导航 pills 按钮样式，确保它们在一行显示 */
.nav.nav-pills .nav-item {
  flex-shrink: 0;
}

/* 确保导航 pills 按钮文本不换行 */
.nav.nav-pills .nav-link {
  white-space: nowrap;
  padding: 0.5rem 1rem;
}

/* 调整移动端导航 pills 样式 */
@media (max-width: 767px) {
  .nav.nav-pills {
    gap: 5px;
    padding: 0 5px;
    flex-direction: column;
    align-items: center;
  }
  
  .nav.nav-pills .nav-item {
    margin-bottom: 5px;
    width: 100%;
    max-width: 200px;
  }
  
  .nav.nav-pills .nav-link {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    white-space: normal;
    text-align: center;
    min-width: 60px;
    line-height: 1.2;
    width: 100%;
  }
  
  /* 调整语言选择按钮样式，确保文字完全显示 */
  #languageDropdown {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    min-width: 80px;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

/* 调整语言选择按钮样式，确保文字完全显示 */
#languageDropdown {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  min-width: 80px;
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}
  
  /* 调整下拉菜单样式，确保宽度与按钮一致 */
  .dropdown-menu {
    width: 100% !important;
    min-width: 80px !important;
  }
  
  .dropdown-item {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
  }
}

/* 塔罗牌水平排列样式 - 从左到右填满容器 */
  .tarot-cards-container {
      scrollbar-width: none;
      -ms-overflow-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      height: 500px; /* 保持高度 */
      margin: 20px 0;
      overflow: visible;
      width: 100%; /* 确保容器占满宽度 */
      padding: 0; /* 移除内边距，确保占满整个边框范围 */
  }

.tarot-cards-container::-webkit-scrollbar {
    display: none;
}

.tarot-cards-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: visible; /* 确保扇形展开时卡牌不会被截断 */
}

/* 塔罗牌扇形布局样式 */
.tarot-card-item {
    position: absolute;
    transform-origin: bottom center;
    transition: all 0.3s ease;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    margin: 0 1px; /* 调整水平间距，配合内角4.62度 */
    transform: translateZ(0); /* 启用硬件加速，改善视觉效果 */
    /* 确保卡牌大小适当，能够展开成完整的扇形 */
}

/* 初始显示的卡牌 - 扇形展开 */
.tarot-card-item[data-visibility="visible"] {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 选中状态的卡牌 */
.tarot-card-item.selected {
    z-index: 10;
    transform: scale(1.1) rotate(0deg) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
}

/* 选中卡牌展示样式 - 一行排列三个卡牌 */
.selected-cards-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin: 20px 0;
    flex-wrap: wrap;
}

.selected-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    max-width: 150px;
    transition: all 0.3s ease;
}

/* 移除之前的特殊位置样式，改为统一的水平排列 */
.selected-card-left,
.selected-card-center,
.selected-card-right {
    transform: none;
    z-index: 1;
    margin: 0;
}

/* 卡牌图片大小类 */
.tarot-card-img.compact {
    width: 60px;
    height: 90px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tarot-card-img.small {
    width: 70px;
    height: 105px;
    border-radius: 6px;
}

.tarot-card-img.medium {
    width: 90px;
    height: 135px;
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.tarot-card-img.large {
    width: 110px;
    height: 165px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.selected-card-info {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* 移动端卡牌容器 */
    .tarot-cards-container {
        height: 250px;
    }
    
    /* 移动端占卜结果中的卡牌 */
    .selected-card {
        width: 33%;
        max-width: 120px;
    }
    
    .tarot-card-img.medium {
        width: 80px;
        height: 120px;
    }
    
    .tarot-card-img.large {
        width: 90px;
        height: 135px;
    }
    
    .selected-card-info {
        font-size: 10px;
    }
}

@media (max-width: 480px) {
    /* 小屏手机卡牌容器 */
    .tarot-cards-container {
        height: 200px;
    }
    
    /* 小屏手机占卜结果中的卡牌 */
    .tarot-card-img.compact {
        width: 40px;
        height: 60px;
    }
    
    .tarot-card-img.medium {
        width: 70px;
        height: 105px;
    }
    
    .tarot-card-img.large {
        width: 80px;
        height: 120px;
    }
}

.tarot-card {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 90px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 2px;
}

.tarot-card:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

.tarot-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ffd700;
}

.tarot-card-number {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 215, 0, 0.8);
  color: #000;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: bold;
}

/* 卡牌出现动画 */
.tarot-card-appear {
  animation: cardAppear 0.3s ease-out forwards;
  opacity: 0;
  transform: scale(0.8);
}

@keyframes cardAppear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 选中卡牌的显示样式 */
.selected-card-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.selected-card-display .tarot-card-img.large {
  width: 180px;
  height: 270px;
  border-width: 3px;
  border-radius: 8px;
}

.selected-card-number {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;
}

.selected-card-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.selected-card-summary .tarot-card-img.small {
  width: 80px;
  height: 120px;
  margin-bottom: 10px;
  border-radius: 6px;
}

.selected-card-info {
  color: #ffd700;
  font-weight: bold;
}

/* 响应式调整 - 确保在移动设备上也能在一屏显示 */
@media (max-width: 767px) {
  .tarot-cards-container {
    gap: 5px;
    padding: 5px;
  }
  
  .tarot-card {
    width: 50px;
    height: 75px;
    margin: 1px;
  }
  
  .tarot-card-number {
    width: 14px;
    height: 14px;
    font-size: 8px;
  }
  
  .selected-card-display .tarot-card-img.large {
    width: 150px;
    height: 225px;
  }
}

/* 桌面端优化 - 确保从左到右排列 */
@media (min-width: 768px) {
  .tarot-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 8px;
    max-width: 800px;
    margin: 0 auto;
    transform: none !important; /* 确保没有任何旋转或变形 */
  }
}



/* 星座图标暗金色背景样式 - 为每个星座图标添加华丽的渐变背景效果 */
.main .icon-block {
 background: radial-gradient(circle at center center, rgba(197, 158, 62, 0.95) 0%, rgba(156, 120, 32, 0.8) 25%, rgba(15,15,15,0.98) 60%, #000000 100%);
  /* 核心：从浅暗金微光 → 深暗金 → 深灰黑 → 纯黑，完全暗黑底色，金色只做点缀 */
  box-shadow: 0 0 12px rgba(197, 158, 62, 0.35), 0 0 20px rgba(156, 120, 32, 0.2);
  /* 暗光效：只有一层柔和的暗金细光晕，没有亮金色，不破坏暗黑感 */
  /* 金色发光效果，增强视觉冲击力 */
  overflow: hidden;
}