/* ══ ORACLE · 東方 · module boards ═══════════════════════════════
   八字四柱 · 紫微斗數 · 卦 (六爻/梅花/小六壬) · 羅盤玄空八宅
   ─────────────────────────────────────────────────────────────── */

/* Every board cell sits on a near-white wash over the paper ground. A
 * highlighted cell must tint THAT wash — writing a bare rgba(cinnabar,.05)
 * background instead removes the wash and lets the darker paper show through,
 * so the cell meant to stand out ends up looking muddier than its neighbours.
 * One shared rule keeps the tints honest; each cell only declares --tint. */
.zw-cell.is-soul,
.bz-col.is-day,
.lr-cell.is-last,
.jg-cell.is-zuo, .jg-cell.is-xiang,
.rose-cell.good, .rose-cell.mid, .rose-cell.bad{
  background:linear-gradient(0deg, var(--tint), var(--tint)), rgba(255,252,245,.74);
}

/* ══ 八字 ════════════════════════════════════════════════════════ */
.bz-pillars{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair-2);
}
.bz-col{
  background:rgba(255,252,245,.6); padding:16px 10px 18px;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  position:relative; transition:background .5s;
}
.bz-col.is-day{ --tint:rgba(163,37,27,.06); }
.bz-col.is-day::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--cinnabar);
}
.bz-label{ font-size:10.5px; letter-spacing:.34em; color:var(--silver-4); }
.bz-god{
  font-family:var(--serif); font-size:12px; letter-spacing:.16em; color:var(--silver-3);
  min-height:1.4em;
}
.bz-col.is-day .bz-god{ color:var(--cinnabar); }
.bz-gz{ display:flex; flex-direction:column; align-items:center; gap:2px; margin:2px 0 4px; }
.bz-glyph{
  font-family:var(--serif); font-size:clamp(30px,5vw,46px); line-height:1.14;
  color:var(--silver); letter-spacing:.06em;
  animation:inkGlyph .8s var(--ease-out) both;
}
.bz-col.is-day .bz-glyph{ color:var(--cinnabar); }
@keyframes inkGlyph{
  from{ opacity:0; filter:blur(9px); transform:scale(1.06); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
.bz-elem{ font-size:9.5px; letter-spacing:.2em; color:var(--silver-4); }
/* the 日 column carries a wash of cinnabar, so its quiet type is lifted a step */
.bz-col.is-day .bz-elem,
.bz-col.is-day .bz-label,
.bz-col.is-day .bz-nayin{ color:var(--silver-3); }
.bz-hidden{
  display:flex; flex-direction:column; gap:3px; align-items:center;
  padding-top:9px; border-top:1px solid var(--hair); width:100%;
}
.bz-hid-row{ font-family:var(--serif); font-size:11.5px; letter-spacing:.1em; color:var(--silver-3); }
.bz-hid-row b{ color:var(--silver-2); font-weight:500; }
.bz-nayin{
  font-family:var(--serif); font-size:11px; letter-spacing:.14em; color:var(--silver-4);
  padding-top:8px; border-top:1px solid var(--hair); width:100%; text-align:center;
}

.wx-bars{ display:flex; flex-direction:column; gap:10px; }
.wx-row{ display:grid; grid-template-columns:34px 1fr 34px; gap:11px; align-items:center; }
.wx-g{ font-family:var(--serif); font-size:15px; color:var(--silver-2); letter-spacing:.1em; }
.wx-track{ height:6px; background:rgba(35,26,16,.07); position:relative; }
.wx-fill{
  position:absolute; inset:0 auto 0 0; background:var(--silver-3);
  transform-origin:left; animation:wxGrow 1s var(--ease-out) both;
}
.wx-fill.is-top{ background:var(--cinnabar); }
.wx-fill.is-none{ background:rgba(35,26,16,.12); }
.wx-hid{ position:absolute; top:0; bottom:0; background:rgba(194,144,31,.42); }
@keyframes wxGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.wx-n{
  font-family:var(--serif); font-size:13px; color:var(--silver-3);
  text-align:right; font-variant-numeric:tabular-nums;
}

.dy-rail{ display:flex; gap:1px; background:var(--hair); overflow-x:auto; border:1px solid var(--hair-2); }
.dy-cell{
  flex:0 0 106px; background:rgba(255,252,245,.6); padding:13px 8px 14px;
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
}
.dy-cell.is-now{ background:rgba(194,144,31,.12); }
.dy-no{ font-size:9.5px; letter-spacing:.24em; color:var(--silver-4); }
.dy-gz{ font-family:var(--serif); font-size:22px; color:var(--silver); letter-spacing:.06em; }
.dy-cell.is-now .dy-gz{ color:var(--cinnabar); }
.dy-god{ font-family:var(--serif); font-size:11px; color:var(--silver-3); letter-spacing:.1em; }
.dy-age{ font-size:10px; color:var(--silver-4); letter-spacing:.06em; font-variant-numeric:tabular-nums; }

/* ══ 紫微斗數 ════════════════════════════════════════════════════ */
.zw-board{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(4,minmax(132px,auto));
  gap:1px; background:var(--hair); border:1px solid var(--hair-2);
}
.zw-cell{
  background:rgba(255,252,245,.6); padding:9px 9px 8px; position:relative;
  display:flex; flex-direction:column; min-width:0;
  transition:background .45s;
}
.zw-cell:hover{ background:rgba(255,252,245,.95); }
.zw-cell.is-soul{ --tint:rgba(163,37,27,.075); }
.zw-cell.is-soul::after{
  content:''; position:absolute; inset:0; border:1px solid var(--cinnabar); pointer-events:none;
}
.zw-stars{ display:flex; flex-direction:column; flex:1; min-height:0; }
.zw-major{ display:flex; flex-wrap:wrap; gap:0 8px; align-content:flex-start; }
.zw-star{
  font-family:var(--serif); font-size:13.5px; letter-spacing:.06em; color:var(--silver);
  position:relative; white-space:nowrap;
}
.zw-star sup{ font-size:9px; color:var(--cinnabar); margin-left:1px; letter-spacing:0; }
.zw-minor{
  margin-top:5px; display:flex; flex-wrap:wrap; gap:0 7px;
  font-family:var(--serif); font-size:11px; color:var(--silver-3); letter-spacing:.04em;
}
.zw-minor .ugly{ color:#7d5a1a; }
.zw-minor .tiny{ color:var(--silver-4); font-size:10px; }
.zw-foot{
  margin-top:auto; padding-top:7px; border-top:1px solid var(--hair);
  display:flex; align-items:flex-end; justify-content:space-between; gap:6px;
}
.zw-name{
  font-family:var(--serif); font-size:12.5px; letter-spacing:.14em; color:var(--silver-2);
}
.zw-cell.is-soul .zw-name{ color:var(--cinnabar); }
/* the 命宮 cell carries a cinnabar wash, so its 干支 / 長生 / 大限 line has to step
 * down with it — at --silver-3 it still read fainter than a plain palace */
.zw-cell.is-soul .zw-gz,
.zw-cell.is-soul .zw-dec,
.zw-cell.is-soul .zw-growth{ color:var(--silver-2); }
.zw-body-mark{
  font-size:9px; letter-spacing:.16em; color:var(--gamboge); margin-left:4px;
}
.zw-meta{ text-align:right; display:flex; flex-direction:column; gap:2px; }
.zw-gz{ font-family:var(--serif); font-size:11px; color:var(--silver-4); letter-spacing:.08em; }
.zw-dec{ font-size:9.5px; color:var(--silver-4); font-variant-numeric:tabular-nums; }
.zw-growth{ font-size:9.5px; color:var(--silver-4); letter-spacing:.1em; }

.zw-centre{
  grid-column:2 / 4; grid-row:2 / 4; background:rgba(255,252,245,.42);
  padding:18px clamp(12px,2vw,22px); display:flex; flex-direction:column; gap:12px;
  justify-content:center;
}
.zw-c-name{
  font-family:var(--serif); font-size:clamp(19px,2.6vw,26px); letter-spacing:.2em;
  color:var(--silver); margin:0;
}
.zw-c-name .hl{ color:var(--cinnabar); }
.zw-c-kv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px 14px; }
.zw-c-k{ font-size:9.5px; letter-spacing:.24em; color:var(--silver-4); display:block; }
.zw-c-v{
  font-family:var(--serif); font-size:14px; letter-spacing:.1em; color:var(--silver-2);
  display:block; margin-top:2px;
}
.zw-c-v .hl{ color:var(--cinnabar); }

.zw-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.zw-scroll::-webkit-scrollbar{ height:3px; }
.zw-scroll::-webkit-scrollbar-thumb{ background:var(--hair-3); }
.zw-swipe{ display:none; }
@media (max-width:780px){
  .zw-board{ min-width:660px; grid-template-rows:repeat(4,minmax(118px,auto)); }
  .zw-swipe{
    display:block; margin:9px 0 0; text-align:center;
    font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-4);
  }
}

/* ══ 卦 · hexagram ═══════════════════════════════════════════════ */
.gua-stage{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(20px,3vw,40px);
  align-items:start;
}
@media (max-width:860px){ .gua-stage{ grid-template-columns:minmax(0,1fr); } }

.gua-fig{
  display:flex; flex-direction:column-reverse; gap:11px;
  padding:22px 18px; background:rgba(255,252,245,.55); border:1px solid var(--hair-2);
}
.gua-line{ display:flex; align-items:center; gap:10px; }
.gua-bars{ flex:1; display:flex; gap:9px; height:13px; }
.gua-bar{
  flex:1; background:var(--silver); transform-origin:center;
  animation:barIn .55s var(--ease-out) both;
}
.gua-line.moving .gua-bar{ background:var(--cinnabar); }
.gua-line .gl-no{
  width:22px; font-size:9.5px; letter-spacing:.14em; color:var(--silver-4); text-align:right;
}
.gua-line .gl-mark{
  width:52px; font-family:var(--serif); font-size:11px; letter-spacing:.1em; color:var(--silver-4);
}
.gua-line.moving .gl-mark{ color:var(--cinnabar); }
.gua-line .gl-wy{
  width:20px; font-family:var(--serif); font-size:12px; letter-spacing:.1em;
  color:var(--gamboge); text-align:center;
}
@keyframes barIn{ from{ transform:scaleX(0); opacity:0; } to{ transform:scaleX(1); opacity:1; } }
.gua-line:nth-child(1) .gua-bar{ animation-delay:.02s; }
.gua-line:nth-child(2) .gua-bar{ animation-delay:.12s; }
.gua-line:nth-child(3) .gua-bar{ animation-delay:.22s; }
.gua-line:nth-child(4) .gua-bar{ animation-delay:.32s; }
.gua-line:nth-child(5) .gua-bar{ animation-delay:.42s; }
.gua-line:nth-child(6) .gua-bar{ animation-delay:.52s; }

.gua-names{ text-align:center; margin:16px 0 0; }
.gua-name{
  font-family:var(--serif); font-size:clamp(22px,3vw,30px); letter-spacing:.16em; color:var(--silver);
}
.gua-name .arrow{ color:var(--silver-4); font-size:16px; margin:0 9px; }
.gua-name .to{ color:var(--cinnabar); }
.gua-sub{ margin-top:7px; font-size:11px; letter-spacing:.16em; color:var(--silver-4); }

/* coins */
.coin-row{ display:flex; gap:16px; justify-content:center; margin:0 0 22px; }
.coin{
  width:44px; height:44px; border-radius:50%; border:1.4px solid var(--silver-3);
  position:relative; background:rgba(255,252,245,.7);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:11px; letter-spacing:.06em; color:var(--silver-3);
  transform-style:preserve-3d;
}
.coin::after{
  content:''; position:absolute; width:13px; height:13px; border:1.2px solid var(--silver-4);
}
.coin.is-back{ border-color:var(--cinnabar); color:var(--cinnabar); }
.coin.is-back::after{ border-color:var(--cinnabar); }
.coin.spin{ animation:coinSpin .40s var(--ease) both; animation-delay:var(--cd,0s); }
@keyframes coinSpin{
  0%{   transform:rotateY(0) translateY(0) scale(1); }
  14%{  transform:rotateY(200deg) translateY(-8px) scale(1.04); }
  46%{  transform:rotateY(560deg) translateY(-26px) scale(1.06); }
  84%{  transform:rotateY(980deg) translateY(0) scale(.97); }
  92%{  transform:rotateY(1050deg) translateY(-3px) scale(1.01); }
  100%{ transform:rotateY(1080deg) translateY(0) scale(1); }
}
/* the face it lands on takes a moment to be believed */
.coin.is-back{ animation:coinLand .34s var(--ease-out) both; }
@keyframes coinLand{
  0%{ box-shadow:0 0 0 0 rgba(163,37,27,0); }
  40%{ box-shadow:0 0 0 5px rgba(163,37,27,.16); }
  100%{ box-shadow:0 0 0 0 rgba(163,37,27,0); }
}
.toss-dot.is-on{ animation:dotIn .4s var(--ease-out) both; }
@keyframes dotIn{
  from{ opacity:0; transform:translateY(6px) scale(.9); }
  to{ opacity:1; transform:none; }
}
body[data-motion="calm"] .coin.spin{ animation-duration:.2s; }
.toss-log{
  display:flex; gap:7px; justify-content:center; margin:0 0 8px; flex-wrap:wrap;
}
.toss-dot{
  width:26px; height:26px; border:1px solid var(--hair-2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:11px; color:var(--silver-4);
}
.toss-dot.is-on{ border-color:var(--cinnabar); color:var(--cinnabar); }

/* 八卦 ring (先天/後天) */
.bagua-ring{ width:min(320px,86vw); margin:0 auto; }
.bagua-ring svg{ width:100%; height:auto; overflow:visible; }
.bagua-ring .bg-spin{ transform-origin:160px 160px; animation:baguaTurn 120s linear infinite; }
@keyframes baguaTurn{ to{ transform:rotate(360deg); } }
.bagua-ring text{
  font-family:var(--serif); font-size:15px; fill:var(--silver-2); letter-spacing:.04em;
}
.bagua-ring text.lit{ fill:var(--cinnabar); }
.bagua-ring .bg-hair{ fill:none; stroke:var(--hair-2); stroke-width:1; }
.bagua-ring .bg-line{ fill:none; stroke:var(--silver-3); stroke-width:1; }

/* 六壬 palaces */
.lr-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.lr-cell{
  flex:0 0 132px; border:1px solid var(--hair-2); padding:16px 10px; text-align:center;
  background:rgba(255,252,245,.6);
}
.lr-cell.is-last{ border-color:var(--hair-v); --tint:rgba(163,37,27,.07); }
.lr-stage{ font-size:9.5px; letter-spacing:.26em; color:var(--silver-4); }
.lr-name{
  font-family:var(--serif); font-size:23px; letter-spacing:.14em; color:var(--silver); margin:6px 0 4px;
}
.lr-cell.is-last .lr-name{ color:var(--cinnabar); }
.lr-en{ font-size:9.5px; letter-spacing:.16em; color:var(--silver-4); }

/* ══ 羅盤 · 玄空 · 八宅 ═════════════════════════════════════════ */
.lp-stage{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,3vw,36px);
  align-items:start;
}
@media (max-width:940px){ .lp-stage{ grid-template-columns:minmax(0,1fr); } }
.lp-dial-col{ position:sticky; top:104px; }
@media (max-width:940px){ .lp-dial-col{ position:static; top:auto; } }

.lp-dial-holder{
  position:relative; width:min(420px,88vw); margin:0 auto;
  aspect-ratio:1/1; touch-action:none; cursor:grab;
}
.lp-dial-holder:active{ cursor:grabbing; }
.lp-dial-holder svg{ width:100%; height:100%; overflow:visible; }
.lp-rings{
  transition:transform .8s var(--ease-out);
  transform-box:view-box; transform-origin:210px 210px;
}
.lp-dial-holder.is-drag .lp-rings{ transition:none; }
.lp-hair{ fill:none; stroke:var(--hair-2); stroke-width:1; }
.lp-thin{ fill:none; stroke:var(--silver-3); stroke-width:1; }
.lp-tick{ stroke:var(--hair-3); stroke-width:.8; }
.lp-tick-major{ stroke:var(--silver-3); stroke-width:1.1; }
.lp-mtn{ font-family:var(--serif); font-size:12.5px; fill:var(--silver-2); letter-spacing:0; }
.lp-mtn.lit{ fill:var(--cinnabar); font-size:14px; }
.lp-mtn.opp{ fill:var(--gamboge); }
.lp-pal{ font-family:var(--serif); font-size:11px; fill:var(--silver-4); }
.lp-needle{ stroke:var(--cinnabar); stroke-width:1.4; }
.lp-needle-tail{ stroke:var(--silver-4); stroke-width:1; }
.lp-hub{ fill:var(--cinnabar); }
.lp-read{
  margin:18px 0 0; text-align:center;
  font-family:var(--serif); font-size:12px; letter-spacing:.2em; color:var(--silver-4);
}
.lp-deg{
  font-family:var(--serif); font-size:15px; color:var(--silver);
  font-variant-numeric:tabular-nums;
}

.jiugong{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair-2);
}
.jg-cell{
  background:rgba(255,252,245,.62); padding:12px 10px 11px; min-height:104px;
  display:flex; flex-direction:column; gap:6px; position:relative;
}
.jg-cell.is-zuo{ --tint:rgba(163,37,27,.07); }
.jg-cell.is-xiang{ --tint:rgba(194,144,31,.13); }
.jg-nums{ display:flex; align-items:baseline; justify-content:space-between; }
.jg-shan,.jg-xiang{
  font-family:var(--serif); font-size:25px; color:var(--silver); letter-spacing:.04em;
  line-height:1;
}
.jg-shan.hot,.jg-xiang.hot{ color:var(--cinnabar); }
.jg-yun{
  font-family:var(--serif); font-size:15px; color:var(--silver-4); text-align:center;
  line-height:1; margin:1px 0 0;
}
.jg-foot{
  margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:6px;
}
.jg-pal{ font-family:var(--serif); font-size:12px; letter-spacing:.14em; color:var(--silver-2); }
.jg-dir{ font-size:9.5px; letter-spacing:.16em; color:var(--silver-4); }
.jg-mark{ font-size:9px; letter-spacing:.14em; color:var(--cinnabar); }

.rose{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair-2);
}
.rose-cell{
  background:rgba(255,252,245,.62); padding:13px 9px; min-height:88px; text-align:center;
  display:flex; flex-direction:column; gap:4px; justify-content:center;
}
.rose-cell.good{ --tint:rgba(163,37,27,.07); }
.rose-cell.bad{ --tint:rgba(35,26,16,.06); }
.rose-cell.mid{ --tint:rgba(194,144,31,.13); }
.rose-dir{ font-size:9.5px; letter-spacing:.24em; color:var(--silver-4); }
.rose-star{ font-family:var(--serif); font-size:17px; letter-spacing:.1em; color:var(--silver); }
.rose-cell.good .rose-star{ color:var(--cinnabar); }
.rose-cell.bad .rose-star{ color:var(--silver-3); }
.rose-note{ font-size:9.5px; letter-spacing:.06em; color:var(--silver-4); }

.lp-disclaimer{
  border-left:2px solid var(--hair-v); padding:2px 0 2px 13px; margin:0 0 20px;
  font-size:11px; line-height:1.9; color:var(--silver-3); letter-spacing:.03em;
}
.lp-disclaimer b{ color:var(--cinnabar); font-weight:500; }

/* the 四化 line in the 紫微 centre must not break mid-term */
.zw-mut{ display:inline-block; white-space:nowrap; margin:0 12px 2px 0; }

/* a fixed topbar must not swallow the heading of a freshly cast chart */
#bzResult,#zwResult,#gResult,#lpResult{ scroll-margin-top:96px; }

/* the compass title is the longest in the realm */
#view-east-luopan .e-title{ font-size:clamp(25px,3.2vw,40px); }