/* 三个方向共用的 iPhone 外壳：状态栏（9:41、信号、电量）+ 灵动岛 + 屏幕里轮播几张截图（淡入淡出）。
   尺寸都按屏幕宽度（cqw）算，外壳多大都成比例 */
.phone { position: absolute; width: var(--pw, 300px); aspect-ratio: 402 / 874; padding: 9px; border-radius: 50px;
  background: linear-gradient(150deg, #ffffff, #f4e6ea 60%, #fbf2f4);
  box-shadow: 0 50px 90px rgba(170, 80, 115, .28), 0 0 0 1px rgba(255, 255, 255, .9) inset, 0 0 0 1.5px rgba(220, 170, 190, .35); }
.phone .screen { container-type: inline-size; position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden;
  background: #fdf6f8; display: flex; flex-direction: column; }
.phone .sb { flex: none; position: relative; z-index: 2; height: 12.5cqw; display: flex; align-items: center; justify-content: space-between;
  padding: 0 7cqw 0 9.5cqw; font: 600 3.9cqw/1 -apple-system, "SF Pro Text", sans-serif; color: #2f2429; }
.phone .island { position: absolute; left: 50%; top: 2.4cqw; transform: translateX(-50%); width: 29cqw; height: 8.4cqw; border-radius: 5cqw; background: #120a0e; }
.phone .icons { display: flex; align-items: center; gap: 1.4cqw; }
.phone .bars { display: flex; align-items: flex-end; gap: .55cqw; height: 2.8cqw; }
.phone .bars i { width: .9cqw; border-radius: .3cqw; background: currentColor; }
.phone .bars i:nth-child(1) { height: 35%; } .phone .bars i:nth-child(2) { height: 55%; } .phone .bars i:nth-child(3) { height: 78%; } .phone .bars i:nth-child(4) { height: 100%; }
.phone .batt { position: relative; width: 6.2cqw; height: 3cqw; border-radius: .9cqw; border: .3cqw solid currentColor; opacity: .9; }
.phone .batt::after { content: ""; position: absolute; inset: .35cqw; right: 1.4cqw; border-radius: .4cqw; background: currentColor; }
.phone .shots { position: relative; flex: 1; }
.phone .shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.phone .shots.cycle img { animation: phone-cycle 9s ease-in-out infinite; }
.phone .shots.cycle img:nth-child(2) { animation-delay: -6s; }
.phone .shots.cycle img:nth-child(3) { animation-delay: -3s; }
@keyframes phone-cycle { 0%, 30% { opacity: 1; } 35%, 95% { opacity: 0; } 100% { opacity: 1; } }

.phone.dark { background: linear-gradient(150deg, #3a2531, #1d1218 60%, #2a1a23);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 200, 225, .12) inset, 0 0 80px rgba(242, 139, 171, .18); }
.phone.dark .screen { background: #1b1117; }
.phone.dark .sb { color: #f6e9ef; }

@media (prefers-reduced-motion: reduce) { .phone .shots.cycle img { animation: none; } .phone .shots.cycle img + img { display: none; } }