/* 全局样式 */
body {
    font-family: 'SF Cartoonist Hand', 'Comic Sans MS', cursive, sans-serif; /* 卡通字体, 后备字体 */
    margin: 0;
    padding: 0;
    background-color: #E0F7FA; /* 淡蓝色背景 */
    color: #333; /* 主要文字颜色 */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* 头部样式 */
header {
    background-color: #0277BD; /* 蓝色头部背景 */
    color: #FFFFFF; /* 白色文字 */
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 头部阴影 */
}

.logo {
    font-size: 2.5em; /* Logo 字体大小 */
    font-weight: bold;
    color: #FF9800; /* 橙色 Logo 文字 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); /* Logo 文字阴影 */
}

/* 语言切换器样式 */
.language-switcher select {
    background-color: #FF9800; /* 橙色下拉菜单背景 */
    color: #FFFFFF; /* 白色文字 */
    border: none;
    padding: 8px 12px; /* 内边距调整 */
    margin-left: 10px;
    cursor: pointer;
    border-radius: 5px; /* 圆角 */
    font-family: inherit; /* 继承字体 */
    font-size: 0.9em;
    -webkit-appearance: none; /* 移除默认箭头 (Chrome, Safari, Opera) */
    -moz-appearance: none;    /* 移除默认箭头 (Firefox) */
    appearance: none;         /* 移除默认箭头 (standard) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M5%207.5L10%2012.5L15%207.5%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E'); /* 自定义箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px; /* 为自定义箭头腾出空间 */
}

/* 下拉菜单选项的样式 (一些浏览器可能不支持对option的完整样式控制) */
.language-switcher select option {
    background-color: #FFFFFF; /* 选项背景为白色 */
    color: #333333; /* 选项文字为深灰色 */
}

/* 主要内容区域 */
main {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 20px;
    width: 100%;
    max-width: 1200px; /* 内容最大宽度 */
    margin: 0 auto; /* 居中显示 */
    box-sizing: border-box;
}

/* 游戏区域样式 */
#game-section {
    background-color: #FFFFFF; /* 白色背景 */
    padding: 20px;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 区域阴影 */
    text-align: center; /* 内容居中 */
    margin-bottom: 30px;
}

#iframe-container {
    width: 100%;
    /* 保持16:9的宽高比，可以根据游戏实际比例调整 */
    aspect-ratio: 16 / 9; 
    overflow: hidden; /* 隐藏超出部分 */
    margin-bottom: 15px;
    border: 5px solid #0277BD; /* 蓝色边框 */
    border-radius: 8px;
}

#iframe-container iframe {
    width: 100%;
    height: 100%;
    display: block; /* 移除iframe底部空白 */
}

#fullscreen-button {
    background-color: #FF9800; /* 橙色按钮 */
    color: #FFFFFF; /* 白色文字 */
    border: none;
    padding: 12px 25px;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#fullscreen-button:hover {
    background-color: #F57C00; /* 深橙色悬停 */
}

/* 内容区域文章样式 */
#content-section {
    background-color: #FFFFFF; /* 白色背景 */
    padding: 20px;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 区域阴影 */
}

#content-section h1 {
    color: #0277BD; /* 蓝色标题 */
    text-align: center;
    font-size: 2.2em;
    margin-bottom: 20px;
}

#content-section h2 {
    color: #FF9800; /* 橙色副标题 */
    font-size: 1.8em;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid #0277BD; /* 蓝色下划线 */
    padding-bottom: 5px;
}

#content-section h3 {
    color: #0288D1; /* 稍浅的蓝色H3标题 */
    font-size: 1.4em;
    margin-top: 20px;
    margin-bottom: 10px;
}

#content-section p {
    font-size: 1.1em; /* 内容文字大小 */
    margin-bottom: 15px;
    color: #424242; /* 深灰色文字 */
}

/* 为标题添加卡通图标 */
/* 通用图标样式 */
#content-section h1::before,
#content-section h2::before,
#content-section h3::before {
    content: ""; /* 伪元素内容，通过背景图显示图标 */
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    margin-right: 10px; /* 图标与文字间距 */
    /* vertical-align: middle; */ /* 垂直对齐，根据具体图标调整 */
}

/* H1 标题图标 - 橙色小鱼 */
#content-section h1::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 0 C10 0 22 0 22 10 S 10 20 10 20 S -2 10 10 0 Z" fill="%23FF9800"/><path d="M22 10 L32 5 L32 15 L22 10 Z" fill="%23FF9800"/><circle cx="15" cy="7" r="2" fill="white"/><circle cx="15.5" cy="7" r="1" fill="black"/></svg>');
    width: 30px; /* H1图标宽度 */
    height: 20px; /* H1图标高度 (根据鱼的宽高比) */
    vertical-align: -3px; /* 微调垂直对齐 */
}

/* H2 标题图标 - 蓝色星星 */
#content-section h2::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%230277BD" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>');
    width: 22px; /* H2图标宽度 */
    height: 22px; /* H2图标高度 */
    vertical-align: -2px; /* 微调垂直对齐 */
}

/* H3 标题图标 - 橙色星星 */
#content-section h3::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="%23FF9800" d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>');
    width: 18px; /* H3图标宽度 */
    height: 18px; /* H3图标高度 */
    vertical-align: -1px; /* 微调垂直对齐 */
}

#content-section ul {
    list-style-type: disc; /* 圆点列表 */
    margin-left: 20px;
    padding-left: 20px;
}

/* 游戏截图区域 */
.screenshots-gallery {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 响应式列 */
    gap: 15px; /* 图片间距 */
    margin-top: 15px;
}

.screenshots-gallery img {
    width: 100%;
    /* height: auto; */ /* 移除自动高度，改用 aspect-ratio */
    aspect-ratio: 16 / 9; /* 设置宽高比为16:9，可以根据实际图片调整 */
    object-fit: cover; /* 裁剪图片以适应容器，保持宽高比 */
    border-radius: 5px; /* 图片圆角 */
    border: 3px solid #FFB74D; /* 浅橙色边框 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 用户评论区域 */
.review {
    background-color: #FFF3E0; /* 浅橙色评论背景 */
    border-left: 5px solid #FF9800; /* 橙色左边框 */
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 0 5px 5px 0;
}

.review-text {
    font-style: italic;
    color: #5D4037; /* 棕色评论文字 */
    margin-bottom: 5px;
}

.reviewer {
    text-align: right;
    font-weight: bold;
    color: #FF9800; /* 橙色评论者名字 */
    font-size: 0.95em;
}

/* 页脚样式 */
footer {
    background-color: #01579B; /* 深蓝色页脚背景 */
    color: #B3E5FC; /* 浅蓝色页脚文字 */
    text-align: center;
    padding: 20px;
    margin-top: auto; /* 确保页脚在内容不足时依然置底 */
    font-size: 0.9em;
}

footer p {
    margin: 5px 0;
}

footer a {
    color: #FFFFFF; /* 白色链接文字 */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
    /* 移动设备上的头部调整 */
    header {
        flex-direction: column;
        padding: 15px;
    }

    .logo {
        margin-bottom: 10px;
        font-size: 2em;
    }

    /* 更新移动端语言切换器样式 */
    .language-switcher select {
        margin: 10px 0 0 0; /* 调整下拉菜单与Logo的间距 */
        width: auto; /* 或者设置为一个合适的宽度，如 100% */
        font-size: 0.9em; /* 调整字体大小 */
        padding: 8px 10px;
        padding-right: 28px; /* 调整箭头空间 */
    }

    /* 移动设备上的主要内容调整 */
    main {
        padding: 10px;
    }

    #game-section,
    #content-section {
        padding: 15px;
    }

    #iframe-container {
        border-width: 3px;
    }

    #fullscreen-button {
        padding: 10px 20px;
        font-size: 1em;
    }

    #content-section h1 {
        font-size: 1.8em;
    }

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

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

    #content-section p {
        font-size: 1em;
    }

    .screenshots-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 移动端更小的图片 */
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.8em;
    }
    .language-switcher {
        display: flex;
        flex-wrap: wrap; /* 允许按钮换行 */
        justify-content: center;
    }
    /* 移除针对旧按钮的样式 */
    /* .language-switcher button {
        margin: 5px 3px; 
        padding: 6px 10px;
    } */
     #iframe-container {
        /* 在非常小的屏幕上，可以考虑进一步减小高度或调整比例 */
        min-height: 200px; /* 保证一个最小高度 */
    }
}

/* TODO: @font-face rule for SF Cartoonist Hand if self-hosting */
/* Example for Google Fonts (replace with actual font if different):
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
body {
    font-family: 'Luckiest Guy', cursive;
}
.logo {
    font-family: 'Luckiest Guy', cursive; 
}
*/