/* Custom CSS for Fort Drifter Website */

/* 定义基本样式和字体 */
body {
    /* 设置一个清晰易读的基础字体，优先使用系统UI字体 */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* 设置基础文字颜色，深灰色，避免纯黑 */
    color: #333;
    /* 设置基础背景颜色 */
    background-color: #f0f8ff; /* 淡蓝色背景，可以根据"五彩绚丽"调整 */
}

/* 尝试实现 3D 闪光 Logo 效果 */
.logo-3d {
    /* 设置字体大小 */
    font-size: 2rem; /* 32px */
    /* 设置字体粗细 */
    font-weight: bold;
    /* 设置基础文字颜色 */
    color: #ffffff;
    /* 设置文字描边增加对比度 */
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
    /* 创建多层阴影模拟 3D 效果 */
    text-shadow:
        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 0px 10px rgba(255, 255, 255, 0.5),
        0px 0px 20px rgba(255, 255, 255, 0.3);
    /* 添加渐变背景模拟金属光泽 */
    background: linear-gradient(145deg, #4a90e2, #63a3ff);
    /* 将背景裁剪到文字形状 */
    -webkit-background-clip: text;
    background-clip: text;
    /* 使文字颜色透明，显示背景渐变 */
    color: transparent;
    /* 添加轻微旋转增加立体感 */
    transform: rotateX(5deg) rotateY(-3deg);
    /* 平滑过渡效果 */
    transition: all 0.3s ease;
}

/* 鼠标悬停时增强 Logo 效果 */
.logo-3d:hover {
    /* 增强阴影和光泽 */
    text-shadow:
        0px 1px 0px #ddd,
        0px 2px 0px #ccc,
        0px 3px 0px #bbb,
        0px 4px 1px rgba(0, 0, 0, 0.15),
        0px 0px 7px rgba(0, 0, 0, 0.15),
        0px 1px 4px rgba(0, 0, 0, 0.35),
        0px 3px 6px rgba(0, 0, 0, 0.25),
        0px 5px 12px rgba(0, 0, 0, 0.3),
        0px 0px 15px rgba(255, 255, 255, 0.7),
        0px 0px 25px rgba(255, 255, 255, 0.5);
    /* 轻微移动 */
    transform: rotateX(0deg) rotateY(0deg) scale(1.05);
}

/* 五彩绚丽背景 (示例: 渐变背景) */
.colorful-background {
    /* 定义一个从左上到右下的彩色渐变 */
    background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #9b59b6, #ff9ff3);
    /* 设置背景大小，使其覆盖整个元素 */
    background-size: 400% 400%;
    /* 添加动画效果，让背景动起来 */
    animation: gradientBG 15s ease infinite;
}

/* 定义背景渐变动画 */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 游戏 iframe 容器样式 */
#game-container {
    /* 相对定位，用于放置全屏按钮 */
    position: relative;
    /* 宽度 100% */
    width: 100%;
    /* 高度，例如视口高度的 80%，可以调整 */
    height: 80vh;
    /* 移除可能的默认内边距或外边距 */
    padding: 0;
    margin: 0;
    overflow: hidden; /* 隐藏可能溢出的内容 */
}

/* 游戏 iframe 样式 */
#game-iframe {
    /* 绝对定位，充满容器 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* 移除边框 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    /* 绝对定位，放在容器右上角 */
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10; /*确保在 iframe 之上*/
}

/* 为激活的语言按钮添加样式 */
.lang-button.active-lang {
    /* 移除透明度 */
    opacity: 1;
    /* 可以添加下划线或不同背景色表示激活 */
    text-decoration: underline;
    font-weight: bold;
    background-color: #e0e0e0; /* 示例：浅灰色背景 */
}

/* 内容区域样式，确保有边距 */
.content-section {
    padding: 2rem 1rem; /* 上下内边距，左右内边距 */
    max-width: 1200px; /* 限制最大宽度，使其在宽屏上易读 */
    margin-left: auto;
    margin-right: auto;
}

/* 截图模块容器 (示例: 使用 Flexbox) */
.screenshots-container {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 1rem; /* 图片之间的间距 */
    justify-content: center; /* 居中显示 */
}

/* 截图图片样式 */
.screenshot-image {
    max-width: 100%; /* 响应式 */
    height: auto;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微阴影 */
    flex-basis: calc(33.333% - 1rem); /* 尝试每行显示3个，减去间距 */
    min-width: 250px; /* 最小宽度 */
}

/* 评论卡片样式 */
.review-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .logo-3d {
        font-size: 1.5rem; /* 移动端缩小 Logo */
    }
    #game-container {
        height: 60vh; /* 移动端减小 iframe 高度 */
    }
    .content-section {
        padding: 1.5rem 0.5rem;
    }
     .screenshot-image {
        flex-basis: calc(50% - 1rem); /* 平板/小屏幕每行显示2个 */
    }
}

@media (max-width: 480px) {
     .screenshot-image {
        flex-basis: 100%; /* 手机屏幕每行显示1个 */
    }
}