/* V328: ready, shaking, rolling, settled cup MUST share one mobile/desktop centre. */
body.board-view #diceCupStage{
 position:relative!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 box-sizing:border-box!important;
}
body.board-view #diceCupStage[hidden]{display:none!important;}
/* Keep the visible composite at identical x/y coordinates through state changes.
   Previous CSS used an in-flow animation while the clickable overlay was absolute,
   causing mobile layout changes as the button hid during a roll. */
body.board-view #diceCupStage #cupRollAnimation{
 position:absolute!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 left:50%!important;
 top:50%!important;
 right:auto!important;
 bottom:auto!important;
 margin:0!important;
 padding:0!important;
 transform:translate(-50%,-50%)!important;
 translate:none!important;
 box-sizing:border-box!important;
}
body.board-view #diceCupStage #cupRollAnimation[hidden]{display:none!important;}
body.board-view #diceCupStage .cup-motion-layers{
 margin:0!important;
 flex:0 0 auto!important;
}
/* Click target covers the same centered bounds, but never moves the artwork. */
body.board-view #diceCupStage[data-state="ready"] #rollBtn.roll-cup-button:not([hidden]){
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 margin:0!important;
 transform:none!important;
 translate:none!important;
}
body.board-view #diceCupStage[data-state="ready"] #rollBtn.roll-cup-button:hover:not(:disabled){
 transform:none!important;
}
@media(max-width:760px){
 body.board-view #diceCupStage #cupRollAnimation{
  left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;
 }
}