/* CSS styles for Fortzone Battle Royale Website */
/* css/style.css */

/* --- 基本重置和全局样式 --- */
/* --- 基本重置和全局样式 (Basic Resets and Global Styles) --- */
body, h1, h2, h3, h4, p, ul, ol, li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
  padding: 0;
  /* 主体文字使用 'Roboto' 字体 */
  font-family: 'Roboto', sans-serif; /* 主体文字字体 (Body text font) */
  line-height: 1.6; /* 行高 (Line height) */
  color: #333; /* 默认文字颜色 (Default text color) */
}

body {
  background-color: #f0f8ff; /* 淡蓝色背景 (Light blue background) - AliceBlue */
}

/* --- 链接样式 --- */
/* --- 链接样式 (Link Styles) --- */
a {
  color: #007bff; /* 链接颜色 - 亮蓝色 (Link color - Bright Blue) */
  text-decoration: none; /* 去除下划线 (Remove underline) */
}

a:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 (Underline on hover) */
}

/* --- 容器和主要布局 --- */
/* --- 容器和主要布局 (Containers and Main Layout) --- */
header, main, footer {
  width: 90%; /* 主要内容区域宽度 (Width of main content area) */
  max-width: 1200px; /* 最大宽度 (Maximum width) */
  margin: 0 auto; /* 居中显示 (Center align) */
  padding: 20px 0; /* 上下内边距 (Top and bottom padding) */
}

section {
  margin-bottom: 30px; /* 区块底部外边距 (Bottom margin for sections) */
  padding: 20px;
  background-color: #ffffff; /* 区块背景色 - 白色 (Section background color - White) */
  border-radius: 8px; /* 圆角边框 (Rounded borders) */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 轻微阴影效果 (Slight shadow effect) */
}

/* --- 头部样式 --- */
/* --- 头部样式 (Header Styles) --- */
header {
  display: flex; /* 使用 Flexbox 布局 (Use Flexbox layout) */
  justify-content: space-between; /* 两端对齐 (Space between items) */
  align-items: center; /* 垂直居中 (Vertically align items) */
  padding-bottom: 10px;
  border-bottom: 3px solid #ffa500; /* 橙色底部边框 (Orange bottom border) */
}

.logo {
  font-family: 'Lilita One', cursive; /* Logo 使用 'Lilita One' 卡通字体 (Logo uses 'Lilita One' cartoon font) */
  font-size: 2.5em; /* Logo 字体大小 (Logo font size) */
  color: #0056b3; /* Logo 颜色 - 深蓝色 (Logo color - Dark Blue) */
}

/* --- 语言切换器样式 --- */
/* --- 语言切换器样式 (Language Switcher Styles) --- */
.language-switcher {
  /* 容器样式可以保持或调整 */
  /* Container styles can be kept or adjusted */
  position: relative; /* 用于可能的自定义下拉箭头定位 (For potential custom dropdown arrow positioning) */
}

#language-select {
  background-color: #007bff; /* 下拉菜单背景色 - 亮蓝色 (Dropdown background color - Bright Blue) */
  color: white; /* 文字颜色 - 白色 (Text color - White) */
  border: none; /* 无边框 (No border) */
  padding: 8px 12px; /* 内边距 (Padding) */
  border-radius: 5px; /* 圆角 (Rounded corners) */
  font-family: 'Roboto', sans-serif; /* 字体 (Font) */
  font-size: 1em; /* 字体大小 (Font size) */
  cursor: pointer; /* 鼠标指针样式 (Cursor style) */
  -webkit-appearance: none; /* 移除默认外观 (Safari/Chrome) (Remove default appearance) */
  -moz-appearance: none; /* 移除默认外观 (Firefox) (Remove default appearance) */
  appearance: none; /* 移除默认外观 (Standard) (Remove default appearance) */
  /* 为自定义箭头预留空间 (Reserve space for custom arrow if added) */
  /* padding-right: 30px; */ 
}

/* 为下拉菜单的选项设置样式 (Styling for options within the dropdown) */
#language-select option {
  background-color: white; /* 选项背景色 - 白色 (Option background color - White) */
  color: #333; /* 选项文字颜色 - 深灰色 (Option text color - Dark Gray) */
  font-family: 'Roboto', sans-serif; /* 字体 (Font) */
}

/* --- 游戏区域样式 --- */
/* --- 游戏区域样式 (Game Section Styles) --- */
#game-section {
  text-align: center; /* 内容居中 (Center content) */
}

.iframe-container {
  width: 100%; /* 宽度占满父容器 (Full width of parent) */
  /* 高度可以根据需要调整，或者通过JS动态设置以保持宽高比 */
  /* Height can be adjusted as needed, or set dynamically via JS to maintain aspect ratio */
  height: 70vh; /* 视口高度的70% (70% of viewport height) */
  max-height: 600px; /* 最大高度 (Maximum height) */
  margin-bottom: 15px; /* 底部外边距 (Bottom margin) */
  border: 5px solid #0056b3; /* 边框 - 深蓝色 (Border - Dark Blue) */
  border-radius: 8px; /* 圆角 (Rounded corners) */
  overflow: hidden; /* 隐藏溢出内容 (Hide overflowing content) */
}

.iframe-container iframe {
  /* 确保 iframe 填满容器，已在HTML中设置 style，此处可作为备用 */
  /* Ensures iframe fills container, already set in HTML style, this is a fallback */
  display: block; /* 块级元素 (Block element) */
  width: 100%;
  height: 100%;
}

#fullscreen-button {
  background-color: #ffa500; /* 按钮背景色 - 橙色 (Button background color - Orange) */
  color: white; /* 文字颜色 - 白色 (Text color - White) */
  border: none; /* 无边框 (No border) */
  padding: 10px 20px; /* 内边距 (Padding) */
  font-size: 1.1em; /* 字体大小 (Font size) */
  cursor: pointer; /* 鼠标指针样式 (Cursor style) */
  border-radius: 5px; /* 圆角 (Rounded corners) */
  font-family: 'Lilita One', cursive; /* 卡通字体 (Cartoon font) */
}

#fullscreen-button:hover {
  background-color: #cc8400; /* 悬停背景色 - 深橙色 (Hover background color - Dark Orange) */
}

/* --- 内容区块标题样式 --- */
/* --- 内容区块标题样式 (Content Section Title Styles) --- */
h1, h2, h3, h4 {
  font-family: 'Lilita One', cursive; /* 标题使用 'Lilita One' 卡通字体 (Headings use 'Lilita One' cartoon font) */
  color: #0056b3; /* 标题颜色 - 深蓝色 (Heading color - Dark Blue) */
  margin-bottom: 15px; /* 标题下边距 (Bottom margin for headings) */
  display: flex; /* 使用 Flexbox 布局 (Use Flexbox layout) */
  align-items: center; /* 垂直居中对齐图标和文本 (Vertically center align icon and text) */
}

.heading-icon {
  margin-right: 10px; /* 图标和文本之间的右边距 (Right margin between icon and text) */
  font-size: 1em; /* 图标大小，使其与标题文本大小相对协调 (Icon size, relative to heading text size) */
  /* 根据需要调整特定标题的图标大小 (Adjust icon size for specific headings if needed) */
}

h1 .heading-icon {
  font-size: 0.8em; /* H1 图标的特定大小 (Specific size for H1 icon) */
}

h2 .heading-icon {
  font-size: 0.9em; /* H2 图标的特定大小 (Specific size for H2 icon) */
}

h1 {
  font-size: 2.2em; /* H1 字体大小 (H1 font size) */
  text-align: center; /* 文本居中 (Text align center) */
  margin-bottom: 20px; /* 下边距 (Bottom margin) */
}

h2 {
  font-size: 1.8em; /* H2 字体大小 (H2 font size) */
  border-bottom: 2px solid #ffa500; /* 橙色下划线 (Orange underline) */
  padding-bottom: 5px; /* 下划线与文字间距 (Space between underline and text) */
}

h3 {
  font-size: 1.5em; /* H3 字体大小 (H3 font size) */
  color: #e67e22; /* H3 颜色 - 橙色变体 (H3 color - Orange variant) */
}

h4 {
  font-size: 1.3em; /* H4 字体大小 (H4 font size) */
  color: #16a085; /* H4 颜色 - 蓝绿色 (H4 color - Teal/Blue-Green) */
}

/* --- 特定内容区域样式 --- */
/* --- 特定内容区域样式 (Specific Content Area Styles) --- */
#game-intro p,
#game-guide p,
#what-players-love p,
#why-players-love p {
  margin-bottom: 10px; /* 段落下边距 (Paragraph bottom margin) */
  font-size: 1.05em; /* 字体大小 (Font size) */
}

#game-features ul,
#how-to-play ol {
  list-style-position: inside; /* 列表标记位置 (List marker position) */
  padding-left: 20px; /* 左内边距 (Left padding) */
}

#game-features li,
#how-to-play li {
  margin-bottom: 8px; /* 列表项下边距 (List item bottom margin) */
}

/* --- 游戏截图区域 --- */
/* --- 游戏截图区域 (Game Screenshots Section) --- */
.screenshots-gallery {
  display: flex; /* 使用 Flexbox 布局 (Use Flexbox layout) */
  /* flex-wrap: wrap; */ /* 旧的换行设置 - 已被下面的 nowrap 取代 (Old wrap setting - replaced by nowrap below) */
  flex-wrap: nowrap; /* 修改：确保图片在同一行 (Modified: Ensures images stay on the same line) */
  overflow-x: auto; /* 新增：如果图片总宽度超出容器，则允许水平滚动 (Added: Allows horizontal scrolling if total image width exceeds container) */
  gap: 15px; /* 图片间距 (Gap between images) */
  /* justify-content: center; */ /* 旧的居中对齐 - 已被下面的 flex-start 取代 (Old center alignment - replaced by flex-start below) */
  justify-content: flex-start; /* 修改：图片从左侧开始排列 (Modified: Images align from the left) */
  padding-bottom: 10px; /* 新增：为水平滚动条增加一些底部空间 (Added: Adds some bottom space for the horizontal scrollbar) */
  background-color: #f8f9fa; /* 为截图区域添加一个轻微的背景色以区分 (Add a light background color to distinguish the screenshot area) */
}

.screenshots-gallery img {
  /* max-width: 100%; */ /* 旧的最大宽度限制 - 已移除以允许水平滚动 (Old max-width limit - removed to allow horizontal scrolling) */
  height: 200px; /* 修改：设置固定高度 (Modified: Set a fixed height) */
  width: auto; /* 新增：配合固定高度，保持图片宽高比 (Added: Complements fixed height to maintain aspect ratio) */
  border-radius: 5px; /* 圆角 (Rounded corners) */
  border: 3px solid #007bff; /* 蓝色边框 (Blue border) */
  object-fit: cover; /* 新增：确保图片填满指定高度且不变形，可能会裁剪 (Added: Ensures image fills specified height without distortion, may crop) */
  flex-shrink: 0; /* 新增：防止图片在flex容器中被压缩 (Added: Prevents images from shrinking in the flex container) */
}

/* --- 用户评论样式 --- */
/* --- 用户评论样式 (User Reviews Styles) --- */
.review {
  background-color: #e7f3fe; /* 评论区背景色 - 淡蓝色 (Review background color - Light Blue) */
  padding: 15px; /* 内边距 (Padding) */
  margin-bottom: 15px; /* 下边距 (Bottom margin) */
  border-left: 5px solid #ffa500; /* 左边框 - 橙色 (Left border - Orange) */
  border-radius: 0 5px 5px 0; /* 右侧圆角 (Rounded corners on the right) */
}

.review-text {
  font-style: italic; /* 斜体 (Italic) */
  margin-bottom: 5px; /* 下边距 (Bottom margin) */
}

.review-author {
  text-align: right; /* 文字右对齐 (Text align right) */
  font-weight: bold; /* 加粗 (Bold) */
  color: #0056b3; /* 作者颜色 - 深蓝色 (Author color - Dark Blue) */
}

/* --- 页脚样式 --- */
/* --- 页脚样式 (Footer Styles) --- */
footer {
  text-align: center; /* 文字居中 (Text align center) */
  padding-top: 20px;
  border-top: 3px solid #ffa500; /* 橙色上边框 (Orange top border) */
  font-size: 0.9em; /* 字体大小 (Font size) */
  color: #555; /* 文字颜色 (Text color) */
}

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

/* --- 响应式设计 --- */
/* --- 响应式设计 (Responsive Design) --- */
@media (max-width: 768px) {
  .logo {
    font-size: 2em; /* 较小屏幕上的 Logo 字体大小 (Logo font size on smaller screens) */
  }

  header {
    flex-direction: column; /* 头部元素垂直排列 (Header items stack vertically) */
    gap: 10px; /* 项目间距 (Gap between items) */
  }

  .language-switcher button {
    padding: 6px 10px; /* 按钮内边距 (Button padding) */
    font-size: 0.9em; /* 字体大小 (Font size) */
  }

  h1 {
    font-size: 1.8em; /* H1 字体大小 (H1 font size) */
  }

  h2 {
    font-size: 1.5em; /* H2 字体大小 (H2 font size) */
  }

  h3 {
    font-size: 1.3em; /* H3 字体大小 (H3 font size) */
  }
  
  .iframe-container {
    height: 50vh; /* 移动设备上iframe高度 (iframe height on mobile) */
  }
}

@media (max-width: 480px) {
  header, main, footer {
    width: 95%; /* 更小屏幕上的内容宽度 (Content width on smaller screens) */
  }

  .logo {
    font-size: 1.8em; /* Logo 进一步缩小 (Logo further reduced) */
  }

  .language-switcher {
    display: flex; /* 确保按钮在一行内 (Ensure buttons are in a row) */
    flex-wrap: wrap; /* 允许换行 (Allow wrapping) */
    justify-content: center; /* 居中对齐 (Center align) */
    gap: 5px;
  }

  .language-switcher button {
    font-size: 0.8em; /* 按钮字体更小 (Smaller button font) */
    padding: 5px 8px; /* 按钮内边距更小 (Smaller button padding) */
  }
  
  #fullscreen-button {
    font-size: 1em; /* 全屏按钮字体 (Fullscreen button font) */
    padding: 8px 15px; /* 全屏按钮内边距 (Fullscreen button padding) */
  }
}