:root {
    --safe-area-inset-ios-top: env(safe-area-inset-top);
    --safe-area-inset-ios-right: env(safe-area-inset-right);
    --safe-area-inset-ios-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-ios-left: env(safe-area-inset-left);
    --safe-area-inset-android-top: constant(safe-area-inset-top);
    --safe-area-inset-android-right: constant(safe-area-inset-right);
    --safe-area-inset-android-bottom: constant(safe-area-inset-bottom);
    --safe-area-inset-android-left: constant(safe-area-inset-left)
}

[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}

.simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0
}

.simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch
}

.simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

.simplebar-content:after,
.simplebar-content:before {
    content: ' ';
    display: table
}

.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}

.simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0
}

.simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

[data-simplebar].simplebar-dragging {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}

.simplebar-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 10px
}

.simplebar-scrollbar:before {
    position: absolute;
    content: '';
    background: #000;
    border-radius: 7px;
    left: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity .2s .5s linear
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    transition-delay: 0s;
    transition-duration: 0s
}

.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}

.simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px
}

.simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 0;
    bottom: 0;
    min-height: 0;
    min-width: 10px;
    width: auto
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0
}

.simplebar-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: scrollbar !important
}

.simplebar-dummy-scrollbar-size>div {
    width: 200%;
    height: 200%;
    margin: 10px 0
}

.simplebar-hide-scrollbar {
    position: fixed;
    left: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}

#blackout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .5s;
    background-color: rgba(0, 0, 0, .4)
}

.show-blackout {
    opacity: 1 !important;
    z-index: 1 !important
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.fon-modal {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

body {
    margin: 0;
    color: #fff;
    text-shadow: #000 -1px 1px 5px, #00000091 1px -1px 4px;
    overflow: hidden
}

button {
    color: #fff;
    text-shadow: #000 -1px 1px 5px, #00000091 1px -1px 4px;
    background: rgba(0, 0, 0, .1)
}

.reward {
    padding-left: 40px;
    background: url(../../img/icon.png) -113px -9px/160px;
    display: inline-block;
    height: 33px;
    position: absolute;
    top: -8px;
    line-height: 38px
}

.modal {
    position: absolute;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: hidden
}

.modal-show {
    opacity: 1 !important
}

.modal-content {
    background: url(../../img/fon_card4.jpg) no-repeat top center/cover;
    border: 1px solid #b65f56;
    border-radius: 8px;
    position: absolute;
    padding: 20px;
    width: 834px;
    top: 50%;
    left: 50%;
    height: 298px;
    opacity: 1;
    transition: opacity .15s
}

.top-title {
    letter-spacing: 1px;
    font-size: 19px;
    margin: 0;
    margin-bottom: 9px
}

.top-title:last-child {
    margin-bottom: 0
}

.close {
    color: #fff;
    top: -16px;
    right: 14px;
    font-size: 75px;
    z-index: 1;
    position: absolute;
    transition: color .3s
}

.hover.close:focus,
.hover.close:hover {
    color: #000;
    text-decoration: none;
    cursor: pointer
}

body {
    overflow: hidden;
    position: relative
}

#wrapper {
    overflow: hidden;
    transform-origin: top left;
    position: inherit
}

.card {
    width: 96px;
    height: 143px;
    cursor: pointer;
    top: 0;
    left: 0;
    position: absolute;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.card-foundation {
    opacity: 0
}

.modal-btns button.modal-btn-close {
    width: 200px
}

.cards-base {
    position: absolute;
    width: 893px;
    margin-left: 208px
}

.base {
    width: 95px;
    height: 141px
}

.cards-base .card:last-child {
    margin-right: 0
}

.table {
    width: 1116px;
    margin: 0 auto
}

.bottom-btns {
    position: absolute;
    top: 0;
    width: 340px;
    height: 143px
}

#cancel {
    margin-bottom: 13px
}

#hint {
    margin-right: 0
}

#cancel span,
#hint span {
    font-size: 15px;
    display: inline-block;
    letter-spacing: 1px;
    vertical-align: top;
    padding-top: 12px
}

#cancel .btn-wrap div,
#hint .btn-wrap div {
    margin-right: -3px;
    display: inline-block
}

#cancel .btn-wrap div {
    width: 51px;
    height: 40px;
    background: url(../../img/icon.png) -10px -116px
}

#hint .btn-wrap div {
    width: 40px;
    height: 40px;
    background: url(../../img/icon.png) -10px -176px
}

.bottom-btns .bottom-title {
    display: inline-block;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 11px;
    width: 162px;
    box-sizing: border-box;
    text-align: center;
    margin-right: 14px
}

#count {
    margin-right: 0
}

.btn-wrap {
    width: 100%
}

.yellow-color {
    color: #fdff6c
}

#box {
    transform-origin: top left;
    z-index: 0;
    width: 100%;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s;
    background-image: url(../../img/fon_card0.jpg);
    background-size: cover
}

#box_top {
    transform-origin: top left;
    z-index: 0;
    width: 100%;
    position: absolute;
    top: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s
}

.show-box {
    z-index: 1 !important;
    opacity: 1 !important;
    pointer-events: auto !important
}

.bottom-btns button,
.top-btns button {
    border: 2px solid #06baa7;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 0;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-right: 14px;
    height: 46px;
    transition: border .3s
}

.top-btns button {
    width: 199px;
    margin-right: 7px
}

.bottom-btns button {
    width: 162px;
    position: relative
}

.bottom-btns button:last-child,
.choose-btn:nth-child(2n),
.modal-btns button:last-child,
.top-btns button:last-child {
    margin-right: 0
}

.top-box-btns .top-btn:last-child {
    margin-bottom: 0
}

.modal-btns button:last-child {
    right: 0;
    position: absolute
}

.btn-relative {
    position: relative !important
}

.top-btns {
    width: 1023px;
    transform: translate(355px, 18px);
    position: absolute
}

.modal-content .top-box-btn {
    border: 2px solid #bd9ec1;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 12px 8px;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 14px;
    width: 190px;
    height: 16%;
    transition: border .3s
}

.top-box-btns {
    margin-right: 25px;
    width: 190px;
    display: inline-block;
    vertical-align: top;
    height: 300px
}

.profile-item-left,
.profile-item-right {
    display: inline-block;
    margin: 0;
    margin-bottom: 16px;
    margin-right: 12px;
    font-size: 19px;
    letter-spacing: 2px
}

.mobile.modal-btn-close,
.mobile.top-title,
.modal-content .top-box-btn.mobile,
.profile-item-left.mobile,
.profile-item-right.mobile {
    font-size: 22px !important;
    line-height: 22px
}

.mobile.modal-btn-close,
.modal-content .top-box-btn.mobile {
    padding-top: 8px
}

.profile-item-right {
    color: #fdff6c
}

.change-name-btn,
.choose_deck {
    display: inline-block;
    margin: 0;
    font-size: 19px;
    font-style: italic;
    color: #fff;
    position: relative
}

.top-box-content {
    display: inline-block;
    height: 100%;
    width: 580px
}

input,
input:after,
input:before {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial
}

.modal-title {
    letter-spacing: 1px;
    font-size: 25px;
    text-align: center;
    margin: 0;
    margin-bottom: 20px;
    position: relative
}

.modal-btns {
    margin: 0 auto;
    width: 50%;
    position: absolute;
    left: 50%;
    margin-left: -25%
}

.modal-btns button {
    border: 2px solid #bd9ec1;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-right: 14px;
    width: 40%;
    height: 54px;
    transition: border .3s
}

@keyframes hint-animation {
    0%,
    100%,
    50% {
        transform: rotate(0)
    }
    10%,
    30% {
        transform: rotate(-10deg)
    }
    20%,
    40% {
        transform: rotate(10deg)
    }
}

@keyframes rotate {
    0% {
        transform: scaleX(0)
    }
    50% {
        transform: scaleX(-.5)
    }
    100% {
        transform: scaleX(-1)
    }
}

.hint-animation {
    animation: hint-animation .8s ease-in-out 0s forwards 1
}

.base,
.card-foundation,
.card.start.pack {
    border: 2px solid #029d8c;
    background: rgba(0, 0, 0, .3);
    border-radius: 8px;
    box-sizing: border-box
}

.wrap {
    height: 45%;
    transform-style: preserve-3d;
    position: relative
}

.firework {
    position: absolute;
    top: 110%;
    margin-top: 5%;
    left: 50%;
    height: 10%;
    opacity: 0
}

.c {
    background: 0 0;
    height: 5px;
    width: 5px;
    position: absolute;
    border-radius: 50%
}

@keyframes shoot1 {
    0% {
        transform: translate(0, 0) scale(.1);
        opacity: 1
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(.923887396px, -900%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(1) {
    animation: shoot1 1.5s 10
}

.firework:nth-child(1) .c {
    background: #f90;
    box-shadow: 0 0 3px 0 rgba(255, 153, 0, .8)
}

@keyframes shoot2 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(.923887396px, -890%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(2) {
    animation: shoot2 1.5s 10;
    animation-delay: .3s
}

.firework:nth-child(2) .c {
    background: #cf0;
    box-shadow: 0 0 3px 0 rgba(255, 153, 0, .8);
    animation-delay: .3s
}

@keyframes shoot3 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(-160.5870040277px, -600%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(3) {
    animation: shoot3 1.5s 10;
    animation-delay: .6s
}

.firework:nth-child(3) .c {
    background: #3f0;
    box-shadow: 0 0 3px 0 rgba(51, 255, 0, .8);
    animation-delay: .6s
}

@keyframes shoot4 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(-120.0447539646px, -850%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(4) {
    animation: shoot4 1.5s 10;
    animation-delay: .9s
}

.firework:nth-child(4) .c {
    background: #0f6;
    box-shadow: 0 0 3px 0 rgba(0, 255, 102, .8);
    animation-delay: .9s
}

@keyframes shoot5 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(14.6708053194px, -700%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(5) {
    animation: shoot5 1.5s 10;
    animation-delay: 1.2s
}

.firework:nth-child(5) .c {
    background: #0ff;
    box-shadow: 0 0 3px 0 rgba(0, 255, 255, .8);
    animation-delay: 1.2s
}

@keyframes shoot6 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(-73.4743218982px, -850%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(6) {
    animation: shoot6 1.5s 10;
    animation-delay: 1.5s
}

.firework:nth-child(6) .c {
    background: #646464;
    box-shadow: 0 0 3px 0 rgba(0, 102, 255, .8);
    animation-delay: 1.5s
}

@keyframes shoot7 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(153.3481755566px, -600%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(7) {
    animation: shoot7 1.5s 10;
    animation-delay: 1.8s
}

.firework:nth-child(7) .c {
    background: #30f;
    box-shadow: 0 0 3px 0 rgba(51, 0, 255, .8);
    animation-delay: 1.8s
}

@keyframes shoot8 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(-76.5894060791px, -650%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(8) {
    animation: shoot8 1.5s 10;
    animation-delay: 2.1s
}

.firework:nth-child(8) .c {
    background: #c0f;
    box-shadow: 0 0 3px 0 rgba(204, 0, 255, .8);
    animation-delay: 2.1s
}

@keyframes shoot9 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(-100.3609631363px, -500%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(9) {
    animation: shoot9 1.5s 10;
    animation-delay: 2.4s
}

.firework:nth-child(9) .c {
    background: #f09;
    box-shadow: 0 0 3px 0 rgba(255, 0, 153, .8);
    animation-delay: 2.4s
}

@keyframes shoot10 {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(.1)
    }
    95% {
        opacity: 1
    }
    100% {
        transform: translate(117.820769881px, -430%) scale(1);
        opacity: 0
    }
}

.firework:nth-child(10) {
    animation: shoot10 1.5s 10;
    animation-delay: 2.7s
}

.firework:nth-child(10) .c {
    background: red;
    box-shadow: 0 0 3px 0 rgba(255, 0, 0, .8);
    animation-delay: 2.7s
}

@keyframes explode1 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-21.7673987379px, -84.5963330903px) scale(.1)
    }
}

.c:nth-child(1) {
    animation: explode1 1.5s 10 linear
}

@keyframes explode2 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(31.1250239439px, -91.7415054791px) scale(.1)
    }
}

.c:nth-child(2) {
    animation: explode2 1.5s 10 linear
}

@keyframes explode3 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-42.65634918px, 56.2166946938px) scale(.1)
    }
}

.c:nth-child(3) {
    animation: explode3 1.5s 10 linear
}

@keyframes explode4 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-50.4236623176px, -87.2549668013px) scale(.1)
    }
}

.c:nth-child(4) {
    animation: explode4 1.5s 10 linear
}

@keyframes explode5 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(22.8872780058px, -36.0668179123px) scale(.1)
    }
}

.c:nth-child(5) {
    animation: explode5 1.5s 10 linear
}

@keyframes explode6 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(24.3928369902px, -2.8585001799px) scale(.1)
    }
}

.c:nth-child(6) {
    animation: explode6 1.5s 10 linear
}

@keyframes explode7 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-7.0797057224px, 76.4802255648px) scale(.1)
    }
}

.c:nth-child(7) {
    animation: explode7 1.5s 10 linear
}

@keyframes explode8 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(11.1583037938px, .3414350947px) scale(.1)
    }
}

.c:nth-child(8) {
    animation: explode8 1.5s 10 linear
}

@keyframes explode9 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-18.1441113943px, 36.1801441601px) scale(.1)
    }
}

.c:nth-child(9) {
    animation: explode9 1.5s 10 linear
}

@keyframes explode10 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-27.4021034744px, 16.3704434838px) scale(.1)
    }
}

.c:nth-child(10) {
    animation: explode10 1.5s 10 linear
}

@keyframes explode11 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(73.2901994998px, -41.8549009329px) scale(.1)
    }
}

.c:nth-child(11) {
    animation: explode11 1.5s 10 linear
}

@keyframes explode12 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(60.3965812735px, 83.2595694074px) scale(.1)
    }
}

.c:nth-child(12) {
    animation: explode12 1.5s 10 linear
}

@keyframes explode13 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-48.6764194914px, 2.8071442917px) scale(.1)
    }
}

.c:nth-child(13) {
    animation: explode13 1.5s 10 linear
}

@keyframes explode14 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(85.3680283433px, -19.230721632px) scale(.1)
    }
}

.c:nth-child(14) {
    animation: explode14 1.5s 10 linear
}

@keyframes explode15 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(11.4814011722px, 7.2688215365px) scale(.1)
    }
}

.c:nth-child(15) {
    animation: explode15 1.5s 10 linear
}

@keyframes explode16 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-68.5620316405px, -52.8652227533px) scale(.1)
    }
}

.c:nth-child(16) {
    animation: explode16 1.5s 10 linear
}

@keyframes explode17 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(2.174123103px, -18.6700116062px) scale(.1)
    }
}

.c:nth-child(17) {
    animation: explode17 1.5s 10 linear
}

@keyframes explode18 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-87.9866457157px, 14.0607082835px) scale(.1)
    }
}

.c:nth-child(18) {
    animation: explode18 1.5s 10 linear
}

@keyframes explode19 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(43.7125056092px, 33.8080988668px) scale(.1)
    }
}

.c:nth-child(19) {
    animation: explode19 1.5s 10 linear
}

@keyframes explode20 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-31.2049634025px, 3.7640793796px) scale(.1)
    }
}

.c:nth-child(20) {
    animation: explode20 1.5s 10 linear
}

@keyframes explode21 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-4.8730877875px, -49.4826786435px) scale(.1)
    }
}

.c:nth-child(21) {
    animation: explode21 1.5s 10 linear
}

@keyframes explode22 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(29.8419282045px, .0396906412px) scale(.1)
    }
}

.c:nth-child(22) {
    animation: explode22 1.5s 10 linear
}

@keyframes explode23 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-10.1491969423px, -107.7707206623px) scale(.1)
    }
}

.c:nth-child(23) {
    animation: explode23 1.5s 10 linear
}

@keyframes explode24 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(40.6088459754px, 2.5257549346px) scale(.1)
    }
}

.c:nth-child(24) {
    animation: explode24 1.5s 10 linear
}

@keyframes explode25 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-30.3009978024px, 27.8196126817px) scale(.1)
    }
}

.c:nth-child(25) {
    animation: explode25 1.5s 10 linear
}

@keyframes explode26 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-4.6523326704px, -80.2806990153px) scale(.1)
    }
}

.c:nth-child(26) {
    animation: explode26 1.5s 10 linear
}

@keyframes explode27 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(.5644044184px, 29.1132614505px) scale(.1)
    }
}

.c:nth-child(27) {
    animation: explode27 1.5s 10 linear
}

@keyframes explode28 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-15.6792097449px, -15.9233907529px) scale(.1)
    }
}

.c:nth-child(28) {
    animation: explode28 1.5s 10 linear
}

@keyframes explode29 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-48.3889031022px, 2.5746301133px) scale(.1)
    }
}

.c:nth-child(29) {
    animation: explode29 1.5s 10 linear
}

@keyframes explode30 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-8.4386912003px, -118.2962206717px) scale(.1)
    }
}

.c:nth-child(30) {
    animation: explode30 1.5s 10 linear
}

@keyframes explode31 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-117.2284393224px, 61.9852173932px) scale(.1)
    }
}

.c:nth-child(31) {
    animation: explode31 1.5s 10 linear
}

@keyframes explode32 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-38.9554242446px, -105.5262956664px) scale(.1)
    }
}

.c:nth-child(32) {
    animation: explode32 1.5s 10 linear
}

@keyframes explode33 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(18.8819704222px, -27.8073430676px) scale(.1)
    }
}

.c:nth-child(33) {
    animation: explode33 1.5s 10 linear
}

@keyframes explode34 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-38.3366993705px, -15.7076125924px) scale(.1)
    }
}

.c:nth-child(34) {
    animation: explode34 1.5s 10 linear
}

@keyframes explode35 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(16.510776107px, 10.2682632199px) scale(.1)
    }
}

.c:nth-child(35) {
    animation: explode35 1.5s 10 linear
}

@keyframes explode36 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(22.556746665px, -9.2052402982px) scale(.1)
    }
}

.c:nth-child(36) {
    animation: explode36 1.5s 10 linear
}

@keyframes explode37 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-105.8718732898px, -3.3710990276px) scale(.1)
    }
}

.c:nth-child(37) {
    animation: explode37 1.5s 10 linear
}

@keyframes explode38 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(115.9538460169px, 21.931096809px) scale(.1)
    }
}

.c:nth-child(38) {
    animation: explode38 1.5s 10 linear
}

@keyframes explode39 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(-68.1994433063px, 47.0810441783px) scale(.1)
    }
}

.c:nth-child(39) {
    animation: explode39 1.5s 10 linear
}

@keyframes explode40 {
    40% {
        transform: translate(0, 0) scale(1)
    }
    100% {
        transform: translate(64.8482125059px, -6.1513014293px) scale(.1)
    }
}

.c:nth-child(40) {
    animation: explode40 1.5s 10 linear
}

#start {
    margin: 0 auto;
    text-align: center;
    transform-origin: top left
}

.start-img {
    width: 416px;
    border-radius: 8px;
    height: 470px;
    background: red;
    position: absolute;
    background: url(../../img/start-img.jpg) no-repeat top center/cover
}

.start-hidden {
    opacity: 0 !important
}

.start-content {
    position: absolute;
    width: 431px;
    right: 25px;
    height: 359px;
    top: 50px;
    text-align: center
}

.start-title {
    margin-bottom: 26px;
    margin-top: 0;
    font-size: 30px
}

.choose-btns-panel {
    text-align: center
}

.start-box {
    width: 902px;
    height: 470px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -235px;
    margin-left: -451px;
    border: 1px solid #b65f56;
    background: url(../../img/fon_card2_mini.jpg) no-repeat top center/cover;
    border-radius: 8px;
    opacity: 0;
    transition: opacity .5s
}

.choose-btn {
    border: 2px solid #bd9ec1;
    border-radius: 11px;
    margin-bottom: 18px;
    outline: 0;
    font-size: 21px;
    letter-spacing: 1px;
    width: 218px;
    height: 60px;
    box-shadow: inset 0 0 10px #32480b;
    transition: border .3s
}

.bottom-btns button.hover:hover,
.hover.choose-btn:hover,
.hover.choose_seed-back-btn:hover,
.hover.shop-block-item:hover,
.hover.top-box-btn:hover,
.modal-btns button.hover:hover,
.shop-reward button.hover:hover,
.top-btns button.hover:hover {
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid #40bb70;
    box-shadow: inset 0 0 10px #0ba13c
}

#shop_box {
    width: 100%;
    height: 100%;
    text-align: center
}

.balance {
    letter-spacing: 1px;
    font-size: 16px;
    margin-bottom: 20px;
    word-spacing: 1px;
    display: inline-block;
    height: 0
}

.shop-block-content {
    margin-bottom: 4px;
    transition: transform .5s;
    position: relative;
    left: 0;
    height: 239px;
    overflow: hidden;
    text-align: left;
    width: 3000px;
    transform: translate(0, 0)
}

.shop-block {
    width: 692px;
    margin-left: 4px;
    height: 272px;
    margin-bottom: 12px;
    overflow-x: hidden
}

.shop-block:last-child {
    margin-bottom: 0
}

.shop-block-title {
    letter-spacing: 2px;
    font-size: 19px;
    white-space: 34px;
    word-spacing: 1px;
    margin: 0
}

.shop-block-item {
    background: rgba(0, 0, 0, .1);
    border-radius: 10px;
    width: 167px;
    height: 235px;
    margin-right: 7px;
    box-shadow: inset 0 0 10px #32480b;
    border: 1px solid #06baa7;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    transition: border .3s;
    padding-top: 18px;
    text-align: center
}

.block-item-img {
    width: 108px;
    height: 164px;
    margin: 0 auto;
    margin-bottom: 14px
}

.block-item-status {
    position: relative;
    width: 150px;
    letter-spacing: 1px;
    margin: 0 auto;
    display: inline-block;
    height: 31px
}

.block-item-status .gold {
    position: relative;
    top: -6px;
    right: 0;
    vertical-align: top
}

.block-fon .block-item-img {
    width: 146px
}

.active-btn {
    border: 2px solid #aebb40 !important;
    box-shadow: inset 0 0 10px rgb(200 221 50) !important
}

.shop-content {
    height: 572px;
    width: 735px;
    margin: 0 auto;
    margin-bottom: 14px
}

.block-item-img .img {
    width: 100%;
    height: 100%
}

.shop-reward {
    width: 685px;
    margin: 0 auto;
    margin-bottom: 17px;
    position: relative;
    padding-right: 170px;
    box-sizing: border-box;
    padding-top: 13px;
    text-align: right
}

.shop-reward-title {
    display: inline-block;
    margin-bottom: 11px;
    margin-top: 0;
    font-size: 23px;
    letter-spacing: 2px;
    padding: 0 10px;
    position: relative
}

.shop-reward-title .gold {
    position: relative;
    top: 5px;
    right: 0
}

.shop-reward button {
    width: 168px;
    display: inline-block;
    border: 2px solid #06baa7;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 0;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    height: 46px;
    transition: border .3s;
    position: absolute;
    right: 0
}

@keyframes hint_card {
    0% {
        box-shadow: inset 0 0 0 #0ba13c
    }
    50% {
        box-shadow: inset 0 0 25px #0ba13c
    }
    100% {
        box-shadow: inset 0 0 0 #0ba13c
    }
}

@keyframes target_card {
    0% {
        box-shadow: inset 0 0 0 #d0eb0f
    }
    50% {
        box-shadow: inset 0 0 25px #d0eb0f
    }
    100% {
        box-shadow: inset 0 0 0 #d0eb0f
    }
}

@keyframes card_unshow {
    20% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes card_show {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

[data-simplebar] {
    position: relative;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start
}

.simplebar-wrapper {
    overflow: hidden;
    width: inherit;
    height: inherit;
    max-width: inherit;
    max-height: inherit
}

.simplebar-mask {
    direction: inherit;
    position: absolute;
    overflow: hidden;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    z-index: 0
}

.simplebar-offset {
    direction: inherit !important;
    box-sizing: inherit !important;
    resize: none !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
    -webkit-overflow-scrolling: touch
}

.simplebar-content-wrapper {
    direction: inherit;
    box-sizing: border-box !important;
    position: relative;
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.simplebar-content-wrapper::-webkit-scrollbar,
.simplebar-hide-scrollbar::-webkit-scrollbar {
    width: 0;
    height: 0
}

.simplebar-content:after,
.simplebar-content:before {
    content: ' ';
    display: table
}

.simplebar-placeholder {
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    pointer-events: none
}

.simplebar-height-auto-observer-wrapper {
    box-sizing: inherit !important;
    height: 100%;
    width: 100%;
    max-width: 1px;
    position: relative;
    float: left;
    max-height: 1px;
    overflow: hidden;
    z-index: -1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex-grow: inherit;
    flex-shrink: 0;
    flex-basis: 0
}

.simplebar-height-auto-observer {
    box-sizing: inherit;
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 1000%;
    width: 1000%;
    min-height: 1px;
    min-width: 1px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1
}

.simplebar-track {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden
}

[data-simplebar].simplebar-dragging .simplebar-content {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none
}

[data-simplebar].simplebar-dragging .simplebar-track {
    pointer-events: all
}

.simplebar-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 10px
}

.simplebar-scrollbar:before {
    position: absolute;
    content: '';
    background: #fff !important;
    border-radius: 7px;
    left: 2px;
    right: 2px;
    opacity: 0;
    transition: opacity .2s linear
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .5;
    transition: opacity 0s linear
}

.simplebar-track.simplebar-vertical {
    top: 0;
    width: 11px
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 2px;
    bottom: 2px
}

.simplebar-track.simplebar-horizontal {
    left: 0;
    height: 11px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
    height: 100%;
    left: 2px;
    right: 2px
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
    right: auto;
    left: 0;
    top: 2px;
    height: 7px;
    min-height: 0;
    min-width: 10px;
    width: auto
}

[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical {
    right: auto;
    left: 0
}

.hs-dummy-scrollbar-size {
    direction: rtl;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    height: 500px;
    width: 500px;
    overflow-y: hidden;
    overflow-x: scroll
}

.simplebar-hide-scrollbar {
    position: fixed;
    left: 0;
    visibility: hidden;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none
}

::-webkit-scrollbar {
    display: none
}

#shop_box .overview {
    width: 692px;
    margin: 0 auto
}

.hidden_blocks {
    opacity: 0;
    position: absolute;
    width: 50px;
    height: 50px
}

#balance {
    border-color: #b9b424;
    position: relative;
    cursor: auto;
    text-align: left;
    padding-left: 15px
}

#balance .balance {
    margin-left: 35px
}

#balance .reward {
    background: url(../../img/icon.png) -116px -13px/164px;
    display: inline-block;
    height: 33px;
    width: 38px;
    position: absolute;
    padding: 0;
    top: 5px;
    left: 89px
}

.coin {
    padding-left: 40px;
    background: url(../../img/icon.png) -113px -9px/160px;
    display: inline-block;
    height: 38px;
    position: absolute;
    top: -3px;
    line-height: 38px
}

@keyframes big_balance {
    0% {
        transform: scale(1)
    }
    50% {
        transform: scale(1.5)
    }
    100% {
        transform: scale(1)
    }
}

.hidden_coin {
    opacity: 0 !important
}

@keyframes glowing {
    0%,
    100%,
    30%,
    60% {
        box-shadow: 0 0 0 #b9b424
    }
    15%,
    45%,
    75% {
        box-shadow: 0 0 10px #fffa75
    }
}

#balance.hover:hover {
    border-color: #b9b424;
    box-shadow: none
}

.modal-error {
    color: red;
    font-size: 17px;
    margin-top: -14px;
    margin-bottom: 6px;
    width: 95%;
    text-align: center;
    position: absolute;
    text-align: center
}

.input-wrap {
    text-align: center;
    margin-bottom: 20px
}

.change-name-input {
    height: 23px;
    text-align: center;
    outline: 0;
    border: none;
    background: 0;
    border-bottom: 2px solid #06baa7;
    width: 306px;
    color: #fdff6c;
    text-shadow: #000 -1px 1px 5px, #00000091 1px -1px 4px;
    font-size: 21px;
    letter-spacing: 2px;
    margin-top: 11px
}

.change-name-input::placeholder {
    color: #c7c7c7
}

.choose_seed {
    height: 421px;
    width: 100%;
    text-align: center;
    opacity: 1;
    transition: opacity .5s
}

.choose_seed-win {
    height: 340px !important
}

.seed-arrow {
    position: absolute;
    height: 86px;
    width: 62px;
    top: 183px;
    opacity: 0;
    transition: opacity .5s
}

.choose_seed-slide {
    position: absolute;
    width: 724px;
    transition: transform 1s;
    opacity: 1;
    top: 0;
    left: 10px
}

.arrow-left {
    left: 14px;
    background: url(../../img/icon.png) -88px -10px
}

.arrow-right {
    background: url(../../img/icon.png) -10px -10px;
    right: 14px
}

.active-arrow {
    opacity: 1
}

.choose_seed-title {
    margin-top: 33px;
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 23px;
    position: relative
}

.choose_seed-content {
    width: 744px;
    margin-left: -372px;
    left: 50%;
    position: absolute;
    height: 286px;
    overflow: hidden
}

.seed-item {
    display: inline-block;
    width: 56px;
    margin-right: 16px;
    height: 57px;
    border: 1px solid #a99c9c;
    border-radius: 8px;
    margin-bottom: 15px;
    line-height: 56px;
    cursor: pointer;
    transition: box-shadow .3s;
    user-select: none
}

.seed-item:nth-child(10n) {
    margin-right: 0
}

.choose_seed-back-btn {
    width: 216px;
    border: 2px solid #bd9ec1;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 12px 10px;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    height: 59px;
    background: rgba(0, 0, 0, .1);
    box-sizing: border-box;
    position: absolute;
    bottom: 17px;
    left: 50%;
    margin-left: -108px;
    transition: border .3s
}

.seed-item-active {
    background: 0 0;
    border: 1px solid #40bb70;
    box-shadow: inset 0 0 10px #32480b
}

.seed-item-done {
    border-color: #b9b424;
    box-shadow: inset 0 0 10px #32480b
}

.hover.seed-item-done:hover {
    box-shadow: inset 0 0 10px rgb(200 221 50) !important
}

.hover.seed-item-active:hover {
    box-shadow: inset 0 0 10px #0ba13c
}

.start-wrap {
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity .5s
}

.gold {
    width: 25px;
    background: url(../../img/icon.png) -86px -7px/118px;
    display: inline-block;
    height: 27px;
    position: absolute;
    top: -5px;
    right: -25px
}

.top-seed {
    position: relative
}

.hover.change-name-btn::after,
.hover.choose_deck::after,
.hover.top-seed::after {
    display: block;
    position: absolute;
    left: 0;
    width: 0;
    bottom: -3px;
    height: 2px;
    background-color: #fff;
    content: "";
    transition: width .3s ease-out
}

.hover.change-name-btn:hover::after,
.hover.choose_deck:hover::after,
.hover.top-seed:hover::after {
    width: 100%
}

.profile-item-deck {
    margin-right: 0
}

.hover.change-name-btn:hover,
.hover.choose_deck:hover,
.hover.top-seed:hover {
    cursor: pointer
}

.bottom-best-game p {
    display: inline-block;
    margin: 0
}

.bottom-best-game .record {
    text-transform: capitalize
}

.bottom-best-game {
    text-align: center;
    font-size: 17px;
    letter-spacing: 1px;
    width: 340px;
    margin-bottom: 8px
}

.vertical-font-size {
    font-size: 20px !important
}

.bottom-prize {
    text-align: center;
    font-size: 17px;
    letter-spacing: 1px;
    width: 340px;
    margin: 0;
    position: relative
}

.bottom-prize .prize-curr {
    display: inline-block;
    height: 23px
}

.bottom-prize .prize-img {
    background: url(../../img/icon.png) -88px -10px/120px;
    padding-left: 26px;
    display: inline-block;
    height: 23px;
    position: relative;
    top: 7px
}

.change_name .coin {
    top: 6px
}

#auto_collection {
    border: 2px solid #06baa7;
    box-shadow: inset 0 0 10px #32480b;
    outline: 0;
    padding: 0;
    border-radius: 10px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-right: 14px;
    width: 405px;
    text-align: center;
    height: 37px;
    transition: border .3s;
    position: absolute;
    margin-top: -45px;
    opacity: 0
}

.auto_collection-show {
    opacity: 1 !important;
    animation: glowing 3s infinite ease-in-out;
    transition: .5s
}

#shop_box .arrow-right {
    background: url(../../img/arrow-shop.png);
    width: 40px;
    height: 81px;
    position: absolute;
    right: -80px;
    transition: opacity .3s
}

#shop_box .arrow-left {
    background: url(../../img/arrow-shop.png);
    width: 40px;
    height: 81px;
    position: absolute;
    left: -80px;
    transform: scale(-1, 1);
    transition: opacity .3s
}

#shop_box .arrow-left[data-id=back_left],
#shop_box .arrow-right[data-id=back_right] {
    top: 156px
}

#shop_box .arrow-left[data-id=fon_left],
#shop_box .arrow-right[data-id=fon_right] {
    top: 438px
}

#banner-container {
    position: fixed;
    z-index: 10;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, .5)
}