/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 主容器 - 占满首屏减去导航栏高度 */
.main-container {
    width: 100%;
    height: calc(100vh - 60px);
    background-image: url('../../src/background-img.png'); /* 请替换为你的背景图路径 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px;
}

/* 平台区域 - 屏幕下半部分 */
.platform {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 下载标题样式 */
.download-title {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* PC端下载区域 - 左右布局 */
.download {
    display: none; /* 默认隐藏，JS控制显示 */
    gap: 10px;
    align-items: stretch;
}

.download .pc {
    grid-row: span 2;
    background-color: #fb5692;
    height: calc(12vh + 10px);
    width: calc(12vh + 10px);
    text-decoration: none;
    gap: 10px;
    flex-direction: column;
}

.download .pc img {
    height: 50%;
    width: auto;
    object-fit: contain;
}

.download .pc p {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.download-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

.download a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6vh;
    width: 18vh;
    padding: 5px;
    border: #474747 2px solid;
    border-radius: 10px;
    transition: all 0.3s ease;
    background-color: #18222e;
    backdrop-filter: blur(10px);
}

.download a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.download a img {
    height: 100%;
    width: auto;
    object-fit: contain;
}


/* 移动端下载区域 - 2行2排 */
.download-mobile {
    display: none; /* 默认隐藏，JS控制显示 */
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 400px;
}

.download-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background-color: #18222e;
    backdrop-filter: blur(10px);
}

.download-mobile a:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.download-mobile a img {
    height: auto;
    width: 100%;
    object-fit: contain;
}

.download-mobile .android{
    padding: 0 0;
}

.download-mobile .hmos {
    padding: 0 0;
}

 .download-mobile .taptap {
    padding: 0 17px;
}

/* 其他平台标题样式 */
.other-title {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* 其他平台 - 圆形logo */
.other-title {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.other {
    display: flex;
    gap: 20px;
    align-items: center;
}

.other a img {
    height: 8vh; /* 圆形logo尺寸 */
    max-height: 80px;
    width: auto;
    border-radius: 50%;
    object-fit: cover;
    transition: transform 0.3s ease;
    padding: 5px;
    /* background-color: #fff; */
}

.other a img:hover {
    transform: scale(1.1);
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
    .main-container {
        height: calc(100dvh - 60px);
        padding: 20px;
        background-position: 65% center; /* 手机版背景图向左偏移，可根据需要调整百分比 */
    }

    .platform {
        bottom: 5%;
    }
}