/* style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Microsoft JhengHei", "Heiti TC", sans-serif;
    background-color: #000000;
    color: #e0e0e0;
    overflow-x: hidden;
}

/* 導覽列滑入動畫 */
/* ==================== 導覽列整體佈局（融合火鳳傲天烈焰風格） ==================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 20px; 
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: 20px; 
    /* 背景改為帶有一絲絲戰火暗紅的漸層暗黑 */
    background: linear-gradient(to bottom, rgba(15, 3, 3, 0.98) 0%, rgba(0, 0, 0, 0.7) 70%, rgba(0, 0, 0, 0) 100%);
    z-index: 1000;
    animation: slideDown 1s ease-out;
}

.nav-logo img {
    height: 50px; 
    /* Logo 發光改為極具侵略性的戰火橘紅光芒 */
    filter: drop-shadow(0 0 12px rgba(255, 68, 0, 0.75)); 
    transition: transform 0.3s ease;
}
.nav-logo img:hover {
    transform: scale(1.03);
}

nav ul {
    display: flex;
    justify-content: center; 
    align-items: center;
    list-style: none;
}

nav ul li {
    margin: 0 30px; 
}

nav ul li a {
    color: #f5efe6; /* 象牙白 */
    text-decoration: none;
    font-size: 28px; 
    font-weight: 900; 
    font-family: 'Noto Serif TC', "Microsoft JhengHei", serif; 
    letter-spacing: 4px; 
    position: relative;
    display: inline-block; 
    
    /* 基礎重度暗黑陰影 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(255, 51, 0, 0.3);
    
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                text-shadow 0.4s ease, 
                letter-spacing 0.4s ease;
}

/* 滑過（Hover）時的烈焰熔岩流光與震開特效 */
nav ul li a:hover {
    transform: translateY(-4px) scale(1.05); 
    letter-spacing: 6px; 
    color: #ffaa00; 
    
    text-shadow: 
        0 0 10px #ff3300, 
        0 0 25px #ffaa00, 
        0 0 45px rgba(255, 51, 0, 0.8),
        2px 4px 4px rgba(0,0,0,0.9); 
        
    /* 💡 熔岩流光漸層背景 */
    background: linear-gradient(to right, #ff3300, #ffaa00, #ffffff, #ffaa00, #ff3300);
    background-size: 200% auto;
    
    /* ==========================================
       🔒 核心修正：同時定義前綴與標準屬性以確保完美兼容
       ========================================== */
    -webkit-background-clip: text;  /* 針對舊版 WebKit 核心瀏覽器及現行 Chrome/Safari */
    background-clip: text;          /* W3C 官方標準屬性，確保未來瀏覽器完全兼容 */
    
    -webkit-text-fill-color: transparent; /* 必須搭配使用，讓漸層背景能透過文字透出來 */
    
    animation: navBurn 1.5s linear infinite;
}

/* 導覽列底線動畫 */
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -8px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 0;
    height: 4px; 
    border-radius: 2px;
    
    background: linear-gradient(90deg, rgba(255,51,0,0) 0%, #ff3300 25%, #ffaa00 50%, #ff3300 75%, rgba(255,51,0,0) 100%);
    background-size: 200% auto;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

nav ul li a:hover::after {
    width: 140%; 
    animation: navBurn 1.5s linear infinite; 
}

/* 動態核心：文字內部岩漿無限滾動 */
@keyframes navBurn {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center; 
    }
}

/* ==========================================
   🔥 CSS 動態核心：文字內部岩漿無限滾動
   ========================================== */
@keyframes navBurn {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: -200% center; /* 讓火光漸層無限循環滾動 */
    }
}

/* ==================== 額外同步：網頁中間的大標題也染上戰火 ==================== */
.section-title {
    font-size: 42px; 
    color: #ff3300; /* 改為烈火赤紅 */
    font-family: 'Yuji Syuku', 'Noto Serif TC', serif; 
    margin-bottom: 15px;
    letter-spacing: 6px; 
    /* 讓大標題隱隱散發紅蓮業火的光芒 */
    text-shadow: 0 0 20px rgba(255, 51, 0, 0.6), 0 0 40px rgba(255, 170, 0, 0.3);
    animation: textGlow 3s ease-in-out infinite alternate;
}

/* 修改原本的呼吸動畫，讓光暈更有火焰躍動感 */
@keyframes textGlow {
    0% { text-shadow: 0 0 15px rgba(255,51,0,0.5); }
    100% { text-shadow: 0 0 25px rgba(255,170,0,0.8), 0 0 40px rgba(255,51,0,0.6); }
}
/* Hero 區塊與背景呼吸動畫 */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,1) 100%), 
                url('image/ai_char.png') no-repeat center center;
    background-size: cover;
    text-align: center;
    padding: 0 20px;
    animation: bgPulse 10s ease-in-out infinite alternate;
}

/* 主 Logo 登場動畫 */
.main-logo {
    max-width: 550px;
    width: 85%;
    margin-bottom: 40px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.8));
    animation: logoEntrance 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 呼籲按鈕呼吸閃爍與滑過特效 */
.cta-btn {
    padding: 14px 45px;
    font-size: 19px;
    font-weight: bold;
    color: #000000;
    background: linear-gradient(45deg, #ffe600, #ff6600);
    border: 1px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    animation: fadeIn 2s ease, btnPulse 2s infinite alternate;
}
.cta-btn:hover {
    transform: scale(1.08) translateY(-3px);
    box-shadow: 0 0 40px rgba(255, 230, 0, 0.9), 0 0 70px rgba(255, 102, 0, 0.6);
    letter-spacing: 5px;
    background: linear-gradient(45deg, #ff6600, #ffe600);
}
.cta-btn:active {
    transform: scale(0.98);
}

/* 武將專區 */
.char-section {
    padding: 120px 0;
    background-color: #050505;
    text-align: center;
    border-top: 1px solid #111111;
}
.section-title {
    font-size: 32px;
    color: #ffcc00;
    margin-bottom: 15px;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255,204,0,0.2);
    animation: textGlow 3s ease-in-out infinite alternate;
}
.section-subtitle {
    font-size: 15px;
    color: #777777;
    margin-bottom: 60px;
    letter-spacing: 1px;
}
.char-container {
    display: flex;
    width: 90%;
    max-width: 1300px;
    height: 550px;
    margin: 0 auto;
    gap: 12px;
}

/* 武將卡片極致動效 */
.char-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    border: 1px solid #222222;
    border-radius: 4px;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
    cursor: pointer;
}
.char-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(40%) brightness(0.7) contrast(1.1);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.3, 1), filter 0.5s ease;
}

/* 滑過時卡片內部的「亮光掃過」特效線條 */
.char-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 2;
    transition: none;
}

/* 滑過觸發複合動畫 */
.char-card:hover {
    flex: 2.8;
    border-color: #ffcc00;
    box-shadow: 0 0 30px rgba(255,204,0,0.35);
}
.char-card:hover img {
    transform: scale(1.06);
    filter: grayscale(0%) brightness(1.05) contrast(1);
}
.char-card:hover::before {
    left: 150%;
    transition: left 0.7s ease-in-out;
}

/* 武將名字卡片動效 */
.char-name {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: rgba(0, 0, 0, 0.85);
    color: #ffffff;
    padding: 8px 25px;
    border: 1px solid #333333;
    white-space: nowrap;
    letter-spacing: 2px;
    font-size: 15px;
    z-index: 3;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}
.char-card:hover .char-name {
    background: #ffcc00;
    color: #000000;
    border-color: #ffffff;
    font-weight: bold;
    transform: translateX(-50%) translateY(-10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

footer {
    background-color: #000000;
    padding: 45px 20px;
    text-align: center;
    border-top: 1px solid #111111;
    font-size: 13px;
    color: #555555;
    letter-spacing: 1px;
}

/* ==================== ANIMATIONS KEYFRAMES ==================== */
@keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes bgPulse {
    0% { transform: scale(1); background-position: center center; }
    100% { transform: scale(1.03); background-position: center 48%; }
}
@keyframes logoEntrance {
    from { opacity: 0; transform: scale(0.9) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes btnPulse {
    0% { box-shadow: 0 0 20px rgba(255, 102, 0, 0.4); }
    100% { box-shadow: 0 0 30px rgba(255, 230, 0, 0.6); }
}
@keyframes textGlow {
    0% { text-shadow: 0 0 10px rgba(255,204,0,0.2); }
    100% { text-shadow: 0 0 20px rgba(255,204,0,0.6), 0 0 30px rgba(255,102,0,0.3); }
}

@media (max-width: 768px) {
    header { padding: 15px 20px; }
    nav { display: none; }
    .hero { background-position: 65% center; animation: none; }
    .main-logo { max-width: 380px; }
    .char-container { flex-direction: column; height: auto; gap: 15px; }
    .char-card { height: 240px; }
    .char-card:hover { flex: none; }
    .char-card:hover::before { display: none; }
}

/* 尋找並替換 style.css 中的這一段 */
nav ul li a {
    color: #e6dfd3; /* 改為帶有古舊宣紙感的米白色，比純白更有質感 */
    text-decoration: none;
    font-size: 24px; /* 【加大】大氣尺寸 */
    font-weight: 900; /* 【極粗】 */
    /* 優先採用極粗宋體，完美復刻三國志官網的副標題質感 */
    font-family: 'Noto Serif TC', "Microsoft JhengHei", serif; 
    letter-spacing: 3px; /* 寬字距，彰顯排版大氣 */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    /* 模擬三國志官網的重度水墨陰影，讓文字在黑暗中極度清晰、立體 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
}

/* 導覽列底線動畫（改為極具質感的「三國志暗金漸層」） */
nav ul li a::after {
    content: '';
    position: absolute;
    bottom: -8px; /* 往下留白多一點，更有官網餘裕感 */
    left: 50%;
    transform: translateX(-50%); /* 改為從中間向兩邊擴散的優雅動畫 */
    width: 0;
    height: 2px;
    /* 燙金漸層色：古董金 -> 耀眼金 -> 古董金 */
    background: linear-gradient(90deg, rgba(191,161,95,0) 0%, #bfa15f 50%, rgba(191,161,95,0) 100%);
    transition: width 0.4s ease;
}

/* 滑過（Hover）時的黃金戰場特效 */
nav ul li a:hover {
    color: #ffe099; /* 變成耀眼的亮金色 */
    /* 金光外襯特效 */
    text-shadow: 0 0 15px rgba(191, 161, 95, 0.6), 0 0 30px rgba(255, 204, 0, 0.3);
    transform: translateY(-2px); /* 微微向上飄浮，極具靈動感 */
}

nav ul li a:hover::after {
    width: 120%; /* 底線長度稍微超過文字，這是高階網頁設計常用手法 */
}
.section-title {
    font-size: 42px; /* 放大，變得超有霸氣 */
    color: #bfa15f; /* 三國志經典暗金色 */
    /* 套用書法體 Yuji Syuku */
    font-family: 'Yuji Syuku', 'Noto Serif TC', serif; 
    margin-bottom: 15px;
    letter-spacing: 6px; /* 超寬字距，很有歷史大作的史詩感 */
    /* 金色戰火微光陰影 */
    text-shadow: 0 0 15px rgba(191,161,95,0.4);
    animation: textGlow 3s ease-in-out infinite alternate;
}

/* ==================== 下載按鈕區塊樣式（精緻微縮版） ==================== */
.download-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;          /* 稍微縮小按鈕之間的間距，看起來更緊湊 */
    margin-top: 30px;    /* 稍微縮減與上方的距離 */
    animation: fadeIn 2.5s ease; 
}

.dl-btn {
    display: inline-block;
    /* 【改細微縮】寬度從 180px 降到 155px，高度從 54px 降到 46px */
    width: 155px;       
    height: 46px;       
    overflow: hidden;
    border-radius: 6px; /* 配合按鈕變小，圓角也微調成 6px 顯得更精緻 */
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}

.dl-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 確保自己做的 PNG 圖片完美鎖定在外框內 */
    display: block;
}

/* ==================== 視覺平衡特殊處理 ==================== */
/* ⚠️ 注意：因為你換了自訂圖片，如果發現兩張圖大小本來就很一樣， */
/* 下面這段對 last-child (Google) 的特殊放大可以移除（或註解掉）。 */
/* 如果仍有大小不一的狀況，可以留著微調數值（如 1.05 ）。 */
/* .dl-btn:last-child img { */
    /* transform: scale(1.05); */ /* 如果需要微調再解開這行 */
/* } */

/* ==================== 滑過（Hover）時的戰場高光動效 ==================== */
.dl-btn:hover {
    transform: scale(1.05) translateY(-2px); /* 保持輕微的浮動感 */
    filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.5)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.9));
}

.dl-btn:active {
    transform: scale(0.98); 
}

/* ==================== RWD 手機版響應式調整 ==================== */
@media (max-width: 768px) {
    .download-container {
        flex-direction: row; 
        gap: 10px;
        margin-top: 20px;
    }
    /* 手機版同步等比例改小 */
    .dl-btn {
        width: 125px;
        height: 37px;
    }
}

/* ==================== 【關鍵】讓全網頁點擊錨點時擁有流暢捲動效果 ==================== */
html {
    scroll-behavior: smooth;
}

/* ==================== 頁尾聯絡資料風格（火鳳烈焰版） ==================== */
footer {
    background: #0f0303; /* 深邃的戰火暗黑底色 */
    padding: 60px 20px;   /* 留白充足，看起來更大氣 */
    text-align: center;
    border-top: 2px solid #ff3300; /* 頂部有一條烈火紅邊線區隔 */
    box-shadow: 0 -10px 30px rgba(255, 51, 0, 0.15); /* 向上散發微微紅光 */
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}
.footer-title {
    font-size: 32px;
    color: #ffaa00; /* 烈焰金標題 */
    font-family: 'Noto Serif TC', serif;
    font-weight: 900;
    letter-spacing: 4px;
    margin-bottom: 25px;
    
    /* 基礎多層次立體陰影 */
    text-shadow: 
        1px 1px 0px #b35900, 
        2px 2px 0px #803f00, 
        3px 3px 0px #4d2600,
        4px 4px 5px rgba(0, 0, 0, 0.9),
        0px 0px 15px rgba(255, 51, 0, 0.6);
        
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));

    /* 💡 核心修改：綁定動態效果，每 3 秒循環一次呼吸律動 */
    animation: goldGlow 3s infinite ease-in-out;
    transition: transform 0.3s ease;
}

/* 鼠標懸停在標題時，標題會微微放大，立體感更強 */
.footer-title:hover {
    transform: scale(1.03);
}

.footer-info {
    font-size: 18px;
    color: #d4cfc5; /* 優雅的宣紙淡白字 */
    margin: 10px 0;
    font-family: 'Noto Serif TC', serif;
    font-weight: 700; 
    letter-spacing: 1px;
    line-height: 1.6;
    
    /* 精細立體陰影 */
    text-shadow: 
        1px 1px 1px rgba(0, 0, 0, 0.9), 
        -1px -1px 1px rgba(255, 255, 255, 0.1);

    /* 💡 核心修改：平滑過渡效果，讓懸停動畫不生硬 */
    transition: all 0.3s ease;
    display: inline-block; /* 讓 transform 動態能正常作用 */
}

/* 💡 核心修改：當滑鼠移到文字（如電郵）上時，文字會亮起並微微向前浮出 */
.footer-info:hover {
    color: #ffffff;
    transform: translateY(-2px); /* 向上微浮起 */
    text-shadow: 
        1px 3px 5px rgba(0, 0, 0, 0.9), /* 陰影拉遠，模擬浮空感 */
        0px 0px 8px rgba(255, 255, 255, 0.4); /* 加上白色微光 */
}


/* ==========================================
   🔥 CSS 動態核心：烈焰金屬呼吸光效
   ========================================== */
@keyframes goldGlow {
    0%, 100% {
        /* 原本的陰影狀態 */
        text-shadow: 
            1px 1px 0px #b35900, 
            2px 2px 0px #803f00, 
            3px 3px 0px #4d2600,
            4px 4px 5px rgba(0, 0, 0, 0.9),
            0px 0px 15px rgba(255, 51, 0, 0.5);
    }
    50% {
        /* 動態亮起：顏色變亮，後方的紅光/金光範圍擴大，模擬岩漿或烈焰在背後律動 */
        color: #ffcc00;
        text-shadow: 
            1px 1px 0px #cc6600, 
            2px 2px 0px #994d00, 
            3px 3px 0px #663300,
            4px 4px 8px rgba(0, 0, 0, 0.9),
            0px 0px 25px rgba(255, 102, 0, 0.9); /* 發光半徑變大 */
    }
}

/* 讓電郵連結繼承 footer-info 的優雅宣紙白 */
.footer-email-link {
    color: inherit; 
    text-decoration: none; /* 拔除預設底線 */
    transition: all 0.3s ease;
}

/* 當滑鼠移到電郵網址上時，網址會變成耀眼的金色 */
.footer-email-link:hover {
    color: #ffcc00;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.8);
}

.footer-copyright {
    font-size: 14px;
    color: #665f55; /* 暗淡的版權字 */
    margin-top: 40px;
    letter-spacing: 1px;
}

/* ==================== 社交媒體區塊（完美復刻放大與字色版） ==================== */
.social-media-container {
    margin-top: 50px; /* 增加上方留白，讓大圖標有足夠的空間舒展 */
}

/* 「社交媒體」標題大改版 */
.social-title {
    font-size: 30px; 
    font-family: 'Noto Serif TC', "Microsoft JhengHei", serif;
    font-weight: 900;
    letter-spacing: 5px;
    margin-bottom: 25px;
    display: inline-block;
    color: #d2c6b2; /* 回歸你最愛的古風灰卡其宣紙色 */
    
    /* 運用多層陰影做出像石碑刻字、水墨宣紙的微浮雕立體感 */
    text-shadow: 
        1px 1px 0px #000000,
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 0px rgba(210, 198, 178, 0); 

    /* 綁定水墨呼吸與浮空動畫 */
    animation: inkBreath 4s ease-in-out infinite;
    transition: all 0.4s ease;
}

/* 滑鼠懸停時：字距優雅震開，文字亮起 */
.social-title:hover {
    letter-spacing: 8px;
    color: #ffffff;
    text-shadow: 
        1px 1px 0px #000000,
        0 0 12px rgba(210, 198, 178, 0.6);
}

/* 💨 水墨煙霧呼吸動態 */
@keyframes inkBreath {
    0%, 100% {
        transform: translateY(0);
        text-shadow: 1px 1px 0px #000, 2px 2px 4px rgba(0,0,0,0.8), 0 0 4px rgba(210, 198, 178, 0.1);
    }
    50% {
        transform: translateY(-3px); /* 緩慢上浮 */
        /* 在第 2 秒時，字體背後會像水墨暈染一樣，散發出淡淡的古風煙霧光暈 */
        text-shadow: 1px 1px 0px #000, 2px 2px 8px rgba(0,0,0,0.9), 0 0 15px rgba(210, 198, 178, 0.4);
    }
}

/* ==========================================
   🔥 動態 2：浮空上下呼吸律動（模擬武將氣場浮動）
   ========================================== */
@keyframes floatText {
    0%, 100% {
        transform: translateY(0) scale(1);
        text-shadow: 0 0 5px rgba(255, 170, 0, 0.2);
    }
    50% {
        transform: translateY(-4px) scale(1.02); /* 緩慢向上浮起並微放大 */
        text-shadow: 0 0 15px rgba(255, 51, 0, 0.6); /* 呼吸到頂點時紅光變強 */
    }
}

.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px; /* 稍微拉開一點間距，配搭放大了的圓圈 */
}

/* 圓形社群按鈕大幅放大 */
.social-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 【放大】圓圈直徑從 46px 大幅升級到 64px！ */
    width: 64px;         
    height: 64px;        
    background-color: #ffffff; /* 截圖中的純白圓底 */
    color: #000000;      /* 內部的純黑圖標 */
    border-radius: 50%;  
    /* 【放大】內部的 Icon 圖標同步放大到 32px */
    font-size: 32px;     
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); /* 增強陰影深度，讓大圖標更具實體浮雕感 */
}

/* ==================== 滑過（Hover）火鳳烈焰動效同步加大 ==================== */
.social-btn:hover {
    transform: scale(1.12) translateY(-5px); /* 保持優雅的彈跳感 */
    background-color: #ff3300; /* 圓底化為熾熱赤紅 */
    color: #ffffff;            /* 圖標變回純白 */
    /* 配合大圖標，火光外襯效果也同步加強 */
    box-shadow: 0 0 25px #ff3300, 0 8px 20px rgba(0, 0, 0, 0.7); 
}

.social-btn:active {
    transform: scale(0.95);
}

/* ==================== RWD 手機版響應式優化 ==================== */
@media (max-width: 768px) {
    .social-title {
        font-size: 24px; /* 手機版微調標題 */
    }
    .social-btn {
        /* 手機版適度縮小，避免單行塞不下五個 */
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .social-icons {
        gap: 14px;
    }
}

/* 5.3 Project Details */
.project-title-info {
  font-family: "Montserrat", sans-serif;
  font-weight: bold;
  font-size: 2vmin;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-top: 2.2em;
  margin-left: -1.8em;
}

.project-title-info .project-info-item {
  display: inline-block;
  margin-left: 1.8em;
}

.project-details-item {
  position: relative;
}

.project-details-img {
  position: relative;
  padding: 0;
}

.project-details-info {
  background-color: rgba(80, 80, 80, 0.8);
  padding: 4.8em 3.1em 4.8em;
  color: #fff;
}

.project-details-title {
  position: relative;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 1.9em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.7em;
}

.project-horse img {
  grid: flex;
  left: 50px;
  right: 25px;
  width: 100%;
  font-family: "Oswald", Verdana, Geneva, Tahoma, sans-serif;
}

.project-details-title:before {
  content: "";
  position: absolute;
  bottom: -0.35em;
  width: 10em;
  border-top: 1px solid #ededed;
  left: -4.4em;
  width: 5.5em;
}

.project-details-descr {
  font-size: 1.1em;
  line-height: 1.62;
}

.project-details-descr p:last-child {
  margin-bottom: 0;
}

.project-details-item:nth-child(even) .project-details-info {
  right: 0;
  left: auto;
  top: 13%;
  background-color: #212121;
}

  /* Projects Details */
  .project-details {
    margin-top: 7.1em;
  }

  /*affects the margin for the ihorse betting page*/
  .project-details-item {
    margin-bottom: 6em;
  }

  .project-details-info {
    position: absolute;
    z-index: 1;
    left: 0;
    top: -40%;
    /*bottom: 13%;*/
    width: 55%;
  }

  .project-details-item:nth-child(odd) .project-details-img {
    padding-left: 15px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img {
    padding-right: 15px;
    padding-left: 15px;
  }

   /* Project Details */
  .project-details-item:nth-child(odd) .project-details-img {
    padding-left: 5px;
    padding-right: 15px;
  }

  .project-details-item:nth-child(even) .project-details-img {
    padding-right: 5px;
    padding-left: 125px;
  }

.layout {
  position: relative;
  overflow: hidden;
}

/* 1. 按鈕外層容器：讓兩張圖並排居中 */
/* 1. 外層容器：並排居中 */
.download-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; 
    margin: 30px 0;
}

/* 2. 按鈕本體：完全固定，移除所有 hover 放大與發光 */
.download-btn {
    display: flex;
    align-items: center;
    width: 210px;
    height: 64px;
    padding: 0 18px;
    background-color: #000000; /* 純黑底色，突顯官方原色 */
    border: 1px solid #333333;  /* 低調的深灰邊框 */
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/* 3. 按鈕右側文字排版 */
.download-btn .btn-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-align: left;
}

/* 小字：Download on the / GET IT ON */
.download-btn .btn-text span {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    line-height: 1.2;
}

/* 大字：App Store / Google Play (保持純白) */
.download-btn .btn-text strong {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 2px;
}

/* ==========================================
   🍏 4. App Store 專屬樣式（還原蘋果藍色原色）
   ========================================== */
.app-store .btn-icon {
    font-size: 32px;
    color: #007aff; /* 💡 蘋果官方標準藍色 */
    margin-right: 14px;
}

/* ==========================================
   🤖 5. Google Play 專屬樣式（還原 Google Play 經典綠/彩色）
   ========================================== */
.google-play .btn-icon {
    font-size: 28px;
    color: #34a853; /* 💡 Google Play 官方標準綠色 */
    margin-right: 14px;
}