/* --- 全局样式和变量 --- */

/* 导入 Google Fonts */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Metal+Mania&display=swap'); */
/* (已在 HTML 中通过 <link> 引入，这里注释掉) */

/* 定义颜色变量 */
:root {
    --primary-font: 'Poppins', sans-serif; /* 主要内容字体 */
    --logo-font: 'Metal Mania', cursive; /* Logo 字体 (恐怖战争风格) */
    --green-bg: #98fb98; /* 嫩绿色背景 (PaleGreen) */
    --light-bg: #f5fff5; /* 非常浅的绿色/近白色背景 (Honeydew) */
    --dark-text: #2f4f4f; /* 深色文本 (DarkSlateGray) */
    --light-text: #ffffff; /* 浅色文本 (用于深色背景，保持白色) */
    --button-bg: #2e8b57; /* 按钮背景 (SeaGreen) */
    --button-hover-bg: #3cb371; /* 按钮悬停背景 (MediumSeaGreen) */
    --link-color: #20b2aa; /* 链接颜色 (LightSeaGreen) */
    --border-color: #bdecb6; /* 边框颜色 (浅绿) */
    --shadow-color: rgba(0, 0, 0, 0.08); /* 阴影颜色 (稍浅) */
}

/* 基本重置和全局设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 让 padding 和 border 不会增加元素总宽度 */
}

html {
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

body {
    font-family: var(--primary-font); /* 设置默认字体 */
    line-height: 1.6; /* 设置行高，提高可读性 */
    color: var(--dark-text); /* 默认文字颜色 */
    background-color: var(--light-bg); /* 默认背景色 */
}

a {
    color: var(--link-color); /* 链接颜色 */
    text-decoration: none; /* 去掉链接下划线 */
}

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

img {
    max-width: 100%; /* 图片最大宽度不超过父容器 */
    height: auto; /* 高度自动，保持比例 */
    display: block; /* 消除图片底部的空隙 */
}

h1, h2, h3 {
    margin-bottom: 0.8em; /* 标题下方留出一些间距 */
    line-height: 1.2;
}

h1 {
    font-size: 2.5rem; /* H1 字体大小 */
}

h2 {
    font-size: 2rem; /* H2 字体大小 */
}

h3 {
    font-size: 1.5rem; /* H3 字体大小 */
}

/* --- 布局和容器 --- */

header,
main,
footer,
.content-section {
    padding: 20px; /* 内边距 */
}

/* 使用 Flexbox 进行整体布局 */
body {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    min-height: 100vh; /* 最小高度为视口高度 */
}

main {
    flex-grow: 1; /* 让主内容区域占据剩余空间 */
}

/* --- 头部样式 --- */
header {
    background-color: var(--button-bg); /* 头部背景色 */
    color: var(--light-text); /* 头部文字颜色 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 15px 30px; /* 上下 15px，左右 30px 内边距 */
    flex-wrap: wrap; /* 允许换行 */
}

.logo {
    font-family: var(--logo-font); /* 应用 Logo 字体 */
    font-size: 2.8rem; /* Logo 字体大小 */
    margin: 0; /* 移除 H1 的默认 margin */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 添加一点阴影增加立体感 */
}

/* 语言切换器样式 */
.language-switcher button {
    background-color: var(--button-bg); /* 按钮背景色 */
    color: var(--light-text); /* 按钮文字颜色 */
    border: none; /* 无边框 */
    padding: 8px 15px; /* 内边距 */
    margin-left: 5px; /* 按钮间距 */
    cursor: pointer; /* 鼠标指针样式 */
    border-radius: 5px; /* 圆角 */
    font-family: var(--primary-font);
    font-size: 0.9rem;
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
}

.language-switcher button:hover {
    background-color: var(--button-hover-bg); /* 悬停背景色 */
}

.language-switcher button.active {
    background-color: var(--green-bg); /* 激活状态背景色 */
    color: var(--dark-text); /* 激活状态文字颜色 */
    font-weight: bold;
}

/* --- Iframe 容器样式 --- */
.iframe-container {
    position: relative; /* 相对定位，用于全屏按钮 */
    width: 100%; /* 宽度 100% */
    /* 计算高度以保持 16:9 比例，可根据游戏调整 */
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    background-color: #000; /* iframe 加载时的背景色 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-bottom: 20px; /* 和下方内容的间距 */
}

.iframe-container iframe {
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* 移除 iframe 边框 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    position: absolute; /* 绝对定位 */
    bottom: 15px; /* 距离底部 */
    right: 15px; /* 距离右侧 */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
    color: #fff; /* 文字颜色 */
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    z-index: 10; /* 确保在 iframe 上方 */
}

#fullscreen-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#fullscreen-button i {
    margin-right: 5px; /* 图标和文字间距 */
}

/* 当容器处于全屏状态时，隐藏普通按钮，或改变其样式 */
.iframe-container:fullscreen #fullscreen-button {
    /* 可以选择隐藏按钮，或者改变图标和文字 */
    /* display: none; */
}

/* --- 内容区域样式 --- */
.content-sections {
    padding: 0; /* 移除 main 的内边距，由 section 控制 */
}

.content-section {
    padding: 40px 20px; /* 内容区域的上下内边距 */
    border-bottom: 2px solid var(--border-color); /* 区域间的分隔线 */
    /* 添加一些圆角和阴影，营造"可爱"感 */
    border-radius: 10px; /* 圆角 */
    margin: 20px; /* 外边距，让区域之间有空隙 */
    box-shadow: 0 4px 8px var(--shadow-color); /* 添加阴影 */
}

.content-section:last-child {
    border-bottom: none; /* 最后一个区域不需要底部分隔线 */
}

/* 交替背景色 */
.bg-green {
    background-color: var(--green-bg);
    color: var(--dark-text);
}

.bg-green h2,
.bg-green h3 {
    color: var(--dark-text);
}

.bg-green a {
    color: var(--button-bg);
}

.bg-light {
    background-color: var(--light-bg);
    color: var(--dark-text);
}

.bg-light a {
    color: var(--link-color);
}

/* 截图画廊样式 */
.screenshot-gallery {
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 图片之间的间距 */
    justify-content: center; /* 居中显示图片 */
    margin-top: 20px; /* 和标题的间距 */
}

.screenshot-gallery img {
    max-width: 100%; /* 默认最大宽度 */
    height: auto;
    border-radius: 8px; /* 图片圆角 */
    box-shadow: 0 2px 5px var(--shadow-color); /* 图片阴影 */
    border: 2px solid var(--border-color); /* 图片边框 */
    object-fit: cover; /* 保持比例填充 */
    transition: transform 0.3s ease; /* 悬停放大效果 */
}

.screenshot-gallery img:hover {
    transform: scale(1.05); /* 悬停时放大一点 */
}

/* 根据屏幕宽度调整截图大小 */
@media (min-width: 480px) {
    .screenshot-gallery img {
        max-width: calc(50% - 10px); /* 小屏幕显示两列 */
    }
}

@media (min-width: 768px) {
    .screenshot-gallery img {
        max-width: calc(33.333% - 10px); /* 中等屏幕显示三列 */
    }
}

/* 评论区域样式 */
.review {
    margin-bottom: 20px;
    padding-left: 20px;
    border-left: 4px solid var(--green-bg);
}

.review p:first-child {
    font-style: italic; /* 引用内容斜体 */
}

.review p:last-child {
    text-align: right; /* 评论者名字右对齐 */
    font-size: 0.9em;
    margin-top: 5px;
}

/* SEO 内容区域样式 */
.seo-content p {
    margin-bottom: 1em; /* 段落间距 */
}

/* --- 页脚样式 --- */
footer {
    background-color: var(--dark-text); /* 页脚背景色 */
    color: #ccc; /* 页脚文字颜色 */
    text-align: center; /* 文字居中 */
    padding: 20px;
    font-size: 0.9em;
}

footer p {
    margin-bottom: 5px; /* 行间距 */
}

footer a {
    color: #fff; /* 页脚链接颜色 */
    text-decoration: underline;
}

footer a:hover {
    color: var(--green-bg);
}

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

/* 中等屏幕 (平板) */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }
    h2 {
        font-size: 1.7rem;
    }
    h3 {
        font-size: 1.3rem;
    }
    header {
        flex-direction: column; /* 头部内容垂直排列 */
        text-align: center;
    }
    .logo {
        margin-bottom: 10px; /* Logo 和按钮间距 */
        font-size: 2.2rem; /* 调整 Logo 大小 */
    }
    .language-switcher {
        margin-top: 10px;
    }
    .content-section {
        margin: 15px;
        padding: 30px 15px;
    }
}

/* 小型屏幕 (手机) */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* 调整基础字体大小 */
    }
    h1 {
        font-size: 1.8rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.2rem;
    }
    header {
        padding: 10px 15px;
    }
    .language-switcher button {
        padding: 6px 10px;
        font-size: 0.8rem;
        margin-left: 3px;
    }
    #fullscreen-button {
        padding: 8px 12px;
        font-size: 0.9rem;
        bottom: 10px;
        right: 10px;
    }
    .content-section {
        margin: 10px;
        padding: 20px 10px;
        border-radius: 5px; /* 手机端圆角减小 */
    }
    footer {
        font-size: 0.8em;
    }
}