/* 确保背景颜色无缝覆盖整个页面 */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* 页面高度 */
  background: linear-gradient(to bottom right, #8cc7eb, #f6a9c4); /* 渐变背景 */
  background-attachment: fixed; /* 背景固定 */
  background-size: cover; /* 背景填充 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 容器样式 */
.container {
  width: 80vw; /* 宽度为视口宽度的80% */
  height: 60vh; /* 高度为视口高度的50% */
  max-width: 800px; /* 最大宽度，避免大屏设备过大 */
  max-height: 600px; /* 最大高度 */
  min-width: 320px; /* 最小宽度 */
  min-height: 700px; /* 最小高度 */
  padding: 20px;
  background: rgba(255, 255, 255, 0.75); /* 半透明白色背景 */
  border-radius: 15px; /* 圆角卡片 */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
  display: flex;
  flex-direction: column; /* 纵向排列内容 */
  /* justify-content: center; 内容垂直居中 */
  align-items: center; /* 内容水平居中 */
  text-align: center; /* 内容文本居中 */
  position: relative; /* 允许子元素绝对定位 */
  /* overflow: hidden; 隐藏溢出的内容，配合动画 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* 动画：淡出 */
.fade-out {
  opacity: 0; /* 渐隐 */
  transform: translateY(-20px); /* 向上滑出 */
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

/* 动画：淡入 */
.fade-in {
  opacity: 0;
  transform: translateY(20px); /* 从下方滑入 */
  animation: fadeIn 0.5s forwards; /* 动画定义 */
}

/* 动画：淡入效果 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画：从右滑入 */
.slide-in {
  opacity: 0;
  transform: translateX(100%); /* 从右侧滑入 */
  animation: slideIn 0.6s forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 动画：从左滑出 */
.slide-out {
  opacity: 0;
  transform: translateX(-100%); /* 向左滑出 */
  animation: slideOut 0.6s forwards;
}

@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

/* 问题图片基础样式 */
.question-image {
  display: block; /* 图片作为独立块 */
  max-width: 100%; /* 图片宽度最大为容器宽度 */
  height: auto; /* 自动调整高度，保持宽高比 */
  margin: 15px auto; /* 图片居中显示，添加上下间距 */
  border-radius: 10px; /* 图片圆角 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 图片阴影效果 */
  transition: background-color 0.3s ease, transform 0.2s ease;
}
/* 问题图片基础样式 */
.question-image:hover {
  transform: scale(1.02); /* 鼠标悬停放大效果 */
}
/* 选项图片基础样式 */
.option-image {
  display: block; /* 图片作为独立块 */
  max-width: 35%; /* 图片宽度最大为容器宽度 */
  height: auto; /* 自动调整高度，保持宽高比 */
  margin: 3px auto; /* 图片居中显示，添加上下间距 */
  border-radius: 5px; /* 图片圆角 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 图片阴影效果 */
}
/* 二维码图片 */
.qrimage {
  max-width: 100%; /* 防止图片超出页面宽度 */
  max-height: 100%; /* 防止图片超出页面高度 */
  overflow: hidden; /* 防止图片溢出容器 */
  display: flex;
  justify-content: center; /* 确保图片居中 */
  align-items: center;
}
.qrimage img {
  max-width: 50%; /* 图片最多占页面宽度的 50% */
  max-height: 50%; /* 图片最多占页面高度的 50% */
  object-fit: contain; /* 等比例缩放 */
}

/* 回复代码样式 */
#hashCode {
  background-color: #acabab;
}

/* 标题样式 */
h1,
h2 {
  font-family: "Arial", sans-serif;
  color: #333;
  margin-bottom: 20px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

h1:hover,
h2:hover {
  transform: scale(1.05); /* 鼠标悬停放大效果 */
}

/* 选项按钮容器：垂直居中 */
.options {
  display: flex;
  flex-direction: column; /* 按钮垂直排列 */
  align-items: center; /* 水平居中 */
  gap: 15px; /* 按钮之间的间距 */
  margin-top: 20px;
}

/* 按钮样式 */
.option-btn {
  width: 70%; /* 按钮宽度为容器的70% */
  max-width: 300px; /* 最大宽度限制 */
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background: #5aaedb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-align: center; /* 按钮文字居中 */
}

.option-btn:hover {
  background: #4995c4;
  transform: scale(1.05); /* 鼠标悬停放大效果 */
}

.option-btn:active {
  background-color: #367ba5; /* 点击时更深的浅蓝色 */
}
/* 上一题按钮样式 */
.back-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background: #f488a9;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.back-btn:hover {
  background: #e76e8d;
  transform: scale(1.05); /* 鼠标悬停放大效果 */
}
.back-btn:active {
  background-color: #d25574; /* 点击时更深的浅粉色 */
}

/* 重做按钮样式 */
.retry-btn {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 14px;
  color: #fff;
  background: #5aaedb;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.retry-btn:hover {
  background: #4995c4;
  transform: scale(1.05);
}
.retry-btn:active {
  background-color: #367ba5;
}

/* 复制按钮样式 */
.copy-btn {
  background: #5aaedb;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.copy-btn:hover {
  background: #4995c4;
  transform: scale(1.05);
}
.copy-btn:active {
  background-color: #367ba5;
}
.copy-btn svg {
  width: 16px;
  height: 16px;
  color: white;
}

/* 加载动画样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #5aaedb;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 结果内容容器 */
.result-content {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.result-content.visible {
  opacity: 1;
}

/* 提交页面文字样式 */
p {
  font-size: 1.2rem;
  margin-top: 20px;
}

/* HashCode 容器样式 */
.hash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 15px 0;
  background-color: #f5f5f5;
  padding: 10px 15px;
  border-radius: 8px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.hash-code {
  font-family: monospace;
  font-size: 16px;
  color: #333;
  letter-spacing: 1px;
  padding: 5px 10px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* footer 样式 */
footer {
  position: fixed; /* 固定在页面底部 */
  bottom: 0; /* 距离底部 0 */
  width: 100%; /* 占满页面宽度 */
  text-align: center; /* 文本居中 */
  font-size: 0.8rem; /* 字体较小 */
  color: #aaa; /* 低调灰色字体 */
  background: transparent; /* 背景透明 */
  padding: 5px 0; /* 上下间距 */
}

/* 响应式优化 */

/* 针对大屏设备（PC） */
@media (min-width: 1024px) {
  .question-image {
    max-width: 60%; /* PC 上图片宽度为容器的 70% */
    max-height: 30%; /* PC 上图片高度为容器的 30% */
    margin: 20px auto; /* 增加上下间距 */
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .question-image {
    max-width: 80%; /* 平板上图片宽度为容器的 80% */
    max-height: 30%; /* 平板上图片高度为容器的 30% */
  }
}
/* 针对小屏设备（手机） */
@media (max-width: 767px) {
  .question-image {
    max-width: 90%; /* 手机上图片宽度为容器的 90% */
    max-height: 30%; /* 手机上图片高度为容器的 40% */
  }
}

@media (max-width: 768px) {
  /* 针对平板或小屏幕 */
  .container {
    width: 90vw; /* 更宽松的宽度 */
    height: 65vh; /* 调整高度比例 */
  }

  h1,
  h2 {
    font-size: 1.5rem; /* 缩小标题字体 */
  }

  .option-btn {
    font-size: 1rem; /* 缩小按钮字体 */
    padding: 8px 15px;
  }
}

@media (max-width: 480px) {
  /* 针对超小屏幕（如手机） */
  .container {
    width: 90vw; /* 减少宽度占比 */
    height: 70vh; /* 增加高度占比 */
  }

  .option-btn {
    width: 80%; /* 缩小按钮宽度 */
  }
}