/*!
 * 播放弹窗补丁 —— 只覆盖 #play-modal 内部，不碰主题本身的观感。
 * 加载顺序：style.css → app.css → app.play.css（本文件最后加载），
 * 所以「同特异性、后加载」即可覆盖主题里写死的规则；必要时才加 !important。
 */

/* ================================================================
 * P0-1 桌面端把「直链 / 复制直链 / PotPlayer / 版本」整块恢复出来
 * ----------------------------------------------------------------
 * 主题 style.css 在 @media(min-width:1239px) 里给
 *   .player-info .video-info-main { display: none }
 * 把整块外抛直链的入口隐藏了（宽屏用户恰好是外播网关的核心用户），
 * 而后续所有媒体查询只改 padding、没有任何 display:block 覆盖。
 * 这里用同特异性（都是 .player-info .video-info-main）把它显式打开；
 * 本文件在 style.css 之后加载，因此胜出，不需要 !important。
 * ================================================================ */
#play-modal .player-info .video-info-main {
  display: block;
}

/* 直链那一行：标题 + 输入框 + 两个按钮。
 * 原内联 width:60% 在宽屏下把输入框压得很窄、两个按钮又挤在右边，
 * 这里改成「输入框吃满剩余宽度、按钮固定宽度」，并用 gap 统一间距。 */
#play-modal .video-info-main .video-info-items {
  align-items: center;
  flex-wrap: wrap;
}
#play-modal .video-info-main .video-info-item {
  flex: 1 1 auto;
  min-width: 0;               /* 允许内部 input 收缩，避免撑破容器 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
#play-modal #p-url {
  /* 覆盖 index.html 的内联 width:60%：flex-basis 撑满，按钮之外都是输入框 */
  flex: 1 1 320px;
  width: auto !important;
  min-width: 0;
  box-sizing: border-box;
}
#play-modal #p-copy,
#play-modal #p-pot {
  flex: 0 0 auto;
  white-space: nowrap;        /* 按钮文案「PotPlayer 播放」不折行 */
}
/* .btn-aux 自带 margin-left:10px，与上面的 gap 叠加会变成 20px，去掉它统一间距 */
#play-modal #p-pot { margin-left: 0; }

/* 版本按钮行：同样用 flex + gap，去掉首按钮多余的外边距 */
#play-modal #p-versions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#play-modal #p-versions .btn-aux { margin-left: 0; }

/* ================================================================
 * P0-2 无分集（电影）时让播放器占满整宽
 * ----------------------------------------------------------------
 * 桌面端 .player-box-main / .player-info 宽度写死 calc(100% - 380px)，
 * 而 .player-box-side 是 position:absolute；JS 隐藏侧栏并不会回收那 380px，
 * 于是电影播放时右侧留一块黑条。JS 在无分集时给这两个元素加 .full，
 * 这里把宽度拉满。重新打开有分集的内容时 JS 会移除该类。
 * ================================================================ */
#play-modal .player-box-main.full,
#play-modal .player-info.full {
  width: 100%;
}

/* ================================================================
 * P0-3 关闭按钮（#p-close 已移到 #play-modal > .p-close-wrap）
 * ----------------------------------------------------------------
 * 之前它在 #p-side 里，而无分集时整个侧栏 display:none，
 * 电影播放时屏幕上没有任何可见关闭按钮。现在它固定在弹窗右上角：
 *  - position:fixed 保证不受内部滚动/侧栏显隐影响；
 *  - z-index 高于播放器与侧栏，永远可点；
 *  - 自带深色圆形底 + 明确白色图标，不依赖皮肤继承的 color，
 *    因此深浅两种皮肤下都看得见（白皮肤下弹窗遮罩仍是 rgba(0,0,0,.86)）。
 * ================================================================ */
#play-modal .p-close-wrap {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));    /* 适配刘海屏安全区 */
  right: calc(16px + env(safe-area-inset-right, 0px));
  z-index: 20;                 /* 在 #play-modal 的层叠上下文内高于内容 */
  display: flex;
}
#play-modal #p-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                 /* 触摸推荐最小 44×44 */
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;                 /* 明确颜色，避免「深字压深底」 */
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
#play-modal #p-close:hover {
  background: rgba(0, 0, 0, .82);
  color: #fff;
}
#play-modal #p-close:active { transform: scale(.94); }
#play-modal #p-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ================================================================
 * P1-2 分集按钮点按区域
 * ----------------------------------------------------------------
 * 主题基础 .module-blocklist a 行高 14px×1.6，桌面两列时实际高度约 24px，
 * 触摸端偏小。这里统一给到 40px（折中值），移动端再抬到 44px。
 * 用 inline-flex + 居中，保证文字/均衡器条在按钮里垂直居中。
 * ================================================================ */
#play-modal .module-blocklist a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  box-sizing: border-box;
}

/* ================================================================
 * P2 纵向节奏
 * ----------------------------------------------------------------
 * .player-block 的 padding-top 已由 app.css 归零；移动端 .content 的
 * 30px 上间距在窄屏上偏大（首屏被推开、播放器下沉），这里收紧。
 * 关闭按钮固定在顶部，播放器可与之轻微重叠（自带深色圆底，可读）。
 * ================================================================ */
@media (max-width: 899px) {
  #play-modal .content {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* 触摸端把分集按钮抬到 44px 推荐值 */
  #play-modal .module-blocklist a {
    min-height: 44px;
  }
}