@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-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-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: #f4ca80;
  --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-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=gold],
.contract-drum-item.active[data-rarity=gold] {
  background: var(--gradient-rarity-gold);
}

.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(/media/image/rarity/placeholder.svg);
}

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

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

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

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

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

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

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

.skin-item[data-rarity=gold]::before {
  background-image: url(/media/image/rarity/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=gold]::after {
  background: var(--color-rarity-gold);
}
.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);
}

.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-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: 20px;
  display: flex;
  position: relative;
}
.header-container .menu-item {
  gap: 5px;
  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;
}
.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-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::before {
  position: absolute;
  top: -8px;
  right: -8px;
  content: "New";
  font-weight: 600;
  padding: 2px 4px;
  font-size: 0.65rem;
  color: var(--color-green);
  text-transform: uppercase;
  background-color: #23553d;
  border-radius: var(--border-radius-xs);
}
.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;
  justify-content: end;
  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(/media/image/events/event-current/other/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 button {
  display: flex;
  flex-direction: column;
  color: #786f87;
  padding: 5px 0;
  text-decoration: none;
  transition: all 0.3s;
  white-space: nowrap;
}
.footer-links button:hover {
  color: #b0a7bf;
}

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

.footer-cooperation-links {
  display: flex;
  padding-top: 5px;
  flex-direction: column;
}
.footer-cooperation-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-cooperation-links a:hover {
  color: #b0a7bf;
}
.footer-cooperation-links a:hover svg {
  fill: #b0a7bf;
}
.footer-cooperation-links a svg {
  transition: all 0.3s;
}

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

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

.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: 60%;
  transition: background 0.5s, color 0.5s, filter 0.3s;
}
.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(/media/image/etc/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: 2px;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.modal .auth-link {
  width: 100%;
  height: 50px;
  display: flex;
  cursor: pointer;
  font-weight: 700;
  border-radius: 0;
  align-items: center;
  justify-content: center;
}
.modal .auth-link:hover {
  filter: var(--effect-hover);
}
.modal .auth-link:first-child {
  border-radius: var(--border-radius-m) 0 0 var(--border-radius-m);
}
.modal .auth-link:last-child {
  border-radius: 0 var(--border-radius-m) var(--border-radius-m) 0;
}
.modal .auth-link.vk {
  background: #0077ff;
}
.modal .auth-link.google {
  background: #ffffff;
}
.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: 100%;
  height: 70%;
  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(2)::before, .timer-text:nth-child(3)::before {
  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: 4/2;
  justify-content: center;
  color: var(--color-primary);
  background: var(--color);
  border-radius: 45px 0 0 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(#blurFilterSkin);
  -webkit-filter: url(#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-item .case-open-sell-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: 350px;
}
.modal .refill-main,
.modal .refill-details {
  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 .refill-main: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 .refill-details: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 .refill-window-content {
  gap: 5px;
  display: flex;
  flex-direction: column;
}
.modal .refill-payments {
  max-height: 280px;
  overflow-y: auto;
  padding-right: 8px;
  overflow-x: hidden;
  margin-bottom: 10px;
}
.modal .refill-payment-list {
  gap: 8px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.modal .refill-payment-item {
  height: 55px;
  display: flex;
  flex-shrink: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-m);
  background-color: var(--color-dark-secondary);
}
.modal .refill-payment-item[data-disabled]::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
  display: flex;
  font-weight: 700;
  align-items: center;
  border-radius: inherit;
  justify-content: center;
  text-transform: uppercase;
  background-color: rgba(0, 0, 0, 0.5019607843);
  content: attr(data-disabled);
}
.modal .refill-payment-item .refill-payment-button {
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  cursor: pointer;
  position: relative;
  align-items: center;
  gap: var(--distance-s);
  transition: filter 0.3s ease;
}
.modal .refill-payment-item::after {
  width: 10px;
  content: "";
  right: 20px;
  aspect-ratio: 1;
  position: absolute;
  border-radius: 50%;
  outline-offset: 6px;
  transition: all 0.3s ease;
  outline: 2px solid var(--color-gray-primary);
}
.modal .refill-payment-item.active::after {
  outline-color: var(--color-80);
  background-color: var(--color);
}
.modal .refill-payment-item.active {
  filter: var(--effect-press);
}
.modal .refill-payment-item .refill-payment-icon {
  width: 60px;
  height: 100%;
  padding: 8px;
  background-color: var(--color-secondary);
  border-radius: var(--border-radius-s);
}
.modal .refill-payment-item .refill-payment-label {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-text);
  text-transform: uppercase;
}
.modal .refill-payment-item .refill-payment-label.refill-payment-label-soon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
}
.modal .refill-payment-item .refill-payment-label.refill-payment-min {
  text-transform: lowercase;
}
.modal .refill-payment-item .refill-payment-label.refill-payment-min::before {
  content: "от";
  margin-right: 3px;
}
.modal .refill-payment-item .refill-payment-label.refill-payment-min::after {
  margin-left: 3px;
  content: "₽";
}
.modal .refill-payment-item .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-item .refill-payment-bonus::before {
  content: "+";
}
.modal .refill-payment-item .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-details-back-button {
  width: 30px;
  display: flex;
  flex-shrink: 0;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  margin-right: var(--distance-m);
  border-radius: var(--border-radius-s);
  background: var(--color-dark-secondary);
}
.modal .refill-details-back-button:hover {
  filter: var(--effect-hover);
}
.modal .refill-details-back-button svg {
  width: 100%;
  height: 100%;
}
.modal .refill-details {
  display: flex;
  gap: var(--distance-m);
  flex-direction: column;
}
.modal .refill-details-header {
  display: flex;
  align-items: center;
}
.modal .refill-details-container {
  padding: var(--distance-m);
  background: var(--color-dark-secondary);
  border-radius: var(--border-radius-l);
}
.modal .refill-details-list {
  display: flex;
  gap: var(--distance-m);
  flex-direction: column;
}
.modal .refill-details-item {
  display: flex;
  line-height: 1.2;
  font-size: 0.9rem;
  align-items: center;
}
.modal .refill-details-item::before {
  width: 50px;
  display: flex;
  flex-shrink: 0;
  aspect-ratio: 1;
  cursor: default;
  font-weight: 700;
  font-size: 1.25rem;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  content: attr(data-counter);
  margin-right: var(--distance-l);
  border-radius: var(--border-radius-xl);
  background-color: var(--color-dark-primary);
}
.modal #refill-timer .timer-text {
  font-weight: 700;
}
.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: 8px 0 0 8px;
  background: var(--color-dark-secondary);
}
.modal .refill-input::-moz-placeholder {
  color: #808199;
}
.modal .refill-input::placeholder {
  color: #808199;
}
.modal .refill-amount-wrapper::after {
  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: 0 8px 8px 0;
}
.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 .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(/media/image/etc/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(/media/image/rarity/gold.svg);
}
.upgrade-items .skin-item:hover::before {
  background-image: url(/media/image/rarity/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(/media/image/rarity/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;
  flex-direction: column;
  gap: var(--distance-s);
  background: var(--color-secondary);
  border-radius: var(--border-radius-l);
}

.cooperation-link {
  text-transform: initial;
  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 */