*{box-sizing:border-box}
/*
 * 镶嵌黑舞台（非整页浮层）：
 * - 舞台 = 内容区全宽黑底；画面居中，不够宽/高处自然留黑边
 * - 手机：scale(.55) → 8.78×4.92rem
 * - 宽屏/iframe：scale(.8) → 12.8×7.2rem，几乎铺满 720 内容区
 */
html,body{margin:0;padding:0;background:#f5f5f5;color:#222;font-family:"PingFang SC","Microsoft YaHei",sans-serif}
body{padding-top:50px;min-height:100%}

.nc-header{
  position:fixed;top:0;left:0;right:0;height:50px;z-index:50;
  display:flex;align-items:center;justify-content:center;
  background:#9C27B0;color:#fff;
}
.nc-header .back{position:absolute;left:10px;color:#fff;text-decoration:none;font-size:14px}
.nc-header .title{font-size:16px;font-weight:700}

/* 被站内皮嵌入时去自带顶栏（外层自管返回/标题，对齐 bb777 白顶栏壳） */
html.dgn-video-embed body{padding-top:0}
html.dgn-video-embed .nc-header{display:none!important}

.video-mains{max-width:720px;margin:0 auto;padding:0 0 1.2rem}
.video-notice{
  display:flex;align-items:center;
  padding:.2rem .5rem;background:#fadce9;color:#c30055;margin-bottom:.1rem;
}
.video-notice>span{flex-shrink:0;padding-left:.266667rem;color:#3f2860;font-size:.373333rem}
.notice-scroll{flex:1;overflow:hidden;white-space:nowrap;font-size:.36rem;color:#f13131}

/*
 * 黑色舞台 = 开奖位：内容区全宽黑底；到点/回放时画面镶在里面
 */
.video-one{
  position:relative;
  width:100%;
  margin:0 0 .4rem;
  height:5.4rem;
  background:#000;
  overflow:hidden;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
}
.video-desc{
  position:absolute;inset:0;z-index:2;
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  padding:0 8%;
  background:#000;color:#eee;
  font-size:.36rem;line-height:1.6;
  -webkit-transition:opacity .25s ease;transition:opacity .25s ease;
}
.video-desc p{text-align:center;margin:0}
.video-desc-fallback{text-align:center;margin:0;padding:0 4%;color:#eee;font-size:.36rem;line-height:1.6}
.video-desc-fallback span{color:#ff4d4f}
.video-one.is-playing .video-desc{
  opacity:0;visibility:hidden;pointer-events:none;
}

/* 闲时倒计时：白底数字块 + 冒号，居中于黑舞台（对齐 bb777 观感） */
.video-cd{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  gap:.42rem;
  padding:.2rem .3rem;
}
.video-cd[hidden],.video-desc-fallback[hidden]{display:none!important}
.video-cd__label{
  margin:0;
  color:#fff;
  font-size:.4rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.2;
  opacity:.96;
}
.video-cd__row{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
  gap:.26rem;
}
.video-cd__cell{
  display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;
  min-width:1.42rem;
  height:1.08rem;
  padding:0 .18rem;
  box-sizing:border-box;
  background:#fff;
  color:#111;
  border:0;
  border-radius:.2rem;
  font-size:.7rem;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  line-height:1;
  box-shadow:0 .06rem .2rem rgba(0,0,0,.28);
}
.video-cd__sep{
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  line-height:1;
  opacity:.95;
  -webkit-transform:translateY(-.02rem);transform:translateY(-.02rem);
}

.video-embed[hidden]{display:none!important}
.video-embed{
  position:relative;z-index:1;
  width:8.78rem;height:4.92rem;
  max-width:100%;
  flex-shrink:0;
  background:#000;
  overflow:hidden;
}
.video-one.is-playing .video-embed{display:block}
.video-embed .video-open-main{
  position:absolute;top:0;left:0;
}

/* 宽屏：加高舞台、放大镶嵌画面，左右仅留窄黑边 */
@media (min-width:540px){
  .video-one{height:7.6rem}
  .video-embed{width:12.8rem;height:7.2rem}
  .video-embed .video-open-main,
  .video-open-main{
    -webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);
  }
}

.v-close{
  position:absolute;right:.2rem;top:.2rem;z-index:40;
  box-sizing:content-box;
  width:18px;height:18px;
  padding:3px;border:3px solid #fff;border-radius:50%;
  background-color:#787878;color:#fff;
  font-size:16px;font-weight:bolder;line-height:18px;
  text-align:center;cursor:pointer;
  margin:0;
}
.audio-toggle-btn{
  position:absolute;top:.1rem;right:5.4rem;z-index:999;
  border-radius:50%;width:1rem;height:1rem;padding:0;
  cursor:pointer;background:transparent;border:0;
  display:flex;align-items:center;justify-content:center;
}

#video-open-cont{display:none}
.v-stage{width:100%;height:100%;overflow:hidden;position:relative}
.video-loading{
  position:absolute;inset:0;z-index:50;
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:.24rem;
  color:#fff;font-size:.34rem;letter-spacing:.02em;
  background:rgba(0,0,0,.72);
}
.video-loading.is-on{display:flex}
.video-loading-spinner{
  width:.72rem;height:.72rem;border-radius:50%;
  border:.06rem solid rgba(255,255,255,.28);
  border-top-color:#fff;
  -webkit-animation:dgnVidSpin .7s linear infinite;
  animation:dgnVidSpin .7s linear infinite;
}
.video-loading-text{max-width:80%;text-align:center;line-height:1.4;opacity:.95}
@-webkit-keyframes dgnVidSpin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes dgnVidSpin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.audio-toggle-btn img{display:block;pointer-events:none}

.video-container{padding:0 .2rem}
.video-container>.video-notice{
  display:block;
  padding:.2rem .5rem;
  background-color:#fadce9;
  color:#c30055;
  margin-bottom:.1rem;
  font-size:.32rem;
  line-height:1.4;
}
.video-list{
  display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;
  -webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;
  -webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;
}
.video-item{width:49%;margin-bottom:.3rem;cursor:pointer}
.video-item--skel{cursor:default;pointer-events:none}
.video-item--skel .video-cover{
  background:linear-gradient(90deg,#1a1a1a 0%,#2a2a2a 40%,#1a1a1a 80%);
  background-size:200% 100%;
  -webkit-animation:videoSkelShine 1.1s ease-in-out infinite;
  animation:videoSkelShine 1.1s ease-in-out infinite;
}
.video-item--skel .video-base{
  display:block;height:.32rem;margin:.12rem 0 0;border-radius:2px;
  background:linear-gradient(90deg,#e8e8e8 0%,#f2f2f2 40%,#e8e8e8 80%);
  background-size:200% 100%;
  -webkit-animation:videoSkelShine 1.1s ease-in-out infinite;
  animation:videoSkelShine 1.1s ease-in-out infinite;
}
@-webkit-keyframes videoSkelShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes videoSkelShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
.video-list-sentinel{width:100%;height:1px;margin:0;padding:0;visibility:hidden}
.video-cover{position:relative;min-height:2.56rem;background:#111;overflow:hidden}
.video-cover>img{width:100%;display:block}
.video-cover .video-logo{position:absolute;top:.1rem;left:.1rem}
.video-cover .video-logo img{width:1rem;display:block}
.video-cover .video-play-btn{
  position:absolute;top:50%;left:50%;
  -webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
}
.video-cover .video-play-btn img{width:1rem;display:block}
.video-item .video-info{margin-top:.08rem}
.empty{text-align:center;color:#888;padding:1rem 0;font-size:.36rem}