/* Force mobile layout ONLY in PWA mode */
@media all and (display-mode: standalone), all and (display-mode: fullscreen), all and (display-mode: minimal-ui) {
  /* Force viewport size */
  html, body {
    min-width: 320px;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Override any attempt to use desktop layout */
  body {
    width: 100% !important;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }
  
  /* Ensure content is properly sized for mobile */
  img, video, canvas, svg {
    max-width: 100%;
    height: auto;
  }
  
  /* Prevent desktop mode even on large screens when in PWA */
  @media (min-width: 1024px) {
    body {
      max-width: 480px !important;
      margin: 0 auto !important;
    }
  }
  
  /* Disable pinch zoom */
  html {
    touch-action: manipulation;
  }
}

/* Only disable pinch zoom globally if needed */
/* Uncomment if you want this behavior on all modes */
/*
html {
  touch-action: manipulation;
}
*/