/* zhijiao.css — 線上擲筊（/zhijiao/）專用的少量樣式；外框、按鈕、輸入框沿用 css/yongshen.css 的 .qq-*，表格沿用 css/liunian.css。
   互動在 js/zhijiao.js：.zj 加 .ready 後才顯示 .zj-js（沒有 JS 時只剩說明）。 */
.zj .zj-js { display: none; }
.zj.ready .zj-js { display: block; text-align: center; }
.zj .qq-q { margin-bottom: 10px; }

/* 筊杯：長按的觸控區要夠大，並關掉手機長按選字 */
.zj-cups { display: flex; justify-content: center; align-items: flex-end; gap: 22px; min-height: 120px; padding: 18px 0 6px; margin: 4px auto 0; max-width: 360px;
  color: #9b3b2e; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; perspective: 600px; }
.zj-cup { display: inline-block; transform-origin: 50% 60%; }
.zj-cup.flip { transform: scaleX(-1); }
.zj-cup svg { display: block; width: 120px; height: 75px; }
.zj-cups.charging .zj-cup { animation: zj-shiver .18s linear infinite alternate; }
@keyframes zj-shiver { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-3px) rotate(2deg); } }
.zj-cups.charging .zj-cup.flip { animation-name: zj-shiver-f; }
@keyframes zj-shiver-f { from { transform: scaleX(-1) translateY(0) rotate(-2deg); } to { transform: scaleX(-1) translateY(-3px) rotate(2deg); } }

/* 擲出：往上拋、翻滾、落地；翻幾圈由 --zj-spin（集氣決定） */
.zj-cups.tossing .zj-cup { animation: zj-toss .9s cubic-bezier(.3,.7,.4,1) both; }
.zj-cups.tossing .zj-cup.flip { animation: zj-toss-f .9s cubic-bezier(.3,.7,.4,1) both; }
@keyframes zj-toss {
  0% { transform: translateY(0) rotateX(0) rotate(0); }
  40% { transform: translateY(-110px) rotateX(calc(var(--zj-spin, 720deg) * .6)) rotate(-25deg); }
  80% { transform: translateY(4px) rotateX(var(--zj-spin, 720deg)) rotate(-8deg); }
  100% { transform: translateY(0) rotateX(var(--zj-spin, 720deg)) rotate(0); }
}
@keyframes zj-toss-f {
  0% { transform: scaleX(-1) translateY(0) rotateX(0) rotate(0); }
  40% { transform: scaleX(-1) translateY(-90px) rotateX(calc(var(--zj-spin2, -900deg) * .6)) rotate(30deg); }
  80% { transform: scaleX(-1) translateY(4px) rotateX(var(--zj-spin2, -900deg)) rotate(10deg); }
  100% { transform: scaleX(-1) translateY(0) rotateX(var(--zj-spin2, -900deg)) rotate(0); }
}
.zj-cups.landed .zj-cup { animation: zj-land .25s ease-out; }
.zj-cups.landed .zj-cup.flip { animation: zj-land-f .25s ease-out; }
@keyframes zj-land { 0% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes zj-land-f { 0% { transform: scaleX(-1) translateY(-6px); } 100% { transform: scaleX(-1) translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .zj-cups.tossing .zj-cup, .zj-cups.tossing .zj-cup.flip, .zj-cups.landed .zj-cup, .zj-cups.landed .zj-cup.flip, .zj-cups.charging .zj-cup { animation: none; }
}

/* 集氣條 */
.zj-meter { height: 6px; max-width: 240px; margin: 8px auto 0; border-radius: 999px; background: var(--border); overflow: hidden; }
.zj-meter i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .05s linear; }

/* 結果 */
.zj-out { min-height: 1em; }
.zj-out[data-hint]::before { content: attr(data-hint); display: block; color: var(--text-dim); font-size: .95rem; margin: 8px 0; }
.zj-kind { margin: 14px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.zj-kind b { font-family: var(--lux-serif, serif); font-size: 2.2rem; line-height: 1.2; color: var(--text); }
.zj-kind span { font-size: .95rem; color: var(--text-dim); }
.zj-msg { font-size: 1.08rem; line-height: 1.8; max-width: 560px; margin: 6px auto 8px; }
.zj-streak { font-weight: 600; color: var(--gold); margin: 4px 0; font-variant-numeric: tabular-nums; }
.zj-three { font-size: .98rem; max-width: 560px; margin: 2px auto 6px; }
.zj-tally { font-size: .92rem; color: var(--text-dim); margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.zj-acts { display: flex; justify-content: center; gap: 18px; margin: 4px 0 0; }
.zj-shake { margin: 2px 0 0; }
.zj-link { background: none; border: 0; color: var(--gold); font-size: 1rem; text-decoration: underline; min-height: 44px; padding: 0 6px; cursor: pointer; }
.zj-link:focus-visible { outline: 3px solid var(--focus-ring, #8a6a3a); outline-offset: 2px; }