/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 导入字体（可选）- Minecraft 风格字体 */
@font-face {
  font-family: 'Minecraftia';
  src: url('https://fonts.cdnfonts.com/css/minecraftia') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 滚动条样式优化 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1E293B;
}

::-webkit-scrollbar-thumb {
  background: #4CAF50;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #3d8b40;
}

/* 动画定义 */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* 导航栏滚动效果 */
#navbar.scroll {
  background-color: rgba(30, 41, 59, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* 平滑滚动 */
html {
  scroll-behavior: smooth;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .pixel-border::after {
    border-width: 1px;
  }

  .mc-shadow {
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
  }
}

/* 按钮交互效果增强 */
.mc-shadow {
  transition: all 0.3s ease;
}

.mc-shadow:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.3);
}

.mc-shadow:active {
  transform: translate(0px, 0px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.3);
}

/* 卡片悬停效果优化 */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* 表单样式 */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.5);
}

/* 链接样式优化 */
a {
  transition: all 0.2s ease;
}

/* 服务器状态指示器动画 */
.server-indicator {
  animation: pulse 2s infinite;
}

/* 下载按钮特殊样式 */
.download-btn {
  position: relative;
  overflow: hidden;
}

.download-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: all 0.6s ease;
}

.download-btn:hover::after {
  left: 100%;
}

/* 页脚链接 hover 效果 */
.footer-link:hover {
  transform: translateX(3px);
}

/* 特色卡片图标动画 */
.feature-icon {
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

/* 导航菜单动画 */
#mobileMenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobileMenu.open {
  max-height: 500px;
}

/* 加载动画（备用） */
.loader {
  border-top-color: #4CAF50;
  animation: spinner 0.8s linear infinite;
}

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

/* 图表容器样式 */
.chart-container {
  position: relative;
  height: 100%;
  width: 100%;
}

/* 规则卡片样式 */
.rule-card {
  transition: all 0.2s ease;
}

.rule-card:hover {
  background-color: rgba(30, 41, 59, 0.7);
  border-color: rgba(76, 175, 80, 0.5);
}

/* 服务器信息卡片样式 */
.server-info-card {
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.server-info-card:hover {
  border-color: rgba(76, 175, 80, 0.5);
}

/* 响应式字体调整 */
@media (max-width: 480px) {
  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }
}

/* 白色图标样式 */
.white-icon {
  filter: brightness(0) invert(1);
  width: 18px;
  height: 18px;
}

/* 抖音Logo容器样式 */
.douyin-logo-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 可根据需要添加背景或边距 */
  padding: 8px;
}

/* 抖音Logo图片样式 */
.douyin-logo {
  width: 18px; /* 调整大小 */
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* 微信悬停弹窗样式 */
.wechat-popup {
  pointer-events: none; /* 确保鼠标移到弹窗上不会消失 */
  width: 200px; /* 弹窗总宽度（可根据需要调整） */
  /* 可选：固定高度，若内容超出会自动滚动 */
  /* height: 260px; */
  /* overflow-y: auto; */
}

/* 弹窗内的二维码图片大小控制 */
.wechat-popup img {
  width: 100%; /* 图片宽度适应弹窗 */
  height: auto; /* 保持图片比例 */
  max-width: 130px; /* 图片最大宽度（防止过大） */
  margin: 0 auto; /* 图片水平居中 */
  display: block; /* 确保margin生效 */
}

/* 弹窗内的文字样式（可选调整） */
.wechat-popup p {
  font-size: 12px; /* 文字大小 */
  padding: 0 8px 8px; /* 内边距 */
}

.wechat-container:hover .wechat-popup {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -5px); /* 稍微上移一点增加动画感 */
}

/* 小三角指示（位置可能需要随弹窗大小微调） */
.wechat-popup::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px; /* 三角水平居中 */
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}