/* ========================================
   全スプレッド共通のカードサイズ設定
======================================== */

:root {
    /* シャッフル前の山札 */
    --deck-card-width: 118px;

    /* シャッフル中に動かす裏向きカード */
    --shuffle-card-width: 108px;

    /* 結果表示用カード */
    --one-oracle-card-width: 180px;
    --three-card-width: 122px;
    --hexagram-card-width: 90px;

    /* タロットカードの縦横比に近い比率 */
    --tarot-card-ratio: 1109 / 1920;
}

/* すべてのカード画像で共通して使う基本設定 */
.tarot-card {
    display: block;
    height: auto;
    border-radius: 7px;
    box-shadow: 0 6px 14px rgba(72, 48, 20, 0.24);
}

/* ワンオラクルの結果用 */
.tarot-card--one {
    width: var(--one-oracle-card-width);
}

/* スリーカードの結果用 */
.tarot-card--three {
    width: var(--three-card-width);
}

/* ヘキサグラムの結果用 */
.tarot-card--hexagram {
    width: var(--hexagram-card-width);
}

/* =========================
   スマホ用の共通サイズ
========================= */

@media (max-width: 480px) {
    :root {
        --deck-card-width: 92px;
        --shuffle-card-width: 84px;

        --one-oracle-card-width: 142px;
        --three-card-width: 82px;
        --hexagram-card-width: 56px;
    }
}