.cdp-player {
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid #dcdcde;
  border-radius: 0.75rem;
  background: #fff;
}

.cdp-player__stage {
  display: grid;
  min-height: 12rem;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  color: #fff;
  background: linear-gradient(135deg, #18222e, #32485d);
}

.cdp-player__label { z-index: 1; }
.cdp-player__pulse {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  opacity: 0;
}

.cdp-player.is-playing .cdp-player__pulse { animation: cdp-pulse 1.4s ease-out infinite; }
.cdp-player__button { margin-top: 0.75rem; }
.cdp-player__notice { margin: 0.75rem 0 0; font-size: 0.875rem; }

.cdp-player--tencent .cdp-player__stage {
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: #101418;
}

.cdp-player--portrait {
  max-width: 24rem;
  margin-inline: auto;
}

.cdp-player--portrait .cdp-player__stage {
  aspect-ratio: 9 / 16;
}

.cdp-player__video,
.cdp-player--tencent .tcp-skin {
  width: 100%;
  height: 100%;
}

.cdp-player--tencent video { object-fit: contain; }

.cdp-player__button[hidden] { display: none; }
/* TCPlayer's stock 48px controls overflow a narrow portrait stage. Keep its
   own controls and fullscreen behavior; only compact the course-player skin. */
.cdp-player--tencent .vjs-control-bar > .vjs-button,
.cdp-player--tencent .vjs-control-bar > .vjs-volume-panel { width: 36px; flex: 0 0 36px; }
.cdp-player--tencent .vjs-control-bar > .vjs-fullscreen-control { margin-left: auto; }
.cdp-player--tencent .vjs-control-bar > .vjs-time-control { font-size: 12px; min-width: 0; padding-inline: 2px; }
.cdp-player--tencent .vjs-control-bar > .vjs-pdt-time,
.cdp-player--tencent .vjs-control-bar > .vjs-custom-control-spacer { display: none; }
.cdp-player--tencent .vjs-control-bar button:focus-visible { outline: 2px solid #f2d39a; outline-offset: -2px; }

@keyframes cdp-pulse {
  0% { opacity: 0.8; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.2); }
}

@media (prefers-reduced-motion: reduce) {
  .cdp-player.is-playing .cdp-player__pulse { animation: none; opacity: 0.65; }
}

@media (max-width: 600px) {
  .cdp-player { margin-inline: -0.5rem; padding: 0.5rem; }
  .cdp-player--portrait { margin-inline: auto; }
  .cdp-player__button { width: 100%; min-height: 2.75rem; }
}