/*
 * @fileoverview 自定义样式，用于补充 Tailwind CSS 并实现特定效果，如 Logo 动画和整体风格。
 */

/* 引入谷歌字体 'Press Start 2P' 用于 Logo 和标题，'Roboto' 用于正文 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap');

/* 基础样式设置 */
body {
    font-family: 'Roboto', sans-serif; /* 默认使用清晰的 Roboto 字体 */
    background-color: #1a1a2e; /* 深蓝色背景，模拟太空或弹球游戏背景 */
    color: #e0e0e0; /* 浅灰色文字，提高对比度 */
    line-height: 1.6; /* 设置合适的行高 */
}

/* 容器最大宽度限制 */
.container {
    max-width: 1200px; /* 限制内容最大宽度，提升大屏可读性 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Logo 3D 闪光炫酷风格 */
.logo {
    font-family: 'Press Start 2P', cursive; /* 使用像素风格字体 */
    font-size: 2rem; /* Logo 字体大小 */
    color: #f0f0f0; /* 基础颜色 */
    text-shadow:
        0 0 5px #fff,      /* 白色内发光 */
        0 0 10px #fff,     /* 增加内发光强度 */
        0 0 15px #00f,    /* 蓝色外发光 */
        0 0 20px #00f,    /* 增加蓝色外发光 */
        0 0 25px #00f,    /* 进一步增加蓝色外发光 */
        2px 2px 2px rgba(0,0,0,0.5); /* 轻微的 3D 阴影效果 */
    animation: flicker 2s infinite alternate; /* 应用闪烁动画 */
    cursor: default; /* 鼠标样式为默认 */
    /* 添加过渡效果，使字体大小变化更平滑 */
    transition: font-size 0.3s ease;
}

/* Logo 闪烁动画 */
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 4px #fff,
            0 0 8px #fff,
            0 0 12px #0077ff,
            0 0 16px #0077ff,
            0 0 20px #0077ff,
            2px 2px 2px rgba(0,0,0,0.4);
        opacity: 1;
    }
    20%, 24%, 55% {
        text-shadow: none;
        opacity: 0.8;
    }
}

/* 语言切换按钮样式 */
nav ul li button {
    background-color: #4a4a8a; /* 按钮背景色 */
    color: #f0f0f0; /* 文字颜色 */
    padding: 0.5rem 1rem; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    border: none; /* 无边框 */
    cursor: pointer; /* 鼠标手势 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 过渡效果 */
    font-weight: bold; /* 字体加粗 */
    margin-left: 0.5rem; /* 左外边距 */
    margin-top: 0.5rem; /* 顶部外边距，适应换行 */
}

/* 语言按钮悬停效果 */
nav ul li button:hover {
    background-color: #6a6aff; /* 悬停时背景色变亮 */
    transform: translateY(-2px); /* 轻微上移效果 */
}

/* 游戏 iframe 容器样式 */
#game-section {
    position: relative; /* 相对定位，用于放置全屏按钮 */
    background-color: #111; /* Iframe 周围的深色背景 */
    border-radius: 8px; /* 轻微圆角 */
    overflow: hidden; /* 隐藏溢出内容 */
    margin-bottom: 2rem; /* 与下方内容的间距 */
}

/* 游戏 iframe 样式 */
#game-iframe {
    display: block; /* 消除 iframe 底部空白 */
    width: 100%; /* 宽度 100% */
    height: 600px; /* 默认高度，可被媒体查询覆盖 */
    border: none; /* 移除边框 */
    border-radius: 8px; /* 继承容器圆角 */
}

/* 全屏按钮样式 */
#fullscreen-btn {
    position: absolute; /* 绝对定位，相对于 #game-section */
    bottom: 10px; /* 距离底部 10px */
    right: 10px; /* 距离右侧 10px */
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色背景 */
    color: #fff; /* 白色文字 */
    border: none; /* 无边框 */
    padding: 8px 12px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    cursor: pointer; /* 鼠标手势 */
    font-size: 0.9rem; /* 字体大小 */
    z-index: 10; /* 确保在 iframe 之上 */
    transition: background-color 0.3s ease; /* 过渡效果 */
}

/* 全屏按钮悬停效果 */
#fullscreen-btn:hover {
    background-color: rgba(0, 0, 0, 0.8); /* 悬停时背景变深 */
}

/* 内容区域 Section 样式 */
.content-section {
    background-color: #2a2a4e; /* 稍浅一点的背景色，区分区域 */
    padding: 1.5rem; /* 内边距 */
    margin-bottom: 1.5rem; /* 区域间距 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影增加层次感 */
}

/* 主要标题 (h2) 样式 */
h2[data-lang-key$="_title"] {
    font-family: 'Press Start 2P', cursive; /* 像素字体 */
    color: #ffa500; /* 橙色，醒目 */
    font-size: 1.8rem; /* 字体大小 */
    margin-bottom: 1rem; /* 与下方内容间距 */
    border-bottom: 2px solid #ffa500; /* 底部边框 */
    padding-bottom: 0.5rem; /* 边框与文字间距 */
    text-transform: uppercase; /* 字母大写 */
}

/* 次要标题 (h3) 样式 */
h3 {
    font-family: 'Press Start 2P', cursive; /* 像素字体 */
    color: #9acd32; /* 黄绿色 */
    font-size: 1.3rem; /* 字体大小 */
    margin-top: 1.5rem; /* 与上方内容间距 */
    margin-bottom: 0.8rem; /* 与下方内容间距 */
}

/* 段落和列表样式 */
p,
ul,
ol {
    margin-bottom: 1rem; /* 段落下边距 */
}

ul,
ol {
    padding-left: 1.5rem; /* 列表左内边距 */
}

li {
    margin-bottom: 0.5rem; /* 列表项下边距 */
}

/* 游戏截图模块样式 */
.screenshots-grid {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 响应式列布局 */
    gap: 1rem; /* 网格间距 */
}

.screenshot-item img {
    width: 100%; /* 图片宽度 100% */
    height: 200px; /* !! 添加固定高度，例如 200px，可以调整这个值 !! */
    object-fit: cover; /* !! 让图片覆盖容器，保持宽高比，可能裁剪 !! */
    border-radius: 6px; /* 图片圆角 */
    border: 2px solid #4a4a8a; /* 图片边框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* 图片阴影 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 过渡效果 */
    display: block; /* 确保图片是块级元素，有时有助于消除意外间距 */
}

.screenshot-item img:hover {
    transform: scale(1.05); /* 悬停时放大 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 悬停时阴影加深 */
}

/* 玩家评论/推荐模块样式 */
.review {
    background-color: #1e1e3e; /* 更深的背景色 */
    padding: 1rem; /* 内边距 */
    margin-bottom: 1rem; /* 间距 */
    border-left: 4px solid #6a6aff; /* 左侧边框突出 */
    border-radius: 4px; /* 圆角 */
}

.review p {
    font-style: italic; /* 斜体 */
    margin-bottom: 0.5rem; /* 文本间距 */
}

.review span {
    display: block; /* 块级显示 */
    text-align: right; /* 右对齐 */
    font-weight: bold; /* 加粗 */
    color: #aaa; /* 稍暗的颜色 */
    font-size: 0.9rem; /* 稍小字体 */
}

/* 页脚样式 */
footer {
    text-align: center; /* 文本居中 */
    margin-top: 3rem; /* 与上方内容间距 */
    padding: 1.5rem 0; /* 上下内边距 */
    font-size: 0.9rem; /* 字体大小 */
    color: #aaa; /* 文字颜色 */
    border-top: 1px solid #4a4a8a; /* 顶部边框分隔 */
}

footer a {
    color: #9ec3ff; /* 链接颜色 */
    text-decoration: none; /* 去除下划线 */
    transition: color 0.3s ease; /* 过渡效果 */
}

footer a:hover {
    color: #fff; /* 悬停时颜色变白 */
    text-decoration: underline; /* 添加下划线 */
}

/* 确保页脚中的段落有合适的间距 */
footer p {
    margin-bottom: 0.5rem;
}

/* 响应式设计：在中等屏幕及以上调整 iframe 高度 */
@media (min-width: 768px) {
    #game-iframe {
        height: 700px; /* 在中等屏幕上增加高度 */
    }
}

/* 响应式设计：在小屏幕上调整 Logo 字体大小 */
@media (max-width: 640px) {
    .logo {
        font-size: 1.5rem; /* 在小屏幕上减小 Logo 字体 */
    }
     /* 在小屏幕上将语言切换按钮纵向排列 */
    header .container nav ul {
        /* 如果需要纵向排列，可以取消下面的注释 */
        /* flex-direction: column;
        align-items: flex-end;
        space-x-0;
        space-y-1; */
        /* 保持横向，但允许换行 */
        flex-wrap: wrap;
        justify-content: flex-end; /* 让按钮靠右 */
    }
    header .container nav ul li {
         margin-top: 4px; /* 给换行的按钮一点间距 */
    }
     /* 在小屏幕上调整主内容内边距 */
    main.container {
        padding: 1rem; /* 减小小屏幕上的内边距 */
    }
    /* 在小屏幕上减小标题字体 */
    h2[data-lang-key$="_title"] {
        font-size: 1.75rem;
    }
    h3 {
       font-size: 1.25rem;
    }
}

/* 全屏模式下的样式 */
/* 使用 :fullscreen 伪类为标准浏览器添加样式 */
#game-section:fullscreen {
    width: 100vw; /* 视口宽度 */
    height: 100vh; /* 视口高度 */
    padding: 0;   /* 移除内边距 */
    margin: 0;    /* 移除外边距 */
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center;   /* 垂直居中 */
    background-color: #000; /* 全屏背景设为黑色 */
}

/* 针对 Webkit 浏览器 (Chrome, Safari) */
#game-section:-webkit-full-screen {
     width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
     background-color: #000;
}

/* 针对 Firefox 浏览器 */
#game-section:-moz-full-screen {
     width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
     background-color: #000;
}

/* 针对 IE/Edge 浏览器 */
#game-section:-ms-fullscreen {
     width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
     background-color: #000;
}

/* 在全屏模式下，让 iframe 填满 #game-section */
#game-section:fullscreen #game-iframe,
#game-section:-webkit-full-screen #game-iframe,
#game-section:-moz-full-screen #game-iframe,
#game-section:-ms-fullscreen #game-iframe {
    width: 100%;
    height: 100%;
    max-width: 100vw; /* 确保不超过视口宽度 */
    max-height: 100vh;/* 确保不超过视口高度 */
    border: none; /* 全屏时移除边框 */
    border-radius: 0; /* 全屏时移除圆角 */
}

/* 在全屏模式下隐藏全屏按钮 (虽然 JS 也隐藏了，CSS 可作为备用) */
#game-section:fullscreen #fullscreen-btn,
#game-section:-webkit-full-screen #fullscreen-btn,
#game-section:-moz-full-screen #fullscreen-btn,
#game-section:-ms-fullscreen #fullscreen-btn {
    display: none;
}