/* --- 全局样式 --- */
* {
    /* 移除所有元素的默认内外边距，并设置盒子模型为 border-box */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 设置页面默认字体为 Roboto，如果加载失败则使用无衬线字体 */
    font-family: 'Roboto', sans-serif;
    /* 设置默认文字颜色 */
    color: #333;
    /* 设置最小高度为屏幕高度，确保页脚在内容不足时也能在底部 */
    min-height: 100vh;
    /* 使用 Flexbox 布局，方便垂直居中和排列子元素 */
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
    /* 绿白交替条纹背景 */
    background: linear-gradient(
        to bottom,
        #ffffff 0%, #ffffff 50%, /* 白色部分 */
        #e6f7e6 50%, #e6f7e6 100% /* 淡绿色部分 */
    );
    background-size: 100% 40px; /* 每个条纹的高度 */
    /* 防止背景图片重复 */
    /* background-repeat: no-repeat; */ /* 注释掉这行，让条纹重复 */
}

/* --- 页面主要容器样式 (可以添加一个包裹 header, main, footer 的 div，如果需要限制宽度) --- */
/* 暂时不对 body 直接限制宽度，让内容撑满 */


/* --- 页面头部 Header 样式 --- */
header {
    /* 设置头部背景色 */
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景，让条纹隐约可见 */
    /* 内边距 (上下 10px, 左右 5%) */
    padding: 10px 5%;
    /* 使用 Flexbox 布局，让 Logo 和导航在同一行 */
    display: flex;
    /* 两端对齐，中间留空 */
    justify-content: space-between;
    /* 垂直居中对齐 */
    align-items: center;
    /* 添加底部阴影增加层次感 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* 固定在顶部（可选） */
    /* position: sticky;
    top: 0;
    z-index: 100; */
}

/* Logo 样式 */
#logo {
    /* 设置 Logo 字体为 Pacifico (花体) */
    font-family: 'Pacifico', cursive;
    /* 设置字体大小 */
    font-size: 2.5em; /* em 单位相对于父元素字体大小 */
    /* 设置字体颜色 */
    color: #2a8a2a; /* 绿色 */
    /* 添加文字阴影模拟线条/描边效果 */
    text-shadow:
       -1px -1px 0 #fff, /* 左上白色 */
        1px -1px 0 #fff, /* 右上白色 */
       -1px  1px 0 #fff, /* 左下白色 */
        1px  1px 0 #fff; /* 右下白色 */
    /* 去掉 H1 的默认加粗 */
    font-weight: normal;
    /* 让文字不可选中 */
    user-select: none;
}

/* 语言切换导航样式 */
#language-switcher button {
    /* 移除按钮默认边框 */
    border: none;
    /* 设置背景透明 */
    background: none;
    /* 设置字体颜色 */
    color: #333;
    /* 鼠标悬停时显示手型光标 */
    cursor: pointer;
    /* 设置字体大小 */
    font-size: 1em;
    /* 外边距 (左右 5px) */
    margin: 0 5px;
    /* 内边距 */
    padding: 5px 10px;
    /* 添加过渡效果 */
    transition: color 0.3s ease, background-color 0.3s ease;
    /* 圆角 */
    border-radius: 5px;
}

/* 语言切换按钮悬停效果 */
#language-switcher button:hover {
    /* 背景变绿 */
    background-color: #e6f7e6;
    /* 文字变深绿 */
    color: #1e641e;
}

/* --- 主要内容区域 Main 样式 --- */
main {
    /* 让 main 区域占据剩余空间 */
    flex-grow: 1;
    /* 设置左右内边距，使其内容不会贴边 */
    padding: 20px 5%;
    /* 设置最大宽度，让内容在大屏幕上居中显示 */
    max-width: 1200px;
    /* 外边距自动，实现水平居中 */
    margin: 20px auto; /* 上下边距 20px */
    /* 背景设为白色，覆盖条纹，突出内容区 */
    background-color: #fff;
    /* 添加圆角 */
    border-radius: 8px;
    /* 添加阴影 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 游戏区域样式 */
#game-section {
    /* 下边距 */
    margin-bottom: 30px;
    /* 文本居中 */
    text-align: center;
}

#game-container {
    /* 设置容器宽度为100% */
    width: 100%;
    /* 设置一个最大宽度，防止在大屏上过宽 */
    max-width: 800px;
    /* 外边距自动，使其在父元素中居中 */
    margin: 0 auto 15px auto; /* 底部留出间距给按钮 */
    /* 边框 */
    border: 3px solid #ccc;
    /* 阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* 圆角 */
    border-radius: 5px;
    /* 保持宽高比（可选，但 iframe 已设置高度） */
    /* position: relative;
    padding-bottom: 75%; 4:3 aspect ratio
    height: 0;
    overflow: hidden; */
}

#game-iframe {
    /* 确保 iframe 填满容器 */
    display: block; /* 消除 iframe 下方的空隙 */
    /* border: none; */ /* iframe 已设置 frameborder="0" */
    /* 如果使用了 padding-bottom 技巧，则需要以下样式 */
    /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
}

/* 全屏按钮样式 */
#fullscreen-button {
    /* 内边距 */
    padding: 10px 20px;
    /* 字体大小 */
    font-size: 1em;
    /* 鼠标指针 */
    cursor: pointer;
    /* 边框 */
    border: 1px solid #ccc;
    /* 背景色 */
    background-color: #f0f0f0;
    /* 圆角 */
    border-radius: 5px;
    /* 过渡效果 */
    transition: background-color 0.3s ease;
}

#fullscreen-button:hover {
    /* 悬停背景色 */
    background-color: #e0e0e0;
}

/* 内容区域样式 */
#content-section {
    /* 区域内元素之间的间距 */
    line-height: 1.6; /* 设置行高，提高可读性 */
}

#content-section h2 {
    /* 标题下边距 */
    margin-bottom: 15px;
    /* 标题上边距（与上一节分隔） */
    margin-top: 30px;
    /* 字体颜色 */
    color: #2a8a2a; /* 绿色 */
    /* 字体大小 */
    font-size: 1.8em;
    /* 下划线 */
    border-bottom: 2px solid #e6f7e6;
    padding-bottom: 5px;
}

#content-section h3 {
    /* 标题下边距 */
    margin-bottom: 10px;
    /* 标题上边距 */
    margin-top: 25px;
    /* 字体颜色 */
    color: #1e641e; /* 深绿色 */
    /* 字体大小 */
    font-size: 1.4em;
}
#content-section h4 {
     /* 标题下边距 */
    margin-bottom: 8px;
    /* 标题上边距 */
    margin-top: 20px;
    /* 字体颜色 */
    color: #555;
    /* 字体大小 */
    font-size: 1.1em;
}

#content-section p, #content-section article, #content-section .review {
    /* 段落和文章块下边距 */
    margin-bottom: 15px;
}

/* 用户评论样式 */
.review {
    /* 背景色 */
    background-color: #f9f9f9;
    /* 内边距 */
    padding: 15px;
    /* 边框 */
    border-left: 4px solid #e6f7e6; /* 左侧绿色边框 */
    /* 圆角 */
    border-radius: 4px;
}

.review span {
    /* 评论者名字样式 */
    display: block; /* 独占一行 */
    text-align: right; /* 右对齐 */
    font-style: italic; /* 斜体 */
    color: #777; /* 灰色 */
    margin-top: 5px;
}

/* --- 页面底部 Footer 样式 --- */
footer {
    /* 背景色 */
    background-color: #f1f1f1;
    /* 文字居中 */
    text-align: center;
    /* 内边距 (上下 15px) */
    padding: 15px 5%;
    /* 上边框 */
    border-top: 1px solid #ddd;
    /* 字体大小 */
    font-size: 0.9em;
    /* 文字颜色 */
    color: #555;
    /* 宽度与 header 一致 */
    /* 不设置宽度，让其自然撑满 */
}

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

footer a {
    /* 链接颜色 */
    color: #1e641e; /* 深绿色 */
    /* 去掉下划线 */
    text-decoration: none;
}

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

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

/* 移动端小屏幕 (< 768px) */
@media (max-width: 767.98px) {
    body {
        /* 调整条纹大小适应小屏幕 */
        background-size: 100% 30px;
    }

    header {
        /* 在小屏幕上让 Logo 和导航垂直排列 */
        flex-direction: column;
        /* 元素居中对齐 */
        align-items: center;
        /* 增加内边距 */
        padding: 15px 5%;
    }

    #logo {
        /* 调整 Logo 大小 */
        font-size: 2em;
        /* 增加下边距 */
        margin-bottom: 10px;
    }

    #language-switcher button {
        /* 调整按钮字体大小和边距 */
        font-size: 0.9em;
        margin: 5px;
    }

    main {
        /* 减小内边距 */
        padding: 15px 3%;
        /* 移除左右外边距 */
        margin: 15px 0;
        /* 移除圆角和阴影，使其融入背景 */
       /* border-radius: 0;
        box-shadow: none; */
    }
     #game-container {
        max-width: 100%; /* 游戏容器占满宽度 */
    }

     #game-iframe {
        /* 调整 iframe 高度 */
        height: 450px; /* 或者根据需要调整 */
     }

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

    #content-section h3 {
        font-size: 1.2em;
    }
     #content-section h4 {
        font-size: 1em;
    }
}

/* 更小屏幕 (< 480px) */
@media (max-width: 479.98px) {
     #game-iframe {
        /* 进一步调整 iframe 高度 */
        height: 350px;
     }
      #logo {
        /* 进一步调整 Logo 大小 */
        font-size: 1.8em;
    }
}