/* TODOPODEROSO mobile composition: keep onboarding and mode selection compact. */
@media (max-width: 760px) {
  /* Onboarding used to float over the fixed-height stage, so the final action
     could be clipped by the card on short iPhone viewports. On mobile the
     onboarding panel now owns the flow and the unused stage is removed until
     the user continues. */
  .tp-card[data-state="onboarding"] .tp-stage {
    display: none;
  }

  .tp-card[data-state="onboarding"] .tp-guide {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 32px) !important;
    margin: 14px auto 18px !important;
    transform: none;
  }

  .tp-card[data-state="onboarding"] .tp-gate-btn {
    pointer-events: auto;
    touch-action: manipulation;
  }

  .tp-card[data-state="mode-select"] .tp-stage {
    min-height: 600px;
  }
}

@media (max-width: 380px) {
  .tp-card[data-state="onboarding"] .tp-guide {
    width: calc(100% - 24px) !important;
    margin-top: 12px !important;
  }
}