.zt-gameplay, .zt-gameplay * { box-sizing: border-box; }
.zt-gameplay {
  margin-top: 72px;
  min-height: calc(100svh - 180px);
  padding-bottom: 16px;
  color: var(--zt-ink, #101216);
  font-family: var(--zt-font, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif);
}
.zt-gameplay-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 2.2cqw, 30px);
  margin: 0;
  padding: 0 0 24px;
  list-style: none;
}
.zt-gameplay-step { min-width: 0; margin: 0; padding: 0; }
.zt-gameplay-label {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 35px;
  margin: 0 0 13px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--zt-muted, #7b838b);
  font: 500 clamp(12px, 1.55cqw, 18px)/1.6 var(--zt-font, system-ui, sans-serif);
  cursor: pointer;
  transition: color .2s;
}
.zt-gameplay-number { font-size: .86em; font-weight: 400; font-variant-numeric: tabular-nums; }
.zt-gameplay-step.is-current .zt-gameplay-label { color: var(--zt-ink, #101216); font-weight: 600; }
.zt-gameplay-label:hover { color: var(--zt-ink, #101216); }
.zt-gameplay-phone {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 640 / 1324;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14% / 7%;
  background: transparent;
  line-height: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 10px #24201c1c);
}
.zt-gameplay-screen {
  position: absolute;
  left: 5.023%;
  top: 2.064%;
  display: block;
  width: 89.726%;
  height: 95.91%;
  overflow: hidden;
  border-radius: 10.69% / 4.93%;
  background: #f8f8f6;
}
.zt-gameplay-phone-status {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.34%;
  padding: 0 7.5%;
  color: #111;
  background: #fff;
  font: 600 clamp(7px, 1.06cqw, 12px)/1 system-ui, sans-serif;
}
.room .zt-gameplay-phone-status img,
.zt-gameplay-phone-status img {
  display: block;
  width: 22%;
  height: auto;
  margin: 0;
  visibility: visible !important;
  transform: none !important;
}
.zt-gameplay-content { position: absolute; inset: 6.34% 0 1.9%; display: block; background: #fff; }
.zt-gameplay-home { position: absolute; left: 33%; bottom: 1.25%; width: 34%; height: .55%; border-radius: 999px; background: #111; }
.room .zt-gameplay-content > .zt-gameplay-video,
.room .zt-gameplay-content > .zt-gameplay-poster,
.zt-gameplay-content > .zt-gameplay-video,
.zt-gameplay-content > .zt-gameplay-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  pointer-events: none;
  visibility: visible !important;
  transform: none !important;
}
.zt-gameplay-content > .zt-gameplay-video { opacity: 0; }
.zt-gameplay-step.is-current.has-video .zt-gameplay-video { opacity: 1; }
.room .zt-gameplay-phone > .zt-gameplay-bezel,
.zt-gameplay-phone > .zt-gameplay-bezel {
  position: absolute;
  z-index: 2;
  left: -8.447%;
  top: -4.465%;
  display: block;
  width: 116.667%;
  height: 108.968%;
  max-width: none;
  margin: 0;
  pointer-events: none;
  visibility: visible !important;
  transform: none !important;
}
.zt-gameplay-label:focus-visible { outline: 2px solid var(--zt-cyan, #36c9f2); outline-offset: 4px; border-radius: 5px; }
.zt-gameplay-phone:focus-visible { outline: 2px solid var(--zt-cyan, #36c9f2); outline-offset: 5px; }
.room .zt-gameplay-error {
  max-width: none;
  margin: 18px 0 0;
  color: var(--zt-muted, #7b838b);
  font: 400 12px/1.6 var(--zt-font, system-ui, sans-serif);
}
.zt-gameplay-error[hidden] { display: none; }
.zt-gameplay-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
@media (max-width: 859px) {
  .zt-gameplay { margin-top: 44px; padding-bottom: 6px; }
  .zt-gameplay-track {
    display: flex;
    gap: 24px;
    width: 100%;
    margin-top: 0;
    padding: 4px max(18px, calc((100% - 280px) / 2)) 25px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pinch-zoom;
  }
  .zt-gameplay-track::-webkit-scrollbar { display: none; }
  .zt-gameplay-track.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .zt-gameplay-step { flex: 0 0 min(280px, 82vw); scroll-snap-align: center; }
  .zt-gameplay-label { min-height: 35px; margin-bottom: 13px; font-size: 17px; }
  .zt-gameplay-phone { width: 100%; }
  .zt-gameplay-phone-status { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .zt-gameplay-label { transition: none; }
  .zt-gameplay-track { scroll-behavior: auto; }
}