@charset "utf-8";

body {
    background: #070d1c;
}

.site-stage {
    position: relative;
    width: 1920px;
    margin: 0 auto;
    zoom: var(--site-scale, 1);
    color: #e0eaff;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
}

.site-stage .page_01 {
    isolation: isolate;
    background: #0a1125 url("../images/xinghe-hero.png?v=xinghe-20261023-v1") center / cover no-repeat;
}

.page_01::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(transparent 52%, rgba(3, 7, 19, .16) 67%, rgba(5, 9, 23, .88));
    pointer-events: none;
}

.hero-brand {
    position: absolute;
    top: 38px;
    left: 115px;
    width: 700px;
    height: auto;
    filter: drop-shadow(0 5px 10px #050a18) drop-shadow(0 0 30px rgba(101, 130, 255, .28));
    pointer-events: none;
}

.hero-promo {
    position: absolute;
    top: 646px;
    left: 50%;
    width: 1540px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.hero-promo h1 {
    margin: 0;
    font-size: 54px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 1px;
    color: #e5edff;
    background: linear-gradient(#ffffff 15%, #dbe8ff 43%, #aebff3 52%, #7093dd 85%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #080e21;
    filter: drop-shadow(0 2px 0 #040817) drop-shadow(0 4px 8px #15254c);
}

.hero-promo-detail {
    font-size: 31px;
    line-height: 1.65;
    font-weight: 800;
    color: #dceaff;
    -webkit-text-stroke: .5px #070d1c;
    text-shadow: 2px 2px 0 #080e21, -1px -1px 0 #080e21, 0 3px 8px #0b1733;
}

.hero-promo-ribbon {
    position: relative;
    width: 1320px;
    margin: 12px auto 0;
    padding: 4px;
    box-sizing: border-box;
    color: #e0eaff;
    background: linear-gradient(90deg, #6f87c6, #dae3ff 35%, #7d72bd 70%, #dae3ff);
    clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
    filter: drop-shadow(0 4px 8px #060a18);
}

.hero-promo-ribbon span {
    display: block;
    padding: 6px 35px;
    background: linear-gradient(90deg, #121937, #29305b 45%, #161d3b);
    clip-path: polygon(2.8% 0, 97.2% 0, 100% 50%, 97.2% 100%, 2.8% 100%, 0 50%);
    font: 30px/1.25 "KaiTi", "楷体", serif;
    letter-spacing: 2px;
    text-shadow: 0 2px 1px #070d1c;
}

/* 装饰层独立运动，不移动场景、文案或按钮，也不接收鼠标事件。 */
.hero-atmosphere {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hero-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 77% 18%, rgba(157, 178, 255, .16), transparent 35%);
    animation: xinghe-light 10s ease-in-out infinite alternate;
}

.hero-atmosphere::after {
    content: "";
    position: absolute;
    inset: -100px;
    opacity: .28;
    background-image: radial-gradient(2px 2px at 35px 85px, #dce8ff 60%, transparent),
        radial-gradient(1px 1px at 178px 153px, #b4cafa 60%, transparent),
        radial-gradient(2px 2px at 262px 233px, #c0b5ff 60%, transparent);
    background-size: 410px 360px, 320px 290px, 530px 470px;
    animation: xinghe-stars 22s linear infinite;
}

@keyframes xinghe-light {
    from { opacity: .25; }
    to { opacity: .85; }
}

@keyframes xinghe-stars {
    from { transform: translate3d(-35px, 25px, 0); }
    to { transform: translate3d(45px, -30px, 0); }
}

.site-stage #download {
    top: 850px;
    left: 50%;
    width: 1140px;
    margin-left: -570px;
}

.site-stage #downloada {
    width: 1140px;
}

.site-stage .downcontainer2,
.site-stage .downcontainer4 {
    height: auto;
    background: none;
}

/* 首屏之外只有这一张连续长图，所有栏目及嵌入页透出同一场景。 */
.content-long {
    position: relative;
    width: 1920px;
    background-color: #070d1c;
    background-image: linear-gradient(to bottom, #070d1c 0, transparent 180px, transparent calc(100% - 180px), #070d1c 100%),
        url("../images/xinghe-long.png?v=xinghe-20261023-v1");
    background-position: center top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.xinghe-section {
    position: relative;
    width: 1920px;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border-top: 1px solid rgba(137, 160, 218, .12);
}

.section-heading {
    position: absolute;
    top: 28px;
    left: 50%;
    width: 920px;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.section-heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 0;
    color: #dfebff;
    font: 700 56px/1.4 "STKaiti", "KaiTi", "楷体", serif;
    letter-spacing: 5px;
    text-shadow: 0 2px #19294f, 0 4px 8px #040815;
}

.section-heading h2::before,
.section-heading h2::after {
    content: "";
    width: 135px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #91a7e6);
    box-shadow: 0 5px 0 rgba(126, 144, 213, .2);
}

.section-heading h2::after {
    transform: rotate(180deg);
}

.section-heading p {
    margin: 4px 0 0;
    color: #bbcbea;
    font-size: 22px;
    letter-spacing: 3px;
    text-shadow: 0 2px 3px #030613;
}

.section-heading::before {
    content: "";
    position: absolute;
    inset: -20px -160px -15px;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(4, 9, 24, .72), transparent 72%);
    pointer-events: none;
}

.site-stage .downcontainer1 {
    height: 810px;
}

.intro-copy {
    position: absolute;
    top: 184px;
    left: 450px;
    width: 1042px;
    min-height: 502px;
    box-sizing: border-box;
    padding: 32px 38px;
    border: 1px solid #6d82b4;
    outline: 5px solid rgba(83, 103, 158, .2);
    background: linear-gradient(120deg, rgba(7, 13, 31, .91), rgba(17, 26, 52, .83));
    box-shadow: inset 0 0 45px rgba(107, 131, 204, .15), 0 15px 60px rgba(0, 3, 15, .35);
    color: #e0eaff;
    font: 600 23px/43px "SimSun", "宋体", serif;
    white-space: nowrap;
}

.intro-brand {
    position: absolute;
    left: 45px;
    bottom: 105px;
    width: 360px;
    height: auto;
    filter: drop-shadow(0 6px 12px #030611);
}

.exclusive-section {
    height: 960px;
}

.site-stage .sm1 {
    top: 70px;
    background: none;
}

.exclusive-panel {
    position: absolute;
    top: 208px;
    left: 205px;
    width: 1510px;
    height: 565px;
    border: 1px solid rgba(125, 147, 206, .6);
    background: linear-gradient(110deg, rgba(6, 12, 29, .75), rgba(17, 27, 54, .38));
    box-shadow: inset 0 0 40px rgba(113, 142, 232, .08);
}

.exclusive-label {
    position: absolute;
    left: 260px;
    width: 240px;
    padding: 10px 0;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #dce8ff;
    background: linear-gradient(90deg, transparent, #202b58 20%, #202b58 80%, transparent);
    border-top: 1px solid #829cdd;
    border-bottom: 1px solid #829cdd;
}

.exclusive-label-1 { top: 311px; }
.exclusive-label-2 { top: 467px; }
.exclusive-label-3 { top: 623px; }

.exclusive-brand {
    position: absolute;
    top: 540px;
    left: 1280px;
    width: 420px;
    height: auto;
    filter: drop-shadow(0 5px 10px #060916);
}

.site-stage .m6piccon li img,
.site-stage .m7piccon li img,
.site-stage .m5piccon li img {
    outline: 2px solid #8194cf;
    outline-offset: 3px;
    background: rgba(5, 10, 25, .8);
    box-shadow: 0 0 12px rgba(112, 145, 255, .3);
}

.gallery-section iframe {
    position: absolute;
    left: 0;
    top: 150px;
    display: block;
    width: 1920px;
    border: 0;
}

.gallery-1 { height: 990px; }
.gallery-2 { height: 900px; }
.gallery-3 { height: 1020px; }
.gallery-4 { height: 900px; }
.gallery-5 { height: 960px; }

/* 嵌入页透出父页面的新场景，保留原轮播尺寸、素材及交互。 */
body.xinghe-gallery {
    background: transparent;
}

.xinghe-gallery .zbShow,
.xinghe-gallery .YZbg_02 {
    background: none;
}

.bar .nor,
.bar .top {
    background-color: rgba(9, 15, 33, .88);
    border-bottom: 1px solid rgba(119, 145, 219, .3);
}

body .footer {
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 150px;
    padding: 18px 30px;
    color: #a4b6d9;
    border-top: 1px solid #3f527f;
    background: linear-gradient(#070d1c, #040814);
}

@media (max-width: 1600px) {
    .bar { top: 62px; right: 12px; width: 78px; }
    .bar .nor, .bar .home { width: 78px; height: 50px; font: 12px/50px "Microsoft YaHei", sans-serif; }
    .bar .top { width: 78px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-atmosphere::before,
    .hero-atmosphere::after {
        animation: none;
    }
    .hero-atmosphere::after { opacity: .12; }
}

.bar .nor:hover, .bar .home:hover { background: #273769; }

body .footer .foota img {
    display: block;
    width: 180px;
    height: 90px;
    object-fit: contain;
    margin: 0 auto 8px;
}

/* 品牌层与游戏素材分离，原动图的帧和播放速度保持不变。 */
.branded-art { position: relative; width: 100%; overflow: hidden; isolation: isolate; }
.branded-art > img.game-source { display: block; width: 100%; height: auto; }
.brand-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.brand-header, .vertical-brand { position: absolute; overflow: hidden; pointer-events: none; }
.brand-clean, .brand-black, .brand-new { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.brand-black { background: #000; }
.branded-art .brand-new { width: 100%; height: 100%; object-fit: fill; }
.brand-watermark { position: absolute; inset: 0; mask-size: 100% 100%; pointer-events: none; }
.brand-watermark img { position: absolute; object-fit: fill; }
.vertical-word { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-family: "KaiTi", "楷体", serif; font-weight: bold; line-height: 1; text-shadow: 0 0 3px currentColor, 0 0 6px currentColor; }
.vertical-word > span { display: block; line-height: 1; }