.popup-container>.character-dialog {
	top: calc(50% - var(--h) / 2 + var(--bt));
	left: calc(50% - var(--w) / 2 + var(--bl));
}
/*第一页界面内容*/
/*开始修改*/
.character-dialog {
	--w: 750px;
	--h: 450px;
	--bt: calc(var(--h) * 15 / 290);
	--bl: calc(var(--w) * 38 / 497);
	--bb: calc(var(--h) * 17 / 290);
	--dw: calc(var(--w) - 2 * var(--bl));
	--dh: calc(var(--h) - var(--bt) - var(--bb));
	width: var(--dw);
	height: var(--dh);
	position: absolute;
	box-sizing: border-box;
	padding: 10px;
	z-index: 13;
}
.character-dialog>.blackBg {
	padding: 10px 25px;
	position: relative;
	width: 100%;
	height: 115px;
	top: 0;
	left: -25px;
}
.blackBg.two {
	margin-top: 8px;
	height: 218px;
}
.character-dialog::before {
	content: "";
	top: calc(0% - var(--bt));
	left: calc(0% - var(--bl));
	width: var(--w);
	height: var(--h);
	position: absolute;
	background-image: url("./images/OL_line/dialog4.png");
	background-size: 100% 100%;
}
.character-dialog>div {
	top: 0;
	height: 100%;
	position: absolute;
}
/*第一页武将头像和边框*/
/*武将框*/
.character-dialog>.blackBg.one>div.biankuang3 {
	width: 25px;
	height: 185px;
	top: 32px;
	left: 43px;
	background-size: 100% 100%;
	z-index: 60;
	position: absolute;
	background: rgb(154, 148, 122);
	box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.8);
	filter: none;
	/* 移除原来的 drop-shadow */
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	visibility: visible;
}
.character-dialog>.blackBg.one>div.biankuang3::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../../image/decoration/border_diwen.png");
	background-size: 100% 100%;
	opacity: 0.4;
	z-index: 61;
}
/*武将*/
.character-dialog>.blackBg.one>div.biankuang2 {
	width: 175px;
	height: 190px;
	top: 30px;
	left: 20px;
	background-size: 100% 100%;
	z-index: 60;
	position: absolute;
	/* 新增投影 */
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
}
/*势力*/
.biankuang4 {
	width: 28px;
	height: 28px;
	top: 32px;
	left: 42px;
	background-size: 100% 100%;
	z-index: 60;
	position: absolute;
}
.xinxi {
	/*资料页启动按钮*/
	background: url("./images/OL_line/xinxi.png");
	background-size: 100% 100%;
	bottom: -240px;
	right: -20%;
	height: 65px;
	width: 80px;
}
/*武将名字*/
.character-dialog>.name {
	position: absolute;
	width: 24px;
	height: 135px;
	/* 新增固定高度 */
	left: 28px;
	overflow-y: auto;
	/* 改为垂直滚动 */
	overflow-x: hidden;
	/* 隐藏水平滚动 */
	top: 68px;
	font-size: 24px;
	font-family: shousha;
	z-index: 99;
	color: #ffffff;
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
	/* 黑色描边 */
	line-height: 24px;
	/* 确保行高匹配字体大小 */
	white-space: normal;
	/* 允许多行显示 */
}
.sjright {
	background: url("./images/OL_line/sj_btn.png");
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	right: -45px;
	top: 80px;
}
.sjleft {
	background: url("./images/OL_line/sj_btn.png");
	background-size: 100% 100%;
	width: 25px;
	height: 25px;
	transform: rotate(180deg);
	left: -55px;
	top: 80px;
}
/*吊坠*/
.diaozhui {
	width: 80px;
	height: 40px;
	top: -85px;
	left: 700px;
	background-size: 100% 100%;
	z-index: 60;
	position: absolute;
}
/*配件*/
.peijian {
	width: 270px;
	height: 30px;
	top: 210px;
	left: -63px;
	background-size: 100% 100%;
	z-index: 60;
	position: absolute;
}
/*人气值*/
.renqi {
	left: -15px;
	top: 335px;
	font-size: 20px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
}
/*胜率*/
.shenglv {
	left: 70px;
	top: 335px;
	font-size: 20px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
}
/*逃率*/
.taolv {
	left: 165px;
	top: 335px;
	font-size: 20px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
}
/*玩家名*/
.wanjia {
	font-size: 18px;
	font-family: shousha;
	/*font-weight: bolder;*/
	left: 30px;
	top: 275px;
	color: #efdbb6;
	font-weight: bold;
	text-align: center;
	z-index: 99;
}
/*大资料主页*/
.bigdialog {
	position: absolute;
	background: url("./images/OL_line/bigdialog.png");
	background-size: 100% 100%;
	width: 70%;
	height: 90%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 75;
}
/*官阶*/
.guanjie {
	background-size: 100% 100%;
	left: 17.8%;
	z-index: 78;
	width: 11%;
	height: 17%;
	top: 9%;
}
/*官阶文字*/
.guanjiewenzi {
	font-size: 16px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
	bottom: -37%;
	left: 0%;
	width: 104%;
}
/*资料页信誉分*/
.xinyufen {
	left: 22%;
	top: 34%;
	font-size: 16px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
}
/*资料页人气值*/
.renqizhi {
	left: 22%;
	top: 39.5%;
	font-size: 16px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
}
/* 将灯底图 */
.jddialog {
	background: url("./images/OL_line/jddialog.png");
	background-size: 100% 100%;
	z-index: 77;
	width: 42%;
	height: 37%;
	top: 7.8%;
	left: 31.3%;
}
/*每个将灯底图*/
.jdditu {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 3.3%;
	top: 10%;
	height: 25%;
	width: 15%;
	opacity: 1;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top;
	transition-property: opacity, transform;
	z-index: 69;
	position: relative;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));
	background: url("./images/OL_line/jdditu.png");
	background-size: 100% 100%;
}
/* 文字闪烁动画 */
@keyframes alternateImages {
	0%,
	49.9%,
	99.9% {
		opacity: 1.2;
	}
	24.9%,
	74.9% {
		opacity: 0.7;
	}
}
/*将灯图标*/
.jdtubiao {
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	animation: alternateImages 4s ease-in-out infinite reverse;
}
/*将灯图标暗*/
.jdtubiaoan {
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	filter: grayscale(100%) brightness(0.6);
}
/*流水灯动画*/
@keyframes flowingLights {
	0% {
		background-image: var(--first-image);
		opacity: 1;
	}
	24.9% {
		opacity: 0;
	}
	25% {
		background-image: var(--second-image);
		opacity: 0;
	}
	49.9% {
		opacity: 1;
	}
	50% {
		background-image: var(--second-image);
		opacity: 1;
	}
	74.9% {
		opacity: 0;
	}
	75% {
		background-image: var(--first-image);
		opacity: 0;
	}
	99.9% {
		opacity: 1;
	}
}
/*每个动画的图片*/
.jdbiaodonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/biao1.png");
	--first-image: url("./images/OL_line/biao1.png");
	--second-image: url("./images/OL_line/biao2.png");
}
.jdcuidonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/cui1.png");
	--first-image: url("./images/OL_line/cui1.png");
	--second-image: url("./images/OL_line/cui2.png");
}
.jdguodonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/guo1.png");
	--first-image: url("./images/OL_line/guo1.png");
	--second-image: url("./images/OL_line/guo2.png");
}
.jdjiangdonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/jiang1.png");
	--first-image: url("./images/OL_line/jiang1.png");
	--second-image: url("./images/OL_line/jiang2.png");
}
.jdjiangjiedonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/jiangjie1.png");
	--first-image: url("./images/OL_line/jiangjie1.png");
	--second-image: url("./images/OL_line/jiangjie2.png");
}
.jdjiedonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/jie1.png");
	--first-image: url("./images/OL_line/jie1.png");
	--second-image: url("./images/OL_line/jie2.png");
}
.jdmoudonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/mou1.png");
	--first-image: url("./images/OL_line/mou1.png");
	--second-image: url("./images/OL_line/mou2.png");
}
.jdqidonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/qi1.png");
	--first-image: url("./images/OL_line/qi1.png");
	--second-image: url("./images/OL_line/qi2.png");
}
.jdshandonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/shan1.png");
	--first-image: url("./images/OL_line/shan1.png");
	--second-image: url("./images/OL_line/shan2.png");
}
.jdshendonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/shen1.png");
	--first-image: url("./images/OL_line/shen1.png");
	--second-image: url("./images/OL_line/shen2.png");
}
.jdspdonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/sp1.png");
	--first-image: url("./images/OL_line/sp1.png");
	--second-image: url("./images/OL_line/sp2.png");
}
.jdwenwudonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/wenwu1.png");
	--first-image: url("./images/OL_line/wenwu1.png");
	--second-image: url("./images/OL_line/wenwu2.png");
}
.jdxiandonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/xian1.png");
	--first-image: url("./images/OL_line/xian1.png");
	--second-image: url("./images/OL_line/xian2.png");
}
.jdzudonghua {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	animation: flowingLights 4s linear infinite;
	background-image: url("./images/OL_line/zu1.png");
	--first-image: url("./images/OL_line/zu1.png");
	--second-image: url("./images/OL_line/zu2.png");
}
/*排位底图*/
.paiweiditu {
	background: url("./images/OL_line/paiweiditu.png");
	background-size: 100% 100%;
	right: 3%;
	z-index: 78;
	width: 21%;
	height: 48%;
	top: 5%;
}
/*段位图标*/
.duanwei {
	background-size: 100% 100%;
	z-index: 80;
	width: 72%;
	height: 52%;
	left: 49.5%;
	top: 38%;
	transform: translate(-50%, -50%);
}
/*段位文字*/
.duanweishuzi {
	font-size: 17px;
	font-family: "shousha";
	color: orange;
	text-shadow: 1px 1px 1px black;
	bottom: 40%;
	left: 25%;
	text-align: center;
	white-space: pre-wrap;
	background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 47%, rgba(0, 0, 0, 0) 94%);
	z-index: 81;
	padding: 0px 10px;
	width: 42%;
	font-weight: 500;
}
/*排位类型*/
.paiweiType {
	font-size: 22px;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
	top: 3%;
	left: 32.5%;
	z-index: 81;
	font-weight: 700;
}
/*排位类型切换小按钮*/
.typeleft {
	left: 10%;
	background: url("./images/OL_line/left.png");
	background-size: 100% 100%;
	height: 25px;
	width: 25px;
	top: 2.7%;
}
.typeright {
	right: 10%;
	background: url("./images/OL_line/right.png");
	background-size: 100% 100%;
	height: 25px;
	width: 25px;
	top: 2.7%;
}
/*胜率2*/
.shenglvx {
	font-size: 18px;
	font-weight: bold;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
	bottom: 17%;
	left: 20%;
	white-space: pre-wrap;
}
/*擅长武将*/
.shanchangdialog {
	background: url("./images/OL_line/shanchangbigdialog.png");
	background-size: 100% 100%;
	z-index: 77;
	width: 100%;
	height: 55.7%;
	bottom: 0%;
}
.shanchang {
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 2.5%;
	left: 1.3%;
	top: 20%;
	height: 70%;
	width: 16.5%;
	opacity: 1;
	border-radius: 5px;
	/* 圆角 */
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top;
	transition-property: opacity, transform;
	z-index: 69;
	position: relative;
	box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.8);
	filter: none;
	/* 移除原来的 drop-shadow */
}
/*擅长武将头像和边框*/
/*换肤图标*/
.huanfu {
	width: 45px;
	height: 45px;
	background-image: url("./images/OL_line/huanfu.png");
	background-size: 100% 100%;
	z-index: 99;
	right: -10px;
	top: -10px;
}
/*擅长武将框*/
.kuang {
	width: 16.5%;
	height: 100%;
	background-size: 100% 100%;
	z-index: 70;
	left: -1%;
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	background: rgb(154, 148, 122);
	box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.8);
	filter: none;
	/* 移除原来的 drop-shadow */
	background-size: 100% 100%;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	visibility: visible;
}
.kuang::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../../image/decoration/border_diwen.png");
	background-size: 100% 100%;
	opacity: 0.4;
	z-index: 1;
}
/*星星*/
.xing {
	width: 90%;
	height: 40%;
	bottom: 0%;
	background-image: url("./images/OL_line/xing.png");
	background-size: 100% 100%;
}
/*武将名*/
.charName {
	margin-top: 25px;
	left: 6px;
	width: 15px;
	font-family: "shousha";
	writing-mode: vertical-rl;
	text-orientation: upright;
	white-space: nowrap;
	font-size: 20px;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	/* 模拟黑色描边 */
}
/*势力图标*/
.shili {
	width: 26px;
	height: 26px;
	background-size: 100% 100%;
	z-index: 70;
	margin-top: 0px;
}
/*资料页关闭按钮*/
.guanbi {
	width: 80px;
	height: 40px;
	top: 5%;
	right: 8%;
	background-image: url("./images/OL_line/diaozhui.png");
	background-size: 100% 100%;
	z-index: 100;
	position: absolute;
}
/*玩家头像*/
.minixingxiang {
	opacity: 1;
	left: 3.5%;
	top: 14.5%;
	height: 28%;
	width: 12%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border-radius: 5px;
	/* 圆角 */
	transition-property: opacity, transform;
	border: 2px solid #000000;
	z-index: 69;
	text-align: center;
}
.minixingxiang::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 15%);
	border-radius: 5px;
}
/*玩家名称*/
.nameX {
	font-size: 18px;
	top: -25px;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
	font-weight: 700;
	position: relative;
}
/*资料页玩家等级*/
.dengjiX {
	right: 5%;
	top: 0%;
	font-size: 15px;
	font-family: "shousha";
	color: #efdbb6;
	text-shadow: none;
	font-weight: 700;
	text-shadow: 1px 1px 1px black;
}
/*资料页会员等级*/
.huiyuanX {
	left: 5%;
	top: 0%;
	font-size: 15px;
	font-family: "shousha";
	color: orange;
	text-shadow: none;
	font-weight: 700;
	text-shadow: 1px 1px 1px black;
}
/*武将牌不露头*/
.character-dialog .biankuang2>div.left2 {
	left: 19%;
	top: auto;
	bottom: 2%;
	width: 78.5%;
	height: 96%;
	opacity: 1;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	border-radius: 7px;
	transition-property: opacity, transform;
	z-index: 69;
}
.character-dialog div.right {
	left: 50%;
	width: 50%;
	box-sizing: border-box;
	/* padding: 20px 15px 20px 0; */
	overflow: auto;
}
/*技能大窗口*/
.character-dialog.single div.right {
	top: -58%;
	left: 40.5%;
	width: calc(92% - 200px);
	height: calc(170% - 20px);
	/* background-color: #fefefe6b; */
}
.character-dialog>div.left>div {
	top: 65%;
	right: 30px;
	width: 210px;
	text-align: center;
	transform: translateY(-50%);
	position: absolute;
	white-space: nowrap;
}
.character-dialog.single>div.left>div {
	width: 105px;
	position: absolute;
}
.character-dialog div.right>div {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.character-dialog div.right div {
	position: relative;
}
.character-dialog div.right .xcaption {
	background: url("./images/OL_line/quyu4.png") center/contain no-repeat;
	background-size: 260px 30px;
	background-origin: content-box;
	text-align: center;
	line-height: 1.8;
	color: #bb9870;
	display: inline-block;
	position: relative;
	min-width: 250px;
	width: 100%;
	bottom: 0%;
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	font-family: "shousha";
}
.character-dialog div.right .xskill {
	width: 100%;
	bottom: 0%;
}
/*技能描述*/
.character-dialog div.right .xskill>div {
	/* display: inline;*/
	display: block;
	/* 元素独占一行 */
	color: #efdbb6;
	text-shadow: none;
	font-size: 18px;
	font-weight: bold;
	font-family: "shousha";
}
/*装备描述*/
.character-dialog div.right .xskillx>div {
	/* display: inline;*/
	display: block;
	/* 元素独占一行 */
	color: #efdbb6;
	text-shadow: none;
	font-size: 18px;
	font-weight: bold;
	font-family: "shousha";
}
.character-dialog div.right .xskill>div[data-color] {
	display: inline-block;
	color: #f7d229;
	padding: 2px 2px;
	/* 调整左右padding，预留空间给两端图片 */
	text-align: center;
	font-size: 20px;
	min-width: 70px;
	max-width: 1000px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
	/* 确保宽度计算包含padding */
	/* 新增关键代码：九宫格拉伸 */
	border-image: url("./images/OL_line/btn4.png") 0 25 fill / 0 15px stretch;
	/* 解释：
     0 20：从图片左右两侧各切20px作为固定区域（数值需匹配实际图片）
     0 20px：设置左右边框宽度为20px（与切割尺寸一致）
     fill：填充中间区域
     stretch：中间部分拉伸 */
	border-width: 0 5px;
	/* 左右边框宽度与切割尺寸一致 */
	border-style: solid;
	/* 必须设置border-style才能生效 */
}
/*装备框*/
.character-dialog div.right .xskillx>div[data-color] {
	display: inline-block;
	text-align: center;
	font-size: 20px;
	font-family: "shousha";
	font-weight: bold;
	color: #f7d229;
}
/*主被动*/
.character-dialog div.right>div>div.xskill>span.skill-type-tag {
	position: relative;
	/*相对定位*/
	color: #f7d229;
	top: -5px;
	left: 0;
	font-size: 20px;
	font-weight: bold;
	font-family: "shousha";
	text-shadow: none;
}
.character-dialog div.right .xskill>div[data-color="red"] {
	color: #f7d229;
	text-shadow: none;
}
.character-dialog div.right .xskill>div[data-color="black"] {
	color: #f7d229;
	text-shadow: none;
}
/*技能文本间距*/
.character-dialog div.right .xskill+.xskill {
	margin-top: 15px;
}
/*衍生技*/
.character-dialog div.right>div>div.xskill>span.yanshengji {
	position: relative;
	/*相对定位*/
	color: #f7d229;
	top: -5px;
	left: 15px;
	font-size: 19px;
	font-weight: 700;
	font-family: "shousha";
	text-shadow: none;
}
.character-dialog div.right>div>div.xskill>span.yanshengji::before {
	content: "";
	/* 设置图片的路径，需要替换为你实际的图片路径 */
	background-image: url("./images/OL_line/ysjineg.png");
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 20px;
	/* 设置图片的宽度，可根据实际情况调整 */
	height: 20px;
	/* 设置图片的高度，可根据实际情况调整 */
	margin-right: 5px;
	/* 设置图片和文字之间的间距，可根据实际情况调整 */
	vertical-align: middle;
	/* 使图片与文字垂直居中对齐 */
}
/*衍生技描述*/
.character-dialog div.right>div>div.xskill>span.yanshengjiinfo {
	display: block;
	/* 元素独占一行 */
	width: 90%;
	margin-left: 15px;
	color: #d1b296;
	text-shadow: none;
	font-size: 17px;
	font-weight: 700;
	font-family: "shousha";
}