/* 全局样式 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); /* 导入像素/积木字体 */

body {
    /* 设置基础字体和行高 */
    /* font-family: sans-serif; */ /* 使用导入的字体 */
    font-family: 'Press Start 2P', cursive; /* 应用积木字体, 提供备选字体 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
    box-sizing: border-box; /* border 和 padding 计算入总宽高 */
    /* 设置基础背景色和前景色 */
    background-color: #f0f8ff; /* 淡蓝色背景 (AliceBlue) */
    color: #333; /* 深灰色文字 */
    /* 添加波点背景 */
    background-image: radial-gradient(#ffc107 1px, transparent 1px); /* 灰色小点 */
    background-size: 15px 15px; /* 波点大小和间距 */
    line-height: 1.6; /* 增加行高，提高可读性 */
}

/* 限制主要内容宽度，居中显示 */
main {
    max-width: 100%; /* 设定页面最大宽度 */
    margin: 20px auto; /* 上下外边距 20px，左右自动居中 */
    padding: 0 20px; /* 容器左右内边距 20px */
}

/* 页眉样式 */
header {
    /* 使用 Flexbox 弹性布局 */
    display: flex;
    /* 子元素沿主轴（水平）两端对齐 */
    justify-content: space-between;
    /* 子元素沿交叉轴（垂直）居中对齐 */
    align-items: center;
    /* 设置背景色和内边距 */
    background-color: #007bff; /* 鲜明的蓝色 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    color: white; /* 页眉内文字颜色为白色 */
    border-bottom: 5px solid #ffc107; /* 添加黄色底部边框，增加方块感 */
}

/* Logo 样式 */
.logo {
    font-size: 1.5em; /* 调整字体大小 */
    font-weight: bold; /* 字体加粗 */
    text-shadow: 2px 2px #ffc107; /* 添加黄色文字阴影，营造爆炸/立体感 */
    /* font-family: 'Press Start 2P', cursive; /* 确认应用字体 */
}

/* 语言切换器按钮样式 */
.language-switcher button {
    background-color: #ffc107; /* 黄色背景 */
    color: #333; /* 深灰色文字 */
    border: 2px solid #333; /* 添加深色边框 */
    padding: 5px 10px; /* 内边距 */
    margin-left: 5px; /* 左外边距 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    border-radius: 0; /* 移除圆角，更方块化 */
    font-family: 'Press Start 2P', cursive; /* 应用字体 */
    font-size: 0.8em; /* 调整按钮字体大小 */
    transition: background-color 0.2s ease; /* 背景色过渡效果 */
}

.language-switcher button:hover {
    background-color: #e0a800; /* 鼠标悬停时深一点的黄色 */
    color: black;
}

/* 游戏区域样式 */
.game-section {
    margin-bottom: 30px; /* 与下方内容的间距 */
    text-align: center; /* 内部元素（如下方按钮）居中 */
}

/* Iframe 容器样式 - 用于保持宽高比 */
.iframe-container {
    position: relative; /* 作为内部 iframe 绝对定位的参照 */
    width: 100%; /* 宽度撑满父容器 */
    /* 使用 padding-top 技巧保持宽高比 (原本是 16:9 = 56.25%, 现在减小为 40% 使高度更小) */
    padding-top: 40%;
    margin-bottom: 15px; /* iframe 和按钮之间的间距 */
    background-color: #eee; /* 加个浅灰色背景，防止加载时空白 */
}

/* Iframe 样式 */
.game-section iframe {
    position: absolute; /* 绝对定位，相对于 .iframe-container */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    border: 4px solid #007bff; /* 更粗的蓝色边框，增加方块感 */
    box-sizing: border-box; /* border 计算入总宽高 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    background-color: #007bff; /* 蓝色背景 */
    color: white; /* 白色文字 */
    border: 2px solid white; /* 白色边框 */
    padding: 10px 20px; /* 内边距 */
    cursor: pointer; /* 手型光标 */
    border-radius: 0; /* 方块按钮 */
    font-family: 'Press Start 2P', cursive; /* 应用字体 */
    font-size: 0.9em; /* 字体大小 */
    text-transform: uppercase; /* 文字大写 */
    transition: background-color 0.2s ease, color 0.2s ease; /* 过渡效果 */
}

#fullscreen-button:hover {
    background-color: #ffc107; /* 悬停时黄色背景 */
    color: #333; /* 深色文字 */
    border-color: #333; /* 深色边框 */
}

/* 内容区域样式 */
.content-section {
    width: 100%; /* 移动端默认 100% 宽度 */
    margin: 30px auto 0; /* 上方增加外边距，左右自动居中 */
    background-color: white; /* 白色背景，与波点背景区分 */
    padding: 30px; /* 增加内边距 */
    border: 5px solid #ffc107; /* 更粗的黄色边框 */
    border-radius: 0; /* 移除圆角 */
    box-shadow: 5px 5px 0px #007bff; /* 添加蓝色块状阴影 */
    box-sizing: border-box;
}

/* 标题样式 (H1, H2, H3) */
h1, h2, h3 {
    color: #007bff; /* 标题主要颜色为蓝色 */
    font-family: 'Press Start 2P', cursive; /* 应用积木字体 */
    margin-top: 30px; /* 增加标题上方间距 */
    margin-bottom: 15px; /* 增加标题下方间距 */
    text-shadow: 1px 1px #ffc107; /* 微小的黄色阴影 */
}

/* H1 主标题特殊样式 */
h1 {
    text-align: center; /* 居中显示 */
    font-size: 2.2em; /* 调整字体大小 */
    margin-bottom: 30px; /* 增加下方间距 */
    color: #0056b3; /* 使用深一点的蓝色 */
    text-shadow: 2px 2px #ffc107; /* 稍明显的阴影 */
}

/* H2 标题样式 */
h2 {
    font-size: 1.6em; /* 调整字体大小 */
    border-bottom: 3px dashed #ffc107; /* 黄色虚线下划线，增加风格 */
    padding-bottom: 8px; /* 下划线与文字间距 */
}

/* H3 标题样式 */
h3 {
    font-size: 1.3em; /* 调整字体大小 */
    color: #e0a800; /* 使用深黄色 */
    text-shadow: 1px 1px #007bff; /* 蓝色阴影 */
}

/* 段落文字样式 */
p, li {
   font-family: sans-serif; /* 正文内容使用更易读的标准字体 */
   color: #444; /* 比默认深灰稍浅一点 */
}

/* 截图网格布局 */
.screenshot-grid {
    /* 使用 Grid 布局 */
    display: grid;
    /* 默认创建4个等宽列 */
    grid-template-columns: repeat(4, 1fr);
    /* 设置网格间距 */
    gap: 15px; /* 增加间距 */
    margin-top: 20px; /* 与标题间距 */
}

/* 截图图片样式 */
.screenshot-grid img {
    width: 100%; /* 图片宽度占满网格单元 */
    height: auto; /* 高度自动适应 */
    border: 3px solid #007bff; /* 蓝色边框 */
    border-radius: 0; /* 方块无圆角 */
    display: block; /* 消除图片下方可能的空白 */
}

/* 评论样式 */
.review {
    background-color: #e9ecef; /* 更浅的灰色背景 */
    border-left: 5px solid #007bff; /* 蓝色左边框 */
    padding: 15px; /* 增加内边距 */
    margin-bottom: 15px; /* 评论间距 */
    border-radius: 0; /* 方块 */
    font-style: italic; /* 斜体显示评论内容 */
}

.review::before {
    content: '“'; /* 在评论前添加引号 */
    font-size: 1.5em;
    margin-right: 5px;
    color: #007bff;
}
.review::after {
    content: '”'; /* 在评论后添加引号 */
    font-size: 1.5em;
    margin-left: 5px;
    color: #007bff;
}


/* 特定内容块的额外样式 */
.team, .history {
    background-color: #f0f8ff; /* 淡蓝色背景 */
    padding: 15px;
    margin-top: 20px;
    border: 2px dashed #007bff; /* 蓝色虚线边框 */
}

.seo-content h3, .seo-content h4 {
     font-family: 'Press Start 2P', cursive; /* 确保 SEO 内容中的标题也用像素字体 */
     color: #0056b3; /* 深蓝色 */
     margin-top: 25px;
     margin-bottom: 10px;
}

.seo-content p {
    margin-bottom: 15px; /* SEO 内容段落间距 */
}


/* 页脚样式 */
footer {
    text-align: center; /* 文字居中 */
    margin-top: 40px; /* 与上方内容间距 */
    padding: 25px; /* 增加内边距 */
    background-color: #343a40; /* 深灰色背景 */
    color: #ccc; /* 浅灰色文字 */
    font-size: 0.9em; /* 稍小字体 */
    border-top: 5px solid #007bff; /* 蓝色顶部边框 */
}

/* 页脚段落样式 */
footer p {
    color: #007bff; 
    margin: 8px 0; /* 段落间距 */
}

/* 页脚链接样式 */
footer a {
    color: #ffc107; /* 黄色链接 */
    text-decoration: none; /* 移除下划线 */
}

/* 页脚链接悬停样式 */
footer a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
    color: white;
}

/* 响应式设计媒体查询 */

/* 中等屏幕 (通常指平板) */
@media (min-width: 768px) {
    /* 在中等屏幕及以上，内容区域宽度设为 80% */
    .content-section {
        width: 80%;
    }
    .logo {
        font-size: 1.8em; /* 中屏幕 Logo 稍大 */
    }
}

/* 大型屏幕 (通常指桌面电脑) */
@media (min-width: 1024px) {
    /* 在大型屏幕上，内容区域宽度设为 60% */
    .content-section {
        width: 60%;
    }
}

/* 小型屏幕 (通常指手机) */
@media (max-width: 767px) {
    /* 页眉布局调整 */
    header {
        flex-direction: column; /* 子元素垂直排列 */
        align-items: center; /* 居中对齐 */
        padding: 15px; /* 调整内边距 */
    }

    .language-switcher {
        margin-top: 10px; /* 语言切换器与 Logo 间距 */
    }

    .logo {
        margin-bottom: 10px; /* Logo 与下方内容间距 */
        font-size: 1.6em; /* 手机端 Logo 大小 */
    }

    /* 调整标题字体大小 */
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.4em;
    }
    h3 {
        font-size: 1.1em;
    }

    /* 截图网格布局调整 */
    .screenshot-grid {
        /* 在手机上改为 2 列 */
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* 调整间距 */
    }

    .content-section {
        padding: 20px; /* 调整内容区内边距 */
        box-shadow: 3px 3px 0px #007bff; /* 调整阴影 */
    }
}

/* 非常小的屏幕 */
@media (max-width: 480px) {
    /* 截图网格布局调整 */
    .screenshot-grid {
        /* 在更小的手机上改为 1 列 */
        grid-template-columns: repeat(1, 1fr);
    }

    /* 调整语言按钮大小和边距 */
    .language-switcher button {
        font-size: 0.7em;
        padding: 4px 8px;
        margin-left: 3px;
    }

    h1 {
        font-size: 1.6em;
    }
    h2 {
        font-size: 1.3em;
    }

    #fullscreen-button {
        font-size: 0.8em;
        padding: 8px 15px;
    }

    body {
        background-size: 10px 10px; /* 波点更小 */
    }
}