/* 四柱推命の図 (#470 / 引きに忠実化 #855 / 柱に触れる #1333)。
 *
 * - .pillar-mark: **その回の命式の構造**。柱は年 → 月 → 日 → 時の順で、柱ごとに天干 / 地支の
 *   2 段を積む (二段構造が文字なしで読めるよう、上下でセルの形を変える)。出生の柱の後ろに時期の
 *   柱が続き、その境目は間 (--apart) だけで見せる。相性 (二人分) は .pillar-mark__group が 2 つ並ぶ
 *   (狭幅では段を折り返す)。A-5 は「図は忠実に、名前は出さない」— 干支・十神は出さない。
 * - 触れる口 (.pillar-chart__touch) は図と同じ升目 (44px 四方) の並びを同じ grid セルに重ねる。
 *   位置の計算をせず、並びの規則を共有するだけで柱と口が揃う。
 * - 選ぶと: 選んだ柱 = 塗りが濃くなり少し浮く / 関わり合う柱 = 縁取り / それ以外 = 沈む。
 *   色だけでなく形 (塗り・縁・高さ) でも分かる。
 * - 段階表示は汎用の儀式契約 (#854) に載る: server が開示の瞬間だけ [data-ritual-step] を出し、
 *   ritual controller が .ritual-step--pending を順に外す。基底 transition は card_pick.css。
 *   prefers-reduced-motion では controller が --pending を付けないので即時表示。JS 無効なら
 *   最初から全部見えている (隠すのは controller だけ)。
 */

.pillar-chart {
  --pillar-ink: oklch(45% 0.09 290); /* 伏せ札 (card-fan) と同系の紫 */
  --pillar-accent: oklch(55% 0.14 330); /* 星の図の線と同じ差し色 */
  --pillar-slot: 44px; /* 柱 1 本の升目 = 触れる口の最小寸法 */
}

.pillar-chart__stage {
  display: grid;
  justify-content: center;
  margin: 0.25rem auto 0.5rem;
}

.pillar-chart__stage > * {
  grid-area: 1 / 1;
}

.pillar-chart__stage .divination-figure {
  margin: 0;
}

.pillar-mark,
.pillar-chart__touch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem; /* 行間 / 人と人 (自分 / お相手) の間 */
}

/* 触れる口は常に図の上。図の柱は選ぶと transform で浮く = 位置指定の層に上がり、無指定の口を覆ってしまう */
.pillar-chart__touch {
  position: relative;
  z-index: 1;
}

.pillar-chart__touch[hidden] {
  display: none;
}

.pillar-mark__group,
.pillar-chart__group {
  display: flex;
  align-items: flex-end; /* 立ち上がりの地面 (transform-origin: bottom) を揃える */
}

.pillar-mark__col,
.pillar-chart__pillar {
  flex: none;
  width: var(--pillar-slot, 44px);
  height: var(--pillar-slot, 44px);
}

/* 出生の柱と時期の柱の境目。名前ではなく間で分ける */
.pillar-mark__col--apart,
.pillar-chart__pillar--apart {
  margin-left: 1rem;
}

.pillar-mark__col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.15rem;
  transform-origin: bottom;
}

.pillar-mark__cell {
  width: 0.9rem;
  background: var(--pillar-ink, oklch(45% 0.09 290));
  transition: background-color 160ms ease-out, box-shadow 160ms ease-out;
}

/* 天干 (上段) は丸みのある短いセル、地支 (下段) は角ばった長いセル = 二段構造の手掛かり */
.pillar-mark__cell--stem {
  height: 0.9rem;
  border-radius: 0.45rem 0.45rem 0.15rem 0.15rem;
}

.pillar-mark__cell--branch {
  height: 1.5rem;
  border-radius: 0.15rem;
}

/* 選んでいる間: 関わらない柱は沈め、選んだ柱と相手の柱だけを立てる */
.pillar-chart--focused .pillar-mark__col {
  opacity: 0.3;
}

.pillar-chart--focused .pillar-mark__col--chosen,
.pillar-chart--focused .pillar-mark__col--partner {
  opacity: 1;
}

.pillar-mark__col--chosen {
  transform: translateY(-0.2rem);
}

.pillar-mark__col--chosen .pillar-mark__cell {
  background: var(--pillar-accent);
}

/* 相手の柱は中抜きの縁取り = 選んだ柱 (塗り) と形で分かる */
.pillar-mark__col--partner .pillar-mark__cell {
  background: oklch(55% 0.14 330 / 15%);
  box-shadow: inset 0 0 0 2px var(--pillar-accent);
}

.pillar-chart__pillar {
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pillar-chart__pillar:focus-visible {
  outline: 2px solid var(--pillar-ink);
  outline-offset: 2px;
}

.pillar-chart__guide {
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.pillar-chart__words:has(> :not([hidden])) {
  margin-bottom: 1rem;
}

.pillar-chart__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(45% 0.09 290 / 25%);
  animation: pillar-chart-in 200ms ease-out;
}

.pillar-chart__panel[hidden] {
  display: none;
}

.pillar-chart__name {
  font-size: 0.75rem;
  opacity: 0.6;
}

.pillar-chart__word {
  font-size: 0.875rem;
}

@keyframes pillar-chart-in {
  from { opacity: 0; transform: translateY(0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-chart__panel {
    animation: none;
  }

  .pillar-mark__cell {
    transition: none;
  }
}

/* 段階表示の初期値 (controller が --pending を外すと基底 transition で戻る) */
.pillar-mark__col.ritual-step--pending {
  opacity: 0;
  transform: scaleY(0.15);
}