@charset "UTF-8";
:root {
    --color-rarity-placeholder: #404058;
    --color-rarity-common: #969396;
    --color-rarity-uncommon: #63bbed;
    --color-rarity-rare: #4888e9;
    --color-rarity-epic: #975df8;
    --color-rarity-legendary: #e366f8;
    --color-rarity-arcane: #f44b55;
    --color-rarity-glove: #f44b55;
    --color-rarity-ezknife: #f44b55;
    --color-rarity-nameless: #f1d15e;
    --color-rarity-gold: #f1d15e;
    --color-rarity-placeholder-opacity: #40405860;
    --color-rarity-common-opacity: #96939660;
    --color-rarity-uncommon-opacity: #63bbed60;
    --color-rarity-rare-opacity: #4888e960;
    --color-rarity-epic-opacity: #975df860;
    --color-rarity-legendary-opacity: #e366f860;
    --color-rarity-arcane-opacity: #f44b5560;
    --color-rarity-glove-opacity: #f44b5560;
    --color-rarity-ezknife-opacity: #f44b5560;
    --color-rarity-nameless-opacity: #f1d15e60;
    --color-rarity-gold-opacity: #f1d15e60;
    --border-radius-xs: 3px;
    --border-radius-s: 5px;
    --border-radius-m: 8px;
    --border-radius-l: 10px;
    --border-radius-xl: 12px;
    --border-radius-xxl: 16px;
    --distance-xxs: 3px;
    --distance-xs: 6px;
    --distance-s: 8px;
    --distance-m: 10px;
    --distance-l: 12px;
    --distance-xl: 16px;
    --distance-xxl: 18px;
    --size: 45px;
    --case-duration: 10s;
    --color-theme-blue: #5db4ec;
    --color-theme-gold: #f4ca80;
    --color-theme-violet: #9f86ef;
    --color-theme-red: #f18686;
    --color-theme-white: #c8d3ff;
    --color-white: #eeeffb;
    --color-dark: #363753;
    --color-dark-primary: #242537;
    --color-dark-secondary: #2e3046;
    --color-light: #67688e;
    --color-grey: #1e1f2e;
    --color-grey-primary: #1d1e2a;
    --color-primary: #181924;
    --color-secondary: #242536;
    --color-gray: #2c2c43;
    --color-gray-dark: #1f2135;
    --color-gray-light: #a3a3cb;
    --color-gray-primary: #515274;
    --color-gray-secondary: #202133;
    --color-text: #a9b7cc;
    --color-primary-text: #aeb6c2;
    --color-disable-text: #6d6e8c;
    --color: #febe3b;
    --color-80: #f4ca8080;
    --color-40: #f4ca8040;
    --color-20: #f4ca8020;
    --color-10: #f4ca8010;
    --color-bg: #f4ca8040;
    --color-green: #51ce91;
    --color-green-bg: #51ce9140;
    --color-primary-green: #51cea1;
    --color-red: #fa727a;
    --color-red-bg: #fa727a40;
    --color-yellow: #fabf72;
    --color-yellow-bg: #fabf7240;
    --effect-hover: brightness(1.1);
    --effect-hover-enhanced: brightness(1.2);
    --effect-press: brightness(1.3);
    --effect-hover-dark: brightness(0.7);
    --effect-hover-dark-small: brightness(0.9);
    --effect-hover-dark-medium: brightness(0.8);
    --effect-hover-dark-big: brightness(0.7);
    --gradient-rarity-common: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-common-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-uncommon: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-uncommon-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-rare: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-rare-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-epic: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-epic-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-legendary: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-legendary-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-arcane: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-arcane-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-glove: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-glove-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-ezknife: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-ezknife-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-nameless: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-nameless-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
    --gradient-rarity-gold: radial-gradient(
        180% 130% at 50% 100%,
        var(--color-rarity-gold-opacity) 0%,
        var(--color-gray-secondary) 100%
    );
}

*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat, sans-serif;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #141522;
}

::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: var(--color-gray);
}

.scroll--white::-webkit-scrollbar {
    width: 3px !important;
    border-radius: 3px !important;
    background-color: var(--color-primary) !important;
}

.scroll--white::-webkit-scrollbar-thumb {
    width: 100%;
    border-radius: 3px !important;
    background-color: var(--color-light) !important;
}

script {
    display: none !important;
}

html {
    height: 100%;
    font-size: 12px;
    touch-action: manipulation;
}

@media screen and (min-width: 768px) {
    html {
        font-size: 14px;
    }

    :root {
        --distance: var(--distance-l);
        --border-radius: var(--border-radius-xl);
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }

    :root {
        --distance: var(--distance-m);
        --border-radius: var(--border-radius-l);
    }
}

@media screen and (max-width: 425px) {
    html {
        font-size: 13px;
    }

    :root {
        --distance: var(--distance-s);
        --border-radius: var(--border-radius-m);
    }
}

@media screen and (max-width: 375px) {
    html {
        font-size: 12px;
    }

    :root {
        --distance: var(--distance-xs);
        --border-radius: var(--border-radius-m);
    }
}

body {
    margin: 0;
    line-height: 1;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    color: var(--color-white);
    -moz-text-size-adjust: 100%;
    text-decoration-skip: objects;
    -webkit-text-size-adjust: 100%;
    background: var(--color-primary);
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-family: Montserrat, sans-serif;
    -webkit-text-decoration-skip: objects;
    -webkit-tap-highlight-color: transparent;
}

#root {
    width: 100%;
    display: flex;
    max-width: 100%;
    overflow: hidden;
    min-height: 100vh;
    position: relative;
    flex-direction: column;
}

#main {
    width: 100%;
    flex-grow: 3;
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    flex-direction: column;
    /*justify-content: center;*/
}

#main .main-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

section {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    padding: calc(var(--distance) * 1.5) 0;
}

img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

ul,
li {
    list-style: none;
}

a {
    cursor: pointer;
    text-decoration: none;
}

input {
    border: none;
    outline: none;
    background: none;
}

button,
input[type=button] {
    border: none;
    outline: none;
    cursor: pointer;
    background: none;
}

@keyframes hue-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.animate--hue-rotate {
    animation: hue-rotate 10s linear infinite;
}

.color--none {
    color: none !important;
    background: none !important;
}

.color--theme {
    background: var(--color) !important;
    color: var(--color-gray-secondary) !important;
}

.color--theme.dark {
    color: var(--color) !important;
    background: var(--color-40) !important;
}

.color--theme-text {
    color: var(--color) !important;
}

.color--red {
    color: var(--color-red) !important;
    background: var(--color-red-bg) !important;
}

.color--red svg {
    fill: var(--color-red) !important;
}

.color--red-text {
    color: var(--color-red) !important;
}

.color--green {
    color: var(--color-primary) !important;
    background: var(--color-green) !important;
}

.color--green-text {
    color: var(--color-green) !important;
}

.color--green-text svg {
    fill: var(--color-green) !important;
}

.color--green-primary {
    color: var(--color-primary) !important;
    background: var(--color-primary-green) !important;
}

.color--green svg,
.color--green-primary svg {
    fill: var(--color-primary) !important;
}

.color--green-dark {
    color: var(--color-green) !important;
    background: var(--color-green-bg) !important;
}

.color--green-dark svg {
    fill: var(--color-green) !important;
}

.color--yellow {
    color: var(--color-yellow) !important;
    background: var(--color-yellow-bg) !important;
}

.color--yellow svg {
    fill: var(--color-yellow) !important;
}

.color--gray {
    color: var(--color-gray-light) !important;
    background: var(--color-dark) !important;
}

input.color--gray::-moz-placeholder {
    font-weight: 600;
    color: var(--color-disable-text);
}

input.color--gray::placeholder {
    font-weight: 600;
    color: var(--color-disable-text);
}

.color--gray-secondary {
    color: var(--color-gray-light);
    background: var(--color-dark-secondary);
}

.color--gray-secondary svg {
    fill: var(--color-gray-light);
}

.color--gray-text {
    color: var(--color-gray-light);
}

svg.color--gray-text {
    fill: var(--color-gray-light);
}

.color--gray-light {
    background: var(--color-gray-primary);
}

.color--primary {
    background: var(--color-gray-secondary);
}

.color--primary-text {
    color: var(--color-primary-text);
}

svg.color--primary-text {
    fill: var(--color-primary-text);
}

.color--text {
    color: var(--color-text);
}

.color--white-text {
    color: var(--color-white);
}

.color--gray-border {
    color: var(--color-gray-light) !important;
    border: solid 1px var(--color-gray-primary) !important;
}

.color--gray-border.dashed {
    border-style: dashed !important;
}

input.color--gray-border::-moz-placeholder {
    font-weight: 600;
    color: var(--color-disable-text);
}

input.color--gray-border::placeholder {
    font-weight: 600;
    color: var(--color-disable-text);
}

.color--disable {
    color: var(--color-disable-text);
}

.color--theme:hover,
.color--green:hover,
.color--gray:hover,
input.color--gray:focus,
.color--gray-border:hover {
    filter: var(--effect-hover);
}

.select.active {
    /*filter: var(--effect-press) !important;*/
}

.size {
    z-index: 1;
    height: var(--size) !important;
    min-height: var(--size) !important;
}

.square {
    padding: 0 !important;
    width: var(--size) !important;
    height: var(--size) !important;
    min-width: var(--size) !important;
    min-height: var(--size) !important;
}

.size--content {
    width: fit-content !important;
    width: -moz-fit-content !important;
}

.size--h-content {
    height: fit-content !important;
    height: -moz-fit-content !important;
}

.size--h-auto {
    height: auto !important;
}

.size--full {
    width: 100%;
    height: 100%;
}

.size--w-full {
    width: 100%;
}

.size--h-full {
    height: 100%;
}

.font {
    z-index: 2;
    line-height: 1;
    text-overflow: ellipsis;
    font-family: Montserrat, sans-serif;
}

.font.h1 {
    font-weight: 900;
    line-height: 24px;
    font-size: 1.875rem;
}

.font.h2 {
    font-size: 24px;
}

.font.h3 {
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.font.h4 {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25rem;
}

.font.h5 {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

.font.h6 {
    font-weight: 500;
    line-height: 12px;
    font-size: 0.75rem;
}

.font.bold {
    font-weight: 700;
}

.font.uppercase {
    text-transform: uppercase;
}

.font.nowrap {
    white-space: nowrap;
}

.font--nowrap {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.font--400 {
    font-weight: 400 !important;
}

.font--500 {
    font-weight: 500 !important;
}

.font--600 {
    font-weight: 600 !important;
}

.font--700 {
    font-weight: 700 !important;
}

.font--800 {
    font-weight: 800 !important;
}

.font--900 {
    font-weight: 900 !important;
}

.font--transform-none {
    text-transform: none;
}

.font.decoration--none {
    text-decoration: none;
}

.font--shadow {
    text-shadow: 1px 1px 1px var(--color-primary);
}

.overflow--hidden {
    overflow: hidden !important;
}

.overflow--visible {
    overflow: visible !important;
}

.overflow--scroll {
    overflow: scroll !important;
}

.icon--tiny {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 12px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon--micro {
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon--small {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon--medium {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
}

.icon--big {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.flex {
    display: flex;
}

.flex.between {
    justify-content: space-between;
}

.flex.column {
    flex-direction: column !important;
}

.flex.center {
    align-items: center;
    justify-content: center;
}

.flex--shrink {
    flex-shrink: 0;
}

.center {
    text-align: center;
}

.flex.center--x {
    justify-content: center;
}

.center--x:not(.flex) {
    margin: 0 auto;
}

.flex.center--y {
    align-items: center;
}

.center--y:not(.flex) {
    margin: auto 0;
}

.flex.end--x {
    justify-content: end;
}

.flex.end--y {
    align-items: end;
}

.gap--none {
    gap: 0 !important;
}

.gap--inherit {
    gap: inherit;
}

.gap--distance {
    gap: var(--distance);
}

.gap--xxs {
    gap: var(--distance-xxs);
}

.gap--xs {
    gap: var(--distance-xs) !important;
}

.gap--s {
    gap: var(--distance-s) !important;
}

.gap--m {
    gap: var(--distance-m) !important;
}

.gap--l {
    gap: var(--distance-l) !important;
}

.gap--xl {
    gap: var(--distance-xl) !important;
}

.gap--xxl {
    gap: var(--distance-xxl) !important;
}

.container--distance {
    gap: var(--distance);
    border-radius: var(--border-radius) !important;
    padding: calc(var(--distance) * 1.5) !important;
}

.container--xs {
    padding: var(--distance-xs) !important;
    border-radius: var(--border-radius-s) !important;
}

.container--s {
    padding: var(--distance-s) !important;
}

.container--m {
    padding: var(--distance-m) !important;
}

.container--l {
    padding: var(--distance-l) !important;
}

.container--xl {
    padding: var(--distance-xl) !important;
}

.container--xxl {
    padding: var(--distance-xxl) calc(var(--distance-xxl) * 1.3) !important;
    border-radius: var(--border-radius-xl) !important;
}

.pointer-events--none {
    pointer-events: none;
}

.position--absolute {
    position: absolute;
}

.position--relative {
    position: relative;
}

.position--fixed {
    position: fixed;
}

.padding--xs {
    padding: 2px 4px !important;
}

.padding--s {
    padding: 4px 6px !important;
}

.padding--m {
    padding: 6px 8px !important;
}

.padding--l {
    padding: 8px 12px !important;
}

.padding--xl {
    padding: 12px 16px !important;
}

.padding--xxl {
    padding: 16px 20px !important;
}

.radius--xs {
    border-radius: var(--border-radius-xs) !important;
}

.radius--s {
    border-radius: var(--border-radius-s) !important;
}

.radius--m {
    border-radius: var(--border-radius-m) !important;
}

.radius--l {
    border-radius: var(--border-radius-l) !important;
}

.radius--xl {
    border-radius: var(--border-radius-xl) !important;
}

.radius--xxl {
    border-radius: var(--border-radius-xxl) !important;
}

.shadow--standard {
    box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.2509803922);
}

.user-select--none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.user-select--text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.cursor--pointer {
    cursor: pointer !important;
}

.cursor--default {
    cursor: default !important;
}

.effect--hover:hover {
    filter: var(--effect-hover);
}

.effect--hover-enhanced:hover {
    filter: var(--effect-hover-enhanced);
}

.effect--hover-dark:hover {
    filter: var(--effect-hover-dark);
}

.effect--press:hover {
    filter: var(--effect-press) !important;
}

.effect--none {
    filter: none !important;
}

.container--unauth {
    gap: 16px;
    width: 100%;
    display: flex;
    padding: 72px 24px;
    align-items: center;
    justify-items: center;
    flex-direction: column;
    border-radius: var(--border-radius-xl);
    background: var(--color-gray-secondary);
}

.container--unauth .font--unauth {
    font-size: 1rem;
    color: var(--color-text);
}

.theme-button {
    display: flex;
    cursor: pointer;
    font-size: 1rem;
    overflow: hidden;
    font-weight: 700;
    padding: 16px 20px;
    align-items: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    justify-content: center;
    background: var(--color);
    text-transform: uppercase;
    color: var(--color-primary);
    transition: filter 0.3s ease;
    border-radius: var(--border-radius-m);
}

.theme-button.dark {
    color: var(--color);
    background: var(--color-40);
}

.theme-button:hover {
    filter: var(--effect-hover);
}

.theme-button svg {
    fill: var(--color);
}

.balance {
    font-weight: 700;
    overflow: hidden;
    font-size: 1.125rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-green);
    text-transform: uppercase;
}

.money {
    white-space: nowrap;
}

.balance::after,
.money::after {
    content: "₽";
    margin-left: 3px;
}

.button {
    border: none;
    outline: none;
    display: flex;
    font-size: 1rem;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    align-items: center;
    gap: var(--distance-s);
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: var(--border-radius-m);
    padding: 16px 20px;
}

.padding--button {
    padding: 16px 20px;
}

.user--avatar {
    aspect-ratio: 1;
    height: var(--size);
}

.user--avatar img {
    width: 100%;
    height: 100%;
}

.skin-items {
    gap: 8px;
    width: 100%;
    display: grid;
    justify-content: center;
}

@media screen and (min-width: 1280px) {
    .skin-items {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media screen and (max-width: 1280px) {
    .skin-items {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (max-width: 1024px) {
    .skin-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .skin-items {
        gap: var(--distance-xs);
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 425px) {
    .skin-items {
        gap: var(--distance-xs);
        grid-template-columns: repeat(2, 1fr);
    }
}

.skin-item {
    overflow: hidden;
    aspect-ratio: 1.4;
    border-radius: var(--border-radius-m);
}

.skin-button {
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    transition: all 0.3s;
    flex-direction: column;
    justify-content: center;
}

.skin-item {
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    transition: all 0.3s;
    flex-direction: column;
    justify-content: center;
}

.skin-item.big {
    aspect-ratio: 3/3.5;
}

.contract-winning[data-rarity=placeholder],
.contract-drum-item.active[data-rarity=placeholder],
.skin-item[data-rarity=placeholder] {
    background: var(--color-rarity-placeholder-opacity);
}

.contract-winning[data-rarity=common],
.contract-drum-item.active[data-rarity=common],
.skin-item[data-rarity=common] {
    background: var(--gradient-rarity-common);
}

.contract-winning[data-rarity=uncommon],
.contract-drum-item.active[data-rarity=uncommon],
.skin-item[data-rarity=uncommon] {
    background: var(--gradient-rarity-uncommon);
}

.contract-winning[data-rarity=rare],
.contract-drum-item.active[data-rarity=rare],
.skin-item[data-rarity=rare] {
    background: var(--gradient-rarity-rare);
}

.contract-winning[data-rarity=epic],
.contract-drum-item.active[data-rarity=epic],
.skin-item[data-rarity=epic] {
    background: var(--gradient-rarity-epic);
}

.contract-winning[data-rarity=legendary],
.contract-drum-item.active[data-rarity=legendary],
.skin-item[data-rarity=legendary] {
    background: var(--gradient-rarity-legendary);
}

.contract-winning[data-rarity=arcane],
.contract-drum-item.active[data-rarity=arcane],
.skin-item[data-rarity=arcane] {
    background: var(--gradient-rarity-arcane);
}

.contract-winning[data-rarity=glove],
.contract-drum-item.active[data-rarity=glove],
.skin-item[data-rarity=glove] {
    background: var(--gradient-rarity-glove);
}
.contract-winning[data-rarity=ezknife],
.contract-drum-item.active[data-rarity=ezknife],
.skin-item[data-rarity=ezknife] {
    background: var(--gradient-rarity-ezknife);
}

.contract-winning[data-rarity=gold],
.contract-drum-item.active[data-rarity=gold] {
    background: var(--gradient-rarity-gold);
}

.contract-winning[data-rarity=nameless],
.contract-drum-item.active[data-rarity=nameless],
.skin-item[data-rarity=nameless] {
    background: var(--gradient-rarity-nameless);
}

.skin-item[data-rarity=gold] {
    background: var(--gradient-rarity-gold);
}

.skin-item::before {
    top: 0;
    left: 0;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    background-size: 40% 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.contract-winning[data-rarity=placeholder]::before,
.skin-item[data-rarity=placeholder]::before {
    background-image: url(../images/placeholder.svg);
}

.contract-winning[data-rarity=common]::before,
.skin-item[data-rarity=common]::before {
    background-image: url(../images/common.svg);
}

.contract-winning[data-rarity=uncommon]::before,
.skin-item[data-rarity=uncommon]::before {
    background-image: url(../images/uncommon.svg);
}

.contract-winning[data-rarity=rare]::before,
.skin-item[data-rarity=rare]::before {
    background-image: url(../images/rare.svg);
}

.contract-winning[data-rarity=epic]::before,
.skin-item[data-rarity=epic]::before {
    background-image: url(../images/epic.svg);
}

.contract-winning[data-rarity=legendary]::before,
.skin-item[data-rarity=legendary]::before {
    background-image: url(../images/legendary.svg);
}

.contract-winning[data-rarity=arcane]::before,
.skin-item[data-rarity=arcane]::before {
    background-image: url(../images/arcane.svg);
}

.contract-winning[data-rarity=glove]::before,
.skin-item[data-rarity=glove]::before {
    background-image: url(../images/arcane.svg);
}

.contract-winning[data-rarity=ezknife]::before,
.skin-item[data-rarity=ezknife]::before {
    background-image: url(../images/arcane.svg);
}


.contract-winning[data-rarity=gold]::before {
    background-image: url(../images/gold.svg);
}

.skin-item[data-rarity=gold]::before {
    background-image: url(../images/gold.svg);
}
.skin-item[data-rarity=nameless]::before {
    background-image: url(../images/gold.svg);
}

.skin-item::after {
    left: 50%;
    bottom: 0;
    width: 50%;
    z-index: 0;
    height: 2px;
    content: "";
    position: absolute;
    border-radius: 2px;
    transition: inherit;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.skin-item[data-rarity=placeholder]::after {
    background: var(--color-rarity-placeholder);
}

.skin-item[data-rarity=common]::after {
    background: var(--color-rarity-common);
}

.skin-item[data-rarity=uncommon]::after {
    background: var(--color-rarity-uncommon);
}

.skin-item[data-rarity=rare]::after {
    background: var(--color-rarity-rare);
}

.skin-item[data-rarity=epic]::after {
    background: var(--color-rarity-epic);
}

.skin-item[data-rarity=legendary]::after {
    background: var(--color-rarity-legendary);
}

.skin-item[data-rarity=arcane]::after {
    background: var(--color-rarity-arcane);
}

.skin-item[data-rarity=glove]::after {
    background: var(--color-rarity-glove);
}

.skin-item[data-rarity=ezknife]::after {
    background: var(--color-rarity-ezknife);
}

.skin-item[data-rarity=gold]::after {
    background: var(--color-rarity-gold);
}
.skin-item[data-rarity=nameless]::after {
    background: var(--color-rarity-nameless);
}

.skin-item.hover:hover::after {
    bottom: calc(100% - 2px);
}

.case-item-img,
.skin-case-img,
.skin-img {
    z-index: 2;
    width: 80%;
    height: 60%;
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
    transition: inherit;
}

.skin-item.hover:hover .skin-img {
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.case-item-img,
.skin-case-img {
    width: 90%;
    height: 70%;
}

.profile-content button.skin-item .skin-case-img,
.profile-content button.skin-item .skin-img {
    opacity: 0;
    transform: scale(0.5);
    -o-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
}

.profile-content button.skin-item:hover .skin-case-img, .profile-content button.skin-item:not(:hover) .skin-img {
    opacity: 1;
    transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
}

.case-item-info,
.skin-info {
    z-index: 2;
    width: 100%;
    display: flex;
    position: absolute;
    text-align: center;
    transition: inherit;
    align-items: center;
    flex-direction: column;
    bottom: var(--distance-s);
}

.case-item-info {
    bottom: 0;
    height: 100%;
    padding: var(--distance-xxl) 0 var(--distance-s) 0;
    justify-content: space-between;
}

.case-item-name,
.skin-title,
.skin-name,
.skin-cost,
.skin-chance {
    z-index: 3;
    text-align: left;
    line-height: 1.2;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    color: var(--color-white);
}

.skin-cost.gold {
    color: var(--color);
    top: calc(5 * var(--distance) / 1.5);
}

.case-item-name {
    font-weight: 700;
    font-size: 1rem;
}

.skin-title {
    color: #afafaf;
    font-weight: 500;
    font-size: 0.7rem;
    position: relative;
    text-align: center;
}

.skin-name {
    font-weight: 700;
    font-size: 0.75rem;
    position: relative;
    text-align: center;
}

.skin-item.hover:hover .skin-info {
    opacity: 0;
    bottom: 100%;
}

.skin-cost {
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    color: var(--color-green);
    top: calc(var(--distance) / 1.5);
    left: calc(var(--distance) / 1.5);
}

.skin-item.hover .skin-cost {
    top: auto;
    left: auto;
    opacity: 0;
    width: 100%;
    bottom: -20px;
    line-height: 20px;
    transition: inherit;
    text-align: center;
}

.skin-item.hover .skin-chance {
    opacity: 0;
    top: auto;
    left: auto;
    width: 100%;
    bottom: -40px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
    position: absolute;
    text-align: center;
    transition: inherit;
    color: var(--color);
}

.skin-item.hover:hover .skin-cost {
    opacity: 1;
    bottom: var(--distance);
}

.skin-item.hover:hover .skin-chance {
    opacity: 1;
    bottom: calc(100% - 20px);
}

.skin-withdraw,
.skin-sell,
.skin-lost,
.skin-sold {
    z-index: 2;
    position: absolute;
    line-height: 1.1rem;
    color: var(--color-primary);
    top: calc(var(--distance) / 1.5);
    right: calc(var(--distance) / 1.5);
    border-radius: var(--border-radius-s);
}

.skin-sell {
    padding: 5px 6px;
    font-weight: 700;
    font-size: 0.7rem;
    transition: filter 0.3s;
    text-transform: uppercase;
    background: var(--color-primary-green);
}

.skin-sell:hover {
    filter: var(--effect-hover);
}


.skin-get {
    z-index: 2;
    position: absolute;
    line-height: 1.1rem;
    color: var(--color-primary);
    top: calc(5 * var(--distance) / 1.5);
    right: calc(var(--distance) / 1.5);
    border-radius: var(--border-radius-s);
}

.skin-get {
    padding: 5px 6px;
    font-weight: 700;
    font-size: 0.7rem;
    transition: filter 0.3s;
    text-transform: uppercase;
    background: var(--color);
}

.skin-get:hover {
    filter: var(--effect-hover);
}

.skin-withdraw,
.skin-sold,
.skin-lost {
    width: 30px;
    height: 30px;
    display: flex;
    cursor: default;
    font-weight: 500;
    font-size: 1.125rem;
    align-items: center;
    justify-content: center;
}

.skin-withdraw {
    color: var(--color);
    background: var(--color-bg);
}

.skin-withdraw svg {
    fill: var(--color);
}

.skin-lost {
    color: var(--color-yellow);
    background: var(--color-yellow-bg);
}

.skin-lost svg {
    fill: var(--color-yellow) !important;
}

.skin-sold {
    color: var(--color-green);
    background: var(--color-green-bg);
}

.container {
    width: 100%;
    display: flex;
    margin: 0 auto;
    max-width: 1440px;
    position: relative;
    gap: var(--distance);
    margin-bottom: var(--distance);
    padding: 0 calc(var(--distance) * 1.5);
}

.container--small {
    max-width: 1280px !important;
}

/*
*
* VK
*
*/
#vk_community_messages {
    bottom: 60px !important;
}

/*
*
* Loading page
*
*/
.loading-page {
    width: 100%;
    display: flex;
    height: 400px;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
}

.loading-page svg {
    position: relative;
}

.loading-page svg polygon {
    position: absolute;
    animation: animateLoadingPage 1s ease infinite;
}

.loading-page svg polygon:nth-child(1) {
    --i-translate: 2.6px, 2.6px;
}

.loading-page svg polygon:nth-child(2) {
    --i-translate: -2.6px, 2.6px;
}

.loading-page svg polygon:nth-child(3) {
    --i-translate: 0, -2.6px;
}

@keyframes animateLoadingPage {
    0%, 100% {
        transform: translate(0, 0);
    }
    40%, 60% {
        transform: translate(var(--i-translate));
    }
}

/*
*
* Loading item
*
*/
.loading {
    min-width: 30px;
    min-height: 1em;
    position: relative;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.0666666667);
}

.loading::after {
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 5px;
    animation: loading 2s linear infinite;
    background: linear-gradient(-60deg, transparent 20%, rgba(255, 255, 255, 0.0431372549) 50%, transparent 80%) no-repeat;
    background-size: 200% auto;
}

@keyframes loading {
    0%, 10% {
        background-position: 200% 0%;
    }
    90%, 100% {
        background-position: -100% 0%;
    }
}

/*
*
* Event
*
*/
.event--snowflakes {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    position: fixed;
    pointer-events: none;
}

.event--snowflake {
    top: -5vh;
    width: 15px;
    height: 15px;
    left: var(--left);
    border-radius: 50%;
    position: absolute;
    transform: scale(var(--scale));
    -o-transform: scale(var(--scale));
    -ms-transform: scale(var(--scale));
    -moz-transform: scale(var(--scale));
    -webkit-transform: scale(var(--scale));
    animation: snowfall var(--duration) var(--delay) linear infinite;
}

.event--snowflake:nth-child(5n) {
    filter: blur(1px);
}

@keyframes snowfall {
    0% {
        opacity: 1;
        transform: translate3d(var(--left-ini), 0, 0) rotate(-360deg);
        -o-transform: translate3d(var(--left-ini), 0, 0) rotate(-360deg);
        -ms-transform: translate3d(var(--left-ini), 0, 0) rotate(-360deg);
        -moz-transform: translate3d(var(--left-ini), 0, 0) rotate(-360deg);
        -webkit-transform: translate3d(var(--left-ini), 0, 0) rotate(-360deg);
    }
    50% {
        opacity: 1;
    }
    90% {
        filter: blur(0px);
    }
    100% {
        opacity: 0;
        filter: blur(10px);
        transform: translate3d(var(--left-end), 110vh, 0) rotate(720deg);
        -o-transform: translate3d(var(--left-end), 110vh, 0) rotate(720deg);
        -ms-transform: translate3d(var(--left-end), 110vh, 0) rotate(720deg);
        -moz-transform: translate3d(var(--left-end), 110vh, 0) rotate(720deg);
        -webkit-transform: translate3d(var(--left-end), 110vh, 0) rotate(720deg);
    }
}

.event--leaffall {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    position: fixed;
    pointer-events: none;
}

.event--leaffall img {
    top: -5vh;
    height: 20px;
    left: var(--left);
    border-radius: 50%;
    position: absolute;
    transform: scale(var(--scale));
    -o-transform: scale(var(--scale));
    -ms-transform: scale(var(--scale));
    -moz-transform: scale(var(--scale));
    -webkit-transform: scale(var(--scale));
    animation: leaffall var(--duration) var(--delay) linear infinite;
}

@keyframes leaffall {
    0% {
        opacity: 1;
        transform: translate3d(var(--left-ini), 0, 0) rotate(var(--rotate-ini));
        -o-transform: translate3d(var(--left-ini), 0, 0) rotate(var(--rotate-ini));
        -ms-transform: translate3d(var(--left-ini), 0, 0) rotate(var(--rotate-ini));
        -moz-transform: translate3d(var(--left-ini), 0, 0) rotate(var(--rotate-ini));
        -webkit-transform: translate3d(var(--left-ini), 0, 0) rotate(var(--rotate-ini));
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
        -o-transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
        -ms-transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
        -moz-transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
        -webkit-transform: translate3d(var(--left-end), 110vh, 0) rotate(360deg);
    }
}

/*
*
* Toasts
*
*/
.toast-container {
    gap: 15px;
    top: 15px;
    right: 15px;
    display: flex;
    z-index: 100002;
    position: fixed;
    flex-direction: column;
}

.toast {
    display: flex;
    min-width: 300px;
    max-width: 400px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    transition: all 0.3s;
    gap: var(--distance-m);
    flex-direction: column;
    padding: var(--distance-xxl);
    justify-content: space-between;
    box-shadow: 0 0 24px #1d1e2a;
    animation: show-toast ease forwards;
    border-radius: var(--border-radius-xl);
    transform: translateX(calc(100% + 15px));
    -o-transform: translateX(calc(100% + 15px));
    -ms-transform: translateX(calc(100% + 15px));
    -moz-transform: translateX(calc(100% + 15px));
    -webkit-transform: translateX(calc(100% + 15px));
}

.toast.success {
    background: linear-gradient(270deg, #173b2e 0%, #2e7553 100%);
}

.toast.success .toast-progressbar {
    background: rgba(17, 34, 18, 0.3764705882);
}

.toast.success .toast-progressbar .inner {
    background: #5af08c;
}

.toast.success[data-count]::before {
    background: #274e40;
    color: var(--color-green);
}

.toast.error {
    background: linear-gradient(270deg, #472b35 0%, #b9404c 100%);
}

.toast.error .toast-progressbar {
    background: rgba(46, 28, 33, 0.3764705882);
}

.toast.error .toast-progressbar .inner {
    background: #f05a5a;
}

.toast.error[data-count]::before {
    background: #573440;
    color: var(--color-red);
}

.toast.info {
    background: linear-gradient(270deg, #992f55 0%, #0a6f86 100%);
}

.toast.info .toast-progressbar {
    background: rgba(46, 29, 34, 0.3764705882);
}

.toast.info .toast-progressbar .inner {
    background: linear-gradient(90deg, #ef2d73 0%, #08bae2 100%);
}

.toast.info[data-count]::before {
    background: #992f55;
    color: var(--color-white);
}

.toast[data-count]::before {
    top: -10px;
    left: -10px;
    width: 25px;
    height: 25px;
    display: flex;
    font-weight: 600;
    position: absolute;
    align-items: center;
    justify-content: center;
    content: attr(data-count);
    border-radius: var(--border-radius-m);
}

.toast .toast-body {
    display: flex;
    font-weight: 500;
    gap: var(--distance);
    flex-direction: column;
}

.toast .toast-progressbar .inner {
    width: 0%;
    height: 100%;
    display: flex;
    border-radius: inherit;
    animation: toast-progress-bar linear forwards;
}

.toast,
.toast .toast-progressbar .inner {
    animation-duration: 6s;
}

.toast .toast-progressbar {
    width: 100%;
    height: 5px;
    border-radius: var(--border-radius-s);
}

@keyframes show-toast {
    5%, 95% {
        transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
    }
    100% {
        transform: translate(calc(100% + 15px));
        -o-transform: translate(calc(100% + 15px));
        -ms-transform: translate(calc(100% + 15px));
        -moz-transform: translate(calc(100% + 15px));
        -webkit-transform: translate(calc(100% + 15px));
    }
}

@keyframes toast-progress-bar {
    95%, 100% {
        width: 100%;
    }
}

/*
*
* Hint
*
*/
.hint-text {
    display: none;
    z-index: 10002;
    max-width: 250px;
    font-weight: 500;
    padding: 6px 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: absolute;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.1rem;
    pointer-events: none;
    background: var(--color-dark);
    color: var(--color-gray-light);
    border-radius: var(--border-radius-s);
}

.hint-text::after {
    left: 50%;
    content: "";
    bottom: -12px;
    position: absolute;
    border: 7px solid transparent;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    border-top: 6px solid var(--color-dark);
}

/*
*
* Header
*
*/
.header-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    position: fixed;
    background: var(--color-grey-primary);
    border-bottom: solid 1px var(--color-gray-secondary);
}

.header-container {
    height: 80px;
    z-index: 100;
    display: flex;
    overflow: hidden;
    position: relative;
    transition: height 1s;
    padding: 0 var(--distance-xxl);
    justify-content: space-between;
}

.header-container .logo {
    height: 100%;
    display: block;
    cursor: pointer;
    padding: 10px 0;
}

.header-container .logo img {
    height: 100%;
    transition: filter 0.2s;
}

.header-container .logo:hover img {
    filter: var(--effect-hover-dark-medium);
}

.header-container .audio-volume-control {
    z-index: 5;
    bottom: 2px;
    right: -12px;
    display: flex;
    position: absolute;
    align-items: center;
}

.header-container .audio-volume-control .audio-volume-button {
    height: 16px;
    padding: 3px;
    display: flex;
    aspect-ratio: 1;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--color-dark);
}

.header-container .audio-volume-control .audio-volume-button:hover {
    filter: var(--effect-hover);
}

.header-container .audio-volume-button svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    fill: var(--color-gray-light);
}

.header-container .audio-volume-button:not(.on) .audio-volume-on, .header-container .audio-volume-button:not(.off) .audio-volume-off {
    display: none;
}

.header-container .audio-volume-control:not(.active) .audio-volume-slider {
    opacity: 0;
    visibility: hidden;
}

@media screen and (max-width: 600px) {
    .header-container {
        background-image: none;
    }
}

.audio-volume-slider {
    border: 0;
    outline: 0;
    opacity: 1;
    left: 20px;
    height: 10px;
    width: 100px;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    border-radius: 8px;
    -webkit-appearance: none;
    transition: all 0.3s ease;
    background: var(--color-dark);
    box-shadow: 0 4px 8px 2px var(--color-gray-secondary);
}

.audio-volume-slider::-webkit-slider-thumb {
    width: 4px;
    height: 14px;
    cursor: pointer;
    appearance: none;
    border-radius: 2px;
    -webkit-appearance: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background: var(--color-gray-light);
}

.audio-volume-slider:hover {
    filter: var(--effect-hover);
}

.audio-volume-slider::-webkit-slider-thumb:hover {
    filter: var(--effect-hover-enhanced);
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .audio-volume-slider::-webkit-slider-thumb {
        width: 16px !important;
        height: 16px !important;
        border-radius: 50% !important;
    }
}

.header-container .menu-container {
    gap: 30px;
    display: flex;
    position: relative;
}

.header-container .menu-item {
    gap: 8px;
    z-index: 2;
    height: 100%;
    display: flex;
    cursor: pointer;
    color: #6d6f87;
    align-items: center;
    transition: all 0.3s;
    justify-content: center;
}

.header-container .menu-item span {
    font-size: 1rem;
    font-weight: 700;
    transition: inherit;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text);
}

.header-container .menu-item svg {
    transition: inherit;
    fill: var(--color-disable-text);
}

.header-container .menu-item:hover span, .header-container .menu-item.active span {
    color: var(--color);
}

.header-container .menu-item:hover svg, .header-container .menu-item.active svg {
    fill: var(--color);
}

.header-container .underline {
    bottom: 0;
    height: 3px;
    display: block;
    position: absolute;
    border-radius: 3px;
    transition: all 0.3s;
    background: var(--color);
    box-shadow: 0 0 40px 2px var(--color);
}

.header-container .balance-container {
    display: flex;
    cursor: pointer;
    align-items: center;
    text-decoration: none;
}

.balance-container-cheese,
.balance-container-gold,
.balance-container-cheese .balance,
.balance-container-gold .balance {
    color: var(--color);
}

.balance-container-cheese .balance::after,
.balance-container-gold .balance::after {
    content: '';
}

.balance-container-cheese,
.balance-container-cheese .balance {
    color: var(--color-red);
}


.header-container .balance-container:hover {
    filter: var(--effect-hover-enhanced);
}

.header-container .balance-container .balance-ref {
    width: 24px;
    height: 24px;
    display: flex;
    margin-right: 8px;
    position: relative;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    background: var(--color-green);
}

.header-container .balance-container .balance-ico {
    display: flex;
    margin-right: 8px;
    position: relative;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}

.header-container .balance-container .balance-ref::before {
    width: 2px;
    height: 50%;
    content: "";
    position: absolute;
    border-radius: 2px;
    background: #000000;
}

.header-container .balance-container .balance-ref::after {
    width: 2px;
    height: 50%;
    content: "";
    position: absolute;
    border-radius: 2px;
    background: #000000;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

.header-container .header-profile-avatar {
    cursor: pointer;
    border: solid 2px var(--color-primary);
    border-radius: 9.3px;
}

.header-container .header-profile-avatar img {
    border-radius: var(--border-radius-m);
}

.header-container .signin-container {
    gap: 5px;
    display: flex;
    align-items: center;
}

.header-info {
    padding: 5px;
    height: 120px;
    display: grid;
    grid-gap: 5px;
    margin-top: 80px;
    transition: margin-top 1s;
    grid-template-columns: fit-content(100px) 52.5px 1fr;
}

.header-info .header-online {
    display: flex;
    padding: 0 24px;
    border-radius: 5px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--color-grey-primary);
}

.header-info .header-online-counter {
    font-weight: 700;
    line-height: 18px;
    font-size: 1.125rem;
    letter-spacing: 0.8px;
}

.header-info .header-online-text {
    color: #9494af;
    font-weight: 500;
    line-height: 10px;
    font-size: 0.625rem;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.header-info .header-online svg path:not(:nth-child(1)) {
    animation: animationOnline 2.5s ease-in-out infinite;
}

.header-info .header-online svg path:nth-child(3n+2) {
    animation-delay: 0.3s;
}

.header-info .header-online svg path:nth-child(3n+3) {
    animation-delay: 0.6s;
}

.header-info .header-online svg path:nth-child(3n+4) {
    animation-delay: 0.9s;
}

.header-info .header-livedrop-toggler {
    display: grid;
    grid-gap: 5px;
    grid-template-rows: 1fr 1fr;
}

.header-info .livedrop-toggle-item {
    width: 52.5px;
    display: flex;
    cursor: pointer;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    background: var(--color-grey-primary);
}

.header-info .livedrop-toggle-item:hover {
    /* filter: var(--effect-hover);*/
}

.header-info .livedrop-toggle-item.active {
    /*filter: var(--effect-press);*/
}

.header-info .livedrop-toggle-item.active svg {
    fill: var(--color);
    filter: brightness(0.9);
}

.header-info .header-livedrop {
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
}

.header-info .header-livedrop::after {
    top: 0;
    right: 0;
    width: 10%;
    content: "";
    z-index: 101;
    height: 100%;
    position: absolute;
    pointer-events: none;
    background: linear-gradient(270deg, var(--color-primary), transparent);
}

@keyframes animateLivedropNewItem {
    0% {
        width: 0;
        margin-right: 0;
    }
    100% {
        width: 140px;
        margin-right: 5px;
    }
}

.header-info .livedrop-item {
    gap: 5px;
    width: 140px;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    margin-right: 5px;
    position: relative;
    flex-direction: column;
    border-radius: var(--border-radius-s);
}

.header-info .livedrop-item.new {
    width: 0;
    margin-right: 0;
}

.header-info .livedrop-item.animate {
    animation: animateLivedropNewItem var(--duration) cubic-bezier(0.5, 0.05, 0.5, 1) forwards;
}

.header-info .livedrop-item .livedrop-skin,
.header-info .livedrop-item .livedrop-case {
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    padding: 0 20px;
    overflow: hidden;
    position: relative;
    align-items: center;
    transition: top 0.3s;
    justify-content: center;
    border-radius: var(--border-radius-s);
}

.header-info .livedrop-item:hover .livedrop-skin,
.header-info .livedrop-item:hover .livedrop-case {
    top: -115px;
}

.header-info .livedrop-item .livedrop-case img {
    z-index: 1;
    width: 100%;
    height: 100px;
    -o-object-fit: contain;
    object-fit: contain;
}

.header-info .livedrop-item span {
    z-index: 1;
    bottom: 6px;
    width: 100%;
    font-weight: 600;
    text-wrap: nowrap;
    font-size: 0.75rem;
    position: absolute;
    text-align: center;
    color: var(--color-white);
}

.header-info .livedrop-item-svg {
    width: 80%;
    height: 80%;
    filter: drop-shadow(0px 2px 10px var(--color-primary));
}

@keyframes animationOnline {
    0%, 100% {
        opacity: 1;
    }
    80% {
        opacity: 0.3;
    }
}

/*
*
* Mobile panel
*
*/
.mobile-container {
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    position: fixed;
    visibility: hidden;
    justify-content: end;
    background: rgba(20, 20, 23, 0.7019607843);
    transition: opacity 0.3s linear;
}

.mobile-container.show {
    opacity: 1;
    visibility: visible;
}

.mobile-container .mobile-element {
    width: 30%;
    min-width: 200px;
    max-width: 300px;
    transition-duration: inherit;
}

.mobile {
    width: 100%;
    height: 100%;
    padding-top: 80px;
    position: relative;
    background: #242534;
    transition: transform ease;
    transition-duration: inherit;
    transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.mobile-container.show .mobile {
    transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
}

.mobile-show {
    display: flex;
    align-items: end;
    overflow: visible;
    position: relative;
    flex-direction: column;
    transition: all 0.3s ease;
}

.mobile-show span {
    right: 25%;
    height: 2px;
    position: absolute;
    border-radius: 2px;
    transition: inherit;
    background: var(--color);
}

.mobile-show span:nth-child(1) {
    width: 50%;
    transform: translateY(-7px);
    -o-transform: translateY(-7px);
    -ms-transform: translateY(-7px);
    -moz-transform: translateY(-7px);
    -webkit-transform: translateY(-7px);
}

.mobile-show span:nth-child(2) {
    width: 45%;
}

.mobile-show span:nth-child(3) {
    width: 40%;
    transform: translateY(7px);
    -o-transform: translateY(7px);
    -ms-transform: translateY(7px);
    -moz-transform: translateY(7px);
    -webkit-transform: translateY(7px);
}

.mobile-show.active {
    align-items: center;
    justify-content: center;
}

.mobile-show.active span:nth-child(1) {
    width: 50%;
    transform: translateY(0) rotate(-45deg);
    -o-transform: translateY(0) rotate(-45deg);
    -ms-transform: translateY(0) rotate(-45deg);
    -moz-transform: translateY(0) rotate(-45deg);
    -webkit-transform: translateY(0) rotate(-45deg);
}

.mobile-show.active span:nth-child(3) {
    width: 50%;
    transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.mobile-show.active span:nth-child(2) {
    width: 0;
    height: 0;
    opacity: 0;
}

.mobile-content {
    width: 100%;
    height: 100%;
    position: relative;
}

.mobile-wrapper {
    width: 100%;
    height: 100%;
    padding: var(--distance) 0;
}

.mobile-inner {
    width: 100%;
    height: 100%;
    padding: 0 var(--distance);
}

.mobile-items {
    display: flex;
    gap: var(--distance);
    flex-direction: column;
}

.mobile-item {
    position: relative;
}

.mobile-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--distance-xxs);
}

.mobile-buttons .mobile-button {
    width: 100%;
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    gap: var(--distance-s);
    padding: var(--distance-m);
    transition: background 0.3s;
    border-radius: var(--border-radius-m);
    background: var(--color-dark-secondary);
}

.mobile-buttons .mobile-button .mobile-button-title {
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    align-items: center;
    letter-spacing: 0.5px;
    transition: color 0.3s;
    text-transform: uppercase;
    color: var(--color-gray-light);
}

.mobile-buttons .mobile-button.soon {
    filter: brightness(0.6);
}

.mobile-buttons .mobile-button.soon::after {
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    cursor: default;
    content: "Скоро";
    font-weight: 700;
    position: absolute;
    align-items: center;
    border-radius: inherit;
    justify-content: center;
    color: var(--color-white);
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.mobile-buttons .mobile-button:not(.soon):hover {
    background: var(--color-20);
}

.mobile-buttons .mobile-button:not(.soon):hover .mobile-button-title {
    color: var(--color);
}

.mobile-buttons .mobile-button:not(.soon):hover .mobile-svg {
    fill: var(--color);
    stroke: var(--color);
}

.mobile-buttons .mobile-button .mobile-svg {
    width: 30px;
    height: 30px;
    fill: var(--color-gray-light);
    stroke: var(--color-gray-light);
    transition: fill 0.3s, stroke 0.3s;
}

.mobile-buttons .mobile-button.new .mobile-button-title::before {
    content: "New";
    font-weight: 700;
    padding: 3px 4px;
    margin-right: 5px;
    letter-spacing: 0;
    font-size: 0.75rem;
    color: var(--color-green);
    border-radius: var(--border-radius-xs);
    background-color: var(--color-green-bg);
}

.mobile-footer {
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    background: var(--color-primary);
}

.settings-theme-item {
    width: 100%;
    aspect-ratio: 1;
    transition: border-radius 0.3s ease;
    border-radius: var(--border-radius-m);
}

.settings-theme-item.active {
    border-radius: 50%;
}

/*
*
* Footer
*
*/
#footer {
    background-size: 200px;
    background-repeat: repeat-x;
    background-position: bottom;
    background-color: var(--color-grey-primary);
    /*background-image: url(../images/grass.webp);*/
}

@media screen and (max-width: 640px) {
    .footer-content {
        flex-direction: column-reverse;
    }
}

.footer-contacts {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.footer-logo-link svg {
    transition: all 0.3s ease;
}

.footer-logo-link:hover svg {
    fill: #9395a8;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.footer-links a {
    display: flex;
    flex-direction: column;
    color: #786f87;
    padding: 5px 0;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
}

.footer-links a:hover {
    color: #b0a7bf;
}

.footer-commercial {
    color: #786f87;
}

.footer-commercial-links {
    display: flex;
    padding-top: 5px;
    flex-direction: column;
}

.footer-commercial-links a {
    display: flex;
    align-items: center;
    color: var(--color-light);
    gap: 5px;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1rem;
    padding: 3px 0;
}

.footer-commercial-links a:hover {
    color: #b0a7bf;
}

.footer-commercial-links a:hover svg {
    fill: #b0a7bf;
}

.footer-commercial-links a svg {
    transition: all 0.3s;
}

.footer-cooperation-button {
    background: none;
    color: var(--color);
    border: dashed 1px var(--color);
}

.footer-support-button {
    color: #febe3b;
    background: none;
    border: solid 1px #febe3b;
}

.footer-image {
    right: 0;
    bottom: 0;
    width: 30%;
    max-width: 400px;
    min-width: 200px;
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
}

.footer-stats-container {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.footer-stats {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: calc(var(--distance) * 2);
    padding: calc(var(--distance) * 3);
    border-radius: var(--border-radius-xxl) 0 0 var(--border-radius-xxl);
    background: linear-gradient(90deg, #27283d 80%, transparent 100%);
}

.footer-stats-column {
    gap: inherit;
    display: flex;
    flex-direction: column;
}

.footer-stats-item {
    display: flex;
    gap: var(--distance);
}

.footer-stats-image svg {
    width: 44px;
    height: 100%;
}

.footer-stats-counter {
    display: flex;
    flex-direction: column;
    gap: var(--distance-xxs);
}

.footer-stats-counter-number {
    font-weight: 700;
    font-size: 2.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-white);
    text-transform: uppercase;
}

.footer-stats-counter-caption {
    font-size: 0.75rem;
    color: #4e5361;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
}

.footer-socials {
    gap: 8px;
    display: flex;
    align-items: center;
}

.footer-socials-text {
    font-size: 16px;
    color: #3e4055;
    white-space: nowrap;
}

.footer-socials-link {
    text-decoration: none;
}

.footer-socials-link svg {
    transition: all 0.3s;
}

.footer-socials-link:hover svg {
    fill: #eeeffb;
}

/*
*
* Модальные окна
*
*/
.modal-container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1000;
    position: fixed;
    align-items: center;
    background: rgba(20, 20, 23, 0.5019607843);
    justify-content: center;
    padding: var(--distance);
    animation: fade-in 0.3s linear;
}

.modal-container .modal {
    overflow: hidden;
    min-width: 100px;
    min-height: 100px;
    position: relative;
    transition: all 0.3s;
    padding: calc(var(--distance) * 1.5);
    background: var(--color-dark-primary);
    border-radius: var(--border-radius-xl);
    border: solid 1px var(--color-dark-secondary);
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal .modal-content {
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.modal .load-bar {
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    position: absolute;
    background-size: 200% auto;
    animation: loading 1.5s linear infinite;
    background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.1333333333) 50%, transparent 80%) no-repeat;
}

.modal-header {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: var(--distance-m);
    justify-content: space-between;
}

.modal {
    transition: all 0.3s;
}

.modal .modal-hide {
    width: 32px;
    height: 32px;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.1s linear;
    border: solid 2px #3d405e;
}

.modal .modal-hide:before, .modal .modal-hide:after {
    content: "";
    width: 2px;
    height: 18px;
    display: flex;
    position: absolute;
    border-radius: 2px;
    transition: inherit;
    background: #3d405e;
}

.modal .modal-hide:before {
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.modal .modal-hide:after {
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.modal .modal-hide:hover {
    border-color: #dadbe2;
}

.modal .modal-hide:hover:before, .modal .modal-hide:hover:after {
    background-color: #dadbe2;
}

.modal .modal-back {
    float: left;
    width: 24px;
    height: 24px;
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    background: none;
    margin-right: 7px;
    position: relative;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transition: all 0.1s linear;
    border: solid 2px #3d405e;
}

.modal .modal-back:before {
    width: 9px;
    height: 2px;
    content: "";
    position: absolute;
    transition: inherit;
    background: #3d405e;
}

.modal .modal-back:after {
    content: "";
    width: 6px;
    height: 6px;
    position: absolute;
    transition: inherit;
    border-top: 2px solid #3d405e;
    border-left: 2px solid #3d405e;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.modal .modal-back:hover {
    border-color: #dadbe2;
}

.modal .modal-back:hover:after {
    border-color: #dadbe2;
}

.modal .modal-back:hover:before {
    background: #dadbe2;
}

.modal .modal-content {
    transition: all 0.3s;
}

.modal .error-box:not(:empty) {
    padding: 10px;
    font-size: 0.8rem;
    border-radius: 5px;
    margin-bottom: 12px;
    background: rgba(213, 28, 28, 0.2);
    border: 1px solid #d51c1c;
    animation: fade-in 0.3s linear;
}

.modal h2 {
    margin-top: 0;
}

.modal .modal-title {
    cursor: default;
    font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 1.25rem;
    text-transform: uppercase;
    color: var(--color-primary-text);
}

.modal .select-header {
    display: flex;
    position: relative;
    gap: var(--distance-s);
}

.modal .select-title {
    cursor: pointer !important;
    font-size: 1.25rem !important;
}

.modal .select-title-underline {
    left: 0;
    bottom: -5px;
    height: 2.5px;
    position: absolute;
    border-radius: 3px;
    filter: var(--effect-press);
    transition: left 0.2s, width 0.2s;
    background: var(--color-primary-text);
}

/*
*
* Выводы / Withdraw
*
*/
.modal-withdraw {
    min-width: 400px;
    max-width: 500px;
    position: relative;
}

.withdraw-select,
.withdraw-instruction {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
}

.withdraw-select:not(.active) {
    position: absolute;
    visibility: hidden;
    transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.withdraw-instruction:not(.active) {
    position: absolute;
    visibility: hidden;
    transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.modal .withdraw-scroll {
    height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    overflow-x: hidden;
}

.modal .withdraw-items {
    gap: 8px;
    width: 100%;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 475px) {
    .modal .withdraw-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal .modal-withdraw {
        min-width: 0;
    }
}

.withdraw-item.active {
    background: transparent !important;
}

.withdraw-item .skin-button {
    transition: inherit;
    border-radius: inherit;
    border: dashed 1px transparent;
}

.withdraw-item .skin-button:hover {
    border: dashed 1px var(--color-80);
}

.withdraw-item.active .skin-button {
    border: solid 1px var(--color);
    box-shadow: inset 0 0 40px 1px var(--color-80);
}

.modal .withdraw-content {
    width: 100%;
    display: flex;
    margin-top: 12px;
    gap: var(--distance-xs);
}

.modal .withdraw-sum {
    width: 40%;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

.modal .withdraw-button {
    width: 100%;
    transition: background 0.5s, color 0.5s, filter 0.3s;
}
.modal .withdraw-sum{
    width: 100%;
}

.modal .withdraw-button:disabled {
    color: #34354e;
    background: #1d1e2d;
    filter: none !important;
    cursor: default !important;
}

.withdraw-instruction {
    display: flex;
    max-width: 420px;
    flex-direction: column;
    gap: var(--distance-xxl);
}

.withdraw-instruction-back-button {
    left: 0;
    width: 30px;
    height: 30px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-s);
    background: var(--color-dark-secondary);
}

.withdraw-instruction-back-button:hover {
    filter: var(--effect-hover);
}

.withdraw-instruction-back-button svg {
    width: 100%;
    height: 100%;
}

.withdraw-instruction-header {
    position: relative;
    padding-left: 45px;
    padding-right: 30px;
}

.withdraw-instruction-desc {
    position: relative;
    padding-left: 45px;
    padding-right: 30px;
}

.withdraw-instruction-desc::before {
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    display: flex;
    flex-shrink: 0;
    cursor: default;
    font-weight: 700;
    position: absolute;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    content: attr(data-counter);
    border: solid 2px var(--color);
}

.withdraw-instruction-desc header {
    display: flex;
    line-height: 1;
    cursor: default;
    font-size: 1rem;
    font-weight: 600;
    position: relative;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
    color: var(--color);
}

.withdraw-instruction-desc p {
    font-weight: 300;
    font-size: 0.8125rem;
    letter-spacing: 0.2px;
    color: var(--color-text);
}

.withdraw-instruction-skin {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-white);
}

.withdraw-instruction-cost {
    font-weight: 600;
    white-space: nowrap;
    color: var(--color);
}

.withdraw-instruction-mail {
    cursor: pointer;
    font-weight: 500;
    color: var(--color);
}

.withdraw-instruction-mail:hover {
    filter: var(--effect-hover);
}

.withdraw-instruction-form {
    height: 45px;
    display: flex;
    margin-top: 10px;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: var(--border-radius-m);
    background: var(--color-dark-secondary);
}

.withdraw-instruction-pattern {
    width: 65px;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: left;
}

.withdraw-instruction-pattern::before {
    top: 2px;
    right: 2px;
    width: 9px;
    content: "";
    height: 10px;
    position: absolute;
    background: url(../images/pattern-icon.png) center/cover no-repeat;
}

.withdraw-instruction-pattern input {
    width: 100%;
    height: 100%;
    background: none;
    font-weight: 600;
    text-align: center;
    color: var(--color-text);
}

.withdraw-instruction-pattern input::-moz-placeholder {
    font-size: 0.825rem;
    letter-spacing: 1px;
    color: var(--color-text);
}

.withdraw-instruction-pattern input::placeholder {
    font-size: 0.825rem;
    letter-spacing: 1px;
    color: var(--color-text);
}

.withdraw-instruction-pattern input:focus::-moz-placeholder {
    color: transparent;
}

.withdraw-instruction-pattern input:focus::placeholder {
    color: transparent;
}

.withdraw-instruction-pattern input:hover {
    filter: var(--effect-hover);
}

.withdraw-instruction-button {
    height: 100%;
    display: flex;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 700;
    align-items: center;
    letter-spacing: 1px;
    justify-content: center;
    color: var(--color-text);
    border-left: solid 1px var(--color-dark-primary);
}

.withdraw-instruction-button:hover {
    filter: var(--effect-hover);
}

@media screen and (max-width: 420px) {
    .instruction-window {
        padding: 10px;
    }

    .instruction-select {
        width: 70%;
        padding-left: 10px;
    }

    .instruction-submit {
        width: 30%;
    }
}

/*
*
* Вход и регистрация / Signin and signup
*
*/
.modal-sign {
    width: 280px;
}

.modal .sign-container {
    width: 100%;
    display: flex;
    position: relative;
}

.modal .sign-container .signin,
.modal .sign-container .signup {
    right: 0;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s;
    transform: translateX(0);
    -o-transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
}

.modal .sign-container .signin:not(.active) {
    position: absolute;
    visibility: hidden;
    transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.modal .sign-container .signup:not(.active) {
    position: absolute;
    visibility: hidden;
    transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.modal .signin-form,
.modal .signup-form,
.modal .recover-form {
    width: 100%;
}

.modal .input-container {
    width: 100%;
    height: 50px;
    margin-top: 5px;
    position: relative;
    margin-bottom: 20px;
    transition: all 0.5s;
}

.modal .signup-form .input-container:last-child {
    margin-bottom: 5px !important;
}

.modal .input-container input {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    padding: 0 4px;
    font-weight: 600;
    border-radius: 0;
    position: relative;
    font-size: 1.125rem;
    background: transparent;
    color: var(--color-white);
    border-bottom: solid 2px var(--color-primary-text);
}

.modal .signup-form .input-container input {
    padding: 0 30px 0 4px;
}

.modal .input-container input:focus-visible {
    outline: none;
}

.modal .input-container label {
    top: 50%;
    left: 4px;
    font-size: 1rem;
    font-weight: 500;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: absolute;
    transition: all 0.3s;
    pointer-events: none;
    color: var(--color-primary-text);
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

.modal .input-container input:focus + label, .modal .input-container input.not-empty + label {
    top: 0px;
    font-size: 0.7em;
}

.modal .sign-container .theme-button {
    margin-top: 10px;
}

.modal .sign-desc {
    font-size: 13px;
    cursor: default;
    font-weight: 500;
    margin-top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: center;
    margin-bottom: 8px;
    color: var(--color-disable-text);
}

.modal .sign-desc button {
    font-weight: 600;
    color: var(--color-text);
}

.modal .sign-desc button:hover {
    filter: var(--effect-hover);
}

.modal .input-container input.errored {
    color: #d93025;
    border-bottom-color: #d93025;
}

.modal .error-description {
    font-size: 0.8em;
    font-weight: 600;
    text-align: center;
    color: #d51c1c !important;
}

.modal .input-container input.validated {
    color: var(--color-green);
    border-bottom-color: var(--color-green);
}

.modal .input-container [data-hint] {
    top: 50%;
    right: 0;
    width: 25px;
    height: 25px;
    display: flex;
    cursor: pointer;
    font-weight: 700;
    position: absolute;
    border-radius: 50%;
    align-items: center;
    transition: all 0.3s;
    justify-content: center;
    color: var(--color-gray-primary);
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border: solid 2px var(--color-gray-primary);
}

.modal .signup-form #question-invited {
    float: right;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--color-disable-text);
}

.modal .signup-form #question-invited:hover {
    filter: var(--effect-hover-enhanced);
}

.modal .signup-form #invite-code-container {
    display: none;
}

.modal .social-auth {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin-top: 10px;
    padding-top: 10px;
    border-color: #6c737c;
}

.modal .social-auth legend {
    padding: 0 5px;
    font-size: 0.7em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: center;
    color: var(--color-primary-text);
}

.modal .auth-links {
    gap: 5px;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: column;
}

.modal .auth-link {
    width: 100%;
    height: 50px;
    display: flex;
    cursor: pointer;
    font-weight: 700;
    align-items: center;
    border-radius: var(--border-radius-m);
    gap: 15px;
    padding: 0 20px;
    color: var(--color-white);


}

.modal .auth-link:hover {
    filter: var(--effect-hover);
}

.modal .auth-link.vk {
    background: #0077ff;
}

.modal .auth-link.google {
    background: #ffffff;
    color: var(--color-gray-primary);
}

.modal .auth-link.telegram {
    background: #29b6f6;
}

.modal .auth-link.yandex {
    background: #fc3f1d;
}

.modal .auth-link.yandex svg {
    height: 100%;
}

.modal .auth-link.steam {
    filter: grayscale(1);
    background: rgba(70, 164, 119, 0.6666666667);
    border-color: #46a477;
}

.modal .auth-link.steam:hover {
    filter: grayscale(1);
    opacity: 0.8;
}

.modal .auth-link svg {
    width: 35px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .prize-content {
    max-width: 640px;
}

.modal .prize__block {
    gap: 12px;
    width: 100%;
    display: flex;
    padding: 24px;
    align-items: center;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
    background: var(--color-dark-secondary);
}

@media screen and (max-width: 768px) {
    .modal .prize__block {
        padding: 12px 16px;
    }
}

.modal .prize__content-level {
    width: 80px;
    height: 80px;
    display: flex;
    min-width: 80px;
    font-size: 36px;
    min-height: 80px;
    font-weight: 700;
    border-radius: 50%;
    position: relative;
    color: var(--color);
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border: solid 2px var(--color);
}

.modal .prize__content-level::before {
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.1;
    position: absolute;
    border-radius: inherit;
    background: var(--color);
    box-shadow: 0 0 30px 20px var(--color);
}

.modal .prize__content-level.max {
    font-size: 24px;
}

.modal .prize__xp {
    gap: 5px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.modal .prize__xp-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.modal .prize__xp-title {
    display: flex;
    font-size: 1rem;
    color: var(--color-primary-text);
    text-align: center;
}

.modal .prize__xp-points {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal .prize__xp-min {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color);
}

.modal .prize__xp-min::after {
    content: "/";
    margin: 0 4px;
    color: var(--color-primary-text);
    font-weight: 500;
}

.modal .prize__xp-max {
    font-size: 1rem;
    color: #ff7360;
    font-weight: 500;
}

.modal .prize__xp-max::after {
    content: "XP";
    margin-left: 4px;
    color: var(--color-primary-text);
    font-weight: 500;
}

.modal .prize__xp-progress-bar {
    width: 100%;
    height: 20px;
    display: flex;
    overflow: hidden;
    border-radius: 5px;
    background: #27283d;
}

.modal .prize__xp-progress {
    height: 100%;
    display: flex;
    border-radius: 5px;
    background: var(--color);
}

.modal .prize__content-title {
    line-height: 1;
    font-size: 1rem;
    color: #ff7360;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.modal .prize__content-val {
    color: #000;
    display: flex;
    font-weight: 800;
    padding: 10px 20px;
    font-size: 1.25rem;
    align-items: center;
    justify-content: center;
    background: var(--color);
    border-radius: var(--border-radius-m);
}

.modal .prize-button {
    display: flex;
    cursor: pointer;
    font-weight: 700;
    padding: 14px 36px;
    font-size: 1.25rem;
    align-items: center;
    justify-content: center;
    color: var(--color-green);
    text-transform: uppercase;
    transition: filter 0.3s ease;
    background: var(--color-green-bg);
    border-radius: var(--border-radius-l);
}

.modal .prize-button:hover {
    filter: var(--effect-hover);
}

.modal .prize-timer {
    width: 50%;
    display: flex;
    padding: 14px 0;
    font-weight: 700;
    align-items: center;
    letter-spacing: 1px;
    justify-content: center;
    color: var(--color);
    background: var(--color-20);
    border-radius: var(--border-radius-m);
}

.modal .prize__content-desc {
    display: flex;
    color: var(--color-primary-text);
    font-size: 1rem;
    text-align: center;
}

.modal .prize__everyday {
    gap: 5px;
    height: 150px;
    display: flex;
}

.modal .prize-grand-container {
    border-radius: 20px;
    background: var(--color-20);
    box-shadow: 0 0 30px 0 var(--color-40);
}

.modal .prize-grand {
    font-size: 36px;
    color: var(--color);
    font-weight: 900;
    text-align: center;
}

.modal .prize-grand-desc {
    color: #ff6d6d;
    font-weight: 700;
    text-align: center;
    font-size: 0.825rem;
    text-transform: uppercase;
}

.modal .prize-everyday-desc div:nth-child(1) {
    font-size: 9px;
    color: var(--color-primary-text);
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 3px;
}

.modal .prize-everyday-desc div:nth-child(2) {
    font-size: 11px;
    color: #ff7360;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.modal .prize__everyday-items {
    gap: 2px;
    width: 100%;
    display: flex;
}

.modal .prize__everyday-item {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: default;
    color: var(--color-primary-text);
    font-weight: 700;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative;
    border-radius: 2px;
    font-size: 1.125rem;
    align-items: center;
    justify-content: center;
    background: var(--color-secondary);
    border-top: dashed 2px var(--color-dark);
    border-bottom: dashed 2px var(--color-dark);
}

.modal .prize__everyday-item.active {
    border: none !important;
    color: var(--color-primary);
    background: var(--color);
}

.modal .prize__everyday-item.current_day {
    animation: animateCurrentDayPrize 5s ease infinite;
}

.modal .prize__everyday-item.animate {
    animation: animateFilterPrize 1s ease forwards;
}

.modal .prize__everyday-item:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    border-left: dashed 2px var(--color-dark);
}

.modal .prize__everyday-item:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: dashed 2px var(--color-dark);
}

.modal .prize-day-progress-bar {
    width: 100%;
    height: 50px;
    max-height: 50px;
    overflow: hidden;
    border-radius: 8px;
    position: relative;
    background: var(--color-secondary);
}

.modal .prize-day-progress {
    left: 0;
    height: 100%;
    position: absolute;
    border-radius: 4px;
    animation: animateDayProgressPrize 3s ease forwards;
}

@media screen and (max-height: 850px) {
    .modal .prize-footer {
        display: none;
    }
}

/*
*
* Prize
*
*/
@keyframes animateDayProgressPrize {
    from {
        width: 0;
        background: var(--color-gray-light);
    }
    to {
        width: var(--i);
        background: var(--color-gray-primary);
    }
}

@keyframes animateCurrentDayPrize {
    0%, 100% {
        background: var(--color-secondary);
    }
    50% {
        background: var(--color-gray-primary);
    }
}

@keyframes animateFilterPrize {
    from {
        filter: brightness(1.4);
    }
    to {
        filter: brightness(1);
    }
}

.prize-day-title {
    width: 100%;
    height: 100%;
    display: flex;
    font-weight: 600;
    font-size: 0.75rem;
    position: absolute;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-text);
}

@media screen and (max-width: 750px) {
    .modal .prize-content {
        flex-direction: column;
    }

    .modal .prize__everyday-left {
        display: none;
    }

    .modal .prize__everyday-right {
        width: 100%;
        height: auto;
    }
}

/*
*
* Таймер / Timer
*
*/
.timer-text:nth-child(1)::after, .timer-text:nth-child(2)::after {
    content: ":";
    margin: 0 2px;
}

/*
*
* Страница кейсов
*
*/
.cases-page {
    width: 100%;
}

.cases-page .event {
    width: 100%;
    height: 38vw;
    display: flex;
    max-height: 600px;
    text-align: center;
    position: relative;
    align-items: center;
    gap: var(--distance-l);
    justify-content: center;
}

.cases-page .event:after {
    top: 0;
    left: 0;
    width: 100%;
    content: "";
    height: 135%;
    position: absolute;
    background-size: contain;
    background-position: top;
    background-repeat: no-repeat;
    background-image: var(--event-fon);
}

.cases-page .cases-category-title {
    font-size: 2rem;
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}

.cases-page .cases-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.cases-page .case-item {
    display: flex;
    padding: 0 5px;
    cursor: pointer;
    position: relative;
}

.cases-page .case-link {
    width: 100%;
    height: 100%;
    display: flex;
    min-height: 200px;
    position: relative;
    align-items: center;
    justify-content: end;
    text-decoration: none;
    flex-direction: column;
}

.cases-page .case-img-inner {
    width: 100%;
    bottom: -20px;
    margin-top: -20px;
    position: relative;
    transition: bottom 0.3s;
}

.cases-page .case-item:hover .case-img-inner {
    bottom: 0;
}

.cases-page .case-img {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: relative;
    -o-object-fit: contain;
    object-fit: contain;
}

.cases-page .case-img.placeholder {
    z-index: 0;
    position: absolute;
}

.cases-page .case-info {
    z-index: 1;
    --size: 35px;
    display: flex;
    align-items: center;
    gap: var(--distance-m);
    flex-direction: column;
}

.cases-page .case-costs {
    gap: 4px;
    display: flex;
    justify-content: center;
}

.cases-page .case-cost-free {
    display: flex;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 14px 20px;
    align-items: center;
    letter-spacing: 0.5px;
    justify-content: center;
    text-transform: uppercase;
    color: var(--color-green);
    background: var(--color-green-bg);
    border-radius: var(--border-radius-m);
}

.cases-page .case-cost-current,
.cases-page .case-cost-old {
    height: 40px;
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    align-items: center;
    aspect-ratio: 5/2;
    justify-content: center;
    color: var(--color-primary);
    background: var(--color);
    border-radius: 45px;
}

.cases-page .case-cost-current {
    padding-left: 5px;
}

.cases-page .case-cost-old {
    color: #f13939;
    font-weight: 600;
    border: solid 1px #f13939;
    border-radius: 0 45px 45px 0;
    background-color: rgba(0, 0, 0, 0.5019607843);
    text-decoration: line-through;
}

.cases-page .case-name {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s;
    color: var(--color-white);
}

.cases-page .case-item:hover .case-name {
    color: var(--color);
}

@media screen and (min-width: 1280px) {
    .cases-page .case-item {
        width: 20%;
    }
}

@media screen and (max-width: 1280px) {
    .cases-page .case-item {
        width: 25%;
    }
}

@media screen and (max-width: 900px) {
    .cases-page .case-item {
        width: 33.3333%;
    }
}

@media screen and (max-width: 600px) {
    .cases-page .case-item {
        width: 50%;
    }
}

@media screen and (max-width: 425px) {
    .cases-page .case-cost-current,
    .cases-page .case-cost-old {
        height: 35px;
    }
}

@media screen and (max-width: 375px) {
    .cases-page .case-cost-current,
    .cases-page .case-cost-old {
        height: 32.5px;
    }
}

/*
*
* Страница кейса
*
*/
.case {
    width: 100%;
}

.case .case-img-bg {
    left: 50%;
    top: -100px;
    opacity: 0.1;
    height: 520px;
    position: absolute;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.case .case-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--distance) * 2);
}

.case .case-header {
    display: flex;
    align-items: center;
    gap: var(--distance);
}

.case .case-back-button {
    display: flex;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text);
    transition: all 0.3s ease;
    padding: 10px 18px 10px 12px;
    background: var(--color-gray-dark);
    border-radius: var(--border-radius-m);
}

.case .case-back-button::after {
    content: "Назад";
}

.case .case-back-button:hover {
    filter: var(--effect-hover);
}

.case .case-back-button svg {
    left: 0;
    position: relative;
    transition: inherit;
}

.case .case-back-button:hover svg {
    left: -5px;
}

.case .case-name {
    font-size: 1.5rem;
}

.case .case-content {
    z-index: 1;
    height: 280px;
    display: flex;
    position: relative;
    background: var(--color-gray-dark);
    border-radius: var(--border-radius-xxl);
}

.case .case-img-container {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}

.case .case-img-container:not(:last-child) {
    border-right: solid 1px var(--color-dark-secondary);
}

.case .case-img {
    width: 100%;
    height: 120%;
    position: relative;
    -o-object-fit: contain;
    object-fit: contain;
    animation: caseImgAnimate 0.3s ease forwards;
    filter: drop-shadow(2px 4px 6px var(--color-primary));
}

.case .case-not-authorized {
    gap: 5px;
    display: flex;
    justify-content: center;
}

.case .exist-cases-in-inventory {
    width: 100%;
    line-height: 1.1;
    color: var(--color-yellow);
    background: var(--color-yellow-bg);
}

.case.open_one .exist-cases-in-inventory {
    display: none;
}

.case .case-control {
    z-index: 2;
    --size: 55px;
    display: flex;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    align-items: center;
    flex-direction: column;
    gap: var(--distance-xs);
    justify-content: center;
}

.case:not(.not_money) .case-not_money, .case:not(.timer) .case-timer-content, .case:not(.animate) .case-loading, .case:not(.winning) .case-winning {
    display: none !important;
}

.case:not(.default) .case-factor,
.case:not(.default) .exist-cases-in-inventory,
.case:not(.default) .case-open {
    display: none !important;
}

.case .case-open {
    width: 100%;
}

.case .case-open-button {
    height: 100%;
}

.case .case-open-button:not(.fast) {
    width: 100%;
}

.case .case-control .case-open-button.fast {
    height: auto;
    aspect-ratio: 1.5;
}

.case .case-factor {
    gap: 1.5px;
    display: flex;
    justify-content: center;
}

.case.open_one .case-factor {
    display: none;
}

.case .case-factor-option {
    width: 100%;
    height: 100%;
    display: flex;
    font-weight: 700;
    aspect-ratio: 1.2;
    text-align: center;
    font-size: 0.825rem;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    color: var(--color-primary-text);
    background: var(--color-dark-primary);
}

.case .case-factor-option.active:not(:disabled), .case .case-factor-option:not(:disabled):hover {
    color: var(--color-white);
    background: var(--color-dark-secondary);
}

.case .case-factor-option:disabled {
    cursor: not-allowed;
    filter: brightness(0.8) !important;
}

.case .case-factor-option:first-child {
    border-radius: var(--border-radius-m) 0 0 var(--border-radius-m) !important;
}

.case .case-factor-option:last-child {
    border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0 !important;
}

@media screen and (min-width: 768px) {
    .case .case-img-bg {
        height: 700px;
    }
}

@keyframes caseImgAnimate {
    0% {
        bottom: -20px;
        opacity: 0;
    }
    50% {
        bottom: 0;
    }
    100% {
        opacity: 1;
    }
}

@media screen and (min-width: 768px) {
    .case .case-content {
        --size-item-roulette: 240px;
    }
}

@media screen and (max-width: 768px) {
    .case .case-control {
        --size: 50px;
    }

    .case .case-back-button {
        padding: 0;
        aspect-ratio: 1;
    }

    .case .case-back-button::after {
        content: none;
    }

    .case .case-back-button svg {
        left: 0 !important;
    }

    .case .case-open-container.roulette .case-open-pointer {
        height: 20px !important;
    }

    .case .case-open-container.roulette .case-open-pointer:nth-child(1) {
        top: -5px !important;
    }

    .case .case-open-container.roulette .case-open-pointer:nth-child(2) {
        bottom: -5px !important;
    }

    .case .case-content {
        height: 200px;
        --size-item-roulette: 200px;
    }
}

@media screen and (max-width: 425px) {
    .case .case-control {
        --size: 45px;
    }

    .case .case-content {
        height: 180px;
        --size-item-roulette: 180px;
    }
}

@media screen and (max-width: 375px) {
    .case .case-control,
    .case .case-factor {
        width: 100% !important;
    }

    .case .case-winning,
    .case .case-not_money {
        width: 100%;
        flex-direction: column;
    }

    .case .case-winning * {
        width: 100%;
    }
}

.case-not_money {
    width: 100%;
}

.case-timer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--color-dark-primary);
    border-radius: var(--border-radius-l);
}

.case-timer-content .font {
    padding: 8px 16px;
    color: var(--color-gray-light);
    border-bottom: solid 1px var(--color-dark-secondary);
}

.case .case-timer {
    display: flex;
    font-size: 2rem;
    font-weight: 700;
    padding: 12px 8px;
    align-items: center;
    letter-spacing: 1px;
    justify-content: center;
    color: var(--color);
}

.case .case-control .case-loading {
    padding: 16px 0;
}

.case .case-control .case-loading span {
    min-width: 35px;
    min-height: 35px;
    border-radius: 30%;
    border: dashed 1.5px;
    animation: animationCaseLoadingRotate 3s ease infinite;
}

.case .case-control .case-loading span:nth-child(1) {
    animation-delay: 0s;
    border-color: var(--color-green);
}

.case .case-control .case-loading span:nth-child(2) {
    animation-delay: -0.25s;
    border-color: var(--color);
}

.case .case-control .case-loading span:nth-child(3) {
    animation-delay: -0.5s;
    border-color: var(--color-red);
}

.case .case-open-container {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    border-radius: inherit;
}

.case .case-open-container .case-open-wrapper {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    overflow: hidden;
    border-radius: inherit;
}

.case .case-open-container.roulette .case-open-inner {
    width: 100%;
    height: 100%;
}

.case .case-open-container.roulette .case-open-items {
    gap: 5px;
    height: 100%;
    display: flex;
    animation: rouletteAnimate var(--case-duration) cubic-bezier(0.15, 0, 0.2, 1) forwards;
}

.case .case-open-container.roulette .case-open-pointer {
    left: 50%;
    z-index: 2;
    height: 25px;
    aspect-ratio: 1;
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
}

.case .case-open-container.roulette .case-open-pointer:nth-child(1) {
    top: -7px;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.case .case-open-container.roulette .case-open-pointer:nth-child(2) {
    bottom: -7px;
    transform: translateX(-50%) rotate(180deg);
    -o-transform: translateX(-50%) rotate(180deg);
    -ms-transform: translateX(-50%) rotate(180deg);
    -moz-transform: translateX(-50%) rotate(180deg);
    -webkit-transform: translateX(-50%) rotate(180deg);
}

.case .case-open-container.drum .case-open-wrapper {
    padding: 0;
}

.case .case-open-container.drum .case-open-inner {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.case .case-open-container.drum .case-open-inner:not(:last-child) {
    border-right: solid 1px var(--color-dark-secondary);
}

.case .case-open-container.drum .case-open-items {
    width: 100%;
    gap: inherit;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    animation: drumAnimate var(--case-duration) cubic-bezier(0.15, 0, 0.2, 1) forwards;
}

.case:not(.fast) .case-open-container.drum .case-open-inner:nth-child(1) .case-open-items {
    animation-delay: -1s;
}

.case:not(.fast) .case-open-container.drum .case-open-inner:nth-child(2) .case-open-items {
    animation-delay: -0.75s;
}

.case:not(.fast) .case-open-container.drum .case-open-inner:nth-child(3) .case-open-items {
    animation-delay: -0.5s;
}

.case:not(.fast) .case-open-container.drum .case-open-inner:nth-child(4) .case-open-items {
    animation-delay: -0.25s;
}

.case:not(.fast) .case-open-container.drum .case-open-inner:nth-child(5) .case-open-items {
    animation-delay: 0s;
}

.case .case-open-container.drum .case-open-pointer {
    top: 50%;
    z-index: 1;
    height: 20px;
    aspect-ratio: 1;
    position: absolute;
    animation: 0.5s var(--case-duration) ease-in-out forwards;
}

.case .case-open-container.drum .case-open-pointer:nth-child(1) {
    left: -7px;
    animation-name: animateCaseEndPointerLeft;
    transform: translateY(-50%) rotate(270deg);
    -o-transform: translateY(-50%) rotate(270deg);
    -ms-transform: translateY(-50%) rotate(270deg);
    -moz-transform: translateY(-50%) rotate(270deg);
    -webkit-transform: translateY(-50%) rotate(270deg);
}

.case .case-open-container.drum .case-open-pointer:nth-child(2) {
    right: -7px;
    animation-name: animateCaseEndPointerRight;
    transform: translateY(-50%) rotate(90deg);
    -o-transform: translateY(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) rotate(90deg);
    -moz-transform: translateY(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) rotate(90deg);
}

.case .case-open-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-shrink: 0;
    max-width: var(--size-item-roulette);
    border-radius: var(--border-radius-m);
}

.case .case-open-item:first-child {
    border-top-left-radius: var(--border-radius-xl);
    border-bottom-left-radius: var(--border-radius-xl);
}

.case .case-open-item:last-child {
    border-top-right-radius: var(--border-radius-xl);
    border-bottom-right-radius: var(--border-radius-xl);
}

.case .case-open-container.drum .case-open-item {
    max-width: none !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

.case .case-open-container.drum .case-open-item::after {
    z-index: 0;
    content: "";
    width: 100%;
    height: 100%;
    bottom: auto;
    opacity: 0.5;
    position: absolute;
    transition: inherit;
    border-radius: 0 !important;
    filter: url(topdrop.css#blurFilterSkin);
    -webkit-filter: url(topdrop.css#blurFilterSkin);
}

.case .case-open-container.drum .case-open-item .skin-info {
    z-index: 2;
    left: auto;
    width: 100%;
    bottom: 40px;
    display: flex;
    position: absolute;
    text-align: center;
    transition: inherit;
    flex-direction: column;
}

.case .case-open-container.drum .case-open-item .skin-info .skin-title,
.case .case-open-container.drum .case-open-item .skin-info .skin-name,
.case .case-open-container.drum .case-open-item .skin-info .skin-cost {
    text-align: center;
}

.case .case-open-container.drum .case-open-item .skin-sell {
    top: auto;
    right: auto;
    bottom: 5px;
}

.case .case-open-cost {
    opacity: 0;
    z-index: 2;
    position: absolute;
    transition: opacity 0.3s;
}

.case .case-open-container.drum .case-open-item .skin-get {
    right: auto;
    top: 5px;
}

.case .case-open-cost.gold {
    color: var(--color);
    top: calc(5 * var(--distance) / 1.5);
}

.case .case-open-item .case-open-sell-button {
    opacity: 0;
}

.case .case-open-item .case-open-get-button {
    opacity: 0;
}

.case .case-open-item .case-open-sell-button:hover {
    filter: var(--effect-hover);
}

.case .case-skins-wrapper {
    background: linear-gradient(0deg, transparent, var(--color-grey-primary));
}

@keyframes animationCaseLoadingRotate {
    0%, 100% {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rouletteAnimate {
    0% {
        transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
    }
    90%, 92.5% {
        transform: translateX(var(--roulette-distance-rand));
        -o-transform: translateX(var(--roulette-distance-rand));
        -ms-transform: translateX(var(--roulette-distance-rand));
        -moz-transform: translateX(var(--roulette-distance-rand));
        -webkit-transform: translateX(var(--roulette-distance-rand));
    }
    100% {
        transform: translateX(var(--roulette-distance));
        -o-transform: translateX(var(--roulette-distance));
        -ms-transform: translateX(var(--roulette-distance));
        -moz-transform: translateX(var(--roulette-distance));
        -webkit-transform: translateX(var(--roulette-distance));
    }
}

@keyframes drumAnimate {
    0% {
        transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0);
    }
    95%, 96% {
        transform: translateY(var(--roulette-distance-rand));
        -o-transform: translateY(var(--roulette-distance-rand));
        -ms-transform: translateY(var(--roulette-distance-rand));
        -moz-transform: translateY(var(--roulette-distance-rand));
        -webkit-transform: translateY(var(--roulette-distance-rand));
    }
    100% {
        transform: translateY(var(--roulette-distance));
        -o-transform: translateY(var(--roulette-distance));
        -ms-transform: translateY(var(--roulette-distance));
        -moz-transform: translateY(var(--roulette-distance));
        -webkit-transform: translateY(var(--roulette-distance));
    }
}

@keyframes animateCaseEndPointerLeft {
    0%, 100% {
        left: -7px;
    }
    50% {
        left: -12px;
    }
}

@keyframes animateCaseEndPointerRight {
    0%, 100% {
        right: -7px;
    }
    50% {
        right: -12px;
    }
}

@media screen and (max-width: 768px) {
    .case .case-open-container.drum .case-open-item::after {
        opacity: 0.3;
        filter: none !important;
    }
}

@media screen and (max-width: 992px) {
    .mobile,
    #root {
        padding-bottom: 60px;
    }

    .header-container .menu-container {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        z-index: 10000;
        position: fixed;
        overflow: hidden;
        transition: height 1s;
        justify-content: space-evenly;
        background: var(--color-grey-primary);
        border-top: 1px solid var(--color-gray-secondary);
    }
}

@media screen and (max-width: 640px) {
    .header-container .menu-item {
        padding: 0;
        flex-direction: column;
    }

    .header-container .menu-item span {
        font-size: 0.6rem;
    }

    .header-online {
        display: none !important;
    }

    .header-info {
        grid-template-columns: 52.5px 1fr;
    }

    .footer-wrapper {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .footer-stats-container {
        gap: 20px;
        align-items: center;
    }

    .footer-stats {
        padding: 20px;
        gap: 10px;
        background: #27283d;
        border-radius: 10px;
        justify-content: space-around;
    }

    .footer-stats-column,
    .footer-stats-item {
        gap: 10px;
    }

    .footer-stats-image svg {
        width: 30px;
    }

    .footer-stats-counter-number {
        font-size: 2rem;
    }

    .footer-stats-counter-caption {
        font-size: 0.75rem;
    }

    .footer-image,
    .footer-logo-wrapper {
        display: none;
    }
}

/* ERROR */
.container--error {
    max-width: 400px;
}

/* Profile */
.profile-header-content {
    flex-direction: column;
    justify-content: space-between;
}

.profile-header-avatar {
    height: 80px;
    cursor: pointer;
    position: relative;
    border-radius: 25px;
    border: solid 2px var(--color-primary);
}

.profile-header-avatar img {
    border-radius: 23.2px;
}

.profile-header-avatars-сontainer {
    opacity: 0;
    z-index: 10;
    padding: 8px;
    display: flex;
    visibility: hidden;
    position: absolute;
    padding-right: 6px;
    touch-action: none;
    border-radius: 12px;
    top: calc(100% + 4px);
    background-color: var(--color-gray);
    transition: opacity 0.3s, visibility 0.3s;
}

.profile-header-avatars-сontainer.active {
    opacity: 1;
    visibility: visible;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll {
    height: 200px;
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select {
    gap: 6px;
    display: grid;
    margin-right: 3px;
    grid-template-columns: repeat(4, 1fr);
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option {
    aspect-ratio: 1;
    position: relative;
    transition: filter 0.3s, border-radius 0.3s, border-width 0.3s;
    height: calc(var(--size) * 1.5);
    background-color: var(--color-dark);
    border-radius: var(--border-radius-s);
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option:hover:not(.active) {
    filter: var(--effect-hover-dark);
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option.active {
    border-radius: 50%;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option.active .profile-header-avatars-button {
    cursor: default;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option .profile-header-avatars-button {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option .profile-header-avatars-button label {
    width: 100%;
    height: 100%;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.profile-header-avatars-сontainer .profile-header-avatars-scroll .profile-header-avatars-select .profile-header-avatars-option .profile-header-avatars-button img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.profile-nikname span {
    background: linear-gradient(0deg, #fff8ee, #ada28d 161.29%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.profile-header .invited-by {
    display: grid;
    grid-template-columns: 1fr 30px;
    padding: 0 5px 0 10px;
    gap: 5px;
    align-items: center;
}

.profile-header .invited-by img {
    width: 28px;
    height: 28px;
    border-radius: 5px;
}

.profile-header .invited-by .caption {
    font-size: 0.7rem;
    line-height: 0.9rem;
    opacity: 0.7;
}

.profile-favorite,
.profile-topdrop {
    width: 100%;
    min-width: 200px;
    min-height: 200px;
}

.profile-favorite {
    border-top-right-radius: var(--border-radius-xs) !important;
    border-bottom-right-radius: var(--border-radius-xs) !important;
}

.profile-topdrop {
    height: auto !important;
    border-top-left-radius: var(--border-radius-xs) !important;
    border-bottom-left-radius: var(--border-radius-xs) !important;
}

.profile-favorite-img,
.profile-topdrop-img {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain;
    align-items: center;
    justify-content: center;
}

.profile-favorite-img {
    bottom: -25px;
}

.profile-favorite-img-bg {
    filter: blur(50px);
}

.profile-topdrop-img {
    top: 50%;
    left: 50%;
    max-width: 60%;
    max-height: 60%;
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.profile-tabs {
    width: 100%;
    flex-direction: column;
}

.profile-tabs-buttons {
    gap: inherit;
    width: 100%;
    display: flex;
}

.profile-tabs-button {
    width: 100%;
}

.profile-tabs-button.active {
    filter: var(--effect-press) !important;
}

.profile-content {
    gap: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-empty-alert {
    display: flex;
    font-weight: 700;
    padding: 50px 40px;
    font-size: 1.125rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    background: var(--color-gray-secondary);
}

.profile-content-items {
    display: grid;
}

.profile-content-items.contracts {
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 524px) {
    .profile-content-items.skins {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1024px) {
    .profile-header-content {
        flex-direction: row;
    }

    .profile-header-buttons {
        flex-direction: column-reverse;
    }

    .profile-header-buttons button span {
        display: none;
    }

    .profile-favorite,
    .profile-topdrop {
        min-width: 0 !important;
        max-height: 250px !important;
    }

    .profile-tabs {
        flex-direction: column;
    }

    .profile-tabs-button:nth-child(odd):last-child {
        grid-column: span 2;
    }

    .profile-tabs-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-tabs-buttons.component .profile-tabs-button {
        width: 100%;
    }

    .profile-content-items.contracts {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile-header {
        flex-direction: column;
    }
}

.profile-contract-item {
    gap: 4px;
    display: grid;
    position: relative;
    grid-template-rows: 3fr 1.1fr;
}

.profile-contract-item-secondary {
    width: 100%;
    height: 100%;
    display: grid;
    gap: calc(var(--distance) / 4);
    grid-template-columns: repeat(3, 1fr);
}

.profile-contract-skin {
    height: 100%;
    aspect-ratio: 1.1;
    border-radius: calc(var(--border-radius) / 2);
}

.profile-contract-info-container {
    display: flex;
    gap: var(--distance-xxs);
}

.profile-contract-info {
    width: 100%;
    height: 100%;
    display: flex;
    border-radius: 2px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--color-gray);
}

.profile-contract-info:first-child {
    border-bottom-left-radius: var(--border-radius-m);
}

.profile-contract-info:last-child {
    border-bottom-right-radius: var(--border-radius-m);
}

.profile-contract-info-result.win::before {
    content: "Выигрыш";
    color: var(--color-green);
}

.profile-contract-info-result.fail::before {
    content: "Проигрыш";
    color: var(--color-red);
}

.profile-withdrawal-item {
    gap: 1px;
    display: flex;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
}

.profile-withdrawal-info {
    width: 100%;
    height: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--distance-s);
    background: var(--color-gray);
    border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
}

.profile-withdrawal-desc::before,
.profile-withdrawal-date::before,
.profile-withdrawal-time::before,
.profile-withdrawal-sum::before,
.profile-withdrawal-pattern::before {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-gray-light);
}

.profile-withdrawal-desc,
.profile-withdrawal-date,
.profile-withdrawal-time,
.profile-withdrawal-sum,
.profile-withdrawal-pattern {
    gap: 1px;
    width: 100%;
    padding: 8px;
    display: flex;
    text-align: center;
    flex-direction: column;
    background: var(--color-dark);
    border-radius: var(--border-radius-s);
}

.profile-withdrawal-desc {
    height: 100%;
    font-weight: 500;
}

.profile-withdrawal-desc::before {
    content: "Причина";
    margin-bottom: var(--distance-xs);
}

.profile-withdrawal-sum {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color);
}

.profile-withdrawal-sum::before {
    content: "Сумма";
}

.profile-withdrawal-date {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
}

.profile-withdrawal-date::before {
    content: "Дата выставления";
}

.profile-withdrawal-time {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
}

.profile-withdrawal-time::before {
    content: "Время вывода";
}

.profile-withdrawal-pattern {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
}

.profile-withdrawal-pattern::before {
    content: "Паттерн";
}

.profile-withdrawal-status {
    width: 100%;
    display: flex;
    min-height: 50px;
    position: relative;
    align-items: center;
    justify-content: center;
    border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);
}

.profile-withdrawal-status.withdrawing {
    background-color: var(--color-yellow-bg);
}

.profile-withdrawal-status.withdrawn {
    background-color: var(--color-green-bg);
}

.profile-withdrawal-status.error {
    background-color: var(--color-red-bg);
}

.profile-withdrawal-status::before {
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    overflow: hidden;
    text-align: center;
    position: absolute;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-transform: uppercase;
    padding: 0 var(--distance-l);
}

.profile-withdrawal-status.withdrawing::before {
    content: "Выводится";
    color: var(--color-yellow);
    animation: withdrawingAnimate 3s linear infinite;
}

.profile-withdrawal-status.withdrawn::before {
    content: "Выведено";
    color: var(--color-green);
}

.profile-withdrawal-status.error::before {
    color: var(--color-red);
    content: "Ошибка вывода";
}

@keyframes withdrawingAnimate {
    0%, 100% {
        content: "Выводится";
    }
    25% {
        content: "Выводится.";
    }
    50% {
        content: "Выводится..";
    }
    75% {
        content: "Выводится...";
    }
}

.profile-content-items.upgrades {
    grid-template-columns: repeat(3, 1fr);
}

@media screen and (max-width: 800px) {
    .profile-content-items.upgrades {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .profile-content-items.upgrades {
        grid-template-columns: repeat(1, 1fr);
    }
}

.profile-upgrade-item {
    gap: 2px;
    display: grid;
    position: relative;
    aspect-ratio: 3/2;
    grid-template-rows: 3fr 1fr;
}

.profile-upgrade-skin {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 2px;
}

.profile-upgrade-skin:first-child {
    border-top-left-radius: var(--border-radius-m);
}

.profile-upgrade-skin:last-child {
    border-top-right-radius: var(--border-radius-m);
}

.profile-upgrade-info-container {
    width: 100%;
    gap: inherit;
    display: flex;
}

.profile-upgrade-info {
    width: 100%;
    height: 100%;
    gap: inherit;
    display: flex;
    border-radius: 2px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--color-gray);
}

.profile-upgrade-info.win {
    background-color: var(--color-green-bg);
}

.profile-upgrade-info.fail {
    background-color: var(--color-red-bg);
}

.profile-upgrade-info:first-child {
    border-bottom-left-radius: var(--border-radius-m);
}

.profile-upgrade-info:last-child {
    border-bottom-right-radius: var(--border-radius-m);
}

.win .profile-upgrade-info-result::before {
    content: "Выигрыш";
    color: var(--color-green);
}

.fail .profile-upgrade-info-result::before {
    content: "Проигрыш";
    color: var(--color-red);
}

/*
*
* Pay
*
*/
.modal .modal-refill {
    width: 600px;
}

.modal .refill-window-content {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.modal .refill-payments-scroll {
    height: 280px;
    overflow-y: auto;
    padding-right: 8px;
    overflow-x: hidden;
    margin-bottom: 10px;
}

.modal .refill-payments {
    gap: 8px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.modal .refill-payment {
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    aspect-ratio: 4/2.8;
    flex-direction: column;
    gap: var(--distance-xs);
    justify-content: center;
    transition: filter 0.3s ease;
    border-radius: var(--border-radius-m);
    background-color: var(--color-dark-secondary);
}

.modal .refill-payment[data-error] {
    cursor: default;
    filter: opacity(0.2);
}

.modal .refill-payment[data-error] .refill-payment-icon {
    filter: grayscale(1);
}

.modal .refill-payment:not([data-error]):hover {
    filter: var(--effect-hover);
}

.modal .refill-payment.active:not([data-error]) {
    filter: var(--effect-press);
}

.modal .refill-payment .refill-payment-icon {
    width: 70%;
    height: 50%;
    -o-object-fit: contain;
    object-fit: contain;
}

.modal .refill-payment .refill-payment-label {
    bottom: 5px;
    width: 100%;
    padding: 4px 6px;
    font-weight: 700;
    font-size: 0.75rem;
    text-align: center;
    position: absolute;
    color: var(--color-text);
    text-transform: uppercase;
    border-radius: var(--border-radius-s);
}

.modal .refill-payment .refill-payment-label.refill-payment-min {
    text-transform: lowercase;
}

.modal .refill-payment .refill-payment-label.refill-payment-min::before {
    content: "от";
    margin-right: 3px;
}

.modal .refill-payment .refill-payment-label.refill-payment-min::after {
    margin-left: 3px;
    content: "₽";
}

.modal .refill-payment .refill-payment-bonus {
    top: 5px;
    right: 5px;
    padding: 4px 6px;
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 600;
    font-size: 0.75rem;
    position: absolute;
    color: var(--color-green);
    text-transform: uppercase;
    background: var(--color-green-bg);
    border-radius: var(--border-radius-s);
}

.modal .refill-payment .refill-payment-bonus::before {
    content: "+";
}

.modal .refill-payment .refill-payment-bonus::after {
    content: "%";
}

.modal .refill-content {
    gap: 6px;
    display: flex;
    flex-direction: column;
}

.modal .refill-input-promo {
    width: 100%;
    height: 50px;
    display: flex;
    padding: 0 20px;
    font-size: 1rem;
    color: #808199;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    align-items: center;
    background: var(--color-dark-secondary);
    justify-content: center;
}

.modal .refill-input-promo:focus::-moz-placeholder {
    color: transparent;
}

.modal .refill-input-promo:focus::placeholder {
    color: transparent;
}

.modal .refill-input-promo::-moz-placeholder {
    color: #808199;
}

.modal .refill-input-promo::placeholder {
    color: #808199;
}

.modal .refill-amount-input::-moz-placeholder {
    color: #808199;
}

.modal .refill-amount-input::placeholder {
    color: #808199;
}

.modal .refill-bonus {
    width: 100%;
    color: #94d972;
    font-weight: 500;
    padding: 12px 16px;
    text-align: center;
    border-radius: 8px;
    font-size: 0.825rem;
    background: rgba(176, 255, 171, 0.1019607843);
}

.modal .refill-pay-important:hover {
    filter: var(--effect-hover-dark-small);
}

.refill-bonus-hint {
    top: 50%;
    right: 10px;
    height: 30px;
    display: none;
    cursor: default;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    position: absolute;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    border-radius: var(--border-radius-s);
}

.refill-bonus-hint.status-good {
    padding: 0 8px;
    font-size: 0.875rem;
    color: var(--color-green);
    background: var(--color-green-bg);
}

.refill-bonus-hint.status-bad {
    aspect-ratio: 1;
    font-size: 1.125rem;
    color: var(--color-red);
    background: var(--color-red-bg);
}

.refill-content .promo-type {
    width: 100%;
    display: flex;
    position: relative;
    text-align: center;
    align-items: center;
    gap: var(--distance-m);
}

.refill-content .promo-type:not(.only-promo) .promo-type-select {
    cursor: pointer;
    display: flex;
    white-space: nowrap;
    background: var(--color-dark-secondary);
    flex-direction: column;
    border-radius: 5px;
    border: 1px solid transparent;
    position: relative;
}

.refill-content .promo-type:not(.only-promo) .promo-type-select-invite {
    padding: 10px;
}

.refill-content .promo-type:not(.only-promo) .promo-type-select.active {
    border: 1px solid var(--color);
    background-color: var(--color-20);
}

.refill-content .promo-type:not(.only-promo) .promo-type-select:not(.active) {
    opacity: 0.6;
}

.refill-content .promo-type:not(.only-promo) .promo-type-select-promo {
    width: 100%;
}

.refill-content .promo-type:not(.only-promo) .promo-type-select-promo input {
    width: 100%;
    cursor: pointer;
    background: transparent;
}

.refill-content .promo-type.only-promo {
    display: block;
}

.modal .refill-bonus.false {
    color: #d97272;
    background: rgba(255, 171, 171, 0.1019607843);
}

.modal .refill-bonus.animate {
    animation: refillBonusAnimate 1s ease forwards;
}

.modal .refill-bonus:empty {
    display: none;
}

.modal .refill-payment-info {
    width: 100%;
    gap: inherit;
    height: 50px;
    display: flex;
    position: relative;
}

.modal .refill-amount-wrapper {
    gap: 2px;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    transition: width 0.3s ease-in-out;
}

.modal .refill-amount-wrapper:not(.active) {
    width: 0%;
    position: absolute;
}

.modal .refill-input {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0 20px;
    color: #d4d4d4;
    font-weight: 600;
    font-size: 1.125rem;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    background: var(--color-dark-secondary);
}

.modal .refill-input::-moz-placeholder {
    color: #808199;
}

.modal .refill-input::placeholder {
    color: #808199;
}

.modal .refill-amount-wrapper::before {
    content: "₽";
    height: 100%;
    display: flex;
    min-width: 50px;
    color: #808199;
    font-weight: 600;
    font-size: 1.125rem;
    align-items: center;
    background: var(--color-dark-secondary);
    justify-content: center;
    border-radius: 8px 0 0 8px;
}

.modal .refill-button {
    width: 100%;
    height: 100%;
}

.modal .refill-button.active:hover {
    filter: var(--effect-hover);
}

@keyframes refillBonusAnimate {
    from {
        filter: brightness(1.2);
    }
    to {
        filter: brightness(1);
    }
}

.refill-button:not(.active) {
    cursor: default;
    color: #34354e;
    background: #1d1e2d;
    filter: none !important;
}

@media screen and (max-width: 1000px) {
    .modal .modal-refill {
        width: 500px;
    }

    .modal .refill-payments {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .modal .modal-refill {
        width: 100%;
    }

    .modal .refill-payments {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal .refill-input {
        padding: 0 10px;
    }
}

@media screen and (max-width: 425px) {
    .modal .refill-payments {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*
*
* Апгейды / Upgrades
*
*/
.upgrade-content {
    gap: 30px;
    width: 100%;
    display: flex;
    padding-top: 70px;
    padding-bottom: 20px;
    flex-direction: column;
}

.upgrade-content-gun {
    width: 100%;
    height: 100%;
    display: flex;
    padding: inherit;
    position: absolute;
    pointer-events: none;
    justify-content: center;
}

.upgrade {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    gap: var(--distance);
    flex-direction: column;
    justify-content: center;
}

.upgrade .upgrade-gun {
    width: 250px;
    margin: 0 20%;
    display: flex;
    flex-shrink: 0;
    min-height: 300px;
    position: relative;
    align-items: center;
    justify-content: center;
}

.upgrade .upgrade-gun::before {
    top: 0;
    width: 100%;
    content: "";
    height: 100%;
    position: absolute;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: bottom 0 left 50%;
    background-image: url(../images/platform.png);
    filter: drop-shadow(0 10px 10px var(--color-primary)) drop-shadow(0 -15px 15px #27208a);
}

.upgrade.win .upgrade-gun::before {
    filter: hue-rotate(270deg) drop-shadow(0 10px 10px var(--color-primary)) drop-shadow(0 -15px 15px rgba(32, 138, 43, 0.5019607843));
}

.upgrade.fail .upgrade-gun::before {
    filter: hue-rotate(130deg) drop-shadow(0 10px 10px var(--color-primary)) drop-shadow(0 -15px 15px #8a2020);
}

.upgrade.fail .upgrade-gun-img {
    filter: hue-rotate(130deg);
}

.upgrade-gun-img {
    top: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    -o-object-fit: contain;
    object-fit: contain;
    animation: upgradeImg 5s ease-in-out infinite;
}

@media screen and (max-width: 1000px) {
    .upgrade-content-gun {
        padding: 0;
        position: relative;
    }

    .upgrade-gun {
        margin: 0 !important;
    }
}

@keyframes upgradeImg {
    0%, 100% {
        top: -10px;
    }
    50% {
        top: 10px;
    }
}

.upgrade-roulette {
    z-index: 2;
    width: 324px;
    height: 324px;
    display: flex;
    flex-shrink: 0;
    position: relative;
    align-items: center;
    justify-content: center;
}

#upgrade-circle {
    stroke: var(--color);
    transform-origin: 232px 232px 0;
    transition: stroke-dasharray 0.5s;
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
}

.upgrade-roulette-circle {
    stroke: var(--color);
    transition: stroke-dasharray 0.5s;
}

.upgrade.win #upgrade-circle,
.upgrade.win .upgrade-roulette-circle {
    stroke: var(--color-green) !important;
}

.upgrade.fail #upgrade-circle,
.upgrade.fail .upgrade-roulette-circle {
    stroke: var(--color-red) !important;
}

.upgrade .chance-circle-pointer {
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    pointer-events: none;
    align-items: flex-start;
    justify-content: center;
}

.upgrade .chance-circle-pointer svg {
    top: -25px;
    position: relative;
}

.chance-circle-pointer svg path:nth-child(1) {
    fill: var(--color);
}

.upgrade.win .chance-circle-pointer svg path:nth-child(1) {
    fill: var(--color-green) !important;
}

.upgrade.fail .chance-circle-pointer svg path:nth-child(1) {
    fill: var(--color-red) !important;
}

.upgrade.animate .chance-circle-pointer {
    animation: upgradeRotate var(--duration-upgrade) cubic-bezier(0.01, 0.05, 0.1, 1) forwards;
}

.upgrade.winning .chance-circle-pointer {
    transform: rotate(calc(3600deg + var(--upgrade-rotate)));
    -o-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
    -ms-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
    -moz-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
    -webkit-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
}

@keyframes upgradeRotate {
    from {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(calc(3600deg + var(--upgrade-rotate)));
        -o-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
        -ms-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
        -moz-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
        -webkit-transform: rotate(calc(3600deg + var(--upgrade-rotate)));
    }
}

.upgrade-info-value {
    display: flex;
    font-size: 48px;
    position: absolute;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.upgrade-info-chance {
    gap: 2px;
    display: flex;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    flex-direction: column;
    text-overflow: ellipsis;
    color: var(--color);
    text-transform: uppercase;
}

.upgrade.win .upgrade-info-chance, .upgrade.fail .upgrade-info-chance {
    display: none !important;
}

.upgrade .upgrade-info-chance::after {
    font-size: 0.42em;
    color: var(--color-primary-text);
    font-weight: 700;
    content: "Шанс удачи";
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.upgrade.win .upgrade-info-result::before, .upgrade.fail .upgrade-info-result::before {
    display: flex;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.upgrade.win .upgrade-info-result::before {
    content: "Win";
    color: var(--color-green);
}

.upgrade.fail .upgrade-info-result::before {
    content: "Fail";
    color: var(--color-red);
}

.upgrade__content-bottom {
    width: 100%;
    display: flex;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
}

.upgrade-button {
    width: 162px;
}

.upgrade-button:disabled {
    filter: none;
    cursor: default;
    background: var(--color-dark);
    color: var(--color-disable-text);
}

.upgrade:not(.active) .upgrade-button {
    filter: none;
    cursor: default;
    background: var(--color-dark);
    color: var(--color-disable-text);
}

.upgrade-skins-scroll {
    width: 100%;
    overflow-y: auto;
    max-height: 600px;
    padding-left: var(--distance);
    margin-right: calc(var(--distance) / 2);
    padding-right: calc(var(--distance) / 2);
}

.upgrade-items {
    gap: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.upgrade-items .skin-item {
    cursor: pointer;
}

.upgrade-items .skin-button {
    width: 100%;
    height: 100%;
    transition: all 0.5s;
    border-radius: inherit;
    border: dashed 1px transparent;
}

.upgrade-items .skin-item.active, .upgrade-items .skin-item:hover {
    background-image: none;
    box-shadow: inset 0 0 50px 10px var(--color-40);
}

.upgrade-items .skin-item.active {
    filter: var(--effect-hover);
    box-shadow: inset 0 0 50px 20px var(--color-40);
}

.upgrade-items .skin-item.active .skin-button {
    border-color: var(--color);
}

.upgrade-items .skin-item:hover .skin-button {
    border-color: var(--color);
}

.upgrade-items .skin-item.active .skin-button {
    border-style: solid;
}

.upgrade-items .skin-item.active::before {
    background-image: url(../images/gold.svg);
}

.upgrade-items .skin-item:hover::before {
    background-image: url(../images/gold.svg);
}

.upgrade-items .skin-item.active::after, .upgrade-items .skin-item:hover::after {
    bottom: -2px;
    box-shadow: 0 0 0 transparent;
}

.upgrade-footer-item-header {
    gap: 5px;
    width: 100%;
    height: 60px;
    display: flex;
    padding: 0 25px;
    margin-bottom: 2px;
    align-items: center;
    border-radius: 10px 10px 0 0;
}

.upgrade-footer-item-content {
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: var(--distance);
    border-radius: 0 0 10px 10px;
}

.upgrade-empty-alert {
    gap: 25px;
    display: flex;
    padding: 30px;
    height: -moz-fit-content;
    height: fit-content;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.upgrade-empty-desc {
    font-size: 1rem;
    color: #464757;
    font-weight: 500;
    text-align: center;
}

.upgrade-empty-img {
    width: 200px;
}

@media screen and (min-width: 1600px) {
    .upgrade-items {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1600px) {
    .upgrade-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1200px) {
    .upgrade-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 900px) {
    .upgrade-items {
        gap: 5px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .chance-circle-pointer {
        top: -10px;
    }

    .chance-circle-pointer svg {
        width: 20px;
    }

    .upgrade-roulette {
        width: 240px;
        height: 240px;
    }

    .upgrade-gun {
        width: 50% !important;
        min-height: 60vw !important;
    }

    .upgrade__chance-circle-pointer-svg {
        height: 60px;
    }

    .upgrade-info-value {
        font-size: 32px;
    }

    .upgrade-footer {
        display: flex;
        flex-direction: column;
    }

    .upgrade-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .upgrade-skins-scroll {
        max-height: 300px;
    }
}

/*
*
* Контракты / Contracts
*
*/
.contract {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.contract-drum-wrapper {
    margin-top: 40px;
}

.contract-drum-container {
    padding: 5px;
    margin: -5px;
    border-radius: 50%;
    outline: solid 10px var(--color-secondary);
    border: solid 20px var(--color-dark);
    box-shadow: 0px 0px 20px 20px #151520;
}

.contract-drum {
    width: 800px;
    height: 800px;
    display: flex;
    border-radius: 50%;
    position: relative;
    align-items: center;
    justify-content: center;
    background: var(--color-dark-primary);
    outline: dashed 1px var(--color-light);
}

@media screen and (max-width: 750px) {
    .contract-drum {
        width: 400px;
        height: 400px;
    }

    .contract-winning-sell,
    .contract-winning-again,
    .contract-info-item {
        border-radius: 4px !important;
        padding: 7px 8px !important;
    }

    .button.contract-info-item {
        border-radius: 6px !important;
        padding: 12px 14px !important;
    }

    .contract-info-container {
        --size: 30px;
    }

    .contract-paint-style {
        height: 40% !important;
        padding: 6px !important;
        gap: var(--distance-xxs) !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .contract-button {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
    }

    .contract-paint-clear svg {
        width: 16px !important;
    }
}

.contract-drum-item-container {
    width: 20%;
    height: 20%;
    display: flex;
    border-radius: 50%;
    position: absolute;
    align-items: center;
    justify-content: center;
}

.contract:not(.default) .contract-drum-item-container,
.contract:not(.default) .contract-paint-container {
    display: none !important;
}

.contract:not(.animate) .contract-drum-result, .contract:not(.default) .contract-info {
    display: none !important;
}

.contract:not(.winning) .contract-winning-container,
.contract:not(.winning) .contract-winning-svg {
    display: none !important;
}

.contract:not(.result) .contract-skin-result {
    display: none !important;
}

.contract-drum-item {
    width: 75%;
    height: 75%;
    color: #fff;
    display: flex;
    cursor: default;
    border-radius: 50%;
    position: relative;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--color-light);
    background-color: var(--color-dark-secondary);
    animation: contractDrumItemAnimate 10s var(--i) ease-in-out infinite;
}

.contract-drum-item.active {
    cursor: pointer;
}

.contract-drum-item.active::before {
    width: 60%;
    opacity: 0;
    height: 3px;
    content: "";
    border-radius: 2px;
    position: absolute;
    transition: opacity 0.3s ease;
    background: var(--color-white);
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    box-shadow: 0 0 10px 1px var(--color-primary);
}

.contract-drum-item.active::after {
    width: 60%;
    opacity: 0;
    height: 3px;
    content: "";
    border-radius: 2px;
    position: absolute;
    transition: opacity 0.3s ease;
    background: var(--color-white);
    box-shadow: 0 0 10px 1px var(--color-primary);
    transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.contract-drum-item.active:hover::before, .contract-drum-item.active:hover::after {
    opacity: 1;
}

.contract-drum-item .contract-skin-img {
    width: 95%;
    height: 100%;
    display: flex;
    -o-object-fit: contain;
    object-fit: contain;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 5px var(--color-primary));
}

.contract-drum-item:not(.active) .contract-skin-img {
    display: none;
}

.contract-drum-item:not(.active)::before {
    font-weight: 700;
    font-size: 1.125rem;
    content: attr(data-contract);
}

.contract-info-container {
    width: 60%;
    height: 60%;
    overflow: hidden;
    position: absolute;
    border-radius: inherit;
    background: var(--color-primary);
    border: dashed 1px var(--color-light);
}

#contract-paint {
    width: 100%;
    cursor: cell;
    height: 100%;
    touch-action: none;
    border-radius: 500px 500px 0 0;
}

.contract-paint-style {
    bottom: 0;
    left: 50%;
    width: 90%;
    height: 30%;
    padding: 12px;
    display: flex;
    position: absolute;
    align-items: start;
    gap: var(--distance-xs);
    justify-content: center;
    border-radius: 60px 60px 0 0;
    transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    border: dashed 2px var(--color-dark);
    background: var(--color-dark-primary);
    animation: paintStyleAnimate 3s ease-in-out forwards;
}

@keyframes paintStyleAnimate {
    0% {
        bottom: -40%;
    }
    100% {
        bottom: 0;
    }
}

.contract-paint-clear {
    display: flex;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    background: var(--color-red-bg);
    border-radius: var(--border-radius-m);
}

.contract-paint-color {
    cursor: pointer;
    overflow: hidden;
    width: var(--size);
    position: relative;
    height: var(--size);
    display: inline-block;
}

.contract-paint-color input[type=color] {
    border: none;
    outline: none;
    overflow: hidden;
    -moz-appearance: none;
    appearance: none;
    width: var(--size);
    height: var(--size);
    -webkit-appearance: none;
}

.contract-paint-color input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.contract-paint-color input[type=color]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.contract-paint-color input[type=color]::-moz-focus-inner {
    padding: 0;
    border: none;
}

.contract-paint-color input[type=color]::-moz-color-swatch {
    border: none;
    height: 140px;
}

/* -webkit */
/* firefox */
.contract.winning .contract-drum {
    padding: 0px !important;
}

.contract.winning .contract-info-container {
    width: 70%;
    height: 70%;
}

.contract.animate .contract-info-container {
    width: 0;
    height: 0;
    border: 0;
}

.contract-info {
    gap: 4px;
}

.contract-info-item {
    padding: 10px 12px;
    border-radius: 8px;
}

.button.contract-info-item {
    padding: 18px 20px;
    font-size: 1.125rem;
}

.contract-info-item:first-child {
    border-radius: 8px 4px 4px 8px;
}

.contract-info-item:last-child {
    border-radius: 4px 8px 8px 4px;
}

.contract-count-items {
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.contract-count-items span:nth-child(1) {
    display: flex;
    align-items: center;
}

.contract-count-items span:nth-child(1)::after {
    content: "/";
    margin: 0 2px;
    font-size: 0.8em;
}

.contract-count-items-desc,
.contract-sum-desc {
    font-size: 0.7em;
    color: var(--color-disable-text);
}

.contract-drum-result {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contract-drum-pointer {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    justify-content: center;
    animation: animatePointerContract var(--duration-contract) cubic-bezier(0.15, 0.5, 0.2, 1) forwards;
}

.contract-drum-pointer::before {
    width: 2px;
    content: "";
    height: 15%;
    animation: animateColorPointerContract 5s ease-in-out infinite;
}

@keyframes animatePointerContract {
    0% {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(calc(-3600deg + var(--contract-rotate-pointer)));
        -o-transform: rotate(calc(-3600deg + var(--contract-rotate-pointer)));
        -ms-transform: rotate(calc(-3600deg + var(--contract-rotate-pointer)));
        -moz-transform: rotate(calc(-3600deg + var(--contract-rotate-pointer)));
        -webkit-transform: rotate(calc(-3600deg + var(--contract-rotate-pointer)));
    }
}

@keyframes animateColorPointerContract {
    0%, 100% {
        background: var(--color-red);
    }
    50% {
        background: var(--color-green);
    }
}

.contract-drum-animate {
    z-index: 1;
    width: 70%;
    height: 70%;
    display: flex;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
    animation: contractDrumResultAnimate var(--duration-contract) cubic-bezier(0.15, 0.5, 0.2, 1) forwards;
}

.contract-drum-animate .win,
.contract-drum-animate .fail {
    width: 100%;
    height: 100%;
    opacity: 0.8;
    display: flex;
    font-weight: 700;
    font-size: 1.75rem;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.contract-drum-animate .win {
    background: var(--color-green);
}

.contract-drum-animate .fail {
    background: var(--color-red);
}

.contract-winning-svg {
    position: absolute;
    animation: animateContractWinSvg 30s linear infinite;
}

.contract.winning .contract-winning-svg {
    width: 100% !important;
}

.contract.win .contract-winning-circle {
    fill: var(--color-green);
}

.contract.fail .contract-winning-circle {
    fill: var(--color-red);
}

@keyframes animateContractWinSvg {
    from {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.contract-winning-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.contract-winning {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.contract-winning::before {
    top: 0;
    left: 0;
    z-index: 0;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
}

.contract-winning-img {
    z-index: 1;
    width: 80%;
    height: 80%;
    -o-object-fit: contain;
    object-fit: contain;
}

.contract-winning-info {
    z-index: 2;
    bottom: 10%;
    position: absolute;
    text-align: center;
}

.contract-winning-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-primary-text);
}

.contract-winning-name {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}

.contract-winning-cost {
    top: 20%;
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    color: var(--color-green);
}

@keyframes contractDrumResultAnimate {
    from {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(calc(3600deg + var(--contract-rotate)));
        -o-transform: rotate(calc(3600deg + var(--contract-rotate)));
        -ms-transform: rotate(calc(3600deg + var(--contract-rotate)));
        -moz-transform: rotate(calc(3600deg + var(--contract-rotate)));
        -webkit-transform: rotate(calc(3600deg + var(--contract-rotate)));
    }
}

@keyframes contractDrumItemAnimate {
    8.3333% {
        filter: brightness(1.3);
        transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -webkit-transform: scale(1.05);
    }
    16.6666% {
        filter: brightness(1);
        transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
    }
}

.contract-footer-container {
    width: 100%;
    background: linear-gradient(0deg, transparent, var(--color-grey-primary));
}

.contract-footer {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--distance) * 2);
}

.contract-skins-scroll {
    width: 100%;
    overflow-y: auto;
    max-height: 600px;
    padding-right: 6px;
}

@media screen and (max-width: 768px) {
    .contract-skins-scroll {
        max-height: 400px;
    }
}

.contract-item.active {
    background: none !important;
    border: solid 1px var(--color) !important;
    box-shadow: inset 0 0 40px 5px var(--color-80) !important;
}

.contract-item.active::before {
    background-image: url(../images/gold.svg);
}

.contract-item.active::after {
    bottom: -2px;
}

.contract-empty-alert {
    width: 100%;
    display: flex;
    padding: 50px 8px;
    align-items: center;
    gap: var(--distance-l);
    flex-direction: column;
    justify-content: center;
    border-radius: var(--border-radius);
    background: var(--color-gray-secondary);
}

.contract-empty-desc {
    text-align: center;
    color: var(--color-disable-text);
}

/*
*
* Update
*
*/
.update-title {
    font-weight: 700;
    font-size: 2rem;
    color: var(--color);
    text-transform: uppercase;
}

.update-new {
    margin: 10px 0;
    max-width: 400px;
    overflow-y: auto;
}

.update-new-title {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-white);
    text-transform: uppercase;
}

.update-new-desc {
    gap: 8px;
    width: 100%;
    display: flex;
    margin-top: 4px;
    list-style: none;
    overflow-y: auto;
    counter-reset: li;
    max-height: 300px;
    flex-direction: column;
    color: var(--color-gray-light);
}

.update-new-desc li {
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-text);
}

.update-new-desc li::before {
    right: 100%;
    font-weight: 700;
    font-size: 1.125rem;
    counter-increment: li;
    color: var(--color-white);
    content: counters(li, ".") ". ";
}

/*
*
* Agreement
*
*/
.privacy-wrapper,
.agreement-wrapper {
    margin: 30px 2vw;
}

.privacy-header,
.agreement-header {
    width: 100%;
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

.privacy-header .privacy-title,
.privacy-header .agreement-title,
.agreement-header .privacy-title,
.agreement-header .agreement-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-white);
}

.privacy-redaction,
.agreement-redaction {
    display: flex;
    font-weight: 700;
    margin-left: 10px;
    color: var(--color-white);
}

.privacy-div,
.agreement-div {
    margin: 5px 0;
    padding-left: 20px;
}

.privacy-ol,
.agreement-ol {
    margin: 5px 0;
    padding-left: 20px;
    margin-top: 10px;
    list-style: none;
    counter-reset: li;
}

.privacy-li,
.agreement-li {
    font-weight: 300;
    margin-bottom: 7.5px;
    color: var(--color-text);
}

.privacy-item-header,
.agreement-item-header {
    display: inline;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-white);
}

.privacy-li::before,
.agreement-li::before {
    font-size: 1rem;
    font-weight: 700;
    counter-increment: li;
    color: var(--color);
    content: counters(li, ".") ". ";
}

.privacy strong,
.agreement strong {
    color: #ededed;
    font-weight: 700;
}

.privacy b,
.agreement b {
    color: #e4e4e4;
    font-weight: 600;
}

@media screen and (max-width: 440px) {
    .privacy-ol,
    .agreement-ol {
        flex-direction: column;
        align-items: flex-start;
    }

    .privacy-redaction,
    .agreement-redaction {
        margin: 5px 0;
    }

    .privacy-h2,
    .agreement-h2 {
        font-size: calc(5vw + 3px);
    }
}

/*
*
* Сотрудничество / Cooperation
*
*/
.cooperation-links {
    display: flex;
    padding: 24px;
    gap: var(--distance-s);
    background: var(--color-secondary);
    border-radius: var(--border-radius-l);
}

.cooperation-link {
    color: var(--color-white);
}

.cooperation-link-vk {
    border: solid 1px #0077ff;
    background-color: rgba(0, 119, 255, 0.6666666667);
}

.cooperation-link-telegram {
    border: solid 1px #29b6f6;
    background-color: rgba(41, 182, 246, 0.6666666667);
}

.cooperation-link-mail {
    border: solid 1px #299af6;
    background-color: rgba(41, 154, 246, 0.6666666667);
}

/*
*
* Монетка / Coin
*
*/
/* .coin {
} */
.coin-body {
    width: 250px;
    height: 250px;
    display: flex;
    border-radius: 50%;
    position: relative;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1882352941);
    animation: animateCoin 36s linear infinite;
}

.coin-layer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-layer-1 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #161b64;
}

.coin-layer-2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: solid 1px #28067e;
}

.coin-layer-3 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: dashed 25px #3a139b;
}

.coin-layer-4 {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    border: dashed 2px #3a139b;
}

.coin-logo {
    width: 100%;
    height: 100%;
    position: absolute;
}

.coin-logo svg {
    position: absolute;
    animation: animateCoinLogo 6s ease-in-out infinite;
}

.coin-logo path {
    fill: #4b17ce;
}

.coin-logo svg:nth-child(1) {
    --i-translate: -2.75px, 2.75px;
}

.coin-logo svg:nth-child(2) {
    --i-translate: 2.75px, 2.75px;
}

.coin-logo svg:nth-child(3) {
    --i-translate: 0, -2.75px;
}

@keyframes animateCoin {
    0% {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes animateCoinLogo {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        -o-transform: translate(0, 0) rotate(0deg);
        -ms-transform: translate(0, 0) rotate(0deg);
        -moz-transform: translate(0, 0) rotate(0deg);
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(var(--i-translate)) rotate(360deg);
        -o-transform: translate(var(--i-translate)) rotate(360deg);
        -ms-transform: translate(var(--i-translate)) rotate(360deg);
        -moz-transform: translate(var(--i-translate)) rotate(360deg);
        -webkit-transform: translate(var(--i-translate)) rotate(360deg);
    }
    50% {
        transform: translate(0, 0) rotate(0deg);
        -o-transform: translate(0, 0) rotate(0deg);
        -ms-transform: translate(0, 0) rotate(0deg);
        -moz-transform: translate(0, 0) rotate(0deg);
        -webkit-transform: translate(0, 0) rotate(0deg);
    }
    75% {
        transform: translate(var(--i-translate)) rotate(-360deg);
        -o-transform: translate(var(--i-translate)) rotate(-360deg);
        -ms-transform: translate(var(--i-translate)) rotate(-360deg);
        -moz-transform: translate(var(--i-translate)) rotate(-360deg);
        -webkit-transform: translate(var(--i-translate)) rotate(-360deg);
    }
}

/*
*
* Сапёр / Sapper
*
*/
.sapper-content {
    width: 340px;
}

.sapper-items {
    gap: 6px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.sapper-item {
    width: 100%;
    aspect-ratio: 1;
    background: var(--color-grey);
    border: solid 1px var(--color-dark);
}

.sapper-item:nth-child(1) {
    border-radius: 5px 0 0 0;
}

.sapper-item:nth-child(5) {
    border-radius: 0 5px 0 0;
}

.sapper-item:nth-child(21) {
    border-radius: 0 0 0 5px;
}

.sapper-item:nth-child(25) {
    border-radius: 0 0 5px 0;
}

.sapper-item.win {
    border-color: #4bf941;
}

.sapper-item.fail {
    border-color: #e94c4c;
}

.sapper-item:hover {
    filter: var(--effect-hover);
}

.loading-button::after {
    content: "";
    aspect-ratio: 1;
    margin-left: 5px;
    border-radius: 50%;
    height: var(--height);
    border: solid 2.5px var(--color);
    border-right-color: transparent !important;
    animation: animateLoadingButton 1s linear infinite;
}

@keyframes animateLoadingButton {
    0% {
        transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

.cards {
    width: 100%;
}

.cards .cards-body {
    display: flex;
    position: relative;
    gap: var(--distance);
    padding: var(--distance-xxl);
    background: var(--color-grey-primary);
    border-radius: var(--border-radius-xl);
}

.cards .cards-body .cards-items {
    width: 100%;
    height: 600px;
    display: grid;
    gap: var(--distance-s);
    grid-auto-flow: column;
    transform-style: preserve-3d;
    transform: perspective(2000px);
    -o-transform: perspective(2000px);
    -ms-transform: perspective(2000px);
    -moz-transform: perspective(2000px);
    -webkit-transform: perspective(2000px);
}

.cards .cards-body .cards-items .cards-item {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 1s ease;
    transform: rotateY(0deg) perspective(200px);
    -o-transform: rotateY(0deg) perspective(200px);
    -ms-transform: rotateY(0deg) perspective(200px);
    -moz-transform: rotateY(0deg) perspective(200px);
    -webkit-transform: rotateY(0deg) perspective(200px);
}

.cards .cards-body .cards-items .cards-item .cards-item-wrapper.info .cards-item-x::before {
    content: "?";
    font-size: inherit;
    transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
}

.cards .cards-body .cards-items .cards-item[data-x="0"] {
    --color-card: #e84c4c;
    --color-card-80: #90373a;
    --color-card-40: #572b30;
    --color-card-20: #332129;
    --color-card-10: #271d27;
}

.cards .cards-body .cards-items .cards-item[data-x="0"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x0";
}

.cards .cards-body .cards-items .cards-item[data-x="0.1"] {
    --color-card: #f18686;
    --color-card-80: #93565c;
    --color-card-40: #553940;
    --color-card-20: #322731;
    --color-card-10: #26202b;
}

.cards .cards-body .cards-items .cards-item[data-x="0.1"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x0.1";
}

.cards .cards-body .cards-items .cards-item[data-x="0.5"] {
    --color-card: #ef8253;
    --color-card-80: #935441;
    --color-card-40: #593a34;
    --color-card-20: #32272b;
    --color-card-10: #262028;
}

.cards .cards-body .cards-items .cards-item[data-x="0.5"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x0.5";
}

.cards .cards-body .cards-items .cards-item[data-x="1"] {
    --color-card: #5d7eec;
    --color-card-80: #405295;
    --color-card-40: #2d365f;
    --color-card-20: #21253b;
    --color-card-10: #1d1e30;
}

.cards .cards-body .cards-items .cards-item[data-x="1"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x1";
}

.cards .cards-body .cards-items .cards-item[data-x="1.5"] {
    --color-card: #5db4ec;
    --color-card-80: #406f95;
    --color-card-40: #2d485f;
    --color-card-20: #212b3b;
    --color-card-10: #1d2230;
}

.cards .cards-body .cards-items .cards-item[data-x="1.5"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x1.5";
}

.cards .cards-body .cards-items .cards-item[data-x="2"] {
    --color-card: #ecec5d;
    --color-card-80: #8f8f46;
    --color-card-40: #575837;
    --color-card-20: #32332c;
    --color-card-10: #262628;
}

.cards .cards-body .cards-items .cards-item[data-x="2"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x2";
}

.cards .cards-body .cards-items .cards-item[data-x="3"] {
    --color-card: #ec5dd4;
    --color-card-80: #913f87;
    --color-card-40: #582e59;
    --color-card-20: #332139;
    --color-card-10: #271d2f;
}

.cards .cards-body .cards-items .cards-item[data-x="3"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x3";
}

.cards .cards-body .cards-items .cards-item[data-x="5"] {
    --color-card: #8d6df8;
    --color-card-80: #5a479b;
    --color-card-40: #3b3363;
    --color-card-20: #26243e;
    --color-card-10: #201e31;
}

.cards .cards-body .cards-items .cards-item[data-x="5"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x5";
}

.cards .cards-body .cards-items .cards-item[data-x="10"] {
    --color-card: #53f05b;
    --color-card-80: #3e9245;
    --color-card-40: #2d5a37;
    --color-card-20: #20342d;
    --color-card-10: #1d2628;
}

.cards .cards-body .cards-items .cards-item[data-x="10"] .cards-item-wrapper:not(.info) .cards-item-x::before {
    content: "x10";
}

.cards .cards-body .cards-items .cards-item .cards-item-wrapper {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    padding: 5%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    background-color: var(--color-card-10);
    border: solid 1px var(--color-card-20);
    border-radius: var(--border-radius-xxl);
}

.cards .cards-body .cards-items .cards-item .cards-item-wrapper.info {
    z-index: 0;
    cursor: pointer;
    --color-card: #52fed3;
    --color-card-10: #1e272f;
    --color-card-20: #274343;
    --color-card-40: #2e5e58;
    --color-card-80: #3ea08b;
    transform: translateZ(-1px);
    -o-transform: translateZ(-1px);
    -ms-transform: translateZ(-1px);
    -moz-transform: translateZ(-1px);
    -webkit-transform: translateZ(-1px);
}

.cards .cards-body .cards-items .cards-item .cards-item-inner {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 5% 20%;
    outline-width: 2px;
    align-items: center;
    outline-style: solid;
    justify-content: center;
    outline-color: var(--color-card-40);
    border-radius: var(--border-radius-l);
}

.cards .cards-body .cards-items .cards-item .cards-item-x {
    width: 100%;
    display: flex;
    aspect-ratio: 1;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50%;
    outline-width: 2px;
    align-items: center;
    outline-offset: 8px;
    outline-style: dashed;
    justify-content: center;
    color: var(--color-card);
    text-transform: uppercase;
    outline-color: var(--color-card-40);
    border: solid 5px var(--color-card-80);
    background-color: var(--color-card-20);
}

.cards .cards-body .cards-menu {
    display: flex;
    flex-shrink: 0;
    max-width: 35%;
    min-width: 250px;
    gap: var(--distance);
    flex-direction: column;
    padding: var(--distance);
    background: var(--color-10);
    justify-content: space-around;
    transition: width 0.3s ease-in-out;
    border-radius: var(--border-radius);
}

.cards .cards-body .cards-menu .cards-menu-item {
    padding: var(--distance);
    background: var(--color-10);
    border-radius: var(--border-radius);
}

.cards .cards-body .cards-menu .cards-menu-sum {
    gap: 2px;
    height: 50px;
    display: flex;
    align-items: center;
    background: var(--color-10);
    border: solid 1px var(--color);
    border-radius: var(--border-radius-m);
}

.cards .cards-body .cards-menu .cards-menu-sum::after {
    content: "₽";
    padding: 0 20px;
    border-left: dashed 1px var(--color);
}

.cards .cards-body .cards-menu .cards-menu-sum .cards-menu-input {
    width: 100%;
    padding-left: 16px;
}

.cards .cards-body .cards-menu .cards-menu-sum::after,
.cards .cards-body .cards-menu .cards-menu-sum .cards-menu-input {
    height: 100%;
    display: flex;
    font-weight: 600;
    color: var(--color);
    font-size: 1.125rem;
    align-items: center;
}

.cards .cards-body .cards-menu .cards-menu-sum .cards-menu-input::-webkit-outer-spin-button,
.cards .cards-body .cards-menu .cards-menu-sum .cards-menu-input::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.cards .cards-body .cards-menu .cards-menu-option {
    width: 100%;
    text-transform: uppercase;
}

.cards .cards-body .cards-menu .cards-menu-option[data-sum]::before {
    content: attr(data-sum);
}

.cards .cards-body .cards-menu .cards-menu-option[data-x="2"], .cards .cards-body .cards-menu .cards-menu-option[data-x="4"] {
    display: none;
}

.cards .cards-body .cards-menu .cards-menu-option.active {
    filter: none !important;
    color: var(--color-white);
    background: var(--color-80);
}

.cards .cards-body .cards-menu .cards-menu-button {
    flex-shrink: 0;
    height: -moz-fit-content;
    height: fit-content;
}

.cards .cards-body .cards-menu .cards-menu-button.play {
    font-size: 2rem;
    padding: 24px 12px;
    margin-top: auto;
    border-radius: var(--border-radius-xxl);
}

.cards[data-status=play] .cards-item {
    transform: rotateY(180deg) perspective(200px) !important;
    -o-transform: rotateY(180deg) perspective(200px) !important;
    -ms-transform: rotateY(180deg) perspective(200px) !important;
    -moz-transform: rotateY(180deg) perspective(200px) !important;
    -webkit-transform: rotateY(180deg) perspective(200px) !important;
}

.cards[data-status=winning] .cards-item:not(.active) {
    transform: rotateY(180deg) perspective(200px) !important;
    -o-transform: rotateY(180deg) perspective(200px) !important;
    -ms-transform: rotateY(180deg) perspective(200px) !important;
    -moz-transform: rotateY(180deg) perspective(200px) !important;
    -webkit-transform: rotateY(180deg) perspective(200px) !important;
}

.cards[data-status=winning] .cards-item.active {
    transform: rotateY(0deg) perspective(200px) !important;
    -o-transform: rotateY(0deg) perspective(200px) !important;
    -ms-transform: rotateY(0deg) perspective(200px) !important;
    -moz-transform: rotateY(0deg) perspective(200px) !important;
    -webkit-transform: rotateY(0deg) perspective(200px) !important;
}

@media screen and (max-width: 1000px) {
    .cards-menu-option[data-x="4"], .cards-menu-option[data-x="2"] {
        display: flex !important;
    }

    .cards-menu-option[data-x="8"], .cards-menu-option[data-x="10"], .cards-menu-option[data-x="12"] {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .cards-body {
        flex-direction: column;
    }

    .cards-body .cards-items {
        height: auto !important;
    }

    .cards-body .cards-items .cards-item {
        aspect-ratio: 0.7;
    }

    .cards-body .cards-menu {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.set-name-error {
    width: 100%;
    display: flex;
    display: none;
    align-items: center;
    transition: filter 1s;
    filter: brightness(1.5);
    justify-content: center;
    border-radius: var(--border-radius-s);
}

.set-name-error:not(:empty) {
    display: flex;
    padding: 10px 12px;
    filter: brightness(1);
    color: var(--color-red);
    background-color: var(--color-red-bg);
}

.set-name-error.animate {
    animation: animateSetName 0.5s ease forwards;
}

@keyframes animateSetName {
    0% {
        filter: brightness(1.5);
    }
    100% {
        filter: brightness(1);
    }
}

/*Гирлянда мигающая*/
.event--lightrope {
    top: 0;
    left: 0;
    display: flex;
    position: absolute;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
    padding: 0;
    width: 100%;
    gap: 20px;
}

.event--lightrope span {
    width: 6px;
    height: 12px;
    min-width: 6px;
    list-style: none;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    background: #00f7a5;
    animation-duration: 2s;
    animation-name: flash-1;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    box-shadow: 0px 4px 24px 3px #00f7a5;
}

.event--lightrope span:nth-child(2n+1) {
    height: 14px;
    background: cyan;
    animation-name: flash-2;
    animation-duration: 0.4s;
    box-shadow: 0px 4px 24px 3px rgba(0, 255, 255, 0.5);
}

.event--lightrope span:nth-child(4n+2) {
    background: #f70094;
    animation-name: flash-3;
    animation-duration: 1.1s;
    box-shadow: 0px 4px 24px 3px #f70094;
}

.event--lightrope span:nth-child(odd) {
    animation-duration: 1.8s;
}

.event--lightrope span:nth-child(3n+1) {
    animation-duration: 1.4s;
}

.event--lightrope span::before {
    left: 1px;
    top: -3px;
    content: "";
    width: 4px;
    height: 6px;
    background: #222;
    position: absolute;
    border-radius: 3px;
}

.event--lightrope span::after {
    content: "";
    top: -14px;
    left: 2px;
    width: 28px;
    height: 18px;
    position: absolute;
    border-radius: 50%;
    border-bottom: solid #222 2px;
}

.event--lightrope span:last-child::after {
    content: none;
}

.event--lightrope span:first-child {
    margin-left: 5px;
}

@keyframes flash-1 {
    0%, 100% {
        background: #00f7a5;
        box-shadow: 0px 3px 16px 3px #00f7a5;
    }
    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0px 3px 12px 2px rgba(0, 247, 165, 0.2);
    }
}

@keyframes flash-2 {
    0%, 100% {
        background: cyan;
        box-shadow: 0px 3px 16px 3px cyan;
    }
    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0px 3px 12px 2px rgba(0, 255, 255, 0.2);
    }
}

@keyframes flash-3 {
    0%, 100% {
        background: #f70094;
        box-shadow: 0px 3px 16px 3px #f70094;
    }
    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0px 3px 12px 2px rgba(247, 0, 148, 0.2);
    }
}

/*# sourceMappingURL=topdrop.css.map */