/* =====================================================================
   style.css — タロット1枚引き ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 共有CSSに無い余白ユーティリティの補完 */
.sg-mt-3 { margin-top: var(--sg-space-3, 12px); }

/* カード表示ステージ */
.tarot-stage {
  display: flex;
  justify-content: center;
  margin: 8px 0 18px;
}
.tarot-card {
  width: 168px;
  min-height: 232px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid var(--sg-border, #e5e7eb);
  box-shadow: 0 6px 18px rgba(30, 41, 99, 0.12);
  text-align: center;
}
.tarot-card.is-back {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #3b5bdb, #5b3bb0);
  color: #fff;
}
.tarot-card.is-face {
  background: var(--sg-surface, #fff);
  color: var(--sg-fg, #222);
}
.tarot-card__symbol {
  font-size: 4.2rem;
  line-height: 1;
  display: inline-block;
  transition: transform 0.25s ease;
}
/* 逆位置は絵柄（記号）を180度回転 */
.tarot-card.is-reversed .tarot-card__symbol {
  transform: rotate(180deg);
}
.tarot-card__name {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.5;
}
.tarot-card__hint {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* 操作ボタン */
.tarot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* 結果メタ（種別・向き） */
.tarot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 10px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--sg-border, #e5e7eb);
}
.tarot-meta__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.tarot-meta__k {
  font-size: 0.78rem;
  color: var(--sg-muted, #777);
}
.tarot-meta__v {
  font-weight: 600;
}
.tarot-meta__v.is-reversed {
  color: #b4442e;
}

/* 意味の表示 */
.tarot-meaning__lead {
  margin: 6px 0 2px;
  font-size: 0.82rem;
  color: var(--sg-muted, #777);
}
.tarot-meaning__text {
  margin: 0 0 8px;
  line-height: 1.8;
  font-size: 1.02rem;
}