/* =========================================
   Spreads Layout Engine (V9.4)
   適配互動式空位與實體卡片
   ========================================= */

/* 通用網格設定 */
.altar-grid {
    display: grid;
    gap: 1rem;
    justify-content: center;
    align-content: center;
    padding: 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 800px; /* 限制最大寬度，避免電腦版太散 */
}

/* 確保格網內的元素 (不論是卡片還是空位) 都置中 */
.altar-grid > div {
    justify-self: center;
    align-self: center;
}

/* -----------------------------------------
   1. 單牌 (One Card)
   ----------------------------------------- */
.spread-one_card {
    grid-template-columns: 1fr;
    height: 400px;
}

/* -----------------------------------------
   2. 時間之流 (3 Cards) - 線性排列
   ----------------------------------------- */
.spread-three_cards_3 {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

/* -----------------------------------------
   3. 四元素 (4 Cards) - 2x2 矩陣
   ----------------------------------------- */
.spread-four_elements {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
}

/* -----------------------------------------
   4. 五芒星 (5 Cards) - 星型結構
   ----------------------------------------- */
.spread-five_star {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    /* 定義網格區域 */
    grid-template-areas:
        ".     top   ."
        "left  cent  right"
        ".     btm   .";
}

.spread-five_star > :nth-child(1) { grid-area: cent; } /* 阻礙/核心 */
.spread-five_star > :nth-child(2) { grid-area: left; }
.spread-five_star > :nth-child(3) { grid-area: top; }
.spread-five_star > :nth-child(4) { grid-area: right; }
.spread-five_star > :nth-child(5) { grid-area: btm; }

/* -----------------------------------------
   5. 愛情六芒星 (7 Cards) - 上下三角形
   ----------------------------------------- */
.spread-hexagram {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
        ".     top   ."
        "left  .     right"
        "bl    .     br"
        ".     btm   .";
}
/* 根據傳統六芒星順序調整 */
.spread-hexagram > :nth-child(1) { grid-area: left; }  /* 你 */
.spread-hexagram > :nth-child(2) { grid-area: right; } /* 他 */
.spread-hexagram > :nth-child(3) { grid-area: bl; }
.spread-hexagram > :nth-child(4) { grid-area: br; }
.spread-hexagram > :nth-child(5) { grid-area: top; }
.spread-hexagram > :nth-child(6) { grid-area: btm; }
.spread-hexagram > :nth-child(7) { grid-area: 3 / 2 / 4 / 3; } /* 中心結果 */

/* -----------------------------------------
   6. 七星馬蹄 (7 Cards) - U型
   ----------------------------------------- */
.spread-horseshoe {
    grid-template-columns: repeat(7, 1fr);
    align-items: start;
}
/* 讓兩側稍微高一點，形成 U 型 */
.spread-horseshoe > :nth-child(1),
.spread-horseshoe > :nth-child(7) { margin-top: 0; }

.spread-horseshoe > :nth-child(2),
.spread-horseshoe > :nth-child(6) { margin-top: 20px; }

.spread-horseshoe > :nth-child(3),
.spread-horseshoe > :nth-child(5) { margin-top: 40px; }

.spread-horseshoe > :nth-child(4) { margin-top: 60px; }


/* -----------------------------------------
   7. 塞爾特十字 (10 Cards) - 複雜結構
   ----------------------------------------- */
.spread-celtic_cross_10 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 0.5rem;
}

/* 左側十字區 (1-6) */
.spread-celtic_cross_10 > :nth-child(1) { grid-column: 2; grid-row: 2; z-index: 1; } /* 核心 */
.spread-celtic_cross_10 > :nth-child(2) { grid-column: 2; grid-row: 2; z-index: 2; transform: rotate(90deg); } /* 阻礙 (橫放) */

.spread-celtic_cross_10 > :nth-child(3) { grid-column: 2; grid-row: 1; } /* 意識 */
.spread-celtic_cross_10 > :nth-child(4) { grid-column: 2; grid-row: 3; } /* 潛意識 */
.spread-celtic_cross_10 > :nth-child(5) { grid-column: 1; grid-row: 2; } /* 過去 */
.spread-celtic_cross_10 > :nth-child(6) { grid-column: 3; grid-row: 2; } /* 未來 */

/* 右側權杖區 (7-10) */
.spread-celtic_cross_10 > :nth-child(7) { grid-column: 4; grid-row: 4; }
.spread-celtic_cross_10 > :nth-child(8) { grid-column: 4; grid-row: 3; }
.spread-celtic_cross_10 > :nth-child(9) { grid-column: 4; grid-row: 2; }
.spread-celtic_cross_10 > :nth-child(10) { grid-column: 4; grid-row: 1; }

/* -----------------------------------------
   8. 黃道十二宮 (12 Cards) - 圓形排列 (模擬)
   ----------------------------------------- */
.spread-zodiac {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}
/* 手機版可能需要變成 Grid 列表，這裡先維持簡單矩陣 */

/* RWD: 手機版強制將複雜牌陣變為捲動列表 */
@media (max-width: 768px) {
    .spread-celtic_cross_10,
    .spread-zodiac,
    .spread-hexagram,
    .spread-horseshoe {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    
    /* 修正塞爾特十字在手機上的橫放卡片 */
    .spread-celtic_cross_10 > :nth-child(2) {
        transform: none; /* 手機上不橫放，避免版面亂掉 */
    }
}