/* kzyx.top mobile overlay — served by host nginx, not the Myriad image */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

#app-root {
  max-width: 100%;
  min-height: 100dvh;
}

img,
video {
  max-width: 100%;
}

@media (max-width: 768px) {
  .home-shell,
  .phantasi-shell,
  #phantasi-peek-copy,
  .phantasi-peek-air__copy {
    --page-pad-x: max(0.75rem, env(safe-area-inset-left, 0px));
    --page-pad-top: max(4.25rem, calc(3.25rem + env(safe-area-inset-top, 0px)));
    --page-pad-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }

  .widget-grid-host,
  .widget-grid-container,
  .widget-grid-root {
    width: 100% !important;
    max-width: 100% !important;
  }

  .widget-grid-item {
    max-width: 100% !important;
  }

  .login-form {
    width: calc(100% - 1.5rem) !important;
    max-width: 24rem !important;
    padding: 1.25rem !important;
    box-sizing: border-box;
  }

  .login-form input,
  .login-form select,
  .login-form textarea,
  input,
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .login-form button[type="submit"] {
    min-height: 44px;
    width: 100%;
  }

  [role="dialog"],
  .user-modal {
    max-width: calc(100vw - 1.25rem) !important;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: rgba(244, 163, 177, 0.28);
    touch-action: manipulation;
  }
}

@supports (padding: max(0px)) {
  @media (max-width: 767px) {
    .navigation-island {
      bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    }
  }
}