/*
 SMALL GAMES — GAMEPLAY VIEWPORT FIT V2
 Active board/canvas must remain entirely visible during play.
*/
html,body{min-height:100%}
/* Desktop keeps normal page scrolling. Pointer-wheel suppression is limited to
   the active gameplay surface by game-play-scroll-lock.js. */
body.sg-playing{overflow:auto!important;overscroll-behavior:auto!important}

/* Touch screens lock the document only during live input. Completion, pause,
   mode and game-over overlays automatically remove sg-playing. */
@media (hover:none) and (pointer:coarse){
  body.sg-playing{overflow:hidden!important;overscroll-behavior:none!important}
}

.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;
}