/* ============================================================
 * 影视播放器皮肤 (css/tv-player.css)
 * ------------------------------------------------------------
 * 照 bilibili 播放器 1:1 抄的结构和数值（2026-09 实测 bpx-player）：
 *   · 底栏高 35px、内边距 0 12px、按钮 36×22、图标 20~22px
 *   · 进度条是独立一行在按钮上方，轨道 4px：已播 = 主题色、缓冲 rgba(255,255,255,.3)、
 *     未播 rgba(255,255,255,.2)；悬停轨道变 6px、白色圆点 0→1 弹出、跟随时间气泡
 *   · 左组 = 播放/暂停 + 上一集/下一集 + 时间；右组 = 线路/倍速/音量/设置/画中画/宽屏/网页全屏/全屏
 *   · 图标默认 rgba(255,255,255,.8)，悬停纯白；文字按钮（自动、倍速）13px
 *   · 悬停出现深色圆角气泡提示（内容取自 data-tip）
 * 唯一区别：把 B 站的蓝 #00AEEC 换成站点粉 --tvp-accent。
 * ============================================================ */
.tvp {
    --tvp-accent: #ff7a9b;
    --tvp-accent-soft: rgba(255, 122, 155, 0.32);
    --tvp-icon: rgba(255, 255, 255, .8);
    --tvp-panel: rgba(21, 21, 21, .9);
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}
.tvp.is-web-full { position: fixed; inset: 0; z-index: 2147482000; border-radius: 0; aspect-ratio: auto; height: 100%; }
.tvp.is-wide { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0; }
.tvp.is-idle { cursor: none; }
/* 全屏 + 鼠标设备：控制条可以收，但【光标必须留着】。
   以前 is-idle 一律 cursor:none，全屏后鼠标一动指针就消失，
   用户既看不到自己点哪儿、也判断不出按钮位置 —— 等于没法操作。
   这条规则靠 JS 加的 is-immersive 触发，优先级高于 is-idle。 */
.tvp.is-idle.is-immersive,
.tvp.is-idle.is-immersive > video { cursor: default; }
.tvp.is-idle.is-immersive .tvp-bar { cursor: default; }

/* ============================================================
   亮度蒙层 —— 手机端左半边上下拖用它压暗画面
   ------------------------------------------------------------
   ⚠ 网页**没有**调节屏幕亮度的权限（没有对应的 Web API），
     所以只能在画面上面盖一层黑幕来「模拟」。

   ⚠ 关键是**必须用纯黑 + 只改 opacity**。
     早先的注释担心「盖一层黑幕会让画面发灰」，那是把黑幕和灰幕搞混了：
       · 黑幕 #000 + opacity → 均匀压暗，颜色不失真，就是暗下来；
       · 白幕/灰幕 → 画面发白、对比度掉光，那才是「发灰」。
     所以这里用 #000，效果和真降亮度很接近。

   ⚠ z-index 卡在视频之上、控件之下（.tvp-big 是 3）：
     否则一调暗，连播放键和进度条都跟着看不见了，用户就没法操作。
   ⚠ pointer-events:none —— 它铺满整个画面，不关掉触摸就全被它吃掉。
   ============================================================ */
.tvp-dim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    /* 0 = 不遮（最亮），0.75 = 压到很暗（但不至于全黑，
       全黑会让用户在一片漆黑里找不到往哪拖） */
    opacity: var(--tvp-dim, 0);
    pointer-events: none;
    transition: opacity .12s linear;
}

/* B 站的 video 铺满容器，背景纯黑 */
.tvp > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000 !important;
}

/* ---------- 顶部标题（悬停/全屏时出现） ---------- */
.tvp-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 14px 16px 30px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), transparent);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.tvp-top b { font-weight: 600; }
.tvp-top span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.tvp.show-ui .tvp-top { opacity: 1; transform: none; }

/* ---------- 中央大播放键 ---------- */
.tvp-big {
    position: absolute;
    left: 50%; top: 50%;
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .16s, background .16s;
}
.tvp-big svg { width: 34px; height: 34px; fill: currentColor; margin-left: 3px; }
.tvp-big:hover { background: var(--tvp-accent); }
.tvp-big[hidden] { display: none; }

/* ---------- 转圈 / 失败 / 气泡提示 ---------- */
.tvp-spin { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: none; }
.tvp-spin[hidden] { display: none; }
.tvp-spin i {
    display: block; width: 100%; height: 100%;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: var(--tvp-accent);
    border-radius: 50%;
    animation: tvp-rot .8s linear infinite;
}
@keyframes tvp-rot { to { transform: rotate(360deg); } }

.tvp-err {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, .74);
    color: #fff; text-align: center; padding: 20px;
}
.tvp-err[hidden] { display: none; }
.tvp-err p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.6; max-width: 84%; }
.tvp-err button {
    border: none; border-radius: 6px;
    padding: 8px 20px;
    background: var(--tvp-accent);
    color: #fff; font: inherit; font-size: 14px; cursor: pointer;
}

.tvp-toast {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .72);
    color: #fff; font-size: 13px;
    padding: 8px 16px; border-radius: 6px;
    pointer-events: none; opacity: 0; transition: opacity .2s;
}
.tvp-toast[hidden] { display: none; }
.tvp-toast.on { opacity: 1; }
/* 长文本（快捷键说明、错误提示那种）：单行会撑出播放器外，
   这里限宽换行、行距放宽，仍然居中。 */
.tvp-toast.is-long {
    max-width: min(560px, 86%);
    white-space: normal;
    line-height: 1.7;
    text-align: center;
    padding: 12px 18px;
    font-size: 12.5px;
}

/* ---------- 底栏 ---------- */
.tvp-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 12px 6px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent);
    transform: translateY(105%);
    transition: transform .22s ease;
    color: #fff;
}
.tvp.show-ui .tvp-bar { transform: none; }
.tvp-ctrls { display: flex; align-items: center; justify-content: space-between; height: 35px; }
.tvp-left, .tvp-right { display: flex; align-items: center; gap: 8px; }

/* ---------- 进度条（独立一行，抄 B 站 4px 轨道） ---------- */
.tvp-progress {
    position: relative;
    height: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}
.tvp-schedule, .tvp-buffer, .tvp-played {
    position: absolute;
    left: 0;
    height: 4px;
    border-radius: 2px;
    transition: height .12s, top .12s;
}
.tvp-schedule { right: 0; background: rgba(255, 255, 255, .2); }
.tvp-buffer { background: rgba(255, 255, 255, .3); }
.tvp-played { background: var(--tvp-accent); }
.tvp-progress:hover .tvp-schedule,
.tvp-progress:hover .tvp-buffer,
.tvp-progress:hover .tvp-played,
.tvp-progress.is-drag .tvp-schedule,
.tvp-progress.is-drag .tvp-buffer,
.tvp-progress.is-drag .tvp-played { height: 6px; }
.tvp-thumb {
    position: absolute;
    right: -6px; top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px var(--tvp-accent-soft);
    transform: scale(0);
    transition: transform .14s;
}
.tvp-progress:hover .tvp-thumb,
.tvp-progress.is-drag .tvp-thumb { transform: scale(1); }
.tvp-tip {
    position: absolute;
    bottom: 15px;
    transform: translateX(-50%);
    background: var(--tvp-panel);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.tvp-progress:hover .tvp-tip { opacity: 1; }

/* ---------- 按钮（36×22，图标 currentColor） ---------- */
.tvp-btn {
    position: relative;
    flex: 0 0 auto;
    width: 36px; height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--tvp-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s;
}
.tvp-btn:hover { color: #fff; }
.tvp-btn svg { width: 22px; height: 22px; fill: currentColor; }
.tvp-btn.tvp-text { width: auto; padding: 0 4px; font-size: 13px; gap: 3px; }
.tvp-btn.tvp-text svg.tvp-caret { width: 9px; height: 9px; fill: currentColor; }
.tvp-btn[disabled] { color: rgba(255, 255, 255, .3); cursor: default; }
.tvp-btn[disabled]:hover { color: rgba(255, 255, 255, .3); }
.tvp-btn.is-on { color: #fff; }
.tvp-btn .tvp-i-pause { display: none; }
.tvp-btn.is-pause .tvp-i-play { display: none; }
.tvp-btn.is-pause .tvp-i-pause { display: block; }

/* 悬停气泡：抄 B 站那种深色小圆角提示 */
.tvp-btn::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--tvp-panel);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
}
.tvp-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.tvp-btn[disabled]::after { content: none; }

.tvp-time { font-size: 13px; color: var(--tvp-icon); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 2px; }

/* ---------- 音量（悬停展开，同 B 站） ---------- */
.tvp-vol { flex: 0 0 auto; width: 0; overflow: hidden; transition: width .18s, margin .18s; cursor: pointer; touch-action: none; }
.tvp-right:hover .tvp-vol { width: 56px; }
.tvp-vol.is-drag { width: 56px; }
.tvp-vol-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .2); }
.tvp-vol-val { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--tvp-accent); }
.tvp-vol-val i {
    position: absolute; right: -5px; top: 50%;
    width: 10px; height: 10px; margin-top: -5px;
    border-radius: 50%; background: #fff;
    transform: scale(0); transition: transform .14s;
}
.tvp-vol:hover .tvp-vol-val i, .tvp-vol.is-drag .tvp-vol-val i { transform: scale(1); }

/* ---------- 弹出菜单（倍速 / 线路 / 设置） ---------- */
.tvp-menu {
    position: absolute;
    right: 12px;
    bottom: 48px;
    background: var(--tvp-panel);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 108px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    z-index: 3;
}
.tvp-menu[hidden] { display: none; }
.tvp-menu button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    border: none;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 10px 14px;
    cursor: pointer;
    text-align: left;
}
.tvp-menu button:hover { background: rgba(255, 255, 255, .1); }
.tvp-menu button.is-on { color: var(--tvp-accent); }
.tvp-menu button.is-on::after { content: '✓'; font-size: 12px; }

/* ---------- 移动端 ---------- */
@media (max-width: 768px) {
    .tvp { border-radius: 10px; }
    .tvp-bar { padding: 0 8px 4px; }
    .tvp-ctrls { height: 32px; }
    .tvp-left, .tvp-right { gap: 4px; }
    .tvp-btn { width: 32px; }
    .tvp-btn svg { width: 20px; height: 20px; }
    .tvp-btn.tvp-text { font-size: 12px; }
    .tvp-time { font-size: 12px; }
    .tvp-big { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .tvp-right:hover .tvp-vol { width: 0; }
    .tvp-vol.is-drag { width: 48px; }
}

/* ---------- 手机竖屏：极简控制条（照 B 站） ----------
   竖屏时屏幕上就那么点地方，一排图标挤在视频里既挡画面又难点中。
   B 站的做法是：左边只留【进度】，右边只留【全屏】——
   其余（倍速/线路/画中画/设置/宽屏…）等进了全屏/横屏再给。
   只靠 CSS 做，全屏或转横屏后自动全部回来（见下面那段还原规则）。 */
@media (max-width: 768px) and (orientation: portrait) {
    /* 右侧只留全屏键：其余按钮、音量条、线路/倍速/设置全收起 */
    .tvp-right > .tvp-btn:not(#tvpFull),
    .tvp-right > .tvp-vol { display: none; }
    /* 全屏键放大一点：它是竖屏下唯一的主操作，手指要给够面积 */
    .tvp-btn#tvpFull { width: 42px; height: 32px; }
    .tvp-btn#tvpFull svg { width: 24px; height: 24px; }
    /* 左侧：播放/上下集收成一行小的 */
    .tvp-left { gap: 2px; }
    .tvp-time { font-size: 11px; padding-left: 0; }
    /* 进度条手指要给够高度：4px 的轨道在手机上几乎点不中 */
    .tvp-progress { height: 20px; }
    .tvp-schedule, .tvp-buffer, .tvp-played { height: 3px; }
    /* 悬停提示在触屏上没有意义，去掉免得挡住进度 */
    .tvp-tip { display: none; }
    /* 悬停气泡同理：触屏没有 hover，留着只会在按下去时闪一下 */
    .tvp-btn::after { content: none; }
}

/* ---------- 还原：横屏 / 全屏 / 网页全屏 / 宽屏 → 全部控件回来 ----------
   四条路径都要覆盖，漏一条就会出现「转横屏了但按钮还是不回来」。

   ⚠ 特异性：竖屏的隐藏规则是 `.tvp-right > .tvp-btn:not(#tvpFull)` —— id 选择器
   让它比一条普通的 `.tvp.is-web-full .tvp-right > .tvp-btn` 更「重」，
   所以还原规则必须同样带上 :not(#tvpFull)，否则【改不动】、按钮回不来
   （实测踩到过：横屏能回来，网页全屏/宽屏回不来）。 */
@media (max-width: 768px) and (orientation: landscape) {
    .tvp-right > .tvp-btn,
    .tvp-right > .tvp-vol { display: flex; }
}
@media (max-width: 768px) {
    .tvp.is-web-full .tvp-right > .tvp-btn:not(#tvpFull),
    .tvp.is-web-full .tvp-right > .tvp-vol,
    .tvp.is-wide .tvp-right > .tvp-btn:not(#tvpFull),
    .tvp.is-wide .tvp-right > .tvp-vol { display: flex; }
}
/* 全屏：竖屏时也可能被强制全屏，所以这里不收 orientation 限制 */
.tvp:fullscreen .tvp-right > .tvp-btn:not(#tvpFull),
.tvp:-webkit-full-screen .tvp-right > .tvp-btn:not(#tvpFull),
.tvp:fullscreen .tvp-right > .tvp-vol,
.tvp:-webkit-full-screen .tvp-right > .tvp-vol { display: flex; }
.tvp:fullscreen .tvp-time,
.tvp:-webkit-full-screen .tvp-time { font-size: 13px; }
.tvp:fullscreen .tvp-progress,
.tvp:-webkit-full-screen .tvp-progress { height: 14px; }

/* 播放器打开时把看板娘和飘落花瓣收起来：
   #waifu-fab（z-index 9999）会压住右侧按钮，#sakura-flurry（z-index 10）会飘在画面上，
   B 站不会让装饰盖住视频 */
html.tvp-open #waifu,
html.tvp-open #waifu-fab,
html.tvp-open #sakura-flurry { display: none !important; }