/* 易占の図 (#469 / 引きに忠実化 #855)。
 *
 * - .hexagram-mark: **その回に引いた卦そのもの**の六爻 (下 = 初爻)。陰陽は焼かれた卦番号を
 *   gem の卦番号 → 爻の表で復号したもので、引き直しではない。変爻があれば之卦も続けて描く。
 *   A-5 は「図は忠実に、名前は出さない」(2026-09-12 改定 / #817 / #855) — 卦名・爻題は出さない。
 * - 変爻は色だけでなく**形** (中央の輪) で区別する。色覚に依らず読めるようにするため。
 * - 段階表示は汎用の儀式契約 (#854) に載る: server が開示の瞬間だけ [data-ritual-step] を出し、
 *   ritual controller が .ritual-step--pending を順に外す。基底 transition は card_pick.css。
 *   prefers-reduced-motion では controller が --pending を付けないので即時表示。JS 無効なら
 *   最初から全部見えている (隠すのは controller だけ)。
 */

/* 図のコンテナ (易 / 四柱 / 星の 3 図共通。pillar_reveal.css・star_reveal.css も使う) */
.divination-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem auto 1rem;
}

.hexagram-mark {
  display: flex;
  /* DOM 順 = 爻の数え順 (初爻が先頭) なので、column-reverse で初爻を最下段に置く。
     段階表示も DOM 順に進む (ritual controller) = 下から積み上がる */
  flex-direction: column-reverse;
  gap: 0.35rem;
  width: 4rem;
}

/* 之卦は「移った先」なので本卦より控えめに置く (本卦が主) */
.hexagram-mark--resulting {
  width: 3.2rem;
  opacity: 0.6;
}

.hexagram-mark__line {
  position: relative; /* 変爻の印 (::after) の基準 */
  height: 0.4rem;
  border-radius: 0.2rem;
  background: oklch(45% 0.09 290); /* 伏せ札 (card-fan) と同系の紫 */
}

/* 陰爻の意匠: 中央が欠けた 2 分割 */
.hexagram-mark__line--broken {
  background:
    linear-gradient(
      90deg,
      oklch(45% 0.09 290) 0 40%,
      transparent 40% 60%,
      oklch(45% 0.09 290) 60%
    );
}

/* 変爻の印: 爻の中央に輪を重ねる。連 (陽) でも断 (陰) でも同じ位置に乗る */
.hexagram-mark__line--changing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  transform: translate(-50%, -50%);
  border: 0.12rem solid oklch(45% 0.09 290);
  border-radius: 50%;
  background: oklch(98% 0.01 290);
}

/* 之卦へ移る所作 (下向きの矢。文字は持たない) */
.hexagram-mark__shift {
  width: 0;
  height: 0;
  border-right: 0.3rem solid transparent;
  border-left: 0.3rem solid transparent;
  border-top: 0.35rem solid oklch(45% 0.09 290 / 60%);
}

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

.hexagram-mark__shift.ritual-step--pending {
  opacity: 0;
  transform: translateY(-0.2rem);
}