/*
 * ALLTHELOVE large-phone edge-to-edge image fit
 * Targets Galaxy S26 Ultra (19.5:9) and iPhone 17 Pro Max class displays.
 * The UI artwork and its percentage-based click zones are stretched together,
 * so the full design reaches every edge without letterboxing or cropping.
 */
:root {
  --atl-full-height: 100vh;
}

@supports (height: 100dvh) {
  :root { --atl-full-height: 100dvh; }
}

html,
body,
#root {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  overflow-x: hidden;
}

html,
body {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

/* Full-screen artwork pages. Inline max-width/height:auto values are
   intentionally overridden so tall modern phones do not show top/bottom gaps. */
.atl-image-stage {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  height: var(--atl-full-height) !important;
  min-height: var(--atl-full-height) !important;
  margin: 0 !important;
  overflow: hidden !important;
  user-select: none;
  -webkit-user-select: none;
}

.atl-image-stage > .atl-image-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
  display: block !important;
}

/* Baby Planner uses its own full-screen wrapper rather than atl-image-stage. */
img[src*="baby_planner_cover.png"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center center !important;
}

/* Supported by current Android System WebView and current iOS WKWebView. */
div:has(> img[src*="baby_planner_cover.png"]) {
  width: 100vw !important;
  max-width: none !important;
  height: var(--atl-full-height) !important;
  min-height: var(--atl-full-height) !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Prevent desktop-oriented width caps from shrinking phone layouts. */
@media (max-width: 900px) {
  main > section[class*="max-w-"] {
    width: 100vw !important;
    max-width: none !important;
  }
}