/* ============================================================
   播放器增量样式（配合 mega.css 使用）
   这里只补播放器相关部分：控制栏与信息按钮、开播遮罩、
   断流提示、全屏换台层。
   ============================================================ */

/* 播放器：完全沿用 index.php 那套设置。
   控制栏默认浮在画面底部会压住 48px 画面，这里把它整个挪到画面下面
   （.zwp-container 默认 overflow:hidden 会裁掉，所以要放开），
   #playerBox 留出 48px 给它站位，画面就是干净的 16:9。
   固定 16:9，4:3 的源直接拉满（object-fit:fill）。 */
#playerBox {
    position: relative;
    padding-bottom: 48px;
}

#player {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: visible;
}

#player.zwp-wrap { background: #000; }

#player .zwp-container { overflow: visible; }

#player .zwp-controlbar {
    bottom: -48px !important;
    height: 48px !important;
    background: linear-gradient(180deg, #161b23, #0b0e13) !important;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
}

/* 控制栏中段的文字广告：绝对居中最稳，不参与 flex 布局 */
#player .zwp-ad-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    line-height: 1;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 1px;
    transition: .18s;
}

#player .zwp-ad-slot:hover {
    color: #fff;
    background: rgba(255, 255, 255, .10);
}

#player .zwp-ad-short { display: none; }

/* 收掉控制栏左侧的折叠箭头（<）：它只在控制条拥挤时出现，
   我们的按钮是定制排列，用不上折叠功能 */
#player .zwp-foldingToggleBtn { display: none !important; }

@media (max-width: 820px) {
    #player .zwp-ad-slot {
        font-size: 15px;
        padding: 5px 9px;
        letter-spacing: .5px;
        color: rgba(255, 255, 255, .72);
    }
    #player .zwp-ad-full { display: none; }
    #player .zwp-ad-short { display: inline; }
}

/* 播放器的直播标签写死 "Live"，用 CSS 换成"直播中" */
#player .zwp-streamtype {
    font-size: 0 !important;
    color: rgba(255, 255, 255, .78);
}

#player .zwp-streamtype::after {
    content: "直播中";
    font-size: 14px;
}

/* 「直播中」后面的 分辨率 · 码率，只在电脑端显示（JS 每秒刷新） */
#player .zwp-live-meta {
    margin-left: 10px;
    font-size: 14px;
    line-height: 36px;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    letter-spacing: .5px;
}

@media (max-width: 768px) {
    #player .zwp-live-meta { display: none; }
}

/* 窄屏时播放器会把全屏按钮折叠掉（加 zwp-chan-off），强制留住 */
#player .zwp-button.zwp-keep-fs { display: block !important; }

/* ---------- 控制条图标后加文字：信息 / 抓图 / 全屏 ----------
   播放器自带按钮是固定 40px 宽、font-size:0、overflow:hidden，
   直接塞文字会被裁掉。这里只放开这三个按钮，其余控件保持原样。 */
#player .zwp-controlbar .zwp-infoButton,
#player .zwp-controlbar .zwp-snapshotButton,
#player .zwp-controlbar .zwp-button.zwp-keep-fs {
    width: auto;
    flex: none;
}

#player .zwp-controlbar .zwp-infoButton > button,
#player .zwp-controlbar .zwp-snapshotButton > button,
#player .zwp-controlbar .zwp-button.zwp-keep-fs > button {
    position: relative;      /* 原来是 absolute，改成能按内容占位 */
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 7px;
    font-size: 14px;         /* 和「直播中」同号；原来是 0，文字才看得见 */
    line-height: 1;
    overflow: visible;
}

#player .zwp-controlbar .zwp-infoBtn::after { content: "信息"; }
#player .zwp-controlbar .zwp-snapshotBtn::after { content: "抓图"; }

#player .zwp-controlbar .zwp-fullscrBtn::after { content: "全屏"; }

/* 全屏状态按播放器加在 #player 上的类判断，比读 data-action 稳：
   原生全屏是 .zwp-fullscreen / :fullscreen，iPhone 的 CSS 全屏是 .zwp-fullscreen-win */
#player:fullscreen .zwp-controlbar .zwp-fullscrBtn::after,
#player.zwp-fullscreen .zwp-controlbar .zwp-fullscrBtn::after,
#player.zwp-fullscreen-win .zwp-controlbar .zwp-fullscrBtn::after { content: "退出全屏"; }

/* 手机上控制栏只留喇叭和全屏，抓图收掉；桌面不受影响 */
@media (max-width: 640px) {
    #player .zwp-button.zwp-hide-sm { display: none !important; }
    #player .zwp__currenttime-container { display: none !important; }
    #player .zwp-folding-group { display: none !important; }
}

/* 全屏时画面就是整块屏幕，控制栏必须回到画面里 */
#player:fullscreen .zwp-controlbar,
#player.zwp-fullscreen .zwp-controlbar,
#player.zwp-fullscreen-win .zwp-controlbar {
    bottom: 0 !important;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, .1) 80%, transparent) !important;
    border-top: 0;
}

/* 全屏一律保持源的原始宽高比，横竖屏都适用：
   竖屏细长视口不纵向拉长，19.5:9 横屏不横向拉宽，多出的部分由 #player 的黑底留边。
   非全屏仍是 videostyle 的 object-fit:fill，照旧铺满 16:9 容器。 */
#player:fullscreen video,
#player.zwp-fullscreen video,
#player.zwp-fullscreen-win video {
    object-fit: contain !important;
}

/* 竖屏全屏时画面只有中间那一条，底下大片黑，顺手提示一句转横屏。
   横屏时这条规则不生效，提示自动消失。 */
@media (orientation: portrait) {

    #player:fullscreen::after,
    #player.zwp-fullscreen::after,
    #player.zwp-fullscreen-win::after {
        content: "横屏观看更清晰";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 76px;
        z-index: 30;
        text-align: center;
        font-size: 13px;
        letter-spacing: 2px;
        color: rgba(255, 255, 255, .42);
        pointer-events: none;
    }
}

/* ============================================================
   播放器遮罩层：点击开声音 / 断流失败（2026-10-21 从 index.php 移植）
   #playerBox 底部留了 48px 给控制条，所以两层都只盖画面部分，不压控制条
   ============================================================ */

#playGate {
    position: absolute;
    inset: 0 0 48px 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

#playGate.show {
    display: flex;
    pointer-events: auto;   /* 整块画面都能点，不用非要点中按钮 */
    cursor: pointer;
    background: rgba(0, 0, 0, .22);
}

#playGateBtn {
    display: inline-flex;
    align-items: center;
    gap: .67em;
    border: 0;
    border-radius: 999px;
    padding: .93em 1.73em;
    font-family: inherit;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    background: rgba(18, 22, 30, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .45);
    transition: .18s;
}

#playGateBtn:hover { background: rgba(32, 38, 50, .88); transform: translateY(-2px); }
#playGateBtn:active { transform: translateY(0); }

/* 喇叭图标用 CSS 画（矩形 + 三角），尺寸跟着 em 缩放 */
.pg-sound { position: relative; width: .87em; height: .87em; flex: none; }

.pg-sound::before {
    content: "";
    position: absolute;
    left: 0;
    top: .27em;
    width: .3em;
    height: .33em;
    background: #fff;
    border-radius: .07em;
}

.pg-sound::after {
    content: "";
    position: absolute;
    left: .3em;
    top: .07em;
    width: 0;
    height: 0;
    border-top: .37em solid transparent;
    border-bottom: .37em solid transparent;
    border-right: .5em solid #fff;
}

@media (max-width: 640px) {
    #playGateBtn { font-size: 18px; }
}

#failLayer {
    position: absolute;
    inset: 0 0 48px 0;
    z-index: 1200;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: rgba(8, 10, 16, .88);
    color: #eef2f8;
    text-align: center;
    padding: 16px;
}

#failLayer.show { display: flex; }

#failName { font-weight: 500; font-size: 16px; }
#failMsg { color: #aab4c8; font-size: 13px; }

#failRetry {
    margin-top: 6px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-radius: 8px;
    padding: 8px 18px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

#failRetry:hover { background: rgba(255, 255, 255, .18); }

/* ============================================================
   悬停水印：电脑端鼠标移到播放器上时，画面右上角浮现站名 + 网址。
   只在带鼠标的设备启用（hover: hover + pointer: fine），
   手机 / 平板没有悬停，这层永远保持透明，不会闪出来。
   纯展示：pointer-events 穿透，不挡播放器的点击和控制条；
   层级压过画面，低于 加载层1050 / 开声音1100 / 断流1200（遮罩在场时让位）；
   右上角和左侧滑出的悬停换台面板各占一头，互不遮挡。
   ============================================================ */
#悬停水印 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 900;
    padding: 6.5px 22px 4.5px;   /* 上下的间距是非全屏专用的减半版（全屏那枚仍为 13/9） */
    text-align: center;
    color: #48c23b;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
    pointer-events: none;   /* 容器穿透：文字外的点击照常落到画面上 */
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    transition: opacity .25s;
}

/* 文字本体是链接：只有这块能点，新窗口打开 kandianshi.cc */
.水印链接 {
    display: block;
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
}

.水印链接:hover { opacity: .82; }

.水印名 {
    display: block;
    font-size: 35px;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 1.4;
}

.水印址 {
    display: block;
    font-size: 28px;
    letter-spacing: 3px;
    opacity: .9;
}

/* 非全屏水印：两行之间的行距收紧（行高 1.4→1.15，可见间隙约减半）；
   全屏那枚仍用上面的 1.4 */
#悬停水印 .水印名 { line-height: 1.15; }

@media (hover: hover) and (pointer: fine) {
    #playerBox:hover #悬停水印 { opacity: 1; }
}

/* ============================================================
   ⑥ 全屏换台层：挂在 #player 里面的「点击换台」按钮 + 左侧频道面板。
   原生全屏只渲染 #player 子树，页面级的换台界面全屏时看不见，
   所以这层必须是 #player 的子节点（JS 动态建，见 bofangqi.php ③-3）。
   显隐：全屏沿用老规矩（鼠标动出现、停 4 秒收）；电脑版非全屏当
   悬停换台层用——鼠标在播放器里就在（.鼠在），移出立即收，无倒计时。
   面板永远深色——它压在视频画面上，不跟浅色主题翻色。
   ============================================================ */
#全屏换台 {
    position: absolute;
    inset: 0;
    z-index: 1500;                /* 高过控制栏 1200/1300，低于播放器弹层 9999 */
    display: none;
    pointer-events: none;         /* 空白处放行给画面，只有按钮和面板接鼠标 */
    --全屏分类宽: 164px;          /* 分类列宽（164 才装得下「特色频道 107」不截断） */
    --全屏面板间距: 58px;         /* 菜单离画面左缘的空隙，和分类列宽各自独立 */
}

#全屏换台.在 { display: block; }

/* ---------- 右侧按钮堆：点击换台(大) + 系统全屏(iPhone) + 静音 + 退出全屏。
   整组垂直居中，随鼠标活动显隐（入场 8px 小位移）；
   堆内空隙 pointer-events:none 放行给画面，只有按钮接鼠标 ---------- */
#全屏换台 .全屏按钮堆 {
    position: absolute;
    top: 50%;
    right: 56px;                  /* 离画面右缘的空隙：初版 28px 的两倍 */
    width: min(346px, calc(100vw - 730px));   /* 窄桌面 / 平板横屏时跟着收，
                                                 避免压到面板右缘的快捷钮 */
    transform: translateY(calc(-50% - 8px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s, visibility 0s linear .25s;
}

#全屏换台.有动作 .全屏按钮堆 {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
    transition: opacity .25s, transform .25s;
}

#全屏换台 .全屏按钮堆 > button {
    width: 100%;
    pointer-events: auto;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* 主按钮：点击换台。尺寸是初版的整两倍（173×60 → 346×120） */
#全屏换台 .全屏钮 {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid #fff;       /* 边框和文字同色 */
    border-radius: 22px;
    background: #4e6f58;          /* 实色，不带透明 */
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 9px;
    text-indent: 9px;             /* 抵消末字字距，视觉才真正居中 */
    transition: background .15s;
}

#全屏换台 .全屏钮:hover { background: #5a7d67; }
#全屏换台 .全屏钮:active { background: #466350; }

/* 副按钮：系统全屏(iPhone) / 静音 / 退出全屏 */
#全屏换台 .全屏系统钮,
#全屏换台 .全屏副钮 {
    height: 44px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 14px;
    background: rgba(16, 18, 20, .78);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 6px;
    text-indent: 6px;
    transition: background .15s;
}

#全屏换台 .全屏系统钮:hover,
#全屏换台 .全屏副钮:hover { background: rgba(40, 44, 48, .9); }
#全屏换台 .全屏副钮:active { background: rgba(58, 62, 66, .95); }

/* 静音 + 退出全屏：一行两颗的"高按钮"（退出全屏折成两行字），
   高度吃掉原先两行横条的高度，更好按更好定位 */
#全屏换台 .全屏二列 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

#全屏换台 .全屏二列 .全屏副钮 {
    height: 92px;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 4px;
    text-indent: 4px;
    white-space: pre-line;
}

/* 信息块：分辨率 / 码率（全屏下替代信息面板，纯显示、无关闭钮），
   样式和倒计时提示同款，放在它的上面 */
#全屏换台 .全屏信息 {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 9px;
    background: rgba(16, 18, 20, .55);
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #fff;
    letter-spacing: 1px;
    white-space: pre-line;
}

/* 全屏时控制条的信息按钮不显示（内容已在按钮堆的信息块里），
   信息面板也一并收掉 */
#player:fullscreen .zwp-infoButton,
#player.zwp-fullscreen .zwp-infoButton,
#player.zwp-fullscreen-win .zwp-infoButton { display: none !important; }

#player:fullscreen .zwp__mediainfo-viewer,
#player.zwp-fullscreen .zwp__mediainfo-viewer,
#player.zwp-fullscreen-win .zwp__mediainfo-viewer { display: none !important; }

/* 倒计时提示：按钮堆最底部的小字块，纯说明、点击穿透到画面 */
#全屏换台 .全屏提示 {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 9px;
    background: rgba(16, 18, 20, .55);
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    white-space: nowrap;
}

/* ---------- 左侧滑出面板：左分类 / 右列表两竖列。
   不贴死屏幕左边：留出一条和分类列等宽的空隙，空隙里透出画面 ---------- */
#全屏换台 .全屏面板 {
    position: absolute;
    top: 0;
    left: var(--全屏面板间距);
    bottom: 0;
    width: min(560px, 46%);       /* 列表加宽：屏够大，频道名不再截断 */
    display: flex;
    background: rgba(10, 13, 12, .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    /* 收起时整条滑出屏幕：位移 = 自身宽 + 间距，不留下边缘残影 */
    transform: translateX(calc(-100% - var(--全屏面板间距) - 8px));
    visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
}

/* 面板开 + 鼠标有动作 才露面；鼠标停 4 秒跟着按钮一起滑走 */
#全屏换台.面板开.有动作 .全屏面板 {
    transform: translateX(0);
    visibility: visible;
    transition: transform .28s ease;
}

/* ---------- 电脑版非全屏也亮出这层，当悬停换台层用 ----------
   层常显（display:block）；按钮堆跟 .鼠在（鼠标进出 #playerBox，JS 维护，
   无倒计时：在框里就一直显示，移出立即收）；面板跟 .面板开.鼠在
   （点「点击换台」或点画面空白切换，开着不自动收）。全屏里 .在 在场，
   这组规则整体失效，全屏的倒计时老规矩分毫不动。全屏专属的
   分辨率/码率信息块非全屏藏起；按钮堆非全屏单独收窄（宽 300、
   离右缘 16px），高度和字号沿用全屏那套不动。 */
@media (hover: hover) and (pointer: fine) {
    #playerBox #全屏换台:not(.在) { display: block; }

    #playerBox #全屏换台:not(.在) .全屏信息,
    #playerBox #全屏换台:not(.在) .全屏提示 { display: none; }

    #playerBox #全屏换台:not(.在) .全屏按钮堆 { width: 300px; right: 16px; }
}

/* 非全屏：鼠标在播放器里 → 按钮堆常在；移出 → 立即收（复用原过渡） */
#全屏换台:not(.在).鼠在 .全屏按钮堆 {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%);
}

/* 非全屏：面板开着且鼠标在框里 → 滑出；其余时刻保持收起态 */
#全屏换台:not(.在).面板开.鼠在 .全屏面板 {
    transform: translateX(0);
    visibility: visible;
}

/* ---------- 全屏水印：全屏时右上角常显（页面那枚悬停水印全屏渲染不到）。
   只是文字、不是链接：容器接住点击但什么也不做（JS 里 stopPropagation），
   字号样式复用 .水印名 / .水印址；默认藏起防占位 ---------- */
#全屏换台 .全屏水印 {
    position: absolute;
    top: 0;
    right: 0;
    padding: 13px 22px 9px;
    text-align: center;
    color: #48c23b;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s;
}

#全屏换台.在 .全屏水印 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;   /* 接住点击（JS 里吞掉），别穿透到画面 */
}

#全屏换台 .全屏分类 {
    flex: none;
    width: var(--全屏分类宽);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(255, 255, 255, .04);
    border-right: 1px solid rgba(255, 255, 255, .08);
}

/* 分类上下居中：用上下两个弹性占位块，不用 justify-content:center ——
   后者在 Safari 上一旦内容比容器高，顶部会被裁掉且滚不上去；
   占位块在内容超高时自动缩到 0，跟常驻选台板同一个做法 */
#全屏换台 .全屏分类::before,
#全屏换台 .全屏分类::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
}

#全屏换台 .全屏tab {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    padding: 13px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(231, 239, 233, .82);
    font-size: 17px;
    font-family: inherit;
    letter-spacing: 1px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .14s, color .14s;
}

#全屏换台 .全屏tab:hover { background: rgba(255, 255, 255, .08); }

#全屏换台 .全屏tab名 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;   /* 手机分类列只有 100px，「特色频道+数量」贴边时兜住 */
}

#全屏换台 .全屏tab.active {
    background: rgba(95, 211, 154, .16);
    color: #5fd39a;
}

#全屏换台 .全屏tab数 {
    flex: none;
    font-size: 12px;
    color: rgba(148, 167, 155, .8);
    font-variant-numeric: tabular-nums;
}

#全屏换台 .全屏tab.active .全屏tab数 { color: inherit; opacity: .75; }

/* 右列：每个分类一个滚动容器，切分类只切 hidden，各自滚动位置保留 */
#全屏换台 .全屏列表 {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
}

#全屏换台 .全屏组 {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* 列表不满一屏时上下居中（推荐 12 条、央视 18 条这类短列表）；
   数据多到超出高度时两个占位块自动缩到 0，滚动行为跟原来一模一样。
   用占位块而不是 justify-content:center —— 后者在 Safari 上内容超高时
   顶部会被裁掉且滚不上去，分类列用的也是这同一招 */
#全屏换台 .全屏组::before,
#全屏换台 .全屏组::after {
    content: "";
    flex: 1 1 auto;
    min-height: 0;
}

/* 一行一个台：编号 + 台名，当前台绿底高亮（跟参考图一致） */
#全屏换台 .全屏行 {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: rgba(231, 239, 233, .9);
    font-size: 16px;
    font-family: inherit;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
}

#全屏换台 .全屏行:hover { background: rgba(255, 255, 255, .09); }

/* 央视 / 卫视行挂台标（300×180 透明 PNG）：行高不变，图标撑满行内
   （有标行上下内边距 13 → 8，图 24 → 30 高） */
#全屏换台 .全屏行.有标 {
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
}

#全屏换台 .全屏行 .台标 {
    width: 50px;
    height: 30px;
    object-fit: contain;
    flex: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* 深底面板上白色 CCTV 字标直接露着就清楚，不吃浅色主题那套绿底 */
#全屏换台 .台标.白标 {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

#全屏换台 .全屏号 {
    flex: none;
    width: 26px;
    font-size: 13px;
    color: rgba(148, 167, 155, .85);
    font-variant-numeric: tabular-nums;
}

#全屏换台 .全屏名 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#全屏换台 .全屏行.现在 { background: rgba(95, 211, 154, .18); }

#全屏换台 .全屏行.现在 .全屏名,
#全屏换台 .全屏行.现在 .全屏号 {
    color: #5fd39a;
    font-weight: 500;
}

/* 特色频道：省名横跨一整行当标题，不可点 */
#全屏换台 .全屏题 {
    flex: none;
    margin: 10px 0 4px;
    padding: 0 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(148, 167, 155, .9);
    font-size: 13px;
    letter-spacing: 1.5px;
}

#全屏换台 .全屏题:first-child { margin-top: 0; }

/* ---------- 面板右缘的快捷钮：关闭菜单 / 退出全屏。
   挂在面板右边缘向外探出，随菜单一起滑入滑出，整组上下居中 ---------- */
#全屏换台 .全屏快捷 {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#全屏换台 .全屏快捷钮 {
    border: 0;
    border-radius: 0 12px 12px 0;   /* 贴着面板右缘，只圆探出的这一侧 */
    background: rgba(16, 18, 20, .82);
    color: rgba(255, 255, 255, .92);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 18px 13px;
    writing-mode: vertical-rl;      /* 竖排文字：窄条不挡画面 */
    text-orientation: upright;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}

#全屏换台 .全屏快捷钮:hover { background: rgba(42, 46, 50, .92); }
#全屏换台 .全屏快捷钮:active { background: rgba(58, 62, 66, .95); }

#全屏换台 .全屏分类::-webkit-scrollbar,
#全屏换台 .全屏组::-webkit-scrollbar { width: 8px; }

#全屏换台 .全屏分类::-webkit-scrollbar-thumb,
#全屏换台 .全屏组::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .14);
    border-radius: 8px;
}

/* 手机 / 窄横屏全屏适配：手机横屏的 CSS 宽度普遍在 660–935，
   768 的老断点罩不住，改用 940。右侧居中的大按钮在这个宽度下
   会压住面板右缘的快捷钮，所以手机上按钮回到右上角、整体缩小一号 */
@media (max-width: 940px) {
    #全屏换台 { --全屏分类宽: 110px; --全屏面板间距: 70px; }
    /* 面板加宽到 360；宽度公式给右侧居中的按钮堆预留了位置
       （52 = 按钮右缘 12 + 快捷钮 32 + 相互间距 8），窄屏自动让 */
    #全屏换台 .全屏面板 { width: min(360px, calc(100% - var(--全屏面板间距) - 52px - min(200px, 34vw))); }
    /* 分类列自身内边距也收一档：110 - 12(列) - 12(tab) = 86px 内容宽，
       「特色频道 107」才放得下 */
    #全屏换台 .全屏分类 { padding: 12px 6px; }

    #全屏换台 .全屏tab { font-size: 14px; letter-spacing: 0; padding: 10px 6px; }
    #全屏换台 .全屏tab数 { font-size: 10.5px; }
    #全屏换台 .全屏行 {
        font-size: 15px;
        padding: 10px 12px;
        gap: 8px;
    }
    #全屏换台 .全屏行.有标 { gap: 8px; padding-top: 7px; padding-bottom: 7px; }
    #全屏换台 .全屏行 .台标 { width: 40px; height: 24px; }
    #全屏换台 .全屏号 { width: 20px; font-size: 12px; }

    /* 按钮堆和桌面一样竖排在右侧居中：点击换台在上，下面依次
       系统全屏(iPhone) / 静音 / 退出全屏。堆的宽度面板公式会预留 */
    #全屏换台 .全屏按钮堆 {
        right: 12px;
        width: min(200px, 34vw);
    }
    #全屏换台 .全屏钮 {
        height: 52px;
        font-size: 19px;
        letter-spacing: 3px;
        text-indent: 3px;
        border-radius: 14px;
        border-width: 2px;
    }
    #全屏换台 .全屏系统钮,
    #全屏换台 .全屏副钮 {
        height: 36px;
        font-size: 15px;
        letter-spacing: 3px;
        text-indent: 3px;
        border-radius: 10px;
    }

    #全屏换台 .全屏二列 .全屏副钮 {
        height: 72px;
        font-size: 16px;
    }

    /* 信息面板让位：右上角给按钮堆，信息面板挪到左上角（面板开着时会
       被盖住一角，但信息面板本来就是点了信息才出现的临时层） */
    #player .zwp__mediainfo-viewer {
        left: 12px !important;
        right: auto !important;
        top: 12px !important;
    }

    #全屏换台 .全屏快捷钮 {
        font-size: 14px;
        letter-spacing: 2px;
        padding: 10px 9px;
        border-radius: 0 10px 10px 0;
    }
}