/* style.css - 样式表文件 */

/* --- Global Resets and Base Styles --- */
/* --- 全局重置和基础样式 --- */
* {
    /* 通用选择器，选择所有元素 */
    margin: 0; /* 外边距设为0 */
    padding: 0; /* 内边距设为0 */
    box-sizing: border-box; /* 盒子模型以边框和内边距计算总宽高 */
}

body {
    /* 页面主体样式 */
    font-family: 'Comic Neue', cursive; /* 主体文字字体，备选 cursive */
    line-height: 1.6; /* 行高 */
    color: #333; /* 默认文字颜色 */
    background-color: #f4f4f4; /* 页面背景色，浅灰色 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 主轴方向为垂直 */
    min-height: 100vh; /* 最小高度为视口高度，确保页脚总在底部 */
}

.container {
    /* 内容容器样式，用于限制内容宽度并居中 */
    width: 90%; /* 宽度为90% */
    max-width: 1200px; /* 最大宽度1200px */
    margin: 0 auto; /* 水平居中 */
    padding: 20px 0; /* 上下内边距20px，左右0 */
}

h1, h2, h3 {
    /* 标题元素通用样式 */
    font-family: 'Luckiest Guy', cursive; /* 标题字体 */
    color: #0056b3; /* 标题颜色，深蓝色 */
    margin-bottom: 15px; /* 标题下外边距 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 标题文字轻微阴影 */
}

h1 {
    /* H1 标题特定样式 */
    font-size: 2.8em; /* 字体大小 */
    text-align: center; /* 文本居中 */
    color: #FF6600; /* H1 颜色用橙色，更突出 */
}

h2 {
    /* H2 标题特定样式 */
    font-size: 2.2em; /* 字体大小 */
    border-bottom: 2px solid #FFA500; /* H2 标题下边框，橙色 */
    padding-bottom: 5px; /* H2 标题下内边距 */
}

h2::before {
    /* H2 标题前的图标 */
    content: "🎮"; /* 游戏手柄图标 */
    margin-right: 10px; /* 图标和文字之间的间距 */
    font-size: 0.8em; /* 图标大小相对于H2字体大小调整 */
    /* 颜色会继承 H2 的颜色 */
}

h3 {
    /* H3 标题特定样式 */
    font-size: 1.8em; /* 字体大小 */
    color: #007bff; /* H3 颜色，亮蓝色 */
}

h3::before {
    /* H3 标题前的图标 */
    content: "✨"; /* 闪烁星星图标 */
    margin-right: 8px; /* 图标和文字之间的间距 */
    font-size: 0.75em; /* 图标大小相对于H3字体大小调整 */
    /* 颜色会继承 H3 的颜色 */
}

p {
    /* 段落样式 */
    margin-bottom: 15px; /* 段落下外边距 */
    font-size: 1.1em; /* 段落字体大小 */
}

a {
    /* 链接样式 */
    color: #007bff; /* 链接颜色，亮蓝色 */
    text-decoration: none; /* 去除下划线 */
}

a:hover {
    /* 链接悬停样式 */
    text-decoration: underline; /* 添加下划线 */
    color: #FF6600; /* 悬停颜色，橙色 */
}

ul, ol {
    /* 列表样式 */
    margin-left: 20px; /* 列表左外边距，用于项目符号/编号的显示空间 */
    margin-bottom: 15px; /* 列表下外边距 */
}

li {
    /* 列表项样式 */
    margin-bottom: 8px; /* 列表项下外边距 */
}

strong {
    /* 加粗文字样式 */
    color: #FF6600; /* 加粗文字用橙色 */
}

/* --- Header Styles --- */
/* --- 头部样式 --- */
header {
    /* 头部区域样式 */
    background-color: #007bff; /* 背景色，主蓝色 */
    color: #fff; /* 文字颜色，白色 */
    padding: 15px 0; /* 上下内边距15px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 头部下方阴影 */
}

header .container {
    /* 头部容器特定样式 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 0 20px; /* 头部容器左右内边距，避免内容贴边 */
}

.logo {
    /* Logo 样式 */
    font-family: 'Luckiest Guy', cursive; /* Logo 字体 */
    font-size: 2.5em; /* Logo 字体大小 */
    /* font-weight: bold; 已被 Luckiest Guy 覆盖，通常该字体自带粗度 */
    color: #0056b3; /* Logo 文字颜色，深蓝色 */
    background-color: #fff; /* Logo 背景色，白色 */
    padding: 5px 15px; /* 内边距，调整以适应图标 */
    border-radius: 10px; /* 圆角，增加可爱感 */
    border: 3px solid #FFA500; /* 边框，橙色 */
    text-shadow: 1px 1px 1px #ccc; /* 文字阴影 */
    line-height: 1; /* 确保文字垂直居中良好 */
    display: inline-flex; /* 使用 inline-flex 使图标和文字在同一行并能垂直对齐 */
    align-items: center; /* 垂直居中对齐图标和文字 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微的外部阴影增加立体感 */
}

.logo-icon {
    /* Logo 内嵌图标样式 */
    height: 1em; /* 图标高度与文字大小（1em）关联，保持比例 */
    width: auto; /* 宽度自动，保持图标宽高比 */
    margin-right: 8px; /* 图标和文字之间的间距 */
    /* vertical-align: middle; 在 flex 布局下 align-items 更好 */
}

.logo span {
    /* Logo 内文字的样式（如果需要特别调整）*/
    /* 例如，如果图标导致文字未完全居中，可以在此微调 */
    display: inline-block; /* 确保span表现正常 */
}

/* --- Language Switcher Select Styles --- */
/* --- 语言切换下拉框样式 --- */
.language-switcher select {
    /* 语言切换下拉框样式 */
    background-color: #FFA500; /* 背景橙色 */
    color: #0056b3; /* 文字深蓝色 */
    border: 2px solid #0056b3; /* 边框深蓝色 */
    padding: 8px 12px; /* 内边距 */
    margin-left: 10px; /* 左外边距 */
    font-family: 'Comic Neue', cursive; /* 字体 */
    font-weight: bold; /* 字体加粗 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标指针为手型 */
    appearance: none; /* 移除默认系统外观 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3e%3cpath d='M7 10l5 5 5-5H7z'/%3e%3c/svg%3e"); /* 自定义下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 1em;
    padding-right: 30px; /* 为箭头腾出空间 */
}

.language-switcher select:hover {
    /* 语言切换下拉框悬停样式 */
    border-color: #fff; /* 边框白色 */
    background-color: #cc8400; /* 背景深橙色 */
}

.language-switcher select:focus {
    /* 语言切换下拉框聚焦样式 */
    outline: none; /* 去除聚焦时的轮廓 */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); /* 添加轻微的白色发光效果 */
}

/* --- Main Content Styles --- */
/* --- 主要内容样式 --- */
main {
    /* 主要内容区域样式 */
    flex-grow: 1; /* 占据剩余空间，确保页脚在底部 */
}

/* --- Game Section Styles --- */
/* --- 游戏区域样式 --- */
#game-section {
    /* 游戏区域特定样式 */
    padding: 20px 0; /* 上下内边距 */
    background-color: #e9ecef; /* 游戏区背景色，浅灰 */
}

.iframe-container {
    /* iframe 容器样式 */
    position: relative; /* 相对定位，用于子元素定位 */
    width: 100%; /* 宽度100% */
    padding-top: 56.25%; /* 16:9 宽高比 (9 / 16 * 100) */
    /* 如果需要不同的初始高度，可以调整此值或直接设置 height */
    /* height: 70vh; */ /* 或者设置为视口高度的70% */
    margin-bottom: 15px; /* iframe 容器下外边距 */
    border: 5px solid #007bff; /* 边框，蓝色 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 阴影效果 */
}

.iframe-container iframe {
    /* iframe 自身样式 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左部对齐 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
}

#fullscreen-button {
    /* 全屏按钮样式 */
    display: block; /* 块级元素 */
    margin: 10px auto 0; /* 上外边距10px，水平居中 */
    padding: 12px 25px; /* 内边距 */
    background-color: #FFA500; /* 背景橙色 */
    color: white; /* 文字白色 */
    border: none; /* 无边框 */
    border-radius: 8px; /* 圆角 */
    font-family: 'Luckiest Guy', cursive; /* 按钮字体 */
    font-size: 1.2em; /* 字体大小 */
    cursor: pointer; /* 鼠标指针为手型 */
    transition: background-color 0.3s; /* 过渡效果 */
}

#fullscreen-button:hover {
    /* 全屏按钮悬停样式 */
    background-color: #cc8400; /* 背景深橙色 */
}

/* --- Game Info Section Styles --- */
/* --- 游戏信息区域样式 --- */
#game-info {
    /* 游戏信息区域样式 */
    padding: 30px 0; /* 上下内边距 */
    background-color: #fff; /* 背景白色 */
}

#game-info .container > div {
    /* 游戏信息区域内各子区域的下外边距 */
    margin-bottom: 30px;
}

/* --- Screenshots Gallery Styles --- */
/* --- 游戏截图画廊样式 --- */
.screenshots-gallery {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 图片之间的间隙 */
    justify-content: center; /* 水平居中对齐图片 */
    margin-bottom: 15px; /* 画廊下方边距 */
}

.screenshots-gallery img {
    width: 100%; /* 默认宽度，小屏幕上会占满 */
    max-width: 300px; /* 每张图片的最大宽度 */
    height: auto; /* 高度自动，保持宽高比 */
    border: 3px solid #007bff; /* 边框蓝色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 轻微阴影 */
    object-fit: cover; /* 确保图片填充容器，可能会裁剪 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
}

.screenshots-gallery img:hover {
    transform: scale(1.05); /* 悬停时放大 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.25); /* 悬停时阴影加深 */
}

#game-screenshots p {
    /* 游戏截图和扩展内容段落样式 */
    text-indent: 0; /* 截图标题下的段落通常不需要首行缩进 */
    text-align: center; /* 截图说明文字居中 */
    font-style: italic; /* 斜体 */
    color: #555; /* 稍暗的文字颜色 */
}

#extended-content p {
    text-indent: 2em; /* 首行缩进两个字符 */
}

/* --- User Reviews Section Styles --- */
/* --- 用户评论区域样式 --- */
.review {
    /* 单个评论样式 */
    background-color: #f9f9f9; /* 背景浅灰色 */
    border-left: 5px solid #007bff; /* 左边框蓝色 */
    padding: 15px; /* 内边距 */
    margin-bottom: 20px; /* 下外边距 */
    border-radius: 0 8px 8px 0; /* 圆角 */
}

.review-text {
    /* 评论内容文字样式 */
    font-style: italic; /* 斜体 */
    margin-bottom: 10px; /* 下外边距 */
}

.review-author {
    /* 评论作者文字样式 */
    text-align: right; /* 右对齐 */
    font-weight: bold; /* 加粗 */
    color: #555; /* 作者颜色，深灰色 */
}

/* --- Footer Styles --- */
/* --- 页脚样式 --- */
footer {
    /* 页脚区域样式 */
    background-color: #333; /* 背景深灰色 */
    color: #ccc; /* 文字浅灰色 */
    text-align: center; /* 文本居中 */
    padding: 20px 0; /* 上下内边距 */
    margin-top: auto; /* 将页脚推至底部（与body的flex布局配合） */
}

footer p {
    /* 页脚段落样式 */
    margin-bottom: 5px; /* 下外边距 */
    font-size: 0.9em; /* 字体大小 */
}

footer a {
    /* 页脚链接样式 */
    color: #FFA500; /* 链接颜色橙色 */
}

footer a:hover {
    /* 页脚链接悬停样式 */
    color: #fff; /* 悬停颜色白色 */
}

/* --- Utility Classes --- */
/* --- 工具类 --- */
.sr-only {
    /* 仅供屏幕阅读器可见的样式 (视觉隐藏) */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Responsive Design --- */
/* --- 响应式设计 --- */
@media (max-width: 768px) {
    /* 屏幕宽度小于等于768px时应用的样式 (平板和手机) */
    header .container {
        /* 头部容器在小屏幕上样式 */
        flex-direction: column; /* 垂直排列 */
        text-align: center; /* 文本居中 */
    }

    .logo {
        /* Logo在小屏幕上样式 */
        margin-bottom: 10px; /* Logo下外边距 */
    }

    .language-switcher {
        /* 语言切换器在小屏幕上样式 */
        margin-top: 10px; /* 上外边距 */
    }
    
    .language-switcher select {
        /* 语言切换下拉框在小屏幕上样式 */
        width: auto; /* 宽度自动，或者可以设置一个合适的百分比 */
        margin: 5px auto; /* 上下5px，左右自动居中 */
        font-size: 0.9em; /* 字体稍小 */
        padding: 6px 10px;
        padding-right: 25px; /* 调整箭头空间 */
    }

    h1 {
        /* H1标题在小屏幕上样式 */
        font-size: 2.2em;
    }

    h2 {
        /* H2标题在小屏幕上样式 */
        font-size: 1.8em;
    }

    h3 {
        /* H3标题在小屏幕上样式 */
        font-size: 1.5em;
    }

    .container {
        /* 容器在小屏幕上样式 */
        width: 95%; /* 宽度调整为95% */
    }
    
    /* Iframe container: adjust height for smaller screens if needed */
    /* iframe 容器：如果需要在小屏幕上调整高度 */
    /* .iframe-container {
        padding-top: 75%; /* Example: 4:3 aspect ratio for smaller screens */
    /*    height: 50vh; 
    }*/
}

@media (max-width: 480px) {
    /* 屏幕宽度小于等于480px时应用的样式 (主要是手机) */
    body {
        font-size: 15px; /* 基础字体大小调整 */
    }

    .logo {
        font-size: 2em; /* Logo字体进一步缩小 */
    }

    #fullscreen-button {
        font-size: 1em; /* 全屏按钮字体缩小 */
        padding: 10px 20px; /* 全屏按钮内边距调整 */
    }
}