/* 基本重置和全局样式 */
body {
    /* 主体基本设置 */
    margin: 0; /* 去除默认边距 */
    font-family: 'Arial', sans-serif; /* 后备字体，理想情况下会用卡通字体 */
    background-color: #FFFFFF; /* 页面背景色 - 白色 */
    color: #333333; /* 主要文字颜色 */
    line-height: 1.6; /* 定义行高，增加可读性 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    min-height: 100vh; /* 最小高度为视口高度，确保页脚总在底部 */
}

/* 页眉样式 */
header {
    /* 页眉容器 */
    background-color: #FFD700; /* 页眉背景色 - 黄色 */
    padding: 15px 30px; /* 页眉内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 项目两端对齐 */
    align-items: center; /* 项目垂直居中 */
    border-bottom: 3px solid #FFA500; /* 页眉底部边框 - 橙黄色，增加层次感 */
}

.logo {
    /* Logo 文本样式 */
    font-size: 2.5em; /* Logo 字体大小 */
    font-weight: bold; /* Logo 字体粗细 */
    color: #FFFFFF; /* Logo 文字颜色 - 白色 */
    /* 尝试使用一种常见的卡通风格字体，如果不可用则回退 */
    font-family: 'Comic Sans MS', 'Luckiest Guy', 'Arial Black', sans-serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* 给Logo添加轻微阴影增加立体感 */
}

/* 新增: Logo 容器，用于排列 emoji 和文本 */
.logo-container {
    display: flex; /* 使用 flex 布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* emoji 和文本之间的间距 */
}

/* 新增: 鸭子 emoji logo 样式 */
.duck-emoji {
    font-size: 2.8em; /* Emoji 大小，比文字 Logo 稍大一些 */
    color: #FFFFFF; /* Emoji 颜色，可以尝试黄色#FFEB3B看效果 */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* 轻微阴影 */
}

/* 语言切换器样式 */
/* 修改：针对 <select> 元素进行样式设置 */
.language-switcher select {
    /* 下拉菜单样式 */
    background-color: #FFFFFF; /* 背景色 - 白色 */
    color: #E65100; /* 文字颜色 - 深橙色，与主题协调 */
    border: 2px solid #FFA500; /* 边框 - 橙黄色 */
    padding: 8px 12px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    font-family: 'Comic Sans MS', 'Luckiest Guy', sans-serif; /* 卡通字体 */
    font-size: 1em; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    cursor: pointer; /* 鼠标指针 */
    outline: none; /* 去除默认外框 */
}

.language-switcher select:hover {
    /* 下拉菜单悬停状态 */
    border-color: #E65100; /* 边框颜色加深 */
}

/* 移除旧的 a 标签样式，或注释掉，因为现在用的是 select */
/*
.language-switcher a {
    color: #FFFFFF; 
    margin-left: 10px; 
    text-decoration: none; 
    font-weight: bold; 
    padding: 5px 10px; 
    border-radius: 5px; 
    transition: background-color 0.3s ease; 
}

.language-switcher a:hover,
.language-switcher a.active {
    background-color: #FFA500; 
    text-decoration: none; 
}
*/

/* 主要内容区域样式 */
main {
    /* 主要内容容器 */
    flex-grow: 1; /* 占据剩余空间，确保页脚在底部 */
    padding: 20px;
    max-width: 1200px; /* 内容最大宽度 */
    margin: 0 auto; /* 水平居中 */
    width: 100%; /* 宽度占满父容器 */
    box-sizing: border-box; /* 边框和内边距包含在宽度内 */
}

/* 游戏区域样式 */
.game-section {
    /* 游戏区域容器 */
    text-align: center; /* 内容居中 */
    margin-bottom: 30px; /* 底部外边距 */
}

.iframe-container {
    /* iframe 外层容器 */
    width: 100%; /* 宽度100% */
    height: 70vh; /* 高度为视口高度的70%，可调整 */
    max-height: 600px; /* 最大高度限制，防止过大 */
    border: 5px solid #FFD700; /* 边框 - 黄色 */
    border-radius: 10px; /* 圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-bottom: 15px; /* iframe 和按钮之间的间距 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微阴影 */
}

#game-iframe {
    /* 游戏 iframe 本身 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    border: none; /* 去除默认边框 */
}

#fullscreen-button {
    /* 全屏按钮样式 */
    background-color: #FFD700; /* 背景色 - 黄色 */
    color: #FFFFFF; /* 文字颜色 - 白色 */
    border: none; /* 无边框 */
    padding: 10px 20px; /* 内边距 */
    font-size: 1.2em; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    border-radius: 8px; /* 圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s ease; /* 背景色过渡效果 */
    font-family: 'Comic Sans MS', 'Luckiest Guy', sans-serif; /* 卡通字体 */
}

#fullscreen-button:hover {
    /* 全屏按钮悬停状态 */
    background-color: #FFA500; /* 背景色 - 橙黄色 */
}

/* 游戏内容区域样式 */
.game-content {
    /* 游戏内容容器 */
    padding: 20px;
    background-color: #FFF8DC; /* 内容区域背景色 - 玉米色，淡黄 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 轻微阴影 */
}

.game-content h1, .game-content h2, .game-content h3 {
    /* 标题通用样式 */
    color: #FFA500; /* 标题颜色 - 橙黄色 */
    font-family: 'Comic Sans MS', 'Luckiest Guy', 'Arial Black', sans-serif; /* 卡通字体 */
    margin-top: 20px; /* 上外边距 */
    margin-bottom: 10px; /* 下外边距 */
}

.game-content h1 {
    /* H1 标题特定样式 */
    font-size: 2.2em; /* 字体大小 */
    text-align: center; /* 文本居中 */
    color: #E65100; /* 更深的橙色用于主标题 */
}

.game-content h2 {
    /* H2 标题特定样式 */
    font-size: 1.8em; /* 字体大小 */
    border-bottom: 2px solid #FFD700; /* 底部边框 - 黄色 */
    padding-bottom: 5px; /* 内边距 */
}

.game-content h3 {
    /* H3 标题特定样式 */
    font-size: 1.4em; /* 字体大小 */
}

.game-content p, .game-content li {
    /* 段落和列表项样式 */
    font-size: 1em; /* 字体大小 */
    color: #555555; /* 文字颜色 - 深灰色 */
    margin-bottom: 15px; /* 底部外边距 */
}

.game-content strong {
    /* 加粗文本样式 */
    color: #E65100; /* 强调色 - 深橙色 */
}

.game-content ul, .game-content ol {
    /* 列表样式 */
    margin-left: 20px; /* 左外边距，用于项目符号/编号 */
    padding-left: 20px; /* 左内边距 */
}

/* 游戏截图区域样式 */
.screenshot-gallery {
    /* 截图画廊容器 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 图片间距 */
    justify-content: center; /* 水平居中 */
    margin-bottom: 20px; /* 底部外边距 */
}

.screenshot-gallery img {
    /* 截图图片样式 */
    max-width: 100%; /* 最大宽度100% */
    height: auto; /* 高度自动 */
    border: 3px solid #FFD700; /* 边框 - 黄色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 轻微阴影 */
    /* 临时占位符大小，根据实际图片调整 */
    width: 250px;
    object-fit: cover; /* 图片裁剪以适应容器 */
}

/* 用户评论区域样式 */
.comment {
    /* 单条评论容器 */
    background-color: #FFFFFF; /* 背景色 - 白色 */
    border-left: 5px solid #FFD700; /* 左边框 - 黄色 */
    padding: 15px; /* 内边距 */
    margin-bottom: 15px; /* 底部外边距 */
    border-radius: 0 8px 8px 0; /* 右侧圆角 */
}

.comment p {
    /* 评论文本样式 */
    margin-bottom: 5px; /* 底部外边距 */
    font-style: italic; /* 斜体 */
}

.comment span {
    /* 评论者名称样式 */
    font-size: 0.9em; /* 字体大小 */
    color: #777777; /* 文字颜色 - 灰色 */
    display: block; /* 块级元素 */
    text-align: right; /* 文本右对齐 */
}

/* 页脚样式 */
footer {
    /* 页脚容器 */
    background-color: #333333; /* 背景色 - 深灰色 */
    color: #FFFFFF; /* 文字颜色 - 白色 */
    text-align: center; /* 文本居中 */
    padding: 20px; /* 内边距 */
    margin-top: auto; /* 自动外边距，将其推到底部 */
}

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

footer a {
    /* 页脚链接样式 */
    color: #FFD700; /* 链接颜色 - 黄色 */
    text-decoration: none; /* 去除下划线 */
}

footer a:hover {
    /* 页脚链接悬停状态 */
    text-decoration: underline; /* 添加下划线 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* 针对平板和手机等较小屏幕的样式 */
    header {
        /* 页眉在小屏幕上 */
        flex-direction: column; /* 项目垂直排列 */
        padding: 15px; /* 调整内边距 */
    }

    .logo {
        /* Logo 在小屏幕上 */
        font-size: 2em; /* 调整字体大小 */
        margin-bottom: 10px; /* 底部外边距 */
    }

    .language-switcher {
        /* 语言切换器在小屏幕上 */
        display: flex; /* 使用 Flexbox */
        flex-wrap: wrap; /* 允许换行 */
        justify-content: center; /* 居中对齐 */
    }

    .language-switcher a {
        /* 语言链接在小屏幕上 */
        margin: 5px; /* 调整外边距 */
        font-size: 0.9em; /* 调整字体大小 */
    }

    main {
        /* 主要内容在小屏幕上 */
        padding: 10px; /* 调整内边距 */
    }

    .iframe-container {
        /* iframe 容器在小屏幕上 */
        height: 50vh; /* 调整高度 */
    }

    .game-content h1 {
        /* H1 标题在小屏幕上 */
        font-size: 1.8em; /* 调整字体大小 */
    }

    .game-content h2 {
        /* H2 标题在小屏幕上 */
        font-size: 1.5em; /* 调整字体大小 */
    }

    .game-content h3 {
        /* H3 标题在小屏幕上 */
        font-size: 1.2em; /* 调整字体大小 */
    }

    .screenshot-gallery img {
        /* 截图图片在小屏幕上 */
        width: 100%; /* 宽度占满，每行一张 */
    }

    .logo-container {
        flex-direction: column; /* 在小屏幕上，logo和文字垂直排列 */
        align-items: center;
        text-align: center;
    }

    .language-switcher {
        margin-top: 10px; /* 在小屏幕上，语言切换器与logo之间增加一些间距 */
    }

    .screenshot-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 在较小屏幕上显示更少的列 */
    }

    article h1 {
        font-size: 2em; /* 调整小屏幕上的H1字体大小 */
    }

    article h2 {
        font-size: 1.6em; /* 调整小屏幕上的H2字体大小 */
    }

    article h3 {
        font-size: 1.3em; /* 调整小屏幕上的H3字体大小 */
    }
}

@media (max-width: 480px) {
    /* 针对非常小的手机屏幕的进一步调整 */
    .logo {
        font-size: 1.8em; /* 进一步缩小Logo字体 */
    }

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

    .language-switcher a {
        padding: 4px 8px; /* 调整语言切换器链接内边距 */
        font-size: 0.8em;
    }

    .game-content {
        padding: 15px; /* 调整内容区域内边距 */
    }

    .screenshot-gallery {
        grid-template-columns: 1fr; /* 在非常小的屏幕上只显示一列 */
    }

    .logo .duck-emoji {
        font-size: 2.5em; /* 在小屏幕上调整鸭子表情符号大小 */
    }

    .logo div[data-lang-key="logoText"] {
        font-size: 1.8em; /* 在小屏幕上调整Logo文字大小 */
    }
}

/* 图标样式 */
/* 为标题中的 Font Awesome 图标添加样式 */
h2 > i.fas,
h3 > i.fas {
    margin-right: 10px; /* 图标和文字之间的右边距 */
    color: #ffc107; /* 图标颜色 - 使用主题黄色，或者可以根据需要调整 */
    /* 可以考虑添加 vertical-align: middle; 如果对齐有问题 */
}

/* 特定图标的颜色微调 (可选) */
/* 例如，让"爱心"图标更红一些 */
h2 > i.fa-heart {
    color: #e91e63; /* 一个示例红色 */
}

/* 例如，让"赞"图标颜色不同 */
h2 > i.fa-thumbs-up {
    color: #007bff; /* 一个示例蓝色 */
}