body {
  background: #f5f5f5;
}

.g-guide {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  font-weight: normal;
  color: #333;
  position: relative;
  zoom: 1
}

.g-guide a {
  color: #333
}

.g-guide a:hover {
  color: #ff4939
}

.g-guide .u-key-font {
  color: #F30;
  padding: 0 6px;
}

.g-guide .u-key-length {
  color: #F30;
  padding: 0 6px;
}


/* 主容器 */
.main-wrapper {
  /* width: 100%; */
  /* max-width: 1300px; */
  /* 页面总宽度 */
  display: flex;
  /* 启用Flexbox布局用于左右分栏 */
  gap: 20px;
  /* 左右两列之间的20px透明间距，显示body背景色 */
  /* main-wrapper本身没有背景色和阴影，让body背景色透过 */
  /* border-radius: 10px; */
  /* 整体内容的圆角 */
  /* overflow: hidden; 可以移除，因为子元素有自己的圆角和阴影 */
}

/* --- 左侧文章主体列样式 --- */
.article-main-content {
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
}

/* --- 左侧文章主体列样式 --- */
.main-box {
  flex: 1;
  /* 允许左侧内容自由伸缩 */
  display: block;
  overflow: hidden;
}

/* 文章标题 */
.article-title {
  font-size: 32px;
  /* 增大标题字号 */
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
  color: #2c3e50;
  /* 深色标题 */
  line-height: 1.3;
  text-align: center;
}

/* 文章元信息 (时间、作者) */
.article-meta {
  text-align: center;
  font-size: 14px;
  color: #7f8c8d;
  /* 柔和的灰色 */
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;
  /* 虚线分隔 */
}

.article-meta span {
  margin-right: 20px;
}

.article-meta span i {
  font-style: normal;
}

/* 下载板块样式 (如图2) */
.download-block-wrapper {
  margin-bottom: 20px;
  background-color: #fdfdfd;
  /* 稍微深一点的背景 */
  border: 1px solid #eee;
  /* 边框颜色 */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 轻微阴影 */
}

.download-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.download-icon {
  flex-shrink: 0;
  width: 90px;
  /* 增大图标尺寸 */
  height: 90px;
  border-radius: 15px;
  /* 更圆润的图标边角 */
  overflow: hidden;
  background-color: #f0f0f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.download-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.download-details {
  flex: 1;
  display: block;
  overflow: hidden;
}

.download-title {
  font-size: 20px;
  /* 增大标题字号 */
  font-weight: bold;
  margin: 0 0 10px 0;
  color: #2c3e50;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
  width: 100%;
  display: block;
}

.game-info {
  font-size: 13px;
  color: #7f8c8d;
  margin-top: 8px;
  /* 调整间距 */
  display: flex;
  /* 使用flex让子元素水平排列 */
  flex-wrap: wrap;
  /* 允许换行 */
  gap: 10px;
  /* 元素间距 */
}

.game-info span {
  white-space: nowrap;
}

.game-info a {
  color: #3498db;
  /* 蓝色链接 */
  text-decoration: none;
}

.game-info a:hover {
  text-decoration: underline;
}

/* 星级评分样式 */
.rating-stars {
  color: #f39c12;
  /* 橙黄色 */
  font-size: 15px;
  margin-bottom: 8px;
  white-space: nowrap;
}

.rating-stars .star {
  display: inline-block;
}

.rating-stars .star.empty {
  color: #ccc;
}

.rating-stars.small {
  font-size: 13px;
  margin-bottom: 3px;
  /* 小号星级，用于相关推荐 */
}

/* 下载按钮 */
.download-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 25px;
  /* 调整按钮内边距 */
  border-radius: 25px;
  /* 更圆的按钮 */
  text-decoration: none;
  font-weight: bold;
  font-size: 16px;
  min-width: 100px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.download-btn.green {
  background-color: #2ecc71;
  /* 绿色 */
  color: #fff;
  border: 1px solid #2ecc71;
  overflow: hidden;
  /* display: block; */
}

.download-btn.green:hover {
  background-color: #27ae60;
  border-color: #27ae60;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.download-icon-small {
  margin-right: 8px;
  font-size: 18px;
}

/* --- 文章正文内容样式 --- */
.article-text-content {
  font-size: 16px;
  /* 正文基础字体大小 */
  line-height: 1.8;
  color: #4a4a4a;
}


.article-text-content h3 {
  height: 28px;
  padding: 4px 0px;
  text-indent: 0px;
  margin: 12px 0;
  border-bottom: 1px solid #ededed;
  color: #333;
  font: bold 16px/26px arial, sans-serif;
}

.article-text-content h4 {
  font: 14.6px / 1.8 arial, sans-serif;
  font-weight: bold;
  color: #666;
}


.article-text-content p {
  margin-top: 1em;
  text-indent: 2em;
  /* 首行缩进 */
}

.article-text-content a {
  color: revert;
  text-decoration: underline;
}

.article-text-content p img {
  max-width: 88%;
  display: block;
  overflow: hidden;
  margin: auto;
}

.article-text-content strong {
  color: #2c3e50;
}

.article-text-content em {
  color: #8e44ad;
  font-style: normal;
}

/* --- 右侧边栏样式 --- */
.sidebar {

  padding: 0;

  box-sizing: border-box;

  background: none;

  background: none;

  width: 330px;

  min-width: 330px;

  display: block;

  overflow: hidden;
}

/* 热门游戏资讯和相关推荐通用标题 (沿用热门游戏资讯的风格) */
.hot-info h2,
.related-recommendations h2 {
  font-size: 18px;
  color: #333;
  margin-top: 0;
  padding: 10px 15px;
  background-color: #f0f0f0;
  border-left: 3px solid #dc3545;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  border-radius: 6px;
}


/* 排行列表通用样式 */
.hot-info ol,
.related-recommendations ul {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: rank-item-counter;
}

/* 热门游戏资讯列表项 */
.hot-info li {
  position: relative;
  padding: 8px 0 8px 30px;
  /* 沿用热门游戏资讯的内边距 */
  margin-bottom: 5px;
  /* 沿用热门游戏资讯的间距 */
  font-size: 14px;
  /* 沿用热门游戏资讯的字体大小 */
  border-bottom: 1px dashed #eee;
  /* 沿用热门游戏资讯的边框 */
}

.hot-info li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.hot-info li::before {
  counter-increment: rank-item-counter;
  content: counter(rank-item-counter);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
  background-color: #dc3545;
  /* 红色 */
}

.hot-info li:nth-child(n+4)::before {
  background-color: #f0f0f0;
  /* 灰色 */
  color: #555;
}

.hot-info li a {
  color: #333;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hot-info li a:hover {
  color: #007bff;
  text-decoration: underline;
}

/* 相关推荐列表项 (如图1的排版) */
.related-recommendations {
  margin-top: 20px;
  /* 确保与热门资讯有间距 */
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 12px;
}

.reco-item {
  display: flex;
  align-items: center;
  margin-top: 15px;
  /* 间距 */
  padding-bottom: 15px;
  border-bottom: 1px dashed #eee;
  gap: 15px;
  /* 元素间距 */
}

.reco-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.reco-image {
  flex-shrink: 0;
  width: 60px;
  /* 图1中的图标尺寸 */
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #eee;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.reco-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reco-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.reco-title {
  font-size: 15px;
  /* 调整字体大小，与热门资讯列表项和谐 */
  font-weight: bold;
  margin: 0 0 5px 0;
  color: #333;
  /* 标题蓝色 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reco-meta {
  font-size: 12px;
  /* 调整字体大小 */
  color: #7f8c8d;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reco-meta.type {
  margin-top: 3px;
}

.reco-button {
  flex-shrink: 0;
  padding: 6px 20px;
  /* 调整按钮内边距 */
  background-color: #358ff0;
  /* 蓝色按钮 */
  color: #fff !important;
  border: none;
  border-radius: 50px;
  /* 圆润边角 */
  text-decoration: none;
  font-size: 12px;
  /* 调整字体大小 */
  font-weight: normal;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.reco-button:hover {
  background-color: #0056b3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.hot-info {

  padding: 20px;

  box-sizing: border-box;

  background: #fff;

  border-radius: 12px;
}

.related-recommendations ul {
  margin-top: 20px;
}

.star {
  height: auto;
}

.star span {
  height: 16px;
}

.cms-pl {
  padding: 20px;
  border-radius: 10px;
  box-sizing: border-box;
}

.m-yuedu {
  height: 40px;
  line-height: 40px;
  padding: 0;
}

.m-yuedu label {
  display: inline-block;
  color: #f40;
  margin: 0 3px;
}

.m-yuedu span {
  color: #f00;
}

.m-newxq {
  height: auto;
}

.m-newxq ul {

  float: none;

  display: flex;

  overflow: hidden;

  padding-bottom: 20px;
}

.m-newxq li {
  width: 100px;
  margin-top: 00px;
  float: none;
  flex: 1;
  text-align: center;
}

.m-newxq li b {
  display: block;
  text-align: center;
  color: #F60;
  font-size: 12px;
  line-height: 20px;
}

.m-newxq li span {
  display: block;
  height: 128px;
  width: 18px;
  border: 1px solid #060;
  overflow: hidden;
  margin-left: 40px;
  margin-bottom: 0px;
  overflow: hidden;
  position: relative;
  margin: 10px auto;
}

.m-newxq li span img {
  position: absolute;
  clip: rect(auto, auto, auto, auto);
  bottom: 0px;
  *width: 18px;
}

.m-newxq li em {
  width: 80px;
  margin: 0 auto;
  display: block;
  text-align: center;
  color: #333
}

.m-newxq li em img {
  width: 80px;
  margin: 0 auto
}

#ListMood {
  margin-top: 10px;
}