/* ========================================
   探險地圖風格 (Adventure Map Style) - Nintendo/Genshin Inspired
   ======================================== */

.adventure-map {
    position: relative;
    padding: 40px 0;
    /* 增加一點地圖質感背景 */
    background-image: radial-gradient(#e0e0e0 1px, transparent 1px);
    background-size: 20px 20px;
}

.adventure-row {
    position: relative;
    margin-bottom: 5rem; /* 增加間距 */
}

.adventure-row:last-child {
    margin-bottom: 0;
}

/* 探險卡片 - 柔和、明亮、浮島風格 */
.adventure-col .process-card {
    position: relative;
    border: 4px solid #fff; /* 白邊框，像貼紙或 UI 面板 */
    border-radius: 24px; /* 圓潤導角 */
    /* 柔和的陰影，Genshin 風格 */
    box-shadow: 
        0 10px 20px rgba(0, 64, 128, 0.1), 
        0 4px 6px rgba(0, 64, 128, 0.05),
        inset 0 0 0 2px rgba(255,255,255,0.5); /* 內發光 */
    z-index: 2;
    max-width: 85%;
    margin: 0 auto;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 彈性動畫 */
    overflow: visible; /* 讓裝飾物突出 */
    /* 為按鈕保留空間，避免內容蓋到按鈕 */
    padding-bottom: 72px;
}

.adventure-col .process-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 30px rgba(0, 64, 128, 0.15),
        0 8px 10px rgba(0, 64, 128, 0.05);
}

/* 步驟徽章 - 地圖圖釘風格 */
.adventure-col .process-step-badge {
    width: 48px;
    height: 48px;
    font-size: 20px;
    font-weight: 800;
    top: -20px;
    left: -20px;
    border: 4px solid #fff;
    border-radius: 50%;
    /* 寶可夢球風格配色或明亮漸層 */
    background: linear-gradient(135deg, #ff6b6b, #ff8e53); 
    box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* 確保 adventure-col 是 relative 定位，以便放置箭頭 */
.adventure-col {
    position: relative;
}



/* 裝飾性圖示 (基於 Biome) */
.process-card::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 48px;
    opacity: 0.2;
    pointer-events: none;
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    z-index: 0;
}

/* Biome 裝飾與背景微調 - 擬真地圖漸層 */
/* 1. 草原 (Grassland) - 清新的嫩綠色 */
.process-card.biome-1 { 
    background: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 100%); 
    border-color: #fff;
}
.process-card.biome-1::after { content: '🌿'; color: #2e7d32; }

/* 2. 森林 (Forest) - 較深的植被綠 */
.process-card.biome-2 { 
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%); 
}
.process-card.biome-2::after { content: '🌲'; color: #1b5e20; }

/* 3. 沃土 (Soil) - 溫暖的大地色 */
.process-card.biome-3 { 
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); 
}
.process-card.biome-3::after { content: '⛰️'; color: #e65100; }

/* 4. 沙漠 (Desert) - 乾燥的沙黃色 */
.process-card.biome-4 { 
    background: linear-gradient(135deg, #fffde7 0%, #fff59d 100%); 
}
.process-card.biome-4::after { content: '☀️'; color: #fbc02d; }

/* 5. 冰原 (Tundra) - 寒冷的冰藍白色 */
.process-card.biome-5 { 
    background: linear-gradient(135deg, #fafafa 0%, #e0f7fa 100%); 
}
.process-card.biome-5::after { content: '❄️'; color: #0288d1; }

/* 0. 海洋 (Ocean) - 廣闊的淺藍色 */
.process-card.biome-0 { 
    background: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); 
}
.process-card.biome-0::after { content: '💧'; color: #0277bd; }


/* 連接路徑 - 圓點風格 */
/* 共用設定 */
.adventure-row::before,
.adventure-row:not(:last-child)::after,
.adventure-col:not(:last-child)::after,
.adventure-row:not(:last-child) .adventure-col:last-child::after {
    background-image: radial-gradient(circle, #a1887f 40%, transparent 45%); /* 柔和的棕色圓點 */
    background-size: 16px 16px; /* 點的大小和間距 */
    background-repeat: repeat;
    opacity: 0.6;
}

/* 桌面版連接線樣式 (md 以上) */
@media (min-width: 768px) {
    /* 水平連接線 */
    .adventure-row::before {
        content: '';
        position: absolute;
        top: calc(50% + 0.75rem - 8px); /* 修正置中 (高度的一半) */
        left: 25%;
        right: 25%;
        height: 16px; /* 配合 background-size */
        background-repeat: repeat-x;
        z-index: 1;
        transform: translateY(-50%);
    }

    /* 單一卡片的列不需要水平連接線 */
    .adventure-row.adventure-row-single::before {
        display: none;
    }

    /* 垂直連接線 */
    .adventure-row:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -5rem; /* 連接下一列 */
        width: 16px;
        height: 6rem; /* 稍微長一點以確保連接 */
        background-repeat: repeat-y;
        z-index: 1;
    }

    /* 正常列 (左->右) -> 下一列是反向 (右->左) */
    .adventure-row:not(.adventure-row-reverse):not(:last-child)::after {
        right: 25%;
        left: auto;
        transform: translateX(50%); 
    }

    /* 反向列 (右->左) -> 下一列是正常 (左->右) */
    .adventure-row.adventure-row-reverse:not(:last-child)::after {
        left: 25%;
        right: auto;
        transform: translateX(-50%);
    }

    /* 修正單卡列的垂直連接線位置 */
    .adventure-row.adventure-row-single:not(.adventure-row-reverse)::after {
        right: auto;
        left: 25%;
        transform: translateX(-50%);
    }

    .adventure-row.adventure-row-single.adventure-row-reverse::after {
        left: auto;
        right: 25%;
        transform: translateX(50%);
    }

    
}

/* 手機版樣式 (小於 768px) */
@media (max-width: 767px) {
    .adventure-row {
        margin-bottom: 3rem;
        --bs-gutter-y: 3rem;
    }
    
    .adventure-col {
        margin-bottom: 0;
        position: relative;
    }
    
    /* 手機版垂直連接線 */
    .adventure-col:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -3rem;
        left: calc(50% - 8px); /* 修正置中 */
        width: 16px;
        height: 4rem;
        background-repeat: repeat-y;
        z-index: 1;
    }
    
    .adventure-row:not(:last-child) .adventure-col:last-child::after {
        content: '';
        position: absolute;
        bottom: -3rem;
        left: calc(50% - 8px); /* 修正置中 */
        width: 16px;
        height: 4rem;
        background-repeat: repeat-y;
        z-index: 1;
    }
    

}

/* 柔和遊戲風格按鈕 (Soft Pop Buttons) - 固定左下位置 */
.adventure-col .process-card .btn {
    position: absolute;
    left: 20px;
    bottom: 18px;
    border: 2px solid rgba(255,255,255,0.9);
    border-radius: 16px; /* 輕微圓角 */
    padding: 8px 18px;
    height: 40px;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff !important;
    text-transform: none;
    letter-spacing: 0.5px;
    
    /* 預設藍色 */
    background-color: #29b6f6;
    box-shadow: 0 4px 0 #0288d1, 0 5px 10px rgba(0,0,0,0.08);
    
    transition: transform 0.15s, box-shadow 0.15s;
    z-index: 10;
}

.adventure-col .process-card .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 0 #0288d1, 0 8px 15px rgba(0,0,0,0.12);
}

.adventure-col .process-card .btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #0288d1, inset 0 2px 5px rgba(0,0,0,0.06);
}

/* Biome 變體 */
/* 草原/森林 -> 綠色 */
.adventure-col .process-card.biome-1 .btn,
.adventure-col .process-card.biome-2 .btn {
    background-color: #66bb6a;
    box-shadow: 0 4px 0 #2e7d32, 0 5px 10px rgba(0,0,0,0.1);
}
.adventure-col .process-card.biome-1 .btn:hover,
.adventure-col .process-card.biome-2 .btn:hover {
    box-shadow: 0 6px 0 #2e7d32, 0 8px 15px rgba(0,0,0,0.15);
}
.adventure-col .process-card.biome-1 .btn:active,
.adventure-col .process-card.biome-2 .btn:active {
    box-shadow: 0 0 0 #2e7d32, inset 0 2px 5px rgba(0,0,0,0.1);
}

/* 沃土/沙漠 -> 橙色 */
.adventure-col .process-card.biome-3 .btn,
.adventure-col .process-card.biome-4 .btn {
    background-color: #ffa726;
    box-shadow: 0 4px 0 #ef6c00, 0 5px 10px rgba(0,0,0,0.1);
}
.adventure-col .process-card.biome-3 .btn:hover,
.adventure-col .process-card.biome-4 .btn:hover {
    box-shadow: 0 6px 0 #ef6c00, 0 8px 15px rgba(0,0,0,0.15);
}
.adventure-col .process-card.biome-3 .btn:active,
.adventure-col .process-card.biome-4 .btn:active {
    box-shadow: 0 0 0 #ef6c00, inset 0 2px 5px rgba(0,0,0,0.1);
}

/* 冰原/海洋 -> 預設藍色 (或更深藍) */
.adventure-col .process-card.biome-5 .btn,
.adventure-col .process-card.biome-0 .btn {
    background-color: #29b6f6;
    box-shadow: 0 4px 0 #0277bd, 0 5px 10px rgba(0,0,0,0.1);
}
.adventure-col .process-card.biome-5 .btn:hover,
.adventure-col .process-card.biome-0 .btn:hover {
    box-shadow: 0 6px 0 #0277bd, 0 8px 15px rgba(0,0,0,0.15);
}
.adventure-col .process-card.biome-5 .btn:active,
.adventure-col .process-card.biome-0 .btn:active {
    box-shadow: 0 0 0 #0277bd, inset 0 2px 5px rgba(0,0,0,0.1);
}