/* Create Player modal (/Players) — keep it above the mobile bottom nav bar.
   The nav bar stays visible; only this one dialog is resized/positioned. */
@media (max-width: 1023px) {
  [role="dialog"][class*="w-[95vw]"][class*="max-w-2xl"] {
    --fx-bar: calc(66px + env(safe-area-inset-bottom, 14px));
    top: calc((100vh - var(--fx-bar)) / 2) !important;
    top: calc((100dvh - var(--fx-bar)) / 2) !important;
    max-height: calc(100vh - var(--fx-bar) - 24px) !important;
    max-height: calc(100dvh - var(--fx-bar) - 24px) !important;
    width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  /* Footer: buttons side by side to save vertical space */
  [role="dialog"][class*="w-[95vw]"][class*="max-w-2xl"] > div.shrink-0[class*="border-t"] {
    flex-direction: row !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }
  [role="dialog"][class*="w-[95vw]"][class*="max-w-2xl"] > div.shrink-0[class*="border-t"] > button {
    flex: 1 1 0% !important;
    width: auto !important;
  }
  /* Prevent iOS auto-zoom on focus */
  [role="dialog"][class*="w-[95vw]"][class*="max-w-2xl"] input,
  [role="dialog"][class*="w-[95vw]"][class*="max-w-2xl"] select {
    font-size: 16px !important;
  }
}