/* [project]/src/styles/main.scss.css [app-client] (css) */
@font-face {
  font-family: Tik Tok;
  src: url("../media/TikTok.0dd38ca9.woff") format("woff");
}

@font-face {
  font-family: Wadik;
  src: url("../media/Wadik.5b28cf02.woff") format("woff");
}

a, button {
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
}

a:hover, button:hover {
  cursor: pointer;
}

input[type="number"] {
  appearance: textfield;
}

* {
  border: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Tik Tok;
  list-style: none;
}

html {
  flex-direction: column;
  height: 100vh;
  display: flex;
}

body {
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

main {
  box-sizing: border-box;
  flex-direction: column;
  flex-grow: 1;
  min-height: 1px;
  padding-block: 4.6rem;
  display: flex;
}

body {
  background-color: #473664;
  background-image: url("../media/background-anime-card-dark.ea784c03.png");
}

@keyframes show-header {
  to {
    transform: translateY(-100%);
  }
}

@keyframes hide-header {
  to {
    transform: translateY(0);
  }
}

.header {
  z-index: 120;
  align-items: stretch;
  width: 100%;
  height: 80px;
  padding: .4rem;
  transition-duration: .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.header__container {
  background: #271c3a;
  border: 2px solid #a476ea;
  border-radius: 20px;
}

.header.showen {
  transform: translateY(0);
}

.header.hidden {
  transform: translateY(-200%);
}

.header__left-container, .header__right-container {
  align-items: center;
  gap: .5rem;
  display: flex;
}

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

.header__btn svg {
  stroke: #fff;
  fill: #fff;
  height: 30px;
}

.header__btn:disabled svg {
  stroke: #dadada;
  fill: #dadada;
}

.header__money-block {
  background-color: #fff;
  border-radius: 50px;
  gap: 1rem;
  height: 36px;
  padding-inline: .5rem;
  display: flex;
  overflow: hidden;
}

.header__container {
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  padding-inline: 20px;
  display: flex;
}

.header__container-blur {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-bottom: 2px solid #833e96;
  border-radius: 0 0 25px 25px;
}

.header__link {
  color: #fff;
}

.header__link-logo {
  background-color: #041023;
  border: 1px solid #041023;
  border-radius: 100%;
  outline: 2px solid #fff;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  display: flex;
  overflow: hidden;
}

.header__link-logo img {
  object-fit: scale-down;
}

.header__middle {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 126px;
  display: flex;
  position: absolute;
  bottom: -50%;
  left: 50%;
  transform: translateX(-50%);
}

.header__middle-container {
  clip-path: polygon(0 61.3%, 100% 61.3%, 100% 100%, 0% 100%);
  aspect-ratio: 1;
  z-index: -1;
  background: linear-gradient(to right, #1f2938, #1f2938) padding-box padding-box, linear-gradient(to right, #b1b1b1, #8f8f8f) border-box;
  border: 1.2px solid #0000;
  border-radius: 100%;
  width: 126px;
  position: absolute;
  bottom: -5%;
  left: 0;
}

.header__middle .header__cards-container {
  background: linear-gradient(40deg, #733079 1%, #ce62b7 100%);
  border-radius: 5px;
  width: 39px;
  height: 64px;
  display: block;
  position: relative;
  left: 15%;
}

.header__middle .header__cards-container:after, .header__middle .header__cards-container:before {
  content: " ";
  background: linear-gradient(40deg, #733079 1%, #ce62b7 100%);
  border-radius: 5px;
  width: 39px;
  height: 64px;
  display: block;
  position: absolute;
  top: 0;
}

.header__middle .header__cards-container:after {
  opacity: .6;
  z-index: -1;
  left: -50%;
}

.header__middle .header__cards-container:before {
  opacity: .4;
  z-index: -1;
  left: -100%;
}

.home {
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-inline: 1rem;
  display: flex;
}

.purple-button, .purple-link {
  color: #271c3a;
  text-align: center;
  background-color: #fff;
  border: 2px solid #271c3a;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  padding: .6rem 1rem;
  font-size: 1.2rem;
  font-weight: 500;
  display: flex;
}

.purple-button:disabled, .purple-link:disabled {
  color: #dadada;
}

.purple-button.arrow svg, .purple-link.arrow svg {
  transition-duration: .3s;
}

.purple-button.arrow svg path, .purple-link.arrow svg path {
  stroke: #000 !important;
}

.purple-button.arrow-opened svg, .purple-link.arrow-opened svg {
  transform: rotate(0);
}

.purple-button.arrow-hidden svg, .purple-link.arrow-hidden svg {
  transform: rotate(180deg);
}

.purple-button.huge, .purple-link.huge {
  padding: 1rem .8rem;
}

.purple-button.tiny, .purple-link.tiny {
  color: #473664;
  border-radius: 7px;
  padding: .2rem .8rem;
  font-size: 1rem;
  font-weight: 500;
}

.purple-button:hover, .purple-link:hover {
  cursor: pointer;
}

.blur-space {
  background: url("../media/background-anime-card-dark.ea784c03.png") padding-box padding-box, linear-gradient(to right, #b1b1b1, #8f8f8f) border-box;
  border: 1.2px solid #0000;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}

.blur-space__container {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: linear-gradient(141deg, #dadada33 1%, #6663 100%);
  flex-direction: column;
  gap: 2.5rem;
  padding: 40px 14px;
  display: flex;
}

.blur-space__container.main {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.preview-battle-card {
  aspect-ratio: .7;
  height: 140px;
  display: flex;
}

.preview-battle-card__set-btn {
  border: 2px dashed #fff;
  border-radius: 15px;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card {
  aspect-ratio: .7;
  box-sizing: border-box;
  border-radius: 12px;
  height: 260px;
  transition-duration: .2s;
  position: relative;
  overflow: hidden;
}

.card:after {
  z-index: 100;
  content: "";
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.card__set-text {
  color: #fff;
  font-family: Wadik;
  font-size: 1.8rem;
  font-weight: 600;
}

.card__set-container-rival {
  background-color: #833e96;
  border: 1.2px solid #fff;
  border-radius: 15px;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.card__stats-container {
  opacity: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .1rem;
  width: 100%;
  height: 100%;
  padding: .2rem;
  transition-duration: .3s;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

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

.card__stat span {
  color: #fff;
}

.card-s .card-frame__frames:before, .card-s .card-frame__frames:after {
  border-color: #f0b411;
}

.card-s .card-frame__bottom svg path:last-child {
  stroke: #f0b411;
  stroke-width: 2px;
}

.card-s .card-frame__rating {
  background-color: #f0b411;
}

.card-a .card-frame__frames:before, .card-a .card-frame__frames:after {
  border-color: #833e96;
}

.card-a .card-frame__bottom svg path:last-child {
  stroke: #833e96;
  stroke-width: 2px;
}

.card-a .card-frame__rating {
  background-color: #833e96;
}

.card-b .card-frame__frames:before, .card-b .card-frame__frames:after {
  border-color: #00f7ff;
}

.card-b .card-frame__bottom svg path:last-child {
  stroke: #00f7ff;
  stroke-width: 2px;
}

.card-b .card-frame__rating {
  background-color: #00f7ff;
}

.card-c .card-frame__frames:before, .card-c .card-frame__frames:after {
  border-color: #5be98b;
}

.card-c .card-frame__bottom svg path:last-child {
  stroke: #5be98b;
  stroke-width: 2px;
}

.card-c .card-frame__rating {
  background-color: #5be98b;
}

.card-d {
  border: 4px double #dadada;
  box-shadow: inset 0 -31px 30px #dadadacc;
}

.card.dragging {
  position: absolute;
}

.card:hover {
  transform: scale(1.05);
}

.card__active-prev-container, .card__active-container {
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.card__active-prev-container {
  background-color: #041023;
  border: 1px solid #a476ea;
}

.card__preview-container {
  background-color: #041023;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.card__delete-container {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
}

.card__preview {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card.selected {
  transform: translateY(-6%)rotate(3deg)scale(1.05);
}

.cards-list {
  transform-origin: 0;
  justify-content: space-around;
  padding-block: .4rem;
  display: flex;
  overflow: hidden;
}

.cards-list.to-hide {
  animation: .4s forwards hide-cards-list;
}

.cards-list.opened {
  animation: .4s forwards show-cards-list;
}

.card__delete {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  aspect-ratio: 1;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 40px;
  display: flex;
}

.card__delete svg {
  filter: drop-shadow(0 0 2px red) drop-shadow(0 0 0 3px blue);
}

.card-frame {
  content: " ";
  z-index: 101;
  pointer-events: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.card-frame__rating {
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 50% 75%);
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 60px;
  display: flex;
}

.card-frame p {
  color: #041023;
}

.card-frame__frames {
  z-index: 120;
}

.card-frame__frames:before {
  content: "";
  border: 1.2px solid #000;
  border-radius: 7px;
  width: 90%;
  height: 88%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}

.card-frame__frames:after {
  content: "";
  border: 1.2px solid #000;
  border-radius: 7px;
  width: 80%;
  height: 94%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%)translateX(-50%);
}

.card-frame__cover {
  width: calc(100% + 4px);
  display: flex;
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
}

.card-frame__cover svg path {
  stroke: #f0b411;
  stroke-width: 2px;
}

.card-frame__top {
  z-index: 200;
  padding-left: 1.4rem;
}

.card-frame__rating-block, .card-frame__attribute-block {
  background-color: #fff;
  border: 1.2px solid #fff;
  border-radius: 100%;
  outline: 1px solid #271c3a;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  font-size: .8rem;
  font-weight: 700;
  display: flex;
}

.card-frame__rarity-block {
  corner-shape: bevel;
  background: #ffe354;
  border: 1.2px solid #fff;
  border-radius: 100%;
  outline: 1px solid #271c3a;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
}

.card-frame__bottom {
  width: 100%;
  position: relative;
}

.card-frame__group {
  z-index: 120;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 82px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.card-frame__rating-about-block {
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  display: flex;
}

.card-frame__name {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.card-frame__anti-elements-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.card-frame__anti-elements-list {
  justify-content: center;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.card-frame__text-name {
  text-align: center;
  color: #041023;
  font-size: .9rem;
  font-weight: 800;
}

.card-frame__text-rating {
  color: #fff;
  font-size: 1.6rem;
}

.card-frame__text-university {
  color: gray;
  font-size: .65rem;
}

.card-frame__text-red {
  color: #c76666;
  font-size: .6rem;
  font-weight: 800;
}

@keyframes shake-card {
  10% {
    transform: translateY(10%);
  }

  20% {
    transform: rotate(5deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  40% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0);
  }

  100% {
    transform: translateY(0%);
  }
}

@keyframes show-cards-list {
  from {
    max-height: 0;
    padding: 0;
  }

  to {
    max-height: 220px;
    padding-block: .4rem;
  }
}

@keyframes hide-cards-list {
  from {
    max-height: 220px;
    padding-block: .4rem;
  }

  to {
    max-height: 0;
    padding: 0;
  }
}

.cards-choise {
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: stretch;
  gap: 1rem;
  height: 100%;
  min-height: 1px;
  max-height: 100%;
  display: flex;
}

.cards-choise__favorite-list {
  flex-wrap: wrap;
  justify-content: space-around;
  justify-items: center;
  row-gap: .3rem;
  display: flex;
}

.cards-choise__list-container {
  flex-direction: column;
  flex-grow: 1;
  gap: .4rem;
  min-height: 1px;
  display: flex;
}

.cards-choise__filter-container {
  justify-content: stretch;
  display: flex;
}

.cards-choise__cards-list {
  flex-direction: column;
  padding-block: 1rem;
  display: flex;
  overflow: hidden auto;
}

.cards-choise__filter {
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  width: 100%;
  display: flex;
}

.cards-choise__filter.pd {
  padding-inline: 1rem;
}

.cards-choise__filter.pd-no {
  padding: unset;
}

.cards-choise__list {
  flex-wrap: wrap;
  flex-grow: 1;
  justify-content: space-around;
  justify-items: center;
  gap: 1.4rem;
  display: flex;
}

.cards-choise__desc-text {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}

.card-desc__description {
  flex-direction: column;
  flex-grow: 1;
  gap: .4rem;
  display: flex;
}

.card-desc__top-block {
  justify-content: space-between;
  align-items: center;
  height: 30px;
  display: flex;
}

.card-desc__name {
  color: #041023;
  font-size: 1.2rem;
  font-weight: 500;
}

.card-desc__desc-key, .card-desc__desc-value {
  color: #271c3a;
  font-size: 1rem;
  font-weight: 500;
}

.card-desc__desc-list {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}

.card-desc__desc-element {
  background-color: #fff;
  border: 1px solid #271c3a;
  border-radius: 20px;
  gap: 1rem;
  padding: .3rem .6rem;
  display: flex;
}

.over-black-space {
  z-index: 200;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #04102399;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  position: fixed !important;
}

.over-black-space.opened {
  animation: .4s forwards show-selection-list;
}

.over-black-space.to-hide {
  animation: .4s forwards hide-selection-list;
  transform: translateY(0%);
}

.over-black-space__btns {
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: linear-gradient(141deg, #dadada33 1%, #6663 100%);
  justify-content: space-between;
  width: 100%;
  padding: .6rem 1rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

@keyframes show-selection-list {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes hide-selection-list {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(100%);
  }
}

.base-list {
  width: fit-content;
  display: flex;
}

.base-list.small .base-list__active-value-container {
  gap: 1rem;
  display: flex;
}

.base-list.small .base-list__selection {
  width: max-content;
  min-width: 100%;
}

.base-list.small .base-list__active-value-container {
  border-radius: 10px;
  justify-content: space-around;
  align-items: center;
}

.base-list.long {
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.base-list__title {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

.base-list__selection-container {
  width: 100%;
  max-width: 140px;
  height: 30px;
  display: flex;
  position: relative;
}

.base-list__container {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.base-list__active-value-container {
  flex-grow: 1;
  justify-content: space-between;
  display: flex;
}

.base-list__btn {
  height: inherit;
  width: inherit;
}

.base-list__btn:disabled svg {
  stroke: #dadada;
}

.base-list__btn {
  stroke: #fff;
  justify-content: center;
  align-items: center;
  display: flex;
}

.base-list__active-value {
  color: #fff;
  background-color: #271c3a;
  border: 1px solid #a476ea;
  border-radius: 10px;
  flex-grow: 1;
  height: 30px;
}

.base-list__selection {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
  z-index: 100;
  background-color: #271c3ae6;
  border: 1px solid #a476ea;
  border-radius: 10px;
  flex-direction: column;
  width: 100%;
  padding: .3rem;
  display: flex;
  position: absolute;
  top: 110%;
  left: 0;
  box-shadow: 0 2px 12px #3f4b8a33;
}

.base-list__value {
  text-wrap: nowrap;
  color: #fff;
  border-radius: 5px;
  padding: .4rem .7rem;
  transition-duration: .3s;
}

.base-list__value:hover {
  background-color: #a476ea;
}

.input {
  gap: 1rem;
  height: 40px;
  display: flex;
}

.input__container {
  flex-shrink: 2;
  width: 100%;
  height: 100%;
  display: flex;
}

.input__container-input {
  max-width: 180px;
}

.input__text-inpt {
  color: #fff;
  background-color: #1f2938;
  border: 1px solid #833e96;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  padding-inline: 1rem;
}

.input__text-inpt:focus {
  outline: unset;
}

.input__btn {
  aspect-ratio: 1;
  background-color: #833e9666;
  border: 1px solid #833e96;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.search-filter__btn {
  aspect-ratio: 1;
  background-color: #1f2938;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 40px;
  display: flex;
}

.search-filter__portal {
  z-index: 300;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-sizing: border-box;
  background-color: #0003;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem 2rem;
  display: flex;
  top: 0;
  left: 0;
  position: fixed !important;
}

.search-filter__filter-container {
  background-color: #1f2938;
  border: 2px solid #833e96;
  border-radius: 20px;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  padding: 1rem;
  display: flex;
  box-shadow: 1px 1px 35px 11px #484d8933;
}

.search-filter__block {
  width: 100%;
}

.search-filter__block-filters {
  flex-direction: column;
  align-items: stretch;
  gap: .6rem;
  display: flex;
}

.search-filter__block-btns {
  justify-content: space-between;
  display: flex;
}

.light-button {
  color: #271c3a;
  background-color: #a476ea;
  border: 2px solid #fff;
  border-radius: 15px;
  outline: 1px solid #a476ea;
  height: 100%;
  padding: .2rem 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.light-button.dark {
  color: #a476ea;
  background-color: #271c3a;
}

.light-button:disabled {
  opacity: .8;
}

.light-button.tiny {
  padding: .2rem .5rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.auth {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.auth__form-container {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  max-width: 450px;
  padding: 1rem;
  display: flex;
}

.auth__form {
  flex-direction: column;
  flex-grow: 1;
  gap: 2rem;
  display: flex;
}

.auth__label {
  color: #833e96;
  text-align: center;
  font-family: Wadik;
  font-size: 1.4rem;
  font-weight: 600;
}

.auth__top-block {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.auth__input {
  color: #dadada;
  background-color: #041023;
  border: 2px solid #833e96;
  border-radius: 15px;
  height: 54px;
  padding-inline: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.auth__input:focus {
  outline: unset;
}

.auth__container-nickname {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}

.auth__error {
  color: #c76666;
  font-size: 1rem;
  font-weight: 600;
}

.auth__bottom-block {
  justify-content: center;
  display: flex;
}

.message-controller__list {
  flex-direction: column;
  align-items: end;
  gap: .4rem;
  display: flex;
  overflow: hidden;
}

.message-controller {
  z-index: 500;
  padding: .4rem;
  position: fixed;
  top: 5rem;
  right: 0;
}

.message {
  background-color: #fff;
  border-right: 2px solid #fff;
  border-radius: 15px 0 0 15px;
  justify-content: space-between;
  gap: 1rem;
  width: fit-content;
  max-width: 300px;
  padding: .4rem;
  animation: .3s forwards show-message;
  display: flex;
}

.message.message {
  border-color: #5be98b;
}

.message.error {
  border-color: #c76666;
}

.message__text {
  color: #041023;
  font-size: 1.2rem;
  font-weight: 600;
}

.loading {
  text-align: center;
}

.loading span {
  color: #dadada;
  font-size: 1.2rem;
  font-weight: 600;
}

footer {
  z-index: 120;
  width: 100%;
  padding: .4rem;
  position: fixed;
  bottom: 0;
  left: 0;
}

.navigation {
  background: #271c3a;
  border: 2px solid #a476ea;
  border-radius: 20px;
  width: 100%;
  height: 50px;
  display: flex;
}

.navigation__nav, .navigation__list {
  flex-grow: 1;
  display: flex;
}

.main-nav {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.main-nav.active .main-nav__link {
  color: #271c3a;
  background-color: #fff;
}

.main-nav__link {
  color: #a476ea;
  background-color: #0000;
  border-radius: 10px;
  padding: .2rem .4rem;
  font-size: 1.05rem;
  font-weight: 500;
}

@keyframes show-message {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0%);
  }
}

@media screen and (max-width: 340px) {
  .light-button {
    font-size: 1rem;
  }

  .light-button.tiny {
    font-size: .9rem;
  }
}

@media screen and (max-width: 330px) {
  .preview-battle-card, .card {
    width: 80px;
    height: 120px;
  }

  .cards-choise__favorite-list, .cards-choise__list {
    grid-template-rows: repeat(auto-fit, 120px);
    grid-template-columns: repeat(auto-fit, 80px);
  }
}

.card-preview {
  aspect-ratio: .6;
  border-radius: 12px;
  justify-content: stretch;
  align-items: stretch;
  height: 200px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card-preview__preview-container, .card-preview__active-prev-container {
  background-color: #041023;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.card-preview__active-prev-container {
  border: 1.2px dashed #833e96;
  border-radius: 12px;
}

.card-preview__preview {
  object-fit: contain;
  height: 200px;
}

.card-preview__delete-container {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.card-preview.card-s {
  border: 1px solid #f0b411;
}

.card-preview.card-a {
  border: 1px solid #833e96;
}

.card-preview.card-b {
  border: 1px solid #00f7ff;
}

.card-preview.card-c {
  border: 1px solid #5be98b;
}

/* [project]/src/styles/profile.scss.css [app-client] (css) */
.profile {
  padding-inline: .5rem;
  flex-direction: column;
  flex-grow: 1;
  min-height: 1px;
  padding-top: 1rem;
  display: flex;
}

.profile-container {
  background-color: #271c3a;
  border: 2px solid #a476ea;
  border-radius: 25px;
  flex-direction: column;
  gap: 1rem;
  padding: .6rem .4rem;
  display: flex;
}

.profile__loading {
  color: #dadada;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  display: flex;
}

.profile * {
  color: #fff;
  font-family: Tik Tok;
}

.profile__user-label {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.profile__logo-container {
  aspect-ratio: 1;
  background-color: #fff;
  border: 2px solid #473664;
  border-radius: 100%;
  outline: 1px solid #fff;
  justify-content: center;
  align-items: center;
  width: 100px;
  display: flex;
  overflow: hidden;
}

.profile__user-nick-id {
  flex-direction: column;
  gap: .6rem;
  display: flex;
}

.profile__user-nick-id span, .profile__user-nick-id h2 {
  text-align: center;
}

.profile__user-nick {
  font-size: 1.5rem;
  font-weight: 700;
}

.profile__achivments-list {
  background-color: #fff;
  border-radius: 15px;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: .2rem;
  display: grid;
  box-shadow: 11px 10px 10px -10px #0410232e;
}

.profile__achivment {
  background-color: #473664;
  border: 2px dashed #a476ea;
  border-radius: 15px;
  flex-direction: column;
  gap: .6rem;
  padding: .6rem;
  display: flex;
}

.profile__ach-score {
  font-size: 2rem;
  font-weight: 800;
}

.profile__ach-title {
  font-size: 1rem;
  font-weight: 400;
}

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

.profile__ach-score, .profile__ach-title {
  text-align: center;
  color: #fff;
}

.profile__user-favorite-cards {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.profile__favorite-cards-btn__container {
  justify-content: stretch;
  gap: 1rem;
  display: flex;
}

.profile__favorite-cards-btn__container button {
  flex-grow: 1;
}

.profile__edit-btn {
  position: absolute;
  top: .8rem;
  right: .8rem;
}

/* [project]/src/styles/battleCards.scss.css [app-client] (css) */
.battle-cards {
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 2rem;
  display: flex;
  position: relative;
}

.battle-cards__btns {
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .6rem 1rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.battle-card {
  background-color: #041023;
  border: 1.2px solid #0000;
  border-radius: 12px;
  flex-direction: column;
  min-width: 98px;
  height: 140px;
  transition-duration: .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.battle-card.selected {
  transform: rotate(4deg);
}

.battle-card__active-container {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.battle-card__preview-container {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.battle-card__stats-container {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  padding: .2rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.battle-card__stats-container * {
  font-size: .7rem;
  font-weight: 500;
}

.battle-card__attack-block {
  justify-content: space-evenly;
  display: flex;
}

.battle-card__stat {
  background-color: #fff;
  border-radius: 100px;
  padding: .1rem .3rem;
}

.battle-card.card-s {
  border-color: #f0b411;
}

.battle-card.card-s * {
  color: #f0b411;
}

.battle-card.card-a {
  border-color: #833e96;
}

.battle-card.card-a * {
  color: #833e96;
}

.battle-card.card-b {
  border-color: #00f7ff;
}

.battle-card.card-b * {
  color: #00f7ff;
}

.battle-card.card-c {
  border-color: #5be98b;
}

.battle-card.card-c * {
  color: #5be98b;
}

.rival-inventory {
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  padding-inline: .5rem;
  display: flex;
  position: relative;
}

.rival-inventory__desc {
  width: 100%;
  padding: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
}

.rival-battles {
  flex-direction: column;
  gap: 1rem;
  min-height: 1px;
  display: flex;
  overflow-y: scroll;
}

.rival-battles__btl-list {
  flex-direction: column;
  gap: .4rem;
  display: flex;
  overflow-y: auto;
}

.rival-battles__score {
  color: #fff;
  flex-direction: column;
  padding-block: .4rem;
  display: flex;
}

.rival-battles__score .tiny {
  font-size: 1.2rem;
}

.rival-battle {
  background-color: #fff;
  border-bottom: 3px solid #833e96;
  border-radius: 15px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: .2rem .6rem;
  display: flex;
  overflow: hidden;
}

.rival-battle__user {
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  display: flex;
}

.rival-battle__name {
  background-color: #0000;
  border: 1px solid #0000;
  border-radius: 5px;
  padding: .1rem .4rem;
  font-size: 1.2rem;
}

.rival-battle__name.winner {
  color: #c76666;
  background-color: #c766661a;
  border-color: #c76666;
}

.rival-battle__vs {
  color: #041023;
  font-family: Wadik;
}

.rival-stats {
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  min-height: 1px;
  display: flex;
}

.rival-stats__main {
  flex-direction: column;
  flex-grow: 1;
  min-height: 0;
  display: flex;
}

.rival-stats__top {
  border-bottom: 1px solid #fff6;
  flex-direction: column;
  gap: .4rem;
  padding-bottom: 1rem;
  display: flex;
}

.rival-stats__username {
  color: #833e96;
  font-family: Wadik;
}

.rival-stats__container-nav {
  background-color: #833e9666;
  border: 1.2px solid #833e96;
  border-bottom-width: 3px;
  border-radius: 15px;
  justify-content: space-around;
  align-items: center;
  padding: .2rem;
  display: flex;
}

.rival-stats__container-nav button {
  color: #fff;
  border-radius: 10px;
  padding: .4rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  transition-duration: .3s;
}

.rival-stats__container-nav button:hover, .rival-stats__container-nav button.active {
  background-color: #833e96;
}

/* [project]/src/styles/shop.scss.css [app-client] (css) */
.shop {
  flex-direction: column;
  flex-grow: 1;
  min-height: 1px;
  padding-inline: 1rem;
  display: flex;
}

.shop__body {
  flex-direction: column;
  gap: 3rem;
  width: 100%;
  padding-top: 2rem;
  display: flex;
}

.shop-top {
  display: flex;
}

.shop-top__link {
  color: #a476ea;
  background-color: #fff;
  border: 2px solid #a476ea;
  border-bottom-width: 4px;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  display: flex;
}

.keys__list-container {
  z-index: 100;
  width: 100%;
  height: fit-content;
  padding-inline: 1rem;
  position: sticky;
  top: 1rem;
  left: 0;
}

.keys__list {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: #04102333;
  border-radius: 25px;
  gap: 2rem;
  padding: .5rem;
  display: flex;
}

.banner-section {
  background-color: #271c3a;
  border: 2px solid #a476ea;
  border-radius: 25px;
  flex-direction: column;
  width: 100%;
  padding: 1.2rem;
  display: flex;
  position: relative;
}

.banner-section__empty-text {
  color: #473664;
  text-align: center;
  width: 100%;
  font-size: 1.4rem;
  font-weight: 600;
}

.banner-section__title-container {
  z-index: 30;
  background-color: #fff;
  border-radius: 30px;
  padding: .4rem .8rem;
  position: absolute;
  top: -18px;
  left: 40px;
}

.banner-section__title {
  color: #a476ea;
  font-weight: 500;
}

.banner-section__list {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  display: flex;
}

.banner {
  z-index: 20;
  box-sizing: content-box;
  background-color: #fff;
  border: 2px dashed #a476ea;
  border-radius: 15px;
  outline: 1px solid #fff;
  flex-direction: column;
  flex: 120px;
  gap: .2rem;
  width: 100%;
  padding: .4rem;
  display: flex;
}

.banner__view-block {
  flex-direction: column;
  gap: .2rem;
  display: flex;
}

.banner__name {
  letter-spacing: .2rem;
  text-wrap: wrap;
  text-align: center;
  color: #041023;
  font-family: Tik Tok;
  font-size: 1rem;
  font-weight: 600;
  display: block;
}

.banner__count-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.banner__count-container-normal {
  flex-direction: column;
  gap: .2rem;
  display: flex;
}

.banner__count {
  color: #041023;
  text-align: center;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  display: block;
}

.banner__view-container {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.banner__view {
  object-fit: contain;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.banner__view.card-s {
  border: 2px solid #f0b411;
}

.banner__view.card-a {
  border: 2px solid #833e96;
}

.banner__view.card-b {
  border: 2px solid #00f7ff;
}

.banner__view.card-c {
  border: 2px solid #5be98b;
}

.banner__view.card-d {
  border: 2px solid #dadada;
}

.value-info {
  align-items: center;
  gap: .3rem;
  display: flex;
}

.value-info__view-container {
  aspect-ratio: 1;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.value-info__view {
  object-fit: scale-down;
  width: 100%;
}

.value-info__count {
  color: #041023;
  font-size: 1rem;
  font-weight: 600;
}

.exp-selector {
  flex-direction: column;
  height: 100%;
  padding-block: 1rem;
  display: flex;
  position: relative;
}

.exp-selector__main {
  flex-direction: column;
  flex-grow: 1;
  padding-bottom: 2rem;
  display: flex;
}

.exp-selector__list {
  flex-flow: wrap;
  justify-content: space-between;
  row-gap: 3rem;
  padding-inline: 1rem;
  display: flex;
}

.exp-selector__logic {
  justify-content: space-around;
  width: 100%;
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 0;
}

/* [project]/src/styles/twists.scss.css [app-client] (css) */
.twists {
  padding-inline: 1rem;
  flex-direction: column;
  flex-grow: 1;
  gap: 2rem;
  padding-top: 1rem;
  padding-bottom: 5.5rem;
  display: flex;
}

.twists__body {
  flex-direction: column;
  flex-grow: 1;
  gap: 3rem;
  min-height: 1px;
  display: flex;
}

.twist-banner {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: #271c3a99;
  border: 2px solid #a476ea;
  border-radius: 25px;
  flex-direction: column;
  height: fit-content;
  padding: .4rem;
  display: flex;
  position: relative;
}

.twist-banner__twist-container {
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.twist-banner__twist {
  object-fit: scale-down;
  width: 100%;
  animation: 2s infinite package-shake;
}

.twist-banner__twist.stop {
  animation-play-state: paused;
}

.twist-banner__twist.play {
  animation-play-state: running;
}

.twist-banner__title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.twist-banner__purchase-block {
  justify-content: center;
  gap: 1rem;
  width: fit-content;
  display: flex;
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.twist-banner__container {
  align-items: center;
  gap: .6rem;
  display: flex;
}

.twist-banner__info {
  color: #041023;
  text-align: center;
  text-wrap: wrap;
  font-size: 1.2rem;
  font-weight: 500;
}

.twist-banner__info-container {
  background-color: #fff;
  border: 2px solid #041023;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .2rem 1rem;
  display: flex;
  position: relative;
}

.twist-banner__info-container:hover {
  cursor: pointer;
}

.twist-banner__choice {
  background-color: #fff;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  padding: .4rem;
  display: flex;
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
}

.twist-banner__choice-el {
  color: #271c3a;
  transition-duration: .3rem;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  padding-inline: .4rem;
  font-size: 1.2rem;
  transition-duration: .3s;
  display: flex;
}

.twist-banner__choice-el:hover {
  background-color: #a476ea;
}

@keyframes show-card-twist {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes hide-card-twist {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(100%);
  }
}

.twist {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 300;
  background-color: #47366433;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  height: 100%;
  padding: .3rem;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.twist.opened {
  animation: .4s forwards show-card-twist;
}

.twist.to-hide {
  animation: .4s forwards hide-card-twist;
}

.twist__container {
  corner-shape: bevel;
  border: 2px solid #a476ea;
  border-radius: 25px;
  flex-direction: column;
  flex-grow: 1;
  padding: .5rem;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 40px #a476ea;
}

.twist__body {
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  display: flex;
}

.twist__package-container {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.twist__package-img {
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  min-width: 500px;
  height: 100%;
  max-height: 840px;
}

.twist__package-img.lock {
  display: none;
}

.twist__package-img.open {
  display: block;
}

.twist__panel {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  padding-inline: 2rem;
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 0;
}

.twist__btn {
  color: #fff;
  background-color: #5be98b;
  border: 2px solid #833e96;
  border-radius: 15px;
  outline: 1px solid #fff;
  height: 100%;
  padding-inline: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: inset 0 0 17px -6px #ffffffcf;
}

.twist__card-container {
  opacity: 0;
  flex-direction: column;
  gap: 3rem;
  animation: .8s 4s forwards paused show-gacha-card;
  display: flex;
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%)scale(.1);
}

.twist__card-container.hidden, .twist__card-container.opened {
  animation-play-state: running;
}

.twist__dropped-card {
  corner-shape: bevel;
  border-radius: 15px;
  outline: 6px double #0000;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 300px;
  display: flex;
  overflow: hidden;
}

.twist__dropped-card-s {
  outline-color: #f0b411;
  box-shadow: 0 0 64px #f0b411cc;
}

.twist__dropped-card-a {
  outline-color: #833e96;
  box-shadow: 0 0 64px #833e96cc;
}

.twist__dropped-card-b {
  outline-color: #00f7ff;
  box-shadow: 0 0 64px #00f7ffcc;
}

.twist__dropped-card-c {
  outline-color: #5be98b;
  box-shadow: 0 0 64px #5be98bcc;
}

.twist__dropped-card-d {
  outline-color: #dadada;
  box-shadow: 0 0 64px #dadadacc;
}

.twist__card-name {
  color: #fff;
  text-align: center;
  font-family: Wadik;
  font-size: 2rem;
}

.twist__card-img {
  object-fit: cover;
  height: 100%;
}

@keyframes show-gacha-card {
  to {
    opacity: 1;
    bottom: 30%;
    transform: scale(1)translateX(-50%);
  }
}

.cat-line {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px dashed #fff6;
  border-radius: 40px;
  align-items: center;
  width: 70%;
  padding: .5rem .8rem;
  display: flex;
  position: absolute;
  top: 28%;
  left: 12%;
  transform: rotate(-1deg);
}

.cat-line__arrows-block {
  align-items: center;
  display: flex;
}

.cat-line__arrows-block svg {
  opacity: .4;
  animation: .6s infinite arrow-trigger;
  transform: rotate(-90deg);
}

.cat-line__arrows-block svg:nth-child(2) {
  animation-delay: .2s;
}

.cat-line__arrows-block svg:nth-child(3) {
  animation-delay: .4s;
}

@keyframes arrow-trigger {
  50% {
    opacity: .8;
    transform: rotate(-90deg);
  }

  100% {
    opacity: .4;
    transform: rotate(-90deg);
  }
}

@keyframes package-shake {
  10% {
    transform: translateY(-4%);
  }

  20% {
    transform: rotateZ(5deg)translateY(-4%);
  }

  25% {
    transform: rotateZ(-5deg)translateY(-4%);
  }

  30% {
    transform: rotateZ(5deg)translateY(-4%);
  }

  35% {
    transform: rotateZ(-5deg)translateY(-4%);
  }

  40% {
    transform: rotateZ(5deg)translateY(-4%);
  }

  45% {
    transform: rotateZ(-5deg)translateY(-4%);
  }

  50% {
    transform: rotateZ(0)translateY(-4%);
  }

  100% {
    transform: scaleX(100%);
  }
}

/* [project]/src/styles/trades.scss.css [app-client] (css) */
.trades {
  flex-direction: column;
  gap: 1rem;
  padding-inline: 1rem;
  display: flex;
}

.trades__top {
  flex-direction: column;
  gap: 1rem;
  min-height: fit-content;
  padding: .5rem;
  display: flex;
}

.trades__bottom {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding-inline: .5rem;
}

.trades__your-filter {
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
  display: flex;
}

.trades__your-f-element {
  background-color: #041023;
  border: 1px solid #833e96;
  border-radius: 100px;
  padding: .4rem .6rem;
}

.trades__your-f-element.active {
  border-width: 2px;
}

.trades__your-f-element button {
  color: #dadada;
  font-size: 1rem;
  font-weight: 600;
}

.trades__bottom {
  border-radius: 20px;
  flex-direction: column;
  flex-grow: 1;
  gap: .5rem;
  min-height: 1px;
  display: flex;
}

.trades__container {
  display: flex;
}

.trades__container-inventory {
  justify-content: flex-end;
}

.trades__container-vertical {
  flex-direction: column;
  gap: .5rem;
}

.trades__list-title-container {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background-color: #833e9666;
  border: 1px solid #833e96;
  border-bottom: 2px solid #fff;
  border-radius: 15px 15px 0 0;
  padding: .5rem;
}

.trades__list-title {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.trades__link {
  color: #fff;
  background-color: #5be98b;
  border-radius: 15px;
  padding: .4rem .8rem;
  font-size: 1.1rem;
  display: block;
  box-shadow: inset 0 0 17px -6px #ffffffcf;
}

.trades__orders-filter-container {
  justify-content: space-between;
  width: 100%;
  height: 40px;
  display: flex;
}

.trades__your-offers-list, .trades__orders-list {
  flex-direction: column;
  flex-grow: 1;
  gap: .5rem;
  display: flex;
}

.trades__orders-list-container {
  border-top: 1px solid #833e96;
  flex-grow: 1;
  min-height: 1px;
  padding-block: 1rem;
  display: flex;
  overflow: hidden auto;
}

.trades__form {
  flex-grow: 1;
  justify-content: space-between;
  display: flex;
}

.other-order__prefs {
  flex-direction: column;
  column-gap: .4rem;
  display: flex;
}

.other-order__pref {
  font-size: 1rem;
}

.other-order, .your-offer {
  background-color: #fff;
  border-bottom: 4px solid #833e96;
  border-radius: 10px;
  gap: .4rem;
  height: 120px;
  padding: .5rem;
  display: flex;
}

.other-order__preview-img, .your-offer__preview-img {
  object-fit: contain;
  border: 1px solid #dadada;
  border-radius: 10px;
  width: 100%;
  min-width: 60px;
  overflow: hidden;
}

.other-order__right-block, .your-offer__right-block {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: space-between;
  display: flex;
}

.other-order__info-block, .your-offer__info-block {
  flex-direction: column;
  display: flex;
}

.other-order__price, .your-offer__price {
  color: #041023;
  font-size: 1rem;
  font-weight: 600;
}

.other-order__title, .your-offer__title {
  color: #041023;
  text-align: end;
  font-family: Wadik;
  font-size: 1.2rem;
  font-weight: 500;
}

.other-order__manipulations-block, .your-offer__manipulations-block {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  display: flex;
}

.other-order__manipulations-block button, .your-offer__manipulations-block button {
  max-height: 34px;
}

.your-offer {
  height: 60px;
}

.your-offer.offer .your-offer__left-block, .your-offer.accepted .your-offer__left-block {
  flex-direction: column-reverse;
  flex-grow: 1;
  display: flex;
}

.your-offer.offer .your-offer__cards, .your-offer.accepted .your-offer__cards {
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  display: flex;
}

.your-offer.offer .your-offer__right-block, .your-offer.accepted .your-offer__right-block {
  display: none;
}

.your-offer__right-block {
  flex-direction: row;
  align-items: center;
}

.your-offer__price-container {
  justify-content: center;
  align-items: center;
  display: flex;
}

.your-offer__preview-img {
  object-position: 10% 0;
  object-fit: cover;
  min-width: 40px;
}

.your-offer__response {
  height: fit-content;
}

.your-offer__response .your-offer__left-block {
  flex-grow: 2;
  gap: 1rem;
  display: flex;
}

.your-offer__response .your-offer__right-block {
  justify-content: flex-end;
}

.your-offer__card {
  align-items: center;
  gap: .5rem;
  display: flex;
}

.your-offer__cards {
  flex-direction: column;
  align-items: start;
  gap: .5rem;
  display: flex;
}

.your-offer__exchange {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.exchange-window {
  flex-direction: column;
  padding-block: 1rem;
  display: flex;
  overflow-y: auto;
}

.exchange-window__card-preview {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.exchange-window__section-exchanged-card {
  flex-direction: column;
  flex-grow: 1;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.exchange-window__section-your-choice {
  flex-direction: column;
  display: flex;
}

.exchange-window__logic-block {
  z-index: 2000;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: #041023cc;
  border-radius: 20px 20px 0 0;
  flex-direction: column;
  align-content: stretch;
  gap: .4rem;
  width: 100%;
  padding: 1rem;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
}

.exchange-window__exchange-desc-container {
  width: 100%;
  display: flex;
}

.exchange-window__card-selection {
  flex-direction: column;
  align-content: stretch;
  gap: .5rem;
  display: flex;
}

.exchange-list {
  width: 100%;
  padding-inline: 1rem;
}

.exchange-list__element {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.exchange-list span {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

@media screen and (max-width: 370px) {
  .your-offer svg, .other-order svg {
    display: none;
  }
}

@media screen and (max-width: 330px) {
  .your-offer svg, .other-order svg {
    height: 25px;
  }

  .your-offer h4, .your-offer .light-button, .other-order h4, .other-order .light-button {
    font-size: 1rem;
  }
}

/* [project]/src/styles/inventory.scss.css [app-client] (css) */
.inventory {
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  padding-top: 3.6rem;
  display: flex;
  position: relative;
}

.inventory__navigation {
  padding-inline: 1rem;
  justify-content: flex-end;
  align-items: start;
  gap: .4rem;
  padding-right: 2rem;
  display: flex;
}

.inventory__link {
  color: #a476ea;
  background-color: #fff;
  border-bottom: 2px solid #a476ea;
  padding: .2rem .6rem 1rem;
  font-size: 1.1rem;
  font-weight: 500;
}

.inventory__link-admin {
  color: #fff;
  background-color: #271c3a;
  border: 2px solid #a476ea;
  border-radius: 10px;
  padding: .3rem .6rem;
}

.inventory__admin-nav {
  background-color: #fff;
  border-radius: 0 15px 15px 0;
  gap: 1rem;
  margin-top: .4rem;
  padding: .4rem .5rem;
  display: flex;
}

.inventory__top {
  z-index: 140;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  top: 72px;
}

.desc-panel {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 130;
  background-color: #a476ea66;
  border-block: 1px solid #473664;
  flex-direction: column-reverse;
  align-items: stretch;
  gap: 1rem;
  width: 100%;
  padding: .4rem;
  display: flex;
}

.desc-panel__container, .desc-panel__admin-logic {
  justify-content: space-between;
  display: flex;
}

.pet {
  aspect-ratio: 1;
  border-radius: 100%;
  width: 160px;
  height: fit-content;
  transition-duration: .3s;
  position: relative;
  overflow: hidden;
}

.pet__preview-container img {
  object-fit: contain;
}

.pet.selected {
  transform: translateY(-10%)rotateZ(5deg);
}

.pet-frame {
  pointer-events: none;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.pet-frame__top {
  padding-inline: 1rem;
}

.pet-frame__rating {
  clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%, 50% 75%);
  background-color: #fff;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 60px;
  display: flex;
}

.pet-frame__bottom svg, .pet-frame__cover {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.pet-frame__bottom {
  position: relative;
}

.pet-frame__bottom svg {
  z-index: 100;
  width: 160px;
  bottom: -5px;
}

.pet-frame__cover {
  z-index: 101;
  flex-direction: column;
  gap: .3rem;
  display: flex;
  top: -50px;
}

.pet-frame__name {
  text-wrap: nowrap;
}

.pet-frame__name, .pet-frame__element {
  z-index: 200;
  justify-content: center;
  align-items: center;
  display: flex;
}

.pet-frame__text {
  color: #271c3a;
  font-size: .9rem;
  font-weight: 700;
}

.pet-frame__text-white {
  color: #fff;
}

.pet-frame__element img {
  object-fit: contain;
  aspect-ratio: 1;
  width: 18px;
}

.pet-frame__S .pet-frame__bottom svg path:last-child {
  stroke: #f0b411;
  stroke-width: 2px;
}

.pet-frame__S .pet-frame__rating {
  background-color: #f0b411;
}

.pet-frame__A .pet-frame__bottom svg path:last-child {
  stroke: #833e96;
  stroke-width: 2px;
}

.pet-frame__A .pet-frame__rating {
  background-color: #833e96;
}

.pet-frame__B .pet-frame__bottom svg path:last-child {
  stroke: #00f7ff;
  stroke-width: 2px;
}

.pet-frame__B .pet-frame__rating {
  background-color: #00f7ff;
}

.pet-frame__C .pet-frame__bottom svg path:last-child {
  stroke: #5be98b;
  stroke-width: 2px;
}

.pet-frame__C .pet-frame__rating {
  background-color: #5be98b;
}

.market-offer {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.market-offer__body {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 2px solid #833e96;
  background-color: #fff;
  border-bottom: 4px solid #833e96;
  border-radius: 25px;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  display: flex;
}

.market-offer__info-list-container {
  background-color: #041023;
  border: 2px solid #833e96;
  border-radius: 20px;
  padding: .6rem;
}

.market-offer__info-block {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.market-offer__input {
  color: #fff;
  background-color: #041023;
  border: 2px solid #833e96;
  border-radius: 20px;
  flex-grow: 1;
  padding-inline: 1rem;
  font-size: 1.1rem;
}

.market-offer__input::placeholder {
  color: #dadada;
}

.market-offer__preview-container {
  justify-content: center;
  display: flex;
}

.market-offer__preview-img {
  object-fit: contain;
}

.market-offer__container {
  display: flex;
}

.market-offer__container-distance {
  justify-content: space-between;
}

.market-offer__container-inp {
  width: 100%;
  height: 40px;
}

.admin-panel {
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.admin-panel__form {
  flex-direction: column;
  gap: 2rem;
  width: 100%;
  max-width: 400px;
  display: flex;
}

.admin-panel__section-card {
  flex-direction: column;
  gap: 1rem;
  display: flex;
}

.admin-panel__section-logic {
  justify-content: space-around;
  display: flex;
}

.admin-panel__card-options {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.admin-panel__input-container {
  display: flex;
}

.admin-panel__input-container label {
  color: #fff;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  display: flex;
}

.admin-panel__input-container label input {
  max-width: 110px;
}

.admin-panel__input-inpt {
  color: #fff;
  text-align: center;
  background-color: #271c3a;
  border: 1px solid #a476ea;
  border-radius: 10px;
  flex-grow: 1;
  height: 30px;
}

.admin-panel__input-inpt:focus {
  outline: none;
}

.admin-panel__input-inpt::placeholder {
  color: #dadada;
}

.admin-panel__top {
  justify-content: flex-end;
  width: 100%;
  display: flex;
}

.admin-panel__mode-list {
  background-color: #473664;
  border: 2px solid #a476ea;
  border-radius: 15px;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem;
  display: flex;
}

.admin-panel__btn {
  color: #271c3a;
  background-color: #fff;
  border: 2px solid #a476ea;
  border-radius: 10px;
  padding: .4rem .8rem;
  font-size: 1rem;
}

.image-uploader {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.image-uploader__preview {
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 160px;
  display: flex;
  overflow: hidden;
}

.image-uploader__preview img {
  object-fit: cover;
}

.image-uploader__preview {
  background-color: #271c3a;
}

.image-uploader__label {
  cursor: pointer;
  border: 2px dashed #a476ea;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.image-uploader__label:after {
  content: "Загрузить карту";
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  text-align: center;
  opacity: 0;
  background-color: #04102380;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition-duration: .4s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.image-uploader__label:hover:after {
  opacity: 1;
}

.image-uploader__input {
  display: none;
}

.admin-logic {
  z-index: 110;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 70px;
  left: 0;
}

.cards-options {
  z-index: 120;
  flex-direction: column;
  align-items: end;
  gap: .6rem;
  width: 100%;
  display: flex;
  position: fixed;
  bottom: 60px;
  left: 0;
}

.cards-options__manage {
  width: 100%;
  padding-inline: .6rem;
  display: flex;
}

.card-logic {
  flex-direction: column;
  gap: .4rem;
  width: 100%;
  display: flex;
}

.upgrade-panel {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: #a476ea66;
  border: 1px solid #a476ea;
  border-radius: 10px;
  flex-grow: 1;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem .8rem .4rem .4rem;
  display: flex;
}

.upgrade-panel * {
  color: #fff;
}

.upgrade-panel__left-block {
  flex-direction: column;
  flex-grow: 1;
  gap: .5rem;
  display: flex;
}

.upgrade-panel__needed {
  justify-content: space-between;
  display: flex;
}

.upgrade-panel__right-block {
  justify-content: center;
  align-items: center;
  display: flex;
}

.upgrade-panel__experience {
  background-color: #5be98b4d;
  border: 1px solid #5be98b;
  border-radius: 5px;
  flex-grow: 1;
  height: 30px;
  position: relative;
  overflow: hidden;
}

.upgrade-panel__experience-indicator {
  justify-content: flex-start;
  align-items: center;
  padding-inline: .4rem;
  display: flex;
}

.upgrade-panel button {
  font-size: 1rem;
  font-weight: 550;
}

.upgrade-panel button:disabled {
  opacity: .6;
}

.upgrade-panel button:disabled:hover {
  cursor: not-allowed;
}

/* [project]/src/styles/battleSearch.scss.css [app-client] (css) */
.user-search {
  z-index: 300;
  clip-path: circle(1%);
  background-color: #041023;
  background-image: url("../media/background-anime-card.dcbfb97f.png");
  flex-direction: column;
  width: 100%;
  height: 100%;
  transition-duration: .4s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.user-search.opened {
  animation: .4s ease-in-out forwards show-user-search;
}

.user-search.to-hide {
  animation: .4s ease-in-out forwards close-user-search;
}

.user-search__container {
  flex-grow: 1;
  display: flex;
}

.user-search__container-rel {
  flex-direction: column;
  position: relative;
}

.user-search__container-cancel {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  display: flex;
  position: absolute;
  bottom: 20px;
  left: 0;
}

.user-search__search-block {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.user-search__search-text {
  text-wrap-mode: wrap;
  color: #fff;
  text-align: center;
  font-family: Wadik;
  font-size: 1.4rem;
  line-height: 2rem;
}

.user-search__search-text-container {
  aspect-ratio: 1;
  stroke-dasharray: 20% 50%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 2px solid #833e96;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 200px;
  padding: 2rem;
  transition-duration: .4s;
  display: flex;
  box-shadow: 0 0 28px #9257c433;
}

.user-search__search-text-container.search {
  animation: 1s ease-out infinite search-anim;
}

.user-search__search-text-container.found {
  border-color: #5be98b;
  box-shadow: 0 0 28px #5be98b33;
}

@keyframes show-user-search {
  to {
    clip-path: circle(100%);
  }
}

@keyframes close-user-search {
  from {
    clip-path: circle(100%);
  }

  to {
    clip-path: circle(0%);
  }
}

@keyframes search-anim {
  0% {
    border-color: #833e96;
    box-shadow: 0 0 28px #9257c433;
  }

  50% {
    border-color: #833e9633;
    box-shadow: 0 0 28px #9257c400;
  }

  100% {
    border-color: #833e96;
    box-shadow: 0 0 28px #9257c433;
  }
}

.battle-choice {
  flex-direction: column;
  flex-grow: 1;
  gap: 2rem;
  padding-block: 1rem;
  display: flex;
}

.battle-choice__top-block {
  flex-direction: column;
  gap: .8rem;
  display: flex;
}

.battle-choice__log {
  color: #fff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: lighter;
}

.battle-choice__title {
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  display: flex;
}

.battle-choice__t-el {
  color: #fff;
  text-align: center;
  font-size: 2rem;
}

.battle-choice__t-el-vs {
  font-family: Wadik;
  font-size: 2.2rem;
}

.battle-choice__t-el-you, .battle-choice__t-el-rival {
  letter-spacing: .1rem;
}

.battle-choice__t-el-you {
  color: #00f7ff;
}

.battle-choice__t-el-rival {
  color: #833e96;
}

.battle-choice__container-points {
  justify-content: space-around;
  transition-duration: .3s;
  display: flex;
}

.battle-choice__container-center {
  justify-content: center;
  display: flex;
}

.battle-choice__middle-block {
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
  display: flex;
}

.battle-choice__choice-point {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid #833e96;
  border-bottom-width: 3px;
  border-radius: 20px;
  flex-direction: column;
  gap: 2rem;
  padding: .8rem;
  display: flex;
  box-shadow: 0 0 13px -1px #ae86cf38;
}

.battle-choice__choice-point.to-hide {
  animation: .8s forwards hide-choice-point;
}

.battle-choice__choice-point.opened {
  animation: .8s forwards open-choice-point;
}

.battle-choice__choice {
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 1rem;
  display: flex;
}

@keyframes hide-choice-point {
  to {
    transform: scale(0)translateY(100%);
  }
}

@keyframes open-choice-point {
  from {
    transform: translateX(-200%);
  }

  to {
    transform: translateX(0);
  }
}

.battle-point {
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: fit-content;
  transition-duration: .1s;
  display: flex;
}

.battle-point.selectable:hover {
  cursor: pointer;
}

.battle-point.selected {
  transform: scale(1.05);
}

.battle-point.selection .battle-point__container-preview {
  width: 80px;
  box-shadow: unset;
  border-radius: 15px;
}

.battle-point__container {
  display: flex;
}

.battle-point__container-preview {
  aspect-ratio: 1;
  background-color: #833e96;
  border: 2px solid #fff;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  width: 100px;
  overflow: hidden;
  box-shadow: 0 0 14px 6px #ffffff0f;
}

.battle-point__container-name {
  justify-content: center;
  align-items: center;
}

.battle-point__name {
  color: #fff;
  text-align: center;
}

.battle-point__preview {
  aspect-ratio: 1;
  object-fit: contain;
  width: 100%;
}

.battle-point__preview-question {
  color: #fff;
  font-family: Wadik;
  font-size: 2rem;
  font-weight: 500;
}

.battle-timer {
  border: 2px solid #041023;
  border-radius: 10px;
  outline: 1.4px solid #fff;
  width: 100%;
  height: 10px;
  position: relative;
  overflow: hidden;
}

.battle-timer.running:after {
  content: " ";
  transform-origin: 50%;
  background-color: #5be98b;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  animation: 8s linear forwards timer-out;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0%);
}

.battle-timer.finished:after {
  content: " ";
  transform-origin: 50%;
  background-color: #5be98b;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes timer-out {
  from {
    transform: scaleX(0%);
  }

  to {
    transform: scaleX(100%);
  }
}

/* [project]/src/styles/fight.scss.css [app-client] (css) */
.fight {
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 2rem;
  display: flex;
}

.fight__rival, .fight__battle-scene {
  justify-content: center;
  align-items: center;
  display: flex;
}

.fight__user-manager {
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.fight__card-inventory {
  border: 1.2px solid #833e96;
  border-top-width: 3px;
  border-bottom: unset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 25px 25px 0 0;
  width: 100%;
  max-width: 400px;
  padding: .5rem;
  display: flex;
}

.fight__inventory {
  scroll-snap-type: x mandatory;
  border-radius: 15px;
  flex-grow: 1;
  align-items: center;
  gap: calc(50% - 150px);
  height: 170px;
  display: flex;
  overflow: auto visible;
}

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

.fight__inventory .card:hover, .fight__inventory .card.selected {
  border-block-color: #fff;
  transform: scale(1);
}

.fight__inventory .card:hover .card__stats-container, .fight__inventory .card.selected .card__stats-container {
  opacity: 1;
}

.flip-card {
  perspective: 1000px;
  aspect-ratio: .7;
  height: 140px;
  display: flex;
}

.flip-card.flip .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__inner {
  transform-style: preserve-3d;
  flex-grow: 1;
  transition: transform .8s;
  display: flex;
  position: relative;
}

.flip-card__front, .flip-card__back {
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.flip-card__back {
  background-color: #833e96;
  border: 2px solid #fff;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: rotateY(180deg);
}

.flip-card__text {
  color: #fff;
  font-family: Wadik;
  font-size: 1.8rem;
}

.health-bar {
  flex-grow: 1;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 400px;
  display: flex;
  position: relative;
}

.health-bar.you .health-bar__user-name {
  color: #00f7ff;
}

.health-bar.rival .health-bar__user-name {
  color: #833e96;
}

.health-bar__pet-container {
  aspect-ratio: 1;
  z-index: 100;
  border: 1.2px solid #0000;
  border-radius: 100%;
  height: 36px;
  position: absolute;
  bottom: 50%;
  left: 5%;
  overflow: hidden;
}

.health-bar__pet-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.health-bar__pet-container.pet-s {
  border-color: #f0b411;
}

.health-bar__pet-container.pet-a {
  border-color: #833e96;
}

.health-bar__pet-container.pet-b {
  border-color: #00f7ff;
}

.health-bar__pet-container.pet-c {
  border-color: #5be98b;
}

.health-bar__user-logo-container {
  background-color: #dadada;
  border: 2px solid #fff;
  border-radius: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
  overflow: hidden;
}

.health-bar__user-logo-container img {
  object-fit: contain;
}

.health-bar__user-name {
  color: #833e96;
  font-size: 1.4rem;
  font-weight: 600;
}

.health-bar__user-health-bar-container {
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

.health-bar__sl-container {
  border: 2px solid #041023;
  border-radius: 25px;
  outline: 1.4px solid #fff;
  flex-grow: 1;
  flex-shrink: 1;
  height: 10px;
  position: relative;
  overflow: hidden;
}

.health-bar__slider {
  transform-origin: 0;
  background-color: #5be98b;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 330px) {
  .fight__inventory {
    gap: calc(50% - 120px);
  }
}

.battle-scene {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 25px;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  max-width: 400px;
  padding: .5rem;
  display: flex;
}

.battle-scene__cards-list {
  justify-content: space-between;
  display: flex;
}

.battle-scene__container-battle {
  flex-direction: column;
  gap: .5rem;
  display: flex;
}

.battle-scene__container-manage {
  justify-content: center;
  align-items: center;
  display: flex;
}

.battle-scene .card__stats-container {
  opacity: 1;
}

.battle-scene .card {
  flex-shrink: 0;
  transition: opacity 2s;
}

.battle-scene .card:hover {
  border-block-color: #041023;
  transform: scale(1);
}

.battle-scene .card.selected {
  border-block-color: #fff;
  transform: scale(1);
}

.battle-scene .card.defeated {
  opacity: 0;
  transition-delay: .5s;
}

.battle-scene .card.defeated .card__stat:first-child .card__stat-text {
  color: #c76666;
  font-weight: 700;
}

.battle-scene__fight-container-rival .card:hover {
  border-block-color: #041023;
}

.fight-header {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1.2px solid #833e96;
  order: -1;
  place-content: stretch;
  height: 60px;
  padding-inline: 1rem;
  display: flex;
}

.fight-header__container {
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.fight-header__right-block {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.fight-header__timer-text, .fight-header__state-text {
  color: #833e96;
  font-size: 1.2rem;
}

.weather-element {
  aspect-ratio: 1;
  border: 1px solid #041023;
  border-radius: 100%;
  outline: 2px solid #fff;
  overflow: hidden;
}

.finish-window, .finish-window__body {
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

.finish-window__section-main {
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  display: flex;
}

.finish-window__container-score {
  justify-content: stretch;
  width: 100%;
  display: flex;
}

.finish-window__container-logic {
  justify-content: center;
  align-items: center;
  display: flex;
}

.finish-window__score-container {
  background-color: #dadada;
  border: 2px solid #833e96;
  border-bottom-width: 4px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1rem;
  display: flex;
}

.finish-window__score-text {
  color: #041023;
  font-size: 2rem;
  font-weight: bold;
}

.finish-window__status-text {
  color: #833e96;
  font-family: Wadik;
  font-size: 2rem;
}

/* [project]/src/styles/rating.scss.css [app-client] (css) */
.rating {
  padding-top: 2rem;
  flex-grow: 1;
  padding-inline: 1rem;
  display: flex;
}

.rating__rb {
  flex-direction: column;
  flex-grow: 1;
  gap: 2rem;
  display: flex;
}

.rating__title-container {
  border-inline: 1px solid #041023;
  justify-content: center;
  align-items: center;
  height: 40px;
  display: flex;
}

.rating__title {
  color: #041023;
}

.rating__list-container {
  flex-direction: column;
  flex-grow: 1;
  display: flex;
}

.rating__list {
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  display: flex;
}

.rating-element {
  background: #fff;
  border: 2px solid #fff;
  border-radius: 15px;
  outline: 1px solid #a476ea;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  display: flex;
}

.rating-element__left {
  align-items: center;
  gap: 1rem;
  display: flex;
}

.rating-element__text {
  color: #271c3a;
}

.rating-element__text-username {
  background-color: #fff;
  border: 2px solid #a476ea;
  border-radius: 20px;
  padding: .2rem .6rem;
}

.rating-element__text-number {
  font-size: 1.6rem;
  font-weight: 800;
}

.rating-element__text-number.prize {
  color: #271c3a;
}

.rating-element__text-score {
  color: #fff;
  background-color: #271c3a;
  border-radius: 10px;
  padding: .2rem .4rem;
}

.rating-element__text-score.rating-1 {
  color: #f0b411;
}

.rating-element__text-score.rating-2 {
  color: #dadada;
}

.rating-element__text-score.rating-3 {
  color: #c76666;
}

/*# sourceMappingURL=src_styles_abb6b246._.css.map*/