/* --- 基本重置 (Basic Reset) --- */
* {
    /* 移除默认内外边距 */
    margin: 0;
    padding: 0;
    /* 让元素的宽高计算包含内边距和边框 */
    box-sizing: border-box;
}

/* --- 全局样式 (Global Styles) --- */
body {
    /* 设置字体为 Fredoka One，备选为无衬线字体 */
    font-family: 'Fredoka One', cursive, sans-serif;
    /* 默认文字颜色 */
    color: #333;
    /* 行高，提高可读性 */
    line-height: 1.6;
    /* 背景 - 从上到下的线性渐变 (浅绿 -> 浅粉红) */
    background: linear-gradient(to bottom, #e8f5e9, #ffcdd2);
    /* 确保内容至少占满视口高度 */
    min-height: 100vh;
    /* 平滑滚动效果 */
    scroll-behavior: smooth;
    /* 移除之前为 ::before 添加的定位属性 */
    /* position: relative; */
    /* z-index: 0; */
}

/* 移除磨砂/哑光效果的覆盖层 */
/*
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.15);
    z-index: -1;
}
*/

a {
    /* 链接默认颜色 - 使用主题绿色 */
    color: #2e7d32; /* Theme green */
    /* 移除下划线 */
    text-decoration: none;
}

a:hover {
    /* 鼠标悬停时添加下划线 */
    text-decoration: underline;
}

img {
    /* 图片最大宽度为其容器宽度 */
    max-width: 100%;
    /* 保持图片高度自适应 */
    height: auto;
}

/* --- 头部样式 (Header Styles) --- */
header {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 子元素两端对齐，中间留空 */
    justify-content: space-between;
    /* 子元素垂直居中 */
    align-items: center;
    /* 内边距 (上下 1rem, 左右 5%) */
    padding: 1rem 5%;
    /* 背景色 - 示例：主题红色 */
    background-color: #c62828; /* Theme red */
    /* 字体颜色 */
    color: #fff;
    /* 固定在顶部 (可选) */
    /* position: sticky; */
    /* top: 0; */
    /* z-index: 100; */
}

.logo {
    /* Logo 字体大小 */
    font-size: 2.5rem; /* 稍微加大以配合字体风格 */
    /* Logo 字体粗细 - Fredoka One 本身较粗，可省略或设为 normal */
    font-weight: normal; /* Fredoka One is naturally bold */
    /* 移除 H1 默认的外边距 */
    margin: 0;
    /* Logo 颜色 */
    color: #fff;
    /* 使用 Fredoka One 字体 */
    font-family: 'Fredoka One', cursive;
    /* 可以添加一些文本阴影增加可爱感 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    /* 字母间距微调 (可选) */
    /* letter-spacing: 1px; */
}

.language-switcher button {
    /* 按钮外边距 */
    margin-left: 0.5rem;
    /* 内边距 */
    padding: 0.5rem 1rem;
    /* 边框 */
    border: 1px solid #fff;
    /* 背景色 */
    background-color: transparent;
    /* 字体颜色 */
    color: #fff;
    /* 鼠标指针样式 */
    cursor: pointer;
    /* 过渡效果 */
    transition: background-color 0.3s, color 0.3s;
}

.language-switcher button:hover,
.language-switcher button.active {
    /* 鼠标悬停或激活状态 */
    background-color: #fff;
    color: #c62828; /* Theme red */
}

/* --- 主要内容区域 (Main Content Area) --- */
main {
    /* 设置最大宽度，使内容居中显示，提高可读性 */
    max-width: 1200px;
    /* 居中显示 */
    margin: 2rem auto; /* 上下边距 2rem，左右自动 */
    /* 内边距 (左右 1rem) */
    padding: 0 1rem;
}

/* --- 游戏嵌入部分 (Game Section) --- */
#game-section {
    /* 元素后留白 */
    margin-bottom: 2rem;
    /* 文本居中 (用于按钮) */
    text-align: center;
}

.iframe-container {
    /* 相对定位，用于绝对定位 iframe */
    position: relative;
    /* 宽度 100% */
    width: 100%;
    /* 高度与宽度比例 (16:9 示例) */
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (9 / 16 * 100) */
    /* 背景色，加载时显示 */
    background-color: #000; /* Black background while loading */
    /* 隐藏溢出内容 */
    overflow: hidden;
    /* 更新边框: 改回实线，为轮廓做准备 */
    border-style: solid;
    border-width: 6px; /* Adjusted thickness */
    border-color: #c62828; /* Theme red border */
    /* 添加轮廓以创建夸张效果 */
    outline-style: dashed;
    outline-width: 4px; /* Outline thickness */
    outline-color: #4caf50; /* Contrasting Green */
    outline-offset: 5px; /* Space between border and outline */
    /* 添加圆角 */
    border-radius: 10px;
    /* (可选) 添加阴影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#game-iframe {
    /* 绝对定位，填充容器 */
    position: absolute;
    top: 0;
    left: 0;
    /* 宽度 100% */
    width: 100%;
    /* 高度 100% */
    height: 100%;
    /* 移除边框 */
    border: none;
}

#fullscreen-button {
    /* 按钮上边距 */
    margin-top: 1rem;
    /* 内边距 */
    padding: 0.8rem 1.5rem;
    /* 字体大小 */
    font-size: 1rem;
    /* 背景色 - 主题红色 */
    background-color: #c62828; /* Theme red */
    /* 字体颜色 */
    color: #fff;
    /* 边框 */
    border: none;
    /* 圆角 */
    border-radius: 5px;
    /* 鼠标指针 */
    cursor: pointer;
    /* 过渡效果 */
    transition: background-color 0.3s;
}

#fullscreen-button:hover {
    /* 鼠标悬停背景色 - 深红色 */
    background-color: #b71c1c; /* Darker red */
}

/* --- 内容区域样式 (Content Section Styles) --- */
#content-section {
    /* 背景色 (可选，区分内容区域) */
    background-color: #fff;
    /* 内边距 */
    padding: 2rem;
    /* 圆角 */
    border-radius: 8px;
    /* 阴影效果 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#content-section article {
    /* 文章间距 */
    margin-bottom: 2rem;
}

#content-section h2 {
    /* 标题字体大小 */
    font-size: 1.8rem;
    /* 标题颜色 - 深红色 */
    color: #b71c1c; /* Darker red */
    /* 标题下边距 */
    margin-bottom: 1rem;
    /* 顶部边框 - 浅绿色 */
    border-top: 3px solid #e8f5e9; /* Light green top border */
    /* 内边距 */
    padding-top: 1rem;
}

#content-section h3 {
    /* 标题字体大小 */
    font-size: 1.4rem;
    /* 标题颜色 - 主题红色 */
    color: #c62828; /* Theme red */
    /* 标题下边距 */
    margin-bottom: 0.8rem;
}

#content-section h4 {
     /* 标题字体大小 */
    font-size: 1.1rem;
    /* 标题颜色 */
    color: #333;
     /* 标题下边距 */
    margin-bottom: 0.5rem;
     /* 字体加粗 */
    font-weight: bold;
}

#content-section p {
    /*段落下边距*/
    margin-bottom: 1rem;
}

.screenshots-gallery {
    /* 使用 Flexbox 布局 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 水平居中对齐 (如果需要) */
    justify-content: center;
    /* 图片间距 */
    gap: 1rem; /* Adds space between images */
    /* 移除之前的临时居中 */
    /* text-align: center; */
}

.screenshots-gallery img {
    /* 设置最大宽度，防止图片过大 */
    max-width: 100%;
    /* 允许图片根据容器宽度缩放，最大为 300px */
    width: calc(33.333% - 1rem); /* Adjust for gap, approx 1/3 width */
    min-width: 200px; /* Minimum width before wrapping */
    /* 高度自动 */
    height: auto;
    /* 添加圆角 */
    border-radius: 8px;
    /* 添加阴影增加立体感 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    /* 对象适应方式，防止图片被拉伸 */
    object-fit: cover;
}

.user-reviews .review {
    /* 评论区样式 */
    background-color: #fff8e1; /* Lighter yellow/cream background for reviews */
    border-left: 4px solid #2e7d32; /* Theme green left border */
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 4px;
}

.user-reviews .review-text {
    /* 评论文本样式 */
    font-style: italic;
    margin-bottom: 0.5rem;
}

.user-reviews .reviewer {
    /* 评论者署名 */
    text-align: right;
    font-weight: bold;
    color: #555;
    margin-bottom: 0;
}

/* --- 页脚样式 (Footer Styles) --- */
footer {
    /* 文字居中 */
    text-align: center;
    /* 上下内边距 */
    padding: 2rem 0;
    /* 上边框 */
    margin-top: 3rem;
    border-top: 1px solid #ccc;
    /* 字体大小 */
    font-size: 0.9rem;
    /* 字体颜色 */
    color: #666;
}

footer p {
    /* 段落下边距 */
    margin-bottom: 0.5rem;
}

footer a {
    /* 页脚链接颜色 */
    color: #333;
}

/* --- 响应式设计 (Responsive Design) --- */
@media (max-width: 768px) {
    /* 中等屏幕样式 (例如平板) */
    header {
        /* 头部改为垂直堆叠 */
        flex-direction: column;
        /* 子元素居中对齐 */
        align-items: center;
    }

    .logo {
        /* Logo 下边距 */
        margin-bottom: 0.5rem;
    }

    .language-switcher {
        /* 语言切换器上边距 */
        margin-top: 0.5rem;
    }

    main {
        /* 移除左右外边距 */
        margin-left: 0;
        margin-right: 0;
        /* 增加上下外边距 */
        margin-top: 1rem;
        margin-bottom: 1rem;
        /* 移除内边距 */
        padding: 0;
    }

    #content-section {
         /* 移除圆角和阴影 */
         border-radius: 0;
         box-shadow: none;
         /* 调整内边距 */
         padding: 1.5rem;
    }

    #content-section h2 {
        font-size: 1.6rem;
    }

    #content-section h3 {
        font-size: 1.3rem;
    }

    .screenshots-gallery img {
        /* 在中等屏幕上，允许图片宽度稍大，例如最多两列 */
        width: calc(50% - 1rem); /* Adjust for gap, approx 1/2 width */
    }
}

@media (max-width: 480px) {
    /* 小型屏幕样式 (例如手机) */
    body {
        /* 减小基础字体大小 */
        font-size: 15px;
    }

    header {
        /* 调整内边距 */
        padding: 0.8rem 5%;
    }

    .logo {
        /* 调整 Logo 大小 */
        font-size: 1.8rem;
    }

    .language-switcher button {
        /* 调整按钮内边距和边距 */
        padding: 0.4rem 0.8rem;
        margin-left: 0.3rem;
        font-size: 0.9rem;
    }

    #content-section {
        /* 进一步调整内边距 */
         padding: 1rem;
    }

    #content-section h2 {
        font-size: 1.5rem;
    }

    #content-section h3 {
        font-size: 1.2rem;
    }

    #fullscreen-button {
        /* 调整按钮大小 */
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    footer {
        /* 调整页脚字体大小 */
        font-size: 0.8rem;
    }

    .screenshots-gallery img {
        /* 在小型屏幕上，图片占据完整宽度 */
        width: 100%;
    }
}