/* 基础样式 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    background-color: #fff; /* 未覆盖区域填充白色 */
}

/* 背景图片容器 */
#background {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    overflow: hidden;
}

/* 背景图片样式 */
#bg-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* PC端：按原始比例显示，不拉伸 */
    position: absolute;
    z-index: 1; /* 在粒子层下方 */
}

/* 粒子动画容器 */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2; /* 在背景图片上方 */
    pointer-events: none; /* 默认不允许交互 */
}

/* 广告容器 */
#ad-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 3; /* 最上层 */
    /* PC端默认样式 */
    width: 300px; /* 初始宽度（调试时可调整） */
    top: 70vh; /* 纵向居中往下70% */
}

/* 广告动画（微微缩放） */
#ad-container img {
    width: 100%;
    height: auto;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* -------------------- 手机端适配 -------------------- */
@media (max-width: 768px) {
    /* 背景图片纵向完整显示，横向按需裁剪 */
    #bg-image {
        object-fit: cover; /* 覆盖整个容器 */
        width: 100%;
        height: 100%;
    }

    /* 允许手机端粒子交互 */
    #particles-js {
        pointer-events: auto;
    }

    /* 广告容器调整 */
    #ad-container {
        width: 60%; /* 调试时可调整 */
        top: 65vh; /* 调试时可调整 */
    }
}