/* ===== Phone Frame ===== */
.phone-wrapper {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.phone {
  width: var(--phone-width);
  height: var(--phone-height);
  background: linear-gradient(160deg, #242424 0%, #0a0a0a 55%, #131313 100%);
  border-radius: var(--phone-radius);
  padding: 10px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 50px 120px -20px rgba(0, 0, 0, 0.85),
    0 20px 50px -10px rgba(0, 0, 0, 0.6),
    0 0 90px -5px var(--color-accent-glow);
  position: relative;
}

/* ===== Dynamic Island ===== */
.dynamic-island {
  position: absolute;
  top: 13px; left: 50%;
  transform: translateX(-50%);
  width: var(--island-width);
  height: var(--island-height);
  background: var(--color-island);
  border-radius: 20px;
  z-index: 30;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 2px 12px rgba(0, 0, 0, 0.6);
}

/* ===== Home Indicator ===== */
.home-indicator {
  position: absolute;
  bottom: 9px; left: 50%;
  transform: translateX(-50%);
  width: var(--indicator-width);
  height: var(--indicator-height);
  background: rgba(255, 255, 255, 0.28);
  border-radius: 3px;
  z-index: 30;
}

/* ===== Screen ===== */
.screen {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse 110% 55% at 50% -5%, rgba(130, 70, 230, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 10% 100%, rgba(60, 30, 160, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 95% 60%, rgba(30, 80, 200, 0.28) 0%, transparent 50%),
    linear-gradient(175deg, #1e1535 0%, #130d22 100%);
  border-radius: var(--screen-radius);
  overflow: hidden;
  position: relative;
}