/* --- 全局样式重置与基础设定 --- */

/* 引入 Google Fonts: Pacifico (Logo 字体), Roboto (正文) */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Roboto:wght@400;700&display=swap');

/* 清除默认的 margin 和 padding，设置盒子模型为 border-box */
*,
*::before,
*::after {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    box-sizing: border-box; /* 边框和内边距包含在元素宽高内 */
}

/* 设置 HTML 和 Body 基础样式 */
html,
body {
    height: 100%; /* 让 body 高度充满整个浏览器窗口 */
    font-family: 'Roboto', sans-serif; /* 设置默认字体 */
    line-height: 1.6; /* 设置默认行高，提高可读性 */
    color: #333; /* 设置默认文字颜色 */
    background-color: #e0f7fa; /* 设定一个淡蓝色背景作为基础，稍后添加波纹效果 */
}

/* --- 页面主要布局 --- */

body {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 主轴方向设为垂直 */
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); /* 简单的渐变蓝背景作为波纹效果的起点 */
    /* TODO: 后续可以添加更复杂的波纹背景图片或 CSS 效果 */
}

main {
    flex-grow: 1; /* 让 main 内容区域占据剩余空间 */
    padding: 20px; /* 添加内边距 */
    width: 100%; /* 确保 main 宽度计算基于父元素 */
    max-width: 1200px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 水平居中页面内容 */
}

/* --- 头部样式 --- */

.site-header {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 20px; /* 添加内边距 */
    background-color: rgba(255, 255, 255, 0.1); /* 轻微的背景色增加层次感 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 底部边框 */
    width: 100%; /* 确保 header 宽度计算基于父元素 */
    max-width: 1200px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 水平居中页面内容 */
}

.logo {
    font-family: 'Pacifico', cursive; /* 使用 Pacifico 字体 */
    font-size: 2.5em; /* 设置较大的字体大小，实现夸张效果 */
    color: #0d47a1; /* 设置深蓝色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 添加文字阴影增加立体感 */
}

.language-switcher button {
    padding: 5px 10px; /* 设置按钮内边距 */
    margin-left: 5px; /* 设置按钮左外边距 */
    background-color: #4fc3f7; /* 设置按钮背景色 */
    color: white; /* 设置文字颜色 */
    border: none; /* 移除边框 */
    border-radius: 5px; /* 设置圆角 */
    cursor: pointer; /* 设置鼠标指针为手形 */
    transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}

.language-switcher button:hover,
.language-switcher button.active {
    background-color: #0d47a1; /* 鼠标悬停或激活时的背景色 */
}

/* --- 游戏区域样式 --- */

.game-section {
    text-align: center; /* 居中内部元素 */
    margin-bottom: 30px; /* 设置下外边距 */
    padding: 0 20px; /* 添加左右内边距 20px */
    /* background-color: rgba(0, 0, 0, 0.1); */ /* 可选：添加背景色以区分 */
}

.iframe-container {
    position: relative; /* 设置相对定位，用于控制 iframe 宽高比 */
    width: 100%; /* 宽度撑满父容器 (现在是带有 padding 的 game-section) */
    padding-top: 56.25%; /* 16:9 宽高比 (9 / 16 * 100) */
    overflow: hidden; /* 隐藏超出部分 */
    margin-bottom: 10px; /* 与全屏按钮的间距 */
}

.iframe-container iframe {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度 100% */
    height: 100%; /* 高度 100% */
    border: 5px solid #4fc3f7; /* 恢复 iframe 边框 */
    border-radius: 10px; /* 恢复 iframe 圆角 */
}

#fullscreen-button {
    padding: 10px 20px; /* 内边距 */
    background-color: #ff7043; /* 橙色背景 */
    color: white; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标手形 */
    font-size: 1em; /* 字体大小 */
    transition: background-color 0.3s ease; /* 过渡效果 */
}

#fullscreen-button:hover {
    background-color: #f4511e; /* 悬停时深橙色 */
}

/* --- 内容区域样式 --- */

.content-section {
    background-color: rgba(255, 255, 255, 0.7); /* 半透明白色背景，让内容更易读 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
}

.content-section h2,
.content-section h3 {
    color: #0d47a1; /* 标题颜色设为深蓝色 */
    margin-top: 20px; /* 标题上边距 */
    margin-bottom: 10px; /* 标题下边距 */
    border-bottom: 2px solid #4fc3f7; /* 标题下划线 */
    padding-bottom: 5px; /* 下划线与文字间距 */
}

.content-section h2 {
    font-size: 1.8em; /* H2 字体大小 */
}

.content-section h3 {
    font-size: 1.4em; /* H3 字体大小 */
}

.content-section p,
.content-section li {
    margin-bottom: 15px; /* 段落和列表项下边距 */
    color: #555; /* 内容文字颜色稍深 */
}

.content-section ul {
    list-style-position: inside; /* 列表标记位置 */
    padding-left: 20px; /* 列表左内边距 */
}

.screenshots-gallery {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 响应式列布局 */
    gap: 15px; /* 网格间距 */
    margin-bottom: 20px; /* 下边距 */
}

.screenshots-gallery img {
    width: 100%; /* 图片宽度 100% */
    height: auto; /* 高度自动 */
    border-radius: 8px; /* 图片圆角 */
    border: 3px solid #4fc3f7; /* 图片边框 */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* 图片阴影 */
}

.reviews-section .review {
    background-color: #e1f5fe; /* 评论区浅蓝色背景 */
    padding: 15px; /* 内边距 */
    margin-bottom: 15px; /* 下边距 */
    border-radius: 8px; /* 圆角 */
    border-left: 5px solid #03a9f4; /* 左侧强调边框 */
}

.reviews-section .reviewer {
    font-style: italic; /* 评论者姓名斜体 */
    text-align: right; /* 右对齐 */
    color: #0277bd; /* 评论者姓名颜色 */
    margin-top: 5px; /* 上边距 */
    margin-bottom: 0; /* 清除默认下边距 */
}

/* --- 页脚样式 --- */

.site-footer {
    padding: 20px; /* 内边距 */
    text-align: center; /* 文字居中 */
    margin-top: 30px; /* 上边距 */
    background-color: rgba(13, 71, 161, 0.8); /* 深蓝色半透明背景 */
    color: #e0f7fa; /* 文字颜色浅蓝 */
    font-size: 0.9em; /* 稍小字体 */
    width: 100%; /* 确保 footer 宽度计算基于父元素 */
    max-width: 1200px; /* 设置页面最大宽度 */
    margin: 0 auto; /* 水平居中页面内容 */
}

.site-footer p {
    margin-bottom: 5px; /* 段落下边距 */
}

.site-footer a {
    color: #81d4fa; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
}

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

/* --- 响应式设计 --- */

/* 针对小屏幕设备 (例如手机) */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* 头部内容垂直排列 */
        text-align: center; /* 文字居中 */
    }

    .logo {
        font-size: 2em; /* 缩小 Logo 字体 */
        margin-bottom: 10px; /* 增加下边距 */
    }

    .language-switcher {
        margin-top: 10px; /* 增加上边距 */
    }

    .content-section h2 {
        font-size: 1.5em;
    }

    .content-section h3 {
        font-size: 1.2em;
    }

    .screenshots-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 调整图片列宽 */
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.8em; /* 进一步缩小 Logo */
    }

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

    main {
        padding: 15px; /* 缩小主要内容内边距 */
    }

    .content-section {
        padding: 15px;
    }

    .iframe-container {
        padding-top: 60%; /* 可能需要微调 iframe 比例 */
    }

    #fullscreen-button {
        padding: 8px 16px;
        font-size: 0.9em;
    }

    .screenshots-gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 再次调整图片列宽 */
    }
}