.timer {
  font-size: 25px;
  /* 修改字体大小 */
  position: absolute;
  top: 10px;  /* 距离顶部 10px */
  right: 10px;  /* 距离右边 10px */
  transition: color 0.5s;
  /* 颜色变化过渡效果 */
  z-index: 10;
  /* 确保在最前面 */
}

.my-section {
  text-align: left;
  margin-bottom: 5px;
}

.my-section h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 5loading-spinnerpx;
}

.my-section p {
  font-size: 16px;
  color: #666;
}

.my-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  transition: background-color 0.3s;
  margin-top: 10px;
}

.my-button:hover {
  background-color: #0056b3;
}

.my-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.my-footer {
  margin-top: 20px;
  font-size: 14px;
  color: #999;
}

.my-back-button {
  background-color: #ddd;
  color: #333;
  border: none;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  margin-top: 20px;
}

.my-back-button:hover {
  background-color: #bbb;
}

.custom-button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #576B95;
  border-radius: 4px;
  color: white;
  /*#3498db;*/
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin: 3px;
  background-color: #576B95;
}

.custom-button-green {
  background-color: #1AAD19;
}

.custom-button-blue {
  background-color: #0fa3b8;
}

.custom-button-gold {
  background-color: #ffaf00;
}

.custom-button-gray {
  background-color: gray;
}

.custom-button-red {
  background-color: red;
}

/* 外层容器的样式 */
.training-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 使返回按钮和训练列表居中 */
  padding: 20px;
  position: relative;
  width: 100%;
  /* 宽度为100% */
  height: 100vh;
  /* 设置容器高度为视口高度，确保填满整个屏幕 */
  overflow: scroll;
  /* 隐藏超出容器的内容，防止出现滚动条 */
}

/* 返回按钮的样式 */
.back-button {
  padding: 10px 20px;
  font-size: 1.2em;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
  /* 为按钮与列表之间留出空隙 */
  transition: background-color 0.3s ease;
  margin-top: 10px;
}


        /* 顶部返回按钮 */
        .back-button-icon {
          position: fixed;
          top: 25px;
          left: 10px;
          padding: 10px;
          background-color: #4CAF50;
          color: white;
          border: none;
          border-radius: 50%;
          cursor: pointer;
          z-index: 1;
          /* 确保按钮在最上层 */
      }
        /* 按钮hover效果 */
        .back-button-icon:hover {
          background-color: #0056b3;
      }

/* 训练列表容器的样式（内部子容器） */
.trainingList {
  display: flex;
  flex-wrap: wrap;
  /* 使项目可以换行 */
  justify-content: center;
  /* 水平居中对齐 */
  align-items: center;
  /* 垂直居中对齐 */
  width: 100%;
  /* 容器宽度 100% */
  max-width: 800px;
  height: auto;
  background: rgba(255, 255, 255, 0.9);
  z-index: 10;
  padding: 5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 2px;
  /* 给外层容器和训练列表之间增加间隔 overflow-y: auto; */
  
  /* 如果列表内容过多，显示竖向滚动条 */
  margin-bottom: 2px;
}

/* 返回按钮的悬停效果 */
.my-button:hover {
  background-color: #0056b3;
}

/* 每个游戏项的样式 */
.training-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3px;
  padding: 5px;
  border-radius: 10px;
  background-color: transparent;
  /* 背景设置为透明 */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 60px;
  /* 设置每个项目的宽度为 80px */
  height: auto;
  overflow: hidden;
  text-align: center;
  margin-bottom: 0px;
  /* 给每个项之间添加一些间距 */
}
.training-title {
  font-size: 1em; /* 稍微增大字体大小 */
  background-color: #FF6F61; /* 使用更鲜艳的背景颜色 */
  color: white;
  padding: 8px 12px; /* 增加内边距，使按钮看起来更饱满 */
  border-radius: 10px; /* 增加圆角，使按钮更圆润 */
  font-family: 'Comic Sans MS', cursive, sans-serif; /* 使用适合小孩子的字体 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 添加文字阴影，增加立体感 */
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); /* 添加盒子阴影，增加立体感 */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
  display: inline-block; /* 使元素可以应用 transform */
  margin: 5px; /* 给每个项之间添加一些间距 */
}

.training-title:hover {
  transform: scale(1.05); /* 鼠标悬停时稍微放大 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 鼠标悬停时增加阴影 */
}
/* 游戏项目的图片样式 */
.training-item img {
  width: 50px;
  /* 设置图片宽度 */
  height: 50px;
  /* 设置图片高度 */
  object-fit: cover;
  margin-bottom: 5px;
}

/* 游戏项目的文本样式 */
.training-item span {
  font-size: 0.7em;
  color: #333;
  font-weight: bold;
}




/* 交互效果：点击时的缩放和阴影效果 */
.training-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 小屏幕设备适配 */
@media (max-width: 768px) {
  .training-item {
    width: 60px;
    /* 在平板和手机上仍然保持每项的宽度为 80px */
  }

  .training-item img {
    width: 50px;
    height: 50px;
  }

  .training-item span {
    font-size: 0.9em;
    /* 小屏幕上稍微减小字体 */
  }
}

@media (max-width: 480px) {
  .training-item {
    width: 60px;
    /* 在小屏幕上保持每项宽度为 80px */
  }

  .training-item img {
    width: 40px;
    height: 40px;
  }

  .training-item span {
    font-size: 0.9em;
    /* 小屏幕上稍微减小字体 */
  }
}

#playButton,
#playButton1,
#loginButton,
#regButton,
#logoutButton,
#dataandai,
#myButton {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 10px;
  transition: background-color 0.3s, transform 0.2s;
  width: 90%;
  max-width: 300px;
  position: relative;
  z-index: 1;
}

#playButton:hover,
#myButton:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

#remainingGames {
  font-size: 1em;
  /* 使用相对单位 */
  margin-bottom: 20px;
  color: black;
}

#imageContainer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* 支持换行 */
  margin: 10px 0;
  /* 减小外边距 */
}

.training-image {
  width: 80px;
  /* 减小图标大小 */
  height: 80px;

  margin: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.description {
  margin: 10px 0;
  color: #555;
}



.closeButton {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #d32f2f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 90%;
  /* 使用百分比宽度 */
  max-width: 300px;
  /* 设置最大宽度 */
}

#itemContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* 其他样式与之前相同 */
.description {
  margin: 10px 0;
  color: #555;
  position: relative;
  z-index: 1;
}

/* 媒体查询，适配不同屏幕 */
@media (max-width: 600px) {
  h1 {
    font-size: 1em;
    /* 在小屏幕上减小标题字体 */
  }

  #playButton,
  #myButton,
  #closeButton {
    padding: 8px 15px;
    /* 在小屏幕上减小按钮的内边距 */
    font-size: 1em;
    /* 在小屏幕上减小按钮的字体 */
  }
}

/* 页脚样式 */
footer {
  position: fixed;
  /* 固定在页面底部 */
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #333;
  /* 背景颜色 */
  color: #fff;
  /* 字体颜色 */
  text-align: center;
  /* 居中对齐 */
  padding: 10px 0;
  /* 上下内边距 */
  font-size: 14px;
  /* 字体大小 */
}

footer p {
  margin: 0;
  /* 去除默认的外边距 */
}

/* 使用 back_ 前缀来命名返回按钮的样式 */
.back_button {
  position: fixed;
  /* 固定位置 */
  top: 10px;
  /* 离顶部10px */
  left: 10px;
  /* 离左边10px */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10000;
}

.back_button:hover {
  background-color: #0056b3;
  /* 鼠标悬停时的颜色变化 */
}
.game_restart_button {
  position: fixed;
  /* 固定位置 */
  top: 50%;
  /* 垂直居中 */
  left: 50%;
  /* 水平居中 */
  transform: translate(-50%, -50%);
  /* 偏移自身宽高的50%，实现居中 */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 10;
}

.game_restart_button:hover {
  background-color: #0056b3;
  /* 鼠标悬停时的颜色变化 */
}

 
/* 整体aireport样式 */
.aireport {
  font-family: Arial, sans-serif; /* 设定统一字体 */
  padding: 0px;  /* 给整个报告一些内边距 */
  background-color: #f8f8f8; /* 背景色为淡灰色 */
  border-radius: 10px; /* 边角圆润 */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 标题部分，亮黄色背景 */
.aireport div {
  font-size: 18px;
  font-weight: bold;
  color: #ffcc00; 
  padding: 5px 5px; /* 内边距 */
  border-radius: 5px;
  margin-bottom: 15px; /* 下边距 */
}

/* 强调部分，例如加粗文本 */
.aireport strong {
  font-weight: bold;
  color: black;
}

/* 段落和列表元素都左对齐，并设置统一左边距 */
.aireport p,
.aireport ul,
.aireport strong,
.aireport li {
  text-align: left;
  margin-left: 5px; /* 统一的左边距 */
}

/* 列表项样式，避免嵌套的ul */
.aireport ul {
  list-style-type: disc; /* 使用圆点列表 */
  padding-left: 20px; /* 左侧内边距 */
}

/* 给每个段落增加一些空隙 */
.aireport p {
  margin-bottom: 10px; /* 段落底部间距 */
}

/* 给有序列表和无序列表增加间距 */
.aireport ul li {
  margin-bottom: 5px; /* 列表项之间的间距 */
}

.aireport ol {
  padding-left: 20px;
  margin-left: 5px; /* 增加左侧间距 */
}

.aireport ol li {
  margin-bottom: 5px;
}

/* 在 h3 等章节标题加粗的基础上，增加间距 */
.aireport h3 {
  font-weight: bold;
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #333;
}

/* 改变背景色和字体颜色 */
.aireport .aireport-title {
  background-color: #e9ecef;
}


.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black overlay */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}

.loading-spinner {
  border: 6px solid #fff;
  /* White border */
  border-top: 6px solid #4CAF50;
  /* WeChat green color for spinner */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg); /* 从 0 度开始 */
  }
  100% {
    transform: rotate(360deg); /* 一圈 360 度 */
  }
}

/* 通用半透明光栅样式  半透明和置顶样式 */
.general_v_front{
  z-index: 1000;
  opacity: 0.5; /* 整个元素，包括子元素半透明 */
}

/* 远眺图样式*/
.rectangle {
  position: absolute;
  transition: background-color 0.5s ease;
  z-index: -1;
}