/* Viewport-owned popup system.
   Dialog chrome stays fixed while the dialog body scrolls inside the safe area. */
body.site-modal-open{overflow:hidden!important;overscroll-behavior:none!important}
body.site-modal-open>.mobile{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

#modal.modal{
  z-index:10040!important;
  padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#modal.modal.open{display:grid!important;place-items:center!important}
#modal>.dialog{
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  width:min(720px,100%)!important;
  max-height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
#modal>.dialog>.row{
  position:relative!important;
  top:auto!important;
  z-index:4!important;
  margin:0!important;
  padding:4px 4px 10px!important;
  border-bottom:1px solid color-mix(in srgb,var(--st-border) 82%,transparent)!important;
  background:color-mix(in srgb,var(--st-surface) 96%,transparent)!important;
}
#modal>.dialog>.row h3{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#modal #mbody{
  min-height:0!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  padding:10px 3px max(12px,env(safe-area-inset-bottom,0px))!important;
}
#modal.sprite-editor-modal>.dialog{width:min(760px,100%)!important;max-height:100%!important;overflow:hidden!important}
#modal.sprite-editor-modal #mclose{width:auto!important;min-width:76px!important;height:44px!important;min-height:44px!important;padding:8px 13px!important;border:1px solid var(--st-border-strong)!important;border-radius:12px!important;background:var(--st-surface-2)!important;color:var(--st-text)!important;font-size:16px!important}
#modal.sprite-editor-modal #saveVariant{position:sticky!important;z-index:5!important;bottom:0!important;width:100%!important;min-height:50px!important;margin-top:4px!important;box-shadow:0 -12px 22px color-mix(in srgb,var(--st-surface) 92%,transparent)!important}
.sprite-info-overlay{z-index:10030!important;padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))!important;overflow:hidden!important}
.sprite-info-dialog{max-height:100%!important;min-height:0!important;overscroll-behavior:contain!important}
.onboarding-overlay,.beta-review-modal{padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))!important;overflow:hidden!important}
.onboarding-card,.beta-review-dialog{max-height:100%!important;min-height:0!important;overscroll-behavior:contain!important}
.mobile-nav-layer{z-index:500!important;padding-top:env(safe-area-inset-top,0px)!important}

@media (max-width:719px){
  #modal.modal{padding:max(7px,env(safe-area-inset-top,0px)) max(7px,env(safe-area-inset-right,0px)) max(7px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))!important}
  #modal>.dialog,#modal.sprite-editor-modal>.dialog{width:100%!important;border-radius:20px!important;padding:11px!important}
  #modal #mbody{padding-top:9px!important}
  .quick-editor{gap:11px!important}
  .quick-editor-head{grid-template-columns:68px minmax(0,1fr)!important}
  .quick-editor-thumb{width:68px!important;height:68px!important}
  .quick-editor-thumb img{width:56px!important;height:56px!important}
  .quick-status-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .quick-status-row button{min-height:58px!important;white-space:normal!important}
  .quick-level-row button{min-height:52px!important}
  .quick-editor-tiles{grid-template-columns:1fr!important}
  .sprite-info-overlay{place-items:center!important;padding:max(7px,env(safe-area-inset-top,0px)) max(7px,env(safe-area-inset-right,0px)) max(7px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))!important}
  .sprite-info-dialog{width:100%!important;max-height:100%!important;border:1px solid rgba(107,225,255,.23)!important;border-radius:20px!important}
  .onboarding-overlay,.beta-review-modal{padding:max(7px,env(safe-area-inset-top,0px)) max(7px,env(safe-area-inset-right,0px)) max(7px,env(safe-area-inset-bottom,0px)) max(7px,env(safe-area-inset-left,0px))!important}
  .onboarding-card,.beta-review-dialog{width:100%!important;max-height:100%!important;border-radius:20px!important}
}
@media (min-width:720px) and (max-width:1100px){
  #modal.sprite-editor-modal>.dialog{width:min(820px,100%)!important}
  .sprite-info-dialog{width:min(920px,100%)!important}
}
@media (max-height:540px) and (min-width:600px) and (orientation:landscape){
  #modal.modal{padding:max(6px,env(safe-area-inset-top,0px)) max(8px,env(safe-area-inset-right,0px)) max(6px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))!important}
  #modal.sprite-editor-modal>.dialog{width:min(960px,100%)!important;padding:9px!important;border-radius:16px!important}
  #modal>.dialog>.row{padding:2px 3px 7px!important}
  #modal #mbody{padding:7px 2px max(7px,env(safe-area-inset-bottom,0px))!important}
  .quick-editor{grid-template-columns:minmax(210px,.8fr) minmax(340px,1.2fr)!important;grid-template-areas:"head status" "links levels" "links tiles" "note save"!important;column-gap:12px!important;row-gap:7px!important}
  .quick-editor-head{grid-area:head!important}
  .quick-editor-links{grid-area:links!important;align-self:start!important}
  .quick-editor-group:nth-of-type(1){grid-area:status!important}
  .quick-editor-group:nth-of-type(2){grid-area:levels!important}
  .quick-editor-tiles{grid-area:tiles!important;grid-template-columns:1fr 1fr!important}
  .quick-editor-note{grid-area:note!important;align-self:center!important}
  .quick-save{grid-area:save!important;align-self:end!important}
  .quick-editor-thumb{width:58px!important;height:58px!important}
  .quick-editor-thumb img{width:48px!important;height:48px!important}
  .quick-editor-tiles .quick-tile{min-height:58px!important}
  .sprite-info-dialog,.onboarding-card,.beta-review-dialog{max-height:100%!important}
}