/* Squares Pro Board Editor — iPad and tablet layout.
   Mirrors the current desktop board-first workspace without restoring the old side rails. */

@media (hover:none) and (pointer:coarse) and (min-width:700px) and (max-width:1600px){
  body:has(#quick.active),
  body:has(#quick.active) .app{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  body:has(#quick.active) main{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100vw!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
    overflow-x:hidden!important;
  }

  #quick{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #quick .stadiumBoardEditorLayout{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-areas:none!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #quick .stadiumEditorRail{display:contents!important;}

  #quick .stadiumEditorBoardStage{
    grid-column:1/-1!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #quick .editorNumberPanelBoard{
    grid-column:1/-1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:140px minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:8px 10px!important;
    clip-path:none!important;
  }

  #quick .boardSettingsPanel{
    grid-column:1!important;
    grid-row:3!important;
  }

  #quick #teamSettingsPanel{
    grid-column:2!important;
    grid-row:3!important;
  }

  #quick .payoutSettingsPanel{
    grid-column:1/-1!important;
    grid-row:4!important;
  }

  #quick .stadiumEditorGameCenterShortcut{
    grid-column:1/-1!important;
    grid-row:5!important;
    width:100%!important;
  }

  #quick .stadiumBoardEditorPreview{
    box-sizing:border-box!important;
    width:min(100%,1120px)!important;
    max-width:1120px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:10px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  #quick .squareFillBar{
    grid-template-columns:auto minmax(190px,1fr) repeat(4,auto)!important;
    width:100%!important;
    max-width:none!important;
    margin:10px 0 0!important;
    padding:8px!important;
    overflow:hidden!important;
  }

  #quick .squareFillBar .btn{
    min-width:96px!important;
    min-height:42px!important;
    padding:8px 10px!important;
  }

  #quick #squareSelectModeButton{
    grid-column:6!important;
    grid-row:1!important;
    min-width:126px!important;
    min-height:42px!important;
  }

  #quick .squareFillHint{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    text-align:center!important;
  }

  #quick .editorNumberActions{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:0!important;
  }

  #quick .editorNumberActions>button.btn{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:8px 9px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }

  #quick .editorNumberActions .customNumberDrawToggle{
    flex:0 1 230px!important;
    width:auto!important;
    min-width:190px!important;
    min-height:46px!important;
    margin:0!important;
    overflow:hidden!important;
  }

  #quick .boardSettingsPanel,
  #quick #teamSettingsPanel{
    box-sizing:border-box!important;
    min-width:0!important;
    height:100%!important;
    padding:12px!important;
  }

  #quick .boardSettingsPanel .editorRailFields{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
  }

  #quick #teamSettingsPanel{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 10px!important;
  }

  #quick #teamSettingsPanel .editorRailFields{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  #quick .payoutSettingsPanel{
    grid-template-columns:180px minmax(0,1fr)!important;
    padding:10px 12px!important;
  }

  #quick .payoutSettingsPanel .editorPayoutGrid{
    grid-template-columns:minmax(180px,1.7fr) repeat(6,minmax(74px,1fr))!important;
    gap:7px!important;
  }

  #quick .stadiumEditorControlPanel,
  #quick .editorRailFields>div{
    box-sizing:border-box!important;
    min-width:0!important;
  }
}

@media (hover:none) and (pointer:coarse) and (min-width:700px) and (max-width:1100px){
  #quick .stadiumBoardEditorLayout{grid-template-columns:1fr!important;}
  #quick .stadiumEditorBoardStage{grid-column:1!important;grid-row:1!important;}
  #quick .editorNumberPanelBoard{grid-column:1!important;grid-row:2!important;grid-template-columns:1fr!important;}
  #quick .boardSettingsPanel{grid-column:1!important;grid-row:3!important;}
  #quick #teamSettingsPanel{grid-column:1!important;grid-row:4!important;}
  #quick .payoutSettingsPanel{grid-column:1!important;grid-row:5!important;}
  #quick .stadiumEditorGameCenterShortcut{grid-column:1!important;grid-row:6!important;}

  #quick .editorNumberPanelBoard .stadiumEditorSectionTitle{
    padding:0 0 7px!important;
    border-right:0!important;
    border-bottom:1px solid #29495d!important;
  }

  #quick .editorNumberActions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  #quick .editorNumberActions .customNumberDrawToggle{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
  }

  #quick .squareFillBar{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #quick .squareFillBar>*,
  #quick #squareSelectModeButton,
  #quick .squareFillHint{grid-column:auto!important;grid-row:auto!important;}
  #quick .squareFillHint{grid-column:1/-1!important;}

  #quick .boardSettingsPanel .editorRailFields{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #quick .payoutSettingsPanel{grid-template-columns:1fr!important;}
  #quick .payoutSettingsPanel>.stadiumEditorSectionTitle,
  #quick .payoutSettingsPanel .payoutQuarterControls,
  #quick .payoutSettingsPanel .editorPayoutGrid{grid-column:1!important;grid-row:auto!important;}
  #quick .payoutSettingsPanel .editorPayoutGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  #quick .payoutSettingsPanel .editorPayoutGrid>div:first-child{grid-column:1/-1!important;}
}

@media (hover:none) and (pointer:coarse) and (max-width:760px){
  #quick #teamSettingsPanel,
  #quick #teamSettingsPanel .editorRailFields,
  #quick .boardSettingsPanel .editorRailFields,
  #quick .editorNumberActions,
  #quick .squareFillBar,
  #quick .payoutSettingsPanel .payoutQuarterControls,
  #quick .payoutSettingsPanel .editorPayoutGrid{
    grid-template-columns:1fr!important;
  }

  #quick .editorNumberActions .customNumberDrawToggle,
  #quick .squareFillHint{grid-column:1!important;}

  #quick #teamSettingsPanel .editorTeamBlock+.editorTeamBlock{
    margin-top:12px!important;
    padding-top:12px!important;
    padding-left:0!important;
    border-top:1px solid #345367!important;
    border-left:0!important;
  }
}