/* Mobile override — strips the desktop "framed iPhone" preview so screens
   fill the viewport on real phones. Active under 500px viewport width. */
@media (max-width: 500px) {
  html, body {
    background: var(--cream, #FAFAF3);
    overflow: hidden;
  }
  .stage {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
    justify-content: stretch;
  }
  .device {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
  }
  .screen {
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
  /* Hide the fake iOS chrome — the real OS provides these. */
  .status-bar,
  .island,
  .home-indicator {
    display: none !important;
  }
  /* Hide the floating tweaks panel on mobile — designer-only affordance. */
  .tweaks {
    display: none !important;
  }
}