/* 
  style.css
  Tralalero.org 网站样式文件
  设计风格: 专业深色SaaS风格 (Professional Dark SaaS)
*/

/* === 全局重置和基础设定 === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.7; /* 增加行高以适应深色背景 */
  background-color: #211E1C; /* 参考截图的深棕灰背景 */
  color: #EAEAEA; /* 默认文字颜色为米白 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === 页面整体布局 === */
.container {
  max-width: 800px; /* 恢复容器为标准宽度 */
  margin: 0 auto;
  padding: 40px 20px;
}

/* === 头部和导航栏 === */
header {
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 40px;
  text-align: center;
  border: none; /* 去掉原来的边框 */
}

/* 语言切换器样式 */
.language-switcher {
  position: absolute;
  top: 10px; /* 调整位置 */
  right: 0;
  font-size: 15px;
}

.language-switcher ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  align-items: center; /* 垂直居中图标和文字 */
}

.language-switcher a {
  text-decoration: none;
  color: #A1A1A6; /* 非激活语言的灰色 */
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
}

/* 鼠标悬停或当前激活的语言 */
.language-switcher a:hover,
.language-switcher a.active {
  color: #e5b842; /* 金色高亮 */
  text-decoration: none; /* 去掉下划线，更符合SaaS风格 */
}

header h1 {
  font-size: 56px; /* 增大标题字号 */
  font-weight: 700; /* 加粗 */
  margin-top: 40px; /* 为语言切换器留出空间 */
  margin-bottom: 20px;
  letter-spacing: -1px;
  color: #FFFFFF; /* 纯白主标题 */
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px; /* 增大导航间距 */
}

nav a {
  text-decoration: none;
  color: #A1A1A6; /* 导航链接颜色 */
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #FFFFFF; /* 悬停时变白 */
}

/* === 内容区域通用样式 === */
main section {
  background-color: #2a2826;
  border: 1px solid #3a3a3a;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 40px;
}

h2 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 25px;
  border-bottom: 1px solid #444; /* 深色分割线 */
  padding-bottom: 15px;
  color: #FFFFFF;
}

h3 {
  font-size: 24px;
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #e5b842; /* 标题使用金色高亮 */
}

p, li {
  font-size: 17px;
  margin-bottom: 15px;
  color: #A1A1A6; /* 段落文字颜色 */
}

a {
  color: #e5b842;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* === 特定元素的样式 === */

/* 内容警告横幅 */
.warning-banner {
  background-color: rgba(229, 184, 66, 0.1); /* 金色半透明背景 */
  border: 1px solid #e5b842;
  color: #e5b842;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
.warning-banner strong {
  color: #FFFFFF;
}

/* 代码/歌词块 */
blockquote {
  background-color: #211E1C; /* 与主背景色相同 */
  border-left: 4px solid #e5b842;
  margin: 20px 0;
  padding: 15px 20px;
  font-style: italic;
  color: #A1A1A6;
}

/* 表格样式 */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  text-align: left;
  padding: 14px;
  border-bottom: 1px solid #444;
}

th {
  font-weight: 600;
  color: #FFFFFF;
  background-color: #3a3a3a;
}

/* 角色卡片 */
.character-card {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 8px;
  background-color: #211E1C; /* 卡片内嵌项背景 */
}

.character-card img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

/* 新增：游戏容器包裹层 */
.game-wrapper {
  position: relative; /* 为放大按钮的绝对定位提供基准 */
  margin-bottom: 20px; /* 保持与原先embed-container的间距一致 */
}

/* 媒体嵌入 */
.embed-container {
  border-radius: 8px;
  border: 1px solid #444;
}

/* 新增：放大按钮样式 */
.fullscreen-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.7);
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 6px;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.fullscreen-btn:hover {
  background-color: #FFFFFF;
  color: #000000;
}

/* 媒体嵌入 (视频和游戏) 的通用容器 */
.embed-container {
  position: relative;
}

/* FAQ 区域 */
details {
  margin-bottom: 15px;
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
}

summary {
  font-weight: 600;
  cursor: pointer;
  outline: none;
  color: #EAEAEA;
}

summary:hover {
    color: #e5b842;
}

/* 脚注/页脚 */
footer {
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  font-size: 14px;
  color: #6e6e73;
}