/* Forge board fit (forge-board-fit.js sets these classes). Wide screens: the board takes the left column at full
   height and the game's hints, scores and buttons stack in a side panel on the right. */
#play.screen.game.on #stage>.fbf-side{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(280px,24vw,380px);
  grid-template-rows:repeat(var(--fbf-rows,6),min-content) 1fr;
  grid-auto-rows:min-content;
  align-content:center;
  column-gap:clamp(12px,1.6vw,24px);
  row-gap:10px;
}
#play.screen.game.on #stage>.fbf-side>[data-fbf-board]{
  grid-column:1;
  grid-row:1 / -1;
  justify-self:center;
  align-self:center;
}
#play.screen.game.on #stage>.fbf-side>:not([data-fbf-board]){
  grid-column:2;
  min-width:0;
}
#play.screen.game.on #stage>.fbf-on [data-fbf-wrap]>canvas,
#play.screen.game.on #stage>.fbf-on [data-fbf-board]>canvas{
  width:100%!important;
  height:auto!important;
  max-width:none!important;
}
/* Wide screens: the game's control pad (thumbstick, Jump/Fire buttons) stands beside the board instead of under it,
   so the board can use the full height. */
html body #play.screen.game.on #stage>.fbf-on.fbf-side>[data-fbf-row][data-fbf-board]{
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  column-gap:16px!important;
}
#play.screen.game.on #stage>.fbf-side>[data-fbf-row]>:not([data-fbf-pad]){
  flex:none!important;
  width:var(--fbf-cw)!important;
  max-width:none!important;
}
#play.screen.game.on #stage>.fbf-side>[data-fbf-row]>[data-fbf-pad]{
  flex:none!important;
  width:auto!important;
  margin:0!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
}
html body #play.screen.game.on #stage>.fbf-side>[data-fbf-row]>[data-fbf-pad="2"]{
  display:grid!important;
  grid-template-columns:repeat(2,auto);
  justify-items:center;
  gap:8px!important;
}
html body #play.screen.game.on #stage>.fbf-side>[data-fbf-row]>[data-fbf-pad="2"]>.forge-stick{
  grid-column:1 / -1;
  --fs-size:96px;
  margin:0;
}
html body #play.screen.game.on #stage>.fbf-side>[data-fbf-row]>[data-fbf-pad="2"]>button.tk-btn{
  min-width:58px!important;
  min-height:58px!important;
  font-size:12px!important;
}