/* --- 全局样式 Global Styles --- */
body {
    /* 主体字体，优先使用Fredoka One，备选Comic Neue和sans-serif系列的卡通字体 */
    font-family: 'Fredoka One', 'Comic Neue', cursive, sans-serif;
    /* 页面边距 */
    margin: 0;
    padding: 0;
    /* 背景颜色 - 浅棕色 */
    background-color: #f5e6cc; /* 示例浅棕色 */
    /* 文字颜色 */
    color: #333;
    /* 行高，提高可读性 */
    line-height: 1.6;
}

/* --- 页面头部 Header --- */
header {
    /* 背景颜色 - 绿色 */
    background-color: #8fbc8f; /* 示例绿色 */
    /* 内边距 */
    padding: 15px 30px;
    /* Flexbox布局，使logo和导航栏在同一行 */
    display: flex;
    /* 子元素两端对齐 */
    justify-content: space-between;
    /* 子元素垂直居中 */
    align-items: center;
    /* 边框底部添加阴影，增加层次感 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
    /* Logo字体大小 */
    font-size: 2em; /* 相对单位，便于缩放 */
    /* Logo字体粗细 */
    font-weight: bold;
    /* Logo文字颜色 */
    color: #ffffff; /* 白色，与绿色背景形成对比 */
    /* 使用Fredoka One字体强调卡通风格 */
    font-family: 'Fredoka One', cursive;
}

.language-switcher button {
    /* 按钮外边距 */
    margin-left: 10px;
    /* 按钮内边距 */
    padding: 8px 15px;
    /* 按钮背景颜色 */
    background-color: #f5e6cc; /* 浅棕色，与页面背景协调 */
    /* 按钮文字颜色 */
    color: #556b2f; /* 深绿色文字 */
    /* 边框去除 */
    border: none;
    /* 圆角处理 */
    border-radius: 5px;
    /* 鼠标指针样式 */
    cursor: pointer;
    /* 字体继承body设置，或可单独指定 */
    font-family: 'Comic Neue', cursive, sans-serif;
    /* 过渡效果，使交互更平滑 */
    transition: background-color 0.3s ease;
}

.language-switcher button:hover,
.language-switcher button.active {
    /* 鼠标悬停或激活状态下的背景颜色 */
    background-color: #e8d5b7; /* 稍深的棕色 */
}

/* --- 主要内容区域 Main Content --- */
main {
    /* 内边距，使内容不贴边 */
    padding: 20px;
    /* 最大宽度，使长文本更易读，并在大屏幕上居中 */
    max-width: 1200px;
    /* 外边距，实现居中 */
    margin: 20px auto;
}

/* --- 游戏区域 Game Section --- */
.game-section {
    /* 文本居中 */
    text-align: center;
    /* 外边距，与其他部分隔开 */
    margin-bottom: 30px;
}

.game-section h1 {
    /* 标题字体大小 */
    font-size: 2.5em;
    /* 标题颜色 - 深绿色 */
    color: #556b2f; /* 示例深绿色 */
    /* 外边距 */
    margin-bottom: 20px;
}

.iframe-container {
    /* 容器宽度，撑满父元素 */
    width: 100%;
    /* 高度，可以根据游戏比例调整，例如16:9，则 padding-bottom: 56.25% */
    /* 这里我们给一个固定高度，因为iframe本身有高度 */
    height: 600px; /* PC端默认高度 */
    /* 边框 */
    border: 5px solid #8fbc8f; /* 绿色边框 */
    /* 圆角 */
    border-radius: 10px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 相对定位，为全屏按钮的绝对定位做准备 */
    position: relative;
    /* 背景，以防iframe加载慢 */
    background-color: #000;
}

#gameFrame {
    /* iframe确保填满其容器 */
    width: 100%;
    height: 100%;
    /* 移除iframe默认边框 */
    border: none;
}

#fullscreenBtn {
    /* 按钮内边距 */
    padding: 10px 20px;
    /* 字体大小 */
    font-size: 1em;
    /* 背景颜色 - 绿色 */
    background-color: #8fbc8f;
    /* 文字颜色 */
    color: white;
    /* 边框去除 */
    border: none;
    /* 圆角 */
    border-radius: 5px;
    /* 鼠标指针 */
    cursor: pointer;
    /* 外边距，与iframe隔开 */
    margin-top: 15px;
    /* 过渡效果 */
    transition: background-color 0.3s ease;
}

#fullscreenBtn:hover {
    /* 鼠标悬停背景色 */
    background-color: #7aac7a; /* 稍深的绿色 */
}

/* --- 内容介绍区域 Content Section --- */
.content-section {
    /* 内边距 */
    padding: 20px;
    /* 背景颜色 */
    background-color: #fff8e7; /* 非常浅的棕黄色，提供对比 */
    /* 圆角 */
    border-radius: 8px;
    /* 阴影 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.content-section h2 {
    /* 标题字体大小 */
    font-size: 2em;
    /* 标题颜色 - 深绿色 */
    color: #556b2f;
    /* 外边距 */
    margin-top: 30px;
    margin-bottom: 15px;
    /* 边框底部装饰 */
    border-bottom: 2px solid #8fbc8f;
    /* 内边距底部 */
    padding-bottom: 5px;
}

.content-section h3 {
    /* 标题字体大小 */
    font-size: 1.5em;
    /* 标题颜色 - 中等绿色 */
    color: #6B8E23; /* 橄榄绿 */
    /* 外边距 */
    margin-top: 25px;
    margin-bottom: 10px;
}

.content-section p,
.content-section li {
    /* 段落和列表项文字颜色 */
    color: #4a4a4a; /* 深灰色，易于阅读 */
    /* 字间距，提高可读性 */
    letter-spacing: 0.5px;
    /* 为图片留出空间，避免文字覆盖 */
    position: relative; 
}

.content-section strong {
    /* 加粗文字颜色，可设为主题色之一 */
    color: #556b2f;
}

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

.content-section li {
    /* 列表项下边距 */
    margin-bottom: 8px;
}

/* 游戏截图区域 */
.screenshots {
    /* Flexbox布局，使图片横向排列 */
    display: flex;
    /* 允许换行 */
    flex-wrap: wrap;
    /* 图片间距 */
    gap: 10px;
    /* 水平居中（如果只有一行图片且未占满）*/
    justify-content: center; 
}

.screenshots img {
    /* 图片最大宽度，确保响应式 */
    max-width: 100%; 
    /* 高度自动，保持比例 */
    height: auto;
    /* 响应式宽度调整，每行大约3张图 */
    flex-basis: calc(33.333% - 20px); /* 减去gap */
    /* 边框 */
    border: 3px solid #8fbc8f; /* 绿色边框 */
    /* 圆角 */
    border-radius: 5px;
    /* 对象填充方式，确保图片不变形 */
    object-fit: cover;
}

/* 用户评论区域 */
.reviews {
    /* 外边距 */
    margin-top: 20px;
}

.review {
    /* 背景颜色 */
    background-color: #e8f5e9; /* 非常浅的绿色 */
    /* 内边距 */
    padding: 15px;
    /* 圆角 */
    border-radius: 5px;
    /* 外边距 */
    margin-bottom: 15px;
    /* 左边框装饰 */
    border-left: 5px solid #8fbc8f; /* 绿色边框 */
}

.review-text {
    /* 评论文本样式 */
    font-style: italic;
    /* 颜色 */
    color: #333;
}

.reviewer {
    /* 评论者署名样式 */
    text-align: right;
    /* 字体大小 */
    font-size: 0.9em;
    /* 颜色 */
    color: #556b2f;
    /* 上外边距 */
    margin-top: 5px;
}

/* --- 页面尾部 Footer --- */
footer {
    /* 文本居中 */
    text-align: center;
    /* 内边距 */
    padding: 20px;
    /* 背景颜色 - 绿色 */
    background-color: #8fbc8f;
    /* 文字颜色 */
    color: #ffffff;
    /* 上边框，与内容区分 */
    margin-top: 30px; /* 与主要内容隔开 */
}

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

footer a {
    /* 链接颜色 */
    color: #f5e6cc; /* 浅棕色，与页脚背景协调 */
    /* 去除下划线 */
    text-decoration: none;
}

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

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

/* 中等屏幕，如平板电脑 */
@media (max-width: 768px) {
    header {
        /* 头部弹性布局方向改为垂直 */
        flex-direction: column;
        /* 文本居中 */
        text-align: center;
    }

    .logo {
        /* Logo下边距 */
        margin-bottom: 10px;
    }

    .language-switcher {
        /* 语言切换器整体居中 */
        justify-content: center;
        /* 允许换行 */
        flex-wrap: wrap;
    }
    .language-switcher button {
        /* 按钮外边距 */
        margin: 5px;
    }

    .iframe-container {
        /* 调整iframe高度，适应小屏幕 */
        height: 450px; 
    }

    .screenshots img {
        /* 小屏幕上每行显示1-2张截图 */
        flex-basis: calc(50% - 10px); /* 减去gap */
    }
}

/* 小型屏幕，如手机 */
@media (max-width: 480px) {
    .logo {
        /* Logo字体大小调整 */
        font-size: 1.8em;
    }

    header {
        /* 头部内边距调整 */
        padding: 10px 15px;
    }

    main {
        /* 主要内容内边距调整 */
        padding: 10px;
    }

    .game-section h1 {
        /* 游戏标题字体大小调整 */
        font-size: 2em;
    }

    .content-section h2 {
        /* 内容区域H2标题字体大小调整 */
        font-size: 1.8em;
    }

    .content-section h3 {
        /* 内容区域H3标题字体大小调整 */
        font-size: 1.3em;
    }

    .iframe-container {
        /* 进一步调整iframe高度 */
        height: 300px; 
    }

    #fullscreenBtn {
        /* 全屏按钮内边距和字体大小调整 */
        padding: 8px 15px;
        font-size: 0.9em;
    }

    .screenshots img {
        /* 小屏幕上每行显示1张截图 */
        flex-basis: 100%;
    }

    /* 新增：调整标题容器在小屏幕上的表现 */
    .title-container {
        /* 允许换行，以防Logo和标题过长挤压 */
        flex-wrap: wrap;
        gap: 5px; /* 缩小间距 */
    }
    .capybara-logo {
        height: 40px; /* 小屏幕上Logo再小一点 */
    }

    .fas {
        /* 小屏幕上图标稍小 */
        font-size: 1em;
    }
    
    h1 .fas, h2 .fas, h3 .fas {
        /* 小屏幕上标题中的图标也相应调整 */
        font-size: 1.1em;
    }
    
    .content-section li .fas {
        /* 小屏幕上特性列表中的图标也相应调整 */
        font-size: 1.1em;
    }
}

/* 全屏状态下的iframe样式 (通过JS添加此类) */
.iframe-fullscreen {
    position: fixed; /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100vw !important; /* 视口宽度 */
    height: 100vh !important; /* 视口高度 */
    z-index: 9999; /* 置于顶层 */
    border: none !important; /* 移除边框 */
    border-radius: 0 !important; /* 移除圆角 */
}

/* 新增：语言选择下拉菜单样式 */
#languageSelector {
    /* 内边距 */
    padding: 8px 12px;
    /* 边框 */
    border: 2px solid #556b2f; /* 深绿色边框 */
    /* 圆角 */
    border-radius: 5px;
    /* 背景颜色 */
    background-color: #f5e6cc; /* 浅棕色背景 */
    /* 字体颜色 */
    color: #556b2f; /* 深绿色文字 */
    /* 字体，与按钮保持一致 */
    font-family: 'Comic Neue', cursive, sans-serif;
    /* 字体大小 */
    font-size: 0.9em;
    /* 鼠标指针 */
    cursor: pointer;
    /* 外观，尝试移除默认的系统箭头样式，但效果因浏览器而异 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 如果移除了默认箭头，可以添加自定义箭头背景图 */
    /* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23556b2f%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-13z%22%2F%3E%3C%2Fsvg%3E'); */
    /* background-repeat: no-repeat; */
    /* background-position: right 10px center; */
    /* background-size: 12px; */
    /* 右侧留出空间给箭头 */
    padding-right: 30px; 
}

#languageSelector:focus {
    /* 焦点状态边框颜色 */
    outline: none;
    border-color: #7aac7a; /* 稍亮的绿色 */
    box-shadow: 0 0 5px rgba(122, 172, 122, 0.5); /* 轻微阴影 */
}

/* 新增：标题容器样式 */
.title-container {
    /* Flexbox布局，使Logo和标题在同一行 */
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
    /* 水平居中对齐内部元素（如果标题本身也需要居中）*/
    justify-content: center; 
    /* 可根据需要调整间距 */
    gap: 15px; 
    /* 防止换行，如果空间不足 */
    flex-wrap: nowrap; 
}

/* 新增：卡皮巴拉Logo样式 */
.capybara-logo {
    /* Logo高度 */
    height: 60px; /* 可根据实际图片大小调整 */
    /* 宽度自动，保持比例 */
    width: auto;
    /* 可以添加一些边距 */
    /* margin-right: 10px; */
}

/* 新增：装饰性图片样式 */
.decorative-image {
    /* 图片高度 */
    height: 50px; /* 示例大小，可调整 */
    /* 宽度自动 */
    width: auto;
    /* 漂浮效果，可以根据需要调整为 left 或 none */
    float: right; 
    /* 外边距，避免文字紧贴 */
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
    /* 如果图片是透明背景的简笔画，这样就够了 */
    /* 如果需要，可以添加边框或效果 */
    /* border: 1px dashed #8fbc8f; */
    /* border-radius: 50%; */
}

/* 新增：图标样式 */
.fas {
    /* 图标颜色 */
    color: #556b2f; /* 深绿色，与网站主题色一致 */
    /* 图标大小 */
    font-size: 1.1em;
    /* 图标间距 */
    margin-right: 8px;
    /* 垂直对齐 */
    vertical-align: middle;
}

/* 标题中的图标样式 */
h1 .fas, h2 .fas, h3 .fas {
    /* 标题中的图标稍大一些 */
    font-size: 1.2em;
    /* 图标颜色稍深 */
    color: #3a4a1f;
}

/* 评论中的引号图标样式 */
.review-text .fa-quote-left {
    /* 左引号靠左 */
    margin-right: 5px;
}

.review-text .fa-quote-right {
    /* 右引号靠右 */
    margin-left: 5px;
}

/* 特性列表中的图标样式 */
.content-section li .fas {
    /* 特性列表中的图标稍大 */
    font-size: 1.2em;
    /* 图标颜色 */
    color: #8fbc8f; /* 绿色 */
    /* 图标间距 */
    margin-right: 10px;
}

/* 页脚图标样式 */
footer .fas {
    /* 页脚图标颜色 */
    color: #f5e6cc; /* 浅棕色，与页脚文字颜色一致 */
}

/* 全屏按钮中的图标样式 */
#fullscreenBtn .fas {
    /* 全屏按钮中的图标颜色 */
    color: white;
    /* 图标大小 */
    font-size: 1em;
}

/* 语言选择器中的图标样式 */
#languageSelector .fas {
    /* 语言选择器中的图标颜色 */
    color: #556b2f;
    /* 图标大小 */
    font-size: 1em;
}