/* ==========================================================
   v179.9.76 — MODAL SHELL CONSISTENCY
   Narrow PWA/mobile pass from v179.9.75.
   - Normal dialogs use the same fitted floating-sheet language as More.
   - Background is dimmed + blurred consistently.
   - Internal modal content/components are intentionally untouched.
   - Play Editor geometry is intentionally excluded for the next pass.
   ========================================================== */

@media (max-width:700px){
  /* Keep the full-screen interaction shield, but present every normal dialog
     as a bottom-fitted floating sheet above the installed-PWA command bar. */
  .modal:not(.hidden):not(#playModal){
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    padding:
      max(8px,env(safe-area-inset-top))
      8px
      calc(66px + env(safe-area-inset-bottom))
      8px!important;
    background:rgba(3,9,15,.42)!important;
    -webkit-backdrop-filter:blur(5px) saturate(112%)!important;
    backdrop-filter:blur(5px) saturate(112%)!important;
    overflow:hidden!important;
  }

  /* Preserve each theme's actual panel colors/content. This rule controls
     only the outside geometry, border radius, and scroll containment. */
  .modal:not(.hidden):not(#playModal)>.modal-card{
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    width:min(720px,calc(100vw - 16px))!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100svh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    box-shadow:0 22px 58px rgba(0,0,0,.30)!important;
  }

  /* New Game has an older fixed-height wizard contract. Keep its flex
     behavior, but bound that height to the same fitted-sheet envelope. */
  #modeModal:not(.hidden)>.setup-card{
    height:min(780px,calc(100svh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))!important;
    max-height:calc(100svh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
  }

  /* Older theme/export/postgame rules used almost-full-viewport widths.
     Normalize only their outer card dimensions to the shared sheet shell. */
  #themeModal:not(.hidden)>.modal-card,
  #mlbModal:not(.hidden)>.modal-card,
  #settingsModal:not(.hidden)>.modal-card,
  #exportModal:not(.hidden)>.modal-card,
  #postgameModal:not(.hidden)>.modal-card,
  #playerModal:not(.hidden)>.modal-card,
  #aboutModal:not(.hidden)>.modal-card,
  #confirmModal:not(.hidden)>.modal-card,
  #shortcutModal:not(.hidden)>.modal-card{
    width:min(720px,calc(100vw - 16px))!important;
    max-height:calc(100svh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    border-radius:22px!important;
  }

  /* Wrigley keeps its own green panel treatment; only match More's backdrop. */
  body[data-theme-family="wrigley"] .modal:not(.hidden):not(#playModal){
    background:rgba(1,20,13,.46)!important;
    -webkit-backdrop-filter:blur(5px) saturate(108%)!important;
    backdrop-filter:blur(5px) saturate(108%)!important;
  }
}