/* VIP 详情页：卡框、等级名和宝石是同一张卡面素材；账户数据继续实时渲染。 */
.vipDetail .vip_swiper .slide,
.vip-detail .vip_swiper .slide,
.vip .vip_swiper .slide {
  overflow: hidden;
  isolation: isolate;
}

.vipDetail .vip_swiper .slide .xbyl-vip-card-art,
.vip-detail .vip_swiper .slide .xbyl-vip-card-art,
.vip .vip_swiper .slide .xbyl-vip-card-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.vipDetail .vip_swiper .slide .xbyl-vip-card-art img,
.vip-detail .vip_swiper .slide .xbyl-vip-card-art img,
.vip .vip_swiper .slide .xbyl-vip-card-art img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* VIP10 沿用 VIP9 的干净卡底，仅在同一位置覆盖它自己的紫色钻石。 */
.vipDetail .vip_swiper .slide .xbyl-vip-card-art-v10::before,
.vip-detail .vip_swiper .slide .xbyl-vip-card-art-v10::before,
.vip .vip_swiper .slide .xbyl-vip-card-art-v10::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 40%;
  height: 68%;
  background: url('/static/img/vip-card-art-10.png') right top / 250% 147.06% no-repeat;
}

/* 原卡面保持完整不透明；这个渐变只承接会变化的进度和升级条件，
   不再从透明洞里露出下层旧卡背景。 */
.vipDetail .vip_swiper .slide .xbyl-vip-card-art::after,
.vip-detail .vip_swiper .slide .xbyl-vip-card-art::after,
.vip .vip_swiper .slide .xbyl-vip-card-art::after {
  content: '';
  position: absolute;
  z-index: 1;
  right: 1px;
  bottom: 1px;
  left: 1px;
  height: 40%;
  border-radius: 0 0 min(5vw, 22px) min(5vw, 22px);
  background: linear-gradient(100deg, rgba(12, 33, 87, .95), rgba(19, 19, 57, .97) 62%, rgba(37, 20, 56, .95));
  box-shadow: inset 0 9px 14px rgba(10, 11, 39, .22);
}

.vipDetail .vip_swiper .slide .vip_swiper_item,
.vip-detail .vip_swiper .slide .vip_swiper_item,
.vip .vip_swiper .slide .vip_swiper_item {
  position: relative;
  z-index: 1;
}

.vipDetail .vip_swiper .slide .xbyl-vip-level-baked,
.vip-detail .vip_swiper .slide .xbyl-vip-level-baked,
.vip .vip_swiper .slide .xbyl-vip-level-baked {
  display: none;
}

/* VIP10 没有对应的原站截图素材，保留同样的字重和位置，用实际等级补上标题。 */
.vipDetail .vip_swiper .slide .xbyl-vip-level-v10,
.vip-detail .vip_swiper .slide .xbyl-vip-level-v10,
.vip .vip_swiper .slide .xbyl-vip-level-v10 {
  position: absolute;
  z-index: 2;
  top: min(11.4vw, 49px);
  left: min(5vw, 22px);
  width: auto;
  margin: 0;
  font: italic 700 min(7.1vw, 31px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.05em;
  white-space: nowrap;
  color: #fff2ff;
  text-shadow: 0 2px 7px rgba(52, 16, 110, .8);
}