/*
 SMALL GAMES — GAMEPLAY VIEWPORT FIT V2
 Active board/canvas must remain entirely visible during play.
*/
html,body{min-height:100%}
body.sg-playing{overflow:hidden!important;overscroll-behavior:none}

.sg-gameplay-viewport{
  --sg-play-height: min(68vh, 620px);
  box-sizing:border-box!important;
  height:var(--sg-play-height)!important;
  max-height:var(--sg-play-height)!important;
  min-height:0!important;
  overflow:hidden!important;
}

.sg-gameplay-viewport > canvas,
.sg-gameplay-viewport > svg,
.sg-gameplay-viewport canvas,
.sg-gameplay-viewport svg{
  max-width:100%!important;
  max-height:100%!important;
}

.sg-gameplay-viewport > canvas,
.sg-gameplay-viewport > svg{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}

/* Grids/DOM boards must be allowed to shrink inside the fitted container. */
.sg-gameplay-viewport .dom-board,
.sg-gameplay-viewport .signal-grid,
.sg-gameplay-viewport .grid,
.sg-gameplay-viewport .board,
.sg-gameplay-viewport .field{
  max-width:100%!important;
  max-height:100%!important;
}

@media(max-width:899px){
  .sg-gameplay-viewport{
    --sg-play-height:calc(100svh - 165px);
  }
}

/* During active play, secondary explanatory sections must not force board clipping. */
body.sg-playing .below,
body.sg-playing .info,
body.sg-playing .scorearea,
body.sg-playing .score-area,
body.sg-playing .editorial,
body.sg-playing .game-editorial{
  scroll-margin-top:0;
}


/* Circuit Break uses a tall document with gameplay plus supporting content.
   Keep the page scrollable while the game is active; only the board itself is
   viewport-fitted. */
html[data-game="circuit-break"] body.sg-playing{
  overflow:auto!important;
  overscroll-behavior:auto!important;
}