/* ============================================================
   guas.css — 六十四卦方圆图
   ============================================================ */

.guas-modal { max-width: 900px; max-height: none !important; height: auto !important; width: 900px; min-width: 900px; }
.guas-modal .modal-body { flex: none; overflow: visible; max-height: none !important; }
.guas-overlay { align-items: flex-start; padding-top: 10px; padding-bottom: 20px; overflow-y: auto; }

/* ── 爻线基础（方圆图复用） ── */
.yao-line {
  display: block;
  width: 18px; height: 4px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(245,235,210,0.98), rgba(215,195,155,0.92));
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
:root[data-theme="light"] .yao-line {
  background: linear-gradient(180deg, rgba(100,70,30,0.95), rgba(70,50,20,0.92));
  box-shadow: 0 1px 2px rgba(120,80,30,0.2);
}

/* ── 方圆图阴爻：圆图节点 + 方图单元 ── */
.guas-circle-node .cn-yao .yao-line.broken,
.guas-square-cell .sq-yao .yao-line.broken {
  background: transparent;
  display: flex; gap: 2px;
  justify-content: center;
  box-shadow: none;
}
.guas-circle-node .cn-yao .yao-line.broken::before,
.guas-circle-node .cn-yao .yao-line.broken::after,
.guas-square-cell .sq-yao .yao-line.broken::before,
.guas-square-cell .sq-yao .yao-line.broken::after {
  content: "";
  display: block;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(245,235,210,0.98), rgba(215,195,155,0.92));
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
:root[data-theme="light"]
  .guas-circle-node .cn-yao .yao-line.broken::before,
:root[data-theme="light"]
  .guas-circle-node .cn-yao .yao-line.broken::after,
:root[data-theme="light"]
  .guas-square-cell .sq-yao .yao-line.broken::before,
:root[data-theme="light"]
  .guas-square-cell .sq-yao .yao-line.broken::after {
  background: linear-gradient(180deg, rgba(100,70,30,0.95), rgba(70,50,20,0.92));
  box-shadow: 0 1px 2px rgba(120,80,30,0.2);
}

/* ── 方圆图容器 ── */
.guas-square-view { display: block; }
.guas-square-wrapper {
  position: relative;
  width: 860px; height: 860px;
  margin: 0 auto;
}

/* ── 圆环节点 ── */
.guas-circle-item {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.guas-circle-item .guas-circle-node {
  position: absolute;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 6px;
  padding: 2px 4px;
  white-space: nowrap;
  pointer-events: auto;
}
.guas-circle-item .guas-circle-name {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.guas-circle-item .guas-circle-name .cn-char {
  position: absolute;
  font-size: 14px; color: var(--text-title);
  font-weight: normal;
  cursor: pointer; pointer-events: auto;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: var(--font-display);
}
.guas-circle-item .guas-circle-name .cn-char:hover {
  filter: brightness(1.15);
  z-index: 10;
}
.guas-circle-node:hover {
  background: var(--accent-bg);
  z-index: 10;
  filter: brightness(1.1);
}
.guas-circle-node .cn-yao {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; line-height: 1;
}
.guas-circle-node .cn-yao .yao-line { width: 26px; height: 3px; }
.guas-circle-node .cn-yao .yao-line.broken::before,
.guas-circle-node .cn-yao .yao-line.broken::after { width: 11px; height: 3px; }

.guas-circle-label {
  position: absolute;
  font-size: clamp(10px, 2cqw, 16px);
  color: var(--text-faint);
  transform: translate(-50%, -50%);
  pointer-events: none;
  letter-spacing: 2px;
  font-family: var(--font-display);
}

/* ── 方阵 ── */
.guas-square-grid {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 2px;
  z-index: 5;
}
.guas-square-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
  background: var(--chip-bg);
  border: 1px solid var(--chip-br);
  padding: 3px;
}
.guas-square-cell:hover {
  background: var(--accent-bg);
  border-color: var(--accent-soft);
  z-index: 5;
}
.guas-square-cell .sq-yao {
  display: flex; flex-direction: column; align-items: center;
  gap: 1px; margin-bottom: 2px;
}
.guas-square-cell .sq-yao .yao-line { width: 20px; height: 3px; }
.guas-square-cell .sq-yao .yao-line.broken::before,
.guas-square-cell .sq-yao .yao-line.broken::after { width: 8px; height: 3px; }
.guas-square-cell .sq-name {
  font-size: 14px; color: var(--text-title);
  font-weight: normal; letter-spacing: 2px;
  font-family: var(--font-display);
}

/* ── 响应式 ── */
@media (max-width: 960px) {
  .guas-square-wrapper { max-width: 620px; }
  .guas-circle-item .guas-circle-name .cn-char { font-size: 10px; }
  .guas-circle-item .guas-circle-node .cn-yao .yao-line { width: 16px; height: 2px; }
  .guas-circle-item .guas-circle-node .cn-yao .yao-line.broken::before,
  .guas-circle-item .guas-circle-node .cn-yao .yao-line.broken::after { width: 6px; height: 2px; }
}