.container {
  padding: 20rpx;
  background-color: #f4f3f3;
  min-height: 100vh;
  box-sizing: border-box;
}

.user-points {
  font-size: 16px;
  margin-bottom: 20rpx;
}

.card-list {
  display: flex;
  flex-direction: column;
}

.card-item {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.card-image {
  width: 300rpx;
  height: 300rpx;
  object-fit: cover;
  margin: 20rpx 0;
}

.card-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-price {
  font-size: 16px;
  color: #666;
  margin-bottom: 20rpx;
}

.buy-btn, .guess-btn {
  background-color: #0d94ff;
  color: #ffffff;
  border-radius: 20rpx;
  font-size: 14px;
  padding: 10rpx 20rpx;
  width: 80%;
}

.bottom-section {
  margin-top: 20rpx;
  width: 100%;
}

.guess-btn {
  width: 100%;
}