/* 命運 App — 占卜互動樣式(易經 · 塔羅)
 * 自 legacy/styles.css 移植。沿用既有靛金色系 token(由 chart-render.css 的 :root 提供:
 *   --gold / --gold-bright / --gold-pale / --gold-deep / --cream / --jade / --rose /
 *   --vermillion / --vermillion-bright / --bg-deep / --ink /
 *   --font-serif / --font-brush / --font-display / --font-italic)。
 * 不重新定義 :root / 色系 token。
 *
 * 注意:
 *   · .seg-btn / .chart-hint / .chart-model 已在 chart-render.css 定義,本檔不重複,
 *     僅保留 .yijing-method-switch .seg-btn 的易經專屬覆寫。
 *   · .btn-label 在按鈕內,scope 在 .btn-yijing-primary / .btn-tarot-primary 之下,避免外洩。
 *   · 兩條流程的訊息外框 class 是 .msg--yijing / .msg--tarot(用 .msg.bot,不用 .npc)。
 */

/* ============================================================
   易經 (邵雍)
   ============================================================ */

.msg--yijing {
  max-width: 100% !important;
  align-self: stretch !important;
  background: transparent !important;
  border: none !important;
}
.msg--yijing::before { display: none; }

.yijing-setup, .yijing-casting, .yijing-chart {
  background: linear-gradient(180deg, rgba(26, 58, 45, 0.5) 0%, rgba(7, 19, 14, 0.92) 100%);
  border: 1px solid rgba(103,171,140,0.4);
  padding: 1.4rem 1.2rem;
  position: relative;
}
.yijing-setup::before, .yijing-casting::before, .yijing-chart::before {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(103,171,140,0.15);
  pointer-events: none;
}

.yijing-prompt {
  font-family: var(--font-serif);
  color: var(--cream);
  margin: 0 0 0.8rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  position: relative; z-index: 1;
}
.yijing-question {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(103,171,140,0.3);
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  padding: 0.7rem 0.9rem;
  outline: none;
  resize: vertical;
  min-height: 56px;
  letter-spacing: 0.04em;
  position: relative; z-index: 1;
  transition: border-color 0.25s;
}
.yijing-question:focus { border-color: var(--jade); }
.yijing-question::placeholder { color: rgba(240,228,200,0.4); font-style: italic; }

.yijing-method-switch {
  display: flex; gap: 0.5rem; justify-content: center;
  margin-top: 0.75rem; position: relative; z-index: 1;
}
.yijing-method-switch .seg-btn {
  padding: 0.35rem 1rem; font-size: 0.85rem;
  background: rgba(0,0,0,0.3); color: rgba(240,228,200,0.7);
  border: 1px solid rgba(240,228,200,0.25); border-radius: 999px;
  cursor: pointer;
}
.yijing-method-switch .seg-btn.is-on {
  background: rgba(240,228,200,0.15); color: var(--ink, #f0e4c8);
  border-color: rgba(240,228,200,0.55);
}

.yijing-actions {
  display: flex; justify-content: center;
  margin-top: 1rem;
  position: relative; z-index: 1;
}
.btn-yijing-primary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(135deg, rgba(103,171,140,0.35), rgba(26,58,45,0.45));
  border: 1px solid var(--jade);
  color: var(--cream);
  padding: 0.8rem 2rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-yijing-primary:hover {
  background: linear-gradient(135deg, rgba(103,171,140,0.5), rgba(26,58,45,0.6));
  box-shadow: 0 0 22px rgba(103,171,140,0.4);
}
.btn-yijing-primary .btn-glyph {
  font-family: var(--font-brush);
  font-size: 1.4rem;
  color: var(--jade);
}
.btn-yijing-primary .btn-label { color: var(--cream); }

/* Casting animation */
.yijing-casting {
  display: flex; flex-direction: column;
  align-items: center; gap: 1rem;
  padding: 2rem 1rem;
}
.coin-row { display: flex; gap: 0.8rem; }
.coin {
  font-size: 2.6rem;
  color: var(--gold-bright);
  animation: coin-toss 0.7s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(240,200,96,0.5);
}
.coin:nth-child(2) { animation-delay: 0.15s; }
.coin:nth-child(3) { animation-delay: 0.3s; }
@keyframes coin-toss {
  0%, 100% { transform: rotateY(0); }
  50%      { transform: rotateY(180deg) translateY(-12px); }
}
.yijing-casting p {
  font-family: var(--font-serif);
  color: var(--gold-pale);
  letter-spacing: 0.25em;
  margin: 0;
}

/* Meihua casting — three steps light up in sequence */
.meihua-steps {
  display: flex; gap: 1rem;
  font-family: var(--font-brush);
  font-size: 1.5rem;
  letter-spacing: 0.15em;
}
.meihua-step {
  color: rgba(240,228,200,0.35);
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(240,228,200,0.25);
  border-radius: 6px;
  animation: meihua-pulse 1.8s ease-in-out infinite;
}
.meihua-step--upper  { animation-delay: 0s;   }
.meihua-step--lower  { animation-delay: 0.6s; }
.meihua-step--moving { animation-delay: 1.2s; }
@keyframes meihua-pulse {
  0%, 100% { color: rgba(240,228,200,0.35); border-color: rgba(240,228,200,0.25); transform: scale(1); }
  20%      { color: var(--gold-bright);     border-color: var(--gold-bright);     transform: scale(1.08); }
}

/* Revealed chart */
.yijing-question-recall {
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--jade);
  font-size: 0.88rem;
  margin: 0 0 1rem;
  opacity: 0.85;
  position: relative; z-index: 1;
}

.yijing-main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: flex-start;
  position: relative; z-index: 1;
}

.hexagram-view {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.hexagram-lines {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(240,200,96,0.25);
}
.hexa-line {
  display: flex; align-items: center;
  gap: 4px;
  position: relative;
  width: 140px;
}
.hexa-line .line-bar {
  height: 8px;
  background: var(--cream);
  border-radius: 1px;
  flex: 1;
}
.hexa-line--yin .line-bar { flex: 0 1 calc(50% - 8px); }
.hexa-line .line-gap { width: 16px; }
.hexa-line--yang .line-bar { background: var(--cream); }
.hexa-line--yin .line-bar { background: var(--cream); }
.hexa-line--changing .line-bar { background: var(--vermillion-bright); box-shadow: 0 0 8px rgba(232,74,75,0.5); }
.line-mark {
  position: absolute; right: -18px;
  font-size: 0.85rem;
  color: var(--vermillion-bright);
  font-weight: bold;
}
.line-num {
  position: absolute; left: -22px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: var(--gold-pale);
  opacity: 0.55;
  letter-spacing: 0.1em;
}

.hex-changing-note {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--vermillion-bright);
  opacity: 0.85;
  letter-spacing: 0.1em;
  text-align: center;
}

.hex-blocks {
  display: flex; flex-direction: column;
  gap: 0.6rem;
}
.hex-block {
  background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(26,58,45,0.25));
  border: 1px solid rgba(103,171,140,0.35);
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: all 0.25s;
  position: relative;
}
.hex-block:hover {
  background: linear-gradient(135deg, rgba(103,171,140,0.18), rgba(26,58,45,0.4));
  border-color: var(--jade);
  box-shadow: 0 0 14px rgba(103,171,140,0.3);
}
.hex-block .hex-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  color: var(--gold-pale);
  opacity: 0.75;
}
.hex-block .hex-name {
  font-family: var(--font-brush);
  font-size: 1.5rem;
  color: var(--cream);
  letter-spacing: 0.1em;
  margin-top: 0.1rem;
}
.hex-block .hex-symbols {
  font-size: 1.6rem;
  color: var(--gold-bright);
  letter-spacing: 0.2em;
  line-height: 1;
  margin: 0.1rem 0;
}
.hex-block .hex-trigrams {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  color: var(--gold-pale);
  opacity: 0.75;
  letter-spacing: 0.08em;
}
.hex-block .hex-meaning {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--jade);
  margin-top: 0.3rem;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .yijing-main { grid-template-columns: 1fr; }
  .hexagram-view { align-items: center; }
  .hexa-line { width: 120px; }
  .hexa-line .line-bar { height: 7px; }
  .hexa-line .line-gap { width: 12px; }
}

/* ============================================================
   塔羅 (薇拉夫人)
   ============================================================ */

.msg--tarot {
  max-width: 100% !important;
  align-self: stretch !important;
  background: transparent !important;
  border: none !important;
}
.msg--tarot::before { display: none; }

/* ── 塔羅之夜 · 面板殼(靛金夜空 + 四角金鑽 + 星點) ── */
.vt{position:relative;border-radius:16px;padding:20px 15px 18px;overflow:hidden;
  background:linear-gradient(168deg,rgba(51,30,74,.72),rgba(18,14,46,.94) 58%,rgba(10,8,34,.97));
  border:1px solid rgba(163,125,44,.55);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.85),inset 0 0 26px -8px rgba(154,74,130,.35);}
.vt::before{content:'';position:absolute;inset:6px;border:1px solid rgba(236,216,164,.16);border-radius:11px;pointer-events:none;z-index:1;}
.vt-gem{position:absolute;width:7px;height:7px;background:linear-gradient(135deg,var(--gold-bright,#f3cd6a),var(--gold-deep,#a07d2c));transform:rotate(45deg);z-index:2;box-shadow:0 0 8px rgba(243,205,106,.55);}
.vt-g1{top:9px;left:9px}.vt-g2{top:9px;right:9px}.vt-g3{bottom:9px;left:9px}.vt-g4{bottom:9px;right:9px}
.vt-stars{position:absolute;inset:0;pointer-events:none;z-index:0;}
.vt-stars::before{content:'';position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.75;
  box-shadow:30px 44px 0 rgba(255,255,255,.5),90px 20px 0 rgba(243,205,106,.7),150px 60px 0 rgba(255,255,255,.35),
   210px 30px 0 rgba(227,160,180,.6),268px 74px 0 rgba(255,255,255,.5),330px 24px 0 rgba(243,205,106,.5),
   50px 110px 0 rgba(255,255,255,.28),300px 120px 0 rgba(255,255,255,.4),190px 100px 0 rgba(227,160,180,.35),
   356px 96px 0 rgba(255,255,255,.3),120px 86px 0 rgba(255,255,255,.45);}
.vt-in{position:relative;z-index:3;}

/* 抬頭:MADAME VERA + 標題 + 月相 */
.vt-head{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:14px;}
.vt-eyebrow{font-family:var(--font-display,'Cinzel',serif);font-size:9px;letter-spacing:.48em;color:var(--gold,#d9b14a);text-transform:uppercase;padding-left:.48em;}
.vt-title{font-size:19px;font-weight:700;letter-spacing:.24em;color:var(--cream,#f1e7cf);padding-left:.24em;}
.vt-moons{display:flex;align-items:center;gap:9px;margin-top:2px;}
.vt-moons .m{width:9px;height:9px;border-radius:50%;background:#0d0a28;border:1px solid rgba(236,216,164,.5);position:relative;overflow:hidden;}
.vt-moons .m::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--gold-pale,#ecd8a4);}
.vt-moons .m.p1::after{transform:translateX(-72%)}.vt-moons .m.p2::after{transform:translateX(-42%)}
.vt-moons .m.full{width:13px;height:13px;box-shadow:0 0 12px rgba(236,216,164,.75)}.vt-moons .m.full::after{transform:none}
.vt-moons .m.p4::after{transform:translateX(42%)}.vt-moons .m.p5::after{transform:translateX(72%)}
.vt-moons .ln{width:34px;height:1px;background:linear-gradient(90deg,transparent,rgba(236,216,164,.4),transparent);}

/* 薇拉開場白 */
.vt-say{display:flex;gap:10px;align-items:flex-start;margin-bottom:13px;}
.vt-say img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid var(--gold-deep,#a07d2c);box-shadow:0 0 10px rgba(154,74,130,.5);flex:none;}
.vt-say p{margin:2px 0 0;font-size:13.5px;line-height:1.8;color:var(--cream,#f1e7cf);letter-spacing:.03em;}
.vt-say p b{color:var(--rose,#e3a0b4);font-weight:600;}

/* 分隔標 */
.vt-lab{display:flex;align-items:center;gap:10px;margin:15px 0 10px;}
.vt-lab span{font-size:10.5px;letter-spacing:.3em;color:var(--gold,#d9b14a);white-space:nowrap;padding-left:.3em;}
.vt-lab::before,.vt-lab::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(217,177,74,.4));}
.vt-lab::after{background:linear-gradient(90deg,rgba(217,177,74,.4),transparent);}

/* 問題:夜之墨箋 */
.tarot-question{width:100%;background:rgba(5,4,18,.55);border:1px solid rgba(217,177,74,.35);border-radius:11px;
  color:var(--cream,#f1e7cf);font-family:var(--font-serif);font-size:13.5px;letter-spacing:.04em;line-height:1.8;
  padding:12px 13px;min-height:64px;resize:vertical;outline:none;transition:border-color .25s;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.35);}
.tarot-question::placeholder{color:rgba(192,182,232,.45);font-style:italic;}
.tarot-question:focus{border-color:var(--rose,#e3a0b4);box-shadow:0 0 0 1px rgba(227,160,180,.25),inset 0 2px 10px rgba(0,0,0,.35);}

/* 牌陣:三枚紋章 */
.tarot-spread-choice{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;}
.tarot-spread-opt{position:relative;display:block;border:1px solid rgba(217,177,74,.3);border-radius:13px;
  background:rgba(9,7,30,.55);padding:13px 6px 11px;text-align:center;cursor:pointer;transition:.22s;}
.tarot-spread-opt:hover{border-color:var(--rose,#e3a0b4);}
.tarot-spread-opt input{display:none;}
.tarot-spread-opt .pips{display:flex;justify-content:center;align-items:flex-end;gap:3px;height:44px;margin-bottom:8px;}   /* 44px:容得下五芒陣的兩排(19×2+3);三張紋章同高、羅馬數字對齊 */
.tarot-spread-opt .pip{width:12px;height:19px;border-radius:2.5px;border:1px solid rgba(236,216,164,.55);background:linear-gradient(160deg,#241c58,#120e2c);}
.tarot-spread-opt .pip.hi{border-color:var(--gold-bright,#f3cd6a);box-shadow:0 0 7px rgba(243,205,106,.45);}
.tarot-spread-opt.sp-q .pips{flex-wrap:wrap;align-content:flex-end;width:56px;margin:0 auto 8px;}
.tarot-spread-opt .rn{font-family:var(--font-display,'Cinzel',serif);font-size:9px;letter-spacing:.3em;color:var(--gold,#d9b14a);display:block;padding-left:.3em;}
.tarot-spread-opt .opt-title{display:block;font-size:13px;letter-spacing:.14em;color:var(--cream,#f1e7cf);font-weight:600;margin:3px 0 2px;padding-left:.14em;}
.tarot-spread-opt .opt-sub{display:block;font-size:9.5px;color:var(--muted-dim,#9a90c6);letter-spacing:.06em;line-height:1.5;}
.tarot-spread-opt.is-selected{border-color:var(--rose,#e3a0b4);
  background:linear-gradient(170deg,rgba(154,74,130,.28),rgba(18,14,46,.85));
  box-shadow:0 0 18px -4px rgba(227,160,180,.45);}
.tarot-spread-opt.is-selected::after{content:'✦';position:absolute;top:-8px;right:-2px;color:var(--rose,#e3a0b4);font-size:13px;text-shadow:0 0 8px rgba(227,160,180,.8);}
.tarot-spread-opt.is-selected .opt-title{color:var(--rose,#e3a0b4);}

/* 主鈕:月印 */
.tarot-actions{display:flex;justify-content:center;margin-top:17px;}
.btn-tarot-primary{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:var(--font-serif);font-size:14.5px;font-weight:700;letter-spacing:.3em;color:#241803;
  padding:13px 34px 13px 30px;border-radius:999px;border:1px solid rgba(255,244,214,.5);
  background:linear-gradient(135deg,#f3cd6a,#d9b14a 55%,#b8902f);
  box-shadow:0 10px 26px -8px rgba(217,177,74,.65),0 0 0 4px rgba(217,177,74,.14),inset 0 1px 0 rgba(255,255,255,.5);
  transition:.25s;}
.btn-tarot-primary:hover{filter:brightness(1.06);box-shadow:0 10px 30px -8px rgba(217,177,74,.8),0 0 0 4px rgba(217,177,74,.2),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-tarot-primary .btn-glyph{font-size:16px;line-height:1;}
.btn-tarot-primary .btn-label{color:#241803;}

/* ---- ② 洗牌:月下洗牌(牌扇自月心呼吸開合 + 微光掃過);全程收在框內 ---- */
.vt-orrery{position:relative;height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:12px;}
.vt-orrery .core{position:absolute;top:58%;width:52px;height:52px;margin-top:-26px;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#fff8e2,var(--gold-pale,#ecd8a4) 42%,rgba(217,177,74,.15) 78%,transparent);
  box-shadow:0 0 30px rgba(236,216,164,.5),0 0 78px rgba(154,74,130,.5);
  animation:vt-core 2.6s ease-in-out infinite;}
@keyframes vt-core{0%,100%{transform:scale(.92);opacity:.88}50%{transform:scale(1.1);opacity:1}}
.vt-orrery .ring{position:absolute;top:58%;left:50%;width:168px;height:168px;margin:-84px 0 0 -84px;border-radius:50%;
  border:1px dashed rgba(236,216,164,.2);animation:vt-spin 26s linear infinite;}
.vt-orrery .ring.r2{width:118px;height:118px;margin:-59px 0 0 -59px;border-color:rgba(227,160,180,.18);animation-duration:17s;animation-direction:reverse;}
@keyframes vt-spin{to{transform:rotate(360deg)}}
.vt-riffle{position:absolute;top:58%;left:50%;width:0;height:0;}
.vt-riffle .rc{position:absolute;left:0;bottom:0;width:44px;height:70px;margin-left:-22px;border-radius:6px;overflow:hidden;
  transform-origin:50% 100%;animation:vt-riffle 2.6s ease-in-out infinite;}
.vt-riffle .rc .tarot-card-img{border-radius:6px;box-shadow:-4px 3px 11px rgba(0,0,0,.55);}
@keyframes vt-riffle{
  0%,100%{transform:rotate(calc(var(--a) * .34)) translateY(3px)}
  48%    {transform:rotate(var(--a)) translateY(-9px)}
}
.vt-sweep{position:absolute;left:0;bottom:-4px;width:30px;height:120px;margin-left:-15px;pointer-events:none;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(243,205,106,.5),transparent);
  transform-origin:50% 100%;animation:vt-sweep 3s ease-in-out infinite;}
@keyframes vt-sweep{0%,100%{transform:rotate(-46deg);opacity:0}28%{opacity:.85}50%{transform:rotate(46deg);opacity:.85}72%{opacity:0}}
.vt-orrery-note{text-align:center;font-size:12.5px;letter-spacing:.4em;color:var(--gold-pale,#ecd8a4);margin:8px 0 0;padding-left:.4em;}
.vt-orrery-sub{text-align:center;font-size:10.5px;letter-spacing:.14em;color:var(--muted-dim,#9a90c6);margin:8px 0 0;}

/* ---- ③ 抽牌:命運之扇 ---- */
.tarot-question-recall{text-align:center;font-family:var(--font-italic);font-style:italic;
  color:var(--rose,#e3a0b4);font-size:12px;margin:0 0 8px;opacity:.9;letter-spacing:.05em;}
.vt-pickbar{display:flex;justify-content:center;align-items:center;gap:8px;margin:8px 0 2px;}
.vt-slot{width:30px;height:47px;border-radius:5px;border:1px dashed rgba(236,216,164,.4);background:rgba(9,7,30,.5);overflow:hidden;transition:.25s;}
.vt-slot.filled{border:1px solid var(--gold-bright,#f3cd6a);box-shadow:0 0 10px rgba(243,205,106,.4);}
.vt-slot.filled .tarot-card-img{border-radius:4px;}
.vt-ct{font-size:11px;letter-spacing:.16em;color:var(--gold-pale,#ecd8a4);margin-left:6px;}
.vt-ct b{color:var(--gold-bright,#f3cd6a);font-weight:700;}
.vfan-scroll{position:relative;height:206px;margin:6px -9px 0;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.vfan-scroll::-webkit-scrollbar{display:none;}
.vfan-track{position:relative;height:100%;}
.vfc{position:absolute;top:12px;width:62px;height:99px;padding:0;background:transparent;border:none;cursor:pointer;
  transform:translateX(var(--ex,0px)) rotate(calc(var(--rot,0deg) + var(--er,0deg))) translateY(var(--ty,0px));
  transition:opacity .3s,filter .3s;will-change:transform;}
.vfan-track.vfan-open .vfc{transition:transform .82s cubic-bezier(.2,.9,.3,1),opacity .55s ease;}   /* 承接洗牌:合牌→展開的展扇過渡 */
.vfc .tarot-card-img{box-shadow:-6px 4px 14px rgba(0,0,0,.55);}
.vfc:hover .tarot-card-img{box-shadow:0 0 16px rgba(227,160,180,.55),-6px 4px 14px rgba(0,0,0,.55);}
.vfc.vfc-picked{opacity:.12;filter:grayscale(.6);pointer-events:none;}
.tarot-deck-hint{text-align:center;font-size:10.5px;color:var(--muted-dim,#9a90c6);letter-spacing:.1em;margin:8px 0 0;}
.tarot-deck-hint b{color:var(--gold-pale,#ecd8a4);font-weight:400;}

/* ---- Reveal phase: spread layout with flip animation ---- */
.tarot-spread {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0;
  position: relative; z-index: 1;
}
.tarot-spread--five {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));   /* 上2下3:6 欄定位,隨容器縮不爆版 */
  gap: 0.7rem 0.4rem;
  max-width: 440px;                 /* 桌機聊天區變寬時,牌陣不跟著撐大(對齊手機尺寸) */
  margin-left: auto; margin-right: auto;
  /* 不可用 justify-items:center — 會讓 slot 縮成內容寬,卡片就大小不一 */
}
.tarot-spread--five .tarot-revealed-slot { width: 100%; }
.tarot-spread--five .tarot-revealed-slot:nth-child(1) { grid-column: 2 / span 2; }
.tarot-spread--five .tarot-revealed-slot:nth-child(2) { grid-column: 4 / span 2; }
.tarot-spread--five .tarot-revealed-slot:nth-child(3) { grid-column: 1 / span 2; }
.tarot-spread--five .tarot-revealed-slot:nth-child(4) { grid-column: 3 / span 2; }
.tarot-spread--five .tarot-revealed-slot:nth-child(5) { grid-column: 5 / span 2; }
.tarot-spread--five .tarot-card-flip { width: 100%; }
.tarot-spread--five .tarot-card-name { max-width: 100%; font-size: 0.62rem; }
.tarot-spread--five .tarot-pos-label { font-size: 0.72rem; }
/* 三張牌:同一列、不換行 */
.tarot-spread--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 420px;                 /* 桌機不撐大、且與五張同尺度,三張不再偏小 */
  margin-left: auto; margin-right: auto;
}
.tarot-spread--three .tarot-card-flip { width: 100%; }   /* 填滿欄位(移除 108px 上限,桌機才不偏小) */
/* 單張牌:置中放大,是最顯眼的一張(勿小於三/五張) */
.tarot-spread--single { justify-content: center; }
.tarot-spread--single .tarot-card-flip { width: min(210px, 62vw); }
.tarot-revealed-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  animation: slot-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--pos-i, 0) * 0.15s);
}
@keyframes slot-enter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tarot-pos-label{font-size:10px;letter-spacing:.3em;color:var(--gold,#d9b14a);margin:0;
  padding:3px 10px 3px calc(10px + .3em);border:1px solid rgba(217,177,74,.4);border-radius:999px;background:rgba(9,7,30,.6);}
.tarot-card-name{font-family:var(--font-serif);text-align:center;margin:0;max-width:110px;line-height:1.4;}
.tarot-card-name b{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--gold-pale,#ecd8a4);font-weight:600;}
.tarot-card-name span{display:block;font-family:var(--font-display,'Cinzel',serif);font-size:8px;letter-spacing:.26em;color:var(--muted-dim,#9a90c6);text-transform:uppercase;}
.vt-revtag{position:absolute;top:6px;right:6px;z-index:5;font-size:8.5px;letter-spacing:.1em;color:#241803;
  background:var(--gold-bright,#f3cd6a);border-radius:20px;padding:1.5px 7px;font-weight:700;}

/* 3D flip — card slots use real tarot aspect ratio so images don't crop */
.tarot-card-flip {
  width: 120px;
  aspect-ratio: 2 / 3;
  perspective: 1000px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55));
}
.tarot-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.tarot-card-flip.is-flipped .tarot-card-flip-inner {
  transform: rotateY(180deg);
}
.tarot-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.tarot-card-face--front {
  transform: rotateY(180deg);
}

/* The SVG card itself(保留以相容 SVG 卡面) */
.tarot-card-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* PNG-based card art (full individual card images, 2:3 ratio) */
.tarot-card-img {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #1a0f3a;
}
/* 描金雙線外框(牌面 + 牌背都套) */
.tarot-card-img::after {
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 3;
  border: 1.5px solid var(--gold-bright, #f3cd6a);
  box-shadow:
    inset 0 0 0 3px rgba(6,5,26,.92),
    inset 0 0 0 4.5px var(--gold-deep, #a07d2c),
    inset 0 0 22px rgba(0,0,0,.42),
    0 0 12px rgba(243,205,106,.20);
}
/* 羅馬數字 */
.tarot-card-roman {
  position: absolute; top: 4.5%; left: 0; right: 0; z-index: 4;
  text-align: center; pointer-events: none;
  font-family: 'Cinzel', 'Noto Serif TC', serif;
  font-size: 11px; letter-spacing: .18em; font-weight: 600;
  color: var(--gold-bright, #f3cd6a);
  text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 9px rgba(0,0,0,.85);
}
.tarot-card-img img {
  width: 100%;
  height: 100%;
  /* contain — never crop the card; show whole image */
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.tarot-card-img.is-reversed img {
  transform: rotate(180deg);
}
.tarot-card-img--back {
  background: #1a0a3a;
}

.tarot-summary-status{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:11.5px;letter-spacing:.22em;color:var(--muted,#c0b6e8);margin:14px 0 0;}
.tarot-summary-status .d{width:5px;height:5px;border-radius:50%;background:var(--rose,#e3a0b4);
  animation:vt-dot 1.2s ease-in-out infinite;}
.tarot-summary-status .d:nth-child(2){animation-delay:.2s}
.tarot-summary-status .d:nth-child(3){animation-delay:.4s}
@keyframes vt-dot{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}

/* Mobile adjustments */
@media (max-width: 768px) {
  .tarot-spread-choice { gap: 7px; }
  .tarot-spread-opt { padding: 11px 4px 9px; }
  .tarot-spread-opt .opt-title { font-size: 12px; }
  .tarot-spread-opt .opt-sub   { font-size: 9px; }
  .tarot-card-flip { width: 90px; }
  .tarot-card-name b { font-size: 11.5px; }
  .tarot-spread--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .tarot-card-flip { width: 75px; }
  .tarot-card-name { max-width: 84px; }
  .tarot-card-name b { font-size: 11px; }
}

/* ===== 起卦工具 v2「奉硯起卦」(2026-07)===== */
.msg--yijing{width:min(560px,96%);max-width:none;}
.yj2{position:relative;border:1px solid rgba(103,171,140,.28);border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(103,171,140,.10), transparent 55%),
    linear-gradient(170deg, rgba(26,32,52,.92), rgba(14,16,36,.94));
  padding:18px 18px 16px;}
.yj2::after{content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
  border:1px solid rgba(240,200,96,.26);
  box-shadow:inset 0 0 0 3px rgba(6,5,26,.7), inset 0 0 0 4px rgba(138,106,42,.32);}
.yj2-bagua{position:absolute;right:-44px;top:-44px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(103,171,140,.22);display:grid;place-items:center;pointer-events:none;
  animation:yj2spin 90s linear infinite;}
.yj2-bagua i{position:absolute;left:50%;top:50%;font-style:normal;font-size:13px;color:rgba(103,171,140,.4);
  font-family:var(--font-brush,serif);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-61px) rotate(calc(var(--a) * -1));}
.yj2-bagua::before{content:'';position:absolute;inset:22px;border-radius:50%;border:1px dashed rgba(240,200,96,.18);}
@keyframes yj2spin{to{transform:rotate(360deg);}}
.yj2-eyebrow{font-family:var(--font-body,serif);font-size:10px;letter-spacing:.34em;color:#8fc4a8;margin-bottom:8px;}
.yj2-prompt{font-family:var(--font-brush,serif);font-size:15.5px;line-height:1.9;color:var(--gold-pale);margin:0 0 12px;}
.yj2-paper{position:relative;background:rgba(10,12,28,.6);border:1px solid rgba(240,200,96,.16);border-radius:12px;padding:12px 14px 10px;}
.yj2 .yijing-question{width:100%;background:none;border:none;outline:none;resize:none;min-height:56px;margin:0;padding:0;border-radius:0;
  font-family:var(--font-brush,serif);font-size:15px;line-height:1.8;color:var(--cream);}
.yj2 .yijing-question:focus{border:none;box-shadow:none;}
.yj2 .yijing-question::placeholder{color:rgba(240,228,200,.35);font-style:normal;}
.yj2-paper::after{content:'';position:absolute;left:14px;right:14px;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(240,200,96,.4),transparent);}
.yj2-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px;}
.yj2-mth{position:relative;border:1px solid rgba(240,200,96,.2);border-radius:12px;padding:12px 12px 10px;cursor:pointer;
  background:rgba(20,24,46,.5);transition:.25s;text-align:left;color:inherit;font:inherit;}
.yj2-mth:hover{border-color:rgba(240,200,96,.45);}
.yj2-mth.on{border-color:#8fc4a8;background:linear-gradient(165deg,rgba(103,171,140,.14),rgba(20,24,46,.6));
  box-shadow:0 0 0 1px rgba(143,196,168,.35), 0 6px 18px -8px rgba(103,171,140,.4);}
.yj2-mth .mi{font-size:19px;line-height:1;}
.yj2-mth b{display:block;font-family:var(--font-brush,serif);font-size:15px;color:var(--cream);margin:6px 0 3px;}
.yj2-mth > span:last-child{font-size:10.5px;color:var(--muted);letter-spacing:.06em;line-height:1.6;display:block;}
.yj2-mth.on b{color:#bfe3cf;}
.yj2-mth .chk{position:absolute;top:8px;right:10px;font-size:11px;color:#8fc4a8;opacity:0;transition:.25s;}
.yj2-mth.on .chk{opacity:1;}
.yj2-cast{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;
  padding:13px;border:1px solid var(--gold);border-radius:12px;cursor:pointer;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(217,177,74,.2),rgba(103,171,140,.12));
  font-family:var(--font-brush,serif);font-size:16.5px;letter-spacing:.3em;text-indent:.3em;color:var(--gold-bright);transition:.3s;}
.yj2-cast::before{content:'';position:absolute;inset:3px;border:1px solid rgba(240,200,96,.3);border-radius:9px;}
.yj2-cast:hover{box-shadow:0 0 24px rgba(240,200,96,.3);transform:translateY(-1px);}
/* 擲錢 */
.yj2-casting{display:flex;gap:18px;align-items:flex-start;}
.yj2-hexbuild{flex:none;display:flex;flex-direction:column-reverse;gap:7px;padding:10px 12px;
  background:rgba(10,12,28,.55);border:1px solid rgba(240,200,96,.16);border-radius:10px;}
.yj2-ln{display:flex;align-items:center;gap:6px;height:12px;width:104px;}
.yj2-ln .bar{height:8px;border-radius:2px;background:linear-gradient(180deg,#f0c860,#a07d2c);
  box-shadow:0 1px 4px rgba(0,0,0,.5), 0 0 8px rgba(240,200,96,.25);flex:1;}
.yj2-ln.yin .gap{width:16px;flex:none;}
.yj2-ln.pend{opacity:.18;}
.yj2-ln.pend .bar{background:#4a4470;box-shadow:none;}
.yj2-ln .mk{font-size:10px;color:#e0625f;width:12px;text-align:center;flex:none;}
.yj2-ln.settle{animation:yj2settle .5s cubic-bezier(.22,.7,.3,1);}
@keyframes yj2settle{from{transform:translateY(-10px);opacity:0;filter:blur(3px);}to{transform:none;opacity:1;filter:none;}}
.yj2-coins{flex:1;display:flex;flex-direction:column;gap:10px;align-items:center;padding-top:6px;}
.yj2-coinrow{display:flex;gap:12px;}
.yj2-coin{width:38px;height:38px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 34% 30%, #f6dc8c, #d9b14a 55%, #8a6a2a 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 0 6px rgba(120,88,20,.6);display:grid;place-items:center;}
.yj2-coin::before{content:'';width:12px;height:12px;background:#141024;border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 1.5px rgba(138,106,42,.8);}
.yj2-coin.tail::after{content:'背';position:absolute;bottom:-16px;font-size:9px;color:var(--muted);}
.yj2-coin.head::after{content:'字';position:absolute;bottom:-16px;font-size:9px;color:var(--muted);}
.yj2-coin.spin{animation:yj2flip .5s linear infinite;}
@keyframes yj2flip{0%{transform:rotateX(0) translateY(0);}25%{transform:rotateX(180deg) translateY(-9px);}50%{transform:rotateX(360deg) translateY(0);}75%{transform:rotateX(540deg) translateY(-5px);}100%{transform:rotateX(720deg) translateY(0);}}
.yj2-castnote{font-family:var(--font-brush,serif);font-size:13px;color:var(--gold-pale);letter-spacing:.14em;margin-top:12px;text-align:center;}
.yj2-castnote b{color:#bfe3cf;font-weight:400;}
/* 梅花步驟 */
.yj2-meihua{display:flex;gap:10px;justify-content:center;margin:10px 0 4px;}
.yj2-mstep{border:1px dashed rgba(240,200,96,.3);border-radius:10px;padding:10px 14px;min-width:74px;text-align:center;
  font-size:12px;color:var(--muted);letter-spacing:.14em;transition:.4s;}
.yj2-mstep b{display:block;font-family:var(--font-brush,serif);font-size:15px;color:#bfe3cf;margin-top:4px;font-weight:400;}
.yj2-mstep.lit{border-style:solid;border-color:#8fc4a8;color:var(--gold-pale);
  box-shadow:0 0 14px rgba(103,171,140,.25);animation:yj2settle .45s cubic-bezier(.22,.7,.3,1);}
/* 卦成 */
.yj2-recall{font-family:var(--font-brush,serif);font-size:14px;color:var(--gold-pale);border-left:2px solid rgba(143,196,168,.55);
  padding-left:10px;margin:2px 0 14px;line-height:1.7;}
.yj2-main{display:flex;gap:16px;}
.yj2-hexview{flex:none;text-align:center;}
.yj2-hexview .yj2-hexbuild{margin-bottom:8px;}
.yj2-movnote{font-size:10.5px;color:var(--muted);letter-spacing:.08em;}
.yj2-blocks{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;}
.yj2-hexcard{position:relative;border:1px solid rgba(240,200,96,.22);border-radius:11px;padding:9px 12px;cursor:pointer;
  background:linear-gradient(165deg,rgba(26,32,52,.7),rgba(14,16,36,.7));transition:.25s;
  display:flex;align-items:center;gap:11px;}
.yj2-hexcard:hover{border-color:#8fc4a8;box-shadow:0 0 14px rgba(103,171,140,.25);transform:translateX(2px);}
.yj2-hexcard .sym{flex:none;width:26px;text-align:center;display:flex;flex-direction:column;line-height:1.05;
  font-size:15px;color:var(--gold-bright);text-shadow:0 0 10px rgba(240,200,96,.35);}
.yj2-hexcard .sym i{font-style:normal;}
.yj2-hexcard .bd{min-width:0;}
.yj2-hexcard .tt{display:flex;align-items:baseline;gap:7px;}
.yj2-hexcard .lb{font-size:9.5px;letter-spacing:.22em;color:#8fc4a8;flex:none;}
.yj2-hexcard .nm{font-family:var(--font-brush,serif);font-size:15.5px;color:var(--cream);}
.yj2-hexcard .mn{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.55;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.yj2-hexcard .go{margin-left:auto;flex:none;color:rgba(240,200,96,.5);font-size:12px;}
.yj2-hexcard.mut{border-style:dashed;}
.yj2-hexcard.chg{border-color:rgba(224,98,95,.4);}
.yj2-hexcard.chg .lb{color:#e0908e;}
.yj2-hint{font-size:10.5px;color:var(--muted);letter-spacing:.06em;margin-top:11px;text-align:center;}
/* 窄幅(聊天氣泡在手機):卦象上、卦卡直排 */
@media (max-width:520px){
  .yj2-main{flex-direction:column;}
  .yj2-hexview{display:flex;gap:12px;align-items:center;justify-content:center;}
  .yj2-hexview .yj2-hexbuild{margin-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .yj2-bagua,.yj2-coin.spin,.yj2-ln.settle,.yj2-mstep.lit{animation:none !important;}
}