/* --- 整体容器 --- */
.stage-container {
	width: 100%;
	box-sizing: border-box;
}
/* --- PC端：保持 41.25vw，无圆角，无边距 --- */
.main-stage {
	position: relative;
	width: 100%;
	height: 650px;
	overflow: hidden;
	background: #000;
}
.bg-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.bg-link {
	display: block;
	width: 100%;
	height: 100%;
}
.bg-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}
.bg-item.active {
	opacity: 1;
	z-index: 2;
}
.bottom-mask {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient(to top, rgba(20 22 26) 0%, rgba(0,0,0,0) 100%);
	z-index: 3;
	pointer-events: none;
}
.content-container {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	z-index: 10;
	max-width: 1808px;
	width: calc(100% - 120px);
	margin: 0 auto;
}
#dynamic-slogan {
	color: hsla(0,0%,100%,.85);
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 12px;
	transition: opacity 0.3s ease;
	text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
	/* Slogan 也保持单行省略 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nav-list {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scroll-behavior: smooth;
}
 .nav-list::-webkit-scrollbar {
display: none;
}
.slide-link {
	text-decoration: none;
	display: block;
	flex-shrink: 0;
}
.nav-item {
	display: flex;
	flex-direction: column;
	width: 96px;
}
.thumb-box {
	width: 100%;
	height: 55px;
	border-radius: 5px;
	overflow: hidden;
	border: 1.5px solid transparent;
	opacity: 0.5;
	transition: all 0.3s;
}
.thumb-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* --- 修正点：缩略图标题过长显示省略号 --- */
.movie-title {
	color: #888;
	font-size: 13px;
	margin-top: 5px;
	text-align: center;
	/* 核心截断代码 */
	display: block;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.slide-link.active .thumb-box {
	border-color: #fff;
	opacity: 1;
}
.slide-link.active .movie-title {
	color: #fff;
}

/* --- 修正移动端遮罩和高度逻辑 --- */
@media screen and (max-width: 767px) {
    .stage-container { 
        padding: 0 15px; 
        margin-top: 88px; 
        /* 确保容器背景也是黑色，防止缝隙漏色 */
        background-color: #14161a; 
    }

    .main-stage { 
        height: auto;
        aspect-ratio: 16 / 9; 
        border-radius: 6px; 
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        /* 关键：防止内部元素溢出产生的微小缝隙 */
        overflow: hidden; 
    }

    /* 修正底部的黑色遮罩 */
    .bottom-mask {
        position: absolute;
        /* 改为 -1px 往下多延伸一点，彻底封死缝隙 */
        bottom: -1px; 
        left: 0;
        width: 100%; 
        /* 稍微加高遮罩浓度，确保底部完全漆黑 */
        height: 60%; 
        background: linear-gradient(to top, rgba(20 22 26) 0%, rgba(0,0,0,0) 100%);
        z-index: 3;
        pointer-events: none;
    }

    /* 确保内容容器紧贴底部 */
    .content-container {
        width: 100%;
        padding: 0 10px; 
        bottom: 10px; /* 适当调低，让缩略图更靠下 */
        left: 0;
        box-sizing: border-box;
    }
    #dynamic-slogan {
    	font-size: 13px;
    	margin-bottom: 8px;
    }
    .nav-item {
    	width: 55px;
    }
    .thumb-box {
    	height: 32px;
    	border-width: 1px;
    }
    .movie-title {
    	font-size: 10px;
    	margin-top: 3px;
    }
    .nav-list {
    	gap: 8px;
    }
}