/* 页面样式 */
/* 重置样式 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
/* ========== 页头部分样式 ========== */

/* 固定页头样式 - 始终固定在页面顶部 */
.fixed-header {
    position: fixed; /* 固定定位，不随页面滚动 */
    top: -100px; /* 初始隐藏在视口上方 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 占满整个视口宽度 */
    height: 70px; /* 设置固定高度 */
    /* 背景透明 */
    backdrop-filter: blur(10px); /* 添加背景模糊效果 */
    /* 页头背景图片 */
    /*background: transparent url('./assets/files/top-bg.png') no-repeat center center;*/
    background: transparent no-repeat center center;
    background-size: cover; /* 背景图覆盖整个区域 */
    display: flex; /* 使用 Flex 布局 */
    justify-content: space-between; /* 子元素左右分布 */
    align-items: center; /* 垂直居中 */
    z-index: 999; /* 置于其他元素之上 */
    transition: top 1s cubic-bezier(0.25, 0.1, 0.25, 1); /* 添加滑动过渡动画 */
}

/* 页头左侧内容容器 - 包含游戏图标和标题 */
.home-top__left {
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    gap: 0.2rem; /* 内部元素水平间距 */
    margin-left: 0.5rem; /* 左边距 */
    /*margin-bottom: 0.4rem; !* 底边距 *!*/
}

/* 页头右侧图标容器 - 包含社交平台图标 */
.home-top__right {
    display: flex; /* 使用 Flex 布局 */
    align-items: center; /* 垂直居中 */
    gap: 0.2rem; /* 内部元素水平间距 */
    margin-right: 0.5rem; /* 右边距 */
    /*margin-bottom: 0.5rem; !* 底边距 *!*/
}

/* 左侧图标样式 - 游戏 Logo 图标 */
.top-icon {
    width: 2.8rem; /* 图标宽度 */
    height: 2.8rem; /* 图标高度 */
    background: no-repeat center center;
    background-size: contain; /* 图片自适应容器大小 */
    border-radius: 0.6rem; /* 圆角效果 */
}

/* 游戏标题图片样式 - 显示游戏名称 */
.game-title-image {
    width: auto; /* 宽度自动 */
    height: 1.8rem; /* 标题图片高度 */
    max-width: 100%; /* 最大不超过容器 */
    display: block; /* 块级元素 */
}

/* 右侧社交图标样式 - X、Discord、Line 等图标 */
.icon {
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    background: no-repeat center center;
    background-size: contain;
    border-radius: 50%;
}

/* 页头显示动画 - 从上方滑入 */
.fixed-header.show {
    top: 0; /* 显示时滑入到顶部 */
}


/* ========== 主界面部分样式 ========== */

/* 主背景样式 - 页面主背景 */
.hero {
    background: no-repeat center center fixed;
    background-size: cover; /* 背景图覆盖整个视口 */
    /*min-height: 100vh; !* 最小高度为视口高度 *!*/
    position: relative; /* 相对定位，用于绝对定位子元素 */
    overflow: hidden; /* 隐藏超出部分 */
}

/* 标语图片样式 - 页面主要宣传标语 */
.slogan-img {
    position: absolute;
    top: 0; /* 保持距离顶部15% */
    right: 0; /* 靠右对齐 */
    width: 27%; /* 宽度保持21% */
    height: 100%; /* 高度与父容器一致 */
    object-fit: contain; /* 保持图片比例，防止变形 */
}

/* 确保 hero 容器不干扰定位 */
.hero.container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* 主按钮样式 - 主要交互按钮 */
.pulse-btn {
    /* position: fixed; */
    bottom: calc(2rem + env(safe-area-inset-bottom, 0)); /* 留出空间避免遮挡 */
    /* left: 16%; */
    transform: translateX(-50%); /* 水平居中 + 初始缩放 */
    background: no-repeat center center;
    background-size: contain;
    border: none;

    width: 70vw; /* 使用视口宽度单位，占视口宽度的 40% */
    max-width: 300px; /* 最大宽度限制 */
    min-width: 200px; /* 最小宽度限制 */
    height: auto; /* 自动高度，保持图片比例 */
    aspect-ratio: 300 / 140; /* 保持宽高比 */

    /*width: 300px;*/
    /*height: 140px;*/
    transition: transform 0.3s ease, opacity 0.8s ease;
    opacity: 0;
    display: block;
    z-index: 10; /* 确保在主背景和图片之上 */
}

/* 按钮淡入+缩放动画 - 用于按钮首次出现时的动画 */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.5); } /* 初始状态 */
    to { opacity: 1; transform: scale(1); } /* 结束状态 */
}

/* 按钮脉冲动画 - 让按钮具有动态吸引点击的效果 */
@keyframes pulse {
    0% { transform: scale(1); } /* 正常大小 */
    50% { transform: scale(1.15); } /* 放大 5% */
    100% { transform: scale(1); } /* 回到正常大小 */
}

/* 合并动画：淡入+缩放 + 脉冲 - 给主按钮添加综合动画效果 */
.pulse-btn.animate-once {
    animation:
        fadeInScale 0.5s ease-out forwards, /* 淡入+缩放动画 */
        pulse 2s infinite 0.5s; /* 脉冲动画，无限循环 */
}

/* 响应式字体大小调整 - 不同屏幕尺寸使用不同字体大小 */
@media (min-width: 576px) { :root { --font-size: 17px; } }
@media (min-width: 768px) { :root { --font-size: 18px; } }
@media (min-width: 992px) { :root { --font-size: 19px; } }
@media (min-width: 1200px) { :root { --font-size: 20px; } }

/* 响应式垂直间距调整 */
@media (min-width: 576px) {
    section { --block-spacing-vertical: calc(var(--spacing)*2.5); } /* 调整垂直间距 */
}
@media (min-width: 768px) {
    section { --block-spacing-vertical: calc(var(--spacing)*3); } /* 更大的垂直间距 */
}

/* 媒体查询进一步优化 */
/*@media (max-width: 576px) {*/
/*    .pulse-btn {*/
/*        width: 50vw; !* 小屏幕上稍增大比例 *!*/
/*        min-width: 180px;*/
/*    }*/
/*}*/
/*@media (min-width: 768px) {*/
/*    .pulse-btn {*/
/*        width: 35vw; !* 大屏幕上稍减小比例 *!*/
/*        max-width: 350px;*/
/*    }*/
/*}*/

/* ========== 弹窗部分样式 ========== */

/* 弹窗淡入动画关键帧 */
@keyframes scaleIn {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } /* 初始缩小且透明 */
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* 放大到正常且不透明 */
}

/* 弹窗淡出动画关键帧 */
@keyframes scaleOut {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* 初始正常 */
    to { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } /* 缩小且透明 */
}

/* 遮罩层淡入动画关键帧 */
@keyframes fadeInOverlay {
    from { opacity: 0; } /* 初始透明 */
    to { opacity: 1; } /* 不透明 */
}

/* 遮罩层淡出动画关键帧 */
@keyframes fadeOutOverlay {
    from { opacity: 1; } /* 初始不透明 */
    to { opacity: 0; } /* 透明 */
}

/* 弹窗脉冲动画关键帧 - 让弹窗按钮持续脉冲 */
@keyframes popupPulse {
    0% { transform: translateX(-50%) scale(0.8); } /* 初始状态 */
    50% { transform: translateX(-50%) scale(0.95); } /* 中间状态 */
    100% { transform: translateX(-50%) scale(0.8); } /* 最终状态 */
}
@keyframes popupPulse2 {
    0% { transform: translateX(-50%) scale(0.8); } /* 初始状态 */
    50% { transform: translateX(-50%) scale(0.85); } /* 中间状态 */
    100% { transform: translateX(-50%) scale(0.8); } /* 最终状态 */
}

/* 弹窗基础样式 - 默认隐藏 */
.new-popup {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精准居中 */
    z-index: 1000; /* 置于顶层 */
    width: 90%; /* 宽度 */
    max-width: 600px; /* 最大宽度 */
}

/* 显示弹窗时的动画 - 弹窗出现动画 */
.new-popup.active {
    display: block; /* 显示 */
    animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 动画 */
}

/* 关闭弹窗时的动画 - 弹窗消失动画 */
.new-popup.closing {
    animation: scaleOut 0.3s ease-in forwards; /* 动画 */
}

/* 弹窗背景样式 - 弹窗主体背景 */
.popup-bg {
    position: relative; /* 相对定位 */
    width: 106%; /* 稍宽于父容器 */
    height: 500px; /* 固定高度 */
    background: no-repeat center center;
    background-size: contain; /* 图片自适应 */
    left: -3%; /* 往左偏移 */
}

/* 弹窗主按钮样式 - 弹窗上的主要操作按钮 */
.popup-btn {
    position: absolute; /* 绝对定位 */
    bottom: -2%; /* 距离底部 5% */
    left: 50.5%; /* 微调水平位置 */
    background: no-repeat center center;
    background-size: contain; /* 图片自适应 */
    border: none; /* 移除边框 */
    width: 100%; /* 宽度 */
    height: 160px; /* 高度 */
    cursor: pointer; /* 手型指针 */
    animation: popupPulse 2.5s infinite; /* 无限脉冲动画 */
    transition: 0.3s; /* 过渡动画 */
}

/* 弹窗关闭按钮样式 - 弹窗右上角的关闭按钮 */
.popup-close {
    position: absolute; /* 绝对定位 */
    top: 119px; /* 距离顶部 180px */
    right: -10px; /* 稍微超出右边 */
    background: no-repeat center center;
    border: none; /* 移除边框 */
    cursor: pointer; /* 手型指针 */
    /*background-size: cover; !* 图片铺满 *!*/
    background-size: contain; /* 图片自适应 */
    overflow: hidden; /* 防止背景图超出 */
    width: 5px; /* 按钮宽度 */
    height: 5px; /* 按钮高度 */
}

/* 弹窗遮罩层样式 - 弹窗出现时的半透明遮罩 */
.new-overlay {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    top: 0; /* 距离顶部 0 */
    left: 0; /* 距离左边 0 */
    width: 100%; /* 宽度占满 */
    height: 100%; /* 高度占满 */
    background: rgba(0,0,0,0.7); /* 半透明黑色背景 */
    z-index: 999; /* 置于主要元素之下 */
}

/* 显示遮罩层时的动画 - 遮罩层淡入动画 */
.new-overlay.active {
    display: block; /* 显示 */
    animation: fadeInOverlay 0.4s ease-out; /* 淡入动画 */
}

/* 隐藏遮罩层时的动画 - 遮罩层淡出动画 */
.new-overlay.closing {
    animation: fadeOutOverlay 0.3s ease-out forwards; /* 淡出动画 */
}

/* 弹窗中的三角形按钮样式，和 popup-btn 保持一致动画 */
.popup-item {
    position: absolute;
    /*background: no-repeat center center;*/
    /*background-size: contain;*/
    object-fit: contain; /* 替代background-size: contain */
    border: none;
    /*cursor: pointer;*/
    cursor: default; /* 避免手型指针 */
    transform: translateX(-50%);
    transition: 0.3s;
    /*animation: popupPulse 2.5s infinite;*/
    animation-name: popupPulse2;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both; /* 保持动画开始前后的状态 */
    pointer-events: none;
}
.item1 {
    bottom: 49%;
    left: 21%;
    width: 190px;
    height: 80px;
}
.item2 {
    bottom: 49%;
    left: 79%;
    width: 190px;
    height: 88px;
}
.item3 {
    bottom: 27%;
    left: 50%;
    width: 300px;
    height: 125px;
}

/* 每个按钮的动画错开不同时间 */
.popup-anim-delay-0 {
    animation-delay: 0s;
}
.popup-anim-delay-1 {
    animation-delay: 0.3s;
}
.popup-anim-delay-2 {
    animation-delay: 0.6s;
}
.popup-anim-delay-3 {
    animation-delay: 0.9s;
}