/* 移动端全屏播放页（≤1023px）。
 *
 * 与 pages/hg-player.css 分开是有意的 —— 那份是从黄果站一字未改抄过来的，
 * 这份全是本站新增（同 components/hg-player-vip.css 的理由）。由 video.php 的
 * pageCss 排在 hg-player.css / hg-player-vip.css 之后加载，同权重下本文件胜出。
 *
 * 这一页几乎不写新样式：.hg-play__* 那一套竖滑 feed 的样式**早就躺在
 * static/web/css/common.css 里**（桌面段 + 移动段都调好了），只是站内一直没有
 * 模板产出它 —— 属于没启用的 v1。这里只做四件事：
 *   1. 把 v1 那套绑在 [data-play-page] 上的页面级规则改绑到我们自己的 [data-hg-fs]；
 *   2. 把这一层从「页头下面的一个区块」提成真正的整屏覆盖层；
 *   3. 覆盖 v1 的两处移动端设定（动作按钮不显示文字、缺图）；
 *   4. 桌面端整块收掉。
 * 其余（scroll-snap、底部条、进度条、抽屉几何、5 列选集格…）一律复用，不重复声明。
 */

/* ── 桌面端：整块不出现 ─────────────────────────────────────────────────── */
/* 这是本文件最重要的一条：整个移动端 DOM 在 ≥1024px 完全不参与布局，
   桌面端那份页面（播放器 + 右侧选集 + 简介 + 猜你喜欢）行为和渲染逐字节不变。 */
@media (min-width:1024px){
  .hg-fs{display:none!important}
}

@media (max-width:1023px){

  /* ── 页面级：滚动锁定与内边距 ─────────────────────────────────────────────
     v1 同样的两条规则绑在 [data-play-page] 上（common.css），换成我们的属性。
     走的是轻量 CSS 习惯用法（同 components/hg-auth.css 的
     body.is-hg-auth-open{overflow:hidden}）—— **不用** common.js 里那套给弹窗
     用的重型锁（position:fixed + top:-scrollY + capture 阶段 wheel/touchmove
     守卫）：这是整页，不是弹窗，也不需要「滚到底部时阻止穿透」那类处理。 */
  body:has([data-hg-fs]){overflow:hidden}
  body:has([data-hg-fs]) .hg-main>.main{padding:0}
  /* 页脚在整屏层下面本来就看不见，但留着它会撑出一个比视口更高的文档，
     移动端下拉时露白。直接收掉。 */
  body:has([data-hg-fs]) .hg-footer{display:none}

  /* ── 桌面那一整棵树在移动端要**真正收掉**，不能只是被盖住 ───────────────────
     .hg-fs 是 position:fixed 的整屏层，把桌面树盖住了 —— 但「盖住」不等于
     「不渲染」：桌面树照样参与布局（实测 .hg-web-play__main 高 1103px、
     .hg-web-play__related 高 1372px），里面 58 个 <img>（猜你喜欢整版封面 +
     简介卡海报）照样发请求。整页 221 个 <img>，移动端只需要 feed 那 163 个。
     图片一多、解码一挤，主线程被占住，用户报的「加载图片时页面会卡住点不了」
     就是这么来的。display:none 之后这些图连下载都不会发起。

     注意**不要**动 hg-player.css 里那几条原站的移动端规则 —— 那份是原站一字未改
     的副本（文件头写明），这里补一条本站的即可。 */
  body:has([data-hg-fs]) .hg-web-play__main,
  body:has([data-hg-fs]) .hg-web-play__introcard,
  body:has([data-hg-fs]) .hg-web-play__synopsis,
  body:has([data-hg-fs]) .vd-anchor-nav,
  body:has([data-hg-fs]) .hg-web-play__related,
  body:has([data-hg-fs]) .hg-breadcrumb{
    display:none;
  }

  /* ── 整屏覆盖层 ──────────────────────────────────────────────────────────
     z-index 取 2100：高于 .dx-overlay / .dx-drawer（2000/2001）、.hg-fab（1900）、
     页头（112）、历史弹窗（2001）—— 所以被盖住的悬浮球和历史弹窗只是够不着，
     不需要再写「按页隐藏 FAB」的规则（.hg-fab 全站也没有这样的钩子）。
     低于登录弹窗（12000），所以未登录点收藏仍然弹得出来；
     远低于年龄门（2147483000+），首次访问被年龄门盖住是预期行为，不为它设计。 */
  .hg-fs{
    position:fixed;
    inset:0;
    z-index:2100;
    background:#000;
  }

  /* 覆盖 common.css 里 .hg-play__stage 的 calc(100vh - var(--dx-header-height))：
     这一层是全屏的，不再让出页头那 56px。100vh 在前、100dvh 在后 ——
     与 common.css 既有写法一致，老 Android WebView 不认 dvh 会落到 100vh。 */
  .hg-fs .hg-play__stage{
    height:100vh;
    height:100dvh;
    min-height:100vh;
    min-height:100dvh;
  }

  /* ── slide 内容 ──────────────────────────────────────────────────────────
     v1 的 slide 里放的是 <img class="hg-play__poster">（一张静帧），本站的 slide
     里是真正要播的 <video>，所以布局由 slot 决定。
     比例问题：库里 yeguo_episode.video_width/video_height 整列是 0、
     yeguo_media.video_orientation 整列是 NULL，**比例不能从库里读**。这里用一套
     对 16:9 和 9:16 都成立的形态：模糊封面铺满打底（cover），视频按原比例居中
     （contain）。想更精细可以在 loadedmetadata 里按 videoWidth/videoHeight 调，
     但唯一可靠的比例来源是媒体元素本身。 */
  .hg-fs .hg-play__media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:100%;
  }
  .hg-fs .hg-play__slot{
    position:absolute;
    inset:0;
    z-index:1;
  }
  .hg-fs .hg-play__slot video{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    /* 背景**必须**是透明的。这里写 #000 会在整个 390×844 的盒子上刷一层不透明黑，
       object-fit:contain 那两条留白（16:9 内容在竖屏上就是上下两大条）就被盖成纯黑，
       .hg-play__blur 那层模糊铺底等于白做 —— 实测就是这么被吃掉的。 */
    background:transparent;
    object-fit:contain;
  }

  /* 模糊铺底。这里的 object-fit 必须带 !important：hg-shell.css 里有一条
     img:not([width]):not([height]){object-fit:contain}，特异性(0,2,1)高于
     common.css 的 .hg-play__blur img{object-fit:cover}(0,1,1)，且它后加载 ——
     不给 !important 的话 <img> 会算成 contain，模糊底跟着内容比例走、盖不满，
     竖屏上依然露黑边。桌面那份 init.html 的图都带 width/height 属性所以逃过了这条，
     本层的 poster 是运行时才知道比例的，不能靠属性绕。 */
  .hg-fs .hg-play__blur img{
    object-fit:cover!important;
  }

  /* ── 覆盖 v1 的两处移动端设定 ───────────────────────────────────────────── */

  /* 1) v1 在移动端把动作按钮的文字藏了（.hg-play__action-label{display:none}），
        而参考设计里是「图标 + 文字」一列。露出来。 */
  .hg-fs .hg-play__action-label{
    display:block;
    font-size:12px;
    line-height:1.2;
  }
  /* 上图下字的竖排。v1 的 .hg-play__action 是 column + gap:8px，方向已经对了。 */
  .hg-fs .hg-play__action{
    flex-direction:column;
    gap:6px;
    border:0;
    background:0 0;
    padding:0;
  }
  .hg-fs .hg-play__side{
    /* v1 给的是 bottom:180px。本页底部条比它高（多了剧名两行 + 集数），
       再往下压一点，免得动作列和底部条叠在一起。 */
    bottom:210px;
  }

  /* 选中态。桌面那套规则的选择器是
       .hg-web-play__action.is-liked .hg-web-play__like-icon{fill:currentColor;…}
     而本层的按钮是 .hg-play__action（v1 的类名），**一条都命不中** ——
     于是点赞/追剧/收藏点下去只会改 data-on 和 is-liked 类，图标始终是空心描边，
     看着像没生效。这里把同一套皮肤补上。
     状态类仍然是 hg-player.js 的 paintAction 在维护（is-liked / is-favorited，
     见那里的 ACTION_CLASS），不另起一套。 */
  .hg-fs .hg-play__action .hg-web-play__like-icon{
    color:#fff;
    stroke:currentColor;
    fill:none;
  }
  .hg-fs .hg-play__action .hg-web-play__collect-icon{
    color:#fff;
    fill:none;
    stroke:currentColor;
  }
  .hg-fs .hg-play__action.is-liked .hg-web-play__like-icon{
    color:var(--color-red);
    fill:currentColor;
    stroke:currentColor;
  }
  .hg-fs .hg-play__action.is-favorited .hg-web-play__collect-icon{
    color:var(--color-primary);
    fill:currentColor;
  }

  /* 2) v1 的顶部返回按钮引的是 /static/web/images/play/back-m.svg ——
        该文件**不存在**（那套移动样式引的 6 个图都没进仓）。这里改用内联 svg，
        按钮本身仍沿用 v1 的 .hg-play__back 定位。 */
  .hg-fs .hg-play__back{
    position:absolute;
    left:12px;
    top:12px;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(0,0,0,.45);
    color:#fff;
    cursor:pointer;
  }

  /* ── 底部条 ──────────────────────────────────────────────────────────────
     v1 的 .hg-play__bottom 已给了 padding 与渐变底。本页的进度条排在最上面
     （剧名下面），把它的上下外边距收一下，别把三行内容顶出屏。 */
  /* 进度条**可拖动**，但 v1 给的高度只有 14px（.hg-play__progress--mobile），
     手指按不准，拖到一半就滑出去了。把热区抬到 28px：只改盒子高度，
     里面的 track/fill/dot 都是 top:50% + translateY(-50%) 居中的，跟着走，
     视觉上仍是原来那条 2px 的细线。 */
  .hg-fs .hg-play__progress--mobile{
    height:28px;
    margin:0 0 10px;
    touch-action:none;   /* 拖动进度条时不要让浏览器抢去滚页面 */
  }

  /* 播放/暂停那枚大圆钮只在「有东西可播」时露出来。锁住的集（无视频、上面压着
     会员锁遮罩）和链尾（不是一集）上画一个播放键，点下去什么都不发生 ——
     看着就像播放器坏了。状态由 hg-player-mobile.js 写在根节点上。 */
  .hg-fs[data-hg-fs-noplay] .hg-play__center-btn{
    display:none;
  }
  .hg-fs .hg-play__meta{
    margin-bottom:10px;
    max-width:none;
  }
  /* 剧名 + 集号同一行（集号是 v1 的 .hg-play__ep 药丸，样式已有）。 */
  .hg-fs .hg-play__meta h1{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:17px;
    line-height:1.25;
    font-weight:600;
    color:#fff;
  }
  /* 剧名可缩（长标题省略号），集号药丸不缩 —— 否则长剧名会把「第N集」挤出屏幕，
     而它正是这一行的关键信息。 */
  .hg-fs .hg-play__meta h1 > span[data-hg-fs-title]{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 集号药丸 v1 在移动端是**故意藏掉的**：common.css 的 (max-width:1023px) 段里
     有一条 .hg-play__meta .hg-play__ep{display:none}（它那套 v1 竖滑页把集号
     放在别处）。但本层是全屏播放，底部只有剧名一行 —— 不显示集号就完全看不出
     在播第几集。这里显式开回来，并用主色让它读起来就是个「集数标记」，
     与抽屉里当前集的高亮同色。 */
  .hg-fs .hg-play__meta .hg-play__ep{
    display:inline-flex;
    flex-shrink:0;
    height:24px;
    padding:0 10px;
    border-color:rgba(255,210,28,.45);
    background:rgba(255,210,28,.12);
    color:var(--color-primary);
    font-weight:600;
  }
  .hg-fs .hg-play__ep-bar-main em{
    font-style:normal;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,.55);
  }

  /* ── 转菊花 ──────────────────────────────────────────────────────────────
     本层用自己的 [data-hg-fs-loading] 节点（不用桌面的 [data-web-play-loading]：
     hg-player.js 的 busy() 也操作后者，而它移动端的播放器那段已被 fsOwns 关掉，
     共用会变成两边互相开关）。

     动画**自己写**，没有复用 hg-player.css 那套 .xgplayer-enter-bar1..12：
     那套每根条写的是 animation:fade 1s linear infinite，但全站
     （static/ 下所有 css）**没有 @keyframes fade 的定义**，
     于是 base 规则里的 opacity:0 一直生效 —— 桌面端那个转菊花其实是永不显示的
     空盒子。那是抄原站样式时带进来的既有问题，不在这里顺手改（hg-player.css 是
     原站一字未改的副本，动它就失去了对比价值），本层另起一套能真正转起来的。 */
  .hg-fs .hg-play__loading{
    position:absolute;
    inset:0;
    z-index:30;
    display:none;
    pointer-events:none;
    background:rgba(0,0,0,.25);
  }
  .hg-fs .hg-play__loading.is-on{display:block}
  .hg-fs .hg-play__loading .xgplayer-enter-spinner{
    position:absolute;
    left:50%;
    top:50%;
    width:64px;
    height:64px;
    transform:translate(-50%,-50%);
  }
  .hg-fs .hg-play__loading .xgplayer-enter-spinner div{
    position:absolute;
    left:45%;
    top:45%;
    width:6%;
    height:13%;
    border-radius:30px;
    background:rgba(255,255,255,.75);
    opacity:0;
    animation:hg-fs-fade 1s linear infinite;
  }
  /* 12 根条各自的朝向与相位差。与 hg-player.css 那套同形，只是动画名换成
     本文件自己定义的 hg-fs-fade。 */
  .hg-fs .hg-play__loading .xgplayer-enter-bar1{transform:rotate(0deg) translateY(-140%);animation-delay:0s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar2{transform:rotate(30deg) translateY(-140%);animation-delay:-.0833s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar3{transform:rotate(60deg) translateY(-140%);animation-delay:-.1666s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar4{transform:rotate(90deg) translateY(-140%);animation-delay:-.2499s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar5{transform:rotate(120deg) translateY(-140%);animation-delay:-.3332s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar6{transform:rotate(150deg) translateY(-140%);animation-delay:-.4165s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar7{transform:rotate(180deg) translateY(-140%);animation-delay:-.4998s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar8{transform:rotate(210deg) translateY(-140%);animation-delay:-.5831s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar9{transform:rotate(240deg) translateY(-140%);animation-delay:-.6664s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar10{transform:rotate(270deg) translateY(-140%);animation-delay:-.7497s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar11{transform:rotate(300deg) translateY(-140%);animation-delay:-.833s}
  .hg-fs .hg-play__loading .xgplayer-enter-bar12{transform:rotate(330deg) translateY(-140%);animation-delay:-.9163s}

  /* ── 会员锁遮罩 ──────────────────────────────────────────────────────────
     复用 components/hg-player-vip.css 里已经写好、桌面端也在用的
     .hg-web-play__lock 一族（半透明压底、皇冠、两粒按钮），只补定位 ——
     那里的 inset:0 是相对桌面 .hg-web-play__viewport 的，这里是相对 slide。 */
  .hg-fs .hg-web-play__lock{
    z-index:3;
  }

  /* ── 锁住的集：把封面显示出来 ─────────────────────────────────────────────
     锁集没有 <video>，整屏只剩 .hg-play__blur 那层模糊铺底（opacity .35），
     再压 .hg-web-play__lock 的 rgba(0,0,0,.78)，看起来就是纯黑一块 ——
     用户报的「显示开通vip时封面图要显示出来这样好看」。
     三处配合：清晰封面顶上来 + 模糊底加浓当氛围 + 遮罩减薄。 */
  .hg-fs .hg-play__cover{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }
  .hg-fs .hg-play__cover img{
    /* 桌面那套 .hg-play__poster 把宽高都锁成 100%!important + cover，直接用会把
       竖版封面裁得只剩中间一条。这里要的是「整张看得见」—— contain 居中，
       上下留白由下面的模糊底补（那正是它模糊铺底该干的活）。 */
    width:auto!important;
    height:auto!important;
    max-width:100%;
    max-height:100%;
    object-fit:contain!important;
    border-radius:12px;
  }
  /* 模糊底加浓：锁集的封面是主角，不用它抢戏，只当边缘氛围。 */
  .hg-fs .hg-play__slide.is-locked .hg-play__blur img{
    filter:blur(30px);
    opacity:.5;
  }
  /* 遮罩减薄。桌面那份写的是 .78（压在海报上让字读得清），这里是整屏竖版画面，
     .78 一压封面就没了。.38 + 上下渐变，字照样读得清，封面也露得出来。 */
  .hg-fs .hg-play__slide.is-locked .hg-web-play__lock{
    background:
      linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.25) 65%, rgba(0,0,0,.55) 100%),
      rgba(0,0,0,.3);
  }
  /* 遮罩里那几行字压在整个封面上，加一层描边式的投影才在任何封面上都读得清。 */
  .hg-fs .hg-play__slide.is-locked .hg-web-play__lock-title{
    text-shadow:0 1px 6px rgba(0,0,0,.7);
  }
  /* 皇冠与按钮抬高一层：封面是亮色时白色标题、灰色边框按钮都会糊掉。 */
  .hg-fs .hg-web-play__lock-icon svg{
    filter:drop-shadow(0 1px 6px rgba(0,0,0,.6));
  }
  /* 「登录」那粒 ghost 按钮的边框取自 --color-border（很淡），压在亮色封面上
     几乎看不见，只剩「登录」两个字飘着。移动端这层给足对比。 */
  .hg-fs .hg-web-play__lock-btn{
    min-height:40px;   /* 桌面 36px，手指点着偏小 */
  }
  .hg-fs .hg-web-play__lock-btn.is-ghost{
    border-color:rgba(255,255,255,.55);
    background:rgba(0,0,0,.35);
    color:#fff;
  }

  /* ── 选集抽屉 ────────────────────────────────────────────────────────────
     v1 已给了移动端几何（bottom:0、height:min(78vh,640px)、上圆角）。
     抽屉里的格子由 hg-player-mobile.js 从 JSON blob 渲染，用的就是 v1 的
     .hg-play__ep-item（含 is-active / is-vip）。这里只补抽屉的滚动与内边距。 */
  .hg-fs .hg-play__panel{
    position:fixed;
    z-index:2200;   /* 高于本层 2100，否则抽屉被自己盖住 */
    padding:16px 16px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  /* 抽屉标题行。.hg-play__ep-head 是 .hg-play__panel-head（flex + space-between）
     的子项，默认按内容宽收缩 —— 只剩 98px，里面的剧名和「全N集」被 space-between
     顶到贴在一起，读出来是「牛头人选集全2集」（实测 h3 右边界与 span 左边界都是 87px）。
     让它撑满、剧名可缩、两者之间留出固定间距。 */
  .hg-fs .hg-play__ep-head{
    flex:1;
    min-width:0;
    gap:10px;
  }
  .hg-fs .hg-play__ep-head h3{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .hg-fs .hg-play__ep-head span{
    flex-shrink:0;
  }

  /* 抽屉里的加锁集沿用皇冠角标（规则在 hg-player-vip.css 的 .hg-vip-mark，
     但那条挂在 .hg-web-play__ep 上，这里补一份给 .hg-play__ep-item）。 */
  .hg-fs .hg-play__ep-item.is-vip{
    color:rgba(255,255,255,.4);
  }
  .hg-fs .hg-play__ep-item .hg-vip-mark{
    position:absolute;
    top:2px;
    right:2px;
    width:12px;
    height:12px;
    display:flex;
    color:var(--color-primary);
    pointer-events:none;
  }
  .hg-fs .hg-play__ep-item .hg-vip-mark svg{
    width:100%;
    height:100%;
    fill:currentColor;
    display:block;
  }
  /* 抽屉里当前剧的集与后续候选剧的集分开看：中间插一条分隔。
     分隔由 JS 渲染时加 .is-sep 的空格子实现。 */
  .hg-fs .hg-play__ep-item.is-sep{
    grid-column:1 / -1;
    height:34px;
    justify-content:flex-start;
    background:0 0;
    border:0;
    color:rgba(255,255,255,.5);
    font-size:13px;
    pointer-events:none;
  }

  /* ── 链尾 ────────────────────────────────────────────────────────────────
     它是 feed 里的最后一张 slide（带 .hg-play__slide，所以吸附与高度都走 v1 的
     规则），这里只把它摆成居中的一列：一句提示 + 一个到下一部的真链接。 */
  .hg-fs .hg-fs__boundary{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:24px;
    box-sizing:border-box;
    text-align:center;
    background:#000;
  }
  .hg-fs__boundary-title{
    margin:0;
    font-size:15px;
    color:rgba(255,255,255,.6);
  }
}

/* ── 转菊花的动画 ───────────────────────────────────────────────────────────
   hg-player.css 那套引的 @keyframes fade **全站没有定义**（见上面注释），
   所以这里自带一份。放在媒体查询外：keyframes 的作用域本来就是文档级，
   重复定义一份无害，但只在这一页会用到，不进 common.css。 */
@keyframes hg-fs-fade{
  0%{opacity:1}
  100%{opacity:.15}
}