/* Custom styles to complement Tailwind CSS */

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Apply animations */
.hero-content {
  animation: fadeIn 1s ease-out;
}

.game-card {
  animation: slideUp 0.6s ease-out;
  animation-fill-mode: both;
}

.game-card:nth-child(2) {
  animation-delay: 0.2s;
}

.game-card:nth-child(3) {
  animation-delay: 0.4s;
}

/* Game card hover effects */
.game-card:hover, 
.bg-apple-gray-100.rounded-xl:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Button hover effect */
.cta-button:hover {
  animation: pulse 1s infinite;
}

/* Modal animations */
.fixed.inset-0 {
  animation: fadeIn 0.3s ease-out;
  transition: opacity 0.3s ease;
}

.fixed.inset-0 > div {
  animation: scaleIn 0.3s ease-out;
}

/* Modal elements animation */
.bg-white h3,
.bg-white h4,
.bg-white p,
.bg-white button {
  animation: slideInRight 0.4s ease-out;
  animation-fill-mode: both;
}

.bg-white h3 {
  animation-delay: 0.1s;
}

.bg-white h4,
.bg-white p {
  animation-delay: 0.2s;
}

.bg-white button,
.bg-white form {
  animation-delay: 0.3s;
}

/* Game option hover effect */
.bg-apple-blue.bg-opacity-10 {
  transition: all 0.2s ease;
}

.bg-apple-blue.bg-opacity-10:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 122, 255, 0.15);
}

/* Game iframe styles */
#game-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Loading overlay */
#loading-overlay {
  transition: opacity 0.5s ease;
}

#loading-overlay .animate-spin {
  animation: spin 1.2s linear infinite;
}

/* Game info section */
#game-info {
  transition: all 0.3s ease;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
}

#game-info:not(.hidden) {
  max-height: 200px;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Fullscreen button hover effect */
#fullscreen-button {
  transition: transform 0.2s ease;
}

#fullscreen-button:hover {
  transform: scale(1.2);
}

/* Back button effect */
#back-button {
  transition: transform 0.2s ease;
}

#back-button:hover {
  transform: scale(1.1);
}

/* Mute button effect */
#mute-button {
  transition: transform 0.2s ease;
}

#mute-button:hover {
  transform: scale(1.1);
}

/* Game container responsive styles */
@media (max-width: 640px) {
  .fixed.inset-0 > div {
    width: 95%;
  }
}

/* Mobile menu toggle functionality */
.mobile-menu-hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-menu-visible {
  max-height: 300px;
  transition: max-height 0.5s ease-in;
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  h1 {
    font-size: 2.5rem;
  }
  
  h2 {
    font-size: 1.75rem;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
  background: #0056b3;
}

/* Focus styles for accessibility */
a:focus, button:focus, input:focus {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

/* Custom utility classes */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.hover-grow {
  transition: transform 0.3s ease;
}

.hover-grow:hover {
  transform: scale(1.03);
}

/* Loading animation */
.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Form field focus effect */
input:focus {
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

/* 添加游戏占位符的过渡效果 */
.game-placeholder {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.game-container iframe {
    opacity: 1;
}

/* 标签式分类 CSS 样式 */
.category-tab {
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 1;
}

.category-tab:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.category-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: -1;
}

.category-tab:hover::before {
    transform: translateX(0);
}

.category-tab.active-tab {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.category-tab.active-tab::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid currentColor;
}

/* 分类内容面板样式 */
.category-content-container {
    position: relative;
    min-height: 300px;
}

.category-content {
    transition: all 0.4s ease;
    animation: fadeIn 0.5s ease-out;
    position: relative;
}

.category-content.hidden {
    display: none;
}

.category-content .bg-white {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.category-content .bg-white:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 游戏卡片在分类面板中的动画效果 */
@keyframes cardAppear {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.category-content .bg-white {
    animation: cardAppear 0.5s ease-out forwards;
    animation-fill-mode: both;
}

.category-content .bg-white:nth-child(1) {
    animation-delay: 0.1s;
}

.category-content .bg-white:nth-child(2) {
    animation-delay: 0.2s;
}

.category-content .bg-white:nth-child(3) {
    animation-delay: 0.3s;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .category-tab {
        margin: 0.3rem;
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .category-content .grid {
        grid-template-columns: 1fr;
    }
}

/* 全局样式 */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px; /* 导航栏高度，防止锚点定位被导航栏遮挡 */
}

body {
    padding-top: 0; /* 修改这里，移除为固定导航栏预留的空间 */
}

/* 导航栏样式 */
nav {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
}

/* 导航链接激活状态 */
nav a.active {
    color: #ffffff;
    font-weight: bold;
    border-bottom: 2px solid #ffffff;
}

/* 平滑过渡效果 */
.transition {
    transition: all 0.3s ease;
}

/* 移动菜单动画 */
.md\:hidden {
    transition: opacity 0.3s, visibility 0.3s;
}

/* 分类标签样式 */
.active-tab {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}

/* 主容器样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 语言切换样式 */
#language-toggle, #mobile-language-toggle {
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

#language-toggle:hover, #mobile-language-toggle:hover {
    transform: scale(1.05);
}

/* 点击动画 */
#language-toggle:active, #mobile-language-toggle:active {
    transform: scale(0.95);
}

/* 语言切换图标动画 */
#language-toggle svg, #mobile-language-toggle svg {
    transition: transform 0.3s ease;
}

#language-toggle:hover svg, #mobile-language-toggle:hover svg {
    transform: rotate(15deg);
}

/* 语言切换后的全局内容过渡效果 */
body * {
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}