@keyframes rotation-loader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes spinTo1 {
    0% {
        -webkit-transform: rotate(-44deg);
        transform: rotate(-44deg)
    }

    to {
        transform: rotate(1080deg)
    }
}

@-webkit-keyframes spinTo2 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1396deg)
    }
}

@-webkit-keyframes spinTo3 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1351deg)
    }
}

@-webkit-keyframes spinTo4 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1305deg)
    }
}

@-webkit-keyframes spinTo5 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1261deg)
    }
}

@-webkit-keyframes spinTo6 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1217deg)
    }
}

@-webkit-keyframes spinTo7 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1531deg)
    }
}

@-webkit-keyframes spinTo8 {
    0% {
        transform: rotate(-4deg)
    }

    to {
        transform: rotate(1485deg)
    }
}

@-webkit-keyframes spinner-win {
    0%,to {
        transform: rotate(1080deg)
    }

    50% {
        transform: rotate(1085deg)
    }
}

@keyframes rotateVortex {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes dropSlotItem {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(20%)
    }
}

@keyframes highlightSlotItem {
    0%,to {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}

@keyframes scaleVortex {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

@keyframes pulseWin {
    0%,to {
        transform: scale(1)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes moveButtonFigure1 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes moveButtonFigure2 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-360deg)
    }
}

@keyframes moveButtonGrid {
    0%,to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-20%)
    }
}

@keyframes rotateModalFrame1 {
    0%,to {
        transform: rotate(-2.5deg)
    }

    50% {
        transform: rotate(2.5deg)
    }
}

@keyframes rotateModalFrame2 {
    0%,to {
        transform: rotate(2.5deg)
    }

    50% {
        transform: rotate(-2.5deg)
    }
}

* {
    margin: 0;
    padding: 0
}

*,::after,::before {
    box-sizing: border-box
}

ol[role=list],ul[role=list] {
    list-style: none
}

html:focus-within {
    scroll-behavior: smooth
}

a {
    text-decoration: none!important
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

canvas,img,picture,svg,video {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover
}

button,input,select,textarea {
    font: inherit
}

@media (prefers-reduced-motion:reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,::after,::before {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important;
        scroll-behavior: auto!important;
        transition: none
    }
}

body,html {
    height: 100%;
    scroll-behavior: smooth
}

.hidden {
    display: none!important
}

.visible {
    display: flex!important
}

body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: min(4.5px + 5.5*(100vw - 375px)/1545,10px);
    font-style: normal;
    font-size: 85%
}

.bottom__section-button {
    min-width: 50px;
    align-items: center
}

.bottom__section-button span {
    height: auto
}

.bottom__section-button .button-loader {
    display: none
}

.bottom__section-button.is--link {
    display: flex;
    align-items: center;
    justify-content: center
}

.bottom__section-button.is--disabled {
    pointer-events: none
}

.bottom__section-button.is--disabled span {
    opacity: .2
}

.bottom__section-button.is--disabled .button-loader {
    display: flex
}

.button-loader {
    position: absolute;
    align-items: center;
    justify-content: center;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.button-loader span {
    width: 30px!important;
    height: 30px!important;
    border: 4px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation-loader 1s linear infinite;
    opacity: 1!important;
    margin-left: 0!important;
    margin-right: 0!important
}

.wheel__spinner_win_1 {
    animation: 3s spinTo1 ease-in-out forwards!important
}

.wheel__spinner_win_2 {
    animation: 3s spinTo2 ease-in-out forwards
}

.wheel__spinner_win_3 {
    animation: 3s spinTo3 ease-in-out forwards
}

.wheel__spinner_win_4 {
    animation: 3s spinTo4 ease-in-out forwards
}

.wheel__spinner_win_5 {
    animation: 3s spinTo5 ease-in-out forwards
}

.wheel__spinner_win_6 {
    animation: 3s spinTo6 ease-in-out forwards
}

.wheel__spinner_win_7 {
    animation: 3s spinTo7 ease-in-out forwards
}

.wheel__spinner_win_8 {
    animation: 3s spinTo8 ease-in-out forwards
}

.wheel__texts-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 1em!important;
    padding-left: 2em!important
}

.wheel__texts-block p {
    transform: rotate(-7deg)
}

.wheel__texts-block p:only-child {
    transform: rotate(0deg)
}

.wheel__texts-block p+p {
    margin-top: 10px;
    transform: rotate(7deg)
}

.effects,.effects__block {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.effects {
    position: absolute;
    z-index: 997;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    mix-blend-mode: screen
}

.effects__block {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
    position: fixed
}

.wheel__texts-1,.wheel__texts-2 {
    transform: rotate(-137deg);
    position: absolute;
    left: 11%;
    top: 23%
}

.wheel__texts-2 {
    transform: rotate(-93deg);
    left: 32%;
    top: 14%
}

.wheel__texts-3,.wheel__texts-4 {
    transform: rotate(-45deg);
    position: absolute;
    left: 54%;
    top: 23%
}

.wheel__texts-4 {
    transform: rotate(-2deg);
    left: 63%;
    top: 44%
}

.wheel__texts-5,.wheel__texts-6 {
    transform: rotate(43deg);
    position: absolute;
    left: 54%;
    top: 65%
}

.wheel__texts-6 {
    transform: rotate(87deg);
    left: 33%;
    top: 74%
}

.wheel__texts-7,.wheel__texts-8 {
    transform: rotate(133deg);
    position: absolute;
    left: 11%;
    top: 66%
}

.wheel__texts-8 {
    transform: rotate(177deg);
    left: 2%;
    top: 45%
}

.win-animation-svg {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(45deg);
    opacity: 0;
    width: 100%
}

.win-animation-svg.is--active {
    opacity: 1
}

.is--win-spinner {
    animation: 2s spinner-win ease-in-out infinite!important
}

body.is--winner .bottom__section {
    opacity: 0
}

html {
    background: #272935;
    font-size: min(4.5px + 5.5*(100vw - 375px)/1545,10px)
}

@media (max-width: 1440px) {
    body {
        font-size:75%
    }
}

@media (max-width: 1024px) {
    body {
        font-size:90%
    }
}

img {
    width: 100%
}

.body-wrapper {
    display: flex;
    position: relative;
    width: 100%;
    min-height: 100dvh;
    padding: 2.5em 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../img/bg.webp)
}

@media (max-width: 1023px) {
    .body-wrapper {
        padding:5em 16px 10em
    }
}

@media (max-width: 767px) {
    .body-wrapper {
        background-position:top center;
        background-image: url(../img/bg-mobile.webp)
    }
}

@media (max-width: 768px) and (max-height:741px) {
    .body-wrapper {
        padding:3em 16px 6em
    }
}

.game,.game__left {
    display: flex;
    justify-content: center
}

.game {
    flex: 1 1 auto;
    width: 100%
}

.game__left {
    align-items: center;
    flex-direction: column;
    width: 40%
}

@media (max-width: 1023px) {
    .game__left {
        display:none
    }
}

.game__left .game-logo {
    display: block
}

@media (max-width: 1023px) {
    .game__left .game-logo {
        display:none
    }
}

.game__right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10em;
    width: 40%
}

@media (max-width: 1023px) {
    .game__right {
        width:100%;
        flex: 1 1 auto;
        justify-content: space-between;
        gap: 0
    }
}

.game__right .game-logo {
    display: none
}

@media (max-width: 1023px) {
    .game__right .game-logo {
        display:block
    }
}

.game.is--disabled .game-controls__btn .bottom__section-button {
    pointer-events: none;
    opacity: .8;
    filter: none;
    backdrop-filter: none
}

.game-logo {
    position: relative;
    z-index: 2;
    width: 37em
}

@media (max-width: 1023px) {
    .game-logo {
        width:55em
    }
}

@media (max-width: 768px) and (max-height:741px) {
    .game-logo {
        width:55em;
        font-size: 90%
    }
}

.game-results {
    display: flex;
    flex-direction: column;
    width: 55em;
    height: 90em;
    margin-top: 4em;
    gap: 2em
}

.game-results__head {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: 9.1fr 9.5fr 5.9fr 13.3fr;
    height: 4em;
    gap: 2em
}

.game-results__head-item {
    color: #f5cbff;
    text-shadow: 0 0 .02em #f5cbff;
    font-size: 2em
}

.game-results__list,.game-results__list-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em
}

.game-results__list-item {
    align-items: center;
    grid-template-columns: 9.1fr 9.5fr 5.9fr 13.3fr;
    height: 3.5em
}

.game-results__list-item.is--highlighted .game-results__list-item-amount {
    border-right: 6px solid #9b92f9;
    border-left: 7px solid #9b92f9;
    background: #857bdf
}

.game-results__list-item-bet,.game-results__list-item-time {
    color: #f5cbff;
    text-shadow: 0 0 .01em #f5cbff;
    font-size: 1.5em
}

.game-results__list-item-multiplier {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1em;
    gap: 1em
}

.game-results__list-item-multiplier-value {
    color: #f5cbff;
    text-shadow: 0 0 .01em #f5cbff;
    font-size: 1.5em
}

.game-results__list-item-multiplier-ball {
    display: block;
    width: 1.4em;
    height: 1.4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-results__list-item-amount {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 6px solid #60cefa;
    border-left: 7px solid #60cefa;
    background: #53aae1;
    color: #fff;
    font-size: 1.5em
}

.game-field {
    display: flex
}

@media (max-width: 1024px) {
    .game-field {
        font-size:140%
    }
}

@media (max-width: 768px) and (max-height:741px) {
    .game-field {
        font-size:130%
    }
}

.game-field__container {
    width: 80em;
    height: 80em;
    position: relative
}

.game-field__tower {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.game-field__tower-loto,.game-field__tower-loto-front,.game-field__tower-loto-glow {
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat
}

.game-field__tower-loto {
    left: calc(50% - 7.5em);
    top: 0;
    width: 15em;
    height: 15em;
    border-radius: 100%;
    overflow: hidden;
    background-size: cover;
    background-image: url(../img/loto.webp);
    contain: paint;
    isolation: isolate;
    backface-visibility: hidden;
    will-change: auto;
    transform: none!important
}

.game-field__tower-loto-front,.game-field__tower-loto-glow {
    left: calc(50% - 9.55em);
    top: -3.25em;
    width: 19em;
    height: 19em;
    background-size: contain;
    background-image: url(../img/loto-glow.webp)
}

.game-field__tower-loto-front {
    left: calc(50% - 8.25em);
    top: -.35em;
    width: 17em;
    height: 17em;
    background-image: url(../img/loto-front.webp)
}

.game-field__tower-line-left {
    left: 0;
    top: 15em;
    width: 32.5em;
    height: 67.7em;
    background-image: url(../img/side-line.webp);
    transform: scaleX(-1)
}

.game-field__slots-item::after,.game-field__slots-item::before,.game-field__tower-line-left,.game-field__tower-line-right {
    display: block;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-field__tower-line-right {
    right: 0;
    top: 15em;
    width: 32.5em;
    height: 67.7em;
    background-image: url(../img/side-line.webp)
}

.game-field__canvas {
    position: absolute;
    left: calc(50% - 30em);
    top: 15em;
    width: 60em;
    height: 70em
}

.game-field__slots {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    left: calc(50% - 32.5em);
    top: calc(50% + 36em);
    width: 65em;
    height: 4em;
    gap: 1em
}

.game-field__slots-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.25em;
    height: 100%;
    border-radius: 3px;
    position: relative
}

.game-field__slots-item::after,.game-field__slots-item::before {
    content: "";
    left: 0;
    top: -12em;
    width: 100%;
    height: 17em
}

.game-field__slots-item::before {
    z-index: 2
}

.game-field__slots-item::after {
    opacity: 0;
    background-image: url(../img/bucket-highlight.webp)
}

.game-field__slots-item span {
    position: relative;
    z-index: 3;
    color: #fff;
    text-align: center;
    font-size: 2em;
    top: 2em
}

.game-field__slots-item.is--1::before,.game-field__slots-item.is--8::before {
    background-image: url(../img/bucket-3.webp)
}

.game-field__slots-item.is--2::before,.game-field__slots-item.is--7::before {
    background-image: url(../img/bucket-2.webp)
}

.game-field__slots-item.is--3::before,.game-field__slots-item.is--6::before {
    width: 150%;
    left: -25%;
    top: -3.5em;
    height: 10em;
    background-image: url(../img/vorrtex.webp);
    animation: rotateVortex 20s ease-in-out infinite
}

.game-field__slots-item.is--3 span,.game-field__slots-item.is--6 span {
    top: -.25em
}

.game-field__slots-item.is--3::after,.game-field__slots-item.is--6::after {
    display: none
}

.game-field__slots-item.is--4::before,.game-field__slots-item.is--5::before {
    background-image: url(../img/bucket-1.webp)
}

.game-field__slots-item.is--active {
    animation: dropSlotItem 1s ease-in-out infinite
}

.game-field__slots-item.is--active::after {
    animation: highlightSlotItem 1s ease-in-out infinite
}

.game-field__slots-item.is--active.is--3,.game-field__slots-item.is--active.is--6 {
    animation: scaleVortex 1s ease-in-out infinite
}

.game-field__risk {
    position: absolute;
    right: calc(50% - 34em);
    top: 20em;
    z-index: 2;
    display: flex
}

@media (max-width: 767px) {
    .game-field__risk {
        right:calc(50% - 29em);
        top: -3em
    }
}

.game-field__risk-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    top: -2.5em;
    left: -2em;
    width: 13em;
    height: 3em;
    padding-left: 1.75em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/frame-bg-2.webp)
}

.game-field__lines-label span,.game-field__risk-label span {
    color: #f0b3ff;
    text-shadow: 0 0 .9em #f0b3ff;
    font-size: 1.2em
}

.game-field__risk-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    width: 18.2em;
    height: 6.4em;
    padding: 0 1.5em
}

.game-field__risk-value::before {
    content: "";
    position: absolute;
    width: 17em;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/frame-bg-4-left.webp)
}

.game-field__risk-value-item,.game-field__risk-value::after,.game-field__risk-value::before {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-field__risk-value::after {
    content: "";
    position: absolute;
    width: 15em;
    height: 100%;
    right: 0;
    top: 0;
    background-image: url(../img/frame-bg-4-right.webp)
}

.game-field__risk-value-item {
    position: relative;
    z-index: 2;
    width: 3.5em;
    height: 3.5em;
    background-image: url(../img/icon-fire.webp)
}

.game-field__risk-value-item.is--1 {
    transform: scale(.9)
}

.game-field__risk-value-item.is--2 {
    transform: scale(1)
}

.game-field__risk-value-item.is--3 {
    transform: scale(1.1)
}

.game-field__lines {
    position: absolute;
    right: calc(50% - 38em);
    top: 31em;
    z-index: 2;
    display: flex
}

@media (max-width: 767px) {
    .game-field__lines {
        right:calc(50% - 34em);
        top: 8em
    }
}

.game-field__lines-label,.game-field__lines-value::after,.game-field__lines-value::before {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-field__lines-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    top: -2.5em;
    left: -2em;
    width: 13em;
    height: 3em;
    padding-left: 2em;
    background-image: url(../img/frame-bg-2.webp)
}

.game-field__lines-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    width: 15.2em;
    height: 6.1em;
    padding: 0 1.75em 0 1.5em
}

.game-field__lines-value::after,.game-field__lines-value::before {
    content: "";
    display: block;
    width: 15em;
    height: 100%;
    top: 0
}

.game-field__lines-value::before {
    left: 0;
    background-image: url(../img/frame-bg-4-left.webp)
}

.game-field__lines-value::after {
    right: 0;
    background-image: url(../img/frame-bg-4-right.webp)
}

.game-field__lines-value-count {
    font-size: 2.2em;
    position: relative;
    z-index: 2;
    color: #f0b3ff;
    text-shadow: 0 0 1em #f0b3ff
}

.game-field__lines-value-arrow-left {
    position: relative;
    display: block;
    width: 2.5em;
    height: 2.5em;
    background-image: url(../img/arrow-1.webp)
}

.game-field__lines-value-arrow-left,.game-field__lines-value-arrow-right,.game-field__multipliers {
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-field__lines-value-arrow-right {
    position: relative;
    display: block;
    width: 2.75em;
    height: 2.75em;
    background-image: url(../img/arrow-2.webp)
}

.game-field__multipliers {
    position: absolute;
    left: calc(50% - 41.5em);
    top: 20em;
    width: 27.3em;
    height: 3.3em;
    padding: 0 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-image: url(../img/frame-bg-6.webp)
}

@media (max-width: 767px) {
    .game-field__multipliers {
        font-size:90%;
        left: calc(50% - 35.5em);
        top: -5em
    }
}

.game-field__multipliers.is--2 {
    left: calc(50% - 43.5em);
    top: 24.5em
}

@media (max-width: 767px) {
    .game-field__multipliers.is--2 {
        left:calc(50% - 38.5em);
        top: -.5em
    }
}

.game-field__multipliers-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33%;
    gap: .5em
}

.game-field__multipliers-item-value {
    font-size: 1.8em;
    position: relative;
    z-index: 2;
    color: #f5cbff;
    text-shadow: 0 0 .1em #f5cbff
}

.game-controls__win::after,.game-controls__win::before,.game-field__multipliers-item-ball {
    display: block;
    width: 1.8em;
    height: 1.8em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-field__multipliers-item-ball.is--1 {
    background-image: url(../img/ball-1.webp)
}

.game-field__multipliers-item-ball.is--2 {
    background-image: url(../img/ball-2.webp)
}

.game-field__multipliers-item-ball.is--3 {
    background-image: url(../img/ball-3.webp)
}

.game-field__multipliers-item-ball.is--4 {
    background-image: url(../img/ball-4.webp)
}

.game-field__multipliers-item-ball.is--5 {
    background-image: url(../img/ball-5.webp)
}

.game-field__multipliers-item-ball.is--6 {
    background-image: url(../img/ball-6.webp)
}

.game-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media screen and (max-width: 1023px) {
    .game-controls {
        font-size:140%
    }
}

@media (max-width: 768px) and (max-height:741px) {
    .game-controls {
        font-size:125%
    }
}

.game-controls__win {
    position: absolute;
    font-size: 110%;
    top: -12em;
    left: calc(50% - 22.5em);
    display: none;
    align-items: center;
    justify-content: center;
    width: 45em;
    height: 13em
}

@media screen and (max-width: 1023px) {
    .game-controls__win {
        font-size:130%;
        top: -11em
    }
}

.game-controls__win.is--active {
    display: flex
}

.game-controls__win::after,.game-controls__win::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0
}

.game-controls__win::before {
    bottom: 27%;
    background-image: url(../img/fire.webp);
    mix-blend-mode: soft-light;
    z-index: 10
}

.game-controls__win::after {
    top: 0;
    background-image: url(../img/frame-win.webp);
    z-index: 11;
    animation: pulseWin .5s ease-in-out infinite
}

.game-controls__win-value {
    position: relative;
    font-size: 1.8em;
    color: #6dfbfd;
    letter-spacing: .03em;
    z-index: 12;
    animation: pulseWin .5s ease-in-out infinite
}

.game-controls__bet {
    position: absolute;
    right: -23em;
    top: -1em;
    z-index: 2;
    display: flex
}

.game-controls__bet-label,.game-controls__bet-value::after,.game-controls__bet-value::before {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-controls__bet-label {
    display: flex;
    align-items: center;
    justify-content: center;
    top: -2.5em;
    left: -8em;
    width: 20.9em;
    height: 3em;
    padding: 0 0 0 6em;
    background-image: url(../img/frame-bg-1.webp)
}

.game-controls__bet-label span {
    color: #fcffa6;
    text-shadow: 0 0 .9em #fff6a6;
    font-size: 1.2em
}

.game-controls__bet-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 18.2em;
    height: 6.1em;
    padding: 0 1.5em
}

.game-controls__bet-value::after,.game-controls__bet-value::before {
    content: "";
    display: block;
    width: 15em;
    height: 100%;
    top: 0
}

.game-controls__bet-value::before {
    left: 0;
    background-image: url(../img/frame-bg-5-left.webp)
}

.game-controls__bet-value::after {
    right: 0;
    background-image: url(../img/frame-bg-5-right.webp)
}

.game-controls__bet-value-count {
    font-size: 2.2em;
    position: relative;
    z-index: 2;
    color: #fcffa6;
    text-shadow: 0 0 1em #ffa100
}

.game-controls__bet-value-arrow-left,.game-controls__bet-value-arrow-right {
    position: relative;
    z-index: 2;
    display: block;
    width: 4em;
    height: 4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/arrow-3.webp)
}

.game-controls__bet-value-arrow-right {
    transform: scaleX(-1)
}

.game-controls__features {
    position: absolute;
    left: -22em;
    top: -1em;
    z-index: 2;
    display: flex
}

.game-controls__features-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -2.5em;
    right: -8em;
    width: 20.9em;
    height: 3em;
    padding: 0 0 0 6em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/frame-bg-1.webp);
    transform: scaleX(-1)
}

.game-controls__amount-label span,.game-controls__features-label span {
    color: #f0b3ff;
    text-shadow: 0 0 .9em #f0b3ff;
    font-size: 1.2em;
    transform: scaleX(-1)
}

.game-controls__features-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 15.2em;
    height: 6.1em;
    padding: 0 1.5em
}

.game-controls__features-value::before {
    content: "";
    position: absolute;
    width: 15em;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/frame-bg-4-left.webp)
}

.game-controls__features-value-item,.game-controls__features-value::after,.game-controls__features-value::before {
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-controls__features-value::after {
    content: "";
    position: absolute;
    width: 15em;
    height: 100%;
    right: 0;
    top: 0;
    background-image: url(../img/frame-bg-4-right.webp)
}

.game-controls__features-value-item {
    position: relative;
    z-index: 2;
    width: 3.2em;
    height: 3.2em
}

.game-controls__features-value-item.is--1 {
    background-image: url(../img/icon-threshold.webp)
}

.game-controls__features-value-item.is--2 {
    background-image: url(../img/icon-vortex.webp)
}

.game-controls__features-value-item.is--3 {
    background-image: url(../img/icon-high.webp)
}

.game-controls__amount {
    position: absolute;
    left: -23em;
    top: 10em;
    z-index: 2;
    display: flex
}

.game-controls__amount-label,.game-controls__amount-value::before {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-controls__amount-label {
    display: flex;
    align-items: center;
    justify-content: center;
    top: -2.5em;
    right: -8em;
    width: 20.9em;
    height: 3em;
    padding: 0 0 0 6em;
    background-image: url(../img/frame-bg-1.webp);
    transform: scaleX(-1)
}

.game-controls__amount-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    width: 15.2em;
    height: 6.1em;
    padding: 0 1.75em 0 1.5em
}

.game-controls__amount-value::before {
    content: "";
    display: block;
    width: 15em;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/frame-bg-4-left.webp)
}

.game-controls__amount-value::after {
    right: 0;
    background-image: url(../img/frame-bg-4-right.webp)
}

.game-controls__amount-value-count {
    font-size: 2.2em;
    position: relative;
    z-index: 2;
    color: #f0b3ff;
    text-shadow: 0 0 1em #f0b3ff
}

.game-controls__amount-value-arrow-left,.game-controls__amount-value-arrow-right {
    position: relative;
    z-index: 2;
    display: block;
    width: 2.5em;
    height: 2.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/arrow-1.webp)
}

.game-controls__amount-value-arrow-right {
    width: 2.75em;
    height: 2.75em;
    background-image: url(../img/arrow-2.webp)
}

.game-controls__auto {
    position: absolute;
    right: -24em;
    top: 10em;
    z-index: 2;
    display: flex
}

.game-controls__auto-label {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -2.5em;
    left: -8em;
    width: 20.9em;
    height: 3em;
    padding: 0 0 0 6em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/frame-bg-1.webp)
}

.game-controls__auto-label span {
    color: #6af2f4;
    text-shadow: 0 0 .9em #6af2f4;
    font-size: 1.2em
}

.game-controls__auto-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    width: 15.2em;
    height: 6.1em;
    padding: 0 1.75em
}

.game-controls__amount-value::after,.game-controls__auto-value::after,.game-controls__auto-value::before {
    content: "";
    display: block;
    position: absolute;
    width: 15em;
    height: 100%;
    top: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.game-controls__auto-value::before {
    left: 0;
    background-image: url(../img/frame-bg-3-left.webp)
}

.game-controls__auto-value::after {
    right: 0;
    background-image: url(../img/frame-bg-3-right.webp)
}

.game-controls__auto-value-count {
    font-size: 2.2em;
    position: relative;
    z-index: 2;
    color: #6af2f4;
    text-shadow: 0 0 1em #6af2f4
}

.game-controls__auto-value-arrow-left,.game-controls__auto-value-arrow-right {
    position: relative;
    z-index: 2;
    display: block;
    width: 2.5em;
    height: 2.5em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/arrow-1.webp)
}

.game-controls__auto-value-arrow-right {
    width: 2.75em;
    height: 2.75em;
    transform: scaleX(-1)
}

.game-controls__btn {
    position: relative
}

.game-controls__btn .bottom__section-button::before,.game-controls__btn::after,.game-controls__btn::before {
    content: "";
    display: block;
    position: absolute;
    left: -15%;
    top: -15%;
    width: 130%;
    height: 130%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/btn-figure-1.webp);
    animation: moveButtonFigure1 20s linear infinite
}

.game-controls__btn .bottom__section-button::before,.game-controls__btn::after {
    left: -12.5%;
    top: -12.5%;
    width: 125%;
    height: 125%;
    background-image: url(../img/btn-figure-2.webp);
    animation: moveButtonFigure2 20s linear infinite
}

.game-controls__btn .bottom__section-button {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.2em;
    height: 16.2em;
    border-radius: 100%;
    border: 3px solid #f8fc6f;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .15s ease-in-out;
    filter: drop-shadow(0 0 1.5em #f8fc6f) drop-shadow(0 0 1.5em #f8fc6f);
    background: rgba(246,183,61,.6);
    backdrop-filter: blur(1px)
}

@media (hover: hover) and (pointer:fine) {
    .game-controls__btn .bottom__section-button:hover {
        opacity:1
    }
}

@media (hover: none) and (pointer:coarse) {
    .game-controls__btn .bottom__section-button:active {
        opacity:1
    }
}

.game-controls__btn .bottom__section-button::before {
    left: 0;
    top: -10%;
    width: 100%;
    height: 150%;
    background-image: url(../img/btn-grid.webp);
    animation: moveButtonGrid 10s ease-in-out infinite
}

.game-controls__btn .bottom__section-button span {
    position: relative;
    z-index: 2;
    font-size: 4em;
    color: #fff;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase
}

.game-controls__btn .bottom__section-button-default {
    display: block
}

.game-controls__btn .bottom__section-button-next {
    display: none
}

.modal {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    visibility: hidden
}

@media (max-width: 1023px) {
    .modal {
        font-size:95%
    }
}

.modal::before,.modal__logo {
    position: absolute;
    display: block
}

.modal::before {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(217,217,217,.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px)
}

.modal__logo {
    z-index: 5;
    width: 55em;
    left: calc(50% - 27.5em);
    top: 5em
}

.modal__content {
    position: absolute;
    z-index: 2;
    top: calc(50% - 29em);
    left: calc(50% - 50em);
    display: flex;
    flex-direction: column;
    width: 100em;
    height: 58em
}

.modal__content::after,.modal__content::before {
    content: "";
    display: block;
    position: absolute;
    left: -17.5%;
    top: -17.5%;
    width: 135%;
    height: 135%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/frame-modal-1.webp);
    animation: rotateModalFrame1 10s ease-in-out infinite
}

.modal__content::after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/frame-modal-2.webp);
    animation: rotateModalFrame2 10s ease-in-out infinite
}

.modal__title {
    position: relative;
    z-index: 2;
    margin-top: 5em;
    padding: 0 32px;
    font-size: 5.2em;
    text-align: center;
    text-transform: uppercase;
    color: #001d5a;
    text-shadow: 0 -3px 1px #30ffff,-2px -2px 1px #30ffff,-1px -2px 1px #30ffff,0 -2px 1px #30ffff,1px -2px 1px #30ffff,2px -2px 1px #30ffff,-2px -1px 1px #30ffff,-1px -1px 1px #30ffff,0 -1px 1px #30ffff,1px -1px 1px #30ffff,2px -1px 1px #30ffff,-3px 0 1px #30ffff,-2px 0 1px #30ffff,-1px 0 1px #30ffff,0 0 1px #30ffff,1px 0 1px #30ffff,2px 0 1px #30ffff,3px 0 1px #30ffff,-2px 1px 1px #30ffff,-1px 1px 1px #30ffff,0 1px 1px #30ffff,1px 1px 1px #30ffff,2px 1px 1px #30ffff,-2px 2px 1px #30ffff,-1px 2px 1px #30ffff,0 2px 1px #30ffff,1px 2px 1px #30ffff,2px 2px 1px #30ffff,0 3px 1px #30ffff;
    -webkit-font-smoothing: antialiased
}

@media (max-width: 768px) {
    .modal__title {
        text-shadow:0 -2px 1px #30ffff,-1px -1px 1px #30ffff,0 -1px 1px #30ffff,1px -1px 1px #30ffff,-2px 0 1px #30ffff,-1px 0 1px #30ffff,0 0 1px #30ffff,1px 0 1px #30ffff,2px 0 1px #30ffff,-1px 1px 1px #30ffff,0 1px 1px #30ffff,1px 1px 1px #30ffff,0 2px 1px #30ffff;
        -webkit-font-smoothing: antialiased
    }
}

.modal__text {
    position: relative;
    z-index: 2;
    margin-top: 10px;
    padding: 0 32px;
    font-size: 5.2em;
    text-align: center;
    text-transform: uppercase;
    color: #30ffff
}

@media (max-width: 768px) {
    .modal__text {
        margin-top:5px
    }
}

.modal__win-btn {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: -5em;
    transform: translateX(-50%) skew(-15deg)
}

.modal__win-btn .bottom__section-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 39em;
    height: 12.6em;
    padding: 0 5em;
    background: #ffbf00;
    border: 2px solid #faff6f;
    box-shadow: 0 0 1em 0 #faff6f inset;
    filter: drop-shadow(0 0 1em #faff6f)
}

.modal__win-btn .bottom__section-button span {
    color: #480b0b;
    text-align: center;
    font-size: 7em;
    white-space: nowrap;
    transform: skew(15deg)
}

.modal__win-btn .button-loader {
    transform: skew(15deg)
}

.modal__win-btn .button-loader span {
    border: 4px solid #480b0b;
    border-bottom-color: transparent
}

.modal__coins {
    position: absolute;
    width: 110em;
    height: 110em;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/coins.webp);
    mix-blend-mode: screen
}

.modal__coins.is--1 {
    z-index: 2;
    left: calc(50% - 120em);
    top: calc(50% - 50em)
}

@media (max-width: 1023px) {
    .modal__coins.is--1 {
        top:calc(50% - 90em);
        left: calc(50% - 40em);
        transform: scaleX(-1)
    }
}

.modal__coins.is--2 {
    z-index: 2;
    right: calc(50% - 120em);
    top: calc(50% - 80em);
    transform: scaleX(-1)
}

@media (max-width: 1023px) {
    .modal__coins.is--2 {
        top:50%;
        right: calc(50% - 42em);
        transform: unset
    }
}

.modal.is--active {
    opacity: 1;
    visibility: visible
}

.is--modal-open .game * {
    z-index: 0
}

#bonus-inline {
    z-index: 7
}

@media (max-width: 1024px) {
    #bonus-inline {
        position:absolute;
        left: unset;
        right: 70px;
        bottom: 200%;
        transform: unset;
        min-width: 255px
    }

    #bonus-inline img {
        transform: rotate(-90deg);
        top: 0
    }
}

#bonus-inline.is--active {
    background: linear-gradient(to left,#de6f00,#fffb00)
}

@media (max-width: 1024px) {
    #bonus-inline.is--active {
        right:70px;
        transform: rotate(90deg);
        transform-origin: bottom right;
        bottom: 49em;
        transition: bottom 1s ease-out
    }
}

@media (max-width: 1024px) and (max-height:741px) {
    #bonus-inline.is--active {
        bottom:37em
    }
}

#bonus-inline.is--active p {
    background: linear-gradient(90deg,#33b628 0,#33b628 100%);
    -webkit-background-clip: text
}

#bonus-inline.is--active svg path {
    stroke: #33b628
}

#game-canvas-container {
    position: relative;
    z-index: 4;
    will-change: transform;
    transform: translateZ(0);
    overflow: hidden
}