/* Final mobile venue-flow fix: keep the completed venue and its action reachable. */
html,
body {
  min-height: 100%;
  overflow-x: clip !important;
}

#introOverlay {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

#introOverlay.show {
  display: block !important;
}

#introOverlay .introModal {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

#introOverlay .venueScene.counterView {
  box-sizing: border-box !important;
  width: 100% !important;
  height: clamp(300px, 82vw, 430px) !important;
  min-height: 0 !important;
  max-height: 430px !important;
  margin: 0 !important;
  border: 4px solid #173e5d !important;
  border-radius: 18px !important;
  outline: 0 !important;
  background-color: #173e5d !important;
  background-size: 300% 300% !important;
  background-clip: border-box !important;
  box-shadow: 0 6px 0 #ef765c !important;
  overflow: hidden !important;
}

#introOverlay .venueJourney {
  margin-top: 10px !important;
}

#introOverlay .hubModal.venueReady {
  padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
}

#introOverlay .hubModal.venueReady #unlockVenueButton {
  position: fixed !important;
  z-index: 200 !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  width: min(420px, calc(100vw - 24px)) !important;
  min-height: 54px !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 0 #177454, 0 12px 30px #173e5d55 !important;
}

@media (max-width: 430px) {
  #introOverlay .venueScene.counterView {
    height: clamp(285px, 82vw, 350px) !important;
    max-height: 350px !important;
  }
}

@media (display-mode: standalone) {
  #introOverlay {
    padding-top: max(14px, env(safe-area-inset-top)) !important;
  }
}