/* 自定义 CSS 样式 */

/* 确保 body 和 html 占满视口高度，为背景做准备 */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    /* 设置一个清晰的基础字体，Tailwind 会继承 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 绚丽背景 - 示例：使用渐变 */
body {
    /* 你可以替换成更复杂的背景图片或动画 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /* 文字颜色默认为白色，在深色背景上更清晰 */
    color: #ffffff;
}

/* Logo 3D 闪光炫酷效果 - 基础示例 */
.logo-3d-flash {
    /* 字体加粗 */
    font-weight: bold;
    /* 较大的字号 */
    font-size: 2rem; /* 调整大小 */
    /* 基础文字颜色 */
    color: #fff;
    /* 文本阴影实现 3D 效果 */
    text-shadow:
        0 1px 0 #ccc,
        0 2px 0 #c9c9c9,
        0 3px 0 #bbb,
        0 4px 0 #b9b9b9,
        0 5px 0 #aaa,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
    /* 添加闪光动画 */
    animation: flash-animation 2s infinite linear;
}

/* 定义闪光动画 */
@keyframes flash-animation {
    0%, 100% {
        /* 恢复默认阴影，或添加轻微光晕 */
        text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #c9c9c9,
            0 3px 0 #bbb,
            0 4px 0 #b9b9b9,
            0 5px 0 #aaa,
            0 6px 1px rgba(0,0,0,.1),
            0 0 5px rgba(255,255,255,.2), /* 轻微光晕 */
            0 1px 3px rgba(0,0,0,.3),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 10px rgba(0,0,0,.25),
            0 10px 10px rgba(0,0,0,.2),
            0 20px 20px rgba(0,0,0,.15);
    }
    50% {
        /* 增强阴影和添加强烈光晕实现闪光效果 */
        text-shadow:
            0 1px 0 #ccc,
            0 2px 0 #c9c9c9,
            0 3px 0 #bbb,
            0 4px 0 #b9b9b9,
            0 5px 0 #aaa,
            0 6px 1px rgba(0,0,0,.1),
            0 0 20px rgba(255,255,255,1),  /* 强烈白色光晕 */
            0 1px 3px rgba(0,0,0,.3),
            0 3px 5px rgba(0,0,0,.2),
            0 5px 10px rgba(0,0,0,.25),
            0 10px 10px rgba(0,0,0,.2),
            0 20px 20px rgba(0,0,0,.15);
        /* 也可以同时改变文字颜色 */
        /* color: #ffff00; */
    }
}

/* Iframe 容器样式 */
#iframe-container {
    width: 100%;
    /* 你可以根据需要调整高度，或者让其内容决定高度 */
    /* 示例：设置一个固定的高宽比，常见于视频/游戏嵌入 */
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    background-color: #000; /* 全屏时的背景色 */
}

/* Iframe 本身样式 */
#iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* 覆盖默认的 iframe 边框 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    /* 样式可以根据喜好调整 */
    background-color: #4a5568; /* Tailwind gray-700 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin-top: 0.5rem;
    border: none;
    font-size: 0.875rem;
    transition: background-color 0.3s ease;
}

#fullscreen-button:hover {
    background-color: #2d3748; /* Tailwind gray-800 */
}

/* 内容区域样式 */
.content-section {
    /* 为每个内容部分添加一些上下边距 */
    padding-top: 2rem; /* Tailwind pt-8 */
    padding-bottom: 2rem; /* Tailwind pb-8 */
    /* 限制最大宽度并在中间显示，增加可读性 */
    max-width: 48rem; /* Tailwind max-w-3xl */
    margin-left: auto;
    margin-right: auto;
    /* 添加左右内边距，防止移动端内容贴边 */
    padding-left: 1rem; /* Tailwind px-4 */
    padding-right: 1rem;
}

/* 为标题添加下边距 */
.content-section h1,
.content-section h2,
.content-section h3 {
    margin-bottom: 1rem; /* Tailwind mb-4 */
}

/* 游戏截图容器样式 - 使用 Grid 布局 */
.screenshots-grid {
    display: grid;
    /* 在移动端显示一列，在中等屏幕显示三列 */
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 默认一列 */
    gap: 1rem; /* Tailwind gap-4 */
}

/* 中等屏幕及以上应用三列布局 */
@media (min-width: 768px) { /* Tailwind md breakpoint */
    .screenshots-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 截图图片样式 */
.screenshot-img {
    width: 100%;
    /* 设置一个固定的高度，例如 200px，你可以根据需要调整 */
    height: 200px; /* 新增：固定高度 */
    /* 保持图片比例，并裁剪多余部分以填充容器 */
    object-fit: cover; /* 新增：确保图片覆盖区域，保持比例 */
    /* (可选) 居中裁剪 */
    object-position: center; /* 新增：使裁剪居中 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-md */
}

/* 用户评论卡片样式 */
.review-card {
    background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
    border-radius: 0.5rem; /* Tailwind rounded-lg */
    padding: 1rem; /* Tailwind p-4 */
    margin-bottom: 1rem; /* Tailwind mb-4 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind shadow-sm */
}

/* 语言切换器样式 - 简单示例 */
#language-switcher button {
    background-color: transparent;
    color: white;
    border: 1px solid white;
    padding: 0.25rem 0.5rem;
    margin-left: 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

#language-switcher button:hover,
#language-switcher button.active {
    background-color: white;
    color: #764ba2; /* 背景色中的一种 */
}

/* 页脚样式 */
footer {
    margin-top: 2rem; /* Tailwind mt-8 */
    padding: 1rem; /* Tailwind p-4 */
    text-align: center;
    font-size: 0.875rem; /* Tailwind text-sm */
    color: rgba(255, 255, 255, 0.7); /* 半透明白色 */
}

footer a {
    color: rgba(255, 255, 255, 0.9); /* 链接颜色更亮一点 */
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}