/* 自定义CSS样式，补充Tailwind CSS */

/* 添加平滑滚动效果 */
html {
  scroll-behavior: smooth;
}

/* 游戏iframe容器样式 */
.game-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9宽高比 */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.game-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
}

/* 自定义动画效果 */
@keyframes pulse-blue {
  0%, 100% {
    background-color: #0071e3;
  }
  50% {
    background-color: #0056b3;
  }
}

.animate-pulse-blue {
  animation: pulse-blue 2s infinite;
}

/* 移动端菜单样式增强 */
@media (max-width: 768px) {
  .mobile-menu-active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4rem;
    right: 1rem;
    background-color: #1d1d1f;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 50;
  }
  
  .mobile-menu-active li {
    margin: 0.75rem 0;
  }
}

/* 增强卡片悬停效果 */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* 增强按钮点击效果 */
.btn-effect {
  transition: transform 0.1s ease;
}

.btn-effect:active {
  transform: scale(0.98);
}

/* 自定义列表样式 */
.custom-list li {
  position: relative;
  padding-left: 1.5rem;
}

.custom-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #0071e3;
  font-weight: bold;
}

/* 增强可访问性 */
:focus {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
}

/* 打印样式优化 */
@media print {
  .no-print {
    display: none;
  }
  
  body {
    font-size: 12pt;
    color: #000;
    background-color: #fff;
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
}