/* Drama play — PC player + aside 选集 + H5 full-screen play */

.drama-play-static {
  --dp-accent: #ecd227;
}

/* ========== PC player ========== */
.drama-play-static .drama-detail-player {
  position: relative;
  width: 100%;
  height: 574px;
  overflow: hidden;
  border-radius: 24px;
  background: #000;
}

.drama-play-static .drama-detail-player > .dplayer-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.drama-play-static .drama-detail-player .dplayer,
.drama-play-static .drama-detail-player .dplayer-video-wrap {
  width: 100%;
  height: 100%;
}

.drama-play-static .drama-detail-player .dplayer-video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.drama-play-static .drama-detail-player video,
.drama-play-static .drama-detail-player .dplayer-video-current {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 竖向视频：高度撑满播放器，宽度按比例自适应并居中 */
.drama-play-static .drama-detail-player.is-portrait-video video,
.drama-play-static .drama-detail-player.is-portrait-video .dplayer-video-current {
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
}

.drama-play-static .drama-detail-player__cover {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.drama-play-static .drama-detail-player.is-portrait-video .drama-detail-player__cover {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  transform: none;
  object-fit: cover;
}

.drama-play-static .drama-detail-player__cover.video-player__poster--hidden {
  opacity: 0;
  visibility: hidden;
}

.drama-play-static .dd-h5-play__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.drama-play-static .dd-h5-play__video .dplayer {
  width: 100%;
  height: 100%;
}

.drama-play-static .dd-h5-play__cover {
  z-index: 1;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.drama-play-static .dd-h5-play__cover.video-player__poster--hidden {
  opacity: 0;
  visibility: hidden;
}

.drama-play-static .drama-detail-player__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.drama-play-static .drama-detail-player__play img {
  display: block;
  width: 84px;
  height: 84px;
}

.drama-play-static .drama-detail-player__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 0 64px 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  box-sizing: border-box;
}

.drama-play-static .drama-detail-player__progress {
  position: relative;
  width: 100%;
  height: 4px;
}

.drama-play-static .drama-detail-player__track {
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.3;
}

.drama-play-static .drama-detail-player__fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 16%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff 0%, #999 100%);
}

.drama-play-static .drama-detail-player__knob {
  position: absolute;
  top: 50%;
  left: 16%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fff;
}

.drama-play-static .drama-detail-player__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.drama-play-static .drama-detail-player__left,
.drama-play-static .drama-detail-player__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.drama-play-static .drama-detail-player__right {
  gap: 20px;
}

.drama-play-static .drama-detail-player__time {
  color: #8a8a8a;
  font-size: 18px;
  line-height: 24px;
  white-space: nowrap;
}

.drama-play-static .drama-detail-player__speed {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
}

.drama-play-static .drama-detail-player__icon {
  display: block;
  flex-shrink: 0;
  background: #fff;
}

.drama-play-static .drama-detail-player__icon--play {
  width: 14px;
  height: 17px;
  clip-path: polygon(15% 8%, 95% 50%, 15% 92%);
}

.drama-play-static .drama-detail-player__icon--vol {
  width: 12px;
  height: 14px;
  border-radius: 2px;
}

.drama-play-static .drama-detail-player__icon--pip {
  width: 16px;
  height: 15px;
  border-radius: 2px;
}

.drama-play-static .drama-detail-player__icon--fs {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

/* Tabs */
.drama-play-static .drama-detail-tabs[role="tablist"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 36px;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.drama-play-static .drama-detail-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 0 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}

.drama-play-static .drama-detail-tab--active {
  color: var(--dp-accent);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.drama-play-static .drama-detail-tab--active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 17px;
  height: 2px;
  margin-left: -8.5px;
  background: var(--dp-accent);
  border-radius: 2px 2px 0 0;
}

.drama-play-static .drama-detail-action-group {
  background: rgba(255, 255, 255, 0.1);
}

/* Aside 选集 */
.drama-play-static .drama-detail-aside {
  width: 303px;
}

.drama-play-static .drama-detail-eps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  padding: 18px 16px;
  border-radius: 21px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
}

.drama-play-static .drama-detail-eps__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}

.drama-play-static .drama-detail-eps__ranges {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.drama-play-static .drama-detail-eps__ranges::-webkit-scrollbar {
  display: none;
}

.drama-play-static .drama-detail-eps__range {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 20px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.drama-play-static .drama-detail-eps__range--active {
  color: #f5f2f7;
}

.drama-play-static .drama-detail-eps__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px 9px;
  width: 100%;
}

.drama-play-static .drama-detail-eps__grid .drama-detail-ep {
  width: 100%;
  max-width: none;
}

.drama-play-static .drama-detail-hot__list .drama-card {
  width: 234px;
}

/* Visibility */
@media (max-width: 768px) {
  .dp-only-pc {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .dp-only-h5 {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  .drama-play-static .drama-detail-aside {
    width: 100%;
  }

  .drama-play-static .drama-detail-eps__grid {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .drama-play-static .drama-detail-player {
    height: auto;
    aspect-ratio: 1019 / 574;
  }

  .drama-play-static .drama-detail-player__bar {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ========== H5 play page ========== */
@media (max-width: 768px) {
  body.drama-play-page {
    background: #0a0a0a;
  }

  body.drama-play-page .site-header,
  body.drama-play-page .site-footer,
  body.drama-play-page .to-top {
    display: none !important;
  }

  .drama-play-static.page-main {
    padding: 0;
    min-height: 100dvh;
  }

  .drama-play-static .dp-h5-play {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    background: #0a0a0a;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__bottom {
    display: none;
  }

  /* Top bar: back + ep inline, actions on right */
  .drama-play-static .dp-h5-play .dd-h5-play__top {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .drama-play-static .dp-h5-play .dd-h5-play__ep-label {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
  }

  .drama-play-static .dp-h5-play__settings {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
  }

  .drama-play-static .dp-h5-play__settings img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
  }

  .drama-play-static .dp-h5-play__feedback {
    margin-left: 8px;
  }

  .drama-play-static .dp-h5-play__feedback img {
    filter: none;
  }

  /* Media fills stage; cover keeps natural ratio; portrait video covers stage */
  .drama-play-static .dp-h5-play__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: #000;
    overflow: hidden;
    line-height: 0;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__cover {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 1;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__video .dplayer,
  .drama-play-static .dp-h5-play .dd-h5-play__video .dplayer-video-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__video video,
  .drama-play-static .dp-h5-play .dd-h5-play__video .dplayer-video-current {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 竖向视频：撑满 stage */
  .drama-play-static .dp-h5-play.is-portrait-video .dd-h5-play__video video,
  .drama-play-static .dp-h5-play.is-portrait-video .dd-h5-play__video .dplayer-video-current {
    object-fit: cover;
  }

  .drama-play-static .dp-h5-play.is-portrait-video .dd-h5-play__cover {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    transform: translate(-50%, -50%);
  }

  .drama-play-static .dp-h5-play__grad {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
  }

  /* Side actions: mid-right above meta */
  .drama-play-static .dp-h5-play .dd-h5-play__side {
    position: absolute;
    right: 10px;
    bottom: 118px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__side-item {
    min-width: 40px;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__side-item img {
    width: 28px;
    height: 28px;
  }

  /* Meta: bottom-left above episode bar */
  .drama-play-static .dp-h5-play .dd-h5-play__meta {
    position: absolute;
    left: 16px;
    right: 56px;
    bottom: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: none;
    overflow: visible;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__meta-title {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  }

  .drama-play-static .dp-h5-play .dd-h5-play__meta-title span {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  }

  .drama-play-static .dp-h5-play .dd-h5-play__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: 100%;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 7em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
  }

  .drama-play-static .dp-h5-play__meta-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__meta-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    -webkit-line-clamp: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  }

  .drama-play-static .dp-h5-play__expand {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
  }

  .drama-play-static .dp-h5-play .dd-h5-play__meta-text.is-expanded {
    -webkit-line-clamp: unset;
    display: block;
  }

  .drama-play-static .dp-h5-play__expand[hidden] {
    display: none;
  }

  .drama-play-static .dp-h5-play__autonext {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 16px 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
  }

  .drama-play-static .dp-h5-play__autonext[hidden] {
    display: none !important;
  }

  .drama-play-static .dp-h5-play__countdown {
    color: #f59e0b;
  }

  .drama-play-static .dp-h5-play__bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #181818;
    box-sizing: border-box;
  }

  .drama-play-static .dp-h5-play__ep-picker {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 4px;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    font-family: inherit;
    cursor: pointer;
  }

  .drama-play-static .dp-h5-play__ep-picker span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .drama-play-static .dp-h5-play__ep-picker img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    transform: rotate(180deg);
  }

  .drama-play-static .dp-h5-play__comment,
  .drama-play-static .dp-h5-play__clear {
    width: 28px;
    height: 28px;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
  }

  .drama-play-static .dp-h5-play__comment {
    display: none;
    align-items: center;
    justify-content: center;
  }

  .drama-play-static .dp-h5-play__comment img,
  .drama-play-static .dp-h5-play__clear img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
  }

  /* Immersive / 清屏：隐藏信息层，保留顶栏与底栏 */
  body.is-drama-h5-focus .drama-play-static .dp-h5-play .dd-h5-play__side,
  body.is-drama-h5-focus .drama-play-static .dp-h5-play .dd-h5-play__meta,
  body.is-drama-h5-focus .drama-play-static .dp-h5-play__grad {
    opacity: 0;
    pointer-events: none;
  }

  body.is-drama-h5-focus .drama-play-static .dp-h5-play__media {
    inset: 0;
    height: 100%;
  }

  body.is-drama-h5-focus .dp-h5-play__comment {
    display: inline-flex;
  }

  body.is-drama-h5-focus .dp-h5-play__autonext {
    opacity: 0;
    pointer-events: none;
  }
}