/* avatar-frames 第十一屏：8 款 WebM 头像框预览，仅 [data-slide-id="avatar-frames"] */

.deck-slide[data-slide-id="avatar-frames"] .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="avatar-frames"].deck-slide--theme-avatar-frames {
  background: #242424;
  background-image: none;
}

/* slide-empty 仅占位，须穿透点击至缩略按钮 */
.deck-slide[data-slide-id="avatar-frames"] .deck-slide__layer {
  z-index: 4;
}

.deck-slide[data-slide-id="avatar-frames"] .deck-slide__layer .deck-body {
  pointer-events: none !important;
}

.deck-slide[data-slide-id="avatar-frames"] .af-copy {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1350px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .af__title {
  position: absolute;
  left: 174.5px;
  top: 109px;
  width: 250px;
  height: 40px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-title);
  font-size: 30px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0;
  color: #e9ecef;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .af__body {
  position: absolute;
  left: 174.5px;
  top: 158px;
  width: 195px;
  height: 24px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 2px;
  color: #b9b9b9;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.deck-slide__layer .af-copy {
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .deck-slide__media {
  z-index: 3;
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .deck-media-zone--z2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: calc(var(--deck-h, 1611px) + var(--deck-overlap-ext, 160px));
  right: auto;
  bottom: auto;
  overflow: hidden;
  border-radius: 129px 129px 0 0;
}

.deck-media-layout--avatar-frames-stack {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: calc(var(--deck-h, 1611px) + var(--deck-overlap-ext, 160px));
  right: auto;
  bottom: auto;
  pointer-events: none;
  overflow: hidden;
  border-radius: 129px 129px 0 0;
}

/* 圆角矢量底框内裁切：方格纹理 PNG 不超出子页顶圆角区域 */
.deck-slide[data-slide-id="avatar-frames"] .af__plate-clip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 129px 129px 0 0;
  pointer-events: none;
  z-index: 0;
}

.deck-slide[data-slide-id="avatar-frames"] .af__grid-texture {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 1920px;
  height: 1350px;
  max-width: none;
  max-height: none;
  display: block;
  transform: translateX(-50%);
  object-fit: scale-down;
  object-position: left top;
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .af {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1350px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

/* 8 缩略 + 选中框整体容器：设计底栏 top 1225，再整体 translate(326px, -110px) */
.deck-slide[data-slide-id="avatar-frames"] .af__thumbs {
  position: absolute;
  left: 0;
  top: 1225px;
  width: 1920px;
  height: 130px;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  transform: translate(326px, -110px);
}

.deck-slide[data-slide-id="avatar-frames"] .af__ring {
  position: absolute;
  top: -5px;
  width: 130px;
  height: 130px;
  box-sizing: border-box;
  border: 1px solid #c5c3dc;
  border-radius: 12px;
  background: transparent;
  opacity: 0.8;
  box-shadow: 0 8px 8px rgba(1, 1, 1, 0.5);
  pointer-events: none;
  z-index: 1;
  transition: left 0.2s ease;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb {
  position: absolute;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.15s ease;
  pointer-events: auto;
  overflow: hidden;
  border-radius: 8px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--lightning {
  left: 18.5px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--sunglasses {
  left: 180px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--heart {
  left: 342px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--candy {
  left: 504px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--rabbit {
  left: 666px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--gold {
  left: 818px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--coin {
  left: 976px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb--christmas {
  left: 1136px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb:hover {
  opacity: 1;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb.is-selected {
  opacity: 1;
  cursor: default;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb.is-selected:hover {
  opacity: 1;
}

.deck-slide[data-slide-id="avatar-frames"] .af__thumb-vid {
  display: block;
  width: 120px;
  height: 120px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.deck-slide[data-slide-id="avatar-frames"] .af__preview {
  position: absolute;
  left: 704px;
  top: 361px;
  width: 512px;
  height: 512px;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
}

.deck-slide[data-slide-id="avatar-frames"] .af__preview-vid {
  display: block;
  width: 512px;
  height: 512px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* 覆盖 main.css .deck-media-layout video { width/height:100% }，尺寸由 .af__*-vid 固定 */
.deck-slide[data-slide-id="avatar-frames"] .deck-media-layout--avatar-frames-stack video.deck-managed-video {
  max-width: none;
  max-height: none;
  object-fit: contain;
}

.deck-slide[data-slide-id="avatar-frames"] .deck-media-layout--avatar-frames-stack .af__grid-texture {
  width: 1920px;
  height: 1350px;
  max-width: none;
  max-height: none;
  object-fit: scale-down;
}