/* css/style.css */

    /* --- 全局样式与重置 --- */
    * {
        margin: 0; /* 清除默认外边距 */
        padding: 0; /* 清除默认内边距 */
        box-sizing: border-box; /* 让边框和内边距不增加元素总宽高 */
    }

    body {
        /* 应用 Nunito 字体，如果失败则回退到 sans-serif */
        font-family: 'Nunito', sans-serif;
        line-height: 1.7; /* 调整行高以适应新字体 */
        background-color: #f0f8ff; /* 保持浅蓝色背景 */
        color: #444; /* 稍微柔和的文字颜色 */
        padding: 0 15px;
    }

    /* --- 页眉 (Header) --- */
    header {
        background-color: #ffffff; /* 白色背景 */
        padding: 15px 0; /* 上下内边距 */
        border-bottom: 1px solid #e0e0e0; /* 底部细线分隔 */
        display: flex; /* 使用 Flexbox 布局 */
        justify-content: space-between; /* Logo 和导航两端对齐 */
        align-items: center; /* 垂直居中 */
        padding: 15px 15px; /* 直接在 header 添加左右 padding (替代 body padding 效果) */
        flex-wrap: wrap; /* 允许换行 */
    }

    .logo {
        font-size: 2.2em; /* 增大字体 */
        font-weight: 900; /* 使用最粗字重 */
        color: #0056b3; /* 深蓝色，更稳重些 */
        /* 添加一点文字阴影增加立体感 */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
        /* 可以考虑添加一个简单的图标字体，但暂时只用文字 */
    }

    .language-switcher {
         margin-bottom: 10px; /* 在换行时与下方留出间距 */
    }

    .language-switcher button {
        background: none; /* 无背景 */
        border: 1px solid #007bff; /* 蓝色边框 */
        color: #007bff; /* 蓝色文字 */
        padding: 5px 10px; /* 内边距 */
        margin-left: 5px; /* 按钮间距 */
        cursor: pointer; /* 鼠标指针 */
        border-radius: 4px; /* 圆角 */
        font-family: 'Nunito', sans-serif; /* 按钮也使用新字体 */
        font-weight: 700; /* 加粗按钮文字 */
        transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
    }

    .language-switcher button:hover,
    .language-switcher button.active { /* 悬停和激活状态 */
        background-color: #007bff; /* 蓝色背景 */
        color: #ffffff; /* 白色文字 */
    }


    /* --- 主要内容区域 (Main) --- */
    main {
        padding: 20px 0; /* 上下留白 */
        /* max-width: 1200px; */ /* 移除最大宽度限制 */
        /* margin: 0 auto; */ /* 移除居中 */
        /* Padding 由 body 提供 */
    }

    /* --- 游戏区域 (Game Section) --- */
    .game-section {
        margin-bottom: 30px; /* 和下方内容区域的间距 */
        text-align: center; /* 按钮居中 */
    }

    .iframe-container {
        position: relative; /* 用于全屏按钮定位 */
        width: 100%;
        max-width: 1000px; /* 重新设置最大宽度，让游戏区域小一些 */
        margin: 0 auto 15px auto; /* 重新添加左右 auto 来居中，并保持底部 margin */
        box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 调整阴影 */
        background-color: #eee; /* iframe 加载时的灰色背景 */
        border-radius: 8px; /* iframe 容器也加圆角 */
        overflow: hidden; /* 隐藏内部 iframe 可能的轻微溢出 */
    }

    /* 确保 iframe 填充容器 */
    .iframe-container iframe {
        display: block; /* 移除可能的底部空白 */
        border: none; /* 确保无边框 */
        width: 100%; /* 确保宽度100% */
        height: 600px; /* 保持固定高度，或者你可以调整 */
    }

    .fullscreen-button {
        padding: 10px 25px; /* 稍微增大按钮 */
        background-color: #28a745; /* 保持绿色 */
        color: white; /* 白色文字 */
        border: none; /* 无边框 */
        border-radius: 20px; /* 更圆的按钮 */
        cursor: pointer; /* 鼠标指针 */
        font-size: 1.1em; /* 增大字体 */
        font-weight: 700; /* 加粗 */
        font-family: 'Nunito', sans-serif; /* 使用新字体 */
        transition: background-color 0.3s, transform 0.2s; /* 添加 transform 过渡 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* 添加按钮阴影 */
    }

    .fullscreen-button:hover {
        background-color: #218838; /* 悬停时深一点的绿色 */
        transform: scale(1.05); /* 悬停时轻微放大 */
    }

    .fullscreen-button:active { /* 点击时效果 */
        transform: scale(1.02); /* 轻微缩小 */
        box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* 阴影变浅 */
    }

    /* --- 内容区域 (Content Section) --- */
    .content-section {
        background-color: #ffffff; /* 白色背景 */
        padding: 30px 40px; /* 增大左右内边距 */
        border-radius: 12px; /* 更大的圆角 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 稍微明显的阴影 */
        /* max-width: 1200px; */ /* 移除最大宽度限制 */
        margin: 40px 0 0 0; /* 移除左右 auto，只保留顶部 margin */
    }

    .content-section h1 {
        font-size: 2.5em; /* H1 更大 */
        font-weight: 900; /* 最粗 */
        color: #0056b3; /* 深蓝 */
        margin-bottom: 25px;
        text-align: center;
    }

    .content-section h2 {
        font-size: 1.8em; /* H2 大小 */
        font-weight: 700; /* 加粗 */
        color: #007bff; /* 蓝色 */
        margin-top: 40px; /* 增大 H2 上方间距 */
        margin-bottom: 20px;
        border-bottom: 2px solid #eef; /* 稍明显的分隔线 */
        padding-bottom: 8px;
        text-align: center; /* 确保 H2 居中 */
    }

    .content-section h3 {
        font-size: 1.4em; /* H3 大小 */
        font-weight: 700; /* 加粗 */
        color: #17a2b8; /* 青色 */
        margin-top: 30px;
        margin-bottom: 15px;
        text-align: center; /* 确保 H3 居中 */
    }

    .content-section p,
    .content-section li { /* 让列表项也应用基础样式 */
        margin-bottom: 15px;
        color: #555; /* 正文颜色 */
        font-size: 1.05em; /* 稍微增大正文字体 */
        line-height: 1.75; /* 增大行高，提高可读性 */
    }

    .content-section strong { /* 加强重点文字 */
        font-weight: 700;
        color: #0056b3;
    }

    .content-section ul,
    .content-section ol { /* 为列表添加左侧内边距 */
        padding-left: 30px;
    }

    /* 特定区域微调 */
    #features ul {
        list-style: none; /* 去掉特点列表的默认点 */
        padding-left: 0;
    }
    #features li {
        padding-left: 25px; /* 左侧留白 */
        position: relative;
        margin-bottom: 12px;
    }
    #features li::before { /* 用伪元素创建自定义标记 */
        content: '\\2714'; /* Unicode check mark */
        position: absolute;
        left: 0;
        color: #28a745; /* 绿色标记 */
        font-weight: bold;
    }

    #how-to-play ol {
        list-style: decimal inside; /* 数字在内部 */
        padding-left: 0;
    }
    #how-to-play li {
        margin-bottom: 10px;
    }

    /* --- 截图区域 --- */
    .screenshots {
        text-align: center; /* 截图标题和图片居中 */
        margin-bottom: 30px;
    }

    .screenshot-gallery img {
        border: 2px solid #eee; /* 边框调整 */
        padding: 4px; /* 图片和边框间距 */
        background-color: #fff; /* 图片背景 */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 图片阴影 */
        max-width: 30%; /* 默认宽度 */
        height: auto;
        margin: 8px; /* 增加图片间距 */
        display: inline-block; /* 并排显示 */
        border-radius: 4px; /* 图片也加点圆角 */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加悬停效果 */
    }

    .screenshot-gallery img:hover {
        transform: scale(1.05) translateY(-3px); /* 鼠标悬停时放大并轻微上移 */
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    /* --- 评论区域 --- */
    .review {
        background-color: #f8f9fa; /* 评论浅灰色背景 */
        padding: 20px; /* 增大内边距 */
        margin-bottom: 20px;
        border-left: 5px solid #007bff; /* 加粗左边框 */
        border-radius: 8px; /* 圆角 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .review p:first-child { /* 评论内容 */
        margin-bottom: 10px;
    }

    .review .reviewer { /* 评论者 */
        text-align: right; /* 评论者名字右对齐 */
        font-style: italic; /* 斜体 */
        color: #777; /* 灰色文字 */
        font-size: 0.95em;
        margin-top: 5px;
        margin-bottom: 0; /* 去掉多余的底部间距 */
    }

    /* --- 页脚 (Footer) --- */
    footer {
        background-color: #dbefff; /* 更柔和的蓝色系页脚 */
        color: #0056b3; /* 深蓝色文字 */
        text-align: center; /* 文字居中 */
        padding: 25px 15px; /* 上下内边距, 左右内边距 */
        margin-top: 50px; /* 增大和主体内容的间距 */
        font-size: 0.95em;
        /* max-width: 1200px; */ /* 移除最大宽度限制 */
        /* margin-left: auto; */ /* 移除居中 */
        /* margin-right: auto; */ /* 移除居中 */
        border-top: 1px solid #cde;
    }

    .footer-content p {
        margin-bottom: 8px; /* 行间距 */
    }

    .footer-content a {
        color: #004085; /* 更深的蓝色链接 */
        text-decoration: none; /* 去掉下划线 */
        font-weight: 700; /* 加粗链接 */
    }

    .footer-content a:hover {
        text-decoration: underline; /* 悬停时显示下划线 */
        color: #007bff; /* 悬停时变亮 */
    }


    /* --- 响应式设计 (调整) --- */
    @media (max-width: 768px) {
        body {
            padding: 0 10px; /* 移动端减小左右留白 */
        }
        header {
           /* 在小屏幕上，flex-wrap: wrap 已经允许换行 */
           justify-content: center; /* 让 logo 和 切换器居中 */
           padding: 10px 0;
        }
        .logo {
             width: 100%; /* Logo 占满一行 */
             text-align: center; /* 文字居中 */
             margin-bottom: 10px;
             font-size: 1.8em;
             text-shadow: none; /* 移动端移除阴影 */
        }
         .language-switcher {
             width: 100%; /* 切换器占满一行 */
             text-align: center; /* 按钮居中 */
             margin-bottom: 10px;
        }
         .language-switcher button {
             margin: 3px; /* 按钮间距调整 */
         }

        .iframe-container iframe {
             height: 450px; /* 中等屏幕减小 iframe 高度 */
        }

        .content-section {
            padding: 20px; /* 移动端内边距减小 */
            margin-top: 30px;
        }
        .content-section h1 { font-size: 2em; }
        .content-section h2 { font-size: 1.6em; }
        .content-section h3 { font-size: 1.3em; }

         .screenshot-gallery img {
            max-width: 45%; /* 中等屏幕允许两张图并排 */
            margin: 8px;
            display: inline-block;
        }
    }

    @media (max-width: 480px) {
         body {
            padding: 0 5px; /* 再次减小左右留白 */
        }
        .logo {
            font-size: 1.6em; /* 移动端 Logo 字体减小 */
        }

        .language-switcher button {
            padding: 4px 8px; /* 移动端按钮减小 */
            font-size: 0.9em;
        }

        .fullscreen-button { padding: 8px 20px; font-size: 1em;}

         .iframe-container iframe {
             height: 300px; /* 小屏幕进一步减小 iframe 高度 */
        }


        .content-section {
             padding: 15px; /* 再次减小内边距 */
             margin-top: 20px;
        }

        .content-section h1 { font-size: 1.7em; }
        .content-section h2 { font-size: 1.4em; }
        .content-section h3 { font-size: 1.2em; }
        .content-section p,
        .content-section li { font-size: 1em; line-height: 1.65;} /* 调整移动端行高 */

         .screenshot-gallery img {
            max-width: 95%; /* 小屏幕截图占满宽度 */
            margin: 8px auto;
            display: block; /* 强制块状显示 */
        }

        #features li {
            padding-left: 20px; /* 移动端减小列表缩进 */
        }
    }