/* the turn - production shell. The prototype's PhoneFrame was a demo chrome
   (390x844 with a fake status bar + phone bezel) meant to be viewed on a
   desktop "as if on a phone." In production we render fullscreen on the
   actual device. Kept the same name + children contract so TurnApp doesn't
   change. */
function PhoneFrame({ children }) {
  return (
    <div style={{
      width: '100%',
      maxWidth: 470,                 // match the prototype's design width
      margin: '0 auto',
      minHeight: '100svh',
      position: 'relative',          // preserves the inner absolute positioning contract
      background: 'var(--bg)',
      overflow: 'hidden',
      paddingTop: 'env(safe-area-inset-top)',
    }}>
      {children}
    </div>
  );
}