/* 响应式调整 */
@media (max-width: 1024px) {

   .zaixianhzongxin{
       display: none;
   }
   .dplayer-logo {
    position: absolute;
    left: 15px;
    bottom: 50px;
    max-width: 100px !important;
    max-height: 50px !important;
}
   .rooms-main{
       display: none;
   }
   .rooms-main-m{
       display: block!important;
   }
   .mdui-typo-headline{
       font-size: 18px;
   }
}
@media (min-width: 1024px){
    .dplayer-logo {
        position: absolute;
        left: 25px;
        bottom: 50px;
        max-width: 200px !important;
        max-height: 100px !important;
    }
    .rooms-main-m{
       display: none!important;
   }
}

#dplayer{
    border-radius:5px;
}


/* 隐藏DPlayer弹幕按钮 */
.dplayer-comment {
    display: none !important;
}

.dplayer-danmaku .dplayer-danmaku-right.dplayer-danmaku-move {
    animation: danmaku 12.5s linear;
    margin-top: 15px;
}

/* ===============================
   DPlayer UI 优化（不改 JS）
   - 更现代的控制栏/进度条/圆角/阴影
   - 移动端可点击区域更大
   - 全屏/网页全屏下更稳定
   =============================== */

:root{
  /* 主题色与层级，可按需改 */
  --dp-accent: #4f8cff;
  --dp-text: rgba(255,255,255,.92);
  --dp-text-dim: rgba(255,255,255,.72);
  --dp-bg-0: rgba(0,0,0,.06);
  --dp-bg-1: rgba(0,0,0,.22);
  --dp-bg-2: rgba(0,0,0,.45);
  --dp-border: rgba(255,255,255,.12);
  --dp-radius: 12px;
  --dp-shadow: 0 14px 40px rgba(0,0,0,.22);
}

/* 播放器容器：锁定 16:9 占位比例 + 圆角 + 阴影 + 溢出裁切
   目的：DPlayer 未加载/加载中时不塌陷，避免布局跳动 */
#dplayer-wrap{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--dp-radius);
  overflow: hidden;
  background: #000;
  box-shadow: var(--dp-shadow);
  position: relative;
}

/* 让内层 dplayer 容器也撑满 wrap，避免初始化时组件高度不匹配 */
#dplayer-wrap > #dplayer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 旧浏览器兜底（不支持 aspect-ratio） */
@supports not (aspect-ratio: 16 / 9) {
  #dplayer-wrap::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 */
  }
  #dplayer-wrap > *{
    position: absolute;
    inset: 0;
  }
}

/* 让视频层始终铺满，避免某些浏览器出现黑边/溢出 */
#dplayer .dplayer-video,
#dplayer video{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  background: #000;
}

/* 控制栏：半透明 + 毛玻璃（不支持时自动退化） */
#dplayer .dplayer-controller{
  background: linear-gradient(to top, rgba(0,0,0,.15), rgba(0,0,0,0));
}
#dplayer .dplayer-controller-mask{
  background: linear-gradient(to top, rgba(0,0,0,.15), rgba(0,0,0,0));
}
#dplayer .dplayer-controller{
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* 文本与图标的可读性 */
#dplayer .dplayer-controller,
#dplayer .dplayer-controller *{
  color: var(--dp-text);
}
#dplayer .dplayer-time{
  color: var(--dp-text-dim) !important;
}

#dplayer .dplayer-menu,
#dplayer .dplayer-quality-list{
  background:  rgba(0,0,0,.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px);
}

/* 设置/菜单可操作性修复：
   目标：
   1) 菜单不会“秒关”
   2) 仍然可以点击遮罩关闭

   做法：
   - 提高菜单/设置层级到遮罩之上
   - 让遮罩保持可点击（用来关闭）
   - 不让 controller-mask 吃掉点击
*/
#dplayer .dplayer-menu,
#dplayer .dplayer-setting,
#dplayer .dplayer-quality-list,
#dplayer .dplayer-setting-box,
#dplayer .dplayer-setting-box.dplayer-setting-box-open{
  pointer-events: auto !important;
  z-index: 10050 !important;
}

/* 有些版本设置面板内部还有滚动容器，确保可点击 */
#dplayer .dplayer-setting-box *{
  pointer-events: auto;
}

/* 控制栏渐变遮罩不应吃掉点击/hover */
#dplayer .dplayer-controller-mask{
  pointer-events: none;
}
#dplayer .dplayer-controller{
  pointer-events: auto;
}

/* 允许遮罩接收点击，用于“点击空白处关闭菜单” */
#dplayer .dplayer-mask{
  pointer-events: auto !important;
  z-index: 40 !important; /* 低于菜单(10050)，高于视频 */
}

/* 当设置面板打开时：
   - 允许面板内部正常点击
   - 但避免 mask 抢到点击导致“点击面板任意处=点击外部=关闭”
   说明：仅在 PC 上这么做；移动端通常需要点遮罩关闭。
*/
@media (min-width: 768px){
  #dplayer .dplayer-setting-box.dplayer-setting-box-open ~ .dplayer-mask,
  #dplayer .dplayer-setting-box.dplayer-setting-box-open + .dplayer-mask{
    pointer-events: none !important;
  }
}

#dplayer .dplayer-setting-box {
  z-index: 10000 !important;
}

#dplayer .dplayer-setting-item .dplayer-setting-danunlimit{
  display: none !important;
}

/* 顶部标题/提示（如果存在）更清晰 */
#dplayer .dplayer-notice{
  border-radius: 10px;
  border: 1px solid var(--dp-border);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 全屏/网页全屏：圆角不应影响全屏铺满 */
#dplayer.dplayer-fullscreen,
#dplayer.dplayer-web-fullscreen{
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 修复全屏模式下的样式 */
#dplayer.dplayer-fulled,
#dplayer.dplayer-fullscreen,
#dplayer.dplayer-web-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000;
    background: #000;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 确保视频元素在全屏时正确填充 */
#dplayer.dplayer-fulled .dplayer-video,
#dplayer.dplayer-fullscreen .dplayer-video,
#dplayer.dplayer-web-fullscreen .dplayer-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

/* 确保控制栏在全屏时可见 */
#dplayer.dplayer-fulled .dplayer-controller,
#dplayer.dplayer-fullscreen .dplayer-controller,
#dplayer.dplayer-web-fullscreen .dplayer-controller {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
}

/* 移动端进一步优化：更大按钮 & 时间显示不拥挤 */
@media (max-width: 600px){
  #dplayer{
    border-radius: 10px;
  }
  #dplayer .dplayer-time{
    font-size: 12px;
  }
}