/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
  /* none for no scaling */
}
#kr3m {
  /*It is solved this way:
        Game is set to resize to 100%.

        On desktop, it resizes to iframe size.

        On mobile, there is special code in main.ts which redirects browser to iframe contents, so game loads to full screen.

        For development, while game is not inside iframe,
        we added small javascript code in index.html to limit game size to 826x590 on desktop.
    */
  position: fixed;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#kr3m.ads-768-portrait {
  position: absolute;
  top: 270px;
  bottom: 0px;
  height: unset;
}
#kr3m.ads-768-landscape {
  position: absolute;
  left: 0px;
  right: 140px;
  width: unset;
  height: unset;
  top: 110px;
  bottom: 0px;
}
#kr3m #loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 286px;
  height: 110px;
  margin-left: -143px;
  margin-top: -55px;
}
@media (max-width: 480px) {
  #kr3m #loader {
    width: 228px;
    height: 88px;
    margin-left: -114px;
    margin-top: -44px;
  }
}
#kr3m #loader > div {
  position: absolute;
  width: 286px;
  height: 110px;
  background: url("../img/loader_bg.png?_=1.2.1.1704") no-repeat;
}
@media (max-width: 480px) {
  #kr3m #loader > div {
    width: 228px;
    height: 88px;
    background-size: 100%;
  }
}
#kr3m #loader > div > div {
  position: relative;
  display: block;
  width: 248px;
  height: 73px;
  top: 14px;
  left: 19px;
}
@media (max-width: 480px) {
  #kr3m #loader > div > div {
    width: 198px;
    height: 57px;
    top: 11px;
    left: 14px;
  }
}
#kr3m #loader > div > div #bar {
  position: relative;
  display: block;
  width: 0;
  height: 73px;
  background: url("../img/loader_bar.png?_=1.2.1.1704") no-repeat;
  -webkit-filter: drop-shadow(0 0 12px #03ff03);
  filter: drop-shadow(0 0 12px #03ff03);
}
@media (max-width: 480px) {
  #kr3m #loader > div > div #bar {
    background-size: 198px;
    height: 57px;
    -webkit-filter: drop-shadow(0 0 6px #03ff03);
    filter: drop-shadow(0 0 6px #03ff03);
  }
}
#kr3m #loader #progress {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 100px;
  font-family: Arial;
  font-size: 36px;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
}
@media (max-width: 480px) {
  #kr3m #loader #progress {
    line-height: 85px;
    font-size: 29px;
  }
}
#kr3m #exception_message {
  display: block;
  position: absolute;
  text-align: left;
  font-family: monospace;
  font-size: 14px;
  font-weight: bold;
  color: #ff6464;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  background: rgba(0, 0, 0, 0.8);
  white-space: pre-line;
  border: 2px solid red;
  border-top: 22px solid red;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px;
  box-shadow: 0 0 5px black;
  box-sizing: border-box;
}
#kr3m #exception_message_text {
  overflow-y: auto;
  max-height: 100%;
  display: block;
}
#kr3m #exception_message_close {
  font-weight: bold;
  font-size: 16px;
  position: absolute;
  right: 0px;
  top: -20px;
  background-color: black;
  pointer-events: all;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                        supported by Chrome and Opera */
}
#kr3m #game {
  opacity: 0;
  transition: opacity 0.5s;
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: none;
}
.error {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  background: #d3d3d3;
  text-align: center;
  color: #000000;
  z-index: 1000;
}
.error img {
  width: 100%;
  height: auto;
  max-width: 313px;
  max-height: 78px;
}
@font-face {
  font-family: "loaderFont";
  src: url("../fonts/CaviarDreams.woff?_=1.2.1.1704") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams.woff?_=1.2.1.1704") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Caviar Dreams";
  src: url("../fonts/CaviarDreams-Bold.woff?_=1.2.1.1704") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
#kr3m {
  background-image: linear-gradient(to right, #3DBC71, #3fb46d, #2e7d4e, #2c7145, #215737, #174228);
}
#kr3m #loader {
  position: static;
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 100%;
  font-family: "loaderFont", Helvetica, Arial, sans-serif;
  background: url(../img/background.jpg@{version}) no-repeat;
  background-size: 100% 100%;
  background-image: linear-gradient(to bottom right, #124D2B, rgba(63, 180, 109, 0.32941176), #256B40, #2c7145, rgba(33, 87, 55, 0.45098039), #2e7b4d);
}
#kr3m #loader table {
  height: 100%;
  width: 100%;
  text-align: center;
}
#kr3m #loader table tbody {
  vertical-align: top;
}
#kr3m #loader table tr:first-child {
  height: 150px;
}
#kr3m #loader table tr:nth-child(2) {
  height: 170px;
}
#kr3m #loader .logo {
  opacity: 0;
  /*/will be unhidden by random-hint when language is loaded, so logo and text appear at the same time*/
  display: none;
  vertical-align: top;
  background: url("../img/logo.png?_=1.2.1.1704") no-repeat 0px 0px transparent;
  background-size: 61px auto;
  width: 61px;
  height: 83px;
  margin-left: 20px;
  margin-right: -25px;
}
#kr3m #loader .title {
  display: inline-block;
  font-size: 74px;
  color: #ffdf43;
  margin-top: 4px;
  transform: translateY(50px);
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
}
#kr3m #loader .loading-text {
  height: 20px;
  font-size: 19px;
  line-height: 19px;
  color: #ffdf43;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
}
#kr3m #loader .loading-bar {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  display: block;
  width: 286px;
  height: 110px;
  background: url("../img/loader_bg.png?_=1.2.1.1704") no-repeat;
}
#kr3m #loader .progress-bar {
  position: absolute;
  top: 14px;
  left: 19px;
  width: 248px;
  height: 73px;
}
#kr3m #loader .progress-bar-line {
  width: 0;
  height: 100%;
  background: url("../img/loader_bar.png?_=1.2.1.1704") no-repeat;
}
#kr3m #loader .percentage-1-clip {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  overflow: hidden;
}
#kr3m #loader .percentage-1 {
  position: absolute;
  left: 16px;
  top: 34px;
  width: 250px;
  height: 100%;
  color: #ffdf43;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
  font-size: 36px;
  line-height: 35px;
}
#kr3m #loader .percentage-2 {
  position: absolute;
  left: 16px;
  top: 34px;
  width: 250px;
  height: 100%;
  color: #ffdf43;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
  font-size: 36px;
  line-height: 35px;
}
#kr3m #loader .hint-text {
  height: 50px;
  font-size: 19px;
  line-height: 25px;
  color: #ffdf43;
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.75), 1px -1px 2px rgba(0, 0, 0, 0.75), -1px 1px 2px rgba(0, 0, 0, 0.75), 1px 1px 2px rgba(0, 0, 0, 0.75);
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 8px;
}
#kr3m #loader footer {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: #1b482d;
  font-family: Arial;
  width: 100%;
}
#kr3m #loader .kr3m-logo {
  display: block;
  background: url("../img/loader_kr3m_logo.png?_=1.2.1.1704") no-repeat 0px 0px transparent;
  background-size: 110px auto;
  height: 45px;
  width: 110px;
  color: #ffffff;
  position: absolute;
  right: 5px;
  bottom: 5px;
  opacity: 0;
  animation: fadein 150ms forwards;
  animation-delay: 1s;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media only screen and (max-height: 320px) {
  #kr3m #loader .hint-text {
    height: 40px;
    font-size: 16px;
    line-height: 18px;
    /*do not cover kr3m logo*/
    margin-left: 70px;
    margin-right: 70px;
  }
  #kr3m #loader .logo {
    background-size: 43px auto;
    width: 43px;
    height: 59px;
    margin-left: 15px;
    margin-right: -20px;
  }
  #kr3m #loader .title {
    font-size: 61px;
    margin-top: 1.5px;
  }
  #kr3m #loader .loading-text {
    height: 17px;
    font-size: 16px;
    line-height: 16px;
  }
  #kr3m #loader footer {
    bottom: 0;
  }
}
@media only screen and (max-width: 480px) {
  #kr3m #loader .logo {
    background-size: 55px auto;
    width: 55px;
    height: 75px;
    margin-left: 22px;
    margin-right: -22px;
  }
  #kr3m #loader .title {
    font-size: 64px;
    margin-top: 1.5px;
  }
}
@media only screen and (max-width: 400px) {
  #kr3m #loader .logo {
    background-size: 43px auto;
    width: 43px;
    height: 59px;
    margin-left: 15px;
    margin-right: -20px;
  }
  #kr3m #loader .title {
    font-size: 61px;
    margin-top: 1.5px;
  }
  #kr3m #loader .kr3m-logo {
    background-size: 55px auto;
    height: 23px;
    width: 55px;
  }
}