/* === ルノルマン三枚引き専用CSS === */

/* カード全体を横に並べるための設定 */
#lenormand-results {
  text-align: center;     /* 中央揃え */
  margin-top: 20px;
}

/* カード1枚の枠 */
.lenormand-card {
  width: 200px;           /* カード幅 */
  height: 360px;          /* カード高さ */
  perspective: 1000px;    /* 3D回転の奥行き */
  display: inline-block;  /* 横に並べる */
  margin: 10px;           /* 間隔 */
  margin-bottom: 40px;
  vertical-align: top;    /* ラベルとの高さ調整 */
}

/* 裏表をまとめる内側 */
.lenormand-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

/* めくられた時の回転 */
.lenormand-inner.flipped {
  transform: rotateY(180deg);
}

/* 裏と表の共通設定 */
.lenormand-front, .lenormand-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 裏を隠す */
  top: 0;
  left: 0;
}

/* 表は裏返しの位置に */
.lenormand-front {
  transform: rotateY(180deg);
}

/* カード画像を枠いっぱいに */
.lenormand-front img,
.lenormand-back img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* 画像を枠いっぱいにフィット */
  border-radius: 8px;      /* 角を少し丸く */
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* カードに影を付ける */
}

/* ラベル（カード名）の表示 */
[id^="lenormand-label"] {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
}

#lenormand-story {
  margin-top: 90px;   /* カード名と結果の間隔を広げる */
  margin-bottom: 100px;
  font-size: 18px;
  line-height: 1.8;
  text-align: center;
}