/* === 全局样式 === */
html {
    height: 100%; /* 让 html 元素高度占满视口 */
}

body {
    /* 设置页面字体 */
    font-family: 'Poppins', sans-serif; /* 优先使用 Poppins，备选无衬线字体 */
    margin: 0; /* 去除 body 的默认外边距 */
    padding: 0; /* 去除 body 的默认内边距 */
    box-sizing: border-box; /* 设置盒模型为 border-box，便于计算宽高 */
    background-color: #f0f8ff; /* 设置页面背景色 (淡蓝色) */
    color: #333; /* 设置默认文字颜色 */
    line-height: 1.6; /* 设置行高，提高可读性 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
    min-height: 100%; /* 确保 body 至少和视口一样高 */
}

*, *::before, *::after {
    box-sizing: inherit; /* 让所有元素的盒模型继承 body 的设置 */
}

/* 容器样式，用于限制内容宽度并居中 */
.container {
    width: 90%; /* 设置容器宽度为父元素的 90% */
    max-width: 1200px; /* 设置最大宽度 */
    margin: 0 auto; /* 水平居中 */
    padding: 0 15px; /* 左右留出一些内边距 */
}

/* === 页头 Header === */
header {
    background-color: #4682b4; /* 页头背景色 (钢蓝色) */
    padding: 15px 0; /* 上下内边距 */
    border-bottom: 3px solid #add8e6; /* 底部边框 (浅蓝色) */
    flex-shrink: 0; /* 防止页头在空间不足时被压缩 */
}

header .container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

/* Logo 样式 */
.logo {
    font-family: 'Pacifico', cursive; /* 使用 Pacifico 艺术字体 */
    font-size: 2.5em; /* 字体大小 */
    color: #ffffff; /* 字体颜色 (白色) */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加文字阴影，营造炫酷感 */
    font-weight: bold; /* 加粗 */
}

/* 语言切换器样式 */
.language-switcher button {
    background-color: #ffffff; /* 按钮背景色 (白色) */
    color: #4682b4; /* 文字颜色 (钢蓝色) */
    border: 1px solid #4682b4; /* 边框 */
    padding: 5px 10px; /* 内边距 */
    margin-left: 5px; /* 左外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    border-radius: 5px; /* 圆角 */
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.language-switcher button:hover,
.language-switcher button.active {
    background-color: #4682b4; /* 悬停或激活时背景色 (钢蓝色) */
    color: #ffffff; /* 悬停或激活时文字颜色 (白色) */
}

/* === 主要内容 Main === */
main {
    padding-top: 20px; /* 主要内容区域顶部内边距 */
    flex: 1; /* 让 main 区域占据剩余空间 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 设置主轴方向为垂直 */
}

/* 游戏容器样式 */
.game-container {
    position: relative; /* 设置相对定位，用于全屏按钮定位 */
    width: 100%; /* 宽度撑满 */
    /* 移除最小高度限制，让 flex 子元素决定高度 */
    /* min-height: 500px; */
    margin-bottom: 30px; /* 底部外边距 */
    background-color: #ffffff; /* 容器背景色 (白色) */
    border: 1px solid #ddd; /* 添加边框 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影 */
    display: flex; /* 仍然作为 Flex 容器来管理内部 */
    /* flex: 1; */ /* 移除作为 main 子项的 flex: 1 */
    /* 尝试设置一个基于视口的高度，给 header 和 footer 留出空间 */
    height: 75vh; /* 例如，尝试视口高度的 75% */
}

#iframe-wrapper {
    width: 100%; /* 宽度100% */
    /* height: 100%; */ /* 移除固定高度，让 flex 控制 */
    flex: 1; /* 让 iframe 包装器填满 .game-container */
    display: flex; /* 使 iframe 能够填满 */
}

/* 确保 iframe 本身也能正确伸展 */
#iframe-wrapper iframe {
    flex: 1;
    border: none; /* 确保没有边框影响布局 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    position: absolute; /* 绝对定位，相对于 game-container */
    bottom: 10px; /* 距离底部 10px */
    right: 10px; /* 距离右侧 10px */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 15px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 手型光标 */
    transition: background-color 0.3s; /* 过渡效果 */
    z-index: 10; /* 确保按钮在 iframe 之上 */
}

#fullscreen-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* 悬停时加深背景色 */
}

/* 内容区域样式 */
.content-section {
    padding: 20px; /* 内边距 */
    background-color: #ffffff; /* 背景色 (白色) */
    margin-bottom: 30px; /* 底部外边距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影 */
}

/* 标题样式 - 设置居中 */
.content-section h1,
.content-section h2,
.content-section h3 {
    text-align: center; /* 标题居中 */
}

h1 {
    color: #4682b4; /* H1 标题颜色 (钢蓝色) */
    /* text-align: center; */ /* 已移至 .content-section h1 */
    margin-bottom: 20px; /* 底部外边距 */
    font-size: 2.2em; /* 字体大小 */
}

h2 {
    color: #5f9ea0; /* H2 标题颜色 (青蓝色) */
    /* text-align: center; */ /* 已移至 .content-section h2 */
    /* border-bottom: 2px solid #add8e6; */ /* 移除底部边框，因为居中后效果可能不好 */
    padding-bottom: 5px; /* 底部内边距 */
    margin-top: 30px; /* 顶部外边距 */
    margin-bottom: 15px; /* 底部外边距 */
    font-size: 1.8em; /* 字体大小 */
}

h3 {
    color: #778899; /* H3 标题颜色 (浅灰蓝色) */
    /* text-align: center; */ /* 已移至 .content-section h3 */
    margin-top: 25px; /* 顶部外边距 */
    margin-bottom: 10px; /* 底部外边距 */
    font-size: 1.5em; /* 字体大小 */
}

/* 截图画廊样式 */
.screenshot-gallery {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-around; /* 平均分布 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 项目间距 */
}

/* 更新为截图图片样式 */
.screenshot-gallery img {
    width: 30%; /* 每个图片宽度约 30% */
    max-width: 300px; /* 设置最大宽度 */
    min-width: 200px; /* 最小宽度 */
    height: auto; /* 高度自动，保持比例 */
    border: 1px solid #ccc; /* 添加细边框 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加轻微阴影 */
    object-fit: cover; /* 保持图片比例并覆盖区域 */
}


*/

/* 列表样式 */
ul {
    padding-left: 20px; /* 列表左侧内边距 */
}

li {
    margin-bottom: 8px; /* 列表项底部外边距 */
}

/* === 页脚 Footer === */
footer {
    background-color: #4682b4; /* 页脚背景色 (钢蓝色) */
    color: #ffffff; /* 页脚文字颜色 (白色) */
    text-align: center; /* 文字居中 */
    padding: 20px 0; /* 上下内边距 */
    margin-top: 40px; /* 顶部外边距 (确保和 main 有间隔) */
    font-size: 0.9em; /* 稍小字体 */
    flex-shrink: 0; /* 防止页脚在空间不足时被压缩 */
}

footer p {
    margin: 5px 0; /* 段落上下外边距 */
}

footer a {
    color: #add8e6; /* 链接颜色 (浅蓝色) */
    text-decoration: none; /* 去除下划线 */
}

footer a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* === 响应式设计 === */

/* 针对平板设备 */
@media (max-width: 768px) {
    .logo {
        font-size: 2em; /* 缩小 Logo 字体 */
    }

    header .container {
        flex-direction: column; /* 页头内容垂直排列 */
        gap: 10px; /* 项目间距 */
    }

    .language-switcher {
        margin-top: 10px; /* 语言切换器顶部外边距 */
    }

    .game-container {
        /* height: calc(100vh - 200px); */ /* 移除固定高度计算 */
        min-height: 400px; /* 调整最小高度 */
    }

    /* 截图图片样式调整 */
    .screenshot-gallery img {
        width: 45%; /* 截图调整为一行两个 */
    }

    h1 { font-size: 2em; } /* 调整标题大小 */
    h2 { font-size: 1.6em; }
    h3 { font-size: 1.4em; }
}

/* 针对移动设备 */
@media (max-width: 480px) {
    .logo {
        font-size: 1.8em; /* 进一步缩小 Logo 字体 */
    }

    .language-switcher button {
        padding: 4px 8px; /* 缩小按钮内边距 */
        font-size: 0.9em; /* 缩小按钮字体 */
    }

    .game-container {
        /* height: 60vh; */ /* 移除固定高度 */
        min-height: 300px; /* 调整最小高度 */
        margin-bottom: 20px; /* 调整间距 */
    }

    #fullscreen-button {
        padding: 6px 10px; /* 调整全屏按钮大小 */
        font-size: 0.9em;
    }

    /* 截图图片样式调整 */
    .screenshot-gallery img {
        width: 90%; /* 截图调整为一行一个 */
    }

    .container {
        width: 95%; /* 调整容器宽度 */
    }

    h1 { font-size: 1.8em; } /* 调整标题大小 */
    h2 { font-size: 1.5em; }
    h3 { font-size: 1.3em; }

    footer {
        margin-top: 20px; /* 调整页脚顶部间距 */
    }
}

/* 增加一些 可爱/活泼 的视觉元素 (示例) */
body {
    /* 可以考虑添加一些微妙的背景图案 */
    /* background-image: url('../images/cute-pattern.png'); */
}

.content-section {
    /* 边框可以更有趣一些 */
    /* border: 2px dotted #add8e6; */
}