.role-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #313436;
  overflow: hidden;
}

.role-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.roleBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.5s ease-in-out;
}

.roleBg-1 {
  z-index: 1;
  opacity: 1;
}

.roleBg-2 {
  z-index: 2;
  opacity: 0;
}

.roleBg.active {
  opacity: 1;
}

.roleBg.inactive {
  opacity: 0;
}

.roleVideo {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: rgba(0, 0, 0, 0.5);
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.roleVideo.fade-out {
  opacity: 0;
}

.roleVideo.fade-in {
  opacity: 1;
}

.role-video-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 角色左侧按钮区域 */
.role-container .role-main-left {
  position: absolute;
  left: 19.17vw;
  top: 6.20vw;
  z-index: 5;
  width: 13.96vw;
  height: 32.97vw;
}

.role-container .role-main-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/avatar_bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.role-main-left li {
  position: absolute;
  width: 4.79vw;
  height: 4.79vw;
  cursor: pointer;
  z-index: 1;
}

.role-main-left li::before,
.role-main-left li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.5s ease-in-out;
}

/* 普通状态图层 (::before) */
.role-main-left li::before {
  opacity: 1;
  z-index: 1;
}

/* 激活状态图层 (::after) */
.role-main-left li::after {
  opacity: 0;
  z-index: 2;
}

/* 激活时,隐藏普通图层,显示激活图层 */
.role-main-left li.active::before {
  opacity: 0;
}

.role-main-left li.active::after {
  opacity: 1;
}

/* 各角色位置 */
.role-main-left li:nth-child(1) {
  top: 5.52vw;
  left: 2.19vw;
}

.role-main-left li:nth-child(2) {
  top: 11.67vw;
  left: 0vw;
}

.role-main-left li:nth-child(3) {
  top: 17.76vw;
  left: 0vw;
}

.role-main-left li:nth-child(4) {
  top: 24.01vw;
  left: 2.19vw;
}

/* 角色1 - 剑仙 */
.role-main-left li:nth-child(1)::before {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/jx_avatar.png");
}

.role-main-left li:nth-child(1)::after {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/jx_avatar_active.png");
}

/* 角色2 - 灵狐 */
.role-main-left li:nth-child(2)::before {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/lh_avatar.png");
}

.role-main-left li:nth-child(2)::after {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/lh_avatar_active.png");
}

.role-main-left li:nth-child(3)::before {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/zy_avatar.png");
}

.role-main-left li:nth-child(3)::after {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/zy_avatar_active.png");
}

.role-main-left li:nth-child(4)::before {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/lq_avatar.png");
}

.role-main-left li:nth-child(4)::after {
  background-image: url("https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/lq_avatar_active.png");
}



/* 角色右侧信息区域 - 所有元素基于 role-container 绝对定位 */

/* role-name 基础样式 */
.role-container .role-name {
  position: absolute;
  z-index: 5;
}

.role-container .role-name img {
  width: 100%;
  height: 100%;
  display: block;
}

/* role-name 各角色定制样式 */
.role-container .role-name-1 {
  width: 17.5vw;
  height: 13.28vw;
  top: 10.37vh;
  left: 28.65vw;
}

.role-container .role-name-2 {
  width: 17.14vw;
  height: 13.38vw;
  top: 9.15vh;
  left: 28.80vw;
}

.role-container .role-name-3 {
  width: 16.98vw;
  height: 14.11vw;
  top: 8.33vh;
  left: 29.22vw;
}

.role-container .role-name-4 {
  width: 17.08vw;
  height: 13.85vw;
  top: 7.01vh;
  left: 29.06vw;
}

/* role-slogan 基础样式 */
.role-container .role-slogan {
  position: absolute;
  z-index: 5;
}

.role-container .role-slogan img {
  width: 100%;
  height: 100%;
  display: block;
}

/* role-slogan 各角色定制样式 */
.role-container .role-slogan-1 {
  width: 26.77vw;
  height: 3.59vw;
  top: 35.57vh;
  left: 24.90vw;
}

.role-container .role-slogan-2 {
  width: 26.77vw;
  height: 3.59vw;
  top: 35.67vh;
  left: 24.90vw;
}

.role-container .role-slogan-3 {
  width: 26.77vw;
  height: 4.01vw;
  top: 35.37vh;
  left: 24.90vw;
}

.role-container .role-slogan-4 {
  width: 26.77vw;
  height: 3.28vw;
  top: 35.67vh;
  left: 24.90vw;
}

/* role-power 基础样式 */
.role-container .role-power {
  position: absolute;
  z-index: 5;
  top: 43.09vh;
  left: 27.34vw;
}

.role-container .role-power img {
  width: 100%;
  height: 100%;
  display: block;
}

/* role-power 各角色定制样式 */
.role-container .role-power-1 {
  width: 20.16vw;
  height: 9.32vw;
}

.role-container .role-power-2 {
  width: 20.16vw;
  height: 9.32vw;
}

.role-container .role-power-3 {
  width: 20.16vw;
  height: 9.32vw;
}

.role-container .role-power-4 {
  width: 20.16vw;
  height: 9.32vw;
}

/* role-video-miniwindow 基础样式 */
.role-container .role-video-miniwindow {
  position: absolute;
  z-index: 5;
  background: url(https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/video_bg.png) no-repeat center center;
  background-size: 100% 100%;
  overflow: hidden;
}

/* role-video-miniwindow 各角色定制样式 */
.role-container .role-video-1 {
  width: 18.96vw;
  height: 12.5vw;
  top: 63.41vh;
  left: 28.23vw;
}

.role-container .role-video-2 {
  width: 18.96vw;
  height: 12.5vw;
  top: 63.41vh;
  left: 28.23vw;
}

.role-container .role-video-3 {
  width: 18.96vw;
  height: 12.5vw;
  top: 63.41vh;
  left: 28.23vw;
}

.role-container .role-video-4 {
  width: 18.96vw;
  height: 12.5vw;
  top: 63.41vh;
  left: 28.23vw;
}

/* 静态图片海报 */
.role-video-miniwindow .mini-video-poster {
  position: absolute;
  top: 2.9vh;
  left: 50%;
  transform: translate(-50%, 0);
  width: 18.07vw;
  height: 10.16vw;
  object-fit: cover;
  z-index: 1;
}

/* 黑色遮罩层 */
.role-video-miniwindow .video-mask {
  position: absolute;
  top: 2.9vh;
  left: 50%;
  transform: translate(-50%, 0);
  width: 18.07vw;
  height: 10.16vw;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* 播放按钮 */
.role-video-miniwindow .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.97vw;
  height: 7.86vw;
  background: url(https://image-platform.leniugame.com/20260121/lyj_pc_version5/roles/play_btn.png) no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.2s ease;
}

.role-video-miniwindow .video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}