/* ===========================================================================
   野果短剧仿站 — 站点补充样式（仅补齐线上由 JS 运行时生成、CSS 未覆盖的部分）
   主体样式全部来自线上同名资源：css/yg/base.css（entry）、vant.css（user）、
   clamp.css、poster.css、station.css、scoped.css（各页 <style> 作用域块）
   =========================================================================== */

/* ---- 图片懒加载（线上为 van-image lazy，这里用原生实现同款观感）---- */
img.loading {
    background-color: #474747;
    background-image: url(/static/img/yg/images/loading.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: clamp(2rem, 45%, 8rem);
}
img.is-loaded { background-image: none; background-color: transparent; }

/* ---- 骨架占位（.ph-cover 为封面兜底渐变，已在 poster.css）---- */

/* ---- 首页 Hero（主轮播）---- */
.yg-hero .swiper,
.yg-hero .swiper-wrapper,
.yg-hero .swiper-slide { width: 100%; height: 100%; }
.yg-hero .swiper-slide { flex-shrink: 0; position: relative; }
.yg-hero .swiper-pagination-bullet { opacity: .32; background: #fff; }
.yg-hero .swiper-pagination-bullet-active { background: var(--main-color); opacity: 1; }

/* ---- 播放器（/drama/video/{id}）---- */
.yg-player-wrap { position: relative; width: 100%; background: #000; }
.yg-player-wrap video { display: block; width: 100%; height: 100%; background: #000; }
.yg-player-wrap video::-webkit-media-controls { z-index: 2; }
.yg-player-fallback {
    position: absolute; inset: 0; display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
    padding: 3.2rem; text-align: center; color: #b5b7bf;
    background: linear-gradient(160deg, #26202a 0, #191720 50%, #111);
    font-size: 2.4rem; line-height: 3.6rem;
}
.yg-player-fallback a { color: var(--main-color); word-break: break-all; }
@media (width>=960px) { .yg-player-fallback { font-size: 1.4rem; line-height: 2.2rem; padding: 2rem; } }

/* ---- 剧集列表展开/收起按钮 ---- */
.episode-toggle {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 auto;
    height: 6.4rem; padding: 0 3.2rem; border: 0; border-radius: 6.4rem;
    background: #2c2d32; color: #f5f5f5; font-size: 2.4rem; line-height: 1;
    font-family: inherit; cursor: pointer;
}
.episode-toggle svg { width: 2.2rem; height: 2.2rem; transition: transform .15s; }
.episode-toggle.is-open svg { transform: rotate(180deg); }
@media (width>=960px) {
    .episode-toggle { height: 3.6rem; padding: 0 1.8rem; font-size: 1.4rem; }
    .episode-toggle svg { width: 1.4rem; height: 1.4rem; }
}

/* 展开态：取消 .ep-collapsed 的截断 */
.episode-list.ep-expanded > :nth-child(n+31) { display: flex !important; }

/* ---- 评论：展开/收起 ---- */
.comment-list .comment-item.is-hidden { display: none; }
.comment-list.is-expanded .comment-item.is-hidden { display: flex; }

/* ---- 搜索页 / 首页搜索框（PC 端）---- */
.yg-search-input::placeholder { color: #7f8189; }

/* ---- 富文本区域（关于/政策页）---- */
.rich h4 { color: #f5f5f5; font-size: 2.6rem; line-height: 4rem; margin-bottom: 1.2rem; }
.rich p { margin-bottom: 2rem; }
.rich p:last-child { margin-bottom: 0; }
.rich a { color: #f72d91; word-break: break-all; }
.rich img { max-width: 100%; height: auto; }
@media (width>=960px) {
    .rich h4 { font-size: 1.6rem; line-height: 2.6rem; margin-bottom: .8rem; }
}
.flash { animation: yg-flash 1.2s ease-in-out infinite; }
@keyframes yg-flash { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- 全局：去掉横向滚动条（与线上 div 滚动条样式一致）---- */
html, body { overflow-x: clip; }

/* ===========================================================================
   自定义语义类（原子类补不了的部分）
   site.css 在 utility.css 之后加载，同权重下这里能压过原子类。
   =========================================================================== */

/* ---- 单选指示器（充值页套餐卡 / 收银台支付方式）----
   底下的 input 走 .sr-only 隐藏，选中态由 JS 在 label 上打 data-checked="1"。
   不用 CSS :has(input:checked)：一是站内既有写法（paintMark/data-on）就是
   JS 打标记，二是部分老 WebView 不支持 :has。 */
.yg-radio {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 0.2rem solid #2b2b35;
    border-radius: 50%;
    transition: border-color .15s;
}
/* 套餐卡右上角：卡片是纵向堆叠，指示器浮在角上不占位。
   本站只产出了 top-0/right-0，top-[1.2rem] 之类一条都没有，所以偏移必须写在这里。
   （卡片的 .relative 已存在，不依赖新增类。） */
.yg-radio--corner {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
}
@media (width>=960px) {
    .yg-radio--corner { top: 0.8rem; right: 0.8rem; }
}
.yg-radio::after {
    content: "";
    display: block;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.4rem auto 0;
    border-radius: 50%;
    background: transparent;
    transition: background-color .15s;
}
[data-checked="1"] .yg-radio { border-color: #f72d91; }
[data-checked="1"] .yg-radio::after { background: #f72d91; }
@media (width>=960px) {
    .yg-radio { width: 1.6rem; height: 1.6rem; border-width: 0.1rem; }
    .yg-radio::after { width: 0.8rem; height: 0.8rem; margin-top: 0.3rem; }
}

/* ---- 剧集 VIP 角标（详情页 / 播放页抽屉）----
   定位到单元格右上角。尺寸写在类里给 svg，不依赖任意值类 ——
   原来的 h-[1.4rem]/desktop:w-[1.2rem] 在本站都没产出，
   导致皇冠被压成 2rem 宽 × 1.2rem 高。 */
.yg-vip-mark {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    z-index: 1;
    display: block;
    color: #f72d91;
    line-height: 0;
}
.yg-vip-mark svg { width: 1.8rem; height: 1.8rem; }
@media (width>=960px) {
    .yg-vip-mark { top: -0.3rem; right: -0.3rem; }
    .yg-vip-mark svg { width: 1.2rem; height: 1.2rem; }
}

/* ---- new 药丸：挪到左上角 ---- */
/* 一集可能同时是「锁定」和「新」，皇冠占右上角，new 必须让开。
   偏移只能写在这里：-left-[0.3rem] 之类的负向任意值类本站一条都没产出。 */
.yg-new-mark {
    position: absolute;
    top: -0.5rem;
    left: -0.3rem;
    z-index: 1;
    white-space: nowrap;
    border-radius: 0.4rem;
    background: #f72d91;
    padding: 0 0.4rem;
    font-size: 1rem;
    line-height: 1.4rem;
    color: #ffffff;
}

/* ---- 收藏 / 追剧按钮的已选中态 ----
   paintMark() 只负责打 data-on，视觉反馈在这里。

   图标走外部 sprite（<use href="…icons.svg#i-collect">），<symbol> 被克隆进
   <use> 的影子树 —— 宿主页面的后代选择器够不到里面的 <path>，所以
   `.js-collect[data-on="1"] svg path{fill:…}` 是无效写法。
   能穿透 <use> 边界的只有继承来的 color：i-collect 的 path 是
   stroke="currentColor" fill="none"，改 color 即可把描边染成主题粉
   （presentation attribute 的 fill="none" 也压不掉，且它是空心星）。 */
.js-collect[data-on="1"] svg { color: #f72d91; }
.js-collect[data-on="1"] span { color: #f72d91; }

/* ===========================================================================
   960px 以下的 rem 基准加上限
   ---------------------------------------------------------------------------
   base.css（线上 entry.css 原件）里：
       :root { --base-font-size: 1.33333vw }        /* 移动端 */
       @media (width>=960px) { --base-font-size: 10px }   /* 桌面端 */

   而 960px 以下用的是**竖排移动布局**（PC 浏览器打开只占约 960px 宽、两侧留白）。
   1.33333vw 只在 750px 视口时正好等于 10px，再宽就一路涨且无上限：

       视口 750 → 基准 10.00px → 正文 2.4rem = 24.0px
       视口 900 → 基准 12.00px → 正文 2.4rem = 28.8px
       视口 955 → 基准 12.73px → 正文 2.4rem = 30.6px

   于是 750–959px 这段（手机横屏、小平板、以及把 PC 窗口拖窄）文字和按钮
   大到失真，看着像「老年版」；到 960px 才靠桌面端 10px 硬落地砸回来。

   用 min() 封顶：750px 及以下**一个像素都不变**（手机端完全不受影响），
   750–959px 锁在 10px，正好与 960px 桌面端无缝衔接，也不会有落地跳变。
   site.css 最后加载，同权重即胜，不必用 !important。
   =========================================================================== */
:root { --base-font-size: min(1.33333vw, 10px); }
/* 桌面端保持原值：这条必须留在断点块里，否则会把 ≥960px 一起改掉 */
@media (width>=960px) { :root { --base-font-size: 10px; } }

/* ---- 已追剧按钮变灰 ----
   六个 .js-chase（详情页移动/桌面、播放页顶栏/抽屉、首页 banner）底色全是
   .bg-[#f72d91]、文字是 text-[#27282d] / text-[#111214]。
   这里用 (0,2,0) 的选择器盖掉那些 (0,1,0) 的原子类 —— site.css 在最后加载，
   同权重即胜，所以只要权重高过对面就够，不需要 !important。
   一起改 color 是因为按钮里的 i-plus 图标是 stroke="currentColor"，
   不跟着变的话会剩一个粉色的加号挂在灰底上。 */
.js-chase[data-on="1"] { background-color: #27282d; color: #9c9c9c; }
/* 首页 banner 那张桌面端固定 w-[13.5rem]，变灰后仍是可点区域，悬停给点反馈 */
.js-chase[data-on="1"]:hover { background-color: #32333a; }