@font-face {
  font-family: 'Zeronero';
  src: url("../fonts/Zeronero-Black.eot");
  src: url("../fonts/Zeronero-Black.eot?#iefix") format("embedded-opentype"), url("../fonts/Zeronero-Black.woff2") format("woff2"), url("../fonts/Zeronero-Black.woff") format("woff"), url("../fonts/Zeronero-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap; }

* {
  box-sizing: border-box;
  user-select: none; }

.game-wrapper {
  background: black;
  position: relative;
  margin: 0 auto;
  font-family: 'Zeronero'; }
  .game-wrapper .step {
    display: none;
    width: 100%;
    height: 100%; }
    .game-wrapper .step.visible {
      display: block; }
    .game-wrapper .step .home-btn {
      width: 5.27rem;
      height: 5.64rem;
      background: url(../images/settings.png) no-repeat;
      background-size: contain;
      position: absolute;
      top: 3.518rem;
      right: 2.5rem;
      cursor: pointer; }
    .game-wrapper .step .option-wrapper {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center; }
      .game-wrapper .step .option-wrapper .option {
        font-size: 3.49rem;
        line-height: 1.043;
        color: white;
        text-transform: uppercase;
        cursor: pointer; }
        .game-wrapper .step .option-wrapper .option:hover {
          color: #e75012; }
        .game-wrapper .step .option-wrapper .option.disabled {
          opacity: 0.4;
          cursor: not-allowed; }
          .game-wrapper .step .option-wrapper .option.disabled:hover {
            color: white; }
      .game-wrapper .step .option-wrapper .input {
        font-size: 3.49rem;
        line-height: 1.043;
        color: white;
        text-transform: uppercase;
        display: none;
        margin: 3.5rem 0; }
        .game-wrapper .step .option-wrapper .input span {
          display: inline-block;
          vertical-align: middle; }
        .game-wrapper .step .option-wrapper .input input {
          font-size: 3.49rem;
          line-height: 1.043;
          font-weight: bold;
          color: white;
          text-transform: uppercase;
          background: none;
          color: white;
          box-shadow: none;
          border: none;
          border-bottom: 5px solid white;
          outline: none;
          text-align: center;
          display: inline-block;
          vertical-align: middle;
          width: 60%;
          margin-left: 0.5rem; }
          .game-wrapper .step .option-wrapper .input input.error {
            border-bottom: 5px solid red;

          }
    .game-wrapper .step.step-countdown {
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 1; }
      .game-wrapper .step.step-countdown .value {
        font-size: 9rem;
        line-height: 1.043;
        color: #e75012;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); }
    .game-wrapper .step.step-intro {
      background: url(../images/initial-bg.jpg) no-repeat;
      background-size: cover;
      position: relative; }
    .game-wrapper .step.step-top {
      background: url(../images/top-bg.jpg) no-repeat;
      background-size: cover;
      position: relative; }
      .game-wrapper .step.step-top .top-wrapper {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center; }
        .game-wrapper .step.step-top .top-wrapper .title {
          color: #e75012;
          font-size: 3.94rem;
          line-height: 1.043;
          text-transform: uppercase; }
        .game-wrapper .step.step-top .top-wrapper .top-value-wrapper {
          margin-top: 9.26rem; }
          .game-wrapper .step.step-top .top-wrapper .top-value-wrapper .top-value {
            width: 50rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between; }
            .game-wrapper .step.step-top .top-wrapper .top-value-wrapper .top-value span {
              text-transform: uppercase;
              color: white;
              font-size: 3.4rem;
              line-height: 1.043;
              padding: 0 0.46rem; }
              .game-wrapper .step.step-top .top-wrapper .top-value-wrapper .top-value span.index, .game-wrapper .step.step-top .top-wrapper .top-value-wrapper .top-value span.point {
                color: #e75012; }
              .game-wrapper .step.step-top .top-wrapper .top-value-wrapper .top-value span.separator {
                flex-grow: 1;
                background: #e75012;
                height: 0.46rem; }
    .game-wrapper .step.step-game {
      background: url(../images/game-bg.jpg) no-repeat;
      background-size: cover;
      position: relative;
      overflow: hidden; }
      .game-wrapper .step.step-game .point-wrapper {
        top: 3.518rem;
        left: 3.61rem;
        width: 14.63rem;
        height: 6.11rem;
        background: white;
        border-radius: 1.85rem;
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center; }
        .game-wrapper .step.step-game .point-wrapper p {
          text-transform: uppercase;
          font-size: 3.875rem;
          line-height: 1.04;
          text-align: center;
          color: black;
          display: block; }
      .game-wrapper .step.step-game .bottom-wrapper {
        width: 100%;
        height: 13.33rem;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #e75012;
        border-top-left-radius: 0.975rem;
        border-top-right-radius: 0.975rem;
        padding: 2.31rem 3.24rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between; }
        .game-wrapper .step.step-game .bottom-wrapper .arrow-wrapper {
          width: 39.8%;
          height: 100%;
          background: black;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          border-radius: 1.85rem; }
          .game-wrapper .step.step-game .bottom-wrapper .arrow-wrapper .arrow {
            width: 9.81rem;
            height: 8.7rem;
            background: url(../images/arrow.png) no-repeat;
            background-size: contain;
            cursor: pointer;
            transition: opacity 0.05s ease; }
            .game-wrapper .step.step-game .bottom-wrapper .arrow-wrapper .arrow.right {
              transform: scaleX(-1); }
            .game-wrapper .step.step-game .bottom-wrapper .arrow-wrapper .arrow.active {
              opacity: 0.5; }
        .game-wrapper .step.step-game .bottom-wrapper .shoot-wrapper {
          width: 22.5rem;
          height: 100%;
          background: black;
          border-radius: 1.85rem;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer; }
          .game-wrapper .step.step-game .bottom-wrapper .shoot-wrapper span {
            text-transform: uppercase;
            font-size: 3.875rem;
            line-height: 1.04;
            text-align: center;
            display: block;
            color: white;
            transition: opacity 0.05s ease; }
          .game-wrapper .step.step-game .bottom-wrapper .shoot-wrapper.active span {
            opacity: 0.5; }
        .game-wrapper .step.step-game .bottom-wrapper .lives-wrapper {
          width: 21rem;
          height: 100%;
          background: white;
          border-radius: 1.85rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 0 3.24rem; }
          .game-wrapper .step.step-game .bottom-wrapper .lives-wrapper .life {
            width: 3.24rem;
            height: 3.24rem;
            border-radius: 0.975rem;
            background: rgba(231, 80, 18, 0.23); }
            .game-wrapper .step.step-game .bottom-wrapper .lives-wrapper .life.active {
              background: #e75012; }
      .game-wrapper .step.step-game .play-wrapper {
        width: 100%;
        height: 85rem;
        position: absolute;
        bottom: 13.33rem;
        overflow: hidden; }
        .game-wrapper .step.step-game .play-wrapper .manole {
          position: absolute;
          bottom: 0;
          width: 16.57rem;
          height: 14.81rem;
          background: url(../images/manole.png) no-repeat;
          background-size: contain; }
        .game-wrapper .step.step-game .play-wrapper .missiles-wrapper {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0; }
          .game-wrapper .step.step-game .play-wrapper .missiles-wrapper .missile {
            width: 0.37rem;
            height: 2.31rem;
            border-radius: 50%;
            background: red;
            position: absolute;
            box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 0.5);
            transition: all 0.1s linear;
            transform: translateX(-50%); }
            .game-wrapper .step.step-game .play-wrapper .missiles-wrapper .missile.explode {
              width: 3rem;
              height: 3rem;
              opacity: 0; }
        .game-wrapper .step.step-game .play-wrapper .rockets-wrapper {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0; }
          .game-wrapper .step.step-game .play-wrapper .rockets-wrapper .rocket {
            width: 4.07rem;
            height: 9.9rem;
            background: url(../images/rocket.png) no-repeat;
            background-size: contain;
            position: absolute;
            transition: all 0.1s linear; }
            .game-wrapper .step.step-game .play-wrapper .rockets-wrapper .rocket.explode {
              transform: scale(0); }
        .game-wrapper .step.step-game .play-wrapper .enemy-wrapper {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0; }
          .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy {
            width: 8.79rem;
            height: 6.94rem;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            transition: transform 0.1s linear; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.explode {
              transform: scale(0); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-1 {
              background-image: url(../images/pieces/piece-1.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-2 {
              background-image: url(../images/pieces/piece-2.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-3 {
              background-image: url(../images/pieces/piece-3.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-4 {
              background-image: url(../images/pieces/piece-4.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-5 {
              background-image: url(../images/pieces/piece-5.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-6 {
              background-image: url(../images/pieces/piece-6.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.enemy-7 {
              background-image: url(../images/pieces/piece-7.png); }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-0 {
              left: 0; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-1 {
              left: 9.09%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-2 {
              left: 18.18%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-3 {
              left: 27.27%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-4 {
              left: 36.36%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-5 {
              left: 45.45%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-6 {
              left: 54.54%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-7 {
              left: 63.63%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-8 {
              left: 72.72%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-9 {
              left: 81.81%; }
            .game-wrapper .step.step-game .play-wrapper .enemy-wrapper .enemy.pos-10 {
              left: 90.90%; }
    .game-wrapper .step.step-end {
      background: url(../images/game-bg.jpg) no-repeat;
      background-size: cover;
      position: relative;
      overflow: hidden; }
      .game-wrapper .step.step-end .points {
        font-size: 16.12rem;
        line-height: 1.043;
        text-transform: uppercase;
        text-align: center;
        margin-top: 23.14rem;
        transform: rotate(-5deg); }
        .game-wrapper .step.step-end .points span {
          color: #e75012; }
        .game-wrapper .step.step-end .points span.point {
          color: white; }