/* Safari RWD 修復補丁 - 針對 phone_web_menu_btn 定位問題 */

@media screen and (max-width: 1000px) {
    /* 修復 phone_web_menu_btn 在 Safari 中的定位 */
    .phone_web_menu_btn {
        /* 使用更溫和的定位方式 */
        position: relative !important;
        left: -20px !important; /* 恢復原本的 -20px 偏移 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* 強制靠左對齊 */
        order: -1 !important;
        align-self: flex-start !important;
        /* 固定寬度 */
        width: 75px !important;
        min-width: 75px !important;
        max-width: 75px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        /* Safari 兼容性 */
        -webkit-flex-shrink: 0 !important;
        -webkit-flex-grow: 0 !important;
        -webkit-order: -1 !important;
        z-index: 99 !important;
        /* 確保不影響垂直位置 */
        top: auto !important;
    }
    
    /* 只針對包含 phone_web_menu_btn 的直接父容器 */
    .web_container > .flex:first-child {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        /* Safari 兼容性 */
        -webkit-flex-direction: row !important;
        -webkit-justify-content: flex-start !important;
        -webkit-align-items: flex-start !important;
        -webkit-flex-wrap: nowrap !important;
        /* 移除可能影響整體佈局的屬性 */
        width: auto !important;
        box-sizing: border-box !important;
    }
    
    /* 更精確地針對左側容器 */
    .web_container > .flex:first-child > .flex:first-child {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        /* Safari 兼容性 */
        -webkit-flex-direction: row !important;
        -webkit-justify-content: flex-start !important;
        -webkit-align-items: flex-start !important;
        -webkit-flex-wrap: nowrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 修復 left_side_bar，使用 padding 而非 margin 避免 overflow */
    .left_side_bar {
        /* 改用 padding 而非 margin，避免增加總寬度 */
        margin-left: 0 !important;
        /* padding-left: 90px !important; */
        margin-right: 0 !important;
        margin-top: 0 !important;
        /* 使用更保守的寬度計算 */
        width: auto !important;
        max-width: 100% !important; /* 改為 100% */
        min-width: 200px !important;
        /* 恢復 flex 設定 */
        flex: 1 1 auto !important;
        flex-shrink: 1 !important;
        /* Safari 兼容性 */
        -webkit-flex: 1 1 auto !important;
        -webkit-flex-shrink: 1 !important;
        /* 確保不會超出邊界 */
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 確保 left_side_bar 內的元素不受 padding 影響 */
    .left_side_bar .countDown_big_text,
    .left_side_bar .deadline_box,
    .left_side_bar .small_gray_title,
    .left_side_bar .big_sign_up_btn,
    .left_side_bar .left_bar_item {
        margin-left: 0 !important;
        left: auto !important;
        position: static !important;
    }
    
    /* 重置 left_side_bar 內的第一層子元素的 margin */
    .left_side_bar > * {
        margin-left: 0 !important;
    }
    
    /* 移除過度的容器修改，恢復原本設定 */
    .web_container {
        display: block !important;
        padding: 0 15px !important; /* 恢復原本的 padding */
        /* 移除可能影響整體佈局的屬性 */
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 移除對 web_main_content_div 的過度修改 */
    
    /* 確保 phone_web_menu 定位正確 */
    .phone_web_menu {
        position: fixed !important;
        left: 0 !important;
        margin-left: 0 !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    
    /* 恢復 simple_game_info，也改用 padding */
    .simple_game_info {
        margin-left: 0 !important; /* 移除 margin */
        padding-left: 90px !important; /* 改用 padding */
        box-sizing: border-box !important; /* 確保 padding 計算在寬度內 */
    }
}

/* 針對更小螢幕的修復 */
@media screen and (max-width: 650px) {
    .phone_web_menu_btn {
        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        /* 保持相對定位，不使用絕對定位 */
        position: relative !important;
        left: -15px !important;
        top: auto !important; /* 確保不影響垂直位置 */
        /* 保持 flex 屬性 */
        order: -1 !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
        -webkit-order: -1 !important;
        -webkit-flex-shrink: 0 !important;
    }
    
    .left_side_bar {
        /* margin-left: 60px !important; */
        max-width: 100% !important; /* 改為 100% 避免 calc 計算問題 */
        min-width: 180px !important;
    }
    
    /* 確保 left_side_bar 內的元素不受影響 */
    .left_side_bar .countDown_big_text,
    .left_side_bar .deadline_box {
        margin-left: 0 !important;
        left: auto !important;
        position: static !important;
    }
}

/* Safari 特定修復 */
@supports (-webkit-appearance: none) {
    @media screen and (max-width: 1000px) {
        /* 為 phone_web_menu_btn 的父容器建立定位上下文 */
        .web_container > .flex:first-child > .flex:first-child {
            position: relative !important;
        }
        
        .phone_web_menu_btn {
            /* 在 Safari 中強制使用絕對定位 */
            position: absolute !important;
            left: 0 !important;
            /* 不設定 top，讓它保持在自然位置 */
            top: auto !important;
            /* 使用 transform 來微調位置 */
            transform: translateY(0) !important;
            -webkit-transform: translateY(0) !important;
            z-index: 99 !important;
            /* 移除 flex 相關屬性 */
            order: unset !important;
            align-self: unset !important;
            flex: none !important;
            -webkit-order: unset !important;
            -webkit-flex: none !important;
        }
        
        .left_side_bar {
            /* 因為按鈕使用絕對定位，需要預留空間 */
            margin-left: 75px !important;
            /* Safari flexbox 強制修復 */
            -webkit-box-sizing: border-box !important;
            box-sizing: border-box !important;
            overflow: hidden !important;
            /* 使用更安全的寬度設定 */
            max-width: calc(100% - 75px) !important;
        }
        
        .simple_game_info {
            margin-left: 75px !important;
            padding-left: 0 !important;
        }
        
        /* 確保 left_side_bar 內的子元素不受影響 */
        .left_side_bar * {
            margin-left: unset !important;
            left: unset !important;
            position: static !important;
        }
        
        /* 修復 Safari 對 writing-mode 的處理 */
        .phone_web_menu_btn span {
            -webkit-writing-mode: vertical-lr !important;
            writing-mode: vertical-lr !important;
        }
        
        /* 更精確地針對左側佈局容器 */
        .web_container > .flex:first-child {
            -webkit-box-orient: horizontal !important;
            -webkit-box-direction: normal !important;
            -webkit-flex-direction: row !important;
            flex-direction: row !important;
            -webkit-justify-content: flex-start !important;
            justify-content: flex-start !important;
        }
        
        .web_container > .flex:first-child > .flex:first-child {
            -webkit-box-orient: horizontal !important;
            -webkit-box-direction: normal !important;
            -webkit-flex-direction: row !important;
            flex-direction: row !important;
            -webkit-justify-content: flex-start !important;
            justify-content: flex-start !important;
        }
    }
    
    /* 確保小螢幕下 Safari 也使用絕對定位 */
    @media screen and (max-width: 650px) {
        .phone_web_menu_btn {
            position: absolute !important;
            left: 0 !important;
            top: auto !important;
            width: 60px !important;
        }
        
        .left_side_bar {
            margin-left: 60px !important;
            max-width: calc(100% - 60px) !important;
        }
        
        .simple_game_info {
            margin-left: 60px !important;
            padding-left: 0 !important;
        }
    }
    
    @media screen and (max-width: 410px) {
        .phone_web_menu_btn {
            position: absolute !important;
            left: 0 !important;
            top: auto !important;
            width: 50px !important;
        }
        
        .left_side_bar {
            margin-left: 50px !important;
            max-width: calc(100% - 50px) !important;
        }
        
        .simple_game_info {
            margin-left: 20px !important;
            padding-left: 0 !important;
        }
    }
}

/* 修復 Safari 對 flex 的特殊處理 */
@media screen and (max-width: 1000px) {
    .web_container.flex {
        display: block !important;
    }
    
    /* 只針對包含 phone_web_menu_btn 的特定容器 */
    .web_container > .flex:first-child {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-justify-content: flex-start !important;
        justify-content: flex-start !important;
    }
    
    .web_container > .flex:first-child > .flex:first-child {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -webkit-flex-direction: row !important;
        flex-direction: row !important;
        -webkit-flex-wrap: nowrap !important;
        flex-wrap: nowrap !important;
        -webkit-justify-content: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* 移除過度的容器修改 */
    .web_container {
        overflow-x: hidden !important;
    }
}


/* 極小螢幕的額外修復 */
@media screen and (max-width: 410px) {
    .phone_web_menu_btn {
        width: 50px !important;
        min-width: 50px !important;
        /* 在一般瀏覽器中保持相對定位 */
        position: relative !important;
        left: -10px !important;
        top: auto !important; /* 確保不影響垂直位置 */
        font-size: 16px !important;
        /* 保持 flex 屬性 */
        order: -1 !important;
        align-self: flex-start !important;
        flex-shrink: 0 !important;
        -webkit-order: -1 !important;
        -webkit-flex-shrink: 0 !important;
    }
    
    .left_side_bar {
        margin-left: 0 !important; /* 移除 margin */
        max-width: 100% !important; /* 改為 100% */
        min-width: 160px !important;
    }
    
    /* 確保 left_side_bar 內的元素不受影響 */
    .left_side_bar .countDown_big_text,
    .left_side_bar .deadline_box {
        margin-left: 0 !important;
        left: auto !important;
        position: static !important;
    }

    .phone_web_menu_btn img {
        height: 20px;
        margin-left: 0 !important;
    }

    .simple_game_info{
        padding-left: 10px !important; /* 移除 padding */
    }
}

/* 針對 iPhone 和小螢幕的 Safari 特別修復 */
@supports (-webkit-appearance: none) {
    @media screen and (max-width: 410px) {
        /* 為 phone_web_menu_btn 的父容器建立定位上下文 */
        .web_container > .flex:first-child > .flex:first-child {
            position: relative !important;
        }
        
        .phone_web_menu_btn {
            /* 在 Safari 小螢幕中強制使用絕對定位 */
            position: absolute !important;
            left: 0 !important;
            top: auto !important;
            width: 50px !important;
            min-width: 50px !important;
            /* 移除 flex 相關屬性 */
            order: unset !important;
            align-self: unset !important;
            flex: none !important;
            -webkit-order: unset !important;
            -webkit-flex: none !important;
            /* 確保 z-index */
            z-index: 99 !important;
        }
        
        .left_side_bar {
            /* 因為按鈕使用絕對定位，需要預留空間 */
            margin-left: 50px !important;
            max-width: calc(100% - 50px) !important;
            min-width: 160px !important;
        }
        
        .simple_game_info {
            margin-left: 20px !important;
            padding-left: 0 !important;
        }
    }
}

/* 針對非常小的螢幕（320px 等）的額外修復 */
@media screen and (max-width: 320px) {
    .phone_web_menu_btn {
        width: 45px !important;
        min-width: 45px !important;
        font-size: 14px !important;
    }
    
    .simple_game_info {
        padding-left: 5px !important;
    }
}

@supports (-webkit-appearance: none) {
    @media screen and (max-width: 320px) {
        .phone_web_menu_btn {
            position: absolute !important;
            left: 0 !important;
            top: auto !important;
            width: 45px !important;
        }
        
        .left_side_bar {
            margin-left: 45px !important;
            max-width: calc(100% - 45px) !important;
        }
        
        .simple_game_info {
            margin-left: 10px !important;
            padding-left: 0 !important;
        }
    }
}