/* --- 全局样式 --- */
body {
    font-family: Arial, sans-serif; /* 设置页面默认字体 */
    margin: 0; /* 移除浏览器默认的外边距 */
    padding: 0; /* 移除浏览器默认的内边距 */
    position: relative; /* 用于子元素的绝对/固定定位参考 */
    overflow-x: hidden; /* 防止星空等背景动画导致水平滚动条 */
    min-height: 100vh; /* 确保内容不足一屏时，背景也能撑满整个视口高度 */
}

/* --- 页面头部容器样式 --- */
.header-container {
    text-align: center; /* 文本居中 */
    padding: 10px; /* 内边距 */
    color: white; /* 文本颜色 */
    position: relative; /* 确保 z-index 生效，使其能覆盖在背景之上 */
    z-index: 1; /* 层叠顺序，高于背景层 */
    border-radius: 15px; /* 圆角边框 */
    margin: 20px auto; /* 上下外边距20px，左右自动居中 */
    width: fit-content; /* 宽度根据内容自适应 */
    padding-left: 30px; /* 左内边距 */
    padding-right: 30px; /* 右内边距 */
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 交叉轴居中（水平居中） */
    justify-content: center; /* 主轴居中（垂直居中） */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* 盒子阴影效果 */
    background: rgba(176, 176, 176, 0.3); /* 半透明背景色 */
    backdrop-filter: blur(1px); /* 背景毛玻璃效果 */
}

/* --- 应用网格容器样式 --- */
.grid-container {
    display: grid; /* 使用 Grid 布局 */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 响应式列布局，每列最小150px，自动填充 */
    gap: 30px; /* 网格项目之间的间距 */
    padding: 20px; /* 内边距 */
    margin: 0 auto 80px; /* 上边距0，左右自动居中，下边距80px为Dock栏留出空间 */
    width: 90%; /* 容器宽度为父元素的90% */
    max-width: 900px; /* 最大宽度限制 */
    position: relative; /* 确保 z-index 生效 */
    z-index: 1; /* 层叠顺序，高于背景层 */
}

/* --- 单个应用图标和名称的容器样式 --- */
.app-container {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    align-items: center; /* 水平居中 */
    justify-content: center; /* 垂直居中 */
}

/* --- 应用图标本身样式 --- */
.app {
    background-color: #2196F3; /* 默认背景色，如果背景图片未加载或未设置时显示 */
    border-radius: 25px; /* 圆角 */
    display: flex; /* Flexbox 布局，用于内部可能的元素对齐（虽然这里为空） */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    color: white; /* 文本颜色（如果图标内有文字） */
    font-weight: bold; /* 字体加粗 */
    cursor: pointer; /* 鼠标悬停时显示手型光标 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 变形和阴影的平滑过渡效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 盒子阴影 */
    overflow: hidden; /* 隐藏超出圆形区域的内容（例如背景图片） */
    background-size: cover; /* 背景图片缩放以完全覆盖容器，可能裁剪 */
    background-position: center; /* 背景图片居中显示 */
}

/* --- 应用图标悬停效果 --- */
.app:hover {
    transform: scale(1.05) translateY(-5px); /* 悬停时放大1.05倍并向上移动5px */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* 悬停时增强阴影 */
}

/* --- 应用名称容器样式 --- */
.app-name-container {
    width: 100%; /* 宽度占满父容器（.app-container） */
    text-align: center; /* 文本居中 */
    padding: 10px 0; /* 上下内边距10px，左右0 */
    font-size: 16px; /* 字体大小 */
    color: white; /* 文本颜色 */
    font-weight: 500; /* 字体重量 */
    margin-top: 5px; /* 与上方图标的间距 */
}

/* --- 响应式设计：调整应用图标大小 --- */
/* 桌面端及较大平板 */
@media (min-width: 769px) {
    .app {
        width: 150px; /* 图标宽度 */
        height: 150px; /* 图标高度 */
    }
}

/* 中等屏幕尺寸，如平板 */
@media (max-width: 768px) and (min-width: 481px) {
    .app {
        width: 120px; /* 图标宽度 */
        height: 120px; /* 图标高度 */
    }
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 调整网格列最小宽度 */
    }
}

/* 移动设备等较小屏幕 */
@media (max-width: 480px) {
    .app {
        width: 100px; /* 图标宽度 */
        height: 100px; /* 图标高度 */
    }
    .app-name-container {
        font-size: 14px; /* 调整应用名称字体大小 */
    }
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 调整网格列最小宽度 */
        gap: 15px; /* 调整网格项目间距 */
        padding: 15px; /* 调整网格容器内边距 */
    }
    .header-container h1 {
        font-size: 24px; /* 调整标题字体大小 */
    }
}

/* --- Dock栏样式 --- */
.dock {
    position: fixed; /* 固定定位，相对于视口 */
    bottom: 10px; /* 距离视口底部10px */
    left: 50%; /* 左侧距离视口50% */
    transform: translateX(-50%); /* 通过X轴负向平移自身宽度的一半，实现水平居中 */
    width: auto; /* 宽度根据内容自适应 */
    display: flex; /* Flexbox 布局 */
    justify-content: center; /* 子项目在主轴上居中排列 */
    background-color: rgba(200, 200, 200, 0.3); /* Dock栏半透明背景色 */
    border-radius: 20px; /* 圆角 */
    padding: 10px 15px; /* 内边距 */
    gap: 15px; /* Dock栏项目之间的间距 */
    backdrop-filter: blur(5px); /* 背景毛玻璃效果 */
    z-index: 10; /* 层叠顺序，确保在页面最上层 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影效果 */
}

/* --- Dock栏项目样式 --- */
.dock-item {
    background: linear-gradient(145deg, #FF9E9E, #FF6B6B); /* 默认渐变背景（第一个项目） */
    width: 45px; /* 项目宽度 */
    height: 45px; /* 项目高度 */
    border-radius: 12px; /* 圆角 */
    display: flex; /* Flexbox 布局 */
    justify-content: center; /* 水平居中内部图标 */
    align-items: center; /* 垂直居中内部图标 */
    color: white; /* 文本颜色（如果项目内有文字） */
    cursor: pointer; /* 鼠标手型 */
    position: relative; /* 用于可能的子元素定位或伪元素 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 项目阴影 */
    transition: all 0.3s ease; /* 所有属性变化的平滑过渡 */
}

/* --- Dock栏第二个项目特定背景 --- */
.dock-item:nth-child(2) {
    background: linear-gradient(145deg, #9ED1FF, #6BAEFF); /* 蓝色渐变 */
}

/* --- Dock栏第三个项目特定背景 --- */
.dock-item:nth-child(3) {
    background: linear-gradient(145deg, #9EFFB0, #6BFF84); /* 绿色渐变 */
}

/* --- Dock栏项目悬停效果 --- */
.dock-item:hover {
    transform: translateY(-5px) scale(1.1); /* 悬停时向上移动5px并放大1.1倍 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* 悬停时增强阴影 */
}

/* --- Dock栏内部图标样式 --- */
.dock-icon {
    width: 24px; /* 图标宽度 */
    height: 24px; /* 图标高度 */
    transition: transform 0.3s ease; /* 图标变形的平滑过渡（如果需要单独控制图标动画） */
}

/* --- 从 404 页面移植的动态背景样式 开始 --- */
/* --- 紫色背景层 (应用于body) --- */
.bg-purple {
    background: url('img/bg_purple.png'); /* 背景图片路径，相对于HTML文件 */
    background-repeat: repeat-x; /* 背景图片在X轴重复 */
    background-size: cover; /* 背景图片缩放以覆盖整个元素 */
    background-position: left top; /* 背景图片定位在左上角 */
}

/* --- 星星覆盖层 --- */
.stars {
    background: url('img/overlay_stars.svg'); /* 星星图片路径 */
    background-repeat: repeat; /* 背景图片重复平铺 */
    background-size: contain; /* 背景图片缩放以完整显示在元素内，可能留白 */
    background-position: left top; /* 定位在左上角 */
    position: fixed; /* 固定定位，覆盖整个视口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 置于最底层，但在 body 的 .bg-purple 之上，内容之下 */
    pointer-events: none; /* 使该层不捕获鼠标事件，允许点击穿透到下方元素 */
}

/* --- 动态物体（火箭、地球、月亮）的图片样式 --- */
.objects img {
    /* pointer-events: none; 已在 .stars 设置，这里是冗余但无害 */
    position: absolute; /* 绝对定位，相对于最近的已定位祖先元素（这里是.stars或body）*/
}

/* --- 火箭样式与动画 --- */
.object_rocket {
    /* z-index: -1; 与 .stars 同层或略高，但仍在内容之下 */
    transform: translateX(-50px); /* 初始X轴位置 */
    top: 75%; /* 距离顶部75% */
    width: 40px; /* 火箭宽度 */
    animation: rocket-movement 80s linear infinite both running; /* 应用火箭移动动画 */
}

/* --- 地球样式与动画 --- */
.object_earth {
    top: 20%; /* 距离顶部20% */
    left: 15%; /* 距离左侧15% */
    width: 100px; /* 地球宽度 */
    /* z-index: -1; */
    animation: spin-earth 40s infinite linear both; /* 应用地球旋转动画 */
}

/* --- 月亮样式 --- */
.object_moon {
    top: 12%; /* 距离顶部12% */
    left: 25%; /* 距离左侧25% */
    width: 80px; /* 月亮宽度 */
    /* z-index: -1; */
}

/* --- 闪烁星星的容器内单个星星样式 --- */
.glowing_stars .star {
    position: absolute; /* 绝对定位 */
    border-radius: 100%; /* 圆形 */
    background-color: #fff; /* 白色 */
    width: 3px; /* 星星宽度 */
    height: 3px; /* 星星高度 */
    opacity: 0.3; /* 初始透明度 */
    will-change: opacity; /* 提示浏览器该属性会变化，可能优化性能 */
    /* z-index: -1; */
}

/* --- 单个闪烁星星的位置和动画延迟 --- */
.glowing_stars .star:nth-child(1) { top: 80%; left: 25%; animation: glow-star 2s infinite ease-in-out alternate 1s; }
.glowing_stars .star:nth-child(2) { top: 20%; left: 40%; animation: glow-star 2s infinite ease-in-out alternate 3s; }
.glowing_stars .star:nth-child(3) { top: 25%; left: 25%; animation: glow-star 2s infinite ease-in-out alternate 5s; }
.glowing_stars .star:nth-child(4) { top: 75%; left: 80%; animation: glow-star 2s infinite ease-in-out alternate 7s; }
.glowing_stars .star:nth-child(5) { top: 90%; left: 50%; animation: glow-star 2s infinite ease-in-out alternate 9s; }

/* --- Keyframes 动画定义 --- */
/* 火箭移动动画 */
@-moz-keyframes rocket-movement { 100% { -moz-transform: translate(1200px, -600px); } } /* Firefox */
@-webkit-keyframes rocket-movement { 100% { -webkit-transform: translate(1200px, -600px); } } /* Webkit (Chrome, Safari) */
@keyframes rocket-movement { 100% { transform: translate(1200px, -600px); } } /* 标准语法 */

/* 地球旋转动画 */
@-moz-keyframes spin-earth { 100% { -moz-transform: rotate(-360deg); transition: transform 20s; } }
@-webkit-keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transition: transform 20s; } }
@keyframes spin-earth { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); transition: transform 20s; } }

/* 星星闪烁动画 */
@-moz-keyframes glow-star { 40% { -moz-opacity: 1; } 90%, 100% { -moz-opacity: 1; -moz-transform: scale(1.8); } }
@-webkit-keyframes glow-star { 40% { -webkit-opacity: 0.3; } 90%, 100% { -webkit-opacity: 1; -webkit-transform: scale(1.2); } }
@keyframes glow-star { 40% { opacity: 0.3; } 90%, 100% { opacity: 1; transform: scale(1.2); border-radius: 999999px; } }
/* --- 从 404 页面移植的背景样式 结束 --- */