@media screen and (max-width: 768px) {
  /*
   * Global mobile dialog safety layer.
   * Desktop dialog scripts often inject pixel left/top/width values.
   * On phones, keep every normal game dialog inside the viewport instead.
   * Gold/payment dialogs have their own dedicated mobile layout and are excluded.
   */
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]),
  .dragWrapper:not(.tgGoldMobileDialog) {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    z-index: 100000 !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) > .dialog,
  .dragWrapper:not(.tgGoldMobileDialog) > .dialog {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    box-sizing: border-box !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-container,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100vh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialogContents,
  .dragWrapper:not(.tgGoldMobileDialog) .dialogContents,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) #dialogContent,
  .dragWrapper:not(.tgGoldMobileDialog) #dialogContent {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: calc(100vh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents #raidListSlot,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents #raidListSlot,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents form,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents form,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents fieldset,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents fieldset {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents img,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents img,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents svg,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents svg {
    max-width: 100% !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents input.text,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents input.text,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents input[type="text"],
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents input[type="text"],
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents input[type="email"],
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents input[type="email"],
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents input[type="password"],
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents input[type="password"],
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents select,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents select,
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents textarea,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-contents .buttons,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-contents .buttons {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Our public-login popup uses the same mobile viewport rules. */
  .tg-google-unregistered-backdrop {
    padding: 10px !important;
    box-sizing: border-box !important;
  }

  .tg-google-unregistered-popup {
    width: calc(100vw - 20px) !important;
    max-width: none !important;
    max-height: calc(100vh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    padding: 16px 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tg-google-unregistered-popup .tg-google-unregistered-action {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 380px) {
  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]),
  .dragWrapper:not(.tgGoldMobileDialog) {
    left: 5px !important;
    right: 5px !important;
    max-width: calc(100vw - 10px) !important;
  }

  .dialogWrapper:not(.tgGoldMobileDialog):not([data-context="paymentWizard"]) .dialog-container,
  .dragWrapper:not(.tgGoldMobileDialog) .dialog-container {
    padding: 9px !important;
  }

  .tg-google-unregistered-backdrop {
    padding: 6px !important;
  }

  .tg-google-unregistered-popup {
    width: calc(100vw - 12px) !important;
    padding: 14px 10px !important;
  }
}


/* Quest/tutorial dialogs: turn the old 566px desktop layout into a true phone layout. */
@media screen and (max-width: 768px) {
  .dialog.questInformation .dialog-contents,
  .dialogWrapper .dialog.questInformation .dialog-contents,
  .dragWrapper .dialog.questInformation .dialog-contents {
    overflow-x: hidden !important;
  }

  .dialog.questInformation .questWrapper,
  .dialogWrapper .dialog.questInformation .questWrapper,
  .dragWrapper .dialog.questInformation .questWrapper,
  .questWrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .questWrapper .questImage {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .questWrapper .questImage img,
  .questWrapper #questLogo {
    display: block !important;
    float: none !important;
    width: min(120px, 42vw) !important;
    height: auto !important;
    max-width: 120px !important;
    max-height: 120px !important;
    margin: 0 auto 8px !important;
    object-fit: contain !important;
  }

  .questWrapper .questImage .tipsWrapper {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .questWrapper .questImage .tipsWrapper .questTipsToggleDescription {
    position: static !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 4px auto 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .questWrapper .questText {
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .questWrapper .questTitle,
  .questWrapper .questDescription,
  .questWrapper .questTasks,
  .questWrapper .questRewards,
  .questWrapper #questDescription,
  .questWrapper #rewardDescription {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .questWrapper .questTitle {
    margin: 2px 0 8px !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }

  .questWrapper .questDescription,
  .questWrapper .questTasks,
  .questWrapper .questRewards {
    margin: 8px 0 12px !important;
    padding: 0 !important;
    line-height: 1.7 !important;
  }

  .questWrapper .questTasks ul#questTodolist,
  .questWrapper .questRewards ul.questRewardsList,
  .questWrapper .questTodoList {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .questWrapper .questTasks ul#questTodolist li,
  .questWrapper .questTodoList li {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .questWrapper .questRewards ul.questRewardsList li {
    float: none !important;
    display: inline-flex !important;
    max-width: 100% !important;
    margin: 4px 6px !important;
  }

  .questWrapper .questButtons {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  .questWrapper .questButtons button,
  .questWrapper button.questButtonNext,
  .questWrapper button.questButtonSkipTutorial,
  .questWrapper button.questButtonClose,
  .questWrapper button.questButtonOverview,
  .questWrapper button.questButtonGainReward {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 420px) {
  .questWrapper .questImage img,
  .questWrapper #questLogo {
    width: min(105px, 36vw) !important;
    max-width: 105px !important;
    max-height: 105px !important;
  }

  .questWrapper .questText {
    padding: 0 2px !important;
  }

  .questWrapper .questDescription,
  .questWrapper .questTasks,
  .questWrapper .questRewards {
    font-size: 13px !important;
  }
}