/* Layout */

/* -------------------- Stage layout -------------------- */

#fullscreen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#gameContainer {
  position: relative;
  width: min(90vw, 720px);
  /* width: min(92vw, calc(80vh * 1.5), 1320px); */
}

/* Hide end-of-game overlays when device is portrait-blocked */
#gameContainer.portrait-blocked~#gameOverOverlay,
#gameContainer.portrait-blocked~#winOverlay {
  display: none !important;
}

/* Hide How-To overlay when device is portrait-blocked */
#gameContainer.portrait-blocked #howToOverlay {
  display: none !important;
}

/* Hide pause overlay when device is portrait-blocked */
#gameContainer.portrait-blocked #pauseOverlay {
  display: none !important;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: #000;
}

/* -------------------- Fullscreen layout -------------------- */

#fullscreen:fullscreen {
  width: 100vw;
  height: 100vh;
  justify-content: center;
  background: #000;
}

#fullscreen:fullscreen #gameContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#fullscreen:fullscreen canvas {
  width: min(100vw, calc(100vh * 1.5));
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}