body {
  padding: 0;
  margin: 0 0 0 calc(50vw - 37.5vh);
  overflow: hidden;

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

body.with-bg {
  background: #fff url(public/loading-screen/loader-bg.jpg?1) no-repeat;
  background-size: cover;
  background-position: center;
  
  width: 100%;
  height: 100%;
}

.app {
  user-select: none;
  margin: 0 auto;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

#game-container {
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.7), -5px 0px 5px 0px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

/* Allow resize */
#game-container > canvas {

  width: 100%;
  height: 100%;
  margin: auto;
  display: block;
}

#logo {
  position: absolute;
  width: 100%;
}

#logo img {
  margin: 0 auto;
  display: block;
}

.app__loader-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  /*background-image: url(template/loader-bg.jpg?2);*/
  /*background-size: cover;*/
  /*background-position: center;*/
  display: none;
}

.bad-browser {
  height: 600px;
  background: #fff url("public/bad-browser/bg-en.jpg") no-repeat center;
}
.bad-browser.ru { background-image: url("public/bad-browser/bg-ru.jpg"); }
.bad-browser.lv { background-image: url("public/bad-browser/bg-lv.jpg"); }

.bad-browser-icon {
  position: absolute;
  width: 142px;
  height: 184px;
  top: 290px;
}
.bad-browser-icon.firefox {
  background: url("public/bad-browser/browser-firefox.png") no-repeat center;
  left: 23%;
}
.bad-browser-icon.chrome {
  background: url("public/bad-browser/browser-chrome.png") no-repeat center;
  left: 43%;
}
.bad-browser-icon.yandex, .bad-browser-icon.opera {left: 63%;}
.bad-browser-icon.yandex {
  background: url("public/bad-browser/browser-yandex.png") no-repeat center;
}
.bad-browser-icon.opera {
  background: url("public/bad-browser/browser-opera.png") no-repeat center;
}

.diagnostics {
  position: absolute;
  left: 50%;
  margin-left: -490px;
  top: 560px;
  font: 10px monospace;
}
.diagnostics .y { color: #fff; }
.diagnostics .n { color: #000; }

.loading-tips {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 45px;
  color: #fff;
  font: bold 24px sans-serif;
  text-shadow: 0 0 5px #0062A7;
}

#tech-info {
  bottom: 20px;
  color: #222;
  text-shadow: 0 0 3px #eee;
  font: 12px sans-serif;
  left: 10px;
  position: absolute;
}