/* Demanacita v48 — viewport-safe Blocks + stable game feedback. */

/* BLOCKS must always fit as a complete board instead of being clipped by short desktop viewports. */
.arcade-blocks-view .blocks-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  padding:.3rem!important;
  overflow:visible!important;
}
.arcade-blocks-view .blocks-canvas{
  display:block!important;
  width:auto!important;
  height:clamp(250px,calc(100dvh - 380px),480px)!important;
  max-width:100%!important;
  max-height:480px!important;
  aspect-ratio:5/8!important;
  margin:0 auto!important;
}
@supports(height:100svh){
  .arcade-blocks-view .blocks-canvas{height:clamp(250px,calc(100svh - 380px),480px)!important}
}
@media(min-width:821px) and (max-height:760px){
  .arcade-blocks-view .blocks-canvas{height:clamp(235px,calc(100dvh - 400px),350px)!important}
}
@media(max-width:820px){
  .arcade-blocks-view .blocks-canvas{height:clamp(235px,calc(100svh - 350px),390px)!important}
}

/* Every game reserves its feedback geometry from the start. Status text and ACCESS GRANTED use separate fixed rows, so neither can push the canvas or hide the other. */
.arcade-game-active,.arcade-tennis-view,.arcade-extra-view{--game-status-h:58px;--game-win-h:92px}
.arcade-game-active .arcade-gate-status,
.arcade-tennis-view .arcade-gate-status,
.arcade-extra-view .arcade-gate-status{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:var(--game-status-h)!important;
  min-height:var(--game-status-h)!important;
  max-height:var(--game-status-h)!important;
  margin:0!important;
  padding:.55rem .8rem!important;
  overflow:hidden!important;
  text-align:center!important;
}
.arcade-game-active .arcade-win,
.arcade-tennis-view .arcade-win,
.arcade-extra-view .arcade-win{
  box-sizing:border-box!important;
  display:grid!important;
  align-content:center!important;
  justify-items:center!important;
  width:100%!important;
  height:var(--game-win-h)!important;
  min-height:var(--game-win-h)!important;
  max-height:var(--game-win-h)!important;
  margin:0!important;
  overflow:hidden!important;
}
.arcade-game-active .arcade-win[hidden],
.arcade-tennis-view .arcade-win[hidden],
.arcade-extra-view .arcade-win[hidden]{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.arcade-game-active .arcade-win:not([hidden]),
.arcade-tennis-view .arcade-win:not([hidden]),
.arcade-extra-view .arcade-win:not([hidden]){
  visibility:visible!important;
  opacity:1!important;
}

/* The denser Maze remains readable after moving to the 21x13 layout. */
.arcade-maze-view .maze-wrap{background:#02030d!important}
.arcade-maze-view .maze-canvas{image-rendering:pixelated!important;max-width:100%!important}

@media(max-width:520px){
  .arcade-game-active,.arcade-tennis-view,.arcade-extra-view{--game-status-h:66px;--game-win-h:104px}
  .arcade-game-active .arcade-gate-status,.arcade-tennis-view .arcade-gate-status,.arcade-extra-view .arcade-gate-status{font-size:.72rem!important;line-height:1.35!important}
  .arcade-game-active .arcade-win span,.arcade-tennis-view .arcade-win span,.arcade-extra-view .arcade-win span{font-size:.72rem!important;line-height:1.35!important}
}