/* Full-viewport shell for web / installed PWA (viewport-fit=cover). */
:root {
  /* Matches the top edge of the background image; iOS 26+ samples this
     color for the status-bar tint (it ignores background-image there). */
  --app-shell-bg-color: #fef6f2;
  --app-shell-bg-image: url('/roundmeet-background-vertical.png');
}

html[data-theme='dark'] {
  --app-shell-bg-color: #151718;
  /* Dim the image toward the dark background so the CSS shell matches
     the in-app dark underlay (image at low opacity over #151718). */
  --app-shell-bg-image: linear-gradient(rgba(21, 23, 24, 0.82), rgba(21, 23, 24, 0.82)),
    url('/roundmeet-background-vertical.png');
}

/* System dark before JS sets data-theme (avoids a light flash for dark users). */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    --app-shell-bg-color: #151718;
    --app-shell-bg-image: linear-gradient(rgba(21, 23, 24, 0.82), rgba(21, 23, 24, 0.82)),
      url('/roundmeet-background-vertical.png');
  }
}

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  height: 100%;
  background-color: var(--app-shell-bg-color);
  background-image: var(--app-shell-bg-image);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  overflow: hidden;
}

#root {
  display: flex;
  flex: 1;
}