/* --- 全局重置与基础设定 --- */
*,
*::before,
*::after {
    margin: 0; /* 清除外边距 */
    padding: 0; /* 清除内边距 */
    box-sizing: border-box; /* 设置盒模型为 border-box */
}

/* --- 根元素与字体设定 --- */
html {
    font-size: 16px; /* 设置根字体大小，便于 rem 单位计算 */
    scroll-behavior: smooth; /* 平滑滚动效果 */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置默认字体栈 */
    line-height: 1.6; /* 设置行高 */
    color: #333; /* 设置默认文字颜色 */
    background-color: #e8f5e9; /* 设置浅绿色背景，模拟高尔夫草地感觉 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中页面容器 */
    padding: 1rem 0; /* 上下留出一些间距 */
}

/* --- 页面整体容器 --- */
.page-container {
    width: 100%; /* 宽度占满父元素 */
    max-width: 1200px; /* 设置最大宽度 */
    background-color: #ffffff; /* 内容区域使用白色背景 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
    border-radius: 8px; /* 添加圆角 */
    overflow: hidden; /* 防止内容溢出圆角 */
}

/* --- 页眉样式 --- */
.site-header {
    display: flex; /* 使用 flex 布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
    padding: 1rem 2rem; /* 内边距 */
    background-color: #1b5e20; /* 深绿色背景 */
    color: #ffffff; /* 白色文字 */
}

/* --- Logo 样式 (添加 3D 闪光效果) --- */
h1.logo {
    font-size: 1.8rem; /* 字体大小 */
    font-weight: bold; /* 字体加粗 */
    color: #fff; /* 白色基础文字 */
    text-shadow: /* 创建多层阴影实现 3D 效果 */
        0px 1px 0px #ccc, /* 浅灰高光 */
        0px 2px 0px #bbb, /* 稍深 */
        0px 3px 0px #aaa, /* 再深 */
        0px 4px 1px rgba(0,0,0,0.1), /* 黑色细微投影 */
        0px 0px 5px rgba(0,0,0,0.1), /* 模糊投影 */
        0px 1px 3px rgba(0,0,0,0.3), /* 主投影 */
        0px 3px 5px rgba(0,0,0,0.2),
        0px 5px 10px rgba(0,0,0,0.25),
        0px 10px 10px rgba(0,0,0,0.2),
        0px 20px 20px rgba(0,0,0,0.15);
    /* 添加动画实现闪光 */
    position: relative; /* 使得伪元素可以相对定位 */
    /* 之前的简单阴影已被覆盖 */
    /* 让 Logo 占据必要的空间 */
    display: inline-block;
    cursor: default; /* 默认光标，表明不可交互 */
}

/* 创建一个伪元素用于闪光动画 */
h1.logo::after {
    /* 使用 data 属性获取当前语言的 logo 文本, JS 需要更新这个属性 */
    /* content: attr(data-current-logo-text); */
    /* 暂时硬编码英文，JS 部分需要配合更新 */
    content: "Welcome to Play Minigolf Clash";
    position: absolute; /* 绝对定位，覆盖在原文本上 */
    left: 0;
    top: 0;
    width: 100%; /* 确保伪元素宽度与父元素一致 */
    height: 100%; /* 确保伪元素高度与父元素一致 */
    color: transparent; /* 文字透明 */
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,0) 100%); /* 调整渐变光束效果 */
    background-size: 200% 100%; /* 渐变背景宽度为 200% */
    background-clip: text; /* 将背景裁剪为文字形状 */
    -webkit-background-clip: text; /* 兼容 Webkit */
    animation: shine 5s infinite linear; /* 应用闪光动画 */
    pointer-events: none; /* 伪元素不捕获鼠标事件 */
    /* 确保伪元素的字体样式与 H1 一致 */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* 定义闪光动画 */
@keyframes shine {
    0% { background-position: 150% 0; } /* 调整起始位置 */
    100% { background-position: -150% 0; } /* 调整结束位置 */
}

/* --- 语言切换器基础样式 --- */
.language-switcher ul {
    list-style: none; /* 去掉列表标记 */
    display: flex; /* 使用 flex 布局 */
    gap: 0.5rem; /* 选项间距 */
}

.language-switcher button {
    background: none; /* 去掉背景 */
    border: 1px solid #ffffff; /* 白色边框 */
    color: #ffffff; /* 白色文字 */
    padding: 0.3rem 0.6rem; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
}

.language-switcher button:hover,
.language-switcher button.active /* 当前激活语言的样式 */
{
    background-color: #ffffff; /* 白色背景 */
    color: #1b5e20; /* 深绿色文字 */
}

/* --- 主要内容区域 --- */
.main-content {
    padding: 2rem; /* 内边距 */
}

/* --- 游戏 Iframe 区域 --- */
#game-section {
    margin-bottom: 2rem; /* 与下方内容区域的间距 */
    text-align: center; /* 按钮居中 */
}

#iframe-container {
    width: 100%; /* 容器宽度 */
    aspect-ratio: 16 / 9; /* 使用宽高比 16:9 来自动计算高度 */
    /* height: 600px; /* 移除固定高度 */
    margin-bottom: 1rem; /* 与按钮的间距 */
    border: 1px solid #ccc; /* 添加边框 */
    overflow: hidden; /* 确保 iframe 不超出 */
    position: relative; /* 用于全屏 */
    background-color: #000; /* 添加黑色背景，防止比例调整时闪烁白底 */
}

#game-iframe {
    display: block; /* 消除 iframe 底部空隙 */
    width: 100%;
    height: 100%; /* 高度撑满父容器 (父容器高度由 aspect-ratio 决定) */
    border: none; /* 移除可能的默认边框 */
}

/* 添加 iframe 容器在全屏状态下的样式 */
#iframe-container:fullscreen {
    /* 全屏时通常由浏览器处理，但可以覆盖 */
    max-width: none; /* 取消最大宽度限制 */
    margin: 0; /* 移除外边距 */
    border: none; /* 移除边框 */
    /* aspect-ratio 属性在全屏时可能不再需要或表现不同，浏览器会填充屏幕 */
    aspect-ratio: auto; /* 重置宽高比 */
}

/* 确保 iframe 在容器全屏时也撑满 */
#iframe-container:fullscreen #game-iframe {
     width: 100%;
     height: 100%;
}

#fullscreen-button {
    padding: 0.8rem 1.5rem; /* 内边距 */
    font-size: 1rem; /* 字体大小 */
    background-color: #4caf50; /* 按钮绿色背景 */
    color: white; /* 白色文字 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标指针 */
    transition: background-color 0.3s; /* 过渡效果 */
}

#fullscreen-button:hover {
    background-color: #388e3c; /* 鼠标悬停时深一点的绿色 */
}

/* --- SEO 内容区域基础样式 --- */
#content-section section,
#content-section article {
    margin-bottom: 2rem; /* 各内容块之间的下边距 */
}

h2[id] /* 为带 ID 的 H2 标题添加上边距，便于锚点跳转 */
{
    padding-top: 1rem;
    margin-top: -1rem; /* 抵消内边距影响布局 */
}

h2 {
    font-size: 1.6rem; /* H2 标题字体大小 */
    color: #1b5e20; /* 深绿色标题 */
    margin-bottom: 1rem; /* 标题下边距 */
    border-bottom: 2px solid #a5d6a7; /* 浅绿色下划线 */
    padding-bottom: 0.5rem; /* 下划线与文字间距 */
}

h3 {
    font-size: 1.3rem; /* H3 标题字体大小 */
    color: #2e7d32; /* 中等绿色标题 */
    margin-bottom: 0.8rem; /* 标题下边距 */
}

p {
    margin-bottom: 1rem; /* 段落下边距 */
    color: #555; /* 深灰色段落文字 */
}

/* --- 截图占位符样式 --- */
.screenshot-gallery {
    display: grid; /* 使用 Grid 布局 */
    /* grid-template-columns: repeat(auto-fit, minmax(180px, 250px)); */ /* 旧样式 */
    grid-template-columns: repeat(3, 1fr); /* 固定为 3 列，每列等宽 */
    gap: 1rem; /* 网格间距 */
    /* justify-content: center; */ /* 不再需要 */
}

/* --- 添加截图图片样式 --- */
.screenshot-gallery img {
    display: block; /* 确保图片是块级元素，避免下方空隙 */
    width: 100%; /* 图片宽度撑满容器 (其所在的 grid cell) */
    height: auto; /* 高度自动，保持图片比例 */
    border-radius: 6px; /* 添加圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15); /* 添加细微阴影 */
    border: 1px solid #eee; /* 添加一个浅色边框 */
    object-fit: cover; /* 保持比例填充，可能裁剪 */
}

/* --- 页脚样式 --- */
.site-footer {
    padding: 1.5rem 2rem; /* 内边距 */
    background-color: #f1f8e9; /* 非常浅的绿色背景 */
    border-top: 1px solid #dcedc8; /* 顶部边框线 */
    text-align: center; /* 文字居中 */
    font-size: 0.9rem; /* 稍小字体 */
    color: #555; /* 深灰色文字 */
}

.footer-content p {
    margin-bottom: 0.5rem; /* 段落下边距 */
}

.site-footer a {
    color: #388e3c; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}

.site-footer a:hover {
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/* --- 辅助类 --- */
.visually-hidden {
    position: absolute !important; /* 绝对定位 */
    height: 1px; width: 1px; /* 宽高为1像素 */
    overflow: hidden; /* 超出隐藏 */
    clip: rect(1px, 1px, 1px, 1px); /* 裁剪 */
    white-space: nowrap; /* 防止文本换行 */
}

/* --- 响应式设计 (初步占位) --- */
@media (max-width: 768px) {
    .site-header {
        flex-direction: column; /* 在小屏幕上垂直排列 */
        gap: 1rem; /* 元素间距 */
    }

    h1.logo {
        font-size: 1.5rem; /* 调整 Logo 大小 */
    }

    .language-switcher ul {
        justify-content: center; /* 居中语言按钮 */
        flex-wrap: wrap; /* 允许换行 */
    }

    .main-content,
    .site-header,
    .site-footer {
        padding-left: 1rem; /* 调整小屏幕内边距 */
        padding-right: 1rem;
    }
}