@charset "utf-8";

body {
    background: #f6e4bc;
}

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

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

.page_01::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(transparent 52%, rgba(255, 242, 207, .03) 67%, rgba(246, 228, 188, .98));
    pointer-events: none;
}

.hero-brand {
    position: absolute;
    top: 38px;
    left: 115px;
    width: 700px;
    height: auto;
    filter: drop-shadow(0 5px 10px #79501c) drop-shadow(0 0 30px rgba(255, 231, 161, .38));
    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: #fff8da;
    background: linear-gradient(#fffbe6 15%, #ffedb5 43%, #edc365 52%, #b87819 85%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.5px #58350c;
    filter: drop-shadow(0 2px 0 #73440b) drop-shadow(0 4px 8px #8b5b1c);
}

.hero-promo-detail {
    font-size: 31px;
    line-height: 1.65;
    font-weight: 800;
    color: #fff3c9;
    -webkit-text-stroke: .5px #f6e4bc;
    text-shadow: 2px 2px 0 #58350c, -1px -1px 0 #58350c, 0 3px 8px #6c4110;
}

.hero-promo-ribbon {
    position: relative;
    width: 1320px;
    margin: 12px auto 0;
    padding: 4px;
    box-sizing: border-box;
    color: #60401d;
    background: linear-gradient(90deg, #bd852a, #fff1bd 35%, #d7a34a 70%, #fff1bd);
    clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%);
    filter: drop-shadow(0 4px 8px #a46f24);
}

.hero-promo-ribbon span {
    display: block;
    padding: 6px 35px;
    background: linear-gradient(90deg, #93601f, #bc8a39 45%, #815019);
    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 #f6e4bc;
}

/* 装饰层独立运动，不移动场景、文案或按钮，也不接收鼠标事件。 */
.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(255, 243, 193, .18), transparent 35%);
    animation: liunian-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, #fff2c5 60%, transparent),
        radial-gradient(1px 1px at 178px 153px, #ffd97b 60%, transparent),
        radial-gradient(2px 2px at 262px 233px, #fff8d1 60%, transparent);
    background-size: 410px 360px, 320px 290px, 530px 470px;
    animation: liunian-stars 22s linear infinite;
}

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

@keyframes liunian-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: #f6e4bc;
    background-image: linear-gradient(to bottom, #f6e4bc 0, transparent 180px, transparent calc(100% - 180px), #f6e4bc 100%),
        url("../images/liunian-long.png?v=liunian-20261102-v1");
    background-position: center top;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.liunian-section {
    position: relative;
    width: 1920px;
    box-sizing: border-box;
    overflow: hidden;
    background: transparent;
    border-top: 1px solid rgba(164, 117, 37, .25);
}

.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: #775017;
    font: 700 56px/1.4 "STKaiti", "KaiTi", "楷体", serif;
    letter-spacing: 5px;
    text-shadow: 0 2px #f7df9a, 0 4px 8px #d6b477;
}

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

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

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

.section-heading::before {
    content: "";
    position: absolute;
    inset: -20px -160px -15px;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(255, 247, 222, .88), 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 #bb8c3e;
    outline: 5px solid rgba(195, 153, 66, .20);
    background: linear-gradient(120deg, rgba(255, 249, 228, .95), rgba(255, 236, 191, .90));
    box-shadow: inset 0 0 45px rgba(208, 162, 69, .18), 0 15px 60px rgba(118, 77, 16, .17);
    color: #60401d;
    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 #b88c40);
}

.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.liunian-gallery {
    background: transparent;
}

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

.bar .nor,
.bar .top {
    background-color: rgba(255, 244, 212, .96);
    border-bottom: 1px solid rgba(180, 128, 41, .4);
}

body .footer {
    min-width: 0;
    box-sizing: border-box;
    height: auto;
    min-height: 150px;
    padding: 18px 30px;
    color: #6d512d;
    border-top: 1px solid #c7a465;
    background: linear-gradient(#f6e4bc, #ecd4a3);
}

@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: #e6be68; }

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; }

/* 金色按钮使用文字排版，保持原有链接和点击区域。 */
.site-stage #downloada a {
    text-indent: 0;
    box-sizing: border-box;
    border: 1px solid #fff0ac;
    outline: 2px solid #a46e20;
    outline-offset: -6px;
    background: linear-gradient(110deg, #8e5b17, #c69237 42%, #95601c);
    color: #fff5d2;
    font: 700 36px/121px "Microsoft YaHei", sans-serif;
    letter-spacing: 4px;
    text-align: center;
    text-shadow: 0 2px 3px #684111;
    box-shadow: inset 0 0 22px #e4bc64, 0 8px 24px rgba(104, 62, 10, .2);
    transition: filter .2s, box-shadow .2s;
}
.site-stage #downloada a:hover, .site-stage #downloada a:focus-visible {
    background: linear-gradient(110deg, #aa7323, #dfb252 42%, #ac7729);
    filter: brightness(1.1);
    box-shadow: inset 0 0 25px #ffe9a6, 0 8px 28px rgba(104, 62, 10, .3);
}
.bar .nor, .bar .top {
    background-image: none;
    color: #77501c;
    box-shadow: inset 0 0 0 1px rgba(198, 152, 67, .45);
}
body .footer .foot { border-color: #d0af6a; height: auto; min-height: 130px; }
body .footer .foott { max-width: 1300px; width: 100%; height: auto; display: flex; align-items: center; }
body .footer .foota { flex: 0 0 200px; }
body .footer .foots { flex: 1; width: auto; height: auto; }
body .footer a { color: #825b22; }
.vertical-word { color: #ffe493; }

.hero-promo-ribbon span {
    color: #fff2c1;
    font-weight: 700;
    text-shadow: 0 2px 2px #65400f;
}
.site-stage #downloada a { text-decoration: none; }
.bar .top img { filter: brightness(.55) sepia(1) saturate(3); }
/* 以金色细框覆盖原动图外围的紫色装饰，保留内部游戏画面。 */
.branded-art::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #bd8a30;
    box-shadow: inset 0 0 0 2px #f5df9e;
    pointer-events: none;
    z-index: 5;
}