* {
  box-sizing: border-box;
  margin: 0;
  outline: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  min-height: 100%;
}

html {
  background-color: #ededed;
  line-height: 1.4;
}

body, input, button {
  font-family: 'Press Start 2P', cursive;
  user-select: none;
}

.back {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: #999999;
  position: fixed;
  top: 14px;
  left: 14px;
}

.back:hover {
  color: #666;
}

.back img {
  vertical-align: middle;
  height: 28px;
}

.back span {
  vertical-align: middle;
}

.rotate {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: url(../img/rotate.png) no-repeat center center;
}

.screen {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.screen-border-1 {
  background: linear-gradient(to bottom, #ffffff 0%,#ededed 100%);
  border-radius: 5vh;
  padding: 0.7vh;
}

.screen-border-2 {
  background: linear-gradient(to bottom, #ececec 0%, #9a9a9a 100%);
  border-radius: 5vh;
  padding: 2.7vh;
}

.screen-border-3 {
  background: linear-gradient(to bottom, #ffffff 0%, #9e9e9e 100%);
  border-radius: 5vh;
  padding: 0.9vh;
}

.screen-border-4 {
  background: linear-gradient(to bottom, #f7f7f7 0%, #d9d9d9 100%);
  border-radius: 4vh;
  padding: 2vh;
}

.game-screen {
  border: 2px solid #707070;
  width: 99vh;
  height: 66vh;
  border-radius: 4vh;
  background: url(../img/bg.png) no-repeat center center;
  background-size: 102% 102%;
  position: relative;
}

.icons-screen {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

.icon {
  position: absolute;
  height: 10%;
  will-change: transform;
  z-index: 10;
  transition: opacity 0.2s;
}

.button {
  position: absolute;
}

.button-border-1 {
  padding: 0.7vh;
  background: linear-gradient(to bottom, #ededed 0%, #ffffff 100%);
  border-radius: 50%;
  cursor: pointer;
}

.button-border-2 {
  padding: 1.6vh;
  background: linear-gradient(to bottom, #e5e5e5 0%, #f7f7f7 100%);
  border-radius: 50%;
}

.button-border-3 {
  padding: 0.7vh;
  border: 0.35vh solid #288d5b;
  background: linear-gradient(to bottom, #e2e989 0%, #1da14e 100%);
  border-radius: 50%;
}

.button-center {
  height: 9.8vh;
  width: 9.8vh;
  border-radius: 50%;
  background: linear-gradient(to bottom, #93cd73 0%, #03b956 100%);
  text-align: center;
  line-height: 9.8vh;
  font-family: 'Arial', sans-serif;
  font-size: 4.2vh;
  font-weight: bold;
  color: #fff;
}

.button-arrow {
  width: 5vh;
  height: 5vh;
  background: url(../img/arrow.png) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
}

.button__a {
  left: -30%;
  bottom: -5%;
}

.button__a .button-arrow {
  left: -2.5vh;
  bottom: -2.5vh;
  transform: scale(1, -1);
}

.button__d {
  right: -30%;
  bottom: -5%;
}

.button__d .button-arrow {
  right: -2.5vh;
  bottom: -2.5vh;
  transform: scale(-1, -1);
}

.button__q {
  left: -30%;
  bottom: 30%;
}

.button__q .button-arrow {
  left: -2.5vh;
  top: -2.5vh;
}

.button__e {
  right: -30%;
  bottom: 30%;
}

.button__e .button-arrow {
  right: -2.5vh;
  top: -2.5vh;
  transform: scale(-1, 1);
}

.button-border-1:active .button-border-3, .button.button__active .button-border-3 {
  background: linear-gradient(to bottom, #1e6258 0%, #39c456 100%);
}

.button-border-1:active .button-center, .button.button__active .button-center {
  background: linear-gradient(to bottom, #1f6658 0%, #3ac656 100%);
}

.score-best {
  color: #fff;
  font-size: 1.5vh;
  position: absolute;
  top: 3%;
  left: 3%;
}

.score {
  color: #fff;
  font-size: 1.5vh;
  position: absolute;
  top: 3%;
  left: 44%;
}

.lives {
  position: absolute;
  top: 3%;
  right: 3%;
  line-height: 0;
}

.live_elem {
  height: 3vh;
  width: 3.1vh;
  background: url(../img/live.png) no-repeat center center;
  background-size: 100% 100%;
  display: inline-block;
}

.live__inactive {
  background: url(../img/live_empty.png) no-repeat center center;
  background-size: 100% 100%;
}

.modal {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 3.8vh;
  transition: opacity 1s;
  z-index: 50;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn {
  color: #fff;
  text-decoration: none;
  font-size: 2.5vh;
  height: 6vh;
  line-height: 6vh;
  text-align: center;
  background: #00b956;
  border-radius: 3vh;
  display: block;
  padding: 0 3vh;
  margin-top: 1.5vh;
  font-family: 'Arial', sans-serif;
  cursor: pointer;
}

.btn:hover {
  background-color: #03a34e;
}

.btn__violet {
  background: #731982;
}

.btn__violet:hover {
  background-color: #631670;
}

.hero_happy {
  height: 47%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s;
}

.hero_sad {
  height: 47%;
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 1s;
}

.hero {
  height: 47%;
  position: absolute;
  display: none;
  transition: opacity 0.15s;
}

.hero__up-left {
  transform: scale(-1, 1);
  top: 20%;
  left: 20%;
  z-index: 5;
}

.hero__up-right {
  top: 20%;
  right: 20%;
  z-index: 5;
}

.hero__down-left {
  transform: scale(-1, 1);
  bottom: 15%;
  left: 30%;
  z-index: 15;
}

.hero__down-right {
  bottom: 15%;
  right: 30%;
  z-index: 15;
}

@media (max-aspect-ratio: 9/5) {
  .game-screen {
    width: 79.2vh;
    height: 52.8vh;
    border-radius: 3.2vh;
  }

  .modal {
    border-radius: 3vh;
  }

  .screen-border-1 {
    border-radius: 4vh;
    padding: 0.56vh;
  }

  .screen-border-2 {
    border-radius: 4vh;
    padding: 2.16vh;
  }

  .screen-border-3 {
    border-radius: 4vh;
    padding: 0.64vh;
  }

  .screen-border-4 {
    border-radius: 3.2vh;
    padding: 1.6vh;
  }

  .button-border-1 {
    padding: 0.5vh;
  }

  .button-border-2 {
    padding: 1.4vh;
  }

  .button-border-3 {
    padding: 0.5vh;
    border: 0.3vh solid #288d5b;
  }

  .button-center {
    height: 8.5vh;
    width: 8.5vh;
    line-height: 8.5vh;
    font-size: 3.8vh;
  }

  .button-arrow {
    width: 4vh;
    height: 4vh;
  }

  .button__a {
    left: -30%;
    bottom: 0%;
  }

  .button__a .button-arrow {
    left: -2vh;
    bottom: -2vh;
  }

  .button__d {
    right: -30%;
    bottom: 0;
  }

  .button__d .button-arrow {
    right: -2vh;
    bottom: -2vh;
  }

  .button__q {
    left: -30%;
    bottom: 30%;
  }

  .button__q .button-arrow {
    left: -2vh;
    top: -2vh;
  }

  .button__e {
    right: -30%;
    bottom: 30%;
  }

  .button__e .button-arrow {
    right: -2vh;
    top: -2vh;
  }
}

@media (max-aspect-ratio: 7/5) {
  .game-screen {
    width: 59.4vh;
    height: 39.6vh;
    border-radius: 2.4vh;
  }

  .modal {
    border-radius: 2.1vh;
  }

  .screen-border-1 {
    border-radius: 3vh;
    padding: 0.42vh;
  }

  .screen-border-2 {
    border-radius: 3vh;
    padding: 1.62vh;
  }

  .screen-border-3 {
    border-radius: 3vh;
    padding: 0.54vh;
  }

  .screen-border-4 {
    border-radius: 2.4vh;
    padding: 1.2vh;
  }

  .score, .score-best {
    font-size: 1.5vh;
  }

  .live_elem {
    height: 2.5vh;
    width: 2.6vh;
  }

  .button-border-1 {
    padding: 0.4vh;
  }

  .button-border-2 {
    padding: 1.2vh;
  }

  .button-border-3 {
    padding: 0.4vh;
    border: 0.2vh solid #288d5b;
  }

  .button-center {
    height: 7.8vh;
    width: 7.8vh;
    line-height: 7.8vh;
    font-size: 3.3vh;
  }

  .button__a {
    left: -35%;
    bottom: 0%;
  }

  .button__d {
    right: -35%;
    bottom: 0%;
  }

  .button__q {
    left: -35%;
    bottom: 35%;
  }

  .button__e {
    right: -35%;
    bottom: 35%;
  }
}

@media (max-aspect-ratio: 6/5) {
  .screen {
    display: none;
  }

  .rotate {
    display: block;
  }
}

button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
.btn {
  transition: all 0.3s ease-in-out;
}
.btn--purple {
  box-shadow: 0 0 1.29412vw rgba(0, 0, 0, 0.22);
  background-color: #731982;
}
.btn--purple:hover {
  background-color: #912ca2;
}
.btn--purple:active {
  background-color: #5f206a;
}


.rules {
  z-index: 11;
  position: fixed;
  width: 28.23529vw;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  transition: visibility 0s linear .33s, opacity .33s linear;
}
.rules--visible {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.rules--hidden {
  visibility: hidden;
  opacity: 0;
}
.rules__rules {
  background-color: #ebebeb;
  border-radius: 1.88235vw;
  box-shadow: 0 0.88235vw 1.29412vw rgba(0, 0, 0, 0.16);
  width: 28.23529vw;
  height: 22.47059vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.11765vw 2.64706vw 1.41176vw 1.88235vw;
  box-sizing: border-box;
  margin-bottom: 0.94118vw;
}
.rules__title {
  margin: 0;
  color: #00b956;
  font-family: Arial, sans-serif;
  font-size: 1.05882vw;
  font-weight: 900;
  line-height: 1.52941vw;
  margin-bottom: 2vw;
}
.rules__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1.41176vw;
}
.rules__row:last-child {
  margin-bottom: 2vw;
}
.rules__pics {
  display: flex;
  align-items: center;
}
.rules__pic {
  margin-right: 0.94118vw;
  width: 2.47059vw;
  height: 2.47059vw;
}
.rules__pic img {
  width: 100%;
}
.rules__pic:last-child {
  margin-right: 0;
}
.rules__desc {
  color: #323232;
  font-family: Arial, sans-serif;
  font-size: 0.94118vw;
  font-weight: 400;
}
.rules__desc--green strong {
  font-weight: 700;
  color: #00b956;
}
.rules__desc--orange strong {
  font-weight: 700;
  color: #eb5a40;
}
.rules__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  color: #ffffff;
  font-size: 0.94118vw;
  font-weight: 700;
  border-radius: 2.94118vw;
  outline: none;
  box-sizing: border-box;
}
.rules__btn--purple {
  width: 18.82353vw;
  height: 3.17647vw;
  line-height: 3.17647vw;
  background-color: #731982;
  margin-top: auto;
}
.rules__btn--green {
  height: 3.17647vw;
  width: 10.88235vw;
  background-color: #00b956;
}
.rules__info {
  width: 28.23529vw;
  height: 6vw;
  box-shadow: 0 0.88235vw 1.29412vw rgba(0, 0, 0, 0.16);
  border-radius: 3vw;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1.76471vw;
  padding-right: 1.41176vw;
  box-sizing: border-box;
}
.rules__text {
  color: #00b956;
  font-family: Arial, sans-serif;
  font-weight: 900;
  line-height: 1.41176vw;
}
.rules__close {
  width: 2.35294vw;
  height: 2.35294vw;
  border-radius: 2.94118vw;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  position: absolute;
  top: 0;
  right: -2.82353vw;
}
.rules__close .rules__icon {
  width: 1.29412vw;
  height: 1.29412vw;
  fill: #00b956;
  transition: all 0.3s ease-in-out;
}
.rules__close:hover .rules__icon {
  fill: #731982;
}