/* ============================================================
   播放页选集区复刻（对齐参考站 xds2435.../play/159987）
   仅在播放页引入，覆盖 duoduo.css 中同名规则
   ============================================================ */

/* ---------- 选集网格容器 ---------- */
.dd-epgrid{
  display:grid; gap:0; margin:8px 0 16px;
  grid-template-columns:repeat(4,1fr);
  background:#1a1815; border-radius:8px; padding:16px;
  max-height:380px; overflow-y:auto;
  /* 隐藏滚动条但保留滑动/滚轮滚动能力（去掉右侧那条会反复闪现的滚动条） */
  scrollbar-width:none; -ms-overflow-style:none;
}
.dd-epgrid::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; }
@media(min-width:768px){ .dd-epgrid{ grid-template-columns:repeat(6,1fr); border-top-right-radius:0; } }
@media(min-width:1024px){ .dd-epgrid{ grid-template-columns:repeat(8,1fr); } }
@media(min-width:1280px){ .dd-epgrid{ grid-template-columns:repeat(10,1fr); } }

/* ---------- 选集按钮 ---------- */
.dd-epbtn{
  display:block; margin:4px; padding:4px 0; border:0; border-radius:8px;
  background:#000; color:#fff; font-size:14px; line-height:1.6;
  text-align:center; position:relative; word-break:break-all;
  transition:background-color .15s, color .15s;
}
.dd-epbtn:hover{ background:#1e1c17; color:#edc603; }
.dd-epbtn.cur{ background:#1e1c17; color:#eab308; font-weight:700; padding:4px 0; }
/* 去掉旧版静态音柱（改用 4 根 i 动画） */
.dd-epbtn.cur::after{ content:none !important; display:none !important; }

/* ---------- 当前集跳动音柱 ---------- */
.dd-ep-bars{
  position:absolute; bottom:0; left:calc(50% - 11px);
  width:22px; height:8px; pointer-events:none;
}
.dd-ep-bars i{
  position:absolute; bottom:0; width:4px; height:6px;
  border-radius:4px 4px 0 0; background:#eab308;
  transform-origin:bottom;
  animation-name:dd-playbar; animation-iteration-count:infinite;
  animation-timing-function:ease-in-out;
}
@keyframes dd-playbar{
  0%,100%{ transform:scaleY(.5); opacity:.7; }
  50%{ transform:scaleY(1.3); opacity:1; }
}

/* ---------- 选集头部 ---------- */
.dd-ephead{
  background:none; border:0; border-radius:0; padding:0; margin:16px 0 8px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:nowrap;
}
.dd-epl{ display:flex; align-items:center; font-size:18px; font-weight:700; color:#fff; }
.dd-epsort{
  font-size:14px; color:#a1a1aa; font-weight:400;
  margin-left:12px; padding:0 12px; cursor:pointer;
  user-select:none; transition:color .15s;
}
.dd-epsort:hover{ color:#eab308; }
.dd-epr{ display:flex; align-items:center; gap:16px; }

/* ---------- 报错 / 分享 ---------- */
.dd-ep-tool{
  display:inline-flex; align-items:center; gap:4px;
  font-size:14px; color:#d4d4d8; cursor:pointer;
  transition:color .15s; user-select:none;
}
.dd-ep-tool svg{ width:14px; height:14px; flex-shrink:0; }
.dd-ep-tool:hover{ color:#facc15; }
.dd-ep-share{ color:#34d399; }
.dd-ep-share:hover{ color:#6ee7b7; }

/* ---------- 换源按钮 ---------- */
.dd-source{ position:relative; }
.dd-srcbtn{
  position:relative; display:inline-flex; align-items:center;
  background:#eab308; color:#000; font-weight:700; font-size:13px;
  border-radius:8px; padding:6px 12px; cursor:pointer; user-select:none;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.15);
  transition:background-color .2s, box-shadow .2s, transform .2s;
}
.dd-srcbtn:hover{ background:#facc15; box-shadow:0 10px 15px -3px rgba(0,0,0,.2); }
.dd-srcbtn:active{ transform:scale(.95); }
.dd-src-chev{
  width:16px; height:16px; margin-left:4px; display:block;
  transition:transform .2s; transform-origin:center;
}
.dd-source.open .dd-src-chev{ transform:rotate(180deg); }
.dd-src-dot{
  position:absolute; right:-4px; top:-4px;
  width:12px; height:12px; border-radius:9999px; background:#ef4444;
}

/* ---------- 弹跳手指 ---------- */
.dd-src-hand{
  position:absolute; bottom:-48px; left:35%; z-index:9999;
  display:flex; justify-content:center; pointer-events:none;
  animation:dd-bounce 1s infinite;
}
.dd-src-hand .dd-hand-svg{
  width:32px; height:32px; display:block;
  filter:drop-shadow(0 4px 3px rgba(0,0,0,.1));
}
@keyframes dd-bounce{
  0%,100%{ transform:translateY(-25%); animation-timing-function:cubic-bezier(.8,0,1,1); }
  50%{ transform:translateY(0); animation-timing-function:cubic-bezier(0,0,.2,1); }
}

/* ---------- 换源下拉 ---------- */
.dd-srclist{
  display:none; position:absolute; right:0; left:auto; top:auto;
  bottom:calc(100% + 10px); width:550px; max-width:calc(100vw - 40px);
  box-sizing:border-box;
  background:#141210; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:16px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.45);
  z-index:9999; flex-wrap:nowrap; justify-content:flex-start;
}
.dd-source.open .dd-srclist{ display:block; }
.dd-srclist-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
}
.dd-srcitem{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-width:0; flex:0 0 auto; padding:10px 8px; box-sizing:border-box;
  border-radius:8px; border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.04); color:#d4d4d8;
  font-size:13px; white-space:normal;
  transition:border-color .15s, background-color .15s, color .15s;
}
.dd-srcitem:hover{ border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:#fff; }
.dd-srcitem.on{
  border-color:rgba(234,179,8,.6); background:rgba(234,179,8,.1);
  color:#eab308; font-weight:700;
}
.dd-src-nm{ display:block; }
.dd-src-num{
  position:absolute; right:-4px; top:-6px; z-index:5; min-width:20px;
  padding:1px 6px; border-radius:9999px; font-size:10px; line-height:1.25;
  text-align:center; background:rgba(255,255,255,.15); color:#e4e4e7;
  font-weight:500; border:0;
}
.dd-srcitem.on .dd-src-num{ background:#eab308; color:#000; }

/* ---------- 手机：下拉变底部弹层 ---------- */
@media(max-width:767px){
  .dd-srclist{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; max-width:none; min-height:43vh; max-height:80vh;
    overflow-y:auto; border-radius:16px 16px 0 0; padding:16px;
    transform:none;
  }
  .dd-srclist-grid{ grid-template-columns:repeat(3,1fr); }
  .dd-ephead{ flex-wrap:wrap; }
  .dd-epr{ gap:12px; }
}