/* hex.css v14 — hexagram table, yao bars, legend, marks, dual hex layout */

/* Hex Layout */
.hex-wrap { display: block; }
.hex-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.hex-title { font-size: var(--text-lg); font-weight: 700; margin: 0; line-height: 1.2; }
.hex-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.hex-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0.25rem;
  color: var(--accent);
  background: linear-gradient(90deg, rgba(217,119,6,0.12), rgba(217,119,6,0.04));
  border: 1px solid rgba(217,119,6,0.15);
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-xs);
  font-weight: 600;
}
.pillar-cell {
  text-align: center;
  padding: 0.125rem 0;
}
.pillar-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}
.pillar-gz {
  font-size: var(--text-base);
  letter-spacing: 0.05em;
}
.pillar-lq {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 0.125rem;
}
.hex-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}
.hex-dates span {
  background: var(--bg-tertiary);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
}

/* Yao */
.yao { position: relative; width: 96px; height: 18px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bar-solid { width: 72px; height: 10px; background: var(--yao); border-radius: 8px; }
.bar-broken { width: 72px; height: 10px; position: relative; display: flex; gap: 12px; justify-content: center; }
.bar-broken::before, .bar-broken::after { content: ""; display: block; width: 28px; height: 10px; background: var(--yao); border-radius: 8px; }
.yao.yao-el-金 .bar-solid { background: #ffffff; }
.yao.yao-el-金 .bar-broken::before, .yao.yao-el-金 .bar-broken::after { background: #ffffff; }
.yao.yao-el-木 .bar-solid { background: var(--el-mu); }
.yao.yao-el-木 .bar-broken::before, .yao.yao-el-木 .bar-broken::after { background: var(--el-mu); }
.yao.yao-el-水 .bar-solid { background: var(--el-shui); }
.yao.yao-el-水 .bar-broken::before, .yao.yao-el-水 .bar-broken::after { background: var(--el-shui); }
.yao.yao-el-火 .bar-solid { background: var(--el-huo); }
.yao.yao-el-火 .bar-broken::before, .yao.yao-el-火 .bar-broken::after { background: var(--el-huo); }
.yao.yao-el-土 .bar-solid { background: var(--el-tu); }
.yao.yao-el-土 .bar-broken::before, .yao.yao-el-土 .bar-broken::after { background: var(--el-tu); }

/* 世/应 inline role label */
.yao-role {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #000000;
  pointer-events: none;
  z-index: 1;
}

/* Mark — 世/应 circle and X */
.mark-circle {
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.mark-circle::after { display: none; }
.mark-x { position: absolute; width: 35px; height: 16px; pointer-events: none; }
.mark-x::before, .mark-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 35px; height: 5px; background: var(--accent); border-radius: 3px; transform-origin: center; }
.mark-x::before { transform: translate(-50%,-50%) rotate(45deg); }
.mark-x::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* Two-card Hex Layout — flat CSS Grid, all cells are direct children */
.hex-cards-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2px;
  row-gap: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-base);
  overflow: hidden;
}
.hex-cards-single {
  grid-template-columns: 1fr;
}
.hex-panel-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  padding: 0.5rem 0.625rem;
  background: var(--bg-secondary);
  color: var(--accent);
  border-bottom: 2px solid var(--border);
}
.hex-panel-header .chip {
  font-size: var(--text-xs);
}
.hex-line-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  background: var(--bg-secondary);
}
.hex-line-row.hex-line-moved {
  background: rgba(217,119,6,0.06);
}
.hex-line-empty {
  pointer-events: none;
}
.hex-line-chips {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.hex-line-chips .chip { font-size: var(--text-xs); }
/* 竖排chip — 字体纵向，chip自身横向排列 */
.chip.vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  padding: 0.5rem 0.25rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
/* For non-CJK locales, EN/JA romaji etc. don't fit upright-vertical well —
   keep chip horizontal so multi-letter labels like "Offspring" render on one line. */
:root[lang="en"] .chip.vert,
:root[lang="ja"] .chip.vert {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  padding: 0.15rem 0.35rem;
  letter-spacing: normal;
  min-width: 3.5rem;
  text-align: center;
}
.hex-cards-wrap .yao {
  width: 60px;
  height: 22px;
}
.hex-cards-wrap .bar-solid {
  width: 46px;
  height: 12px;
}
.hex-cards-wrap .bar-broken {
  width: 46px;
  height: 12px;
  gap: 8px;
}
.hex-cards-wrap .bar-broken::before, .hex-cards-wrap .bar-broken::after {
  width: 17px;
  height: 12px;
}
.hex-cards-wrap .mark-circle {
  width: 18px; height: 18px;
}
.hex-cards-wrap .mark-x {
  width: 22px; height: 14px;
}
.hex-cards-wrap .mark-x::before, .hex-cards-wrap .mark-x::after {
  width: 22px; height: 3px;
}
.pillar-cell .chip {
  font-size: var(--text-xs);
  padding: 0.125rem 0.25rem;
  margin-top: 0.125rem;
}

/* Responsive — hex (mobile) */
@media (max-width: 768px) {
  .yao { width: 80px; height: 16px; }
  .bar-solid { width: 64px; height: 12px; }
  .bar-broken { width: 64px; height: 12px; }
  .bar-broken::before, .bar-broken::after { width: 24px; height: 12px; }
  .hex-title { font-size: var(--text-md); }
  .hex-pillars { font-size: var(--text-sm); padding: 0.25rem 0.25rem; }
  .pillar-gz { font-size: var(--text-sm); }
  .hex-dates span { font-size: var(--text-sm); padding: 0.125rem 0.375rem; }
  .hex-info { gap: 0.25rem; }
  .yao-role { font-size: 11px; }
  .hex-panel-header { font-size: var(--text-base); padding: 0.375rem 0.5rem; }
  .hex-line-row { padding: 0.25rem 0.25rem; gap: 0.25rem; }
  .hex-cards-wrap .yao { width: 52px; height: 20px; }
  .hex-cards-wrap .bar-solid { width: 38px; height: 11px; }
  .hex-cards-wrap .bar-broken { width: 38px; height: 11px; gap: 6px; }
  .hex-cards-wrap .bar-broken::before, .hex-cards-wrap .bar-broken::after { width: 14px; height: 11px; }
  .hex-cards-wrap .mark-circle { width: 16px; height: 16px; }
  /* Chips: 不换行，自适应宽度，超出可静默滚动 */
  .hex-line-chips {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.15rem;
    scrollbar-width: none;
  }
  .hex-line-chips::-webkit-scrollbar { display: none; }
  .hex-line-chips .chip { font-size: 0.6rem; padding: 0.125rem 0.2rem; }
}

/* No-change hex display */
.hex-panel-header-empty {
  opacity: 0.35;
  font-style: italic;
  color: var(--text-muted);
  font-weight: 600;
}
.hex-no-change-cell {
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
}