canvas {
	position: fixed;
    display: block;
    width: 100%;
    height: 100%;
	z-index: 0;
	opacity: 0.6;
}

/* ===== 八卦主容器 ===== */
.bagua-panel {
    z-index: 2;
    position: absolute;
    width: 680px;
    height: 680px;
    /*background: #21633Ffff;*/
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
	transform: translate(-50%, -50%) scale(1.1);
    /*opacity: 0.125;*/
}

/* ===== 装饰性圆环（视觉辅助） ===== */
/*        .ring-dash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 1.8px dashed #b69b81;
    pointer-events: none;
    z-index: 2;
}*/
		
.ring-dash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66%;
  height: 66%;
  border-radius: 50%;
  border: 0px dashed #b69b81;
  pointer-events: none;
  z-index: 2;
}

        /* ===== 中心太极图 (参考用户代码优化) ===== */
        .taiji-center {
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;

            /* 左黑右白：利用 border-left 实现完美分割 */
            background: #21633F;
            border-left: 90px solid #000;

            /* 与卦象层级隔离 */
            z-index: 10;
            box-shadow: 0 0 0 2px #21633F, 0 0 0 6px #000;
        }
		
.taiji-center {
  position: relative;
  width: 150px;
  height: 300px;
  border-radius: 50%;
  background: #21633F;
  border-left: 150px solid #000;
  z-index: 10;
  box-shadow: 0 0 0 2px #21633F, 0 0 0 6px #000;
  transform: rotate(180deg);
}

        /* 上方半圆（黑色背景 + 白色鱼眼） */
        .taiji-center::before {
            content: '';
            position: absolute;
            top: 0;
            left: -45px;
            /* (180-90)/2 = 45 */
            width: 90px;
            height: 90px;
            border-radius: 50%;

            /* 鱼眼稍微偏上，比例协调 */
            background: radial-gradient(circle at 50% 38%,
                    #21633F 14px,
                    #000 14px);
        }

        /* 下方半圆（白色背景 + 黑色鱼眼） */
        .taiji-center::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: -45px;
            width: 90px;
            height: 90px;
            border-radius: 50%;

            background: radial-gradient(circle at 50% 62%,
                    #000 14px,
                    #21633F 14px);
        }
		
.taiji-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #21633F 25px, #000 26px);
}
.taiji-center::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -75px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #000 25px, #21633F 26px);
}
		
		
/* ===== 卦象通用样式 ===== */
.trigram {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 62px;
  transform-origin: center bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  z-index: 8;
  margin-top: -30px;
}

/* 每一条爻（阳爻/阴爻） */
.line {
    width: 90%;
    height: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 阳爻：实心黑条 (1个标签) */
.line.yang {
    background: rgba(0,213,106,1.00);
}

/* 阴爻：断线 (2个标签) */
.line.yin {
    background: transparent;
    gap: 6px;
    height: 4px;
}

.line.yin span {
    display: block;
    height: 5px;
    background: rgba(0,213,106,1.00);
    width: 50%;
}

/* 卦名汉字 */
/*.trigram .label {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-top: 4px;
    letter-spacing: 0;
    text-align: center; 
    transform: rotate(0deg) !important;
}*/
.trigram .label {
  font-size: 22px;
  font-weight: 700;
  color: rgba(0,213,106,1.00);
  margin-top: 4px;
  letter-spacing: 8px;
  text-align: center;
  transform: rotate(0deg) !important;
  padding-left: 8px;
  width: 68px;
}
/* ===== 八个卦象的具体方位与旋转 ===== */
/* 离 (南 / 上) 0° */
.tri-0 {
    transform: translate(-50%, -50%) rotate(0deg) translateY(-295px) scale(1.5);
}
/* 坤 (西南 / 右上) 45° */
.tri-45 {
    transform: translate(-50%, -50%) rotate(45deg) translateY(-295px) scale(1.5);
}
/* 兑 (西 / 右) 90° */
.tri-90 {
    transform: translate(-50%, -50%) rotate(90deg) translateY(-295px) scale(1.5);
}
/* 乾 (西北 / 右下) 135° */
.tri-135 {
    transform: translate(-50%, -50%) rotate(135deg) translateY(-295px) scale(1.5);
}
/* 坎 (北 / 下) 180° */
.tri-180 {
    transform: translate(-50%, -50%) rotate(180deg) translateY(-295px) scale(1.5);
}
/* 艮 (东北 / 左下) 225° */
.tri-225 {
    transform: translate(-50%, -50%) rotate(225deg) translateY(-295px) scale(1.5);
}
/* 震 (东 / 左) 270° */
.tri-270 {
    transform: translate(-50%, -50%) rotate(270deg) translateY(-295px) scale(1.5);
}
/* 巽 (东南 / 左上) 315° */
.tri-315 {
    transform: translate(-50%, -50%) rotate(315deg) translateY(-295px) scale(1.5);
}

/* ===== 移动端适配 ===== */
@media (max-width: 700px) {
    .bagua-panel {
        width: 92vw;
        height: 92vw;
        max-width: 640px;
        max-height: 640px;
        border-width: 5px;
    }
    .ring-dash {
        width: 70%;
        height: 70%;
    }
    .taiji-center {
        width: 28vw;
        height: 28vw;
        max-width: 180px;
        max-height: 180px;
        border-left-width: 14vw;
        max-width: 90px;
        max-height: 90px;
    }
    .taiji-center::before,
    .taiji-center::after {
        width: 50%;
        height: 50%;
        left: -25%;
    }
    .taiji-center::before {
        background: radial-gradient(circle at 50% 38%, #21633F 1.8vw, #000 1.8vw);
    }
    .taiji-center::after {
        background: radial-gradient(circle at 50% 62%, #000 1.8vw, #21633F 1.8vw);
    }
    .trigram {
        width: 8vw;
        height: 9vw;
        max-width: 56px;
        max-height: 62px;
    }
    .line {
        height: 1.2vw;
        max-height: 6px;
    }
    .line.yin span {
        height: 1.2vw;
        max-height: 6px;
    }
    .trigram .label {
        font-size: 3.5vw;
        max-font-size: 22px;
        margin-top: 0.5vw;
    }

    .tri-0 {
        transform: translate(-50%, -50%) rotate(0deg) translateY(-38vw);
    }
    .tri-45 {
        transform: translate(-50%, -50%) rotate(45deg) translateY(-38vw);
    }
    .tri-90 {
        transform: translate(-50%, -50%) rotate(90deg) translateY(-38vw);
    }
    .tri-135 {
        transform: translate(-50%, -50%) rotate(135deg) translateY(-38vw);
    }
    .tri-180 {
        transform: translate(-50%, -50%) rotate(180deg) translateY(-38vw);
    }
    .tri-225 {
        transform: translate(-50%, -50%) rotate(225deg) translateY(-38vw);
    }
    .tri-270 {
        transform: translate(-50%, -50%) rotate(270deg) translateY(-38vw);
    }
    .tri-315 {
        transform: translate(-50%, -50%) rotate(315deg) translateY(-38vw);
    }
}


/* 太极转动 —— 覆盖原有定位，需在关键帧中保留完整 transform */
/*.bagua-panel {
  animation: rotate-bagua 30s linear infinite;
}
.bagua-panel:hover {
  animation-play-state: paused;
}*/

.taiji-center {
  animation: rotate-bagua 30s linear infinite;
}
.taiji-center:hover {
  animation-play-state: paused;
}
@keyframes rotate-bagua {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*@keyframes rotate-bagua {
  from {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
  }
}
}*/