/* =========================================
   1. 基础设置 (Reset & Base)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 背景色：这里设为深黑，不仅为了护眼，也能让粒子发光效果更明显 */
    background-color: #0d0d0d; 
    
    /* 防止出现滚动条 */
    overflow: hidden; 
    
    /* 字体设置：推荐使用等宽字体或现代无衬线字体，符合极客/复古风格 */
    font-family: 'Courier New', Courier, monospace, sans-serif;
    
    /* 字体颜色 */
    color: #ffffff;
}

/* =========================================
   2. 画布样式 (Canvas)
   ========================================= */
canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* z-index: -1 确保画布永远在背景层，不会挡住你的文字链接 */
    z-index: -1; 
}

/* =========================================
   3. 前景 UI 层 (UI Overlay)
   推荐你在 HTML 中加一个 <div class="container"> 来包裹文字
   ========================================= */
.container {
    position: absolute;
    
    /* === 修改这里 === */
    /* 原来是 top: 50%; 导致和文字挤在一起 */
    top: 75%; 
    /* 改成 75% 或 80%，让菜单下移到屏幕下方 1/4 处 */
    
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* 其他保持不变... */
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 20px;
    pointer-events: none;
}

/* 标题样式 */
.container h1 {
    font-size: 3rem;
    font-weight: bold;
    letter-spacing: 5px;
    margin-bottom: 1rem;
    text-transform: uppercase;
    
    /* 文字阴影，增加一点赛博朋克感 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    
    /* 恢复鼠标事件，以便可以选择文字 */
    pointer-events: auto;
}

/* 副标题/描述样式 */
.container p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7); /* 稍微变暗一点 */
    margin-bottom: 2rem;
    pointer-events: auto;
}

/* =========================================
   4. 链接/按钮样式 (高性能优化版)
   ========================================= */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    pointer-events: auto;
}

.nav-links a {
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 10px 20px;
    border-radius: 5px;
    
    /* 【优化关键 1】提前告诉浏览器这个元素会动，开启硬件加速 */
    will-change: transform, background-color;
    
    /* 保持变换平滑 */
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    
    font-size: 0.9rem;
    background: rgba(0, 0, 0, 0.3);
}

/* 鼠标悬停效果 (低消耗版) */
.nav-links a:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    
    /* 【优化关键 2】去掉了昂贵的 box-shadow 模糊光晕
       原来是: box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
       现在改为简单的位移，或者用不带模糊的投影（如果非要阴影的话）
    */
    
    /* 稍微上浮一点点 */
    transform: translateY(-2px);
}

/* =========================================
   5. 移动端适配 (Mobile Responsive)
   ========================================= */
@media (max-width: 768px) {
    .container h1 {
        font-size: 2rem;
    }
    .nav-links {
        flex-direction: column; /* 手机上链接竖排 */
        gap: 10px;
    }
}