/* myth-beast 第十三屏：抽奖容器 + 纯色底，仅 [data-slide-id="myth-beast"] */

.deck-slide[data-slide-id="myth-beast"] .deck-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.deck-slide[data-slide-id="myth-beast"].deck-slide--theme-myth-orange {
  background: #f7490f;
  background-image: none;
}

.deck-slide[data-slide-id="myth-beast"] .deck-slide__layer .deck-body {
  pointer-events: none !important;
}

.deck-slide[data-slide-id="myth-beast"] .deck-slide__media {
  pointer-events: none;
}

.deck-media-layout--myth-beast-stack {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: calc(var(--deck-h, 1611px) + var(--deck-overlap-ext, 160px));
  pointer-events: none;
  overflow: visible;
}

/* 第十三屏根层级装饰层（独立于抽奖容器；底图之上） */
.mb-deco {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: calc(var(--deck-h, 1611px) + var(--deck-overlap-ext, 160px));
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 0;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__dot {
  position: absolute;
  left: 0;
  top: 148px;
  width: 1920px;
  height: 1350px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 1;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__haha {
  position: absolute;
  left: 1486px;
  top: 113px;
  width: 322px;
  height: 284px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 10;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__pop {
  position: absolute;
  left: 955px;
  top: 839px;
  width: 145px;
  height: 143px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 3;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__origin {
  position: absolute;
  left: 1535.5px;
  top: 1038px;
  width: 295px;
  height: 306px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 4;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__big-hand {
  position: absolute;
  left: 199px;
  top: 515.86px;
  width: 615.55px;
  height: 218.35px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 6;
}

.deck-slide[data-slide-id="myth-beast"] .mb-deco__guide {
  position: absolute;
  left: 684px;
  top: 1111px;
  width: 150px;
  height: 150px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 7;
}

.mb-copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: calc(var(--deck-h, 1611px) + var(--deck-overlap-ext, 160px));
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 9;
  transform: none;
  filter: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__en,
.deck-media-layout--myth-beast-stack .mb-copy__cn,
.deck-slide[data-slide-id="myth-beast"] .mb-copy__cn,
.deck-slide[data-slide-id="myth-beast"] .mb-copy__tag,
.deck-slide[data-slide-id="myth-beast"] .mb-copy__body {
  transform: none;
  filter: none;
  opacity: 1;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__en {
  position: absolute;
  left: 967px;
  top: 255px;
  width: 1006px;
  height: 170px;
  margin: 0;
  padding: 0;
  font-family: "Arial Black", sans-serif;
  font-size: 105px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  pointer-events: none;
}

.deck-media-layout--myth-beast-stack .mb-copy__cn,
.deck-slide[data-slide-id="myth-beast"] .mb-copy__cn {
  position: absolute;
  left: 970px;
  top: 395px;
  width: 360px;
  height: 40px;
  margin: 0;
  padding: 0;
  font-family: "YaHeiBold-Mini", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
  color: #ffffff;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__tag {
  position: absolute;
  left: 1342.5px;
  top: 408px;
  width: 247px;
  height: 27px;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 2px;
  color: #fff4dc;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__rule {
  position: absolute;
  left: 972px;
  top: 449.5px;
  width: 732px;
  height: 1px;
  margin: 0;
  padding: 0;
  background: #ffffff;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__mark {
  position: absolute;
  left: 1704px;
  top: 445px;
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: #ffffff;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-copy__body {
  position: absolute;
  left: 970px;
  top: 466px;
  width: 730px;
  height: 389px;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 19px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 5px;
  color: #fff4dc;
  pointer-events: none;
}

.mb-lottery {
  position: absolute;
  left: 214.5px;
  top: 56px;
  width: 601px;
  height: 1300px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 4;
}

/* 阴影须在 overflow 裁切层之外绘制，否则 box-shadow 会被 clip 截掉 */
.mb-lottery::before {
  content: "";
  position: absolute;
  left: 1.48px;
  top: -0.12px;
  width: 577.84px;
  height: 1252.54px;
  border-radius: 80px;
  box-shadow: 32px 29px 23px rgba(209, 36, 1, 0.6);
  pointer-events: none;
  z-index: 0;
}

.mb-lottery__clip {
  position: absolute;
  left: 1.48px;
  top: -0.12px;
  width: 577.84px;
  height: 1252.54px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 80px;
  pointer-events: none;
  z-index: 1;
}

.mb-lottery__phone {
  position: absolute;
  left: 0;
  top: 0;
  width: 577.84px;
  height: 1252.54px;
  margin: 0;
  padding: 0;
  background: #faf144;
  border-radius: 80px;
  pointer-events: none;
  z-index: 0;
}

.deck-slide[data-slide-id="myth-beast"] .deck-media-layout--myth-beast-stack img.lazy-media,
.deck-slide[data-slide-id="myth-beast"] .deck-media-layout--myth-beast-stack video.deck-managed-video {
  /* 覆盖 main.css .deck-media-layout img/video { width:100%; height:100% }（0,1,1 压过 .mb-lottery__* 的 0,1,0） */
  max-width: none;
  max-height: none;
  object-position: left top;
  border-radius: 0;
}

.deck-slide[data-slide-id="myth-beast"] .deck-media-layout--myth-beast-stack img.lazy-media {
  object-fit: scale-down;
}

.deck-slide[data-slide-id="myth-beast"] .deck-media-layout--myth-beast-stack video.deck-managed-video {
  object-fit: contain;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__monster {
  position: absolute;
  left: 0.33px;
  top: 0;
  width: 578.14px;
  height: 1252.27px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 1;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__frost {
  position: absolute;
  left: 0;
  top: 827.46px;
  width: 577.84px;
  height: 472.74px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 2;
}

.mb-lottery__progress {
  position: absolute;
  left: 0;
  top: 912.12px;
  width: 601px;
  height: 32px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 3;
}

.mb-lottery__rect34 {
  position: absolute;
  left: 32.55px;
  top: 2.21px;
  width: 518.46px;
  height: 26.2px;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  border-radius: 80px;
  background: #ffffff;
  border: 7px solid #000000;
  pointer-events: none;
  z-index: 1;
}

.mb-lottery__bar28 {
  position: absolute;
  left: 0;
  top: 0;
  width: 601px;
  height: 32px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}

.mb-lottery__rect36 {
  position: absolute;
  left: 32.55px;
  top: 2.21px;
  width: 518.46px;
  height: 26.2px;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  border-radius: 80px;
  background: #ffffff;
  border: 7px solid #000000;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  background-clip: padding-box;
}

.mb-lottery__rect36 .mb-lottery__ww {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 26.2px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.mb-lottery__rect36 .mb-lottery__rect35 {
  position: absolute;
  left: auto;
  /* 锚点右上：bar28 X 52.95 → rect36 left 20.4；初始宽 506.5（左侧 +2px） */
  right: -6.44px;
  top: 0;
  width: 506.5px;
  height: 26.2px;
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  background: #ffffff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  pointer-events: none;
  z-index: 3;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__rect36 .mb-lottery__uu {
  position: absolute;
  left: -0.55px;
  top: -0.28px;
  width: 29.08px;
  height: 29.13px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 4;
}

.mb-lottery__progress-cap {
  position: absolute;
  left: 0;
  top: 3.07px;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5;
}

.mb-lottery__rect60 {
  position: absolute;
  left: 39.53px;
  top: 3.14px;
  width: 17.45px;
  height: 31.07px;
  margin: 0;
  padding: 0;
  border-radius: 60px;
  background: #000000;
  pointer-events: none;
  z-index: 5;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__title {
  position: absolute;
  left: 40.2px;
  top: 81.62px;
  width: 513.77px;
  height: 178.5px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 11;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__egg0 {
  position: absolute;
  left: 95.45px;
  top: 358.09px;
  width: 385.24px;
  height: 404.83px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 18;
  opacity: 1;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__glass {
  position: absolute;
  left: 109.4px;
  top: 368.03px;
  width: 369.97px;
  height: 403.32px;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
}

.mb-lottery__glass--a {
  z-index: 19;
  opacity: 0.95;
}

.mb-lottery__glass--b {
  z-index: 24;
  opacity: 0.25;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__egg-out {
  position: absolute;
  left: 95.95px;
  top: 358.05px;
  width: 385.24px;
  height: 404.72px;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: left top;
  pointer-events: none;
  opacity: 0;
}

.mb-lottery__egg-out--4 {
  z-index: 23;
}

.mb-lottery__egg-out--3 {
  z-index: 22;
}

.mb-lottery__egg-out--2 {
  z-index: 21;
}

.mb-lottery__egg-out--1 {
  z-index: 20;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__reflect {
  position: absolute;
  left: 124.9px;
  top: 367.17px;
  width: 337.44px;
  height: 368.64px;
  max-width: none;
  max-height: none;
  display: block;
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
  z-index: 25;
  opacity: 0.75;
}

.mb-lottery__tri {
  position: absolute;
  left: 31px;
  top: 963.49px;
  width: 0;
  height: 0;
  border-left: 7.76px solid transparent;
  border-right: 7.76px solid transparent;
  border-bottom: 23.36px solid #ffffff;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 17;
  opacity: 0;
}

.mb-lottery__btn {
  position: absolute;
  left: 39.26px;
  top: 1058.06px;
  width: 500.76px;
  height: 169.64px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto !important;
  z-index: 26;
  overflow: visible;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mb-lottery__btn-lottie {
  display: block;
  width: 500.76px;
  height: 169.64px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__uu.is-faded {
  opacity: 0;
  transition: opacity 0.01s cubic-bezier(0, -0.02, 0, 1.01);
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__uu:not(.is-faded) {
  opacity: 1;
  transition: left 0.92s cubic-bezier(0, -0.02, 0, 1.01);
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__rect35 {
  transition: width 0.92s cubic-bezier(0, -0.02, 0, 1.01);
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__tri {
  transition:
    left 0.92s cubic-bezier(0, -0.02, 0, 1.01),
    opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__egg0,
.deck-slide[data-slide-id="myth-beast"] .mb-lottery__egg-out {
  transition: none;
}

/* 第十三屏 Lottie（按钮 / 进度条 WW）：SVG 矢量抗锯齿，覆盖 deck canvas 硬像素规则 */
.deck-slide[data-slide-id="myth-beast"] .mb-lottery__ww svg,
.deck-slide[data-slide-id="myth-beast"] .mb-lottery__btn-lottie svg,
.deck-slide[data-slide-id="myth-beast"] .mb-deco__guide svg {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  shape-rendering: geometricPrecision;
  pointer-events: none;
}

.deck-slide[data-slide-id="myth-beast"] .mb-lottery__ww canvas,
.deck-slide[data-slide-id="myth-beast"] .mb-lottery__btn-lottie canvas,
.deck-slide[data-slide-id="myth-beast"] .mb-deco__guide canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  image-rendering: auto;
}

.deck-slide[data-slide-id="myth-beast"] .deck-slide__media .mb-lottery__ww canvas,
.deck-slide[data-slide-id="myth-beast"] .deck-slide__media .mb-lottery__btn-lottie canvas,
.deck-slide[data-slide-id="myth-beast"] .deck-slide__media .mb-deco__guide canvas {
  image-rendering: auto;
  pointer-events: none;
}
