.cover {
  min-height: unset; }

.cover-duck {
  align-items: center;
  display: flex;
  justify-content: center; }
  .cover-duck .cover-duck-itself {
    animation: swing-duck 4s ease-in-out infinite;
    animation-direction: alternate;
    height: 600px;
    width: 600px;
    background: no-repeat url("i/hero/duck-big.svg") center center;
    background-size: contain;
    margin: 280px 0 -380px;
    position: relative;
    z-index: 1; }
  .cover-duck .cover-duck-cloak {
    position: absolute;
    top: 80px;
    left: -260px;
    width: 785px;
    height: 423px;
    z-index: 2; }
    .cover-duck .cover-duck-cloak img {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      width: 100%; }
    .cover-duck .cover-duck-cloak.cloak-step-1 img:nth-child(1),
    .cover-duck .cover-duck-cloak.cloak-step-2 img:nth-child(2),
    .cover-duck .cover-duck-cloak.cloak-step-3 img:nth-child(3),
    .cover-duck .cover-duck-cloak.cloak-step-4 img:nth-child(4),
    .cover-duck .cover-duck-cloak.cloak-step-5 img:nth-child(5) {
      visibility: visible; }

body {
  min-width: 330px; }

.task {
  margin: 365px 0 -365px;
  position: relative;
  z-index: 1; }
  .task .announce__text {
    color: #fff; }

.credits {
  background: transparent; }

@keyframes swing {
  from {
    transform: translate(-50%, -50%) rotate(0) scale(1); }
  25% {
    transform: translate(calc(-50% + 5px), calc(-50% + 3px)) rotate(1deg) scale(0.99); }
  50% {
    transform: translate(-50%, calc(-50% + 5px)) rotate(0) scale(0.98); }
  75% {
    transform: translate(calc(-50% - 5px), calc(-50% - 3px)) rotate(1deg) scale(0.99); }
  to {
    transform: translate(-50%, -50%) rotate(0) scale(1); } }

@keyframes swing-duck {
  0% {
    transform: rotate(3deg); }
  100% {
    transform: rotate(-3deg); } }

@keyframes waves {
  0%, 100% {
    transform: scaleX(1.3) skew(7deg); }
  50% {
    transform: scaleX(1) scaleY(1.1) skew(-20deg); } }

.page-wrapper {
  position: relative;
  background: linear-gradient(180deg, #3a88e5, #021aff);
  overflow: hidden;
  padding: 340px 0 150px;
  margin-bottom: 60px;
  z-index: 0; }
  .page-wrapper .announce__text {
    color: #fff; }
    .page-wrapper .announce__text .body_link {
      margin-left: -35px; }
      .page-wrapper .announce__text .body_link img {
        vertical-align: -6px;
        margin-right: 5px; }
      .page-wrapper .announce__text .body_link a {
        color: #fff;
        border-bottom-color: currentColor; }
        .page-wrapper .announce__text .body_link a:hover {
          color: #f41224; }
  .page-wrapper:not(.initialized) * {
    transition: none !important; }
  .page-wrapper:after, .page-wrapper:before {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    background-image: url("i/bounding_wave3.svg");
    background-size: 700px;
    background-position: calc(50% - 175px) 0;
    background-repeat: repeat-x;
    height: 150px;
    transform: scaleY(-1);
    z-index: 1;
    content: ''; }
  .page-wrapper:after {
    top: auto;
    bottom: -1px;
    transform: scaleY(1); }
  .page-wrapper .waves {
    animation: waves 35s ease-in-out  infinite;
    position: absolute;
    top: -20%;
    left: -75%;
    height: 140%;
    width: 250%;
    background-image: url("i/wavy_bg.svg");
    background-size: 700px;
    background-repeat: repeat;
    transform-origin: right bottom;
    opacity: .3;
    z-index: -1; }

.promo_game {
  margin: 120px auto 20px;
  position: relative;
  width: 900px; }

.game-field {
  position: relative; }
  .game-field .game-field-mobile {
    display: none; }

.duck-hero {
  position: absolute;
  top: 20px;
  left: -5px;
  z-index: 2;
  perspective: 800px;
  transition: opacity .3s, margin-left 1s; }
  .duck-hero .duck-hero-rotatable {
    transform-origin: center; }
  .duck-hero.is_left .duck-hero-rotatable {
    margin-left: -11px;
    transform: rotateY(-180deg); }
  .duck-hero .duck-hero-itself {
    animation: swing-duck 2s ease-in-out infinite;
    animation-direction: alternate;
    transform-origin: center center;
    transform: rotate(3deg);
    width: 120px;
    height: 120px;
    background-image: url("i/hero/duck-1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center; }
    .duck-hero .duck-hero-itself.skin-2 {
      background-image: url("i/hero/duck-2.svg"); }
    .duck-hero .duck-hero-itself.skin-3 {
      background-image: url("i/hero/duck-3.svg"); }
  .duck-hero.is_down {
    z-index: 0; }
  .page-wrapper:not(.initialized) .duck-hero, .duck-hero.is_invisible {
    opacity: 0; }

.game-point {
  position: absolute;
  display: flex;
  z-index: 1;
  font-size: 1.6rem;
  line-height: 1.6;
  height: 326px;
  width: 260px; }
  .game-point .card {
    position: relative;
    height: 326px;
    width: 260px;
    perspective: 800px;
    user-select: none;
    z-index: 1; }
  .game-point .img-back,
  .game-point .img-front {
    background: no-repeat center center;
    background-size: contain;
    left: 50%;
    pointer-events: none;
    position: absolute;
    z-index: 3; }
  .game-point .img-back {
    top: -95px;
    height: 260px;
    width: 100%; }
  .game-point .img-front {
    height: 160px;
    top: -25px;
    width: 100%;
    z-index: 2; }
  .game-point .card-back,
  .game-point .card-front {
    backface-visibility: hidden;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: transform 1s ease;
    width: 100%;
    pointer-events: none; }
  .game-point .card-back {
    transform: rotateY(-180deg); }
  .game-point .monster {
    position: absolute;
    pointer-events: none;
    display: flex;
    transition: transform 1s ease, opacity .5s ease .5s;
    z-index: -1; }
  .game-point.flipped .card-back {
    transform: rotateY(0deg); }
  .game-point.flipped .card-front {
    transform: rotateY(180deg); }
  .game-point.flipped .img-back {
    transform: translate(-50%, 0);
    transition: transform 1s ease, opacity .25s .55s ease;
    opacity: 1; }
  .game-point.flipped .img-front {
    transform: translate(-50%, -130px);
    transition: transform 1s ease, opacity .25s ease;
    opacity: 0; }
  .game-point.flipped .monster {
    transform: scale(0.5);
    opacity: 0;
    transition: transform 1s ease, opacity .5s ease; }
  .game-point:not(.flipped) .img-front {
    transform: translate(-50%, 0);
    transition: transform 1s ease, opacity .25s .55s ease;
    opacity: 1; }
  .game-point:not(.flipped) .img-back {
    transform: translate(-50%, -130px);
    transition: transform 1s ease, opacity .25s ease;
    opacity: 0; }
  .game-point.point1 .card-front {
    background-image: url("i/points/front/card-1.png"); }
  .game-point.point1 .card-back {
    background-image: url("i/points/back/open-card-all.png"); }
  .game-point.point1 .img-front {
    background-image: url("i/points/front/korobka-1.svg"); }
  .game-point.point1 .img-back {
    background-image: url("i/points/back/open-1.svg"); }
  .game-point.point2 .card-front {
    background-image: url("i/points/front/card-2.png"); }
  .game-point.point2 .card-back {
    background-image: url("i/points/back/open-card-all.png"); }
  .game-point.point2 .img-front {
    background-image: url("i/points/front/korobka-2.svg"); }
  .game-point.point2 .img-back {
    background-image: url("i/points/back/open-2.svg"); }
  .game-point.point3 .card-front {
    background-image: url("i/points/front/card-3.png"); }
  .game-point.point3 .card-back {
    background-image: url("i/points/back/open-card-all.png"); }
  .game-point.point3 .img-front {
    background-image: url("i/points/front/korobka-3.svg"); }
  .game-point.point3 .img-back {
    background-image: url("i/points/back/open-3.svg"); }
  .game-point.point4 .card-front {
    background-image: url("i/points/front/card-4.png"); }
  .game-point.point4 .card-back {
    background-image: url("i/points/back/open-card-all.png"); }
  .game-point.point4 .img-front {
    background-image: url("i/points/front/korobka-4.svg"); }
  .game-point.point4 .img-back {
    background-image: url("i/points/back/open-4.svg"); }
  .game-point.point1 {
    top: 80px;
    right: 120px; }
    .game-point.point1 .monster {
      bottom: 210px;
      right: 60px;
      transform-origin: right bottom; }
      .game-point.point1 .monster .monster-inner {
        background: no-repeat url("i/points/Monstr1.svg");
        background-size: contain;
        min-width: 404px;
        height: 269px;
        width: 404px; }
  .game-point.point2 {
    top: 350px;
    left: 120px; }
    .game-point.point2 .monster {
      bottom: 241px;
      right: 142px;
      transform-origin: right bottom; }
      .game-point.point2 .monster .monster-inner {
        background: no-repeat url("i/points/Monstr2.svg");
        background-size: contain;
        min-width: 265px;
        height: 230px;
        width: 265px; }
  .game-point.point3 {
    top: 680px;
    right: 120px; }
    .game-point.point3 .monster {
      bottom: 164px;
      left: 138px;
      transform-origin: left bottom; }
      .game-point.point3 .monster .monster-inner {
        background: no-repeat url("i/points/Monstr3.svg");
        background-size: contain;
        min-width: 254px;
        height: 354px;
        width: 278px; }
  .game-point.point4 {
    top: 890px;
    left: 120px; }
    .game-point.point4 .monster {
      bottom: 160px;
      right: 172px;
      transform-origin: right bottom; }
      .game-point.point4 .monster .monster-inner {
        background: no-repeat url("i/points/Monstr4.svg");
        background-size: contain;
        min-width: 212px;
        height: 310px;
        width: 266px; }

@keyframes stuff-card-animation-down {
  0%, 100% {
    transform: translate(-50%, calc(-50%)); }
  50% {
    transform: translate(-50%, calc(-50% + 100px)); } }

@keyframes stuff-card-animation-up {
  0%, 100% {
    transform: translate(-50%, calc(-50%)); }
  50% {
    transform: translate(-50%, calc(-50% - 100px)); } }

.stuff-field {
  position: relative;
  width: 90%;
  max-width: 1400px;
  margin: 80px auto 120px;
  height: 550px;
  display: flex;
  padding: 0 135px; }
  .stuff-field .stuff-card {
    position: absolute;
    z-index: 1;
    width: 270px;
    height: 326px;
    top: 50%;
    transform: translate(-50%, -50%);
    background-size: contain; }
    .stuff-field .stuff-card.card1 {
      background-image: url("i/stuff/buy-1.png"); }
    .stuff-field .stuff-card.card2 {
      background-image: url("i/stuff/buy-2.png"); }
    .stuff-field .stuff-card.card3 {
      background-image: url("i/stuff/buy-3.png"); }
    .stuff-field .stuff-card.card4 {
      background-image: url("i/stuff/buy-4.png"); }
    .stuff-field .stuff-card.swinging {
      animation: swing 6s ease-in-out infinite; }
    .stuff-field .stuff-card.animated {
      animation: stuff-card-animation-down 2s ease-in-out infinite; }
      .stuff-field .stuff-card.animated.card1 {
        animation-name: stuff-card-animation-up; }
      .stuff-field .stuff-card.animated.card3 {
        animation-name: stuff-card-animation-up; }
    .stuff-field .stuff-card.card1 {
      left: 0;
      top: 60%;
      z-index: 5; }
    .stuff-field .stuff-card.card2 {
      top: 30%;
      left: 33.33%;
      z-index: 4; }
    .stuff-field .stuff-card.card3 {
      top: 70%;
      left: 66.66%;
      z-index: 2; }
    .stuff-field .stuff-card.card4 {
      top: 25%;
      left: 100%;
      z-index: 1; }
  .stuff-field .stuff-prize {
    position: absolute;
    z-index: 0;
    width: 260px;
    height: 260px;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: swing 6s ease-out infinite; }
    .stuff-field .stuff-prize.prize1 {
      top: 40%;
      left: 16.66%;
      animation-delay: 4.5s;
      z-index: 0; }
    .stuff-field .stuff-prize.prize2 {
      top: 55%;
      left: 50%;
      animation-delay: 2.5s;
      z-index: 3; }
    .stuff-field .stuff-prize.prize3 {
      top: 40%;
      left: 83.33%;
      animation-delay: .5s;
      z-index: 0; }
    .stuff-field .stuff-prize.prize1 {
      background-image: url("i/stuff/prize1.png"); }
    .stuff-field .stuff-prize.prize2 {
      background-image: url("i/stuff/prize2.png"); }
    .stuff-field .stuff-prize.prize3 {
      background-image: url("i/stuff/prize3.png"); }
  .stuff-field .stuff-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 5s ease; }
    .stuff-field .stuff-wrap .ship-wrap {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: 100%;
      margin-left: 120px;
      transition: inherit; }
      .stuff-field .stuff-wrap .ship-wrap.animationEnded {
        display: none; }
      .stuff-field .stuff-wrap .ship-wrap .ship {
        width: 699px;
        height: 233px;
        background: no-repeat url("i/stuff/lainer.png");
        background-size: contain; }

@media screen and (max-width: 1400px) {
  .stuff-field {
    padding: 0 110px; }
    .stuff-field .stuff-card {
      width: 220px;
      height: 265px; }
    .stuff-field .stuff-prize {
      width: 220px;
      height: 220px; }
    .stuff-field .stuff-wrap .ship-wrap {
      margin-left: 100px; }
      .stuff-field .stuff-wrap .ship-wrap .ship {
        width: 570px;
        height: 190px; } }

@media screen and (max-width: 1200px) {
  .stuff-field {
    width: 95%;
    margin: 30px auto 60px; } }

@media screen and (max-width: 980px) {
  .game-field > .duck-hero,
  .game-field > .game-point,
  .game-field > svg {
    display: none; }
  .game-field .game-field-mobile {
    display: block;
    width: 100%; }
  .page-wrapper {
    padding-top: 260px; }
    .page-wrapper .announce__text .body_link {
      margin-left: 0; }
      .page-wrapper .announce__text .body_link img {
        vertical-align: -9px; }
  .task {
    margin: 285px 0 -285px;
    position: relative;
    z-index: 1; }
    .task .announce__text {
      color: #fff; }
  .promo_game {
    margin: 30px auto 20px;
    width: 100%;
    padding: 0 20px; }
  .cover-duck .cover-duck-itself {
    width: 400px;
    height: 400px;
    margin: 260px 0 -280px; }
  .cover-duck .cover-duck-cloak {
    top: calc(80px / 1.5);
    left: calc(-260px / 1.5);
    width: calc(785px / 1.5);
    height: calc(423px / 1.5); }
  .stuff-field {
    width: 200%;
    max-width: unset;
    margin: 30px 0 60px; }
    .stuff-field .stuff-card.card2 {
      left: calc(25% - 55px); }
    .stuff-field .stuff-card.card3 {
      left: calc(50% - 110px); }
    .stuff-field .stuff-card.card4 {
      left: calc(75% - 165px); }
    .stuff-field .stuff-prize.prize1 {
      left: calc(12.5% - 27px); }
    .stuff-field .stuff-prize.prize2 {
      left: calc(12.5% - 27px + 25% - 55px); }
    .stuff-field .stuff-prize.prize3 {
      left: calc(12.5% - 27px + 50% - 110px); }
    .stuff-field .stuff-wrap .ship-wrap {
      transform: translate(0, -50%) !important;
      margin-left: -25%; } }

@media screen and (max-width: 700px) {
  @keyframes waves {
    0%, 100% {
      transform: translate(30%, 0); }
    50% {
      transform: translate(-30%, 0); } }
  .stuff-field {
    margin-bottom: 0; }
    .stuff-field .stuff-card.card2 {
      left: calc(50% - 110px); }
    .stuff-field .stuff-card.card3 {
      left: calc(100% - 220px); }
      .stuff-field .stuff-card.card3.swinging {
        transition: margin-left 10s;
        margin-left: 200px; }
    .stuff-field .stuff-card.card4 {
      left: calc(150% - 330px); }
      .stuff-field .stuff-card.card4.swinging {
        transition: margin-left 10s;
        margin-left: 200px; }
    .stuff-field .stuff-prize.prize1 {
      top: 28%;
      left: calc(25% - 55px - 35px); }
    .stuff-field .stuff-prize.prize2 {
      top: 65%;
      left: calc(25% - 55px + 50% - 110px - 25px); }
    .stuff-field .stuff-prize.prize3 {
      left: calc(25% - 55px + 100% - 220px); }
    .stuff-field .stuff-wrap .ship-wrap {
      transform: translate(0, -50%) !important;
      margin-left: 220px; } }

@media screen and (max-width: 480px) {
  @keyframes stuff-card-animation-down {
    0%, 100% {
      transform: translate(-50%, calc(-50%)); }
    50% {
      transform: translate(-50%, calc(-50% + 40px)); } }
  @keyframes stuff-card-animation-up {
    0%, 100% {
      transform: translate(-50%, calc(-50%)); }
    50% {
      transform: translate(-50%, calc(-50% - 40px)); } }
  .page-wrapper .waves {
    background-size: 180px;
    background-position: center center; }
  .stuff-field .stuff-prize {
    background-size: 180px;
    background-repeat: no-repeat;
    background-position: center center; }
    .stuff-field .stuff-prize.prize1 {
      left: calc(25% - 55px - 75px); }
  .stuff-field .stuff-card {
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center center; }
  .page-wrapper:after, .page-wrapper:before {
    background-size: 270px;
    background-position: calc(50% - 75px) 0;
    height: 59px; }
  .page-wrapper {
    padding: 160px 0 60px;
    margin-bottom: 30px; }
  .task {
    margin: 205px 0 -205px; }
  .promo_game {
    margin: 30px auto 20px;
    width: 100%;
    padding: 0 20px; }
  .cover-duck .cover-duck-itself {
    width: 280px;
    height: 280px;
    margin: 245px 0 -200px; }
  .cover-duck .cover-duck-cloak {
    top: calc(80px / 2.15);
    left: calc(-260px / 2.15);
    width: calc(785px / 2.15);
    height: calc(423px / 2.15); } }