/* 容器样式（无需修改） */
.student-names {
  display: flex;
  flex-wrap: wrap;
  line-height: 130%;
    font-size: 24px !important; 
  margin: 20px;
  gap: 10px 6px; /* 统一控制行间距和列间距 */
}
.student-name:hover {
  color: #666; /* 悬停效果 */
}
/* 单个姓名样式（关键修改） */
.student-name {
  cursor: pointer;
  color: black;
  transition: color 0.3s;
   width: calc(11.11% - 7px); /* 新值（关键改动） */
  box-sizing: border-box; /* 确保宽度包含内边距和边框 */
  text-align: center; /* 文字居中 */
  overflow: hidden; /* 防止文字溢出 */
  white-space: nowrap; /* 防止文字换行 */
  text-overflow: ellipsis; /* 文字过长时显示省略号 */
}
.student-name.clicked {
    color: red;
}
/* 学生成绩排行榜样式 */
.score-ranking {
    text-align: center;
    margin-top: 20px;
}
/* 排行榜样式 */
.ranking {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.rank-item {
  margin: 5px 0;
  font-size: 18px;
}
.ranking-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.ranking-columns p {
    width: 18%;
    margin: 3px 0;
    padding: 2px;
    border: 1px solid #ddd;
    background-color: #f9f9f9;
}

.rank {
    font-weight: bold;
    margin-right: 5px;
}
/* 新增：排行榜容器flex布局 */
.ranking-container {
    display: flex;
    gap: 20px; /* 控制两个排行榜之间的间距 */
    margin-top: 20px;
}
.ranking-container > .ranking {
    flex: 1;
}
/* 每个排行榜宽度平分 */
.ranking-container .ranking {
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
}

/* 确保排行榜容器为Flex布局 */
.ranking-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* 强制子元素等宽 */
.ranking-container .ranking {
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
}