/* Shared phone frame for app demos — black bezel + hardware buttons */
.phone-wrap {
  position: relative;
  --phone-frame: #000;
}

.phone-btn {
  position: absolute;
  width: 3px;
  background: var(--phone-frame);
  z-index: 94;
}
.phone-btn-l { left: -2px; border-radius: 3px 0 0 3px; }
.phone-btn-r { right: -2px; border-radius: 0 3px 3px 0; }
.phone-btn-silent { top: 16.7%; height: 28px; }
.phone-btn-vol-up { top: 24.7%; height: 48px; }
.phone-btn-vol-dn { top: 34.7%; height: 48px; }
.phone-btn-power { top: 26.7%; height: 66px; }

.phone-wrap > .stage,
.phone-wrap > .phone {
  --phone-outer-r: 55px;
  --phone-b: 5px;
  --phone-inner-r: calc(var(--phone-outer-r) - var(--phone-b));
  border: var(--phone-b) solid var(--phone-frame);
  border-radius: var(--phone-outer-r);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  background: var(--phone-frame);
  isolation: isolate;
}

/* Shell stays black in light theme — screens supply their own surface colour */
body.theme-light .phone-wrap > .stage,
body.theme-light .phone-wrap > .phone {
  background: var(--phone-frame);
}

.phone-wrap.cropped > .phone {
  border-bottom: none;
  border-radius: var(--phone-outer-r) var(--phone-outer-r) 0 0;
}

.phone-wrap .island,
.phone-wrap .ph-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 26px;
  background: var(--phone-frame);
  border-radius: 999px;
  z-index: 93;
}

/* In-app surfaces clip to the inner display curve (fixes square overlay corners) */
.phone-wrap > .stage .screen,
.phone-wrap > .stage .dark-spot,
.phone-wrap > .stage .posting,
.phone-wrap > .stage .cat-backdrop,
.phone-wrap > .stage .po-backdrop,
.phone-wrap > .stage .gs-backdrop,
.phone-wrap > .stage .mood-backdrop,
.phone-wrap > .stage .gift-toast,
.phone-wrap > .phone .ph-inner {
  border-radius: var(--phone-inner-r);
}

.phone-wrap > .stage .screen {
  overflow: hidden;
  /* 1px bleed hides sub-pixel gaps between bezel and content in light mode */
  inset: -1px;
  border-radius: calc(var(--phone-inner-r) + 1px);
}

.phone-wrap.cropped > .phone .ph-inner {
  border-radius: var(--phone-inner-r) var(--phone-inner-r) 0 0;
}

.phone-wrap > .stage .dark-spot,
.phone-wrap > .stage .posting,
.phone-wrap > .stage .cat-backdrop,
.phone-wrap > .stage .po-backdrop,
.phone-wrap > .stage .gs-backdrop,
.phone-wrap > .stage .mood-backdrop {
  overflow: hidden;
}