/* =========================================================
   全局变量
========================================================= */

:root{

    --gold:#f2a424;
    --gold-light:#fde6b0;

    --cream:#f6e3b4;
    --cream-2:#f1dca6;

    --black:#000;
    --dark:#2a2424;

    --white:#fff;


    --serif:
        "Source Han Serif SC",
        "Noto Serif CJK SC",
        "思源宋体",
        "STSong",
        serif;


    --sans:
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "思源黑体",
        "Microsoft YaHei",
        sans-serif;


    --puhui:
        "Alibaba PuHuiTi 2.0",
        "Alibaba PuHuiTi",
        "阿里巴巴普惠体",
        "Microsoft YaHei",
        sans-serif;

}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}


html{
    scroll-behavior:smooth;
}


body{

    min-width:1280px;

    background:#000;

    color:#fff;

    font-family:var(--sans);

    overflow-x:auto;

    /* 防止滚动过程中出现横向滚动干扰 */
    overscroll-behavior-y:none;

}


a{

    color:inherit;

    /* text-decoration:none; */

}


img{

    display:block;

    max-width:100%;

}


button,
input,
textarea{

    font:inherit;

}


.page{

    width:100%;

    min-width:1280px;

    overflow:hidden;

}


.section{

    width:100%;

    max-width:1920px;

    margin:0 auto;

    position:relative;

}



/* =========================================================
   顶部导航
========================================================= */

.header{

    position:fixed;

    z-index:1000;

    left:0;

    top:0;

    width:100%;

    height:120px;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.92),
            rgba(0,0,0,.28),
            transparent
        );
    background-color: #000;
    pointer-events: none;

}
.header a {
    pointer-events: auto;
    text-decoration:none
}


.nav-inner{

    width:100%;

    max-width:1920px;

    height:120px;

    margin:auto;

    padding:0 108px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

}


.logo{

    padding-top:24px;

    color:var(--gold-light);

    font-family:var(--serif);

    font-size:47px;

    line-height:1;

    white-space:nowrap;

    font-weight:400;

}


.nav-menu{

    display:flex;

    align-items:center;

    gap:18px;

    padding-top:14px;

}


.nav-menu a{

    min-width:134px;

    height:44px;

    padding:0 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gold-light);

    font-family:var(--serif);

    font-size:32px;

    font-weight:400;

    border:1px solid transparent;

    border-radius:24px;

    white-space:nowrap;

    transition:.25s;

}


.nav-menu a:hover,
.nav-menu a.active{

    border-color:var(--white);

}



/* ---------------------------------------------------------
   产品中心下拉菜单
--------------------------------------------------------- */

.header .has-dropdown{
    position:relative;
    pointer-events:auto;
}

.has-dropdown > a::after{
    content:"";
    display:inline-block;
    width:0;
    height:0;
    margin-left:12px;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:9px solid currentColor;
}

.dropdown-menu{
    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(-50%) translateY(-10px);
    min-width:220px;
    /* padding:10px; */
    display:flex;
    flex-direction:column;
    align-items: center;
    gap:4px;
    background:rgba(0,0,0,.94);
    border:1px solid rgba(253,230,176,.35);
    border-radius:18px;
    box-shadow:0 16px 40px rgba(0,0,0,.5);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.dropdown-menu a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    height:auto;
    padding:8px 12px;
    font-size:30px;
    color:var(--gold-light);
    border:1px solid transparent;
    border-radius:12px;
    white-space:nowrap;
    transition:color .25s, background .25s, border-color .25s;
}

.dropdown-menu a:hover{
    background:rgba(242,164,36,.16);
    border-color:rgba(253,230,176,.4);
    color:#fff;
}



/* =========================================================
   Banner
   1920 × 1080
========================================================= */

.hero{

    width:100%;

    aspect-ratio:1920 / 1080;

    min-height:720px;


    background:#000;

    overflow:hidden;

}


.hero img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}



/* =========================================================
   多种题材短剧
   1920 × 820

   ★ 本次重点优化轮播区域
========================================================= */

.genres{

    height:820px;

    background:
        linear-gradient(
            180deg,
            #111 0%,
            #171717 70%,
            #080808 100%
        );

    overflow:hidden;

    padding-top:58px;

    background-image: url("./img/bg6.jpg");
    background-size: 100% 100%;

}


.genre-title{

    color:var(--gold);

    font-family:var(--puhui);

    font-size:48px;

    line-height:1;

    font-weight:700;

    text-align:center;

    margin-bottom:32px;

}



/* ---------------------------------------------------------
   轮播整体

   原来：
   585px

   现在：
   650px

   给底部分类文字预留空间
--------------------------------------------------------- */

.genre-carousel{

    position:relative;

    width:1740px;

    height:650px;

    margin:0 auto;

}



/* ---------------------------------------------------------
   viewport

   重点：

   高度由 585px 增加到 650px，
   防止中间放大卡片底部文字被裁切
--------------------------------------------------------- */

.genre-viewport{

    position:relative;

    width:100%;

    height:650px;

    overflow:hidden;

}



/* ---------------------------------------------------------
   track
--------------------------------------------------------- */

.genre-track{

    height:650px;

    display:flex;

    align-items:flex-start;

    gap:24px;

    will-change:transform;

    transition:
        transform .55s
        cubic-bezier(
            .4,
            0,
            .2,
            1
        );

}



/* =========================================================
   卡片

   ★ 这里不再让 genre-name 跑到卡片外面
========================================================= */

.genre-card{

    flex:

        0 0 283px;

    width:283px;

    height:500px;

    position:relative;

    cursor:pointer;

    flex-shrink:0;

    z-index:1;

    transition:

        width .55s
        cubic-bezier(
            .4,
            0,
            .2,
            1
        ),

        height .55s
        cubic-bezier(
            .4,
            0,
            .2,
            1
        ),

        transform .3s,

        z-index 0s;

}



/* ---------------------------------------------------------
   当前中间卡片

   图片：
   439 × 585

   整张卡片：
   439 × 650

   其中底部 65px 专门放文字
--------------------------------------------------------- */

.genre-card.is-active{

    flex-basis:439px;

    width:439px;

    height:650px;

    z-index:50;

}



to{
        transform:scale(1);
    }




/* =========================================================
   海报区域

   普通：
   283 × 425

   放大：
   439 × 585
========================================================= */

.genre-poster{

    width:100%;

    height:425px;

    overflow:hidden;

    background:#242424;

    position:relative;

    z-index:1;

}



/* 中间放大的海报 */

.genre-card.is-active
.genre-poster{

    height:585px;

}



/* =========================================================
   海报图片
========================================================= */

.genre-poster img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .45s;

}


.genre-card:hover
.genre-poster img{

    transform:scale(1.035);

}



/* =========================================================
   分类文字

   ★ 重大修改：

   不再使用 bottom:-48px

   而是让文字成为卡片的一部分，
   位于海报正下方。

   因此不会被 viewport 裁掉。
========================================================= */

.genre-name{

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;

    width:100%;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--gold);

    font-family:var(--serif);

    font-size:33px;

    line-height:1;

    font-weight:400;

    white-space:nowrap;

    z-index:100;

    background:transparent;

}



/* 中间卡片分类文字 */

.genre-card.is-active
.genre-name{

    height:65px;

    font-size:33px;

    z-index:120;

}



/* =========================================================
   当前卡片文字增加轻微背景保护

   防止两侧图片视觉上压过文字
========================================================= */

.genre-card.is-active
.genre-name::before{

    content:"";

    position:absolute;

    left:25%;

    right:25%;

    top:12px;

    bottom:12px;

    z-index:-1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,0,0,.5),
            transparent
        );

    pointer-events:none;

}



/* =========================================================
   左右按钮
========================================================= */

.genre-arrow{

    position:absolute;

    z-index:200;

    top:292px;

    transform:translateY(-50%);

    width:58px;

    height:58px;

    border:
        1px solid
        rgba(
            253,
            230,
            176,
            .6
        );

    border-radius:50%;

    background:
        rgba(
            0,
            0,
            0,
            .55
        );

    color:var(--gold-light);

    font-size:42px;

    line-height:1;

    cursor:pointer;

    transition:.25s;

}


.genre-prev{

    left:-76px;

}


.genre-next{

    right:-76px;

}


.genre-arrow:hover{

    background:
        rgba(
            242,
            164,
            36,
            .25
        );

    border-color:
        var(--gold-light);

}



/* =========================================================
   关于我们
   1920 × 608
========================================================= */

.about{

    height:608px;

    color:#000;

    padding-top:42px;

    background-image: url("./img/bg1.png");
    background-size: 100% 100%;

}


.about-title,
.products-title{

    text-align:center;

    font-family:var(--puhui);

    font-size:48px;

    font-weight:700;

    line-height:1;

    color:#000;

}


.about-desc{

    width:1320px;

    margin:28px auto 0;

    text-align:center;

    color:#000;

    font-family:var(--serif);

    font-size:28px;

    line-height:1.55;

}


.feature-grid{

    width:1366px;

    margin:38px auto 0;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:36px;

}


.feature{

    height:218px;

    border:
        2px solid
        #51432d;

    border-radius:31px;

    display:flex;

    align-items:center;

    color:#000;

}


.feature-icon{

    width:230px;

    height:230px;

    flex:0 0 230px;

    border-radius:12px;

    display:grid;

    place-items:center;

    font-size:52px;

    margin-right:28px;

}

.feature-icon-left{
    background-image: url("img/icon/ab1.png");
    background-size: 100% 100%;
}

.feature-icon-right{
    background-image: url("img/icon/ab2.png");
    background-size: 100% 100%;
}

.feature h3{

    font-family:var(--puhui);

    font-size:36px;

    font-weight:700;

    margin-bottom:12px;

}


.feature p{

    font-family:var(--serif);

    font-size:28px;

    line-height:1.45;

}



/* =========================================================
   产品介绍
   1920 × 608
========================================================= */

.products{

    height:608px;

    /* padding-top:42px; */

    color:#fff;

    background-image: url("./img/bg5.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.products-title{

    color:var(--gold);

    font-size:48px;

}


.products-subtitle{

    text-align:center;

    margin-top:22px;

    color:var(--gold);

    font-family:var(--serif);

    font-size:35px;

}


.product-grid{

    width:1366px;

    margin:38px auto 0;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:42px;

}


.product-card{

    height:268px;

    border:
        2px solid
        #9c7120;

    border-radius:24px;

    padding:24px 44px;

    text-align:center;

}


.product-card h3{

    color:var(--gold);

    font-family:var(--serif);

    font-size:33px;

    font-weight:700;

    margin-bottom:14px;

}


.product-card p{

    color:var(--gold);

    font-family:var(--serif);

    font-size:26px;

    line-height:1.45;

}


.product-link{

    display:block;

    margin-top:10px;

    color:#f7c643;

    font-family:var(--serif);

    font-size:26px;

}



/* =========================================================
   联系方式
   1920 × 360
========================================================= */

.contact{

    height:360px;

    background:#000;

    color:#fff;

    padding-top:58px;

}


.contact-inner{

    width:1400px;

    margin:0 auto;

    display:grid;

    grid-template-columns:400px 1fr;

    gap:100px;

}


.contact-title{

    font-family:var(--puhui);

    font-size:28px;

    line-height:1.3;

    margin-bottom:18px;

    position:relative;

    padding-left:30px;

}


.contact-title:before{

    content:"";

    position:absolute;

    left:0;

    top:2px;

    width:9px;

    height:54px;

    background:var(--gold);

    border-radius:5px;
}


.contact-text{

    font-family:var(--serif);

    font-size:22px;

    line-height:1.7;

    color:#fff;

}

.contact-address-title{

    font-family:var(--serif);

    font-size:22px;

    line-height:1.5;

    margin-bottom:4px;

}


.contact-address{

    font-family:var(--serif);

    font-size:22px;

    line-height:1.55;

    color:#fff;

    max-width:850px;

}


.contact-business{

    font-family:var(--serif);

    font-size:22px;

    line-height:1.65;

    margin-top:25px;

    color:#fff;

}


.contact-email{

    font-family:var(--serif);

    font-size:22px;

    line-height:1.6;

    color:#fff;

}




/* =========================================================
   公司简介
   1920 × 1080
========================================================= */

.company{

    height:1080px;

    background:#000;

    color:#fff;

    padding-top:70px;

}


.company-inner{

    width:1520px;

    margin:0 auto;

    padding-left:0;

}


.company-nav{

    height:120px;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    border-top:1px solid #111;

}


.company-nav .logo{

    padding-top:28px;

    font-size:42px;

}


.company-nav .nav-menu{

    padding-top:24px;

}


.company-nav .nav-menu a{

    font-size:26px;

    min-width:110px;

    height:42px;

}


.company-copy{

    width:1320px;

    margin:0 auto;

    padding-left:28px;

}


.company-copy h2{

    font-family:var(--sans);

    font-size:48px;

    color:var(--gold);

    line-height:1.2;

    margin:24px 0 12px;

}


.company-copy h3{

    font-family:var(--sans);

    font-size:36px;

    color:var(--gold);

    line-height:1.2;

    margin:34px 0 12px;

}


.company-copy p{

    font-family:var(--sans);

    font-size:36px;

    line-height:1.6;

    color:#fff;

}
.border-left {
    position: relative;
    padding-left: 24px;
}
.border-left:before{

    content:"";

    position:absolute;

    left:0;

    top:2px;

    width:9px;

    height:100%;

    background:var(--gold);

    border-radius:5px;
}


/* =========================================================
   内页导航
========================================================= */

.inner-nav{

    height:120px;

    background:#000;

    border-top:1px solid #222;

    border-bottom:1px solid #222;

    display:flex;

    align-items:center;

}


.inner-nav .nav-inner{

    height:120px;

    padding:0 108px;

    align-items:center;

}


.inner-nav .logo{

    padding-top:0;

    font-size:42px;

}


.inner-nav .nav-menu{

    padding-top:0;

}


.inner-nav .nav-menu a{

    font-size:26px;

    min-width:110px;

    height:42px;

}



/* =========================================================
   短剧应用
   1920 × 1080
========================================================= */

.short-page{

    height:1080px;

    color:#000;

    position:relative;

    overflow:hidden;

    background-image: url("./img/bg1.png");
    background-size: 100% 100%;

    display: flex;
}


.page-content{

    width:1680px;

    height:100%;

    margin:0 auto;

    position:relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

}


.page-heading{

    height:150px;

    display:flex;

    align-items:center;

    gap:26px;

}


.app-logo-placeholder{

    width:110px;

    height:110px;

    display:grid;

    place-items:center;

    color:#494747;

    font-size:52px;

    flex:0 0 110px;


}
.sp_logo {
    background-image: url("img/icon/sp-logo.png");
    background-size: 100% 100%;
}
.game_logo {
    background-image: url("img/icon/game-logo.png");
    background-size: 100% 100%;
}

.page-heading h1{

    font-family:var(--puhui);

    font-size:100px;

    line-height:1;

    font-weight:700;

    color:#494747;

}


.page-heading .get-app{

    font-family:var(--sans);

    font-size:50px;

    color:#494747;

    margin-left:12px;

}


.short-body{

    /* height:810px; */

    display:grid;

    grid-template-columns:1fr 760px;

    gap:45px;

    align-items:center;

}


.short-copy{

    padding:28px 0 0 0;

}


.short-copy .title-box{

    border:2px solid #494747;

    border-radius:28px;

    padding:28px 32px;

    width:760px;

    min-height:500px;

    display:flex;

    flex-direction:column;

}


.short-copy h2{

    font-family:var(--sans);

    font-size:45px;

    color:#000;

    margin-bottom:26px;

}


.short-copy p{

    font-family:var(--sans);

    font-size:38px;

    line-height:1.75;

    color:#000;

}


.short-media{

    width:760px;

    height:650px;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    /* padding-top:10px; */

}


.media-placeholder{

    width:520px;

    height:620px;

    display:grid;

    place-items:center;

    color:#494747;

    font-family:var(--serif);

    font-size:30px;

    text-align:center;

}

.sp-img{
    background-image: url("img/prod-sp.png");
    background-size: 100% 100%;
}

.game-img {
    background-image: url("img/prod-game.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


.media-placeholder small{

    font-size:20px;

}



/* =========================================================
   休闲游戏
   1920 × 1080
========================================================= */

.game-page{

    height:1080px;

    color:#000;

    position:relative;

    overflow:hidden;

    background-image: url("./img/bg1.png");
    background-size: 100% 100%;
}


.game-body{

    /* height:810px; */

    display:grid;

    grid-template-columns:760px 1fr;

    gap:45px;

    align-items:center;

}


.game-copy{

    padding-top:28px;

}


.game-copy .title-box{

    border:2px solid #494747;

    border-radius:28px;

    padding:28px 32px;

    width:760px;

    min-height:500px;

    display:flex;

    flex-direction:column;

}



.short-copy .title-box h2,
.game-copy .title-box h2{

    flex:1;

    display:flex;

    align-items:center;

}



.short-copy .title-box p,
.game-copy .title-box p{

    flex:2;

}


.game-copy h2{

    font-family:var(--sans);

    font-size:45px;

    color:#000;

    margin-bottom:26px;

}


.game-copy p{

    font-family:var(--sans);

    font-size:38px;

    line-height:1.75;

    color:#000;

}


.game-media{

    width:760px;

    height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.game-media .media-placeholder{

    width:573px;

    height:573px;

}



/* =========================================================
   商务洽谈
   1920 × 1080
========================================================= */

.business{

    height:1080px;

    background:
        linear-gradient(
            180deg,
            #191919,
            #050505
        );

    color:#fff;

    position:relative;

    overflow:hidden;

}


.business-title{
    width: max(299px, 23.333vw);
    height: max(79px, 7.292vw);

    padding-top:0;

    margin: 0 auto 30px;

}


.business-grid{

    width:1548px;

    margin:0 auto;

    display:grid;

    grid-template-columns:520px 968px;

    gap:60px;

    align-items:start;

}


.cooperation-card{

    height:180px;

    padding:26px 30px;

    border:1px solid #5b4a2d;

    background:
        rgba(
            35,
            31,
            24,
            .72
        );

    text-align:center;

}


.cooperation-card .title{

    font-family:var(--puhui);

    font-size:36px;

    color:var(--gold);

    margin-bottom:8px;

    text-align: center;

}


.cooperation-card p{

    font-family:var(--puhui);

    font-size:22px;

    line-height:1.6;

    color:var(--gold);

    text-align: left;

}


.form-card{

    width:968px;

    height:554px;

    border:1px solid #6d5732;

    background:#242426;

    color:#fff;

}


.form-title{

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-bottom:1px solid #8b6f3d;

    font-family:var(--puhui);

    font-size:25px;

    color:var(--gold);

}


.form-row{

    height:82px;

    display:grid;

    grid-template-columns:220px 1fr;

    border-bottom:1px solid #d3b98b;

}


.form-row label{

    display:flex;

    align-items:center;

    justify-content: center;

    padding:0 24px;

    border-right:1px solid #d3b98b;

    font-family:var(--puhui);

    font-size:25px;

    color:var(--gold);
    color: #d3b98b;
}


.form-row input,
.form-row select,
.form-row option,
.form-row textarea{

    width:100%;

    height:100%;

    border:0;

    outline:0;

    background:transparent;

    color:#fff;

    font-family:var(--puhui);

    font-size:23px;

    padding:14px 20px;
    color: #d3b98b;
}
.form-row option {
    background-color: #242426;
}

.form-row select{

      /* 1. 移除默认外观（注意添加浏览器前缀） */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 24px 20px; /* 控制箭头大小 */
}


.form-row textarea{

    resize:none;

}


.form-actions{

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.submit-button{

    min-width:100px;

    height:38px;

    border:1px solid #8b6f3d;

    border-radius:20px;

    background:#242426;

    color:#fff;

    cursor:pointer;

    font-family:var(--puhui);

    font-size:22px;

}


.business-mail{

    position:absolute;

    bottom:22px;

    left:0;

    right:0;

    text-align:center;

    color:var(--gold);

    font-family:var(--puhui);

    font-size:32px;

}

.business-mail a{
    color:inherit;
    text-underline-offset: 12px
    /* text-decoration:none; */
}



/* =========================================================
   1280 最小宽度适配
========================================================= */






/* =========================================================
   设计图精修：仅优化布局与排版，不替换任何图片/图标
   1920px 设计稿基准
========================================================= */

.header{
    height:120px;
}

.nav-inner{
    max-width:1920px;
    padding:0 108px;
}

.logo{
    width:394px;
    height:72px;
    padding-top:24px;
    font-size:47px;
}

.nav-menu{
    gap:8px;
    padding-top:14px;
}

.nav-menu a{
    width:134px;
    min-width:134px;
    height:74px;
    font-size:32px;
}

.hero{
    aspect-ratio:1920 / 1080;
    min-height:0;
    max-height:none;
}

.genres{
    height:820px;
    padding-top:58px;
}

.genre-title{
    font-size:48px;
    margin-bottom:32px;
}

.genre-carousel,
.genre-viewport,
.genre-track{
    height:650px;
}

.genre-card{
    flex-basis:283px;
    width:283px;
    height:500px;
}

.genre-card.is-active{
    flex-basis:439px;
    width:439px;
    height:650px;
}

.genre-poster{
    width:283px;
    height:425px;
}

.genre-card.is-active .genre-poster{
    width:439px;
    height:585px;
}

.genre-name{
    height:65px;
    font-size:33px;
    color:#f2a424;
}

.genre-card.is-active .genre-name{
    height:65px;
    font-size:33px;
}

.about{
    height:608px;
    padding-top:42px;
}

.about-title,
.products-title{
    font-size:48px;
}

.about-desc{
    width:1320px;
    margin-top:20px;
    font-size:28px;
    line-height:1.45;
}

.feature-grid{
    width:1366px;
    margin-top:30px;
    grid-template-columns:665px 665px;
    gap:36px;
}

.feature{
    width:665px;
    height:218px;
    border-radius:31px;
}

.feature-icon{
    width:230px;
    height:230px;
    flex:0 0 230px;
    margin-right:28px;
}

.feature h3{
    font-size:31px;
    margin-bottom:10px;
}

.feature p{
    font-size:28px;
    line-height:1.35;
}

.products{
    height:608px;
    /* padding-top:42px; */
}

.products-subtitle{
    margin-top:18px;
    font-size:26px;
}

.product-grid{
    width:1366px;
    margin-top:30px;
    grid-template-columns:665px 665px;
    gap:36px;
}

.product-card{
    width:665px;
    height:218px;
    border-radius:24px;
    padding:24px 44px;
}

.product-card h3{
    font-size:38px;
    margin-bottom:14px;
}

.product-card p{
    font-size:26px;
    line-height:1.45;
}

.product-link{
    margin-top:8px;
    font-size:26px;
}

.contact{
    height:360px;
    padding-top:58px;
}

.contact-inner{
    width:1400px;
    grid-template-columns:400px 1fr;
    gap:100px;
}

.contact-title{
    font-size:28px;
}

.contact-text,
.contact-address-title,
.contact-address,
.contact-business,
.contact-email{
    font-size:22px;
}

.company{
    height:1080px;
    padding-top:42px;
}

.company-inner{
    width:1520px;
}

.company-copy{
    width:1320px;
    padding-left:28px;
}

.company-copy h2{
    font-size:48px;
    margin:24px 0 12px;
}

.company-copy h3{
    font-size:36px;
    margin:34px 0 12px;
}

.company-copy p{
    font-size:28px;
    line-height:1.6;
}

.short-page,
.game-page,
.business{
    height:1080px;
}

.page-content{
    width:1680px;
}

.page-heading{
    height:150px;
}

.app-logo-placeholder{
    width:137px;
    height:133px;
    flex:0 0 137px;
}

.page-heading h1{
    font-size:100px;
}

.page-heading .get-app{
    font-size:50px;
}

.short-body{
    grid-template-columns:760px 760px;
    gap:45px;
}

.short-copy{
    padding-top:28px;
}

.short-copy .title-box,
.game-copy .title-box{
    width:760px;
    min-height:500px;
    padding:28px 32px;
    border-radius:28px;
}

.short-copy h2,
.game-copy h2{
    font-size:45px;
    margin-bottom:26px;
}

.short-copy p,
.game-copy p{
    font-size:38px;
    line-height:1.65;
}

.short-media,
.game-media{
    width:760px;
}

.game-body{
    grid-template-columns:760px 760px;
    gap:45px;
}

.game-copy{
    padding-top:28px;
}

.game-media .media-placeholder{
    width:573px;
    height:573px;
}


.business-title{
    font-size:36px;
    margin-bottom:30px;
}

.business-grid{
    width:1548px;
    grid-template-columns:520px 968px;
    gap:60px;
}

.cooperation-card{
    height:180px;
}

.form-card{
    width:968px;
    height:554px;
}

.business-mail{
    font-size:32px;
}

/* 仅保留页面最顶部一个主导航；不创建任何额外 header。 */
.company-nav,
.inner-nav{
    display:none;
}




/* =========================================================
   响应式布局：1280px ~ 1920px
   以 1920×1080 设计稿为基准，宽度缩小时等比例收缩。
   1920px 以上保持设计稿最大尺寸；1280px 为最小适配宽度。
   不修改任何图片、图标及其路径。
========================================================= */

/* 页面宽度以视口为基准，避免 1280~1919px 出现横向溢出 */
body,
.page{
    width:100%;
    min-width:1280px;
    max-width:none;
}

.section{
    max-width:none;
}

/* 主导航 */
.header{
    height:max(80px, 5.208vw);
}

.nav-inner{
    width:100%;
    max-width:none;
    height:100%;
    padding-left:max(72px, 5.625vw);
    padding-right:max(72px, 5.625vw);
}

.logo{
    width:max(263px, 20.52vw);
    height:max(48px, 3.75vw);
    padding-top:max(16px, 1.25vw);
    font-size:max(31px, 2.448vw);
}

.nav-menu{
    gap:max(5px, .417vw);
    padding-top:max(9px, .729vw);
}

.nav-menu a{
    width:max(96px, 6.979vw);
    min-width:max(96px, 6.979vw);
    height:max(49px, 3.854vw);
    padding:0 max(4px, .417vw);
    font-size:max(21px, 1.25vw);
    border-radius:max(16px, 1.25vw);
    margin: 0 8px;
}

/* 「产品中心」含下拉箭头，需比普通菜单项更宽，容纳文字 + 箭头 */
.nav-menu .has-dropdown > a{
    width:max(120px, 6.979vw);
    min-width:max(120px, 6.979vw);
}

/* 产品中心下拉菜单：随菜单项等比例缩放，避免窄屏下字号/尺寸失调 */
.dropdown-menu{
    min-width:max(120px, 6.979vw);
    /* padding:max(7px, .521vw); */
    border-radius:max(13px, .938vw);
    top:calc(100% + max(8px, .625vw));
}

.dropdown-menu a{
    padding:max(4px, .417vw) max(8px, .625vw);
    font-size:max(18px, 1.042vw);
    border-radius:max(8px, .625vw);
    width: 100%;
}

.has-dropdown > a::after{
    margin-left:max(8px, .625vw);
    border-left:max(5px, .365vw) solid transparent;
    border-right:max(5px, .365vw) solid transparent;
    border-top:max(6px, .469vw) solid currentColor;
}

/* Banner：始终保持 16:9 */
.hero{
    width:100%;
    height:calc(100vh - max(80px, 5.208vw));
    min-height:0;
    max-height:none;
}

.hero img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* 多种题材短剧 */
.genres{
    height:42.708333vw;
    min-height:600px;
    padding-top:max(39px, 3.021vw);
}

.genre-title{
    font-size:max(32px, 2.5vw);
    margin-bottom:max(21px, 1.667vw);
}

.genre-carousel{
    width:calc(100% - max(120px, 9.375vw));
    max-width:1740px;
    height:max(433px, 33.854vw);
}

.genre-viewport{
    width:100%;
    height:100%;
}

.genre-track{
    height:100%;
    gap:max(16px, 1.25vw);
}

.genre-card{
    flex-basis:max(189px, 14.74vw);
    width:max(189px, 14.74vw);
    height:max(333px, 26.042vw);
}

.genre-card.is-active{
    flex-basis:max(293px, 22.865vw);
    width:max(293px, 22.865vw);
    height:max(433px, 33.854vw);
}

.genre-poster{
    width:100%;
    height:max(283px, 22.135vw);
}

.genre-card.is-active .genre-poster{
    width:100%;
    height:max(390px, 30.469vw);
}

.genre-name{
    height:max(43px, 3.385vw);
    font-size:max(22px, 1.719vw);
}

.genre-card.is-active .genre-name{
    height:max(43px, 3.385vw);
    font-size:max(22px, 1.719vw);
}

.genre-arrow{
    width:max(40px, 3.021vw);
    height:max(40px, 3.021vw);
    font-size:max(28px, 2.188vw);
}

.genre-prev{ left:min(-50px, -3.958vw); }
.genre-next{ right:min(-50px, -3.958vw); }

/* 关于我们 */
.about{
    height:31.666667vw;
    min-height:405px;
    padding-top:max(28px, 2.188vw);
}

.about-title,
.products-title{
    font-size:max(32px, 2.5vw);
}

.about-desc{
    width:68.75vw;
    margin-top:max(13px, 1.042vw);
    font-size:max(19px, 1.458vw);
    line-height:1.45;
}

.feature-grid{
    width:71.146vw;
    margin-top:max(20px, 1.563vw);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:max(18px, 1.875vw);
}

.feature{
    width:auto;
    height:max(145px, 11.354vw);
    border-radius:max(20px, 1.615vw);
}

.feature-icon{
    width:max(153px, 11.979vw);
    height:max(153px, 11.979vw);
    flex:0 0 max(153px, 11.979vw);
    margin-right:max(18px, 1.458vw);
}

.feature h3{
    font-size:max(21px, 1.615vw);
    margin-bottom:max(6px, .521vw);
}

.feature p{
    font-size:max(19px, 1.458vw);
    line-height:1.35;
}

/* 产品介绍 */
.products{
    height:31.666667vw;
    min-height:405px;
    /* padding-top:max(28px, 2.188vw); */
}

.products-subtitle{
    margin-top:max(12px, 1.667vw);
    font-size:max(18px, 1.354vw);
}

.product-grid{
    width:71.146vw;
    margin-top:max(20px, 3.11vw);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:max(18px, 1.875vw);
}

.product-card{
    width:auto;
    height:max(145px, 11.354vw);
    border-radius:max(16px, 1.25vw);
    padding:max(16px, 1.25vw) max(23px, 2.292vw);
}

.product-card h3{
    font-size:max(25px, 1.979vw);
    margin-bottom:max(8px, .729vw);
}

.product-card p{
    font-size:max(17px, 1.354vw);
    line-height:1.45;
}

.product-link{
    margin-top:max(5px, .417vw);
    font-size:max(17px, 1.354vw);
}

/* 联系方式 */
.contact{
    height:18.75vw;
    min-height:240px;
    padding-top:max(39px, 3.021vw);
}

.contact-inner{
    width:72.917vw;
    grid-template-columns:max(267px, 20.833vw) minmax(0, 1fr);
    gap:max(67px, 5.208vw);
}

.contact-title{
    font-size:max(19px, 1.458vw);
}

.contact-text,
.contact-address-title,
.contact-address,
.contact-business,
.contact-email{
    font-size:max(15px, 1.146vw);
}

/* 公司简介 */
.company{
    height:56.25vw;
    min-height:720px;
    padding-top:max(28px, 2.188vw);
}

.company-inner{
    width:79.167vw;
}

.company-copy{
    width:68.75vw;
    padding-left:max(19px, 1.458vw);
}

.company-copy h2{
    font-size:max(32px, 2.5vw);
    margin:max(16px, 1.25vw) 0 max(8px, .625vw);
}

.company-copy h3{
    font-size:max(24px, 1.875vw);
    margin:max(23px, 1.771vw) 0 max(8px, .625vw);
}

.company-copy p{
    font-size:max(19px, 1.458vw);
    line-height:1.6;
}

.border-left{
    padding-left:max(16px, 1.25vw);
}

.border-left:before{
    width:max(6px, .469vw);
}

/* 短剧 / 休闲游戏 / 商务：保持 16:9 设计比例 */
.short-page,
.game-page,
.business{
    height:calc(100vh - max(80px, 5.208vw));
    /* min-height:720px; */
    min-height: calc(720px - max(80px, 5.208vw));
    /* max-height:1080px; */
    
}

.page-content{
    width:87.5vw;
}

.page-heading{
    height:max(100px, 7.813vw);
    gap:max(17px, 1.354vw);
}

.app-logo-placeholder{
    width:max(73px, 7.135vw);
    height:max(71px, 6.927vw);
    flex:0 0 max(73px, 7.135vw);
}

.page-heading h1{
    font-size:max(67px, 5.208vw);
}

.page-heading .get-app{
    font-size:max(33px, 2.604vw);
}

.short-body,
.game-body{
    gap:max(24px, 2.344vw);
    /* height:calc(100% - max(100px, 7.813vw)); */
}

.short-body{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.game-body{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
}

.short-copy,
.game-copy{
    padding-top:max(19px, 1.458vw);
}

.short-copy .title-box,
.game-copy .title-box{
    width:100%;
    min-height:max(333px, 26.042vw);
    padding:max(19px, 1.458vw) max(21px, 1.667vw);
    border-radius:max(19px, 1.458vw);
}

.short-copy h2,
.game-copy h2{
    font-size:max(30px, 2.344vw);
    margin-bottom:max(17px, 1.354vw);
}

.short-copy p,
.game-copy p{
    font-size:max(25px, 1.68vw);
    line-height:1.65;
}

.short-media,
.game-media{
    width:100%;
    height:max(433px, 33.854vw);
    height: auto;
}

.short-media .media-placeholder{
    width:max(347px, 27.083vw);
    height:max(413px, 31.25vw);
}

.game-media .media-placeholder{
    width:max(382px, 29.844vw);
    height:max(382px, 29.844vw);
}


.business-title{
    font-size:max(24px, 1.875vw);
    margin-bottom:max(15px, 1.562vw);
}

.business-grid{
    width:80.625vw;
    grid-template-columns:minmax(0, .5372fr) minmax(0, 1fr);
    gap:max(40px, 3.125vw);
}

.cooperation-card{
    height:max(120px, 9.375vw);
    padding:max(12px, 1.354vw) max(12px, 1.5625vw);
}

.cooperation-card .title{
    font-size:max(24px, 1.875vw);
    margin-bottom:max(6px, .417vw);
}

.cooperation-card p{
    font-size:max(15px, 1.146vw);
}

.form-card{
    width:100%;
    height:auto;
}

.form-title{
    height:max(39px, 3.021vw);
    font-size:max(17px, 1.302vw);
}

.form-row{
    height:max(40px, 3.125vw);
    grid-template-columns:max(147px, 11.458vw) minmax(0, 1fr);
}

/* 需求描述多行输入框：给小屏留出更高的输入区域 */
.form-row:has(textarea){
    height:max(96px, 7.5vw);
}

.form-row label{
    padding:0 max(16px, 1.25vw);
    font-size:max(17px, 1.302vw);
}

.form-row input,
.form-row select,
.form-row textarea{
    font-size:max(15px, 1.198vw);
    padding:max(9px, .729vw) max(13px, 1.042vw);
}

.form-actions{
    height:max(52px, 4.063vw);
}

.submit-button{
    min-width:max(67px, 5.208vw);
    height:max(25px, 1.979vw);
    font-size:max(15px, 1.146vw);
}

.business-mail{
    bottom:max(15px, 1.146vw);
    font-size:max(21px, 1.667vw);
}

/* 1280px：作为明确的最低设计边界，避免任何内容小于可用尺寸 */
@media (max-width:1280px){
    html,
    body{
        min-width:1280px;
    }

    .page{
        min-width:1280px;
    }
}

/* 1920px 以上：保持设计稿比例与最大尺寸 */

/* =========================================================
   提交结果弹窗
========================================================= */

.modal-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.72);
    display:none;
    align-items:center;
    justify-content:center;
}

.modal-overlay.is-open{
    display:flex;
}

.modal-box{
    width:max(347px, 27.083vw);
    max-width:88vw;
    padding:44px 40px 40px;
    background:#242426;
    border:1px solid #8b6f3d;
    border-radius:18px;
    text-align:center;
    color:#fff;
}

.modal-icon{
    width:max(45px, 3.542vw);
    height:max(45px, 3.542vw);
    margin:0 auto 22px;
    border-radius:50%;
    background:var(--gold);
    color:#000;
    font-size:max(25px, 1.979vw);
    line-height:max(45px, 3.542vw);
    text-align:center;
}

.modal-icon.is-error{
    background:#c0392b;
    color:#fff;
}

.modal-text{
    font-family:var(--puhui);
    font-size:max(16px, 1.25vw);
    line-height:1.6;
    color:var(--gold-light);
    margin-bottom:30px;
}

.modal-close{
    min-width:max(80px, 5.208vw);
    height:max(27px, 2.083vw);
    border:1px solid #8b6f3d;
    border-radius:20px;
    background:#242426;
    color:#fff;
    cursor:pointer;
    font-family:var(--puhui);
    font-size:max(13px, 1.042vw);
    transition:.25s;
}

.modal-close:hover{
    border-color:var(--gold-light);
}


/* =========================================================
   品牌简介页内容垂直居中
========================================================= */



/* =========================================================
   内容避开固定 header（所有页面）
========================================================= */

.page{
    padding-top:max(80px, 5.208vw);
}

.about-page .page {
    padding-top: 0;
    background-image: url("./img/bg2.jpg");
    background-size: 100% 100%;
}
.business-bg {
    background-image: url("./img/bg3.jpg");
    background-size: 100% 100%;
}
.business-bg-1 {
    background-image: url("./img/bg4.png");
    background-size: 100% 100%;
}

/* =========================================================
   ABOUT / 品牌简介页 · 设计稿最终精修
   基准：1920 × 1080
   依据设计图：
   - 黑色全屏背景
   - 主内容左右各预留 200px 安全边距
   - 所有正文统一左对齐
   - 标题/正文使用思源黑体体系
   - 所有正文左侧统一金色短竖线
   - 固定 Header 叠加在页面顶部，不额外增加页面高度
   - 1280px 为最小适配宽度
========================================================= */

/* About 页面本身就是 1920×1080 设计画布，
   Header 使用 fixed 叠加，因此这里不能再给 page 增加 120px 顶部高度。 */
body.about-page{
    min-width:1280px;
    background:#000;
}

.about-page.page{
    width:100%;
    min-width:1280px;
    padding-top:0 !important;
    background:#000;
}

/* 页面主区 */
.about-page .company{
    width:100%;
    margin-top:max(80px, 5.208vw);
    height:calc(100vh - max(80px, 5.208vw));
    min-height:0;
    max-height:none;
    padding:0;
    background:#000;
    overflow:hidden;
    display: flex;
    align-items: center;
}

/* 1920设计稿：
   1920 - 200 - 200 = 1520px */
.about-page .company-inner{
    width:calc(100% - max(400px, 20.833vw));
    min-width:880px;
    margin:0 auto;
    padding:0;
}

/* 所有内容严格左对齐，不再额外缩进 28px */
.about-page .company-copy{
    width:100%;
    margin:0;
    padding:0;
}

/* 主标题：设计标注 55号 */
.about-page .company-copy h2{
    margin:max(20px, 1.25vw) 0 max(10px, .625vw);
    padding:0;
    color:var(--gold);
    font-family:
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "思源黑体",
        "Microsoft YaHei",
        sans-serif;
    font-size:max(36px, 2.865vw);
    font-weight:700;
    line-height:1.2;
    letter-spacing:0;
}

/* 二级标题 */
.about-page .company-copy h3{
    margin:max(28px, 1.77vw) 0 max(9px, .625vw);
    padding:0;
    color:var(--gold);
    font-family:
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "思源黑体",
        "Microsoft YaHei",
        sans-serif;
    font-size:max(30px, 2.083vw);
    font-weight:700;
    line-height:1.2;
    letter-spacing:0;
}

/* 正文：设计标注 36号 */
.about-page .company-copy p{
    margin:0;
    padding:0;
    color:#fff;
    font-family:
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "思源黑体",
        "Microsoft YaHei",
        sans-serif;
    font-size:max(24px, 1.875vw);
    font-weight:400;
    line-height:1.6;
    letter-spacing:0;
}

/* 左侧统一金色短竖线
   高度跟随当前正文内容，顶部与文字首行对齐 */
.about-page .border-left{
    position:relative;
    width:100%;
    margin:0;
    padding-left:max(16px, 1.25vw);
}

.about-page .border-left::before{
    content:"";
    position:absolute;
    left:0;
    top:2px;
    width:max(6px, .469vw);
    height:calc(100% - 4px);
    border-radius:5px;
    background:var(--gold);
}

/* Header 与设计稿保持一致：透明渐变覆盖在黑色页面上 */
.about-page .header{
    height:max(80px, 5.208vw);
}

.about-page .nav-inner{
    width:100%;
    max-width:none;
    height:100%;
    padding-left:max(72px, 5.625vw);
    padding-right:max(72px, 5.625vw);
}

.about-page .logo{
    padding-top:max(16px, 1.25vw);
    font-size:max(31px, 2.448vw);
}

.about-page .nav-menu{
    gap:max(5px, .417vw);
    padding-top:max(9px, .729vw);
}

.about-page .nav-menu a{
    width:max(96px, 6.979vw);
    min-width:max(96px, 6.979vw);
    height:max(49px, 3.854vw);
    padding:0 max(4px, .417vw);
    font-size:max(21px, 1.25vw);
    border-radius:max(16px, 1.25vw);
    margin: 0 8px;
}

/* 「产品中心」含下拉箭头，需比普通菜单项更宽，容纳文字 + 箭头 */
.about-page .nav-menu .has-dropdown > a{
    width:max(120px, 6.979vw);
    min-width:max(120px, 6.979vw);
}

/* 1280px：仍然保持左右 200px 安全边距 */

/* 1920px及以上：严格锁定设计稿最大尺寸 */



/* =========================================================
   多种题材短剧轮播 · 最终动画覆盖层
   说明：不修改现有图片、HTML结构及其它页面样式。
   核心策略：卡片布局宽度保持稳定，active 仅使用 transform
   放大，从根源上避免 width/flex-basis 改变导致的跳动。
========================================================= */

.genres .genre-carousel {
    position: relative;
    width: calc(100% - max(120px, 9.375vw));
    max-width: 1740px;
    height: max(433px, 33.854vw);
    margin: 0 auto;
}

.genres .genre-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

.genres .genre-viewport.is-dragging {
    cursor: grabbing;
}

.genres .genre-track {
    display: flex;
    align-items: flex-start;
    gap: max(16px, 1.25vw);
    width: max-content;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    transition: transform .82s cubic-bezier(.22, .61, .36, 1);
}

.genres .genre-card {
    position: relative;
    flex: 0 0 max(189px, 14.74vw);
    width: max(189px, 14.74vw);
    height: max(333px, 26.042vw);
    flex-shrink: 0;
    cursor: pointer;
    z-index: 1;
    opacity: .42;
    filter: brightness(.72) saturate(.72);
    transform: translateY(28px);
    transform-origin: center top;
    transition: width .82s cubic-bezier(.22,.61,.36,1), flex-basis .82s cubic-bezier(.22,.61,.36,1), height .82s cubic-bezier(.22,.61,.36,1), transform .82s cubic-bezier(.22,.61,.36,1), opacity .65s ease, filter .65s ease;
}

.genres .genre-card.is-active {
    flex-basis: max(293px, 22.865vw);
    width: max(293px, 22.865vw);
    height: max(433px, 33.854vw);
    opacity: 1;
    filter: brightness(1) saturate(1);
    transform: translateY(0);
    z-index: 20;
}

.genres .genre-poster {
    width: 100%;
    height: max(283px, 22.135vw);
    overflow: hidden;
    background: #242424;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: height .82s cubic-bezier(.22,.61,.36,1), border-radius .82s ease, box-shadow .82s ease;
}

.genres .genre-card.is-active .genre-poster {
    height: max(390px, 30.469vw);
    border-radius: 20px;
    box-shadow: 0 28px 65px rgba(0,0,0,.30), 0 0 0 1px rgba(253,230,176,.18);
}

.genres .genre-poster img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 1s cubic-bezier(.22,.61,.36,1), filter .65s ease;
    -webkit-user-drag: none;
}

.genres .genre-card.is-active .genre-poster img {
    transform: scale(1.025);
    filter: brightness(1) saturate(1.02);
}

.genres .genre-card:not(.is-active) .genre-poster img {
    filter: brightness(.78) saturate(.78);
}

.genres .genre-card:hover .genre-poster img {
    transform: scale(1.035);
}

.genres .genre-name {
    position: relative;
    width: 100%;
    height: max(43px, 3.385vw);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(253,230,176,.48);
    font-family: var(--serif);
    font-size: max(22px, 1.719vw);
    line-height: 1;
    font-weight: 400;
    opacity: .65;
    transition: color .65s ease, opacity .65s ease, transform .65s ease;
}

.genres .genre-card.is-active .genre-name {
    color: var(--gold);
    opacity: 1;
    font-weight: 500;
    transform: translateY(0);
}

.genres .genre-card.is-active::after {
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: 3%;
    bottom: 5%;
    z-index: -1;
    border-radius: 25px;
    background: rgba(242,164,36,.12);
    filter: blur(28px);
    opacity: .65;
    pointer-events: none;
}

.genres .genre-arrow {
    position: absolute;
    top: 50%;
    z-index: 100;
    width: max(40px, 3.021vw);
    height: max(40px, 3.021vw);
    border: 1px solid rgba(253,230,176,.45);
    border-radius: 50%;
    background: rgba(0,0,0,.52);
    color: var(--gold-light);
    font-size: max(28px, 2.188vw);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 30px rgba(0,0,0,.22);
    transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.genres .genre-arrow svg {
    display: block;
    width: 1em;
    height: 1em;
}

.genres .genre-prev {
    left: min(-50px, -3.958vw);
}

.genres .genre-next {
    right: min(-50px, -3.958vw);
}

.genres .genre-arrow:hover {
    transform: translateY(-50%) scale(1.08);
    background: rgba(242,164,36,.18);
    box-shadow: 0 12px 36px rgba(0,0,0,.32);
}

.genres .genre-arrow:active {
    transform: translateY(-50%) scale(.94);
}

.genres .genre-arrow:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}



@media (prefers-reduced-motion: reduce) {
    .genres .genre-track,
    .genres .genre-card,
    .genres .genre-poster,
    .genres .genre-poster img,
    .genres .genre-name,
    .genres .genre-arrow {
        transition-duration: 1ms !important;
    }
}

/* =========================================================
   APPLE-STYLE SEAMLESS INFINITE CAROUSEL · FINAL OVERRIDE
   ---------------------------------------------------------
   这段必须位于整个 CSS 文件最后。
   轮播 JS 使用三组卡片 + 绝对定位，实现真正无缝循环。
========================================================= */

.genres .genre-carousel {
    position: relative !important;
    width: calc(100% - max(120px, 9.375vw)) !important;
    max-width: none !important;
    height: max(433px, 33.854vw) !important;
    margin: 0 auto !important;
}

.genres .genre-viewport {
    position: relative !important;
    width: 100% !important;
    height: max(433px, 33.854vw) !important;
    overflow: visible !important;

    /* 3D 透视：必须放在 preserve-3d 的直接父级，且不能 overflow:hidden 否则会 flatten */
    perspective: max(1200px, 62.5vw) !important;
    perspective-origin: 50% 50% !important;

    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
}

.genres .genre-viewport.is-dragging {
    cursor: grabbing;
}

.genres .genre-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: max(433px, 33.854vw) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform-style: preserve-3d !important;
}

.genres .genre-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    padding: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
    min-width: 0 !important;

    opacity: 1 !important;
    filter: none !important;
    animation: none !important;

    transform-origin: center center !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform !important;
}

.genres .genre-card.is-active {
    top: 50% !important;
    z-index: 50 !important;

    opacity: 1 !important;
    filter: none !important;
    animation: none !important;
}

.genres .genre-poster {
    position: relative !important;
    width: 100% !important;
    height: max(283px, 22.135vw);
    overflow: hidden !important;
    border-radius: 18px;
    background: #242424;
}

.genres .genre-card.is-active .genre-poster {
    width: 100% !important;
    height: max(390px, 30.469vw);
    border-radius: 20px;
}

.genres .genre-poster img,
.genres .genre-card:not(.is-active) .genre-poster img,
.genres .genre-card.is-active .genre-poster img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;

    /* ★ 彻底取消灰黑遮罩 */
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    transform: scale(1) !important;
    transition: transform .45s ease, filter .45s ease !important;
}

.genres .genre-card:hover .genre-poster img,
.genres .genre-card.is-active:hover .genre-poster img {
    opacity: 1 !important;
    filter: brightness(1.12) saturate(1.06) !important;
    transform: scale(1.05) !important;
}

.genres .genre-name {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--gold) !important;
    opacity: 1 !important;
    transform: none !important;
}

.genres .genre-card.is-active .genre-name {
    opacity: 1 !important;
    transform: none !important;
}

/* 不让 active 标题的旧背景伪元素制造黑色视觉 */
.genres .genre-card.is-active .genre-name::before {
    display: none !important;
}

/* Active 卡片只保留自然阴影，不参与尺寸动画 */
.genres .genre-card.is-active .genre-poster {
    box-shadow:
        0 28px 65px rgba(0, 0, 0, .30),
        0 0 0 1px rgba(253, 230, 176, .14);
}

/* hover 高亮：海报金色边框 + 图片亮度提升 + 文字更亮 */
.genres .genre-card:hover .genre-poster {
    box-shadow:
        0 28px 65px rgba(0, 0, 0, .35),
        0 0 0 3px var(--gold-light),
        0 0 28px rgba(253, 230, 176, .5) !important;
}

.genres .genre-card:hover .genre-name {
    color: var(--gold-light) !important;
}

/* 左右箭头 */
.genres .genre-arrow {
    z-index: 200 !important;
}

/* =========================================================
   1280px
========================================================= */

/* =========================================================
   1920px 及以上：锁定设计稿尺寸
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .genres .genre-card {
        transition: none !important;
    }
}

/* 轮播稳定性修复：禁止 active 卡片上下弹跳 */
.genre-card{animation:none!important;will-change:transform;}
.genre-card.is-active{animation:none!important;}
.genre-poster{transition:width 820ms cubic-bezier(.22,.61,.36,1),height 820ms cubic-bezier(.22,.61,.36,1);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.genre-poster img{backface-visibility:hidden;-webkit-backface-visibility:hidden;}


/* =========================================================
   首尾无缝切换稳定性修复 v3
   重定位期间 JS 会临时隐藏 track，避免 clone 替换产生闪帧。
========================================================= */

.genre-track{
    transform-style:preserve-3d;
    contain:none;
}

.genre-card,
.genre-poster,
.genre-poster img{
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.genre-poster img{
    image-rendering:auto;
}