/* 播放器大小 */
.music-player {
  position: relative;
  width: 570px;
  min-height: calc(100vh - 80px);
  height: auto;
  padding: 30px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.music-player h3{
  margin: 0px 0 1px!important;
}
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1537976418058'); /* IE9*/
  src: url('iconfont.eot?t=1537976418058#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1537976418058') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1537976418058#iconfont') format('svg'); /* iOS 4.1- */
}

.icon-prev:before { content: "\f0069"; }

.icon-next:before { content: "\f006a"; }

.icon-play:before { content: "\e66a"; }

.icon-pause:before { content: "\e76a"; }

.icon-random:before { content: "\e622"; }

.icon-muted:before { content: "\e61e"; }

.icon-volume:before { content: "\e87a"; }

.icon-loop:before { content: "\e66c"; }

.icon-single:before { content: "\e66d"; }


/* 播放器位置 */
.music-player {
  position: relative;
  margin: 0px auto;
}

/* 歌曲列表 */

.music-player__list {
  position: relative;
  z-index: 1;
  max-width: 570px;
  height: auto;
  max-height: none;
  min-height: 300px;
  margin-top: 30px;
  width: 100%;
  padding: 5px 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.song-list {
  overflow-x: hidden;
  word-break: break-all;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
}

.music__list_content {
  padding: 5px 0;
}

.music__list__item {
  padding-left: 12px  25px;
  transition: all 0.2s;
  color: #ccc;
  position: relative;
  margin-bottom: 3px 8px;
  font-size: 14px;
  cursor: pointer;
  padding-left: 15px !important;
  margin-right: 5px;
}

.music__list__item:last-of-type {
  margin: 0;
}

.music__list__item.play {
  color: #fff;
}

.music__list__item.play:before {
  font-family: 'iconfont';
  content: "\e87a";
  position: absolute;
  left: 0px;
  top: 4px;
}
/* 播放器主体 */
.music-player__main {
  flex: 0 0 auto;
  height: 180px;
  padding: 25px;
  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

/* 播放器主体模糊背景 */
.music-player__blur {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-filter: blur(20px);
  filter: blur(20px);
}
/* 播放器唱片效果 */
.music-player__disc {
  float: left;
  width: 130px;
  height: 130px;
  background: url(/music/images/cd.png) no-repeat center;
  background-size: 100%;
  position: relative;
}

/* 唱片指针 */
.music-player__pointer {
  width: 25px;
  position: absolute;
  right: -10px;
  top: 0;
  -webkit-transform-origin: right top;
  -ms-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  transform: rotate(-15deg);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/* 唱片指针播放状态 加play类名 */
.music-player__pointer.play {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}

/* 唱片歌曲图片 */
.music-player__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
/* 播放器控件 */
.music-player__controls {
  width: 330px;
  height: 130px;
  float: right;
}

/* 歌曲信息 */
.music__info {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
}

.music__info .music__info--title {
  color: #fff;
}

.music__info .music__info--title {
  font-size: 16px;
}
/* 控件 */

.player-control {
  width: 100%;
}

.player-control__content {
  overflow: hidden;
}

/* 播放暂停按钮 */
.player-control__btns {
  float: left;
  overflow: hidden;
}

.player-control__btn {
  float: left;
  margin: 0 5px;
  font-weight: bolder;
  color: #fff;
  cursor: pointer;
}

.player-control__volume {
  float: right;
  overflow: hidden;
}

.control__volume--progress {
  float: left;
  width: 100px;
  position: relative;
  top: 8px;
}

.player__song--timeProgess{
  font-size: 12px;
  color: #fff;
  padding: 0px 3px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.player-control__content .nowTime{
  float: left;
}
.player-control__content .totalTime{
  float: right;
}

.music-player .progress {
  background: rgba(0, 0, 0, 0.3);
  height: 5px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) inset;
  overflow: hidden;
  margin: 0.5rem 0!important;
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

.music-player .progress .back {
  width: 0px;
  height: 100%;
  border-radius: 2px;
  background: rgb(12, 182, 212);
}

.music-player .progress .pointer {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
  position: absolute;
  top: -1px;
  left: 0;
}

.music-player .progress:hover .pointer {
  opacity: 1;
}


/* 播放 画片 动画 */

@-webkit-keyframes disc {
  from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }

  to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}

@keyframes disc {
  from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
  }
}
.music-player__image.play {
  -webkit-animation: disc 5s linear 0s infinite;
  animation: disc 5s linear 0s infinite;
}
/*  播放进度  */
.player__song--progress {
  width: 100%;
  margin-top: 15px;
}
.music-player h1, .music-player h2, .music-player h3,.music-player h4, .music-player h5, .music-player h6, .music-player p {
  margin: 0; padding: 0;
}
.music-player li { list-style: none; }


/* 移动端适配 */
@media (max-width: 768px) {
  /* 播放器容器 */
  .music-player__list {
    max-height: calc(100vh - 320px) !important; /* 动态高度计算 */
    min-height: 200px; /* 保留最小高度保证可见性 */
    height: auto;
    overflow-y: auto; /* 确保纵向滚动 */
    margin-top: 15px;
    width: calc(100% - 20px); /* 防止横向溢出 */
    margin-left: 0;
    margin-right: 0;
  }

  /* 播放主体区域 */
  .music-player__main {
    height: auto;
    padding: 15px;
    flex-direction: column;
  }

  /* 唱片区域 */
  .music-player__disc {
    float: none;
    margin: 0 auto 15px;
  }

  /* 控制区域 */
  .music-player__controls {
    width: 100%;
    height: auto;
    float: none;
  }

  /* 歌曲列表 */
  .music-player__list {
    min-height: 200px;
    margin-top: 15px;
    padding: 8px;
  }

  /* 响应式文字 */
  .music__info--title {
    font-size: 14px!important;
  }
  .music__list__item {
    padding: 8px 15px !important;
    margin-bottom: 2px;
    line-height: 1.4;
  }

  /* 触摸优化 */
  .player-control__btn {
    padding: 8px;
    margin: 0 3px;
  }

  .music-player {
    padding: 15px 10px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* 竖屏手机特殊适配 */
@media (max-width: 480px) and (orientation: portrait) {
  .music-player__list {
    max-height: calc(100vh - 280px) !important; /* 更紧凑的高度计算 */
    width: 100% !important; /* 强制宽度匹配 */
  }
  .music-player__disc {
    width: 100px;
    height: 100px;
  }
  .music-player__image {
    width: 60px;
    height: 60px;
  }
  .player-control__btns {
    justify-content: center;
  }
}

/* 全局增加 */
button, .player-control__btn {
  min-width: 44px;
  min-height: 44px;
}

@media (orientation: landscape) and (max-width: 768px) {
  .music-player {
    padding: 10px;
  }
  .music-player__main {
    flex-direction: row;
  }
  .music-player__disc {
    margin-right: 10px;
  }
}

.music-player {
  will-change: transform;
  -webkit-backface-visibility: hidden;
}

.music-player__list {
  max-height: calc(100vh - 420px) !important; /* 根据容器高度动态计算 */
  overflow-y: auto;
}

/* 增加极端小屏适配 */
@media (max-width: 320px) {
  .music-player__list {
    margin-left: -15px;
    margin-right: -15px;
    width: calc(100% + 30px) !important;
  }
}