:root {
  --mobile-frame-width: 390px;
  --mobile-frame-height: 844px;
  --mobile-safe-top: 22px;
  --mobile-preview-background: #f5f5f5;
}

html {
  min-width: var(--mobile-frame-width);
  min-height: var(--mobile-frame-height);
  background: var(--mobile-preview-background) !important;
}

body {
  width: 100% !important;
  min-width: var(--mobile-frame-width) !important;
  min-height: var(--mobile-frame-height) !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  background: var(--mobile-preview-background) !important;
}

/* Shared MobileFrame / PhoneContainer. No device shell or desktop presentation. */
.preview-shell,
.activity-preview,
.creator-preview,
.treasure-preview {
  display: contents !important;
}

[data-mobile-frame] {
  position: relative !important;
  width: var(--mobile-frame-width) !important;
  min-width: var(--mobile-frame-width) !important;
  max-width: var(--mobile-frame-width) !important;
  height: var(--mobile-frame-height) !important;
  min-height: var(--mobile-frame-height) !important;
  max-height: var(--mobile-frame-height) !important;
  flex: 0 0 var(--mobile-frame-width) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: translateZ(0);
  contain: paint;
  box-sizing: border-box;
}

[data-mobile-frame]:not([data-frame-scroll="true"]) {
  overflow: hidden !important;
}

[data-mobile-frame][data-frame-scroll="true"] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.phone,
.activity-phone,
.creator-phone,
.treasure-phone {
  padding: 0 !important;
  background: transparent !important;
}

.phone-screen,
.activity-screen,
.creator-screen,
.treasure-screen {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.status-bar,
.ios-status,
.safe-top {
  width: 100% !important;
  height: var(--mobile-safe-top) !important;
  min-height: var(--mobile-safe-top) !important;
  max-height: var(--mobile-safe-top) !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

[data-mobile-frame] .task-footer,
[data-mobile-frame] .reward-sheet {
  width: 100% !important;
  max-width: 100% !important;
}

@media print {
  html, body { background: white !important; }
}

/* ── Real mobile device: strip desktop preview chrome only ── */
/* Scaling to fill viewport is handled by mobile-viewport.css + mobile-viewport.js */
@media (max-width: 500px) {
  html {
    background: transparent !important;
  }
  body {
    display: block !important;
    background: transparent !important;
    place-items: unset !important;
  }
  .status-bar,
  .ios-status,
  .safe-top {
    height: env(safe-area-inset-top, 0px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}