body {
  padding: 0;
  margin: 0;
}
body.with-bg {
  background: #fff url("template/bg.jpg?2") no-repeat 50% 0;
}

.app {
  user-select: none;
  max-width: 1000px;
  margin: 0 auto;
}
body.with-borders .app {
  margin-top: 50px;
}

#game-container {
  position: relative;
}
/* Allow resize */
#game-canvas {
  width: 100%;
  height: 100%;
}

#logo {
  position: absolute;
  width: 100%;
}
#logo img {
  margin: 0 auto;
  display: block;
}

.borders {
  position: relative;
}
.border-left, .border-right {
  position: absolute;
  top: 0;
  width: 12px;
  height: 600px;
}
.border-left {
  left: -12px;
  background: url("template/border-left.png") no-repeat;
}
.border-right {
  right: -12px;
  background: url("template/border-right.png") no-repeat;
}
.border-top, .border-bottom {
  position: absolute;
  width: 1025px;
  height: 13px;
}
.border-top {
  top: -12px;
  left: -13px;
  background: url("template/border-top.png") no-repeat;
}
.border-bottom {
  bottom: -13px;
  left: -12px;
  background: url("template/border-bottom.png") no-repeat;
}

.app__loader-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #000 url("template/loader-bg.jpg") no-repeat center;
}

.app__progress {
  position: absolute;
  left: 50%;
  bottom: 80px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px;
  height: 40px;
  border: 7px solid #c6dd25;
  border-radius: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  background: #188c02;
}

.app__progress-bar {
  display: inline-block;
  height: 100%;
  background: #44b109;
  border-radius: 40px;
  border-right: 2px solid #5bd406;
}

.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 {
  margin-top: 10px;
  text-align: center;
  color: #999;
  font: 12px sans-serif;
}
body.with-bg #tech-info {
  margin-top: 25px;
  color: rgba(255, 255, 255, 0.7);
}