/* styles.css - 自定义样式 for Alien Sky Invasion */

/* 基础 Body 样式 (Tailwind 已处理大部分，这里可以补充) */
body {
    /* 设置背景 - 可以使用渐变或图片 */
    /* background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); */
    /* background-image: url('images/space_background.jpg'); */
    /* background-size: cover; */
    /* background-attachment: fixed; */
}

/* 3D 闪光 Logo 效果 */
.logo-3d {
    /* 基础文字颜色 */
    color: #e0e0e0; 
    /* 设置文字阴影产生 3D 效果 */
    /* 参数: x偏移 y偏移 模糊半径 颜色 */
    text-shadow: 
        0px 1px 0px #c0c0c0, /* 浅灰顶部细线 */
        0px 2px 0px #b0b0b0, 
        0px 3px 0px #a0a0a0,
        0px 4px 0px #909090, /* 深灰模拟厚度 */
        0px 5px 10px rgba(0, 0, 0, 0.6), /* 底部模糊阴影 */
        /* 闪光层 - 通过动画改变 */
        0 0 5px #fff, 
        0 0 10px #fff, 
        0 0 15px #fff, 
        0 0 20px #8a2be2, /* 紫色闪光 */
        0 0 30px #8a2be2, 
        0 0 40px #8a2be2, 
        0 0 55px #8a2be2, 
        0 0 75px #8a2be2;
    /* 应用动画 */
    animation: flicker-glow 3s infinite alternate;
}

/* 定义闪烁发光动画 */
@keyframes flicker-glow {
    0%, 100% {
        /* 动画起始和结束状态 - 基础 3D + 较弱光晕 */
        text-shadow:
            0px 1px 0px #c0c0c0,
            0px 2px 0px #b0b0b0,
            0px 3px 0px #a0a0a0,
            0px 4px 0px #909090,
            0px 5px 10px rgba(0, 0, 0, 0.6),
            0 0 5px #fff, 
            0 0 8px #fff, 
            0 0 10px #fff, 
            0 0 15px #9370db, /* 较弱紫色 */
            0 0 20px #9370db, 
            0 0 25px #9370db, 
            0 0 30px #9370db, 
            0 0 40px #9370db;
    }
    50% {
        /* 动画中间状态 - 基础 3D + 强烈光晕 */
         text-shadow:
            0px 1px 0px #c0c0c0,
            0px 2px 0px #b0b0b0,
            0px 3px 0px #a0a0a0,
            0px 4px 0px #909090,
            0px 5px 10px rgba(0, 0, 0, 0.6),
            0 0 5px #fff, 
            0 0 10px #fff, 
            0 0 15px #fff, 
            0 0 20px #8a2be2, /* 强紫色 */
            0 0 35px #8a2be2, 
            0 0 45px #8a2be2, 
            0 0 60px #8a2be2, 
            0 0 80px #8a2be2;
    }
}

/* 游戏 Iframe 容器样式 (如果需要特定调整) */
#game-section {
    /* 可以添加边框或背景等 */
    /* border: 1px solid #4a4a4a; */
}

/* 内容区域的文本样式增强 (使用 Tailwind 的 prose 类进行基础排版) */
.prose {
    /* 你可以在这里覆盖或添加 prose 插件不支持的样式 */
}

.prose h2, .prose h3 {
    /* 可以为标题添加下划线或特殊效果 */
    /* border-bottom: 1px solid #4a0e99; */
}

/* 语言切换按钮样式 */
.lang-btn {
    transition: background-color 0.3s ease;
}

/* 全屏按钮样式 */
#fullscreen-btn {
     transition: background-color 0.3s ease;
}

/* 响应式调整 (如果 Tailwind 不够用) */
/* @media (max-width: 768px) { */
    /* 针对中等屏幕的调整 */
    /* .logo-3d { font-size: 1.5rem; } */
/* } */

/* @media (max-width: 480px) { */
    /* 针对小屏幕的调整 */
    /* header { flex-direction: column; align-items: center; } */
    /* #language-switcher { margin-top: 1rem; } */
/* } */