/* iPhone 17 Pro Max frame — CSS-only mockup
 * Display: 6.9" · 1320×2868 native pixels (~ 19.5:9 aspect, portrait)
 * For our viewer we display at scaled-down size; the aspect ratio matters.
 * Game asset inside is portrait 2:3 or 9:16 — phone screen is taller (19.5:9) so
 * we letterbox top/bottom (or fit width-to-width and accept some vertical empty).
 */

.iphone-frame {
  --bezel: 12px;
  --corner: 56px;
  --color-bezel: #1a1a1a;
  --color-rail: #4a4a4a;
  --color-screen-bg: #000;
  position: relative;
  background: var(--color-bezel);
  border-radius: var(--corner);
  padding: var(--bezel);
  box-shadow:
    0 0 0 2px #2a2a2a inset,
    0 0 0 4px #1a1a1a,
    0 20px 60px rgba(0,0,0,.5);
  aspect-ratio: 1320 / 2868;   /* iPhone 17 Pro Max native */
  width: 380px;                /* default size — override per use */
  margin: 0 auto;
}
.iphone-frame .screen {
  position: relative;
  background: var(--color-screen-bg);
  border-radius: calc(var(--corner) - var(--bezel));
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.iphone-frame .screen img,
.iphone-frame .screen iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* full screen, no letterbox */
  object-position: center;
  background: #000;
  display: block;
}
.iphone-frame .dynamic-island {
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 28%;
  height: 30px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  border: 1px solid #0a0a0a;
}
/* side rails (buttons) */
.iphone-frame::before,
.iphone-frame::after {
  content: '';
  position: absolute;
  background: var(--color-rail);
  border-radius: 3px;
}
/* action button (left top) + volume buttons */
.iphone-frame::before {
  left: -3px;
  top: 14%;
  width: 4px;
  height: 6%;
  box-shadow:
    0 calc(8% + 4px) 0 0 var(--color-rail),
    0 calc(15% + 4px) 0 0 var(--color-rail);
}
/* power button (right) */
.iphone-frame::after {
  right: -3px;
  top: 18%;
  width: 4px;
  height: 12%;
}

/* compact variant for thumbnails */
.iphone-frame.thumb { width: 200px; --corner: 32px; --bezel: 6px; }
.iphone-frame.thumb .dynamic-island { width: 30%; height: 16px; top: 8px; border-radius: 12px }
.iphone-frame.thumb::before, .iphone-frame.thumb::after { display:none }

/* fullscreen viewer variant */
.iphone-frame.viewer { width: min(420px, 90vh / (2868/1320)); }