/* 设置整体页面的字体、背景颜色、默认颜色、文本对齐方式等 */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* 设定字体 */
  background-color: #f7f7f7; /* 页面背景颜色 */
  color: #333; /* 默认文字颜色 */
  text-align: center; /* 文本居中对齐 */
  margin: 0; /* 移除边距 */
  padding-top: 0px; /* 页面顶部留出空间 */
}

/* 调整.line类中的元素使其居中显示，便于管理日期和时间输入框 */
.line {
  margin: 0 auto; /* 自动调整左右边距以居中显示 */
}

/* 统一调整输入框的外观样式 */
.line input {
  width: 50px; /* 统一输入框宽度，保持一致 */
  margin: 0 5px; /* 输入框之间的水平间距 */
  padding: 8px; /* 输入框内部填充空间 */
  border: 1px solid #ccc; /* 边框样式 */
  border-radius: 10px; /* 边框圆角 */
  font-size: 16px; /* 文字大小 */
  transition: all 0.3s ease; /* 过渡动画效果 */
}

/* 设置获取焦点时输入框的样式变化 */
.line input:focus {
  outline: none; /* 移除焦点时的轮廓线 */
  border-color: #66afe9; /* 焦点时边框颜色 */
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* 焦点时边框阴影效果 */
}

:root {
  --bg-color-default: #f9f9f9; 
  --bg-color-hover: #e8e8e8; 
  --text-glow-color: #f56565; 
  --border-color: #ccc;
}

.jie-qi {
  color: red;
  font-weight: bold;
}

/* 调整干支信息表格样式 */
#ganzhi-info {
  width: 96%;
  margin: 2px auto;
  border-collapse: separate; /* 改成 separate ，以便让单元格有圆角 */
  border-spacing: 15px; /* 添加表格间距 */
  text-align: center;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden; /* 建议添加，这样的话超出单元格的内容就会被隐藏 */
}

/* 设置干支信息单元格样式 */
#ganzhi-info td {
  font-size: 36px;
  font-weight: bold;
  padding: 16px;
  border-radius: 10px; /* 增加圆角 */
  box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* 添加阴影 */
  border: 0px solid var(--border-color);
  background-color: var(--bg-color-default);
  position: relative;
  transition: background-color 0.5s ease, transform 0.5s ease;
  animation: textGlow 2s infinite alternate;
  color: #333; /* 确保文本颜色为深灰色 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3), 0 0 10px rgba(220, 20, 60, 0.75); /* 添加阴影和光晕效果 */
}

/* 鼠标悬浮时的样式 */
#ganzhi-info td:hover {
  background-color: var(--bg-color-hover);
  transform: scale(1.15);
  box-shadow: 0 5px 25px rgba(0,0,0,0.3); /* 当鼠标指向单元格时，增大阴影 */
}

/* 文字闪烁动画 */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 20px rgba(0,0,0,0.1), 0 0 20px var(--text-glow-color);
  }
  50% {
    text-shadow: 0 0 25px rgba(0,0,0,0.3), 0 0 25px var(--text-glow-color);
  }
}

/* 悬浮动画效果 */
#ganzhi-info td::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 1s ease;
}

#ganzhi-info td:hover::after {
  left: 100%;
}

/* 适应手机和平板 */
@media (max-width: 768px) {
  #ganzhi-info {
    width: 95%; /* 在小屏设备上占用更多宽度以提升可读性 */
  }
  #ganzhi-info td {
    font-size: 2rem; /* 在小屏幕上调整字体大小 */
  }
}