/* --- 基础设置 (styles.css) --- */
body {
    margin: 0;
    font-family: sans-serif; 
    
    /* 核心布局：全屏居中 */
    display: flex;
    justify-content: center; /* **水平居中**：让 main-content 居中 */
    align-items: center; /* **垂直居中**：让 main-content 居中 */
    min-height: 100vh; /* 确保占满视口高度 */
    
    /* 背景样式保持不变 */
    background-image: url('images/Background.png'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
    
    position: relative; 
    overflow: hidden; 
}

/* --- 顶部左侧链接 (Presskit/Contact) --- */
.header-links {
    position: absolute;
    top: 37px; /* 稍微下移，更符合截图位置 */
    left: 45px;
    display: flex;
    flex-direction: column; /* 垂直堆叠 */
    gap: 22px;
    z-index: 20;
}
.link-btn img {
    /* 确保图片作为按钮被正确显示 */
    display: block;
    transition: transform 0.15s ease-out; /* 添加动画 */
}

/* 按钮悬停动画：轻微下压效果 */
.link-btn:hover img {
    transform: scale(1.1);
}

/* --- 顶部右侧社交图标 --- */
.social-icons {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px; /* 调整图标间距 */
    z-index: 20;
}

.social-icons img {
    transition: transform 0.15s ease-out;
}

/* 社交图标悬停动画：轻微放大 */
.social-icons a:hover img {
    transform: scale(1.1);
}

/* --- 主要内容区域 (main-content) 修正 --- */
.main-content {
    display: flex;
    flex-direction: column; /* 垂直堆叠：Logo 在上，按钮在下 */
    align-items: center; /* **关键**：确保 Logo 和 Buttons Area 在自身区域内水平居中 */
    
    /* 移除不必要的 padding，让内容更紧凑地居中 */
    /* padding: 20px; */ 
    
    z-index: 10; 
    /* 调整 margin-top/bottom 来微调垂直位置，使其更符合您的视觉预期 */
    /* 例如：如果感觉整体偏上，可以增加 margin-top */
    margin-bottom: 0px;
}

/* --- 游戏 Logo --- */
.game-logo {
    height: auto;
}

/* --- 主按钮区域 (Store/Trailers) --- */
.buttons-area {
    display: flex;
    flex-direction: column; 
    align-items: center; /* 确保按钮在按钮区内水平居中 */
    gap: 20px;
    margin-top: 30px; /* 增加 logo 和按钮之间的间距 */
}
.main-btn img {
    /* 确保图片作为按钮被正确显示 */
    display: block;
    /*width: 300px; /* 主按钮宽度 */
    max-width: 100%;
    height: auto;
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}
/* 主按钮悬停动画：模拟点击的“下压”和轻微高光效果 */
.main-btn:hover img {
    transform: scale(1.1);
}

/* --- 语言切换按钮 (左下角) --- */
.language-switcher {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 20;
	bottom: calc(20px + env(safe-area-inset-bottom));
}

.lang-btn img {
    height: auto;
    cursor: pointer;
    transition: transform 0.15s ease-out;
}

/* 悬停动画 */
.lang-btn:hover img {
    transform: scale(1.1);
}

/* --- 底部 (MEOX STUDIO) --- */
.footer {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
	bottom: calc(20px + env(safe-area-inset-bottom));
}
.meox-logo {
    height: auto;
}

/* --- 响应式设计：适用于手机和平板 (屏幕宽度 <= 768px) --- */
@media (max-width: 768px) {

    /* 1. 调整 Body 缩放：在手机上缩小背景图，防止内容被背景图挤压 */
    body {
        /*background-size: 150%; /* 允许背景图在小屏幕上更大程度地被裁切/缩放 */
    }

    /* 2. 主内容区域 (Logo + Buttons) 调整 */
    .main-content {
        margin-bottom: 50px; /* 减小底部边距，让内容更靠近中心 */
        padding: 0 15px; /* 添加水平内边距，防止内容紧贴屏幕边缘 */
    }

    /* 3. Logo 调整：确保 Logo 缩小，不会溢出屏幕 */
    .game-logo {
        width: 90vw; /* **关键**：Logo 宽度为视口宽度的 90% */
        height: auto;
    }

    /* 4. 主按钮调整：确保按钮宽度适应手机 */
    .buttons-area {
        gap: 15px;
        margin-top: 25px;
        width: 80vw; /* 按钮区域宽度 */
    }
    .main-btn img {
        width: 100%; /* 按钮图片填满 buttons-area 的宽度 */
    }
    
    /* 5. 顶部左侧链接 (Presskit/Contact) 调整 */
    .header-links {
        top: 15px; /* 向上移动 */
        left: 15px;
        gap: 8px;
    }
    .link-btn img {
        width: 150px; /* 缩小按钮尺寸 */
    }

    /* 6. 顶部右侧社交图标调整 */
    .social-icons {
        /* 保持绝对定位 */
	position: absolute; 
	top: 15px;
	right: 5px;
		
	/* 启用 Flexbox */
	display: flex;
	/* 允许图标换行 */
	flex-wrap: wrap; 
	/* 调整图标容器宽度，使其刚好容纳3个图标 */
	width: 170px;
		
	gap: 5px; /* 保持图标间距 */
	z-index: 20;
    }

    .social-icons img {
        width: 50px; /* 缩小社交图标尺寸 */
        height: 50px;
    }
    
    /* 7. 底部 MEOX STUDIO 调整 */
    .footer {
        right: 10px;
	bottom: 60px;
    }

    .meox-logo {
        width: 300px; /* 缩小 Studio Logo */
    }

    /* 8. 左下角语言切换按钮调整 */
    .language-switcher {
        left: 10px;
	bottom: 60px;
    }

    .lang-btn img {
        width: 80px; /* 缩小语言切换图标 */
    }
}