/* ========================================
   Responsive Foundation
   ======================================== */


/* 平板與較小螢幕 */
@media (max-width: 900px) {

    :root {
        --site-page-padding: 20px;
    }

    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .site-container {
        width: 100%;
        max-width: 100%;
    }

    .theme-switcher {
        margin-left: 20px;
        margin-right: 20px;
    }

}


/* 手機 */
@media (max-width: 600px) {

    :root {
        --site-page-padding: 16px;
    }

    body {
        padding: 16px !important;
    }

    .site-container {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .theme-switcher {
        width: auto;
        max-width: none;
        margin: 0 0 16px 0;
    }

    .theme-switcher select {
        width: 100%;
        max-width: none;
        min-height: 42px;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        font-size: 16px;
    }

    input,
    select,
    textarea {
        width: 100%;
    }

    button,
    input[type="submit"],
    input[type="button"] {
        min-height: 42px;
    }

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 720px;
    }




    /* 會員詳細資料：基本資料 / 安全狀態 */
    .info-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .info-table th {
        width: 38% !important;
        white-space: normal;
    }

    .info-table td {
        width: 62%;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 後台導覽列 */
    .admin-nav-back {
        margin-bottom: 14px;
    }

    .admin-nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        margin-bottom: 20px;
    }

    .admin-nav-links a {
        display: inline-block;
        white-space: nowrap;
    }




    h1 {
        font-size: 28px;
        line-height: 1.25;
    }

    h2 {
        font-size: 22px;
        line-height: 1.3;
    }

}


/* 小型手機 */
@media (max-width: 380px) {

    :root {
        --site-page-padding: 12px;
    }

    body {
        padding: 12px !important;
    }

    h1 {
        font-size: 25px;
    }

}

/* ========================================
   Frontend Responsive Pages
   Batch: 2026-08-18
   ======================================== */

@media (max-width: 900px) {

    .frontend-form-page {
        width: 100%;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }

    .register-container {
        width: 100% !important;
        max-width: 520px !important;
    }

    .my-courses-container {
        width: 100% !important;
        max-width: 100% !important;
    }
}


@media (max-width: 600px) {

    /* 登入 / 密碼相關頁面 */
    .frontend-form-page {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .frontend-form-page form {
        width: 100%;
    }

    .frontend-form-page input,
    .frontend-form-page select,
    .frontend-form-page textarea {
        width: 100%;
    }

    .frontend-form-page button,
    .frontend-form-page input[type="submit"] {
        width: 100%;
        min-height: 44px;
    }

    .frontend-form-page p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }


    /* 會員註冊 */
    .register-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px !important;
    }

    .register-container input,
    .register-container select,
    .register-container textarea,
    .register-container button {
        width: 100%;
        max-width: 100%;
    }


    /* 我的課程 */
    .my-courses-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 18px !important;
    }

    .my-courses-container .welcome {
        line-height: 1.9;
        overflow-wrap: anywhere;
    }

    .my-courses-container .course-card {
        padding: 16px;
    }

    .my-courses-container .course-title {
        font-size: 20px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .my-courses-container .course-description {
        overflow-wrap: anywhere;
    }
}


@media (max-width: 380px) {

    .register-container,
    .my-courses-container {
        padding: 14px !important;
    }

    .my-courses-container .course-card {
        padding: 14px;
    }
}


/* 我的課程：手機會員操作列避免中文字被拆開 */
@media (max-width: 600px) {

    .my-courses-container .welcome a {
        display: inline-block;
        white-space: nowrap;
    }
}

/* ========================================
   Course View Responsive
   非播放器區域
   ======================================== */

@media (max-width: 900px) {
    .course-view-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .course-view-container .description,
    .course-view-container .video-item {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    .course-view-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .course-view-container h1 {
        font-size: 26px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .course-view-container .description {
        margin-bottom: 20px;
        line-height: 1.65;
    }

    .course-view-container .video-list {
        width: 100%;
        max-width: 100%;
    }

    .course-view-container .video-list-title {
        padding: 15px 16px;
        font-size: 18px;
        line-height: 1.4;
    }

    .course-view-container .video-item {
        padding: 14px 16px;
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .course-view-container .video-item a {
        overflow-wrap: anywhere;
    }

    .course-view-container .video-number {
        white-space: nowrap;
    }

    .course-view-container .no-video {
        padding: 22px 16px;
    }
}

@media (max-width: 380px) {
    .course-view-container h1 {
        font-size: 24px;
    }

    .course-view-container .video-list-title {
        padding: 14px;
    }

    .course-view-container .video-item {
        padding: 13px 14px;
    }
}


/* ========================================
   iPhone Safari Pseudo Fullscreen Player
   保留 iframe + 動態浮水印 + 自訂退出按鈕
   ======================================== */

body.ios-player-fullscreen {
    overflow: hidden !important;
    overscroll-behavior: none;
}

.video-frame.ios-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    padding-top: 0 !important;
    margin: 0 !important;

    background: #000 !important;
    border-radius: 0 !important;

    z-index: 999999 !important;
}

.video-frame.ios-pseudo-fullscreen #course-player,
.video-frame.ios-pseudo-fullscreen iframe {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}

.video-frame.ios-pseudo-fullscreen .course-watermark {
    z-index: 1000001 !important;
}

.video-frame.ios-pseudo-fullscreen .custom-fullscreen-btn {
    position: absolute !important;

    right: max(14px, env(safe-area-inset-right)) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;

    width: 46px !important;
    height: 46px !important;

    z-index: 1000002 !important;
}

/* iPhone 橫向時填滿實際可視區域 */
@media (orientation: landscape) {

    .video-frame.ios-pseudo-fullscreen {
        width: 100vw !important;
        height: 100dvh !important;
    }
}

/* ========================================
   Fullscreen Button Hit Area
   擴大右下角可點擊區，優先攔截 YouTube 右下角按鈕
   ======================================== */

.custom-fullscreen-btn {
    width: 72px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 24px !important;

    /* 視覺仍維持低調 */
    background: rgba(0, 0, 0, 0.38) !important;

    z-index: 1000002 !important;
}

/* iOS 模擬全螢幕時同樣維持較大的點擊範圍 */
.video-frame.ios-pseudo-fullscreen .custom-fullscreen-btn {
    width: 72px !important;
    height: 64px !important;
}

/* ========================================
   Fullscreen Button Hit Area V2
   加倍右下角攔截寬度
   ======================================== */

.custom-fullscreen-btn {
    width: 144px !important;
    height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    padding-right: 18px !important;

    font-size: 24px !important;

    /*
       點擊區放大，但不要顯示成一大片黑色按鈕
    */
    background: transparent !important;

    z-index: 1000002 !important;
}

/* 用偽元素只畫出右下角的小按鈕外觀 */
.custom-fullscreen-btn::before {
    content: "";
    position: absolute;

    right: 6px;
    bottom: 6px;

    width: 46px;
    height: 46px;

    background: rgba(0, 0, 0, 0.38);
    border-radius: 6px;

    z-index: -1;
}

/* iPhone 模擬全螢幕 */
.video-frame.ios-pseudo-fullscreen .custom-fullscreen-btn {
    width: 144px !important;
    height: 64px !important;
}

/* ========================================
   Desktop Fullscreen Hit Zone
   透明攔截 YouTube 右下角控制區
   ======================================== */

.fullscreen-hit-zone {
    position: absolute;
    right: 0;
    bottom: 0;

    width: 280px;
    height: 100px;

    background: transparent;

    z-index: 1000001;
    cursor: pointer;
}

/* 自訂按鈕保持在攔截層上方 */
.custom-fullscreen-btn {
    z-index: 1000002 !important;
}

/* iPhone 不需要額外桌機攔截層 */
@media (max-width: 600px) {
    .fullscreen-hit-zone {
        display: none;
    }
}


/* ========================================
   Mobile Fullscreen Hit Area Bottom Fix
   手機版感應區下移並貼齊播放器底部
   ======================================== */

@media (max-width: 600px) {

    .custom-fullscreen-btn {
        bottom: 0 !important;
    }

    .video-frame.ios-pseudo-fullscreen .custom-fullscreen-btn {
        bottom: 0 !important;
    }

}


/* ========================================
   Site Theme Header Responsive
   ======================================== */

@media (max-width: 600px) {

    .site-theme-header {
        margin-bottom: 16px;
    }

    .site-theme-header-inner {
        padding: 12px 0;

        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }

    .site-brand {
        min-height: 32px;
    }

    .site-brand-name {
        font-size: 17px;
    }

    .site-brand-mark {
        height: 27px;
    }

    .site-theme-header .theme-switcher {
        width: 100%;
        max-width: none;
        margin: 0;

        display: flex;
        align-items: center;

        gap: 10px;
    }

    .site-theme-header .theme-switcher label {
        flex: 0 0 auto;
    }

    .site-theme-header .theme-switcher select {
        width: 100%;
        min-width: 0;
        min-height: 42px;

        flex: 1 1 auto;
    }


    .site-theme-header .site-header-logout {
        flex: 0 0 auto;

        min-height: 42px;
        padding: 8px 12px;

        font-size: 15px;
    }
}


/* ========================================
   Member Welcome Responsive
   ======================================== */

@media (max-width: 600px) {

    .my-courses-container .member-welcome {
        display: block;

        padding: 16px;

        line-height: normal;
    }

    .member-welcome-name {
        font-size: 20px;
    }

    .member-welcome-actions {
        margin-top: 14px;

        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 8px;
    }

    .my-courses-container .member-welcome-actions a {
        display: flex;
        width: 100%;

        min-height: 42px;

        white-space: nowrap;
    }

    .member-welcome-actions .member-logout-link {
        grid-column: 1 / -1;
    }
}


@media (max-width: 380px) {

    .member-welcome-actions {
        grid-template-columns: 1fr;
    }

    .member-welcome-actions .member-logout-link {
        grid-column: auto;
    }
}


/* ========================================
   Course Hero Responsive
   ======================================== */

@media (max-width: 600px) {

    .course-hero {
        margin-bottom: 20px;
        padding: 18px;
    }

    .theme-e .course-hero,
    .theme-m .course-hero {
        padding: 20px;
    }

    .course-hero-back {
        margin-bottom: 16px;
    }

    .course-hero-title {
        font-size: 25px;
    }

    .course-hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .theme-d .course-hero::after {
        right: -130px;
        top: -120px;
    }

    .theme-e .course-hero::after {
        right: -90px;
        bottom: -100px;
    }
}

@media (max-width: 600px) {
    .front-back-button {
        min-height: 42px;
        padding: 9px 14px;
    }
}


/* ========================================
   User Admin Form Responsive
   ======================================== */

@media (max-width: 600px) {

    .admin-form-page {
        width: 100%;
        max-width: none;

        margin: 18px 0 30px;
    }

    .admin-form-card {
        padding: 20px 18px;
    }

    .admin-form-header {
        display: block;
    }

    .admin-form-header h1 {
        margin-bottom: 14px;
        font-size: 25px;
    }

    .admin-user-summary {
        grid-template-columns: 1fr;
    }

    .admin-form-card form > button[type="submit"] {
        width: 100%;
    }
}


/* ========================================
   Admin Common Navigation V2 Responsive
   ======================================== */

@media (max-width: 700px) {

    .admin-common-nav {
        margin-top: 14px;
        margin-bottom: 22px;
    }

    .admin-nav-top {
        margin-bottom: 10px;
    }

    .admin-common-nav .admin-nav-back {
        min-height: 38px;
        padding: 7px 12px;
    }

    .admin-nav-links {
        display: flex;
        flex-wrap: nowrap;

        width: 100%;
        max-width: 100%;

        margin-bottom: 0;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: thin;
    }

    .admin-common-nav .admin-nav-links a {
        flex: 0 0 auto;

        min-width: 100px;
        min-height: 44px;

        padding: 9px 14px;

        font-size: 14px;
    }
}

/* ========================================
   Mobile Width Polish
   手機版統一左右留白
   不影響桌機
   ======================================== */

@media (max-width: 600px) {

    /* 整體內容不要貼滿手機 */
    .site-container {
        width: calc(100% - 8px) !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    /* 登入／忘記密碼等前台表單 */
    .frontend-form-page {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 22px 20px !important;
        box-sizing: border-box;
    }

    .frontend-form-page form {
        width: 100%;
    }

    .frontend-form-page input,
    .frontend-form-page select,
    .frontend-form-page textarea,
    .frontend-form-page button {
        width: 100%;
        box-sizing: border-box;
    }

    /* 註冊頁 */
    .register-container.container.site-container {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 22px 20px !important;
        box-sizing: border-box;
    }

    /* 我的課程 */
    .my-courses-container.container.site-container {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 22px 20px !important;
        box-sizing: border-box;
    }

    /* 個人資料 */
    .profile-edit-container.site-container {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 22px 20px !important;
        box-sizing: border-box;
    }

    /* 公告卡片不要再撐出內容 */
    .front-announcement-card,
    .course-card {
        box-sizing: border-box;
        max-width: 100%;
    }

    /* 手機標題稍微收斂 */
    .frontend-form-page h1,
    .register-container h1,
    .my-courses-container h1,
    .profile-edit-container h1 {
        overflow-wrap: anywhere;
    }
}


/* 小型手機 */
@media (max-width: 380px) {

    .site-container,
    .frontend-form-page,
    .register-container.container.site-container,
    .my-courses-container.container.site-container,
    .profile-edit-container.site-container {
        max-width: 350px !important;
    }

    .frontend-form-page,
    .register-container.container.site-container,
    .my-courses-container.container.site-container,
    .profile-edit-container.site-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}



/* ========================================
   YouTube Settings Hit Zone
   攔截桌機播放器右上角設定齒輪
   ======================================== */

@media (min-width: 601px) {

    .youtube-settings-hit-zone {
        position: absolute;
        top: 0;
        right: 0;

        width: 82px;
        height: 82px;

        background: transparent;

        z-index: 1000001;
        cursor: default;
    }

}

@media (max-width: 600px) {

    .youtube-settings-hit-zone {
        display: none;
    }

}





/* ========================================
   YouTube Top Hit Zone - DEBUG
   上方標題區橫向遮罩
   點擊後觸發自訂全螢幕
   ======================================== */

@media (min-width: 601px) {

    .youtube-top-hit-zone {
        position: absolute;

        top: 0;
        left: 0;
        right: 165px;

        height: 90px;

        background: transparent;
        outline: none;

        z-index: 1000001;
        cursor: pointer;
    }

}

@media (max-width: 600px) {

    .youtube-top-hit-zone {
        display: none;
    }

}

/* ========================================
   Mobile YouTube Top Hit Zone - DEBUG
   手機直式定位測試
   ======================================== */

@media (max-width: 600px) {

    .youtube-top-hit-zone {
        display: block !important;

        position: absolute;
        top: 0;
        left: 0;
        right: 105px;

        height: 58px;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

}



/* ========================================
   Mobile YouTube Hit Zone
   Portrait / Landscape DEBUG
   ======================================== */


/* 手機橫式：沿用目前成功的位置，維持紅色測試 */
@media (max-width: 900px) and (orientation: landscape) {

    .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 165px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

}


/* 手機直式：一般模式 / 全螢幕模式分開處理 */

@media (max-width: 600px) and (orientation: portrait) {

    /* 一般直式：跟橫式一樣固定在播放器最上方 */
    .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 105px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

    /* 直式 iOS 模擬全螢幕：
       遮罩往下移，避開音量 / CC / 齒輪 */
    .video-frame.ios-pseudo-fullscreen .youtube-top-hit-zone {
        top: 58px !important;

        left: 0 !important;
        right: 0 !important;

        height: 88px !important;

        background: transparent !important;
        outline: none !important;
    }

}

/* 先往下移，避開最上方音量 / CC / 齒輪 */
        top: 58px !important;

        left: 0 !important;
        right: 0 !important;

        /* 先用紅色抓影片標題 / 頻道連結區 */
        height: 88px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

}



/* ========================================
   Mobile YouTube Hit Zone
   Portrait / Landscape DEBUG
   ======================================== */


/* 手機橫式 */
@media (max-width: 900px) and (orientation: landscape) {

    /* 一般狀態與播放後：維持目前設定 */
    .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 105px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

    /* 橫式全螢幕、目前尚未播放：
       上方整條感應區 */
    .video-frame.ios-pseudo-fullscreen:not(.youtube-is-playing)
    .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: auto !important;
        height: 58px !important;

        background: rgba(255, 0, 0, 0.35) !important;
        outline: 2px solid red !important;

        z-index: 1000001 !important;
    }

    /* 橫式全螢幕、真正開始播放後：
       回到原本的上方遮罩範圍 */
    .video-frame.ios-pseudo-fullscreen.youtube-is-playing
    .youtube-top-hit-zone {
        top: 0 !important;
        left: 0 !important;
        right: 105px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;
    }

}


/* 手機直式：獨立調整，不影響橫式 */
@media (max-width: 600px) and (orientation: portrait) {

    .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;

        /* 先往下移，避開最上方音量 / CC / 齒輪 */
        top: 58px !important;

        left: 0 !important;
        right: 0 !important;

        /* 先用紅色抓影片標題 / 頻道連結區 */
        height: 88px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

}



/* ========================================
   Mobile Portrait Normal Player - DEBUG FIX
   一般直式播放器：遮罩固定最上方
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    .video-frame:not(.ios-pseudo-fullscreen) .youtube-top-hit-zone {
        display: block !important;

        position: absolute !important;

        top: 0 !important;
        bottom: auto !important;

        left: 0 !important;
        right: 105px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

}



/* ========================================
   Mobile Portrait Bottom Hit Zone - DEBUG
   右下角 YouTube 外連區，往左擴大
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    .fullscreen-hit-zone {
        display: block !important;

        position: absolute !important;

        right: 0 !important;
        bottom: 0 !important;

        width: 260px !important;
        height: 95px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: pointer;
    }

    .custom-fullscreen-btn {
        z-index: 1000002 !important;
    }

}



/* ========================================
   Mobile Portrait Bottom Hit Zone FINAL DEBUG
   全螢幕避開時間拉軸
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* 一般直式 */
    .video-frame:not(.ios-pseudo-fullscreen) .fullscreen-hit-zone {
        right: 0 !important;
        bottom: 0 !important;

        width: 260px !important;
        height: 44px !important;

        background: transparent !important;
        outline: none !important;
    }

    /* 直式全螢幕：縮到只蓋 YouTube Logo / X */
    /* 直式全螢幕：播放前
       下方改成整條橫向感應區 */
    .video-frame.ios-pseudo-fullscreen:not(.youtube-has-started) .fullscreen-hit-zone {
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;
    }

    /* 直式全螢幕：播放後
       維持目前已確認 OK 的右下範圍 */
    .video-frame.ios-pseudo-fullscreen.youtube-has-started .fullscreen-hit-zone {
        right: 0 !important;
        bottom: 0 !important;

        width: 230px !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;
    }

}



/* ========================================
   Desktop YouTube Left Bottom Hit Zone - DEBUG
   攔截左下角分享 / 儲存到播放清單
   ======================================== */

@media (min-width: 601px) {

    .youtube-left-bottom-hit-zone {
        position: absolute;

        left: 0;
        bottom: 0;

        width: 240px;
        height: 58px;

        background: transparent;
        outline: none;

        z-index: 1000001;
        cursor: default;
    }

}

@media (max-width: 600px) {

    .youtube-left-bottom-hit-zone {
        display: none;
    }

}



/* ========================================
   Mobile Portrait Extra YouTube Zones - DEBUG
   右上設定 / 左下分享與播放清單
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* 右上：設定齒輪區 */
    .youtube-settings-hit-zone {
        display: block !important;

        position: absolute !important;
        top: 0 !important;
        right: 0 !important;

        width: 78px !important;
        height: 78px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: default;
    }


    /* 左下：轉傳 / 分享 / 播放清單 */
    .youtube-left-bottom-hit-zone {
        display: block !important;

        position: absolute !important;
        left: 0 !important;
        bottom: 0 !important;

        width: 150px !important;
        height: 44px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
        cursor: default;
    }

}



/* ========================================
   MOBILE PORTRAIT FINE TUNE - DEBUG
   只處理手機直式
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* =====================================
       A. 直式：未進全螢幕
       ===================================== */

    /* 左上 / 上方標題外連區：保持紅色方便比對 */
    .video-frame:not(.ios-pseudo-fullscreen) .youtube-top-hit-zone {
        display: block !important;

        top: 0 !important;
        left: 0 !important;
        right: 105px !important;

        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }


    /* 右上設定區：
       縮小，只擋齒輪，避免擋到 CC 字幕按鈕 */
    .video-frame:not(.ios-pseudo-fullscreen) .youtube-settings-hit-zone {
        display: block !important;

        top: 0 !important;
        right: 0 !important;

        width: 50px !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }


    /* =====================================
       B. 直式：進入 iOS 模擬全螢幕
       ===================================== */

    /* 左上 / 標題區：同樣顯示紅色方便比對 */
    .video-frame.ios-pseudo-fullscreen .youtube-top-hit-zone {
        display: block !important;

        top: 58px !important;
        left: 0 !important;
        right: 0 !important;

        height: 88px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }


    /* 全螢幕左下：
       高度調成跟目前全螢幕右下遮罩一樣 58px */
    .video-frame.ios-pseudo-fullscreen .youtube-left-bottom-hit-zone {
        display: block !important;

        left: 0 !important;
        bottom: 0 !important;

        width: 150px !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }


    /* 全螢幕右上設定區也縮小，
       避免碰到字幕 CC */
    .video-frame.ios-pseudo-fullscreen .youtube-settings-hit-zone {
        display: block !important;

        top: 0 !important;
        right: 0 !important;

        width: 50px !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }

}



/* ========================================
   MOBILE PORTRAIT FULLSCREEN FINE TUNE
   只調手機直式全螢幕
   ======================================== */

@media (max-width: 600px) and (orientation: portrait) {

    /* 1. 右上齒輪遮罩：
       往左延伸，確實蓋住齒輪 */
    .video-frame.ios-pseudo-fullscreen .youtube-settings-hit-zone {
        display: block !important;

        top: 0 !important;
        right: 0 !important;

        width: 68px !important;
        height: 58px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }


    /* 2. 上方橫遮罩：
       往上挪一點，避免還能點到 YouTube 官網 */
    /* 全螢幕：尚未開始播放
       YouTube 標題位置較高，所以遮罩往上 */
    .video-frame.ios-pseudo-fullscreen:not(.youtube-has-started) .youtube-top-hit-zone {
        display: block !important;

        top: 0 !important;
        left: 0 !important;

        /* 播放前直接整條橫向遮住影片上方 */
        right: 68px !important;

        height: 100px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }

    /* 全螢幕：開始播放後
       保留目前已確認 OK 的位置 */
    .video-frame.ios-pseudo-fullscreen.youtube-has-started .youtube-top-hit-zone {
        display: block !important;

        top: 46px !important;
        left: 0 !important;
        right: 0 !important;

        height: 100px !important;

        background: transparent !important;
        outline: none !important;

        z-index: 1000001 !important;
    }

}