*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:rgb(248,248,248);
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 9 / 16;
}

.bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* 图标通用基础样式：只保留绝对定位和层级 */
.icon {
  position: absolute;
  height: auto;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  /* 每个图标单独设置width和位置，这里不统一设置了 */
}

/* ============== 每个图标独立设置：位置+大小 ============== */
/* ❤️ 爱心：右上角 */
.heart {
  width: 3%; 
  top: 60%;  
  right: 78%;
  z-index: 11; /* 爱心层级高于进度条 */
}

/* 🔄 重置：左下角 */
.reset {
  width: 5%; 
  bottom: 31%;
  left: 18%; 
}

/* ◀️ 左箭头：重置右边 */
.prev {
  width: 5%;
  bottom: 31%;
  left: 31%; 
}

/* ▶️ 播放：底部中间 */
.play {
  width: 9%;
  bottom: 30%;
  left: 49.5%; 
  transform: translateX(-50%); /* 水平居中 */
}

/* ▶️ 右箭头：播放右边 */
.next {
  width: 5%;
  bottom: 31%;
  right: 32.5%;
}

/* ===================== 新增：纯UI进度条样式 ===================== */
.progress-wrap {
  position: absolute;
  /* 和爱心保持同一水平基准 */
  top: 60.5%;      
  right: 49.5%;    
  /* 让进度条整体居中对齐爱心 */
  transform: translateX(50%);
  width: 68%;     /* 进度条总长度 */
  height: 2px;    /* 进度条粗细 */
  z-index: 10;
}

/* 进度条底色（轨道） */
.progress-bg {
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.25); /* 浅底色，可改色 */
  border-radius: 3px;
}

/* 已播放进度（当前进度） */
.progress-line {
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;    /* 这里控制当前进度百分比 0%~100% */
  height: 100%;
  background: #5896ab; /* 进度条主色（和爱心配色呼应） */
  border-radius: 3px;
}