/* divination-methods.css — 成卦特效+天地盘+四课+三传+奇门九宫 */
/* ── 七、成卦揭幕特效 ── */
@keyframes hexRevealGlow {
  0% { filter: brightness(1); opacity: 1; }
  30% { filter: brightness(2.5); }
  100% { filter: brightness(1); opacity: 1; }
}
.div-yao-line.hex-reveal {
  animation: hexRevealGlow 1.2s ease-out;
}
.div-hex-name-reveal {
  font-family: 'Noto Serif SC', serif;
  font-size: 36px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--div-purple), #8B5CF6, var(--div-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.div-hex-name-reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* ── 八、天地盘双层圆环（大六壬） ── */
.div-tianpan-container {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}
/* 外圈天盘 */
.div-tianpan-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(212, 149, 12, 0.3);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.div-tianpan-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(212, 149, 12, 0.15);
}
/* 内圈地盘 */
.div-dipan-ring {
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 2px solid rgba(108, 92, 231, 0.25);
  background: rgba(0, 0, 0, 0.04);
}
/* 地支标注 */
.div-pan-zhi {
  position: absolute;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}
.div-pan-zhi.tian {
  color: var(--div-gold);
  background: var(--div-gold-soft);
  border: 1px solid rgba(232, 160, 6, 0.2);
}
.div-pan-zhi.tian:hover {
  background: rgba(212, 149, 12, 0.2);
  box-shadow: 0 2px 12px rgba(212, 149, 12, 0.2);
}
.div-pan-zhi.di {
  color: var(--div-purple);
  background: var(--div-purple-soft);
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.div-pan-zhi.di:hover {
  background: rgba(108, 92, 231, 0.2);
  box-shadow: 0 2px 12px rgba(108, 92, 231, 0.2);
}
/* 天将名称标注 */
.div-tianjiang-label {
  position: absolute;
  font-size: 10px;
  color: var(--div-text-tertiary);
  white-space: nowrap;
  pointer-events: none;
}
/* 天盘旋转到位动画 */
@keyframes tianpanRotate {
  from { transform: rotate(0deg); }
}
.div-tianpan-ring.rotating {
  animation: tianpanRotate 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── 九、四课展示区 ── */
.div-sike-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.div-sike-cell {
  text-align: center;
  padding: 16px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}
.div-sike-cell:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(108, 92, 231, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.div-sike-cell .sike-label {
  font-size: 11px;
  color: var(--div-text-tertiary);
  margin-bottom: 8px;
}
.div-sike-cell .sike-shang {
  font-family: 'Noto Serif SC', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--div-gold);
  margin-bottom: 4px;
}
.div-sike-cell .sike-xia {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  color: var(--div-text-primary);
}
.div-sike-cell .sike-jiang {
  font-size: 11px;
  color: var(--div-purple);
  margin-top: 6px;
}

/* ── 十、三传展示区 ── */
.div-sanchuan-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 0;
}
.div-sanchuan-step {
  text-align: center;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  min-width: 90px;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(20px);
}
.div-sanchuan-step.visible {
  opacity: 1;
  transform: translateY(0);
}
.div-sanchuan-step:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(108, 92, 231, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.div-sanchuan-step .sc-label {
  font-size: 11px;
  color: var(--div-text-tertiary);
  margin-bottom: 6px;
}
.div-sanchuan-step .sc-zhi {
  font-family: 'Noto Serif SC', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--div-gold);
}
.div-sanchuan-step .sc-jiang {
  font-size: 12px;
  color: var(--div-purple);
  margin-top: 4px;
}
.div-sanchuan-arrow {
  color: var(--div-text-tertiary);
  font-size: 18px;
  padding: 0 8px;
  opacity: 0;
  transition: opacity 0.3s 0.3s;
}
.div-sanchuan-arrow.visible { opacity: 1; }

/* 三传高亮动画 */
@keyframes sanchuanHighlight {
  0%, 100% { box-shadow: 0 2px 8px rgba(108, 92, 231, 0); }
  50% { box-shadow: 0 4px 20px rgba(108, 92, 231, 0.15), 0 2px 8px rgba(212, 149, 12, 0.1); }
}
.div-sanchuan-step.highlight {
  animation: sanchuanHighlight 2s ease-in-out infinite;
  border-color: rgba(108, 92, 231, 0.25);
}

/* ── 十一、奇门九宫升级版 ── */
.div-qimen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.div-qimen-cell {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 10px;
  min-height: 120px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}
.div-qimen-cell:hover {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(108, 92, 231, 0.15);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.div-qimen-cell.center-gong {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.08), rgba(108, 92, 231, 0.04));
  border-color: rgba(108, 92, 231, 0.2);
}
.div-qm-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.div-qm-dir {
  font-size: 11px;
  font-weight: 600;
  color: var(--div-gold);
}
.div-qm-gong {
  font-size: 10px;
  color: var(--div-text-tertiary);
}
.div-qm-shen {
  font-size: 11px;
  color: #b07df0;
  margin-bottom: 3px;
  font-weight: 500;
}
.div-qm-men {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 3px;
}
.div-qm-men.ji { color: #2ECC71; }
.div-qm-men.xiong { color: #E74C3C; }
.div-qm-men.zhong { color: var(--div-text-secondary); }
.div-qm-star {
  font-size: 11px;
  color: var(--div-gold);
  margin-bottom: 3px;
}
.div-qm-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}
.div-qm-tg { font-size: 11px; color: #e8505b; }
.div-qm-dg { font-size: 11px; color: #3b82f6; }

/* 格局标签 */
.div-qm-geju {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}
.div-qm-geju.ji-ge {
  background: rgba(46, 204, 113, 0.15);
  color: #2ECC71;
}
.div-qm-geju.xiong-ge {
  background: rgba(231, 76, 60, 0.15);
  color: #E74C3C;
}
/* 伏吟/反吟标注 */
.div-qm-fuyin {
  font-size: 9px;
  color: var(--div-text-tertiary);
  font-style: italic;
}

/* 宫位Tooltip浮窗 */
.div-qm-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 12px;
  z-index: 100;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  line-height: 1.6;
  color: var(--div-text-primary);
}
.div-qimen-cell:hover .div-qm-tooltip,
.div-qimen-cell.active .div-qm-tooltip { display: block; }
.div-qm-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.95);
}

/* 用神宫位高亮 */
@keyframes yongshenPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(108, 92, 231, 0); border-color: rgba(108, 92, 231, 0.15); }
  50% { box-shadow: 0 4px 20px rgba(108, 92, 231, 0.15), 0 2px 8px rgba(212, 149, 12, 0.08); border-color: rgba(108, 92, 231, 0.35); }
}
.div-qimen-cell.yongshen {
  animation: yongshenPulse 2s ease-in-out infinite;
}