Dvorak

br {
  display: none;
}

Изначально думал изучить все связанные с этим языки и среды разработки.

Никогда больше не позволяйте себе так думать. =)

Правильно я понимаю?

Да.

И стоит ли сейчас начинать изучение Unity?

Хотите делать мобильные игры — да.

Если да, то какие для этого есть ресурсы?

Официальный сайт Unity, Youtube, Google, больше и не надо.

Для progress пропишите display:block

https://jsfiddle.net/39sch6a8/

Background-position: center top;
Нет?

Это стандартные возможности мобильного браузера. Однако противоречит канонам мобильного дизайна - текст должен быть хорошо виден пользователю мобильного устройства сразу, без всяких тапов. Соответственно, сайты где имеется такая возможность скорее всего не адаптированы под мобильные.

Даже и не знаю стоит ли стремиться к такому эффекту. Любое дополнительное действие, которое нужно сделать пользователю будет вызывать раздражение. К тому же не всегда очевидно, не все знают, что двойной тап имеет такое действие. Тут нужно либо пользователя научить, либо опять же сразу сделать чтобы все было видно без тапов.

Вместо flex-wrap у #first добавьте flex-flow: column wrap;
codepen.io/anon/pen/vLbzgY

А это там совершенно ни к чему:

#wrap {
  flex-wrap: wrap;
}

<label>
    <img src="myimage.png" alt="Нажмите для выбора файла.">
    <input type="file" hidden>
</label>

Имя:

document.getElementById('uploadfileinp').addEventListener('change', function() {
	alert(this.files[0].name);
});