/* ==========================================================
   v179.9.78 — PLAY EDITOR SHELL PARITY
   Narrow mobile/PWA pass from the approved v179.9.77 baseline.
   PURPOSE
   - Give the Play Editor the same fitted, blurred outer-sheet language as More.
   - Keep Default / Generic / Wrigley on one editor shell geometry.
   - Keep the editor header + action frame stationary while only editor content scrolls.
   - Preserve every editor field, scoring workflow, pitch tracker and theme color.
   ========================================================== */

@media (max-width:700px){
  /* Editor owns the screen while open; the normal command bar is hidden. */
  html body #playModal:not(.hidden){
    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
      max(8px,env(safe-area-inset-bottom))
      8px!important;
    background:rgba(3,9,15,.46)!important;
    -webkit-backdrop-filter:blur(5px) saturate(112%)!important;
    backdrop-filter:blur(5px) saturate(112%)!important;
    overflow:hidden!important;
  }

  /* Stronger selector intentionally cancels legacy theme/mobile geometry. */
  html body #playModal:not(.hidden)>.play-card{
    box-sizing:border-box!important;
    position:relative!important;
    inset:auto!important;
    width:calc(100vw - 16px)!important;
    max-width:720px!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 8px)!important;
    margin:0!important;
    padding:0 14px!important;
    border-radius:22px!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
    box-shadow:0 22px 58px rgba(0,0,0,.32)!important;
  }

  /* Pitch-by-pitch can use the complete fitted envelope, never 100dvh. */
  html body.play-editor-open:is(.editor-advanced-v110,.editor-pitch-v110) #playModal:not(.hidden)>.play-card{
    height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 8px)!important;
    max-height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 8px)!important;
  }

  /* Scorebook/basic stays content-fitted until its center content needs scrolling. */
  html body.play-editor-open.editor-basic-v110 #playModal:not(.hidden)>.play-card{
    height:auto!important;
    min-height:0!important;
    max-height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)) - 8px)!important;
    align-self:auto!important;
  }

  /* Shared header geometry. Theme typography/color can remain distinctive. */
  html body #playModal:not(.hidden)>.play-card>.modal-head{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    z-index:31!important;
    flex:0 0 auto!important;
    min-height:66px!important;
    margin:0 -14px 8px!important;
    padding:13px 14px 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)!important;
    border-radius:22px 22px 0 0!important;
    background:color-mix(in srgb,var(--panel) 97%,transparent)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    backdrop-filter:blur(14px)!important;
    box-shadow:none!important;
  }
  html body #playModal .modal-head>div{min-width:0!important}
  html body #playModal .modal-head strong{
    display:block!important;
    font-size:18px!important;
    line-height:1.05!important;
    letter-spacing:.04em!important;
  }
  html body #playModal .modal-head small{
    display:block!important;
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }
  html body #playModal .modal-head button{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border-radius:13px!important;
    display:grid!important;
    place-items:center!important;
  }

  /* The app can show either the approved v140 editor or the legacy body.
     Exactly one center region owns vertical scrolling; the shell never does. */
  html body #playModal:not(.hidden)>.play-card>.play-scroll-body,
  html body #playModal:not(.hidden)>.play-card>#v140Preview{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding-bottom:8px!important;
  }
  html body.play-editor-open.editor-basic-v110 #playModal:not(.hidden)>.play-card>.play-scroll-body,
  html body.play-editor-open.editor-basic-v110 #playModal:not(.hidden)>.play-card>#v140Preview{
    flex:0 1 auto!important;
    min-height:0!important;
  }

  /* One action frame across themes: three compact actions + full-width Apply. */
  html body.play-editor-open #playModal:not(.hidden)>.play-card>.modal-actions{
    position:relative!important;
    inset:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    z-index:40!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr)!important;
    gap:7px!important;
    margin:0 -14px!important;
    padding:10px 14px 10px!important;
    border-top:1px solid var(--line)!important;
    background:color-mix(in srgb,var(--panel) 98%,transparent)!important;
    box-shadow:0 -10px 24px rgba(0,0,0,.14)!important;
    transform:none!important;
  }
  html body.play-editor-open #playModal:not(.hidden)>.play-card>.modal-actions>#addPaBtn{
    grid-column:1!important;grid-row:1!important;
  }
  html body.play-editor-open #playModal:not(.hidden)>.play-card>.modal-actions>#v137AtBatBtn{
    grid-column:2!important;grid-row:1!important;
  }
  html body.play-editor-open #playModal:not(.hidden)>.play-card>.modal-actions>#clearPlayBtn{
    grid-column:3!important;grid-row:1!important;
  }
  html body.play-editor-open #playModal:not(.hidden)>.play-card>.modal-actions>#applyPlayBtn{
    grid-column:1/-1!important;grid-row:2!important;
    min-height:52px!important;
  }

  /* Wrigley keeps its material/palette only, not separate geometry. */
  html body[data-theme-family="wrigley"] #playModal:not(.hidden){
    background:rgba(1,20,13,.50)!important;
    -webkit-backdrop-filter:blur(5px) saturate(108%)!important;
    backdrop-filter:blur(5px) saturate(108%)!important;
  }
  html body[data-theme-family="wrigley"] #playModal:not(.hidden)>.play-card{
    width:calc(100vw - 16px)!important;
    max-width:720px!important;
    margin:0!important;
    padding:0 14px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  html body[data-theme-family="wrigley"] #playModal:not(.hidden)>.play-card>.modal-head{
    margin:0 -14px 8px!important;
    padding:13px 14px 10px!important;
    min-height:66px!important;
    border-radius:22px 22px 0 0!important;
  }
  html body[data-theme-family="wrigley"] #playModal .modal-head strong{
    font-size:18px!important;
    line-height:1.05!important;
  }
  html body[data-theme-family="wrigley"] #playModal .modal-head button{
    width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
    border-radius:13px!important;
  }
}