/* 奇门遁甲专用字体子集 */
@font-face {
  font-family: 'HuiwenQimen';
  src: url('../assets/fonts/huiwen-qimen-subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  text-align: center;
  padding: 10px 0;
  font-family: 'HuiwenQimen', serif;
  max-width: 360px; /* 改为max-width而不是固定width */
  margin: 0 auto;
  background-color: #FFFCF5;
  color: #333;
  overflow-x: hidden; /* 防止水平滚动 */
  width: 100%; /* 允许响应式宽度 */
}

html {
  overflow-x: hidden;
}

div, table, form {
  position: relative;
  text-align: center;
}

tr {
  position: relative;
  height: 7mm;
  text-align: center;
}

td {
  position: relative;
  padding: 0;
  text-align: center;
}

select {
  font-family: 'HuiwenQimen', serif;
  position: relative;
  text-align: center;
  border: 1px dashed #ccc;
  padding: 0 3px;
  height: 20px;
  line-height: 20px;
  background-color: transparent;
  color: #000;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 2px;
  font-size: 11px;
  vertical-align: middle;
}

select:focus {
  outline: none;
  border-color: #ccc;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

input[type="number"] {
  font-family: 'HuiwenQimen', serif;
  position: relative;
  text-align: center;
  border: 1px solid #000;
  padding: 0 3px;
  height: 20px;
  line-height: 20px;
  background-color: transparent;
  color: #000;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin: 2px;
  font-size: 11px;
  vertical-align: middle;
  width: 50px;
}

input[type="number"]:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.input-section {
  background-color: transparent;
  border: none;
  padding: 5px;
  margin: 2px auto;
  max-width: 300px;
}

.results-section {
  background-color: transparent;
  border: none;
  padding: 2px;
  margin: 2px auto;
  max-width: 330px;
}

#output {
  font-family: monospace;
  font-size: 13px;
  white-space: pre;
  color: #000;
  padding: 5px;
}

#info {
  font-size: 13px;
  color: #000;
  margin-bottom: 5px;
}

/* 基本信息分块样式 */
.info-block {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 2px 0;
  font-size: 11px;
  line-height: 1.4;
}

.info-block .info-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 3px;
  font-size: 12px;
}

.info-block .info-content {
  color: #555;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin: 2px 0;
}

.info-row .label {
  font-weight: bold;
  color: #666;
  min-width: 40px;
}

.info-row .value {
  color: #333;
  flex: 1;
  text-align: right;
}

/* 奇门遁甲四柱和基础信息布局样式 */
.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  gap: 35px;
}

.info-left {
  flex: 0 0 40%;
  text-align: left;
  padding: 0 5px 0 20px;
}

.info-right {
  flex: 0 0 60%;
  text-align: right;
  padding: 0 0 0 5px;
}

.info-left .info-row {
  margin-bottom: 2px;
}

.info-left .info-row .value {
  font-size: 10px;
  letter-spacing: 8px;
}



.info-right .info-row {
  margin-bottom: 2px;
}

.info-right .info-row .value {
  font-size: 10px;
  text-align: left;
}

/* 四柱天干地支样式 */
.info-row .value:has(span) {
  font-size: 14px;
  letter-spacing: 8px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin: 0 0 15px 0;
  letter-spacing: 2px;
  text-shadow: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 四柱显示样式 */
.bazi-display {
  margin: 5px auto;
  max-width: 300px;
}

.bazi-grid {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 10px;
}

.bazi-item {
  flex: 1;
  text-align: center;
  border: 1px solid #666;
  padding: 5px;
  background-color: transparent;
}

.bazi-label {
  font-size: 10px;
  color: #666;
  margin-bottom: 3px;
  font-weight: bold;
}

.bazi-content {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2px;
}

.bazi-content .tiangan,
.bazi-content .dizhi {
  display: inline-block;
  margin: 0 1px;
}

/* 奇门盘样式 */
.qimen-table {
  width: 100%;
  max-width: 300px;
  border-collapse: collapse;
  margin: 10px auto;
  background-color: transparent;
  border: 1px solid #666;
  font-family: 'HuiwenQimen', serif;
  overflow-x: hidden;
  table-layout: fixed; /* 固定表格布局 */
}

.qimen-cell {
  width: 33.33%;
  height: 90px;
  border: 1px solid #666;
  position: relative;
  vertical-align: top;
  padding: 2px;
  font-size: 11px;
  line-height: 1.2;
  background-color: transparent;
  overflow: hidden; /* 防止内容溢出 */
  word-wrap: break-word; /* 允许文字换行 */
}

.qimen-cell.center-cell {
  background-color: transparent;
  border: 1px solid #000;
}

.cell-god {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #000;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  max-width: 90%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-door {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  max-width: 90%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-star {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  text-align: center;
  max-width: 90%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-heaven {
  position: absolute;
  bottom: 25px;
  right: 2px;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  line-height: 1.2;
  max-width: 30%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-earth {
  position: absolute;
  bottom: 10px;
  right: 2px;
  color: #000;
  font-weight: bold;
  font-size: 13px;
  white-space: nowrap;
  max-width: 30%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-palace {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold;
  color: #333;
  font-size: 10px;
  white-space: nowrap;
  text-align: center;
  max-width: 90%; /* 防止超出容器 */
  overflow: hidden;
}

.cell-dizhi {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-weight: bold;
  color: #666;
  font-size: 10px;
  white-space: nowrap;
  max-width: 30%; /* 防止超出容器 */
  overflow: hidden;
}

.kongwang-mark {
  position: absolute;
  top: 2px;
  left: 2px;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
  max-width: 30%; /* 防止超出容器 */
  overflow: hidden;
}

.yima-mark {
  position: absolute;
  top: 2px;
  right: 2px;
  color: #000;
  font-size: 11px;
  font-weight: bold;
  z-index: 10;
  text-align: center;
  white-space: nowrap;
  max-width: 30%; /* 防止超出容器 */
  overflow: hidden;
}

/* 输入控件样式 */
.time-inputs {
  display: flex;
  justify-content: center;
  gap: 3px;
  flex-wrap: wrap;
}

.time-input-line {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.time-input-line:first-child {
  min-width: 65px;
}

.time-input-line:first-child select {
  width: 65px;
}

.time-input-line select {
  width: 45px;
}

.time-input-line label {
  font-size: 11px;
  color: #000000;
  margin-bottom: 2px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.5px;
  font-family: 'HuiwenQimen', serif;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #2c2522;
  }

  .input-section,
  .results-section {
    background-color: #3a322f;
    border-color: #4a3f3a;
  }

  select {
    background-color: #2c2522;
    border-color: #4a3f3a;
    color: #e8e0d5;
  }

  input[type="number"] {
    background-color: #2c2522;
    border-color: #4a3f3a;
    color: #e8e0d5;
  }

  .page-title,
  #info,
  #output {
    color: #e8e0d5;
  }

  .qimen-table {
    background-color: #3a322f;
    border-color: #4a3f3a;
  }
  
  .qimen-cell {
    border-color: #4a3f3a;
  }
  
  .qimen-cell.center-cell {
    background-color: #3a322f;
  }
  
  .cell-star { color: #e8e0d5; }
  .cell-door { color: #e8e0d5; }
  .cell-god { color: #e8e0d5; }
  .cell-heaven { color: #e8e0d5; }
  .cell-earth { color: #e8e0d5; }
  .cell-palace { color: #e8e0d5; }
  .cell-dizhi { color: #b0a090; }
  .kongwang-mark { 
    color: #e8e0d5;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
  }

  .yima-mark { 
    position: absolute;
    top: 0;
    right: 0;
    color: #e8e0d5;
    font-size: 11px;
    font-weight: bold;
    z-index: 10;
  }

  .info-block {
    background-color: rgba(60, 50, 47, 0.8);
    border-color: #4a3f3a;
  }

  .info-block .info-title {
    color: #e8e0d5;
  }

  .info-block .info-content {
    color: #d0c0b0;
  }

  .info-row .label {
    color: #b0a090;
  }

  .info-row .value {
    color: #e8e0d5;
  }
}

/* 彩色模式切换按钮基础样式 */
.color-mode-toggle {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.color-mode-toggle:hover {
  transform: scale(1.1);
}

/* 复制按钮样式 */
#copyButton {
  background-color: #000000;
  color: #FFFCF5;
  border: none;
  padding: 8px 4px;
  border-radius: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  width: 20%;
  margin: 10px auto;
  text-transform: uppercase;
  letter-spacing: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#copyButton:hover {
  background-color: #333333;
  color: #FFFCF5;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
  transform: translateY(-1px);
}

#copyButton:active {
  transform: translateY(0);
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  background-color: #666666;
}

/* 复制成功后的灰色状态 */
#copyButton.copied {
  background-color: #666666;
  color: #FFFCF5;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  transform: translateY(0);
}

/* 彩色模式样式 */
/* 天干五行颜色 */
.color-mode .cell-heaven.甲,
.color-mode .cell-heaven.乙 {
  color: #4CAF50 !important; /* 木 - 绿色 */
}

.color-mode .cell-heaven.丙,
.color-mode .cell-heaven.丁 {
  color: #F44336 !important; /* 火 - 红色 */
}

.color-mode .cell-heaven.戊,
.color-mode .cell-heaven.己 {
  color: #FF9800 !important; /* 土 - 橙色 */
}

.color-mode .cell-heaven.庚,
.color-mode .cell-heaven.辛 {
  color: #2196F3 !important; /* 金 - 蓝色 */
}

.color-mode .cell-heaven.壬,
.color-mode .cell-heaven.癸 {
  color: #9C27B0 !important; /* 水 - 紫色 */
}

/* 地支五行颜色 */
.color-mode .cell-dizhi.寅,
.color-mode .cell-dizhi.卯 {
  color: #4CAF50 !important; /* 木 - 绿色 */
}

.color-mode .cell-dizhi.巳,
.color-mode .cell-dizhi.午 {
  color: #F44336 !important; /* 火 - 红色 */
}

.color-mode .cell-dizhi.丑,
.color-mode .cell-dizhi.辰,
.color-mode .cell-dizhi.未,
.color-mode .cell-dizhi.戌 {
  color: #FF9800 !important; /* 土 - 橙色 */
}

.color-mode .cell-dizhi.申,
.color-mode .cell-dizhi.酉 {
  color: #2196F3 !important; /* 金 - 蓝色 */
}

.color-mode .cell-dizhi.亥,
.color-mode .cell-dizhi.子 {
  color: #9C27B0 !important; /* 水 - 紫色 */
}

/* 九星五行颜色 - 通过JavaScript动态设置 */

/* 八神五行颜色 */
.color-mode .cell-god.值符 {
  color: #FF9800 !important; /* 值符 - 土 - 橙色 */
}

.color-mode .cell-god.腾蛇 {
  color: #F44336 !important; /* 腾蛇 - 火 - 红色 */
}

.color-mode .cell-god.太阴 {
  color: #2196F3 !important; /* 太阴 - 金 - 蓝色 */
}

.color-mode .cell-god.六合 {
  color: #4CAF50 !important; /* 六合 - 木 - 绿色 */
}

.color-mode .cell-god.白虎 {
  color: #2196F3 !important; /* 白虎 - 金 - 蓝色 */
}

.color-mode .cell-god.玄武 {
  color: #9C27B0 !important; /* 玄武 - 水 - 紫色 */
}

.color-mode .cell-god.九地 {
  color: #FF9800 !important; /* 九地 - 土 - 橙色 */
}

.color-mode .cell-god.九天 {
  color: #2196F3 !important; /* 九天 - 金 - 蓝色 */
}

/* 八门和宫位五行颜色 - 通过JavaScript动态设置 */