/* Keep the complete 16:9 scene and its controls inside the available screen. */
#adventure:not([data-phase='idle']) .game-viewport {
  width: var(--game-scene-width, 100%);
  height: var(--game-scene-height, auto);
  min-height: 0;
  max-width: 100%;
  aspect-ratio: 16/9 !important;
  flex: 0 0 auto;
  margin-inline: auto;
}
#adventure:is(.expanded, :fullscreen) {
  height: var(--game-screen-height, 100dvh);
  max-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  z-index: 100;
}
#adventure:is(.expanded, :fullscreen) .arcade-bottomline {
  height: auto;
  flex-shrink: 0;
}
#adventure:is(.expanded, :fullscreen) .arcade-topline {flex-shrink:0}
#adventure:is(.expanded, :fullscreen) .arcade-actions {flex-wrap:wrap;justify-content:center}
#adventure:is(.expanded, :fullscreen) .play-controls {
  position: static;
  flex-shrink: 0;
  background: #3c4f2a;
  pointer-events: auto;
}
#adventure:not([data-phase='idle']) #game-canvas {
  width:100%;height:100% !important;object-fit:contain;object-position:center !important;
}
#adventure .modal-overlay {overflow:auto}
#adventure .modal-overlay .game-dialog {max-height:100%;overflow:auto}
@media (max-height:520px) {
  #adventure:is(.expanded, :fullscreen) .play-controls {min-height:58px;padding:4px 12px}
  #adventure:is(.expanded, :fullscreen) .control-key {height:44px;min-height:44px}
  #adventure:is(.expanded, :fullscreen) .play-controls p {display:none}
  #adventure:is(.expanded, :fullscreen) .arcade-bottomline {min-height:44px;padding:2px 8px}
}