/* ==========================================================================
   案例界面截图 · 两屏真实渲染截图
   素材：common/static/beisu/img/shots/*.webp（750×1624）
   尺寸：全部用 cqw，跟随舞台宽度等比缩放，改容器即整体缩放
   ========================================================================== */

.ui-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background:
    radial-gradient(120% 92% at 50% -10%, #22304c 0%, #131b2c 46%, #0a0f19 100%);
}

/* 舞台底光：两团冷光，把深色截图托起来 */
.ui-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 46% at 20% 10%, rgba(0, 75, 200, .42), transparent 72%),
    radial-gradient(48% 42% at 82% 92%, rgba(96, 160, 255, .22), transparent 74%);
  pointer-events: none;
}

.ui-shots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.4cqw;
  height: 100%;
  padding: 4.6cqw 3cqw 0;
}

.ui-shot {
  display: block;
  width: auto;
  height: 86%;
  max-width: 44%;
  object-fit: cover;
  border-radius: 4.4cqw;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .1),
    0 5cqw 9cqw -3.4cqw rgba(0, 0, 0, .8),
    0 1cqw 2cqw rgba(0, 0, 0, .3);
}

.ui-shot--b {
  height: 80%;
  transform: translateY(3cqw);
  opacity: .94;
}

/* 窄屏：只留主屏，放大到接近满高 */
@media (max-width: 640px) {
  .ui-shots { padding: 3.4cqw 3cqw 0; }
  .ui-shot { height: 97%; max-width: 78%; }
  .ui-shot--b { display: none; }
}