/*
 * Keep the 10rem mobile layout tied to the complete viewport.
 *
 * The bundled flexible-layout helper caps its calculation at 540px. Some
 * Android browsers (and desktop-site mode) expose a layout viewport wider
 * than 500px, so the normal mobile #app rule is skipped and the whole site
 * is rendered as a narrow, centred strip. A coarse pointer identifies the
 * affected phone/tablet class even when that reported viewport is wide.
 */
@media (hover: none) and (pointer: coarse) {
  html {
    font-size: 10vw !important;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body {
    display: block !important;
    overflow-x: hidden !important;
  }

  #app {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .tabbar__container,
  .van-popup.van-popup--bottom {
    width: 100vw !important;
    max-width: none !important;
  }
}

/* Normal mobile viewports get the same protection without relying on the
 * input-device media feature (useful for emulators and browser devtools). */
@media screen and (max-width: 500px) {
  html {
    font-size: 10vw !important;
  }

  body,
  #app {
    width: 100vw !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Mobile browsers may still zoom on a rapid double tap even when the
 * viewport disallows scaling. Keep taps responsive inside the game UI. */
html,
body,
#app,
button,
a,
input,
textarea,
select,
[role="button"],
.van-button {
  touch-action: manipulation;
}

@media (hover: none) and (pointer: coarse), screen and (max-width: 500px) {
  /* The compiled splash reserves 13.333rem for its decorative dice block.
   * That is about 500px on a 375px phone, so the text and logo overflow the
   * screen and the lower half of the logo gets clipped. Size the complete
   * splash against the dynamic viewport and keep every image contained. */
  .start-page[data-v-5eb72be7] {
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .start-page[data-v-5eb72be7] > div {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  .start-page[data-v-5eb72be7] .dice {
    width: 100% !important;
    height: 45vh !important;
    height: clamp(180px, 45dvh, 13.33333rem) !important;
    max-height: 13.33333rem !important;
    min-height: 0 !important;
    flex: 0 1 auto !important;
  }

  .start-page[data-v-5eb72be7] .fortune {
    width: min(66.4vw, 320px) !important;
    height: auto !important;
    max-height: 14vh !important;
    max-height: 14dvh !important;
    object-fit: contain !important;
  }

  .start-page[data-v-5eb72be7] .logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(50vw, 240px) !important;
    max-height: 18vh !important;
    max-height: 18dvh !important;
    object-fit: contain !important;
    flex: 0 1 auto !important;
  }

  /* iOS zooms the viewport when a focused form control is below 16px. */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Vant and the bundled custom dialog both use rem-based dimensions.
   * Give login verification and welcome dialogs a usable phone width. */
  .van-dialog,
  .dialog__container {
    width: min(88vw, 420px) !important;
    min-width: 280px !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box !important;
  }

  .van-dialog__header,
  .dialog__container-title {
    font-size: max(.48rem, 18px) !important;
    line-height: 1.35 !important;
  }

  .van-dialog__message,
  .dialog__container-content {
    font-size: max(.32rem, 14px) !important;
    line-height: 1.45 !important;
  }

  .captcha {
    width: 100% !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
  }

  .captcha_message__text,
  .captcha_progress_bar__text,
  .captcha__action__text {
    max-width: none !important;
    font-size: max(.28rem, 12px) !important;
    line-height: 1.3 !important;
  }

  .captcha_message__icon {
    width: max(.48rem, 20px) !important;
    height: max(.48rem, 20px) !important;
  }

  .van-toast {
    min-width: 120px !important;
    max-width: calc(100vw - 32px) !important;
    font-size: max(.32rem, 14px) !important;
  }
}