/* 视频站在源皮肤之上的增量样式。
   卡片、分类导航、列表容器【全部沿用】style.css 里原有的
   .tabBox / .choseBar / .choseBox / li / .posBar / .tabTit —— 尺寸、底色、
   navbg 与 cur.png 背景图都不覆盖。本文件只补两类东西：
     ① 源皮肤没有的元素（分页、搜索框、播放器、推荐角标）；
     ② 源皮肤按「固定 6 个栏目、卡片里只有按钮」设计、换成视频后必须调整的
        少数几处（分类可能多于 6 个要能滑动；标题长度不定要能省略）。 */

/* ---------- 分类导航 ---------- */
/* 源样式是 span{width:16.66%;float:left}，正好排 6 个。
   视频分类由后台随便加，第 7 个开始会换行——而 .tabTit 是固定 .87rem 高且
   overflow:hidden，换行的那些直接看不见了。
   改成 flex 横向滚动：≤6 个时每格仍是 16.66%，和源模板一模一样；
   多出来的可以左右滑，不会凭空消失。 */
.top .tabTit {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.top .tabTit::-webkit-scrollbar { display: none; }
.top .tabTit span {
    float: none;
    flex: 0 0 16.66%;
    min-width: 1.4rem;   /* 分类名较长时不至于挤成一团 */
}

/* ---------- 卡片上的增量 ---------- */
/* 源样式给 img 写死了 width:3.41rem; height:2.63rem —— 封面只要不是这个比例
   就会被硬拉变形（人脸压扁/拉长）。
   cover = 按原比例放大到铺满整张卡片，超出的部分裁掉：不留白、不变形。
   object-position 取 center，裁的是四周而不是只裁一边，主体一般在中间。
   width/height 100% 是必须的：源样式那对固定 rem 值只在设计稿宽度下等于卡片，
   写成 100% 才是真正跟着卡片走。 */
.choseBox li > .vcover {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    background: linear-gradient(145deg, #292929, #1b1b1b);
}
.choseBox li > .vcover img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.choseBox li > .vcover img[hidden] { display: none; }
.vcover-empty {
    position: absolute;
    inset: 0 0 .61rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1rem;
    color: #8d887c;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: .2rem;
    letter-spacing: .02rem;
}
.vcover-empty svg {
    width: .55rem;
    height: .55rem;
    fill: none;
    stroke: #746f64;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* .posBar 里原本是「立即申请按钮 + 活动规则」两个固定宽度的元素，
   换成「播放量 + 标题」后标题长度不定，必须能省略号截断，
   否则长标题会把播放量挤出这条 .61rem 高的横条。 */
.choseBox .posBar {
    /* 封面图为了压住缺省占位图使用了 z-index:1。标题条也必须显式放在
       它上面，否则图片完成加载后会把播放量和标题一起盖住。 */
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 0 .15rem;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.choseBox .posBar .vviews {
    flex: none;
    color: #e8d49c;
    font-size: .19rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: .61rem;
    margin-right: .14rem;
}
/* 覆盖源 .rule 的 float/margin：在 flex 容器里它要占满剩余宽度才能省略号。
   同时去掉它的 notice.png 背景图标（那是「活动规则」用的感叹号，
   放在视频标题前面没有意义），连带把给图标让位的 padding-left 一起去掉。 */
.choseBox .posBar .rule {
    float: none;
    flex: 1;
    min-width: 0;
    margin-right: 0;
    background: none;
    padding-left: 0;
    color: #f2f2f2;
    font-size: .2rem;
    font-weight: 500;
    letter-spacing: .005rem;
    line-height: .61rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 推荐角标：源皮肤没有这个元素 */
.choseBox li .vrec {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    color: #18181a;
    background: #ffe88d;
    font-size: .2rem;
    line-height: .34rem;
    padding: 0 .12rem;
}

/* 列表为空/加载中的占位。源皮肤的 ul 是 flex，li 直接放文字会被挤成一列窄条，
   所以显式让它占满整行。 */
.choseBox li.vtip {
    width: 100%;
    height: auto;
    background: none;
    color: #999;
    text-align: center;
    padding: .6rem 0;
    font-size: .26rem;
}

/* ---------- 分类/搜索的标题行 ---------- */
/* 沿用 .ruleBox h2 的观感（金线 + 同字号），不新造一套 */
.vhead {
    color: #ffe88d;
    font-size: .28rem;
    line-height: .7rem;
    margin: .1rem .05rem 0;
    padding-left: .14rem;
    border-left: 3px solid #ffe88d;
}
.vhead .vhead-n { color: #999; font-size: .24rem; margin-left: .12rem; }

/* ---------- 分页 ---------- */
/* 上一页 / 页码 / 下一页 三格等宽居中。
   两侧按钮固定同宽，页码在正中间——只有一侧有按钮时（第一页、最后一页）
   页码也不会跟着左右跳，翻页时视线不用重新找。 */
.vpager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .24rem;
    padding: .1rem 0 .5rem;
    color: #f6e4b3;
    font-size: .26rem;
}
.vpager[hidden] { display: none; }
/* 沿用站点金色胶囊的观感：金边、金字、圆角，按下有反馈 */
.vpager a {
    flex: none;
    min-width: 1.7rem;
    box-sizing: border-box;
    text-align: center;
    color: #ffe88d;
    text-decoration: none;
    border: 1px solid #edd9a7;
    border-radius: .4rem;
    line-height: .64rem;
    -webkit-tap-highlight-color: transparent;
}
.vpager a:active { background: rgba(255, 232, 141, .18); }
/* 首页/末页那一侧的空占位，宽度与按钮一致 */
.vpager-ph { flex: none; min-width: 1.7rem; }
/* 页码本身固定宽度居中，两侧按钮缺一个时它仍在正中 */
.vpager .vpager-cur {
    flex: none;
    min-width: 1.2rem;
    text-align: center;
    color: #cfc09a;
    font-size: .24rem;
}

/* ---------- 搜索框 ---------- */
.vsearch {
    display: flex;
    gap: .16rem;
    padding: .2rem;
}
.vsearch input {
    flex: 1;
    min-width: 0;
    background: rgba(0, 0, 0, .45);
    border: 1px solid #edd9a7;
    border-radius: .08rem;
    color: #f6e4b3;
    font-size: .26rem;
    padding: .14rem .18rem;
    outline: none;
}
.vsearch input::placeholder { color: #8a7f6a; }
.vsearch button {
    flex: none;
    background: #ffe88d;
    color: #18181a;
    border: 0;
    border-radius: .08rem;
    font-size: .26rem;
    padding: 0 .34rem;
}

/* ---------- 播放页 ---------- */
/* 详情标题和返回按钮同行，标题必须可收缩，否则长标题会把按钮顶出屏幕。 */
.ruleBox h2 #act-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #f2f2f2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: .24rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .005rem;
}
.ruleBox h2 .backbtn { flex: none; margin-left: .16rem; }

/* 播放器按 16:9 占满内容宽度。用 aspect-ratio 而不是老式 padding-top 撑高：
   内层元素可以直接 height:100%，不必再绝对定位。 */
.hd-player-box { width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.hd-player { width: 100%; height: 100%; display: block; border: 0; }
/* DPlayer 自己会在容器里铺满，但它的根节点默认是 position:relative 的块，
   高度靠内容撑——显式给满高，否则 16:9 的框里只有上面一条控制栏。 */
.hd-player-box .dplayer { width: 100%; height: 100%; }
.hd-player-box .dplayer-video-wrap,
.hd-player-box .dplayer-video { width: 100%; height: 100%; }
/* 封面按比例铺满，不拉伸 */
.hd-player-box .dplayer-video-wrap .dplayer-video { object-fit: contain; }

/* 无播放地址/播放器缺失时的提示，居中在播放区里 */
.hd-player-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #999;
    font-size: .26rem;
    text-align: center;
    padding: .3rem;
    box-sizing: border-box;
}
.hd-play-meta {
    color: #b9b3a4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: .2rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    padding: .16rem .2rem 0;
}
.hd-play-meta .hd-cat { color: #ffe88d; margin-right: .16rem; }