@font-face {
  font-family: 'primary';
  src: url(enchanted_land-webfont.woff2) format('woff2'), url(enchanted_land-webfont.woff) format('woff'), url(enchanted_land-webfont.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}
p#font-preload {
  position: absolute;
  font-family: 'primary';
  visibility: hidden;
}
#crashracing-com_300x250 {
  position: absolute;
}
svg {
  display: inline-block;
  width: 1em;
  position: relative;
  top: 4px;
}
.feedback {
  z-index: 99;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 100;
  font-size: 24px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  overflow: hidden;
  position: fixed;
  width: 100vw;
  height: 100vh;
}
body {
  font: 22px "Josefin Sans";
  color: #fff;
  background-color: #000;
}
body.loading {
  cursor: progress;
}
body.loading .not-loaded {
  display: block;
}
body.loaded .not-loaded {
  display: none !important;
}
.hidden {
  display: none !important;
}
canvas {
  width: 100vw;
  height: 100vh;
  cursor: none;
  image-rendering: pixelated;
}
section#chat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 320px;
  height: 15vh;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 12px;
}
@media only screen and (max-width: 768px) {
  section#chat {
    display: none;
  }
}
section#chat:not(.active) input {
  background: none;
}
section#chat:not(.active) button {
  display: none;
}
section#chat:not(.active) .messages {
  pointer-events: none;
  overflow-y: none;
}
section#chat.active {
  height: 35vh;
}
section#chat div.messages {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}
section#chat div.messages .contents {
  align-self: flex-end;
  text-shadow: -1px 0 #000, 0 -1px #000, 1px 0 #000, 0px 1px #000, -1px 1px #000, 1px 1px #000, 0px 2px #000;
  word-break: break-word;
}
section#chat div.messages .contents p.slain {
  color: #d00000;
}
section#chat div.messages .contents p.killed {
  color: #3c8008;
}
section#chat form {
  width: 100%;
  display: flex;
  flex-direction: row;
}
section#chat form input {
  background: rgba(255,255,255,0.5);
  color: #342000;
  font-family: inherit;
  display: inline-block;
  border: 0;
  margin: 0;
  font-size: 13px;
  width: 80%;
  padding: 8px;
  flex: 1;
  outline: none;
}
div.adblock {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(208,0,0,0.9);
  color: #fff;
  text-shadow: -1px 0 #5c0400, 0 -1px #5c0400, 1px 0 #5c0400, 0px 2px #5c0400;
  z-index: 99;
  width: 100%;
  text-align: center;
  font-size: 1em;
  padding: 1em;
  line-height: 1.5em;
  pointer-events: none;
}
h1 {
  margin: 24px;
  font-size: 42px;
}
@media only screen and (max-width: 768px) {
  h1 {
    margin: 0;
  }
}
a {
  color: #fff;
  text-decoration: none;
  padding: 8px;
}
a:hover {
  color: #fcf458;
}
.button {
  font-family: inherit !important;
  display: inline-block;
  margin-bottom: 4px;
  padding: 0.5em 1em !important;
  border: 2px solid #000;
  box-shadow: 0 2px 0px #000;
  transition: opacity 0.2s;
  opacity: 0.9;
  transition: transform 0.1s !important;
  cursor: pointer;
  color: #fff;
  border-radius: 0.2em;
}
.button.register {
  background: #3d8008;
}
.button.auth-button {
  background: #5865f2;
}
.button.new-hero {
  background: #3d8008;
  margin-top: 1em;
}
.button:hover {
  color: #000;
  opacity: 1;
  transform: scale(1.05);
}
.overlay-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin: auto;
  z-index: 20;
  display: none;
  user-select: none;
}
.overlay-wrapper.active {
  display: flex;
  animation: fadeIn 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  animation-fill-mode: forwards;
}
.overlay-wrapper.fade-out {
  pointer-events: none;
  animation: fadeOut 0.2s cubic-bezier(0.33, 1, 0.68, 1);
  animation-fill-mode: forwards;
}
.overlay-wrapper.fade-out::after {
  background: none !important;
}
.overlay-wrapper.fade-out .overlay {
  animation: fadeOutScalingDown 0.05s cubic-bezier(0.33, 1, 0.68, 1);
  animation-fill-mode: forwards;
}
.overlay-wrapper h1 {
  margin-bottom: 0.5em;
}
.overlay-wrapper p {
  line-height: 1.2em;
}
.overlay-wrapper a.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.overlay-wrapper .button {
  margin-top: 1em;
  padding: 1em 2em;
  border-radius: 0.2em;
}
.overlay-wrapper::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(max(145vw, 145vh));
  height: calc(max(145vw, 145vh));
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  content: "";
  z-index: -1;
  opacity: 0.15;
  animation: n 80s linear infinite;
  content: "";
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333 1333' fill='%23ffffff'%3E%3Cpath d='M667 667L0 0h103c239 270 427 492 564 667m0 0A7924 7924 0 00205 0h103c148 242 267 464 359 667m0 0C601 455 515 232 410 0h103c62 226 114 448 154 667m0 0c-14-222-31-444-52-667h103c-21 223-38 445-51 667m0 0c40-219 91-441 154-667h102a5881 5881 0 00-256 667m0 0c91-203 211-425 359-667h102a7924 7924 0 00-461 667m0 0C804 492 992 270 1231 0h102L667 667m0 0c175-137 397-325 666-564v102a7924 7924 0 01-666 462m0 0c202-92 425-211 666-359v102a5881 5881 0 01-666 257m0 0c218-40 440-92 666-154v102c-222 21-445 38-666 52m0 0c221 13 444 30 666 51v103c-226-63-448-114-666-154m0 0c212 66 434 151 666 256v103a6042 6042 0 00-666-359m0 0c190 115 412 268 666 461v103c-269-239-491-427-666-564m0 0l666 666h-102c-239-269-427-491-564-666m0 0c115 190 268 412 461 666h-102a6042 6042 0 01-359-666m0 0c66 212 151 434 256 666H821c-63-226-114-448-154-666m0 0c13 221 30 444 51 666H615c21-222 38-445 52-666m0 0c-40 218-92 440-154 666H410c105-232 191-454 257-666m0 0c-92 202-211 425-359 666H205c193-254 347-476 462-666m0 0c-137 175-325 397-564 666H0l667-666m0 0C492 804 270 992 0 1231v-103c254-193 476-346 667-461m0 0C464 758 242 878 0 1026V923c232-105 455-190 667-256m0 0C448 707 226 758 0 821V718c223-21 445-38 667-51m0 0c-222-14-444-31-667-52V513c226 62 448 114 667 154m0 0C455 601 232 515 0 410V308c242 148 464 267 667 359m0 0A7924 7924 0 010 205V103c270 239 492 427 667 564'/%3E%3C/svg%3E") !important;
}
.overlay-wrapper.diamond {
  background: #4282b2;
}
.overlay-wrapper.diamond .button {
  background: #4282b2;
}
.overlay-wrapper.diamond strong {
  color: #4282b2;
}
.overlay-wrapper.gold {
  background: #d1c015;
}
.overlay-wrapper.gold .button {
  background: #bda50d;
}
.overlay-wrapper.gold strong {
  color: #d1c015;
}
.overlay-wrapper.pointsToDistribute {
  background: #d10000;
}
.overlay-wrapper.pointsToDistribute .button {
  background: #d10000;
}
.overlay-wrapper.pointsToDistribute strong {
  color: #d10000;
}
.overlay {
  text-align: center;
  min-width: 60%;
  margin: auto;
  box-shadow: 0 0.5em 3em #000;
  background: #000;
  padding: 2em;
  border-radius: 0.2em;
  animation: fadeInScalingUp 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  animation-fill-mode: forwards;
}
.overlay img {
  margin: 1em 0;
  position: relative;
  width: 200px;
}
section#credentials {
  background: url(background.jpg) no-repeat center;
  background-size: cover;
  overflow: auto;
}
@media screen and (orientation: portrait) {
  section#credentials::after {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    z-index: 99999;
    background-color: #000;
    background-image: url(icons-mobile-landscape.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30%;
    image-rendering: pixelated;
  }
}
section#credentials div.featured-source-code {
  background: rgba(0,0,0,0.25);
  border-radius: 0.2em;
  position: absolute;
  left: 4vh;
  top: 58px;
  display: inline-block;
  font-size: 22px;
}
section#credentials div.featured-source-code a {
  display: inline-block;
  padding: 0.5em;
}
section#credentials .fb-like {
  position: absolute;
  top: 1em;
  left: 4vh;
}
section#credentials section {
  padding: 12px;
  margin: 0 auto;
}
section#credentials section.login,
section#credentials section.register {
  width: 50vw;
}
section#credentials section ul.heroes {
  list-style: none;
  font-size: 0.9em;
  margin-top: 1em;
}
section#credentials section ul.heroes li {
  position: relative;
  display: inline-block;
}
section#credentials section ul.heroes li a:first-child {
  padding: 0.2em;
  display: inline-block;
  width: 250px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 0 2px 0px #000;
  text-align: left;
  color: #000;
  opacity: 0.7;
  transition: opacity 0.2s;
  border-radius: 0.2em;
}
section#credentials section ul.heroes li a:first-child:hover {
  opacity: 1;
}
section#credentials section ul.heroes li a:first-child span {
  display: block;
}
section#credentials section ul.heroes li a:first-child span.name {
  margin-top: 0.3em;
}
section#credentials section ul.heroes li a:first-child span.name strong {
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
section#credentials section ul.heroes li a:first-child span.lvl {
  margin-top: 0.2em;
  font-size: 0.8em;
}
section#credentials section ul.heroes li a:first-child span.skin {
  position: relative;
  top: 0.3em;
  float: left;
  display: inline-block;
  width: 70px;
  margin-right: 0.5em;
  height: 70px;
  image-rendering: pixelated;
  background-size: 2560px 2560px;
}
section#credentials section ul.heroes li a:last-child {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
section#credentials section ul.heroes li:hover a:last-child {
  opacity: 0.7;
}
section#credentials section ul.heroes li:hover a:last-child:hover {
  opacity: 1;
}
section#credentials p {
  margin: 12px;
}
section#credentials input {
  font: 24px primary;
  width: 50vw;
  padding: 14px;
  margin: 0.5em auto;
  border: 4px solid #000;
  transition: border 0.4s;
  display: block;
}
section#credentials input:not(.button):focus:invalid {
  border: 4px solid #d00000;
}
section#credentials input:not(.button):focus,
section#credentials input:not(.button):active {
  padding: 14px !important;
  border: 4px solid #fcf458;
  outline: none;
  outline-width: 0;
}
section#credentials .ad-left {
  position: absolute;
  background: rgba(0,0,0,0.25);
  display: inline-block;
  width: 300px;
  height: 250px;
  left: 4vh;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  section#credentials .ad-left {
    display: none;
  }
}
section#credentials .ad-bottom {
  position: absolute;
  background: rgba(0,0,0,0.25);
  display: inline-block;
  width: 728px;
  height: 90px;
  left: 0;
  right: 0;
  bottom: 4vh;
  margin: auto;
}
@media only screen and (max-width: 768px) {
  section#credentials .ad-bottom {
    display: none;
  }
}
section#credentials img {
  margin-top: 8vh;
  margin-bottom: 12px;
  width: 32vw;
}
section#credentials input {
  width: auto;
}
section#credentials input[type="text"] {
  width: 300px;
  text-align: center;
  margin-bottom: 2vh;
}
.modal {
  pointer-events: none;
  position: absolute;
  text-align: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  transition: opacity 0.2s;
  z-index: -10;
  opacity: 0;
  background: rgba(0,0,0,0.95);
}
.modal.checkpoint-modal {
  padding: 10vh 10vw;
}
.modal.checkpoint-modal h2 {
  color: #986c1b;
  text-shadow: -2px 0 #2c1800, 0 -2px #2c1800, 2px 0 #2c1800, 0px 3px #2c1800;
}
.modal.checkpoint-modal ul {
  margin-top: 1vh;
  list-style: none;
  padding: 1vh 1vw;
}
.modal.checkpoint-modal ul li {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: #cca874;
  color: #2e1100;
}
.modal.checkpoint-modal ul li a {
  display: inline-block;
}
.modal.active {
  pointer-events: all;
  display: block;
  opacity: 1;
  z-index: 10;
}
.hint {
  font-family: 'primary';
  position: absolute;
  display: none;
  opacity: 0;
  transition: opacity 0.2s;
  background: #cca874;
  font-size: 28px;
  color: #2e1100;
}
@media only screen and (max-width: 768px) {
  .hint {
    font-size: 20px;
  }
}
.hint:not(.bottom)::after {
  top: 24px;
  bottom: 0;
}
.hint:not(.bottom).left::before {
  top: 30px;
}
.hint.bottom::after {
  bottom: 24px;
}
.hint.bottom.left::before {
  bottom: 18px;
}
.hint::after {
  content: ' ';
  position: absolute;
  display: block;
  background: #cca874;
  width: 6px;
  height: 6px;
}
.hint:not(.left)::after {
  left: -6px;
  height: 6px;
}
.hint.left::after {
  right: -6px;
}
.hint.left::before {
  content: ' ';
  position: absolute;
  display: block;
  background: #b49054;
  width: 6px;
  height: 6px;
  bottom: 0;
  right: -12px;
}
.hint h2 {
  color: #986c1b;
  text-shadow: -1px 0 #2c1800, 0 -1px #2c1800, 1px 0 #2c1800, 0px 1px #2c1800, 0px 2px #2c1800;
  font-size: 1.1em;
}
.hint h2.red {
  color: #d00000;
  text-shadow: -1px 0 #5c0400, 0 -1px #5c0400, 1px 0 #5c0400, 0px 1px #5c0400, 0px 2px #5c0400;
}
.hint h2.green {
  color: #7cac20;
  text-shadow: -1px 0 #347004, 0 -1px #347004, 1px 0 #347004, 0px 1px #347004, 0px 2px #347004;
}
.hint h2.blue {
  color: #1c80e4;
  text-shadow: -1px 0 #043478, 0 -1px #043478, 1px 0 #043478, 0px 1px #043478, 0px 2px #043478;
}
.hint h2.purple {
  color: #9848b0;
  text-shadow: -1px 0 #501858, 0 -1px #501858, 1px 0 #501858, 0px 1px #501858, 0px 2px #501858;
}
.hint .strength {
  color: #a00000;
}
.hint .agility {
  color: #3c8008;
}
.hint .intelligence {
  color: #185090;
}
.hint .gold {
  text-shadow: -1px 0 #886408, 0 -1px #886408, 1px 0 #886408, 0px 1px #886408, 0px 2px #886408;
  color: #fcf458;
}
.hint .diamond {
  text-shadow: -1px 0 #002870, 0 -1px #002870, 1px 0 #002870, 0px 1px #002870, 0px 2px #002870;
  color: #ced9fd;
}
.hint .rare {
  text-shadow: -1px 0 #a57600, 0 -1px #a57600, 1px 0 #a57600, 0px 1px #a57600, 0px 2px #a57600;
  color: #f5b100;
}
.hint .magical {
  text-shadow: -1px 0 #0c4084, 0 -1px #0c4084, 1px 0 #0c4084, 0px 1px #0c4084, 0px 2px #0c4084;
  color: #246098;
}
.hint .shortcut {
  border-radius: 3px;
  background: #2e1100;
  font-size: 0.5em;
  padding: 3px 5px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  margin-right: 2px;
  position: relative;
  top: -2px;
}
.hint p,
.hint ul {
  font-size: 0.85em;
  margin: 0;
}
.hint li {
  padding-left: 0;
  margin-left: 16px;
}
.hint img {
  image-rendering: pixelated;
}
.hint small {
  font-size: 0.82em;
  margin-left: 4px;
}
.hint small.increase {
  color: #3c8008;
}
.hint small.decrease {
  color: #a00000;
}
.hint.active {
  display: inline-block;
  opacity: 1;
  padding: 12px 18px 12px 12px;
  -webkit-box-shadow: 6px 6px 0px 0px #b49054;
  -moz-box-shadow: 6px 6px 0px 0px #b49054;
  box-shadow: 6px 6px 0px 0px #b49054;
}
#tutorial h2 {
  margin: 8vh 0 4vh 0;
  font-size: 1.2em;
}
#tutorial .contents {
  position: relative;
  margin: auto;
  font-size: 0.9em;
  text-align: center;
  width: 600px;
  background: #3c2404;
  color: #cca874;
  border-radius: 0.2em;
}
#tutorial .contents.step-1 >div:not(.step-1) {
  display: none;
}
#tutorial .contents.step-2 >div:not(.step-2) {
  display: none;
}
#tutorial .contents.step-3 >div:not(.step-3) {
  display: none;
}
#tutorial .contents.step-4 >div:not(.step-4) {
  display: none;
}
#tutorial .contents.step-5 >div:not(.step-5) {
  display: none;
}
#tutorial .contents.step-6 >div:not(.step-6) {
  display: none;
}
#tutorial .contents.step-7 >div:not(.step-7) {
  display: none;
}
#tutorial .contents.step-8 >div:not(.step-8) {
  display: none;
}
#tutorial .contents.step-9 >div:not(.step-9) {
  display: none;
}
#tutorial .contents.step-1 a.nav.left {
  display: none;
}
#tutorial .contents.step-9 a.nav.right {
  display: none;
}
#tutorial .contents:not(.step-9) a.nav.last {
  display: none;
}
#tutorial .contents > div {
  pointer-events: none;
}
#tutorial .contents a.nav {
  position: absolute;
  bottom: 0;
  color: inherit;
  padding: 18px 12px;
  z-index: 1;
  font-size: 22px;
  cursor: pointer;
  text-shadow: 0 0 2px #000, -1px 0 #000, 0 -1px #000, 1px 0 #000, 0px 2px #000;
}
#tutorial .contents a.nav.left {
  left: 8px;
}
#tutorial .contents a.nav.right {
  right: 8px;
}
#tutorial .contents a.nav.last {
  right: 8px;
}
#tutorial .contents img {
  width: 100%;
  display: block;
}
#tutorial .contents p {
  padding: 14px;
  text-shadow: -1px 0 #000, 0 -1px #000, 1px 0 #000, 0px 1px #000, 0px 2px #000;
  color: #fff;
}
@-moz-keyframes n {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(182deg) scale(1.3) translate(-50%, -50%);
  }
  to {
    transform: rotate(365deg) translate(-50%, -50%);
  }
}
@-webkit-keyframes n {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(182deg) scale(1.3) translate(-50%, -50%);
  }
  to {
    transform: rotate(365deg) translate(-50%, -50%);
  }
}
@-o-keyframes n {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(182deg) scale(1.3) translate(-50%, -50%);
  }
  to {
    transform: rotate(365deg) translate(-50%, -50%);
  }
}
@keyframes n {
  0% {
    transform: rotate(0deg) translate(-50%, -50%);
  }
  50% {
    transform: rotate(182deg) scale(1.3) translate(-50%, -50%);
  }
  to {
    transform: rotate(365deg) translate(-50%, -50%);
  }
}
@-moz-keyframes fadeInScalingUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes fadeInScalingUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-o-keyframes fadeInScalingUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeInScalingUp {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeOutScalingDown {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@-webkit-keyframes fadeOutScalingDown {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@-o-keyframes fadeOutScalingDown {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes fadeOutScalingDown {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}
@-moz-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*# sourceMappingURL=style.css.map*/