/* 排行榜页面样式 */

/* 排行榜主容器样式 - 保留以确保正确的布局和背景色 */
#rank-content {
  width: 100%;
  max-width: 7.5rem;
  margin: 0 auto 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

/* 排行榜内容区域盒模型设置 - 保留以确保一致的布局计算 */
#rank-content * {
  box-sizing: border-box;
}

/* 主内容容器 */
#rank-content .rank-main {
  padding: 0.2rem;
  width: 100%;
  background-color: #fff;
  margin: 0 0 0;
}

/* 横幅图片样式 */
#rank-content .banner-image {
  width: 100%;
  height: 2rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}

#rank-content .banner-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 横幅标题样式 */
#rank-content .banner-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.1rem 0.4rem;
  background-color: rgba(0, 0, 0, .3);
  border-radius: 0.1rem;
  z-index: 10;
  white-space: nowrap;
  max-width: 80%;
  font-size: 0.40rem;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.02rem;
  text-shadow: 0 .02rem .04rem rgba(0, 0, 0, .5);
}

/* 标题装饰元素样式 */
#rank-content .banner-title .title-decoration {
  display: inline-block;
  margin: 0 0.2rem;
  color: #ffffff;
  font-size: 0.34rem;
  animation: twinkle 2s infinite alternate;
}

/* 响应式调整 - 已移至main.js动态控制 */

/* 装饰元素闪烁动画 */
@keyframes twinkle {
  from {
    opacity: .6;
    transform: scale(1);
  }
  to {
    opacity: 1;
    transform: scale(1.2);
  }
}

#rank-content .banner-overlay {
    width: 100%;
    height: 0.62rem;
    background-color: #667eea;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    color: white;
    font-size: 0.24rem;
    margin-top: 0.15rem;
}

#rank-content .banner-overlay a {
    color: white;
    text-decoration: none;
    display: inline-block;
}

#rank-content .banner-overlay span {
    cursor: pointer;
    padding: 0;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, .3);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 优化后的标签导航栏样式 - 与common.css导航系统保持一致 */
#rank-content .banner-overlay {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 0.6rem;
    padding: 0;
    margin-top: 0;
    /* 使用common.css中的导航栏背景色变量 */
    background-color: #667eea;
}

#rank-content .banner-overlay .nav-tag {
    width: 15%;
    height: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.05rem;
    cursor: pointer;
    /* 确保与common.css中的导航项样式不冲突 */
    transition: background-color .3s ease;
}

#rank-content .banner-overlay .nav-tag a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    padding: 0;
    margin: 0;
    font-weight: normal;
    /* 避免使用!important，优先使用选择器优先级 */
}

#rank-content .banner-overlay .nav-tag.active {
    background-color: white;
}

#rank-content .banner-overlay .nav-tag.active a {
    color: #667eea;
    background-color: transparent;
}

#rank-content .banner-overlay .nav-tag:hover:not(.active) {
    background-color: rgba(255, 255, 255, .2);
}

#rank-content .banner-overlay span.active {
    background-color: transparent;
}

/* 前三名游戏区域 */
#rank-content .top-games {
    margin-bottom: 0.3rem;
    margin-top: 0.2rem;
    padding: 0.2rem;
    background-color: #fff;
  border-radius: 0.15rem;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 10;
}

/* 前三名容器 - 水平布局 */
#rank-content .top-games-container {
  display: flex;
  gap: 0.15rem;
  width: 100%;
  align-items: stretch;
  justify-content: space-between;
}

/* 前三名游戏卡片 */
#rank-content .top-game {
  position: relative;
  background-color: #fff;
  border-radius: 0.15rem;
  box-shadow: 0 .04rem .1rem rgba(0, 0, 0, .1);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

/* 左右两边的游戏下移，让中间的第一名突出显示 */
#rank-content .top-game.rank-1,
#rank-content .top-game.rank-3 {
  margin-top: 0.5rem;
}

/* 让中间的第一名游戏更突出 */
#rank-content .top-game.rank-2 {
  transform: scale(1.05);
  box-shadow: 0 .06rem .15rem rgba(0, 0, 0, .15);
  z-index: 20;
}

/* 第一名游戏a标签内容样式，整体放大 */
#rank-content .top-game.rank-2 .game-card {
  transform: scale(1.05);
}

#rank-content .top-game.rank-2 .game-thumbnail {
  width: 1.3rem;
  height: 1.3rem;
}

#rank-content .top-game.rank-2 h3.game-title {
  font-weight: 600;
  margin-bottom: 0.08rem;
  /* 字体大小已在index.css中统一定义 */
}

#rank-content .top-game.rank-2 .game-stats {
  font-size: 0.2rem;
}

#rank-content .top-game.rank-2 .score {
  font-size: 0.22rem;
}

#rank-content .top-game.rank-2 .download-icon {
  font-size: 0.2rem;
  padding: 0.12rem 0.35rem;
  margin-top: 0.05rem;
}

/* 游戏卡片链接 */
#rank-content .game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.2rem 0.15rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* 排名徽章 */
#rank-content .rank-badge {
  position: absolute;
  top: 0.05rem;
  left: 0.05rem;
  width: 0.35rem;
  height: 0.35rem;
  line-height: 0.35rem;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 0.18rem;
  color: #fff;
  z-index: 10;
}

#rank-content .rank-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  box-shadow: 0 .02rem .08rem rgba(255, 215, 0, .5);
}

#rank-content .rank-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
  box-shadow: 0 .02rem .08rem rgba(192, 192, 192, .5);
}

#rank-content .rank-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #a0522d);
  box-shadow: 0 .02rem .08rem rgba(205, 127, 50, .5);
}

/* 游戏缩略图 */
#rank-content .game-thumbnail {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-bottom: 0.1rem;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#rank-content .game-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 前三名游戏LOGO水平居中 */
#rank-content .top-game .game-thumbnail {
  margin: 0 auto 0.1rem;
  display: block;
}

#rank-content .top-game .card-content {
  text-align: center;
  width: 100%;
}

/* 游戏详情 */
#rank-content .game-details {
  text-align: center;
}

#rank-content .game-title {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-align: center;
  display: block;
  font-size: 0.24rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 0.08rem;
}

/* 前三名游戏特定样式 - 保留特殊定义但与common.css协调 */
#rank-content .top-game .game-details {
  text-align: center;
  width: 100%;
}

#rank-content .top-game h3.game-title {
  /* 保留前三名游戏标题的特殊样式，符合用户要求 */
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: block;
  font-size: 0.22rem;
  margin-bottom: 0.08rem;
  color: #333;
  /* 与common.css中的h3样式协调 */
}

#rank-content .top-game .game-stats {
  display: block;
  text-align: center;
  font-size: 0.18rem;
  margin-bottom: 0.05rem;
  width: 100%;
}

#rank-content .top-game .game-stats span {
  display: inline-block;
  margin: 0 0.05rem;
  text-align: center;
}

/* 普通排名游戏统计信息 */
#rank-content .game-stats {
  display: block;
  text-align: left;
  width: 100%;
  font-size: 0.18rem;
  margin-bottom: 0.05rem;
}

#rank-content .game-stats span {
  display: inline-block;
  margin-right: 0.1rem;
  text-align: left;
}

#rank-content .score {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 0.24rem;
}

#rank-content .size {
  color: #888;
  font-size: 0.22rem;
}

/* 下载按钮样式 */
#rank-content .download-icon {
  display: inline-block;
  background-color: #667eea;
  color: white;
  padding: 0.1rem 0.3rem;
  border-radius: 0.15rem;
  font-size: 0.18rem;
  text-decoration: none;
  margin-top: 0.1rem;
  transition: background-color .3s ease;
}

/* 排行榜标题 - 使用index.css中的全局标题样式 */
/* 现在通过.title容器来应用样式，与index页面保持一致 */

/* 排行榜列表 */
#rank-content .rank-list {
  margin-bottom: 0;
  width: 100%;
  display: block;
  padding: 0 0.1rem;
}

/* 排行榜列表项 */
#rank-content .rank-item {
  display: flex;
  align-items: center;
  padding: 0.3rem 0.2rem;
  margin-bottom: 0.25rem;
  background-color: #fff;
  border-radius: 0.15rem;
  box-shadow: 0 .03rem .12rem rgba(0, 0, 0, .08);
  width: 100%;
}

/* 排名数字 */
#rank-content .rank-number {
  background-color: #e9ecef;
  color: #666;
  width: 0.45rem;
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  border-radius: 50%;
  margin-right: 0.2rem;
  font-weight: bold;
  font-size: 0.22rem;
}

/* 游戏信息链接 */
#rank-content .rank-item .game-info {
  flex: 1;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* 小尺寸游戏图片 */
#rank-content .game-image-small {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-right: 0.2rem;
  background-color: #f8f9fa;
}

#rank-content .game-image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 游戏详情 */
#rank-content .game-details {
  flex: 1;
  text-align: left;
}

#rank-content .game-details .game-title {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  font-size: 0.24rem;
  margin-bottom: 0.08rem;
  font-weight: 500;
}

#rank-content .game-details .game-stats {
  justify-content: flex-start;
  margin-bottom: 0.05rem;
}

/* 游戏描述 */
#rank-content .game-desc {
  font-size: 0.18rem;
  color: #888;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 0.05rem;
}

/* 排行榜动态 - 独立样式，适用于移出#rank-content后的位置 */
.updates-container {
  width: 100%;
  max-width: 7.5rem;
  margin: 0.15rem auto 0.15rem;
  background-color: #fff;
  box-shadow: 0 .02rem .08rem rgba(0, 0, 0, .05);
  overflow: hidden;
  box-sizing: border-box;
}

.rank-updates {
  width: 100%;
  padding: 0.2rem;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
}

/* 排行榜动态标题 */
/* 确保h2标题显示蓝条装饰 */
.rank-updates .title h2 {
  position: relative;
  display: inline-block;
  margin: 0;
  padding-left: .32rem;
}

.rank-updates .title h2::before {
  content: "";
  display: inline-block;
  width: .12rem;
  height: .34rem;
  background-color: #667eea;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 更新列表 */
.rank-updates .updates-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* 更新列表项 */
.update-item {
  margin-bottom: 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: .01rem solid #f0f0f0;
}

/* 移除最后一个列表项的底部边框 */
.update-item:last-child {
  border-bottom: none;
  margin-bottom: 0.4rem;
}

/* 更新内容区域 */
.update-content {
  padding-bottom: 0.2rem;
}

/* 更新内容标题 - 使用全局样式 */

/* 更新元数据 */
.update-meta {
  font-size: 0.16rem;
  color: #888;
  margin-bottom: 0.1rem;
}

/* 更新标签 */
.update-tag {
  font-size: 0.16rem;
  font-weight: normal;
  color: #667eea;
  margin-right: 0.1rem;
}

/* 更新时间 */
.update-time {
  color: #888;
  font-size: 0.16rem;
}

/* 排行榜动态区域 */
.rank-updates {
  margin-bottom: 0.36rem; /* 使用全局边距标准 */
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: none;
  box-sizing: border-box;
  overflow: hidden;
}

/* 排行榜动态容器 - 与index页面保持一致的样式 */
.rank-updates.bg {
  background: none;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.2rem;
}

/* 排行榜动态内容区域 - 使用与index页面一致的.bg类样式 */
.rank-updates .updates-list {
  border-radius: 0;
  box-shadow: none;
  margin-top: -0.01rem; /* 微调与标题的间距 */
  padding-bottom: 0.4rem; /* 增加底部内间距 */
}

/* 更新内容列表 */
.updates-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem; /* 增大间距提高可读性 */
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.15rem 0.2rem;
}

/* 更新项 */
.update-item {
  display: flex;
  gap: 0.2rem;
  padding: 0.15rem 0.2rem;
  background-color: #f8f9fa; /* 浅色背景与容器区分 */
  border-radius: 0.12rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  transition: all 0.3s ease; /* 平滑过渡效果 */
  border: .01rem solid transparent;
}

.update-item:hover {
  transform: translateY(-.02rem);
  box-shadow: 0 .04rem .12rem rgba(0, 0, 0, .08);
  border-color: #667eea;
}

.update-item img {
  width: 1.8rem;
  height: 1.2rem;
  object-fit: cover;
  border-radius: 0.08rem;
  flex-shrink: 0;
}

.update-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding-right: 0.1rem; /* 微调右侧内边距，提高美观性 */
}

.update-content h3 {
  /* 排行榜更新内容标题样式 - 继承common.css中的h3样式 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  /* 其他属性继承自common.css */
}

.update-meta {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  /* 字体大小继承自common.css */
}

.update-tag {
  /* 使用common.css中的标签样式或语义化颜色 */
  background-color: #667eea; /* 主题色，与common.css一致 */
  color: white;
  padding: 0.03rem 0.1rem;
  border-radius: 0.12rem;
  /* 字体大小和字重继承或使用common.css中的对应类 */
}

/* 已优化为更简洁的选择器，保留兼容性 */

/* 响应式设计 - 已移至main.js动态控制 */