/* =========================================
   Guide CSS | 攻略頁專用樣式
   Developed by Weber Chang
========================================= */

/* =========================================
   01. Guide Section | 攻略內容區塊
========================================= */

.guide-section{
    margin-bottom:48px;
}

.guide-title{
    color:#ffb347;
    font-size:32px;
    font-weight:900;
    margin-bottom:24px;
}

.guide-subtitle-title{
    color:#ffb347;
    font-size:22px;
    font-weight:900;
    margin:4px 0 18px;
}

/* =========================================
   02. Guide Card | 表格外框卡片
========================================= */

.guide-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.10);
    border-radius:20px;
    padding:14px;
    overflow-x:auto;
}

/* =========================================
   03. Guide Table | 攻略表格
========================================= */

.guide-table{
    width:100%;
    min-width:720px;
    border-collapse:collapse;
    color:#f6f1e8;
}

.guide-table th{
    background:#5a2a88;
    color:#fff;
    padding:12px;
    border:1px solid rgba(255,255,255,.18);
    text-align:center;
}

.guide-table td{
    padding:12px;
    border:1px solid rgba(255,255,255,.12);
    text-align:center;
    background:#161616;
}

.guide-table tbody tr:nth-child(even) td{
    background:#1f1f1f;
}

.guide-table td:last-child{
    color:#ffb347;
    font-weight:900;
}

/* =========================================
   04. Highlight / Total | 高亮與總計列
========================================= */

.highlight{
    color:#ffb347;
    font-weight:900;
}

.total-row td{
    background:#050505 !important;
    color:#fff;
    font-weight:900;
}

.total-row td:last-child{
    color:#ffb347;
}

/* =========================================
   05. Guide Progress | 攻略完成進度
========================================= */

.guide-progress-box{
    margin:0 0 24px;
    max-width:480px;
}

.guide-progress-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    color:#cfc7bb;
    font-size:14px;
    margin-bottom:8px;
}

.guide-progress-head strong{
    color:#ffb347;
}

.guide-progress{
    height:10px;
    background:#222;
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
}

.guide-progress-bar{
    width:55.55%;
    height:100%;
    background:linear-gradient(90deg,#ff9900,#ffc15a);
}

/* =========================================
   06. Guide Menu | 攻略首頁卡片
========================================= */

.guide-menu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:18px;
    margin-top:24px;
}

.guide-menu-card{
    display:block;
    position:relative;
    min-height:124px;
    text-decoration:none;
    color:#f6f1e8;
    background:linear-gradient(180deg,#202020,#151515);
    border:1px solid rgba(255,255,255,.12);
    border-radius:22px;
    padding:22px;
    box-shadow:0 14px 32px rgba(0,0,0,.28);
    transition:.22s;
}

a.guide-menu-card:hover{
    transform:translateY(-4px);
    border-color:rgba(255,160,40,.45);
    box-shadow:0 18px 42px rgba(255,130,0,.16);
}

.guide-menu-card h2{
    color:#ffb347;
    font-size:22px;
    margin-top:26px;
    margin-bottom:8px;
}

.guide-menu-card p{
    color:#bbb;
    font-size:15px;
}

/* =========================================
   07. Guide Status | 攻略製作狀態
========================================= */

.guide-status{
    position:absolute;
    top:14px;
    right:14px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.guide-status.done{
    background:#2e7d32;
    color:#fff;
}

.guide-status.progress{
    background:#ff9800;
    color:#111;
}

.guide-status.planned{
    background:#555;
    color:#eee;
}

.completed-card{
    border-color:rgba(46,125,50,.45);
}

.progress-card{
    opacity:.82;
    cursor:not-allowed;
}

.planned-card{
    opacity:.65;
    cursor:not-allowed;
}

/* =========================================
   08. Guide Meta | 版本與資料來源
========================================= */

.guide-meta{
    color:#999;
    font-size:14px;
    margin-top:8px;
}

/* =========================================
   09. Hero Star Table | 英雄升星專用
========================================= */

.guide-table-scroll{
    overflow-x:auto;
    position:relative;
}

.hero-star-table{
    min-width:900px;
}

.hero-star-table td{
    font-size:20px;
    font-weight:800;
}

.hero-star-table th:first-child,
.hero-star-table td:first-child{
    position:sticky;
    left:0;
    z-index:2;
    background:#161616;
}

.hero-star-table th:first-child{
    z-index:3;
    background:#5a2a88;
}

.hero-star-table td:first-child{
    box-shadow:4px 0 10px rgba(0,0,0,.35);
}

.star-head{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.star-head img{
    width:54px;
    height:54px;
    object-fit:contain;
}

.star-icon{
    width:52px;
    height:52px;
    object-fit:contain;
}

/* =========================================
   10. VIP Level Table | VIP 等級專用
========================================= */

.vip-level-table{
    max-width:720px;
    min-width:0;
    margin:0 auto;
}

/* =========================================
   11. Equipment Upgrade Official Board | 裝備升品官方攻略版
========================================= */

.equipment-upgrade-scroll{
    overflow-x:auto;
}

.equipment-upgrade-board{
    min-width:860px;
    max-width:980px;
    margin:0 auto;
    padding:14px;
    border-radius:18px;
    background:#203a66;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 18px 42px rgba(0,0,0,.28);
}

.equipment-upgrade-head,
.equipment-upgrade-row{
    display:grid;
    grid-template-columns:220px 48px 1fr 64px 220px;
    align-items:center;
    gap:10px;
}

.equipment-upgrade-head{
    color:#111;
    background:#e8e8e8;
    border-radius:10px 10px 0 0;
    padding:10px 12px;
    font-size:22px;
    font-weight:900;
    text-align:center;
}

.equipment-upgrade-head span{
    font-size:18px;
    font-weight:700;
}

.equipment-upgrade-row{
    padding:8px 12px;
    border-bottom:1px solid rgba(255,255,255,.12);
}

.equipment-upgrade-row:last-child{
    border-bottom:none;
}

.upgrade-side{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space:nowrap;
}

.quality-badge,
.level-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
    line-height:1;
}

.quality-badge{
    min-width:96px;
    padding:7px 12px;
    border-radius:10px;
    font-size:24px;
}

.level-badge{
    min-width:64px;
    padding:7px 12px;
    border-radius:999px;
    font-size:24px;
}

.legendary,
.legendary-t1,
.legendary-t2{
    background:#f47f28;
}

.mythic,
.mythic-t1,
.mythic-t2,
.mythic-t3{
    background:#d60000;
}

.lv100{
    background:#777;
}

.lv120{
    background:#08cfae;
}

.lv140{
    background:#1498ff;
}

.lv160{
    background:#e68aff;
}

.lv180{
    background:#f08a2b;
}

.lv200{
    background:#d70000;
}

.upgrade-plus,
.upgrade-row-arrow{
    color:#c9d4e8;
    font-weight:900;
    text-align:center;
    line-height:1;
}

.upgrade-plus{
    font-size:38px;
}

.upgrade-row-arrow{
    font-size:34px;
}

.upgrade-materials-inline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
    min-height:60px;
}

.material-pair{
    display:flex;
    align-items:center;
    gap:8px;

    width:88px;
    flex-shrink:0;
}

.material-pair img{
    width:48px;
    height:48px;
    object-fit:contain;
    border-radius:8px;
}

.material-count{
    min-width:72px;
    color:#fff;
    font-size:26px;
    font-weight:900;
    text-align:right;
}

.material-empty{
    width:88px;
    height:48px;
    flex-shrink:0;
}

/* =========================================
   11A. Equipment Upgrade Mobile Cards | 裝備升品手機卡片版
========================================= */

.equipment-mobile-view{
    display:none;
}

.equipment-mobile-card{
    background:linear-gradient(180deg,#203a66,#182f56);
    border:1px solid rgba(255,255,255,.14);
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
    box-shadow:0 14px 32px rgba(0,0,0,.28);
}

.equipment-mobile-from,
.equipment-mobile-to{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
}

.equipment-mobile-materials{
    display:flex;
    justify-content:center;
    gap:22px;
    margin:18px 0;
}

.equipment-mobile-arrow{
    text-align:center;
    color:#ffb347;
    font-size:28px;
    font-weight:900;
    margin-bottom:14px;
}

/* =========================================
   12. Equipment Reformation | 裝備改造專用
========================================= */

.reformation-table{
    max-width:860px;
    min-width:0;
    margin:0 auto;
}

.material-cell{
    text-align:center;
    white-space:nowrap;
}

.material-cell span{
    color:#ffb347;
    font-weight:900;
    margin-right:8px;
}

.material-cell img{
    width:40px;
    height:40px;
    object-fit:contain;
    border-radius:6px;
    vertical-align:middle;
}

.reformation-table .empty-material{
    color:#888;
    font-size:18px;
    font-weight:900;
}

/* =========================================
   13. Exclusive Equipment | 英雄專屬裝備專用
========================================= */

.exclusive-layout{
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:22px;
}

.exclusive-card{
    overflow-x:auto;
}

.exclusive-equipment-table,
.exclusive-pack-table{
    min-width:0;
}

.exclusive-equipment-table th,
.exclusive-equipment-table td,
.exclusive-pack-table th,
.exclusive-pack-table td{
    white-space:nowrap;
}

/* =========================================
   14. Mobile Guide | 手機攻略頁
   適用：螢幕寬度 768px 以下
========================================= */

@media(max-width:768px){

    /* 14-1. Guide Title | 攻略頁標題縮小 */
    .guide-title{
        font-size:26px;
    }

    /* 14-2. Guide Card | 表格外框卡片內距縮小 */
    .guide-card{
        padding:10px;
    }

    /* 14-3. Guide Progress | 攻略首頁進度條滿版顯示 */
    .guide-progress-box{
        max-width:100%;
    }

    .guide-progress-head{
        font-size:13px;
    }

    /* 14-4. Guide Menu | 攻略首頁卡片改為單欄 */
    .guide-menu-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .guide-menu-card{
        min-height:112px;
        padding:18px;
    }

    .guide-menu-card h2{
        font-size:20px;
        margin-top:24px;
    }

    /* 14-5. Hero Star Table | 英雄升星表格手機版橫向滑動 */
    .hero-star-table{
        min-width:760px;
    }

    .hero-star-table th,
    .hero-star-table td{
        padding:12px 14px;
        font-size:16px;
    }

    /* 14-6. Hero Star Sticky Column | 英雄升星左側星級欄寬度 */
    .hero-star-table th:first-child,
    .hero-star-table td:first-child{
        min-width:88px;
    }

    /* 14-7. Hero Star Icons | 英雄升星表頭與星級圖示大小 */
    .star-head img{
        width:38px;
        height:38px;
    }

    .star-icon{
        width:44px;
        height:44px;
    }

    /* 14-8. VIP Level Table | VIP 等級表格手機版不橫向滑動 */
    .vip-level-table{
        width:100%;
        min-width:0;
    }

    .vip-level-table th,
    .vip-level-table td{
        padding:12px 10px;
        font-size:15px;
        white-space:nowrap;
    }

    /* 14-9. VIP Level Column Width | VIP 表格欄寬比例 */
    .vip-level-table th:first-child,
    .vip-level-table td:first-child{
        width:55%;
    }

    .vip-level-table th:last-child,
    .vip-level-table td:last-child{
        width:45%;
    }

    /* 14-10. Equipment Upgrade | 裝備升品雙版本切換 */
    .equipment-desktop-view{
        display:none;
    }

    .equipment-mobile-view{
        display:block;
    }

    .equipment-mobile-card{
        background:linear-gradient(180deg,#203a66,#182f56);
        border:1px solid rgba(255,255,255,.14);
        border-radius:18px;
        padding:18px;
        margin-bottom:16px;
        box-shadow:0 14px 32px rgba(0,0,0,.28);
    }

    .equipment-mobile-from,
    .equipment-mobile-to{
        display:flex;
        justify-content:center;
        align-items:center;
        gap:10px;
    }

    .equipment-mobile-materials{
        display:flex;
        justify-content:center;
        gap:22px;
        margin:18px 0;
    }

    .equipment-mobile-arrow{
        text-align:center;
        color:#ffb347;
        font-size:28px;
        font-weight:900;
        margin-bottom:14px;
    }

    .equipment-mobile-card .quality-badge{
        min-width:86px;
        font-size:20px;
        padding:7px 10px;
    }

    .equipment-mobile-card .level-badge{
        min-width:58px;
        font-size:20px;
        padding:7px 10px;
    }

    .equipment-mobile-card .material-pair{
        width:auto;
        gap:8px;
    }

    .equipment-mobile-card .material-pair img{
        width:42px;
        height:42px;
    }

    .equipment-mobile-card .material-count{
        min-width:auto;
        font-size:22px;
    }

    /* 14-11. Equipment Reformation | 裝備改造手機版 */
    .reformation-table{
        width:100%;
        min-width:0;
    }

    .reformation-table th,
    .reformation-table td{
        padding:12px 10px;
        font-size:14px;
        white-space:nowrap;
    }

    .material-cell span{
        min-width:54px;
        font-size:15px;
    }

    .material-cell img{
        width:34px;
        height:34px;
    }

    /* 14-12. Exclusive Equipment | 專屬裝備手機版 */
    .exclusive-layout{
        grid-template-columns:1fr;
    }

    .exclusive-equipment-table,
    .exclusive-pack-table{
        width:100%;
        min-width:0;
    }

    .exclusive-equipment-table th,
    .exclusive-equipment-table td,
    .exclusive-pack-table th,
    .exclusive-pack-table td{
        padding:12px 10px;
        font-size:14px;
    }
}