@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  
  /* 游戏卡片样式 - 增强居中效果 */
  .game-card {
    @apply bg-white rounded-xl overflow-hidden shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100 flex flex-col h-full;
  }
  
.game-card-img-container {
    @apply relative flex-grow flex items-center justify-center p-4; /* 图片容器居中 */
  }
  
  .game-card img {
    @apply max-w-full max-h-full object-contain bg-gray-100; /* 图片自适应并居中 */
  }
  
  .game-card-content {
    @apply p-3 flex flex-col items-center justify-center; /* 内容区居中 */
  }
  
  .game-card-title {
    @apply font-bold text-gray-800 mb-1 text-sm md:text-base truncate text-center; /* 标题居中 */
  }
  
  /* 移除游戏卡片按钮样式（如果不需要） */
  .game-card-btn {
    display: none;
  }
  
  /* 其他样式保持不变 */
  .filter-box {
    @apply w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50 transition-all;
  }
  
  .fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .btn-hover {
    @apply transition-all duration-300 hover:shadow-md hover:-translate-y-1;
  }
  
  .pagination {
    @apply flex justify-center mt-6 gap-2;
  }
  
  .pagination button {
    @apply px-3 py-1 border rounded hover:bg-primary hover:text-white transition-colors;
  }
  
  .pagination button.active {
    @apply bg-primary text-white;
  }
  
  .pagination button:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}